@likec4/diagram 1.59.4 → 1.60.0

package/dist/overlays/element-details/MetadataValue.js

@@ -1,220 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { css } from "@likec4/styles/css";
-import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
-import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Flex, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
-//#region src/overlays/element-details/MetadataValue.tsx
-function MetadataProvider({ children }) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
-}
-function TruncatedValue({ value, isExpanded }) {
-	const [isTruncated, setIsTruncated] = useState(false);
-	const textRef = useRef(null);
-	useEffect(() => {
-		if (textRef.current) setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
-	}, [value]);
-	return /* @__PURE__ */ jsx(Tooltip, {
-		label: isTruncated && !isExpanded ? value : null,
-		multiline: true,
-		w: 300,
-		withinPortal: true,
-		children: /* @__PURE__ */ jsx(Text, {
-			ref: textRef,
-			component: "div",
-			className: css({
-				fontSize: "sm",
-				padding: "xs",
-				userSelect: "all",
-				color: "text",
-				lineHeight: "md",
-				whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
-				overflow: isExpanded ? "visible" : "hidden",
-				textOverflow: isExpanded ? "unset" : "ellipsis",
-				wordBreak: isExpanded ? "break-word" : "normal",
-				minWidth: "0",
-				width: "100%"
-			}),
-			children: value
-		})
-	});
-}
-function MultiValueDisplay({ values, isExpanded }) {
-	if (isExpanded) return /* @__PURE__ */ jsx(Stack, {
-		gap: "xs",
-		children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: "xs",
-			children: [/* @__PURE__ */ jsx(Text, {
-				className: css({
-					fontSize: "xs",
-					color: "mantine.gray[5]",
-					fontWeight: "medium",
-					flexShrink: "0",
-					_dark: { color: "mantine.dark[3]" }
-				}),
-				children: "•"
-			}), /* @__PURE__ */ jsx(Box, {
-				className: css({
-					minHeight: "[32px]",
-					display: "flex",
-					alignItems: "center",
-					flex: "1"
-				}),
-				children: /* @__PURE__ */ jsx(TruncatedValue, {
-					value,
-					isExpanded: true
-				})
-			})]
-		}, index))
-	});
-	return /* @__PURE__ */ jsx(Box, {
-		className: css({
-			minHeight: "[32px]",
-			display: "flex",
-			alignItems: "center",
-			padding: "xs",
-			gap: "xs",
-			flexWrap: "wrap",
-			minWidth: "0",
-			overflow: "hidden"
-		}),
-		children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: "xs",
-			style: { minWidth: 0 },
-			children: [/* @__PURE__ */ jsx(Text, {
-				className: css({
-					fontSize: "sm",
-					padding: "[4px 8px]",
-					backgroundColor: "white",
-					color: "text",
-					borderRadius: "sm",
-					borderWidth: "default",
-					borderStyle: "solid",
-					borderColor: "mantine.gray[3]",
-					whiteSpace: "nowrap",
-					overflow: "hidden",
-					textOverflow: "ellipsis",
-					maxWidth: "[min(200px, 100%)]",
-					minWidth: "[60px]",
-					flex: "[0 1 auto]",
-					userSelect: "all",
-					_dark: {
-						backgroundColor: "mantine.dark[9]",
-						borderColor: "mantine.dark[4]"
-					}
-				}),
-				title: value,
-				children: value
-			}), index < values.length - 1 && /* @__PURE__ */ jsx(Text, {
-				className: css({
-					fontSize: "xs",
-					color: "mantine.gray[5]",
-					fontWeight: "medium",
-					flexShrink: "0",
-					_dark: { color: "mantine.dark[3]" }
-				}),
-				children: "•"
-			})]
-		}, index))
-	});
-}
-function MetadataValue({ label, value }) {
-	const elements = Array.isArray(value) ? value : typeof value === "string" && value.includes("\n") ? value.split("\n").map((s) => s.trim()).filter(Boolean) : [value];
-	const hasMultipleElements = elements.length > 1;
-	const [isExpanded, setIsExpanded] = useState(false);
-	const handleToggle = () => {
-		setIsExpanded(!isExpanded);
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [hasMultipleElements ? /* @__PURE__ */ jsx(UnstyledButton, {
-		onClick: handleToggle,
-		className: css({
-			fontSize: "xs",
-			color: "text.dimmed",
-			justifySelf: "end",
-			textAlign: "right",
-			userSelect: "none",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "flex-end",
-			gap: "xs",
-			padding: "[4px 8px]",
-			borderRadius: "sm",
-			whiteSpace: "nowrap",
-			transitionProperty: "common",
-			transition: "medium",
-			_hover: {
-				backgroundColor: "mantine.gray[1]",
-				color: "primary.body",
-				_dark: {
-					backgroundColor: "mantine.dark[7]",
-					color: "primary.body.hover"
-				}
-			}
-		}),
-		children: /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: "xs",
-			children: [
-				/* @__PURE__ */ jsxs(Text, {
-					component: "span",
-					size: "xs",
-					fw: 700,
-					children: [label, ":"]
-				}),
-				/* @__PURE__ */ jsx(Text, {
-					component: "span",
-					className: css({
-						fontSize: "xs",
-						fontWeight: "medium",
-						color: "mantine.gray[6]",
-						backgroundColor: "mantine.gray[1]",
-						padding: "[1px 4px]",
-						borderRadius: "xs",
-						_dark: {
-							color: "mantine.dark[2]",
-							backgroundColor: "mantine.dark[6]"
-						}
-					}),
-					children: elements.length
-				}),
-				isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 12 })
-			]
-		})
-	}) : /* @__PURE__ */ jsxs(Text, {
-		component: "div",
-		className: css({
-			fontSize: "xs",
-			color: "text.dimmed",
-			justifySelf: "end",
-			textAlign: "right",
-			userSelect: "none",
-			whiteSpace: "nowrap",
-			padding: "[4px 8px]",
-			fontWeight: "[700]"
-		}),
-		children: [label, ":"]
-	}), /* @__PURE__ */ jsx(Box, {
-		className: css({
-			justifySelf: "stretch",
-			alignSelf: "start"
-		}),
-		children: hasMultipleElements ? /* @__PURE__ */ jsx(MultiValueDisplay, {
-			values: elements,
-			isExpanded
-		}) : /* @__PURE__ */ jsx(Box, {
-			className: css({
-				minHeight: "[32px]",
-				display: "flex",
-				alignItems: "center"
-			}),
-			children: /* @__PURE__ */ jsx(TruncatedValue, {
-				value: elements[0] || "",
-				isExpanded
-			})
-		})
-	})] });
-}
-//#endregion
-export { MetadataProvider, MetadataValue };

