@dynatrace/strato-geo 1.3.4 → 1.5.1

package/esm/index.js

@@ -1,26 +1,2 @@
-import { ChartInteractions } from "./map/slots/ChartInteractions.js";
-import { MapView } from "./map/MapView.js";
-import { ConnectionLayer } from "./map/slots/ConnectionLayer.js";
-import { DotLayer } from "./map/slots/DotLayer.js";
-import { BubbleLayer } from "./map/slots/BubbleLayer.js";
-import { BaseLayer } from "./map/slots/BaseLayer.js";
-import { ChoroplethLayer } from "./map/slots/ChoroplethLayer.js";
-import { Tooltip, TooltipAtoms } from "./map/slots/Tooltip.js";
-import { SequentialLegend } from "./map/slots/SequentialLegend.js";
-import { ThresholdLegend } from "./map/slots/ThresholdLegend.js";
-import { CategoricalLegend } from "./map/slots/CategoricalLegend.js";
-export {
-  BaseLayer,
-  BubbleLayer,
-  CategoricalLegend,
-  ChartInteractions,
-  ChoroplethLayer,
-  ConnectionLayer,
-  DotLayer,
-  MapView,
-  SequentialLegend,
-  ThresholdLegend,
-  Tooltip,
-  TooltipAtoms
-};
+export * from "./map/index.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export { ChartInteractions } from './map/slots/ChartInteractions.js';\nexport { MapView } from './map/MapView.js';\nexport { ConnectionLayer } from './map/slots/ConnectionLayer.js';\nexport { DotLayer } from './map/slots/DotLayer.js';\nexport { BubbleLayer } from './map/slots/BubbleLayer.js';\nexport { BaseLayer } from './map/slots/BaseLayer.js';\nexport { ChoroplethLayer } from './map/slots/ChoroplethLayer.js';\nexport { Tooltip, TooltipAtoms } from './map/slots/Tooltip.js';\n\nexport type {\n  MapViewProps,\n  MapViewBaseProps,\n  MapViewUncontrolledProps,\n  MapViewControlledProps,\n  DisallowAll,\n  ViewState,\n  MapViewRef,\n} from './map/types/map-view.js';\n\nexport type { BaseLayerProps } from './map/types/base-layer.js';\n\nexport type {\n  Connection,\n  ConnectionLayerBaseProps,\n  ConnectionLayerProps,\n  CurvedLine,\n} from './map/types/connection-layer.js';\n\nexport type {\n  DotLayerBaseProps,\n  DotLayerProps,\n} from './map/types/dot-layer.js';\n\nexport type {\n  BubbleLayerBaseProps,\n  BubbleLayerProps,\n  ScaleNoneProps,\n  ScaleRadiusProps,\n} from './map/types/bubble-layer.js';\n\nexport type {\n  ChoroplethLayerBaseProps,\n  ChoroplethLayerProps,\n} from './map/types/choropleth-layer.js';\n\nexport type { Location } from './map/types/location.js';\nexport type { MapShape } from './map/types/shapes.js';\nexport type { ChartInteractionsProps } from './map/types/toolbar.js';\nexport type { ErrorStateSlotProps } from './map/slots/states/ErrorStateSlot.js';\n\nexport type {\n  BaseLegendProps,\n  CategoricalLegendProps,\n  SequentialLegendProps,\n  ThresholdLegendProps,\n} from './map/types/legend.js';\n\nexport type {\n  LocationColorProps,\n  LegendColorLayerProps,\n  ChoroplethCustomColorProps,\n  ConnectionColorProps,\n} from './map/types/coloring.js';\n\nexport { SequentialLegend } from './map/slots/SequentialLegend.js';\nexport { ThresholdLegend } from './map/slots/ThresholdLegend.js';\nexport { CategoricalLegend } from './map/slots/CategoricalLegend.js';\n\nexport type {\n  BubbleLayerTooltipHandler,\n  BubbleLayerTooltipHandlerProps,\n  DotLayerTooltipHandler,\n  DotLayerTooltipHandlerProps,\n  ConnectionLayerTooltipHandler,\n  ConnectionLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandler,\n  ChartTooltip,\n  DotLayerTooltipData,\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  ChoroplethLayerTooltipData,\n} from './map/types/tooltip.js';\n"],
-  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,SAAS,oBAAoB;AAyDtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;",
+  "sourcesContent": ["export * from './map/index.js';\n"],
+  "mappings": "AAAA,cAAc;",
   "names": []
 }

