@unovis/ts 1.6.6 → 1.6.7

package/components/area/index.js

@@ -2,7 +2,7 @@ import { select } from 'd3-selection';
 import { area, line } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
 import { XYComponentCore } from '../../core/xy-component/index.js';
-import { isNumber, isArray, getNumber, getStackedData, getString, getValue, filterDataByRange, getStackedExtent } from '../../utils/data.js';
+import { isNumber, isArray, getNumber, getStackedData, clamp, getString, getValue, filterDataByRange, getStackedExtent } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { getColor } from '../../utils/color.js';
 import { Curve } from '../../types/curve.js';
@@ -59,12 +59,16 @@ class Area extends XYComponentCore {
         const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)));
         const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative);
         this._prevNegative = stacked.map(s => !!s.isMostlyNegative);
+        // Clamp to the visible y range so the area and its fill stay within the container
+        const yRange = this.yScale.range();
+        const yRangeMin = Math.min(yRange[0], yRange[1]);
+        const yRangeMax = Math.max(yRange[0], yRange[1]);
         const minHeightCumulativeArray = [];
         const stackedData = stacked.map(arr => arr.map((d, j) => {
             var _a, _b;
             const x = areaDataX[j];
-            const y0 = this.yScale(d[0]);
-            const y1 = this.yScale(d[1]);
+            const y0 = clamp(this.yScale(d[0]), yRangeMin, yRangeMax);
+            const y1 = clamp(this.yScale(d[1]), yRangeMin, yRangeMax);
             const isNegativeArea = y1 > y0;
             // Only apply cumulative adjustment if `config.stackMinHeight` is true
             const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0;

package/components/area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface, line, Line as LineInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange, getValue } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _lineGen: LineInterface<AreaDatum>\n  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n  events = {\n    [Area.selectors.area]: {},\n  }\n\n  constructor (config?: AreaConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n\n    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  get bleed (): Spacing {\n    const { config: { line, lineWidth } } = this\n    if (!line) return { top: 0, bottom: 0, left: 0, right: 0 }\n\n    const yDomain = this.yScale.domain() as [number, number]\n    const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n      ? Direction.North\n      : Direction.South\n    const isYDirectionSouth = yDirection === Direction.South\n\n    const isLineThick = lineWidth > 3\n    const isLineVeryThick = lineWidth >= 10\n    return {\n      top: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n      ) ? 0 : lineWidth / 2,\n      bottom: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n      ) ? 0 : lineWidth / 2,\n      left: isLineThick ? lineWidth / 2 : 0,\n      right: isLineThick ? lineWidth / 2 : 0,\n    }\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = this.yScale(d[0])\n          const y1 = this.yScale(d[1])\n          const isNegativeArea = y1 > y0\n\n          // Only apply cumulative adjustment if `config.stackMinHeight` is true\n          const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n\n            // Only update cumulative array if we're stacking min heights\n            if (config.stackMinHeight) {\n              minHeightCumulativeArray[j] = cumulative + heightAdjustment\n            }\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\n        }\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n\n    this._renderLines(duration, config.line ? stackedData : [])\n  }\n\n  _renderLines (duration: number, stackedData: AreaDatum[][]): void {\n    const { config, datamodel: { data } } = this\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const colorAccessor = config.lineColor ?? config.color\n    const lines = this.g\n      .selectAll<SVGPathElement, AreaDatum[]>(`.${s.areaLinePath}`)\n      .data(stackedDataReversed)\n\n    const areas = this.g.selectAll(`.${s.area}`).nodes()\n    const linesEnter = lines.enter().insert('path', (d, i) => areas[i + 1])\n      .attr('class', s.areaLinePath)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 0)\n\n    const linesMerged = smartTransition(linesEnter.merge(lines), duration)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 1)\n      .attr('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n      .style('stroke-dasharray', (d, i) => getValue<Datum[], number[]>(data, config.lineDashArray, i)?.join(' ') ?? null)\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._lineGen = line<AreaDatum>()\n      .x(d => d.x)\n      .y(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    if (duration) {\n      const lineTransition = linesMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      lineTransition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d') || this._emptyLinePath()\n        const next = this._lineGen(d) || this._emptyLinePath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      linesMerged.attr('d', d => this._lineGen(d) || this._emptyLinePath())\n    }\n\n    smartTransition(lines.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const xDomain = this.xScale.domain() as [number, number]\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : datamodel.data\n    return getStackedExtent(data, config.baseline, ...yAccessors)\n  }\n\n  _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yDomain = this.yScale.domain() as number[]\n\n    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n    const y1 = y0\n\n    return this._areaGen([\n      { y0, y1, x: xRange[0] },\n      { y0, y1, x: xRange[1] },\n    ])\n  }\n\n  _emptyLinePath (): string {\n    const xRange = this.xScale.range()\n    const yRange = this.yScale.range()\n    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n  }\n}\n"],"names":["s.area","s.areaLinePath","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface, line, Line as LineInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange, getValue, clamp } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _lineGen: LineInterface<AreaDatum>\n  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n  events = {\n    [Area.selectors.area]: {},\n  }\n\n  constructor (config?: AreaConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n\n    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  get bleed (): Spacing {\n    const { config: { line, lineWidth } } = this\n    if (!line) return { top: 0, bottom: 0, left: 0, right: 0 }\n\n    const yDomain = this.yScale.domain() as [number, number]\n    const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n      ? Direction.North\n      : Direction.South\n    const isYDirectionSouth = yDirection === Direction.South\n\n    const isLineThick = lineWidth > 3\n    const isLineVeryThick = lineWidth >= 10\n    return {\n      top: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n      ) ? 0 : lineWidth / 2,\n      bottom: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n      ) ? 0 : lineWidth / 2,\n      left: isLineThick ? lineWidth / 2 : 0,\n      right: isLineThick ? lineWidth / 2 : 0,\n    }\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n\n    // Clamp to the visible y range so the area and its fill stay within the container\n    const yRange = this.yScale.range()\n    const yRangeMin = Math.min(yRange[0], yRange[1])\n    const yRangeMax = Math.max(yRange[0], yRange[1])\n\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = clamp(this.yScale(d[0]), yRangeMin, yRangeMax)\n          const y1 = clamp(this.yScale(d[1]), yRangeMin, yRangeMax)\n          const isNegativeArea = y1 > y0\n\n          // Only apply cumulative adjustment if `config.stackMinHeight` is true\n          const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n\n            // Only update cumulative array if we're stacking min heights\n            if (config.stackMinHeight) {\n              minHeightCumulativeArray[j] = cumulative + heightAdjustment\n            }\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\n        }\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n\n    this._renderLines(duration, config.line ? stackedData : [])\n  }\n\n  _renderLines (duration: number, stackedData: AreaDatum[][]): void {\n    const { config, datamodel: { data } } = this\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const colorAccessor = config.lineColor ?? config.color\n    const lines = this.g\n      .selectAll<SVGPathElement, AreaDatum[]>(`.${s.areaLinePath}`)\n      .data(stackedDataReversed)\n\n    const areas = this.g.selectAll(`.${s.area}`).nodes()\n    const linesEnter = lines.enter().insert('path', (d, i) => areas[i + 1])\n      .attr('class', s.areaLinePath)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 0)\n\n    const linesMerged = smartTransition(linesEnter.merge(lines), duration)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 1)\n      .attr('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n      .style('stroke-dasharray', (d, i) => getValue<Datum[], number[]>(data, config.lineDashArray, i)?.join(' ') ?? null)\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._lineGen = line<AreaDatum>()\n      .x(d => d.x)\n      .y(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    if (duration) {\n      const lineTransition = linesMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      lineTransition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d') || this._emptyLinePath()\n        const next = this._lineGen(d) || this._emptyLinePath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      linesMerged.attr('d', d => this._lineGen(d) || this._emptyLinePath())\n    }\n\n    smartTransition(lines.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const xDomain = this.xScale.domain() as [number, number]\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : datamodel.data\n    return getStackedExtent(data, config.baseline, ...yAccessors)\n  }\n\n  _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yDomain = this.yScale.domain() as number[]\n\n    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n    const y1 = y0\n\n    return this._areaGen([\n      { y0, y1, x: xRange[0] },\n      { y0, y1, x: xRange[1] },\n    ])\n  }\n\n  _emptyLinePath (): string {\n    const xRange = this.xScale.range()\n    const yRange = this.yScale.range()\n    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n  }\n}\n"],"names":["s.area","s.areaLinePath","s"],"mappings":"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"}

package/components/area/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: area-component;

package/components/area/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\n\nexport const root = css`\n  label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-area-cursor: default;\n    --vis-area-fill-opacity: 1;\n    --vis-area-stroke-color: none;\n    --vis-area-stroke-width: 0px;\n    --vis-area-stroke-dasharray: none;\n    --vis-area-stroke-opacity: 1;\n    --vis-area-hover-fill-opacity: none;\n    --vis-area-hover-stroke-width: none;\n\n    /* Dark Theme */\n    --vis-dark-area-stroke-color: none;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-area-fill-opacity: 0.5;\n    --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n  }\n\n`\nexport const area = css`\n  label: area;\n  cursor: var(--vis-area-cursor);\n  fill-opacity: var(--vis-area-fill-opacity);\n  stroke-width: var(--vis-area-stroke-width);\n  stroke-dasharray: var(--vis-area-stroke-dasharray);\n  stroke: var(--vis-area-stroke-color);\n  stroke-opacity: var(--vis-area-stroke-opacity);\n\n  &:hover {\n    fill-opacity: var(--vis-area-hover-fill-opacity);\n    stroke-width: var(--vis-area-hover-stroke-width);\n  }\n`\n\nexport const areaLinePath = css`\n  label: areaLinePath;\n  fill: none;\n  stroke-dasharray: var(--vis-line-stroke-dasharray);\n  stroke-dashoffset: var(--vis-line-stroke-dashoffset);\n`\n"],"names":[],"mappings":";;;AAIO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;IAepC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;AACM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAatB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\n\nexport const root = css`\n  label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-area-cursor: default;\n    --vis-area-fill-opacity: 1;\n    --vis-area-stroke-color: none;\n    --vis-area-stroke-width: 0px;\n    --vis-area-stroke-dasharray: none;\n    --vis-area-stroke-opacity: 1;\n    --vis-area-hover-fill-opacity: none;\n    --vis-area-hover-stroke-width: none;\n\n    /* Dark Theme */\n    --vis-dark-area-stroke-color: none;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-area-fill-opacity: 0.5;\n    --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n  }\n\n`\nexport const area = css`\n  label: area;\n  cursor: var(--vis-area-cursor);\n  fill-opacity: var(--vis-area-fill-opacity);\n  stroke-width: var(--vis-area-stroke-width);\n  stroke-dasharray: var(--vis-area-stroke-dasharray);\n  stroke: var(--vis-area-stroke-color);\n  stroke-opacity: var(--vis-area-stroke-opacity);\n\n  &:hover {\n    fill-opacity: var(--vis-area-hover-fill-opacity);\n    stroke-width: var(--vis-area-hover-stroke-width);\n  }\n`\n\nexport const areaLinePath = css`\n  label: areaLinePath;\n  fill: none;\n  stroke-dasharray: var(--vis-line-stroke-dasharray);\n  stroke-dashoffset: var(--vis-line-stroke-dashoffset);\n`\n"],"names":[],"mappings":";;;AAIO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;IAepC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;AACM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAatB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/bullet-legend/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: bullet-legend-component;

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'\nimport { darkThemeCssSelectors } from 'utils/style'\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-opacity: 0.15;\n    --vis-legend-item-spacing: 20px;\n    --vis-legend-vertical-item-spacing: 5px;\n    --vis-legend-bullet-label-spacing: 8px;\n\n    --vis-dark-legend-label-color: #eee;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-legend-label-color: var(--vis-dark-legend-label-color);\n  }\n\n  body.theme-patterns {\n    --vis-legend-bullet-size: 14px;\n  }\n`\n\nexport const item = css`\n  label: legendItem;\n  display: inline-flex;\n  align-items: center;\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  max-width: min-content;\n`\n\nexport const itemVertical = css`\n  label: legendItemVertical;\n  display: flex;\n  margin-top: var(--vis-legend-vertical-item-spacing);\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  flex: 0 0 auto;\n  label: legendItemBullet;\n  margin-right: var(--vis-legend-bullet-label-spacing);\n  height: var(--vis-legend-bullet-size);\n  width: var(--vis-legend-bullet-size);\n\n  svg {\n    display: block;\n  }\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;IAiBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;;;EAOtC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;EAI9B;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'\nimport { darkThemeCssSelectors } from 'utils/theme'\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-opacity: 0.15;\n    --vis-legend-item-spacing: 20px;\n    --vis-legend-vertical-item-spacing: 5px;\n    --vis-legend-bullet-label-spacing: 8px;\n\n    --vis-dark-legend-label-color: #eee;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-legend-label-color: var(--vis-dark-legend-label-color);\n  }\n\n  body.theme-patterns {\n    --vis-legend-bullet-size: 14px;\n  }\n`\n\nexport const item = css`\n  label: legendItem;\n  display: inline-flex;\n  align-items: center;\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  max-width: min-content;\n`\n\nexport const itemVertical = css`\n  label: legendItemVertical;\n  display: flex;\n  margin-top: var(--vis-legend-vertical-item-spacing);\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  flex: 0 0 auto;\n  label: legendItemBullet;\n  margin-right: var(--vis-legend-bullet-label-spacing);\n  height: var(--vis-legend-bullet-size);\n  width: var(--vis-legend-bullet-size);\n\n  svg {\n    display: block;\n  }\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;IAiBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;;;EAOtC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;EAI9B;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/chord-diagram/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: chord-diagram-component;

package/components/chord-diagram/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\nexport const root = css`\n  label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-chord-diagram-link-fill-color: #cad5f6;\n    --vis-chord-diagram-link-stroke-color: #777777;\n    --vis-chord-diagram-link-opacity: 0.5;\n    --vis-chord-diagram-link-stroke-opacity: 0.15;\n    --vis-chord-diagram-link-highlighted-opacity: 0.9;\n    --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-node-highlighted-opacity: 0.9;\n    --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n    --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n    --vis-chord-diagram-label-text-font-size: 1em;\n\n    --vis-dark-chord-diagram-link-fill-color: #575c65;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const node = css`\n  label: node;\n  stroke-width: 0;\n  fill: var(--vis-color-main);\n  stroke: var(--vis-color-main);\n  transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n  stroke-width: 1.5;\n`\n\nexport const label = css`\n  label: label;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  dominant-baseline: middle;\n  user-select: none;\n  font-size: var(--vis-chord-diagram-label-text-font-size);\n\n  > textPath {\n    dominant-baseline: central;\n  }\n`\n\nexport const labelExit = css`\n  label: label-exit;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: var(--vis-chord-diagram-link-fill-color);\n  fill-opacity: var(--vis-chord-diagram-link-opacity);\n  stroke: var(--vis-chord-diagram-link-stroke-color);\n  stroke-opacity:  var(--vis-chord-diagram-link-stroke-opacity);\n  transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n  label: transparent;\n\n  ${`.${link}`}:not(${`.${highlightedLink}`}) {\n    fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n  }\n\n  ${`.${node}`}:not(${`.${highlightedNode}`}) {\n    fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n  }\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;IAmBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;EAGtC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;EAIjC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAU3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AACM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;AAIvC,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const root = css`\n  label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-chord-diagram-link-fill-color: #cad5f6;\n    --vis-chord-diagram-link-stroke-color: #777777;\n    --vis-chord-diagram-link-opacity: 0.5;\n    --vis-chord-diagram-link-stroke-opacity: 0.15;\n    --vis-chord-diagram-link-highlighted-opacity: 0.9;\n    --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-node-highlighted-opacity: 0.9;\n    --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n    --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n    --vis-chord-diagram-label-text-font-size: 1em;\n\n    --vis-dark-chord-diagram-link-fill-color: #575c65;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const node = css`\n  label: node;\n  stroke-width: 0;\n  fill: var(--vis-color-main);\n  stroke: var(--vis-color-main);\n  transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n  stroke-width: 1.5;\n`\n\nexport const label = css`\n  label: label;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  dominant-baseline: middle;\n  user-select: none;\n  font-size: var(--vis-chord-diagram-label-text-font-size);\n\n  > textPath {\n    dominant-baseline: central;\n  }\n`\n\nexport const labelExit = css`\n  label: label-exit;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: var(--vis-chord-diagram-link-fill-color);\n  fill-opacity: var(--vis-chord-diagram-link-opacity);\n  stroke: var(--vis-chord-diagram-link-stroke-color);\n  stroke-opacity:  var(--vis-chord-diagram-link-stroke-opacity);\n  transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n  label: transparent;\n\n  ${`.${link}`}:not(${`.${highlightedLink}`}) {\n    fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n  }\n\n  ${`.${node}`}:not(${`.${highlightedNode}`}) {\n    fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n  }\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;IAmBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;EAGtC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;EAIjC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAU3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AACM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;AAIvC,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;;;;"}

package/components/donut/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: donut-component;

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'\nimport { darkThemeCssSelectors } from 'utils/style'\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  ${darkThemeCssSelectors} ${`.${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":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;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'\nimport { darkThemeCssSelectors } from 'utils/theme'\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  ${darkThemeCssSelectors} ${`.${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":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;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/flow-legend/style.js

@@ -1,6 +1,6 @@
 import { css, injectGlobal } from '@emotion/css';
 import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: flow-legend-component;

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\nimport { darkThemeCssSelectors } from 'utils/style'\nimport { FlowLegendItem } from './types'\n\nexport const root = css`\n  label: flow-legend-component;\n  position: relative;\n  user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-flow-legend-label-background: #ffffff;\n    --vis-flow-legend-label-color: #71788a;\n    --vis-flow-legend-link-color: #E5E9F7;\n    --vis-flow-legend-arrow-color: #E5E9F7;\n    --vis-flow-legend-label-padding: 5px 10px;\n    --vis-flow-legend-arrow-padding: 0 5px;\n    /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n    --vis-dark-flow-legend-label-background: #292b34;\n    --vis-dark-flow-legend-label-color: #E5E9F7;\n    --vis-dark-flow-legend-link-color: #71788a;\n    --vis-dark-flow-legend-arrow-color: #71788a;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n    --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n    --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n    --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n  }\n`\n\nexport const labels = (spacing: number, lineColor: string, items: FlowLegendItem[]): string => css`\n  label: labels;\n\n  position: relative;\n  width: ${spacing ? 'fit-content' : '100%'};\n  display: flex;\n  align-items: center;\n  justify-content: ${items.length > 1 ? 'space-between' : 'center'};\n  gap: ${spacing ? `${spacing}px` : 'unset'};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    height: 1px;\n    transform: translateY(-50%);\n    background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n    opacity: ${items.length > 1 ? 1 : 0};\n  }\n`\n\nexport const item = css`\n  label: item;\n  position: relative;\n\n  :first-child > span {\n    padding-left: 0;\n  }\n\n  :last-child > span {\n    padding-right: 0;\n  }\n\n`\n\nexport const clickable = css`\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n  label: label;\n  padding: var(--vis-flow-legend-label-padding);\n  background-color: var(--vis-flow-legend-label-background);\n  font-size: ${labelFontSize}px;\n  color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n  display: inline-table;\n  text-align: center;\n`\n\nexport const arrow = (arrowColor: string, arrowSymbolYOffset: number): string => css`\n  label: arrow;\n  font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n  font-size: 9px;\n  vertical-align: middle;\n  color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-arrow-padding);\n  display: inline-table;\n  text-align: center;\n  transform: translateY(${arrowSymbolYOffset || 0}px);\n`\n"],"names":[],"mappings":";;;;AAKO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;EAItB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;IAgBpC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;;EAMtC;AAEM,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,SAAiB,EAAE,KAAuB,KAAa,GAAG,CAAA,CAAA;;;;AAIvF,SAAA,EAAA,OAAO,GAAG,aAAa,GAAG,MAAM,CAAA;;;qBAGtB,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,QAAQ,CAAA;SACzD,OAAO,GAAG,CAAA,EAAG,OAAO,CAAI,EAAA,CAAA,GAAG,OAAO,CAAA;;;;;;;;;;AAUnB,sBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;eACzD,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;;EAEtC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;EAYtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA,CAAA;;;;eAIhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEM,MAAM,KAAK,GAAG,CAAC,UAAkB,EAAE,kBAA0B,KAAa,GAAG,CAAA,CAAA;;0DAE1B,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;AAKnC,wBAAA,EAAA,kBAAkB,IAAI,CAAC,CAAA;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\nimport { darkThemeCssSelectors } from 'utils/theme'\nimport { FlowLegendItem } from './types'\n\nexport const root = css`\n  label: flow-legend-component;\n  position: relative;\n  user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-flow-legend-label-background: #ffffff;\n    --vis-flow-legend-label-color: #71788a;\n    --vis-flow-legend-link-color: #E5E9F7;\n    --vis-flow-legend-arrow-color: #E5E9F7;\n    --vis-flow-legend-label-padding: 5px 10px;\n    --vis-flow-legend-arrow-padding: 0 5px;\n    /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n    --vis-dark-flow-legend-label-background: #292b34;\n    --vis-dark-flow-legend-label-color: #E5E9F7;\n    --vis-dark-flow-legend-link-color: #71788a;\n    --vis-dark-flow-legend-arrow-color: #71788a;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n    --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n    --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n    --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n  }\n`\n\nexport const labels = (spacing: number, lineColor: string, items: FlowLegendItem[]): string => css`\n  label: labels;\n\n  position: relative;\n  width: ${spacing ? 'fit-content' : '100%'};\n  display: flex;\n  align-items: center;\n  justify-content: ${items.length > 1 ? 'space-between' : 'center'};\n  gap: ${spacing ? `${spacing}px` : 'unset'};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    height: 1px;\n    transform: translateY(-50%);\n    background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n    opacity: ${items.length > 1 ? 1 : 0};\n  }\n`\n\nexport const item = css`\n  label: item;\n  position: relative;\n\n  :first-child > span {\n    padding-left: 0;\n  }\n\n  :last-child > span {\n    padding-right: 0;\n  }\n\n`\n\nexport const clickable = css`\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n  label: label;\n  padding: var(--vis-flow-legend-label-padding);\n  background-color: var(--vis-flow-legend-label-background);\n  font-size: ${labelFontSize}px;\n  color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n  display: inline-table;\n  text-align: center;\n`\n\nexport const arrow = (arrowColor: string, arrowSymbolYOffset: number): string => css`\n  label: arrow;\n  font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n  font-size: 9px;\n  vertical-align: middle;\n  color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-arrow-padding);\n  display: inline-table;\n  text-align: center;\n  transform: translateY(${arrowSymbolYOffset || 0}px);\n`\n"],"names":[],"mappings":";;;;AAKO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;EAItB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;IAgBpC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;;EAMtC;AAEM,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,SAAiB,EAAE,KAAuB,KAAa,GAAG,CAAA,CAAA;;;;AAIvF,SAAA,EAAA,OAAO,GAAG,aAAa,GAAG,MAAM,CAAA;;;qBAGtB,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,QAAQ,CAAA;SACzD,OAAO,GAAG,CAAA,EAAG,OAAO,CAAI,EAAA,CAAA,GAAG,OAAO,CAAA;;;;;;;;;;AAUnB,sBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;eACzD,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;;EAEtC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;EAYtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA,CAAA;;;;eAIhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEM,MAAM,KAAK,GAAG,CAAC,UAAkB,EAAE,kBAA0B,KAAa,GAAG,CAAA,CAAA;;0DAE1B,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;AAKnC,wBAAA,EAAA,kBAAkB,IAAI,CAAC,CAAA;;;;;"}

package/components/free-brush/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: free-brush-component;

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\nexport const root = css`\n  label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-free-brush-selection-fill-color: #0b1640;\n    --vis-free-brush-selection-fill-opacity: 0.4;\n    --vis-free-brush-selection-stroke-color: #acb2b9;\n    --vis-free-brush-handle-fill-color: #6d778c;\n    --vis-free-brush-handle-stroke-color: none;\n\n    --vis-dark-free-brush-selection-fill-color: #344174;\n    --vis-dark-free-brush-selection-stroke-color: #0b1640;\n    --vis-dark-free-brush-handle-fill-color: #6d778c;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n    --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n    --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n  }\n`\n\nexport const brush = css`\n  label: brush;\n  fill: none;\n  stroke: none;\n\n  .selection {\n    fill: var(--vis-free-brush-selection-fill-color);\n    fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n    stroke: var(--vis-free-brush-selection-stroke-color);\n    stroke-width: 0;\n    stroke-opacity: 0;\n  }\n\n  .handle {\n    fill: var(--vis-free-brush-handle-fill-color);\n    stroke: var(--vis-free-brush-handle-stroke-color);\n  }\n`\n\nexport const hide = css`\n  .selection, .handle {\n    display: none;\n  }\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;IAajC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const root = css`\n  label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-free-brush-selection-fill-color: #0b1640;\n    --vis-free-brush-selection-fill-opacity: 0.4;\n    --vis-free-brush-selection-stroke-color: #acb2b9;\n    --vis-free-brush-handle-fill-color: #6d778c;\n    --vis-free-brush-handle-stroke-color: none;\n\n    --vis-dark-free-brush-selection-fill-color: #344174;\n    --vis-dark-free-brush-selection-stroke-color: #0b1640;\n    --vis-dark-free-brush-handle-fill-color: #6d778c;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n    --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n    --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n  }\n`\n\nexport const brush = css`\n  label: brush;\n  fill: none;\n  stroke: none;\n\n  .selection {\n    fill: var(--vis-free-brush-selection-fill-color);\n    fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n    stroke: var(--vis-free-brush-selection-stroke-color);\n    stroke-width: 0;\n    stroke-opacity: 0;\n  }\n\n  .handle {\n    fill: var(--vis-free-brush-handle-fill-color);\n    stroke: var(--vis-free-brush-handle-stroke-color);\n  }\n`\n\nexport const hide = css`\n  .selection, .handle {\n    display: none;\n  }\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;IAajC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../../../utils/style.js';
+import { darkThemeCssSelectors } from '../../../../utils/theme.js';
 
 const links = css `
   label: links;

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/link/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\nexport const links = css`\n  label: links;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-link-stroke-color: #e6e9f3;\n    --vis-graph-link-stroke-opacity: 1.0;\n    --vis-graph-link-greyout-opacity: 0.3;\n    --vis-graph-link-dashed-stroke-dasharray: 6 6;\n\n    --vis-graph-link-label-font-size: 9pt;\n    --vis-graph-link-label-background: #e6e9f3;\n    --vis-graph-link-label-text-color-dark: #18181B;\n    --vis-graph-link-label-text-color-bright: #fff;\n    --vis-graph-link-label-text-color: var(--vis-graph-link-label-text-color-dark);\n\n    --vis-graph-link-band-opacity: 0.35;\n    --vis-graph-link-support-stroke-width: 10px;\n    --vis-graph-link-flow-opacity: 1;\n\n    --vis-dark-graph-link-stroke-color: #494b56;\n    --vis-dark-graph-link-label-background: #3f3f45;\n    --vis-dark-graph-link-label-text-color: var(--vis-graph-link-label-text-color-bright);\n\n\n    --vis-graph-link-dominant-baseline: middle;\n  }\n\n  ${darkThemeCssSelectors} ${`.${links}`} {\n    --vis-graph-link-stroke-color: var(--vis-dark-graph-link-stroke-color);\n    --vis-graph-link-label-stroke-color: var(--vis-dark-graph-link-label-stroke-color);\n    --vis-graph-link-label-text-color: var(--vis-dark-graph-link-label-text-color);\n    --vis-graph-link-label-background: var(--vis-dark-graph-link-label-background);\n  }\n`\n\nexport const linkSupport = css`\n  label: link-support;\n\n  fill: none;\n  stroke-linecap: round;\n  stroke-width: var(--vis-graph-link-support-stroke-width);\n  stroke-opacity: 0;\n  stroke: var(--vis-graph-link-stroke-color);\n  transition: stroke-opacity 0.2s;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: none;\n  stroke: var(--vis-graph-link-stroke-color);\n  stroke-opacity: var(--vis-graph-link-stroke-opacity);\n  transition: stroke 800ms;\n  stroke-linecap: round;\n  pointer-events: none;\n`\n\nexport const linkDashed = css`\n  label: dashed;\n\n  ${`.${link}`} {\n    stroke-dasharray: var(--vis-graph-link-dashed-stroke-dasharray);\n  }\n`\n\nexport const linkArrow = css`\n  label: link-arrow;\n  fill: var(--vis-graph-link-stroke-color);\n`\n\nexport const gLink = css`\n  label: g-link;\n`\n\nexport const gLinkExit = css`\n  label: g-link-exit;\n  pointer-events: none;\n`\n\nexport const greyedOutLink = css`\n  label: greyed-out;\n  opacity: var(--vis-graph-link-greyout-opacity);\n`\n\nexport const linkBand = css`\n  label: link-band;\n\n  stroke-opacity: var(--vis-graph-link-band-opacity);\n  pointer-events: none;\n  stroke: var(--vis-graph-node-stroke-color);\n  fill: none;\n`\n\nexport const flowGroup = css`\n  label: flow-group;\n\n  pointer-events: none;\n`\n\nexport const flowCircle = css`\n  label: flow-circle;\n\n  fill: var(--vis-graph-link-stroke-color);\n  opacity: var(--vis-graph-link-flow-opacity);\n`\n\nexport const linkLabelGroup = css`\n  label: label-group;\n`\n\nexport const linkLabelBackground = css`\n  label: label-background;\n\n  fill: var(--vis-graph-link-label-background);\n`\n\nexport const linkLabelContent = css`\n  label: label-content;\n\n  font-size: var(--vis-graph-link-label-font-size);\n  font-family: var(--vis-font-family);\n  fill: var(--vis-graph-link-label-text-color);\n  text-anchor: middle;\n  dominant-baseline: var(--vis-graph-link-dominant-baseline);\n  user-select: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,KAAK,CAAE,CAAA,CAAA;;;;;;EAMvC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAStB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;AAGzB,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAGb;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;EAO1B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;EAI3B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;EAIrC;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/link/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const links = css`\n  label: links;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-link-stroke-color: #e6e9f3;\n    --vis-graph-link-stroke-opacity: 1.0;\n    --vis-graph-link-greyout-opacity: 0.3;\n    --vis-graph-link-dashed-stroke-dasharray: 6 6;\n\n    --vis-graph-link-label-font-size: 9pt;\n    --vis-graph-link-label-background: #e6e9f3;\n    --vis-graph-link-label-text-color-dark: #18181B;\n    --vis-graph-link-label-text-color-bright: #fff;\n    --vis-graph-link-label-text-color: var(--vis-graph-link-label-text-color-dark);\n\n    --vis-graph-link-band-opacity: 0.35;\n    --vis-graph-link-support-stroke-width: 10px;\n    --vis-graph-link-flow-opacity: 1;\n\n    --vis-dark-graph-link-stroke-color: #494b56;\n    --vis-dark-graph-link-label-background: #3f3f45;\n    --vis-dark-graph-link-label-text-color: var(--vis-graph-link-label-text-color-bright);\n\n\n    --vis-graph-link-dominant-baseline: middle;\n  }\n\n  ${darkThemeCssSelectors} ${`.${links}`} {\n    --vis-graph-link-stroke-color: var(--vis-dark-graph-link-stroke-color);\n    --vis-graph-link-label-stroke-color: var(--vis-dark-graph-link-label-stroke-color);\n    --vis-graph-link-label-text-color: var(--vis-dark-graph-link-label-text-color);\n    --vis-graph-link-label-background: var(--vis-dark-graph-link-label-background);\n  }\n`\n\nexport const linkSupport = css`\n  label: link-support;\n\n  fill: none;\n  stroke-linecap: round;\n  stroke-width: var(--vis-graph-link-support-stroke-width);\n  stroke-opacity: 0;\n  stroke: var(--vis-graph-link-stroke-color);\n  transition: stroke-opacity 0.2s;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: none;\n  stroke: var(--vis-graph-link-stroke-color);\n  stroke-opacity: var(--vis-graph-link-stroke-opacity);\n  transition: stroke 800ms;\n  stroke-linecap: round;\n  pointer-events: none;\n`\n\nexport const linkDashed = css`\n  label: dashed;\n\n  ${`.${link}`} {\n    stroke-dasharray: var(--vis-graph-link-dashed-stroke-dasharray);\n  }\n`\n\nexport const linkArrow = css`\n  label: link-arrow;\n  fill: var(--vis-graph-link-stroke-color);\n`\n\nexport const gLink = css`\n  label: g-link;\n`\n\nexport const gLinkExit = css`\n  label: g-link-exit;\n  pointer-events: none;\n`\n\nexport const greyedOutLink = css`\n  label: greyed-out;\n  opacity: var(--vis-graph-link-greyout-opacity);\n`\n\nexport const linkBand = css`\n  label: link-band;\n\n  stroke-opacity: var(--vis-graph-link-band-opacity);\n  pointer-events: none;\n  stroke: var(--vis-graph-node-stroke-color);\n  fill: none;\n`\n\nexport const flowGroup = css`\n  label: flow-group;\n\n  pointer-events: none;\n`\n\nexport const flowCircle = css`\n  label: flow-circle;\n\n  fill: var(--vis-graph-link-stroke-color);\n  opacity: var(--vis-graph-link-flow-opacity);\n`\n\nexport const linkLabelGroup = css`\n  label: label-group;\n`\n\nexport const linkLabelBackground = css`\n  label: label-background;\n\n  fill: var(--vis-graph-link-label-background);\n`\n\nexport const linkLabelContent = css`\n  label: label-content;\n\n  font-size: var(--vis-graph-link-label-font-size);\n  font-family: var(--vis-font-family);\n  fill: var(--vis-graph-link-label-text-color);\n  text-anchor: middle;\n  dominant-baseline: var(--vis-graph-link-dominant-baseline);\n  user-select: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,KAAK,CAAE,CAAA,CAAA;;;;;;EAMvC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAStB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;AAGzB,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAGb;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;EAO1B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;EAI3B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;EAIrC;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../../../utils/style.js';
+import { darkThemeCssSelectors } from '../../../../utils/theme.js';
 
 const nodes = css `
   label: nodes;

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'\nimport { darkThemeCssSelectors } from 'utils/style'\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-opacity: 0.9;\n    --vis-graph-node-greyout-filter: none;\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    /* Brushed */\n    --vis-graph-brushed-node-stroke-color: var(--vis-color-main);\n    --vis-graph-brushed-node-label-text-color: var(--vis-color-main);\n    --vis-graph-brushed-node-icon-fill-color: var(--vis-color-main);\n\n    /* Misc */\n    --vis-graph-node-dominant-baseline: middle;\n  }\n\n  ${darkThemeCssSelectors} ${`.${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 brushable = css`\n  label: brushable;\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\n  :not(.${brushable}) {\n    transition: .4s fill, 4s stroke;\n  }\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: var(--vis-graph-node-dominant-baseline);\n  text-anchor: middle;\n  pointer-events: none;\n  fill: var(--vis-graph-node-icon-fill-color);\n\n  :not(.${brushable}) {\n    transition: .4s all;\n  }\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: var(--vis-graph-node-dominant-baseline);\n  text-anchor: middle;\n  pointer-events: none;\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  :not(.${brushable}) {\n    transition: .4s all;\n  }\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: var(--vis-graph-node-dominant-baseline);\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 greyedOutNode = css`\n  label: greyed-out;\n  opacity: var(--vis-graph-node-greyout-opacity);\n  filter: var(--vis-graph-node-greyout-filter);\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\nexport const brushed = css`\n  label: brushed-node;\n\n  ${`.${node}`} {\n    stroke: var(--vis-graph-brushed-node-stroke-color);\n  }\n  ${`.${nodeIcon}`} {\n    fill: var(--vis-graph-brushed-node-icon-fill-color);\n  }\n  ${`.${labelTextContent}`} {\n    fill: var(--vis-graph-brushed-node-label-text-color);\n  }\n`\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\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-opacity: 0.9;\n    --vis-graph-node-greyout-filter: none;\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    /* Brushed */\n    --vis-graph-brushed-node-stroke-color: var(--vis-color-main);\n    --vis-graph-brushed-node-label-text-color: var(--vis-color-main);\n    --vis-graph-brushed-node-icon-fill-color: var(--vis-color-main);\n\n    /* Misc */\n    --vis-graph-node-dominant-baseline: middle;\n  }\n\n  ${darkThemeCssSelectors} ${`.${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 brushable = css`\n  label: brushable;\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\n  :not(.${brushable}) {\n    transition: .4s fill, 4s stroke;\n  }\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: var(--vis-graph-node-dominant-baseline);\n  text-anchor: middle;\n  pointer-events: none;\n  fill: var(--vis-graph-node-icon-fill-color);\n\n  :not(.${brushable}) {\n    transition: .4s all;\n  }\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: var(--vis-graph-node-dominant-baseline);\n  text-anchor: middle;\n  pointer-events: none;\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  :not(.${brushable}) {\n    transition: .4s all;\n  }\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: var(--vis-graph-node-dominant-baseline);\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 greyedOutNode = css`\n  label: greyed-out;\n  opacity: var(--vis-graph-node-greyout-opacity);\n  filter: var(--vis-graph-node-greyout-filter);\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\nexport const brushed = css`\n  label: brushed-node;\n\n  ${`.${node}`} {\n    stroke: var(--vis-graph-brushed-node-stroke-color);\n  }\n  ${`.${nodeIcon}`} {\n    fill: var(--vis-graph-brushed-node-icon-fill-color);\n  }\n  ${`.${labelTextContent}`} {\n    fill: var(--vis-graph-brushed-node-label-text-color);\n  }\n`\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../../../utils/style.js';
+import { darkThemeCssSelectors } from '../../../../utils/theme.js';
 
 const panels = css `
   label: panels;

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'\nimport { darkThemeCssSelectors } from 'utils/style'\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  ${darkThemeCssSelectors} ${`.${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":";;;AAGO,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,MAAM,CAAE,CAAA,CAAA;;;;;;;;;EASxC;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'\nimport { darkThemeCssSelectors } from 'utils/theme'\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  ${darkThemeCssSelectors} ${`.${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":";;;AAGO,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BjC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,MAAM,CAAE,CAAA,CAAA;;;;;;;;;EASxC;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/grouped-bar/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: grouped-bar-component;

package/components/grouped-bar/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/grouped-bar/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\nexport const root = css`\n  label: grouped-bar-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-grouped-bar-cursor: default;\n    --vis-grouped-bar-fill-color: var(--vis-color-main);\n    --vis-grouped-bar-stroke-color: none;\n    --vis-grouped-bar-stroke-width: 0px;\n    --vis-grouped-bar-hover-stroke-width: 1px;\n    --vis-grouped-bar-hover-stroke-color: none;\n\n\n    /* Dark Theme */\n    --vis-dark-grouped-bar-stroke-color: none;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-grouped-bar-stroke-color: var(--vis-dark-grouped-bar-stroke-color);\n  }\n`\n\nexport const bar = css`\n  label: bar;\n  fill: var(--vis-grouped-bar-fill-color);\n  stroke: var(--vis-grouped-bar-stroke-color);\n  stroke-width: var(--vis-grouped-bar-stroke-width);\n  cursor: var(--vis-grouped-bar-cursor);\n\n  &:hover {\n    stroke-width: var(--vis-grouped-bar-hover-stroke-width);\n    stroke: var(--vis-grouped-bar-hover-stroke-color);\n  }\n`\n\nexport const barGroup = css`\n  label: barGroup;\n`\n\nexport const barGroupExit = css`\n  label: barGroupExit;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;IAcpC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;EAGtC;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWrB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/grouped-bar/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const root = css`\n  label: grouped-bar-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-grouped-bar-cursor: default;\n    --vis-grouped-bar-fill-color: var(--vis-color-main);\n    --vis-grouped-bar-stroke-color: none;\n    --vis-grouped-bar-stroke-width: 0px;\n    --vis-grouped-bar-hover-stroke-width: 1px;\n    --vis-grouped-bar-hover-stroke-color: none;\n\n\n    /* Dark Theme */\n    --vis-dark-grouped-bar-stroke-color: none;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-grouped-bar-stroke-color: var(--vis-dark-grouped-bar-stroke-color);\n  }\n`\n\nexport const bar = css`\n  label: bar;\n  fill: var(--vis-grouped-bar-fill-color);\n  stroke: var(--vis-grouped-bar-stroke-color);\n  stroke-width: var(--vis-grouped-bar-stroke-width);\n  cursor: var(--vis-grouped-bar-cursor);\n\n  &:hover {\n    stroke-width: var(--vis-grouped-bar-hover-stroke-width);\n    stroke: var(--vis-grouped-bar-hover-stroke-color);\n  }\n`\n\nexport const barGroup = css`\n  label: barGroup;\n`\n\nexport const barGroupExit = css`\n  label: barGroupExit;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;IAcpC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;EAGtC;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWrB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/plotband/style.js

@@ -1,5 +1,5 @@
 import { injectGlobal, css } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const globalStyles = injectGlobal `
   :root {

package/components/plotband/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/plotband/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-plotband-color: rgba(255, 255, 90, 0.2);\n    --vis-plotband-label-font-size: 12px;\n    --vis-plotband-label-color: #000;\n\n    --vis-dark-plotband-color: rgba(220, 220, 90, 0.2);\n    --vis-dark-plotband-label-color: #e5e9f7;\n  }\n\n  ${darkThemeCssSelectors} {\n    --vis-plotband-color: var(--vis-dark-plotband-color);\n    --vis-plotband-label-color: var(--vis-dark-tooltip-text-color);\n  }\n`\n\nexport const root = css`\n  label: plotband-component;\n`\n\nexport const plotband = css`\n  label: plotband-area;\n  transition: opacity 200ms;\n  cursor: var(--vis-line-cursor);\n  fill: var(--vis-plotband-color);\n`\n\nexport const label = css`\n  label: plotline-label;\n\n  user-select: none;\n  text-anchor: middle;\n  pointer-events: none;\n  font-size: var(--vis-plotband-label-font-size);\n  fill: var(--vis-plotband-label-color);\n`\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;IAUpC,qBAAqB,CAAA;;;;EAIxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;EAK1B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/plotband/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-plotband-color: rgba(255, 255, 90, 0.2);\n    --vis-plotband-label-font-size: 12px;\n    --vis-plotband-label-color: #000;\n\n    --vis-dark-plotband-color: rgba(220, 220, 90, 0.2);\n    --vis-dark-plotband-label-color: #e5e9f7;\n  }\n\n  ${darkThemeCssSelectors} {\n    --vis-plotband-color: var(--vis-dark-plotband-color);\n    --vis-plotband-label-color: var(--vis-dark-tooltip-text-color);\n  }\n`\n\nexport const root = css`\n  label: plotband-component;\n`\n\nexport const plotband = css`\n  label: plotband-area;\n  transition: opacity 200ms;\n  cursor: var(--vis-line-cursor);\n  fill: var(--vis-plotband-color);\n`\n\nexport const label = css`\n  label: plotline-label;\n\n  user-select: none;\n  text-anchor: middle;\n  pointer-events: none;\n  font-size: var(--vis-plotband-label-font-size);\n  fill: var(--vis-plotband-label-color);\n`\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;IAUpC,qBAAqB,CAAA;;;;EAIxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;EAK1B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}

package/components/plotline/style.js

@@ -1,5 +1,5 @@
 import { injectGlobal, css } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const globalStyles = injectGlobal `
   :root {

package/components/plotline/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/plotline/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-plotline-color: rgb(226, 32, 58);\n    --vis-plotline-width: 2;\n    --vis-plotline-dasharray: none;\n    --vis-plotline-stroke-dashoffset: 0;\n    --vis-plotline-label-font-size: 12px;\n    --vis-plotline-label-color: #000;\n\n    --vis-dark-plotline-label-color: #e5e9f7;\n  }\n\n  ${darkThemeCssSelectors} {\n    --vis-plotline-label-color: var(--vis-dark-tooltip-text-color);\n  }\n`\n\nexport const root = css`\n  label: plotline-component;\n`\n\nexport const plotline = css`\n  label: plotline;\n  transition: opacity 200ms;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke: var(--vis-plotline-color);\n  stroke-width: var(--vis-plotline-width);\n  stroke-dasharray: var(--vis-plotline-dasharray);\n  stroke-dashoffset: var(--vis-plotline-stroke-dashoffset);\n`\n\nexport const label = css`\n  label: plotline-label;\n  text-anchor: middle;\n  /* dominant-baseline: middle; */\n  pointer-events: none;\n  font-size: var(--vis-plotline-label-font-size);\n  fill: var(--vis-plotline-label-color);\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;IAYpC,qBAAqB,CAAA;;;EAGxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/plotline/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-plotline-color: rgb(226, 32, 58);\n    --vis-plotline-width: 2;\n    --vis-plotline-dasharray: none;\n    --vis-plotline-stroke-dashoffset: 0;\n    --vis-plotline-label-font-size: 12px;\n    --vis-plotline-label-color: #000;\n\n    --vis-dark-plotline-label-color: #e5e9f7;\n  }\n\n  ${darkThemeCssSelectors} {\n    --vis-plotline-label-color: var(--vis-dark-tooltip-text-color);\n  }\n`\n\nexport const root = css`\n  label: plotline-component;\n`\n\nexport const plotline = css`\n  label: plotline;\n  transition: opacity 200ms;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke: var(--vis-plotline-color);\n  stroke-width: var(--vis-plotline-width);\n  stroke-dasharray: var(--vis-plotline-dasharray);\n  stroke-dashoffset: var(--vis-plotline-stroke-dashoffset);\n`\n\nexport const label = css`\n  label: plotline-label;\n  text-anchor: middle;\n  /* dominant-baseline: middle; */\n  pointer-events: none;\n  font-size: var(--vis-plotline-label-font-size);\n  fill: var(--vis-plotline-label-color);\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;IAYpC,qBAAqB,CAAA;;;EAGxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;"}

package/components/sankey/modules/label.js

@@ -102,15 +102,21 @@ function getSubLabelTextAnchor(d, config, width) {
     }
 }
 function getLabelMaxWidth(d, config, labelOrientation, layerSpacing, sankeyMaxLayer, bleed) {
-    var _a;
+    var _a, _b;
     const labelHorizontalPadding = 2 * SANKEY_LABEL_SPACING + 2 * SANKEY_LABEL_BLOCK_PADDING;
+    // Single-layer layouts (e.g. linkless nodes) are rendered centered rather than pinned to a
+    // container edge, so the label doesn't spill into the bleed margin — it has roughly half of the
+    // free horizontal space on its side.
+    if (sankeyMaxLayer === 0) {
+        return clamp(layerSpacing / 2 - labelHorizontalPadding, 0, (_a = config.labelMaxWidth) !== null && _a !== void 0 ? _a : Infinity);
+    }
     if (d.layer === 0 && labelOrientation === Position.Left) {
         return bleed.left - labelHorizontalPadding;
     }
     if (d.layer === sankeyMaxLayer && labelOrientation === Position.Right) {
         return bleed.right - labelHorizontalPadding;
     }
-    return clamp(layerSpacing - labelHorizontalPadding, 0, (_a = config.labelMaxWidth) !== null && _a !== void 0 ? _a : Infinity);
+    return clamp(layerSpacing - labelHorizontalPadding, 0, (_b = config.labelMaxWidth) !== null && _b !== void 0 ? _b : Infinity);
 }
 function renderLabel(labelGroup, d, config, width, duration, layerSpacing, sankeyMaxLayer, bleed, forceExpand = false) {
     const labelTextSelection = labelGroup.select(`.${label}`);

package/components/sankey/modules/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sources":["../../../../src/components/sankey/modules/label.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Utils\nimport { estimateStringPixelLength, estimateTextSize, trimSVGText, wrapSVGText } from 'utils/text'\nimport { clamp, getString, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\nimport { cssvar } from 'utils/style'\n\n// Types\nimport { GenericAccessor } from 'types/accessor'\nimport { FitMode, VerticalAlign } from 'types/text'\nimport { Position } from 'types/position'\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { SankeyInputLink, SankeyInputNode, SankeyNode, SankeySubLabelPlacement } from '../types'\n\n// Config\nimport { SankeyConfigInterface } from '../config'\n\n// Styles\nimport * as s from '../style'\n\nexport const SANKEY_LABEL_SPACING = 10\nexport const SANKEY_LABEL_BLOCK_PADDING = 6.5\n\nexport function getLabelFontSize<N extends SankeyInputNode, L extends SankeyInputLink> (\n  config: SankeyConfigInterface<N, L>,\n  context: SVGElement\n): number {\n  return config.labelFontSize ?? getCSSVariableValueInPixels(cssvar(s.variables.sankeyNodeLabelFontSize), context)\n}\n\nexport function getSubLabelFontSize<N extends SankeyInputNode, L extends SankeyInputLink> (\n  config: SankeyConfigInterface<N, L>,\n  context: SVGElement\n): number {\n  return config.subLabelFontSize ?? getCSSVariableValueInPixels(cssvar(s.variables.sankeyNodeSublabelFontSize), context)\n}\n\nexport function estimateRequiredLabelWidth<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  labelFontSize: number,\n  subLabelFontSize: number\n): number {\n  const labelAddWidth = 2 // Adding a few pixels for the label background to look more aligned\n  const inlineLabelAddWidth = 8 // Without this, the label anf sub-label will look too close to each other\n  const tolerance = 1.1\n  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n  const labelText = `${getString(d, config.label) ?? ''}` // Stringify because theoretically it can be a number\n  const sublabelText = `${getString(d, config.subLabel) ?? ''}` // Stringify because theoretically it can be a number\n  const labelTextWidth = tolerance * estimateStringPixelLength(labelText, labelFontSize)\n  const sublabelTextWidth = tolerance * estimateStringPixelLength(sublabelText, subLabelFontSize)\n  return isSublabelInline ? inlineLabelAddWidth + (labelTextWidth + sublabelTextWidth) : labelAddWidth + Math.max(labelTextWidth, sublabelTextWidth)\n}\n\nfunction getLabelBackground (\n  width: number,\n  height: number,\n  orientation: Position.Left | Position.Right,\n  arrowWidth = 5,\n  arrowHeight = 8\n): string {\n  const halfHeight = height / 2\n  const halfArrowHeight = arrowHeight / 2\n\n  if (orientation === Position.Left) {\n    const rightArrowPos = `L 0 ${halfHeight - halfArrowHeight}   L   ${+arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n    return `\n      M 0 0\n      ${rightArrowPos}\n      L 0  ${height}\n      L ${-width} ${height}\n      L ${-width} 0\n      L 0 0 `\n  } else {\n    const leftArrowPos = `L 0 ${halfHeight - halfArrowHeight}   L   ${-arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n    return `\n      M 0 0\n      ${leftArrowPos}\n      L 0  ${height}\n      L ${width} ${height}\n      L ${width} 0\n      L 0 0 `\n  }\n}\n\nexport function getLabelOrientation<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  sankeyWidth: number,\n  labelPosition: GenericAccessor<Position.Auto | Position.Left | Position.Right | string, SankeyNode<N, L>>\n): (Position.Left | Position.Right) {\n  let orientation = getValue(d, labelPosition)\n  if (orientation === Position.Auto || !orientation) {\n    orientation = d.x1 < sankeyWidth / 2 ? Position.Left : Position.Right\n  }\n\n  return orientation as (Position.Left | Position.Right)\n}\n\nexport function getLabelGroupXTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number\n): number {\n  const orientation = getLabelOrientation(d, width, config.labelPosition)\n  switch (orientation) {\n    case Position.Right: return config.nodeWidth + SANKEY_LABEL_SPACING\n    case Position.Left:\n    default:\n      return -SANKEY_LABEL_SPACING\n  }\n}\n\nexport function getLabelGroupYTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  labelGroupHeight: number,\n  config: SankeyConfigInterface<N, L>\n): number {\n  const nodeHeight = d.y1 - d.y0\n  if (config.labelBackground && (nodeHeight < labelGroupHeight)) return (nodeHeight - labelGroupHeight) / 2\n\n  switch (config.labelVerticalAlign) {\n    case VerticalAlign.Bottom: return nodeHeight - labelGroupHeight\n    case VerticalAlign.Middle: return nodeHeight / 2 - labelGroupHeight / 2\n    case VerticalAlign.Top:\n    default: return 0\n  }\n}\n\nexport function getLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number\n): string {\n  const orientation = getLabelOrientation(d, width, config.labelPosition)\n  switch (orientation) {\n    case Position.Right: return 'start'\n    case Position.Left:\n    default:\n      return 'end'\n  }\n}\n\nexport function getSubLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number\n): string {\n  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n  const orientation = getLabelOrientation(d, width, config.labelPosition)\n  switch (orientation) {\n    case Position.Right: return isSublabelInline ? 'end' : 'start'\n    case Position.Left:\n    default:\n      return isSublabelInline ? 'start' : 'end'\n  }\n}\n\nexport function getLabelMaxWidth<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  labelOrientation: Position.Left | Position.Right,\n  layerSpacing: number,\n  sankeyMaxLayer: number,\n  bleed: Spacing\n): number {\n  const labelHorizontalPadding = 2 * SANKEY_LABEL_SPACING + 2 * SANKEY_LABEL_BLOCK_PADDING\n\n  if (d.layer === 0 && labelOrientation === Position.Left) {\n    return bleed.left - labelHorizontalPadding\n  }\n  if (d.layer === sankeyMaxLayer && labelOrientation === Position.Right) {\n    return bleed.right - labelHorizontalPadding\n  }\n\n  return clamp(layerSpacing - labelHorizontalPadding, 0, config.labelMaxWidth ?? Infinity)\n}\n\nexport function renderLabel<N extends SankeyInputNode, L extends SankeyInputLink> (\n  labelGroup: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any>,\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number,\n  duration: number,\n  layerSpacing: number | undefined,\n  sankeyMaxLayer: number,\n  bleed: Spacing,\n  forceExpand = false\n): { x: number; y: number; width: number; height: number; layer: number; selection: any; hidden?: boolean } {\n  const labelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.label}`)\n  const labelShowBackground = config.labelBackground || forceExpand\n  const sublabelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.sublabel}`)\n  const labelPadding = labelShowBackground ? SANKEY_LABEL_BLOCK_PADDING : 0\n  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n  const separator = config.labelForceWordBreak ? '' : config.labelTextSeparator\n  const fastEstimatesMode = true // Fast but inaccurate\n  const fontWidthToHeightRatio = 0.52\n  const dy = 0.32\n  const labelOrientation = getLabelOrientation(d, width, config.labelPosition)\n  const labelOrientationMult = labelOrientation === Position.Left ? -1 : 1\n  const labelText = getString(d, config.label)\n  const sublabelText = getString(d, config.subLabel)\n  let wasTrimmed = false\n\n  const labelFontSize = getLabelFontSize(config, labelGroup.node())\n  const subLabelFontSize = getSubLabelFontSize(config, labelGroup.node())\n\n  // Render the main label, wrap / trim it and estimate its size\n  const labelsFontSizeDifference = sublabelText ? labelFontSize - subLabelFontSize : 0\n  const labelTranslateY = labelPadding + ((isSublabelInline && labelsFontSizeDifference < 0) ? -0.6 * labelsFontSizeDifference : 0)\n  labelTextSelection\n    .text(labelText)\n    .attr('font-size', labelFontSize)\n    .style('text-decoration', getString(d, config.labelTextDecoration))\n    .style('fill', getColor(d, config.labelColor))\n    .attr('transform', `translate(${labelOrientationMult * labelPadding},${labelTranslateY})`)\n    .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n  const labelMaxWidth = getLabelMaxWidth(d, config, labelOrientation, layerSpacing, sankeyMaxLayer, bleed)\n  const labelWrapTrimWidth = isSublabelInline\n    ? labelMaxWidth * (1 - (sublabelText ? config.subLabelToLabelInlineWidthRatio : 0))\n    : labelMaxWidth\n  if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(labelTextSelection, labelWrapTrimWidth, separator)\n  else wasTrimmed = trimSVGText(labelTextSelection, labelWrapTrimWidth, config.labelTrimMode, fastEstimatesMode, labelFontSize, fontWidthToHeightRatio)\n\n  const labelSize = estimateTextSize(labelTextSelection, labelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n  // Render the sub-label, wrap / trim it and estimate its size\n  const sublabelTranslateX = labelOrientationMult * (labelPadding + (isSublabelInline ? labelMaxWidth : 0))\n  const sublabelMarginTop = 0\n  const sublabelTranslateY = labelPadding + (isSublabelInline\n    ? (labelsFontSizeDifference > 0 ? 0.6 * labelsFontSizeDifference : 0)\n    : labelSize.height + sublabelMarginTop)\n  sublabelTextSelection\n    .text(sublabelText)\n    .attr('font-size', subLabelFontSize)\n    .style('text-decoration', getString(d, config.subLabelTextDecoration))\n    .style('fill', getColor(d, config.subLabelColor))\n    .attr('transform', `translate(${sublabelTranslateX},${sublabelTranslateY})`)\n    .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n  const sublabelMaxWidth = isSublabelInline ? labelMaxWidth * config.subLabelToLabelInlineWidthRatio : labelMaxWidth\n  if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(sublabelTextSelection, sublabelMaxWidth, separator)\n  else wasTrimmed = trimSVGText(sublabelTextSelection, sublabelMaxWidth, config.labelTrimMode, fastEstimatesMode, subLabelFontSize, fontWidthToHeightRatio) || wasTrimmed\n\n  labelGroup.classed(s.labelTrimmed, wasTrimmed)\n  const sublabelSize = estimateTextSize(sublabelTextSelection, subLabelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n  // Draw the background if needed\n  const labelGroupHeight = (isSublabelInline ? Math.max(labelSize.height, sublabelSize.height) : (labelSize.height + sublabelSize.height)) + 2 * labelPadding\n  const labelBackground = labelGroup.select(`.${s.labelBackground}`)\n\n  labelBackground\n    .attr('d', () => {\n      if (!labelShowBackground) return null\n      const requiredLabelWidth = estimateRequiredLabelWidth(d, config, labelFontSize, subLabelFontSize)\n      return getLabelBackground(Math.min(labelMaxWidth, requiredLabelWidth) + 2 * labelPadding, labelGroupHeight, labelOrientation as (Position.Left | Position.Right))\n    })\n\n  // Position the label\n  const labelTextAnchor = getLabelTextAnchor(d, config, width)\n  const sublabelTextAnchor = getSubLabelTextAnchor(d, config, width)\n  const xTranslate = getLabelGroupXTranslate(d, config, width)\n  const yTranslate = getLabelGroupYTranslate(d, labelGroupHeight, config)\n\n  labelTextSelection.attr('text-anchor', labelTextAnchor)\n  sublabelTextSelection.attr('text-anchor', sublabelTextAnchor)\n\n  labelGroup.attr('transform', `translate(${xTranslate},${yTranslate})`)\n\n  return {\n    x: d.x0 + xTranslate,\n    y: d.y0 + yTranslate,\n    width: labelMaxWidth,\n    height: labelGroupHeight,\n    layer: d.layer,\n    selection: labelGroup,\n  }\n}\n"],"names":["s.variables","s.label","s.sublabel","s.labelTrimmed","labelBackground","s.labelBackground"],"mappings":"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"}
+{"version":3,"file":"label.js","sources":["../../../../src/components/sankey/modules/label.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Utils\nimport { estimateStringPixelLength, estimateTextSize, trimSVGText, wrapSVGText } from 'utils/text'\nimport { clamp, getString, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\nimport { cssvar } from 'utils/style'\n\n// Types\nimport { GenericAccessor } from 'types/accessor'\nimport { FitMode, VerticalAlign } from 'types/text'\nimport { Position } from 'types/position'\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { SankeyInputLink, SankeyInputNode, SankeyNode, SankeySubLabelPlacement } from '../types'\n\n// Config\nimport { SankeyConfigInterface } from '../config'\n\n// Styles\nimport * as s from '../style'\n\nexport const SANKEY_LABEL_SPACING = 10\nexport const SANKEY_LABEL_BLOCK_PADDING = 6.5\n\nexport function getLabelFontSize<N extends SankeyInputNode, L extends SankeyInputLink> (\n  config: SankeyConfigInterface<N, L>,\n  context: SVGElement\n): number {\n  return config.labelFontSize ?? getCSSVariableValueInPixels(cssvar(s.variables.sankeyNodeLabelFontSize), context)\n}\n\nexport function getSubLabelFontSize<N extends SankeyInputNode, L extends SankeyInputLink> (\n  config: SankeyConfigInterface<N, L>,\n  context: SVGElement\n): number {\n  return config.subLabelFontSize ?? getCSSVariableValueInPixels(cssvar(s.variables.sankeyNodeSublabelFontSize), context)\n}\n\nexport function estimateRequiredLabelWidth<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  labelFontSize: number,\n  subLabelFontSize: number\n): number {\n  const labelAddWidth = 2 // Adding a few pixels for the label background to look more aligned\n  const inlineLabelAddWidth = 8 // Without this, the label anf sub-label will look too close to each other\n  const tolerance = 1.1\n  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n  const labelText = `${getString(d, config.label) ?? ''}` // Stringify because theoretically it can be a number\n  const sublabelText = `${getString(d, config.subLabel) ?? ''}` // Stringify because theoretically it can be a number\n  const labelTextWidth = tolerance * estimateStringPixelLength(labelText, labelFontSize)\n  const sublabelTextWidth = tolerance * estimateStringPixelLength(sublabelText, subLabelFontSize)\n  return isSublabelInline ? inlineLabelAddWidth + (labelTextWidth + sublabelTextWidth) : labelAddWidth + Math.max(labelTextWidth, sublabelTextWidth)\n}\n\nfunction getLabelBackground (\n  width: number,\n  height: number,\n  orientation: Position.Left | Position.Right,\n  arrowWidth = 5,\n  arrowHeight = 8\n): string {\n  const halfHeight = height / 2\n  const halfArrowHeight = arrowHeight / 2\n\n  if (orientation === Position.Left) {\n    const rightArrowPos = `L 0 ${halfHeight - halfArrowHeight}   L   ${+arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n    return `\n      M 0 0\n      ${rightArrowPos}\n      L 0  ${height}\n      L ${-width} ${height}\n      L ${-width} 0\n      L 0 0 `\n  } else {\n    const leftArrowPos = `L 0 ${halfHeight - halfArrowHeight}   L   ${-arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n    return `\n      M 0 0\n      ${leftArrowPos}\n      L 0  ${height}\n      L ${width} ${height}\n      L ${width} 0\n      L 0 0 `\n  }\n}\n\nexport function getLabelOrientation<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  sankeyWidth: number,\n  labelPosition: GenericAccessor<Position.Auto | Position.Left | Position.Right | string, SankeyNode<N, L>>\n): (Position.Left | Position.Right) {\n  let orientation = getValue(d, labelPosition)\n  if (orientation === Position.Auto || !orientation) {\n    orientation = d.x1 < sankeyWidth / 2 ? Position.Left : Position.Right\n  }\n\n  return orientation as (Position.Left | Position.Right)\n}\n\nexport function getLabelGroupXTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number\n): number {\n  const orientation = getLabelOrientation(d, width, config.labelPosition)\n  switch (orientation) {\n    case Position.Right: return config.nodeWidth + SANKEY_LABEL_SPACING\n    case Position.Left:\n    default:\n      return -SANKEY_LABEL_SPACING\n  }\n}\n\nexport function getLabelGroupYTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  labelGroupHeight: number,\n  config: SankeyConfigInterface<N, L>\n): number {\n  const nodeHeight = d.y1 - d.y0\n  if (config.labelBackground && (nodeHeight < labelGroupHeight)) return (nodeHeight - labelGroupHeight) / 2\n\n  switch (config.labelVerticalAlign) {\n    case VerticalAlign.Bottom: return nodeHeight - labelGroupHeight\n    case VerticalAlign.Middle: return nodeHeight / 2 - labelGroupHeight / 2\n    case VerticalAlign.Top:\n    default: return 0\n  }\n}\n\nexport function getLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number\n): string {\n  const orientation = getLabelOrientation(d, width, config.labelPosition)\n  switch (orientation) {\n    case Position.Right: return 'start'\n    case Position.Left:\n    default:\n      return 'end'\n  }\n}\n\nexport function getSubLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number\n): string {\n  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n  const orientation = getLabelOrientation(d, width, config.labelPosition)\n  switch (orientation) {\n    case Position.Right: return isSublabelInline ? 'end' : 'start'\n    case Position.Left:\n    default:\n      return isSublabelInline ? 'start' : 'end'\n  }\n}\n\nexport function getLabelMaxWidth<N extends SankeyInputNode, L extends SankeyInputLink> (\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  labelOrientation: Position.Left | Position.Right,\n  layerSpacing: number,\n  sankeyMaxLayer: number,\n  bleed: Spacing\n): number {\n  const labelHorizontalPadding = 2 * SANKEY_LABEL_SPACING + 2 * SANKEY_LABEL_BLOCK_PADDING\n\n  // Single-layer layouts (e.g. linkless nodes) are rendered centered rather than pinned to a\n  // container edge, so the label doesn't spill into the bleed margin — it has roughly half of the\n  // free horizontal space on its side.\n  if (sankeyMaxLayer === 0) {\n    return clamp(layerSpacing / 2 - labelHorizontalPadding, 0, config.labelMaxWidth ?? Infinity)\n  }\n\n  if (d.layer === 0 && labelOrientation === Position.Left) {\n    return bleed.left - labelHorizontalPadding\n  }\n\n  if (d.layer === sankeyMaxLayer && labelOrientation === Position.Right) {\n    return bleed.right - labelHorizontalPadding\n  }\n\n  return clamp(layerSpacing - labelHorizontalPadding, 0, config.labelMaxWidth ?? Infinity)\n}\n\nexport function renderLabel<N extends SankeyInputNode, L extends SankeyInputLink> (\n  labelGroup: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any>,\n  d: SankeyNode<N, L>,\n  config: SankeyConfigInterface<N, L>,\n  width: number,\n  duration: number,\n  layerSpacing: number | undefined,\n  sankeyMaxLayer: number,\n  bleed: Spacing,\n  forceExpand = false\n): { x: number; y: number; width: number; height: number; layer: number; selection: any; hidden?: boolean } {\n  const labelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.label}`)\n  const labelShowBackground = config.labelBackground || forceExpand\n  const sublabelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.sublabel}`)\n  const labelPadding = labelShowBackground ? SANKEY_LABEL_BLOCK_PADDING : 0\n  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n  const separator = config.labelForceWordBreak ? '' : config.labelTextSeparator\n  const fastEstimatesMode = true // Fast but inaccurate\n  const fontWidthToHeightRatio = 0.52\n  const dy = 0.32\n  const labelOrientation = getLabelOrientation(d, width, config.labelPosition)\n  const labelOrientationMult = labelOrientation === Position.Left ? -1 : 1\n  const labelText = getString(d, config.label)\n  const sublabelText = getString(d, config.subLabel)\n  let wasTrimmed = false\n\n  const labelFontSize = getLabelFontSize(config, labelGroup.node())\n  const subLabelFontSize = getSubLabelFontSize(config, labelGroup.node())\n\n  // Render the main label, wrap / trim it and estimate its size\n  const labelsFontSizeDifference = sublabelText ? labelFontSize - subLabelFontSize : 0\n  const labelTranslateY = labelPadding + ((isSublabelInline && labelsFontSizeDifference < 0) ? -0.6 * labelsFontSizeDifference : 0)\n  labelTextSelection\n    .text(labelText)\n    .attr('font-size', labelFontSize)\n    .style('text-decoration', getString(d, config.labelTextDecoration))\n    .style('fill', getColor(d, config.labelColor))\n    .attr('transform', `translate(${labelOrientationMult * labelPadding},${labelTranslateY})`)\n    .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n  const labelMaxWidth = getLabelMaxWidth(d, config, labelOrientation, layerSpacing, sankeyMaxLayer, bleed)\n  const labelWrapTrimWidth = isSublabelInline\n    ? labelMaxWidth * (1 - (sublabelText ? config.subLabelToLabelInlineWidthRatio : 0))\n    : labelMaxWidth\n  if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(labelTextSelection, labelWrapTrimWidth, separator)\n  else wasTrimmed = trimSVGText(labelTextSelection, labelWrapTrimWidth, config.labelTrimMode, fastEstimatesMode, labelFontSize, fontWidthToHeightRatio)\n\n  const labelSize = estimateTextSize(labelTextSelection, labelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n  // Render the sub-label, wrap / trim it and estimate its size\n  const sublabelTranslateX = labelOrientationMult * (labelPadding + (isSublabelInline ? labelMaxWidth : 0))\n  const sublabelMarginTop = 0\n  const sublabelTranslateY = labelPadding + (isSublabelInline\n    ? (labelsFontSizeDifference > 0 ? 0.6 * labelsFontSizeDifference : 0)\n    : labelSize.height + sublabelMarginTop)\n  sublabelTextSelection\n    .text(sublabelText)\n    .attr('font-size', subLabelFontSize)\n    .style('text-decoration', getString(d, config.subLabelTextDecoration))\n    .style('fill', getColor(d, config.subLabelColor))\n    .attr('transform', `translate(${sublabelTranslateX},${sublabelTranslateY})`)\n    .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n  const sublabelMaxWidth = isSublabelInline ? labelMaxWidth * config.subLabelToLabelInlineWidthRatio : labelMaxWidth\n  if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(sublabelTextSelection, sublabelMaxWidth, separator)\n  else wasTrimmed = trimSVGText(sublabelTextSelection, sublabelMaxWidth, config.labelTrimMode, fastEstimatesMode, subLabelFontSize, fontWidthToHeightRatio) || wasTrimmed\n\n  labelGroup.classed(s.labelTrimmed, wasTrimmed)\n  const sublabelSize = estimateTextSize(sublabelTextSelection, subLabelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n  // Draw the background if needed\n  const labelGroupHeight = (isSublabelInline ? Math.max(labelSize.height, sublabelSize.height) : (labelSize.height + sublabelSize.height)) + 2 * labelPadding\n  const labelBackground = labelGroup.select(`.${s.labelBackground}`)\n\n  labelBackground\n    .attr('d', () => {\n      if (!labelShowBackground) return null\n      const requiredLabelWidth = estimateRequiredLabelWidth(d, config, labelFontSize, subLabelFontSize)\n      return getLabelBackground(Math.min(labelMaxWidth, requiredLabelWidth) + 2 * labelPadding, labelGroupHeight, labelOrientation as (Position.Left | Position.Right))\n    })\n\n  // Position the label\n  const labelTextAnchor = getLabelTextAnchor(d, config, width)\n  const sublabelTextAnchor = getSubLabelTextAnchor(d, config, width)\n  const xTranslate = getLabelGroupXTranslate(d, config, width)\n  const yTranslate = getLabelGroupYTranslate(d, labelGroupHeight, config)\n\n  labelTextSelection.attr('text-anchor', labelTextAnchor)\n  sublabelTextSelection.attr('text-anchor', sublabelTextAnchor)\n\n  labelGroup.attr('transform', `translate(${xTranslate},${yTranslate})`)\n\n  return {\n    x: d.x0 + xTranslate,\n    y: d.y0 + yTranslate,\n    width: labelMaxWidth,\n    height: labelGroupHeight,\n    layer: d.layer,\n    selection: labelGroup,\n  }\n}\n"],"names":["s.variables","s.label","s.sublabel","s.labelTrimmed","labelBackground","s.labelBackground"],"mappings":"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"}

package/components/stacked-bar/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: stacked-bar-component;

package/components/stacked-bar/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/stacked-bar/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/style'\n\nexport const root = css`\n  label: stacked-bar-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-stacked-bar-cursor: default;\n    --vis-stacked-bar-fill-color: var(--vis-color-main);\n    --vis-stacked-bar-stroke-color: none;\n    --vis-stacked-bar-stroke-width: 0px;\n    --vis-stacked-bar-hover-stroke-width: none;\n    --vis-stacked-bar-hover-stroke-color: none;\n\n    /* Dark Theme */\n    --vis-dark-stacked-bar-stroke-color: none;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-stacked-bar-stroke-color: var(--vis-dark-stacked-bar-stroke-color);\n  }\n`\n\nexport const bar = css`\n  label: bar;\n  fill: var(--vis-stacked-bar-fill-color);\n  stroke: var(--vis-stacked-bar-stroke-color);\n  stroke-width: var(--vis-stacked-bar-stroke-width);\n  cursor: var(--vis-stacked-bar-cursor);\n\n  &:hover {\n    stroke-width: var(--vis-stacked-bar-hover-stroke-width);\n    stroke: var(--vis-stacked-bar-hover-stroke-color);\n  }\n`\n\nexport const barGroup = css`\n  label: barGroup;\n`\n\nexport const barGroupExit = css`\n  label: barGroupExit;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;IAapC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;EAGtC;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWrB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/stacked-bar/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const root = css`\n  label: stacked-bar-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-stacked-bar-cursor: default;\n    --vis-stacked-bar-fill-color: var(--vis-color-main);\n    --vis-stacked-bar-stroke-color: none;\n    --vis-stacked-bar-stroke-width: 0px;\n    --vis-stacked-bar-hover-stroke-width: none;\n    --vis-stacked-bar-hover-stroke-color: none;\n\n    /* Dark Theme */\n    --vis-dark-stacked-bar-stroke-color: none;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-stacked-bar-stroke-color: var(--vis-dark-stacked-bar-stroke-color);\n  }\n`\n\nexport const bar = css`\n  label: bar;\n  fill: var(--vis-stacked-bar-fill-color);\n  stroke: var(--vis-stacked-bar-stroke-color);\n  stroke-width: var(--vis-stacked-bar-stroke-width);\n  cursor: var(--vis-stacked-bar-cursor);\n\n  &:hover {\n    stroke-width: var(--vis-stacked-bar-hover-stroke-width);\n    stroke: var(--vis-stacked-bar-hover-stroke-color);\n  }\n`\n\nexport const barGroup = css`\n  label: barGroup;\n`\n\nexport const barGroupExit = css`\n  label: barGroupExit;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;IAapC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;EAGtC;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWrB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/tooltip/style.js

@@ -1,5 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: tooltip;

package/components/tooltip/style.js.map

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

package/components/vis-controls/style.js

@@ -1,6 +1,6 @@
 import { css, injectGlobal } from '@emotion/css';
 import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
-import { darkThemeCssSelectors } from '../../utils/style.js';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: vis-controls-component;

package/components/vis-controls/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/vis-controls/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\nimport { darkThemeCssSelectors } from 'utils/style'\n\nexport const root = css`\n  label: vis-controls-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-controls-buttons-border-color: rgba(108, 119, 140, 0.15);\n    --vis-controls-buttons-background-color: rgba(255, 255, 255, 1);\n    --vis-controls-button-color: #6c778c;\n    --vis-controls-button-icon-font: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n\n    --vis-dark-controls-buttons-border-color:  #6c778c;\n    --vis-dark-controls-buttons-background-color: var(--vis-color-grey);\n    --vis-dark-controls-button-color: #fff;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-controls-buttons-border-color: var(--vis-dark-controls.buttons-border-color);\n    --vis-controls-buttons-background-color: var(--vis-dark-controls-buttons-background-color);\n    --vis-controls-button-color: var(--vis-dark-controls-button-color);\n  }\n`\n\nexport const items = css`\n  label: items;\n  background-color: var(--vis-controls-buttons-background-color);\n  border: 1px solid var(--vis-controls-buttons-border-color);\n  border-radius: 4px;\n  opacity: 1;\n  transition: all 300ms;\n`\n\nexport const horizontalItems = css`\n  label: horizontal;\n  display: inline-flex;\n`\n\nexport const item = css`\n  label: item;\n`\n\nexport const itemButton = css`\n  label: item-button;\n  font-family: var(--vis-controls-button-icon-font);\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  width: 30px;\n  height: 30px;\n  line-height: 28px;\n  border: none;\n  border-radius: inherit;\n  box-sizing: border-box;\n  color: var(--vis-controls-button-color);\n  background-color: inherit;\n`\n\nexport const borderLeft = css`\n  border-left: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderTop = css`\n  border-top: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderRight = css`\n  border-right: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderBottom = css`\n  border-bottom: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const disabled = css`\n  label: disabled;\n  opacity: 0.4;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;;AAIO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;uCAKE,+BAA+B,CAAA;;;;;;;IAOlE,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;EAe5B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/vis-controls/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const root = css`\n  label: vis-controls-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-controls-buttons-border-color: rgba(108, 119, 140, 0.15);\n    --vis-controls-buttons-background-color: rgba(255, 255, 255, 1);\n    --vis-controls-button-color: #6c778c;\n    --vis-controls-button-icon-font: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n\n    --vis-dark-controls-buttons-border-color:  #6c778c;\n    --vis-dark-controls-buttons-background-color: var(--vis-color-grey);\n    --vis-dark-controls-button-color: #fff;\n  }\n\n  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-controls-buttons-border-color: var(--vis-dark-controls.buttons-border-color);\n    --vis-controls-buttons-background-color: var(--vis-dark-controls-buttons-background-color);\n    --vis-controls-button-color: var(--vis-dark-controls-button-color);\n  }\n`\n\nexport const items = css`\n  label: items;\n  background-color: var(--vis-controls-buttons-background-color);\n  border: 1px solid var(--vis-controls-buttons-border-color);\n  border-radius: 4px;\n  opacity: 1;\n  transition: all 300ms;\n`\n\nexport const horizontalItems = css`\n  label: horizontal;\n  display: inline-flex;\n`\n\nexport const item = css`\n  label: item;\n`\n\nexport const itemButton = css`\n  label: item-button;\n  font-family: var(--vis-controls-button-icon-font);\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  width: 30px;\n  height: 30px;\n  line-height: 28px;\n  border: none;\n  border-radius: inherit;\n  box-sizing: border-box;\n  color: var(--vis-controls-button-color);\n  background-color: inherit;\n`\n\nexport const borderLeft = css`\n  border-left: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderTop = css`\n  border-top: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderRight = css`\n  border-right: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderBottom = css`\n  border-bottom: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const disabled = css`\n  label: disabled;\n  opacity: 0.4;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;;AAIO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;uCAKE,+BAA+B,CAAA;;;;;;;IAOlE,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;EAe5B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

package/index.js

@@ -75,6 +75,7 @@ export { getCSSVariableValue, getCSSVariableValueInPixels, getHref, getPixelValu
 export { DefaultRange } from './utils/scale.js';
 export { smartTransition } from './utils/d3.js';
 export { getDataLatLngBounds } from './utils/map.js';
-export { cssvar, darkThemeCssSelectors, getCssVarNames, injectGlobalCssVariables, isDarkThemeEnabled } from './utils/style.js';
+export { cssvar, getCssVarNames, injectGlobalCssVariables, isDarkThemeEnabled } from './utils/style.js';
+export { darkThemeCssSelectors } from './utils/theme.js';
 export { getHTMLTransform } from './utils/html.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/ts",
   "description": "Modular data visualization framework for React, Angular, Svelte, Vue, Solid, and vanilla TypeScript or JavaScript",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "packageManager": "pnpm@10.23.0",
   "repository": {
     "type": "git",

package/styles/index.js

@@ -1,6 +1,6 @@
 import { injectGlobal } from '@emotion/css';
 import { getCSSVariableValue } from '../utils/misc.js';
-import { darkThemeCssSelectors } from '../utils/style.js';
+import { darkThemeCssSelectors } from '../utils/theme.js';
 import { getCSSColorVariable, getLighterColor, colors, getDarkerColor, colorsDark } from './colors.js';
 import { fills, getPatternVariable, lines } from './patterns.js';
 

package/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/styles/index.ts"],"sourcesContent":["import { injectGlobal } from '@emotion/css'\nimport { getCSSVariableValue } from 'utils/misc'\nimport { darkThemeCssSelectors } from 'utils/style'\nimport { UnovisText } from 'types/text'\nimport { colors, colorsDark, getCSSColorVariable, getLighterColor, getDarkerColor } from './colors'\nimport { fills, lines, getPatternVariable } from './patterns'\n\nexport const UNOVIS_ICON_FONT_FAMILY_DEFAULT = globalThis?.UNOVIS_ICON_FONT_FAMILY || 'FontAwesome'\nexport const UNOVIS_FONT_WH_RATIO_DEFAULT: number = globalThis?.UNOVIS_FONT_W2H_RATIO_DEFAULT || 0.5\nexport const UNOVIS_TEXT_SEPARATOR_DEFAULT: string[] = globalThis?.UNOVIS_TEXT_SEPARATOR_DEFAULT || [' ', '-', '.', ',']\nexport const UNOVIS_TEXT_HYPHEN_CHARACTER_DEFAULT: string = globalThis?.UNOVIS_TEXT_HYPHEN_CHARACTER_DEFAULT || '-'\nexport const UNOVIS_TEXT_DEFAULT: UnovisText = globalThis?.UNOVIS_TEXT_DEFAULT || {\n  // If you change these defaults, don't forget to update the values in the `UnovisText` type in `types/text.ts`\n  text: '',\n  fontSize: 12,\n  fontFamily: 'var(--vis-font-family)',\n  lineHeight: 1.25,\n  marginTop: 0,\n  marginBottom: 0,\n}\n\nexport const variables = injectGlobal`\n  :root {\n    label: vis-root-styles;\n    --vis-font-family: Inter, Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n    --vis-font-wh-ratio: ${UNOVIS_FONT_WH_RATIO_DEFAULT};\n    --vis-color-main: var(${getCSSColorVariable(0)});\n    --vis-color-main-light: ${getLighterColor(colors[0])};\n    --vis-color-main-dark: ${getDarkerColor(colors[0])};\n    --vis-color-grey: #2a2a2a;\n    ${colors.map((c, i) => `${getCSSColorVariable(i)}: ${c};`)}\n    ${colorsDark.map((c, i) => `--vis-dark-color${i}: ${c};`)}\n    ${fills.map((p, i) => `\n      --${getPatternVariable(p)}: url(#${getPatternVariable(p)});\n      --vis-pattern-fill${i}: var(--${getPatternVariable(p)});\n    `)}\n    ${lines.map((p, i) => `\n      --${getPatternVariable(p)}: url(#${getPatternVariable(p)});\n      --vis-pattern-marker${i}: var(--${getPatternVariable(p)});\n      --vis-pattern-dasharray${i}: ${p.dashArray?.join(' ')};\n    `)}\n\n    ${darkThemeCssSelectors} {\n      ${colors.map((c, i) => `${getCSSColorVariable(i)}: var(--vis-dark-color${i});`)}\n    }\n\n    body.theme-patterns {\n      ${fills.map((_, i) => `path[style*=\"fill: var(${getCSSColorVariable(i)})\"]  {\n        mask: var(--vis-pattern-fill${i});\n      }`)}\n      ${lines.map((_, i) => `\n      path[stroke=\"var(${getCSSColorVariable(i)})\"]:not([style*=\"fill\"]),\n      path[style*=\"stroke: var(${getCSSColorVariable(i)})\"]:not([style*=\"fill\"]) {\n        marker: var(--vis-pattern-marker${i});\n        stroke-dasharray: var(--vis-pattern-dasharray${i});\n      }\n    `)}\n}\n`\n\nexport function getFontWidthToHeightRatio (context: HTMLElement | SVGGElement | undefined = window?.document.body): number {\n  return context ? +getCSSVariableValue('var(--vis-font-wh-ratio)', context) : UNOVIS_FONT_WH_RATIO_DEFAULT\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/styles/index.ts"],"sourcesContent":["import { injectGlobal } from '@emotion/css'\nimport { getCSSVariableValue } from 'utils/misc'\nimport { darkThemeCssSelectors } from 'utils/theme'\nimport { UnovisText } from 'types/text'\nimport { colors, colorsDark, getCSSColorVariable, getLighterColor, getDarkerColor } from './colors'\nimport { fills, lines, getPatternVariable } from './patterns'\n\nexport const UNOVIS_ICON_FONT_FAMILY_DEFAULT = globalThis?.UNOVIS_ICON_FONT_FAMILY || 'FontAwesome'\nexport const UNOVIS_FONT_WH_RATIO_DEFAULT: number = globalThis?.UNOVIS_FONT_W2H_RATIO_DEFAULT || 0.5\nexport const UNOVIS_TEXT_SEPARATOR_DEFAULT: string[] = globalThis?.UNOVIS_TEXT_SEPARATOR_DEFAULT || [' ', '-', '.', ',']\nexport const UNOVIS_TEXT_HYPHEN_CHARACTER_DEFAULT: string = globalThis?.UNOVIS_TEXT_HYPHEN_CHARACTER_DEFAULT || '-'\nexport const UNOVIS_TEXT_DEFAULT: UnovisText = globalThis?.UNOVIS_TEXT_DEFAULT || {\n  // If you change these defaults, don't forget to update the values in the `UnovisText` type in `types/text.ts`\n  text: '',\n  fontSize: 12,\n  fontFamily: 'var(--vis-font-family)',\n  lineHeight: 1.25,\n  marginTop: 0,\n  marginBottom: 0,\n}\n\nexport const variables = injectGlobal`\n  :root {\n    label: vis-root-styles;\n    --vis-font-family: Inter, Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n    --vis-font-wh-ratio: ${UNOVIS_FONT_WH_RATIO_DEFAULT};\n    --vis-color-main: var(${getCSSColorVariable(0)});\n    --vis-color-main-light: ${getLighterColor(colors[0])};\n    --vis-color-main-dark: ${getDarkerColor(colors[0])};\n    --vis-color-grey: #2a2a2a;\n    ${colors.map((c, i) => `${getCSSColorVariable(i)}: ${c};`)}\n    ${colorsDark.map((c, i) => `--vis-dark-color${i}: ${c};`)}\n    ${fills.map((p, i) => `\n      --${getPatternVariable(p)}: url(#${getPatternVariable(p)});\n      --vis-pattern-fill${i}: var(--${getPatternVariable(p)});\n    `)}\n    ${lines.map((p, i) => `\n      --${getPatternVariable(p)}: url(#${getPatternVariable(p)});\n      --vis-pattern-marker${i}: var(--${getPatternVariable(p)});\n      --vis-pattern-dasharray${i}: ${p.dashArray?.join(' ')};\n    `)}\n\n    ${darkThemeCssSelectors} {\n      ${colors.map((c, i) => `${getCSSColorVariable(i)}: var(--vis-dark-color${i});`)}\n    }\n\n    body.theme-patterns {\n      ${fills.map((_, i) => `path[style*=\"fill: var(${getCSSColorVariable(i)})\"]  {\n        mask: var(--vis-pattern-fill${i});\n      }`)}\n      ${lines.map((_, i) => `\n      path[stroke=\"var(${getCSSColorVariable(i)})\"]:not([style*=\"fill\"]),\n      path[style*=\"stroke: var(${getCSSColorVariable(i)})\"]:not([style*=\"fill\"]) {\n        marker: var(--vis-pattern-marker${i});\n        stroke-dasharray: var(--vis-pattern-dasharray${i});\n      }\n    `)}\n}\n`\n\nexport function getFontWidthToHeightRatio (context: HTMLElement | SVGGElement | undefined = window?.document.body): number {\n  return context ? +getCSSVariableValue('var(--vis-font-wh-ratio)', context) : UNOVIS_FONT_WH_RATIO_DEFAULT\n}\n"],"names":[],"mappings":"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"}

package/utils/index.d.ts

@@ -9,4 +9,5 @@ export * from './scale';
 export * from './d3';
 export * from './map';
 export * from './style';
+export * from './theme';
 export * from './html';

package/utils/index.js

@@ -8,6 +8,7 @@ import './type.js';
 export { DefaultRange } from './scale.js';
 export { smartTransition } from './d3.js';
 export { getDataLatLngBounds } from './map.js';
-export { cssvar, darkThemeCssSelectors, getCssVarNames, injectGlobalCssVariables, isDarkThemeEnabled } from './style.js';
+export { cssvar, getCssVarNames, injectGlobalCssVariables, isDarkThemeEnabled } from './style.js';
+export { darkThemeCssSelectors } from './theme.js';
 export { getHTMLTransform } from './html.js';
 //# sourceMappingURL=index.js.map

package/utils/index.js.map

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

package/utils/style.d.ts

@@ -1,5 +1,4 @@
 import type { KebabToCamelCase, RemovePrefix } from "./type";
-export declare const darkThemeCssSelectors = "html[data-theme=\"dark\"],html.dark-theme,body.dark-theme,html.theme-dark,body.theme-dark";
 export declare const isDarkThemeEnabled: (...targetElements: HTMLElement[]) => boolean;
 export declare function getCssVarNames<T extends Record<string, unknown>, Prefix extends string = '--vis-'>(cssVarsObject: T, prefix?: Prefix): {
     [Property in Extract<keyof T, string> as KebabToCamelCase<RemovePrefix<Property, Prefix>>]: Property;

package/utils/style.js

@@ -1,7 +1,7 @@
 import { injectGlobal } from '@emotion/css';
 import { kebabCaseToCamel } from './text.js';
+import { darkThemeCssSelectors } from './theme.js';
 
-const darkThemeCssSelectors = 'html[data-theme="dark"],html.dark-theme,body.dark-theme,html.theme-dark,body.theme-dark';
 const isDarkThemeEnabled = (...targetElements) => {
     const elements = targetElements.length > 0 ? targetElements : [document.documentElement, document.body];
     return (elements.some(element => element.getAttribute('data-theme') === 'dark') ||
@@ -26,5 +26,5 @@ function cssvar(name) {
     return `var(${name})`;
 }
 
-export { cssvar, darkThemeCssSelectors, getCssVarNames, injectGlobalCssVariables, isDarkThemeEnabled };
+export { cssvar, getCssVarNames, injectGlobalCssVariables, isDarkThemeEnabled };
 //# sourceMappingURL=style.js.map

package/utils/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../src/utils/style.ts"],"sourcesContent":["import { injectGlobal } from '@emotion/css'\n\nimport { kebabCaseToCamel } from 'utils/text'\nimport type { KebabToCamelCase, RemovePrefix } from 'utils/type'\n\nexport const darkThemeCssSelectors =\n  'html[data-theme=\"dark\"],html.dark-theme,body.dark-theme,html.theme-dark,body.theme-dark'\n\nexport const isDarkThemeEnabled = (...targetElements: HTMLElement[]): boolean => {\n  const elements = targetElements.length > 0 ? targetElements : [document.documentElement, document.body]\n\n  return (\n    elements.some(element => element.getAttribute('data-theme') === 'dark') ||\n    ['dark-theme', 'theme-dark'].some(\n      (className) => elements.some(element =>\n        element.classList.contains(className)\n      )\n    )\n  )\n}\n\nexport function getCssVarNames<\n  T extends Record<string, unknown>,\n  Prefix extends string = '--vis-',\n> (cssVarsObject: T, prefix?: Prefix): {\n  [Property in Extract<keyof T, string> as KebabToCamelCase<RemovePrefix<Property, Prefix>>]: Property\n} {\n  const defaultPrefix = '--vis-'\n  const entries = Object.entries(cssVarsObject)\n  return Object.fromEntries(\n    entries.map(([key]) => [kebabCaseToCamel(key.replace(prefix ?? defaultPrefix, '')), key])\n  ) as {\n    [Property in Extract<keyof T, string> as KebabToCamelCase<RemovePrefix<Property, Prefix>>]: Property\n  }\n}\n\nexport function injectGlobalCssVariables<T extends Record<string, string | number | undefined>> (\n  cssVarsObject: T,\n  componentRootClassName: string\n): void {\n  injectGlobal({\n    ':root': cssVarsObject,\n    [`${darkThemeCssSelectors} .${componentRootClassName}`]: Object.keys(cssVarsObject)\n      .filter(key => key.includes('--vis-dark'))\n      .map(key => ({\n        [key.replace('--vis-dark', '--vis')]: `var(${key})`,\n      })),\n  })\n}\n\nexport function cssvar<T extends string> (name: T): `var(${T})` {\n  return `var(${name})` as `var(${T})`\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,qBAAqB,GAChC,0FAAyF;MAE9E,kBAAkB,GAAG,CAAC,GAAG,cAA6B,KAAa;IAC9E,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,cAAc,GAAG,CAAC,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;AAEvG,IAAA,QACE,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;AACvE,QAAA,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,IAAI,CAC/B,CAAC,SAAS,KAAK,QAAQ,CAAC,IAAI,CAAC,OAAO,IAClC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CACtC,CACF,EACF;AACH,EAAC;AAEe,SAAA,cAAc,CAG3B,aAAgB,EAAE,MAAe,EAAA;IAGlC,MAAM,aAAa,GAAG,QAAQ,CAAA;IAC9B,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;AAC7C,IAAA,OAAO,MAAM,CAAC,WAAW,CACvB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,KAAA,CAAA,GAAN,MAAM,GAAI,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAG1F,CAAA;AACH,CAAC;AAEe,SAAA,wBAAwB,CACtC,aAAgB,EAChB,sBAA8B,EAAA;AAE9B,IAAA,YAAY,CAAC;AACX,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,CAAC,CAAG,EAAA,qBAAqB,CAAK,EAAA,EAAA,sBAAsB,CAAE,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;aAChF,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;AACzC,aAAA,GAAG,CAAC,GAAG,KAAK;AACX,YAAA,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,CAAO,IAAA,EAAA,GAAG,CAAG,CAAA,CAAA;AACpD,SAAA,CAAC,CAAC;AACN,KAAA,CAAC,CAAA;AACJ,CAAC;AAEK,SAAU,MAAM,CAAoB,IAAO,EAAA;IAC/C,OAAO,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,CAAkB,CAAA;AACtC;;;;"}
+{"version":3,"file":"style.js","sources":["../../src/utils/style.ts"],"sourcesContent":["import { injectGlobal } from '@emotion/css'\n\nimport { kebabCaseToCamel } from 'utils/text'\nimport type { KebabToCamelCase, RemovePrefix } from 'utils/type'\nimport { darkThemeCssSelectors } from 'utils/theme'\n\nexport const isDarkThemeEnabled = (...targetElements: HTMLElement[]): boolean => {\n  const elements = targetElements.length > 0 ? targetElements : [document.documentElement, document.body]\n\n  return (\n    elements.some(element => element.getAttribute('data-theme') === 'dark') ||\n    ['dark-theme', 'theme-dark'].some(\n      (className) => elements.some(element =>\n        element.classList.contains(className)\n      )\n    )\n  )\n}\n\nexport function getCssVarNames<\n  T extends Record<string, unknown>,\n  Prefix extends string = '--vis-',\n> (cssVarsObject: T, prefix?: Prefix): {\n  [Property in Extract<keyof T, string> as KebabToCamelCase<RemovePrefix<Property, Prefix>>]: Property\n} {\n  const defaultPrefix = '--vis-'\n  const entries = Object.entries(cssVarsObject)\n  return Object.fromEntries(\n    entries.map(([key]) => [kebabCaseToCamel(key.replace(prefix ?? defaultPrefix, '')), key])\n  ) as {\n    [Property in Extract<keyof T, string> as KebabToCamelCase<RemovePrefix<Property, Prefix>>]: Property\n  }\n}\n\nexport function injectGlobalCssVariables<T extends Record<string, string | number | undefined>> (\n  cssVarsObject: T,\n  componentRootClassName: string\n): void {\n  injectGlobal({\n    ':root': cssVarsObject,\n    [`${darkThemeCssSelectors} .${componentRootClassName}`]: Object.keys(cssVarsObject)\n      .filter(key => key.includes('--vis-dark'))\n      .map(key => ({\n        [key.replace('--vis-dark', '--vis')]: `var(${key})`,\n      })),\n  })\n}\n\nexport function cssvar<T extends string> (name: T): `var(${T})` {\n  return `var(${name})` as `var(${T})`\n}\n"],"names":[],"mappings":";;;;MAMa,kBAAkB,GAAG,CAAC,GAAG,cAA6B,KAAa;IAC9E,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,cAAc,GAAG,CAAC,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;AAEvG,IAAA,QACE,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;AACvE,QAAA,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,IAAI,CAC/B,CAAC,SAAS,KAAK,QAAQ,CAAC,IAAI,CAAC,OAAO,IAClC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CACtC,CACF,EACF;AACH,EAAC;AAEe,SAAA,cAAc,CAG3B,aAAgB,EAAE,MAAe,EAAA;IAGlC,MAAM,aAAa,GAAG,QAAQ,CAAA;IAC9B,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;AAC7C,IAAA,OAAO,MAAM,CAAC,WAAW,CACvB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,KAAA,CAAA,GAAN,MAAM,GAAI,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAG1F,CAAA;AACH,CAAC;AAEe,SAAA,wBAAwB,CACtC,aAAgB,EAChB,sBAA8B,EAAA;AAE9B,IAAA,YAAY,CAAC;AACX,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,CAAC,CAAG,EAAA,qBAAqB,CAAK,EAAA,EAAA,sBAAsB,CAAE,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;aAChF,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;AACzC,aAAA,GAAG,CAAC,GAAG,KAAK;AACX,YAAA,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,CAAO,IAAA,EAAA,GAAG,CAAG,CAAA,CAAA;AACpD,SAAA,CAAC,CAAC;AACN,KAAA,CAAC,CAAA;AACJ,CAAC;AAEK,SAAU,MAAM,CAAoB,IAAO,EAAA;IAC/C,OAAO,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,CAAkB,CAAA;AACtC;;;;"}

package/utils/theme.d.ts

@@ -0,0 +1 @@
+export declare const darkThemeCssSelectors = "html[data-theme=\"dark\"],html.dark-theme,body.dark-theme,html.theme-dark,body.theme-dark";

package/utils/theme.js

@@ -0,0 +1,4 @@
+const darkThemeCssSelectors = 'html[data-theme="dark"],html.dark-theme,body.dark-theme,html.theme-dark,body.theme-dark';
+
+export { darkThemeCssSelectors };
+//# sourceMappingURL=theme.js.map

package/utils/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../src/utils/theme.ts"],"sourcesContent":["export const darkThemeCssSelectors =\n  'html[data-theme=\"dark\"],html.dark-theme,body.dark-theme,html.theme-dark,body.theme-dark'\n"],"names":[],"mappings":"AAAO,MAAM,qBAAqB,GAChC;;;;"}