package/dist/overlays/element-details/TabPanelDeployments.css.d.ts

@@ -1,4 +0,0 @@
-export declare const treeNode: string;
-export declare const treeNodeLabel: string;
-export declare const nodeLabel: string;
-export declare const instanceLabel: string;

package/dist/overlays/element-details/TabPanelDeployments.css.js

@@ -1,35 +0,0 @@
-import { css, cx } from "@likec4/styles/css";
-//#region src/overlays/element-details/TabPanelDeployments.css.ts
-var treeNode = css({ [`&[data-level='1']`]: { marginBottom: "sm" } });
-var treeNodeLabel = css({
-	cursor: "default",
-	marginTop: "0",
-	marginBottom: "0"
-});
-var label = css({
-	transition: "fast",
-	color: "mantine.gray[7]",
-	_dark: { color: "mantine.dark[1]" },
-	"& > *": { transition: "fast" }
-});
-var nodeLabel = cx(label);
-var instanceLabel = cx(label, css({
-	cursor: "pointer",
-	width: "100%",
-	justifyContent: "stretch",
-	flexWrap: "nowrap",
-	height: "[36px]",
-	paddingInlineStart: "[16px]",
-	paddingInlineEnd: "2.5",
-	borderRadius: "sm",
-	alignItems: "center",
-	color: "text.default",
-	_hover: { background: "surface.hover" },
-	"& .tabler-icon": {
-		transition: "fast",
-		boxSize: "[90%]",
-		opacity: "[0.65]"
-	}
-}));
-//#endregion
-export { instanceLabel, nodeLabel, treeNode, treeNodeLabel };

