@knime/product-features 1.2.3 → 1.2.4

package/dist/toasts.js

@@ -1,485 +1,4710 @@
-import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, useCssVars, ref, inject, onMounted, watch, createElementBlock, normalizeClass, withDirectives, createElementVNode, createVNode, toDisplayString, createCommentVNode, Fragment, createTextVNode, resolveDynamicComponent, renderList, vShow, provide, getCurrentInstance, TransitionGroup, withCtx } from 'vue';
-import { useWindowFocus, useMouseInElement, useRafFn, useEventBus } from '@vueuse/core';
-import { KdsLinkButton, KdsButton, KdsIcon, KdsProgressBar } from '@knime/kds-components';
-import { c as capitalize, t as truncateString } from './index-B3ql6hun.js';
-import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.js';
-import { cloneDeep } from 'es-toolkit';
-import { uniqueId } from 'es-toolkit/compat';
-
-import './toasts.css';const toastType = {
-  INFO: "info",
-  SUCCESS: "success",
-  WARNING: "warning",
-  ERROR: "error"
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
+import { t as capitalize, u as truncateString_default } from "./dist-BrNh9vG-.js";
+import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, normalizeClass, onMounted, openBlock, provide, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useCssVars, vShow, watch, withCtx, withDirectives } from "vue";
+import { useEventBus, useMouseInElement, useRafFn, useWindowFocus } from "@vueuse/core";
+import { KdsButton, KdsIcon, KdsLinkButton, KdsProgressBar } from "@knime/kds-components";
+import { cloneDeep } from "es-toolkit";
+import { uniqueId } from "es-toolkit/compat";
+import './toasts.css';//#region src/toasts/Toast/enums.ts
+var toastType = {
+	INFO: "info",
+	SUCCESS: "success",
+	WARNING: "warning",
+	ERROR: "error"
 };
 Object.values(toastType);