package/esm/map/MapView.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
 import {
   _ChartLayout as ChartLayout,
   _coerceSizeValue as coerceSizeValue,
@@ -59,62 +60,71 @@ const _MapView = forwardRef(
     const chartLayoutRef = useAutoLegendRefresh(layersData);
     const mapUnavailable = !isFetchingFeatures && !isMapEnabled || error;
     const isLoading = isFetchingFeatures || !isMapLoaded;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         style: containerStyles,
         className: customerClassNames,
-        "data-testid": "mapview-container"
-      },
-      // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response
-      mapUnavailable ? /* @__PURE__ */ React.createElement(
-        MapUnavailable,
-        {
-          isFetchingFeatures,
-          isDisabled: !isMapEnabled,
-          chartHeight,
-          error
-        }
-      ) : /* @__PURE__ */ React.createElement(MapLoadingContext.Provider, { value: loading }, /* @__PURE__ */ React.createElement(
-        MapBaseLayerFeaturesContext.Provider,
-        {
-          value: baseFeatureCollection
-        },
-        /* @__PURE__ */ React.createElement(MapConfigurationContext.Provider, { value: config }, /* @__PURE__ */ React.createElement(LayerIdsContext.Provider, { value: layerIds }, /* @__PURE__ */ React.createElement(
-          MapTruncationModeContext.Provider,
+        "data-testid": "mapview-container",
+        // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response
+        children: mapUnavailable ? /* @__PURE__ */ jsx(
+          MapUnavailable,
           {
-            value: truncationMode ?? DEFAULT_TRUNCATION_MODE
-          },
-          /* @__PURE__ */ React.createElement(FormatterContext.Provider, { value: formatter }, /* @__PURE__ */ React.createElement(MapRawDataContext.Provider, { value: layersData }, /* @__PURE__ */ React.createElement(MapStoreProvider, null, /* @__PURE__ */ React.createElement(ColorScaleProvider, { categories }, /* @__PURE__ */ React.createElement(LayerColorStrategyProvider, null, /* @__PURE__ */ React.createElement(
-            ChartLayout,
-            {
-              ref: chartLayoutRef,
-              chartHeight,
-              errorState,
-              showLoader: loading || isLoading
-            },
-            /* @__PURE__ */ React.createElement(ChartLayout.Graph, null, baseFeatureCollection && /* @__PURE__ */ React.createElement(
-              MapContent,
-              {
-                ref: forwardedRef,
-                onMapLoad: () => setIsMapLoaded(true),
-                ...remaining
-              },
-              parsedChildren
-            )),
-            !isLegendHidden && /* @__PURE__ */ React.createElement(
-              ChartLayout.Legend,
+            isFetchingFeatures,
+            isDisabled: !isMapEnabled,
+            chartHeight,
+            error
+          }
+        ) : /* @__PURE__ */ jsx(MapLoadingContext.Provider, { value: loading, children: /* @__PURE__ */ jsx(
+          MapBaseLayerFeaturesContext.Provider,
+          {
+            value: baseFeatureCollection,
+            children: /* @__PURE__ */ jsx(MapConfigurationContext.Provider, { value: config, children: /* @__PURE__ */ jsx(LayerIdsContext.Provider, { value: layerIds, children: /* @__PURE__ */ jsx(
+              MapTruncationModeContext.Provider,
               {
-                position: legendPosition,
-                ratio: legendRatio,
-                ratioBoundaries: DEFAULT_LEGEND_SIZES,
-                onResize: legendOnRatioChange
-              },
-              /* @__PURE__ */ React.createElement(MapLegendRenderer, null)
-            )
-          ))))))
-        )))
-      ))
+                value: truncationMode ?? DEFAULT_TRUNCATION_MODE,
+                children: /* @__PURE__ */ jsx(FormatterContext.Provider, { value: formatter, children: /* @__PURE__ */ jsx(MapRawDataContext.Provider, { value: layersData, children: /* @__PURE__ */ jsx(MapStoreProvider, { children: /* @__PURE__ */ jsx(
+                  ColorScaleProvider,
+                  {
+                    categories,
+                    dataMax: legendDomain[1],
+                    children: /* @__PURE__ */ jsx(LayerColorStrategyProvider, { children: /* @__PURE__ */ jsxs(
+                      ChartLayout,
+                      {
+                        ref: chartLayoutRef,
+                        chartHeight,
+                        errorState,
+                        showLoader: loading || isLoading,
+                        children: [
+                          /* @__PURE__ */ jsx(ChartLayout.Graph, { children: baseFeatureCollection && /* @__PURE__ */ jsx(
+                            MapContent,
+                            {
+                              ref: forwardedRef,
+                              onMapLoad: () => setIsMapLoaded(true),
+                              ...remaining,
+                              children: parsedChildren
+                            }
+                          ) }),
+                          !isLegendHidden && /* @__PURE__ */ jsx(
+                            ChartLayout.Legend,
+                            {
+                              position: legendPosition,
+                              ratio: legendRatio,
+                              ratioBoundaries: DEFAULT_LEGEND_SIZES,
+                              onResize: legendOnRatioChange,
+                              children: /* @__PURE__ */ jsx(MapLegendRenderer, {})
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  }
+                ) }) }) })
+              }
+            ) }) })
+          }
+        ) })
+      }
     );
   }
 );

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import React, { forwardRef, type PropsWithChildren, useState } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapBaseLayerFeaturesContext } from './contexts/map-base-layer.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);\n\n    const {\n      flattenData: layersData,\n      categories,\n      legendDomain,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false);\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n    const mapUnavailable = (!isFetchingFeatures && !isMapEnabled) || error;\n\n    const isLoading = isFetchingFeatures || !isMapLoaded;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {\n          // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response\n          mapUnavailable ? (\n            <MapUnavailable\n              isFetchingFeatures={isFetchingFeatures}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider categories={categories}>\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        onMapLoad={() => setIsMapLoaded(true)}\n                                        {...remaining}\n                                      >\n                                        {parsedChildren}\n                                      </MapContent>\n                                    )}\n                                  </ChartLayout.Graph>\n                                  {!isLegendHidden && (\n                                    <ChartLayout.Legend\n                                      position={legendPosition}\n                                      ratio={legendRatio}\n                                      ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                      onResize={legendOnRatioChange}\n                                    >\n                                      <MapLegendRenderer />\n                                    </ChartLayout.Legend>\n                                  )}\n                                </ChartLayout>\n                              </LayerColorStrategyProvider>\n                            </ColorScaleProvider>\n                          </MapStoreProvider>\n                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.Provider>\n          )\n        }\n      </div>\n    );\n  },\n);\n\n(_MapView as typeof _MapView & { displayName: string })['displayName'] =\n  'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @public\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useState } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapBaseLayerFeaturesContext } from './contexts/map-base-layer.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);\n\n    const {\n      flattenData: layersData,\n      categories,\n      legendDomain,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false);\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n    const mapUnavailable = (!isFetchingFeatures && !isMapEnabled) || error;\n\n    const isLoading = isFetchingFeatures || !isMapLoaded;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {\n          // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response\n          mapUnavailable ? (\n            <MapUnavailable\n              isFetchingFeatures={isFetchingFeatures}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider\n                              categories={categories}\n                              dataMax={legendDomain[1]}\n                            >\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        onMapLoad={() => setIsMapLoaded(true)}\n                                        {...remaining}\n                                      >\n                                        {parsedChildren}\n                                      </MapContent>\n                                    )}\n                                  </ChartLayout.Graph>\n                                  {!isLegendHidden && (\n                                    <ChartLayout.Legend\n                                      position={legendPosition}\n                                      ratio={legendRatio}\n                                      ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                      onResize={legendOnRatioChange}\n                                    >\n                                      <MapLegendRenderer />\n                                    </ChartLayout.Legend>\n                                  )}\n                                </ChartLayout>\n                              </LayerColorStrategyProvider>\n                            </ColorScaleProvider>\n                          </MapStoreProvider>\n                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.Provider>\n          )\n        }\n      </div>\n    );\n  },\n);\n\n(_MapView as typeof _MapView & { displayName: string })['displayName'] =\n  'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @public\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "mappings": "AA0FY,cAwBoB,YAxBpB;AA1FZ,SAAS,YAAoC,gBAAgB;AAE7D;AAAA,EACE,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,OACpB;AAEP,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AAC3C,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAG5B,OAAO;AAKP,MAAM,WAAW;AAAA,EACf,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,EAAE,UAAU,gBAAgB,eAAe,IAAI,YAAY,QAAQ;AAEzE,UAAM;AAAA,MACJ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,IACF,IAAI,kBAAkB,gBAAgB,cAAc;AAEpD,UAAM,SAAS,mBAAmB,UAAU,YAAY;AAExD,UAAM,iBAAiB,CAAC,OAAO,UAAU,CAAC,CAAC,OAAO,OAAO;AACzD,UAAM,iBAAiB,OAAO,QAAQ;AACtC,UAAM,cAAc,OAAO,QAAQ;AACnC,UAAM,sBAAsB,OAAO,QAAQ;AAE3C,UAAM,EAAE,cAAc,oBAAoB,uBAAuB,MAAM,IACrE,oBAAoB,OAAO,SAAS;AAEtC,UAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,UAAM,EAAE,WAAW,IAAI,sBAAsB,QAAQ;AAErD,UAAM,cAAc,gBAAgB,MAAM,MAAM,KAAK;AAErD,UAAM,kBAAkB,EAAE,OAAO,QAAQ,GAAG,cAAc;AAE1D,UAAM,iBAAiB,qBAAqB,UAAU;AACtD,UAAM,iBAAkB,CAAC,sBAAsB,CAAC,gBAAiB;AAEjE,UAAM,YAAY,sBAAsB,CAAC;AAEzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW;AAAA,QACX,eAAY;AAAA;AAAA,QAIV,2BACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,YAAY,CAAC;AAAA,YACb;AAAA,YACA;AAAA;AAAA,QACF,IAEA,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,SACjC;AAAA,UAAC,4BAA4B;AAAA,UAA5B;AAAA,YACC,OAAO;AAAA,YAEP,8BAAC,wBAAwB,UAAxB,EAAiC,OAAO,QACvC,8BAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B;AAAA,cAAC,yBAAyB;AAAA,cAAzB;AAAA,gBACC,OAAO,kBAAkB;AAAA,gBAEzB,8BAAC,iBAAiB,UAAjB,EAA0B,OAAO,WAChC,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC,8BAAC,oBACC;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,SAAS,aAAa,CAAC;AAAA,oBAEvB,8BAAC,8BACC;AAAA,sBAAC;AAAA;AAAA,wBACC,KAAK;AAAA,wBACL;AAAA,wBACA;AAAA,wBACA,YAAY,WAAW;AAAA,wBAEvB;AAAA,8CAAC,YAAY,OAAZ,EACE,mCACC;AAAA,4BAAC;AAAA;AAAA,8BACC,KAAK;AAAA,8BACL,WAAW,MAAM,eAAe,IAAI;AAAA,8BACnC,GAAG;AAAA,8BAEH;AAAA;AAAA,0BACH,GAEJ;AAAA,0BACC,CAAC,kBACA;AAAA,4BAAC,YAAY;AAAA,4BAAZ;AAAA,8BACC,UAAU;AAAA,8BACV,OAAO;AAAA,8BACP,iBAAiB;AAAA,8BACjB,UAAU;AAAA,8BAEV,8BAAC,qBAAkB;AAAA;AAAA,0BACrB;AAAA;AAAA;AAAA,oBAEJ,GACF;AAAA;AAAA,gBACF,GACF,GACF,GACF;AAAA;AAAA,YACF,GACF,GACF;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IAGN;AAAA,EAEJ;AACF;AAEC,SAAuD,aAAa,IACnE;AAMK,MAAM,UAAU,OAAO,OAAO,UAAU;AAAA,EAC7C,YAAY;AACd,CAAC;",
   "names": []
 }

