@bundle-stats/ui 4.13.0-beta.0 → 4.13.0-beta.3

package/lib-esm/components/metrics-treemap/metrics-treemap.module.css

@@ -12,6 +12,7 @@
   height: 100%;
   fill: var(--color-text);
   font-family: var(--font-family);
+  background: var(--color-background);
 }
 
 /** Tile overlay fill background transition */
@@ -20,29 +21,27 @@
   transition-property: opacity;
 }
 
-.tileOverlay {
-  fill: var(--color-outline);
+.leafBackdrop {
+  fill: var(--color-background);
   transition: var(--ui-transition-out);
   transition-property: opacity;
-  opacity: 0.4;
+  opacity: 0.6;
 }
 
-.root .tile:hover .tileOverlay {
+.leaf:hover .leafBackdrop {
   transition: var(--ui-transition-in);
-  opacity: 0.8;
+  opacity: 0.4;
 }
 
-/** Tile content */
-.tileContent {
+/** Leaf wrapper button */
+.leafAction {
   appearance: none;
   border: 0;
-  border-radius: none;
+  border-radius: 0;
   padding: 0;
   background: none;
-
   width: 100%;
   height: 100%;
-  padding: var(--space-xxsmall) var(--space-small);
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
@@ -51,78 +50,94 @@
   text-align: left;
 }
 
-.tileContentWrapper {
+.leafContent {
   width: 100%;
-  max-height: 100%;
+  height: 100%;
   display: flex;
   flex-flow: column;
-  gap: 4px;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column leafs */
+.leafWrapper[x="0"] .leafContent {
+  padding-left: var(--space-small);
 }
 
-.tileContentLabel {
-  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
-  margin-bottom: calc(0px - 2px);
-  flex: 1 1 auto;
-  max-width: calc(100% + var(--space-xxsmall));  /* take more space if necessary */
+.leadContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(2em * var(--line-height-heading));
   overflow: hidden;
-  word-break: break-word;
 }
 
-.tileContentValue {
+.leadContentValue {
   flex: 0 0 auto;
   max-width: calc(100% + var(--space-xxsmall));
-  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
   white-space: nowrap;
   overflow: hidden;
 }
 
-.tileContentMetric {
+.leadContentMetric {
   font-weight: bold;
 }
 
-.tileContentDelta {
+.leadContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.tileSmall .tileContent {
+.leafSmall .leafContent {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.tileSmall .tileContentLabel {
+.leafSmall .leadContentLabel {
   margin-top: 0;
 }
 
 /** Tile diff variation */
-.tile-NO_CHANGE .tileContent {
+.leaf-NO_CHANGE .leafBackdrop {
+  fill: var(--color-gray-50);
+  opacity: 0.4;
+}
+
+.leaf-NO_CHANGE:hover .leafBackdrop {
+  opacity: 0.2;
+}
+
+.leaf-NO_CHANGE .leafAction {
   color: var(--color-text-light);
 }
 
-.tile-HIGH_NEGATIVE .tileOverlay {
+.leaf-HIGH_NEGATIVE .leafBackdrop {
   fill: var(--color-red-100);
 }
 
-.tile-NEGATIVE .tileOverlay {
+.leaf-NEGATIVE .leafBackdrop {
   fill: var(--color-red-50);
 }
 
-.tile-LOW_NEGATIVE .tileOverlay {
+.leaf-LOW_NEGATIVE .leafBackdrop {
   fill: var(--color-red-25);
 }
 
-.tile-LOW_POSITIVE .tileOverlay {
+.leaf-LOW_POSITIVE .leafBackdrop {
   fill: var(--color-green-25);
 }
 
-.tile-POSITIVE .tileOverlay {
+.leaf-POSITIVE .leafBackdrop {
   fill: var(--color-green-50);
 }
 
-.tile-HIGH_POSITIVE .tileOverlay {
+.leaf-HIGH_POSITIVE .leafBackdrop {
   fill: var(--color-green-100);
 }
 
-
 /** empty message */
 .emptyMessage {
   position: absolute;
@@ -140,7 +155,12 @@
   text-align: center;
 }
 
-/** tooltip content */
+/** tooltip */
+.leafContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
 .tooltip {
   z-index: var(--layer-xxhigh);
   padding: var(--space-xsmall) var(--space-small);
@@ -154,15 +174,11 @@
   font-size: var(--size-small);
 }
 
-.tooltipArrow {
-  border: var(--space-xxsmall) solid var(--color-background);
-  border-width: var(--space-xxsmall) var(--space-xxsmall) 0;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  position: absolute;
-  top: 100%;
+.leafTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
 }
 
-.tooltipContentTitle {
+.leafTooltipContentTitle {
   font-size: var(--size-medium);
 }

package/lib-esm/hooks/entry-info.js

@@ -0,0 +1,8 @@
+import { useCallback } from 'react';
+export function useEntryInfo(params) {
+    const { setState } = params;
+    const hideEntryInfo = useCallback(() => setState({ entryId: '' }), [setState]);
+    const showEntryInfo = useCallback((entryId) => setState({ entryId }), [setState]);
+    return [hideEntryInfo, showEntryInfo];
+}
+//# sourceMappingURL=entry-info.js.map

package/lib-esm/hooks/entry-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-info.js","sourceRoot":"","sources":["../../src/hooks/entry-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAWpC,MAAM,UAAU,YAAY,CAAC,MAA0B;IACrD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE1F,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACxC,CAAC"}

package/lib-esm/query-state.js

@@ -15,7 +15,7 @@ export const useComponentQueryState = (componentName) => {
             return;
         }
         setQueryState({ [componentName]: newState });
-    }, [componentState]);
+    }, [componentState, setQueryState]);
     return [componentState, setState];
 };
 //# sourceMappingURL=query-state.js.map

package/lib-esm/query-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE;YACrC,OAAO;SACR;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC"}
+{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE;YACrC,OAAO;SACR;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC"}

package/lib-esm/ui/button/button.module.css

@@ -256,6 +256,7 @@ a.root {
 .small .glyph {
   width: calc(var(--space-xsmall) + 2px);
   height: calc(var(--space-xsmall) + 2px);
+  margin: 1px; /* compensate to keep the same height when the text is not provided */
 }
 
 .medium {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.13.0-beta.0",
+  "version": "4.13.0-beta.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,14 +36,14 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.24.0",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/preset-env": "7.24.3",
+    "@babel/preset-react": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@types/d3": "7.4.3",
-    "@types/react": "18.2.64",
+    "@types/react": "18.2.67",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -73,14 +73,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.13.0-beta.0",
-    "@floating-ui/react": "0.26.9",
-    "@floating-ui/react-dom": "2.0.8",
+    "@bundle-stats/utils": "^4.13.0-beta.3",
     "ariakit": "2.0.0-next.44",
     "d3": "^7.8.5",
     "modern-css-reset": "1.4.0",
     "react-use": "^17.5.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "f8197677d480f9b0b2112456526c821f49ed5a7d"
+  "gitHead": "01131490d9a0d5e90c3010a384efb3121e41b53a"
 }

package/src/components/bundle-assets/index.jsx

@@ -10,9 +10,14 @@ import {
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
+import {
+  addRowAssetFlags,
+  addRowIsNotPredictive,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-assets.utils';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -60,7 +65,7 @@ export const BundleAssets = (props) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundleAssetsComponent

package/src/components/bundle-modules/bundle-modules.tsx

@@ -44,7 +44,9 @@ const RowHeader = (props: RowHeaderProps) => {
   return (
     <CustomComponentLink
       section={SECTIONS.MODULES}
-      params={{ [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key, moduleMetric } }}
+      params={{
+        [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key, metric: moduleMetric },
+      }}
       className={css.name}
     >
       {row.duplicated && (
@@ -140,7 +142,7 @@ export const BundleModules = (props: BundleModulesProps) => {
         customComponentLink={CustomComponentLink}
       />
     ),
-    [jobs, chunks, CustomComponentLink, filters, search],
+    [jobs, chunks, CustomComponentLink, filters, search, moduleMetric],
   );
 
   const emptyMessage = useMemo(

package/src/components/bundle-modules/index.tsx

@@ -6,7 +6,7 @@ import type { SortAction } from '../../types';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import {
   addRowFlags,
@@ -120,7 +120,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BaseComponent

package/src/components/bundle-packages/index.jsx

@@ -6,9 +6,14 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
-import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+import {
+  getDuplicatePackages,
+  getAddRowDuplicateFlag,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-packages.utils';
 
 export const BundlePackages = (props) => {
   const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
@@ -55,7 +60,7 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundlePackagesComponent

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -25,26 +25,22 @@ export const MetricsDisplaySelector = (
         active={value === MetricsDisplayType.TABLE}
         size="small"
         type="button"
+        glyph={Icon.ICONS.TABLE}
         onClick={() => onSelect(MetricsDisplayType.TABLE)}
         className={css.button}
       >
-        <FlexStack space="xxxsmall" alignItems="center">
-          <Icon glyph={Icon.ICONS.TABLE} className={css.icon} />
-          <span>Table</span>
-        </FlexStack>
+        Table
       </Button>
       <Button
         outline
         active={value === MetricsDisplayType.TREEMAP}
         size="small"
         type="button"
+        glyph={Icon.ICONS.TREEMAP}
         onClick={() => onSelect(MetricsDisplayType.TREEMAP)}
         className={cx(css.button)}
       >
-        <FlexStack space="xxxsmall" alignItems="center">
-          <Icon glyph={Icon.ICONS.TREEMAP} className={css.icon} />
-          <span>Treemap</span>
-        </FlexStack>
+        Treemap
       </Button>
     </FlexStack>
   );

package/src/components/metrics-treemap/metrics-treemap.module.css

@@ -12,6 +12,7 @@
   height: 100%;
   fill: var(--color-text);
   font-family: var(--font-family);
+  background: var(--color-background);
 }
 
 /** Tile overlay fill background transition */
@@ -20,29 +21,27 @@
   transition-property: opacity;
 }
 
-.tileOverlay {
-  fill: var(--color-outline);
+.leafBackdrop {
+  fill: var(--color-background);
   transition: var(--ui-transition-out);
   transition-property: opacity;
-  opacity: 0.4;
+  opacity: 0.6;
 }
 
-.root .tile:hover .tileOverlay {
+.leaf:hover .leafBackdrop {
   transition: var(--ui-transition-in);
-  opacity: 0.8;
+  opacity: 0.4;
 }
 
-/** Tile content */
-.tileContent {
+/** Leaf wrapper button */
+.leafAction {
   appearance: none;
   border: 0;
-  border-radius: none;
+  border-radius: 0;
   padding: 0;
   background: none;
-
   width: 100%;
   height: 100%;
-  padding: var(--space-xxsmall) var(--space-small);
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
@@ -51,78 +50,94 @@
   text-align: left;
 }
 
-.tileContentWrapper {
+.leafContent {
   width: 100%;
-  max-height: 100%;
+  height: 100%;
   display: flex;
   flex-flow: column;
-  gap: 4px;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column leafs */
+.leafWrapper[x="0"] .leafContent {
+  padding-left: var(--space-small);
 }
 
-.tileContentLabel {
-  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
-  margin-bottom: calc(0px - 2px);
-  flex: 1 1 auto;
-  max-width: calc(100% + var(--space-xxsmall));  /* take more space if necessary */
+.leadContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(2em * var(--line-height-heading));
   overflow: hidden;
-  word-break: break-word;
 }
 
-.tileContentValue {
+.leadContentValue {
   flex: 0 0 auto;
   max-width: calc(100% + var(--space-xxsmall));
-  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
   white-space: nowrap;
   overflow: hidden;
 }
 
-.tileContentMetric {
+.leadContentMetric {
   font-weight: bold;
 }
 
-.tileContentDelta {
+.leadContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.tileSmall .tileContent {
+.leafSmall .leafContent {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.tileSmall .tileContentLabel {
+.leafSmall .leadContentLabel {
   margin-top: 0;
 }
 
 /** Tile diff variation */
-.tile-NO_CHANGE .tileContent {
+.leaf-NO_CHANGE .leafBackdrop {
+  fill: var(--color-gray-50);
+  opacity: 0.4;
+}
+
+.leaf-NO_CHANGE:hover .leafBackdrop {
+  opacity: 0.2;
+}
+
+.leaf-NO_CHANGE .leafAction {
   color: var(--color-text-light);
 }
 
-.tile-HIGH_NEGATIVE .tileOverlay {
+.leaf-HIGH_NEGATIVE .leafBackdrop {
   fill: var(--color-red-100);
 }
 
-.tile-NEGATIVE .tileOverlay {
+.leaf-NEGATIVE .leafBackdrop {
   fill: var(--color-red-50);
 }
 
-.tile-LOW_NEGATIVE .tileOverlay {
+.leaf-LOW_NEGATIVE .leafBackdrop {
   fill: var(--color-red-25);
 }
 
-.tile-LOW_POSITIVE .tileOverlay {
+.leaf-LOW_POSITIVE .leafBackdrop {
   fill: var(--color-green-25);
 }
 
-.tile-POSITIVE .tileOverlay {
+.leaf-POSITIVE .leafBackdrop {
   fill: var(--color-green-50);
 }
 
-.tile-HIGH_POSITIVE .tileOverlay {
+.leaf-HIGH_POSITIVE .leafBackdrop {
   fill: var(--color-green-100);
 }
 
-
 /** empty message */
 .emptyMessage {
   position: absolute;
@@ -140,7 +155,12 @@
   text-align: center;
 }
 
-/** tooltip content */
+/** tooltip */
+.leafContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
 .tooltip {
   z-index: var(--layer-xxhigh);
   padding: var(--space-xsmall) var(--space-small);
@@ -154,15 +174,11 @@
   font-size: var(--size-small);
 }
 
-.tooltipArrow {
-  border: var(--space-xxsmall) solid var(--color-background);
-  border-width: var(--space-xxsmall) var(--space-xxsmall) 0;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  position: absolute;
-  top: 100%;
+.leafTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
 }
 
-.tooltipContentTitle {
+.leafTooltipContentTitle {
   font-size: var(--size-medium);
 }