package/dist/overlays/element-details/TabPanelDeployments.d.ts

@@ -1,7 +0,0 @@
-import { Fqn } from '@likec4/core/types';
-import { NamedExoticComponent } from 'react';
-type TabPanelDeploymentsProps = {
-    elementFqn: Fqn;
-};
-export declare const TabPanelDeployments: NamedExoticComponent<TabPanelDeploymentsProps>;
-export {};

package/dist/overlays/element-details/TabPanelDeployments.js

@@ -1,188 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { instanceLabel, nodeLabel, treeNode, treeNodeLabel } from "./TabPanelDeployments.css.js";
-import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
-import { memo, useEffect, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert, Box, Button, Group, Menu, Text, ThemeIcon, Tree, rem, useTree } from "@mantine/core";
-//#region src/overlays/element-details/TabPanelDeployments.tsx
-var DeploymentNodeRenderer = ({ node }) => /* @__PURE__ */ jsxs(Group, {
-	className: nodeLabel,
-	gap: 6,
-	align: "baseline",
-	wrap: "nowrap",
-	children: [/* @__PURE__ */ jsxs(Text, {
-		component: "div",
-		fz: 11,
-		c: "dimmed",
-		children: [node.kind, ":"]
-	}), /* @__PURE__ */ jsx(Text, {
-		component: "div",
-		fz: "sm",
-		fw: "500",
-		children: node.title
-	})]
-});
-var zoomIcon = /* @__PURE__ */ jsx(ThemeIcon, {
-	size: "sm",
-	variant: "transparent",
-	color: "gray",
-	children: /* @__PURE__ */ jsx(IconZoomScan, {
-		stroke: 1.8,
-		opacity: .65
-	})
-});
-var DeployedInstanceRenderer = ({ instance }) => {
-	const diagram = useDiagram();
-	const currentViewId = diagram.currentView.id;
-	const views = [...instance.views()];
-	return /* @__PURE__ */ jsxs(Group, {
-		className: instanceLabel,
-		gap: 4,
-		children: [
-			/* @__PURE__ */ jsx(ThemeIcon, {
-				color: "gray",
-				variant: "transparent",
-				size: "xs",
-				flex: 0,
-				children: /* @__PURE__ */ jsx(IconTarget, { stroke: 1.2 })
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				component: "div",
-				fz: "sm",
-				fw: "500",
-				flex: "1 1 100%",
-				children: instance.title
-			}),
-			/* @__PURE__ */ jsxs(Box, {
-				onClick: stopPropagation,
-				pos: "relative",
-				"data-no-transform": true,
-				flex: 0,
-				children: [views.length === 0 && /* @__PURE__ */ jsx(Button, {
-					size: "compact-xs",
-					variant: "transparent",
-					color: "gray",
-					disabled: true,
-					children: "no views"
-				}), views.length > 0 && /* @__PURE__ */ jsxs(Menu, {
-					shadow: "md",
-					withinPortal: false,
-					position: "bottom-start",
-					offset: 0,
-					closeOnClickOutside: true,
-					clickOutsideEvents: [
-						"pointerdown",
-						"mousedown",
-						"click"
-					],
-					closeOnEscape: true,
-					trapFocus: true,
-					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(Button, {
-						size: "compact-xs",
-						variant: "subtle",
-						color: "gray",
-						children: [
-							views.length,
-							" view",
-							views.length > 1 ? "s" : ""
-						]
-					}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: views.map((view) => /* @__PURE__ */ jsx(Menu.Item, {
-						px: "xs",
-						py: 4,
-						disabled: view.id === currentViewId,
-						leftSection: zoomIcon,
-						styles: { itemSection: { marginInlineEnd: rem(8) } },
-						onClick: (e) => {
-							e.stopPropagation();
-							diagram.navigateTo(view.id);
-						},
-						children: view.title
-					}, view.id)) })]
-				})]
-			})
-		]
-	});
-};
-var infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
-var TabPanelDeployments = memo(({ elementFqn }) => {
-	const element = useLikeC4Model().element(elementFqn);
-	const deployments = [...element.deployments()];
-	const tree = useTree({ multiple: false });
-	const data = useMemo(() => {
-		let roots = [];
-		let treeItems = /* @__PURE__ */ new Map();
-		for (const instance of element.deployments()) {
-			let instanceNode = {
-				label: /* @__PURE__ */ jsx(DeployedInstanceRenderer, { instance }),
-				value: instance.id,
-				type: "instance",
-				children: []
-			};
-			treeItems.set(instance.id, instanceNode);
-			let ancestor = instance.parent;
-			while (ancestor) {
-				let ancestorNode = treeItems.get(ancestor.id);
-				if (ancestorNode) {
-					ancestorNode.children.push(instanceNode);
-					break;
-				}
-				ancestorNode = {
-					label: /* @__PURE__ */ jsx(DeploymentNodeRenderer, { node: ancestor }),
-					value: ancestor.id,
-					type: "node",
-					children: [instanceNode]
-				};
-				treeItems.set(ancestor.id, ancestorNode);
-				instanceNode = ancestorNode;
-				ancestor = ancestor.parent;
-			}
-			if (!ancestor && !roots.includes(instanceNode)) roots.push(instanceNode);
-		}
-		return roots;
-	}, [element]);
-	useEffect(() => {
-		tree.expandAllNodes();
-	}, [data]);
-	if (deployments.length === 0) return /* @__PURE__ */ jsx(Alert, {
-		variant: "light",
-		color: "gray",
-		icon: infoIcon,
-		children: "This element does not have any deployments"
-	});
-	return /* @__PURE__ */ jsx(Tree, {
-		levelOffset: "sm",
-		allowRangeSelection: false,
-		classNames: {
-			node: treeNode,
-			label: treeNodeLabel
-		},
-		styles: { root: {
-			position: "relative",
-			width: "min-content",
-			minWidth: 300
-		} },
-		data,
-		tree,
-		renderNode: ({ node, selected, elementProps, hasChildren }) => /* @__PURE__ */ jsx(Box, {
-			...elementProps,
-			style: { ...!hasChildren && { marginBottom: rem(4) } },
-			children: hasChildren ? /* @__PURE__ */ jsx(Button, {
-				fullWidth: true,
-				color: "gray",
-				variant: selected ? "transparent" : "subtle",
-				size: "xs",
-				justify: "flex-start",
-				styles: { root: {
-					position: "unset",
-					paddingInlineStart: rem(16)
-				} },
-				children: node.label
-			}) : node.label
-		})
-	});
-});
-//#endregion
-export { TabPanelDeployments };