package/esm/map/components/BaseLayerDataError.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { jsx } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
 import { _EmptyState as EmptyState } from "@dynatrace/strato-components-preview/charts";
 const BaseLayerDataError = ({ height }) => {
-  const messageNode = /* @__PURE__ */ React.createElement(
+  const messageNode = /* @__PURE__ */ jsx(
     FormattedMessage,
     {
       id: "tS7epcIvtrbIhuBy",
@@ -10,7 +10,7 @@ const BaseLayerDataError = ({ height }) => {
       description: "Message to display when an error occurred while getting map data."
     }
   );
-  return /* @__PURE__ */ React.createElement(EmptyState, { height }, messageNode);
+  return /* @__PURE__ */ jsx(EmptyState, { height, children: messageNode });
 };
 BaseLayerDataError.displayName = "BaseLayerDataError";
 export {

package/esm/map/components/BaseLayerDataError.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/BaseLayerDataError.tsx"],
-  "sourcesContent": ["import React, { type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { _EmptyState as EmptyState } from '@dynatrace/strato-components-preview/charts';\n\ninterface BaseLayerDataErrorProps {\n  height: number | string;\n}\n\nexport const BaseLayerDataError = ({ height }: BaseLayerDataErrorProps) => {\n  const messageNode: ReactNode = (\n    <FormattedMessage\n      id=\"tS7epcIvtrbIhuBy\"\n      defaultMessage=\"An error occurred: Failed to load map data.\"\n      description=\"Message to display when an error occurred while getting map data.\"\n    />\n  );\n\n  return <EmptyState height={height}>{messageNode}</EmptyState>;\n};\n\nBaseLayerDataError.displayName = 'BaseLayerDataError';\n"],
-  "mappings": "AAAA,OAAO,WAA+B;AACtC,SAAS,wBAAwB;AAEjC,SAAS,eAAe,kBAAkB;AAMnC,MAAM,qBAAqB,CAAC,EAAE,OAAO,MAA+B;AACzE,QAAM,cACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAe;AAAA,MACf,aAAY;AAAA;AAAA,EACd;AAGF,SAAO,oCAAC,cAAW,UAAiB,WAAY;AAClD;AAEA,mBAAmB,cAAc;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { _EmptyState as EmptyState } from '@dynatrace/strato-components-preview/charts';\n\ninterface BaseLayerDataErrorProps {\n  height: number | string;\n}\n\nexport const BaseLayerDataError = ({ height }: BaseLayerDataErrorProps) => {\n  const messageNode: ReactNode = (\n    <FormattedMessage\n      id=\"tS7epcIvtrbIhuBy\"\n      defaultMessage=\"An error occurred: Failed to load map data.\"\n      description=\"Message to display when an error occurred while getting map data.\"\n    />\n  );\n\n  return <EmptyState height={height}>{messageNode}</EmptyState>;\n};\n\nBaseLayerDataError.displayName = 'BaseLayerDataError';\n"],
+  "mappings": "AAWI;AAVJ,SAAS,wBAAwB;AAEjC,SAAS,eAAe,kBAAkB;AAMnC,MAAM,qBAAqB,CAAC,EAAE,OAAO,MAA+B;AACzE,QAAM,cACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAe;AAAA,MACf,aAAY;AAAA;AAAA,EACd;AAGF,SAAO,oBAAC,cAAW,QAAiB,uBAAY;AAClD;AAEA,mBAAmB,cAAc;",
   "names": []
 }

package/esm/map/components/BubbleLayer/BubbleCircleLayer.js

@@ -1,5 +1,5 @@
+import { jsx } from "react/jsx-runtime";
 import { Layer } from "@vis.gl/react-maplibre";
-import React from "react";
 import { useSizeInterpolation } from "./hooks/use-size-interpolation.js";
 import { buildCircleStickToDistanceExpression } from "./utils/build-stick-to-distance-expressions.js";
 import {
@@ -15,7 +15,7 @@ const BubbleCircleLayer = ({
 }) => {
   const sizeInterpolation = useSizeInterpolation();
   const radiusExpression = sizeInterpolation === "fixed" ? DEFAULT_RADIUS_EXPRESSION : buildCircleStickToDistanceExpression();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Layer,
     {
       type: "circle",

package/esm/map/components/BubbleLayer/BubbleCircleLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleCircleLayer.tsx"],
-  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\nimport React from 'react';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n}: {\n  id: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          SHAPE_OPACITY_DIMMED,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY_DEFAULT,\n          SHAPE_OPACITY_DIMMED,\n        ],\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,4BAA4B;AACrC,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,mBACJ,sBAAsB,UAClB,4BACA,qCAAqC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n}: {\n  id: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          SHAPE_OPACITY_DIMMED,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY_DEFAULT,\n          SHAPE_OPACITY_DIMMED,\n        ],\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AA2BI;AA3BJ,SAAS,aAAa;AAEtB,SAAS,4BAA4B;AACrC,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,mBACJ,sBAAsB,UAClB,4BACA,qCAAqC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/map/components/BubbleLayer/BubbleLayer.js

@@ -1,5 +1,5 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Source } from "@vis.gl/react-maplibre";
-import React from "react";
 import { BubbleCircleLayer } from "./BubbleCircleLayer.js";
 import { BubbleLayerTooltip } from "./BubbleLayerTooltip.js";
 import { BubbleOutlineLayer } from "./BubbleOutlineLayer.js";
@@ -46,13 +46,19 @@ const BubbleLayer = (props) => {
     radiusScale
   );
   const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SizeInterpolationContext.Provider, { value: sizeInterpolation }, /* @__PURE__ */ React.createElement(Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true }, /* @__PURE__ */ React.createElement(BubbleCircleLayer, { id: layerId, source: sourceId }), /* @__PURE__ */ React.createElement(BubbleOutlineLayer, { beforeId: layerId, source: sourceId }))), /* @__PURE__ */ React.createElement(
-    BubbleLayerTooltip,
-    {
-      layerId,
-      tooltipTemplate: isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SizeInterpolationContext.Provider, { value: sizeInterpolation, children: /* @__PURE__ */ jsxs(Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true, children: [
+      /* @__PURE__ */ jsx(BubbleCircleLayer, { id: layerId, source: sourceId }),
+      /* @__PURE__ */ jsx(BubbleOutlineLayer, { beforeId: layerId, source: sourceId })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      BubbleLayerTooltip,
+      {
+        layerId,
+        tooltipTemplate: isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
+      }
+    )
+  ] });
 };
 BubbleLayer["displayName"] = "BubbleLayer";
 export {

package/esm/map/components/BubbleLayer/BubbleLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayer.tsx"],
-  "sourcesContent": ["import { Source } from '@vis.gl/react-maplibre';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveLocationColor(\n    DEFAULT_BUBBLE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <>\n      <SizeInterpolationContext.Provider value={sizeInterpolation}>\n        <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n          <BubbleCircleLayer id={layerId} source={sourceId} />\n          <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        </Source>\n      </SizeInterpolationContext.Provider>\n\n      <BubbleLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,OAAO,WAAuC;AAE9C,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,+BAA+B;AAEjC,MAAM,cAAc,CACzB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AAEJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,0DACE,oCAAC,yBAAyB,UAAzB,EAAkC,OAAO,qBACxC,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE,oCAAC,qBAAkB,IAAI,SAAS,QAAQ,UAAU,GAClD,oCAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU,CAC3D,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,wBAAwB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAEjE,CACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import { Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveLocationColor(\n    DEFAULT_BUBBLE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <>\n      <SizeInterpolationContext.Provider value={sizeInterpolation}>\n        <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n          <BubbleCircleLayer id={layerId} source={sourceId} />\n          <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        </Source>\n      </SizeInterpolationContext.Provider>\n\n      <BubbleLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
+  "mappings": "AA+DI,mBAGM,KADF,YAFJ;AA/DJ,SAAS,cAAc;AAGvB,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,+BAA+B;AAEjC,MAAM,cAAc,CACzB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AAEJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,iCACE;AAAA,wBAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACxC,+BAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA,0BAAC,qBAAkB,IAAI,SAAS,QAAQ,UAAU;AAAA,MAClD,oBAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU;AAAA,OAC3D,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBACE,wBAAwB,eAAe,IAAI,kBAAkB;AAAA;AAAA,IAEjE;AAAA,KACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": ["radius"]
 }

package/esm/map/components/BubbleLayer/BubbleLayerTooltip.js

@@ -1,4 +1,5 @@
-import React, { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 import {
   _ChartTooltip as ChartTooltip,
   _useChartActionsMenu as useChartActionsMenu
@@ -40,7 +41,7 @@ const BubbleLayerTooltip = (props) => {
     closestPoint.current = sanitizedData[0];
     remainingPoints.current = sanitizedData.slice(1);
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       position,
@@ -51,9 +52,9 @@ const BubbleLayerTooltip = (props) => {
         selectedItemId,
         actionsMenuRef,
         updateSelectedItem
-      }
-    },
-    closestPoint.current ? tooltipTemplate(closestPoint.current, remainingPoints.current) : null
+      },
+      children: closestPoint.current ? tooltipTemplate(closestPoint.current, remainingPoints.current) : null
+    }
   );
 };
 BubbleLayerTooltip["displayName"] = "BubbleLayerTooltip";

