@likec4/diagram 1.48.0 → 1.50.0

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -6,9 +6,9 @@ import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

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

@@ -14,12 +14,12 @@ import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode } from './custom/EmptyNode.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-import IconCheck from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconCheck from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
 
 const nodeTypes = {
   element: ElementNode,

package/dist/overlays/relationships-browser/SelectElement.css.js

@@ -7,8 +7,8 @@ const label = css({
   _hover: {
     backgroundColor: "mantine.colors.gray[0]",
     _dark: {
-      backgroundColor: "mantine.colors.defaultHover",
-      color: "mantine.colors.white"
+      backgroundColor: "default.hover",
+      color: "white"
     }
   }
 });

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

@@ -7,8 +7,8 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

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

@@ -2,7 +2,7 @@ import { nonNullable, invariant, delay } from '@likec4/core/utils';
 import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { getViewportForBounds } from '@xyflow/system';
 import { hasAtLeast, omit, isNullish } from 'remeda';
-import { setup, assign, enqueueActions, cancel, raise, fromPromise, assertEvent } from 'xstate';
+import { assign, enqueueActions, cancel, raise, setup, assertEvent, fromPromise } from 'xstate';
 import { MinZoom, ZIndexes } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';

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

@@ -6,9 +6,9 @@ import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const selectSubject = (state) => state.context.subject;

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

@@ -14,7 +14,7 @@ function EmptyNode({
         width: "100%",
         height: "100%",
         border: `3px dashed`,
-        borderColor: `mantine.colors.defaultBorder`,
+        borderColor: `default.border`,
         borderRadius: "md",
         display: "flex",
         justifyContent: "center",

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

@@ -1,4 +1,4 @@
-import { Queue, GroupElementKind, nonNullable, invariant } from '@likec4/core';
+import { Queue, GroupElementKind, invariant, nonNullable } from '@likec4/core';
 import '@react-hookz/web';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';

package/dist/projects-overview/ProjectsOverview.js

@@ -5,7 +5,7 @@ import { ReactFlowProvider } from '@xyflow/react';
 import { LayoutGroup } from 'motion/react';
 import { useEffect, useRef } from 'react';
 import { projectOverviewLogic } from './actor.js';
-import { ProjectsOverviewActorContext } from './context.js';
+import { ProjectsOverviewActorContextProvider } from './context.js';
 import { ProjectsOverviewPanel } from './panel/ProjectsOverviewPanel.js';
 import { ProjectsOverviewXY } from './ProjectsOverviewXY.js';
 
@@ -48,7 +48,7 @@ function ProjectsOverview({
     initialHeight: bounds.height,
     fitView: false
   });
-  return /* @__PURE__ */ jsx(ProjectsOverviewActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
+  return /* @__PURE__ */ jsx(ProjectsOverviewActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
     /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(ProjectsOverviewXY, { ...props }) }),
     /* @__PURE__ */ jsx(ProjectsOverviewPanel, {})
   ] }) });

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

