@unovis/ts 1.0.0-beta.9 → 1.0.1-beta.0

package/components/axis/style.js

@@ -5,7 +5,8 @@ const root = css `
 `;
 const globalStyles = injectGlobal `
   :root {
-    --vis-axis-font-family: var(--vis-font-family);
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-axis-font-family: */
     --vis-axis-tick-color: #e8e9ef;
     --vis-axis-tick-label-color: #6c778c;
     --vis-axis-grid-color: #e8e9ef;
@@ -76,7 +77,7 @@ const tick = css `
 
   text, tspan {
     fill: var(--vis-axis-tick-label-color);
-    font-family: var(--vis-axis-font-family);
+    font-family: var(--vis-axis-font-family, var(--vis-font-family));
     stroke: none;
   }
 `;
@@ -84,7 +85,7 @@ const label = css `
   label: label;
   fill: var(--vis-axis-label-color);
   font-size: var(--vis-axis-label-font-size);
-  font-family: var(--vis-axis-font-family);
+  font-family: var(--vis-axis-font-family, var(--vis-font-family));
   text-anchor: middle;
 `;
 const tickText = css `

package/components/axis/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: axis-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-axis-font-family: var(--vis-font-family);\n    --vis-axis-tick-color: #e8e9ef;\n    --vis-axis-tick-label-color: #6c778c;\n    --vis-axis-grid-color: #e8e9ef;\n    --vis-axis-label-color: #6c778c;\n    --vis-axis-tick-label-font-size: 12px;\n    --vis-axis-label-font-size: 14px;\n\n    --vis-dark-axis-tick-color: #6c778c;\n    --vis-dark-axis-tick-label-color: #e8e9ef;\n    --vis-dark-axis-grid-color: #6c778c;\n    --vis-dark-axis-label-color:#fefefe;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-axis-tick-color: var(--vis-dark-axis-tick-color);\n    --vis-axis-tick-label-color: var(--vis-dark-axis-tick-label-color);\n    --vis-axis-grid-color: var(--vis-dark-axis-grid-color);\n    --vis-axis-label-color: var(--vis-dark-axis-label-color);\n  }\n`\n\nexport const hideTickLine = css`\n  label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n  label: hide-domain;\n`\n\nexport const axis = css`\n  label: axis;\n\n  user-select: none;\n\n  .domain {\n    stroke: var(--vis-axis-tick-color);\n  }\n\n  &${`.${hideTickLine}`} {\n    .tick > line {\n      opacity: 0;\n    }\n  }\n\n  &${`.${hideDomain}`} {\n    .domain {\n      opacity: 0;\n    }\n  }\n`\n\nexport const grid = css`\n  label: grid;\n\n  .domain {\n    opacity: 0;\n  }\n\n  line {\n    stroke: var(--vis-axis-grid-color);\n  }\n`\n\nexport const tick = css`\n  label: tick;\n\n  stroke: none;\n  font-size: var(--vis-axis-tick-label-font-size);\n\n  line {\n    stroke: var(--vis-axis-tick-color);\n  }\n\n  text, tspan {\n    fill: var(--vis-axis-tick-label-color);\n    font-family: var(--vis-axis-font-family);\n    stroke: none;\n  }\n`\n\nexport const label = css`\n  label: label;\n  fill: var(--vis-axis-label-color);\n  font-size: var(--vis-axis-label-font-size);\n  font-family: var(--vis-axis-font-family);\n  text-anchor: middle;\n`\n\nexport const tickText = css`\n  label: tick-text;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;AAgBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;AASlB,GAAA,EAAA,CAAA,CAAA,EAAI,YAAY,CAAE,CAAA,CAAA;;;;;;AAMlB,GAAA,EAAA,CAAA,CAAA,EAAI,UAAU,CAAE,CAAA,CAAA;;;;;EAKpB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;EAetB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: axis-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-axis-font-family: */\n    --vis-axis-tick-color: #e8e9ef;\n    --vis-axis-tick-label-color: #6c778c;\n    --vis-axis-grid-color: #e8e9ef;\n    --vis-axis-label-color: #6c778c;\n    --vis-axis-tick-label-font-size: 12px;\n    --vis-axis-label-font-size: 14px;\n\n    --vis-dark-axis-tick-color: #6c778c;\n    --vis-dark-axis-tick-label-color: #e8e9ef;\n    --vis-dark-axis-grid-color: #6c778c;\n    --vis-dark-axis-label-color:#fefefe;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-axis-tick-color: var(--vis-dark-axis-tick-color);\n    --vis-axis-tick-label-color: var(--vis-dark-axis-tick-label-color);\n    --vis-axis-grid-color: var(--vis-dark-axis-grid-color);\n    --vis-axis-label-color: var(--vis-dark-axis-label-color);\n  }\n`\n\nexport const hideTickLine = css`\n  label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n  label: hide-domain;\n`\n\nexport const axis = css`\n  label: axis;\n\n  user-select: none;\n\n  .domain {\n    stroke: var(--vis-axis-tick-color);\n  }\n\n  &${`.${hideTickLine}`} {\n    .tick > line {\n      opacity: 0;\n    }\n  }\n\n  &${`.${hideDomain}`} {\n    .domain {\n      opacity: 0;\n    }\n  }\n`\n\nexport const grid = css`\n  label: grid;\n\n  .domain {\n    opacity: 0;\n  }\n\n  line {\n    stroke: var(--vis-axis-grid-color);\n  }\n`\n\nexport const tick = css`\n  label: tick;\n\n  stroke: none;\n  font-size: var(--vis-axis-tick-label-font-size);\n\n  line {\n    stroke: var(--vis-axis-tick-color);\n  }\n\n  text, tspan {\n    fill: var(--vis-axis-tick-label-color);\n    font-family: var(--vis-axis-font-family, var(--vis-font-family));\n    stroke: none;\n  }\n`\n\nexport const label = css`\n  label: label;\n  fill: var(--vis-axis-label-color);\n  font-size: var(--vis-axis-label-font-size);\n  font-family: var(--vis-axis-font-family, var(--vis-font-family));\n  text-anchor: middle;\n`\n\nexport const tickText = css`\n  label: tick-text;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;AAiBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;AASlB,GAAA,EAAA,CAAA,CAAA,EAAI,YAAY,CAAE,CAAA,CAAA;;;;;;AAMlB,GAAA,EAAA,CAAA,CAAA,EAAI,UAAU,CAAE,CAAA,CAAA;;;;;EAKpB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;EAetB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/bullet-legend/style.js

