npm - @likec4/styles - Versions diffs - 1.57.0 → 1.59.0 - Mend

@likec4/styles 1.57.0 → 1.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dev.mjs +15 -8
package/dist/css/conditions.mjs +1 -1
package/dist/jsx/create-style-context.mjs +4 -1
package/dist/jsx/is-valid-prop.mjs +1 -1
package/dist/patterns/txt.d.mts +1 -1
package/dist/patterns/txt.mjs +8 -3
package/dist/recipes/likec4tag.d.mts +1 -4
package/dist/recipes/likec4tag.mjs +2 -9
package/dist/tokens/index.mjs +1606 -10966
package/dist/tokens/tokens.d.mts +25 -13
package/dist/types/conditions.d.mts +0 -2
package/dist/types/prop-type.d.mts +7 -2
package/dist/types/style-props.d.mts +11 -11
package/package.json +31 -61
package/dev.d.mts +0 -3
package/dist/types/index.mjs +0 -1
package/postcss.d.mts +0 -6
package/postcss.mjs +0 -2
package/preset/_chunks/libs/@radix-ui/colors.mjs +0 -3786
package/preset/_chunks/libs/pandacss-preset-radix-colors.mjs +0 -149
package/preset/_chunks/libs/remeda.mjs +0 -148
package/preset/_chunks/rolldown-runtime.mjs +0 -13
package/preset/package.json +0 -4
package/preset/preset.d.mts +0 -1466
package/preset/preset.mjs +0 -4075
package/types/package.json +0 -4
package/vars/package.json +0 -4
package/vars/vars.d.mts +0 -417
package/vars/vars.mjs +0 -418

package/preset/preset.mjs DELETED Viewed