@@ -1,8 +1,4 @@
-import { ProjectsOverviewTypes } from './_types';
-import { FunctionComponent, NamedExoticComponent } from 'react';
-export declare const edgeTypes: {
-    relationship: FunctionComponent<ProjectsOverviewTypes.EdgeProps>;
-};
+import { NamedExoticComponent } from 'react';
 export type ProjectsOverviewXYProps = {
     /**
      * Background pattern

package/dist/projects-overview/ProjectsOverviewXY.js

@@ -95,4 +95,4 @@ const ProjectsOverviewXY = memo(({
 });
 ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
 
-export { ProjectsOverviewXY, edgeTypes };
+export { ProjectsOverviewXY };

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

@@ -4,7 +4,7 @@ import { EdgeChange, NodeChange } from '@xyflow/system';
 import { MouseEvent } from 'react';
 import { Simplify } from 'type-fest';
 import { ActorRef, SnapshotFrom, StateMachine, ActionFunction, Values } from 'xstate';
-import { ViewPadding } from '../custom';
+import { ViewPadding } from '../LikeC4Diagram.props';
 import { ProjectsOverviewTypes, ProjectsOverviewXYFLowInstance, ProjectsOverviewXYStoreApi } from './_types';
 export type Input = {
     view: LayoutedProjectsView;

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

@@ -1,4 +1,4 @@
 import { ProjectsOverviewActorRef } from './actor';
-import { Context } from 'react';
-export declare const ProjectsOverviewActorContext: Context<ProjectsOverviewActorRef | null>;
+import { Provider } from 'react';
+export declare const ProjectsOverviewActorContextProvider: Provider<ProjectsOverviewActorRef | null>;
 export declare function useProjectsOverviewActor(): ProjectsOverviewActorRef;

package/dist/projects-overview/context.js

@@ -2,8 +2,9 @@ import { nonNullable } from '@likec4/core';
 import { createContext, useContext } from 'react';
 
 const ProjectsOverviewActorContext = createContext(null);
+const ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
 function useProjectsOverviewActor() {
   return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
 }
 
-export { ProjectsOverviewActorContext, useProjectsOverviewActor };
+export { ProjectsOverviewActorContextProvider, useProjectsOverviewActor };

package/dist/projects-overview/custom/nodeTypes.js

@@ -5,7 +5,7 @@ import { ElementNodeContainer } from '../../base-primitives/element/ElementNodeC
 import { ElementShape } from '../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../base-primitives/element/ElementData.js';
 import { ElementActionButtons } from '../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import { DefaultHandles } from '../../base-primitives/NodeHandles.js';
 
 function ProjectNode(props) {

package/dist/search/Search.d.ts

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

package/dist/search/Search.js

@@ -5,9 +5,10 @@ import { Group, Grid, GridCol, Title, ScrollArea } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
 import { useTimeoutEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
-import { AnimatePresence, LayoutGroup } from 'motion/react';
-import { memo, useRef } from 'react';
+import { AnimatePresence, usePresence, LayoutGroup } from 'motion/react';
+import { memo, useRef, useMemo, useEffect, Suspense } from 'react';
 import { isTruthy } from 'remeda';
+import { createEmptyActor } from 'xstate';
 import { useCallbackRef } from '../hooks/useCallbackRef.js';
 import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlay } from '../overlays/overlay/Overlay.js';
@@ -67,39 +68,35 @@ const scrollArea = css({
     }
   }
 });
-const selectIsOpened = (s) => !s.matches("inactive");
-function Search() {
-  const searchActorRef = useSearchActorRef();
-  if (!searchActorRef) {
-    return null;
+const selectIsOpened = (s) => {
+  try {
+    return s.status === "active" && (s.value === "opened" || s.value === "pickView");
+  } catch (e) {
+    console.error(e);
+    return false;
   }
-  return /* @__PURE__ */ jsx(SearchOverlayCtx, { searchActorRef });
-}
-const selectPickViewFor = (s) => s.context.pickViewFor ?? null;
-const SearchOverlayCtx = memo(({ searchActorRef }) => {
-  const isOpened = useSelector(searchActorRef, selectIsOpened);
-  const ref = useRef(null);
-  const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
-  useTimeoutEffect(() => {
-    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
-      focusToFirstFoundElement(ref.current);
-    }
-  }, isOpened ? 150 : void 0);
-  const openSearch = () => {
-    searchActorRef.send({ type: "open" });
-  };
+};
+const Search = memo(() => {
+  const searchActorRef = useSearchActorRef();
+  const emptyActorRef = useRef(createEmptyActor());
+  const isOpened = useSelector(searchActorRef ?? emptyActorRef.current, selectIsOpened);
   const close = useCallbackRef(() => {
-    searchActorRef.send({ type: "close" });
+    searchActorRef?.send({ type: "close" });
   });
-  useHotkeys([
-    ["mod+k", openSearch, {
-      preventDefault: true
-    }],
-    ["mod+f", openSearch, {
-      preventDefault: true
-    }]
-  ]);
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
+  useHotkeys(
+    useMemo(() => {
+      const openSearch = () => searchActorRef?.send({ type: "open" });
+      return searchActorRef ? [
+        ["mod+k", openSearch, {
+          preventDefault: true
+        }],
+        ["mod+f", openSearch, {
+          preventDefault: true
+        }]
+      ] : [];
+    }, [searchActorRef])
+  );
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: searchActorRef && isOpened && /* @__PURE__ */ jsx(
     Overlay,
     {
       fullscreen: true,
@@ -114,63 +111,87 @@ const SearchOverlayCtx = memo(({ searchActorRef }) => {
       openDelay: 0,
       onClose: close,
       "data-likec4-search": "true",
-      children: /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
-        /* @__PURE__ */ jsx(
-          Group,
-          {
-            className: "group",
-            wrap: "nowrap",
-            onClick: (e) => {
-              e.stopPropagation();
-              moveFocusToSearchInput(ref.current);
-            },
-            children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
-              /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
-              /* @__PURE__ */ jsx(SearchByTags, {})
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxs(Grid, { children: [
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          Grid,
-          {
-            className: css({
-              containerName: "likec4-search-elements",
-              containerType: "size",
-              overflow: "hidden",
-              flexGrow: 1
-            }),
-            children: [
-              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-                ScrollArea,
-                {
-                  type: "scroll",
-                  className: scrollArea,
-                  pr: "xs",
-                  scrollbars: "y",
-                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-                ScrollArea,
-                {
-                  type: "scroll",
-                  className: scrollArea,
-                  pr: "xs",
-                  scrollbars: "y",
-                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
-                }
-              ) })
-            ]
-          }
-        ),
-        pickViewFor && /* @__PURE__ */ jsx(PickView, { searchActorRef, elementFqn: pickViewFor })
-      ] })
+      children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
     }
   ) });
 });
