@likec4/diagram 1.57.0 → 1.59.0

package/dist/overlays/relationships-browser/actor.js

@@ -17,6 +17,83 @@ import { assertEvent, assign, cancel, enqueueActions, fromPromise, raise, setup
 * Root node in 'subjects' column
 */
 var findRootSubject = (nodes) => nodes.find((n) => n.data.column === "subjects" && isNullish(n.parentId));
+var layouter = fromPromise(async ({ input, self, signal }) => {
+	const { subjectId, navigateFromNode, xyflow, xystore, update } = input;
+	let { nodes: currentNodes, width, height } = xystore.getState();
+	const next = viewToNodesEdge(update);
+	const updateXYData = () => {
+		const { nodes, edges } = xystore.getState();
+		return {
+			xynodes: updateNodes(nodes, next.xynodes),
+			xyedges: updateEdges(edges, next.xyedges)
+		};
+	};
+	const parent = nonNullable(self._parent);
+	let zoom = xyflow.getZoom();
+	const maxZoom = Math.max(zoom, 1);
+	const nextviewport = getViewportForBounds$1(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
+	const nextSubjectNode = next.xynodes.find((n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId) ?? findRootSubject(next.xynodes);
+	const currentSubjectNode = findRootSubject(currentNodes);
+	const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
+	if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
+		await xyflow.setViewport(nextviewport);
+		return updateXYData();
+	}
+	const nextSubjectCenter = {
+		x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
+		y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
+	};
+	const currentSubjectCenter = getNodeCenter(xyflow.getInternalNode(currentSubjectNode.id));
+	const nested = /* @__PURE__ */ new Set();
+	currentNodes.forEach((n) => {
+		if (n.id === existingNode.id) return;
+		if (n.data.column === "subjects") {
+			nested.add(n.id);
+			return;
+		}
+		if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) nested.add(n.id);
+	});
+	currentNodes = updateNodes(currentNodes, currentNodes.flatMap((n) => {
+		if (nested.has(n.id)) return [];
+		if (n.id !== existingNode.id) return {
+			...n,
+			data: {
+				...n.data,
+				dimmed: n.data.column === "subjects" ? "immediate" : true
+			}
+		};
+		return {
+			...omit(n, ["parentId"]),
+			position: {
+				x: currentSubjectCenter.x - n.initialWidth / 2,
+				y: currentSubjectCenter.y - n.initialHeight / 2
+			},
+			zIndex: ZIndexes.Max,
+			hidden: false,
+			data: {
+				...n.data,
+				dimmed: false
+			}
+		};
+	}));
+	parent.send({
+		type: "update.xydata",
+		xynodes: currentNodes,
+		xyedges: []
+	});
+	await delay(120);
+	next.xynodes = next.xynodes.map(Base.setDimmed(false));
+	if (signal.aborted) return updateXYData();
+	const duration = 300;
+	xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, {
+		zoom,
+		duration,
+		interpolate: "smooth"
+	});
+	await delay(duration);
+	await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+	return updateXYData();
+});
 var machine = setup({
 	types: {
 		context: {},
@@ -25,83 +102,7 @@ var machine = setup({
 		input: {},
 		events: {}
 	},
-	actors: { layouter: fromPromise(async ({ input, self, signal }) => {
-		const { subjectId, navigateFromNode, xyflow, xystore, update } = input;
-		let { nodes: currentNodes, width, height } = xystore.getState();
-		const next = viewToNodesEdge(update);
-		const updateXYData = () => {
-			const { nodes, edges } = xystore.getState();
-			return {
-				xynodes: updateNodes(nodes, next.xynodes),
-				xyedges: updateEdges(edges, next.xyedges)
-			};
-		};
-		const parent = nonNullable(self._parent);
-		let zoom = xyflow.getZoom();
-		const maxZoom = Math.max(zoom, 1);
-		const nextviewport = getViewportForBounds$1(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
-		const nextSubjectNode = next.xynodes.find((n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId) ?? findRootSubject(next.xynodes);
-		const currentSubjectNode = findRootSubject(currentNodes);
-		const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
-		if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
-			await xyflow.setViewport(nextviewport);
-			return updateXYData();
-		}
-		const nextSubjectCenter = {
-			x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
-			y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
-		};
-		const currentSubjectCenter = getNodeCenter(xyflow.getInternalNode(currentSubjectNode.id));
-		const nested = /* @__PURE__ */ new Set();
-		currentNodes.forEach((n) => {
-			if (n.id === existingNode.id) return;
-			if (n.data.column === "subjects") {
-				nested.add(n.id);
-				return;
-			}
-			if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) nested.add(n.id);
-		});
-		currentNodes = updateNodes(currentNodes, currentNodes.flatMap((n) => {
-			if (nested.has(n.id)) return [];
-			if (n.id !== existingNode.id) return {
-				...n,
-				data: {
-					...n.data,
-					dimmed: n.data.column === "subjects" ? "immediate" : true
-				}
-			};
-			return {
-				...omit(n, ["parentId"]),
-				position: {
-					x: currentSubjectCenter.x - n.initialWidth / 2,
-					y: currentSubjectCenter.y - n.initialHeight / 2
-				},
-				zIndex: ZIndexes.Max,
-				hidden: false,
-				data: {
-					...n.data,
-					dimmed: false
-				}
-			};
-		}));
-		parent.send({
-			type: "update.xydata",
-			xynodes: currentNodes,
-			xyedges: []
-		});
-		await delay(120);
-		next.xynodes = next.xynodes.map(Base.setDimmed(false));
-		if (signal.aborted) return updateXYData();
-		const duration = 300;
-		xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, {
-			zoom,
-			duration,
-			interpolate: "smooth"
-		});
-		await delay(duration);
-		await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
-		return updateXYData();
-	}) },
+	actors: { layouter },
 	guards: {
 		hasViewId: ({ context }) => context.viewId !== null,
 		isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
@@ -371,4 +372,4 @@ var relationshipsBrowserLogic = machine.createMachine({
 	exit: dispose()
 });
 //#endregion
-export { relationshipsBrowserLogic };
+export { layouter, relationshipsBrowserLogic };

package/dist/overlays/relationships-browser/custom/ElementActions.d.ts

@@ -1,2 +1,2 @@
 import { RelationshipsBrowserTypes as Types } from '../_types';
-export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react").JSX.Element;

package/dist/overlays/relationships-browser/custom/EmptyNode.d.ts

@@ -1,2 +1,2 @@
 import { RelationshipsBrowserTypes } from '../_types';
-export declare function EmptyNode({ data: { column, }, }: RelationshipsBrowserTypes.NodeProps<'empty'>): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyNode({ data: { column, }, }: RelationshipsBrowserTypes.NodeProps<'empty'>): import("react").JSX.Element;

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -1,9 +1,9 @@
 import { BaseNodePropsWithData } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
-export declare function ElementNode(props: RelationshipsBrowserTypes.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundNode(props: RelationshipsBrowserTypes.NodeProps<'compound'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementNode(props: RelationshipsBrowserTypes.NodeProps<'element'>): import("react").JSX.Element;
+export declare function CompoundNode(props: RelationshipsBrowserTypes.NodeProps<'compound'>): import("react").JSX.Element;
 type ElementPortsProps = BaseNodePropsWithData<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
-export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react").JSX.Element;
 type CompoundPortsProps = BaseNodePropsWithData<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
-export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react").JSX.Element;
 export {};

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -103,4 +103,4 @@ var CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [da
 	}
 }, id))] });
 //#endregion