package/dist/overlays/element-details/TabPanelRelationships.css.d.ts

@@ -1,5 +0,0 @@
-export declare const fqn: string;
-export declare const relationshipStat: string;
-export declare const xyflow: string;
-export declare const panelScope: string;
-export declare const edgeNum: string;

package/dist/overlays/element-details/TabPanelRelationships.css.js

@@ -1,67 +0,0 @@
-import { css } from "@likec4/styles/css";
-//#region src/overlays/element-details/TabPanelRelationships.css.ts
-var fqn = css({
-	display: "inline-block",
-	fontSize: "sm",
-	fontWeight: "medium",
-	whiteSpace: "nowrap",
-	padding: "[3px 6px]",
-	borderRadius: "xs",
-	background: `var(--likec4-palette-fill)/75`,
-	lineHeight: "[1.2]",
-	color: "var(--likec4-palette-hiContrast)"
-});
-var relationshipStat = css({
-	_light: {
-		background: "mantine.gray[1]",
-		"&[data-missing": {}
-	},
-	[`&[data-missing]`]: {
-		color: "mantine.orange[4]",
-		background: `mantine.orange[8]/15`,
-		borderColor: `mantine.orange[5]/20`,
-		_light: { color: "mantine.orange[8]" }
-	}
-});
-var xyflow = css({
-	flex: "[1 1 100%]",
-	position: "relative",
-	width: "100%",
-	height: "100%",
-	background: "surface.sunken",
-	border: "default",
-	borderRadius: "sm"
-});
-css({
-	_before: {
-		content: "\"scope:\"",
-		position: "absolute",
-		top: "0",
-		left: "2",
-		fontSize: "xxs",
-		fontWeight: "medium",
-		lineHeight: "1",
-		color: "text.dimmed",
-		opacity: "[0.85]",
-		transform: "translateY(-100%) translateY(-2px)"
-	},
-	_light: { "& .mantine-SegmentedControl-root": { background: "mantine.gray[3]" } }
-});
-css({
-	display: "inline-block",
-	fontSize: "xl",
-	fontWeight: "bold",
-	padding: "[1px 5px]",
-	minWidth: "[24px]",
-	textAlign: "center",
-	borderRadius: "sm",
-	background: "surface.sunken",
-	color: "text.default",
-	[`&[data-zero]`]: { color: "text.dimmed" },
-	[`&[data-missing]`]: {
-		color: "mantine.orange[4]",
-		background: `mantine.orange[8]/20`
-	}
-});
-//#endregion
-export { fqn, relationshipStat, xyflow };

