@unovis/ts 1.6.8-stellar-beta.1 → 1.6.8-stellar-beta.3

package/components/annotations/style.js

@@ -1,4 +1,4 @@
-import { css } from '../../styles/emotion.js';
+import { css } from '@emotion/css';
 import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
 
 const cssVarDefaults = {

package/components/annotations/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from 'styles/emotion'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-annotations-text-color': '#282C34',\n\n  '--vis-annotations-connector-stroke-color': '#444',\n  '--vis-annotations-connector-stroke-width': '1px',\n  '--vis-annotations-connector-stroke-dasharray': 'none',\n\n  '--vis-annotations-subject-stroke-color': '#444',\n  '--vis-annotations-subject-fill-color': 'none',\n  '--vis-annotations-subject-stroke-dasharray': 'none',\n\n  '--vis-annotations-debug-bounding-box-stroke-color': '#f00',\n\n  '--vis-dark-annotations-text-color': '#e8e9ef',\n  '--vis-dark-annotations-connector-stroke-color': '#fff',\n  '--vis-dark-annotations-subject-stroke-color': '#fff',\n}\n\nexport const root = css`\n  label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n  label: annotation;\n`\n\nexport const annotationSubject = css`\n  label: annotationSubject;\n\n  line {\n    stroke: var(${variables.annotationsConnectorStrokeColor});\n    stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n  }\n\n  circle {\n    stroke: var(${variables.annotationsSubjectStrokeColor});\n    fill: var(${variables.annotationsSubjectFillColor});\n    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n  }\n`\n\nexport const annotationContent = css`\n  label: annotationContent;\n  > text {\n    fill: var(--vis-annotations-text-color);\n  }\n`\n\nexport const debugBoundingBox = css`\n  label: debugBoundingBox;\n  fill: none;\n  stroke: var(--vis-annotations-debug-bounding-box-stroke-color);\n  stroke-width: 1;\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,8BAA8B,EAAE,SAAS;AAEzC,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;AAEpD,IAAA,mDAAmD,EAAE,MAAM;AAE3D,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,+CAA+C,EAAE,MAAM;AACvD,IAAA,6CAA6C,EAAE,MAAM;CACtD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;EAKnC;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-annotations-text-color': '#282C34',\n\n  '--vis-annotations-connector-stroke-color': '#444',\n  '--vis-annotations-connector-stroke-width': '1px',\n  '--vis-annotations-connector-stroke-dasharray': 'none',\n\n  '--vis-annotations-subject-stroke-color': '#444',\n  '--vis-annotations-subject-fill-color': 'none',\n  '--vis-annotations-subject-stroke-dasharray': 'none',\n\n  '--vis-annotations-debug-bounding-box-stroke-color': '#f00',\n\n  '--vis-dark-annotations-text-color': '#e8e9ef',\n  '--vis-dark-annotations-connector-stroke-color': '#fff',\n  '--vis-dark-annotations-subject-stroke-color': '#fff',\n}\n\nexport const root = css`\n  label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n  label: annotation;\n`\n\nexport const annotationSubject = css`\n  label: annotationSubject;\n\n  line {\n    stroke: var(${variables.annotationsConnectorStrokeColor});\n    stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n  }\n\n  circle {\n    stroke: var(${variables.annotationsSubjectStrokeColor});\n    fill: var(${variables.annotationsSubjectFillColor});\n    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n  }\n`\n\nexport const annotationContent = css`\n  label: annotationContent;\n  > text {\n    fill: var(--vis-annotations-text-color);\n  }\n`\n\nexport const debugBoundingBox = css`\n  label: debugBoundingBox;\n  fill: none;\n  stroke: var(--vis-annotations-debug-bounding-box-stroke-color);\n  stroke-width: 1;\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,8BAA8B,EAAE,SAAS;AAEzC,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;AAEpD,IAAA,mDAAmD,EAAE,MAAM;AAE3D,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,+CAA+C,EAAE,MAAM;AACvD,IAAA,6CAA6C,EAAE,MAAM;CACtD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;EAKnC;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/area/style.js

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

package/components/area/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from 'styles/emotion'\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;;;;;;;;;"}
+{"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/axis/style.js

@@ -1,4 +1,4 @@
-import { css } from '../../styles/emotion.js';
+import { css } from '@emotion/css';
 import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
 
 const root = css `

package/components/axis/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css } from 'styles/emotion'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: axis-component;\n`\n\nexport const cssVarDefaults: Record<string, string | undefined> = {\n  '--vis-axis-font-family': undefined, // Undefined by default to allow proper fallback to var(--vis-font-family)\n  '--vis-axis-tick-color': '#e8e9ef',\n  '--vis-axis-domain-color': undefined, // Undefined by default to allow fallback to var(--vis-axis-tick-color)\n  '--vis-axis-domain-line-dasharray': undefined, // Undefined by default to allow fallback to var(--vis-axis-grid-line-dasharray)\n  '--vis-axis-grid-color': '#e8e9ef',\n  '--vis-axis-grid-line-width': '1px',\n  '--vis-axis-grid-line-dasharray': 'none',\n  '--vis-axis-grid-opacity': '1',\n  '--vis-axis-grid-transition': 'none',\n\n  '--vis-axis-label-font-size': '14px',\n  '--vis-axis-label-color': '#6c778c',\n  '--vis-axis-label-weight': '500',\n\n  '--vis-axis-tick-label-color': '#6c778c',\n  '--vis-axis-tick-label-font-size': '12px',\n  '--vis-axis-tick-label-weight': '500',\n  '--vis-axis-tick-label-cursor': 'default',\n  '--vis-axis-tick-label-text-decoration': 'none',\n\n  '--vis-axis-tick-line-width': '1px',\n  '--vis-axis-tick-label-hide-transition': 'opacity 400ms ease-in-out',\n\n  '--vis-axis-domain-line-width': undefined, // Undefined by default to allow fallback to var(--vis-axis-grid-line-width)\n\n  '--vis-dark-axis-tick-color': '#6c778c',\n  '--vis-dark-axis-domain-color': undefined, // Undefined by default to allow fallback to var(--vis-dark-axis-tick-color)\n  '--vis-dark-axis-tick-label-color': '#e8e9ef',\n  '--vis-dark-axis-grid-color': '#6c778c',\n  '--vis-dark-axis-label-color': '#fefefe',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const hideTickLine = css`\n  label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n  label: hide-domain;\n`\n\nexport const axis = css`\n  label: axis;\n\n  user-select: none;\n\n  .domain {\n    stroke: var(${variables.axisDomainColor}, var(${variables.axisTickColor}));\n    stroke-width: var(${variables.axisDomainLineWidth}, var(${variables.axisGridLineWidth}));\n    stroke-dasharray: var(${variables.axisDomainLineDasharray}, var(${variables.axisGridLineDasharray}));\n  }\n\n  &${`.${hideTickLine}`} {\n    .tick > line {\n      opacity: 0;\n    }\n  }\n\n  &${`.${hideDomain}`} {\n    .domain {\n      opacity: 0;\n    }\n  }\n`\n\nexport const grid = css`\n  label: grid;\n\n  .domain {\n    opacity: 0;\n  }\n\n  line {\n    stroke: var(${variables.axisGridColor});\n    stroke-width: var(${variables.axisGridLineWidth});\n    stroke-dasharray: var(${variables.axisGridLineDasharray});\n    opacity: var(${variables.axisGridOpacity});\n    transition: var(${variables.axisGridTransition});\n  }\n`\n\nexport const tick = css`\n  label: tick;\n\n  stroke: none;\n  font-size: var(${variables.axisTickLabelFontSize});\n  font-weight: var(${variables.axisTickLabelWeight});\n\n  line {\n    stroke: var(${variables.axisTickColor});\n    stroke-width: var(${variables.axisTickLineWidth});\n  }\n\n  text {\n    fill: var(${variables.axisTickLabelColor});\n    cursor: var(${variables.axisTickLabelCursor});\n    font-family: var(${variables.axisFontFamily}, var(--vis-font-family));\n    text-decoration: var(${variables.axisTickLabelTextDecoration});\n    stroke: none;\n  }\n`\n\nexport const tickTextExiting = css`\n  label: tick-text-exiting;\n`\n\nexport const label = css`\n  label: label;\n  fill: var(${variables.axisLabelColor});\n  font-size: var(${variables.axisLabelFontSize});\n  font-weight: var(${variables.axisLabelWeight});\n  font-family: var(${variables.axisFontFamily}, var(--vis-font-family));\n  text-anchor: middle;\n`\n\nexport const tickLabel = css`\n  label: tick-label;\n`\n\nexport const tickLabelHideable = css`\n  label: tick-label-hideable;\n  opacity: 0;\n  transition: var(${variables.axisTickLabelHideTransition});\n`\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: axis-component;\n`\n\nexport const cssVarDefaults: Record<string, string | undefined> = {\n  '--vis-axis-font-family': undefined, // Undefined by default to allow proper fallback to var(--vis-font-family)\n  '--vis-axis-tick-color': '#e8e9ef',\n  '--vis-axis-domain-color': undefined, // Undefined by default to allow fallback to var(--vis-axis-tick-color)\n  '--vis-axis-domain-line-dasharray': undefined, // Undefined by default to allow fallback to var(--vis-axis-grid-line-dasharray)\n  '--vis-axis-grid-color': '#e8e9ef',\n  '--vis-axis-grid-line-width': '1px',\n  '--vis-axis-grid-line-dasharray': 'none',\n  '--vis-axis-grid-opacity': '1',\n  '--vis-axis-grid-transition': 'none',\n\n  '--vis-axis-label-font-size': '14px',\n  '--vis-axis-label-color': '#6c778c',\n  '--vis-axis-label-weight': '500',\n\n  '--vis-axis-tick-label-color': '#6c778c',\n  '--vis-axis-tick-label-font-size': '12px',\n  '--vis-axis-tick-label-weight': '500',\n  '--vis-axis-tick-label-cursor': 'default',\n  '--vis-axis-tick-label-text-decoration': 'none',\n\n  '--vis-axis-tick-line-width': '1px',\n  '--vis-axis-tick-label-hide-transition': 'opacity 400ms ease-in-out',\n\n  '--vis-axis-domain-line-width': undefined, // Undefined by default to allow fallback to var(--vis-axis-grid-line-width)\n\n  '--vis-dark-axis-tick-color': '#6c778c',\n  '--vis-dark-axis-domain-color': undefined, // Undefined by default to allow fallback to var(--vis-dark-axis-tick-color)\n  '--vis-dark-axis-tick-label-color': '#e8e9ef',\n  '--vis-dark-axis-grid-color': '#6c778c',\n  '--vis-dark-axis-label-color': '#fefefe',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const hideTickLine = css`\n  label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n  label: hide-domain;\n`\n\nexport const axis = css`\n  label: axis;\n\n  user-select: none;\n\n  .domain {\n    stroke: var(${variables.axisDomainColor}, var(${variables.axisTickColor}));\n    stroke-width: var(${variables.axisDomainLineWidth}, var(${variables.axisGridLineWidth}));\n    stroke-dasharray: var(${variables.axisDomainLineDasharray}, var(${variables.axisGridLineDasharray}));\n  }\n\n  &${`.${hideTickLine}`} {\n    .tick > line {\n      opacity: 0;\n    }\n  }\n\n  &${`.${hideDomain}`} {\n    .domain {\n      opacity: 0;\n    }\n  }\n`\n\nexport const grid = css`\n  label: grid;\n\n  .domain {\n    opacity: 0;\n  }\n\n  line {\n    stroke: var(${variables.axisGridColor});\n    stroke-width: var(${variables.axisGridLineWidth});\n    stroke-dasharray: var(${variables.axisGridLineDasharray});\n    opacity: var(${variables.axisGridOpacity});\n    transition: var(${variables.axisGridTransition});\n  }\n`\n\nexport const tick = css`\n  label: tick;\n\n  stroke: none;\n  font-size: var(${variables.axisTickLabelFontSize});\n  font-weight: var(${variables.axisTickLabelWeight});\n\n  line {\n    stroke: var(${variables.axisTickColor});\n    stroke-width: var(${variables.axisTickLineWidth});\n  }\n\n  text {\n    fill: var(${variables.axisTickLabelColor});\n    cursor: var(${variables.axisTickLabelCursor});\n    font-family: var(${variables.axisFontFamily}, var(--vis-font-family));\n    text-decoration: var(${variables.axisTickLabelTextDecoration});\n    stroke: none;\n  }\n`\n\nexport const tickTextExiting = css`\n  label: tick-text-exiting;\n`\n\nexport const label = css`\n  label: label;\n  fill: var(${variables.axisLabelColor});\n  font-size: var(${variables.axisLabelFontSize});\n  font-weight: var(${variables.axisLabelWeight});\n  font-family: var(${variables.axisFontFamily}, var(--vis-font-family));\n  text-anchor: middle;\n`\n\nexport const tickLabel = css`\n  label: tick-label;\n`\n\nexport const tickLabelHideable = css`\n  label: tick-label-hideable;\n  opacity: 0;\n  transition: var(${variables.axisTickLabelHideTransition});\n`\n"],"names":[],"mappings":"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"}

package/components/brush/style.js

@@ -1,4 +1,4 @@
-import { css } from '../../styles/emotion.js';
+import { css } from '@emotion/css';
 import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
 
 const root = css `

package/components/brush/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/brush/style.ts"],"sourcesContent":["import { css } from 'styles/emotion'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: brush-component;\n`\n\nexport const cssVarDefaults = {\n  '--vis-brush-selection-fill-color': 'none',\n  '--vis-brush-selection-stroke-color': 'none',\n  '--vis-brush-selection-stroke-width': '0',\n  '--vis-brush-selection-opacity': '0',\n  '--vis-brush-unselected-fill-color': '#0b1640',\n  '--vis-brush-unselected-stroke-color': '#acb2b9',\n  '--vis-brush-unselected-stroke-width': '0',\n  '--vis-brush-unselected-opacity': '0.4',\n  '--vis-brush-handle-fill-color': '#6d778c',\n  '--vis-brush-handle-stroke-color': '#eee',\n\n  /* Dark Theme */\n  '--vis-dark-brush-selection-fill-color': 'none',\n  '--vis-dark-brush-selection-stroke-color': 'none',\n  '--vis-dark-brush-selection-stroke-width': '0',\n  '--vis-dark-brush-selection-opacity': '0',\n  '--vis-dark-brush-unselected-fill-color': '#acb2b9',\n  '--vis-dark-brush-unselected-stroke-color': '#0b1640',\n  '--vis-dark-brush-unselected-stroke-width': '0',\n  '--vis-dark-brush-unselected-opacity': '0.4',\n  '--vis-dark-brush-handle-fill-color': '#acb2b9',\n  '--vis-dark-brush-handle-stroke-color': 'var(--vis-color-grey)',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const brush = css`\n  label: brush;\n\n  .selection {\n    fill: var(${variables.brushSelectionFillColor});\n    stroke: var(${variables.brushSelectionStrokeColor});\n    stroke-width: var(${variables.brushSelectionStrokeWidth});\n    opacity: var(${variables.brushSelectionOpacity});\n  }\n\n  .handle {\n    fill: var(${variables.brushHandleFillColor});\n  }\n\n  &.non-draggable {\n    .selection, .overlay {\n      pointer-events: none;\n    }\n  }\n`\n\nexport const unselected = css`\n  label: unselected;\n  fill: var(${variables.brushUnselectedFillColor});\n  stroke: var(${variables.brushUnselectedStrokeColor});\n  stroke-width: var(${variables.brushUnselectedStrokeWidth});\n  stroke-opacity: var(${variables.brushUnselectedOpacity});\n  opacity: var(${variables.brushUnselectedOpacity});\n  pointer-events: none;\n`\n\nexport const handleLine = css`\n  label: handle-line;\n  stroke: var(${variables.brushHandleStrokeColor});\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEY,MAAA,cAAc,GAAG;AAC5B,IAAA,kCAAkC,EAAE,MAAM;AAC1C,IAAA,oCAAoC,EAAE,MAAM;AAC5C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,+BAA+B,EAAE,GAAG;AACpC,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,qCAAqC,EAAE,SAAS;AAChD,IAAA,qCAAqC,EAAE,GAAG;AAC1C,IAAA,gCAAgC,EAAE,KAAK;AACvC,IAAA,+BAA+B,EAAE,SAAS;AAC1C,IAAA,iCAAiC,EAAE,MAAM;;AAGzC,IAAA,uCAAuC,EAAE,MAAM;AAC/C,IAAA,yCAAyC,EAAE,MAAM;AACjD,IAAA,yCAAyC,EAAE,GAAG;AAC9C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,wCAAwC,EAAE,SAAS;AACnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,0CAA0C,EAAE,GAAG;AAC/C,IAAA,qCAAqC,EAAE,KAAK;AAC5C,IAAA,oCAAoC,EAAE,SAAS;AAC/C,IAAA,sCAAsC,EAAE,uBAAuB;EAChE;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;AAIR,cAAA,EAAA,SAAS,CAAC,uBAAuB,CAAA;AAC/B,gBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AAC7B,sBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AACxC,iBAAA,EAAA,SAAS,CAAC,qBAAqB,CAAA;;;;AAIlC,cAAA,EAAA,SAAS,CAAC,oBAAoB,CAAA;;;;;;;;EAQ7C;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;AAEf,YAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAChC,cAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAC9B,oBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,sBAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;AACvC,eAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;EAEhD;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;AAEb,cAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/brush/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: brush-component;\n`\n\nexport const cssVarDefaults = {\n  '--vis-brush-selection-fill-color': 'none',\n  '--vis-brush-selection-stroke-color': 'none',\n  '--vis-brush-selection-stroke-width': '0',\n  '--vis-brush-selection-opacity': '0',\n  '--vis-brush-unselected-fill-color': '#0b1640',\n  '--vis-brush-unselected-stroke-color': '#acb2b9',\n  '--vis-brush-unselected-stroke-width': '0',\n  '--vis-brush-unselected-opacity': '0.4',\n  '--vis-brush-handle-fill-color': '#6d778c',\n  '--vis-brush-handle-stroke-color': '#eee',\n\n  /* Dark Theme */\n  '--vis-dark-brush-selection-fill-color': 'none',\n  '--vis-dark-brush-selection-stroke-color': 'none',\n  '--vis-dark-brush-selection-stroke-width': '0',\n  '--vis-dark-brush-selection-opacity': '0',\n  '--vis-dark-brush-unselected-fill-color': '#acb2b9',\n  '--vis-dark-brush-unselected-stroke-color': '#0b1640',\n  '--vis-dark-brush-unselected-stroke-width': '0',\n  '--vis-dark-brush-unselected-opacity': '0.4',\n  '--vis-dark-brush-handle-fill-color': '#acb2b9',\n  '--vis-dark-brush-handle-stroke-color': 'var(--vis-color-grey)',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const brush = css`\n  label: brush;\n\n  .selection {\n    fill: var(${variables.brushSelectionFillColor});\n    stroke: var(${variables.brushSelectionStrokeColor});\n    stroke-width: var(${variables.brushSelectionStrokeWidth});\n    opacity: var(${variables.brushSelectionOpacity});\n  }\n\n  .handle {\n    fill: var(${variables.brushHandleFillColor});\n  }\n\n  &.non-draggable {\n    .selection, .overlay {\n      pointer-events: none;\n    }\n  }\n`\n\nexport const unselected = css`\n  label: unselected;\n  fill: var(${variables.brushUnselectedFillColor});\n  stroke: var(${variables.brushUnselectedStrokeColor});\n  stroke-width: var(${variables.brushUnselectedStrokeWidth});\n  stroke-opacity: var(${variables.brushUnselectedOpacity});\n  opacity: var(${variables.brushUnselectedOpacity});\n  pointer-events: none;\n`\n\nexport const handleLine = css`\n  label: handle-line;\n  stroke: var(${variables.brushHandleStrokeColor});\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEY,MAAA,cAAc,GAAG;AAC5B,IAAA,kCAAkC,EAAE,MAAM;AAC1C,IAAA,oCAAoC,EAAE,MAAM;AAC5C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,+BAA+B,EAAE,GAAG;AACpC,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,qCAAqC,EAAE,SAAS;AAChD,IAAA,qCAAqC,EAAE,GAAG;AAC1C,IAAA,gCAAgC,EAAE,KAAK;AACvC,IAAA,+BAA+B,EAAE,SAAS;AAC1C,IAAA,iCAAiC,EAAE,MAAM;;AAGzC,IAAA,uCAAuC,EAAE,MAAM;AAC/C,IAAA,yCAAyC,EAAE,MAAM;AACjD,IAAA,yCAAyC,EAAE,GAAG;AAC9C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,wCAAwC,EAAE,SAAS;AACnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,0CAA0C,EAAE,GAAG;AAC/C,IAAA,qCAAqC,EAAE,KAAK;AAC5C,IAAA,oCAAoC,EAAE,SAAS;AAC/C,IAAA,sCAAsC,EAAE,uBAAuB;EAChE;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;AAIR,cAAA,EAAA,SAAS,CAAC,uBAAuB,CAAA;AAC/B,gBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AAC7B,sBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AACxC,iBAAA,EAAA,SAAS,CAAC,qBAAqB,CAAA;;;;AAIlC,cAAA,EAAA,SAAS,CAAC,oBAAoB,CAAA;;;;;;;;EAQ7C;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;AAEf,YAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAChC,cAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAC9B,oBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,sBAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;AACvC,eAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;EAEhD;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;AAEb,cAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;;;;;;;"}

package/components/bullet-legend/style.js

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

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 'styles/emotion'\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;;;;;;;;;;;;;;"}
+{"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,4 +1,4 @@
-import { css, injectGlobal } from '../../styles/emotion.js';
+import { css, injectGlobal } from '@emotion/css';
 import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `

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 'styles/emotion'\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;;;;;;;"}
+{"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/crosshair/style.d.ts

@@ -1,8 +1,4 @@
+export declare const globalStyles: void;
 export declare const root: string;
-export declare const cssVarDefaults: Record<string, string | undefined>;
-export declare const variables: {
-    [x: string]: string;
-};
 export declare const line: string;
-export declare const lineHorizontal: string;
 export declare const circle: string;

package/components/crosshair/style.js

@@ -1,40 +1,30 @@
-import { css } from '../../styles/emotion.js';
-import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
+import { injectGlobal, css } from '@emotion/css';
 
+const globalStyles = injectGlobal `
+  :root {
+    --vis-crosshair-line-stroke-color: #888;
+    --vis-crosshair-line-stroke-width: 1px;
+    --vis-crosshair-line-stroke-opacity: 1;
+    --vis-crosshair-circle-stroke-color: #fff;
+    --vis-crosshair-circle-stroke-width: 1px;
+    --vis-crosshair-circle-stroke-opacity: 0.75;
+  }
+`;
 const root = css `
   label: crosshair-component;
 `;
-const cssVarDefaults = {
-    '--vis-crosshair-line-stroke-color': '#888',
-    '--vis-crosshair-line-stroke-width': '1px',
-    '--vis-crosshair-line-stroke-opacity': '1',
-    '--vis-crosshair-line-stroke-dasharray': 'none',
-    '--vis-crosshair-circle-stroke-color': '#fff',
-    '--vis-crosshair-circle-stroke-width': '1px',
-    '--vis-crosshair-circle-stroke-opacity': '0.75',
-};
-const variables = getCssVarNames(cssVarDefaults);
-injectGlobalCssVariables(cssVarDefaults, root);
 const line = css `
-  stroke: var(${variables.crosshairLineStrokeColor});
-  stroke-width: var(${variables.crosshairLineStrokeWidth});
-  stroke-opacity: var(${variables.crosshairLineStrokeOpacity});
-  stroke-dasharray: var(${variables.crosshairLineStrokeDasharray});
-  pointer-events: none;
-`;
-const lineHorizontal = css `
-  stroke: var(${variables.crosshairLineStrokeColor});
-  stroke-width: var(${variables.crosshairLineStrokeWidth});
-  stroke-opacity: var(${variables.crosshairLineStrokeOpacity});
-  stroke-dasharray: var(${variables.crosshairLineStrokeDasharray});
+  stroke: var(--vis-crosshair-line-stroke-color);
+  stroke-width: var(--vis-crosshair-line-stroke-width);
+  stroke-opacity: var(--vis-crosshair-line-stroke-opacity);
   pointer-events: none;
 `;
 const circle = css `
-  stroke: var(${variables.crosshairCircleStrokeColor});
-  stroke-width: var(${variables.crosshairCircleStrokeWidth});
-  stroke-opacity: var(${variables.crosshairCircleStrokeOpacity});
+  stroke: var(--vis-crosshair-circle-stroke-color);
+  stroke-width: var(--vis-crosshair-circle-stroke-width);
+  stroke-opacity: var(--vis-crosshair-circle-stroke-opacity);
   pointer-events: none;
 `;
 
-export { circle, cssVarDefaults, line, lineHorizontal, root, variables };
+export { circle, globalStyles, line, root };
 //# sourceMappingURL=style.js.map

package/components/crosshair/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/crosshair/style.ts"],"sourcesContent":["import { css } from 'styles/emotion'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: crosshair-component;\n`\n\nexport const cssVarDefaults: Record<string, string | undefined> = {\n  '--vis-crosshair-line-stroke-color': '#888',\n  '--vis-crosshair-line-stroke-width': '1px',\n  '--vis-crosshair-line-stroke-opacity': '1',\n  '--vis-crosshair-line-stroke-dasharray': 'none',\n  '--vis-crosshair-circle-stroke-color': '#fff',\n  '--vis-crosshair-circle-stroke-width': '1px',\n  '--vis-crosshair-circle-stroke-opacity': '0.75',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const line = css`\n  stroke: var(${variables.crosshairLineStrokeColor});\n  stroke-width: var(${variables.crosshairLineStrokeWidth});\n  stroke-opacity: var(${variables.crosshairLineStrokeOpacity});\n  stroke-dasharray: var(${variables.crosshairLineStrokeDasharray});\n  pointer-events: none;\n`\n\nexport const lineHorizontal = css`\n  stroke: var(${variables.crosshairLineStrokeColor});\n  stroke-width: var(${variables.crosshairLineStrokeWidth});\n  stroke-opacity: var(${variables.crosshairLineStrokeOpacity});\n  stroke-dasharray: var(${variables.crosshairLineStrokeDasharray});\n  pointer-events: none;\n`\n\nexport const circle = css`\n  stroke: var(${variables.crosshairCircleStrokeColor});\n  stroke-width: var(${variables.crosshairCircleStrokeWidth});\n  stroke-opacity: var(${variables.crosshairCircleStrokeOpacity});\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEY,MAAA,cAAc,GAAuC;AAChE,IAAA,mCAAmC,EAAE,MAAM;AAC3C,IAAA,mCAAmC,EAAE,KAAK;AAC1C,IAAA,qCAAqC,EAAE,GAAG;AAC1C,IAAA,uCAAuC,EAAE,MAAM;AAC/C,IAAA,qCAAqC,EAAE,MAAM;AAC7C,IAAA,qCAAqC,EAAE,KAAK;AAC5C,IAAA,uCAAuC,EAAE,MAAM;EAChD;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;AACP,cAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAC5B,oBAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAChC,sBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,wBAAA,EAAA,SAAS,CAAC,4BAA4B,CAAA;;EAE/D;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;AACjB,cAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAC5B,oBAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAChC,sBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,wBAAA,EAAA,SAAS,CAAC,4BAA4B,CAAA;;EAE/D;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;AACT,cAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAC9B,oBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,sBAAA,EAAA,SAAS,CAAC,4BAA4B,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/crosshair/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-crosshair-line-stroke-color: #888;\n    --vis-crosshair-line-stroke-width: 1px;\n    --vis-crosshair-line-stroke-opacity: 1;\n    --vis-crosshair-circle-stroke-color: #fff;\n    --vis-crosshair-circle-stroke-width: 1px;\n    --vis-crosshair-circle-stroke-opacity: 0.75;\n  }\n`\n\nexport const root = css`\n  label: crosshair-component;\n`\n\nexport const line = css`\n  stroke: var(--vis-crosshair-line-stroke-color);\n  stroke-width: var(--vis-crosshair-line-stroke-width);\n  stroke-opacity: var(--vis-crosshair-line-stroke-opacity);\n  pointer-events: none;\n`\n\nexport const circle = css`\n  stroke: var(--vis-crosshair-circle-stroke-color);\n  stroke-width: var(--vis-crosshair-circle-stroke-width);\n  stroke-opacity: var(--vis-crosshair-circle-stroke-opacity);\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;EASvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;EAKtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/donut/style.js

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

package/components/donut/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from 'styles/emotion'\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;;;;;;;;;;;;"}
+{"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,4 +1,4 @@
-import { css, injectGlobal } from '../../styles/emotion.js';
+import { css, injectGlobal } from '@emotion/css';
 import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
 import { darkThemeCssSelectors } from '../../utils/theme.js';
 

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 'styles/emotion'\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;;;;;"}
+{"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,4 +1,4 @@
-import { css, injectGlobal } from '../../styles/emotion.js';
+import { css, injectGlobal } from '@emotion/css';
 import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `

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 'styles/emotion'\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;;;;;;;;"}
+{"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,4 +1,4 @@
-import { css, injectGlobal } from '../../../../styles/emotion.js';
+import { css, injectGlobal } from '@emotion/css';
 import { darkThemeCssSelectors } from '../../../../utils/theme.js';
 
 const links = css `

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 'styles/emotion'\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;;;;;;;;;;;;;"}
+{"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,4 +1,4 @@
-import { css, injectGlobal } from '../../../../styles/emotion.js';
+import { css, injectGlobal } from '@emotion/css';
 import { darkThemeCssSelectors } from '../../../../utils/theme.js';
 
 const nodes = css `

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from 'styles/emotion'\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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"}
+{"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,4 +1,4 @@
-import { css, injectGlobal } from '../../../../styles/emotion.js';
+import { css, injectGlobal } from '@emotion/css';
 import { darkThemeCssSelectors } from '../../../../utils/theme.js';
 
 const panels = css `

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 'styles/emotion'\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;;;;;;;;;;;;;"}
+{"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/graph/style.js

@@ -1,4 +1,4 @@
-import { injectGlobal, css } from '../../styles/emotion.js';
+import { injectGlobal, css } from '@emotion/css';
 import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
 import { label, nodeGauge, node, nodeSelection, nodeSelectionActive } from './modules/node/style.js';
 import { gLink, flowCircle } from './modules/link/style.js';

package/components/graph/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/graph/style.ts"],"sourcesContent":["import { css, injectGlobal } from 'styles/emotion'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\n// Nodes\nimport * as nodeSelectors from './modules/node/style'\n\n// Links\nimport * as linkSelectors from './modules/link/style'\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n\n    /* Brush */\n    --vis-graph-brush-selection-opacity: 0.2;\n  }\n`\n\n// General\nexport const root = css`\n  label: graph-component;\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const graphGroup = css`\n  label: graph-group;\n`\n\nexport const brush = css`\n  label: brush;\n\n  :not(.active) {\n    display: none;\n  }\n\n  .active {\n    .selection {\n      fill-opacity: 0;\n      stroke: none;\n    }\n\n    .handle {\n      display: none;\n    }\n  }\n`\n\nexport const zoomOutLevel1 = css`\n  label: zoom-out-level-1;\n\n  ${`.${nodeSelectors.label}`} {\n    rect {\n      stroke: none;\n    }\n  }\n`\n\nexport const zoomOutLevel2 = css`\n  label: zoom-out-level-2;\n\n  ${`.${nodeSelectors.label}`} {\n    visibility: visible;\n  }\n\n  ${`.${nodeSelectors.nodeGauge}`} {\n    visibility: visible;\n  }\n\n  ${`.${nodeSelectors.node}`} {\n    stroke-width: 4px;\n  }\n\n  rect${`.${nodeSelectors.node}`} {\n    stroke-width: 2px;\n  }\n\n  ${`.${linkSelectors.gLink}`} {\n    animation: none;\n    stroke-dasharray: none;\n  }\n\n  ${`.${linkSelectors.flowCircle}`} {\n    display: none;\n  }\n\n  ${`.${nodeSelectors.nodeSelection}`} {\n    &${`.${nodeSelectors.nodeSelectionActive}`} {\n      transform: scale(1.15);\n    }\n  }\n`\n"],"names":["nodeSelectors.label","nodeSelectors.nodeGauge","nodeSelectors.node","linkSelectors.gLink","linkSelectors.flowCircle","nodeSelectors.nodeSelection","nodeSelectors.nodeSelectionActive"],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;oCAED,+BAA+B,CAAA;;;;;EAKlE;AAED;AACO,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,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;IAIzB,CAAI,CAAA,EAAAC,SAAuB,CAAE,CAAA,CAAA;;;;IAI7B,CAAI,CAAA,EAAAC,IAAkB,CAAE,CAAA,CAAA;;;;QAIpB,CAAI,CAAA,EAAAA,IAAkB,CAAE,CAAA,CAAA;;;;IAI5B,CAAI,CAAA,EAAAC,KAAmB,CAAE,CAAA,CAAA;;;;;IAKzB,CAAI,CAAA,EAAAC,UAAwB,CAAE,CAAA,CAAA;;;;IAI9B,CAAI,CAAA,EAAAC,aAA2B,CAAE,CAAA,CAAA;OAC9B,CAAI,CAAA,EAAAC,mBAAiC,CAAE,CAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/graph/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\n// Nodes\nimport * as nodeSelectors from './modules/node/style'\n\n// Links\nimport * as linkSelectors from './modules/link/style'\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n\n    /* Brush */\n    --vis-graph-brush-selection-opacity: 0.2;\n  }\n`\n\n// General\nexport const root = css`\n  label: graph-component;\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const graphGroup = css`\n  label: graph-group;\n`\n\nexport const brush = css`\n  label: brush;\n\n  :not(.active) {\n    display: none;\n  }\n\n  .active {\n    .selection {\n      fill-opacity: 0;\n      stroke: none;\n    }\n\n    .handle {\n      display: none;\n    }\n  }\n`\n\nexport const zoomOutLevel1 = css`\n  label: zoom-out-level-1;\n\n  ${`.${nodeSelectors.label}`} {\n    rect {\n      stroke: none;\n    }\n  }\n`\n\nexport const zoomOutLevel2 = css`\n  label: zoom-out-level-2;\n\n  ${`.${nodeSelectors.label}`} {\n    visibility: visible;\n  }\n\n  ${`.${nodeSelectors.nodeGauge}`} {\n    visibility: visible;\n  }\n\n  ${`.${nodeSelectors.node}`} {\n    stroke-width: 4px;\n  }\n\n  rect${`.${nodeSelectors.node}`} {\n    stroke-width: 2px;\n  }\n\n  ${`.${linkSelectors.gLink}`} {\n    animation: none;\n    stroke-dasharray: none;\n  }\n\n  ${`.${linkSelectors.flowCircle}`} {\n    display: none;\n  }\n\n  ${`.${nodeSelectors.nodeSelection}`} {\n    &${`.${nodeSelectors.nodeSelectionActive}`} {\n      transform: scale(1.15);\n    }\n  }\n`\n"],"names":["nodeSelectors.label","nodeSelectors.nodeGauge","nodeSelectors.node","linkSelectors.gLink","linkSelectors.flowCircle","nodeSelectors.nodeSelection","nodeSelectors.nodeSelectionActive"],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;oCAED,+BAA+B,CAAA;;;;;EAKlE;AAED;AACO,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,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;IAIzB,CAAI,CAAA,EAAAC,SAAuB,CAAE,CAAA,CAAA;;;;IAI7B,CAAI,CAAA,EAAAC,IAAkB,CAAE,CAAA,CAAA;;;;QAIpB,CAAI,CAAA,EAAAA,IAAkB,CAAE,CAAA,CAAA;;;;IAI5B,CAAI,CAAA,EAAAC,KAAmB,CAAE,CAAA,CAAA;;;;;IAKzB,CAAI,CAAA,EAAAC,UAAwB,CAAE,CAAA,CAAA;;;;IAI9B,CAAI,CAAA,EAAAC,aAA2B,CAAE,CAAA,CAAA;OAC9B,CAAI,CAAA,EAAAC,mBAAiC,CAAE,CAAA,CAAA;;;;;;;;"}

package/components/grouped-bar/style.js

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

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 'styles/emotion'\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;;;;;;"}
+{"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/leaflet-map/index.d.ts

@@ -1,10 +1,10 @@
 import { Selection } from 'd3-selection';
 import type L from 'leaflet';
-import { StyleSpecification } from 'maplibre-gl';
 import { ComponentCore } from "../../core/component";
 import { MapDataModel } from "../../data-models/map";
 import { ComponentType } from "../../types/component";
 import { GenericDataRecord } from "../../types/data";
+import { StyleSpecification } from './renderer/map-style';
 import { Bounds, LeafletMapPoint } from './types';
 import { LeafletMapConfigInterface } from './config';
 import * as s from './style';

package/components/leaflet-map/index.js

@@ -206,7 +206,11 @@ class LeafletMap extends ComponentCore {
         if (this.config.renderer === LeafletMapRenderer.MapLibre) {
             const maplibreMap = layer.getMaplibreMap();
             (_a = maplibreMap.setStyle) === null || _a === void 0 ? void 0 : _a.call(maplibreMap, theme);
-            updateTopoJson(maplibreMap, this.config);
+            // `setStyle` reloads the style asynchronously, so we must wait until it's loaded before updating sources/layers
+            if (maplibreMap.isStyleLoaded())
+                updateTopoJson(maplibreMap, this.config);
+            else
+                maplibreMap.once('styledata', () => updateTopoJson(maplibreMap, this.config));
         }
         else {
             if (typeof theme !== 'string') {