Removed classcat and reworked class types from string to ClassValue

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cc from 'classcat';
   import type { Component } from 'svelte';
   import {
     ConnectionLineType,
@@ -67,7 +66,7 @@
     class="svelte-flow__connectionline"
     style={containerStyle}
   >
-    <g class={cc(['svelte-flow__connection', getConnectionStatus(store.connection.isValid)])}>
+    <g class={['svelte-flow__connection', getConnectionStatus(store.connection.isValid)]}>
       {#if LineComponent}
         <LineComponent></LineComponent>
       {:else}

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getContext, type Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
   import { useStore } from '$lib/store';
@@ -14,7 +15,7 @@
     x?: number;
     y?: number;
     style?: string;
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
   } = $props();
 

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { setContext } from 'svelte';
-  import cc from 'classcat';
 
   import { getMarkerId } from '@xyflow/system';
 
@@ -86,7 +85,7 @@
 {#if !hidden}
   <svg style:z-index={zIndex}>
     <g
-      class={cc(['svelte-flow__edge', className])}
+      class={['svelte-flow__edge', className]}
       class:animated
       class:selected
       class:selectable

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import cc from 'classcat';
   import {
     Position,
     XYHandle,
@@ -140,14 +139,14 @@ The Handle component is the part of a node that can be used to connect nodes.
   data-nodeid={nodeId}
   data-handlepos={position}
   data-id="{store.flowId}-{nodeId}-{handleId}-{type}"
-  class={cc([
+  class={[
     'svelte-flow__handle',
     `svelte-flow__handle-${position}`,
     'nodrag',
     'nopan',
     position,
     className
-  ])}
+  ]}
   class:valid
   class:connectingto={connectingTo}
   class:connectingfrom={connectingFrom}

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { setContext, onDestroy } from 'svelte';
-  import cc from 'classcat';
   import { errorMessages, nodeHasDimensions, Position } from '@xyflow/system';
 
   import drag from '$lib/actions/drag';
@@ -187,7 +186,7 @@
     }}
     bind:this={nodeRef}
     data-id={id}
-    class={cc(['svelte-flow__node', `svelte-flow__node-${type}`, className])}
+    class={['svelte-flow__node', `svelte-flow__node-${type}`, className]}
     class:dragging
     class:selected
     class:draggable

packages/svelte/src/lib/components/edges/BaseEdge.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cc from 'classcat';
   import type { BaseEdgeProps } from '../../types';
   import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
 
@@ -21,7 +20,7 @@
 <path
   {id}
   d={path}
-  class={cc(['svelte-flow__edge-path', className])}
+  class={['svelte-flow__edge-path', className]}
   marker-start={markerStart}
   marker-end={markerEnd}
   fill="none"