-
-const TOAST_STACK_ID = /* @__PURE__ */ Symbol("toast-stack-id");
-
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "ToastButton",
-  props: {
-    callback: { type: Function },
-    to: {},
-    href: {},
-    icon: {},
-    ariaLabel: {},
-    text: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const mergedTo = computed(() => {
-      if (props.to) {
-        return props.to;
-      }
-      return props.href;
-    });
-    const target = computed(() => {
-      if (props.href) {
-        return "_blank";
-      }
-      return null;
-    });
-    const callback = computed(() => {
-      if (typeof props.callback === "function") {
-        return props.callback;
-      }
-      return void 0;
-    });
-    const labelAndIcon = computed(
-      () => props.text === void 0 ? { leadingIcon: props.icon, ariaLabel: props.ariaLabel } : { label: props.text, leadingIcon: props.icon }
-    );
-    return (_ctx, _cache) => {
-      return mergedTo.value ? (openBlock(), createBlock(unref(KdsLinkButton), mergeProps({
-        key: 0,
-        variant: "transparent",
-        size: "xsmall",
-        to: mergedTo.value,
-        target: target.value,
-        rel: target.value ? "noopener noreferrer" : null
-      }, labelAndIcon.value, { onClick: callback.value }), null, 16, ["to", "target", "rel", "onClick"])) : (openBlock(), createBlock(unref(KdsButton), mergeProps({
-        key: 1,
-        variant: "transparent",
-        size: "xsmall"
-      }, labelAndIcon.value, { onClick: callback.value }), null, 16, ["onClick"]));
-    };
-  }
+//#endregion
+//#region ../styles/dist/tokens/ts/border.js
+/**
+* Do not edit directly, this file was auto-generated
+* from the design token sources in src/tokens.
+*/
+var border = {
+	action: {
+		transparent: {
+			color: {
+				light: {
+					h: 345,
+					s: 0,
+					l: 11.4,
+					alpha: 0
+				},
+				dark: {
+					h: 345,
+					s: 0,
+					l: 11.4,
+					alpha: 0
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid hsl(345 0% 11.4% / 0)",
+				variable: "var(--kds-border-action-transparent)"
+			}
+		},
+		default: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .4
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .5
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+				variable: "var(--kds-border-action-default)"
+			}
+		},
+		disabled: {
+			color: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 72.5,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 48.2,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%))",
+				variable: "var(--kds-border-action-disabled)"
+			}
+		},
+		focused: {
+			color: {
+				light: {
+					h: 209.4,
+					s: 57.3,
+					l: 49.6,
+					alpha: 1
+				},
+				dark: {
+					h: 213.6,
+					s: 91.6,
+					l: 76.7,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 2,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "2px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
+				variable: "var(--kds-border-action-focused)"
+			}
+		},
+		selected: {
+			color: {
+				light: {
+					h: 171.8,
+					s: 27,
+					l: 47.8,
+					alpha: 1
+				},
+				dark: {
+					h: 168,
+					s: 46.7,
+					l: 85.3,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%))",
+				variable: "var(--kds-border-action-selected)"
+			}
+		},
+		"selected-accent": {
+			color: {
+				light: {
+					h: 209.4,
+					s: 57.3,
+					l: 49.6,
+					alpha: 1
+				},
+				dark: {
+					h: 213.6,
+					s: 91.6,
+					l: 76.7,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
+				variable: "var(--kds-border-action-selected-accent)"
+			}
+		},
+		error: {
+			color: {
+				light: {
+					h: 348.8,
+					s: 90.9,
+					l: 34.5,
+					alpha: 1
+				},
+				dark: {
+					h: 3.5,
+					s: 100,
+					l: 79.6,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
+				variable: "var(--kds-border-action-error)"
+			}
+		},
+		primary: {
+			color: {
+				light: {
+					h: 176.7,
+					s: 82,
+					l: 17.5,
+					alpha: 1
+				},
+				dark: {
+					h: 176.7,
+					s: 82,
+					l: 17.5,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid hsl(176.7, 82%, 17.5%)",
+				variable: "var(--kds-border-action-primary)"
+			}
+		},
+		input: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .4
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .5
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+				variable: "var(--kds-border-action-input)"
+			}
+		}
+	},
+	base: {
+		default: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .4
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .5
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+				variable: "var(--kds-border-base-default)"
+			}
+		},
+		muted: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .2
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .2
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+				variable: "var(--kds-border-base-muted)"
+			}
+		},
+		subtle: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .1
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+				variable: "var(--kds-border-base-subtle)"
+			}
+		},
+		brand: {
+			color: {
+				light: {
+					h: 50.8,
+					s: 100,
+					l: 50,
+					alpha: 1
+				},
+				dark: {
+					h: 50.8,
+					s: 100,
+					l: 50,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid hsl(50.8, 100%, 50%)",
+				variable: "var(--kds-border-base-brand)"
+			}
+		},
+		danger: {
+			color: {
+				light: {
+					h: 3.4,
+					s: 100,
+					l: 86.1,
+					alpha: 1
+				},
+				dark: {
+					h: 348,
+					s: 94.3,
+					l: 20.8,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%))",
+				variable: "var(--kds-border-base-danger)"
+			}
+		},
+		warning: {
+			color: {
+				light: {
+					h: 30.8,
+					s: 79.3,
+					l: 73.5,
+					alpha: 1
+				},
+				dark: {
+					h: 13.1,
+					s: 66.1,
+					l: 23.1,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%))",
+				variable: "var(--kds-border-base-warning)"
+			}
+		},
+		success: {
+			color: {
+				light: {
+					h: 112,
+					s: 56.5,
+					l: 71.2,
+					alpha: 1
+				},
+				dark: {
+					h: 123.7,
+					s: 46.7,
+					l: 20.6,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%))",
+				variable: "var(--kds-border-base-success)"
+			}
+		},
+		info: {
+			color: {
+				light: {
+					h: 214.5,
+					s: 100,
+					l: 84.3,
+					alpha: 1
+				},
+				dark: {
+					h: 210,
+					s: 50,
+					l: 27.5,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%))",
+				variable: "var(--kds-border-base-info)"
+			}
+		}
+	},
+	"node-status": {
+		empty: {
+			color: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 90.2,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 32.2,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
+				variable: "var(--kds-border-node-status-empty)"
+			}
+		},
+		error: {
+			color: {
+				light: {
+					h: 348,
+					s: 94.3,
+					l: 20.8,
+					alpha: 1
+				},
+				dark: {
+					h: 2.6,
+					s: 100,
+					l: 72.4,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%))",
+				variable: "var(--kds-border-node-status-error)"
+			}
+		},
+		warning: {
+			color: {
+				light: {
+					h: 19,
+					s: 63.1,
+					l: 38.2,
+					alpha: 1
+				},
+				dark: {
+					h: 49.1,
+					s: 99.1,
+					l: 43.7,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%))",
+				variable: "var(--kds-border-node-status-warning)"
+			}
+		},
+		success: {
+			color: {
+				light: {
+					h: 116.1,
+					s: 46.6,
+					l: 25.7,
+					alpha: 1
+				},
+				dark: {
+					h: 106.5,
+					s: 42.6,
+					l: 54.9,
+					alpha: 1
+				}
+			},
+			width: {
+				value: 1,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "1px solid light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
+				variable: "var(--kds-border-node-status-success)"
+			}
+		}
+	},
+	ResizeHandle: {
+		initial: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .4
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .4
+				}
+			},
+			width: {
+				value: 2,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
+				variable: "var(--kds-border-resize-handle-initial)"
+			}
+		},
+		hover: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .64
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .58
+				}
+			},
+			width: {
+				value: 2,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
+				variable: "var(--kds-border-resize-handle-hover)"
+			}
+		},
+		active: {
+			color: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 10.2,
+					alpha: .74
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 99,
+					alpha: .68
+				}
+			},
+			width: {
+				value: 2,
+				unit: "px"
+			},
+			style: "solid",
+			css: {
+				value: "2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
+				variable: "var(--kds-border-resize-handle-active)"
+			}
+		}
+	},
+	ColorPickerHandle: { initial: {
+		color: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 99,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 99,
+				alpha: 1
+			}
+		},
+		width: {
+			value: 2,
+			unit: "px"
+		},
+		style: "solid",
+		css: {
+			value: "2px solid hsl(0, 0%, 99%)",
+			variable: "var(--kds-border-color-picker-handle-initial)"
+		}
+	} }
+};
+//#endregion
+//#region ../styles/dist/tokens/ts/color.js
+/**
+* Do not edit directly, this file was auto-generated
+* from the design token sources in src/tokens.
+*/
+var color = {
+	surface: {
+		default: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 98,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 15.7,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
+				variable: "var(--kds-color-surface-default)"
+			}
+		},
+		muted: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 94.1,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 18.8,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 18.8%))",
+				variable: "var(--kds-color-surface-muted)"
+			}
+		},
+		subtle: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 22,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
+				variable: "var(--kds-color-surface-subtle)"
+			}
+		}
+	},
+	page: { default: {
+		light: {
+			h: 0,
+			s: 0,
+			l: 99,
+			alpha: 1
+		},
+		dark: {
+			h: 0,
+			s: 0,
+			l: 12.9,
+			alpha: 1
+		},
+		css: {
+			value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
+			variable: "var(--kds-color-page-default)"
+		}
+	} },
+	background: {
+		neutral: {
+			initial: {
+				light: {
+					h: 345,
+					s: 0,
+					l: 11.4,
+					alpha: 0
+				},
+				dark: {
+					h: 345,
+					s: 0,
+					l: 11.4,
+					alpha: 0
+				},
+				css: {
+					value: "hsl(345 0% 11.4% / 0)",
+					variable: "var(--kds-color-background-neutral-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 340,
+					s: 0,
+					l: 48.2,
+					alpha: .1
+				},
+				dark: {
+					h: 180,
+					s: 0,
+					l: 90.2,
+					alpha: .1
+				},
+				css: {
+					value: "light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1))",
+					variable: "var(--kds-color-background-neutral-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 340,
+					s: 0,
+					l: 48.2,
+					alpha: .2
+				},
+				dark: {
+					h: 340,
+					s: 0,
+					l: 48.2,
+					alpha: .36
+				},
+				css: {
+					value: "light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36))",
+					variable: "var(--kds-color-background-neutral-active)"
+				}
+			}
+		},
+		"neutral-bold": {
+			initial: {
+				light: {
+					h: 210,
+					s: 0,
+					l: 72.5,
+					alpha: .4
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 32.2,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%))",
+					variable: "var(--kds-color-background-neutral-bold-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 210,
+					s: 0,
+					l: 62.977,
+					alpha: .4
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 48.2,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(210 0% 62.977% / 0.4), hsl(0, 0%, 48.2%))",
+					variable: "var(--kds-color-background-neutral-bold-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 59.859,
+					alpha: .4
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 72.5,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%))",
+					variable: "var(--kds-color-background-neutral-bold-active)"
+				}
+			}
+		},
+		primary: {
+			initial: {
+				light: {
+					h: 168,
+					s: 46.7,
+					l: 85.3,
+					alpha: 1
+				},
+				dark: {
+					h: 169.8,
+					s: 30.6,
+					l: 66.1,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(169.8, 30.6%, 66.1%))",
+					variable: "var(--kds-color-background-primary-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 167.99,
+					s: 27.818,
+					l: 77.703,
+					alpha: 1
+				},
+				dark: {
+					h: 169.6,
+					s: 30.517,
+					l: 68.835,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(167.99 27.818% 77.703%), hsl(169.6 30.517% 68.835%))",
+					variable: "var(--kds-color-background-primary-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 167.97,
+					s: 18.664,
+					l: 70.242,
+					alpha: 1
+				},
+				dark: {
+					h: 168.98,
+					s: 30.352,
+					l: 78.334,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(167.97 18.664% 70.242%), hsl(168.98 30.352% 78.334%))",
+					variable: "var(--kds-color-background-primary-active)"
+				}
+			}
+		},
+		"primary-bold": {
+			initial: {
+				light: {
+					h: 176.1,
+					s: 66.7,
+					l: 22.4,
+					alpha: 1
+				},
+				dark: {
+					h: 174.4,
+					s: 47.8,
+					l: 30.8,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
+					variable: "var(--kds-color-background-primary-bold-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 175.79,
+					s: 58.284,
+					l: 19.792,
+					alpha: 1
+				},
+				dark: {
+					h: 173.26,
+					s: 27.023,
+					l: 42.409,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(175.79 58.284% 19.792%), hsl(173.26 27.023% 42.409%))",
+					variable: "var(--kds-color-background-primary-bold-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 175.36,
+					s: 48.936,
+					l: 16.164,
+					alpha: 1
+				},
+				dark: {
+					h: 171.91,
+					s: 19.296,
+					l: 64.061,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(175.36 48.936% 16.164%), hsl(171.91 19.296% 64.061%))",
+					variable: "var(--kds-color-background-primary-bold-active)"
+				}
+			}
+		},
+		selected: {
+			initial: {
+				light: {
+					h: 165.6,
+					s: 67.6,
+					l: 92.7,
+					alpha: 1
+				},
+				dark: {
+					h: 176.1,
+					s: 66.7,
+					l: 22.4,
+					alpha: .32
+				},
+				css: {
+					value: "light-dark(hsl(165.6, 67.6%, 92.7%), hsl(176.1 66.7% 22.4% / 0.32))",
+					variable: "var(--kds-color-background-selected-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 168,
+					s: 46.7,
+					l: 85.3,
+					alpha: 1
+				},
+				dark: {
+					h: 174.4,
+					s: 47.8,
+					l: 30.8,
+					alpha: .56
+				},
+				css: {
+					value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(174.4 47.8% 30.8% / 0.56))",
+					variable: "var(--kds-color-background-selected-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 168.8,
+					s: 34.4,
+					l: 75.5,
+					alpha: 1
+				},
+				dark: {
+					h: 171.8,
+					s: 27,
+					l: 47.8,
+					alpha: .72
+				},
+				css: {
+					value: "light-dark(hsl(168.8, 34.4%, 75.5%), hsl(171.8 27% 47.8% / 0.72))",
+					variable: "var(--kds-color-background-selected-active)"
+				}
+			}
+		},
+		"selected-bold": {
+			initial: {
+				light: {
+					h: 174.4,
+					s: 47.8,
+					l: 30.8,
+					alpha: 1
+				},
+				dark: {
+					h: 176.1,
+					s: 66.7,
+					l: 22.4,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%))",
+					variable: "var(--kds-color-background-selected-bold-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 176.1,
+					s: 66.7,
+					l: 22.4,
+					alpha: 1
+				},
+				dark: {
+					h: 174.4,
+					s: 47.8,
+					l: 30.8,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
+					variable: "var(--kds-color-background-selected-bold-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 176.7,
+					s: 82,
+					l: 17.5,
+					alpha: 1
+				},
+				dark: {
+					h: 171.8,
+					s: 27,
+					l: 47.8,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(171.8, 27%, 47.8%))",
+					variable: "var(--kds-color-background-selected-bold-active)"
+				}
+			}
+		},
+		danger: {
+			initial: {
+				light: {
+					h: 0,
+					s: 100,
+					l: 97.1,
+					alpha: 1
+				},
+				dark: {
+					h: 356.76,
+					s: 65.215,
+					l: 15.117,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
+					variable: "var(--kds-color-background-danger-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 1.5,
+					s: 100,
+					l: 92.4,
+					alpha: 1
+				},
+				dark: {
+					h: 348.8,
+					s: 90.9,
+					l: 34.5,
+					alpha: .72
+				},
+				css: {
+					value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(348.8 90.9% 34.5% / 0.72))",
+					variable: "var(--kds-color-background-danger-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 3.4,
+					s: 100,
+					l: 86.1,
+					alpha: 1
+				},
+				dark: {
+					h: 353,
+					s: 74.7,
+					l: 44.9,
+					alpha: .72
+				},
+				css: {
+					value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(353 74.7% 44.9% / 0.72))",
+					variable: "var(--kds-color-background-danger-active)"
+				}
+			}
+		},
+		"danger-bold": {
+			initial: {
+				light: {
+					h: 348.8,
+					s: 90.9,
+					l: 34.5,
+					alpha: 1
+				},
+				dark: {
+					h: 347.6,
+					s: 97.1,
+					l: 27.3,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(347.6, 97.1%, 27.3%))",
+					variable: "var(--kds-color-background-danger-bold-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 347.6,
+					s: 97.1,
+					l: 27.3,
+					alpha: 1
+				},
+				dark: {
+					h: 353,
+					s: 74.7,
+					l: 44.9,
+					alpha: .8
+				},
+				css: {
+					value: "light-dark(hsl(347.6, 97.1%, 27.3%), hsl(353 74.7% 44.9% / 0.8))",
+					variable: "var(--kds-color-background-danger-bold-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 348,
+					s: 94.3,
+					l: 20.8,
+					alpha: 1
+				},
+				dark: {
+					h: 356.3,
+					s: 76.8,
+					l: 54.3,
+					alpha: .8
+				},
+				css: {
+					value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(356.3 76.8% 54.3% / 0.8))",
+					variable: "var(--kds-color-background-danger-bold-active)"
+				}
+			}
+		},
+		input: {
+			initial: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 99,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 22,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%))",
+					variable: "var(--kds-color-background-input-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 94.521,
+					alpha: 1
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 30.187,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
+					variable: "var(--kds-color-background-input-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 85.683,
+					alpha: 1
+				},
+				dark: {
+					h: 336,
+					s: 0,
+					l: 38.771,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%))",
+					variable: "var(--kds-color-background-input-active)"
+				}
+			}
+		},
+		disabled: {
+			default: {
+				light: {
+					h: 340,
+					s: 0,
+					l: 48.2,
+					alpha: .48
+				},
+				dark: {
+					h: 340,
+					s: 0,
+					l: 48.2,
+					alpha: .48
+				},
+				css: {
+					value: "hsl(340 0% 48.2% / 0.48)",
+					variable: "var(--kds-color-background-disabled-default)"
+				}
+			},
+			primary: {
+				light: {
+					h: 173.91,
+					s: 18.134,
+					l: 40.592,
+					alpha: 1
+				},
+				dark: {
+					h: 173.91,
+					s: 18.134,
+					l: 40.592,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(173.91 18.134% 40.592%)",
+					variable: "var(--kds-color-background-disabled-primary)"
+				}
+			},
+			danger: {
+				light: {
+					h: 1.3489,
+					s: 43.031,
+					l: 37.79,
+					alpha: 1
+				},
+				dark: {
+					h: 1.3489,
+					s: 43.031,
+					l: 37.79,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(1.3489 43.031% 37.79%)",
+					variable: "var(--kds-color-background-disabled-danger)"
+				}
+			}
+		},
+		"success-bold": { initial: {
+			light: {
+				h: 111.3,
+				s: 47.5,
+				l: 31.4,
+				alpha: 1
+			},
+			dark: {
+				h: 123.7,
+				s: 46.7,
+				l: 20.6,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(111.3, 47.5%, 31.4%), hsl(123.7, 46.7%, 20.6%))",
+				variable: "var(--kds-color-background-success-bold-initial)"
+			}
+		} },
+		"info-bold": {
+			initial: {
+				light: {
+					h: 209.4,
+					s: 57.3,
+					l: 49.6,
+					alpha: 1
+				},
+				dark: {
+					h: 212.1,
+					s: 78.2,
+					l: 67.6,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(212.1, 78.2%, 67.6%))",
+					variable: "var(--kds-color-background-info-bold-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 208.2,
+					s: 62.9,
+					l: 41.2,
+					alpha: 1
+				},
+				dark: {
+					h: 213.6,
+					s: 91.6,
+					l: 76.7,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(208.2, 62.9%, 41.2%), hsl(213.6, 91.6%, 76.7%))",
+					variable: "var(--kds-color-background-info-bold-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 208.3,
+					s: 60.5,
+					l: 33.7,
+					alpha: 1
+				},
+				dark: {
+					h: 214.5,
+					s: 100,
+					l: 84.3,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
+					variable: "var(--kds-color-background-info-bold-active)"
+				}
+			}
+		}
+	},
+	"background-static": {
+		info: {
+			light: {
+				h: 216.7,
+				s: 100,
+				l: 96.5,
+				alpha: 1
+			},
+			dark: {
+				h: 210,
+				s: 50,
+				l: 27.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(216.7, 100%, 96.5%), hsl(210, 50%, 27.5%))",
+				variable: "var(--kds-color-background-static-info)"
+			}
+		},
+		"info-muted": {
+			light: {
+				h: 216.83,
+				s: 100.14,
+				l: 97.347,
+				alpha: 1
+			},
+			dark: {
+				h: 211.86,
+				s: 40.97,
+				l: 17.58,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(216.83 100.14% 97.347%), hsl(211.86 40.97% 17.58%))",
+				variable: "var(--kds-color-background-static-info-muted)"
+			}
+		},
+		warning: {
+			light: {
+				h: 30,
+				s: 95.2,
+				l: 91.8,
+				alpha: 1
+			},
+			dark: {
+				h: 13.1,
+				s: 66.1,
+				l: 23.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(30, 95.2%, 91.8%), hsl(13.1, 66.1%, 23.1%))",
+				variable: "var(--kds-color-background-static-warning)"
+			}
+		},
+		"warning-muted": {
+			light: {
+				h: 29.601,
+				s: 98.108,
+				l: 95.778,
+				alpha: 1
+			},
+			dark: {
+				h: 14.687,
+				s: 60.252,
+				l: 14.775,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(29.601 98.108% 95.778%), hsl(14.687 60.252% 14.775%))",
+				variable: "var(--kds-color-background-static-warning-muted)"
+			}
+		},
+		danger: {
+			light: {
+				h: 1.5,
+				s: 100,
+				l: 92.4,
+				alpha: 1
+			},
+			dark: {
+				h: 347.6,
+				s: 97.1,
+				l: 27.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(347.6, 97.1%, 27.3%))",
+				variable: "var(--kds-color-background-static-danger)"
+			}
+		},
+		"danger-muted": {
+			light: {
+				h: 0,
+				s: 100,
+				l: 97.1,
+				alpha: 1
+			},
+			dark: {
+				h: 356.76,
+				s: 65.215,
+				l: 15.117,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
+				variable: "var(--kds-color-background-static-danger-muted)"
+			}
+		},
+		success: {
+			light: {
+				h: 119.4,
+				s: 96.139,
+				l: 93.64,
+				alpha: 1
+			},
+			dark: {
+				h: 123.7,
+				s: 46.7,
+				l: 20.6,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(119.4 96.139% 93.64%), hsl(123.7, 46.7%, 20.6%))",
+				variable: "var(--kds-color-background-static-success)"
+			}
+		},
+		"success-muted": {
+			light: {
+				h: 125.38,
+				s: 64.795,
+				l: 97.496,
+				alpha: 1
+			},
+			dark: {
+				h: 128.3,
+				s: 38.542,
+				l: 10.352,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(125.38 64.795% 97.496%), hsl(128.3 38.542% 10.352%))",
+				variable: "var(--kds-color-background-static-success-muted)"
+			}
+		},
+		brand: {
+			light: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			dark: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(50.8, 100%, 50%)",
+				variable: "var(--kds-color-background-static-brand)"
+			}
+		},
+		overlay: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 12.9,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 22,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
+				variable: "var(--kds-color-background-static-overlay)"
+			}
+		},
+		"chart-0": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 94.1,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
+				variable: "var(--kds-color-background-static-chart-0)"
+			}
+		},
+		"chart-1": {
+			light: {
+				h: 176.1,
+				s: 66.7,
+				l: 22.4,
+				alpha: 1
+			},
+			dark: {
+				h: 173.4,
+				s: 37.1,
+				l: 38.6,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(173.4, 37.1%, 38.6%))",
+				variable: "var(--kds-color-background-static-chart-1)"
+			}
+		},
+		"chart-2": {
+			light: {
+				h: 171.8,
+				s: 27,
+				l: 47.8,
+				alpha: 1
+			},
+			dark: {
+				h: 176.1,
+				s: 66.7,
+				l: 22.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(171.8, 27%, 47.8%), hsl(176.1, 66.7%, 22.4%))",
+				variable: "var(--kds-color-background-static-chart-2)"
+			}
+		}
+	},
+	"text-and-icon": {
+		neutral: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 15.7,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 94.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+				variable: "var(--kds-color-text-and-icon-neutral)"
+			}
+		},
+		muted: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
+				variable: "var(--kds-color-text-and-icon-muted)"
+			}
+		},
+		subtle: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 43,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
+				variable: "var(--kds-color-text-and-icon-subtle)"
+			}
+		},
+		"neutral-inverted": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 98,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 15.7,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
+				variable: "var(--kds-color-text-and-icon-neutral-inverted)"
+			}
+		},
+		primary: {
+			light: {
+				h: 176.1,
+				s: 66.7,
+				l: 22.4,
+				alpha: 1
+			},
+			dark: {
+				h: 176.1,
+				s: 66.7,
+				l: 22.4,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(176.1, 66.7%, 22.4%)",
+				variable: "var(--kds-color-text-and-icon-primary)"
+			}
+		},
+		"primary-inverted": {
+			light: {
+				h: 165.6,
+				s: 67.6,
+				l: 92.7,
+				alpha: 1
+			},
+			dark: {
+				h: 165.6,
+				s: 67.6,
+				l: 92.7,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(165.6, 67.6%, 92.7%)",
+				variable: "var(--kds-color-text-and-icon-primary-inverted)"
+			}
+		},
+		selected: {
+			light: {
+				h: 176.1,
+				s: 66.7,
+				l: 22.4,
+				alpha: 1
+			},
+			dark: {
+				h: 168.8,
+				s: 34.4,
+				l: 75.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(168.8, 34.4%, 75.5%))",
+				variable: "var(--kds-color-text-and-icon-selected)"
+			}
+		},
+		"selected-inverted": {
+			light: {
+				h: 165,
+				s: 80,
+				l: 96.1,
+				alpha: 1
+			},
+			dark: {
+				h: 165,
+				s: 80,
+				l: 96.1,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(165, 80%, 96.1%)",
+				variable: "var(--kds-color-text-and-icon-selected-inverted)"
+			}
+		},
+		warning: {
+			light: {
+				h: 19,
+				s: 63.1,
+				l: 38.2,
+				alpha: 1
+			},
+			dark: {
+				h: 31.2,
+				s: 82.8,
+				l: 65.9,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
+				variable: "var(--kds-color-text-and-icon-warning)"
+			}
+		},
+		"warning-inverted": {
+			light: {
+				h: 31,
+				s: 100,
+				l: 82.5,
+				alpha: 1
+			},
+			dark: {
+				h: 31,
+				s: 100,
+				l: 82.5,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(31, 100%, 82.5%)",
+				variable: "var(--kds-color-text-and-icon-warning-inverted)"
+			}
+		},
+		danger: {
+			light: {
+				h: 348.8,
+				s: 90.9,
+				l: 34.5,
+				alpha: 1
+			},
+			dark: {
+				h: 3.5,
+				s: 100,
+				l: 79.6,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
+				variable: "var(--kds-color-text-and-icon-danger)"
+			}
+		},
+		"danger-inverted": {
+			light: {
+				h: 0,
+				s: 100,
+				l: 97.1,
+				alpha: 1
+			},
+			dark: {
+				h: 1.5,
+				s: 100,
+				l: 92.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 100%, 97.1%), hsl(1.5, 100%, 92.4%))",
+				variable: "var(--kds-color-text-and-icon-danger-inverted)"
+			}
+		},
+		success: {
+			light: {
+				h: 116.1,
+				s: 46.6,
+				l: 25.7,
+				alpha: 1
+			},
+			dark: {
+				h: 109,
+				s: 47.2,
+				l: 61.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(109, 47.2%, 61.4%))",
+				variable: "var(--kds-color-text-and-icon-success)"
+			}
+		},
+		"success-inverted": {
+			light: {
+				h: 120,
+				s: 95.3,
+				l: 91.6,
+				alpha: 1
+			},
+			dark: {
+				h: 120,
+				s: 95.3,
+				l: 91.6,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(120, 95.3%, 91.6%)",
+				variable: "var(--kds-color-text-and-icon-success-inverted)"
+			}
+		},
+		disabled: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 64,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 48.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%))",
+				variable: "var(--kds-color-text-and-icon-disabled)"
+			}
+		},
+		"disabled-inverted": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(0, 0%, 72.5%)",
+				variable: "var(--kds-color-text-and-icon-disabled-inverted)"
+			}
+		},
+		info: {
+			light: {
+				h: 208.3,
+				s: 60.5,
+				l: 33.7,
+				alpha: 1
+			},
+			dark: {
+				h: 213.6,
+				s: 91.6,
+				l: 76.7,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(213.6, 91.6%, 76.7%))",
+				variable: "var(--kds-color-text-and-icon-info)"
+			}
+		},
+		editor: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 11.4,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 94.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
+				variable: "var(--kds-color-text-and-icon-editor)"
+			}
+		}
+	},
+	border: {
+		neutral: {
+			light: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .4
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 99,
+				alpha: .5
+			},
+			css: {
+				value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+				variable: "var(--kds-color-border-neutral)"
+			}
+		},
+		muted: {
+			light: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .2
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 99,
+				alpha: .2
+			},
+			css: {
+				value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+				variable: "var(--kds-color-border-muted)"
+			}
+		},
+		subtle: {
+			light: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .1
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 99,
+				alpha: .1
+			},
+			css: {
+				value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+				variable: "var(--kds-color-border-subtle)"
+			}
+		},
+		"primary-bold": {
+			light: {
+				h: 176.7,
+				s: 82,
+				l: 17.5,
+				alpha: 1
+			},
+			dark: {
+				h: 176.7,
+				s: 82,
+				l: 17.5,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(176.7, 82%, 17.5%)",
+				variable: "var(--kds-color-border-primary-bold)"
+			}
+		},
+		primary: {
+			light: {
+				h: 169.8,
+				s: 30.6,
+				l: 66.1,
+				alpha: 1
+			},
+			dark: {
+				h: 168.8,
+				s: 34.4,
+				l: 75.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(169.8, 30.6%, 66.1%), hsl(168.8, 34.4%, 75.5%))",
+				variable: "var(--kds-color-border-primary)"
+			}
+		},
+		"selected-bold": {
+			light: {
+				h: 174.4,
+				s: 47.8,
+				l: 30.8,
+				alpha: 1
+			},
+			dark: {
+				h: 168.8,
+				s: 34.4,
+				l: 75.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(168.8, 34.4%, 75.5%))",
+				variable: "var(--kds-color-border-selected-bold)"
+			}
+		},
+		selected: {
+			light: {
+				h: 171.8,
+				s: 27,
+				l: 47.8,
+				alpha: 1
+			},
+			dark: {
+				h: 168,
+				s: 46.7,
+				l: 85.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%))",
+				variable: "var(--kds-color-border-selected)"
+			}
+		},
+		"selected-accent": {
+			light: {
+				h: 209.4,
+				s: 57.3,
+				l: 49.6,
+				alpha: 1
+			},
+			dark: {
+				h: 213.6,
+				s: 91.6,
+				l: 76.7,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
+				variable: "var(--kds-color-border-selected-accent)"
+			}
+		},
+		"warning-bold": {
+			light: {
+				h: 19,
+				s: 63.1,
+				l: 38.2,
+				alpha: 1
+			},
+			dark: {
+				h: 31,
+				s: 100,
+				l: 82.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31, 100%, 82.5%))",
+				variable: "var(--kds-color-border-warning-bold)"
+			}
+		},
+		warning: {
+			light: {
+				h: 30.8,
+				s: 79.3,
+				l: 73.5,
+				alpha: 1
+			},
+			dark: {
+				h: 13.1,
+				s: 66.1,
+				l: 23.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%))",
+				variable: "var(--kds-color-border-warning)"
+			}
+		},
+		"danger-bold": {
+			light: {
+				h: 348.8,
+				s: 90.9,
+				l: 34.5,
+				alpha: 1
+			},
+			dark: {
+				h: 3.5,
+				s: 100,
+				l: 79.6,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
+				variable: "var(--kds-color-border-danger-bold)"
+			}
+		},
+		danger: {
+			light: {
+				h: 3.4,
+				s: 100,
+				l: 86.1,
+				alpha: 1
+			},
+			dark: {
+				h: 348,
+				s: 94.3,
+				l: 20.8,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%))",
+				variable: "var(--kds-color-border-danger)"
+			}
+		},
+		"success-bold": {
+			light: {
+				h: 116.1,
+				s: 46.6,
+				l: 25.7,
+				alpha: 1
+			},
+			dark: {
+				h: 112,
+				s: 56.5,
+				l: 71.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(112, 56.5%, 71.2%))",
+				variable: "var(--kds-color-border-success-bold)"
+			}
+		},
+		success: {
+			light: {
+				h: 112,
+				s: 56.5,
+				l: 71.2,
+				alpha: 1
+			},
+			dark: {
+				h: 123.7,
+				s: 46.7,
+				l: 20.6,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%))",
+				variable: "var(--kds-color-border-success)"
+			}
+		},
+		"info-bold": {
+			light: {
+				h: 208.3,
+				s: 60.5,
+				l: 33.7,
+				alpha: 1
+			},
+			dark: {
+				h: 214.5,
+				s: 100,
+				l: 84.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
+				variable: "var(--kds-color-border-info-bold)"
+			}
+		},
+		info: {
+			light: {
+				h: 214.5,
+				s: 100,
+				l: 84.3,
+				alpha: 1
+			},
+			dark: {
+				h: 210,
+				s: 50,
+				l: 27.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%))",
+				variable: "var(--kds-color-border-info)"
+			}
+		},
+		transparent: {
+			light: {
+				h: 345,
+				s: 0,
+				l: 11.4,
+				alpha: 0
+			},
+			dark: {
+				h: 345,
+				s: 0,
+				l: 11.4,
+				alpha: 0
+			},
+			css: {
+				value: "hsl(345 0% 11.4% / 0)",
+				variable: "var(--kds-color-border-transparent)"
+			}
+		},
+		disabled: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 48.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%))",
+				variable: "var(--kds-color-border-disabled)"
+			}
+		},
+		brand: {
+			light: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			dark: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(50.8, 100%, 50%)",
+				variable: "var(--kds-color-border-brand)"
+			}
+		},
+		"neutral-bold-initial": {
+			light: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .4
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 99,
+				alpha: .4
+			},
+			css: {
+				value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
+				variable: "var(--kds-color-border-neutral-bold-initial)"
+			}
+		},
+		"neutral-bold-hover": {
+			light: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .64
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 99,
+				alpha: .58
+			},
+			css: {
+				value: "light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
+				variable: "var(--kds-color-border-neutral-bold-hover)"
+			}
+		},
+		"neutral-bold-active": {
+			light: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .74
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 99,
+				alpha: .68
+			},
+			css: {
+				value: "light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
+				variable: "var(--kds-color-border-neutral-bold-active)"
+			}
+		}
+	},
+	focus: {
+		outline: {
+			light: {
+				h: 209.4,
+				s: 57.3,
+				l: 49.6,
+				alpha: 1
+			},
+			dark: {
+				h: 213.6,
+				s: 91.6,
+				l: 76.7,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
+				variable: "var(--kds-color-focus-outline)"
+			}
+		},
+		background: {
+			light: {
+				h: 215.7,
+				s: 100,
+				l: 91.8,
+				alpha: .4
+			},
+			dark: {
+				h: 209.4,
+				s: 49.5,
+				l: 20.2,
+				alpha: .5
+			},
+			css: {
+				value: "light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5))",
+				variable: "var(--kds-color-focus-background)"
+			}
+		}
+	},
+	blanket: { default: {
+		light: {
+			h: 345,
+			s: 0,
+			l: 11.4,
+			alpha: .8
+		},
+		dark: {
+			h: 345,
+			s: 0,
+			l: 11.4,
+			alpha: .8
+		},
+		css: {
+			value: "hsl(345 0% 11.4% / 0.8)",
+			variable: "var(--kds-color-blanket-default)"
+		}
+	} },
+	"nodes-and-variables": {
+		"flow-variable": {
+			light: {
+				h: 359.6,
+				s: 84.3,
+				l: 62.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 100,
+				l: 66.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
+				variable: "var(--kds-color-nodes-and-variables-flow-variable)"
+			}
+		},
+		loop: {
+			light: {
+				h: 187.7,
+				s: 51.7,
+				l: 76.5,
+				alpha: 1
+			},
+			dark: {
+				h: 187.7,
+				s: 51.7,
+				l: 76.5,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(187.7, 51.7%, 76.5%)",
+				variable: "var(--kds-color-nodes-and-variables-loop)"
+			}
+		},
+		manipulator: {
+			light: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			dark: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(50.8, 100%, 50%)",
+				variable: "var(--kds-color-nodes-and-variables-manipulator)"
+			}
+		},
+		predictor: {
+			light: {
+				h: 106.5,
+				s: 42.6,
+				l: 54.9,
+				alpha: 1
+			},
+			dark: {
+				h: 109,
+				s: 47.2,
+				l: 61.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
+				variable: "var(--kds-color-nodes-and-variables-predictor)"
+			}
+		},
+		source: {
+			light: {
+				h: 30,
+				s: 80.4,
+				l: 60,
+				alpha: 1
+			},
+			dark: {
+				h: 30,
+				s: 80.4,
+				l: 60,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(30, 80.4%, 60%)",
+				variable: "var(--kds-color-nodes-and-variables-source)"
+			}
+		},
+		visualizer: {
+			light: {
+				h: 193.1,
+				s: 60.2,
+				l: 43.3,
+				alpha: 1
+			},
+			dark: {
+				h: 191.3,
+				s: 57.1,
+				l: 54.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
+				variable: "var(--kds-color-nodes-and-variables-visualizer)"
+			}
+		},
+		widget: {
+			light: {
+				h: 193.1,
+				s: 60.2,
+				l: 43.3,
+				alpha: 1
+			},
+			dark: {
+				h: 191.3,
+				s: 57.1,
+				l: 54.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
+				variable: "var(--kds-color-nodes-and-variables-widget)"
+			}
+		},
+		scope: {
+			light: {
+				h: 304.6,
+				s: 27.4,
+				l: 46.5,
+				alpha: 1
+			},
+			dark: {
+				h: 308.3,
+				s: 31.6,
+				l: 55.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(304.6, 27.4%, 46.5%), hsl(308.3, 31.6%, 55.3%))",
+				variable: "var(--kds-color-nodes-and-variables-scope)"
+			}
+		},
+		learner: {
+			light: {
+				h: 67.3,
+				s: 67.8,
+				l: 54.9,
+				alpha: 1
+			},
+			dark: {
+				h: 65.4,
+				s: 68.5,
+				l: 65.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
+				variable: "var(--kds-color-nodes-and-variables-learner)"
+			}
+		},
+		sink: {
+			light: {
+				h: 359.6,
+				s: 84.3,
+				l: 62.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 100,
+				l: 66.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
+				variable: "var(--kds-color-nodes-and-variables-sink)"
+			}
+		},
+		container: {
+			light: {
+				h: 69.4,
+				s: 53.5,
+				l: 39.6,
+				alpha: 1
+			},
+			dark: {
+				h: 69.4,
+				s: 53.5,
+				l: 39.6,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(69.4, 53.5%, 39.6%)",
+				variable: "var(--kds-color-nodes-and-variables-container)"
+			}
+		},
+		unknown: {
+			light: {
+				h: 353,
+				s: 74.7,
+				l: 44.9,
+				alpha: 1
+			},
+			dark: {
+				h: 356.3,
+				s: 76.8,
+				l: 54.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(356.3, 76.8%, 54.3%))",
+				variable: "var(--kds-color-nodes-and-variables-unknown)"
+			}
+		},
+		other: {
+			light: {
+				h: 29,
+				s: 43,
+				l: 58,
+				alpha: 1
+			},
+			dark: {
+				h: 30,
+				s: 47,
+				l: 68,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
+				variable: "var(--kds-color-nodes-and-variables-other)"
+			}
+		},
+		metanode: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 99,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 12.9,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
+				variable: "var(--kds-color-nodes-and-variables-metanode)"
+			}
+		},
+		metanodeBorder: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 94.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 94.1%))",
+				variable: "var(--kds-color-nodes-and-variables-metanode-border)"
+			}
+		},
+		component: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 43,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 43%))",
+				variable: "var(--kds-color-nodes-and-variables-component)"
+			}
+		},
+		specialState: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 99,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 12.9,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
+				variable: "var(--kds-color-nodes-and-variables-special-state)"
+			}
+		},
+		forbiddenBorder: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 18.8,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 18.8%), hsl(0, 0%, 90.2%))",
+				variable: "var(--kds-color-nodes-and-variables-forbidden-border)"
+			}
+		},
+		forbidden: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 22,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
+				variable: "var(--kds-color-nodes-and-variables-forbidden)"
+			}
+		},
+		warningBorder: {
+			light: {
+				h: 19,
+				s: 63.1,
+				l: 38.2,
+				alpha: 1
+			},
+			dark: {
+				h: 31.2,
+				s: 82.8,
+				l: 65.9,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
+				variable: "var(--kds-color-nodes-and-variables-warning-border)"
+			}
+		},
+		warning: {
+			light: {
+				h: 31,
+				s: 100,
+				l: 82.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 22,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(31, 100%, 82.5%), hsl(0, 0%, 22%))",
+				variable: "var(--kds-color-nodes-and-variables-warning)"
+			}
+		},
+		errorBorder: {
+			light: {
+				h: 348.8,
+				s: 90.9,
+				l: 34.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 100,
+				l: 66.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(0, 100%, 66.1%))",
+				variable: "var(--kds-color-nodes-and-variables-error-border)"
+			}
+		},
+		error: {
+			light: {
+				h: 1.5,
+				s: 100,
+				l: 92.4,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 22,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(0, 0%, 22%))",
+				variable: "var(--kds-color-nodes-and-variables-error)"
+			}
+		},
+		loadingBorder: {
+			light: {
+				h: 208.3,
+				s: 60.5,
+				l: 33.7,
+				alpha: 1
+			},
+			dark: {
+				h: 214.5,
+				s: 100,
+				l: 84.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
+				variable: "var(--kds-color-nodes-and-variables-loading-border)"
+			}
+		},
+		loading: {
+			light: {
+				h: 215.7,
+				s: 100,
+				l: 91.8,
+				alpha: 1
+			},
+			dark: {
+				h: 209.4,
+				s: 49.5,
+				l: 20.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(215.7, 100%, 91.8%), hsl(209.4, 49.5%, 20.2%))",
+				variable: "var(--kds-color-nodes-and-variables-loading)"
+			}
+		},
+		configuration: {
+			light: {
+				h: 64.6,
+				s: 68.6,
+				l: 70,
+				alpha: 1
+			},
+			dark: {
+				h: 69.5,
+				s: 59.5,
+				l: 85.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(64.6, 68.6%, 70.0%), hsl(69.5, 59.5%, 85.5%))",
+				variable: "var(--kds-color-nodes-and-variables-configuration)"
+			}
+		},
+		quickform: {
+			light: {
+				h: 212.1,
+				s: 78.2,
+				l: 67.6,
+				alpha: 1
+			},
+			dark: {
+				h: 214.5,
+				s: 100,
+				l: 84.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(212.1, 78.2%, 67.6%), hsl(214.5, 100%, 84.3%))",
+				variable: "var(--kds-color-nodes-and-variables-quickform)"
+			}
+		}
+	},
+	port: {
+		data: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 11.4,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 94.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
+				variable: "var(--kds-color-port-data)"
+			}
+		},
+		"flow-variable": {
+			light: {
+				h: 359.6,
+				s: 84.3,
+				l: 62.5,
+				alpha: 1
+			},
+			dark: {
+				h: 359.6,
+				s: 84.3,
+				l: 62.5,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(359.6, 84.3%, 62.5%)",
+				variable: "var(--kds-color-port-flow-variable)"
+			}
+		},
+		"neutral-inverted": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 99,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 12.9,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
+				variable: "var(--kds-color-port-neutral-inverted)"
+			}
+		}
+	},
+	annotations: {
+		specialNodes: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 32.2%))",
+				variable: "var(--kds-color-annotations-special-nodes)"
+			}
+		},
+		specialNodesBold: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
+				variable: "var(--kds-color-annotations-special-nodes-bold)"
+			}
+		},
+		visualizer: {
+			light: {
+				h: 193.1,
+				s: 60.2,
+				l: 43.3,
+				alpha: 1
+			},
+			dark: {
+				h: 191.3,
+				s: 57.1,
+				l: 54.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
+				variable: "var(--kds-color-annotations-visualizer)"
+			}
+		},
+		loadingBold: {
+			light: {
+				h: 208.3,
+				s: 60.5,
+				l: 33.7,
+				alpha: 1
+			},
+			dark: {
+				h: 214.5,
+				s: 100,
+				l: 84.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
+				variable: "var(--kds-color-annotations-loading-bold)"
+			}
+		},
+		manipulator: {
+			light: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			dark: {
+				h: 50.8,
+				s: 100,
+				l: 50,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(50.8, 100%, 50%)",
+				variable: "var(--kds-color-annotations-manipulator)"
+			}
+		},
+		source: {
+			light: {
+				h: 30,
+				s: 80.4,
+				l: 60,
+				alpha: 1
+			},
+			dark: {
+				h: 30,
+				s: 80.4,
+				l: 60,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(30, 80.4%, 60%)",
+				variable: "var(--kds-color-annotations-source)"
+			}
+		},
+		sink: {
+			light: {
+				h: 359.6,
+				s: 84.3,
+				l: 62.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 100,
+				l: 66.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
+				variable: "var(--kds-color-annotations-sink)"
+			}
+		},
+		learner: {
+			light: {
+				h: 67.3,
+				s: 67.8,
+				l: 54.9,
+				alpha: 1
+			},
+			dark: {
+				h: 65.4,
+				s: 68.5,
+				l: 65.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
+				variable: "var(--kds-color-annotations-learner)"
+			}
+		},
+		predictor: {
+			light: {
+				h: 106.5,
+				s: 42.6,
+				l: 54.9,
+				alpha: 1
+			},
+			dark: {
+				h: 109,
+				s: 47.2,
+				l: 61.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
+				variable: "var(--kds-color-annotations-predictor)"
+			}
+		},
+		container: {
+			light: {
+				h: 66.5,
+				s: 64.4,
+				l: 80.2,
+				alpha: 1
+			},
+			dark: {
+				h: 69.5,
+				s: 59.5,
+				l: 85.5,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(66.5, 64.4%, 80.2%), hsl(69.5, 59.5%, 85.5%))",
+				variable: "var(--kds-color-annotations-container)"
+			}
+		},
+		"flow-variable": {
+			light: {
+				h: 173.4,
+				s: 37.1,
+				l: 38.6,
+				alpha: 1
+			},
+			dark: {
+				h: 171.8,
+				s: 27,
+				l: 47.8,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(173.4, 37.1%, 38.6%), hsl(171.8, 27%, 47.8%))",
+				variable: "var(--kds-color-annotations-flow-variable)"
+			}
+		},
+		tealDark: {
+			light: {
+				h: 176.7,
+				s: 82,
+				l: 17.5,
+				alpha: 1
+			},
+			dark: {
+				h: 176.1,
+				s: 66.7,
+				l: 22.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(176.1, 66.7%, 22.4%))",
+				variable: "var(--kds-color-annotations-teal-dark)"
+			}
+		},
+		other: {
+			light: {
+				h: 29,
+				s: 43,
+				l: 58,
+				alpha: 1
+			},
+			dark: {
+				h: 30,
+				s: 47,
+				l: 68,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
+				variable: "var(--kds-color-annotations-other)"
+			}
+		},
+		loop: {
+			light: {
+				h: 25,
+				s: 30,
+				l: 35,
+				alpha: 1
+			},
+			dark: {
+				h: 27,
+				s: 35,
+				l: 44,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(25, 30%, 35%), hsl(27, 35%, 44%))",
+				variable: "var(--kds-color-annotations-loop)"
+			}
+		}
+	},
+	state: {
+		error: {
+			light: {
+				h: 353,
+				s: 74.7,
+				l: 44.9,
+				alpha: 1
+			},
+			dark: {
+				h: 347.6,
+				s: 97.1,
+				l: 27.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(347.6, 97.1%, 27.3%))",
+				variable: "var(--kds-color-state-error)"
+			}
+		},
+		"error-border": {
+			light: {
+				h: 348,
+				s: 94.3,
+				l: 20.8,
+				alpha: 1
+			},
+			dark: {
+				h: 2.6,
+				s: 100,
+				l: 72.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%))",
+				variable: "var(--kds-color-state-error-border)"
+			}
+		},
+		warning: {
+			light: {
+				h: 47.6,
+				s: 100,
+				l: 67.6,
+				alpha: 1
+			},
+			dark: {
+				h: 43.9,
+				s: 100,
+				l: 26.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(47.6, 100%, 67.6%), hsl(43.9, 100%, 26.3%))",
+				variable: "var(--kds-color-state-warning)"
+			}
+		},
+		"warning-border": {
+			light: {
+				h: 19,
+				s: 63.1,
+				l: 38.2,
+				alpha: 1
+			},
+			dark: {
+				h: 49.1,
+				s: 99.1,
+				l: 43.7,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%))",
+				variable: "var(--kds-color-state-warning-border)"
+			}
+		},
+		success: {
+			light: {
+				h: 106.5,
+				s: 42.6,
+				l: 54.9,
+				alpha: 1
+			},
+			dark: {
+				h: 107.6,
+				s: 46,
+				l: 37.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(107.6, 46%, 37.1%))",
+				variable: "var(--kds-color-state-success)"
+			}
+		},
+		"success-border": {
+			light: {
+				h: 116.1,
+				s: 46.6,
+				l: 25.7,
+				alpha: 1
+			},
+			dark: {
+				h: 106.5,
+				s: 42.6,
+				l: 54.9,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
+				variable: "var(--kds-color-state-success-border)"
+			}
+		},
+		loading: {
+			light: {
+				h: 208.3,
+				s: 60.5,
+				l: 33.7,
+				alpha: 1
+			},
+			dark: {
+				h: 214.5,
+				s: 100,
+				l: 84.3,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
+				variable: "var(--kds-color-state-loading)"
+			}
+		},
+		inactive: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 99,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 11.4,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 11.4%))",
+				variable: "var(--kds-color-state-inactive)"
+			}
+		},
+		"inactive-border": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
+				variable: "var(--kds-color-state-inactive-border)"
+			}
+		},
+		disabled: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 22,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 22%))",
+				variable: "var(--kds-color-state-disabled)"
+			}
+		},
+		"disabled-border": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 48.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 48.2,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(0, 0%, 48.2%)",
+				variable: "var(--kds-color-state-disabled-border)"
+			}
+		},
+		background: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
+				variable: "var(--kds-color-state-background)"
+			}
+		}
+	},
+	connector: {
+		data: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 15.7,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 94.1,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+				variable: "var(--kds-color-connector-data)"
+			}
+		},
+		"flow-variable": {
+			light: {
+				h: 359.6,
+				s: 84.3,
+				l: 62.5,
+				alpha: 1
+			},
+			dark: {
+				h: 359.6,
+				s: 84.3,
+				l: 62.5,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(359.6, 84.3%, 62.5%)",
+				variable: "var(--kds-color-connector-flow-variable)"
+			}
+		}
+	},
+	elevation: {
+		top: {
+			light: {
+				h: 210,
+				s: 0,
+				l: 72.5,
+				alpha: .32
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .9
+			},
+			css: {
+				value: "light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9))",
+				variable: "var(--kds-color-elevation-top)"
+			}
+		},
+		middle: {
+			light: {
+				h: 180,
+				s: 0,
+				l: 32.2,
+				alpha: .14
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .94
+			},
+			css: {
+				value: "light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94))",
+				variable: "var(--kds-color-elevation-middle)"
+			}
+		},
+		bottom: {
+			light: {
+				h: 180,
+				s: 0,
+				l: 32.2,
+				alpha: .12
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .98
+			},
+			css: {
+				value: "light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98))",
+				variable: "var(--kds-color-elevation-bottom)"
+			}
+		},
+		knob: {
+			light: {
+				h: 180,
+				s: 0,
+				l: 32.2,
+				alpha: .5
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .6
+			},
+			css: {
+				value: "light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6))",
+				variable: "var(--kds-color-elevation-knob)"
+			}
+		}
+	},
+	DesktopHeader: {
+		background: {
+			default: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 10.2,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 10.2,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(0, 0%, 10.2%)",
+					variable: "var(--kds-color-desktop-header-background-default)"
+				}
+			},
+			muted: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 98,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 15.7,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
+					variable: "var(--kds-color-desktop-header-background-muted)"
+				}
+			},
+			accent: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 98,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 15.7,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
+					variable: "var(--kds-color-desktop-header-background-accent)"
+				}
+			}
+		},
+		"text-and-icon": {
+			neutral: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 15.7,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 94.1,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+					variable: "var(--kds-color-desktop-header-text-and-icon-neutral)"
+				}
+			},
+			muted: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 32.2,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 90.2,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
+					variable: "var(--kds-color-desktop-header-text-and-icon-muted)"
+				}
+			}
+		},
+		border: { default: {
+			light: {
+				h: 330,
+				s: 0,
+				l: 10.2,
+				alpha: .1
+			},
+			dark: {
+				h: 330,
+				s: 0,
+				l: 99,
+				alpha: .1
+			},
+			css: {
+				value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+				variable: "var(--kds-color-desktop-header-border-default)"
+			}
+		} }
+	},
+	TableHeader: { background: { default: {
+		light: {
+			h: 0,
+			s: 0,
+			l: 99,
+			alpha: 1
+		},
+		dark: {
+			h: 0,
+			s: 0,
+			l: 99,
+			alpha: 1
+		},
+		css: {
+			value: "hsl(0, 0%, 99%)",
+			variable: "var(--kds-color-table-header-background-default)"
+		}
+	} } },
+	ToggleSwitch: {
+		knob: {
+			initial: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 99,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 99,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(0, 0%, 99%)",
+					variable: "var(--kds-color-toggle-switch-knob-initial)"
+				}
+			},
+			disabled: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 90.2,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 90.2,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(0, 0%, 90.2%)",
+					variable: "var(--kds-color-toggle-switch-knob-disabled)"
+				}
+			}
+		},
+		icon: {
+			on: {
+				light: {
+					h: 176.1,
+					s: 66.7,
+					l: 22.4,
+					alpha: 1
+				},
+				dark: {
+					h: 176.1,
+					s: 66.7,
+					l: 22.4,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(176.1, 66.7%, 22.4%)",
+					variable: "var(--kds-color-toggle-switch-icon-on)"
+				}
+			},
+			off: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 43,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 43,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(0, 0%, 43%)",
+					variable: "var(--kds-color-toggle-switch-icon-off)"
+				}
+			},
+			disabled: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 64,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 64,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(0, 0%, 64%)",
+					variable: "var(--kds-color-toggle-switch-icon-disabled)"
+				}
+			}
+		}
+	},
+	LoadingSpinner: {
+		progress: {
+			onPrimary: {
+				light: {
+					h: 165.6,
+					s: 67.6,
+					l: 92.7,
+					alpha: 1
+				},
+				dark: {
+					h: 165.6,
+					s: 67.6,
+					l: 92.7,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(165.6 67.6% 92.7%)",
+					variable: "var(--kds-color-loading-spinner-progress-on-primary)"
+				}
+			},
+			onSurface: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 15.7,
+					alpha: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 94.1,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+					variable: "var(--kds-color-loading-spinner-progress-on-surface)"
+				}
+			}
+		},
+		track: {
+			onPrimary: {
+				light: {
+					h: 165.6,
+					s: 67.6,
+					l: 92.7,
+					alpha: .24
+				},
+				dark: {
+					h: 165.6,
+					s: 67.6,
+					l: 92.7,
+					alpha: .24
+				},
+				css: {
+					value: "hsl(165.6 67.6% 92.7% / 0.24)",
+					variable: "var(--kds-color-loading-spinner-track-on-primary)"
+				}
+			},
+			onSurface: {
+				light: {
+					h: 332.73,
+					s: 0,
+					l: 15.7,
+					alpha: .24
+				},
+				dark: {
+					h: 240,
+					s: 0,
+					l: 94.1,
+					alpha: .24
+				},
+				css: {
+					value: "light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24))",
+					variable: "var(--kds-color-loading-spinner-track-on-surface)"
+				}
+			}
+		}
+	},
+	Tooltip: {
+		background: { default: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 12.9,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 22,
+				alpha: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
+				variable: "var(--kds-color-tooltip-background-default)"
+			}
+		} },
+		"text-and-icon": { neutral: {
+			light: {
+				h: 0,
+				s: 0,
+				l: 98,
+				alpha: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 98,
+				alpha: 1
+			},
+			css: {
+				value: "hsl(0, 0%, 98%)",
+				variable: "var(--kds-color-tooltip-text-and-icon-neutral)"
+			}
+		} }
+	},
+	TextHighlight: { background: { default: {
+		light: {
+			h: 212.1,
+			s: 78.2,
+			l: 67.6,
+			alpha: .6
+		},
+		dark: {
+			h: 212.1,
+			s: 78.2,
+			l: 67.6,
+			alpha: .6
+		},
+		css: {
+			value: "hsl(212.1 78.2% 67.6% / 0.6)",
+			variable: "var(--kds-color-text-highlight-background-default)"
+		}
+	} } },
+	Avatar: {
+		background: {
+			red: {
+				light: {
+					h: 3.5,
+					s: 100,
+					l: 79.6,
+					alpha: 1
+				},
+				dark: {
+					h: 3.5,
+					s: 100,
+					l: 79.6,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(3.5, 100%, 79.6%)",
+					variable: "var(--kds-color-avatar-background-red)"
+				}
+			},
+			orange: {
+				light: {
+					h: 31.2,
+					s: 82.8,
+					l: 65.9,
+					alpha: 1
+				},
+				dark: {
+					h: 31.2,
+					s: 82.8,
+					l: 65.9,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(31.2, 82.8%, 65.9%)",
+					variable: "var(--kds-color-avatar-background-orange)"
+				}
+			},
+			yellow: {
+				light: {
+					h: 50.8,
+					s: 100,
+					l: 50,
+					alpha: 1
+				},
+				dark: {
+					h: 50.8,
+					s: 100,
+					l: 50,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(50.8, 100%, 50%)",
+					variable: "var(--kds-color-avatar-background-yellow)"
+				}
+			},
+			green: {
+				light: {
+					h: 109,
+					s: 47.2,
+					l: 61.4,
+					alpha: 1
+				},
+				dark: {
+					h: 109,
+					s: 47.2,
+					l: 61.4,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(109, 47.2%, 61.4%)",
+					variable: "var(--kds-color-avatar-background-green)"
+				}
+			},
+			teal: {
+				light: {
+					h: 169.8,
+					s: 30.6,
+					l: 66.1,
+					alpha: 1
+				},
+				dark: {
+					h: 169.8,
+					s: 30.6,
+					l: 66.1,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(169.8, 30.6%, 66.1%)",
+					variable: "var(--kds-color-avatar-background-teal)"
+				}
+			},
+			blue: {
+				light: {
+					h: 213.6,
+					s: 91.6,
+					l: 76.7,
+					alpha: 1
+				},
+				dark: {
+					h: 213.6,
+					s: 91.6,
+					l: 76.7,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(213.6, 91.6%, 76.7%)",
+					variable: "var(--kds-color-avatar-background-blue)"
+				}
+			},
+			purple: {
+				light: {
+					h: 320,
+					s: 44.7,
+					l: 81.6,
+					alpha: 1
+				},
+				dark: {
+					h: 320,
+					s: 44.7,
+					l: 81.6,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(320.0, 44.7%, 81.6%)",
+					variable: "var(--kds-color-avatar-background-purple)"
+				}
+			},
+			aquamarine: {
+				light: {
+					h: 185.8,
+					s: 49.2,
+					l: 87.6,
+					alpha: 1
+				},
+				dark: {
+					h: 185.8,
+					s: 49.2,
+					l: 87.6,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(185.8, 49.2%, 87.6%)",
+					variable: "var(--kds-color-avatar-background-aquamarine)"
+				}
+			},
+			grassgreen: {
+				light: {
+					h: 63.4,
+					s: 68.5,
+					l: 75.1,
+					alpha: 1
+				},
+				dark: {
+					h: 63.4,
+					s: 68.5,
+					l: 75.1,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(63.4, 68.5%, 75.1%)",
+					variable: "var(--kds-color-avatar-background-grassgreen)"
+				}
+			},
+			brown: {
+				light: {
+					h: 30,
+					s: 47,
+					l: 68,
+					alpha: 1
+				},
+				dark: {
+					h: 30,
+					s: 47,
+					l: 68,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(30, 47%, 68%)",
+					variable: "var(--kds-color-avatar-background-brown)"
+				}
+			},
+			empty: {
+				light: {
+					h: 330,
+					s: 0,
+					l: 94.521,
+					alpha: 1
+				},
+				dark: {
+					h: 330,
+					s: 0,
+					l: 30.187,
+					alpha: 1
+				},
+				css: {
+					value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
+					variable: "var(--kds-color-avatar-background-empty)"
+				}
+			}
+		},
+		"text-and-icon": {
+			red: {
+				light: {
+					h: 348,
+					s: 94.3,
+					l: 20.8,
+					alpha: 1
+				},
+				dark: {
+					h: 348,
+					s: 94.3,
+					l: 20.8,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(348, 94.3%, 20.8%)",
+					variable: "var(--kds-color-avatar-text-and-icon-red)"
+				}
+			},
+			orange: {
+				light: {
+					h: 13.1,
+					s: 66.1,
+					l: 23.1,
+					alpha: 1
+				},
+				dark: {
+					h: 13.1,
+					s: 66.1,
+					l: 23.1,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(13.1, 66.1%, 23.1%)",
+					variable: "var(--kds-color-avatar-text-and-icon-orange)"
+				}
+			},
+			yellow: {
+				light: {
+					h: 44.3,
+					s: 94.2,
+					l: 13.5,
+					alpha: 1
+				},
+				dark: {
+					h: 44.3,
+					s: 94.2,
+					l: 13.5,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(44.3, 94.2%, 13.5%)",
+					variable: "var(--kds-color-avatar-text-and-icon-yellow)"
+				}
+			},
+			green: {
+				light: {
+					h: 132.3,
+					s: 52,
+					l: 14.7,
+					alpha: 1
+				},
+				dark: {
+					h: 132.3,
+					s: 52,
+					l: 14.7,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(132.3, 52%, 14.7%)",
+					variable: "var(--kds-color-avatar-text-and-icon-green)"
+				}
+			},
+			teal: {
+				light: {
+					h: 174.5,
+					s: 93.2,
+					l: 11.6,
+					alpha: 1
+				},
+				dark: {
+					h: 174.5,
+					s: 93.2,
+					l: 11.6,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(174.5, 93.2%, 11.6%)",
+					variable: "var(--kds-color-avatar-text-and-icon-teal)"
+				}
+			},
+			blue: {
+				light: {
+					h: 209.4,
+					s: 49.5,
+					l: 20.2,
+					alpha: 1
+				},
+				dark: {
+					h: 209.4,
+					s: 49.5,
+					l: 20.2,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(209.4, 49.5%, 20.2%)",
+					variable: "var(--kds-color-avatar-text-and-icon-blue)"
+				}
+			},
+			purple: {
+				light: {
+					h: 295.5,
+					s: 33.9,
+					l: 23.1,
+					alpha: 1
+				},
+				dark: {
+					h: 295.5,
+					s: 33.9,
+					l: 23.1,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(295.5, 33.9%, 23.1%)",
+					variable: "var(--kds-color-avatar-text-and-icon-purple)"
+				}
+			},
+			aquamarine: {
+				light: {
+					h: 200.9,
+					s: 63.2,
+					l: 26.7,
+					alpha: 1
+				},
+				dark: {
+					h: 200.9,
+					s: 63.2,
+					l: 26.7,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(200.9, 63.2%, 26.7%)",
+					variable: "var(--kds-color-avatar-text-and-icon-aquamarine)"
+				}
+			},
+			grassgreen: {
+				light: {
+					h: 72.2,
+					s: 39.2,
+					l: 24.5,
+					alpha: 1
+				},
+				dark: {
+					h: 72.2,
+					s: 39.2,
+					l: 24.5,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(72.2, 39.2%, 24.5%)",
+					variable: "var(--kds-color-avatar-text-and-icon-grassgreen)"
+				}
+			},
+			brown: {
+				light: {
+					h: 23,
+					s: 27,
+					l: 24,
+					alpha: 1
+				},
+				dark: {
+					h: 23,
+					s: 27,
+					l: 24,
+					alpha: 1
+				},
+				css: {
+					value: "hsl(23, 27%, 24%)",
+					variable: "var(--kds-color-avatar-text-and-icon-brown)"
+				}
+			}
+		}
+	}
+};
+//#endregion
+//#region src/toasts/ToastStack/injectionKeys.ts
+var TOAST_STACK_ID = Symbol("toast-stack-id");
+//#endregion
+//#region src/toasts/Toast/ToastButton.vue
+var ToastButton_default = /* @__PURE__ */ defineComponent({
+	__name: "ToastButton",
+	props: {
+		callback: { type: Function },
+		to: {},
+		href: {},
+		icon: {},
+		ariaLabel: {},
+		text: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const mergedTo = computed(() => {
+			if (props.to) return props.to;
+			return props.href;
+		});
+		const target = computed(() => {
+			if (props.href) return "_blank";
+			return null;
+		});
+		const callback = computed(() => {
+			if (typeof props.callback === "function") return props.callback;
+		});
+		const labelAndIcon = computed(() => props.text === void 0 ? {
+			leadingIcon: props.icon,
+			ariaLabel: props.ariaLabel
+		} : {
+			label: props.text,
+			leadingIcon: props.icon
+		});
+		return (_ctx, _cache) => {
+			return mergedTo.value ? (openBlock(), createBlock(unref(KdsLinkButton), mergeProps({
+				key: 0,
+				variant: "transparent",
+				size: "xsmall",
+				to: mergedTo.value,
+				target: target.value,
+				rel: target.value ? "noopener noreferrer" : null
+			}, labelAndIcon.value, { onClick: callback.value }), null, 16, [
+				"to",
+				"target",
+				"rel",
+				"onClick"
+			])) : (openBlock(), createBlock(unref(KdsButton), mergeProps({
+				key: 1,
+				variant: "transparent",
+				size: "xsmall"
+			}, labelAndIcon.value, { onClick: callback.value }), null, 16, ["onClick"]));
+		};
+	}
 });