@@ -5,7 +5,9 @@ const root = css `
 `;
 const variables = injectGlobal `
   :root {
-    --vis-legend-font-family: var(--vis-font-family);
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-legend-font-family: */
+
     --vis-legend-label-color: #6c778c;
     --vis-legend-label-max-width: 300px;
     --vis-legend-label-font-size: 12px;
@@ -26,7 +28,7 @@ const variables = injectGlobal `
 const item = css `
   label: legendItem;
   display: inline;
-  font-family: var(--vis-legend-font-family);
+  font-family: var(--vis-legend-font-family, var(--vis-font-family));
   margin-right: var(--vis-legend-item-spacing);
   white-space: nowrap;
   cursor: default;

package/components/bullet-legend/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-legend-font-family: var(--vis-font-family);\n    --vis-legend-label-color: #6c778c;\n    --vis-legend-label-max-width: 300px;\n    --vis-legend-label-font-size: 12px;\n    --vis-legend-bullet-size: 9px;\n    --vis-legend-bullet-inactive-color: #eee;\n    --vis-legend-item-spacing: 20px;\n    --vis-legend-bullet-label-spacing: 8px;\n\n    --vis-dark-legend-label-color: #eee;\n    --vis-dark-legend-bullet-inactive-color: #6c778c;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-legend-label-color: var(--vis-dark-legend-label-color);\n    --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);\n  }\n`\n\nexport const item = css`\n  label: legendItem;\n  display: inline;\n  font-family: var(--vis-legend-font-family);\n  margin-right: var(--vis-legend-item-spacing);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n`\n\nexport const label = css`\n  label: legendItemLabel;\n  font-size: var(--vis-legend-label-font-size);\n  display: inline-block;\n  vertical-align: middle;\n  color: var(--vis-legend-label-color);\n  max-width: var(--vis-legend-label-max-width);\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`\n\nexport const bullet = css`\n  label: legendItemBullet;\n  border-radius: 100%;\n  background-color: var(--vis-legend-bullet-inactive-color);\n  border: 1px solid;\n  display: inline-block;\n  margin-right: var(--vis-legend-bullet-label-spacing);\n  width: var(--vis-legend-bullet-size);\n  height: var(--vis-legend-bullet-size);\n  vertical-align: middle;\n\n  .inactive {\n\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;AAejB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-legend-font-family: */\n\n    --vis-legend-label-color: #6c778c;\n    --vis-legend-label-max-width: 300px;\n    --vis-legend-label-font-size: 12px;\n    --vis-legend-bullet-size: 9px;\n    --vis-legend-bullet-inactive-color: #eee;\n    --vis-legend-item-spacing: 20px;\n    --vis-legend-bullet-label-spacing: 8px;\n\n    --vis-dark-legend-label-color: #eee;\n    --vis-dark-legend-bullet-inactive-color: #6c778c;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-legend-label-color: var(--vis-dark-legend-label-color);\n    --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);\n  }\n`\n\nexport const item = css`\n  label: legendItem;\n  display: inline;\n  font-family: var(--vis-legend-font-family, var(--vis-font-family));\n  margin-right: var(--vis-legend-item-spacing);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n`\n\nexport const label = css`\n  label: legendItemLabel;\n  font-size: var(--vis-legend-label-font-size);\n  display: inline-block;\n  vertical-align: middle;\n  color: var(--vis-legend-label-color);\n  max-width: var(--vis-legend-label-max-width);\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`\n\nexport const bullet = css`\n  label: legendItemBullet;\n  border-radius: 100%;\n  background-color: var(--vis-legend-bullet-inactive-color);\n  border: 1px solid;\n  display: inline-block;\n  margin-right: var(--vis-legend-bullet-label-spacing);\n  width: var(--vis-legend-bullet-size);\n  height: var(--vis-legend-bullet-size);\n  vertical-align: middle;\n\n  .inactive {\n\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;"}

package/components/bullet-legend/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/bullet-legend/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/crosshair/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/crosshair/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/donut/style.js

@@ -7,12 +7,14 @@ const variables = injectGlobal `
   :root {
     --vis-donut-central-label-font-size: 16px;
     --vis-donut-central-label-text-color: #5b5f6d;
-    --vis-donut-central-label-font-family: var(--vis-font-family);
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-donut-central-label-font-family: */
     --vis-donut-central-label-font-weight: 600;
 
     --vis-donut-central-sub-label-font-size: 12px;
     --vis-donut-central-sub-label-text-color: #5b5f6d;
-    --vis-donut-central-sub-label-font-family: var(--vis-font-family);
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-donut-central-sub-label-font-family: */
     --vis-donut-central-sub-label-font-weight: 500;
 
     --vis-donut-background-color: #E7E9F3;
@@ -49,7 +51,7 @@ const centralLabel = css `
   text-anchor: middle;
   dominant-baseline: middle;
   font-size: var(--vis-donut-central-label-font-size);
-  font-family: var(--vis-donut-central-label-font-family);
+  font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));
   font-weight: var(--vis-donut-central-label-font-weight);
   fill: var(--vis-donut-central-label-text-color);
 `;
@@ -58,7 +60,7 @@ const centralSubLabel = css `
   text-anchor: middle;
   dominant-baseline: middle;
   font-size: var(--vis-donut-central-sub-label-font-size);
-  font-family: var(--vis-donut-central-sub-label-font-family);
+  font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));
   font-weight: var(--vis-donut-central-sub-label-font-weight);
   fill: var(--vis-donut-central-sub-label-text-color);
 `;

package/components/donut/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    --vis-donut-central-label-font-family: var(--vis-font-family);\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    --vis-donut-central-sub-label-font-family: var(--vis-font-family);\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-donut-background-color: #E7E9F3;\n    --vis-donut-segment-stroke-width: 0;\n    // The line segment color variable is not defined by default\n    // to allow it to fallback to the donut background color\n    /* --vis-donut-segment-stroke-color: none; */\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n    --vis-dark-donut-background-color: #18160C;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n    --vis-donut-background-color: var(--vis-dark-donut-background-color);\n  }\n`\nexport const background = css`\n  label: background;\n  fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n  stroke-width: var(--vis-donut-segment-stroke-width);\n  stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family);\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family);\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;AAuBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-label-font-family: */\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-sub-label-font-family: */\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-donut-background-color: #E7E9F3;\n    --vis-donut-segment-stroke-width: 0;\n    // The line segment color variable is not defined by default\n    // to allow it to fallback to the donut background color\n    /* --vis-donut-segment-stroke-color: none; */\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n    --vis-dark-donut-background-color: #18160C;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n    --vis-donut-background-color: var(--vis-dark-donut-background-color);\n  }\n`\nexport const background = css`\n  label: background;\n  fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n  stroke-width: var(--vis-donut-segment-stroke-width);\n  stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}

package/components/free-brush/index.js

@@ -19,7 +19,7 @@ class FreeBrush extends XYComponentCore {
             .attr('class', brush);
     }
     _render(customDuration) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const { config } = this;
         const xScale = this.xScale;
         const yScale = this.yScale;
@@ -39,7 +39,8 @@ class FreeBrush extends XYComponentCore {
         //
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        (_a = this.brush.node().__brush) === null || _a === void 0 ? void 0 : _a.emitter = undefined;
+        if (this.brush.node().__brush)
+            this.brush.node().__brush.emitter = undefined;
         this.brushBehaviour = this._getBrushBehaviour(config.mode);
         this.brushBehaviour
             .handleSize(config.handleWidth)
@@ -53,8 +54,8 @@ class FreeBrush extends XYComponentCore {
         let brushRange;
         switch (config.mode) {
             case FreeBrushMode.XY: {
-                const xSelectionRange = this._dataRangeToPixelRange([(_b = config.selection) === null || _b === void 0 ? void 0 : _b[0][0], (_c = config.selection) === null || _c === void 0 ? void 0 : _c[0][1]], xScale);
-                const ySelectionRange = this._dataRangeToPixelRange([(_d = config.selection) === null || _d === void 0 ? void 0 : _d[1][0], (_e = config.selection) === null || _e === void 0 ? void 0 : _e[1][1]], yScale, true);
+                const xSelectionRange = this._dataRangeToPixelRange([(_a = config.selection) === null || _a === void 0 ? void 0 : _a[0][0], (_b = config.selection) === null || _b === void 0 ? void 0 : _b[0][1]], xScale);
+                const ySelectionRange = this._dataRangeToPixelRange([(_c = config.selection) === null || _c === void 0 ? void 0 : _c[1][0], (_d = config.selection) === null || _d === void 0 ? void 0 : _d[1][1]], yScale, true);
                 brushRange = (xSelectionRange && ySelectionRange) ? [[xSelectionRange[0], ySelectionRange[0]], [xSelectionRange[1], ySelectionRange[1]]] : null;
                 break;
             }

package/components/free-brush/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/free-brush/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { brush, BrushBehavior, brushX, brushY, D3BrushEvent } from 'd3-brush'\nimport { XYComponentCore } from 'core/xy-component'\nimport { clamp, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { ContinuousScale } from 'types/scale'\nimport { FreeBrushMode, FreeBrushSelection, FreeBrushSelectionInPixels } from './types'\n\n// Config\nimport { FreeBrushConfig, FreeBrushConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfig<Datum>, FreeBrushConfigInterface<Datum>> {\n  static selectors = s\n  config: FreeBrushConfig<Datum> = new FreeBrushConfig()\n  private brush: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  private brushBehaviour: BrushBehavior<unknown>\n  private _firstRender = true\n\n  constructor (config: FreeBrushConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n\n    this.brush = this.g\n      .append('g')\n      .attr('class', s.brush)\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const xScale = this.xScale\n    const yScale = this.yScale\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    if (this._firstRender) this.brush.classed(s.hide, this._firstRender && config.autoHide)\n\n    // Sometimes Brush stops emitting 'start' and 'end' events. Possible explanation:\n    // \"... mouseup will only fire when performed within the browser, which can lead to losing track of the button state.\"\n    // https://stackoverflow.com/a/48970682\n    //\n    // D3 code related to the problem:\n    // https://github.com/d3/d3-brush/blob/ec2bce6f15074a9ead7f9a84c61335be51c123a3/src/brush.js#L301\n    //\n    // We're clearing brush's event emitter state to force it to get re-initialized\n    // Caveat of this solution: If you're doing a brush selection and a render happens\n    // (e.g. due to a data or config update), it'll reset the brush.\n    //\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.brush.node().__brush?.emitter = undefined\n\n    this.brushBehaviour = this._getBrushBehaviour(config.mode)\n\n    this.brushBehaviour\n      .handleSize(config.handleWidth)\n      .extent([[0, 0], [this._width, this._height]])\n      .on('start', this._onBrushStart.bind(this))\n      .on('brush', this._onBrushMove.bind(this))\n      .on('end', this._onBrushEnd.bind(this))\n\n    this.brush\n      .call(this.brushBehaviour)\n\n    // Calculate the brush range from configured selection and apply it\n    let brushRange: FreeBrushSelectionInPixels\n    switch (config.mode) {\n      case FreeBrushMode.XY: {\n        const xSelectionRange = this._dataRangeToPixelRange([config.selection?.[0][0], config.selection?.[0][1]], xScale)\n        const ySelectionRange = this._dataRangeToPixelRange([config.selection?.[1][0], config.selection?.[1][1]], yScale, true)\n        brushRange = (xSelectionRange && ySelectionRange) ? [[xSelectionRange[0], ySelectionRange[0]], [xSelectionRange[1], ySelectionRange[1]]] : null\n        break\n      }\n      case FreeBrushMode.X:\n      case FreeBrushMode.Y:\n      default: {\n        const scale = config.mode === FreeBrushMode.Y ? yScale : xScale\n        brushRange = this._dataRangeToPixelRange(config.selection as [number, number], scale, config.mode === FreeBrushMode.Y)\n      }\n    }\n\n    smartTransition(this.brush, duration)\n      .call(this.brushBehaviour.move, brushRange) // Sets up the brush and calls brush events\n      .on('end interrupt', () => { this._firstRender = false })\n\n    if (!duration) this._firstRender = false\n  }\n\n  private _onBrush (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n    const userDriven = !!event?.sourceEvent\n\n    // Selection from the brush events is in Screen Space (pixels)\n    // In case of two dimensional brush is comes as [ [xMinPx, yMinPx], [xMaxPx, yMaxPx] ],\n    //   while in the config we'll be storing it as [ [xMin, xMax], [yMin, yMax] ]\n    const s = (event?.selection) as FreeBrushSelectionInPixels\n    if (!this._isSelectionValid(s)) {\n      config.selection = null\n      return\n    }\n\n    // Convert the raw brush selection from pixels to data units, store it in the config and trigger the onBrush callback\n    let selectedDomain: FreeBrushSelection\n    switch (config.mode) {\n      case FreeBrushMode.XY: {\n        const xSelection = this._pixelRangeToDataRange([s[0][0], s[1][0]], this.xScale, config.selectionMinLength?.[0] ?? config.selectionMinLength)\n        const ySelection = this._pixelRangeToDataRange([s[0][1], s[1][1]], this.yScale, config.selectionMinLength?.[1] ?? config.selectionMinLength, true)\n        selectedDomain = (xSelection && ySelection) ? [\n          [xSelection?.[0], xSelection?.[1]],\n          [ySelection?.[0], ySelection?.[1]],\n        ] : null\n        break\n      }\n      case FreeBrushMode.Y: {\n        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.yScale, config.selectionMinLength, true)\n        break\n      }\n      case FreeBrushMode.X:\n      default: {\n        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.xScale, config.selectionMinLength)\n        break\n      }\n    }\n\n    if (selectedDomain === null || selectedDomain[0] === null || selectedDomain[1] === null) {\n      this.brush.call(this.brushBehaviour.move, null)\n      return\n    }\n\n    config.selection = selectedDomain\n    if (!this._firstRender) config.onBrush(selectedDomain, event, userDriven)\n  }\n\n  private _pixelRangeToDataRange (selectionInPixels: [number, number], scale: ContinuousScale, constraint: number, reversed?: boolean): [number, number] | null {\n    const selectedDomain = selectionInPixels.map(n => scale.invert(n)) as [number, number]\n    if (reversed) selectedDomain.reverse()\n\n    const domain = scale.domain() as [number, number]\n    const domainLength = Math.abs(domain[1] - domain[0])\n    const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0])\n\n    if (constraint >= domainLength) {\n      console.warn('Unovis | FreeBrush: Configured domain constraint is bigger than the brush domain')\n    }\n\n    if ((selectionLength < constraint) && (constraint < domainLength)) return null\n    else return selectedDomain\n  }\n\n  private _dataRangeToPixelRange (selectionInDataUnits: [number, number], scale: ContinuousScale, reversed?: boolean): [number, number] | null {\n    if (!selectionInDataUnits) return null\n\n    const range = scale.range()\n    const s = [...selectionInDataUnits]\n    if (reversed) {\n      range.reverse()\n      s.reverse()\n    }\n    const selectionMin = clamp(scale(s[0]) ?? 0, range[0], range[1])\n    const selectionMax = clamp(scale(s[1]) ?? 0, range[0], range[1])\n    return (selectionMax - selectionMin) ? [selectionMin, selectionMax] : null\n  }\n\n  private _isSelectionValid (s: FreeBrushSelection | FreeBrushSelectionInPixels): boolean {\n    const { config } = this\n\n    if (config.mode === FreeBrushMode.XY) {\n      return s && Array.isArray(s[0]) && Array.isArray(s[1])\n    } else {\n      return s && isNumber(s[0]) && isNumber(s[1])\n    }\n  }\n\n  private _getBrushBehaviour (mode: FreeBrushMode): BrushBehavior<Datum> {\n    switch (mode) {\n      case FreeBrushMode.X: return brushX()\n      case FreeBrushMode.Y: return brushY()\n      default: return brush()\n    }\n  }\n\n  private _onBrushStart (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n    const userDriven = !!event?.sourceEvent\n    this._onBrush(event)\n    if (config.autoHide && userDriven) this.brush.classed(s.hide, false)\n    if (!this._firstRender) config.onBrushStart?.(config.selection, event, userDriven)\n  }\n\n  private _onBrushMove (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n\n    this._onBrush(event)\n    if (!this._firstRender) config.onBrushMove?.(config.selection, event, !!event?.sourceEvent)\n  }\n\n  private _onBrushEnd (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n\n    this._onBrush(event)\n    if (config.autoHide) this.brush.classed(s.hide, true)\n    if (!this._firstRender) config.onBrushEnd?.(config.selection, event, !!event?.sourceEvent)\n  }\n}\n"],"names":["s.brush","s.hide","brush","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/free-brush/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { brush, BrushBehavior, brushX, brushY, D3BrushEvent } from 'd3-brush'\nimport { XYComponentCore } from 'core/xy-component'\nimport { clamp, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { ContinuousScale } from 'types/scale'\nimport { FreeBrushMode, FreeBrushSelection, FreeBrushSelectionInPixels } from './types'\n\n// Config\nimport { FreeBrushConfig, FreeBrushConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfig<Datum>, FreeBrushConfigInterface<Datum>> {\n  static selectors = s\n  config: FreeBrushConfig<Datum> = new FreeBrushConfig()\n  private brush: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  private brushBehaviour: BrushBehavior<unknown>\n  private _firstRender = true\n\n  constructor (config: FreeBrushConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n\n    this.brush = this.g\n      .append('g')\n      .attr('class', s.brush)\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const xScale = this.xScale\n    const yScale = this.yScale\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    if (this._firstRender) this.brush.classed(s.hide, this._firstRender && config.autoHide)\n\n    // Sometimes Brush stops emitting 'start' and 'end' events. Possible explanation:\n    // \"... mouseup will only fire when performed within the browser, which can lead to losing track of the button state.\"\n    // https://stackoverflow.com/a/48970682\n    //\n    // D3 code related to the problem:\n    // https://github.com/d3/d3-brush/blob/ec2bce6f15074a9ead7f9a84c61335be51c123a3/src/brush.js#L301\n    //\n    // We're clearing brush's event emitter state to force it to get re-initialized\n    // Caveat of this solution: If you're doing a brush selection and a render happens\n    // (e.g. due to a data or config update), it'll reset the brush.\n    //\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    if (this.brush.node().__brush) this.brush.node().__brush.emitter = undefined\n\n    this.brushBehaviour = this._getBrushBehaviour(config.mode)\n\n    this.brushBehaviour\n      .handleSize(config.handleWidth)\n      .extent([[0, 0], [this._width, this._height]])\n      .on('start', this._onBrushStart.bind(this))\n      .on('brush', this._onBrushMove.bind(this))\n      .on('end', this._onBrushEnd.bind(this))\n\n    this.brush\n      .call(this.brushBehaviour)\n\n    // Calculate the brush range from configured selection and apply it\n    let brushRange: FreeBrushSelectionInPixels\n    switch (config.mode) {\n      case FreeBrushMode.XY: {\n        const xSelectionRange = this._dataRangeToPixelRange([config.selection?.[0][0], config.selection?.[0][1]], xScale)\n        const ySelectionRange = this._dataRangeToPixelRange([config.selection?.[1][0], config.selection?.[1][1]], yScale, true)\n        brushRange = (xSelectionRange && ySelectionRange) ? [[xSelectionRange[0], ySelectionRange[0]], [xSelectionRange[1], ySelectionRange[1]]] : null\n        break\n      }\n      case FreeBrushMode.X:\n      case FreeBrushMode.Y:\n      default: {\n        const scale = config.mode === FreeBrushMode.Y ? yScale : xScale\n        brushRange = this._dataRangeToPixelRange(config.selection as [number, number], scale, config.mode === FreeBrushMode.Y)\n      }\n    }\n\n    smartTransition(this.brush, duration)\n      .call(this.brushBehaviour.move, brushRange) // Sets up the brush and calls brush events\n      .on('end interrupt', () => { this._firstRender = false })\n\n    if (!duration) this._firstRender = false\n  }\n\n  private _onBrush (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n    const userDriven = !!event?.sourceEvent\n\n    // Selection from the brush events is in Screen Space (pixels)\n    // In case of two dimensional brush is comes as [ [xMinPx, yMinPx], [xMaxPx, yMaxPx] ],\n    //   while in the config we'll be storing it as [ [xMin, xMax], [yMin, yMax] ]\n    const s = (event?.selection) as FreeBrushSelectionInPixels\n    if (!this._isSelectionValid(s)) {\n      config.selection = null\n      return\n    }\n\n    // Convert the raw brush selection from pixels to data units, store it in the config and trigger the onBrush callback\n    let selectedDomain: FreeBrushSelection\n    switch (config.mode) {\n      case FreeBrushMode.XY: {\n        const xSelection = this._pixelRangeToDataRange([s[0][0], s[1][0]], this.xScale, config.selectionMinLength?.[0] ?? config.selectionMinLength)\n        const ySelection = this._pixelRangeToDataRange([s[0][1], s[1][1]], this.yScale, config.selectionMinLength?.[1] ?? config.selectionMinLength, true)\n        selectedDomain = (xSelection && ySelection) ? [\n          [xSelection?.[0], xSelection?.[1]],\n          [ySelection?.[0], ySelection?.[1]],\n        ] : null\n        break\n      }\n      case FreeBrushMode.Y: {\n        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.yScale, config.selectionMinLength, true)\n        break\n      }\n      case FreeBrushMode.X:\n      default: {\n        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.xScale, config.selectionMinLength)\n        break\n      }\n    }\n\n    if (selectedDomain === null || selectedDomain[0] === null || selectedDomain[1] === null) {\n      this.brush.call(this.brushBehaviour.move, null)\n      return\n    }\n\n    config.selection = selectedDomain\n    if (!this._firstRender) config.onBrush(selectedDomain, event, userDriven)\n  }\n\n  private _pixelRangeToDataRange (selectionInPixels: [number, number], scale: ContinuousScale, constraint: number, reversed?: boolean): [number, number] | null {\n    const selectedDomain = selectionInPixels.map(n => scale.invert(n)) as [number, number]\n    if (reversed) selectedDomain.reverse()\n\n    const domain = scale.domain() as [number, number]\n    const domainLength = Math.abs(domain[1] - domain[0])\n    const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0])\n\n    if (constraint >= domainLength) {\n      console.warn('Unovis | FreeBrush: Configured domain constraint is bigger than the brush domain')\n    }\n\n    if ((selectionLength < constraint) && (constraint < domainLength)) return null\n    else return selectedDomain\n  }\n\n  private _dataRangeToPixelRange (selectionInDataUnits: [number, number], scale: ContinuousScale, reversed?: boolean): [number, number] | null {\n    if (!selectionInDataUnits) return null\n\n    const range = scale.range()\n    const s = [...selectionInDataUnits]\n    if (reversed) {\n      range.reverse()\n      s.reverse()\n    }\n    const selectionMin = clamp(scale(s[0]) ?? 0, range[0], range[1])\n    const selectionMax = clamp(scale(s[1]) ?? 0, range[0], range[1])\n    return (selectionMax - selectionMin) ? [selectionMin, selectionMax] : null\n  }\n\n  private _isSelectionValid (s: FreeBrushSelection | FreeBrushSelectionInPixels): boolean {\n    const { config } = this\n\n    if (config.mode === FreeBrushMode.XY) {\n      return s && Array.isArray(s[0]) && Array.isArray(s[1])\n    } else {\n      return s && isNumber(s[0]) && isNumber(s[1])\n    }\n  }\n\n  private _getBrushBehaviour (mode: FreeBrushMode): BrushBehavior<Datum> {\n    switch (mode) {\n      case FreeBrushMode.X: return brushX()\n      case FreeBrushMode.Y: return brushY()\n      default: return brush()\n    }\n  }\n\n  private _onBrushStart (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n    const userDriven = !!event?.sourceEvent\n    this._onBrush(event)\n    if (config.autoHide && userDriven) this.brush.classed(s.hide, false)\n    if (!this._firstRender) config.onBrushStart?.(config.selection, event, userDriven)\n  }\n\n  private _onBrushMove (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n\n    this._onBrush(event)\n    if (!this._firstRender) config.onBrushMove?.(config.selection, event, !!event?.sourceEvent)\n  }\n\n  private _onBrushEnd (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n\n    this._onBrush(event)\n    if (config.autoHide) this.brush.classed(s.hide, true)\n    if (!this._firstRender) config.onBrushEnd?.(config.selection, event, !!event?.sourceEvent)\n  }\n}\n"],"names":["s.brush","s.hide","brush","s"],"mappings":"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"}

package/components/graph/modules/node/style.js

@@ -38,7 +38,8 @@ const variables = injectGlobal `
     --vis-graph-node-label-text-color: #0F1E57;
     --vis-graph-node-sublabel-text-color: #989aa3;
     --vis-graph-node-sublabel-font-size: 8pt;
-    --vis-graph-node-label-font-family: var(--vis-font-family);
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-graph-node-label-font-family: */
 
     --vis-dark-graph-node-label-background: var(--vis-color-grey);
     --vis-dark-graph-node-label-text-color: #ffffff;
@@ -144,13 +145,13 @@ const labelTextContent = css `
   label: label-text-content;
 
   fill: var(--vis-graph-node-label-text-color);
-  font-family: var(--vis-graph-node-label-font-family);
+  font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));
 `;
 const subLabelTextContent = css `
   label: sublabel-text-content;
 
   fill: var(--vis-graph-node-sublabel-text-color);
-  font-family: var(--vis-graph-node-label-font-family);
+  font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));
   font-size: var(--vis-graph-node-sublabel-font-size);
 `;
 const sideLabelsGroup = css `

package/components/graph/modules/node/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    /* Node Fill */\n    --vis-graph-node-stroke-color: rgb(206, 211, 222);\n    --vis-graph-node-fill-color: #fff;\n    --vis-graph-node-gauge-color: #adb4c2;\n    --vis-graph-node-selection-color: #acb3b8;\n\n    --vis-dark-graph-node-stroke-color: rgba(30,30,30,.25);\n    --vis-dark-graph-node-fill-color: #494b56;\n    --vis-dark-graph-node-gauge-color: #989aa3;\n    --vis-dark-graph-node-selection-color: #494b56;\n\n    /* Node Central Icon */\n    --vis-graph-node-icon-fill-color-bright: #ffffff;\n    --vis-graph-node-icon-fill-color-dark: var(--vis-color-grey);\n    --vis-graph-node-icon-fill-color: #9ea7b8;\n\n    --vis-dark-graph-node-icon-fill-color: var(--vis-graph-node-icon-fill-color-bright);\n\n    /* Node Bottom Icon */\n    --vis-graph-node-bottom-icon-font-size: 14pt;\n    --vis-graph-node-bottom-icon-fill-color: #a0a6ad;\n    --vis-graph-node-bottom-icon-stroke-color: #fff;\n    --vis-graph-node-bottom-icon-stroke-width: 2px;\n\n    --vis-dark-graph-node-bottom-icon-fill-color: #a0a6ad;\n    --vis-dark-graph-node-bottom-icon-stroke-color: #fff;\n\n    /* Node Label */\n    --vis-graph-node-label-font-size: 9pt;\n    --vis-graph-node-label-background: #ffffff;\n    --vis-graph-node-label-text-color: #0F1E57;\n    --vis-graph-node-sublabel-text-color: #989aa3;\n    --vis-graph-node-sublabel-font-size: 8pt;\n    --vis-graph-node-label-font-family: var(--vis-font-family);\n\n    --vis-dark-graph-node-label-background: var(--vis-color-grey);\n    --vis-dark-graph-node-label-text-color: #ffffff;\n    --vis-dark-graph-node-sublabel-text-color: #989aa3;\n\n    /* Node Side Labels (circular labels)*/\n    --vis-graph-node-side-label-background-fill-color: #a0a9af;\n    --vis-graph-node-side-label-background-stroke-color: #ffffff;\n    --vis-graph-node-side-label-fill-color-bright: #ffffff;\n    --vis-graph-node-side-label-fill-color-dark: #494b56;\n\n    --vis-dark-graph-node-side-label-background-fill-color: #989aa3;\n    --vis-dark-graph-node-side-label-background-stroke-color: var(--vis-color-grey);\n    --vis-dark-graph-node-side-label-fill-color-bright: #f1f4f7;\n    --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey);\n\n    /* Greyout */\n    --vis-graph-node-greyout-color: #ebeff7;\n    --vis-graph-node-icon-greyout-color: #c6cad1;\n    --vis-graph-node-side-label-background-greyout-color: #f1f4f7;\n\n    --vis-dark-graph-node-greyout-color: #494b56;\n    --vis-dark-graph-node-icon-greyout-color: var(--vis-color-grey);\n    --vis-dark-graph-node-side-label-background-greyout-color: #494B56;\n  }\n\n  body.theme-dark ${`.${nodes}`} {\n    --vis-graph-node-stroke-color: var(--vis-dark-graph-node-stroke-color);\n    --vis-graph-node-fill-color: var(--vis-dark-graph-node-fill-color);\n    --vis-graph-node-gauge-color: var(--vis-dark-graph-node-gauge-color);\n    --vis-graph-node-selection-color: var(--vis-dark-graph-node-selection-color);\n\n    --vis-graph-node-icon-fill-color: var(--vis-dark-graph-node-icon-fill-color);\n\n    --vis-graph-node-bottom-icon-fill-color: var(--vis-dark-graph-node-bottom-icon-fill-color);\n    --vis-graph-node-bottom-icon-stroke-color: var(--vis-dark-graph-node-bottom-icon-stroke-color);\n\n    --vis-graph-node-label-background: var(--vis-dark-graph-node-label-background);\n    --vis-graph-node-label-text-color: var(--vis-dark-graph-node-label-text-color);\n    --vis-graph-node-sublabel-text-color: var(--vis-dark-graph-node-sublabel-text-color);\n\n    --vis-graph-node-side-label-background-fill-color: var(--vis-dark-graph-node-side-label-background-fill-color);\n    --vis-graph-node-side-label-background-stroke-color: var(--vis-dark-graph-side-label-background-stroke-color);\n    --vis-graph-node-side-label-fill-color-bright: var(--vis-dark-graph-node-side-label-fill-color-bright);\n    --vis-graph-node-side-label-fill-color-dark: var(vis-dark-graph-node-side-label-fill-color-dark);\n\n    --vis-graph-node-greyout-color: var(--vis-dark-graph-node-greyout-color);\n    --vis-graph-node-icon-greyout-color: var(--vis-dark-graph-node-icon-greyout-color);\n    --vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);\n  }\n`\n\nexport const node = css`\n  label: node-shape;\n\n  stroke: var(--vis-graph-node-stroke-color);\n  fill: var(--vis-graph-node-fill-color);\n  transition: .4s fill, .4s stroke;\n`\n\nexport const nodeIcon = css`\n  label: icon;\n\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  transition: .4s all;\n  fill: var(--vis-graph-node-icon-fill-color);\n`\n\nexport const nodeBottomIcon = css`\n  label: node-bottom-icon;\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  font-size: var(--vis-graph-node-bottom-icon-font-size);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  transition: .4s fill;\n  fill: var(--vis-graph-node-bottom-icon-fill-color);\n  stroke: var(--vis-graph-node-bottom-icon-stroke-color);\n  stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);\n`\n\nexport const nodeIsDragged = css`\n  label: dragged;\n`\n\nexport const label = css`\n  label: label;\n\n  text-anchor: middle;\n  font-weight: 300;\n  font-size: var(--vis-graph-node-label-font-size);\n`\n\nexport const labelBackground = css`\n  label: background;\n\n  opacity: 0.9;\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  fill: var(--vis-graph-node-label-background);\n`\n\nexport const labelText = css`\n  label: label-text;\n`\n\nexport const labelTextContent = css`\n  label: label-text-content;\n\n  fill: var(--vis-graph-node-label-text-color);\n  font-family: var(--vis-graph-node-label-font-family);\n`\n\nexport const subLabelTextContent = css`\n  label: sublabel-text-content;\n\n  fill: var(--vis-graph-node-sublabel-text-color);\n  font-family: var(--vis-graph-node-label-font-family);\n  font-size: var(--vis-graph-node-sublabel-font-size);\n`\n\nexport const sideLabelsGroup = css`\n  label: side-labels-group;\n`\n\nexport const sideLabelBackground = css`\n  label: side-label-background;\n\n  stroke-opacity: 0.8;\n  stroke: var(--vis-graph-node-side-label-background-stroke-color);\n  fill: var(--vis-graph-node-side-label-background-fill-color);\n`\n\nexport const sideLabel = css`\n  label: side-label;\n\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  font-size: 16px;\n  fill: var(--vis-graph-node-side-label-fill-color-bright);\n`\n\nexport const sideLabelGroup = css`\n  label: side-label-group;\n  cursor: default;\n`\n\nexport const gNode = css`\n  label: g-node;\n\n  transition: .25s opacity;\n`\n\nexport const draggable = css`\n  label: draggable;\n\n  &:hover {\n    cursor: grab;\n  }\n\n  &${`.${nodeIsDragged}`} {\n    cursor: grabbing;\n  }\n`\n\nexport const gNodeExit = css`\n  label: g-node-exit;\n  pointer-events: none;\n`\n\nexport const nodeSelectionActive = css`\n  label: active;\n`\n\nexport const nodeSelection = css`\n  label: node-selection;\n\n  fill: none;\n  stroke-width: 1;\n  stroke-dasharray: 3 3;\n  opacity: 0;\n  transition: 350ms cubic-bezier(0.165, 0.840, 0.440, 1.000);\n  transform: scale(.5);\n  fill: var(--vis-graph-node-selection-color);\n  fill-opacity: 0.1;\n  stroke: var(--vis-graph-node-selection-color);\n  stroke-opacity: 0.75;\n\n  &${`.${nodeSelectionActive}`} {\n    opacity: 1;\n    transform: scale(1.2);\n  }\n`\n\nexport const nodeGauge = css`\n  label: node-gauge;\n\n  fill: var(--vis-graph-node-gauge-color);\n  transition: .4s fill;\n`\n\nexport const nodePolygon = css`\n  label: polygon;\n\n  ${`.${nodeGauge}`} {\n    fill-opacity: 0;\n    stroke-linecap: round;\n    pointer-events: none;\n  }\n`\n\nexport const customNode = css`\n  label: custom-node;\n\n  stroke-width: 0;\n`\n\nexport const greyoutNode = css`\n  label: greyout;\n\n  ${`.${node}`} {\n    fill: var(--vis-graph-node-greyout-color) !important;\n    stroke: var(--vis-graph-node-greyout-color) !important;\n  }\n\n  ${`.${nodeIcon}`} {\n     fill: var(--vis-graph-node-icon-greyout-color) !important;\n  }\n\n  ${`.${nodeGauge}`} {\n    fill: var(--vis-graph-node-greyout-color) !important;\n    stroke: var(--vis-graph-node-greyout-color) !important;\n  }\n\n  ${`.${label}`} {\n    opacity: 0.5;\n  }\n\n  ${`.${sideLabelBackground}`} {\n     fill: var(--vis-graph-node-side-label-background-greyout-color) !important;\n     stroke-opacity: 0.5;\n   }\n\n   ${`.${sideLabel}`} {\n    fill: var(--vis-graph-node-side-label-fill-color-bright) !important;\n    opacity: 0.25;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwB9B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOjC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;EAKlC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;EAEjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ3B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;EAGhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;AAOvB,GAAA,EAAA,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;;;EAGvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;EAErC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;AAc3B,GAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;EAK3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;EAKlB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;AAKV,EAAA,EAAA,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;;;;AAId,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;AAKf,EAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;AAIX,EAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;;AAKxB,GAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    /* Node Fill */\n    --vis-graph-node-stroke-color: rgb(206, 211, 222);\n    --vis-graph-node-fill-color: #fff;\n    --vis-graph-node-gauge-color: #adb4c2;\n    --vis-graph-node-selection-color: #acb3b8;\n\n    --vis-dark-graph-node-stroke-color: rgba(30,30,30,.25);\n    --vis-dark-graph-node-fill-color: #494b56;\n    --vis-dark-graph-node-gauge-color: #989aa3;\n    --vis-dark-graph-node-selection-color: #494b56;\n\n    /* Node Central Icon */\n    --vis-graph-node-icon-fill-color-bright: #ffffff;\n    --vis-graph-node-icon-fill-color-dark: var(--vis-color-grey);\n    --vis-graph-node-icon-fill-color: #9ea7b8;\n\n    --vis-dark-graph-node-icon-fill-color: var(--vis-graph-node-icon-fill-color-bright);\n\n    /* Node Bottom Icon */\n    --vis-graph-node-bottom-icon-font-size: 14pt;\n    --vis-graph-node-bottom-icon-fill-color: #a0a6ad;\n    --vis-graph-node-bottom-icon-stroke-color: #fff;\n    --vis-graph-node-bottom-icon-stroke-width: 2px;\n\n    --vis-dark-graph-node-bottom-icon-fill-color: #a0a6ad;\n    --vis-dark-graph-node-bottom-icon-stroke-color: #fff;\n\n    /* Node Label */\n    --vis-graph-node-label-font-size: 9pt;\n    --vis-graph-node-label-background: #ffffff;\n    --vis-graph-node-label-text-color: #0F1E57;\n    --vis-graph-node-sublabel-text-color: #989aa3;\n    --vis-graph-node-sublabel-font-size: 8pt;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-graph-node-label-font-family: */\n\n    --vis-dark-graph-node-label-background: var(--vis-color-grey);\n    --vis-dark-graph-node-label-text-color: #ffffff;\n    --vis-dark-graph-node-sublabel-text-color: #989aa3;\n\n    /* Node Side Labels (circular labels)*/\n    --vis-graph-node-side-label-background-fill-color: #a0a9af;\n    --vis-graph-node-side-label-background-stroke-color: #ffffff;\n    --vis-graph-node-side-label-fill-color-bright: #ffffff;\n    --vis-graph-node-side-label-fill-color-dark: #494b56;\n\n    --vis-dark-graph-node-side-label-background-fill-color: #989aa3;\n    --vis-dark-graph-node-side-label-background-stroke-color: var(--vis-color-grey);\n    --vis-dark-graph-node-side-label-fill-color-bright: #f1f4f7;\n    --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey);\n\n    /* Greyout */\n    --vis-graph-node-greyout-color: #ebeff7;\n    --vis-graph-node-icon-greyout-color: #c6cad1;\n    --vis-graph-node-side-label-background-greyout-color: #f1f4f7;\n\n    --vis-dark-graph-node-greyout-color: #494b56;\n    --vis-dark-graph-node-icon-greyout-color: var(--vis-color-grey);\n    --vis-dark-graph-node-side-label-background-greyout-color: #494B56;\n  }\n\n  body.theme-dark ${`.${nodes}`} {\n    --vis-graph-node-stroke-color: var(--vis-dark-graph-node-stroke-color);\n    --vis-graph-node-fill-color: var(--vis-dark-graph-node-fill-color);\n    --vis-graph-node-gauge-color: var(--vis-dark-graph-node-gauge-color);\n    --vis-graph-node-selection-color: var(--vis-dark-graph-node-selection-color);\n\n    --vis-graph-node-icon-fill-color: var(--vis-dark-graph-node-icon-fill-color);\n\n    --vis-graph-node-bottom-icon-fill-color: var(--vis-dark-graph-node-bottom-icon-fill-color);\n    --vis-graph-node-bottom-icon-stroke-color: var(--vis-dark-graph-node-bottom-icon-stroke-color);\n\n    --vis-graph-node-label-background: var(--vis-dark-graph-node-label-background);\n    --vis-graph-node-label-text-color: var(--vis-dark-graph-node-label-text-color);\n    --vis-graph-node-sublabel-text-color: var(--vis-dark-graph-node-sublabel-text-color);\n\n    --vis-graph-node-side-label-background-fill-color: var(--vis-dark-graph-node-side-label-background-fill-color);\n    --vis-graph-node-side-label-background-stroke-color: var(--vis-dark-graph-side-label-background-stroke-color);\n    --vis-graph-node-side-label-fill-color-bright: var(--vis-dark-graph-node-side-label-fill-color-bright);\n    --vis-graph-node-side-label-fill-color-dark: var(vis-dark-graph-node-side-label-fill-color-dark);\n\n    --vis-graph-node-greyout-color: var(--vis-dark-graph-node-greyout-color);\n    --vis-graph-node-icon-greyout-color: var(--vis-dark-graph-node-icon-greyout-color);\n    --vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);\n  }\n`\n\nexport const node = css`\n  label: node-shape;\n\n  stroke: var(--vis-graph-node-stroke-color);\n  fill: var(--vis-graph-node-fill-color);\n  transition: .4s fill, .4s stroke;\n`\n\nexport const nodeIcon = css`\n  label: icon;\n\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  transition: .4s all;\n  fill: var(--vis-graph-node-icon-fill-color);\n`\n\nexport const nodeBottomIcon = css`\n  label: node-bottom-icon;\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  font-size: var(--vis-graph-node-bottom-icon-font-size);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  transition: .4s fill;\n  fill: var(--vis-graph-node-bottom-icon-fill-color);\n  stroke: var(--vis-graph-node-bottom-icon-stroke-color);\n  stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);\n`\n\nexport const nodeIsDragged = css`\n  label: dragged;\n`\n\nexport const label = css`\n  label: label;\n\n  text-anchor: middle;\n  font-weight: 300;\n  font-size: var(--vis-graph-node-label-font-size);\n`\n\nexport const labelBackground = css`\n  label: background;\n\n  opacity: 0.9;\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  fill: var(--vis-graph-node-label-background);\n`\n\nexport const labelText = css`\n  label: label-text;\n`\n\nexport const labelTextContent = css`\n  label: label-text-content;\n\n  fill: var(--vis-graph-node-label-text-color);\n  font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n`\n\nexport const subLabelTextContent = css`\n  label: sublabel-text-content;\n\n  fill: var(--vis-graph-node-sublabel-text-color);\n  font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n  font-size: var(--vis-graph-node-sublabel-font-size);\n`\n\nexport const sideLabelsGroup = css`\n  label: side-labels-group;\n`\n\nexport const sideLabelBackground = css`\n  label: side-label-background;\n\n  stroke-opacity: 0.8;\n  stroke: var(--vis-graph-node-side-label-background-stroke-color);\n  fill: var(--vis-graph-node-side-label-background-fill-color);\n`\n\nexport const sideLabel = css`\n  label: side-label;\n\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  font-size: 16px;\n  fill: var(--vis-graph-node-side-label-fill-color-bright);\n`\n\nexport const sideLabelGroup = css`\n  label: side-label-group;\n  cursor: default;\n`\n\nexport const gNode = css`\n  label: g-node;\n\n  transition: .25s opacity;\n`\n\nexport const draggable = css`\n  label: draggable;\n\n  &:hover {\n    cursor: grab;\n  }\n\n  &${`.${nodeIsDragged}`} {\n    cursor: grabbing;\n  }\n`\n\nexport const gNodeExit = css`\n  label: g-node-exit;\n  pointer-events: none;\n`\n\nexport const nodeSelectionActive = css`\n  label: active;\n`\n\nexport const nodeSelection = css`\n  label: node-selection;\n\n  fill: none;\n  stroke-width: 1;\n  stroke-dasharray: 3 3;\n  opacity: 0;\n  transition: 350ms cubic-bezier(0.165, 0.840, 0.440, 1.000);\n  transform: scale(.5);\n  fill: var(--vis-graph-node-selection-color);\n  fill-opacity: 0.1;\n  stroke: var(--vis-graph-node-selection-color);\n  stroke-opacity: 0.75;\n\n  &${`.${nodeSelectionActive}`} {\n    opacity: 1;\n    transform: scale(1.2);\n  }\n`\n\nexport const nodeGauge = css`\n  label: node-gauge;\n\n  fill: var(--vis-graph-node-gauge-color);\n  transition: .4s fill;\n`\n\nexport const nodePolygon = css`\n  label: polygon;\n\n  ${`.${nodeGauge}`} {\n    fill-opacity: 0;\n    stroke-linecap: round;\n    pointer-events: none;\n  }\n`\n\nexport const customNode = css`\n  label: custom-node;\n\n  stroke-width: 0;\n`\n\nexport const greyoutNode = css`\n  label: greyout;\n\n  ${`.${node}`} {\n    fill: var(--vis-graph-node-greyout-color) !important;\n    stroke: var(--vis-graph-node-greyout-color) !important;\n  }\n\n  ${`.${nodeIcon}`} {\n     fill: var(--vis-graph-node-icon-greyout-color) !important;\n  }\n\n  ${`.${nodeGauge}`} {\n    fill: var(--vis-graph-node-greyout-color) !important;\n    stroke: var(--vis-graph-node-greyout-color) !important;\n  }\n\n  ${`.${label}`} {\n    opacity: 0.5;\n  }\n\n  ${`.${sideLabelBackground}`} {\n     fill: var(--vis-graph-node-side-label-background-greyout-color) !important;\n     stroke-opacity: 0.5;\n   }\n\n   ${`.${sideLabel}`} {\n    fill: var(--vis-graph-node-side-label-fill-color-bright) !important;\n    opacity: 0.25;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwB9B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOjC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;EAKlC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;EAEjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ3B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;EAGhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;AAOvB,GAAA,EAAA,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;;;EAGvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;EAErC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;AAc3B,GAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;EAK3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;EAKlB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;AAKV,EAAA,EAAA,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;;;;AAId,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;AAKf,EAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;AAIX,EAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;;AAKxB,GAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;;;;"}

package/components/graph/modules/panel/style.js

@@ -11,7 +11,9 @@ const variables = injectGlobal `
 
     --vis-graph-panel-label-color: #6c778c;
     --vis-graph-panel-label-background: #ffffff;
-    --vis-graph-panel-label-font-family: var(--vis-font-family);
+
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-graph-panel-label-font-family: */
     --vis-graph-panel-label-font-size: 10pt;
     --vis-graph-panel-label-font-weight: 300;
 
@@ -71,7 +73,7 @@ const labelText = css `
   font-weight: var(--vis-graph-panel-label-font-weight);;
   cursor: default;
   stroke: none;
-  font-family: var(--vis-graph-panel-label-font-family);
+  font-family: var(--vis-graph-panel-label-font-family, var(--vis-font-family));
 `;
 const panelSelectionActive = css `
   label: active;

package/components/graph/modules/panel/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/panel/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const panels = css`\n  label: panels;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-panel-border-color: #E6E9F3;\n    --vis-graph-panel-border-opacity: 0.9;\n    --vis-graph-panel-fill-color: #ffffff;\n\n    --vis-graph-panel-label-color: #6c778c;\n    --vis-graph-panel-label-background: #ffffff;\n    --vis-graph-panel-label-font-family: var(--vis-font-family);\n    --vis-graph-panel-label-font-size: 10pt;\n    --vis-graph-panel-label-font-weight: 300;\n\n    --vis-graph-panel-dashed-outline-color: #b7b7b7;\n\n    --vis-graph-panel-side-icon-symbol-color: #9ea7b8;\n    --vis-graph-panel-side-icon-shape-fill-color: #ffffff;\n\n    --vis-dark-graph-panel-border-color: var(--vis-color-grey);\n    --vis-dark-graph-panel-fill-color: #292b34;\n    --vis-dark-graph-panel-label-color: #E6E9F3;\n    --vis-dark-graph-panel-label-background: var(--vis-color-grey);\n    --vis-dark-graph-panel-side-icon-symbol-color: #ffffff;\n    --vis-dark-graph-panel-side-icon-shape-fill-color: #6c778c;\n    --vis-dark-graph-panel-border-color: #a0a6ad;\n  }\n\n  body.theme-dark ${`.${panels}`} {\n    --vis-graph-panel-border-color: var(--vis-dark-graph-panel-border-color);\n    --vis-graph-panel-fill-color: var(--vis-dark-graph-panel-fill-color);\n    --vis-graph-panel-label-color: var(--vis-dark-graph-panel-label-color);\n    --vis-graph-panel-label-background: var(--vis-dark-graph-panel-label-background);\n    --vis-graph-panel-side-icon-symbol-color: var(--vis-dark-graph-panel-side-icon-symbol-color);\n    --vis-graph-panel-side-icon-shape-fill-color: var(--vis-dark-graph-panel-side-icon-shape-fill-color);\n    --vis-graph-panel-border-color:  var(--vis-dark-graph-panel-border-color);\n  }\n`\n\nexport const gPanel = css`\n  label: g-panel;\n`\n\nexport const panel = css`\n  label: panel;\n\n  stroke: var(--vis-graph-panel-border-color);\n  stroke-opacity: var(--vis-graph-panel-border-opacity);\n  fill: var(--vis-graph-panel-fill-color);\n`\n\nexport const label = css`\n  label: label;\n\n  fill: var(--vis-graph-panel-label-color);\n`\n\nexport const background = css`\n  label: background;\n\n  opacity: 0.9;\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  fill: var(--vis-graph-panel-label-background);\n  stroke: none;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  text-anchor: middle;\n  font-size: var(--vis-graph-panel-label-font-size);\n  font-weight: var(--vis-graph-panel-label-font-weight);;\n  cursor: default;\n  stroke: none;\n  font-family: var(--vis-graph-panel-label-font-family);\n`\n\nexport const panelSelectionActive = css`\n  label: active;\n`\n\nexport const panelSelection = css`\n  label: panel-selection-outline;\n\n  opacity: 0;\n  stroke-width: 1;\n  stroke-dasharray: 3 3;\n  fill: var(--vis-graph-node-selection-color);\n  fill-opacity: 0.1;\n  stroke: var(--vis-graph-panel-dashed-outline-color);\n  stroke-opacity: 0;\n\n  &${`.${panelSelectionActive}`} {\n    opacity: 1;\n    stroke-opacity: 0.75;\n  }\n`\n\nexport const greyout = css`\n  label: greyout;\n  opacity: 0.4;\n`\n\nexport const sideIconGroup = css`\n  label: side-icon-group;\n`\n\nexport const sideIconShape = css`\n  label: side-icon-shape;\n\n  fill: var(--vis-graph-panel-side-icon-shape-fill-color);\n  stroke-width: 2px;\n`\n\nexport const customSideIcon = css`\n  label: side-icon-custom;\n`\n\nexport const sideIconSymbol = css`\n  label: side-label-icon-text;\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  fill: var(--vis-graph-panel-side-icon-symbol-color);\n  stroke: none;\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  cursor: default;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BjB,kBAAA,EAAA,CAAA,CAAA,EAAI,MAAM,CAAE,CAAA,CAAA;;;;;;;;;EAS/B;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ5B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS3B;AAEM,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA;;EAEtC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;AAW5B,GAAA,EAAA,CAAA,CAAA,EAAI,oBAAoB,CAAE,CAAA,CAAA;;;;EAI9B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;EAGzB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;EAK/B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/panel/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const panels = css`\n  label: panels;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-panel-border-color: #E6E9F3;\n    --vis-graph-panel-border-opacity: 0.9;\n    --vis-graph-panel-fill-color: #ffffff;\n\n    --vis-graph-panel-label-color: #6c778c;\n    --vis-graph-panel-label-background: #ffffff;\n\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-graph-panel-label-font-family: */\n    --vis-graph-panel-label-font-size: 10pt;\n    --vis-graph-panel-label-font-weight: 300;\n\n    --vis-graph-panel-dashed-outline-color: #b7b7b7;\n\n    --vis-graph-panel-side-icon-symbol-color: #9ea7b8;\n    --vis-graph-panel-side-icon-shape-fill-color: #ffffff;\n\n    --vis-dark-graph-panel-border-color: var(--vis-color-grey);\n    --vis-dark-graph-panel-fill-color: #292b34;\n    --vis-dark-graph-panel-label-color: #E6E9F3;\n    --vis-dark-graph-panel-label-background: var(--vis-color-grey);\n    --vis-dark-graph-panel-side-icon-symbol-color: #ffffff;\n    --vis-dark-graph-panel-side-icon-shape-fill-color: #6c778c;\n    --vis-dark-graph-panel-border-color: #a0a6ad;\n  }\n\n  body.theme-dark ${`.${panels}`} {\n    --vis-graph-panel-border-color: var(--vis-dark-graph-panel-border-color);\n    --vis-graph-panel-fill-color: var(--vis-dark-graph-panel-fill-color);\n    --vis-graph-panel-label-color: var(--vis-dark-graph-panel-label-color);\n    --vis-graph-panel-label-background: var(--vis-dark-graph-panel-label-background);\n    --vis-graph-panel-side-icon-symbol-color: var(--vis-dark-graph-panel-side-icon-symbol-color);\n    --vis-graph-panel-side-icon-shape-fill-color: var(--vis-dark-graph-panel-side-icon-shape-fill-color);\n    --vis-graph-panel-border-color:  var(--vis-dark-graph-panel-border-color);\n  }\n`\n\nexport const gPanel = css`\n  label: g-panel;\n`\n\nexport const panel = css`\n  label: panel;\n\n  stroke: var(--vis-graph-panel-border-color);\n  stroke-opacity: var(--vis-graph-panel-border-opacity);\n  fill: var(--vis-graph-panel-fill-color);\n`\n\nexport const label = css`\n  label: label;\n\n  fill: var(--vis-graph-panel-label-color);\n`\n\nexport const background = css`\n  label: background;\n\n  opacity: 0.9;\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  fill: var(--vis-graph-panel-label-background);\n  stroke: none;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  text-anchor: middle;\n  font-size: var(--vis-graph-panel-label-font-size);\n  font-weight: var(--vis-graph-panel-label-font-weight);;\n  cursor: default;\n  stroke: none;\n  font-family: var(--vis-graph-panel-label-font-family, var(--vis-font-family));\n`\n\nexport const panelSelectionActive = css`\n  label: active;\n`\n\nexport const panelSelection = css`\n  label: panel-selection-outline;\n\n  opacity: 0;\n  stroke-width: 1;\n  stroke-dasharray: 3 3;\n  fill: var(--vis-graph-node-selection-color);\n  fill-opacity: 0.1;\n  stroke: var(--vis-graph-panel-dashed-outline-color);\n  stroke-opacity: 0;\n\n  &${`.${panelSelectionActive}`} {\n    opacity: 1;\n    stroke-opacity: 0.75;\n  }\n`\n\nexport const greyout = css`\n  label: greyout;\n  opacity: 0.4;\n`\n\nexport const sideIconGroup = css`\n  label: side-icon-group;\n`\n\nexport const sideIconShape = css`\n  label: side-icon-shape;\n\n  fill: var(--vis-graph-panel-side-icon-shape-fill-color);\n  stroke-width: 2px;\n`\n\nexport const customSideIcon = css`\n  label: side-icon-custom;\n`\n\nexport const sideIconSymbol = css`\n  label: side-label-icon-text;\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  fill: var(--vis-graph-panel-side-icon-symbol-color);\n  stroke: none;\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  cursor: default;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BjB,kBAAA,EAAA,CAAA,CAAA,EAAI,MAAM,CAAE,CAAA,CAAA;;;;;;;;;EAS/B;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ5B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS3B;AAEM,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA;;EAEtC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;AAW5B,GAAA,EAAA,CAAA,CAAA,EAAI,oBAAoB,CAAE,CAAA,CAAA;;;;EAI9B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;EAGzB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;EAK/B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;"}

package/components/leaflet-map/style.js

@@ -17,7 +17,8 @@ const root = css `
 const variables = injectGlobal `
   :root {
     --vis-map-container-background-color: #dfe5eb;
-    --vis-map-label-font-family: var(--vis-font-family);
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-map-label-font-family, var(--vis-font-family): */
 
     --vis-map-point-default-fill-color: #B9BEC3;
     --vis-map-point-ring-fill-color: #ffffff;
@@ -125,7 +126,7 @@ const innerLabel = css `
 
   text-anchor: middle;
   fill: var(--vis-map-point-label-text-color-dark);
-  font-family: var(--vis-map-label-font-family);
+  font-family: var(--vis-map-label-font-family, var(--vis-font-family));
   pointer-events: none;
   font-weight: 600;
 `;
@@ -134,7 +135,7 @@ const bottomLabel = css `
 
   text-anchor: middle;
   fill: var(--vis-map-point-label-text-color-dark);
-  font-family: var(--vis-map-label-font-family);
+  font-family: var(--vis-map-label-font-family, var(--vis-font-family));
   pointer-events: none;
   font-weight: 600;
 `;

package/components/leaflet-map/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/leaflet-map/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n// Inject Leaflet global style\n// eslint-disable-next-line\nimport leafletCSS from './leaflet.css'\ninjectGlobal(leafletCSS)\n\nexport const root = css`\n  label: leaflet-map-component;\n\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-color: var(--vis-map-container-background-color);\n\n  canvas {\n    pointer-events: all;\n  }\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-map-container-background-color: #dfe5eb;\n    --vis-map-label-font-family: var(--vis-font-family);\n\n    --vis-map-point-default-fill-color: #B9BEC3;\n    --vis-map-point-ring-fill-color: #ffffff;\n    --vis-map-point-default-stroke-color: #959da3;\n    --vis-map-point-default-stroke-width: 0px;\n    --vis-map-point-default-cursor: default;\n\n    --vis-map-cluster-default-fill-color: #fff;\n    --vis-map-cluster-default-stroke-color: #B9BEC3;\n    --vis-map-cluster-default-stroke-width: 1.5px;\n    --vis-map-cluster-donut-fill-color: #959da3;\n\n    --vis-map-point-label-text-color-dark: #5b5f6d;\n    --vis-map-point-label-text-color-light: #fff;\n    --vis-map-point-bottom-label-font-size: 10px;\n    --vis-map-cluster-expanded-background-fill-color: #fff;\n\n    --vis-dark-map-container-background-color: #dfe5eb;\n    --vis-dark-map-point-default-fill-color: #B9BEC3;\n    --vis-dark-map-point-default-stroke-color: #959da3;\n    --vis-dark-map-point-ring-fill-color: #5b5f6d;\n\n    --vis-dark-map-cluster-default-fill-color: #5b5f6d;\n    --vis-dark-map-cluster-default-stroke-color: #B9BEC3;\n    --vis-dark-map-cluster-donut-fill-color: #959da3;\n\n    --vis-dark-map-point-label-text-color-dark: #fff;\n    --vis-dark-map-point-label-text-color-light: #fff;\n\n    --vis-dark-map-cluster-expanded-background-fill-color: #fff;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-map-container-background-color: var(--vis-dark-map-container-background-color);\n    --vis-map-point-default-fill-color: var(--vis-dark-map-point-default-fill-color);\n    --vis-map-point-default-stroke-color: var(--vis-dark-map-point-default-stroke-color);\n    --vis-map-point-ring-fill-color: var(--vis-dark-map-point-ring-fill-color);\n\n    --vis-map-cluster-default-fill-color: var(--vis-dark-map-cluster-default-fill-color);\n    --vis-map-cluster-default-stroke-color: var(--vis-dark-map-cluster-default-stroke-color);\n    --vis-map-cluster-donut-fill-color: var(--vis-dark-map-cluster-donut-fill-color);\n\n    --vis-map-point-label-text-color-dark: var(--vis-dark-map-point-label-text-color-dark);\n    --vis-map-point-label-text-color-light: var(--vis-dark-map-point-label-text-color-light);\n    --vis-map-cluster-expanded-background-fill-color: var(--vis-dark-map-cluster-expanded-background-fill-color);\n  }\n`\n\nexport const background = `${root} canvas`\n\nexport const points = css`\n  label: g-points;\n`\n\nexport const point = css`\n  label: g-point;\n`\n\nexport const pointPath = css`\n  label: point-path;\n\n  stroke-opacity: 1;\n  fill-opacity: 1.0;\n  fill: var(--vis-map-point-default-fill-color);\n  stroke: var(--vis-map-point-default-stroke-color);\n  stroke-width: var(--vis-map-point-default-stroke-width);\n  pointer-events: fill !important;\n  transition: .2s stroke-width, .3s transform;\n  cursor: var(--vis-map-point-default-cursor);\n\n  &:hover {\n    stroke-width: 2;\n    fill-opacity: 1;\n    animation: none;\n    transform: scale(1.1);\n  }\n`\n\nexport const pointPathRing = css`\n  label: point-path-ring;\n  fill: var(--vis-map-point-ring-fill-color);\n`\n\nexport const pointPathCluster = css`\n  label: point-path-cluster;\n  fill-opacity: 0.9;\n  stroke: none;\n  animation: none;\n  fill: var(--vis-map-cluster-default-fill-color);\n  stroke: var(--vis-map-cluster-default-stroke-color);\n  stroke-width: var(--vis-map-cluster-default-stroke-width);\n`\n\nexport const pointSelectionRing = css`\n  label: point-selection-ring;\n  stroke: var(--vis-map-point-default-fill-color);\n`\n\nexport const pointSelection = css`\n  label: point-selection;\n\n  opacity: 0;\n  transform: scale(1);\n\n  &.active {\n    transition: all 400ms cubic-bezier(0.230, 1.000, 0.320, 1.000);\n    opacity: 1;\n    transform: scale(1.25);\n  }\n`\n\nexport const innerLabel = css`\n  label: inner-label;\n\n  text-anchor: middle;\n  fill: var(--vis-map-point-label-text-color-dark);\n  font-family: var(--vis-map-label-font-family);\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const bottomLabel = css`\n  label: bottom-label;\n\n  text-anchor: middle;\n  fill: var(--vis-map-point-label-text-color-dark);\n  font-family: var(--vis-map-label-font-family);\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const donutCluster = css`\n  label: donut-cluster;\n\n  transform: scale(1);\n  transition: .3s transform;\n  path {\n    fill: var(--vis-map-cluster-donut-fill-color);\n    stroke-width: 0.5;\n  }\n\n  &:hover {\n    transform: scale(1.1);\n  }\n`\n\nexport const svgOverlay = css`\n  label: svg-overlay;\n  position: absolute;\n  pointer-events: none;\n`\n\nexport const backgroundRect = css`\n  label: background-rect;\n\n  opacity: 0;\n`\n\nexport const clusterBackground = css`\n  label: cluster-background;\n\n  fill: var(--vis-map-cluster-expanded-background-fill-color);\n  opacity: 0.6;\n  visibility: hidden;\n\n  &.active {\n    visibility: visible;\n  }\n`\n\nexport const onFeatureHover = css`\n  label: feature-hovered;\n`\n\nexport const mapboxglCanvas = css`\n  pointer-events: all;\n  cursor: grab;\n\n  &${`.${onFeatureHover}`} {\n    cursor: default;\n  }\n`\n\nexport const map = css`\n  label: map;\n`\n"],"names":["leafletCSS"],"mappings":";;;AAKA,YAAY,CAACA,QAAU,CAAC,CAAA;AAEjB,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;;;;;;;EAc7B;AAEY,MAAA,UAAU,GAAG,CAAG,EAAA,IAAI,UAAS;AAEnC,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkB3B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQlC;AAEM,MAAM,kBAAkB,GAAG,GAAG,CAAA,CAAA;;;EAGpC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAa9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;EAIhC;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUnC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;AAI5B,GAAA,EAAA,CAAA,CAAA,EAAI,cAAc,CAAE,CAAA,CAAA;;;EAGxB;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/leaflet-map/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n// Inject Leaflet global style\n// eslint-disable-next-line\nimport leafletCSS from './leaflet.css'\ninjectGlobal(leafletCSS)\n\nexport const root = css`\n  label: leaflet-map-component;\n\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-color: var(--vis-map-container-background-color);\n\n  canvas {\n    pointer-events: all;\n  }\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-map-container-background-color: #dfe5eb;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-map-label-font-family, var(--vis-font-family): */\n\n    --vis-map-point-default-fill-color: #B9BEC3;\n    --vis-map-point-ring-fill-color: #ffffff;\n    --vis-map-point-default-stroke-color: #959da3;\n    --vis-map-point-default-stroke-width: 0px;\n    --vis-map-point-default-cursor: default;\n\n    --vis-map-cluster-default-fill-color: #fff;\n    --vis-map-cluster-default-stroke-color: #B9BEC3;\n    --vis-map-cluster-default-stroke-width: 1.5px;\n    --vis-map-cluster-donut-fill-color: #959da3;\n\n    --vis-map-point-label-text-color-dark: #5b5f6d;\n    --vis-map-point-label-text-color-light: #fff;\n    --vis-map-point-bottom-label-font-size: 10px;\n    --vis-map-cluster-expanded-background-fill-color: #fff;\n\n    --vis-dark-map-container-background-color: #dfe5eb;\n    --vis-dark-map-point-default-fill-color: #B9BEC3;\n    --vis-dark-map-point-default-stroke-color: #959da3;\n    --vis-dark-map-point-ring-fill-color: #5b5f6d;\n\n    --vis-dark-map-cluster-default-fill-color: #5b5f6d;\n    --vis-dark-map-cluster-default-stroke-color: #B9BEC3;\n    --vis-dark-map-cluster-donut-fill-color: #959da3;\n\n    --vis-dark-map-point-label-text-color-dark: #fff;\n    --vis-dark-map-point-label-text-color-light: #fff;\n\n    --vis-dark-map-cluster-expanded-background-fill-color: #fff;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-map-container-background-color: var(--vis-dark-map-container-background-color);\n    --vis-map-point-default-fill-color: var(--vis-dark-map-point-default-fill-color);\n    --vis-map-point-default-stroke-color: var(--vis-dark-map-point-default-stroke-color);\n    --vis-map-point-ring-fill-color: var(--vis-dark-map-point-ring-fill-color);\n\n    --vis-map-cluster-default-fill-color: var(--vis-dark-map-cluster-default-fill-color);\n    --vis-map-cluster-default-stroke-color: var(--vis-dark-map-cluster-default-stroke-color);\n    --vis-map-cluster-donut-fill-color: var(--vis-dark-map-cluster-donut-fill-color);\n\n    --vis-map-point-label-text-color-dark: var(--vis-dark-map-point-label-text-color-dark);\n    --vis-map-point-label-text-color-light: var(--vis-dark-map-point-label-text-color-light);\n    --vis-map-cluster-expanded-background-fill-color: var(--vis-dark-map-cluster-expanded-background-fill-color);\n  }\n`\n\nexport const background = `${root} canvas`\n\nexport const points = css`\n  label: g-points;\n`\n\nexport const point = css`\n  label: g-point;\n`\n\nexport const pointPath = css`\n  label: point-path;\n\n  stroke-opacity: 1;\n  fill-opacity: 1.0;\n  fill: var(--vis-map-point-default-fill-color);\n  stroke: var(--vis-map-point-default-stroke-color);\n  stroke-width: var(--vis-map-point-default-stroke-width);\n  pointer-events: fill !important;\n  transition: .2s stroke-width, .3s transform;\n  cursor: var(--vis-map-point-default-cursor);\n\n  &:hover {\n    stroke-width: 2;\n    fill-opacity: 1;\n    animation: none;\n    transform: scale(1.1);\n  }\n`\n\nexport const pointPathRing = css`\n  label: point-path-ring;\n  fill: var(--vis-map-point-ring-fill-color);\n`\n\nexport const pointPathCluster = css`\n  label: point-path-cluster;\n  fill-opacity: 0.9;\n  stroke: none;\n  animation: none;\n  fill: var(--vis-map-cluster-default-fill-color);\n  stroke: var(--vis-map-cluster-default-stroke-color);\n  stroke-width: var(--vis-map-cluster-default-stroke-width);\n`\n\nexport const pointSelectionRing = css`\n  label: point-selection-ring;\n  stroke: var(--vis-map-point-default-fill-color);\n`\n\nexport const pointSelection = css`\n  label: point-selection;\n\n  opacity: 0;\n  transform: scale(1);\n\n  &.active {\n    transition: all 400ms cubic-bezier(0.230, 1.000, 0.320, 1.000);\n    opacity: 1;\n    transform: scale(1.25);\n  }\n`\n\nexport const innerLabel = css`\n  label: inner-label;\n\n  text-anchor: middle;\n  fill: var(--vis-map-point-label-text-color-dark);\n  font-family: var(--vis-map-label-font-family, var(--vis-font-family));\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const bottomLabel = css`\n  label: bottom-label;\n\n  text-anchor: middle;\n  fill: var(--vis-map-point-label-text-color-dark);\n  font-family: var(--vis-map-label-font-family, var(--vis-font-family));\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const donutCluster = css`\n  label: donut-cluster;\n\n  transform: scale(1);\n  transition: .3s transform;\n  path {\n    fill: var(--vis-map-cluster-donut-fill-color);\n    stroke-width: 0.5;\n  }\n\n  &:hover {\n    transform: scale(1.1);\n  }\n`\n\nexport const svgOverlay = css`\n  label: svg-overlay;\n  position: absolute;\n  pointer-events: none;\n`\n\nexport const backgroundRect = css`\n  label: background-rect;\n\n  opacity: 0;\n`\n\nexport const clusterBackground = css`\n  label: cluster-background;\n\n  fill: var(--vis-map-cluster-expanded-background-fill-color);\n  opacity: 0.6;\n  visibility: hidden;\n\n  &.active {\n    visibility: visible;\n  }\n`\n\nexport const onFeatureHover = css`\n  label: feature-hovered;\n`\n\nexport const mapboxglCanvas = css`\n  pointer-events: all;\n  cursor: grab;\n\n  &${`.${onFeatureHover}`} {\n    cursor: default;\n  }\n`\n\nexport const map = css`\n  label: map;\n`\n"],"names":["leafletCSS"],"mappings":";;;AAKA,YAAY,CAACA,QAAU,CAAC,CAAA;AAEjB,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;;;;;;;EAc7B;AAEY,MAAA,UAAU,GAAG,CAAG,EAAA,IAAI,UAAS;AAEnC,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkB3B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQlC;AAEM,MAAM,kBAAkB,GAAG,GAAG,CAAA,CAAA;;;EAGpC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAa9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;EAIhC;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUnC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;AAI5B,GAAA,EAAA,CAAA,CAAA,EAAI,cAAc,CAAE,CAAA,CAAA;;;EAGxB;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/radial-dendrogram/types.js

@@ -0,0 +1,8 @@
+var LabelType;
+(function (LabelType) {
+    LabelType["Along"] = "along";
+    LabelType["Perpendicular"] = "perpendicular";
+})(LabelType || (LabelType = {}));
+
+export { LabelType };
+//# sourceMappingURL=types.js.map

package/components/radial-dendrogram/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/radial-dendrogram/types.ts"],"sourcesContent":["import { HierarchyRectangularNode, HierarchyNode } from 'd3-hierarchy'\n\nexport interface Hierarchy {\n  key?: string;\n  id?: string;\n  values: Hierarchy[];\n}\n\nexport interface Link<T> {\n  source: HierarchyRectangularNode<T>;\n  target: HierarchyRectangularNode<T>;\n  points?: [];\n}\n\nexport interface HNode<T> extends HierarchyRectangularNode<T> {\n  _state?: { hovered?: boolean };\n  _prevX1?: number;\n}\n\nexport interface HLink<T> {\n  source: HierarchyNode<T>;\n  target: HierarchyNode<T>;\n  _state?: { hovered?: boolean; points?: [] };\n}\n\nexport interface Ribbon<H> {\n  source: HierarchyRectangularNode<H>;\n  target: HierarchyRectangularNode<H>;\n  points: [];\n}\n\nexport enum LabelType {\n  Along = 'along',\n  Perpendicular = 'perpendicular',\n}\n"],"names":[],"mappings":"IA+BY,UAGX;AAHD,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,SAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AACjC,CAAC,EAHW,SAAS,KAAT,SAAS,GAGpB,EAAA,CAAA,CAAA;;;;"}

package/components/sankey/style.js

@@ -7,17 +7,18 @@ const root = css `
 `;
 const variables = injectGlobal `
   :root {
+     /* Links */
     --vis-sankey-link-cursor: default;
     --vis-sankey-link-color: var(--vis-color-main-light);
     --vis-sankey-link-opacity: 0.5;
     --vis-sankey-link-hover-opacity: 1.0;
-
+    /* Nodes */
     --vis-sankey-node-cursor: default;
     --vis-sankey-node-color: var(--vis-color-main);
     --vis-sankey-node-label-color: #575c65;
     --vis-sankey-node-opacity: 0.9;
     --vis-sankey-node-hover-opacity: 1.0;
-
+    /* Node Labels */
     --vis-sankey-node-label-background-fill-color: #ffffff;
     --vis-sankey-node-label-background-stroke-color: #eaeaea;
     --vis-sankey-node-label-background-opacity: 0.9;
@@ -30,13 +31,16 @@ const variables = injectGlobal `
     --vis-sankey-node-sublabel-font-size: 10px;
     --vis-sankey-node-sublabel-font-weight: 500;
 
+    /* Icons */
     --vis-sankey-icon-size: ${SANKEY_ICON_SIZE}px;
     --vis-sankey-icon-color: #ffffff;
     --vis-sankey-icon-stroke-opacity: 0.6;
     --vis-sankey-icon-font-family: ${DEFAULT_ICON_FONT_FAMILY};
 
-    --vis-sankey-label-font-family: var(--vis-font-family);
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-sankey-label-font-family: */
 
+    /* Dark Theme */
     --vis-dark-sankey-link-color: var(--vis-color-main-dark);
     --vis-dark-sankey-node-color: var(--vis-color-main);
     --vis-dark-sankey-node-label-color: #eaeaea;
@@ -99,7 +103,7 @@ const label = css `
   user-select: none;
 
   &, tspan {
-    font-family: var(--vis-sankey-label-font-family);
+    font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));
     dominant-baseline: hanging;
   }
 `;
@@ -111,7 +115,7 @@ const sublabel = css `
   user-select: none;
 
   &, tspan {
-    font-family: var(--vis-sankey-label-font-family);
+    font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));
     font-weight: var(--vis-sankey-node-sublabel-font-weight);
     dominant-baseline: hanging;
   }

package/components/sankey/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/sankey/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { DEFAULT_ICON_FONT_FAMILY } from 'styles/index'\n\nexport const SANKEY_ICON_SIZE = 22\n\nexport const root = css`\n  label: sankey-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-sankey-link-cursor: default;\n    --vis-sankey-link-color: var(--vis-color-main-light);\n    --vis-sankey-link-opacity: 0.5;\n    --vis-sankey-link-hover-opacity: 1.0;\n\n    --vis-sankey-node-cursor: default;\n    --vis-sankey-node-color: var(--vis-color-main);\n    --vis-sankey-node-label-color: #575c65;\n    --vis-sankey-node-opacity: 0.9;\n    --vis-sankey-node-hover-opacity: 1.0;\n\n    --vis-sankey-node-label-background-fill-color: #ffffff;\n    --vis-sankey-node-label-background-stroke-color: #eaeaea;\n    --vis-sankey-node-label-background-opacity: 0.9;\n    --vis-sankey-node-label-color: #575c65;\n    --vis-sankey-node-label-cursor: default;\n    --vis-sankey-node-label-font-weight: 600;\n    --vis-sankey-node-label-font-size: 12px;\n    --vis-sankey-node-label-text-decoration: none;\n\n    --vis-sankey-node-sublabel-font-size: 10px;\n    --vis-sankey-node-sublabel-font-weight: 500;\n\n    --vis-sankey-icon-size: ${SANKEY_ICON_SIZE}px;\n    --vis-sankey-icon-color: #ffffff;\n    --vis-sankey-icon-stroke-opacity: 0.6;\n    --vis-sankey-icon-font-family: ${DEFAULT_ICON_FONT_FAMILY};\n\n    --vis-sankey-label-font-family: var(--vis-font-family);\n\n    --vis-dark-sankey-link-color: var(--vis-color-main-dark);\n    --vis-dark-sankey-node-color: var(--vis-color-main);\n    --vis-dark-sankey-node-label-color: #eaeaea;\n    --vis-dark-sankey-node-label-background-fill-color: #292b34;\n    --vis-dark-sankey-node-label-background-stroke-color: #575c65;\n    --vis-dark-sankey-icon-color: #292b34;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-sankey-node-color: var(--vis-dark-sankey-node-color);\n    --vis-sankey-link-color: var(--vis-dark-sankey-link-color);\n    --vis-sankey-node-label-color: var(--vis-dark-sankey-node-label-color);\n    --vis-sankey-node-label-background-fill-color: var(--vis-dark-sankey-label-background-fill-color);\n    --vis-sankey-node-label-background-stroke-color: var(--vis-dark-sankey-label-background-stroke-color);\n    --vis-sankey-icon-color: var(--vis-dark-sankey-icon-color);\n  }\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const link = css`\n  label: link;\n\n  path {\n    cursor: var(--vis-sankey-link-cursor);\n    fill: var(--vis-sankey-link-color);\n    fill-opacity: var(--vis-sankey-link-opacity);\n  }\n\n  &:hover {\n    path {\n      fill-opacity: var(--vis-sankey-link-hover-opacity);\n    }\n  }\n`\n\nexport const linkPath = css`\n  label: visible;\n`\n\nexport const linkSelectionHelper = css`\n  label: transparent;\n  opacity: 0;\n`\n\nexport const labelGroup = css`\n  label: label-group;\n  cursor: var(--vis-sankey-node-label-cursor);\n`\n\nexport const labelTrimmed = css`\n  label: label-trimmed;\n`\n\nexport const label = css`\n  label: label;\n  dominant-baseline: hanging;\n\n  fill: var(--vis-sankey-node-label-color);\n  text-decoration: var(--vis-sankey-node-label-text-decoration);\n  font-weight: var(--vis-sankey-node-label-font-weight);\n  user-select: none;\n\n  &, tspan {\n    font-family: var(--vis-sankey-label-font-family);\n    dominant-baseline: hanging;\n  }\n`\n\nexport const sublabel = css`\n  label: sub-label;\n  dominant-baseline: hanging;\n\n  fill: var(--vis-sankey-node-label-color);\n  user-select: none;\n\n  &, tspan {\n    font-family: var(--vis-sankey-label-font-family);\n    font-weight: var(--vis-sankey-node-sublabel-font-weight);\n    dominant-baseline: hanging;\n  }\n`\n\nexport const labelBackground = css`\n  label: label-background;\n  stroke: var(--vis-sankey-node-label-background-stroke-color);\n  fill: var(--vis-sankey-node-label-background-fill-color);\n  opacity: var(--vis-sankey-node-label-background-opacity);\n`\n\nexport const hidden = css`\n  label: hidden;\n  visibility: hidden;\n`\n\nexport const forceShow = css`\n  label: forceShow;\n  visibility: visible;\n`\n\nexport const nodeGroup = css`\n  label: node-group;\n`\n\nexport const node = css`\n  label: node;\n\n  cursor: var(--vis-sankey-node-cursor);\n  fill: var(--vis-sankey-node-color);\n  opacity: var(--vis-sankey-node-opacity);\n\n  &:hover {\n    opacity: var(--vis-sankey-node-hover-opacity);\n  }\n`\n\nexport const nodeIcon = css`\n  label: icon;\n\n  font-family: var(--vis-sankey-icon-font-family);\n  text-anchor: middle;\n  font-size: var(--vis-sankey-icon-size);\n  fill: var(--vis-sankey-node-icon-color);\n  stroke: var(--vis-sankey-node-color);\n  stroke-opacity: var(--vis-sankey-icon-stroke-opacity);\n  user-select: none;\n  pointer-events: none;\n`\n\nexport const nodeExit = css`\n  label: node-exit;\n`\n\nexport const background = css`\n  label: background;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,gBAAgB,GAAG,GAAE;AAE3B,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;8BAyBP,gBAAgB,CAAA;;;qCAGT,wBAAwB,CAAA;;;;;;;;;;;;AAYzC,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;EActB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;EAGrC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAavB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;EAY1B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;EAKjC;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;EAGxB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAW1B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/sankey/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { DEFAULT_ICON_FONT_FAMILY } from 'styles/index'\n\nexport const SANKEY_ICON_SIZE = 22\n\nexport const root = css`\n  label: sankey-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n     /* Links */\n    --vis-sankey-link-cursor: default;\n    --vis-sankey-link-color: var(--vis-color-main-light);\n    --vis-sankey-link-opacity: 0.5;\n    --vis-sankey-link-hover-opacity: 1.0;\n    /* Nodes */\n    --vis-sankey-node-cursor: default;\n    --vis-sankey-node-color: var(--vis-color-main);\n    --vis-sankey-node-label-color: #575c65;\n    --vis-sankey-node-opacity: 0.9;\n    --vis-sankey-node-hover-opacity: 1.0;\n    /* Node Labels */\n    --vis-sankey-node-label-background-fill-color: #ffffff;\n    --vis-sankey-node-label-background-stroke-color: #eaeaea;\n    --vis-sankey-node-label-background-opacity: 0.9;\n    --vis-sankey-node-label-color: #575c65;\n    --vis-sankey-node-label-cursor: default;\n    --vis-sankey-node-label-font-weight: 600;\n    --vis-sankey-node-label-font-size: 12px;\n    --vis-sankey-node-label-text-decoration: none;\n\n    --vis-sankey-node-sublabel-font-size: 10px;\n    --vis-sankey-node-sublabel-font-weight: 500;\n\n    /* Icons */\n    --vis-sankey-icon-size: ${SANKEY_ICON_SIZE}px;\n    --vis-sankey-icon-color: #ffffff;\n    --vis-sankey-icon-stroke-opacity: 0.6;\n    --vis-sankey-icon-font-family: ${DEFAULT_ICON_FONT_FAMILY};\n\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-sankey-label-font-family: */\n\n    /* Dark Theme */\n    --vis-dark-sankey-link-color: var(--vis-color-main-dark);\n    --vis-dark-sankey-node-color: var(--vis-color-main);\n    --vis-dark-sankey-node-label-color: #eaeaea;\n    --vis-dark-sankey-node-label-background-fill-color: #292b34;\n    --vis-dark-sankey-node-label-background-stroke-color: #575c65;\n    --vis-dark-sankey-icon-color: #292b34;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-sankey-node-color: var(--vis-dark-sankey-node-color);\n    --vis-sankey-link-color: var(--vis-dark-sankey-link-color);\n    --vis-sankey-node-label-color: var(--vis-dark-sankey-node-label-color);\n    --vis-sankey-node-label-background-fill-color: var(--vis-dark-sankey-label-background-fill-color);\n    --vis-sankey-node-label-background-stroke-color: var(--vis-dark-sankey-label-background-stroke-color);\n    --vis-sankey-icon-color: var(--vis-dark-sankey-icon-color);\n  }\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const link = css`\n  label: link;\n\n  path {\n    cursor: var(--vis-sankey-link-cursor);\n    fill: var(--vis-sankey-link-color);\n    fill-opacity: var(--vis-sankey-link-opacity);\n  }\n\n  &:hover {\n    path {\n      fill-opacity: var(--vis-sankey-link-hover-opacity);\n    }\n  }\n`\n\nexport const linkPath = css`\n  label: visible;\n`\n\nexport const linkSelectionHelper = css`\n  label: transparent;\n  opacity: 0;\n`\n\nexport const labelGroup = css`\n  label: label-group;\n  cursor: var(--vis-sankey-node-label-cursor);\n`\n\nexport const labelTrimmed = css`\n  label: label-trimmed;\n`\n\nexport const label = css`\n  label: label;\n  dominant-baseline: hanging;\n\n  fill: var(--vis-sankey-node-label-color);\n  text-decoration: var(--vis-sankey-node-label-text-decoration);\n  font-weight: var(--vis-sankey-node-label-font-weight);\n  user-select: none;\n\n  &, tspan {\n    font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n    dominant-baseline: hanging;\n  }\n`\n\nexport const sublabel = css`\n  label: sub-label;\n  dominant-baseline: hanging;\n\n  fill: var(--vis-sankey-node-label-color);\n  user-select: none;\n\n  &, tspan {\n    font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n    font-weight: var(--vis-sankey-node-sublabel-font-weight);\n    dominant-baseline: hanging;\n  }\n`\n\nexport const labelBackground = css`\n  label: label-background;\n  stroke: var(--vis-sankey-node-label-background-stroke-color);\n  fill: var(--vis-sankey-node-label-background-fill-color);\n  opacity: var(--vis-sankey-node-label-background-opacity);\n`\n\nexport const hidden = css`\n  label: hidden;\n  visibility: hidden;\n`\n\nexport const forceShow = css`\n  label: forceShow;\n  visibility: visible;\n`\n\nexport const nodeGroup = css`\n  label: node-group;\n`\n\nexport const node = css`\n  label: node;\n\n  cursor: var(--vis-sankey-node-cursor);\n  fill: var(--vis-sankey-node-color);\n  opacity: var(--vis-sankey-node-opacity);\n\n  &:hover {\n    opacity: var(--vis-sankey-node-hover-opacity);\n  }\n`\n\nexport const nodeIcon = css`\n  label: icon;\n\n  font-family: var(--vis-sankey-icon-font-family);\n  text-anchor: middle;\n  font-size: var(--vis-sankey-icon-size);\n  fill: var(--vis-sankey-node-icon-color);\n  stroke: var(--vis-sankey-node-color);\n  stroke-opacity: var(--vis-sankey-icon-stroke-opacity);\n  user-select: none;\n  pointer-events: none;\n`\n\nexport const nodeExit = css`\n  label: node-exit;\n`\n\nexport const background = css`\n  label: background;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,gBAAgB,GAAG,GAAE;AAE3B,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA2BP,gBAAgB,CAAA;;;qCAGT,wBAAwB,CAAA;;;;;;;;;;;;;;AAczC,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;EActB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;EAGrC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAavB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;EAY1B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;EAKjC;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;EAGxB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAW1B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/scatter/style.js

@@ -14,6 +14,8 @@ const globalStyles = injectGlobal `
     --vis-scatter-point-label-text-color-light: #fff;
     --vis-scatter-point-label-text-font-weight: 500;
     --vis-scatter-point-label-text-font-size: 12px;
+    // Undefined by default to allow proper fallback to var(--vis-font-family)
+    /* --vis-scatter-point-label-text-font-family: */
   }
 `;
 const root = css `
@@ -44,6 +46,7 @@ const point = css `
   > text {
     font-weight: var(--vis-scatter-point-label-text-font-weight);
     font-size: var(--vis-scatter-point-label-text-font-size);
+    font-family: var(--vis-scatter-point-label-text-font-family, var(--vis-font-family));
     fill: var(--vis-scatter-point-label-text-color-dark);
     user-select: none;
   }

package/components/scatter/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/scatter/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-scatter-cursor: default;\n    --vis-scatter-fill-color: var(--vis-color-main);\n    --vis-scatter-stroke-color: var(--vis-color-main);\n    --vis-scatter-stroke-width: 0px;\n    --vis-scatter-fill-opacity: 1;\n    --vis-scatter-stroke-opacity: 1;\n    --vis-scatter-hover-stroke-width: 2px;\n\n    --vis-scatter-point-label-text-color-dark: #5b5f6d;\n    --vis-scatter-point-label-text-color-light: #fff;\n    --vis-scatter-point-label-text-font-weight: 500;\n    --vis-scatter-point-label-text-font-size: 12px;\n  }\n`\n\nexport const root = css`\n  label: scatter-component;\n`\n\nexport const pointGroup = css`\n  label: point-group;\n`\n\nexport const pointGroupExit = css`\n  label: point-group-exit;\n`\n\nexport const point = css`\n  label: point;\n\n  > path {\n    cursor: var(--vis-scatter-cursor);\n    fill: var(--vis-scatter-fill-color);\n    fill-opacity: var(--vis-scatter-fill-opacity);\n    stroke-opacity: var(--vis-scatter-stroke-opacity);\n    stroke-width: var(--vis-scatter-stroke-width);\n    stroke: var(--vis-scatter-stroke-color);\n\n    &:hover {\n        stroke-width: var(--vis-scatter-hover-stroke-width);\n    }\n  }\n\n  > text {\n    font-weight: var(--vis-scatter-point-label-text-font-weight);\n    font-size: var(--vis-scatter-point-label-text-font-size);\n    fill: var(--vis-scatter-point-label-text-color-dark);\n    user-select: none;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;EAevC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/scatter/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-scatter-cursor: default;\n    --vis-scatter-fill-color: var(--vis-color-main);\n    --vis-scatter-stroke-color: var(--vis-color-main);\n    --vis-scatter-stroke-width: 0px;\n    --vis-scatter-fill-opacity: 1;\n    --vis-scatter-stroke-opacity: 1;\n    --vis-scatter-hover-stroke-width: 2px;\n\n    --vis-scatter-point-label-text-color-dark: #5b5f6d;\n    --vis-scatter-point-label-text-color-light: #fff;\n    --vis-scatter-point-label-text-font-weight: 500;\n    --vis-scatter-point-label-text-font-size: 12px;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-scatter-point-label-text-font-family: */\n  }\n`\n\nexport const root = css`\n  label: scatter-component;\n`\n\nexport const pointGroup = css`\n  label: point-group;\n`\n\nexport const pointGroupExit = css`\n  label: point-group-exit;\n`\n\nexport const point = css`\n  label: point;\n\n  > path {\n    cursor: var(--vis-scatter-cursor);\n    fill: var(--vis-scatter-fill-color);\n    fill-opacity: var(--vis-scatter-fill-opacity);\n    stroke-opacity: var(--vis-scatter-stroke-opacity);\n    stroke-width: var(--vis-scatter-stroke-width);\n    stroke: var(--vis-scatter-stroke-color);\n\n    &:hover {\n        stroke-width: var(--vis-scatter-hover-stroke-width);\n    }\n  }\n\n  > text {\n    font-weight: var(--vis-scatter-point-label-text-font-weight);\n    font-size: var(--vis-scatter-point-label-text-font-size);\n    font-family: var(--vis-scatter-point-label-text-font-family, var(--vis-font-family));\n    fill: var(--vis-scatter-point-label-text-color-dark);\n    user-select: none;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/timeline/index.js

@@ -175,12 +175,15 @@ class Timeline extends XYComponentCore {
             // Rect dimensions
             const height = getNumber(d, config.lineWidth, i);
             const width = xScale(x + length) - xScale(x);
+            if (width < 0) {
+                console.warn('Unovis | Timeline: Line segments should not have negative lengths. Setting to 0.');
+            }
             select(elements[i])
                 .attr('x', xScale(x))
                 .attr('y', yStart + y + (config.rowHeight - height) / 2)
                 .attr('width', config.showEmptySegments
                 ? Math.max(config.lineCap ? height : 1, width)
-                : width)
+                : Math.max(0, width))
                 .attr('height', height)
                 .attr('rx', config.lineCap ? height / 2 : null)
                 .style('opacity', 1);