package/esm/map/components/BubbleLayer/BubbleLayerTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayerTooltip.tsx"],
-  "sourcesContent": ["import React, { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface BubbleTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __radius: number;\n  __lat: number;\n  data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: BubbleLayerTooltipHandler;\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const tooltipRef = useRef<HTMLDivElement | null>(null);\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<BubbleTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const closestPoint = useRef<BubbleLayerTooltipData>();\n  const remainingPoints = useRef<BubbleLayerTooltipData[]>([]);\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const sanitizedData = data.map((bubbleProps) => {\n      const {\n        __color: color,\n        __radius: radius,\n        data: customData,\n      } = bubbleProps;\n\n      return {\n        color,\n        radius,\n        data: customData,\n      };\n    });\n\n    closestPoint.current = sanitizedData[0];\n    remainingPoints.current = sanitizedData.slice(1);\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      ref={tooltipRef}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {closestPoint.current\n        ? tooltipTemplate(closestPoint.current, remainingPoints.current)\n        : null}\n    </ChartTooltip>\n  );\n};\n\nBubbleLayerTooltip['displayName'] = 'BubbleLayerTooltip';\n"],
-  "mappings": "AAAA,OAAO,SAAS,cAAc;AAE9B;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAoBA,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAA8C;AAChD,QAAM,SAAS,yBAAyB;AAExC,QAAM,eAAe,OAA+B;AACpD,QAAM,kBAAkB,OAAiC,CAAC,CAAC;AAE3D,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,gBAAgB,KAAK,IAAI,CAAC,gBAAgB;AAC9C,YAAM;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,MACR,IAAI;AAEJ,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF,CAAC;AAED,iBAAa,UAAU,cAAc,CAAC;AACtC,oBAAgB,UAAU,cAAc,MAAM,CAAC;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,IAEC,aAAa,UACV,gBAAgB,aAAa,SAAS,gBAAgB,OAAO,IAC7D;AAAA,EACN;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface BubbleTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __radius: number;\n  __lat: number;\n  data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: BubbleLayerTooltipHandler;\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const tooltipRef = useRef<HTMLDivElement | null>(null);\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<BubbleTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const closestPoint = useRef<BubbleLayerTooltipData>();\n  const remainingPoints = useRef<BubbleLayerTooltipData[]>([]);\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const sanitizedData = data.map((bubbleProps) => {\n      const {\n        __color: color,\n        __radius: radius,\n        data: customData,\n      } = bubbleProps;\n\n      return {\n        color,\n        radius,\n        data: customData,\n      };\n    });\n\n    closestPoint.current = sanitizedData[0];\n    remainingPoints.current = sanitizedData.slice(1);\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      ref={tooltipRef}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {closestPoint.current\n        ? tooltipTemplate(closestPoint.current, remainingPoints.current)\n        : null}\n    </ChartTooltip>\n  );\n};\n\nBubbleLayerTooltip['displayName'] = 'BubbleLayerTooltip';\n"],
+  "mappings": "AA0EI;AA1EJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAoBA,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAA8C;AAChD,QAAM,SAAS,yBAAyB;AAExC,QAAM,eAAe,OAA+B;AACpD,QAAM,kBAAkB,OAAiC,CAAC,CAAC;AAE3D,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,gBAAgB,KAAK,IAAI,CAAC,gBAAgB;AAC9C,YAAM;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,MACR,IAAI;AAEJ,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF,CAAC;AAED,iBAAa,UAAU,cAAc,CAAC;AACtC,oBAAgB,UAAU,cAAc,MAAM,CAAC;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,uBAAa,UACV,gBAAgB,aAAa,SAAS,gBAAgB,OAAO,IAC7D;AAAA;AAAA,EACN;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/BubbleLayer/BubbleOutlineLayer.js

