@unovis/ts 1.6.6-stellar.1 → 1.6.7

package/components/timeline/style.js

@@ -1,51 +1,38 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css } from '@emotion/css';
+import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
 
 const root = css `
   label: timeline-component;
 `;
-const globalStyles = injectGlobal `
-  :root {
-    --vis-timeline-row-even-fill-color: #FFFFFF;
-    --vis-timeline-row-odd-fill-color: #F7FAFC;
-    --vis-timeline-row-background-opacity: 1;
-    --vis-timeline-scrollbar-background-color: #E6E9F3;
-    --vis-timeline-scrollbar-color: #9EA7B8;
-
-    --vis-timeline-label-font-size: 12px;
-    --vis-timeline-label-color: #6C778C;
-
-    --vis-timeline-arrow-color: #6C778C;
-    --vis-timeline-arrow-stroke-width: 1.5;
-
-    --vis-timeline-cursor: default;
-    --vis-timeline-line-color: var(--vis-color-main);
-    --vis-timeline-line-stroke-width: 0;
-    --vis-timeline-line-hover-stroke-width: 0;
-    --vis-timeline-line-hover-stroke-color: #6C778C;
-
-    // The line stroke color variable is not defined by default
-    // to allow it to fallback to the corresponding row background color
-    /* --vis-timeline-line-stroke-color: none; */
-
-    --vis-dark-timeline-row-even-fill-color: #292B34;
-    --vis-dark-timeline-row-odd-fill-color: #333742;
-    --vis-dark-timeline-scrollbar-background-color: #292B34;
-    --vis-dark-timeline-scrollbar-color: #6C778C;
-    --vis-dark-timeline-label-color: #EFF5F8;
-    --vis-dark-timeline-arrow-color: #EFF5F8;
-    --vis-dark-timeline-line-hover-stroke-color: #EFF5F8;
-  }
-
-  body.theme-dark ${`.${root}`} {
-    --vis-timeline-row-even-fill-color: var(--vis-dark-timeline-row-even-fill-color);
-    --vis-timeline-row-odd-fill-color: var(--vis-dark-timeline-row-odd-fill-color);
-    --vis-timeline-scrollbar-background-color: var(--vis-dark-timeline-scrollbar-background-color);
-    --vis-timeline-scrollbar-color: var(--vis-dark-timeline-scrollbar-color);
-    --vis-timeline-label-color: var(--vis-dark-timeline-label-color);
-    --vis-timeline-arrow-color: var(--vis-dark-timeline-arrow-color);
-    --vis-timeline-line-hover-stroke-color: var(--vis-dark-timeline-line-hover-stroke-color);
-  }
-`;
+const cssVarDefaults = {
+    '--vis-timeline-row-even-fill-color': '#FFFFFF',
+    '--vis-timeline-row-odd-fill-color': '#F7FAFC',
+    '--vis-timeline-row-background-opacity': '1',
+    '--vis-timeline-scrollbar-background-color': '#E6E9F3',
+    '--vis-timeline-scrollbar-color': '#9EA7B8',
+    '--vis-timeline-label-font-size': '12px',
+    '--vis-timeline-label-color': '#6C778C',
+    '--vis-timeline-label-user-select': 'none',
+    '--vis-timeline-label-pointer-events': 'all',
+    '--vis-timeline-arrow-color': '#6C778C',
+    '--vis-timeline-arrow-stroke-width': '1.5',
+    '--vis-timeline-cursor': 'default',
+    '--vis-timeline-line-color': 'var(--vis-color-main)',
+    '--vis-timeline-line-stroke-color': undefined,
+    '--vis-timeline-line-stroke-width': '0',
+    '--vis-timeline-line-hover-stroke-width': '0',
+    '--vis-timeline-line-hover-stroke-color': '#6C778C',
+    '--vis-timeline-row-icon-cursor': 'default',
+    '--vis-dark-timeline-row-even-fill-color': '#292B34',
+    '--vis-dark-timeline-row-odd-fill-color': '#333742',
+    '--vis-dark-timeline-scrollbar-background-color': '#292B34',
+    '--vis-dark-timeline-scrollbar-color': '#6C778C',
+    '--vis-dark-timeline-label-color': '#EFF5F8',
+    '--vis-dark-timeline-arrow-color': '#EFF5F8',
+    '--vis-dark-timeline-line-hover-stroke-color': '#EFF5F8',
+};
+const variables = getCssVarNames(cssVarDefaults);
+injectGlobalCssVariables(cssVarDefaults, root);
 const background = css `
   label: background;
 `;