-export { CompoundNode, ElementNode };
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

package/dist/overlays/relationships-browser/hooks.js

@@ -52,4 +52,4 @@ function useRelationshipsBrowser() {
 	}), [actor]);
 }
 //#endregion
-export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState };
+export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserActor, useRelationshipsBrowserState };

package/dist/overlays/relationships-browser/layout.js

@@ -3,9 +3,9 @@ import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
 import { useMemo } from "react";
 import { concat, filter, find, forEachObj, groupBy, map, mapToObj, omit, only, pipe, prop, reduce, sortBy, tap, unique } from "remeda";
 import { DefaultMap, ifind, invariant, nonNullable, toArray } from "@likec4/core/utils";
+import { exact, preferSummary } from "@likec4/core/types";
 import { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view";
 import dagre from "@dagrejs/dagre";
-import { exact, preferSummary } from "@likec4/core/types";
 //#region src/overlays/relationships-browser/layout.ts
 /**
 * All constants related to the layout
@@ -423,4 +423,4 @@ function useRelationshipsView(subject, viewId, scope) {
 	]);
 }
 //#endregion
-export { LayoutRelationshipsViewResult, useRelationshipsView };
+export { LayoutRelationshipsViewResult, layoutRelationshipsView, useRelationshipsView };

package/dist/projects-overview/ProjectsOverview.d.ts

@@ -10,4 +10,4 @@ export type ProjectsOverviewProps = {
     onNavigateToProject?: undefined | ((projectId: ProjectId) => void);
     fitViewPadding?: ViewPadding | undefined;
 } & ProjectsOverviewXYProps;
-export declare function ProjectsOverview({ view, onNavigateToProject, fitViewPadding, ...props }: ProjectsOverviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectsOverview({ view, onNavigateToProject, fitViewPadding, ...props }: ProjectsOverviewProps): import("react").JSX.Element;

package/dist/projects-overview/actor.js

@@ -6,9 +6,9 @@ import { ProjectsOverviewViewportPersistence } from "./persistence.js";
 import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";
 import { clamp } from "remeda";
 import { invariant, nonNullable, nonexhaustive } from "@likec4/core";
-import { assertEvent, setup } from "xstate";
 import { animate, mapValue, motionValue, stagger, styleEffect } from "motion";
-import { assign as assign$1, emit as emit$1 } from "xstate/actions";
+import { assertEvent, setup } from "xstate";
+import { assign as assign$1, emit } from "xstate/actions";
 //#region src/projects-overview/actor.ts
 var machine = setup({
 	types: {
@@ -247,7 +247,7 @@ var projectOverviewLogic = machine.createMachine({
 					});
 				}
 			],
-			on: { "emit.navigate.to": { actions: emit$1(({ event }) => ({
+			on: { "emit.navigate.to": { actions: emit(({ event }) => ({
 				...event,
 				type: "navigate.to"
 			})) } }
@@ -263,4 +263,4 @@ function sleep(ms) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
 //#endregion
-export { projectOverviewLogic };
+export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };

package/dist/projects-overview/custom/nodeTypes.d.ts

@@ -1,2 +1,2 @@
 import { ProjectsOverviewTypes } from '../_types';
-export declare function ProjectNode(props: ProjectsOverviewTypes.NodeProps<'project'>): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectNode(props: ProjectsOverviewTypes.NodeProps<'project'>): import("react").JSX.Element;

package/dist/projects-overview/panel/ProjectsOverviewPanel.d.ts

@@ -1 +1 @@
-export declare const ProjectsOverviewPanel: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProjectsOverviewPanel: () => import("react").JSX.Element;

package/dist/search/Search.d.ts

@@ -5,7 +5,7 @@ export declare const bodyCss: string;
 export declare const scrollAreaCss: string;
 export declare const Search: MemoExoticComponent<({ searchActorRef }: {
     searchActorRef: SearchActorRef;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("react").JSX.Element>;
 /**
  * The shared search panel content used by both diagram and overview search.
  * Must be rendered inside a SearchContext.Provider.

package/dist/search/Search.js

@@ -194,4 +194,4 @@ var SearchPanelContent = forwardRef((_, ref) => {
 });
 SearchPanelContent.displayName = "SearchPanelContent";
 //#endregion
-export { Search, SearchPanelContent, bodyCss, dialogCss };
+export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };

package/dist/search/XStateSearchAdapter.d.ts

@@ -2,4 +2,4 @@ import { PropsWithChildren } from 'react';
 import { SearchActorRef } from './searchActor';
 export declare function XStateSearchAdapter({ searchActorRef, children, }: PropsWithChildren<{
     searchActorRef: SearchActorRef;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/search/components/ElementsColumn.css.js

@@ -32,8 +32,8 @@ var elementId = css({
 	whiteSpace: "nowrap",
 	padding: "[1px 5px]",
 	borderRadius: "sm",
-	background: `mantine.colors.dark[9]/30`,
-	_light: { background: `mantine.colors.gray[3]/20` }
+	background: `mantine.dark[9]/30`,
+	_light: { background: `mantine.gray[3]/20` }
 });
 var elementIcon = css({
 	["--likec4-icon-size"]: "24px",

package/dist/search/components/ElementsColumn.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const ElementsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ElementsColumn: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/search/components/PickView.d.ts

@@ -1,4 +1,4 @@
 import { Fqn } from '@likec4/core/types';
 export declare function PickView({ elementFqn, }: {
     elementFqn: Fqn;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/search/components/SearchByTags.d.ts

@@ -1 +1 @@
-export declare function SearchByTags(): import("react/jsx-runtime").JSX.Element | null;
+export declare function SearchByTags(): import("react").JSX.Element | null;

package/dist/search/components/SearchInput.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const LikeC4SearchInput: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const LikeC4SearchInput: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/search/components/ViewsColum.d.ts

@@ -2,12 +2,12 @@ import { LikeC4Model } from '@likec4/core/model';
 import { Fqn } from '@likec4/core/types';
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
-export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
-export declare const ViewsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const NothingFound: () => import("react").JSX.Element;
+export declare const ViewsColumn: MemoExoticComponent<() => import("react").JSX.Element>;
 export declare function ViewButton({ className, view, loop, search, focusOnElement, currentViewId, ...props }: {
     view: LikeC4Model.View;
     currentViewId: string;
     search: string;
     loop?: boolean;
     focusOnElement?: Fqn;
-} & UnstyledButtonProps & ElementProps<'button'>): import("react/jsx-runtime").JSX.Element;
+} & UnstyledButtonProps & ElementProps<'button'>): import("react").JSX.Element;

package/dist/search/components/ViewsColum.js

@@ -12,8 +12,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { first } from "remeda";
 import { Badge, Group, Highlight, Stack, ThemeIcon, UnstyledButton, VisuallyHidden, createScopedKeydownHandler } from "@mantine/core";
 import { Box as Box$1 } from "@likec4/styles/jsx";
-import * as m from "motion/react-m";
 import { preferSummary } from "@likec4/core/types";
+import * as m from "motion/react-m";
 //#region src/search/components/ViewsColum.tsx
 var NothingFound = () => /* @__PURE__ */ jsx(Box$1, {
 	className: emptyBoX,

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system/types';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
 export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;

package/dist/search/components/_shared.css.js

@@ -2,14 +2,14 @@ import { css, sva } from "@likec4/styles/css";
 //#region src/search/components/_shared.css.ts
 var buttonFocused = css.raw({
 	outline: "none",
-	background: "mantine.colors.primary[8]",
-	borderColor: "mantine.colors.primary[9]"
+	background: "mantine.primary[8]",
+	borderColor: "mantine.primary[9]"
 });
 var _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
 var button = css.raw({
 	display: "flex",
 	width: "100%",
-	background: "body",
+	background: "surface.default",
 	rounded: "sm",
 	padding: `[12px 8px 12px 14px]`,
 	minHeight: "60px",
@@ -18,20 +18,20 @@ var button = css.raw({
 	borderColor: "default.border",
 	_hover: {
 		...buttonFocused,
-		borderColor: "mantine.colors.primary[9]",
-		background: `mantine.colors.primary[8]/60`
+		borderColor: "mantine.primary[9]",
+		background: `mantine.primary[8]/60`
 	},
 	_focus: buttonFocused,
 	[_treenodefocus]: buttonFocused,
 	_dark: {
 		borderColor: "transparent",
-		background: `mantine.colors.dark[6]/80`
+		background: `mantine.dark[6]/80`
 	},
 	_light: {
-		background: `mantine.colors.white/80`,
+		background: `mantine.white/80`,
 		_hover: {
-			borderColor: "mantine.colors.primary[6]",
-			backgroundColor: "mantine.colors.primary[5]"
+			borderColor: "mantine.primary[6]",
+			backgroundColor: "mantine.primary[5]"
 		}
 	}
 });
@@ -40,11 +40,11 @@ var iconSize = { ref: "var(--likec4-icon-size, 24px)" };
 var icon = css.raw({
 	color: {
 		base: "text.dimmed",
-		_light: "mantine.colors.gray[5]",
-		_groupHover: "mantine.colors.primary[0]",
-		_groupFocus: "mantine.colors.primary[0]"
+		_light: "mantine.gray[5]",
+		_groupHover: "mantine.primary[0]",
+		_groupFocus: "mantine.primary[0]"
 	},
-	[_treenodefocus]: { color: "mantine.colors.primary[0]" },
+	[_treenodefocus]: { color: "mantine.primary[0]" },
 	flex: `0 0 ${iconSize.ref}`,
 	height: iconSize.ref,
 	width: iconSize.ref,
@@ -60,7 +60,7 @@ var icon = css.raw({
 		pointerEvents: "none"
 	},
 	[`& img`]: { objectFit: "contain" },
-	"&.likec4-shape-icon svg": { strokeWidth: 1.5 }
+	"&.likec4-shape-icon svg": { strokeWidth: "[1.5]" }
 });
 var title = css.raw({
 	fontSize: "16px",
@@ -68,19 +68,19 @@ var title = css.raw({
 	lineHeight: "1.1",
 	[`:where([data-disabled]) &`]: { opacity: .4 },
 	color: {
-		base: "mantine.colors.dark[1]",
-		_light: "mantine.colors.gray[7]",
+		base: "mantine.dark[1]",
+		_light: "mantine.gray[7]",
 		_groupHover: {
-			base: "mantine.colors.primary[1]",
+			base: "mantine.primary[1]",
 			_light: "white"
 		},
 		_groupFocus: {
-			base: "mantine.colors.primary[1]",
+			base: "mantine.primary[1]",
 			_light: "white"
 		}
 	},
 	[_treenodefocus]: { color: {
-		base: "mantine.colors.primary[1]",
+		base: "mantine.primary[1]",
 		_light: "white"
 	} }
 });
@@ -88,12 +88,12 @@ var descriptionColor = css.raw({
 	color: {
 		base: "text.dimmed",
 		_groupHover: {
-			base: "mantine.colors.primary[1]",
-			_light: "mantine.colors.primary[0]"
+			base: "mantine.primary[1]",
+			_light: "mantine.primary[0]"
 		},
-		_groupFocus: "mantine.colors.primary[0]"
+		_groupFocus: "mantine.primary[0]"
 	},
-	[_treenodefocus]: { color: "mantine.colors.primary[0]" }
+	[_treenodefocus]: { color: "mantine.primary[0]" }
 });
 var description = css.raw(descriptionColor, {
 	marginTop: "1",

package/dist/search/components/styles.css.js

@@ -6,12 +6,12 @@ var input = css({
 	background: {
 		base: "transparent",
 		_focusWithin: {
-			base: `mantine.colors.gray[4]/55 !important`,
-			_dark: `mantine.colors.dark[5]/55 !important`
+			base: `mantine.gray[4]/55 !important`,
+			_dark: `mantine.dark[5]/55 !important`
 		},
 		_groupHover: {
-			base: "mantine.colors.gray[3]/35",
-			_dark: "mantine.colors.dark[5]/35"
+			base: "mantine.gray[3]/35",
+			_dark: "mantine.dark[5]/35"
 		}
 	}
 });

package/dist/shadowroot/ShadowRoot.d.ts

@@ -1,8 +1,7 @@
 import { HTMLAttributes } from 'react';
-export declare function useShadowRoot(): ShadowRoot;
 type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
     injectFontCss?: boolean | undefined;
-    styleNonce?: string | (() => string) | undefined;
+    styleNonce?: string | (() => string | undefined) | undefined;
     colorScheme?: 'light' | 'dark' | undefined;
     keepAspectRatio?: false | undefined | {
         width: number;
@@ -14,5 +13,5 @@ type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
      */
     theme?: any;
 };
-export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react").JSX.Element;
 export {};