-
-const _hoisted_1 = { class: "container" };
-const _hoisted_2 = { class: "type-indicator" };
-const _hoisted_3 = { class: "content" };
-const _hoisted_4 = { class: "headline-wrapper" };
-const _hoisted_5 = { class: "headline" };
-const _hoisted_6 = {
-  key: 0,
-  class: "message"
+//#endregion
+//#region src/toasts/Toast/Toast.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "container" };
+var _hoisted_2 = { class: "type-indicator" };
+var _hoisted_3 = { class: "content" };
+var _hoisted_4 = { class: "headline-wrapper" };
+var _hoisted_5 = { class: "headline" };
+var _hoisted_6 = {
+	key: 0,
+	class: "message"
 };
-const _hoisted_7 = {
-  key: 1,
-  class: "message"
+var _hoisted_7 = {
+	key: 1,
+	class: "message"
 };
-const _hoisted_8 = {
-  key: 2,
-  class: "buttons"
+var _hoisted_8 = {
+	key: 2,
+	class: "buttons"
 };
-const MAX_MESSAGE_LENGTH = 160;
-const AUTO_REMOVE_DURATION = 7e3;
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "Toast",
-  props: {
-    type: { default: () => toastType.INFO },
-    headline: { default: "" },
-    message: { default: "" },
-    buttons: { default: () => [] },
-    component: { default: null },
-    autoRemove: { type: Boolean, default: true },
-    active: { type: Boolean, default: true },
-    deduplicationKey: {},
-    meta: {},
-    dismissible: { type: Boolean, default: true }
-  },
-  emits: ["remove", "autoRemove"],
-  setup(__props, { emit: __emit }) {
-    useCssVars((_ctx) => ({
-      "f2f3d888": mainColor.value,
-      "v42f46fe7": backgroundColor.value,
-      "v248d58a9": borderColor.value
-    }));
-    const availableHeadline = computed(() => {
-      return __props.headline ? __props.headline : capitalize(__props.type);
-    });
-    const iconMap = {
-      [toastType.INFO]: "circle-info",
-      [toastType.ERROR]: "circle-error",
-      [toastType.SUCCESS]: "circle-success",
-      [toastType.WARNING]: "warning"
-    };
-    const typeIndicatorIcon = computed(() => iconMap[__props.type]);
-    const colorMap = {
-      [toastType.INFO]: {
-        textAndIcon: "var(--kds-color-text-and-icon-info)",
-        background: "var(--kds-color-background-static-info-muted)",
-        border: "var(--kds-border-base-info)"
-      },
-      [toastType.ERROR]: {
-        textAndIcon: "var(--kds-color-text-and-icon-danger)",
-        background: "var(--kds-color-background-static-danger-muted)",
-        border: "var(--kds-border-base-danger)"
-      },
-      [toastType.SUCCESS]: {
-        textAndIcon: "var(--kds-color-text-and-icon-success)",
-        background: "var(--kds-color-background-static-success-muted)",
-        border: "var(--kds-border-base-success)"
-      },
-      [toastType.WARNING]: {
-        textAndIcon: "var(--kds-color-text-and-icon-warning)",
-        background: "var(--kds-color-background-static-warning-muted)",
-        border: "var(--kds-border-base-warning)"
-      }
-    };
-    const mainColor = computed(() => colorMap[__props.type].textAndIcon);
-    const backgroundColor = computed(() => colorMap[__props.type].background);
-    const borderColor = computed(() => colorMap[__props.type].border);
-    const emit = __emit;
-    const toastRef = ref(null);
-    const focused = useWindowFocus();
-    const { isOutside } = useMouseInElement(toastRef);
-    const shouldPause = computed(() => !focused.value || !isOutside.value);
-    const elapsed = ref(0);
-    const percentage = computed(
-      () => Math.max(0, 100 - elapsed.value / AUTO_REMOVE_DURATION * 100)
-    );
-    const { pause, resume } = useRafFn(
-      ({ delta }) => {
-        elapsed.value += delta;
-        if (elapsed.value >= AUTO_REMOVE_DURATION) {
-          pause();
-          emit("autoRemove");
-        }
-      },
-      { immediate: false }
-    );
-    const play = resume;
-    const reset = () => {
-      pause();
-      elapsed.value = 0;
-    };
-    const truncatedMessage = computed(
-      () => truncateString(__props.message, MAX_MESSAGE_LENGTH)
-    );
-    const isTruncatable = truncatedMessage.value !== __props.message;
-    const isTruncated = ref(isTruncatable);
-    const showMore = () => {
-      isTruncated.value = false;
-      if (toastRef.value !== null) {
-        toastRef.value.style.height = "unset";
-      }
-    };
-    const nativeHeight = ref(null);
-    const currentHeight = ref(null);
-    const stackId = inject(TOAST_STACK_ID, null);
-    const eventBus = stackId ? useEventBus(`new-stack-height-${stackId.value}`) : null;
-    const animateHeightTo = (targetHeight) => {
-      if (toastRef.value !== null) {
-        toastRef.value.style.height = `${targetHeight}px`;
-      }
-      currentHeight.value = targetHeight;
-    };
-    eventBus?.on((newStackHeight) => {
-      if (typeof newStackHeight === "number" && currentHeight.value !== newStackHeight) {
-        animateHeightTo(newStackHeight);
-      }
-    });
-    onMounted(() => {
-      if (toastRef.value !== null) {
-        nativeHeight.value = toastRef.value.clientHeight;
-        currentHeight.value = toastRef.value.clientHeight;
-      }
-      eventBus?.emit(currentHeight.value);
-      if (__props.autoRemove && __props.active) {
-        play();
-      }
-    });
-    watch(shouldPause, (shouldPause2) => {
-      if (!__props.autoRemove || !__props.active) {
-        return;
-      }
-      if (shouldPause2) {
-        pause();
-      } else {
-        play();
-      }
-    });
-    watch(
-      () => __props.active,
-      (newValue) => {
-        if (newValue) {
-          if (nativeHeight.value !== null) {
-            animateHeightTo(nativeHeight.value);
-            eventBus?.emit(currentHeight.value);
-          }
-          if (__props.autoRemove && !shouldPause.value) {
-            play();
-          }
-          return;
-        }
-        if (isTruncatable) {
-          isTruncated.value = true;
-        }
-        if (__props.autoRemove) {
-          reset();
-        }
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "toastRef",
-        ref: toastRef,
-        class: normalizeClass(["toast", __props.type, { "auto-remove": __props.autoRemove }])
-      }, [
-        withDirectives(createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
-            createVNode(unref(KdsIcon), { name: typeIndicatorIcon.value }, null, 8, ["name"])
-          ]),
-          createElementVNode("div", _hoisted_3, [
-            createElementVNode("div", _hoisted_4, [
-              createElementVNode("div", _hoisted_5, toDisplayString(availableHeadline.value), 1),
-              __props.dismissible ? (openBlock(), createBlock(unref(KdsButton), {
-                key: 0,
-                "data-test-id": "dismiss",
-                variant: "transparent",
-                size: "xsmall",
-                tooltip: "Dismiss message",
-                ariaLabel: "Dismiss message",
-                "leading-icon": "x-close",
-                onClick: _cache[0] || (_cache[0] = ($event) => emit("remove"))
-              })) : createCommentVNode("", true)
-            ]),
-            __props.message ? (openBlock(), createElementBlock("div", _hoisted_6, [
-              isTruncated.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createTextVNode(toDisplayString(truncatedMessage.value), 1)
-              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createTextVNode(toDisplayString(__props.message), 1)
-              ], 64))
-            ])) : __props.component ? (openBlock(), createElementBlock("div", _hoisted_7, [
-              (openBlock(), createBlock(resolveDynamicComponent(__props.component), { onShowMore: showMore }, null, 32))
-            ])) : createCommentVNode("", true),
-            isTruncated.value || __props.buttons.length ? (openBlock(), createElementBlock("div", _hoisted_8, [
-              isTruncated.value ? (openBlock(), createBlock(unref(KdsButton), {
-                key: 0,
-                "data-test-id": "show-more",
-                variant: "transparent",
-                size: "xsmall",
-                label: "Show more",
-                onClick: showMore
-              })) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttons, (button, index) => {
-                return openBlock(), createBlock(_sfc_main$2, mergeProps({ ref_for: true }, button, { key: index }), null, 16);
-              }), 128))
-            ])) : createCommentVNode("", true)
-          ]),
-          createVNode(unref(KdsProgressBar), {
-            class: "progress-bar",
-            percentage: percentage.value
-          }, null, 8, ["percentage"])
-        ], 512), [
-          [vShow, __props.active]
-        ])
-      ], 2);
-    };
-  }
-});
-
-const Toast = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2b8d7fd1"]]);
-
-const defaultToastServiceSymbol = /* @__PURE__ */ Symbol("toast");
-const defaultGlobalPropertyName = "$toast";
-class ToastServiceError extends Error {
-  constructor(message) {
-    super(message);
-    this.name = "ToastServiceError";
-  }
-}
-class ToastServiceProvider {
-  toasts = ref([]);
-  show = (toast) => {
-    const clonedToast = cloneDeep(toast);
-    if (clonedToast.deduplicationKey) {
-      const previousToast = this.toasts.value.find(
-        (toast2) => clonedToast.deduplicationKey === toast2.deduplicationKey
-      );
-      if (previousToast) {
-        return previousToast.id;
-      }
-    }
-    const id = uniqueId();
-    clonedToast.autoRemove = clonedToast.autoRemove ?? true;
-    this.toasts.value.unshift({ ...clonedToast, id });
-    return id;
-  };
-  remove(id) {
-    this.toasts.value = this.toasts.value.filter((toast) => toast.id !== id);
-  }
-  removeBy = (predicate) => {
-    this.toasts.value = this.toasts.value.filter((toast) => !predicate(toast));
-  };
-  autoRemove = () => {
-    this.toasts.value = this.toasts.value.filter((toast) => !toast.autoRemove);
-  };
-  removeAll = () => {
-    this.toasts.value = [];
-  };
-  readonlyToasts = computed(() => this.toasts.value);
-  toastServiceObject = {
-    toasts: this.readonlyToasts,
-    show: this.show,
-    remove: this.remove.bind(this),
-    removeBy: this.removeBy.bind(this),
-    autoRemove: this.autoRemove,
-    removeAll: this.removeAll
-  };
-  /** Methods for accessing the toast service object */
-  /**
-   * A composable to be used in the app's root component's `setup`. Provides
-   * the service object to downstream components of the app via Vue's dependency
-   * injection, which can then be accessed via the `useToasts` composable.
-   *
-   * @example
-   * toastServiceProvider.useToastService({ serviceSymbol: Symbol("customToastService") });
-   */
-  useToastService = ({
-    serviceSymbol = defaultToastServiceSymbol
-  } = {}) => {
-    provide(serviceSymbol, this.toastServiceObject);
-  };
-  /**
-   * Returns an object that can be used as a plugin with the `app.use()` syntax.
-   * A custom `propertyName` property can be provided to be used as the global
-   * property name instead of the default "$toast".
-   *
-   * @example
-   * const toastPlugin = toastServiceProvider.getToastServicePlugin();
-   * app.use(toastPlugin, {
-   *    propertyName: "$customPropertyName" // "$toast" by default
-   * })
-   */
-  getToastServicePlugin = () => {
-    return {
-      install: (app, options) => {
-        const propertyName = options?.propertyName ?? defaultGlobalPropertyName;
-        app.config.globalProperties[propertyName] = this.toastServiceObject;
-      }
-    };
-  };
-  /**
-   * Returns the toast service object directly.
-   */
-  getToastServiceObject = () => {
-    return this.toastServiceObject;
-  };
-}
-const useToastsFromSymbol = (serviceSymbol) => {
-  const toastService = inject(serviceSymbol, null);
-  if (!toastService) {
-    throw new ToastServiceError(
-      `No toast service found using the symbol ${serviceSymbol.toString()}.`
-    );
-  }
-  return toastService;
+var MAX_MESSAGE_LENGTH = 160;
+var AUTO_REMOVE_DURATION = 7e3;
+//#endregion
+//#region src/toasts/Toast/Toast.vue
+var Toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "Toast",
+	props: {
+		type: { default: () => toastType.INFO },
+		headline: { default: "" },
+		message: { default: "" },
+		buttons: { default: () => [] },
+		component: { default: null },
+		autoRemove: {
+			type: Boolean,
+			default: true
+		},
+		active: {
+			type: Boolean,
+			default: true
+		},
+		deduplicationKey: {},
+		meta: {},
+		dismissible: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["remove", "autoRemove"],
+	setup(__props, { emit: __emit }) {
+		useCssVars((_ctx) => ({
+			"v134bed7c": mainColor.value,
+			"v4fbfa8ed": backgroundColor.value,
+			"v218bf6a2": borderColor.value
+		}));
+		const availableHeadline = computed(() => {
+			return __props.headline ? __props.headline : capitalize(__props.type);
+		});
+		const iconMap = {
+			[toastType.INFO]: "circle-info",
+			[toastType.ERROR]: "circle-error",
+			[toastType.SUCCESS]: "circle-success",
+			[toastType.WARNING]: "warning"
+		};
+		const typeIndicatorIcon = computed(() => iconMap[__props.type]);
+		const colorMap = {
+			[toastType.INFO]: {
+				textAndIcon: color["text-and-icon"].info.css.variable,
+				background: color["background-static"]["info-muted"].css.variable,
+				border: border.base.info.css.variable
+			},
+			[toastType.ERROR]: {
+				textAndIcon: color["text-and-icon"].danger.css.variable,
+				background: color["background-static"]["danger-muted"].css.variable,
+				border: border.base.danger.css.variable
+			},
+			[toastType.SUCCESS]: {
+				textAndIcon: color["text-and-icon"].success.css.variable,
+				background: color["background-static"]["success-muted"].css.variable,
+				border: border.base.success.css.variable
+			},
+			[toastType.WARNING]: {
+				textAndIcon: color["text-and-icon"].warning.css.variable,
+				background: color["background-static"]["warning-muted"].css.variable,
+				border: border.base.warning.css.variable
+			}
+		};
+		const mainColor = computed(() => colorMap[__props.type].textAndIcon);
+		const backgroundColor = computed(() => colorMap[__props.type].background);
+		const borderColor = computed(() => colorMap[__props.type].border);
+		const emit = __emit;
+		const toastRef = ref(null);
+		const focused = useWindowFocus();
+		const { isOutside } = useMouseInElement(toastRef);
+		const shouldPause = computed(() => !focused.value || !isOutside.value);
+		const elapsed = ref(0);
+		const percentage = computed(() => Math.max(0, 100 - elapsed.value / AUTO_REMOVE_DURATION * 100));
+		const { pause, resume } = useRafFn(({ delta }) => {
+			elapsed.value += delta;
+			if (elapsed.value >= AUTO_REMOVE_DURATION) {
+				pause();
+				emit("autoRemove");
+			}
+		}, { immediate: false });
+		const play = resume;
+		const reset = () => {
+			pause();
+			elapsed.value = 0;
+		};
+		const truncatedMessage = computed(() => truncateString_default(__props.message, MAX_MESSAGE_LENGTH));
+		const isTruncatable = truncatedMessage.value !== __props.message;
+		const isTruncated = ref(isTruncatable);
+		const showMore = () => {
+			isTruncated.value = false;
+			if (toastRef.value !== null) toastRef.value.style.height = "unset";
+		};
+		const nativeHeight = ref(null);
+		const currentHeight = ref(null);
+		const stackId = inject(TOAST_STACK_ID, null);
+		const eventBus = stackId ? useEventBus(`new-stack-height-${stackId.value}`) : null;
+		const animateHeightTo = (targetHeight) => {
+			if (toastRef.value !== null) toastRef.value.style.height = `${targetHeight}px`;
+			currentHeight.value = targetHeight;
+		};
+		eventBus?.on((newStackHeight) => {
+			if (typeof newStackHeight === "number" && currentHeight.value !== newStackHeight) animateHeightTo(newStackHeight);
+		});
+		onMounted(() => {
+			if (toastRef.value !== null) {
+				nativeHeight.value = toastRef.value.clientHeight;
+				currentHeight.value = toastRef.value.clientHeight;
+			}
+			eventBus?.emit(currentHeight.value);
+			if (__props.autoRemove && __props.active) play();
+		});
+		watch(shouldPause, (shouldPause) => {
+			if (!__props.autoRemove || !__props.active) return;
+			if (shouldPause) pause();
+			else play();
+		});
+		watch(() => __props.active, (newValue) => {
+			if (newValue) {
+				if (nativeHeight.value !== null) {
+					animateHeightTo(nativeHeight.value);
+					eventBus?.emit(currentHeight.value);
+				}
+				if (__props.autoRemove && !shouldPause.value) play();
+				return;
+			}
+			if (isTruncatable) isTruncated.value = true;
+			if (__props.autoRemove) reset();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "toastRef",
+				ref: toastRef,
+				class: normalizeClass([
+					"toast",
+					__props.type,
+					{ "auto-remove": __props.autoRemove }
+				])
+			}, [withDirectives(createElementVNode("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [createVNode(unref(KdsIcon), { name: typeIndicatorIcon.value }, null, 8, ["name"])]),
+				createElementVNode("div", _hoisted_3, [
+					createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, toDisplayString(availableHeadline.value), 1), __props.dismissible ? (openBlock(), createBlock(unref(KdsButton), {
+						key: 0,
+						"data-test-id": "dismiss",
+						variant: "transparent",
+						size: "xsmall",
+						tooltip: "Dismiss message",
+						ariaLabel: "Dismiss message",
+						"leading-icon": "x-close",
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("remove"))
+					})) : createCommentVNode("", true)]),
+					__props.message ? (openBlock(), createElementBlock("div", _hoisted_6, [isTruncated.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(truncatedMessage.value), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.message), 1)], 64))])) : __props.component ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(), createBlock(resolveDynamicComponent(__props.component), { onShowMore: showMore }, null, 32))])) : createCommentVNode("", true),
+					isTruncated.value || __props.buttons.length ? (openBlock(), createElementBlock("div", _hoisted_8, [isTruncated.value ? (openBlock(), createBlock(unref(KdsButton), {
+						key: 0,
+						"data-test-id": "show-more",
+						variant: "transparent",
+						size: "xsmall",
+						label: "Show more",
+						onClick: showMore
+					})) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttons, (button, index) => {
+						return openBlock(), createBlock(ToastButton_default, mergeProps({ ref_for: true }, button, { key: index }), null, 16);
+					}), 128))])) : createCommentVNode("", true)
+				]),
+				createVNode(unref(KdsProgressBar), {
+					class: "progress-bar",
+					percentage: percentage.value
+				}, null, 8, ["percentage"])
+			], 512), [[vShow, __props.active]])], 2);
+		};
+	}
+}), [["__scopeId", "data-v-1f510584"]]);
+//#endregion
+//#region src/toasts/toastService/toastService.ts
+var defaultToastServiceSymbol = Symbol("toast");
+var defaultGlobalPropertyName = "$toast";
+var ToastServiceError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "ToastServiceError";
+	}
 };