@@ -119,14 +106,21 @@ const label = css `
   font-size: var(--vis-timeline-label-font-size);
   fill: var(--vis-timeline-label-color);
   text-anchor: end;
-  user-select: none;
+  user-select: var(--vis-timeline-label-user-select);
+  pointer-events: var(--vis-timeline-label-pointer-events);
+`;
+const labelBackground = css `
+  label: label-background;
+  fill: transparent;
+  pointer-events: all;
 `;
 const rowIcons = css `
   label: row-icons;
 `;
 const rowIcon = css `
   label: row-icon;
+  cursor: var(--vis-timeline-row-icon-cursor);
 `;
 
-export { arrow, arrows, background, globalStyles, label, labels, line, lineEndIcon, lineGroup, lineStartIcon, lines, root, row, rowIcon, rowIcons, rowOdd, rows, scrollbar, scrollbarBackground, scrollbarHandle };
+export { arrow, arrows, background, cssVarDefaults, label, labelBackground, labels, line, lineEndIcon, lineGroup, lineStartIcon, lines, root, row, rowIcon, rowIcons, rowOdd, rows, scrollbar, scrollbarBackground, scrollbarHandle, variables };
 //# sourceMappingURL=style.js.map

package/components/timeline/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/timeline/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: timeline-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-timeline-row-even-fill-color: #FFFFFF;\n    --vis-timeline-row-odd-fill-color: #F7FAFC;\n    --vis-timeline-row-background-opacity: 1;\n    --vis-timeline-scrollbar-background-color: #E6E9F3;\n    --vis-timeline-scrollbar-color: #9EA7B8;\n\n    --vis-timeline-label-font-size: 12px;\n    --vis-timeline-label-color: #6C778C;\n\n    --vis-timeline-arrow-color: #6C778C;\n    --vis-timeline-arrow-stroke-width: 1.5;\n\n    --vis-timeline-cursor: default;\n    --vis-timeline-line-color: var(--vis-color-main);\n    --vis-timeline-line-stroke-width: 0;\n    --vis-timeline-line-hover-stroke-width: 0;\n    --vis-timeline-line-hover-stroke-color: #6C778C;\n\n    // The line stroke color variable is not defined by default\n    // to allow it to fallback to the corresponding row background color\n    /* --vis-timeline-line-stroke-color: none; */\n\n    --vis-dark-timeline-row-even-fill-color: #292B34;\n    --vis-dark-timeline-row-odd-fill-color: #333742;\n    --vis-dark-timeline-scrollbar-background-color: #292B34;\n    --vis-dark-timeline-scrollbar-color: #6C778C;\n    --vis-dark-timeline-label-color: #EFF5F8;\n    --vis-dark-timeline-arrow-color: #EFF5F8;\n    --vis-dark-timeline-line-hover-stroke-color: #EFF5F8;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-timeline-row-even-fill-color: var(--vis-dark-timeline-row-even-fill-color);\n    --vis-timeline-row-odd-fill-color: var(--vis-dark-timeline-row-odd-fill-color);\n    --vis-timeline-scrollbar-background-color: var(--vis-dark-timeline-scrollbar-background-color);\n    --vis-timeline-scrollbar-color: var(--vis-dark-timeline-scrollbar-color);\n    --vis-timeline-label-color: var(--vis-dark-timeline-label-color);\n    --vis-timeline-arrow-color: var(--vis-dark-timeline-arrow-color);\n    --vis-timeline-line-hover-stroke-color: var(--vis-dark-timeline-line-hover-stroke-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const lines = css`\n  label: lines;\n`\n\nexport const lineGroup = css`\n  label: line-group;\n`\n\nexport const line = css`\n  label: line;\n  fill: var(--vis-timeline-line-color);\n  cursor: var(--vis-timeline-cursor);\n\n  stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-even-fill-color));\n  stroke-width: var(--vis-timeline-line-stroke-width);\n\n  &.odd {\n    stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-odd-fill-color));\n  }\n\n  :hover {\n    stroke-width: var(--vis-timeline-line-hover-stroke-width);\n    stroke: var(--vis-timeline-line-hover-stroke-color);\n  }\n`\n\nexport const lineStartIcon = css`\n  label: line-start-icon;\n`\n\nexport const lineEndIcon = css`\n  label: line-end-icon;\n`\n\nexport const arrows = css`\n  label: arrows;\n`\n\nexport const arrow = css`\n  label: arrow;\n  fill: none;\n  stroke: var(--vis-timeline-arrow-color);\n  stroke-width: var(--vis-timeline-arrow-stroke-width);\n`\n\nexport const rows = css`\n  label: rows;\n`\n\nexport const row = css`\n  label: row;\n  fill: var(--vis-timeline-row-even-fill-color);\n  opacity: var(--vis-timeline-row-background-opacity);\n`\n\nexport const rowOdd = css`\n  label: row-odd;\n  fill: var(--vis-timeline-row-odd-fill-color);\n`\n\nexport const scrollbar = css`\n  label: scroll-bar;\n`\n\nexport const scrollbarHandle = css`\n  label: scroll-bar-handle;\n  fill: var(--vis-timeline-scrollbar-color);\n`\n\nexport const scrollbarBackground = css`\n  label: scroll-bar-background;\n  fill: var(--vis-timeline-scrollbar-background-color);\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const label = css`\n  label: label;\n  dominant-baseline: middle;\n  font-size: var(--vis-timeline-label-font-size);\n  fill: var(--vis-timeline-label-color);\n  text-anchor: end;\n  user-select: none;\n`\n\nexport const rowIcons = css`\n  label: row-icons;\n`\n\nexport const rowIcon = css`\n  label: row-icon;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;;EAS7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;EAgBtB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;EAKvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;EAIrB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;EAGxB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;EAGrC;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOvB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/timeline/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport type { UnovisCssVariablesDefinition } from 'types/style'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: timeline-component;\n`\n\nexport const cssVarDefaults: UnovisCssVariablesDefinition = {\n  '--vis-timeline-row-even-fill-color': '#FFFFFF',\n  '--vis-timeline-row-odd-fill-color': '#F7FAFC',\n  '--vis-timeline-row-background-opacity': '1',\n  '--vis-timeline-scrollbar-background-color': '#E6E9F3',\n  '--vis-timeline-scrollbar-color': '#9EA7B8',\n\n  '--vis-timeline-label-font-size': '12px',\n  '--vis-timeline-label-color': '#6C778C',\n  '--vis-timeline-label-user-select': 'none',\n  '--vis-timeline-label-pointer-events': 'all',\n\n  '--vis-timeline-arrow-color': '#6C778C',\n  '--vis-timeline-arrow-stroke-width': '1.5',\n\n  '--vis-timeline-cursor': 'default',\n  '--vis-timeline-line-color': 'var(--vis-color-main)',\n  '--vis-timeline-line-stroke-color': undefined,\n  '--vis-timeline-line-stroke-width': '0',\n  '--vis-timeline-line-hover-stroke-width': '0',\n  '--vis-timeline-line-hover-stroke-color': '#6C778C',\n\n  '--vis-timeline-row-icon-cursor': 'default',\n\n  '--vis-dark-timeline-row-even-fill-color': '#292B34',\n  '--vis-dark-timeline-row-odd-fill-color': '#333742',\n  '--vis-dark-timeline-scrollbar-background-color': '#292B34',\n  '--vis-dark-timeline-scrollbar-color': '#6C778C',\n  '--vis-dark-timeline-label-color': '#EFF5F8',\n  '--vis-dark-timeline-arrow-color': '#EFF5F8',\n  '--vis-dark-timeline-line-hover-stroke-color': '#EFF5F8',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const background = css`\n  label: background;\n`\n\nexport const lines = css`\n  label: lines;\n`\n\nexport const lineGroup = css`\n  label: line-group;\n`\n\nexport const line = css`\n  label: line;\n  fill: var(--vis-timeline-line-color);\n  cursor: var(--vis-timeline-cursor);\n\n  stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-even-fill-color));\n  stroke-width: var(--vis-timeline-line-stroke-width);\n\n  &.odd {\n    stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-odd-fill-color));\n  }\n\n  :hover {\n    stroke-width: var(--vis-timeline-line-hover-stroke-width);\n    stroke: var(--vis-timeline-line-hover-stroke-color);\n  }\n`\n\nexport const lineStartIcon = css`\n  label: line-start-icon;\n`\n\nexport const lineEndIcon = css`\n  label: line-end-icon;\n`\n\nexport const arrows = css`\n  label: arrows;\n`\n\nexport const arrow = css`\n  label: arrow;\n  fill: none;\n  stroke: var(--vis-timeline-arrow-color);\n  stroke-width: var(--vis-timeline-arrow-stroke-width);\n`\n\nexport const rows = css`\n  label: rows;\n`\n\nexport const row = css`\n  label: row;\n  fill: var(--vis-timeline-row-even-fill-color);\n  opacity: var(--vis-timeline-row-background-opacity);\n`\n\nexport const rowOdd = css`\n  label: row-odd;\n  fill: var(--vis-timeline-row-odd-fill-color);\n`\n\nexport const scrollbar = css`\n  label: scroll-bar;\n`\n\nexport const scrollbarHandle = css`\n  label: scroll-bar-handle;\n  fill: var(--vis-timeline-scrollbar-color);\n`\n\nexport const scrollbarBackground = css`\n  label: scroll-bar-background;\n  fill: var(--vis-timeline-scrollbar-background-color);\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const label = css`\n  label: label;\n  dominant-baseline: middle;\n  font-size: var(--vis-timeline-label-font-size);\n  fill: var(--vis-timeline-label-color);\n  text-anchor: end;\n  user-select: var(--vis-timeline-label-user-select);\n  pointer-events: var(--vis-timeline-label-pointer-events);\n`\n\nexport const labelBackground = css`\n  label: label-background;\n  fill: transparent;\n  pointer-events: all;\n`\n\nexport const rowIcons = css`\n  label: row-icons;\n`\n\nexport const rowIcon = css`\n  label: row-icon;\n  cursor: var(--vis-timeline-row-icon-cursor);\n`\n"],"names":[],"mappings":";;;AAIO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEY,MAAA,cAAc,GAAiC;AAC1D,IAAA,oCAAoC,EAAE,SAAS;AAC/C,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,uCAAuC,EAAE,GAAG;AAC5C,IAAA,2CAA2C,EAAE,SAAS;AACtD,IAAA,gCAAgC,EAAE,SAAS;AAE3C,IAAA,gCAAgC,EAAE,MAAM;AACxC,IAAA,4BAA4B,EAAE,SAAS;AACvC,IAAA,kCAAkC,EAAE,MAAM;AAC1C,IAAA,qCAAqC,EAAE,KAAK;AAE5C,IAAA,4BAA4B,EAAE,SAAS;AACvC,IAAA,mCAAmC,EAAE,KAAK;AAE1C,IAAA,uBAAuB,EAAE,SAAS;AAClC,IAAA,2BAA2B,EAAE,uBAAuB;AACpD,IAAA,kCAAkC,EAAE,SAAS;AAC7C,IAAA,kCAAkC,EAAE,GAAG;AACvC,IAAA,wCAAwC,EAAE,GAAG;AAC7C,IAAA,wCAAwC,EAAE,SAAS;AAEnD,IAAA,gCAAgC,EAAE,SAAS;AAE3C,IAAA,yCAAyC,EAAE,SAAS;AACpD,IAAA,wCAAwC,EAAE,SAAS;AACnD,IAAA,gDAAgD,EAAE,SAAS;AAC3D,IAAA,qCAAqC,EAAE,SAAS;AAChD,IAAA,iCAAiC,EAAE,SAAS;AAC5C,IAAA,iCAAiC,EAAE,SAAS;AAC5C,IAAA,6CAA6C,EAAE,SAAS;EACzD;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;EAgBtB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;EAKvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;EAIrB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;EAGxB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;EAGrC;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;EAIjC;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;;;;"}

