@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/charts/xy-chart/components/toolbar/ZoomInOutButtons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/ZoomInOutButtons.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useTriggerZoom } from '../../../core/components/zoom/hooks/useTriggerZoom.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { ZOOM_ACTIONS, ZOOM_CHANGE_TYPE } from '../../../core/types/zoom.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useZoomState } from '../../store/selectors.js';\nimport { useApplyZoomDelta } from '../overlay/hooks/useApplyZoomDelta.js';\n\nexport const ZoomInOutButtons = () => {\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const { zoomInEnabled: zoomInState, zoomOutEnabled: zoomOutState } =\n    useZoomState();\n  const { axesMetadata } = useXYChartData();\n\n  const [zoomInEnabled, zoomOutEnabled] = axesMetadata.isZoomEnabled\n    ? [zoomInState, zoomOutState]\n    : [false, false];\n\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const zoomInAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n  };\n  const zoomOutAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n  };\n\n  const zoomInShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowUp)}`;\n  const zoomOutShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowDown)}`;\n\n  const controlStyle = { marginRight: Spacings.Size2 };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomIn)}\n        prefixIcon={<ZoomInIcon />}\n        tooltipKeyShortcut={zoomInShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomInAction)}\n        onClick={zoomInAction}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n      />\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomOutAction)}\n        onClick={zoomOutAction}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
-  "mappings": "AAmDI,mBAGgB,KAHhB;AAnDJ,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB;AAC/C,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,EAAE,eAAe,aAAa,gBAAgB,aAAa,IAC/D,aAAa;AACf,QAAM,EAAE,aAAa,IAAI,eAAe;AAExC,QAAM,CAAC,eAAe,cAAc,IAAI,aAAa,gBACjD,CAAC,aAAa,YAAY,IAC1B,CAAC,OAAO,KAAK;AAEjB,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,eAAe,MAAM;AACzB,gBAAY,iBAAiB,MAAM;AAAA,EACrC;AACA,QAAM,gBAAgB,MAAM;AAC1B,gBAAY,iBAAiB,OAAO;AAAA,EACtC;AAEA,QAAM,iBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,iBAAiB,iBAAiB,CAAC;AAC5D,QAAM,kBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,iBAAiB,mBAAmB,CAAC;AAE9D,QAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,aAAa,KAAK,cAAc,iBAAiB,MAAM;AAAA,QACvD,YAAY,oBAAC,cAAW;AAAA,QACxB,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,YAAY;AAAA,QAC3C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,iBAAiB,OAAO;AAAA,QACxD,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,aAAa;AAAA,QAC5C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useTriggerZoom } from '../../../core/components/zoom/hooks/useTriggerZoom.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { ZOOM_ACTIONS, ZOOM_CHANGE_TYPE } from '../../../core/types/zoom.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useZoomState } from '../../store/selectors.js';\nimport { useApplyZoomDelta } from '../overlay/hooks/useApplyZoomDelta.js';\n\nexport const ZoomInOutButtons = () => {\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const { zoomInEnabled: zoomInState, zoomOutEnabled: zoomOutState } =\n    useZoomState();\n  const { axesMetadata } = useXYChartData();\n\n  const [zoomInEnabled, zoomOutEnabled] = axesMetadata.isZoomEnabled\n    ? [zoomInState, zoomOutState]\n    : [false, false];\n\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const zoomInAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n  };\n  const zoomOutAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n  };\n\n  const zoomInShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowUp)}`;\n  const zoomOutShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowDown)}`;\n\n  const controlStyle = { marginRight: Spacings.Size2 };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomIn)}\n        prefixIcon={<ZoomInIcon />}\n        tooltipKeyShortcut={zoomInShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomInAction)}\n        onClick={zoomInAction}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n        data-dt-name=\"ToolbarZoomIn\"\n      />\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomOutAction)}\n        onClick={zoomOutAction}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n        data-dt-name=\"ToolbarZoomOut\"\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
+  "mappings": "AAmDI,mBAGgB,KAHhB;AAnDJ,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB;AAC/C,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,EAAE,eAAe,aAAa,gBAAgB,aAAa,IAC/D,aAAa;AACf,QAAM,EAAE,aAAa,IAAI,eAAe;AAExC,QAAM,CAAC,eAAe,cAAc,IAAI,aAAa,gBACjD,CAAC,aAAa,YAAY,IAC1B,CAAC,OAAO,KAAK;AAEjB,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,eAAe,MAAM;AACzB,gBAAY,iBAAiB,MAAM;AAAA,EACrC;AACA,QAAM,gBAAgB,MAAM;AAC1B,gBAAY,iBAAiB,OAAO;AAAA,EACtC;AAEA,QAAM,iBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,iBAAiB,iBAAiB,CAAC;AAC5D,QAAM,kBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,iBAAiB,mBAAmB,CAAC;AAE9D,QAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,aAAa,KAAK,cAAc,iBAAiB,MAAM;AAAA,QACvD,YAAY,oBAAC,cAAW;AAAA,QACxB,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,YAAY;AAAA,QAC3C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA,QACP,gBAAa;AAAA;AAAA,IACf;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,iBAAiB,OAAO;AAAA,QACxD,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,aAAa;AAAA,QAC5C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA,QACP,gBAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/ZoomModeButton.js

@@ -85,7 +85,8 @@ const ZoomModeButton = () => {
       onKeyDown: handleKeyDown,
       tabIndex,
       tooltipKeyShortcut,
-      placement: "menu"
+      placement: "menu",
+      "data-dt-name": "ToolbarZoomMode"
     }
   );
 };