@@ -1,4075 +0,0 @@
-import { t as __exportAll } from "./_chunks/rolldown-runtime.mjs";
-import { a as t$6, c as t$2, i as t$4, l as t$1, n as t$3, o as e$1, r as t$5, s as t, t as e } from "./_chunks/libs/remeda.mjs";
-import { a as grass, c as orange, d as red, f as ruby, g as yellow, h as violet, i as crimson, l as pink, m as tomato, n as blue$2, o as indigo, p as teal, s as lime, t as amber, u as purple } from "./_chunks/libs/@radix-ui/colors.mjs";
-import { t as createPreset } from "./_chunks/libs/pandacss-preset-radix-colors.mjs";
-import { defineAnimationStyles, defineKeyframes, defineLayerStyles, defineParts, definePattern, definePreset, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineTextStyles, defineTokens, defineUtility } from "@pandacss/dev";
-//#region ../preset/src/animations.ts
-const keyframes = defineKeyframes({
-	"indicatorOpacity": {
-		"0%": { opacity: .8 },
-		"100%": { opacity: .3 }
-	},
-	"xyedgeAnimated": {
-		"0%": { strokeDashoffset: 36 },
-		"100%": { strokeDashoffset: 0 }
-	}
-});
-const animationStyles = defineAnimationStyles({
-	"indicator": { value: {
-		animationDuration: ".8s",
-		animationIterationCount: "infinite",
-		animationDirection: "alternate",
-		animationName: "indicatorOpacity",
-		animationTimingFunction: "{easings.in}"
-	} },
-	"xyedgeAnimated": { value: {
-		animationDuration: ".8s",
-		animationIterationCount: "infinite",
-		animationTimingFunction: "linear",
-		animationFillMode: "both",
-		animationName: "xyedgeAnimated"
-	} }
-});
-//#endregion
-//#region ../preset/src/defaults/vars.ts
-const vars = {
-	font: "--likec4-app-font",
-	spacing: "--likec4-spacing",
-	textsize: "--likec4-text-size",
-	palette: {
-		fill: "--likec4-palette-fill",
-		stroke: "--likec4-palette-stroke",
-		hiContrast: "--likec4-palette-hiContrast",
-		loContrast: "--likec4-palette-loContrast",
-		relationStroke: "--likec4-palette-relation-stroke",
-		relationStrokeSelected: "--likec4-palette-relation-stroke-selected",
-		relationLabel: "--likec4-palette-relation-label",
-		relationLabelBg: "--likec4-palette-relation-label-bg",
-		outline: "--likec4-palette-outline"
-	},
-	icon: {
-		size: "--likec4-icon-size",
-		color: "--likec4-icon-color"
-	}
-};
-function readName(key) {
-	let path = key.includes(".") ? key.split(".") : [key];
-	if (!t(path, 1)) return;
-	let name = e(vars, ...path);
-	return e$1(name) ? name : void 0;
-}
-/**
-* Returns a CSS variable declaration string.
-*
-* If `defaultTo` is not provided, returns a string like `var(--likec4-palette-fill)`.
-* If `defaultTo` is a Vars or string, returns a string like `var(--likec4-palette-fill, var(--default-to))`.
-*
-* @param key - The name of the CSS variable to generate.
-* @param defaultTo - An optional string, Vars, or object to use as the default value.
-* @returns A CSS variable declaration string.
-*/
-function __v(key, defaultTo) {
-	let name = readName(key);
-	if (!name) throw new Error(`Unknown var: ${key}`);
-	if (!defaultTo) return `var(${name})`;
-	const defaultValue = readName(defaultTo);
-	if (defaultValue) return `var(${name}, var(${defaultValue}))`;
-	return `var(${name}, ${defaultTo})`;
-}
-//#endregion
-//#region ../preset/src/const.ts
-const root = ".likec4-root";
-//#endregion
-//#region ../preset/src/defaults/element-colors.ts
-const blue$1 = {
-	fill: "#3b82f6",
-	stroke: "#2563eb",
-	hiContrast: "#eff6ff",
-	loContrast: "#bfdbfe"
-};
-const sky$1 = {
-	fill: "#0284c7",
-	stroke: "#0369a1",
-	hiContrast: "#f0f9ff",
-	loContrast: "#B6ECF7"
-};
-const slate$1 = {
-	fill: "#64748b",
-	stroke: "#475569",
-	hiContrast: "#f8fafc",
-	loContrast: "#cbd5e1"
-};
-const ElementColors = {
-	primary: blue$1,
-	blue: blue$1,
-	secondary: sky$1,
-	sky: sky$1,
-	muted: slate$1,
-	slate: slate$1,
-	gray: {
-		fill: "#737373",
-		stroke: "#525252",
-		hiContrast: "#fafafa",
-		loContrast: "#d4d4d4"
-	},
-	red: {
-		fill: "#AC4D39",
-		stroke: "#853A2D",
-		hiContrast: "#FBD3CB",
-		loContrast: "#f5b2a3"
-	},
-	green: {
-		fill: "#428a4f",
-		stroke: "#2d5d39",
-		hiContrast: "#f8fafc",
-		loContrast: "#c2f0c2"
-	},
-	amber: {
-		fill: "#A35829",
-		stroke: "#7E451D",
-		hiContrast: "#FFE0C2",
-		loContrast: "#f9b27c"
-	},
-	indigo: {
-		fill: "#6366f1",
-		stroke: "#4f46e5",
-		hiContrast: "#eef2ff",
-		loContrast: "#c7d2fe"
-	}
-};
-//#endregion
-//#region ../preset/src/defaults/relationship-colors.ts
-const gray = {
-	line: "#8D8D8D",
-	labelBg: "#18191B",
-	label: "#C9C9C9"
-};
-const slate = {
-	line: "#64748b",
-	labelBg: "#0f172a",
-	label: "#cbd5e1"
-};
-const blue = {
-	line: "#3b82f6",
-	labelBg: "#172554",
-	label: "#eff5fd"
-};
-const sky = {
-	line: "#0ea5e9",
-	labelBg: "#082f49",
-	label: "#d4f2ff"
-};
-const RelationshipColors = {
-	amber: {
-		line: "#b45309",
-		labelBg: "#78350f",
-		label: "#FFE0C2"
-	},
-	blue,
-	gray,
-	green: {
-		line: "#15803d",
-		labelBg: "#052e16",
-		label: "#bbfcd3"
-	},
-	indigo: {
-		line: "#6366f1",
-		labelBg: "#1e1b4b",
-		label: "#cbd0fd"
-	},
-	muted: slate,
-	primary: blue,
-	red: {
-		line: "#AC4D39",
-		labelBg: "#b91c1c",
-		label: "#fcd9d2"
-	},
-	secondary: sky,
-	sky,
-	slate
-};
-//#endregion
-//#region ../preset/src/defaults/sizes.ts
-const defaultSizes = {
-	sizes: {
-		xs: {
-			width: 180,
-			height: 100
-		},
-		sm: {
-			width: 240,
-			height: 135
-		},
-		md: {
-			width: 320,
-			height: 180
-		},
-		lg: {
-			width: 420,
-			height: 234
-		},
-		xl: {
-			width: 520,
-			height: 290
-		}
-	},
-	spacing: {
-		xs: 8,
-		sm: 10,
-		md: 16,
-		lg: 24,
-		xl: 32
-	},
-	/**
-	* Text sizes for titles
-	* https://typescale.com/
-	*
-	* Scale:  1.2
-	* Base:   16px
-	*/
-	textSizes: {
-		xs: 13.33,
-		sm: 16,
-		md: 19.2,
-		lg: 23.04,
-		xl: 27.65
-	},
-	iconSizes: {
-		xs: 24,
-		sm: 36,
-		md: 60,
-		lg: 82,
-		xl: 90
-	}
-};
-//#endregion
-//#region ../preset/src/defaults/types.ts
-const ElementShapes = [
-	"rectangle",
-	"person",
-	"browser",
-	"mobile",
-	"cylinder",
-	"storage",
-	"queue",
-	"bucket",
-	"document",
-	"component"
-];
-const ThemeColors = [
-	"amber",
-	"blue",
-	"gray",
-	"slate",
-	"green",
-	"indigo",
-	"muted",
-	"primary",
-	"red",
-	"secondary",
-	"sky"
-];
-const DefaultTagColors = [
-	"tomato",
-	"grass",
-	"blue",
-	"ruby",
-	"orange",
-	"indigo",
-	"pink",
-	"teal",
-	"purple",
-	"amber",
-	"crimson",
-	"red",
-	"lime",
-	"yellow",
-	"violet"
-];
-tomato.tomato9, grass.grass9, blue$2.blue9, ruby.ruby9, orange.orange9, indigo.indigo9, pink.pink9, teal.teal9, purple.purple9, amber.amber9, crimson.crimson9, red.red9, lime.lime9, yellow.yellow9, violet.violet9;
-//#endregion
-//#region ../preset/src/defaults/index.ts
-const defaultTheme = {
-	colors: ThemeColors.reduce((acc, key) => {
-		acc[key] = {
-			elements: ElementColors[key],
-			relationships: RelationshipColors[key]
-		};
-		return acc;
-	}, {}),
-	...defaultSizes
-};
-//#endregion
-//#region ../preset/src/conditions.ts
-const shapeSizeCondition = (key) => `shapeSize${t$1(key)}`;
-const conditions = { extend: {
-	...t$2(defaultTheme.sizes, t$3((_, key) => `:where([data-likec4-shape-size='${key}']) &`), t$4(shapeSizeCondition)),
-	...t$5(ElementShapes, (shape) => ["shape" + t$1(shape), `:where([data-likec4-shape='${shape}']) &`]),
-	light: "[data-mantine-color-scheme=\"light\"] &",
-	dark: "[data-mantine-color-scheme=\"dark\"] &",
-	notDisabled: "&:not(:is(:disabled, [disabled], [data-disabled]))",
-	reduceGraphics: [`${root}:is([data-likec4-reduced-graphics])`, " &"].join(""),
-	reduceGraphicsOnPan: [
-		`${root}:is(`,
-		"[data-likec4-reduced-graphics]",
-		"[data-likec4-diagram-panning=\"true\"]",
-		") &"
-	].join(""),
-	noReduceGraphics: [
-		`${root}:not(`,
-		"[data-likec4-reduced-graphics]",
-		") &"
-	].join(""),
-	whenPanning: `${root}:is([data-likec4-diagram-panning="true"]) &`,
-	smallZoom: ":where([data-likec4-zoom-small=\"true\"]) &",
-	compoundTransparent: ":where([data-compound-transparent]) &",
-	edgeActive: ":where([data-likec4-edge-active=\"true\"]) &",
-	whenHovered: ":where([data-likec4-hovered=\"true\"]) &",
-	whenSelectable: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selectable) &",
-	whenSelected: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selected) &",
-	whenDimmed: ":where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &",
-	whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &"
-} };
-//#endregion
-//#region ../preset/src/generated.ts
-const breakpoints = {
-	xs: "36em",
-	sm: "48em",
-	md: "62em",
-	lg: "75em",
-	xl: "88em"
-};
-const tokens$1 = { colors: { mantine: { colors: {
-	primary: {
-		DEFAULT: {
-			description: "Mantine color primaryColors",
-			value: "var(--mantine-primary-color-6)"
-		},
-		filled: {
-			description: "Mantine color primaryColors filled",
-			value: "var(--mantine-primary-color-filled)"
-		},
-		filledHover: {
-			description: "Mantine color primaryColors filled hover",
-			value: "var(--mantine-primary-color-filled-hover)"
-		},
-		light: {
-			description: "Mantine color primaryColors light",
-			value: "var(--mantine-primary-color-light)"
-		},
-		lightHover: {
-			description: "Mantine color primaryColors light hover",
-			value: "var(--mantine-primary-color-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color primaryColors light color",
-			value: "var(--mantine-primary-color-light-color)"
-		},
-		outline: {
-			description: "Mantine color primaryColors outline",
-			value: "var(--mantine-primary-color-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color primaryColors outline hover",
-			value: "var(--mantine-primary-color-outline-hover)"
-		}
-	},
-	"primary[0]": {
-		description: "Mantine color primaryColors.0",
-		value: "var(--mantine-primary-color-0)"
-	},
-	"primary[1]": {
-		description: "Mantine color primaryColors.1",
-		value: "var(--mantine-primary-color-1)"
-	},
-	"primary[2]": {
-		description: "Mantine color primaryColors.2",
-		value: "var(--mantine-primary-color-2)"
-	},
-	"primary[3]": {
-		description: "Mantine color primaryColors.3",
-		value: "var(--mantine-primary-color-3)"
-	},
-	"primary[4]": {
-		description: "Mantine color primaryColors.4",
-		value: "var(--mantine-primary-color-4)"
-	},
-	"primary[5]": {
-		description: "Mantine color primaryColors.5",
-		value: "var(--mantine-primary-color-5)"
-	},
-	"primary[6]": {
-		description: "Mantine color primaryColors.6",
-		value: "var(--mantine-primary-color-6)"
-	},
-	"primary[7]": {
-		description: "Mantine color primaryColors.7",
-		value: "var(--mantine-primary-color-7)"
-	},
-	"primary[8]": {
-		description: "Mantine color primaryColors.8",
-		value: "var(--mantine-primary-color-8)"
-	},
-	"primary[9]": {
-		description: "Mantine color primaryColors.9",
-		value: "var(--mantine-primary-color-9)"
-	},
-	white: { value: "var(--mantine-color-white)" },
-	text: { value: "var(--mantine-color-text)" },
-	body: { value: "var(--mantine-color-body)" },
-	dimmed: { value: "var(--mantine-color-dimmed)" },
-	defaultBorder: { value: "var(--mantine-color-default-border)" },
-	defaultColor: { value: "var(--mantine-color-default-color)" },
-	defaultHover: { value: "var(--mantine-color-default-hover)" },
-	default: { value: "var(--mantine-color-default)" },
-	error: { value: "var(--mantine-color-error)" },
-	placeholder: { value: "var(--mantine-color-placeholder)" },
-	gray: {
-		DEFAULT: {
-			description: "Mantine color gray",
-			value: "var(--mantine-color-gray-6)"
-		},
-		filled: {
-			description: "Mantine color gray filled",
-			value: "var(--mantine-color-gray-filled)"
-		},
-		filledHover: {
-			description: "Mantine color gray filled hover",
-			value: "var(--mantine-color-gray-filled-hover)"
-		},
-		light: {
-			description: "Mantine color gray light",
-			value: "var(--mantine-color-gray-light)"
-		},
-		lightHover: {
-			description: "Mantine color gray light hover",
-			value: "var(--mantine-color-gray-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color gray light color",
-			value: "var(--mantine-color-gray-light-color)"
-		},
-		outline: {
-			description: "Mantine color gray outline",
-			value: "var(--mantine-color-gray-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color gray outline hover",
-			value: "var(--mantine-color-gray-outline-hover)"
-		}
-	},
-	"gray[0]": {
-		description: "Mantine color gray.0",
-		value: "var(--mantine-color-gray-0)"
-	},
-	"gray[1]": {
-		description: "Mantine color gray.1",
-		value: "var(--mantine-color-gray-1)"
-	},
-	"gray[2]": {
-		description: "Mantine color gray.2",
-		value: "var(--mantine-color-gray-2)"
-	},
-	"gray[3]": {
-		description: "Mantine color gray.3",
-		value: "var(--mantine-color-gray-3)"
-	},
-	"gray[4]": {
-		description: "Mantine color gray.4",
-		value: "var(--mantine-color-gray-4)"
-	},
-	"gray[5]": {
-		description: "Mantine color gray.5",
-		value: "var(--mantine-color-gray-5)"
-	},
-	"gray[6]": {
-		description: "Mantine color gray.6",
-		value: "var(--mantine-color-gray-6)"
-	},
-	"gray[7]": {
-		description: "Mantine color gray.7",
-		value: "var(--mantine-color-gray-7)"
-	},
-	"gray[8]": {
-		description: "Mantine color gray.8",
-		value: "var(--mantine-color-gray-8)"
-	},
-	"gray[9]": {
-		description: "Mantine color gray.9",
-		value: "var(--mantine-color-gray-9)"
-	},
-	dark: {
-		DEFAULT: {
-			description: "Mantine color dark",
-			value: "var(--mantine-color-dark-6)"
-		},
-		filled: {
-			description: "Mantine color dark filled",
-			value: "var(--mantine-color-dark-filled)"
-		},
-		filledHover: {
-			description: "Mantine color dark filled hover",
-			value: "var(--mantine-color-dark-filled-hover)"
-		},
-		light: {
-			description: "Mantine color dark light",
-			value: "var(--mantine-color-dark-light)"
-		},
-		lightHover: {
-			description: "Mantine color dark light hover",
-			value: "var(--mantine-color-dark-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color dark light color",
-			value: "var(--mantine-color-dark-light-color)"
-		},
-		outline: {
-			description: "Mantine color dark outline",
-			value: "var(--mantine-color-dark-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color dark outline hover",
-			value: "var(--mantine-color-dark-outline-hover)"
-		}
-	},
-	"dark[0]": {
-		description: "Mantine color dark.0",
-		value: "var(--mantine-color-dark-0)"
-	},
-	"dark[1]": {
-		description: "Mantine color dark.1",
-		value: "var(--mantine-color-dark-1)"
-	},
-	"dark[2]": {
-		description: "Mantine color dark.2",
-		value: "var(--mantine-color-dark-2)"
-	},
-	"dark[3]": {
-		description: "Mantine color dark.3",
-		value: "var(--mantine-color-dark-3)"
-	},
-	"dark[4]": {
-		description: "Mantine color dark.4",
-		value: "var(--mantine-color-dark-4)"
-	},
-	"dark[5]": {
-		description: "Mantine color dark.5",
-		value: "var(--mantine-color-dark-5)"
-	},
-	"dark[6]": {
-		description: "Mantine color dark.6",
-		value: "var(--mantine-color-dark-6)"
-	},
-	"dark[7]": {
-		description: "Mantine color dark.7",
-		value: "var(--mantine-color-dark-7)"
-	},
-	"dark[8]": {
-		description: "Mantine color dark.8",
-		value: "var(--mantine-color-dark-8)"
-	},
-	"dark[9]": {
-		description: "Mantine color dark.9",
-		value: "var(--mantine-color-dark-9)"
-	},
-	orange: {
-		DEFAULT: {
-			description: "Mantine color orange",
-			value: "var(--mantine-color-orange-6)"
-		},
-		filled: {
-			description: "Mantine color orange filled",
-			value: "var(--mantine-color-orange-filled)"
-		},
-		filledHover: {
-			description: "Mantine color orange filled hover",
-			value: "var(--mantine-color-orange-filled-hover)"
-		},
-		light: {
-			description: "Mantine color orange light",
-			value: "var(--mantine-color-orange-light)"
-		},
-		lightHover: {
-			description: "Mantine color orange light hover",
-			value: "var(--mantine-color-orange-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color orange light color",
-			value: "var(--mantine-color-orange-light-color)"
-		},
-		outline: {
-			description: "Mantine color orange outline",
-			value: "var(--mantine-color-orange-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color orange outline hover",
-			value: "var(--mantine-color-orange-outline-hover)"
-		}
-	},
-	"orange[0]": {
-		description: "Mantine color orange.0",
-		value: "var(--mantine-color-orange-0)"
-	},
-	"orange[1]": {
-		description: "Mantine color orange.1",
-		value: "var(--mantine-color-orange-1)"
-	},
-	"orange[2]": {
-		description: "Mantine color orange.2",
-		value: "var(--mantine-color-orange-2)"
-	},
-	"orange[3]": {
-		description: "Mantine color orange.3",
-		value: "var(--mantine-color-orange-3)"
-	},
-	"orange[4]": {
-		description: "Mantine color orange.4",
-		value: "var(--mantine-color-orange-4)"
-	},
-	"orange[5]": {
-		description: "Mantine color orange.5",
-		value: "var(--mantine-color-orange-5)"
-	},
-	"orange[6]": {
-		description: "Mantine color orange.6",
-		value: "var(--mantine-color-orange-6)"
-	},
-	"orange[7]": {
-		description: "Mantine color orange.7",
-		value: "var(--mantine-color-orange-7)"
-	},
-	"orange[8]": {
-		description: "Mantine color orange.8",
-		value: "var(--mantine-color-orange-8)"
-	},
-	"orange[9]": {
-		description: "Mantine color orange.9",
-		value: "var(--mantine-color-orange-9)"
-	},
-	teal: {
-		DEFAULT: {
-			description: "Mantine color teal",
-			value: "var(--mantine-color-teal-6)"
-		},
-		filled: {
-			description: "Mantine color teal filled",
-			value: "var(--mantine-color-teal-filled)"
-		},
-		filledHover: {
-			description: "Mantine color teal filled hover",
-			value: "var(--mantine-color-teal-filled-hover)"
-		},
-		light: {
-			description: "Mantine color teal light",
-			value: "var(--mantine-color-teal-light)"
-		},
-		lightHover: {
-			description: "Mantine color teal light hover",
-			value: "var(--mantine-color-teal-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color teal light color",
-			value: "var(--mantine-color-teal-light-color)"
-		},
-		outline: {
-			description: "Mantine color teal outline",
-			value: "var(--mantine-color-teal-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color teal outline hover",
-			value: "var(--mantine-color-teal-outline-hover)"
-		}
-	},
-	"teal[0]": {
-		description: "Mantine color teal.0",
-		value: "var(--mantine-color-teal-0)"
-	},
-	"teal[1]": {
-		description: "Mantine color teal.1",
-		value: "var(--mantine-color-teal-1)"
-	},
-	"teal[2]": {
-		description: "Mantine color teal.2",
-		value: "var(--mantine-color-teal-2)"
-	},
-	"teal[3]": {
-		description: "Mantine color teal.3",
-		value: "var(--mantine-color-teal-3)"
-	},
-	"teal[4]": {
-		description: "Mantine color teal.4",
-		value: "var(--mantine-color-teal-4)"
-	},
-	"teal[5]": {
-		description: "Mantine color teal.5",
-		value: "var(--mantine-color-teal-5)"
-	},
-	"teal[6]": {
-		description: "Mantine color teal.6",
-		value: "var(--mantine-color-teal-6)"
-	},
-	"teal[7]": {
-		description: "Mantine color teal.7",
-		value: "var(--mantine-color-teal-7)"
-	},
-	"teal[8]": {
-		description: "Mantine color teal.8",
-		value: "var(--mantine-color-teal-8)"
-	},
-	"teal[9]": {
-		description: "Mantine color teal.9",
-		value: "var(--mantine-color-teal-9)"
-	},
-	red: {
-		DEFAULT: {
-			description: "Mantine color red",
-			value: "var(--mantine-color-red-6)"
-		},
-		filled: {
-			description: "Mantine color red filled",
-			value: "var(--mantine-color-red-filled)"
-		},
-		filledHover: {
-			description: "Mantine color red filled hover",
-			value: "var(--mantine-color-red-filled-hover)"
-		},
-		light: {
-			description: "Mantine color red light",
-			value: "var(--mantine-color-red-light)"
-		},
-		lightHover: {
-			description: "Mantine color red light hover",
-			value: "var(--mantine-color-red-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color red light color",
-			value: "var(--mantine-color-red-light-color)"
-		},
-		outline: {
-			description: "Mantine color red outline",
-			value: "var(--mantine-color-red-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color red outline hover",
-			value: "var(--mantine-color-red-outline-hover)"
-		}
-	},
-	"red[0]": {
-		description: "Mantine color red.0",
-		value: "var(--mantine-color-red-0)"
-	},
-	"red[1]": {
-		description: "Mantine color red.1",
-		value: "var(--mantine-color-red-1)"
-	},
-	"red[2]": {
-		description: "Mantine color red.2",
-		value: "var(--mantine-color-red-2)"
-	},
-	"red[3]": {
-		description: "Mantine color red.3",
-		value: "var(--mantine-color-red-3)"
-	},
-	"red[4]": {
-		description: "Mantine color red.4",
-		value: "var(--mantine-color-red-4)"
-	},
-	"red[5]": {
-		description: "Mantine color red.5",
-		value: "var(--mantine-color-red-5)"
-	},
-	"red[6]": {
-		description: "Mantine color red.6",
-		value: "var(--mantine-color-red-6)"
-	},
-	"red[7]": {
-		description: "Mantine color red.7",
-		value: "var(--mantine-color-red-7)"
-	},
-	"red[8]": {
-		description: "Mantine color red.8",
-		value: "var(--mantine-color-red-8)"
-	},
-	"red[9]": {
-		description: "Mantine color red.9",
-		value: "var(--mantine-color-red-9)"
-	},
-	green: {
-		DEFAULT: {
-			description: "Mantine color green",
-			value: "var(--mantine-color-green-6)"
-		},
-		filled: {
-			description: "Mantine color green filled",
-			value: "var(--mantine-color-green-filled)"
-		},
-		filledHover: {
-			description: "Mantine color green filled hover",
-			value: "var(--mantine-color-green-filled-hover)"
-		},
-		light: {
-			description: "Mantine color green light",
-			value: "var(--mantine-color-green-light)"
-		},
-		lightHover: {
-			description: "Mantine color green light hover",
-			value: "var(--mantine-color-green-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color green light color",
-			value: "var(--mantine-color-green-light-color)"
-		},
-		outline: {
-			description: "Mantine color green outline",
-			value: "var(--mantine-color-green-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color green outline hover",
-			value: "var(--mantine-color-green-outline-hover)"
-		}
-	},
-	"green[0]": {
-		description: "Mantine color green.0",
-		value: "var(--mantine-color-green-0)"
-	},
-	"green[1]": {
-		description: "Mantine color green.1",
-		value: "var(--mantine-color-green-1)"
-	},
-	"green[2]": {
-		description: "Mantine color green.2",
-		value: "var(--mantine-color-green-2)"
-	},
-	"green[3]": {
-		description: "Mantine color green.3",
-		value: "var(--mantine-color-green-3)"
-	},
-	"green[4]": {
-		description: "Mantine color green.4",
-		value: "var(--mantine-color-green-4)"
-	},
-	"green[5]": {
-		description: "Mantine color green.5",
-		value: "var(--mantine-color-green-5)"
-	},
-	"green[6]": {
-		description: "Mantine color green.6",
-		value: "var(--mantine-color-green-6)"
-	},
-	"green[7]": {
-		description: "Mantine color green.7",
-		value: "var(--mantine-color-green-7)"
-	},
-	"green[8]": {
-		description: "Mantine color green.8",
-		value: "var(--mantine-color-green-8)"
-	},
-	"green[9]": {
-		description: "Mantine color green.9",
-		value: "var(--mantine-color-green-9)"
-	},
-	yellow: {
-		DEFAULT: {
-			description: "Mantine color yellow",
-			value: "var(--mantine-color-yellow-6)"
-		},
-		filled: {
-			description: "Mantine color yellow filled",
-			value: "var(--mantine-color-yellow-filled)"
-		},
-		filledHover: {
-			description: "Mantine color yellow filled hover",
-			value: "var(--mantine-color-yellow-filled-hover)"
-		},
-		light: {
-			description: "Mantine color yellow light",
-			value: "var(--mantine-color-yellow-light)"
-		},
-		lightHover: {
-			description: "Mantine color yellow light hover",
-			value: "var(--mantine-color-yellow-light-hover)"
-		},
-		lightColor: {
-			description: "Mantine color yellow light color",
-			value: "var(--mantine-color-yellow-light-color)"
-		},
-		outline: {
-			description: "Mantine color yellow outline",
-			value: "var(--mantine-color-yellow-outline)"
-		},
-		outlineHover: {
-			description: "Mantine color yellow outline hover",
-			value: "var(--mantine-color-yellow-outline-hover)"
-		}
-	},
-	"yellow[0]": {
-		description: "Mantine color yellow.0",
-		value: "var(--mantine-color-yellow-0)"
-	},
-	"yellow[1]": {
-		description: "Mantine color yellow.1",
-		value: "var(--mantine-color-yellow-1)"
-	},
-	"yellow[2]": {
-		description: "Mantine color yellow.2",
-		value: "var(--mantine-color-yellow-2)"
-	},
-	"yellow[3]": {
-		description: "Mantine color yellow.3",
-		value: "var(--mantine-color-yellow-3)"
-	},
-	"yellow[4]": {
-		description: "Mantine color yellow.4",
-		value: "var(--mantine-color-yellow-4)"
-	},
-	"yellow[5]": {
-		description: "Mantine color yellow.5",
-		value: "var(--mantine-color-yellow-5)"
-	},
-	"yellow[6]": {
-		description: "Mantine color yellow.6",
-		value: "var(--mantine-color-yellow-6)"
-	},
-	"yellow[7]": {
-		description: "Mantine color yellow.7",
-		value: "var(--mantine-color-yellow-7)"
-	},
-	"yellow[8]": {
-		description: "Mantine color yellow.8",
-		value: "var(--mantine-color-yellow-8)"
-	},
-	"yellow[9]": {
-		description: "Mantine color yellow.9",
-		value: "var(--mantine-color-yellow-9)"
-	}
-} } } };
-const mantine = {
-	scale: "var(--mantine-scale)",
-	cursorType: "var(--mantine-cursor-type)",
-	webkitFontSmoothing: "var(--mantine-webkit-font-smoothing)",
-	mozFontSmoothing: "var(--mantine-moz-font-smoothing)",
-	lineHeight: "var(--mantine-line-height)",
-	fontFamily: "var(--mantine-font-family)",
-	fontFamilyMonospace: "var(--mantine-font-family-monospace)",
-	fontFamilyHeadings: "var(--mantine-font-family-headings)",
-	headingFontWeight: "var(--mantine-heading-font-weight)",
-	radiusDefault: "var(--mantine-radius-default)",
-	breakpoints: {
-		xs: "36em",
-		sm: "48em",
-		md: "62em",
-		lg: "75em",
-		xl: "88em"
-	},
-	fontSizes: {
-		xs: "var(--mantine-font-size-xs)",
-		sm: "var(--mantine-font-size-sm)",
-		md: "var(--mantine-font-size-md)",
-		lg: "var(--mantine-font-size-lg)",
-		xl: "var(--mantine-font-size-xl)"
-	},
-	lineHeights: {
-		xs: "var(--mantine-line-height-xs)",
-		sm: "var(--mantine-line-height-sm)",
-		md: "var(--mantine-line-height-md)",
-		lg: "var(--mantine-line-height-lg)",
-		xl: "var(--mantine-line-height-xl)"
-	},
-	shadows: {
-		xs: "var(--mantine-shadow-xs)",
-		sm: "var(--mantine-shadow-sm)",
-		md: "var(--mantine-shadow-md)",
-		lg: "var(--mantine-shadow-lg)",
-		xl: "var(--mantine-shadow-xl)"
-	},
-	radius: {
-		xs: "var(--mantine-radius-xs)",
-		sm: "var(--mantine-radius-sm)",
-		md: "var(--mantine-radius-md)",
-		lg: "var(--mantine-radius-lg)",
-		xl: "var(--mantine-radius-xl)"
-	},
-	headings: {
-		h1: {
-			fontSize: "var(--mantine-h1-font-size)",
-			lineHeight: "var(--mantine-h1-line-height)",
-			fontWeight: "var(--mantine-h1-font-weight)"
-		},
-		h2: {
-			fontSize: "var(--mantine-h2-font-size)",
-			lineHeight: "var(--mantine-h2-line-height)",
-			fontWeight: "var(--mantine-h2-font-weight)"
-		},
-		h3: {
-			fontSize: "var(--mantine-h3-font-size)",
-			lineHeight: "var(--mantine-h3-line-height)",
-			fontWeight: "var(--mantine-h3-font-weight)"
-		},
-		h4: {
-			fontSize: "var(--mantine-h4-font-size)",
-			lineHeight: "var(--mantine-h4-line-height)",
-			fontWeight: "var(--mantine-h4-font-weight)"
-		},
-		h5: {
-			fontSize: "var(--mantine-h5-font-size)",
-			lineHeight: "var(--mantine-h5-line-height)",
-			fontWeight: "var(--mantine-h5-font-weight)"
-		},
-		h6: {
-			fontSize: "var(--mantine-h6-font-size)",
-			lineHeight: "var(--mantine-h6-line-height)",
-			fontWeight: "var(--mantine-h6-font-weight)"
-		}
-	},
-	spacing: {
-		xs: "var(--mantine-spacing-xs)",
-		sm: "var(--mantine-spacing-sm)",
-		md: "var(--mantine-spacing-md)",
-		lg: "var(--mantine-spacing-lg)",
-		xl: "var(--mantine-spacing-xl)"
-	},
-	colors: {
-		primary: "var(--mantine-primary-color-filled)",
-		primaryColors: {
-			"0": "var(--mantine-primary-color-0)",
-			"1": "var(--mantine-primary-color-1)",
-			"2": "var(--mantine-primary-color-2)",
-			"3": "var(--mantine-primary-color-3)",
-			"4": "var(--mantine-primary-color-4)",
-			"5": "var(--mantine-primary-color-5)",
-			"6": "var(--mantine-primary-color-6)",
-			"7": "var(--mantine-primary-color-7)",
-			"8": "var(--mantine-primary-color-8)",
-			"9": "var(--mantine-primary-color-9)",
-			filled: "var(--mantine-primary-color-filled)",
-			filledHover: "var(--mantine-primary-color-filled-hover)",
-			light: "var(--mantine-primary-color-light)",
-			lightHover: "var(--mantine-primary-color-light-hover)",
-			lightColor: "var(--mantine-primary-color-light-color)",
-			outline: "var(--mantine-primary-color-outline)",
-			outlineHover: "var(--mantine-primary-color-outline-hover)"
-		},
-		white: "var(--mantine-color-white)",
-		black: "var(--mantine-color-black)",
-		text: "var(--mantine-color-text)",
-		body: "var(--mantine-color-body)",
-		error: "var(--mantine-color-error)",
-		placeholder: "var(--mantine-color-placeholder)",
-		anchor: "var(--mantine-color-anchor)",
-		default: "var(--mantine-color-default)",
-		defaultHover: "var(--mantine-color-default-hover)",
-		defaultColor: "var(--mantine-color-default-color)",
-		defaultBorder: "var(--mantine-color-default-border)",
-		dimmed: "var(--mantine-color-dimmed)",
-		disabledBody: "var(--mantine-color-disabled)",
-		disabledText: "var(--mantine-color-disabled-color)",
-		disabledBorder: "var(--mantine-color-disabled-border)",
-		dark: {
-			"0": "var(--mantine-color-dark-0)",
-			"1": "var(--mantine-color-dark-1)",
-			"2": "var(--mantine-color-dark-2)",
-			"3": "var(--mantine-color-dark-3)",
-			"4": "var(--mantine-color-dark-4)",
-			"5": "var(--mantine-color-dark-5)",
-			"6": "var(--mantine-color-dark-6)",
-			"7": "var(--mantine-color-dark-7)",
-			"8": "var(--mantine-color-dark-8)",
-			"9": "var(--mantine-color-dark-9)",
-			filled: "var(--mantine-color-dark-filled)",
-			filledHover: "var(--mantine-color-dark-filled-hover)",
-			light: "var(--mantine-color-dark-light)",
-			lightHover: "var(--mantine-color-dark-light-hover)",
-			lightColor: "var(--mantine-color-dark-light-color)",
-			outline: "var(--mantine-color-dark-outline)",
-			outlineHover: "var(--mantine-color-dark-outline-hover)"
-		},
-		gray: {
-			"0": "var(--mantine-color-gray-0)",
-			"1": "var(--mantine-color-gray-1)",
-			"2": "var(--mantine-color-gray-2)",
-			"3": "var(--mantine-color-gray-3)",
-			"4": "var(--mantine-color-gray-4)",
-			"5": "var(--mantine-color-gray-5)",
-			"6": "var(--mantine-color-gray-6)",
-			"7": "var(--mantine-color-gray-7)",
-			"8": "var(--mantine-color-gray-8)",
-			"9": "var(--mantine-color-gray-9)",
-			filled: "var(--mantine-color-gray-filled)",
-			filledHover: "var(--mantine-color-gray-filled-hover)",
-			light: "var(--mantine-color-gray-light)",
-			lightHover: "var(--mantine-color-gray-light-hover)",
-			lightColor: "var(--mantine-color-gray-light-color)",
-			outline: "var(--mantine-color-gray-outline)",
-			outlineHover: "var(--mantine-color-gray-outline-hover)"
-		},
-		red: {
-			"0": "var(--mantine-color-red-0)",
-			"1": "var(--mantine-color-red-1)",
-			"2": "var(--mantine-color-red-2)",
-			"3": "var(--mantine-color-red-3)",
-			"4": "var(--mantine-color-red-4)",
-			"5": "var(--mantine-color-red-5)",
-			"6": "var(--mantine-color-red-6)",
-			"7": "var(--mantine-color-red-7)",
-			"8": "var(--mantine-color-red-8)",
-			"9": "var(--mantine-color-red-9)",
-			filled: "var(--mantine-color-red-filled)",
-			filledHover: "var(--mantine-color-red-filled-hover)",
-			light: "var(--mantine-color-red-light)",
-			lightHover: "var(--mantine-color-red-light-hover)",
-			lightColor: "var(--mantine-color-red-light-color)",
-			outline: "var(--mantine-color-red-outline)",
-			outlineHover: "var(--mantine-color-red-outline-hover)"
-		},
-		pink: {
-			"0": "var(--mantine-color-pink-0)",
-			"1": "var(--mantine-color-pink-1)",
-			"2": "var(--mantine-color-pink-2)",
-			"3": "var(--mantine-color-pink-3)",
-			"4": "var(--mantine-color-pink-4)",
-			"5": "var(--mantine-color-pink-5)",
-			"6": "var(--mantine-color-pink-6)",
-			"7": "var(--mantine-color-pink-7)",
-			"8": "var(--mantine-color-pink-8)",
-			"9": "var(--mantine-color-pink-9)",
-			filled: "var(--mantine-color-pink-filled)",
-			filledHover: "var(--mantine-color-pink-filled-hover)",
-			light: "var(--mantine-color-pink-light)",
-			lightHover: "var(--mantine-color-pink-light-hover)",
-			lightColor: "var(--mantine-color-pink-light-color)",
-			outline: "var(--mantine-color-pink-outline)",
-			outlineHover: "var(--mantine-color-pink-outline-hover)"
-		},
-		grape: {
-			"0": "var(--mantine-color-grape-0)",
-			"1": "var(--mantine-color-grape-1)",
-			"2": "var(--mantine-color-grape-2)",
-			"3": "var(--mantine-color-grape-3)",
-			"4": "var(--mantine-color-grape-4)",
-			"5": "var(--mantine-color-grape-5)",
-			"6": "var(--mantine-color-grape-6)",
-			"7": "var(--mantine-color-grape-7)",
-			"8": "var(--mantine-color-grape-8)",
-			"9": "var(--mantine-color-grape-9)",
-			filled: "var(--mantine-color-grape-filled)",
-			filledHover: "var(--mantine-color-grape-filled-hover)",
-			light: "var(--mantine-color-grape-light)",
-			lightHover: "var(--mantine-color-grape-light-hover)",
-			lightColor: "var(--mantine-color-grape-light-color)",
-			outline: "var(--mantine-color-grape-outline)",
-			outlineHover: "var(--mantine-color-grape-outline-hover)"
-		},
-		violet: {
-			"0": "var(--mantine-color-violet-0)",
-			"1": "var(--mantine-color-violet-1)",
-			"2": "var(--mantine-color-violet-2)",
-			"3": "var(--mantine-color-violet-3)",
-			"4": "var(--mantine-color-violet-4)",
-			"5": "var(--mantine-color-violet-5)",
-			"6": "var(--mantine-color-violet-6)",
-			"7": "var(--mantine-color-violet-7)",
-			"8": "var(--mantine-color-violet-8)",
-			"9": "var(--mantine-color-violet-9)",
-			filled: "var(--mantine-color-violet-filled)",
-			filledHover: "var(--mantine-color-violet-filled-hover)",
-			light: "var(--mantine-color-violet-light)",
-			lightHover: "var(--mantine-color-violet-light-hover)",
-			lightColor: "var(--mantine-color-violet-light-color)",
-			outline: "var(--mantine-color-violet-outline)",
-			outlineHover: "var(--mantine-color-violet-outline-hover)"
-		},
-		indigo: {
-			"0": "var(--mantine-color-indigo-0)",
-			"1": "var(--mantine-color-indigo-1)",
-			"2": "var(--mantine-color-indigo-2)",
-			"3": "var(--mantine-color-indigo-3)",
-			"4": "var(--mantine-color-indigo-4)",
-			"5": "var(--mantine-color-indigo-5)",
-			"6": "var(--mantine-color-indigo-6)",
-			"7": "var(--mantine-color-indigo-7)",
-			"8": "var(--mantine-color-indigo-8)",
-			"9": "var(--mantine-color-indigo-9)",
-			filled: "var(--mantine-color-indigo-filled)",
-			filledHover: "var(--mantine-color-indigo-filled-hover)",
-			light: "var(--mantine-color-indigo-light)",
-			lightHover: "var(--mantine-color-indigo-light-hover)",
-			lightColor: "var(--mantine-color-indigo-light-color)",
-			outline: "var(--mantine-color-indigo-outline)",
-			outlineHover: "var(--mantine-color-indigo-outline-hover)"
-		},
-		blue: {
-			"0": "var(--mantine-color-blue-0)",
-			"1": "var(--mantine-color-blue-1)",
-			"2": "var(--mantine-color-blue-2)",
-			"3": "var(--mantine-color-blue-3)",
-			"4": "var(--mantine-color-blue-4)",
-			"5": "var(--mantine-color-blue-5)",
-			"6": "var(--mantine-color-blue-6)",
-			"7": "var(--mantine-color-blue-7)",
-			"8": "var(--mantine-color-blue-8)",
-			"9": "var(--mantine-color-blue-9)",
-			filled: "var(--mantine-color-blue-filled)",
-			filledHover: "var(--mantine-color-blue-filled-hover)",
-			light: "var(--mantine-color-blue-light)",
-			lightHover: "var(--mantine-color-blue-light-hover)",
-			lightColor: "var(--mantine-color-blue-light-color)",
-			outline: "var(--mantine-color-blue-outline)",
-			outlineHover: "var(--mantine-color-blue-outline-hover)"
-		},
-		cyan: {
-			"0": "var(--mantine-color-cyan-0)",
-			"1": "var(--mantine-color-cyan-1)",
-			"2": "var(--mantine-color-cyan-2)",
-			"3": "var(--mantine-color-cyan-3)",
-			"4": "var(--mantine-color-cyan-4)",
-			"5": "var(--mantine-color-cyan-5)",
-			"6": "var(--mantine-color-cyan-6)",
-			"7": "var(--mantine-color-cyan-7)",
-			"8": "var(--mantine-color-cyan-8)",
-			"9": "var(--mantine-color-cyan-9)",
-			filled: "var(--mantine-color-cyan-filled)",
-			filledHover: "var(--mantine-color-cyan-filled-hover)",
-			light: "var(--mantine-color-cyan-light)",
-			lightHover: "var(--mantine-color-cyan-light-hover)",
-			lightColor: "var(--mantine-color-cyan-light-color)",
-			outline: "var(--mantine-color-cyan-outline)",
-			outlineHover: "var(--mantine-color-cyan-outline-hover)"
-		},
-		teal: {
-			"0": "var(--mantine-color-teal-0)",
-			"1": "var(--mantine-color-teal-1)",
-			"2": "var(--mantine-color-teal-2)",
-			"3": "var(--mantine-color-teal-3)",
-			"4": "var(--mantine-color-teal-4)",
-			"5": "var(--mantine-color-teal-5)",
-			"6": "var(--mantine-color-teal-6)",
-			"7": "var(--mantine-color-teal-7)",
-			"8": "var(--mantine-color-teal-8)",
-			"9": "var(--mantine-color-teal-9)",
-			filled: "var(--mantine-color-teal-filled)",
-			filledHover: "var(--mantine-color-teal-filled-hover)",
-			light: "var(--mantine-color-teal-light)",
-			lightHover: "var(--mantine-color-teal-light-hover)",
-			lightColor: "var(--mantine-color-teal-light-color)",
-			outline: "var(--mantine-color-teal-outline)",
-			outlineHover: "var(--mantine-color-teal-outline-hover)"
-		},
-		green: {
-			"0": "var(--mantine-color-green-0)",
-			"1": "var(--mantine-color-green-1)",
-			"2": "var(--mantine-color-green-2)",
-			"3": "var(--mantine-color-green-3)",
-			"4": "var(--mantine-color-green-4)",
-			"5": "var(--mantine-color-green-5)",
-			"6": "var(--mantine-color-green-6)",
-			"7": "var(--mantine-color-green-7)",
-			"8": "var(--mantine-color-green-8)",
-			"9": "var(--mantine-color-green-9)",
-			filled: "var(--mantine-color-green-filled)",
-			filledHover: "var(--mantine-color-green-filled-hover)",
-			light: "var(--mantine-color-green-light)",
-			lightHover: "var(--mantine-color-green-light-hover)",
-			lightColor: "var(--mantine-color-green-light-color)",
-			outline: "var(--mantine-color-green-outline)",
-			outlineHover: "var(--mantine-color-green-outline-hover)"
-		},
-		lime: {
-			"0": "var(--mantine-color-lime-0)",
-			"1": "var(--mantine-color-lime-1)",
-			"2": "var(--mantine-color-lime-2)",
-			"3": "var(--mantine-color-lime-3)",
-			"4": "var(--mantine-color-lime-4)",
-			"5": "var(--mantine-color-lime-5)",
-			"6": "var(--mantine-color-lime-6)",
-			"7": "var(--mantine-color-lime-7)",
-			"8": "var(--mantine-color-lime-8)",
-			"9": "var(--mantine-color-lime-9)",
-			filled: "var(--mantine-color-lime-filled)",
-			filledHover: "var(--mantine-color-lime-filled-hover)",
-			light: "var(--mantine-color-lime-light)",
-			lightHover: "var(--mantine-color-lime-light-hover)",
-			lightColor: "var(--mantine-color-lime-light-color)",
-			outline: "var(--mantine-color-lime-outline)",
-			outlineHover: "var(--mantine-color-lime-outline-hover)"
-		},
-		yellow: {
-			"0": "var(--mantine-color-yellow-0)",
-			"1": "var(--mantine-color-yellow-1)",
-			"2": "var(--mantine-color-yellow-2)",
-			"3": "var(--mantine-color-yellow-3)",
-			"4": "var(--mantine-color-yellow-4)",
-			"5": "var(--mantine-color-yellow-5)",
-			"6": "var(--mantine-color-yellow-6)",
-			"7": "var(--mantine-color-yellow-7)",
-			"8": "var(--mantine-color-yellow-8)",
-			"9": "var(--mantine-color-yellow-9)",
-			filled: "var(--mantine-color-yellow-filled)",
-			filledHover: "var(--mantine-color-yellow-filled-hover)",
-			light: "var(--mantine-color-yellow-light)",
-			lightHover: "var(--mantine-color-yellow-light-hover)",
-			lightColor: "var(--mantine-color-yellow-light-color)",
-			outline: "var(--mantine-color-yellow-outline)",
-			outlineHover: "var(--mantine-color-yellow-outline-hover)"
-		},
-		orange: {
-			"0": "var(--mantine-color-orange-0)",
-			"1": "var(--mantine-color-orange-1)",
-			"2": "var(--mantine-color-orange-2)",
-			"3": "var(--mantine-color-orange-3)",
-			"4": "var(--mantine-color-orange-4)",
-			"5": "var(--mantine-color-orange-5)",
-			"6": "var(--mantine-color-orange-6)",
-			"7": "var(--mantine-color-orange-7)",
-			"8": "var(--mantine-color-orange-8)",
-			"9": "var(--mantine-color-orange-9)",
-			filled: "var(--mantine-color-orange-filled)",
-			filledHover: "var(--mantine-color-orange-filled-hover)",
-			light: "var(--mantine-color-orange-light)",
-			lightHover: "var(--mantine-color-orange-light-hover)",
-			lightColor: "var(--mantine-color-orange-light-color)",
-			outline: "var(--mantine-color-orange-outline)",
-			outlineHover: "var(--mantine-color-orange-outline-hover)"
-		}
-	},
-	rtlSelector: "[dir=\"rtl\"] &",
-	darkSelector: "[data-mantine-color-scheme=\"dark\"] &",
-	lightSelector: "[data-mantine-color-scheme=\"light\"] &"
-};
-//#endregion
-//#region ../preset/src/helpers.ts
-/**
-* Changes the alpha channel of a color
-* @param color color value or CSS variable
-* @param percentage Alpha channel value
-* @returns
-*/
-function alpha(color, percentage = 50) {
-	let alpha = percentage;
-	if (typeof percentage === "number") {
-		if (percentage > 0 && percentage < 1) percentage *= 100;
-		alpha = `${percentage}%`;
-	}
-	return `oklch(from ${color} l c h / ${alpha})`;
-}
-function rem(pixels) {
-	return `${pixels}px`;
-}
-//#endregion
-//#region ../preset/src/globalCss.ts
-const sizeConditions = {
-	...t$5(t$6(defaultTheme.textSizes), (size) => [`:where([data-likec4-text-size='${size}'])`, { [vars.textsize]: `{fontSizes.likec4.${size}}` }]),
-	...t$5(t$6(defaultTheme.spacing), (size) => [`:where([data-likec4-spacing='${size}'])`, { [vars.spacing]: `{spacing.likec4.${size}}` }])
-};
-const globalCss = { extend: {
-	":where(:root,:host)": { ["--likec4-app-font-default"]: `'IBM Plex Sans Variable',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"` },
-	...sizeConditions,
-	".likec4-shadow-root": {
-		display: "contents",
-		color: "var(--colors-text)",
-		"& dialog": { color: "var(--colors-text)" }
-	},
-	".likec4-edge-label-container": {
-		top: 0,
-		left: 0,
-		position: "absolute",
-		width: "auto",
-		height: "auto",
-		display: {
-			_reduceGraphicsOnPan: "none",
-			_smallZoom: "none"
-		},
-		willChange: "transform",
-		zIndex: "likec4.diagram.edge.label"
-	},
-	":where(.likec4-relationship-details) .likec4-edge-label-container > :first-child": { maxWidth: "350px" },
-	".likec4-relationship-details :is(.likec4-edge-label__text, .likec4-edge-label__technology)": {
-		display: "-webkit-box!",
-		WebkitBoxOrient: "vertical!",
-		WebkitLineClamp: "1!",
-		overflow: "hidden!"
-	},
-	".likec4-root": {
-		overflow: "hidden",
-		position: "relative",
-		padding: 0,
-		margin: 0,
-		width: "100%",
-		height: "100%",
-		border: "0px solid transparent",
-		background: "transparent",
-		containerName: "likec4-root",
-		containerType: "size",
-		_print: {
-			"& .react-flow__background": { display: "none" },
-			"& .react-flow": {
-				background: "transparent !important",
-				"--xy-background-color": "transparent !important"
-			},
-			"& *": {
-				colorAdjust: "exact!",
-				printColorAdjust: "exact!"
-			}
-		},
-		"& .mantine-ActionIcon-icon .tabler-icon": {
-			width: "75%",
-			height: "75%"
-		},
-		"& .react-flow": {
-			"--xy-background-color": "var(--colors-likec4-background)",
-			"--xy-background-pattern-color": "var(--colors-likec4-background-pattern, var(--colors-likec4-background))",
-			"&:is(.not-initialized)": { opacity: 0 },
-			"&:is(.bg-transparent)": {
-				background: "transparent !important",
-				"--xy-background-color": "transparent !important"
-			},
-			"& .react-flow__pane": { userSelect: "none" },
-			"& :is(.react-flow__nodes, .react-flow__edges, .react-flow__edgelabel-renderer, .react-flow__viewport-portal)": { display: "contents" },
-			"& .react-flow__node.draggable:has(.likec4-compound-node)": { cursor: "default" },
-			"& .likec4-node-handle-center": {
-				top: "50%!",
-				left: "50%!",
-				right: "unset!",
-				bottom: "unset!",
-				visibility: "hidden!",
-				width: "5px!",
-				height: "5px!",
-				transform: "translate(-50%, -50%)!"
-			}
-		},
-		"& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed])": { opacity: .25 },
-		"& .likec4-edge-label-container:is([data-likec4-dimmed])": { opacity: .25 },
-		"& :where(.react-flow__edge, .likec4-edge-container, .likec4-edge-label-container)": {
-			"--xy-edge-stroke-width": 3,
-			"--xy-edge-stroke": __v("palette.relationStroke"),
-			"--xy-edge-stroke-selected": __v("palette.relationStrokeSelected"),
-			"--xy-edge-label-color": {
-				base: __v("palette.relationLabel"),
-				_light: `oklch(from ${__v("palette.relationLabel")} calc(l + 0.1) c h)`
-			},
-			"--xy-edge-label-background-color": {
-				base: alpha(__v("palette.relationLabelBg"), 85),
-				_light: alpha(__v("palette.relationLabelBg"), 65)
-			},
-			"&:is([data-likec4-hovered=\"true\"], [data-edge-active=\"true\"])": {
-				"--xy-edge-stroke-width": 4,
-				"--xy-edge-stroke": __v("palette.relationStrokeSelected")
-			}
-		},
-		"&:is([data-likec4-reduced-graphics=\"true\"]) .hide-on-reduced-graphics": { display: "none!" },
-		"&:not([data-likec4-reduced-graphics=\"true\"])": {
-			"& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed])": { filter: "grayscale(85%)" },
-			"& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed=\"true\"])": {
-				transitionProperty: "opacity, filter",
-				transitionTimingFunction: "cubic-bezier(0.50, 0, 0.2, 1)",
-				transitionDuration: "400ms"
-			},
-			"& .likec4-edge-label-container:is([data-likec4-dimmed])": { filter: "grayscale(85%)" },
-			"& .likec4-edge-label-container:is([data-likec4-dimmed=\"true\"])": {
-				transitionProperty: "opacity, filter",
-				transitionTimingFunction: "cubic-bezier(0.50, 0, 0.2, 1)",
-				transitionDuration: "400ms"
-			},
-			"& :where(.react-flow__edgelabel-renderer) > *": { mixBlendMode: {
-				base: "luminosity",
-				_light: "hard-light",
-				_print: "normal!"
-			} },
-			"& :where(.react-flow__edges) > svg": { mixBlendMode: {
-				base: "multiply",
-				_dark: "plus-lighter",
-				_print: "normal!"
-			} },
-			"&:has(.react-flow__node-seq-parallel) :where(.react-flow__edges > svg)": { mixBlendMode: { _light: "color-burn" } },
-			"& .react-flow__node-seq-parallel": { mixBlendMode: {
-				_dark: "luminosity",
-				_light: "color-burn",
-				_print: "normal!"
-			} }
-		}
-	},
-	":where(.likec4-static-view, .relationships-browser, .likec4-relationship-details) .react-flow .react-flow__attribution": { display: "none" }
-} };
-//#endregion
-//#region ../preset/src/globalVars.ts
-const globalVars = { extend: {
-	[vars.font]: "var(--likec4-app-font-default)",
-	[vars.spacing]: "/*-*/ /*-*/",
-	[vars.textsize]: rem(defaultTheme.textSizes.md),
-	[vars.palette.fill]: defaultTheme.colors.primary.elements.fill,
-	[vars.palette.stroke]: defaultTheme.colors.primary.elements.stroke,
-	[vars.palette.hiContrast]: defaultTheme.colors.primary.elements.hiContrast,
-	[vars.palette.loContrast]: defaultTheme.colors.primary.elements.loContrast,
-	[vars.palette.relationStroke]: defaultTheme.colors.gray.relationships.line,
-	[vars.palette.relationLabel]: defaultTheme.colors.gray.relationships.label,
-	[vars.palette.relationLabelBg]: defaultTheme.colors.gray.relationships.labelBg,
-	[vars.palette.relationStrokeSelected]: __v("palette.relationStroke"),
-	"--mantine-scale": "1",
-	[vars.palette.outline]: __v("palette.loContrast"),
-	"--text-fz": "/*-*/ /*-*/",
-	[vars.icon.color]: "/*-*/ /*-*/",
-	[vars.icon.size]: "/*-*/ /*-*/"
-} };
-//#endregion
-//#region ../preset/src/layer-styles.ts
-const layerStyles = /* @__PURE__ */ defineLayerStyles({ likec4: {
-	tag: {
-		description: "LikeC4 tag layer",
-		value: {
-			color: "likec4.tag.text",
-			backgroundColor: "likec4.tag.bg",
-			_hover: { backgroundColor: "likec4.tag.bg.hover" },
-			border: "none",
-			borderRadius: 3
-		}
-	},
-	panel: {
-		DEFAULT: {
-			description: "LikeC4 panel layer",
-			value: {
-				padding: "1",
-				borderRadius: "0",
-				backgroundColor: "likec4.panel.bg",
-				border: "1px solid {colors.likec4.panel.border}",
-				"@/sm": {
-					boxShadow: "lg",
-					borderRadius: "md",
-					paddingInline: "2"
-				},
-				_reduceGraphicsOnPan: { boxShadow: "none" }
-			}
-		},
-		action: {
-			DEFAULT: {
-				description: "LikeC4 panel action layer",
-				value: {
-					color: {
-						base: "likec4.panel.action",
-						_disabled: "likec4.panel.action.disabled",
-						_notDisabled: { _hover: "likec4.panel.action.hover" }
-					},
-					cursor: {
-						base: "pointer",
-						_disabled: "not-allowed"
-					},
-					paddingInline: "xxs",
-					paddingBlock: "xxs",
-					border: "transparent",
-					borderRadius: "sm",
-					backgroundColor: { _notDisabled: { _hover: "likec4.panel.action.bg.hover" } }
-				}
-			},
-			filled: {
-				description: "LikeC4 action panel filled layer",
-				value: {
-					color: {
-						base: "likec4.panel.action",
-						_disabled: "likec4.panel.action.disabled",
-						_notDisabled: { _hover: "likec4.panel.action.hover" }
-					},
-					cursor: {
-						base: "pointer",
-						_disabled: "not-allowed"
-					},
-					paddingInline: "xxs",
-					paddingBlock: "xxs",
-					border: "transparent",
-					borderRadius: "sm",
-					backgroundColor: {
-						base: "likec4.panel.action.bg",
-						_disabled: "likec4.panel.action.bg",
-						_notDisabled: { _hover: "likec4.panel.action.bg.hover" }
-					}
-				}
-			}
-		}
-	},
-	dropdown: {
-		description: "LikeC4 dropdown layer",
-		value: {
-			padding: "2",
-			backgroundColor: "likec4.dropdown.bg",
-			border: "1px solid {colors.likec4.dropdown.border}",
-			boxShadow: "lg",
-			borderRadius: "md"
-		}
-	}
-} });
-//#endregion
-//#region ../preset/src/pattens/index.ts
-const patterns = { extend: {
-	vstack: { defaultValues: {
-		alignItems: "stretch",
-		gap: "sm"
-	} },
-	hstack: { defaultValues: { gap: "sm" } },
-	box: { jsx: ["Box", "MarkdownBlock"] },
-	txt: definePattern({
-		properties: {
-			inline: {
-				description: "Whether the text should be inline (default: false)",
-				type: "boolean"
-			},
-			dimmed: {
-				description: "Whether the text should be dimmed (default: false)",
-				type: "boolean"
-			},
-			noUserSelect: {
-				description: "Whether the text should not be selectable (default: false)",
-				type: "boolean"
-			},
-			lh: {
-				type: "token",
-				value: "lineHeights"
-			},
-			size: {
-				type: "enum",
-				value: [
-					"xxs",
-					"xs",
-					"sm",
-					"md",
-					"lg",
-					"xl"
-				]
-			},
-			likec4color: {
-				type: "enum",
-				value: [...ThemeColors]
-			}
-		},
-		defaultValues: {
-			inline: false,
-			dimmed: false,
-			size: "md",
-			noUserSelect: false
-		},
-		transform(props, _helpers) {
-			const { inline, size, dimmed, lh, likec4color, noUserSelect, ...rest } = props;
-			if (dimmed && likec4color) throw new Error("dimmed and likec4color are mutually exclusive");
-			return {
-				userSelect: "all",
-				cursor: "default",
-				textStyle: dimmed ? `dimmed.${size}` : size,
-				...inline && { display: "inline-block" },
-				...lh && { lineHeight: lh },
-				...likec4color && { "data-likec4-color": likec4color },
-				...noUserSelect && { userSelect: "none" },
-				...rest
-			};
-		},
-		jsxElement: "div",
-		jsxName: "Txt",
-		jsx: ["Txt"]
-	})
-} };
-//#endregion
-//#region ../preset/src/radixColors.ts
-const radixColorsPreset = /* @__PURE__ */ createPreset({
-	autoP3: false,
-	darkMode: { condition: "[data-mantine-color-scheme=\"dark\"] &" },
-	colorScales: [...DefaultTagColors]
-});
-const actionButtons = defineRecipe({
-	className: "action-buttons",
-	description: "Action Buttons Container within Diagram Node (Bottom-Center)",
-	base: defineParts({
-		root: { selector: "&" },
-		container: { selector: "& > div" }
-	})({
-		root: {
-			display: "flex",
-			flexDirection: "row",
-			position: "absolute",
-			top: "calc(100% - 30px)",
-			transform: "translateX(-50%)",
-			left: `50%`,
-			width: "auto",
-			minHeight: 30,
-			zIndex: 1,
-			justifyContent: "center",
-			alignItems: "center",
-			_smallZoom: { display: "none" }
-		},
-		container: {
-			display: "flex",
-			flexDirection: "row",
-			gap: "1.5",
-			justifyContent: "center",
-			alignItems: "center"
-		}
-	}),
-	staticCss: [{ conditions: ["*"] }]
-});
-const actionBtn = defineRecipe({
-	className: "action-btn",
-	description: "Action Button within Diagram Node (Bottom-Center)",
-	base: {
-		color: "var(--actionbtn-color)",
-		opacity: .75,
-		"--actionbtn-color": "var(--likec4-palette-loContrast)",
-		"--actionbtn-color-hovered": "var(--likec4-palette-loContrast)",
-		"--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
-		"--actionbtn-bg-idle": `color-mix(in oklab , var(--likec4-palette-fill),  transparent 99%)`,
-		"--actionbtn-bg-hovered": `color-mix(in oklab , var(--likec4-palette-fill) 65%, var(--likec4-palette-stroke))`,
-		"--actionbtn-bg-hovered-btn": `color-mix(in oklab , var(--likec4-palette-fill) 50%, var(--likec4-palette-stroke))`,
-		"--ai-bg": `var(--actionbtn-bg-idle)`,
-		background: `var(--ai-bg)`,
-		_whenSelectable: {
-			pointerEvents: "all",
-			cursor: "pointer"
-		},
-		_whenHovered: {
-			opacity: 1,
-			color: "var(--actionbtn-color-hovered)",
-			"--ai-bg": `var(--actionbtn-bg-hovered)`
-		},
-		_hover: {
-			opacity: 1,
-			color: "var(--actionbtn-color-hovered-btn)",
-			"--ai-bg": `var(--actionbtn-bg-hovered-btn)`
-		},
-		_reduceGraphicsOnPan: { display: "none" },
-		_smallZoom: { display: "none" },
-		"& *": { pointerEvents: "none" },
-		_print: { display: "none" }
-	},
-	variants: {
-		variant: {
-			transparent: { "--actionbtn-bg-hovered": `var(--actionbtn-bg-idle)` },
-			filled: { boxShadow: {
-				base: "1px 1px 3px 0px transparent",
-				_whenHovered: "1px 1px 3px 0px rgba(0, 0, 0, 0.2)",
-				_reduceGraphics: "none"
-			} }
-		},
-		size: {
-			sm: { ["--ai-size"]: `22px` },
-			md: { ["--ai-size"]: `28px` }
-		},
-		radius: {
-			sm: { "--ai-radius": `{radii.sm}` },
-			md: { "--ai-radius": `{radii.md}` }
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		radius: "md",
-		variant: "filled"
-	},
-	staticCss: [{
-		size: ["*"],
-		radius: ["*"],
-		variant: ["*"],
-		conditions: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/compoundNode.ts
-const borderWidth = {
-	var: "--_border-width",
-	ref: "var(--_border-width)"
-};
-const borderRadius$1 = {
-	var: "--_border-radius",
-	ref: "var(--_border-radius)"
-};
-const compoundTransparency = {
-	var: "--_compound-transparency",
-	ref: "var(--_compound-transparency)"
-};
-const borderTransparency = {
-	var: "--_border-transparency",
-	ref: "var(--_border-transparency)"
-};
-const indicatorSpacing = {
-	var: "--_indicator-spacing",
-	ref: "var(--_indicator-spacing)"
-};
-const compoundColor = {
-	var: "--_compound-color",
-	ref: "var(--_compound-color)"
-};
-const parts$5 = defineParts({
-	root: { selector: "&" },
-	titleContainer: { selector: "& .likec4-compound-title-container" },
-	title: { selector: "& .likec4-compound-title" },
-	icon: { selector: "& .likec4-compound-icon" },
-	navigationBtn: { selector: "& .likec4-compound-navigation" },
-	detailsBtn: { selector: "& .likec4-compound-details" },
-	actionBtn: { selector: "& .action-btn" }
-});
-const iconSize = "20px";
-const compoundNode = defineRecipe({
-	className: "likec4-compound-node",
-	base: parts$5({
-		root: {
-			position: "relative",
-			width: "100%",
-			height: "100%",
-			padding: "0",
-			margin: "0",
-			pointerEvents: "none",
-			backgroundClip: "padding-box",
-			borderStyle: "solid",
-			borderWidth: borderWidth.ref,
-			borderRadius: borderRadius$1.ref,
-			boxSizing: "border-box",
-			[vars.palette.outline]: {
-				base: `oklch(from ${__v("palette.stroke")} calc(l - 0.15) c h)`,
-				_dark: `oklch(from ${__v("palette.stroke")} calc(l + 0.2) c h)`
-			},
-			[borderWidth.var]: "3px",
-			[borderRadius$1.var]: "6px",
-			[compoundTransparency.var]: "100%",
-			[borderTransparency.var]: "100%",
-			[indicatorSpacing.var]: `calc(${borderWidth.ref} + 1px)`,
-			[vars.icon.color]: compoundColor.ref,
-			color: compoundColor.ref,
-			_before: {
-				position: "absolute",
-				content: "\" \"",
-				top: `calc(1px - ${indicatorSpacing.ref} - ${borderWidth.ref})`,
-				left: `calc(1px - ${indicatorSpacing.ref} - ${borderWidth.ref})`,
-				width: `calc(100% + 2 * (${indicatorSpacing.ref} + ${borderWidth.ref} - 1px))`,
-				height: `calc(100% + 2 * (${indicatorSpacing.ref} + ${borderWidth.ref} - 1px))`,
-				borderStyle: "solid",
-				borderWidth: `calc(${borderWidth.ref} + 1px)`,
-				borderRadius: `calc(${borderRadius$1.ref} + 4px)`,
-				borderColor: __v("palette.outline"),
-				pointerEvents: "none",
-				display: {
-					base: "none",
-					_whenFocused: "block",
-					_whenSelected: "block"
-				},
-				animationStyle: "indicator",
-				animationPlayState: {
-					base: "paused",
-					_whenFocused: "running",
-					_whenSelected: "running",
-					_whenPanning: "paused"
-				}
-			},
-			[`&:has(.likec4-compound-navigation) .likec4-compound-title-container`]: { paddingLeft: "[24px]" }
-		},
-		titleContainer: {
-			position: "absolute",
-			display: "flex",
-			alignItems: "center",
-			gap: "1.5",
-			left: "2.5",
-			top: "0.5",
-			right: "30px",
-			width: "auto",
-			minHeight: "28px",
-			color: compoundColor.ref,
-			[`:where(.react-flow__node.draggable) &`]: {
-				pointerEvents: "all",
-				cursor: "grab"
-			}
-		},
-		title: {
-			flex: "1",
-			fontFamily: "likec4.compound",
-			fontWeight: 600,
-			fontSize: "15px",
-			textTransform: "uppercase",
-			letterSpacing: "0.25px",
-			lineHeight: "1"
-		},
-		icon: {
-			flex: `0 0 ${iconSize}`,
-			height: `${iconSize}`,
-			width: `${iconSize}`,
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			mixBlendMode: {
-				base: "hard-light",
-				_reduceGraphicsOnPan: "normal",
-				_print: "normal!"
-			},
-			[`& svg, & img`]: {
-				width: "100%",
-				height: "auto",
-				maxHeight: "100%",
-				pointerEvents: "none",
-				filter: {
-					base: [
-						"drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
-						"drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
-						"drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
-					].join("\n"),
-					_reduceGraphicsOnPan: "none"
-				}
-			},
-			[`& img`]: { objectFit: "contain" }
-		},
-		actionBtn: {
-			"--actionbtn-color": `oklch(from ${compoundColor.ref} calc(l - 0.1) c h)`,
-			"--actionbtn-color-hovered": compoundColor.ref,
-			"--actionbtn-color-hovered-btn": `oklch(from ${compoundColor.ref} calc(l + 0.2) c h)`,
-			opacity: {
-				base: .6,
-				_whenHovered: .75,
-				_whenSelected: .75,
-				_hover: 1
-			},
-			_noReduceGraphics: { transition: "fast" },
-			_print: { display: "none" }
-		},
-		navigationBtn: {
-			position: "absolute",
-			top: "0.5",
-			left: "0.5",
-			_smallZoom: { display: "none" },
-			_print: { display: "none" }
-		},
-		detailsBtn: {
-			position: "absolute",
-			top: "0.5",
-			right: "0.5",
-			_smallZoom: { display: "none" },
-			_print: { display: "none" }
-		}
-	}),
-	variants: {
-		isTransparent: {
-			false: parts$5({ root: {
-				boxShadow: {
-					_noReduceGraphics: "0 4px 10px 0.5px rgb(0 0 0/10%) , 0 2px 2px -1px rgb(0 0 0/40%)",
-					_whenSelected: "none",
-					_whenPanning: "none !important"
-				},
-				backgroundColor: __v("palette.fill"),
-				borderColor: __v("palette.stroke"),
-				[compoundColor.var]: alpha(__v("palette.hiContrast"), 90)
-			} }),
-			true: parts$5({ root: {
-				backgroundColor: alpha(__v("palette.fill"), compoundTransparency.ref),
-				borderColor: alpha(__v("palette.stroke"), borderTransparency.ref),
-				[compoundColor.var]: `color-mix(in oklch, ${__v("palette.hiContrast")}, ${__v("palette.stroke")} 10%)`
-			} })
-		},
-		inverseColor: {
-			true: parts$5({
-				root: {
-					"--_mix": `color-mix(in oklch, ${__v("palette.hiContrast")}, ${__v("palette.stroke")} 60%)`,
-					[compoundColor.var]: {
-						base: "oklch(from var(--_mix) calc(l - 0.2) c h)",
-						_dark: "oklch(from var(--_mix) calc(l + 0.2) c h)"
-					}
-				},
-				actionBtn: {
-					"--actionbtn-color": compoundColor.ref,
-					_light: {
-						"--actionbtn-color-hovered": __v("palette.stroke"),
-						"--actionbtn-color-hovered-btn": __v("palette.hiContrast"),
-						"--actionbtn-bg-hovered": alpha(__v("palette.fill"), 30),
-						"--actionbtn-bg-hovered-btn": __v("palette.fill")
-					}
-				}
-			}),
-			false: {}
-		},
-		borderStyle: {
-			solid: parts$5({ root: { borderStyle: "solid" } }),
-			dashed: parts$5({ root: { borderStyle: "dashed" } }),
-			dotted: parts$5({ root: { borderStyle: "dotted" } }),
-			none: parts$5({ root: {
-				borderColor: "transparent!",
-				backgroundClip: "border-box!",
-				[indicatorSpacing.var]: `calc(${borderWidth.ref} * 2)`
-			} })
-		}
-	},
-	defaultVariants: {
-		isTransparent: false,
-		inverseColor: false,
-		borderStyle: "none"
-	},
-	staticCss: [{
-		isTransparent: ["*"],
-		inverseColor: ["*"],
-		borderStyle: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/edgeActionBtn.ts
-const edgeActionBtn = defineRecipe({
-	className: "likec4-edge-action-btn",
-	description: "Action Button within Diagram Edge Label",
-	base: {
-		pointerEvents: "all",
-		color: `var(--xy-edge-label-color)`,
-		cursor: "pointer",
-		opacity: .75,
-		transition: "fast",
-		translate: "auto",
-		"--ai-bg": "transparent",
-		"--ai-hover": `color-mix(in oklab , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
-		"--ai-size": `28px`,
-		"--ai-radius": `{radii.sm}`,
-		_hover: {
-			translateY: "[2px]",
-			scale: 1.15
-		},
-		_active: {
-			translateY: "[-1px]",
-			scale: "0.9"
-		},
-		_whenHovered: {
-			"--ai-bg": "var(--xy-edge-label-background-color)",
-			opacity: 1
-		},
-		"& .tabler-icon": {
-			width: "80%",
-			height: "80%",
-			strokeWidth: "2"
-		},
-		_print: { display: "none" }
-	},
-	variants: {},
-	defaultVariants: {},
-	staticCss: [{ conditions: ["*"] }]
-});
-//#endregion
-//#region ../preset/src/recipes/edgeLabel.ts
-const parts$4 = defineParts({
-	root: { selector: "&" },
-	stepNumber: { selector: "& .likec4-edge-label__step-number" },
-	contents: { selector: "& .likec4-edge-label__contents" },
-	label: { selector: "& .likec4-edge-label__text" },
-	technology: { selector: "& .likec4-edge-label__technology" }
-});
-const edgeLabel = defineRecipe({
-	className: "likec4-edge-label",
-	jsx: [],
-	base: parts$4({
-		root: {
-			fontFamily: "likec4.relation",
-			paddingBlock: "1",
-			paddingInline: "1.5",
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "center",
-			width: "max-content",
-			maxWidth: "100%",
-			gap: "0.5",
-			color: "var(--xy-edge-label-color)",
-			background: "var(--xy-edge-label-background-color)",
-			border: "0px solid transparent",
-			borderRadius: "4px"
-		},
-		stepNumber: {
-			alignSelf: "stretch",
-			flex: "0 0 auto",
-			fontWeight: 600,
-			fontSize: "14px",
-			padding: "1",
-			textAlign: "center",
-			minWidth: "22px",
-			borderTopLeftRadius: "4px",
-			borderBottomLeftRadius: "4px",
-			_only: {
-				borderRadius: "4px",
-				minWidth: "24px"
-			},
-			background: `color-mix(in oklab, var(--xy-edge-label-background-color), {colors.likec4.mixColor} 12%)`,
-			fontVariantNumeric: "tabular-nums",
-			[":where([data-likec4-color=\"gray\"]) &"]: { _dark: { background: `color-mix(in oklab, var(--xy-edge-label-background-color), {colors.likec4.mixColor} 15%)` } }
-		},
-		contents: {
-			display: "contents",
-			_empty: { display: "none !important" }
-		},
-		label: {
-			whiteSpaceCollapse: "preserve-breaks",
-			overflowWrap: "anywhere",
-			fontSize: "14px",
-			lineHeight: "1.2",
-			margin: "0"
-		},
-		technology: {
-			textAlign: "center",
-			whiteSpaceCollapse: "preserve-breaks",
-			overflowWrap: "anywhere",
-			fontSize: "11px",
-			lineHeight: "1",
-			opacity: .75
-		}
-	}),
-	variants: {
-		pointerEvents: {
-			none: parts$4({ root: { pointerEvents: "none" } }),
-			all: parts$4({ root: { pointerEvents: "all" } })
-		},
-		cursor: {
-			pointer: parts$4({ root: { cursor: "pointer" } }),
-			default: parts$4({ root: { cursor: "default" } })
-		},
-		isStepEdge: {
-			false: {},
-			true: parts$4({
-				root: {
-					flexDirection: "row",
-					gap: "1",
-					padding: "0"
-				},
-				contents: {
-					display: "flex",
-					flexDirection: "column",
-					alignItems: "center",
-					paddingTop: "0.5",
-					paddingRight: "1",
-					paddingBottom: "1",
-					gap: "0.5"
-				},
-				label: {
-					py: "0.5",
-					paddingRight: "0.5"
-				}
-			})
-		}
-	},
-	defaultVariants: {
-		pointerEvents: "all",
-		isStepEdge: false,
-		cursor: "default"
-	},
-	staticCss: [{
-		conditions: ["*"],
-		isStepEdge: ["*"],
-		cursor: ["*"],
-		pointerEvents: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/edgePath.ts
-const edgePath = defineSlotRecipe({
-	description: "Recipe for Edge Path",
-	slots: [
-		"path",
-		"pathBg",
-		"markersCtx",
-		"middlePoint"
-	],
-	className: "likec4-edge",
-	jsx: [],
-	base: {
-		path: {
-			fill: "none",
-			strokeDashoffset: 0,
-			_noReduceGraphics: {
-				animationStyle: "xyedgeAnimated",
-				animationPlayState: "paused",
-				transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
-			},
-			[`:where([data-edge-dir='back']) &`]: { animationDirection: "reverse" },
-			_whenHovered: { _noReduceGraphics: {
-				animationPlayState: "running",
-				animationDelay: "450ms"
-			} },
-			[`:where(.selected, [data-edge-active='true'], [data-edge-animated='true']) &`]: { _noReduceGraphics: {
-				animationPlayState: "running",
-				animationDelay: "0ms"
-			} },
-			_whenDimmed: { animationPlayState: "paused" },
-			_smallZoom: { animationName: "none" },
-			_whenPanning: {
-				strokeDasharray: "none !important",
-				animationPlayState: "paused"
-			}
-		},
-		pathBg: {
-			pointerEvents: "none",
-			fill: "none",
-			strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
-			strokeOpacity: {
-				base: .08,
-				_dark: .25
-			},
-			_noReduceGraphics: {
-				transitionProperty: "stroke-width, stroke-opacity",
-				transitionDuration: "fast",
-				transitionTimingFunction: "inOut"
-			},
-			_whenHovered: {
-				transitionTimingFunction: "out",
-				strokeWidth: "calc(var(--xy-edge-stroke-width) + 4)",
-				strokeOpacity: {
-					base: .2,
-					_dark: .45
-				}
-			},
-			_whenSelected: {
-				strokeWidth: "calc(var(--xy-edge-stroke-width) + 6)",
-				strokeOpacity: {
-					base: .25,
-					_dark: .5
-				},
-				_whenHovered: { strokeOpacity: {
-					base: .4,
-					_dark: .65
-				} }
-			}
-		},
-		markersCtx: {
-			fill: "[var(--xy-edge-stroke)]",
-			stroke: "[var(--xy-edge-stroke)]"
-		},
-		middlePoint: {
-			visibility: "hidden",
-			offsetDistance: "50%",
-			cx: 0,
-			cy: 0,
-			r: 4,
-			pointerEvents: "none"
-		}
-	},
-	staticCss: [{ conditions: ["*"] }]
-});
-//#endregion
-//#region ../preset/src/recipes/elementNode.ts
-const elementNode = defineRecipe({
-	className: "likec4-element-node",
-	jsx: ["ElementNodeContainer", "ElementNode"],
-	base: {
-		position: "relative",
-		width: "full",
-		height: "full",
-		padding: "0",
-		margin: "0",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		pointerEvents: "none",
-		_focusVisible: { outline: "none" },
-		_whenSelectable: {
-			pointerEvents: "all",
-			_before: {
-				content: "\" \"",
-				position: "absolute",
-				top: "calc(100% - 4px)",
-				left: "0",
-				width: "full",
-				height: "24px",
-				background: "transparent",
-				pointerEvents: "all"
-			}
-		},
-		_reduceGraphicsOnPan: { _before: { display: "none" } },
-		[`:where(.react-flow__node.selectable:not(.dragging)) &`]: { cursor: "pointer" },
-		[`&:is([data-likec4-shape="document"])`]: { paddingBottom: "16px" }
-	},
-	staticCss: [{ conditions: ["*"] }]
-});
-//#endregion
-//#region ../preset/src/recipes/elementNodeData.ts
-const parts$3 = defineParts({
-	root: { selector: "&" },
-	icon: { selector: "& [data-likec4-icon]" },
-	content: { selector: "& .likec4-element-node-content" },
-	title: { selector: "& [data-likec4-node-title]" },
-	description: { selector: "& [data-likec4-node-description]" },
-	technology: { selector: "& [data-likec4-node-technology]" }
-});
-const hasIcon = "&:has([data-likec4-icon])";
-const textAlign = "--__text-align";
-const varTextAlign = `var(${textAlign})`;
-const elementNodeData = defineRecipe({
-	className: "likec4-element-node-data",
-	jsx: [
-		"ElementNodeData",
-		"ElementNodeData.Root",
-		"ElementTitle",
-		"Root"
-	],
-	base: parts$3({
-		root: {
-			position: "relative",
-			flex: "1",
-			height: "fit-content",
-			width: "fit-content",
-			maxHeight: "100%",
-			maxWidth: "100%",
-			margin: "auto",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flexDirection: "row",
-			paddingTop: __v("spacing"),
-			paddingBottom: __v("spacing"),
-			paddingLeft: `calc(${__v("spacing")} + 8px)`,
-			paddingRight: `calc(${__v("spacing")} + 8px)`,
-			overflow: "hidden",
-			pointerEvents: "none",
-			gap: "3",
-			[textAlign]: "center",
-			_shapeQueue: {
-				paddingLeft: "46px",
-				paddingRight: "16px"
-			},
-			_shapeMobile: {
-				paddingLeft: "46px",
-				paddingRight: "16px"
-			},
-			_shapeCylinder: { paddingTop: "30px" },
-			_shapeStorage: { paddingTop: "30px" },
-			_shapeBrowser: {
-				paddingTop: "32px",
-				paddingBottom: "28px"
-			},
-			_shapeBucket: {
-				paddingLeft: `calc(${__v("spacing")} + 20px)`,
-				paddingRight: `calc(${__v("spacing")} + 20px)`
-			},
-			_shapeComponent: { paddingLeft: `calc(${__v("spacing")} + 30px)` },
-			_shapeSizeXs: { [vars.icon.size]: `${defaultSizes.iconSizes.xs}px` },
-			_shapeSizeSm: { [vars.icon.size]: `${defaultSizes.iconSizes.sm}px` },
-			_shapeSizeMd: { [vars.icon.size]: `${defaultSizes.iconSizes.md}px` },
-			_shapeSizeLg: {
-				[vars.icon.size]: `${defaultSizes.iconSizes.lg}px`,
-				gap: "4"
-			},
-			_shapeSizeXl: {
-				[vars.icon.size]: `${defaultSizes.iconSizes.xl}px`,
-				gap: "4"
-			},
-			[hasIcon]: { gap: "4" }
-		},
-		icon: {
-			flex: `0 0 ${__v("icon.size", "48px")}`,
-			height: __v("icon.size", "48px"),
-			width: __v("icon.size", "48px"),
-			display: "flex",
-			alignSelf: "flex-start",
-			alignItems: "center",
-			justifyContent: "center",
-			pointerEvents: "none",
-			color: __v("icon.color", "palette.hiContrast"),
-			"& svg, & img": {
-				width: "100%",
-				height: "auto",
-				maxHeight: "100%",
-				transition: "fast",
-				filter: {
-					base: ["drop-shadow(0 1px 3px rgb(0 0 0 / 20%))"].join("\n"),
-					_whenHovered: ["drop-shadow(0 2px 4px rgb(0 0 0 / 30%))"].join("\n"),
-					_reduceGraphicsOnPan: "none!"
-				}
-			},
-			"& img": { objectFit: "contain" }
-		},
-		content: {
-			height: "fit-content",
-			width: "fit-content",
-			maxHeight: "100%",
-			maxWidth: "100%",
-			flex: "0 1 auto",
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "stretch",
-			justifyContent: "center",
-			flexWrap: "nowrap",
-			overflow: "hidden",
-			gap: "2",
-			"&:has([data-likec4-node-description]):has([data-likec4-node-technology])": { gap: "1.5" }
-		},
-		title: {
-			flex: "0 0 auto",
-			fontFamily: "likec4.element",
-			fontWeight: "medium",
-			fontSize: __v("textsize"),
-			lineHeight: "sm",
-			textWrapStyle: "balance",
-			whiteSpace: "preserve-breaks",
-			textAlign: varTextAlign,
-			color: __v("palette.hiContrast"),
-			lineClamp: {
-				base: 3,
-				_shapeSizeXs: 2,
-				_shapeSizeSm: 2
-			}
-		},
-		description: {
-			flexGrow: "0",
-			flexShrink: "1",
-			fontFamily: "likec4.element",
-			fontWeight: "420",
-			fontSize: `calc(${__v("textsize")} * 0.74)`,
-			lineHeight: "xs",
-			textWrapStyle: "pretty",
-			"--text-fz": `calc(${__v("textsize")} * 0.74)`,
-			color: __v("palette.loContrast"),
-			textAlign: varTextAlign,
-			textOverflow: "ellipsis",
-			overflow: "hidden",
-			lineClamp: {
-				base: "5",
-				_shapeSizeSm: "3"
-			},
-			display: {
-				_shapeSizeXs: "none!",
-				_smallZoom: "none!"
-			},
-			"& a": { pointerEvents: "all" },
-			"& .markdown-alert": { mixBlendMode: "screen" }
-		},
-		technology: {
-			flex: "0 0 auto",
-			fontFamily: "likec4.element",
-			fontWeight: "normal",
-			fontSize: `calc(${__v("textsize")} * 0.635)`,
-			lineHeight: "xs",
-			"--text-fz": `calc(${__v("textsize")} * 0.635)`,
-			color: __v("palette.loContrast"),
-			textAlign: varTextAlign,
-			textWrap: "balance",
-			opacity: {
-				base: .92,
-				_whenHovered: 1
-			},
-			display: {
-				_shapeSizeXs: "none!",
-				_shapeSizeSm: "none!",
-				_smallZoom: "none!"
-			}
-		}
-	}),
-	variants: {
-		iconPosition: {
-			left: parts$3({ root: { [hasIcon]: {
-				[textAlign]: "left",
-				"& .likec4-element-node-content": {
-					minWidth: `calc(50% + calc(${__v("icon.size")} / 2))`,
-					alignItems: "flex-start"
-				}
-			} } }),
-			right: parts$3({ root: { [hasIcon]: {
-				flexDirection: "row-reverse",
-				[textAlign]: "right",
-				gap: "4",
-				"& .likec4-element-node-content": {
-					minWidth: `calc(50% - calc(${__v("icon.size")} / 2))`,
-					alignItems: "flex-end"
-				}
-			} } }),
-			top: parts$3({
-				root: { [hasIcon]: {
-					flexDirection: "column",
-					gap: "2",
-					height: "100%",
-					"& .likec4-element-node-content": {
-						minHeight: `calc(50% - ${__v("icon.size")})`,
-						justifyContent: "flex-start"
-					}
-				} },
-				icon: { alignSelf: "center" }
-			}),
-			bottom: parts$3({
-				root: { [hasIcon]: {
-					flexDirection: "column-reverse",
-					gap: "2",
-					height: "100%",
-					"& .likec4-element-node-content": {
-						justifyContent: "flex-end",
-						minHeight: `calc(50% - ${__v("icon.size")})`
-					}
-				} },
-				icon: { alignSelf: "center" }
-			})
-		},
-		withIconColor: {
-			true: parts$3({ icon: { "& svg": { color: __v("icon.color", "palette.stroke") } } }),
-			false: parts$3({ icon: { mixBlendMode: {
-				base: "hard-light",
-				_reduceGraphicsOnPan: "normal"
-			} } })
-		}
-	},
-	defaultVariants: {
-		iconPosition: "left",
-		withIconColor: false
-	},
-	staticCss: [{
-		withIconColor: ["*"],
-		iconPosition: ["*"],
-		conditions: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/elementShape.ts
-const parts$2 = defineParts({
-	root: { selector: "&" },
-	outline: { selector: "& .likec4-shape-outline" },
-	multipleHtml: { selector: "& .likec4-shape-multiple" },
-	componentTopLeftRect: { selector: "& .top-left-rect" },
-	multipleSvg: { selector: "&:is([data-likec4-shape-multiple=\"true\"])" }
-});
-const elementShapeRecipe = defineRecipe({
-	description: "Recipe for Diagram node shape",
-	className: "likec4-element-shape",
-	base: parts$2({
-		root: {
-			top: "0",
-			left: "0",
-			position: "absolute",
-			width: "100%",
-			height: "100%",
-			pointerEvents: "none",
-			overflow: "visible",
-			[vars.palette.outline]: {
-				base: `oklch(from ${__v("palette.stroke")} calc(l * 0.9) c h)`,
-				_dark: `oklch(from ${__v("palette.stroke")} calc(l * 1.2) calc(c * 1.05) h)`
-			},
-			["--likec4-outline-size"]: `4px`
-		},
-		outline: {
-			opacity: .8,
-			transitionBehavior: "allow-discrete",
-			visibility: {
-				base: "hidden",
-				_smallZoom: "hidden",
-				_whenSelected: "visible",
-				_whenFocused: "visible",
-				_groupFocusVisible: "visible"
-			},
-			animationPlayState: {
-				base: "paused",
-				_whenSelected: "running",
-				_whenFocused: "running",
-				_groupFocusVisible: "running",
-				_whenPanning: "paused"
-			},
-			pointerEvents: "none"
-		}
-	}),
-	variants: {
-		shapetype: {
-			html: parts$2({
-				root: {
-					backgroundColor: "var(--likec4-palette-fill)",
-					border: "none",
-					borderRadius: "6px",
-					boxShadow: {
-						base: [
-							"0 2px 1px 0 rgb(0 0 0 / 21%)",
-							"0 1px 1px 0 color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent)",
-							"0 5px 3px 0 rgb(0 0 0 / 10%)"
-						].join(","),
-						_whenHovered: {
-							base: `rgba(38, 57, 77, 95%) 0px 20px 30px -10px`,
-							_dark: `rgba(10, 11, 16, 90%) 0px 20px 30px -10px`
-						},
-						_whenSelected: "none",
-						_smallZoom: "none",
-						_whenPanning: "none"
-					},
-					transition: {
-						base: "background-color 150ms, box-shadow 130ms",
-						_reduceGraphicsOnPan: "none"
-					},
-					transitionTimingFunction: "out",
-					transitionDelay: "0ms"
-				},
-				multipleHtml: {
-					position: "absolute",
-					content: "\" \"",
-					top: "16px",
-					left: "16px",
-					width: "calc(100% - 6px)",
-					height: "calc(100% - 6px)",
-					backgroundColor: "var(--likec4-palette-fill)",
-					borderRadius: "6px",
-					zIndex: -1,
-					filter: "brightness(0.5) !important",
-					visibility: {
-						base: "visible",
-						_smallZoom: "hidden",
-						_whenSelected: "hidden",
-						_whenFocused: "hidden",
-						_reduceGraphicsOnPan: "hidden"
-					},
-					transition: "normal",
-					_whenHovered: { transform: "translate(-14px, -14px)" }
-				},
-				outline: {
-					position: "absolute",
-					content: "\" \"",
-					top: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
-					left: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
-					width: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
-					height: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
-					borderStyle: "solid",
-					borderWidth: "var(--likec4-outline-size)",
-					borderRadius: "11px",
-					borderColor: "var(--likec4-palette-outline)",
-					animationStyle: "indicator"
-				}
-			}),
-			svg: parts$2({
-				root: {
-					fill: "var(--likec4-palette-fill)",
-					stroke: "var(--likec4-palette-stroke)",
-					transition: `fill 120ms {easings.in}, filter 130ms {easings.in}`,
-					transitionTimingFunction: {
-						base: "out",
-						_whenHovered: "in"
-					},
-					transitionDelay: "0ms",
-					filter: {
-						base: [
-							"drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))",
-							"drop-shadow(0 1px 1px color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent))",
-							"drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))"
-						].join("\n"),
-						_whenHovered: [
-							"drop-shadow(0 2px 1px rgba(0, 0, 0, 0.12))",
-							"drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.12))",
-							"drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.12))",
-							"drop-shadow(0px 16px 8px rgba(0, 0, 0, 0.1))",
-							"drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09))"
-						].join("\n"),
-						_whenSelected: "none",
-						_smallZoom: "none",
-						_whenPanning: "none"
-					},
-					"& [data-likec4-fill=\"fill\"]": { fill: "var(--likec4-palette-fill)" },
-					"& [data-likec4-fill=\"stroke\"]": { fill: "var(--likec4-palette-stroke)" },
-					"& [data-likec4-fill=\"mix-stroke\"]": { fill: "color-mix(in oklab, var(--likec4-palette-stroke) 80%, var(--likec4-palette-fill))" }
-				},
-				componentTopLeftRect: {
-					"--mix-bg": "40%",
-					fill: "color-mix(in oklab, var(--likec4-palette-stroke) var(--mix-bg), var(--likec4-palette-fill))",
-					transition: `all 120ms {easings.in}`,
-					transitionDelay: "0ms",
-					strokeOpacity: .8,
-					_whenSelected: {
-						transitionTimingFunction: "out",
-						"--mix-bg": "60%",
-						strokeOpacity: 1
-					},
-					_whenHovered: {
-						transitionTimingFunction: "out",
-						"--mix-bg": "60%",
-						strokeOpacity: 1
-					}
-				},
-				multipleSvg: {
-					transformOrigin: {
-						base: "50% 50%",
-						_shapeQueue: "75% 25%",
-						_shapeCylinder: "50% 100%",
-						_shapeStorage: "50% 100%"
-					},
-					transform: {
-						base: "translate(14px, 14px) perspective(200px) translateZ(-4px)",
-						_whenHovered: "translate(2px, 2px) perspective(200px) translateZ(-4px)"
-					},
-					transitionBehavior: "allow-discrete",
-					transitionProperty: "fill, filter, transform",
-					transitionDuration: "faster",
-					filter: "brightness(0.5) !important",
-					stroke: "none",
-					display: {
-						_smallZoom: "none",
-						_reduceGraphicsOnPan: "none",
-						_whenSelected: "none",
-						_whenFocused: "none"
-					},
-					"& [data-likec4-fill=\"mix-stroke\"]": { fill: "var(--likec4-palette-fill)" }
-				},
-				outline: {
-					stroke: "var(--likec4-palette-outline)",
-					fill: "none",
-					strokeWidth: 4,
-					animationStyle: "indicator"
-				}
-			})
-		},
-		withBorder: {
-			true: {},
-			false: {}
-		},
-		withOutline: {
-			true: parts$2({ outline: { display: "block" } }),
-			false: parts$2({ outline: { display: "none" } })
-		}
-	},
-	defaultVariants: {
-		withBorder: false,
-		withOutline: false
-	},
-	compoundVariants: [{
-		shapetype: "html",
-		withBorder: true,
-		css: parts$2({
-			root: {
-				borderStyle: "solid",
-				borderWidth: "3px",
-				borderColor: "var(--likec4-palette-stroke)",
-				"--likec4-outline-size": "6px"
-			},
-			outline: { borderRadius: "10px" }
-		})
-	}],
-	staticCss: [{
-		shapetype: ["*"],
-		withOutline: ["*"],
-		withBorder: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/likec4tag.ts
-const likec4tag = defineRecipe({
-	className: "likec4-tag",
-	base: {
-		pointerEvents: "all",
-		display: "inline-flex",
-		alignItems: "center",
-		justifyContent: "center",
-		minWidth: 40,
-		width: "min-content",
-		transition: "fast",
-		fontSize: "xs",
-		gap: "[1px]",
-		cursor: "default",
-		fontFamily: "likec4",
-		fontWeight: "bold",
-		layerStyle: "likec4.tag",
-		whiteSpace: "nowrap",
-		px: "1",
-		py: "0"
-	},
-	variants: { autoTextColor: {
-		false: { "& > span": {
-			color: "likec4.tag.text",
-			_first: { opacity: .65 }
-		} },
-		true: { "& > span": {
-			color: "transparent",
-			filter: "invert(1) grayscale(1) brightness(1.3) contrast(1000)",
-			backgroundColor: "likec4.tag.bg",
-			backgroundClip: "text",
-			mixBlendMode: {
-				base: "plus-lighter",
-				_print: "normal!"
-			}
-		} }
-	} },
-	defaultVariants: { autoTextColor: false },
-	staticCss: [{
-		autoTextColor: ["true", "false"],
-		conditions: ["hover"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/markdownBlock.ts
-const markdownBlock = defineRecipe({
-	className: "likec4-markdown-block",
-	jsx: ["MarkdownBlock", "Markdown"],
-	description: "Block with Markdown content",
-	base: {
-		"--text-fz": "1em",
-		"--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale, 1) / 1.125)",
-		"--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale, 1))",
-		"--typography-spacing": "calc(0.75 * var(--text-fz-md))",
-		"--text-fw-headings": "600",
-		"--code-background": {
-			base: mantine.colors.gray[2],
-			_dark: mantine.colors.dark[8]
-		},
-		"--code-color": {
-			base: mantine.colors.black,
-			_dark: mantine.colors.white
-		},
-		_dark: {
-			"--color-border-default": "#30363d",
-			"--color-accent-fg": "#58a6ff",
-			"--color-accent-emphasis": "#1f6feb",
-			"--color-danger-fg": "#f85149",
-			"--color-danger-emphasis": "#da3633",
-			"--color-attention-fg": "#d29922",
-			"--color-attention-emphasis": "#9e6a03",
-			"--color-done-fg": "#a371f7",
-			"--color-done-emphasis": "#8957e5",
-			"--color-success-fg": "#3fb950",
-			"--color-success-emphasis": "#238636"
-		},
-		_light: {
-			"--color-border-default": "#d0d7de",
-			"--color-accent-fg": "#0969da",
-			"--color-accent-emphasis": "#0969da",
-			"--color-danger-fg": "#d1242f",
-			"--color-danger-emphasis": "#cf222e",
-			"--color-attention-fg": "#9a6700",
-			"--color-attention-emphasis": "#9a6700",
-			"--color-done-fg": "#8250df",
-			"--color-done-emphasis": "#8250df",
-			"--color-success-fg": "#1a7f37",
-			"--color-success-emphasis": "#1f883d"
-		},
-		fontSize: "var(--text-fz-md)",
-		lineHeight: mantine.lineHeight,
-		"& :first-child": { marginTop: "0" },
-		"& :last-child": { marginBottom: "0" },
-		"& :where(h1, h2, h3, h4, h5, h6)": {
-			lineHeight: "1.5",
-			textWrap: "var(--mantine-heading-text-wrap)",
-			fontFamily: mantine.fontFamilyHeadings,
-			marginBottom: "var(--typography-spacing)"
-		},
-		"& :is(h1, h2, h3, h4, h5, h6):not(:first-child)": { marginTop: "var(--typography-spacing)" },
-		"& :is(h1)": {
-			fontSize: "calc(1.476 * var(--text-fz-md))",
-			fontWeight: "var(--text-fw-headings)"
-		},
-		"& :is(h2)": {
-			fontSize: "calc(1.383 * var(--text-fz-md))",
-			fontWeight: "var(--text-fw-headings)"
-		},
-		"& :is(h3)": {
-			fontSize: "calc(1.296 * var(--text-fz-md))",
-			fontWeight: "var(--text-fw-headings)"
-		},
-		"& :is(h4)": {
-			fontSize: "calc(1.215 * var(--text-fz-md))",
-			fontWeight: "var(--text-fw-headings)"
-		},
-		"& :is(h5)": {
-			fontSize: "calc(1.138 * var(--text-fz-md))",
-			fontWeight: "var(--text-fw-headings)"
-		},
-		"& :is(h6)": {
-			fontSize: "calc(1.067 * var(--text-fz-md))",
-			fontWeight: "var(--text-fw-headings)"
-		},
-		"& :where(img)": {
-			maxWidth: "100%",
-			marginBottom: "var(--typography-spacing)"
-		},
-		"& :where(p)": {
-			fontSize: "var(--text-fz-md)",
-			marginTop: "0",
-			marginBottom: "var(--typography-spacing)"
-		},
-		"& :where(strong)": { fontWeight: "550" },
-		"& :where(mark)": {
-			fontSize: "var(--text-fz-md)",
-			backgroundColor: mantine.colors.yellow[2],
-			color: "inherit",
-			_dark: {
-				backgroundColor: mantine.colors.yellow[5],
-				color: mantine.colors.black
-			}
-		},
-		"& :where(a)": {
-			fontSize: "var(--text-fz-md)",
-			color: mantine.colors.anchor,
-			textDecoration: "none",
-			fontWeight: "450",
-			_hover: { textDecoration: "underline" }
-		},
-		"& :where(hr)": {
-			marginTop: "calc(var(--typography-spacing) / 2)",
-			marginBottom: "calc(var(--typography-spacing) / 2)",
-			border: "none",
-			borderBottom: "1px solid",
-			borderColor: {
-				base: mantine.colors.gray[3],
-				_dark: mantine.colors.dark[3]
-			}
-		},
-		"& :where(pre)": {
-			px: "3",
-			py: "2",
-			lineHeight: mantine.lineHeights.xs,
-			margin: "0",
-			marginTop: "var(--typography-spacing)",
-			marginBottom: "var(--typography-spacing)",
-			overflowX: "auto",
-			fontFamily: "var(--mantine-font-family-monospace)",
-			fontSize: "var(--text-fz-sm)",
-			borderRadius: "sm",
-			backgroundColor: "var(--code-background)",
-			color: "var(--code-color)"
-		},
-		"& :where(code)": {
-			lineHeight: "1",
-			padding: "1px 4px",
-			borderRadius: "xs",
-			fontFamily: "var(--mantine-font-family-monospace)",
-			fontSize: "var(--text-fz-sm)",
-			backgroundColor: "var(--code-background)",
-			color: "var(--code-color)"
-		},
-		"& :where(pre code)": {
-			backgroundColor: "transparent",
-			padding: "0",
-			borderRadius: "0",
-			color: "inherit",
-			border: "0"
-		},
-		"& :where(ul, ol):not([data-type=\"taskList\"])": {
-			marginBottom: "var(--typography-spacing)",
-			paddingInlineStart: "var(--typography-spacing)",
-			listStylePosition: "inside"
-		},
-		"& :where(table)": {
-			width: "100%",
-			borderCollapse: "collapse",
-			captionSide: "bottom",
-			marginBottom: "var(--typography-spacing)",
-			_light: { ["--table-border-color"]: mantine.colors.gray["3"] },
-			_dark: { ["--table-border-color"]: "var(--mantine-color-dark-4)" },
-			"& :where(caption)": {
-				marginTop: "calc(.5 * var(--typography-spacing) + 1px)",
-				fontSize: "var(--text-fz-sm)",
-				color: "var(--mantine-color-dimmed)"
-			},
-			"& :where(th)": {
-				textAlign: "left",
-				fontWeight: "550",
-				fontSize: "var(--text-fz-sm)",
-				padding: "var(--typography-spacing)"
-			},
-			"& :where(thead th)": {
-				borderBottom: "1px solid",
-				borderColor: "var(--table-border-color)"
-			},
-			"& :where(tfoot th)": {
-				borderTop: "1px solid",
-				borderColor: "var(--table-border-color)"
-			},
-			"& :where(td)": {
-				padding: "var(--typography-spacing)",
-				borderBottom: "1px solid",
-				borderColor: "var(--table-border-color)",
-				fontSize: "var(--text-fz-sm)"
-			},
-			"& :where(tr:last-of-type td)": { borderBottom: "0" }
-		},
-		"& :where(blockquote)": {
-			fontSize: "var(--text-fz-md)",
-			margin: "0",
-			borderRadius: "var(--mantine-radius-sm)",
-			padding: "xs",
-			backgroundColor: {
-				base: mantine.colors.gray[1],
-				_dark: mantine.colors.dark[5]
-			},
-			"&:not(:first-child)": { marginTop: "var(--typography-spacing)" }
-		},
-		"& .markdown-alert": {
-			borderLeft: ".25em solid var(--borderColor-default, var(--color-border-default))",
-			color: "inherit",
-			marginBottom: "calc(var(--typography-spacing) * 1.5)",
-			paddingLeft: "1em",
-			paddingRight: ".5em",
-			"&:last-child": { marginBottom: "0!important" },
-			"& .markdown-alert-title": {
-				alignItems: "center",
-				display: "flex",
-				fontSize: "var(--text-fz-md)",
-				fontWeight: "550",
-				lineHeight: "1.5",
-				marginBottom: "0.1em",
-				gap: "2"
-			},
-			"& .markdown-alert-title svg": {
-				height: "var(--text-fz-md)",
-				fill: "currentColor"
-			},
-			"&.markdown-alert-note": { borderLeftColor: "var(--borderColor-accent-emphasis,var(--color-accent-emphasis))" },
-			"&.markdown-alert-note .markdown-alert-title": { color: ["var(--color-accent-fg)", "var(--fgColor-accent,var(--color-accent-fg))"] },
-			"&.markdown-alert-tip": { borderLeftColor: "var(--borderColor-success-emphasis,var(--color-success-emphasis))" },
-			"&.markdown-alert-tip .markdown-alert-title": { color: ["var(--color-success-fg)", "var(--fgColor-success,var(--color-success-fg))"] },
-			"&.markdown-alert-important": { borderLeftColor: "var(--borderColor-done-emphasis,var(--color-done-emphasis))" },
-			"&.markdown-alert-important .markdown-alert-title": { color: ["var(--color-done-fg)", "var(--fgColor-done,var(--color-done-fg))"] },
-			"&.markdown-alert-warning": { borderLeftColor: "var(--borderColor-attention-emphasis,var(--color-attention-emphasis))" },
-			"&.markdown-alert-warning .markdown-alert-title": { color: ["var(--color-attention-fg)", "var(--fgColor-attention,var(--color-attention-fg))"] },
-			"&.markdown-alert-caution": { borderLeftColor: "var(--borderColor-danger-emphasis,var(--color-danger-emphasis))" },
-			"&.markdown-alert-caution .markdown-alert-title": { color: ["var(--color-danger-fg)", "var(--fgColor-danger,var(--color-danger-fg))"] }
-		}
-	},
-	variants: {
-		/**
-		* When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
-		*/
-		uselikec4palette: {
-			true: {
-				"--code-background": "color-mix(in oklab , var(--likec4-palette-stroke) 70%, transparent)",
-				"--code-color": "var(--likec4-palette-loContrast)",
-				"--typography-spacing": "calc(0.5 * var(--text-fz-md))",
-				"& :where(a)": {
-					color: "var(--likec4-palette-fill)/45",
-					mixBlendMode: {
-						base: "difference",
-						_print: "normal!"
-					}
-				},
-				"& :where(strong)": { color: `color-mix(in oklab, ${__v("palette.hiContrast")} 50%,  ${__v("palette.loContrast")})` },
-				"& :where(blockquote)": {
-					padding: "xxs",
-					backgroundColor: alpha(__v("palette.stroke"), 65)
-				},
-				"& :where(hr)": { borderColor: alpha(__v("palette.stroke"), 85) }
-			},
-			false: {}
-		},
-		/**
-		* Markdown block can receive either markdown or plain text.
-		*/
-		value: {
-			markdown: {},
-			plaintext: { "& :where(p)": { whiteSpace: "preserve-breaks" } }
-		}
-	},
-	defaultVariants: {
-		uselikec4palette: false,
-		value: "markdown"
-	},
-	staticCss: [{
-		uselikec4palette: ["*"],
-		value: ["plaintext"],
-		conditions: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/navigationPanelActionIcon.ts
-const navigationPanelActionIcon = defineRecipe({
-	className: "likec4-navigation-panel-icon",
-	jsx: ["PanelActionIcon"],
-	description: "ActionIcon for navigation panel",
-	base: {
-		color: {
-			base: "likec4.panel.action",
-			_disabled: "likec4.panel.action.disabled",
-			_notDisabled: { _hover: "likec4.panel.action.hover" }
-		},
-		_disabled: { opacity: .5 }
-	},
-	variants: {
-		variant: {
-			"default": { backgroundColor: {
-				base: "transparent",
-				_notDisabled: { _hover: "likec4.panel.action.bg.hover" }
-			} },
-			"filled": { backgroundColor: {
-				base: "likec4.panel.action.bg",
-				_notDisabled: { _hover: "likec4.panel.action.bg.hover" }
-			} }
-		},
-		type: {
-			"default": {},
-			"warning": { color: {
-				base: "likec4.panel.action.warning",
-				_hover: "likec4.panel.action.warning.hover"
-			} }
-		}
-	},
-	compoundVariants: [{
-		type: "warning",
-		variant: "filled",
-		css: { backgroundColor: {
-			base: "likec4.panel.action.warning.bg",
-			_hover: "likec4.panel.action.warning.bg.hover"
-		} }
-	}],
-	defaultVariants: {
-		variant: "default",
-		type: "default"
-	},
-	staticCss: [{
-		variant: ["*"],
-		conditions: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/nodeNotes.ts
-const parts$1 = defineParts({
-	root: { selector: "&" },
-	paper: { selector: "& .__paper" },
-	popover: { selector: "& .__popover" }
-});
-const nodeNotes = defineRecipe({
-	className: "likec4-node-notes",
-	jsx: ["NodeNotesr"],
-	base: parts$1({
-		root: {
-			position: "absolute",
-			top: "-20px",
-			left: "10px",
-			width: "120px",
-			height: "60px",
-			pointerEvents: "all",
-			userSelect: "none",
-			appearance: "none",
-			touchAction: "manipulation",
-			overflow: "visible",
-			"--paper-bg": `color-mix(in oklab, ${__v("palette.fill")} 10%, #DDD)`
-		},
-		paper: {
-			pointerEvents: "all",
-			position: "absolute",
-			top: "14px",
-			left: "10px",
-			width: "90px",
-			height: "120px",
-			boxShadow: ["inset 0 0 20px rgba(0, 0, 0, 0.25)", "0px 0px 3px 0px rgba(0, 0, 0, 0.35)"].join(", "),
-			backgroundColor: "oklch(from var(--paper-bg) calc(l - 0.1) c h)",
-			zIndex: -1,
-			transform: "rotateZ(-3deg)",
-			transformOrigin: "55% 90% 0",
-			overflow: "visible",
-			transition: "faster",
-			transitionDelay: "20ms",
-			_before: {
-				position: "absolute",
-				zIndex: -1,
-				content: "\" \"",
-				width: "100%",
-				height: "100%",
-				transform: "rotateZ(6deg) translate(-2px, 0px)",
-				transformOrigin: "45% 90% 0",
-				boxShadow: ["inset 0 0 20px rgba(0, 0, 0, 0.25)", "0px 0px 3px 0px rgba(0, 0, 0, 0.35)"].join(", "),
-				backgroundColor: "var(--paper-bg)"
-			},
-			_whenHovered: {
-				transform: "rotateZ(-4deg) scale(1.06)",
-				_before: { transform: "translate(-1px, -2px) rotateZ(6deg) scale(1.02)" }
-			}
-		},
-		popover: {
-			position: "absolute",
-			w: "auto",
-			h: "auto",
-			zIndex: 300,
-			top: "0",
-			left: "0",
-			display: "block",
-			pointerEvents: "all",
-			rounded: "sm",
-			backgroundColor: "likec4.overlay.body",
-			padding: "sm"
-		}
-	}),
-	variants: { opened: {
-		false: parts$1({}),
-		true: parts$1({})
-	} },
-	defaultVariants: { opened: false },
-	staticCss: [{ opened: ["*"] }]
-});
-//#endregion
-//#region ../preset/src/recipes/overlay.ts
-const backdropBlur = "--_blur";
-const backdropOpacity = "--_opacity";
-const level = "--_level";
-const offset = "--_offset";
-const inset = "--_inset";
-const borderRadius = "--_border-radius";
-const overlay = defineRecipe({
-	description: "Recipe for Overlay Dialog",
-	className: "likec4-overlay",
-	base: defineParts({
-		dialog: { selector: "&" },
-		body: { selector: "& .likec4-overlay-body" }
-	})({
-		dialog: {
-			boxSizing: "border-box",
-			margin: "0",
-			position: "fixed",
-			width: "100vw",
-			height: "100vh",
-			maxWidth: "100vw",
-			maxHeight: "100vh",
-			background: `likec4.overlay.border`,
-			shadow: "xl",
-			border: "transparent",
-			outline: "none",
-			borderRadius: `var(${borderRadius})`,
-			[backdropBlur]: "0px",
-			[level]: "0",
-			[offset]: "0px",
-			[inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
-			[backdropOpacity]: "0%",
-			[borderRadius]: "0px",
-			_backdrop: { cursor: "zoom-out" },
-			inset: "0",
-			padding: "0"
-		},
-		body: {
-			position: "relative",
-			containerName: "likec4-dialog",
-			containerType: "size",
-			border: `transparent`,
-			overflow: "hidden",
-			width: "100%",
-			height: "100%",
-			background: "likec4.overlay.body"
-		}
-	}),
-	variants: {
-		fullscreen: {
-			false: {
-				dialog: {
-					sm: {
-						inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
-						width: "calc(100vw - 2 * var(--_inset))",
-						height: "calc(100vh - var(--_offset) - var(--_inset))",
-						[borderRadius]: "6px",
-						padding: "1.5",
-						[offset]: "{spacing.4}"
-					},
-					md: { [offset]: "{spacing.4}" },
-					lg: { [offset]: "{spacing.8}" },
-					xl: { [offset]: "{spacing.16}" }
-				},
-				body: { sm: { borderRadius: `calc(var(${borderRadius}) - 2px)` } }
-			},
-			true: { dialog: {
-				inset: "0",
-				padding: "0"
-			} }
-		},
-		withBackdrop: {
-			false: { dialog: { _backdrop: { display: "none" } } },
-			true: { dialog: { _backdrop: {
-				backdropFilter: `blur(var(${backdropBlur}))`,
-				background: `color-mix(in oklab, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
-			} } }
-		}
-	},
-	defaultVariants: {
-		fullscreen: false,
-		withBackdrop: true
-	},
-	staticCss: [{
-		fullscreen: ["*"],
-		withBackdrop: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/recipes/index.ts
-var recipes_exports = /* @__PURE__ */ __exportAll({
-	actionBtn: () => actionBtn,
-	actionButtons: () => actionButtons,
-	compoundNode: () => compoundNode,
-	edgeActionBtn: () => edgeActionBtn,
-	edgeLabel: () => edgeLabel,
-	edgePath: () => edgePath,
-	elementNode: () => elementNode,
-	elementNodeData: () => elementNodeData,
-	elementShapeRecipe: () => elementShapeRecipe,
-	likec4tag: () => likec4tag,
-	markdownBlock: () => markdownBlock,
-	navigationPanelActionIcon: () => navigationPanelActionIcon,
-	nodeNotes: () => nodeNotes,
-	overlay: () => overlay
-});
-//#endregion
-//#region ../preset/src/stot-recipes/navigationLink.ts
-const navigationLink = defineSlotRecipe({
-	className: "likec4-navlink",
-	description: "Navigation Link (classes for Mantine NavLink)",
-	jsx: ["NavLink"],
-	slots: [
-		"root",
-		"body",
-		"section",
-		"label",
-		"description"
-	],
-	base: {
-		root: {
-			rounded: "sm",
-			px: "xs",
-			py: "xxs",
-			backgroundColor: { _hover: { "&:not([data-active])": {
-				base: mantine.colors.gray[1],
-				_dark: mantine.colors.dark[5]
-			} } }
-		},
-		body: {
-			gap: "0.5",
-			display: "flex",
-			flexDirection: "column"
-		},
-		section: { "&:where([data-position=\"left\"])": { marginInlineEnd: "xxs" } },
-		label: {
-			display: "block",
-			fontSize: "sm",
-			fontWeight: "500",
-			lineHeight: 1.2
-		},
-		description: {
-			display: "block",
-			fontSize: "xxs",
-			lineHeight: 1.2
-		}
-	},
-	variants: { truncateLabel: {
-		"true": {
-			label: {
-				width: "100%",
-				truncate: true
-			},
-			description: {
-				width: "100%",
-				truncate: true
-			}
-		},
-		"false": {}
-	} },
-	defaultVariants: { truncateLabel: false },
-	staticCss: [{
-		truncateLabel: ["*"],
-		conditions: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/stot-recipes/navigationPanel.ts
-const navigationPanel = defineSlotRecipe({
-	className: "likec4-navigation-panel",
-	jsx: ["NavigationPanel", /NavigationPanel/],
-	slots: [
-		"root",
-		"body",
-		"logo",
-		"label",
-		"dropdown"
-	],
-	description: "LikeC4 Navigation panel",
-	base: {
-		root: {
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "flex-start",
-			pointerEvents: "none",
-			position: "absolute",
-			margin: "0",
-			width: "100%",
-			gap: "xxs",
-			height: "auto",
-			overflow: "hidden",
-			maxHeight: ["calc(100vh)", "calc(100cqh)"],
-			maxWidth: ["calc(100vw)", "calc(100cqw)"],
-			"@/sm": {
-				margin: "xs",
-				gap: "xs",
-				width: "max-content",
-				maxWidth: ["calc(100vw - 2 * {spacing.xs})", "calc(100cqw - 2 * {spacing.xs})"],
-				maxHeight: ["calc(100vh - 2 * {spacing.xs})", "calc(100cqh - 2 * {spacing.xs})"]
-			},
-			"@/md": {
-				margin: "sm",
-				width: "max-content",
-				maxWidth: ["calc(100vw - 2 * {spacing.md})", "calc(100cqw - 2 * {spacing.md})"],
-				maxHeight: ["calc(100vh - 2 * {spacing.md})", "calc(100cqh - 2 * {spacing.md})"]
-			},
-			_print: { display: "none" }
-		},
-		body: {
-			display: "flex",
-			flexDirection: "row",
-			alignItems: "center",
-			layerStyle: "likec4.panel",
-			position: "relative",
-			gap: "xs",
-			pointerEvents: "all",
-			width: "100%",
-			"@/sm": { width: "auto" },
-			minHeight: "40px",
-			cursor: "default"
-		},
-		logo: {
-			display: "flex",
-			flexDirection: "row",
-			padding: "0.5",
-			margin: "0",
-			background: "none",
-			border: "none",
-			cursor: "pointer",
-			width: {
-				base: "20px",
-				"@/sm": "64px"
-			},
-			["& > [data-logo-icon]"]: { display: {
-				base: "block",
-				"@/sm": "none"
-			} },
-			["& > [data-logo-full]"]: { display: {
-				base: "none",
-				"@/sm": "block"
-			} }
-		},
-		label: {
-			fontSize: "sm",
-			fontWeight: "500",
-			transition: "fast",
-			userSelect: "none",
-			color: "likec4.panel.text"
-		},
-		dropdown: {
-			display: "flex",
-			height: "auto",
-			width: "auto",
-			flex: "1",
-			flexGrow: 0,
-			overflow: "hidden",
-			layerStyle: "likec4.dropdown",
-			pointerEvents: "all"
-		}
-	},
-	variants: {
-		size: {
-			md: {},
-			lg: {
-				body: { "@/sm": {
-					gap: "sm",
-					minHeight: "48px",
-					paddingInline: "md",
-					_hover: { boxShadow: "xl" }
-				} },
-				label: { "@/sm": { fontSize: "md" } }
-			}
-		},
-		panelPosition: {
-			left: { root: {
-				top: "0",
-				left: "0"
-			} },
-			right: { root: {
-				top: "0",
-				right: "0"
-			} }
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		panelPosition: "left"
-	},
-	staticCss: [{
-		size: ["*"],
-		panelPosition: ["*"]
-	}]
-});
-//#endregion
-//#region ../preset/src/stot-recipes/index.ts
-var stot_recipes_exports = /* @__PURE__ */ __exportAll({
-	navigationLink: () => navigationLink,
-	navigationPanel: () => navigationPanel
-});
-//#endregion
-//#region ../preset/src/text-styles.ts
-function defineTextStyles$1(definition) {
-	return defineTextStyles(definition);
-}
-const textStyles = defineTextStyles$1({
-	dimmed: {
-		DEFAULT: {
-			description: "Text style for dimmed content",
-			value: {
-				fontSize: "md",
-				lineHeight: "md",
-				color: "text.dimmed"
-			}
-		},
-		xxs: { value: {
-			fontSize: "xxs",
-			lineHeight: "xxs",
-			color: "text.dimmed"
-		} },
-		xs: { value: {
-			fontSize: "xs",
-			lineHeight: "xs",
-			color: "text.dimmed"
-		} },
-		sm: { value: {
-			fontSize: "sm",
-			lineHeight: "sm",
-			color: "text.dimmed"
-		} },
-		md: { value: {
-			fontSize: "md",
-			lineHeight: "md",
-			color: "text.dimmed"
-		} }
-	},
-	xxs: { value: {
-		fontSize: "xxs",
-		lineHeight: "xxs"
-	} },
-	xs: { value: {
-		fontSize: "xs",
-		lineHeight: "xs"
-	} },
-	sm: { value: {
-		fontSize: "sm",
-		lineHeight: "sm"
-	} },
-	md: { value: {
-		fontSize: "md",
-		lineHeight: "md"
-	} },
-	lg: { value: {
-		fontSize: "lg",
-		lineHeight: "lg"
-	} },
-	xl: { value: {
-		fontSize: "xl",
-		lineHeight: "xl"
-	} },
-	likec4: {
-		DEFAULT: {
-			description: "Text style for panel content",
-			value: {
-				fontSize: "md",
-				lineHeight: "md",
-				fontWeight: "normal",
-				color: "text"
-			}
-		},
-		panel: {
-			DEFAULT: {
-				description: "Text style for panel content",
-				value: {
-					fontSize: "sm",
-					lineHeight: "sm",
-					fontWeight: "medium",
-					color: "likec4.panel.text"
-				}
-			},
-			action: {
-				description: "Text style for panel action items",
-				value: {
-					fontSize: "sm",
-					lineHeight: "sm",
-					fontWeight: "medium",
-					color: {
-						base: "likec4.panel.action",
-						_hover: "likec4.panel.action.hover"
-					}
-				}
-			}
-		}
-	}
-});
-//#endregion
-//#region ../preset/src/tokens-semantic.ts
-const semanticTokens = defineSemanticTokens({ colors: defineSemanticTokens.colors({
-	white: { value: "#fff" },
-	black: { value: "#000" },
-	body: {
-		description: "Background color",
-		value: mantine.colors.body
-	},
-	text: {
-		DEFAULT: {
-			description: "Default text color",
-			value: mantine.colors.text
-		},
-		bright: {
-			description: "Bright text color",
-			value: "var(--mantine-color-bright)"
-		},
-		dimmed: {
-			description: "Dimmed text color",
-			value: alpha(mantine.colors.text, 60)
-		},
-		placeholder: {
-			description: "Placeholder text color",
-			value: mantine.colors.placeholder
-		}
-	},
-	default: {
-		DEFAULT: {
-			description: "Default color",
-			value: mantine.colors.default
-		},
-		color: {
-			description: "Default text color",
-			value: mantine.colors.defaultColor
-		},
-		border: {
-			description: "Default border color",
-			value: mantine.colors.defaultBorder
-		},
-		hover: {
-			description: "Default hover color",
-			value: mantine.colors.defaultHover
-		}
-	},
-	disabled: {
-		text: {
-			description: "Disabled text color",
-			value: mantine.colors.disabledText
-		},
-		border: {
-			description: "Disabled border color",
-			value: mantine.colors.disabledBorder
-		},
-		body: {
-			description: "Disabled body color",
-			value: mantine.colors.disabledBody
-		}
-	},
-	likec4: {
-		background: {
-			DEFAULT: {
-				description: "Background color",
-				value: mantine.colors.body
-			},
-			pattern: {
-				description: "Background pattern color",
-				value: {
-					base: mantine.colors.gray[4],
-					_dark: alpha(mantine.colors.dark[4], 70)
-				}
-			}
-		},
-		mixColor: {
-			description: "Color to be used in color-mix",
-			value: {
-				base: "#000",
-				_dark: "#fff"
-			}
-		},
-		tag: {
-			bg: {
-				DEFAULT: { value: `{colors.tomato.9}` },
-				hover: { value: `{colors.tomato.10}` }
-			},
-			border: { value: `{colors.tomato.8}` },
-			text: { value: `{colors.tomato.12}` }
-		},
-		panel: {
-			bg: { DEFAULT: {
-				description: "LikeC4 panel background color",
-				value: {
-					base: mantine.colors.body,
-					_dark: mantine.colors.dark[6]
-				}
-			} },
-			border: {
-				description: "LikeC4 panel border color",
-				value: {
-					base: "transparent",
-					_light: mantine.colors.gray[2]
-				}
-			},
-			text: {
-				DEFAULT: {
-					description: "LikeC4 panel text color",
-					value: alpha(mantine.colors.text, 85)
-				},
-				dimmed: {
-					description: "LikeC4 panel dimmed text color",
-					value: "{colors.text.dimmed}"
-				}
-			},
-			action: {
-				DEFAULT: {
-					description: "LikeC4 panel action text color (Links/Icons)",
-					value: alpha(mantine.colors.text, 90)
-				},
-				disabled: {
-					description: "LikeC4 action icon text color when disabled",
-					value: "{colors.text.dimmed}"
-				},
-				hover: {
-					description: "LikeC4 panel action text color on hover",
-					value: "var(--mantine-color-bright)"
-				},
-				bg: {
-					DEFAULT: {
-						description: "LikeC4 action icon background color",
-						value: {
-							base: mantine.colors.gray[1],
-							_dark: alpha(mantine.colors.dark[7], 70)
-						}
-					},
-					hover: {
-						description: "LikeC4 action icon background color on hover",
-						value: {
-							base: mantine.colors.gray[2],
-							_dark: mantine.colors.dark[8]
-						}
-					}
-				},
-				warning: {
-					DEFAULT: {
-						description: "LikeC4 action icon text color",
-						value: mantine.colors.orange[6]
-					},
-					hover: {
-						description: "LikeC4 action icon text color on hover",
-						value: {
-							base: mantine.colors.orange[7],
-							_dark: mantine.colors.orange[5]
-						}
-					},
-					bg: {
-						DEFAULT: {
-							description: "LikeC4 action icon background color",
-							value: {
-								base: alpha(mantine.colors.orange[1], 90),
-								_dark: alpha(mantine.colors.orange[9], 10)
-							}
-						},
-						hover: {
-							description: "LikeC4 action icon background color on hover",
-							value: {
-								base: alpha(mantine.colors.orange[3], 70),
-								_dark: alpha(mantine.colors.orange[9], 20)
-							}
-						}
-					}
-				}
-			}
-		},
-		dropdown: {
-			bg: { DEFAULT: {
-				description: "LikeC4 dropdown background color",
-				value: {
-					base: `#FFF`,
-					_dark: mantine.colors.dark[6]
-				}
-			} },
-			border: {
-				description: "LikeC4 dropdown border color",
-				value: "{colors.likec4.panel.border}"
-			}
-		},
-		overlay: {
-			backdrop: { DEFAULT: {
-				description: "LikeC4 overlay backdrop color",
-				value: {
-					base: `rgb(15 15 15)`,
-					_dark: `rgb(34 34 34)`
-				}
-			} },
-			body: { DEFAULT: {
-				description: "LikeC4 overlay body color",
-				value: {
-					base: mantine.colors.body,
-					_dark: mantine.colors.dark[6]
-				}
-			} },
-			border: {
-				description: "LikeC4 overlay border color",
-				value: alpha(mantine.colors.defaultBorder, 50)
-			}
-		},
-		walkthrough: { parallelFrame: {
-			description: "LikeC4 walkthrough parallel frame color",
-			value: {
-				_light: mantine.colors.orange[8],
-				_dark: mantine.colors.orange[6]
-			}
-		} },
-		compare: {
-			manual: {
-				DEFAULT: {
-					description: "LikeC4 Compare color for manual changes",
-					value: {
-						_light: mantine.colors.orange[8],
-						_dark: mantine.colors.orange[6]
-					}
-				},
-				outline: {
-					description: "LikeC4 Compare color for outline around nodes with manual changes",
-					value: {
-						_light: mantine.colors.orange[8],
-						_dark: alpha(mantine.colors.orange[6], 80)
-					}
-				}
-			},
-			latest: {
-				description: "LikeC4 Compare color for latest changes",
-				value: mantine.colors.green[6]
-			}
-		}
-	}
-}) });
-//#endregion
-//#region ../preset/src/tokens.colors.ts
-const colors = defineTokens.colors({
-	mantine: tokens$1.colors.mantine,
-	transparent: { value: "transparent" },
-	none: { value: "none" },
-	inherit: { value: "inherit" }
-});
-//#endregion
-//#region ../preset/src/tokens.ts
-const tokens = defineTokens({
-	fontSizes: {
-		"xxs": { value: "10px" },
-		xs: { value: "12px" },
-		sm: { value: "14px" },
-		md: { value: "16px" },
-		lg: { value: "18px" },
-		xl: { value: "20px" },
-		likec4: { ...t$3(defaultTheme.textSizes, (value, key) => ({
-			description: `LikeC4 Diagram Text Size: ${key}`,
-			value: rem(value)
-		})) }
-	},
-	lineHeights: {
-		"xxs": { value: "1.1" },
-		xs: { value: "1.2" },
-		sm: { value: "1.35" },
-		md: { value: "1.45" },
-		lg: { value: "1.55" },
-		xl: { value: "1.6" },
-		"1": { value: "1" }
-	},
-	sizes: {
-		"100%": { value: "100%" },
-		full: { value: "100%" }
-	},
-	borders: {
-		none: { value: "none" },
-		transparent: { value: "0px solid transparent" },
-		default: { value: `1px solid {colors.default.border}` }
-	},
-	borderWidths: {
-		"0": { value: "0px" },
-		"1": { value: "1px" },
-		"2": { value: "2px" },
-		"3": { value: "3px" },
-		"4": { value: "4px" }
-	},
-	spacing: {
-		"0": {
-			description: "Non-scalable spacing value - 0px",
-			value: "0px"
-		},
-		"0.5": {
-			description: "Non-scalable spacing value - (0.5 * 4px)",
-			value: "2px"
-		},
-		"1": {
-			description: "Non-scalable spacing value - (1 * 4px)",
-			value: "4px"
-		},
-		"1.5": {
-			description: "Non-scalable spacing value - (1.5 * 4px)",
-			value: "6px"
-		},
-		"2": {
-			description: "Non-scalable spacing value - (2 * 4px)",
-			value: "8px"
-		},
-		"2.5": {
-			description: "Non-scalable spacing value - (2.5 * 4px)",
-			value: "10px"
-		},
-		"3": {
-			description: "Non-scalable spacing value - (3 * 4px)",
-			value: "12px"
-		},
-		"3.5": {
-			description: "Non-scalable spacing value - (3.5 * 4px)",
-			value: "14px"
-		},
-		"4": {
-			description: "Non-scalable spacing value - (4 * 4px)",
-			value: "16px"
-		},
-		"4.5": {
-			description: "Non-scalable spacing value - (4.5 * 4px)",
-			value: "18px"
-		},
-		"5": {
-			description: "Non-scalable spacing value - (5 * 4px)",
-			value: "20px"
-		},
-		"6": {
-			description: "Non-scalable spacing value - (6 * 4px)",
-			value: "24px"
-		},
-		"7": {
-			description: "Non-scalable spacing value - (7 * 4px)",
-			value: "28px"
-		},
-		"8": {
-			description: "Non-scalable spacing value - (8 * 4px)",
-			value: "32px"
-		},
-		"9": {
-			description: "Non-scalable spacing value - (9 * 4px)",
-			value: "36px"
-		},
-		"10": {
-			description: "Non-scalable spacing value - (10 * 4px)",
-			value: "40px"
-		},
-		"12": {
-			description: "Non-scalable spacing value - (12 * 4px)",
-			value: "48px"
-		},
-		"16": {
-			description: "Non-scalable spacing value - (16 * 4px)",
-			value: "64px"
-		},
-		xxs: {
-			description: "Scalable spacing value - (8px * var(--scale)) (8px)",
-			value: "calc(8px * var(--mantine-scale))"
-		},
-		xs: {
-			description: "Scalable spacing value - (10px * var(--scale)) (10px)",
-			value: "calc(10px * var(--mantine-scale))"
-		},
-		sm: {
-			description: "Scalable spacing value - (12px * var(--scale)) (12px)",
-			value: "calc(12px * var(--mantine-scale))"
-		},
-		md: {
-			description: "Scalable spacing value - (16px * var(--scale)) (16px)",
-			value: "calc(16px * var(--mantine-scale))"
-		},
-		lg: {
-			description: "Scalable spacing value - (20px * var(--scale)) (20px)",
-			value: "calc(20px * var(--mantine-scale))"
-		},
-		xl: {
-			description: "Scalable spacing value - (32px * var(--scale)) (32px)",
-			value: "calc(32px * var(--mantine-scale))"
-		},
-		likec4: { ...t$3(defaultTheme.spacing, (value, key) => ({
-			description: `LikeC4 Diagram Spacing: ${key}`,
-			value: `${value}px`
-		})) }
-	},
-	radii: {
-		"0": { value: "0px" },
-		xs: { value: "2px" },
-		sm: { value: "4px" },
-		md: { value: "8px" },
-		lg: { value: "16px" },
-		xl: { value: "32px" }
-	},
-	colors,
-	fontWeights: {
-		normal: { value: "400" },
-		medium: { value: "500" },
-		bold: { value: "600" },
-		bolder: { value: "700" }
-	},
-	fonts: {
-		mono: { value: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` },
-		body: { value: "var(--likec4-app-font, var(--likec4-app-font-default))" },
-		likec4: {
-			DEFAULT: { value: "var(--likec4-app-font, var(--likec4-app-font-default))" },
-			element: { value: "var(--likec4-element-font, {fonts.likec4})" },
-			compound: { value: "var(--likec4-compound-font, {fonts.likec4})" },
-			relation: { value: "var(--likec4-relation-font, {fonts.likec4})" }
-		}
-	},
-	easings: {
-		default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
-		in: { value: "cubic-bezier(0.4, 0, 1, 1)" },
-		out: { value: "cubic-bezier(0, 0, 0.40, 1)" },
-		inOut: { value: "cubic-bezier(0.50, 0, 0.2, 1)" }
-	},
-	durations: {
-		fastest: { value: "50ms" },
-		faster: { value: "100ms" },
-		fast: { value: "130ms" },
-		normal: { value: "170ms" },
-		slow: { value: "300ms" },
-		slower: { value: "400ms" },
-		slowest: { value: "500ms" }
-	},
-	shadows: {
-		none: { value: "none" },
-		xs: { value: "0 1px 3px rgb(0 0 0/5%), 0 1px 2px rgb(0 0 0/10%)" },
-		sm: { value: "0 1px 3px rgb(0 0 0/5%), 0 10px 15px -5px rgb(0 0 0/5%), 0 7px 7px -5px rgb(0 0 0/4%)" },
-		md: { value: "0 1px 3px rgb(0 0 0/5%), 0 20px 25px -5px rgb(0 0 0/5%), 0 10px 10px -5px rgb(0 0 0/4%)" },
-		lg: { value: "0 1px 3px rgb(0 0 0/5%), 0 28px 23px -7px rgb(0 0 0/5%), 0 12px 12px -7px rgb(0 0 0/4%)" },
-		xl: { value: "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)" }
-	},
-	zIndex: {
-		"-1": { value: "-1" },
-		"0": { value: "0" },
-		"1": { value: "1" },
-		likec4: {
-			diagram: {
-				edge: {
-					DEFAULT: { value: "20" },
-					label: { value: "25" },
-					controlPoint: { value: "30" }
-				},
-				node: {
-					compound: { value: "10" },
-					element: { value: "40" }
-				}
-			},
-			dropdown: { value: "200" },
-			panel: {
-				DEFAULT: { value: "100" },
-				dropdown: { value: "200" }
-			}
-		}
-	}
-});
-//#endregion
-//#region ../preset/src/utilities.ts
-const durationValues = [
-	"fastest",
-	"faster",
-	"fast",
-	"normal",
-	"slow",
-	"slower",
-	"slowest",
-	"none"
-];
-const utilities = { extend: { transition: defineUtility({
-	values: durationValues,
-	className: "transition",
-	transform(value, { token }) {
-		if (value === "none") return { transition: "none" };
-		if (!durationValues.includes(value)) return { transition: value };
-		return {
-			transitionDuration: token(`durations.${value}`),
-			transitionTimingFunction: token("easings.inOut")
-		};
-	}
-}) } };
-//#endregion
-//#region ../preset/src/index.ts
-const theme = {
-	breakpoints,
-	textStyles,
-	layerStyles,
-	tokens,
-	semanticTokens,
-	recipes: recipes_exports,
-	slotRecipes: stot_recipes_exports,
-	containerNames: ["likec4-root", "likec4-dialog"],
-	containerSizes: {
-		xs: "384px",
-		sm: "640px",
-		md: "768px",
-		lg: "1024px"
-	},
-	keyframes,
-	animationStyles
-};
-var src_default = /* @__PURE__ */ definePreset({
-	name: "likec4",
-	presets: [radixColorsPreset],
-	globalVars,
-	globalCss,
-	staticCss: { extend: { themes: ["light", "dark"] } },
-	conditions,
-	patterns,
-	utilities,
-	theme: { extend: theme }
-});
-//#endregion
-export { src_default as default, theme };