-const useToastsFromGlobalProperty = (propertyName) => {
-  const toastService = getCurrentInstance()?.appContext.config.globalProperties[propertyName];
-  if (!toastService) {
-    throw new ToastServiceError(
-      `No toast service found using the global property name '${propertyName}'.`
-    );
-  }
-  return toastService;
+/**
+* Each instance of the class is bound to a reactive array of toasts, with which you
+* can interface via the properties of the `ToastService` object.
+*
+* You have the following options to access the toast service:
+* - `provide` the service object to downstream components by using the `useToastService`
+*   method in the `setup` of the app's root component;
+* - register the service object as a global property by getting a Plugin object via
+*   the `getToastServicePlugin` method, and binding it to the app via `app.use(toastPlugin)`
+*   in `main.js/ts`;
+* - get the toast service object directly via `getToastServiceObject` method.
+*/
+var ToastServiceProvider = class {
+	toasts = ref([]);
+	show = (toast) => {
+		const clonedToast = cloneDeep(toast);
+		if (clonedToast.deduplicationKey) {
+			const previousToast = this.toasts.value.find((toast) => clonedToast.deduplicationKey === toast.deduplicationKey);
+			if (previousToast) return previousToast.id;
+		}
+		const id = uniqueId();
+		clonedToast.autoRemove = clonedToast.autoRemove ?? true;
+		this.toasts.value.unshift({
+			...clonedToast,
+			id
+		});
+		return id;
+	};
+	remove(id) {
+		this.toasts.value = this.toasts.value.filter((toast) => toast.id !== id);
+	}
+	removeBy = (predicate) => {
+		this.toasts.value = this.toasts.value.filter((toast) => !predicate(toast));
+	};
+	autoRemove = () => {
+		this.toasts.value = this.toasts.value.filter((toast) => !toast.autoRemove);
+	};
+	removeAll = () => {
+		this.toasts.value = [];
+	};
+	readonlyToasts = computed(() => this.toasts.value);
+	toastServiceObject = {
+		toasts: this.readonlyToasts,
+		show: this.show,
+		remove: this.remove.bind(this),
+		removeBy: this.removeBy.bind(this),
+		autoRemove: this.autoRemove,
+		removeAll: this.removeAll
+	};
+	/** Methods for accessing the toast service object */
+	/**
+	* A composable to be used in the app's root component's `setup`. Provides
+	* the service object to downstream components of the app via Vue's dependency
+	* injection, which can then be accessed via the `useToasts` composable.
+	*
+	* @example
+	* toastServiceProvider.useToastService({ serviceSymbol: Symbol("customToastService") });
+	*/
+	useToastService = ({ serviceSymbol = defaultToastServiceSymbol } = {}) => {
+		provide(serviceSymbol, this.toastServiceObject);
+	};
+	/**
+	* Returns an object that can be used as a plugin with the `app.use()` syntax.
+	* A custom `propertyName` property can be provided to be used as the global
+	* property name instead of the default "$toast".
+	*
+	* @example
+	* const toastPlugin = toastServiceProvider.getToastServicePlugin();
+	* app.use(toastPlugin, {
+	*    propertyName: "$customPropertyName" // "$toast" by default
+	* })
+	*/
+	getToastServicePlugin = () => {
+		return { install: (app, options) => {
+			const propertyName = options?.propertyName ?? "$toast";
+			app.config.globalProperties[propertyName] = this.toastServiceObject;
+		} };
+	};
+	/**
+	* Returns the toast service object directly.
+	*/
+	getToastServiceObject = () => {
+		return this.toastServiceObject;
+	};
 };
-const useToasts = ({
-  serviceSymbol,
-  propertyName
-} = {}) => {
-  if (serviceSymbol && propertyName) {
-    throw new ToastServiceError(
-      "Please provide either a custom injection key symbol or a custom global property name, but not both."
-    );
-  }
-  if (!serviceSymbol && !propertyName) {
-    try {
-      return useToastsFromSymbol(defaultToastServiceSymbol);
-    } catch (_error) {
-      return useToastsFromGlobalProperty(defaultGlobalPropertyName);
-    }
-  }
-  if (serviceSymbol) {
-    return useToastsFromSymbol(serviceSymbol);
-  }
-  if (propertyName) {
-    return useToastsFromGlobalProperty(propertyName);
-  }
-  throw new ToastServiceError("No toast service found.");
+var useToastsFromSymbol = (serviceSymbol) => {
+	const toastService = inject(serviceSymbol, null);
+	if (!toastService) throw new ToastServiceError(`No toast service found using the symbol ${serviceSymbol.toString()}.`);
+	return toastService;
 };
+var useToastsFromGlobalProperty = (propertyName) => {
+	const toastService = getCurrentInstance()?.appContext.config.globalProperties[propertyName];
+	if (!toastService) throw new ToastServiceError(`No toast service found using the global property name '${propertyName}'.`);
+	return toastService;
+};
+/**
+* Retrieves the toast service object either from the global injection or from the app's
+* global property via the app instance. If you have multiple instances of the toast
+* service in the app, you can use different injection key symbols or global property
+* names to differentiate them.
+*
+* @example
+* import { useToasts } from "@knime/product-features/toasts";
+*
+* // Using default options (the app has a shared toast service between components)
+* const { show } = useToasts();
+*
+* // Using a specific symbol (multiple toast services running across the app)
+* const { show } = useToasts({ serviceSymbol: mySpecialSymbol });
+*
+* show({
+*    type: "success",
+*    message: "I am an example toast."
+* });
+*/
+var useToasts = ({ serviceSymbol, propertyName } = {}) => {
+	if (serviceSymbol && propertyName) throw new ToastServiceError("Please provide either a custom injection key symbol or a custom global property name, but not both.");
+	if (!serviceSymbol && !propertyName) try {
+		return useToastsFromSymbol(defaultToastServiceSymbol);
+	} catch (_error) {
+		return useToastsFromGlobalProperty(defaultGlobalPropertyName);
+	}
+	if (serviceSymbol) return useToastsFromSymbol(serviceSymbol);
+	if (propertyName) return useToastsFromGlobalProperty(propertyName);
+	throw new ToastServiceError("No toast service found.");
+};
+//#endregion
+//#region src/toasts/ToastStack/ToastStack.vue?vue&type=script&setup=true&lang.ts
+var MAX_TOAST_COUNT = 5;
+var OFFSET = 4;
+//#endregion
+//#region src/toasts/ToastStack/ToastStack.vue
+var ToastStack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "ToastStack",
+	props: {
+		serviceSymbol: { default: null },
+		propertyName: { default: null }
+	},
+	setup(__props) {
+		provide(TOAST_STACK_ID, computed(() => {
+			if (__props.serviceSymbol) return __props.serviceSymbol.toString();
+			else if (__props.propertyName) return __props.propertyName;
+			return "default";
+		}));
+		const { toasts, remove, autoRemove } = useToasts({
+			serviceSymbol: __props.serviceSymbol,
+			propertyName: __props.propertyName
+		});
+		const style = (index) => {
+			const factor = index < MAX_TOAST_COUNT ? OFFSET : MAX_TOAST_COUNT;
+			const opacity = index < MAX_TOAST_COUNT ? null : 0;
+			return {
+				zIndex: -index,
+				bottom: `${-factor * index}px`,
+				right: `${-factor * index}px`,
+				...opacity !== null && { opacity }
+			};
+		};
+		const isActive = (index) => index === 0;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(TransitionGroup, {
+				class: "toast-stack",
+				tag: "div",
+				name: "toast-stack"
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(toasts), (toast, index) => {
+					return openBlock(), createBlock(Toast_default, mergeProps({ ref_for: true }, toast, {
+						key: toast.id,
+						active: isActive(index),
+						class: "toast",
+						style: style(index),
+						onRemove: ($event) => unref(remove)(toast.id),
+						onAutoRemove: _cache[0] || (_cache[0] = ($event) => unref(autoRemove)())
+					}), null, 16, [
+						"active",
+						"style",
+						"onRemove"
+					]);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-580cd86a"]]);
+//#endregion
+export { ToastServiceProvider, ToastStack_default as ToastStack, toastType, useToasts };
 
-const MAX_TOAST_COUNT = 5;
-const OFFSET = 4;
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ToastStack",
-  props: {
-    serviceSymbol: { default: null },
-    propertyName: { default: null }
-  },
-  setup(__props) {
-    const stackIdentifier = computed(() => {
-      if (__props.serviceSymbol) {
-        return __props.serviceSymbol.toString();
-      } else if (__props.propertyName) {
-        return __props.propertyName;
-      }
-      return "default";
-    });
-    provide(TOAST_STACK_ID, stackIdentifier);
-    const { toasts, remove, autoRemove } = useToasts({
-      serviceSymbol: __props.serviceSymbol,
-      propertyName: __props.propertyName
-    });
-    const style = (index) => {
-      const factor = index < MAX_TOAST_COUNT ? OFFSET : MAX_TOAST_COUNT;
-      const opacity = index < MAX_TOAST_COUNT ? null : 0;
-      return {
-        zIndex: -index,
-        bottom: `${-factor * index}px`,
-        right: `${-factor * index}px`,
-        ...opacity !== null && { opacity }
-      };
-    };
-    const isActive = (index) => index === 0;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(TransitionGroup, {
-        class: "toast-stack",
-        tag: "div",
-        name: "toast-stack"
-      }, {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(toasts), (toast, index) => {
-            return openBlock(), createBlock(Toast, mergeProps({ ref_for: true }, toast, {
-              key: toast.id,
-              active: isActive(index),
-              class: "toast",
-              style: style(index),
-              onRemove: ($event) => unref(remove)(toast.id),
-              onAutoRemove: _cache[0] || (_cache[0] = ($event) => unref(autoRemove)())
-            }), null, 16, ["active", "style", "onRemove"]);
-          }), 128))
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-
-const ToastStack = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-580cd86a"]]);
-
-export { ToastServiceProvider, ToastStack, toastType, useToasts };
-//# sourceMappingURL=toasts.js.map
+//# sourceMappingURL=toasts.js.map