package/esm/charts/xy-chart/components/toolbar/ZoomModeButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/ZoomModeButton.tsx"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const overlayRef = useXYChartOverlayRef();\n  const intl = useIntl();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const handleZoomMode = () => {\n    if (interactionMode !== 'zoom') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('zoom');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      if (!isNil(overlayRef.current)) {\n        const bounds = overlayRef.current.getBoundingClientRect();\n\n        const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n        if (interactionMode !== INTERACTION_MODE.Explore) {\n          setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n        }\n\n        setState(\n          reduceExploreSelect({\n            start,\n            end,\n            finished: true,\n            accessible: true,\n            variant: 'zoom',\n            selectionPercentage: getPercentageFromPixel([start, end], width),\n          }),\n        );\n      }\n    }\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'CONTROL',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeZoom)}\n      onClick={handleZoomMode}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      placement=\"menu\"\n    />\n  );\n};\n"],
-  "mappings": "AA8FkB;AA9FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,aAAa,qBAAqB;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,oBAAoB,QAAQ;AAC9B,eAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,IACvD;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,MAAM;AAAA,MACnC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,aAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,EACvD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,UAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,cAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,cAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE,YAAI,oBAAoB,iBAAiB,SAAS;AAChD,mBAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,QAC1D;AAEA;AAAA,UACE,oBAAoB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,UACjE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,uCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const overlayRef = useXYChartOverlayRef();\n  const intl = useIntl();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const handleZoomMode = () => {\n    if (interactionMode !== 'zoom') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('zoom');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      if (!isNil(overlayRef.current)) {\n        const bounds = overlayRef.current.getBoundingClientRect();\n\n        const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n        if (interactionMode !== INTERACTION_MODE.Explore) {\n          setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n        }\n\n        setState(\n          reduceExploreSelect({\n            start,\n            end,\n            finished: true,\n            accessible: true,\n            variant: 'zoom',\n            selectionPercentage: getPercentageFromPixel([start, end], width),\n          }),\n        );\n      }\n    }\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'CONTROL',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeZoom)}\n      onClick={handleZoomMode}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarZoomMode\"\n    />\n  );\n};\n"],
+  "mappings": "AA8FkB;AA9FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,aAAa,qBAAqB;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,oBAAoB,QAAQ;AAC9B,eAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,IACvD;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,MAAM;AAAA,MACnC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,aAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,EACvD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,UAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,cAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,cAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE,YAAI,oBAAoB,iBAAiB,SAAS;AAChD,mBAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,QAC1D;AAEA;AAAA,UACE,oBAAoB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,UACjE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,uCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltip.tsx"],
-  "sourcesContent": ["\nimport { ClosestPointTooltipBody } from './ClosestPointTooltipBody.js';\nimport { ClosestPointTooltipHeader } from './ClosestPointTooltipHeader.js';\nimport type { Datapoint, Metadata } from './types.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\n\nexport function ClosestPointTooltip<T extends object>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: Datapoint;\n  series: T;\n  seriesToMetadata: Metadata<T>;\n}>) {\n  return (\n    <>\n      <ClosestPointTooltipHeader\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n      <Divider orientation=\"horizontal\" />\n      <ClosestPointTooltipBody\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n    </>\n  );\n}\n"],
-  "mappings": "AAgBI,mBACE,KADF;AAfJ,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAE1C,SAAS,eAAe;AAEjB,SAAS,oBAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,WAAQ,aAAY,cAAa;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { ClosestPointTooltipBody } from './ClosestPointTooltipBody.js';\nimport { ClosestPointTooltipHeader } from './ClosestPointTooltipHeader.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport type {\n  ClosestDatapoint,\n  ClosestSeries,\n  ClosestSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function ClosestPointTooltip<T extends ClosestSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: ClosestDatapoint<T>;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n}>) {\n  return (\n    <>\n      <ClosestPointTooltipHeader\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n      <Divider orientation=\"horizontal\" />\n      <ClosestPointTooltipBody\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n    </>\n  );\n}\n"],
+  "mappings": "AAmBI,mBACE,KADF;AAnBJ,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,eAAe;AAOjB,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,WAAQ,aAAY,cAAa;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltipBody.js