package/dist/overlays/element-details/TabPanelRelationships.d.ts

@@ -1,7 +0,0 @@
-import { LikeC4Model } from '@likec4/core/model';
-type RelationshipsTabPanelProps = {
-    node: LikeC4Model.Node | null;
-    element: LikeC4Model.Element;
-};
-export declare function TabPanelRelationships({ node, element, }: RelationshipsTabPanelProps): import("react").JSX.Element;
-export {};

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -1,159 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { fqn, relationshipStat, xyflow } from "./TabPanelRelationships.css.js";
-import { useElementDetailsActorRef } from "./actorContext.js";
-import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.js";
-import { IconArrowRight, IconExternalLink, IconInfoCircle } from "@tabler/icons-react";
-import { useCallback } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { unique } from "remeda";
-import { nameFromFqn } from "@likec4/core";
-import { ActionIcon, Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
-import { useSelector } from "@xstate/react";
-//#region src/overlays/element-details/TabPanelRelationships.tsx
-var Tooltip$1 = Tooltip.withProps({
-	color: "dark",
-	fz: "xs",
-	openDelay: 600,
-	closeDelay: 120,
-	label: "",
-	children: null,
-	offset: 8,
-	withinPortal: false
-});
-function TabPanelRelationships({ node, element }) {
-	const diagram = useDiagram();
-	const delailsActor = useElementDetailsActorRef();
-	const relationshipsBrowserActor = useSelector(delailsActor, useCallback((s) => s.children[`${delailsActor.id}-relationships`], [delailsActor.id]));
-	const incoming = [...element.incoming()].map((r) => r.id);
-	const outgoing = [...element.outgoing()].map((r) => r.id);
-	const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
-	const outgoingInView = node ? unique([...node.outgoing()].flatMap((e) => e.$edge.relations)) : [];
-	const notIncludedRelations = [...incoming, ...outgoing].filter((r) => !incomingInView.includes(r) && !outgoingInView.includes(r)).length;
-	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "xs",
-		pos: "relative",
-		w: "100%",
-		h: "100%",
-		children: [incoming.length + outgoing.length > 0 && /* @__PURE__ */ jsxs(Group, {
-			gap: "xs",
-			wrap: "nowrap",
-			align: "center",
-			children: [/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Group, {
-				gap: 8,
-				mb: 4,
-				wrap: "nowrap",
-				children: [
-					/* @__PURE__ */ jsx(RelationshipsStat, {
-						title: "incoming",
-						total: incoming.length,
-						included: incomingInView.length
-					}),
-					/* @__PURE__ */ jsx(ThemeIcon, {
-						size: "sm",
-						variant: "transparent",
-						c: "dimmed",
-						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
-					}),
-					/* @__PURE__ */ jsx(Text, {
-						className: fqn,
-						children: nameFromFqn(element.id)
-					}),
-					/* @__PURE__ */ jsx(ThemeIcon, {
-						size: "sm",
-						variant: "transparent",
-						c: "dimmed",
-						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
-					}),
-					/* @__PURE__ */ jsx(RelationshipsStat, {
-						title: "outgoing",
-						total: outgoing.length,
-						included: outgoingInView.length
-					})
-				]
-			}) }), notIncludedRelations > 0 && /* @__PURE__ */ jsx(Tooltip$1, {
-				label: "Current view does not include some relationships",
-				children: /* @__PURE__ */ jsxs(Group, {
-					mt: "xs",
-					gap: 6,
-					c: "orange",
-					style: { cursor: "pointer" },
-					children: [/* @__PURE__ */ jsx(IconInfoCircle, { style: { width: 14 } }), /* @__PURE__ */ jsxs(Text, {
-						fz: "sm",
-						children: [
-							notIncludedRelations,
-							" relationship",
-							notIncludedRelations > 1 ? "s are" : " is",
-							" hidden"
-						]
-					})]
-				})
-			})]
-		}), /* @__PURE__ */ jsx(Box, {
-			className: xyflow,
-			children: relationshipsBrowserActor && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }), /* @__PURE__ */ jsx(Box, {
-				pos: "absolute",
-				top: 12,
-				right: 12,
-				children: /* @__PURE__ */ jsx(ActionIcon, {
-					size: "md",
-					variant: "default",
-					radius: "sm",
-					onClick: (e) => {
-						e.stopPropagation();
-						const { subject, scope, viewId } = relationshipsBrowserActor.getSnapshot().context;
-						diagram.overlays().send({
-							type: "open.relationshipsBrowser",
-							subject,
-							scope,
-							viewId
-						});
-					},
-					children: /* @__PURE__ */ jsx(IconExternalLink, {
-						stroke: 1.6,
-						style: { width: "70%" }
-					})
-				})
-			})] })
-		})]
-	});
-}
-function RelationshipsStat({ title, total, included }) {
-	return /* @__PURE__ */ jsx(Paper, {
-		withBorder: true,
-		shadow: "none",
-		className: relationshipStat,
-		px: "md",
-		py: "xs",
-		radius: "md",
-		mod: {
-			zero: total === 0,
-			missing: total !== included
-		},
-		children: /* @__PURE__ */ jsxs(Stack, {
-			gap: 4,
-			align: "flex-end",
-			children: [/* @__PURE__ */ jsx(Text, {
-				component: "div",
-				c: total !== included ? "orange" : "dimmed",
-				tt: "uppercase",
-				fw: 600,
-				fz: 10,
-				lh: 1,
-				children: title
-			}), /* @__PURE__ */ jsx(Text, {
-				fw: 600,
-				fz: "xl",
-				component: "div",
-				lh: 1,
-				children: total !== included ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					included,
-					" / ",
-					total
-				] }) : /* @__PURE__ */ jsx(Fragment$1, { children: total })
-			})]
-		})
-	});
-}
-//#endregion
-export { TabPanelRelationships };