+Search.displayName = "Search";
+const selectPickViewFor = (s) => s.context.pickViewFor;
+const SearchOverlayBody = memo(({ searchActorRef }) => {
+  const ref = useRef(null);
+  const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement(ref.current);
+    }
+  }, 150);
+  const [isPresent, safeToRemove] = usePresence();
+  useEffect(() => {
+    if (isPresent) {
+      return;
+    }
+    safeToRemove();
+    try {
+      searchActorRef.send({ type: "animation.presence.end" });
+    } catch (e) {
+      console.debug("SearchOverlayBody: animation.presence.end failed", e);
+    }
+  }, [isPresent, searchActorRef, safeToRemove]);
+  return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: "group",
+        wrap: "nowrap",
+        onClick: (e) => {
+          e.stopPropagation();
+          moveFocusToSearchInput(ref.current);
+        },
+        children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
+          /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
+          /* @__PURE__ */ jsx(SearchByTags, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Grid, { children: [
+      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
+      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        className: css({
+          containerName: "likec4-search-elements",
+          containerType: "size",
+          overflow: "hidden",
+          flexGrow: 1
+        }),
+        children: [
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              type: "scroll",
+              className: scrollArea,
+              pr: "xs",
+              scrollbars: "y",
+              children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              type: "scroll",
+              className: scrollArea,
+              pr: "xs",
+              scrollbars: "y",
+              children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
+            }
+          ) })
+        ]
+      }
+    ),
+    pickViewFor && /* @__PURE__ */ jsx(PickView, { searchActorRef, elementFqn: pickViewFor })
+  ] });
+});
 
 export { Search };

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

@@ -25,7 +25,7 @@ const treeSubtree = css({
   marginTop: "2"
 });
 const elementExpandIcon = css({
-  color: "mantine.colors.dimmed"
+  color: "text.dimmed"
 });
 const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
@@ -35,7 +35,7 @@ const elementTitleAndId = css({
   }
 });
 const elementId = css({
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  // color: `[var(${descriptionColor}, {colors.text.dimmed})]`,
   fontSize: "10px",
   lineHeight: "1.3",
   display: "block",
@@ -56,7 +56,7 @@ const elementIcon = css({
 });
 const elementViewsCount = css({
   flex: 0,
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  // color: `[var(${descriptionColor}, {colors.text.dimmed})]`,
   fontSize: "10px",
   fontWeight: "medium",
   whiteSpace: "nowrap",