@@ -1,12 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { safeGet } from "../../../../core/utils/safe-get.js";
+import { buildClosestPointTooltipBodyProps } from "./closestPointTooltipBodyUtils.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
-import { getTooltipFormatter } from "../utils/get-tooltip-formatter.js";
-import { XYChartTooltipBody } from "../XYChartTooltipBody/XYChartTooltipBody.js";
-import { useClosestPointTooltipHeaderContent } from "./hooks/useClosestPointTooltipHeaderContent.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
-import { toRelative } from "../../../utils/value-representation.js";
+import { XYChartTooltipBody } from "../XYChartTooltipBody/XYChartTooltipBody.js";
 function ClosestPointTooltipBody({
   datapoint,
   series,
@@ -15,38 +12,16 @@ function ClosestPointTooltipBody({
   const axisIdToFormatter = useAxesFormatter();
   const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();
   const intl = useIntl();
-  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);
-  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);
-  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);
-  const datapointMetadata = datapointMetadataMap.get(datapoint);
-  const binDomain = datapointMetadata?.binDomain;
-  const isRelativeFromBinDomain = typeof binDomain === "number" && binDomain;
-  const v1GrowingAccessor = datapointMetadata?.baseline === "x" ? "y1" : "x1";
-  const isDatapointAlone = binDomain === datapoint[v1GrowingAccessor];
-  const isStackedRelative = isRelativeFromBinDomain && !isDatapointAlone;
-  const xDomain = isStackedRelative && datapointMetadata.baseline !== "x" ? { min: binDomain * -1, max: binDomain } : safeGet(axisIdToScaleDomain, xAxis.id);
-  const yDomain = isStackedRelative && datapointMetadata.baseline !== "y" ? { min: binDomain * -1, max: binDomain } : safeGet(axisIdToScaleDomain, yAxis.id);
-  const { text: textX, duration: durationX } = useClosestPointTooltipHeaderContent(
-    [datapoint.x0, datapoint.x1],
-    xFormatter,
-    xAxis.isRelative ? (value) => toRelative(value, xDomain) : void 0
-  );
-  const { text: textY, duration: durationY } = useClosestPointTooltipHeaderContent(
-    [datapoint.y0, datapoint.y1],
-    yFormatter,
-    yAxis.isRelative ? (value) => toRelative(value, yDomain) : void 0
-  );
-  return /* @__PURE__ */ jsx(
-    XYChartTooltipBody,
-    {
-      xAxisLabel: xAxis.label,
-      yAxisLabel: yAxis.label,
-      xAxisValue: textX,
-      yAxisValue: textY,
-      xAxisDuration: durationX,
-      yAxisDuration: durationY
-    }
-  );
+  const tooltipBodyProps = buildClosestPointTooltipBodyProps({
+    datapoint,
+    series,
+    seriesToMetadata,
+    axisIdToFormatter,
+    axisIdToScaleDomain,
+    datapointMetadataMap,
+    intl
+  });
+  return /* @__PURE__ */ jsx(XYChartTooltipBody, { ...tooltipBodyProps });
 }
 ClosestPointTooltipBody["displayName"] = "ClosestPointTooltipBody";
 export {

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltipBody.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltipBody.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport type { Datapoint, Metadata } from './types.js';\nimport type { MinMax } from '../../../../core/types/min-max.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { getTooltipFormatter } from '../utils/get-tooltip-formatter.js';\nimport { XYChartTooltipBody } from '../XYChartTooltipBody/XYChartTooltipBody.js';\nimport { useClosestPointTooltipHeaderContent } from './hooks/useClosestPointTooltipHeaderContent.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { toRelative } from '../../../utils/value-representation.js';\n\nexport interface ClosestPointTooltipBodyProps<\n  T extends object,\n  K extends Datapoint,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: Metadata<T>;\n}\n\nexport function ClosestPointTooltipBody<T extends object, K extends Datapoint>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<ClosestPointTooltipBodyProps<T, K>>) {\n  const axisIdToFormatter = useAxesFormatter();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const intl = useIntl();\n\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n\n  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);\n  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);\n\n  const datapointMetadata = datapointMetadataMap.get(datapoint);\n  const binDomain = datapointMetadata?.binDomain;\n  const isRelativeFromBinDomain = typeof binDomain === 'number' && binDomain;\n  const v1GrowingAccessor = datapointMetadata?.baseline === 'x' ? 'y1' : 'x1';\n  const isDatapointAlone = binDomain === datapoint[v1GrowingAccessor];\n\n  const isStackedRelative = isRelativeFromBinDomain && !isDatapointAlone;\n\n  const xDomain =\n    isStackedRelative && datapointMetadata.baseline !== 'x'\n      ? { min: binDomain * -1, max: binDomain }\n      : (safeGet(axisIdToScaleDomain, xAxis.id) as MinMax);\n\n  const yDomain =\n    isStackedRelative && datapointMetadata.baseline !== 'y'\n      ? { min: binDomain * -1, max: binDomain }\n      : (safeGet(axisIdToScaleDomain, yAxis.id) as MinMax);\n\n  const { text: textX, duration: durationX } =\n    useClosestPointTooltipHeaderContent(\n      [datapoint.x0, datapoint.x1],\n      xFormatter,\n      xAxis.isRelative ? (value) => toRelative(value, xDomain) : undefined,\n    );\n  const { text: textY, duration: durationY } =\n    useClosestPointTooltipHeaderContent(\n      [datapoint.y0, datapoint.y1],\n      yFormatter,\n      yAxis.isRelative ? (value) => toRelative(value, yDomain) : undefined,\n    );\n  return (\n    <XYChartTooltipBody\n      xAxisLabel={xAxis.label}\n      yAxisLabel={yAxis.label}\n      xAxisValue={textX}\n      yAxisValue={textY}\n      xAxisDuration={durationX}\n      yAxisDuration={durationY}\n    />\n  );\n}\n\nClosestPointTooltipBody['displayName'] = 'ClosestPointTooltipBody';\n"],
-  "mappings": "AAkEI;AAlEJ,SAAS,eAAe;AAIxB,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAWpB,SAAS,wBAA+D;AAAA,EAC7E;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AAEzD,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AAErE,QAAM,oBAAoB,qBAAqB,IAAI,SAAS;AAC5D,QAAM,YAAY,mBAAmB;AACrC,QAAM,0BAA0B,OAAO,cAAc,YAAY;AACjE,QAAM,oBAAoB,mBAAmB,aAAa,MAAM,OAAO;AACvE,QAAM,mBAAmB,cAAc,UAAU,iBAAiB;AAElE,QAAM,oBAAoB,2BAA2B,CAAC;AAEtD,QAAM,UACJ,qBAAqB,kBAAkB,aAAa,MAChD,EAAE,KAAK,YAAY,IAAI,KAAK,UAAU,IACrC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,UACJ,qBAAqB,kBAAkB,aAAa,MAChD,EAAE,KAAK,YAAY,IAAI,KAAK,UAAU,IACrC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE,CAAC,UAAU,IAAI,UAAU,EAAE;AAAA,IAC3B;AAAA,IACA,MAAM,aAAa,CAAC,UAAU,WAAW,OAAO,OAAO,IAAI;AAAA,EAC7D;AACF,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE,CAAC,UAAU,IAAI,UAAU,EAAE;AAAA,IAC3B;AAAA,IACA,MAAM,aAAa,CAAC,UAAU,WAAW,OAAO,OAAO,IAAI;AAAA,EAC7D;AACF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,eAAe;AAAA;AAAA,EACjB;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildClosestPointTooltipBodyProps } from './closestPointTooltipBodyUtils.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport type {\n  ClosestDatapoint,\n  ClosestSeries,\n  ClosestSeriesToMetadata,\n} from '../../../utils/type-guards.js';\nimport { XYChartTooltipBody } from '../XYChartTooltipBody/XYChartTooltipBody.js';\n\nexport interface ClosestPointTooltipBodyProps<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n}\n\nexport function ClosestPointTooltipBody<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<ClosestPointTooltipBodyProps<T, K>>) {\n  const axisIdToFormatter = useAxesFormatter();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const intl = useIntl();\n\n  const tooltipBodyProps = buildClosestPointTooltipBodyProps({\n    datapoint,\n    series,\n    seriesToMetadata,\n    axisIdToFormatter,\n    axisIdToScaleDomain,\n    datapointMetadataMap,\n    intl,\n  });\n\n  return <XYChartTooltipBody {...tooltipBodyProps} />;\n}\n\nClosestPointTooltipBody['displayName'] = 'ClosestPointTooltipBody';\n"],
+  "mappings": "AA2CS;AA3CT,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAM/B,SAAS,0BAA0B;AAW5B,SAAS,wBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,OAAO,QAAQ;AAErB,QAAM,mBAAmB,kCAAkC;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,sBAAoB,GAAG,kBAAkB;AACnD;AAEA,wBAAwB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltipHeader.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { getDefaultAction } from "../../../../core/components/series-action/hooks/useDefaultAction.js";
-import { safeGet } from "../../../../core/utils/safe-get.js";
+import { buildClosestPointTooltipHeaderProps } from "./closestPointTooltipHeaderUtils.js";
+import { useAreaData } from "../../../hooks/useAreaData.js";
+import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
 import { XYChartTooltipHeader } from "../XYChartTooltipHeader/XYChartTooltipHeader.js";
 function ClosestPointTooltipHeader({
@@ -8,33 +9,18 @@ function ClosestPointTooltipHeader({
   series,
   seriesToMetadata
 }) {
+  const { filteredSeriesWithDatapoints } = useAreaData();
+  const { datapointMetadataMap } = useXYChartData();
   const { truncationMode } = useXYChartTruncationMode();
-  const metadata = safeGet(seriesToMetadata, series);
-  const {
-    name = "",
-    color = { Default: "blue" },
-    actions: seriesActions
-  } = metadata;
-  const shape = "shape" in metadata ? metadata.shape : void 0;
-  const content = {
-    id: crypto.randomUUID(),
-    name
-  };
-  const actions = () => seriesActions?.({
-    ...datapoint,
-    name
+  const tooltipHeaderProps = buildClosestPointTooltipHeaderProps({
+    datapoint,
+    series,
+    seriesToMetadata,
+    seriesWithDatapoints: filteredSeriesWithDatapoints,
+    datapointMetadataMap,
+    truncationMode
   });
-  return /* @__PURE__ */ jsx(
-    XYChartTooltipHeader,
-    {
-      color: color.Default,
-      name,
-      actions,
-      defaultActions: getDefaultAction(content),
-      truncationMode,
-      shape
-    }
-  );
+  return /* @__PURE__ */ jsx(XYChartTooltipHeader, { ...tooltipHeaderProps });
 }
 ClosestPointTooltipHeader["displayName"] = "ClosestPointTooltipHeader";
 export {

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltipHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltipHeader.tsx"],
-  "sourcesContent": ["import type { Datapoint, Metadata } from './types.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport { XYChartTooltipHeader } from '../XYChartTooltipHeader/XYChartTooltipHeader.js';\n\nexport interface ClosestPointTooltipHeaderProps<\n  T extends object,\n  K extends Datapoint,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: Metadata<T>;\n}\n\nexport function ClosestPointTooltipHeader<\n  T extends object,\n  K extends Datapoint,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<ClosestPointTooltipHeaderProps<T, K>>) {\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const {\n    name = '',\n    color = { Default: 'blue' },\n    actions: seriesActions,\n  } = metadata;\n\n  const shape = 'shape' in metadata ? metadata.shape : undefined;\n\n  const content = {\n    id: crypto.randomUUID(),\n    name: name,\n  };\n\n  const actions = () =>\n    (\n      seriesActions as (\n        datapoint: K & { name: string },\n      ) => SeriesActionsTemplate\n    )?.({\n      ...datapoint,\n      name,\n    });\n\n  return (\n    <XYChartTooltipHeader\n      color={color.Default}\n      name={name}\n      actions={actions}\n      defaultActions={getDefaultAction(content)}\n      truncationMode={truncationMode}\n      shape={shape}\n    />\n  );\n}\n\nClosestPointTooltipHeader['displayName'] = 'ClosestPointTooltipHeader';\n"],
-  "mappings": "AAoDI;AAnDJ,SAAS,wBAAwB;AAEjC,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AAW9B,SAAS,0BAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ,EAAE,SAAS,OAAO;AAAA,IAC1B,SAAS;AAAA,EACX,IAAI;AAEJ,QAAM,QAAQ,WAAW,WAAW,SAAS,QAAQ;AAErD,QAAM,UAAU;AAAA,IACd,IAAI,OAAO,WAAW;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,UAAU,MAEZ,gBAGE;AAAA,IACF,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA,gBAAgB,iBAAiB,OAAO;AAAA,MACxC;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,0BAA0B,aAAa,IAAI;",
+  "sourcesContent": ["import { buildClosestPointTooltipHeaderProps } from './closestPointTooltipHeaderUtils.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport {\n  type ClosestDatapoint,\n  type ClosestSeries,\n  type ClosestSeriesToMetadata,\n} from '../../../utils/type-guards.js';\nimport { XYChartTooltipHeader } from '../XYChartTooltipHeader/XYChartTooltipHeader.js';\n\nexport interface ClosestPointTooltipHeaderProps<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n}\n\nexport function ClosestPointTooltipHeader<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<ClosestPointTooltipHeaderProps<T, K>>) {\n  const { filteredSeriesWithDatapoints } = useAreaData();\n  const { datapointMetadataMap } = useXYChartData();\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const tooltipHeaderProps = buildClosestPointTooltipHeaderProps({\n    datapoint,\n    series,\n    seriesToMetadata,\n    seriesWithDatapoints: filteredSeriesWithDatapoints,\n    datapointMetadataMap,\n    truncationMode,\n  });\n\n  return <XYChartTooltipHeader {...tooltipHeaderProps} />;\n}\n\nClosestPointTooltipHeader['displayName'] = 'ClosestPointTooltipHeader';\n"],
+  "mappings": "AAyCS;AAzCT,SAAS,2CAA2C;AACpD,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAMzC,SAAS,4BAA4B;AAW9B,SAAS,0BAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,QAAM,EAAE,6BAA6B,IAAI,YAAY;AACrD,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAChD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM,qBAAqB,oCAAoC;AAAA,IAC7D;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,wBAAsB,GAAG,oBAAoB;AACvD;AAEA,0BAA0B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipBodyUtils.js

@@ -0,0 +1,61 @@
+import { safeGet } from "../../../../core/utils/safe-get.js";
+import {
+  isAreaTooltipContext
+} from "../../../utils/type-guards.js";
+import { toRelative } from "../../../utils/value-representation.js";
+import { getTooltipFormatter } from "../utils/get-tooltip-formatter.js";
+import { getClosestPointTooltipBodyContent } from "./hooks/getClosestPointTooltipBodyContent.js";
+const buildClosestPointTooltipBodyProps = ({
+  datapoint,
+  series,
+  seriesToMetadata,
+  axisIdToFormatter,
+  axisIdToScaleDomain,
+  datapointMetadataMap,
+  intl
+}) => {
+  const seriesMetadata = safeGet(seriesToMetadata, series);
+  const enrichedDatapoint = {
+    series,
+    datapoint,
+    metadata: seriesMetadata
+  };
+  const { xAxis, yAxis } = enrichedDatapoint.metadata;
+  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);
+  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);
+  const datapointMetadata = safeGet(datapointMetadataMap, datapoint);
+  const binDomain = datapointMetadata?.binDomain;
+  let xDomain = safeGet(axisIdToScaleDomain, xAxis.id);
+  let yDomain = safeGet(axisIdToScaleDomain, yAxis.id);
+  if (isAreaTooltipContext(enrichedDatapoint)) {
+    const { isStacked } = enrichedDatapoint.metadata;
+    if (isStacked && datapointMetadata.baseline !== "x" && binDomain) {
+      xDomain = { min: binDomain * -1, max: binDomain };
+    }
+    if (isStacked && datapointMetadata.baseline !== "y" && binDomain) {
+      yDomain = { min: binDomain * -1, max: binDomain };
+    }
+  }
+  const { text: textX, duration: durationX } = getClosestPointTooltipBodyContent(
+    [datapoint.x0, datapoint.x1],
+    xFormatter,
+    xAxis.isRelative ? (value) => toRelative(value, xDomain) : void 0
+  );
+  const { text: textY, duration: durationY } = getClosestPointTooltipBodyContent(
+    [datapoint.y0, datapoint.y1],
+    yFormatter,
+    yAxis.isRelative ? (value) => toRelative(value, yDomain) : void 0
+  );
+  return {
+    xAxisLabel: xAxis.label,
+    yAxisLabel: yAxis.label,
+    xAxisValue: textX,
+    yAxisValue: textY,
+    xAxisDuration: durationX,
+    yAxisDuration: durationY
+  };
+};
+export {
+  buildClosestPointTooltipBodyProps
+};
+//# sourceMappingURL=closestPointTooltipBodyUtils.js.map

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipBodyUtils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipBodyUtils.ts"],
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport type { MinMax } from '../../../../core/types/min-max.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type {\n  AxisIdToFormatter,\n  AxisIdToScaleDomain,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport {\n  isAreaTooltipContext,\n  type ClosestDatapoint,\n  type ClosestSeries,\n  type ClosestSeriesToMetadata,\n  type TooltipContextClosestPoints,\n} from '../../../utils/type-guards.js';\nimport { toRelative } from '../../../utils/value-representation.js';\nimport { getTooltipFormatter } from '../utils/get-tooltip-formatter.js';\nimport type { XYChartTooltipBodyProps } from '../XYChartTooltipBody/XYChartTooltipBody.js';\nimport { getClosestPointTooltipBodyContent } from './hooks/getClosestPointTooltipBodyContent.js';\n\nexport interface BuildClosestPointTooltipBodyPropsArgs<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n  axisIdToFormatter: AxisIdToFormatter;\n  axisIdToScaleDomain: AxisIdToScaleDomain;\n  datapointMetadataMap: MapDatapoints;\n  intl: IntlShape;\n}\n\nexport const buildClosestPointTooltipBodyProps = <\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  axisIdToFormatter,\n  axisIdToScaleDomain,\n  datapointMetadataMap,\n  intl,\n}: BuildClosestPointTooltipBodyPropsArgs<T, K>): XYChartTooltipBodyProps => {\n  const seriesMetadata = safeGet(seriesToMetadata, series);\n  const enrichedDatapoint: TooltipContextClosestPoints = {\n    series,\n    datapoint,\n    metadata: seriesMetadata,\n  };\n\n  const { xAxis, yAxis } = enrichedDatapoint.metadata;\n\n  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);\n  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);\n\n  const datapointMetadata = safeGet(datapointMetadataMap, datapoint);\n  const binDomain = datapointMetadata?.binDomain;\n\n  //Base cases: Dot and Line series\n  let xDomain = safeGet(axisIdToScaleDomain, xAxis.id) as MinMax;\n  let yDomain = safeGet(axisIdToScaleDomain, yAxis.id) as MinMax;\n\n  if (isAreaTooltipContext(enrichedDatapoint)) {\n    const { isStacked } = enrichedDatapoint.metadata;\n\n    if (isStacked && datapointMetadata.baseline !== 'x' && binDomain) {\n      xDomain = { min: binDomain * -1, max: binDomain };\n    }\n\n    if (isStacked && datapointMetadata.baseline !== 'y' && binDomain) {\n      yDomain = { min: binDomain * -1, max: binDomain };\n    }\n  }\n\n  const { text: textX, duration: durationX } =\n    getClosestPointTooltipBodyContent(\n      [datapoint.x0, datapoint.x1],\n      xFormatter,\n      xAxis.isRelative ? (value) => toRelative(value, xDomain) : undefined,\n    );\n  const { text: textY, duration: durationY } =\n    getClosestPointTooltipBodyContent(\n      [datapoint.y0, datapoint.y1],\n      yFormatter,\n      yAxis.isRelative ? (value) => toRelative(value, yDomain) : undefined,\n    );\n\n  return {\n    xAxisLabel: xAxis.label,\n    yAxisLabel: yAxis.label,\n    xAxisValue: textX,\n    yAxisValue: textY,\n    xAxisDuration: durationX,\n    yAxisDuration: durationY,\n  };\n};\n"],
+  "mappings": "AAGA,SAAS,eAAe;AAMxB;AAAA,EACE;AAAA,OAKK;AACP,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAEpC,SAAS,yCAAyC;AAe3C,MAAM,oCAAoC,CAG/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4E;AAC1E,QAAM,iBAAiB,QAAQ,kBAAkB,MAAM;AACvD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ;AAEA,QAAM,EAAE,OAAO,MAAM,IAAI,kBAAkB;AAE3C,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AAErE,QAAM,oBAAoB,QAAQ,sBAAsB,SAAS;AACjE,QAAM,YAAY,mBAAmB;AAGrC,MAAI,UAAU,QAAQ,qBAAqB,MAAM,EAAE;AACnD,MAAI,UAAU,QAAQ,qBAAqB,MAAM,EAAE;AAEnD,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,EAAE,UAAU,IAAI,kBAAkB;AAExC,QAAI,aAAa,kBAAkB,aAAa,OAAO,WAAW;AAChE,gBAAU,EAAE,KAAK,YAAY,IAAI,KAAK,UAAU;AAAA,IAClD;AAEA,QAAI,aAAa,kBAAkB,aAAa,OAAO,WAAW;AAChE,gBAAU,EAAE,KAAK,YAAY,IAAI,KAAK,UAAU;AAAA,IAClD;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE,CAAC,UAAU,IAAI,UAAU,EAAE;AAAA,IAC3B;AAAA,IACA,MAAM,aAAa,CAAC,UAAU,WAAW,OAAO,OAAO,IAAI;AAAA,EAC7D;AACF,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE,CAAC,UAAU,IAAI,UAAU,EAAE;AAAA,IAC3B;AAAA,IACA,MAAM,aAAa,CAAC,UAAU,WAAW,OAAO,OAAO,IAAI;AAAA,EAC7D;AAEF,SAAO;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,YAAY,MAAM;AAAA,IAClB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AACF;",
+  "names": []
+}

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.js

@@ -0,0 +1,60 @@
+import { getDefaultAction } from "../../../../core/components/series-action/hooks/useDefaultAction.js";
+import { safeGet } from "../../../../core/utils/safe-get.js";
+import { buildAreaSeriesActionItem } from "../../../utils/build-series-action-item.js";
+import {
+  isAreaTooltipContext
+} from "../../../utils/type-guards.js";
+const buildClosestPointTooltipHeaderProps = ({
+  datapoint,
+  series,
+  seriesToMetadata,
+  seriesWithDatapoints,
+  datapointMetadataMap,
+  truncationMode,
+  idFactory = () => crypto.randomUUID()
+}) => {
+  const metadata = safeGet(seriesToMetadata, series);
+  const enrichedDatapoint = {
+    series,
+    datapoint,
+    metadata
+  };
+  const { name = "", color = { Default: "blue" } } = metadata;
+  const shape = "shape" in metadata ? metadata.shape : void 0;
+  const content = {
+    id: idFactory(),
+    name
+  };
+  let actions = void 0;
+  if (isAreaTooltipContext(enrichedDatapoint)) {
+    const { actions: seriesActions } = enrichedDatapoint.metadata;
+    actions = seriesActions ? () => {
+      const actionItem = buildAreaSeriesActionItem({
+        datapoint: enrichedDatapoint.datapoint,
+        allSeries: seriesWithDatapoints,
+        seriesToMetadata,
+        datapointMetadataMap,
+        currentSeries: enrichedDatapoint.series
+      });
+      return seriesActions(actionItem);
+    } : void 0;
+  } else {
+    const { actions: seriesActions } = enrichedDatapoint.metadata;
+    actions = () => seriesActions?.({
+      ...datapoint,
+      name
+    });
+  }
+  return {
+    color: color.Default,
+    name,
+    actions,
+    defaultActions: getDefaultAction(content),
+    truncationMode,
+    shape
+  };
+};
+export {
+  buildClosestPointTooltipHeaderProps
+};
+//# sourceMappingURL=closestPointTooltipHeaderUtils.js.map

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.ts"],
+  "sourcesContent": ["import { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type {\n  AreaSeriesToMetadata,\n  AreaSeriesWithDatapoints,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { buildAreaSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport {\n  isAreaTooltipContext,\n  type ClosestDatapoint,\n  type ClosestSeries,\n  type ClosestSeriesToMetadata,\n  type TooltipContextClosestPoints,\n} from '../../../utils/type-guards.js';\nimport type { XYChartTooltipHeaderProps } from '../XYChartTooltipHeader/XYChartTooltipHeader.js';\n\nexport interface BuildClosestPointTooltipHeaderPropsArgs<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n  seriesWithDatapoints: AreaSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n  truncationMode?: XYChartTooltipHeaderProps['truncationMode'];\n  idFactory?: () => string;\n}\n\nexport const buildClosestPointTooltipHeaderProps = <\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n  truncationMode,\n  idFactory = () => crypto.randomUUID(),\n}: BuildClosestPointTooltipHeaderPropsArgs<\n  T,\n  K\n>): XYChartTooltipHeaderProps => {\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextClosestPoints = {\n    series,\n    datapoint,\n    metadata,\n  };\n\n  const { name = '', color = { Default: 'blue' } } = metadata;\n\n  const shape = 'shape' in metadata ? metadata.shape : undefined;\n\n  const content = {\n    id: idFactory(),\n    name: name,\n  };\n\n  let actions: (() => SeriesActionsTemplate) | undefined = undefined;\n\n  if (isAreaTooltipContext(enrichedDatapoint)) {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = seriesActions\n      ? () => {\n          const actionItem = buildAreaSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as AreaSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return seriesActions(actionItem);\n        }\n      : undefined;\n  } else {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = () =>\n      (\n        seriesActions as (\n          datapoint: K & { name: string },\n        ) => SeriesActionsTemplate\n      )?.({\n        ...datapoint,\n        name,\n      });\n  }\n\n  return {\n    color: color.Default,\n    name,\n    actions,\n    defaultActions: getDefaultAction(content),\n    truncationMode,\n    shape,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,wBAAwB;AAEjC,SAAS,eAAe;AAMxB,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAKK;AAgBA,MAAM,sCAAsC,CAGjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM,OAAO,WAAW;AACtC,MAGiC;AAC/B,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,OAAO,IAAI,QAAQ,EAAE,SAAS,OAAO,EAAE,IAAI;AAEnD,QAAM,QAAQ,WAAW,WAAW,SAAS,QAAQ;AAErD,QAAM,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd;AAAA,EACF;AAEA,MAAI,UAAqD;AAEzD,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,gBACN,MAAM;AACJ,YAAM,aAAa,0BAA0B;AAAA,QAC3C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,cAAc,UAAU;AAAA,IACjC,IACA;AAAA,EACN,OAAO;AACL,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,MAEN,gBAGE;AAAA,MACF,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACL;AAEA,SAAO;AAAA,IACL,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA,gBAAgB,iBAAiB,OAAO;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/hooks/{useClosestPointTooltipHeaderContent.js → getClosestPointTooltipBodyContent.js}

@@ -4,7 +4,7 @@ import {
   isNumericalToolTip,
   isTimeTooltip
 } from "../../../../utils/type-guards.js";
-function useClosestPointTooltipHeaderContent([v0, v1], formatter, toPercentage) {
+function getClosestPointTooltipBodyContent([v0, v1], formatter, toPercentage) {
   let text = "";
   let duration;
   const displayValue = v0 ?? v1;
@@ -36,6 +36,6 @@ function useClosestPointTooltipHeaderContent([v0, v1], formatter, toPercentage)
   return { duration, text };
 }
 export {
-  useClosestPointTooltipHeaderContent
+  getClosestPointTooltipBodyContent
 };
-//# sourceMappingURL=useClosestPointTooltipHeaderContent.js.map
+//# sourceMappingURL=getClosestPointTooltipBodyContent.js.map

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/hooks/getClosestPointTooltipBodyContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/hooks/getClosestPointTooltipBodyContent.ts"],
+  "sourcesContent": ["import { formatResolution } from '../../../../../core/components/tooltip/utils/resolution-formatter.js';\nimport {\n  FormatterWithPrecision,\n  type TimeFrameFormatter,\n} from '../../../../../core/types/formatter.js';\nimport { XYAccessorDataTypes } from '../../../../types/xy-chart.js';\nimport {\n  isCategoricalTooltip,\n  isNumericalToolTip,\n  isTimeTooltip,\n} from '../../../../utils/type-guards.js';\n\nexport function getClosestPointTooltipBodyContent(\n  [v0, v1]: [v0?: XYAccessorDataTypes, v1?: XYAccessorDataTypes],\n  formatter?: FormatterWithPrecision | TimeFrameFormatter,\n  toPercentage?: (value: number) => number,\n) {\n  let text = '';\n  let duration: string | undefined;\n\n  const displayValue = v0 ?? v1;\n  if (displayValue === undefined) {\n    return { text, duration };\n  }\n\n  const hasRange = v0 !== undefined && v1 !== undefined && v0 !== v1;\n  const args = {\n    formatter,\n    v0: displayValue,\n    v1,\n  };\n\n  if (isCategoricalTooltip(args)) {\n    if (hasRange) {\n      text = `${v0} - ${v1}`;\n    } else {\n      text = args.v0;\n    }\n  } else if (isNumericalToolTip(args)) {\n    if (hasRange) {\n      text = `${args.formatter(args.v0)}${\n        toPercentage ? ' (' + toPercentage(args.v0) + '%)' : ''\n      } - ${args.formatter(args.v1)}${\n        toPercentage ? ' (' + toPercentage(args.v1) + '%)' : ''\n      }`;\n    } else {\n      text = `${args.formatter(args.v0)}${\n        toPercentage ? ' (' + toPercentage(args.v0) + '%)' : ''\n      }`;\n    }\n  } else if (isTimeTooltip(args)) {\n    text = `${args.formatter(args.v0, args.v1)}`;\n    duration = formatResolution(args.v0, args.v1);\n  }\n\n  return { duration, text };\n}\n"],
+  "mappings": "AAAA,SAAS,wBAAwB;AAMjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kCACd,CAAC,IAAI,EAAE,GACP,WACA,cACA;AACA,MAAI,OAAO;AACX,MAAI;AAEJ,QAAM,eAAe,MAAM;AAC3B,MAAI,iBAAiB,QAAW;AAC9B,WAAO,EAAE,MAAM,SAAS;AAAA,EAC1B;AAEA,QAAM,WAAW,OAAO,UAAa,OAAO,UAAa,OAAO;AAChE,QAAM,OAAO;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,EACF;AAEA,MAAI,qBAAqB,IAAI,GAAG;AAC9B,QAAI,UAAU;AACZ,aAAO,GAAG,EAAE,MAAM,EAAE;AAAA,IACtB,OAAO;AACL,aAAO,KAAK;AAAA,IACd;AAAA,EACF,WAAW,mBAAmB,IAAI,GAAG;AACnC,QAAI,UAAU;AACZ,aAAO,GAAG,KAAK,UAAU,KAAK,EAAE,CAAC,GAC/B,eAAe,OAAO,aAAa,KAAK,EAAE,IAAI,OAAO,EACvD,MAAM,KAAK,UAAU,KAAK,EAAE,CAAC,GAC3B,eAAe,OAAO,aAAa,KAAK,EAAE,IAAI,OAAO,EACvD;AAAA,IACF,OAAO;AACL,aAAO,GAAG,KAAK,UAAU,KAAK,EAAE,CAAC,GAC/B,eAAe,OAAO,aAAa,KAAK,EAAE,IAAI,OAAO,EACvD;AAAA,IACF;AAAA,EACF,WAAW,cAAc,IAAI,GAAG;AAC9B,WAAO,GAAG,KAAK,UAAU,KAAK,IAAI,KAAK,EAAE,CAAC;AAC1C,eAAW,iBAAiB,KAAK,IAAI,KAAK,EAAE;AAAA,EAC9C;AAEA,SAAO,EAAE,UAAU,KAAK;AAC1B;",
+  "names": []
+}

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltip.tsx"],
-  "sourcesContent": ["\nimport { HoveredPointTooltipBody } from './HoveredPointTooltipBody.js';\nimport { HoveredPointTooltipHeader } from './HoveredPointTooltipHeader.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport type {\n  Datapoint,\n  Series,\n  SeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function HoveredPointTooltip<T extends Series>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: Datapoint<T>;\n  series: T;\n  seriesToMetadata: SeriesToMetadata<T>;\n}>) {\n  return (\n    <>\n      <HoveredPointTooltipHeader\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n      <Divider orientation=\"horizontal\" />\n      <HoveredPointTooltipBody\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n    </>\n  );\n}\n"],
-  "mappings": "AAoBI,mBACE,KADF;AAnBJ,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,eAAe;AAOjB,SAAS,oBAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,WAAQ,aAAY,cAAa;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { HoveredPointTooltipBody } from './HoveredPointTooltipBody.js';\nimport { HoveredPointTooltipHeader } from './HoveredPointTooltipHeader.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function HoveredPointTooltip<T extends HoveredSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: HoveredDatapoint<T>;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n}>) {\n  return (\n    <>\n      <HoveredPointTooltipHeader\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n      <Divider orientation=\"horizontal\" />\n      <HoveredPointTooltipBody\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n    </>\n  );\n}\n"],
+  "mappings": "AAmBI,mBACE,KADF;AAnBJ,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,eAAe;AAOjB,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,WAAQ,aAAY,cAAa;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltipBody.js

@@ -1,58 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { safeGet } from "../../../../core/utils/safe-get.js";
+import { buildHoveredPointTooltipBodyProps } from "./hoveredPointTooltipBodyUtils.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
-import { getRelativeAccessor } from "../../../utils/value-representation.js";
-import { getTooltipFormatter } from "../utils/get-tooltip-formatter.js";
 import { XYChartTooltipBody } from "../XYChartTooltipBody/XYChartTooltipBody.js";
-import { useHoveredPointTooltipHeaderContent } from "./hooks/useHoveredPointTooltipHeaderContent.js";
 function HoveredPointTooltipBody({
   datapoint,
   series,
   seriesToMetadata
 }) {
-  const intl = useIntl();
   const axisIdToFormatter = useAxesFormatter();
   const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();
-  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);
-  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);
-  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);
-  const datapointMetadata = datapointMetadataMap.get(datapoint);
-  const binDomain = datapointMetadata?.binDomain;
-  const isRelative = typeof binDomain === "number" && binDomain;
-  const yDomain = isRelative && datapointMetadata.baseline === "y" ? {
-    min: binDomain * -1,
-    max: binDomain
-  } : safeGet(axisIdToScaleDomain, xAxis.id);
-  const xDomain = isRelative && datapointMetadata.baseline === "x" ? {
-    min: binDomain * -1,
-    max: binDomain
-  } : safeGet(axisIdToScaleDomain, yAxis.id);
-  const { x0, x1, y0, y1 } = datapoint;
-  const { text: textX, duration: durationX } = useHoveredPointTooltipHeaderContent(
-    x0,
-    x1,
-    xFormatter,
-    getRelativeAccessor(xAxis, yDomain)
-  );
-  const { text: textY, duration: durationY } = useHoveredPointTooltipHeaderContent(
-    y0,
-    y1,
-    yFormatter,
-    getRelativeAccessor(yAxis, xDomain)
-  );
-  return /* @__PURE__ */ jsx(
-    XYChartTooltipBody,
-    {
-      xAxisLabel: xAxis.label,
-      yAxisLabel: yAxis.label,
-      xAxisValue: textX,
-      yAxisValue: textY,
-      xAxisDuration: durationX,
-      yAxisDuration: durationY
-    }
-  );
+  const intl = useIntl();
+  const tooltipBodyProps = buildHoveredPointTooltipBodyProps({
+    datapoint,
+    series,
+    seriesToMetadata,
+    axisIdToFormatter,
+    axisIdToScaleDomain,
+    datapointMetadataMap,
+    intl
+  });
+  return /* @__PURE__ */ jsx(XYChartTooltipBody, { ...tooltipBodyProps });
 }
 HoveredPointTooltipBody["displayName"] = "HoveredPointTooltipBody";
 export {

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltipBody.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltipBody.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport type { MinMax } from '../../../../core/types/min-max.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { getRelativeAccessor } from '../../../utils/value-representation.js';\nimport { getTooltipFormatter } from '../utils/get-tooltip-formatter.js';\nimport { XYChartTooltipBody } from '../XYChartTooltipBody/XYChartTooltipBody.js';\nimport { useHoveredPointTooltipHeaderContent } from './hooks/useHoveredPointTooltipHeaderContent.js';\nimport type {\n  Datapoint,\n  Series,\n  SeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport interface HoveredPointTooltipBodyProps<\n  T extends Series,\n  K extends Datapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: SeriesToMetadata<T>;\n}\n\nexport function HoveredPointTooltipBody<\n  T extends Series,\n  K extends Datapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<HoveredPointTooltipBodyProps<T, K>>) {\n  const intl = useIntl();\n  const axisIdToFormatter = useAxesFormatter();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n\n  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);\n  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);\n  const datapointMetadata = datapointMetadataMap.get(datapoint);\n  const binDomain = datapointMetadata?.binDomain;\n\n  const isRelative = typeof binDomain === 'number' && binDomain;\n\n  const yDomain =\n    isRelative && datapointMetadata.baseline === 'y'\n      ? {\n          min: binDomain * -1,\n          max: binDomain,\n        }\n      : (safeGet(axisIdToScaleDomain, xAxis.id) as MinMax);\n\n  const xDomain =\n    isRelative && datapointMetadata.baseline === 'x'\n      ? {\n          min: binDomain * -1,\n          max: binDomain,\n        }\n      : (safeGet(axisIdToScaleDomain, yAxis.id) as MinMax);\n\n  const { x0, x1, y0, y1 } = datapoint;\n  const { text: textX, duration: durationX } =\n    useHoveredPointTooltipHeaderContent(\n      x0,\n      x1,\n      xFormatter,\n      getRelativeAccessor(xAxis, yDomain),\n    );\n\n  const { text: textY, duration: durationY } =\n    useHoveredPointTooltipHeaderContent(\n      y0,\n      y1,\n      yFormatter,\n      getRelativeAccessor(yAxis, xDomain),\n    );\n\n  return (\n    <XYChartTooltipBody\n      xAxisLabel={xAxis.label}\n      yAxisLabel={yAxis.label}\n      xAxisValue={textX}\n      yAxisValue={textY}\n      xAxisDuration={durationX}\n      yAxisDuration={durationY}\n    />\n  );\n}\n\nHoveredPointTooltipBody['displayName'] = 'HoveredPointTooltipBody';\n"],
-  "mappings": "AAgFI;AAhFJ,SAAS,eAAe;AAGxB,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,2CAA2C;AAgB7C,SAAS,wBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,OAAO,QAAQ;AACrB,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AAErE,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AAEzD,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,oBAAoB,qBAAqB,IAAI,SAAS;AAC5D,QAAM,YAAY,mBAAmB;AAErC,QAAM,aAAa,OAAO,cAAc,YAAY;AAEpD,QAAM,UACJ,cAAc,kBAAkB,aAAa,MACzC;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,KAAK;AAAA,EACP,IACC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,UACJ,cAAc,kBAAkB,aAAa,MACzC;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,KAAK;AAAA,EACP,IACC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI;AAC3B,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,OAAO,OAAO;AAAA,EACpC;AAEF,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,OAAO,OAAO;AAAA,EACpC;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,eAAe;AAAA;AAAA,EACjB;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildHoveredPointTooltipBodyProps } from './hoveredPointTooltipBodyUtils.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\nimport { XYChartTooltipBody } from '../XYChartTooltipBody/XYChartTooltipBody.js';\n\nexport interface HoveredPointTooltipBodyProps<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n}\n\nexport function HoveredPointTooltipBody<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<HoveredPointTooltipBodyProps<T, K>>) {\n  const axisIdToFormatter = useAxesFormatter();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const intl = useIntl();\n\n  const tooltipBodyProps = buildHoveredPointTooltipBodyProps({\n    datapoint,\n    series,\n    seriesToMetadata,\n    axisIdToFormatter,\n    axisIdToScaleDomain,\n    datapointMetadataMap,\n    intl,\n  });\n\n  return <XYChartTooltipBody {...tooltipBodyProps} />;\n}\n\nHoveredPointTooltipBody['displayName'] = 'HoveredPointTooltipBody';\n"],
+  "mappings": "AA2CS;AA3CT,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAM/B,SAAS,0BAA0B;AAW5B,SAAS,wBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,OAAO,QAAQ;AAErB,QAAM,mBAAmB,kCAAkC;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,sBAAoB,GAAG,kBAAkB;AACnD;AAEA,wBAAwB,aAAa,IAAI;",
   "names": []
 }