package/components/tooltip/style.js

@@ -1,4 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: tooltip;
@@ -41,14 +42,14 @@ const variables = injectGlobal `
     --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);
   }
 
-  body.theme-dark ${`.${root}`} {
+  ${darkThemeCssSelectors} ${`.${root}`} {
     --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);
     --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);
     --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);
     --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);
   }
 
-  body.theme-dark {
+  ${darkThemeCssSelectors} {
     --vis-tooltip-background-color: rgba(30,30,30, 0.95);
     --vis-tooltip-text-color: #e5e9f7;
     --vis-tooltip-border-color: var(--vis-color-grey);

package/components/tooltip/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/tooltip/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: tooltip;\n  display: inline-block;\n  left: 0;\n  bottom: 0;\n  min-width: max-content;\n  position: absolute;\n  opacity: 0;\n  transition: opacity;\n  transition-duration: var(--vis-tooltip-transition-duration);\n  z-index: 999999;\n  padding: var(--vis-tooltip-padding);\n  color: var(--vis-tooltip-text-color);\n  border-radius: var(--vis-tooltip-border-radius);\n  box-shadow: var(--vis-tooltip-box-shadow);\n  border: solid 1px var(--vis-tooltip-border-color);\n  background-color: var(--vis-tooltip-background-color);\n  backdrop-filter: var(--vis-tooltip-backdrop-filter);\n`\n\n/**\n * @deprecated This selector is deprecated and will be removed in future versions. Use `root` instead.\n */\nexport const tooltip = root\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);\n    --vis-tooltip-border-color: #e5e9f7;\n    --vis-tooltip-text-color: #000;\n    --vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);\n    --vis-tooltip-backdrop-filter: none;\n    --vis-tooltip-padding: 10px 15px;\n    --vis-tooltip-border-radius: 5px;\n    --vis-tooltip-transition-duration: 300ms;\n    --vis-tooltip-box-shadow: none;\n\n    --vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);\n    --vis-dark-tooltip-text-color: #e5e9f7;\n    --vis-dark-tooltip-border-color: var(--vis-color-grey);\n    --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);\n    --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);\n    --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);\n    --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);\n  }\n\n  body.theme-dark {\n    --vis-tooltip-background-color: rgba(30,30,30, 0.95);\n    --vis-tooltip-text-color: #e5e9f7;\n    --vis-tooltip-border-color: var(--vis-color-grey);\n    --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);\n  }\n`\n\nexport const positionFixed = css`\n  bottom: unset;\n  position: fixed;\n`\n\nexport const show = css`\n  opacity: 1;\n`\n\nexport const hidden = css`\n  display: none;\n`\n\nexport const nonInteractive = css`\n  label: non-interactive;\n  pointer-events: none;\n  user-select: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkBtB;AAED;;AAEG;AACI,MAAM,OAAO,GAAG,KAAI;AAEpB,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;;;;;;EAa7B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/tooltip/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const root = css`\n  label: tooltip;\n  display: inline-block;\n  left: 0;\n  bottom: 0;\n  min-width: max-content;\n  position: absolute;\n  opacity: 0;\n  transition: opacity;\n  transition-duration: var(--vis-tooltip-transition-duration);\n  z-index: 999999;\n  padding: var(--vis-tooltip-padding);\n  color: var(--vis-tooltip-text-color);\n  border-radius: var(--vis-tooltip-border-radius);\n  box-shadow: var(--vis-tooltip-box-shadow);\n  border: solid 1px var(--vis-tooltip-border-color);\n  background-color: var(--vis-tooltip-background-color);\n  backdrop-filter: var(--vis-tooltip-backdrop-filter);\n`\n\n/**\n * @deprecated This selector is deprecated and will be removed in future versions. Use `root` instead.\n */\nexport const tooltip = root\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);\n    --vis-tooltip-border-color: #e5e9f7;\n    --vis-tooltip-text-color: #000;\n    --vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);\n    --vis-tooltip-backdrop-filter: none;\n    --vis-tooltip-padding: 10px 15px;\n    --vis-tooltip-border-radius: 5px;\n    --vis-tooltip-transition-duration: 300ms;\n    --vis-tooltip-box-shadow: none;\n\n    --vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);\n    --vis-dark-tooltip-text-color: #e5e9f7;\n    --vis-dark-tooltip-border-color: var(--vis-color-grey);\n    --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);\n    --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);\n    --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);\n    --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);\n  }\n\n  ${darkThemeCssSelectors} {\n    --vis-tooltip-background-color: rgba(30,30,30, 0.95);\n    --vis-tooltip-text-color: #e5e9f7;\n    --vis-tooltip-border-color: var(--vis-color-grey);\n    --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);\n  }\n`\n\nexport const positionFixed = css`\n  bottom: unset;\n  position: fixed;\n`\n\nexport const show = css`\n  opacity: 1;\n`\n\nexport const hidden = css`\n  display: none;\n`\n\nexport const nonInteractive = css`\n  label: non-interactive;\n  pointer-events: none;\n  user-select: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkBtB;AAED;;AAEG;AACI,MAAM,OAAO,GAAG,KAAI;AAEpB,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;IAkBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;;;IAOnC,qBAAqB,CAAA;;;;;;EAMxB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

package/components/topojson-map/index.js

@@ -1020,6 +1020,8 @@ class TopoJSONMap extends ComponentCore {
             (_a = config.onSourcePointMouseLeave) === null || _a === void 0 ? void 0 : _a.call(config, d.flowData, event);
         });
         smartTransition(sourcePointsEnter.merge(sourcePoints), duration)
+            .attr('cx', d => d.x)
+            .attr('cy', d => d.y)
             .attr('r', d => d.radius / this._currentZoomLevel)
             .style('opacity', 1);
         sourcePoints.exit().remove();