@@ -1,5 +1,5 @@
+import { jsx } from "react/jsx-runtime";
 import { Layer } from "@vis.gl/react-maplibre";
-import React from "react";
 import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
 import { useSizeInterpolation } from "./hooks/use-size-interpolation.js";
 import { addOutlineSize } from "./utils/add-outline-size.js";
@@ -18,7 +18,7 @@ const BubbleOutlineLayer = ({
 }) => {
   const sizeInterpolation = useSizeInterpolation();
   const outlineRadiusExpression = sizeInterpolation === "fixed" ? DEFAULT_OUTLINE_RADIUS_EXPRESSION : buildOutlineStickToDistanceExpression();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Layer,
     {
       type: "circle",

package/esm/map/components/BubbleLayer/BubbleOutlineLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleOutlineLayer.tsx"],
-  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\nimport React from 'react';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { addOutlineSize } from './utils/add-outline-size.js';\nimport { buildOutlineStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  ACTIVE_COLOR,\n  BUBBLE_OUTLINE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n} from '../../constants.js';\n\nconst DEFAULT_OUTLINE_RADIUS_EXPRESSION = addOutlineSize(\n  DEFAULT_RADIUS_EXPRESSION,\n);\n\nexport const BubbleOutlineLayer = ({\n  beforeId,\n  source,\n}: {\n  beforeId: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const outlineRadiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_OUTLINE_RADIUS_EXPRESSION\n      : buildOutlineStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-radius': outlineRadiusExpression,\n        'circle-opacity': 0,\n        'circle-stroke-width': BUBBLE_OUTLINE_STROKE,\n        'circle-stroke-color': getCanvasColor(ACTIVE_COLOR),\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          1,\n          0,\n        ],\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,6CAA6C;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,oCAAoC;AAAA,EACxC;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,0BACJ,sBAAsB,UAClB,oCACA,sCAAsC;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,uBAAuB;AAAA,QACvB,uBAAuB,eAAe,YAAY;AAAA,QAClD,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { addOutlineSize } from './utils/add-outline-size.js';\nimport { buildOutlineStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  ACTIVE_COLOR,\n  BUBBLE_OUTLINE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n} from '../../constants.js';\n\nconst DEFAULT_OUTLINE_RADIUS_EXPRESSION = addOutlineSize(\n  DEFAULT_RADIUS_EXPRESSION,\n);\n\nexport const BubbleOutlineLayer = ({\n  beforeId,\n  source,\n}: {\n  beforeId: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const outlineRadiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_OUTLINE_RADIUS_EXPRESSION\n      : buildOutlineStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-radius': outlineRadiusExpression,\n        'circle-opacity': 0,\n        'circle-stroke-width': BUBBLE_OUTLINE_STROKE,\n        'circle-stroke-color': getCanvasColor(ACTIVE_COLOR),\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          1,\n          0,\n        ],\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAgCI;AAhCJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,6CAA6C;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,oCAAoC;AAAA,EACxC;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,0BACJ,sBAAsB,UAClB,oCACA,sCAAsC;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,uBAAuB;AAAA,QACvB,uBAAuB,eAAe,YAAY;AAAA,QAClD,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }