diff --git a/apps/design-system/package.json b/apps/design-system/package.json
index 63f51f9041..7cf4c7ae23 100644
--- a/apps/design-system/package.json
+++ b/apps/design-system/package.json
@@ -20,15 +20,15 @@
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.40.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-live": "^4.1.8",
     "react-router-dom": "^6.26.0",
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
diff --git a/apps/design-system/src/main.tsx b/apps/design-system/src/main.tsx
index a21247bc3a..03a1f3f7ba 100644
--- a/apps/design-system/src/main.tsx
+++ b/apps/design-system/src/main.tsx
@@ -1,11 +1,13 @@
 import { StrictMode } from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-render(
+const container = document.getElementById('root')
+const root = createRoot(container!)
+
+root.render(
   <StrictMode>
     <App />
-  </StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 )
diff --git a/apps/design-system/src/subjects/views/execution/execution-graph.tsx b/apps/design-system/src/subjects/views/execution/execution-graph.tsx
index 97caeee6fc..2c406cb657 100644
--- a/apps/design-system/src/subjects/views/execution/execution-graph.tsx
+++ b/apps/design-system/src/subjects/views/execution/execution-graph.tsx
@@ -7,14 +7,13 @@ export const ExecutionGraphView = () => {
     <div className="flex h-full flex-col">
       <ExecutionTabs />
       <ExecutionHeader
+        className="border-borders-4 border-b"
         commitName="8fbru3ix"
         branchName="master"
         title={{ number: '311. ', title: 'Alerting docs: adds sns integration' }}
         storage="0 B"
         storageAverage="0 B / 250 MB"
         simpleOperation="27/100k"
-        advancedOperations="2/50k"
-        dataTransfer="4.21 kB/5 GB"
         branch="master"
         commit="b8bruh99h"
         status={ExecutionState.RUNNING}
diff --git a/apps/design-system/src/subjects/views/execution/execution-logs.tsx b/apps/design-system/src/subjects/views/execution/execution-logs.tsx
index 43ec40ece7..2587508e30 100644
--- a/apps/design-system/src/subjects/views/execution/execution-logs.tsx
+++ b/apps/design-system/src/subjects/views/execution/execution-logs.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useAnimateTree } from '@/hooks/useAnimateTree'
 import { useLogs } from '@/hooks/useLogs'
@@ -30,6 +30,11 @@ export const ExecutionLogsView = () => {
   const [enableStream, setEnableStream] = useState(false)
   const [logs, setLogs] = useState<LivelogLine[]>([])
   const [selectedStep, setSelectedStep] = useState<TreeViewElement | null | undefined>(null)
+  const [status, setStatus] = useState<ExecutionState>(ExecutionState.RUNNING)
+  const [elapsedTime, setElapsedTime] = useState('00:00')
+  const [createdTimeElapsed, setCreatedTimeElapsed] = useState('00:00')
+  const createdStartRef = useRef<number>(Date.now())
+  const elapsedStartRef = useRef<number>(Date.now())
 
   const { updatedElements, currentNode } = useAnimateTree({ elements, delay: 2 }) // Animates the execution tree
 
@@ -56,20 +61,59 @@ export const ExecutionLogsView = () => {
     }
   }, [selectedStep])
 
-  const updateHighLevelStatus = (elements: TreeViewElement[]) => {
-    if (elements.every(node => node.status === ExecutionState.SUCCESS)) {
-      return ExecutionState.SUCCESS
-    }
-    return ExecutionState.RUNNING
+  const isAllSuccess = useMemo(
+    () => updatedElements.every(node => node.status === ExecutionState.SUCCESS),
+    [updatedElements]
+  )
+
+  useEffect(() => {
+    setStatus(isAllSuccess ? ExecutionState.SUCCESS : ExecutionState.RUNNING)
+  }, [isAllSuccess])
+
+  const formatTime = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
   }
 
+  // Created timer (always counts up from 0)
+  useEffect(() => {
+    createdStartRef.current = Date.now()
+
+    const interval = setInterval(() => {
+      const now = Date.now()
+      const totalDiff = Math.floor((now - createdStartRef.current) / 1000)
+      setCreatedTimeElapsed(formatTime(totalDiff))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  // Elapsed timer (stops when status changes to success)
+  useEffect(() => {
+    elapsedStartRef.current = Date.now()
+
+    const interval = setInterval(() => {
+      if (status === 'success') return
+
+      const now = Date.now()
+      const elapsedDiff = Math.floor((now - elapsedStartRef.current) / 1000)
+      setElapsedTime(formatTime(elapsedDiff))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [status])
+
   return (
     <div className="flex h-full flex-col">
       <ExecutionTabs />
       <ExecutionHeader
         commitName="8fbru3ix"
         branchName="master"
-        title={{ number: '311. ', title: 'Alerting docs: adds sns integration' }}
+        title={{
+          number: '311. ',
+          title: 'Alerting docs: adds sns integration'
+        }}
         storage="0 B"
         storageAverage="0 B / 250 MB"
         simpleOperation="27/100k"
@@ -77,13 +121,13 @@ export const ExecutionLogsView = () => {
         dataTransfer="4.21 kB/5 GB"
         branch="master"
         commit="b8bruh99h"
-        status={updateHighLevelStatus(updatedElements)}
-        buildTime="1h 30m"
-        createdTime="10 mins ago"
+        status={status}
+        buildTime={elapsedTime}
+        createdTime={createdTimeElapsed}
         pipelineName="build scan push test - k8s - Clone 2"
       />
-      <div className="grid h-[inherit]" style={{ gridTemplateColumns: '1fr 3fr' }}>
-        <div className="flex flex-col gap-4 border border-r-0 border-t-0 border-white/10 pt-4">
+      <div className="border-borders-4 grid h-[inherit] border-t" style={{ gridTemplateColumns: '1fr 3fr' }}>
+        <div className="border-borders-4 flex h-[calc(100vh-226px)] flex-col gap-4 border-r">
           <ExecutionTree
             defaultSelectedId={currentNode?.id ?? selectedStep?.id ?? elements[0].id}
             elements={updatedElements}
@@ -92,7 +136,7 @@ export const ExecutionLogsView = () => {
             }}
           />
         </div>
-        <div className="flex flex-col gap-4 border border-t-0 border-white/10">
+        <div className="border-borders-4 flex flex-col gap-4">
           <ExecutionInfo useLogsStore={useLogsStore} onCopy={() => {}} onDownload={() => {}} onEdit={() => {}} />
         </div>
       </div>
diff --git a/apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx b/apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx
index 10ce4a064f..fd1a43bd60 100644
--- a/apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx
+++ b/apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx
@@ -18,7 +18,7 @@ import { Button, Drawer, Icon, PipelineNodes } from '@harnessio/ui/components'
 
 import '@harnessio/pipeline-graph/dist/index.css'
 
-import { ExecutionInfo, LivelogLine } from '@harnessio/ui/views'
+import { ExecutionHeader, ExecutionInfo, ExecutionState, LivelogLine } from '@harnessio/ui/views'
 
 import { logs } from './mocks/mock-data'
 
@@ -78,19 +78,28 @@ export function StepNodeComponent({
   return (
     <Drawer.Root direction="right">
       <Drawer.Trigger asChild>{stepNode}</Drawer.Trigger>
-      <Drawer.Content className="flex h-full w-1/2 flex-col justify-between">
+      <Drawer.Content className="bg-background-1 border-borders-5 size-full max-w-2xl rounded-none border-l p-0 ">
         <Drawer.Header>
-          <Drawer.Title>Logs</Drawer.Title>
-          <Drawer.Description>{`View ${name} execution logs`}</Drawer.Description>
+          <ExecutionHeader
+            commitName="8fbru3ix"
+            branchName="master"
+            title={{ title: 'npm_build' }}
+            status={ExecutionState.RUNNING}
+            buildTime="1h 30m"
+            startedTime="10 mins ago"
+            delegateType="cloud"
+            pipelineName="npm_build"
+          />
         </Drawer.Header>
-        <div>
-          <ExecutionInfo useLogsStore={() => ({ logs })} onCopy={() => {}} onDownload={() => {}} onEdit={() => {}} />
+        <div className="border-borders-4 mt-1 border-t pt-3">
+          <ExecutionInfo
+            isDrawer
+            useLogsStore={() => ({ logs })}
+            onCopy={() => {}}
+            onDownload={() => {}}
+            onEdit={() => {}}
+          />
         </div>
-        <Drawer.Footer>
-          <Drawer.Close>
-            <Button variant="outline">Close</Button>
-          </Drawer.Close>
-        </Drawer.Footer>
       </Drawer.Content>
     </Drawer.Root>
   )
@@ -361,7 +370,7 @@ const data: AnyContainerNodeType[] = [
 const PipelineExecutionGraph = () => {
   return (
     <CanvasProvider>
-      <PipelineGraph data={data} nodes={nodes} config={{ edgeClassName: 'stroke-borders-2', mode: 'Execution' }} />
+      <PipelineGraph data={data} nodes={nodes} config={{ mode: 'Execution' }} />
     </CanvasProvider>
   )
 }
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-add-in-node-context-menu.tsx b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-add-in-node-context-menu.tsx
index f43a95b9b8..ebe3021d57 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-add-in-node-context-menu.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-add-in-node-context-menu.tsx
@@ -21,7 +21,7 @@ export const StageGroupAddInNodeContextMenu = () => {
         style={{ left: `${contextMenuData?.position.x}px`, top: `${contextMenuData?.position.y}px` }}
       >
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.Stage}`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.Stage)
@@ -32,7 +32,7 @@ export const StageGroupAddInNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.SerialStageGroup}`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.SerialStageGroup)
@@ -42,7 +42,7 @@ export const StageGroupAddInNodeContextMenu = () => {
           <Text wrap="nowrap">Add Serial group</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.ParallelStageGroup}`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.ParallelStageGroup)
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-node-context-menu.tsx b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-node-context-menu.tsx
index 10f37671eb..7ca0b6188b 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-node-context-menu.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-node-context-menu.tsx
@@ -33,7 +33,7 @@ export const StageGroupNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.SerialStageGroup}-before`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.SerialStageGroup)
@@ -43,7 +43,7 @@ export const StageGroupNodeContextMenu = () => {
           <Text wrap="nowrap">Add Serial Stages Group before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.SerialStageGroup}-after`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.SerialStageGroup)
@@ -54,7 +54,7 @@ export const StageGroupNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.ParallelStageGroup}-before`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.ParallelStageGroup)
@@ -64,7 +64,7 @@ export const StageGroupNodeContextMenu = () => {
           <Text wrap="nowrap">Add Parallel Stages Group before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.ParallelStageGroup}-after`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.ParallelStageGroup)
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-node-context-menu.tsx b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-node-context-menu.tsx
index a23a5d48bd..34bbed2376 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-node-context-menu.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-node-context-menu.tsx
@@ -33,7 +33,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key="add-before"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.Stage) // TODO what to add
@@ -43,7 +43,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
           <Text wrap="nowrap">Add stage before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key="add-after"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.Stage) // TODO what to add
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/step-group-node-context-menu.tsx b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/step-group-node-context-menu.tsx
index 3d9d80bb50..1c5009f5ba 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/context-menu/step-group-node-context-menu.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/context-menu/step-group-node-context-menu.tsx
@@ -33,7 +33,7 @@ export const StepGroupNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key="add-before"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before')
@@ -43,7 +43,7 @@ export const StepGroupNodeContextMenu = () => {
           <Text wrap="nowrap">Add Step/Group before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key="add-after"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after')
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/mocks/demoExecutionMock.tsx b/apps/design-system/src/subjects/views/pipeline-edit/mocks/demoExecutionMock.tsx
index a707199c7c..4c83f1a5ce 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/mocks/demoExecutionMock.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/mocks/demoExecutionMock.tsx
@@ -4,8 +4,8 @@ export const demoExecutionMock = [
   {
     type: 'Start',
     config: {
-      width: 40,
-      height: 40,
+      width: 36,
+      height: 36,
       hideDeleteButton: true,
       hideBeforeAdd: true,
       hideLeftPort: true
@@ -188,7 +188,7 @@ export const demoExecutionMock = [
           yamlPath: 'pipeline.stages.1.steps.0',
           yamlEntityType: 'Step',
           name: 'docker',
-          icon: <Icon className="size-6" name={'harness-plugin'} />,
+          icon: <Icon className="size-6" name={'docker'} />,
           selected: false,
           state: 'warning',
           warningMessage: 'Timeout'
@@ -209,7 +209,7 @@ export const demoExecutionMock = [
           yamlPath: 'pipeline.stages.1.steps.1',
           yamlEntityType: 'Step',
           name: 'Step 2',
-          icon: <Icon className="size-6" name={'harness-plugin'} />,
+          icon: <Icon className="size-6" name={'slack'} />,
           selected: false,
           state: 'success'
         },
@@ -223,8 +223,8 @@ export const demoExecutionMock = [
   {
     type: 'End',
     config: {
-      width: 40,
-      height: 40,
+      width: 36,
+      height: 36,
       hideDeleteButton: true,
       hideAfterAdd: true,
       hideRightPort: true
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-stage-group-content-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-stage-group-content-node.tsx
index 85be56ddd5..6cdaa3336d 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-stage-group-content-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-stage-group-content-node.tsx
@@ -6,6 +6,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
 import { StageGroupAddInNodeContextMenu } from '../context-menu/stage-group-add-in-node-context-menu'
 import { StageGroupNodeContextMenu } from '../context-menu/stage-group-node-context-menu'
 import { PipelineNodes } from '../pipeline-nodes'
+import { GlobalData } from '../types/common'
 
 export interface CustomParallelStageGroupContentNodeDataType extends CommonNodeDataType {
   icon?: React.ReactElement
@@ -22,7 +23,10 @@ export function CustomParallelStageGroupContentNode(props: {
   const { node, children, collapsed, isFirst, parentNodeType } = props
   const data = node.data as CustomParallelStageGroupContentNodeDataType
 
-  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
+  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
+    usePipelineStudioNodeContext<GlobalData>()
+
+  const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
 
   const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
 
@@ -35,6 +39,8 @@ export function CustomParallelStageGroupContentNode(props: {
       isFirst={isFirst}
       parentNodeType={parentNodeType}
       node={node}
+      hideContextMenu={hideContextMenu}
+      hideFloatingButtons={hideFloatingButtons}
       onAddInClick={e => {
         e.stopPropagation()
         showContextMenu(StageGroupAddInNodeContextMenu, data, e.currentTarget, true)
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-step-group-content-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-step-group-content-node.tsx
index 828abe34a0..64117a47de 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-step-group-content-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-step-group-content-node.tsx
@@ -5,6 +5,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
 
 import { StepGroupNodeContextMenu } from '../context-menu/step-group-node-context-menu'
 import { PipelineNodes } from '../pipeline-nodes'
+import { GlobalData } from '../types/common'
 
 export interface CustomParallelStepGroupContentNodeDataType extends CommonNodeDataType {
   icon?: React.ReactElement
@@ -21,7 +22,10 @@ export function CustomParallelStepGroupContentNode(props: {
   const { node, children, collapsed, isFirst, parentNodeType } = props
   const data = node.data as CustomParallelStepGroupContentNodeDataType
 
-  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
+  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
+    usePipelineStudioNodeContext<GlobalData>()
+
+  const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
 
   const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
 
@@ -34,6 +38,8 @@ export function CustomParallelStepGroupContentNode(props: {
       isFirst={isFirst}
       parentNodeType={parentNodeType}
       node={node}
+      hideContextMenu={hideContextMenu}
+      hideFloatingButtons={hideFloatingButtons}
       onAddInClick={e => {
         e.stopPropagation()
         onAddIntention(data, 'in')
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-stage-group-content-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-stage-group-content-node.tsx
index e6770065a9..7495cdab2b 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-stage-group-content-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-stage-group-content-node.tsx
@@ -6,6 +6,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
 import { StageGroupAddInNodeContextMenu } from '../context-menu/stage-group-add-in-node-context-menu'
 import { StageGroupNodeContextMenu } from '../context-menu/stage-group-node-context-menu'
 import { PipelineNodes } from '../pipeline-nodes'
+import { GlobalData } from '../types/common'
 
 export interface CustomSerialStageGroupContentNodeDataType extends CommonNodeDataType {
   icon?: React.ReactElement
@@ -22,7 +23,10 @@ export function CustomSerialStageGroupContentNode(props: {
   const { node, children, collapsed, isFirst, parentNodeType } = props
   const data = node.data as CustomSerialStageGroupContentNodeDataType
 
-  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
+  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
+    usePipelineStudioNodeContext<GlobalData>()
+
+  const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
 
   const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
 
@@ -35,6 +39,8 @@ export function CustomSerialStageGroupContentNode(props: {
       isFirst={isFirst}
       parentNodeType={parentNodeType}
       node={node}
+      hideContextMenu={hideContextMenu}
+      hideFloatingButtons={hideFloatingButtons}
       onAddInClick={e => {
         e.stopPropagation()
         showContextMenu(StageGroupAddInNodeContextMenu, data, e.currentTarget, true)
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-step-group-content-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-step-group-content-node.tsx
index 9fa89a8ee7..0cf12c8095 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-step-group-content-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-serial-step-group-content-node.tsx
@@ -5,6 +5,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
 
 import { StepGroupNodeContextMenu } from '../context-menu/step-group-node-context-menu'
 import { PipelineNodes } from '../pipeline-nodes'
+import { GlobalData } from '../types/common'
 
 export interface CustomSerialStepGroupContentNodeDataType extends CommonNodeDataType {
   icon?: React.ReactElement
@@ -21,7 +22,10 @@ export function CustomSerialStepGroupContentNode(props: {
   const { node, children, collapsed, isFirst, parentNodeType } = props
   const data = node.data as CustomSerialStepGroupContentNodeDataType
 
-  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
+  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
+    usePipelineStudioNodeContext<GlobalData>()
+
+  const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
 
   const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
 
@@ -34,6 +38,8 @@ export function CustomSerialStepGroupContentNode(props: {
       isFirst={isFirst}
       parentNodeType={parentNodeType}
       node={node}
+      hideContextMenu={hideContextMenu}
+      hideFloatingButtons={hideFloatingButtons}
       onAddInClick={e => {
         e.stopPropagation()
         onAddIntention(data, 'in')
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-stage-content-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-stage-content-node.tsx
index eeb89f86b5..3a9c120194 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-stage-content-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-stage-content-node.tsx
@@ -5,6 +5,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
 
 import { StageNodeContextMenu } from '../context-menu/stage-node-context-menu'
 import { PipelineNodes } from '../pipeline-nodes'
+import { GlobalData } from '../types/common'
 
 export interface CustomStageContentNodeDataType extends CommonNodeDataType {
   icon?: React.ReactElement
@@ -21,7 +22,10 @@ export function CustomStageContentNode(props: {
   const { node, children, collapsed, isFirst, parentNodeType } = props
   const data = node.data as CustomStageContentNodeDataType
 
-  const { selectionPath, showContextMenu, onAddIntention, onSelectIntention } = usePipelineStudioNodeContext()
+  const { selectionPath, showContextMenu, onAddIntention, onSelectIntention, globalData } =
+    usePipelineStudioNodeContext<GlobalData>()
+
+  const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
 
   const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
 
@@ -34,6 +38,8 @@ export function CustomStageContentNode(props: {
       isFirst={isFirst}
       parentNodeType={parentNodeType}
       node={node}
+      hideContextMenu={hideContextMenu}
+      hideFloatingButtons={hideFloatingButtons}
       onAddInClick={() => {
         onAddIntention(data, 'in')
       }}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-step-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-step-node.tsx
index 2f8984cae5..d14aab544f 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-step-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-step-node.tsx
@@ -5,6 +5,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
 
 import { StepNodeContextMenu } from '../context-menu/step-node-context-menu'
 import { PipelineNodes } from '../pipeline-nodes'
+import { GlobalData } from '../types/common'
 
 export interface StepNodeDataType extends CommonNodeDataType {
   icon?: React.ReactElement
@@ -22,7 +23,10 @@ export function CustomStepContentNode(props: {
   const { node, isFirst, parentNodeType } = props
   const { data } = node
 
-  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
+  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
+    usePipelineStudioNodeContext<GlobalData>()
+
+  const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
 
   const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
 
@@ -34,6 +38,8 @@ export function CustomStepContentNode(props: {
       isFirst={isFirst}
       parentNodeType={parentNodeType}
       node={node}
+      hideContextMenu={hideContextMenu}
+      hideFloatingButtons={hideFloatingButtons}
       onEllipsisClick={e => {
         e.stopPropagation()
         showContextMenu(StepNodeContextMenu, data, e.currentTarget)
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-edit.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-edit.tsx
index 6494eb368d..ee42d47186 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-edit.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-edit.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react'
 
+import { CollapseButton } from '@subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx'
+
 import { Button, ButtonGroup, Icon } from '@harnessio/ui/components'
 import {
   CommonNodeDataType,
@@ -74,7 +76,7 @@ const PipelineStudioWrapper = () => {
 
   return (
     <div // eslint-disable-line jsx-a11y/no-static-element-interactions
-      className="flex h-screen flex-col"
+      className="bg-graph-bg-gradient bg-graph-bg-size flex h-screen flex-col"
       onClick={() => {
         setSelectedPath(undefined)
       }}
@@ -118,6 +120,7 @@ const PipelineStudioWrapper = () => {
               return { level1: staticPath, level2: '' }
             }}
             portComponent={CustomPort}
+            collapseButtonComponent={CollapseButton}
             edgesConfig={{ radius: 10, parallelNodeOffset: 10, serialNodeOffset: 10 }}
             yamlRevision={yamlRevision}
             onYamlRevisionChange={setYamlRevision}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-execution.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-execution.tsx
index 740230b723..963c972563 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-execution.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-execution.tsx
@@ -1,5 +1,7 @@
 import { useMemo } from 'react'
 
+import { CollapseButton } from '@subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx'
+
 import { CanvasProvider, PipelineGraph } from '@harnessio/pipeline-graph'
 import { PipelineStudioNodeContextMenu, PipelineStudioNodeContextProvider } from '@harnessio/ui/views'
 
@@ -9,6 +11,12 @@ import { demoExecutionMock } from './mocks/animations/demoExecutionMock'
 import { parallelContainerConfig, serialContainerConfig } from './mocks/pipelineExecutionMock'
 import { contentNodeFactory } from './nodes-factory'
 import CustomPort from './pipeline-nodes/components/custom-port'
+import { GlobalData } from './types/common'
+
+const globalDataConfigForExecution: GlobalData = {
+  hideContextMenu: true,
+  hideFloatingButtons: true
+}
 
 const PipelineExecution = () => {
   return (
@@ -20,6 +28,7 @@ const PipelineExecution = () => {
         onEditIntention={() => undefined}
         onRevealInYaml={() => undefined}
         onSelectIntention={() => undefined}
+        globalData={globalDataConfigForExecution}
       >
         <PipelineExecutionInner />
         <PipelineStudioNodeContextMenu />
@@ -46,6 +55,7 @@ const PipelineExecutionInner = () => {
             return { level1: staticPath, level2: '' }
           }}
           portComponent={CustomPort}
+          collapseButtonComponent={CollapseButton}
           edgesConfig={{ radius: 10, parallelNodeOffset: 10, serialNodeOffset: 10 }}
           data={animatedNodes}
           nodes={nodes}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx
new file mode 100644
index 0000000000..423e9fca51
--- /dev/null
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx
@@ -0,0 +1,16 @@
+import { CollapseButtonProps } from '@harnessio/pipeline-graph'
+import { Button, Icon } from '@harnessio/ui/components'
+
+export const CollapseButton = ({ collapsed, onToggle }: CollapseButtonProps) => {
+  return (
+    <Button
+      className="bg-background-4 hover:bg-background-9 text-icons-1 hover:text-icons-3"
+      variant="custom"
+      size="xs_icon"
+      onMouseDown={e => e.stopPropagation()}
+      onClick={onToggle}
+    >
+      <Icon name={collapsed ? 'collapse-out' : 'collapse-in'} />
+    </Button>
+  )
+}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapsed-group-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapsed-group-node.tsx
index 4886c75fef..7d3169c343 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapsed-group-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapsed-group-node.tsx
@@ -1,3 +1,5 @@
+import { getNestedStepsCount } from '@subjects/views/pipeline-edit/utils/common-step-utils'
+
 import { LeafNodeInternalType, ParallelNodeInternalType, SerialNodeInternalType } from '@harnessio/pipeline-graph'
 import { cn } from '@harnessio/ui/views'
 
@@ -6,8 +8,6 @@ import { CustomParallelStepGroupContentNodeDataType } from '../../nodes/custom-p
 import { CustomSerialStepGroupContentNodeDataType } from '../../nodes/custom-serial-step-group-content-node'
 import { StepNodeDataType } from '../../nodes/custom-step-node'
 
-export type ExecutionStatusAlign = 'left' | 'right'
-
 export function CollapsedGroupNode({
   node,
   containerNodeType
@@ -26,6 +26,10 @@ export function CollapsedGroupNode({
   const zIndexProp = ['-1', '-2']
 
   const firstNode = nodesToShow.shift()
+  const counter =
+    !!firstNode && 'children' in firstNode && Array.isArray(firstNode.children)
+      ? getNestedStepsCount(firstNode?.children)
+      : undefined
 
   return (
     <>
@@ -42,6 +46,8 @@ export function CollapsedGroupNode({
           node={firstNode as LeafNodeInternalType<StepNodeDataType>}
           icon={firstNode?.data?.icon}
           name={firstNode?.data?.name}
+          counter={counter}
+          isCollapsedNode
         />
 
         {/* other nodes without content*/}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/floating-add-button.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/floating-add-button.tsx
index d965e0cb1a..5fe8192ffc 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/floating-add-button.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/floating-add-button.tsx
@@ -1,18 +1,24 @@
 import { CSSProperties } from 'react'
 
+import {
+  parallelContainerConfig,
+  serialContainerConfig
+} from '@subjects/views/pipeline-edit/mocks/pipelineExecutionMock'
+
 import { Button, Icon } from '@harnessio/ui/components'
 
-const CONTAINER_WIDTH = '36'
-const CONTAINER_HEIGHT = '36'
+const CONTAINER_WIDTH = '40'
+const CONTAINER_HEIGHT = '40'
 
 export interface FloatingAddButtonProp {
   parentNodeType?: 'leaf' | 'serial' | 'parallel'
   position: 'before' | 'after'
   onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  collapsed?: boolean
 }
 
 export function FloatingAddButton(props: FloatingAddButtonProp) {
-  const { onClick, position, parentNodeType } = props
+  const { onClick, position, parentNodeType, collapsed } = props
 
   const style: CSSProperties = {}
   if (position === 'before' && parentNodeType === 'serial') {
@@ -38,20 +44,31 @@ export function FloatingAddButton(props: FloatingAddButtonProp) {
     style.right = '0px'
   }
 
+  const typeStyleConf =
+    parentNodeType === 'parallel'
+      ? parallelContainerConfig
+      : parentNodeType === 'serial'
+        ? serialContainerConfig
+        : undefined
+  const buttonMarginTopValue =
+    !!typeStyleConf && collapsed === false ? typeStyleConf.paddingTop - typeStyleConf.paddingBottom : 0
+
   return (
     <div className="group absolute flex size-full items-center justify-center" style={style}>
       <Button
-        className="bg-background-2 hidden size-6 self-center rounded-full p-1 group-hover:flex"
-        style={{ alignSelf: 'center' }}
-        variant={'outline'}
-        size={'sm'}
+        className="bg-background-2 hidden h-5 w-5 self-center rounded-full p-0 group-hover:flex"
+        style={{
+          alignSelf: 'center',
+          marginTop: `${buttonMarginTopValue}px`
+        }}
+        variant="outline"
         onMouseDown={e => e.stopPropagation()}
         onClick={e => {
           e.stopPropagation()
           onClick(e)
         }}
       >
-        <Icon name="plus" size={15} />
+        <Icon className="text-icons-3" name="bold-plus" size={10} />
       </Button>
     </div>
   )
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-menu-trigger.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-menu-trigger.tsx
new file mode 100644
index 0000000000..46afbb23bb
--- /dev/null
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-menu-trigger.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react'
+
+import { SerialGroupNodeProps } from '@subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx'
+
+import { Button, Icon } from '@harnessio/ui/components'
+
+export interface NodeMenuTriggerProps {
+  onEllipsisClick?: SerialGroupNodeProps['onEllipsisClick']
+}
+
+export const NodeMenuTrigger: FC<NodeMenuTriggerProps> = ({ onEllipsisClick }) => {
+  if (!onEllipsisClick) return <></>
+
+  return (
+    <Button
+      style={{ top: '10px' }}
+      className="absolute right-2.5 z-10"
+      variant="ghost"
+      size="xs_icon"
+      onMouseDown={e => e.stopPropagation()}
+      onClick={onEllipsisClick}
+    >
+      <Icon className="text-icons-2" name="more-dots-fill" size={12} />
+    </Button>
+  )
+}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-title.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-title.tsx
new file mode 100644
index 0000000000..42faf115e2
--- /dev/null
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-title.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react'
+
+import { SerialGroupNodeProps } from '@subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx'
+
+export interface NodeTitleProps extends Pick<SerialGroupNodeProps, 'name' | 'onHeaderClick'> {
+  counter?: number
+}
+
+export const NodeTitle: FC<NodeTitleProps> = ({ name, onHeaderClick, counter }) => {
+  return (
+    <div className="absolute inset-x-0 top-0 h-0 px-2.5 pt-2.5">
+      <div
+        role="button"
+        tabIndex={0}
+        title={name}
+        className="text-foreground-3 text-14 cursor-pointer truncate px-8 pt-0.5 font-medium leading-snug"
+        onClick={onHeaderClick}
+      >
+        {name} <span className="text-foreground-5">({counter})</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/end-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/end-node.tsx
index 61808a5f29..b3b05115ab 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/end-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/end-node.tsx
@@ -1,8 +1,9 @@
+import { Icon } from '@harnessio/ui/components'
+
 export function EndNode() {
   return (
-    <div className="border-borders-2 bg-background-2 flex size-full items-center justify-center rounded-full border">
-      {/* TODO: replace with icon */}
-      <div className="bg-success size-3"></div>
+    <div className="border-borders-2 bg-background-3 shadow-1 flex size-full items-center justify-center rounded-full border">
+      <Icon name="stop" size={12} className="text-icons-1" />
     </div>
   )
 }
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/parallel-group-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/parallel-group-node.tsx
index b1e3eedb49..8c32a9bb7e 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/parallel-group-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/parallel-group-node.tsx
@@ -1,3 +1,7 @@
+import { NodeMenuTrigger } from '@subjects/views/pipeline-edit/pipeline-nodes/components/node-menu-trigger.tsx'
+import { NodeTitle } from '@subjects/views/pipeline-edit/pipeline-nodes/components/node-title.tsx'
+import { getNestedStepsCount } from '@subjects/views/pipeline-edit/utils/common-step-utils'
+
 import { ParallelNodeInternalType } from '@harnessio/pipeline-graph'
 import { Button, Icon } from '@harnessio/ui/components'
 import { cn } from '@harnessio/ui/views'
@@ -16,6 +20,8 @@ export interface ParallelGroupNodeProps {
   isFirst?: boolean
   parentNodeType?: 'leaf' | 'serial' | 'parallel'
   node: ParallelNodeInternalType<CustomParallelStepGroupContentNodeDataType>
+  hideContextMenu?: boolean
+  hideFloatingButtons?: boolean
   onEllipsisClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onAddInClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onHeaderClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
@@ -35,45 +41,29 @@ export function ParallelGroupNode(props: ParallelGroupNodeProps) {
     onEllipsisClick,
     onAddInClick,
     onHeaderClick,
-    onAddClick
+    onAddClick,
+    hideContextMenu,
+    hideFloatingButtons
   } = props
 
   const nodeData = node.data
-
-  // console.log(name)
+  const counter = getNestedStepsCount(node.children)
 
   return (
     <>
       <ExecutionStatus nodeData={nodeData} />
 
       <div
-        className={cn('absolute inset-0 -z-10 border-dashed rounded-md border', {
-          'border-borders-2': !selected,
-          'border-borders-3': selected
+        className={cn('absolute inset-0 -z-10 rounded-md border bg-background-1', {
+          'border-borders-4': !selected,
+          'border-borders-3': selected,
+          'bg-background-2 border-borders-2': collapsed
         })}
       />
 
-      <div className="absolute inset-x-0 top-0 h-0">
-        <div
-          role="button"
-          tabIndex={0}
-          title={name}
-          className="text-primary-muted h-10 cursor-pointer truncate px-9 pt-2.5"
-          onClick={onHeaderClick}
-        >
-          {name}
-        </div>
-      </div>
+      <NodeTitle name={name} onHeaderClick={onHeaderClick} counter={counter} />
 
-      <Button
-        className="absolute right-2 top-2 z-10"
-        variant="ghost"
-        size="sm_icon"
-        onMouseDown={e => e.stopPropagation()}
-        onClick={onEllipsisClick}
-      >
-        <Icon className="text-icons-2" name="more-dots-fill" size={12} />
-      </Button>
+      {!hideContextMenu && <NodeMenuTrigger onEllipsisClick={onEllipsisClick} />}
 
       {!collapsed && isEmpty && (
         <Button
@@ -87,22 +77,26 @@ export function ParallelGroupNode(props: ParallelGroupNodeProps) {
         </Button>
       )}
 
-      {isFirst && (
+      {!hideFloatingButtons && isFirst && (
         <FloatingAddButton
           parentNodeType={parentNodeType}
           position="before"
           onClick={e => {
             onAddClick?.('before', e)
           }}
+          collapsed={collapsed}
+        />
+      )}
+      {!hideFloatingButtons && (
+        <FloatingAddButton
+          parentNodeType={parentNodeType}
+          position="after"
+          onClick={e => {
+            onAddClick?.('after', e)
+          }}
+          collapsed={collapsed}
         />
       )}
-      <FloatingAddButton
-        parentNodeType={parentNodeType}
-        position="after"
-        onClick={e => {
-          onAddClick?.('after', e)
-        }}
-      />
       {collapsed ? <CollapsedGroupNode node={node} containerNodeType={'parallel'} /> : children}
     </>
   )
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx
index 57c9618f04..e7834a89a3 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx
@@ -1,3 +1,7 @@
+import { NodeMenuTrigger } from '@subjects/views/pipeline-edit/pipeline-nodes/components/node-menu-trigger.tsx'
+import { NodeTitle } from '@subjects/views/pipeline-edit/pipeline-nodes/components/node-title.tsx'
+import { getNestedStepsCount } from '@subjects/views/pipeline-edit/utils/common-step-utils'
+
 import { SerialNodeInternalType } from '@harnessio/pipeline-graph'
 import { Button, Icon } from '@harnessio/ui/components'
 import { cn } from '@harnessio/ui/views'
@@ -16,6 +20,8 @@ export interface SerialGroupNodeProps {
   isFirst?: boolean
   parentNodeType?: 'leaf' | 'serial' | 'parallel'
   node: SerialNodeInternalType<CustomSerialStepGroupContentNodeDataType>
+  hideContextMenu?: boolean
+  hideFloatingButtons?: boolean
   onEllipsisClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onAddInClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onHeaderClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
@@ -35,13 +41,13 @@ export function SerialGroupNode(props: SerialGroupNodeProps) {
     onHeaderClick,
     onAddClick,
     parentNodeType,
-    node
+    node,
+    hideContextMenu,
+    hideFloatingButtons
   } = props
 
-  // console.log(name)
-  // console.log(node)
-
   const nodeData = node.data
+  const counter = getNestedStepsCount(node.children)
 
   return (
     <>
@@ -50,31 +56,14 @@ export function SerialGroupNode(props: SerialGroupNodeProps) {
       <div
         className={cn('absolute inset-0 -z-10 rounded-md border bg-background-1', {
           'border-borders-4': !selected,
-          'border-borders-3': selected
+          'border-borders-3': selected,
+          'bg-background-2 border-borders-2': collapsed
         })}
       />
 
-      <div className="absolute inset-x-0 top-0 h-0">
-        <div
-          role="button"
-          tabIndex={0}
-          title={name}
-          className="text-primary-muted h-10 cursor-pointer truncate px-9 pt-2.5"
-          onClick={onHeaderClick}
-        >
-          {name}
-        </div>
-      </div>
+      <NodeTitle name={name} onHeaderClick={onHeaderClick} counter={counter} />
 
-      <Button
-        className="absolute right-2 top-2 z-10"
-        variant="ghost"
-        size="sm_icon"
-        onMouseDown={e => e.stopPropagation()}
-        onClick={onEllipsisClick}
-      >
-        <Icon className="text-icons-2" name="more-dots-fill" size={12} />
-      </Button>
+      {!hideContextMenu && <NodeMenuTrigger onEllipsisClick={onEllipsisClick} />}
 
       {!collapsed && isEmpty && (
         <Button
@@ -88,22 +77,26 @@ export function SerialGroupNode(props: SerialGroupNodeProps) {
         </Button>
       )}
 
-      {isFirst && (
+      {!hideFloatingButtons && isFirst && (
         <FloatingAddButton
           parentNodeType={parentNodeType}
           position="before"
           onClick={e => {
             onAddClick?.('before', e)
           }}
+          collapsed={collapsed}
+        />
+      )}
+      {!hideFloatingButtons && (
+        <FloatingAddButton
+          parentNodeType={parentNodeType}
+          position="after"
+          onClick={e => {
+            onAddClick?.('after', e)
+          }}
+          collapsed={collapsed}
         />
       )}
-      <FloatingAddButton
-        parentNodeType={parentNodeType}
-        position="after"
-        onClick={e => {
-          onAddClick?.('after', e)
-        }}
-      />
       {collapsed ? <CollapsedGroupNode node={node} containerNodeType={'serial'} /> : children}
     </>
   )
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/stage-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/stage-node.tsx
index 1a26d6174f..26fcb7bc92 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/stage-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/stage-node.tsx
@@ -1,3 +1,7 @@
+import { NodeMenuTrigger } from '@subjects/views/pipeline-edit/pipeline-nodes/components/node-menu-trigger.tsx'
+import { NodeTitle } from '@subjects/views/pipeline-edit/pipeline-nodes/components/node-title.tsx'
+import { getNestedStepsCount } from '@subjects/views/pipeline-edit/utils/common-step-utils'
+
 import { SerialNodeInternalType } from '@harnessio/pipeline-graph'
 import { Button, Icon } from '@harnessio/ui/components'
 import { cn } from '@harnessio/ui/views'
@@ -16,6 +20,8 @@ export interface StageNodeProps {
   isFirst?: boolean
   parentNodeType?: 'leaf' | 'serial' | 'parallel'
   node: SerialNodeInternalType<CustomSerialStageGroupContentNodeDataType>
+  hideContextMenu?: boolean
+  hideFloatingButtons?: boolean
   onEllipsisClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onAddInClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onHeaderClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
@@ -35,10 +41,14 @@ export function StageNode(props: StageNodeProps) {
     onHeaderClick,
     onAddClick,
     parentNodeType,
-    node
+    node,
+    hideContextMenu,
+    hideFloatingButtons
   } = props
 
   const nodeData = node.data
+  const counter = getNestedStepsCount(node.children)
+
   return (
     <>
       <ExecutionStatus nodeData={nodeData} />
@@ -50,29 +60,9 @@ export function StageNode(props: StageNodeProps) {
         })}
       />
 
-      <div className="absolute inset-x-0 top-0 h-0">
-        <div
-          role="button"
-          tabIndex={0}
-          title={name}
-          className="text-primary-muted h-10 cursor-pointer truncate px-9 pt-2.5"
-          onClick={onHeaderClick}
-        >
-          {name}
-        </div>
-      </div>
+      <NodeTitle name={name} onHeaderClick={onHeaderClick} counter={counter} />
 
-      {onEllipsisClick && (
-        <Button
-          className="absolute right-2 top-2 z-10"
-          variant="ghost"
-          size="sm_icon"
-          onMouseDown={e => e.stopPropagation()}
-          onClick={onEllipsisClick}
-        >
-          <Icon className="text-icons-2" name="more-dots-fill" size={12} />
-        </Button>
-      )}
+      {!hideContextMenu && <NodeMenuTrigger onEllipsisClick={onEllipsisClick} />}
 
       {!collapsed && isEmpty && (
         <Button
@@ -86,22 +76,26 @@ export function StageNode(props: StageNodeProps) {
         </Button>
       )}
 
-      {isFirst && (
+      {!hideFloatingButtons && isFirst && (
         <FloatingAddButton
           parentNodeType={parentNodeType}
           position="before"
           onClick={e => {
             onAddClick?.('before', e)
           }}
+          collapsed={collapsed}
+        />
+      )}
+      {!hideFloatingButtons && (
+        <FloatingAddButton
+          parentNodeType={parentNodeType}
+          position="after"
+          onClick={e => {
+            onAddClick?.('after', e)
+          }}
+          collapsed={collapsed}
         />
       )}
-      <FloatingAddButton
-        parentNodeType={parentNodeType}
-        position="after"
-        onClick={e => {
-          onAddClick?.('after', e)
-        }}
-      />
 
       {collapsed ? <CollapsedGroupNode node={node} containerNodeType={'serial'} /> : children}
     </>
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/start-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/start-node.tsx
index 9d83e658e0..42d3a49f02 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/start-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/start-node.tsx
@@ -2,8 +2,8 @@ import { Icon } from '@harnessio/ui/components'
 
 export function StartNode() {
   return (
-    <div className="border-borders-2 bg-background-2 flex size-full items-center justify-center rounded-full border">
-      <Icon name="play" className="text-success" />
+    <div className="border-borders-2 bg-background-3 shadow-1 flex size-full items-center justify-center rounded-full border">
+      <Icon name="play" className="text-icons-success" />
     </div>
   )
 }
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/step-node.tsx b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/step-node.tsx
index 8e69707471..d483ca46e5 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/step-node.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/step-node.tsx
@@ -1,4 +1,3 @@
-import { Button, Icon } from '@harnessio/ui/components'
 import { cn } from '@harnessio/ui/views'
 
 import './step-node.css'
@@ -7,8 +6,8 @@ import { LeafNodeInternalType } from '@harnessio/pipeline-graph'
 
 import { StepNodeDataType } from '../nodes/custom-step-node'
 import { ExecutionStatus } from './components/execution-status'
-// import { createRoundedRectPath } from '../utils/utils'
 import { FloatingAddButton } from './components/floating-add-button'
+import { NodeMenuTrigger } from './components/node-menu-trigger'
 import { WarningLabel } from './components/warning-label'
 
 export interface StepNodeProps {
@@ -18,13 +17,31 @@ export interface StepNodeProps {
   isFirst?: boolean
   parentNodeType?: 'leaf' | 'serial' | 'parallel'
   node: LeafNodeInternalType<StepNodeDataType>
+  hideContextMenu?: boolean
+  hideFloatingButtons?: boolean
   onEllipsisClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onAddClick?: (position: 'before' | 'after', e: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  counter?: number
+  isCollapsedNode?: boolean
 }
 
 export function StepNode(props: StepNodeProps) {
-  const { node, name, icon, selected, onEllipsisClick, onClick, onAddClick, isFirst, parentNodeType } = props
+  const {
+    node,
+    name,
+    icon,
+    selected,
+    onEllipsisClick,
+    onClick,
+    onAddClick,
+    isFirst,
+    parentNodeType,
+    counter,
+    isCollapsedNode,
+    hideContextMenu,
+    hideFloatingButtons
+  } = props
 
   const nodeData = node.data
 
@@ -41,7 +58,7 @@ export function StepNode(props: StepNodeProps) {
           role="button"
           tabIndex={0}
           className={cn(
-            'flex flex-col justify-end gap-y-2 box size-full rounded-md border bg-background-8 cursor-pointer px-2.5 pt-2.5 pb-3 shadow-1',
+            'flex flex-col justify-end gap-y-2 box size-full rounded-md border bg-graph-gradient-1 cursor-pointer px-2.5 pt-2.5 pb-3 shadow-1',
             {
               'border-borders-2': !selected,
               'border-borders-3': selected,
@@ -53,19 +70,9 @@ export function StepNode(props: StepNodeProps) {
           )}
           onClick={onClick}
         >
-          <div className="bg-graph-gradient-1 pointer-events-none absolute left-0 top-0 size-full" />
-          {onEllipsisClick && (
-            <Button
-              className="absolute right-2 top-2"
-              variant="ghost"
-              size="sm_icon"
-              onMouseDown={e => e.stopPropagation()}
-              onClick={onEllipsisClick}
-            >
-              <Icon className="text-icons-2" name="more-dots-fill" size={12} />
-            </Button>
-          )}
-          {isFirst && (
+          {!hideContextMenu && <NodeMenuTrigger onEllipsisClick={onEllipsisClick} />}
+
+          {!hideFloatingButtons && isFirst && !isCollapsedNode && (
             <FloatingAddButton
               parentNodeType={parentNodeType}
               position="before"
@@ -74,15 +81,20 @@ export function StepNode(props: StepNodeProps) {
               }}
             />
           )}
-          <FloatingAddButton
-            parentNodeType={parentNodeType}
-            position="after"
-            onClick={e => {
-              onAddClick?.('after', e)
-            }}
-          />
+          {!hideFloatingButtons && !isCollapsedNode && (
+            <FloatingAddButton
+              parentNodeType={parentNodeType}
+              position="after"
+              onClick={e => {
+                onAddClick?.('after', e)
+              }}
+            />
+          )}
           {!!icon && <div className="mb-0.5">{icon}</div>}
-          <span className="text-foreground-1 text-14 line-clamp-2 leading-snug">{name}</span>
+          <span className="text-foreground-1 text-14 line-clamp-2 leading-snug">
+            {name}
+            {!!counter && <span className="text-foreground-5"> ({counter})</span>}
+          </span>
           {nodeData.warningMessage && <WarningLabel>{nodeData.warningMessage}</WarningLabel>}
         </div>
       </div>
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/types/common.ts b/apps/design-system/src/subjects/views/pipeline-edit/types/common.ts
new file mode 100644
index 0000000000..354de2ecd4
--- /dev/null
+++ b/apps/design-system/src/subjects/views/pipeline-edit/types/common.ts
@@ -0,0 +1,4 @@
+export interface GlobalData {
+  hideContextMenu?: boolean
+  hideFloatingButtons?: boolean
+}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/utils/common-step-utils.ts b/apps/design-system/src/subjects/views/pipeline-edit/utils/common-step-utils.ts
index da9f885f55..838f17a414 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/utils/common-step-utils.ts
+++ b/apps/design-system/src/subjects/views/pipeline-edit/utils/common-step-utils.ts
@@ -1,3 +1,6 @@
+import { AnyNodeInternal } from '@harnessio/pipeline-graph'
+import { YamlEntityType } from '@harnessio/ui/views'
+
 export const getIsRunStep = (step: Record<string, any>) => typeof step === 'object' && 'run' in step
 
 export const getIsRunTestStep = (step: Record<string, any>) => typeof step === 'object' && 'run-test' in step
@@ -7,3 +10,21 @@ export const getIsBackgroundStep = (step: Record<string, any>) => typeof step ==
 export const getIsActionStep = (step: Record<string, any>) => typeof step === 'object' && 'action' in step
 
 export const getIsTemplateStep = (step: Record<string, any>) => typeof step === 'object' && 'template' in step
+
+export const getNestedStepsCount = (children?: AnyNodeInternal[]): number => {
+  let count = 0
+
+  if (!children) return 0
+
+  for (const child of children) {
+    if (child.type === YamlEntityType.Step) {
+      count += 1
+    }
+
+    if ('children' in child && Array.isArray(child.children)) {
+      count += getNestedStepsCount(child.children)
+    }
+  }
+
+  return count
+}
diff --git a/apps/design-system/src/subjects/views/pipeline-edit/utils/step-icon-utils.tsx b/apps/design-system/src/subjects/views/pipeline-edit/utils/step-icon-utils.tsx
index 746361a46d..224d3c7d6c 100644
--- a/apps/design-system/src/subjects/views/pipeline-edit/utils/step-icon-utils.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-edit/utils/step-icon-utils.tsx
@@ -20,10 +20,10 @@ const getIconNameBasedOnStep = (step: any): IconProps['name'] => {
   if (getIsTemplateStep(step)) {
     switch (step.template.uses) {
       case 'slack':
-        return 'rocket'
+        return 'slack'
         break
       case 'docker':
-        return 'star'
+        return 'docker'
         break
     }
   }
diff --git a/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph-minimal.tsx b/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph-minimal.tsx
index 6be0e86026..c1e5bb613a 100644
--- a/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph-minimal.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph-minimal.tsx
@@ -18,6 +18,10 @@ import { Icon, Text } from '@harnessio/ui/components'
 
 import '@harnessio/pipeline-graph/dist/index.css'
 
+import { useState } from 'react'
+
+import { VisualYamlToggle, type VisualYamlValue } from '@harnessio/ui/views'
+
 // *****************************************************
 // 2. Define content nodes types
 // *****************************************************
@@ -219,9 +223,13 @@ const data: AnyContainerNodeType[] = [
 ]
 
 const PipelineGraphMinimalWrapper = () => {
+  const [view, setView] = useState<VisualYamlValue>('visual')
   return (
     <CanvasProvider>
-      <PipelineGraph data={data} nodes={nodes} config={{ edgeClassName: 'stroke-borders-2' }} />
+      <div className="flex px-6 pt-3">
+        <VisualYamlToggle view={view} setView={setView} isYamlValid={true} />
+      </div>
+      <PipelineGraph data={data} nodes={nodes} />
     </CanvasProvider>
   )
 }
diff --git a/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph.tsx b/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph.tsx
index f07e07f608..9172692ddf 100644
--- a/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph.tsx
+++ b/apps/design-system/src/subjects/views/pipeline-graph/pipeline-graph.tsx
@@ -289,7 +289,7 @@ const PipelineGraphWrapper = () => {
   return (
     <>
       <CanvasProvider>
-        <PipelineGraph data={data} nodes={nodes} config={{ edgeClassName: 'stroke-borders-2' }} />
+        <PipelineGraph data={data} nodes={nodes} />
       </CanvasProvider>
       <PipelineStudioFooter
         problems={{ error: 0, warning: 3, info: 2 }}
diff --git a/apps/gitness/package.json b/apps/gitness/package.json
index 4dfbc30a66..e2b9ad9e84 100644
--- a/apps/gitness/package.json
+++ b/apps/gitness/package.json
@@ -40,12 +40,12 @@
     "jotai": "^2.6.3",
     "lang-map": "^0.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-yaml": "^4.0.4",
     "monaco-editor": "^0.40.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
+    "monaco-yaml": "^4.0.4",
     "pluralize": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.28.0",
     "react-i18next": "^15.1.1",
     "react-router-dom": "^6.26.0",
@@ -62,8 +62,8 @@
     "@types/event-source-polyfill": "^1.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/pluralize": "^0.0.33",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/coverage-istanbul": "^2.1.8",
     "css-loader": "^7.1.2",
diff --git a/apps/gitness/src/main.tsx b/apps/gitness/src/main.tsx
index 0b4149b3ea..7d4dd61780 100644
--- a/apps/gitness/src/main.tsx
+++ b/apps/gitness/src/main.tsx
@@ -1,5 +1,8 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-render(<App />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container!)
+
+root.render(<App />)
diff --git a/apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/pipeline-studio-graph-view.tsx b/apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/pipeline-studio-graph-view.tsx
index 219a7bd575..0e75ceba7d 100644
--- a/apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/pipeline-studio-graph-view.tsx
+++ b/apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/pipeline-studio-graph-view.tsx
@@ -129,7 +129,7 @@ export const PipelineStudioGraphView = (): React.ReactElement => {
     <div className="relative flex size-full" style={{ width: 'calc(100vw - 220px)' }}>
       <NodeContextProvider>
         <CanvasProvider>
-          <PipelineGraph data={data} nodes={nodes} config={{ edgeClassName: 'stroke-borders-2' }} />
+          <PipelineGraph data={data} nodes={nodes} />
           <CanvasControls />
           <CommonNodeContextMenu />
         </CanvasProvider>
diff --git a/apps/portal/package.json b/apps/portal/package.json
index 152c07c95b..214491cf73 100644
--- a/apps/portal/package.json
+++ b/apps/portal/package.json
@@ -25,8 +25,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.407.0",
     "prism-react-renderer": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-live": "^4.1.8",
     "react-router-dom": "^6.26.0",
     "sharp": "^0.32.5",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@types/react": "^17.0.3",
+    "@types/react": "^18.3.18",
     "lint-staged": "^15.2.9",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
diff --git a/package.json b/package.json
index 065efc8932..734fe0be62 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,7 @@
     "node": ">=18.17.1"
   },
   "license": "Apache-2.0",
-  "resolutions": {
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
+  
   "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903",
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
diff --git a/packages/canary/package.json b/packages/canary/package.json
index 1d1af0f7bb..e5ef9939d2 100644
--- a/packages/canary/package.json
+++ b/packages/canary/package.json
@@ -79,9 +79,9 @@
     "embla-carousel-react": "^8.1.5",
     "input-otp": "^1.2.4",
     "next-themes": "^0.3.0",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.28.0",
     "react-resizable-panels": "^2.0.19",
     "sonner": "^1.5.0",
@@ -95,8 +95,8 @@
     "@types/jest": "^27.5.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.14.9",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.1",
diff --git a/packages/filters/package.json b/packages/filters/package.json
index 62a78b6a24..6e07c0da82 100644
--- a/packages/filters/package.json
+++ b/packages/filters/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@harnessio/filters",
-  "version": "1.0.0",
+  "version": "1.0.0-react18.alpha.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -24,13 +24,12 @@
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",
-    "react-dom": ">=17.0.0 <19.0.0",
-    "react-router-dom": ">=5.0.0 <7.0.0"
+    "react-dom": ">=17.0.0 <19.0.0"
   },
   "devDependencies": {
     "@types/node": "^16.18.84",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "dts-bundle-generator": "^6.4.0",
     "eslint": "^8.57.1",
@@ -38,6 +37,7 @@
     "jest": "^29.7.0",
     "lint-staged": "^15.2.9",
     "npm-run-all": "^4.1.5",
+    "react-router-dom": "^6.26.0",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",
     "vite": "^6.0.3",
diff --git a/packages/forms/package.json b/packages/forms/package.json
index c58e3c864e..f9114b5f14 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@harnessio/forms",
-  "version": "0.0.1",
+  "version": "0.0.1-react18.alpha.1",
   "description": "Harness Forms Library",
   "scripts": {
     "dev": "run-p build:watch",
@@ -48,8 +48,8 @@
     "@types/jest": "^27.5.2",
     "@types/lodash-es": "^4.17.3",
     "@types/node": "^16.18.84",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/uuid": "^8.3.0",
     "@types/yup": "^0.29.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
diff --git a/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx b/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx
index b7742027b9..16f4e640be 100644
--- a/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx
+++ b/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx
@@ -2,7 +2,7 @@ import { useCanvasContext } from '../../../src/context/canvas-provider'
 import { CanvasButton } from './CanvasButton'
 
 export function CanvasControls() {
-  const { increase, decrease, reset } = useCanvasContext()
+  const { increase, decrease, reset, fit } = useCanvasContext()
 
   return (
     <div
@@ -17,7 +17,8 @@ export function CanvasControls() {
     >
       <CanvasButton onClick={() => increase()}>+</CanvasButton>
       <CanvasButton onClick={() => decrease()}>-</CanvasButton>
-      <CanvasButton onClick={() => reset()}>[]</CanvasButton>
+      <CanvasButton onClick={() => reset()}>RES</CanvasButton>
+      <CanvasButton onClick={() => fit()}>FIT</CanvasButton>
     </div>
   )
 }
diff --git a/packages/pipeline-graph/package.json b/packages/pipeline-graph/package.json
index 36e4adf7ea..a6e84774ba 100644
--- a/packages/pipeline-graph/package.json
+++ b/packages/pipeline-graph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@harnessio/pipeline-graph",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-react18.alpha.6",
   "private": false,
   "author": "Harness Inc.",
   "license": "Apache-2.0",
@@ -14,19 +14,18 @@
   "scripts": {
     "examples": "vite dev --config vite.config.dev.ts",
     "dev": "vite build --watch",
-    "build": "vite build"
+    "build": "vite build",
+    "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.10.1",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "vite": "^6.0.2",
     "vite-plugin-dts": "^4.3.0",
diff --git a/packages/pipeline-graph/src/components/components/collapse.tsx b/packages/pipeline-graph/src/components/components/collapse.tsx
index f325bd7e22..49b7190124 100644
--- a/packages/pipeline-graph/src/components/components/collapse.tsx
+++ b/packages/pipeline-graph/src/components/components/collapse.tsx
@@ -1,6 +1,19 @@
-// TODO: move this component outside of library
-export default function CollapseButton(props: { collapsed: boolean; onToggle?: () => void }) {
-  const { collapsed, onToggle } = props
+import {useContainerNodeContext} from "../../context/container-node-provider";
+
+export interface CollapseButtonProps {
+    collapsed: boolean
+    onToggle?: () => void
+}
+
+export default function CollapseButton({
+   collapsed,
+   onToggle,
+}: CollapseButtonProps) {
+  const { collapseButtonComponent } = useContainerNodeContext()
+
+  if (!!collapseButtonComponent) {
+    return collapseButtonComponent({ collapsed, onToggle })
+  }
 
   return (
     <span
diff --git a/packages/pipeline-graph/src/context/canvas-provider.tsx b/packages/pipeline-graph/src/context/canvas-provider.tsx
index c480002607..d0d19aa4be 100644
--- a/packages/pipeline-graph/src/context/canvas-provider.tsx
+++ b/packages/pipeline-graph/src/context/canvas-provider.tsx
@@ -19,7 +19,7 @@ interface CanvasContextProps {
   canvasTransformRef: React.MutableRefObject<CanvasTransform>
   setTargetEl: (el: HTMLDivElement) => void
   setCanvasTransform: (
-    canvasTransform: CanvasTransform & { rootContainer?: HTMLDivElement; isInitial: boolean }
+    canvasTransform: CanvasTransform & { rootContainer?: HTMLDivElement; isInitial?: boolean }
   ) => void
   fit: () => void
   reset: () => void
@@ -75,28 +75,34 @@ export const CanvasProvider = ({ children, config: configFromProps }: CanvasProv
     targetElRef.current = targetEl
   }, [])
 
-  const scaleInc = useCallback((scaleDiff: number) => {
-    const rootContainerEl = targetElRef?.current
-    const parentEl = rootContainerEl?.parentElement
+  const scaleInc = useCallback((scaleIncValue: number) => {
+    const targetEl = targetElRef?.current
+    const parentEl = targetEl?.parentElement
 
-    if (!rootContainerEl || !parentEl) return
+    if (!targetEl || !parentEl) return
 
-    let newScale = canvasTransformRef.current.scale + scaleDiff
+    let newScale = canvasTransformRef.current.scale + scaleIncValue
     newScale = Math.max(newScale, config.minScale)
+    newScale = Math.min(newScale, config.maxScale)
 
-    const rect = parentEl.getBoundingClientRect()
+    const scaleDiff = newScale / canvasTransformRef.current.scale
 
-    let originX = rect.width / 2
-    let originY = rect.height / 2
+    const parentElRect = parentEl.getBoundingClientRect()
+    const targetElRect = targetEl.getBoundingClientRect()
 
-    const currentRect = rootContainerEl.getBoundingClientRect()
-    originX -= currentRect.left
-    originY -= currentRect.top
+    const centerX = parentElRect.left + parentElRect.width / 2
+    const centerY = parentElRect.top + parentElRect.height / 2
+
+    let originX = centerX - targetElRect.left
+    let originY = centerY - targetElRect.top
 
     const newTransform = calculateTransform({
-      scaleDiff: newScale / canvasTransformRef.current.scale,
-      originX: originX,
-      originY: originY
+      scaleDiff,
+      originX,
+      originY,
+      currentScale: canvasTransformRef.current.scale,
+      currentTranslateX: canvasTransformRef.current.translateX,
+      currentTranslateY: canvasTransformRef.current.translateY
     })
 
     setCanvasTransform(newTransform)
@@ -116,20 +122,22 @@ export const CanvasProvider = ({ children, config: configFromProps }: CanvasProv
       translateX: initialTransformRef.current.translateX,
       translateY: initialTransformRef.current.translateY
     })
-  }, [scaleInc])
+  }, [setCanvasTransform])
 
   const fit = useCallback(() => {
-    const rootContainerEl = targetElRef?.current
-    const parentEl = rootContainerEl?.parentElement
-    const nodesContainerEl = rootContainerEl?.getElementsByClassName(
-      'PipelineGraph-NodesContainer'
-    )[0] as HTMLDivElement
-    const { width: parentWidth, height: parentHeight } = parentEl?.getBoundingClientRect() ?? new DOMRect()
-    const { width: graphWidth, height: graphHeight } = nodesContainerEl?.getBoundingClientRect() ?? new DOMRect()
+    const targetEl = targetElRef?.current
+    const parentEl = targetEl?.parentElement
+    const nodesContainerEl = targetEl?.getElementsByClassName('PipelineGraph-NodesContainer')[0] as
+      | HTMLDivElement
+      | undefined
+
+    if (!parentEl || !nodesContainerEl) return
+
+    const { width: parentWidth, height: parentHeight } = parentEl.getBoundingClientRect()
+    const { width: graphWidth, height: graphHeight } = nodesContainerEl.getBoundingClientRect()
 
     let scaleH = ((parentHeight - config.paddingForFit * 2) / graphHeight) * canvasTransformRef.current.scale
     let scaleW = ((parentWidth - config.paddingForFit * 2) / graphWidth) * canvasTransformRef.current.scale
-
     scaleH = Math.max(scaleH, config.minScale)
     scaleW = Math.max(scaleW, config.minScale)
 
diff --git a/packages/pipeline-graph/src/context/container-node-provider.tsx b/packages/pipeline-graph/src/context/container-node-provider.tsx
index d7b36b952c..c08c1db211 100644
--- a/packages/pipeline-graph/src/context/container-node-provider.tsx
+++ b/packages/pipeline-graph/src/context/container-node-provider.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext, useMemo } from 'react'
 
 import { ParallelContainerConfig, SerialContainerConfig } from '../types/container-node'
+import {CollapseButtonProps} from "../components/components/collapse";
 
 export const defaultSerialContainerConfig = {
   paddingLeft: 42,
@@ -22,6 +23,7 @@ interface ContainerNodeContextProps {
   serialContainerConfig: SerialContainerConfig
   parallelContainerConfig: ParallelContainerConfig
   portComponent?: (props: { side: 'left' | 'right'; id?: string; adjustment?: number }) => JSX.Element
+  collapseButtonComponent?: (props: CollapseButtonProps) => JSX.Element
 }
 
 const ContainerNodeContext = createContext<ContainerNodeContextProps>({
@@ -33,12 +35,14 @@ export interface ContainerNodeProviderProps {
   serialContainerConfig?: Partial<SerialContainerConfig>
   parallelContainerConfig?: Partial<ParallelContainerConfig>
   portComponent?: (props: { side: 'left' | 'right'; id?: string; adjustment?: number }) => JSX.Element
+  collapseButtonComponent?: (props: CollapseButtonProps) => JSX.Element
 }
 
 const ContainerNodeProvider = ({
   serialContainerConfig,
   parallelContainerConfig,
   portComponent,
+  collapseButtonComponent,
   children
 }: React.PropsWithChildren<ContainerNodeProviderProps>) => {
   const serialConfig: SerialContainerConfig = useMemo(() => {
@@ -58,7 +62,8 @@ const ContainerNodeProvider = ({
       value={{
         serialContainerConfig: serialConfig,
         parallelContainerConfig: parallelConfig,
-        portComponent
+        portComponent,
+        collapseButtonComponent
       }}
     >
       {children}
diff --git a/packages/pipeline-graph/src/index.ts b/packages/pipeline-graph/src/index.ts
index f2ede42e34..7823f9159b 100644
--- a/packages/pipeline-graph/src/index.ts
+++ b/packages/pipeline-graph/src/index.ts
@@ -4,3 +4,4 @@ export * from './types/nodes-internal'
 
 export * from './types/node-content'
 export * from './context/canvas-provider'
+export { type CollapseButtonProps } from './components/components/collapse'
diff --git a/packages/pipeline-graph/src/pipeline-graph-internal.tsx b/packages/pipeline-graph/src/pipeline-graph-internal.tsx
index f95a47f884..b010a6fb8b 100644
--- a/packages/pipeline-graph/src/pipeline-graph-internal.tsx
+++ b/packages/pipeline-graph/src/pipeline-graph-internal.tsx
@@ -14,7 +14,6 @@ export interface PipelineGraphInternalProps {
   data: AnyContainerNodeType[]
   customCreateSVGPath?: CreateSVGPathType
   config?: {
-    edgeClassName?: string
     leftGap?: number
     mode?: 'Edit' | 'Execution'
   }
diff --git a/packages/pipeline-graph/src/pipeline-graph.tsx b/packages/pipeline-graph/src/pipeline-graph.tsx
index 6aaf1f2af1..bf1d4bd839 100644
--- a/packages/pipeline-graph/src/pipeline-graph.tsx
+++ b/packages/pipeline-graph/src/pipeline-graph.tsx
@@ -8,12 +8,13 @@ import './pipeline-graph.css'
 import ContainerNodeProvider, { ContainerNodeProviderProps } from './context/container-node-provider'
 import { ParallelContainerConfig, SerialContainerConfig } from './types/container-node'
 
-export interface PipelineGraphProps extends PipelineGraphInternalProps {
-  nodes: NodeContent[]
-  serialContainerConfig?: Partial<SerialContainerConfig>
-  parallelContainerConfig?: Partial<ParallelContainerConfig>
-  portComponent?: ContainerNodeProviderProps['portComponent']
-}
+export interface PipelineGraphProps extends
+    PipelineGraphInternalProps,
+    Pick<ContainerNodeProviderProps, 'portComponent' | 'collapseButtonComponent'> {
+      nodes: NodeContent[]
+      serialContainerConfig?: Partial<SerialContainerConfig>
+      parallelContainerConfig?: Partial<ParallelContainerConfig>
+  }
 
 export function PipelineGraph(props: PipelineGraphProps) {
   const {
@@ -24,7 +25,8 @@ export function PipelineGraph(props: PipelineGraphProps) {
     parallelContainerConfig,
     customCreateSVGPath,
     edgesConfig,
-    portComponent
+    portComponent,
+    collapseButtonComponent
   } = props
 
   return (
@@ -33,6 +35,7 @@ export function PipelineGraph(props: PipelineGraphProps) {
         serialContainerConfig={serialContainerConfig}
         parallelContainerConfig={parallelContainerConfig}
         portComponent={portComponent}
+        collapseButtonComponent={collapseButtonComponent}
       >
         <Canvas>
           <PipelineGraphInternal
diff --git a/packages/pipeline-graph/src/render/render-node.tsx b/packages/pipeline-graph/src/render/render-node.tsx
index d34d3766a9..8f71bc30fc 100644
--- a/packages/pipeline-graph/src/render/render-node.tsx
+++ b/packages/pipeline-graph/src/render/render-node.tsx
@@ -8,13 +8,13 @@ export function renderNode(props: ContainerNodeProps) {
 
   switch (node.containerType) {
     case 'serial': {
-      return <SerialNodeContainer node={node} {...rest} parentNode={parentNode} />
+      return <SerialNodeContainer key={node.type + '-' + node.path} node={node} {...rest} parentNode={parentNode} />
     }
     case 'parallel': {
-      return <ParallelNodeContainer node={node} {...rest} parentNode={parentNode} />
+      return <ParallelNodeContainer key={node.type + '-' + node.path} node={node} {...rest} parentNode={parentNode} />
     }
     case 'leaf': {
-      return <LeafNodeContainer node={node} {...rest} parentNode={parentNode} />
+      return <LeafNodeContainer key={node.type + '-' + node.path} node={node} {...rest} parentNode={parentNode} />
     }
   }
 }
diff --git a/packages/pipeline-graph/src/render/render-svg-lines.ts b/packages/pipeline-graph/src/render/render-svg-lines.ts
index 012a3d3202..b2fa585b77 100644
--- a/packages/pipeline-graph/src/render/render-svg-lines.ts
+++ b/packages/pipeline-graph/src/render/render-svg-lines.ts
@@ -120,7 +120,6 @@ function getPath({
   serial?: {
     position: 'left' | 'right'
   }
-  edgeClassName?: string
   targetNode?: AnyNodeInternal
   edgesConfig: {
     radius: number
diff --git a/packages/ui/package.json b/packages/ui/package.json
index bf53c14198..9e4d6afa11 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harnessio/ui",
   "description": "Harness Canary UI component library",
-  "version": "0.0.1-alpha.20",
+  "version": "0.0.1-react18.alpha.18",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -119,19 +119,19 @@
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "yaml": "^2.7.0",
     "vaul": "^1.1.2",
+    "yaml": "^2.7.0",
     "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "react": ">=17"
+    "react": ">=18"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.9.0",
-    "@types/react": "^17.0.3",
+    "@types/react": "^18.3.18",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/coverage-istanbul": "^2.1.8",
     "@vitest/ui": "^2.1.8",
diff --git a/packages/ui/src/components/chat/chat-diff-viewer.tsx b/packages/ui/src/components/chat/chat-diff-viewer.tsx
index f548a7d209..cded6a1ac3 100644
--- a/packages/ui/src/components/chat/chat-diff-viewer.tsx
+++ b/packages/ui/src/components/chat/chat-diff-viewer.tsx
@@ -67,7 +67,9 @@ export const ChatDiffViewer = ({ data, mode = 4, lang = 'go', fileName }: ChatDi
   return (
     <div className="border-borders-1 bg-background-1 mr-7 mt-3 flex flex-col rounded-md border">
       {fileName && (
-        <span className="bg-background-2 text-foreground-1 text-14 rounded-[inherit] p-4 font-medium">{fileName}</span>
+        <span className="bg-background-2 text-14 text-foreground-1 border-borders-1 rounded-[inherit] border-b p-4 font-medium">
+          {fileName}
+        </span>
       )}
       {diffFileInstance && (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx b/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx
index 9783a41d63..af7e71a27e 100644
--- a/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx
+++ b/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx
@@ -4,7 +4,7 @@ import { Chat } from '@/components'
 
 export const ChatEmptyPreviewWrapper: FC = () => {
   return (
-    <div className="border-borders-4 h-[calc(100vh-100px)] border-r">
+    <div className="h-[calc(100vh-100px)] border-r border-borders-4">
       <Chat.Root>
         <Chat.Body>
           <Chat.EmptyState />
diff --git a/packages/ui/src/components/chat/chat-preview-wrapper.tsx b/packages/ui/src/components/chat/chat-preview-wrapper.tsx
index a8aa25780d..6291c9232c 100644
--- a/packages/ui/src/components/chat/chat-preview-wrapper.tsx
+++ b/packages/ui/src/components/chat/chat-preview-wrapper.tsx
@@ -21,6 +21,7 @@ export const ChatPreviewWrapper: FC = () => {
   return (
     <div className="h-[calc(100vh-100px)] border-r border-borders-4">
       <Chat.Root>
+        <Chat.Header onClose={() => {}} />
         <Chat.Body>
           <Chat.Message>
             Hey Olivia! I&#39;ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix
diff --git a/packages/ui/src/components/chat/chat.tsx b/packages/ui/src/components/chat/chat.tsx
index 13fe30ba73..11eb340b5d 100644
--- a/packages/ui/src/components/chat/chat.tsx
+++ b/packages/ui/src/components/chat/chat.tsx
@@ -4,22 +4,23 @@ import { Button, Icon, Input } from '@/components'
 import ChatAvatarIcon from '@/icons/chat-avatar.svg'
 import { cn } from '@utils/cn'
 
-const Root: FC = ({ children }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
+const Root: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
+  return <div className="flex size-full max-w-[460px] flex-col bg-background-1">{children}</div>
+}
+
+const Header: FC<{ onClose: () => void }> = ({ onClose }) => {
   return (
-    <div className="flex size-full max-w-[460px] flex-col bg-background-1">
-      <div className="sticky top-0 flex items-center justify-between bg-background-1 px-6 py-4">
-        <p className="text-16 font-medium text-foreground-1">AI Assistant</p>
-        <Button size="icon" variant="custom" className="-mr-2 text-icons-4 hover:text-icons-2">
-          <Icon name="close" size={16} />
-          <span className="sr-only">Close</span>
-        </Button>
-      </div>
-      {children}
+    <div className="sticky top-0 flex items-center justify-between bg-background-1 px-6 py-4">
+      <p className="text-16 font-medium text-foreground-1">AI Assistant</p>
+      <Button size="icon" variant="custom" className="-mr-2 text-icons-4 hover:text-icons-2" onClick={onClose}>
+        <Icon name="close" size={16} />
+        <span className="sr-only">Close</span>
+      </Button>
     </div>
   )
 }
 
-const Body: FC = ({ children }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
+const Body: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <div className="scrollbar-hidden flex flex-1 flex-col gap-y-7 overflow-y-auto overflow-x-hidden px-6 py-2">
       {children}
@@ -27,7 +28,7 @@ const Body: FC = ({ children }: PropsWithChildren<HTMLAttributes<HTMLElement>>)
   )
 }
 
-const Footer: FC = ({ children }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
+const Footer: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return <div className="sticky bottom-0 bg-background-1 px-6 py-3">{children}</div>
 }
 
@@ -64,7 +65,7 @@ const Message: FC<MessageProps> = ({ self, avatar, actions, children }) => {
   )
 }
 
-const CodeBlock: FC<{ className?: string }> = ({ children, className }) => {
+const CodeBlock: FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
   return (
     <code
       className={cn(
@@ -194,6 +195,7 @@ const InputField: FC<InputFieldProps> = ({
 export const Chat = {
   Root,
   Body,
+  Header,
   Footer,
   Message,
   Typing,
diff --git a/packages/ui/src/components/chat_deprecated.tsx b/packages/ui/src/components/chat_deprecated.tsx
index 82066a6291..b88bdaa09d 100644
--- a/packages/ui/src/components/chat_deprecated.tsx
+++ b/packages/ui/src/components/chat_deprecated.tsx
@@ -5,17 +5,17 @@ import { cn } from '@/utils/cn'
 
 // Root Container
 const Root: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="w-full h-full overflow-y-auto flex flex-col">{children}</div>
+  return <div className="flex size-full flex-col overflow-y-auto">{children}</div>
 }
 
 // Body
 const Body: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="flex-1 flex flex-col gap-6 mb-3 p-6">{children}</div>
+  return <div className="mb-3 flex flex-1 flex-col gap-6 p-6">{children}</div>
 }
 
 // Footer
 const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="sticky bottom-0 p-6 pt-0 bg-background">{children}</div>
+  return <div className="sticky bottom-0 bg-background p-6 pt-0">{children}</div>
 }
 
 // Message Component
@@ -48,8 +48,8 @@ const Message: React.FC<MessageProps> = ({ self, time, avatar, actions, children
         >
           {children}
         </div>
-        <div className="flex gap-3 items-center justify-between mt-1">
-          <div>{actions && <div className="flex gap-1 items-center justify-start">{actions}</div>}</div>
+        <div className="mt-1 flex items-center justify-between gap-3">
+          <div>{actions && <div className="flex items-center justify-start gap-1">{actions}</div>}</div>
           {time && (
             <Text size={1} className="text-primary opacity-20">
               {time}
@@ -68,9 +68,9 @@ interface TypingProps {
 
 const Typing: React.FC<TypingProps> = ({ avatar }) => {
   return (
-    <div className="flex items-center gap-3 mt-3">
+    <div className="mt-3 flex items-center gap-3">
       {avatar}
-      <div className="flex gap-1 text-success text-lg font-medium" aria-live="polite">
+      <div className="flex gap-1 text-lg font-medium text-success" aria-live="polite">
         <span className="dot animate-bounce">&middot;</span>
         <span className="dot animate-bounce" style={{ animationDelay: '0.15s' }}>
           &middot;
@@ -115,10 +115,10 @@ const InputField: React.FC<InputFieldProps> = ({
   sendIcon = <Icon name="chevron-up" size={16} />
 }) => {
   return (
-    <div className="sticky bottom-0 bg-background flex items-center gap-2">
+    <div className="sticky bottom-0 flex items-center gap-2 bg-background">
       <Input
         ref={inputRef}
-        className="flex-1 pt-6 px-4 pb-16 rounded-lg focus:ring-0"
+        className="flex-1 rounded-lg px-4 pb-16 pt-6 focus:ring-0"
         value={value}
         onChange={onChange}
         onKeyDown={onKeyDown}
@@ -130,7 +130,7 @@ const InputField: React.FC<InputFieldProps> = ({
         variant="outline"
         size="icon"
         disabled={disabled}
-        className="absolute right-3.5 bottom-3.5 z-10 w-6 h-6"
+        className="absolute bottom-3.5 right-3.5 z-10 size-6"
       >
         {sendIcon}
       </Button>
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 8194104113..55b4e0ae3d 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -40,6 +40,7 @@ import CircleArrowTopRight from '../icons/circle-arrow-top-right.svg'
 import CircleArrowTop from '../icons/circle-arrow-top.svg'
 import CircleArrowsUpDown from '../icons/circle-arrows-updown.svg'
 import CirclePlus from '../icons/circle-plus.svg'
+import CircleWithSector from '../icons/circle-with-sector.svg'
 import Circle from '../icons/circle.svg'
 import ClockIcon from '../icons/clock-icon.svg'
 import Clock from '../icons/clock.svg'
@@ -52,6 +53,9 @@ import Code from '../icons/code.svg'
 import Cog6 from '../icons/cog-6.svg'
 import CollapseComment from '../icons/collapse-comment.svg'
 import CollapseDiff from '../icons/collapse-diff.svg'
+import CollapseIn from '../icons/collapse-in.svg'
+import CollapseOut from '../icons/collapse-out.svg'
+import CommandSymbol from '../icons/command-symbol.svg'
 import Comments from '../icons/comments.svg'
 import Compare from '../icons/compare.svg'
 import Connectors from '../icons/connectors-icon.svg'
@@ -68,6 +72,7 @@ import DevInsightsGradient from '../icons/dev-insights-gradient.svg'
 import DevInsights from '../icons/dev-insights-icon.svg'
 import DevPortalGradient from '../icons/dev-portal-gradient.svg'
 import DevPortal from '../icons/dev-portal-icon.svg'
+import Docker from '../icons/docker.svg'
 import MoreDotsFill from '../icons/dots-icon.svg'
 import DoubleTick from '../icons/double-tick.svg'
 import Download from '../icons/download-icon.svg'
@@ -164,14 +169,17 @@ import SidebarIcon from '../icons/sidebar-icon.svg'
 import SidebarLeft from '../icons/sidebar-left.svg'
 import SidebarRight from '../icons/sidebar-right.svg'
 import Signpost from '../icons/signpost.svg'
+import Slack from '../icons/slack.svg'
 import Snow from '../icons/snow-icon.svg'
 import SparksGradientDark from '../icons/sparks-gradient-dark.svg'
 import SparksGradientLight from '../icons/sparks-gradient-light.svg'
 import SparksGradient from '../icons/sparks-gradient.svg'
 import Sparks from '../icons/sparks.svg'
+import SquareDashed from '../icons/square-dashed.svg'
 import SshKey from '../icons/ssh-key.svg'
 import Stack from '../icons/stack-icon.svg'
 import Star from '../icons/star-icon.svg'
+import Stop from '../icons/stop-icon.svg'
 import SubMenuEllipse from '../icons/sub-menu-ellipse.svg'
 import Success from '../icons/success.svg'
 import Suggestion from '../icons/suggestion.svg'
@@ -392,8 +400,16 @@ const IconNameMap = {
   'arrow-short': ArrowShort,
   'bold-plus': BoldPlus,
   'checkbox-circle': CheckboxCircle,
+  'circle-with-sector': CircleWithSector,
+  'command-symbol': CommandSymbol,
   'cross-circle': CrossCircle,
-  'warning-triangle-outline': WarningTriangleOutline
+  'warning-triangle-outline': WarningTriangleOutline,
+  slack: Slack,
+  docker: Docker,
+  stop: Stop,
+  'collapse-out': CollapseOut,
+  'collapse-in': CollapseIn,
+  'square-dashed': SquareDashed
 } satisfies Record<string, React.FunctionComponent<React.SVGProps<SVGSVGElement>>>
 
 export interface IconProps {
diff --git a/packages/ui/src/components/language-selector/language-dialog.tsx b/packages/ui/src/components/language-selector/language-dialog.tsx
index 1179b162aa..32569c9ee8 100644
--- a/packages/ui/src/components/language-selector/language-dialog.tsx
+++ b/packages/ui/src/components/language-selector/language-dialog.tsx
@@ -40,7 +40,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
               }}
             >
               <div className="flex items-center gap-2">
-                <div className="bg-background-12 text-12 text-foreground-3 flex size-6 items-center justify-center rounded">
+                <div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 text-foreground-3">
                   {lang.code}
                 </div>
                 <span
diff --git a/packages/ui/src/components/multi-select.tsx b/packages/ui/src/components/multi-select.tsx
index 89eadccf21..e127b2d0f2 100644
--- a/packages/ui/src/components/multi-select.tsx
+++ b/packages/ui/src/components/multi-select.tsx
@@ -48,7 +48,7 @@ export const MultiSelect = <T = unknown,>({
         </Label>
       )}
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 px-3 transition-colors data-[state=open]:border-borders-8 bg-input-background">
+        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 bg-input-background px-3 transition-colors data-[state=open]:border-borders-8">
           {placeholder}
           <Icon name="chevron-down" className="chevron-down ml-auto" size={12} />
         </DropdownMenu.Trigger>
diff --git a/packages/ui/src/components/navbar-project-chooser.tsx b/packages/ui/src/components/navbar-project-chooser.tsx
index 9863d57dd2..e7910f7d8c 100644
--- a/packages/ui/src/components/navbar-project-chooser.tsx
+++ b/packages/ui/src/components/navbar-project-chooser.tsx
@@ -24,7 +24,7 @@ function Root({ logo }: ProjectProps) {
 
   return (
     <div className="flex w-full flex-col place-items-start px-3 pb-3">
-      <div className="flex h-[58px] px-1 items-center">{logo}</div>
+      <div className="flex h-[58px] items-center px-1">{logo}</div>
       <SearchBox
         width="full"
         placeholder="Search..."
diff --git a/packages/ui/src/components/navbar-skeleton/group.tsx b/packages/ui/src/components/navbar-skeleton/group.tsx
index 1410f4d312..733e7e43af 100644
--- a/packages/ui/src/components/navbar-skeleton/group.tsx
+++ b/packages/ui/src/components/navbar-skeleton/group.tsx
@@ -22,7 +22,7 @@ export function Group({ children, title, topBorder, isSubMenu = false, titleClas
     >
       {title && (
         <div className={cn('text-foreground-7 mt-1.5', isSubMenu ? 'mb-3' : 'mb-1.5', titleClassName)}>
-          <p className="text-xs font-normal px-2.5">{title}</p>
+          <p className="px-2.5 text-xs font-normal">{title}</p>
         </div>
       )}
       {children}
diff --git a/packages/ui/src/components/node-group.tsx b/packages/ui/src/components/node-group.tsx
index 2370554c70..89703bf717 100644
--- a/packages/ui/src/components/node-group.tsx
+++ b/packages/ui/src/components/node-group.tsx
@@ -62,7 +62,7 @@ function Connector({ first, last, className }: { first?: boolean; last?: boolean
       className={cn('absolute bottom-0 left-2.5 top-0 z-10 w-1', { 'top-3': first }, { 'bottom-8': last }, className)}
       data-connector
     >
-      <span className="connector-gradient absolute inset-y-0 left-1/2 w-px -translate-x-1/2" />
+      <span className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 border-l border-borders-4" />
     </div>
   )
 }
diff --git a/packages/ui/src/components/problems.tsx b/packages/ui/src/components/problems.tsx
index 2c3433d54b..114988a30f 100644
--- a/packages/ui/src/components/problems.tsx
+++ b/packages/ui/src/components/problems.tsx
@@ -41,7 +41,7 @@ const ProblemsComponent = {
         role="button"
         tabIndex={0}
         onClick={onClick}
-        className={`width-100 flex flex-1 cursor-pointer items-center gap-2 text-nowrap py-0.5 justify-between px-4 ${rowClasses}`}
+        className={`width-100 flex flex-1 cursor-pointer items-center justify-between gap-2 text-nowrap px-4 py-0.5 ${rowClasses}`}
       >
         {children}
       </div>
diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
index 37dd6b15f4..9c540dfe8f 100644
--- a/packages/ui/src/components/table.tsx
+++ b/packages/ui/src/components/table.tsx
@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom',
       asStackedList:
-        'bg-background-surface rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
+        'rounded-md border bg-background-surface [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
     }
   },
   defaultVariants: {
diff --git a/packages/ui/src/components/tabnav.tsx b/packages/ui/src/components/tabnav.tsx
index 711a9e0e1b..7b85897fbe 100644
--- a/packages/ui/src/components/tabnav.tsx
+++ b/packages/ui/src/components/tabnav.tsx
@@ -1,8 +1,9 @@
+import { PropsWithChildren } from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 
 import { cn } from '@utils/cn'
 
-const TabNavRoot: React.FC = ({ children }) => {
+const TabNavRoot: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <nav className="inline-flex h-[44px] w-full items-center justify-start gap-6 border-b border-border-background px-6 text-muted-foreground">
       {children}
diff --git a/packages/ui/src/components/text.tsx b/packages/ui/src/components/text.tsx
index fa5184ab9e..7a66a3005e 100644
--- a/packages/ui/src/components/text.tsx
+++ b/packages/ui/src/components/text.tsx
@@ -124,7 +124,7 @@ const Text = ({
   wrap,
   ...props
 }: TextProps) => {
-  const Comp = asChild ? Slot : ((as ? as.toString() : 'span') as any)
+  const Comp = asChild ? Slot : as ? as.toString() : 'span'
 
   return (
     <Comp className={cn(textVariants({ align, size, weight, color, trim, truncate, wrap }), className)} {...props}>
diff --git a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
index fbf165e342..f1b1308bba 100644
--- a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
+++ b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
@@ -38,8 +38,8 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
         {/* Mode */}
         <div className="mt-1 flex flex-col gap-y-5">
           <div className="flex flex-col">
-            <span className="text-16 text-foreground-1 font-medium">Mode</span>
-            <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+            <span className="text-16 font-medium text-foreground-1">Mode</span>
+            <p className="mt-1.5 text-14 leading-snug text-foreground-3">
               Choose Dark mode for low light or Light mode for bright spaces.
             </p>
             <div className="mt-[18px] grid grid-cols-2 gap-x-4">
@@ -59,11 +59,11 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                         alt=""
                         className={cn(
                           'w-full h-auto rounded border',
-                          mode === item ? 'border-borders-8' : 'border-borders-4'
+                          mode === item ? 'border-borders-accent' : 'border-borders-4'
                         )}
                       />
                       {mode === item && (
-                        <Icon className="text-foreground-1 absolute bottom-2 left-2" name="checkbox-circle" size={16} />
+                        <Icon className="absolute bottom-2 left-2 text-foreground-1" name="checkbox-circle" size={16} />
                       )}
                       <div
                         className="absolute right-[27px] top-[61px] h-2 w-9 rounded-sm"
@@ -78,20 +78,20 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                         aria-hidden
                       />
                     </div>
-                    <span className="text-14 text-foreground-1 leading-tight">{item}</span>
+                    <span className="text-14 leading-tight text-foreground-1">{item}</span>
                   </button>
                 )
               })}
             </div>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Contrast */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Contrast</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+              <span className="text-16 font-medium text-foreground-1">Contrast</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">
                 High contrast improves readability, Dimmer mode reduces glare.
               </p>
             </div>
@@ -114,13 +114,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </Select>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Color Adjustment */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Color adjustment</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+              <span className="text-16 font-medium text-foreground-1">Color adjustment</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">
                 Adjust colors for different types of color blindness.
               </p>
             </div>
@@ -143,13 +143,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </Select>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Accent Color */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Accent color</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">Select your application accent color.</p>
+              <span className="text-16 font-medium text-foreground-1">Accent color</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">Select your application accent color.</p>
             </div>
             <div className="flex flex-wrap gap-1.5">
               {Object.values(AccentColor).map(item => (
@@ -176,13 +176,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </div>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Gray Color */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Gray color</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">Select your application gray color.</p>
+              <span className="text-16 font-medium text-foreground-1">Gray color</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">Select your application gray color.</p>
             </div>
             <div className="flex flex-wrap gap-1.5">
               {Object.values(GrayColor).map(item => (
diff --git a/packages/ui/src/components/treeview.tsx b/packages/ui/src/components/treeview.tsx
index 05301c62f1..d095a08904 100644
--- a/packages/ui/src/components/treeview.tsx
+++ b/packages/ui/src/components/treeview.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react'
 import { createContext, forwardRef, useCallback, useContext, useEffect, useState } from 'react'
 
+import { Icon as CanaryIcon, ScrollArea } from '@/components'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ScrollArea } from '@radix-ui/react-scroll-area'
 import { cn } from '@utils/cn'
 import { ExecutionState } from '@views/repo/pull-request'
 
-import { Icon as CanaryIcon } from '../components/icon'
-
 type ExecutionDetail = {
   status: ExecutionState
   /* formatted duration */
@@ -17,14 +15,18 @@ type ExecutionDetail = {
 const getStatusIcon = (status: ExecutionState): React.ReactElement => {
   switch (status) {
     case ExecutionState.RUNNING:
-      return <CanaryIcon size={16} name="running" className="animate-spin text-warning" />
+      return <CanaryIcon size={20} name="running" className="animate-spin text-warning" />
     case ExecutionState.SUCCESS:
       return <CanaryIcon name="success" size={16} className="text-foreground-success" />
     case ExecutionState.FAILURE:
       return <CanaryIcon name="fail" size={16} />
     case ExecutionState.WAITING_ON_DEPENDENCIES:
     case ExecutionState.PENDING:
-      return <CanaryIcon name="pending-clock" size={16} />
+      return (
+        <div className="flex size-5 items-center justify-center">
+          <span className="size-4 rounded-full border border-icons-7" />
+        </div>
+      )
     case ExecutionState.SKIPPED:
     case ExecutionState.UNKNOWN:
     default:
@@ -46,8 +48,6 @@ type TreeContextProps = {
   handleExpand: (id: string) => void
   selectItem: (id: string) => void
   setExpendedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>
-  openIcon?: React.ReactNode
-  closeIcon?: React.ReactNode
   direction: 'rtl' | 'ltr'
 }
 
@@ -73,21 +73,7 @@ type TreeViewProps = {
 } & React.HTMLAttributes<HTMLDivElement>
 
 const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
-  (
-    {
-      className,
-      elements,
-      initialSelectedId,
-      initialExpendedItems,
-      children,
-      indicator = true,
-      openIcon,
-      closeIcon,
-      dir,
-      ...props
-    },
-    ref
-  ) => {
+  ({ className, elements, initialSelectedId, initialExpendedItems, children, indicator = true, dir, ...props }) => {
     const [selectedId, setSelectedId] = useState<string | undefined>(initialSelectedId)
     const [expendedItems, setExpendedItems] = useState<string[] | undefined>(initialExpendedItems)
 
@@ -149,26 +135,24 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
           selectItem,
           setExpendedItems,
           indicator,
-          openIcon,
-          closeIcon,
           direction
         }}
       >
-        <div className={cn('size-full', className)}>
-          <ScrollArea ref={ref} className="relative h-full px-2" dir={dir as Direction}>
+        <ScrollArea className="pt-4" dir={dir as Direction}>
+          <div className={cn('size-full', className)}>
             <AccordionPrimitive.Root
               {...props}
               type="multiple"
               defaultValue={expendedItems}
               value={expendedItems}
-              className="flex flex-col gap-1"
+              className="flex flex-col gap-3"
               onValueChange={value => setExpendedItems(prev => [...(prev ?? []), value[0]])}
               dir={dir as Direction}
             >
               {children}
             </AccordionPrimitive.Root>
-          </ScrollArea>
-        </div>
+          </div>
+        </ScrollArea>
       </TreeContext.Provider>
     )
   }
@@ -201,45 +185,51 @@ type FolderProps = {
   element: string
   isSelectable?: boolean
   isSelect?: boolean
+  level: number
 } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> &
   ExecutionDetail
 
 const Folder = forwardRef<HTMLDivElement, FolderProps & React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, element, value, isSelectable = true, isSelect, children, status, duration, ...props }) => {
-    const { direction, handleExpand, expendedItems, indicator, setExpendedItems, openIcon, closeIcon } = useTree()
+  ({ className, element, value, isSelectable = true, isSelect, children, status, duration, level, ...props }) => {
+    const { direction, handleExpand, expendedItems, setExpendedItems } = useTree()
 
     return (
-      <AccordionPrimitive.Item {...props} value={value} className="relative size-full overflow-hidden">
+      <AccordionPrimitive.Item {...props} value={value} className="relative -mb-3 size-full overflow-hidden pb-3">
         <AccordionPrimitive.Trigger
-          className={cn(`flex w-full items-center gap-1 rounded-md pb-1.5 text-sm`, className, {
-            'rounded-md': isSelect && isSelectable,
-            'cursor-pointer': isSelectable,
-            'cursor-not-allowed opacity-50': !isSelectable
-          })}
+          className={cn(
+            `flex w-full gap-1 rounded-md text-sm px-5`,
+            className,
+            {
+              'rounded-md': isSelect && isSelectable,
+              'cursor-pointer': isSelectable,
+              'cursor-not-allowed opacity-50': !isSelectable
+            },
+            level >= 2 && 'pl-14',
+            level === 1 && 'pl-7'
+          )}
           disabled={!isSelectable}
           onClick={() => handleExpand(value)}
         >
-          <div className="mt-1 pt-1">
-            {expendedItems?.includes(value)
-              ? (openIcon ?? <CanaryIcon name="chevron-down" className="size-4" height={12} />)
-              : (closeIcon ?? <CanaryIcon name="chevron-right" className="size-4" height={12} />)}
-          </div>
-          <div className="mr-1 mt-1 flex w-full items-baseline justify-between">
-            <div className="flex items-baseline">
-              <div className="mr-1 flex self-center">{getStatusIcon(status)}</div>
-              <span className="ml-1 text-sm font-normal">
-                {element}&nbsp;<span className="text-muted-foreground">({React.Children.count(children)})</span>
+          <CanaryIcon
+            name="chevron-right"
+            className={cn('text-icons-1 mt-1', expendedItems?.includes(value) && 'rotate-90')}
+            size={12}
+          />
+          <div className="flex w-full justify-between gap-x-2">
+            <div className="flex gap-x-2">
+              <div className="flex-none flex size-5 items-center justify-center">{getStatusIcon(status)}</div>
+              <span className="leading-tight text-foreground-8 mt-0.5 text-left">
+                {element}&nbsp;<span className="text-foreground-5">({React.Children.count(children)})</span>
               </span>
             </div>
-            <span className="text-muted-foreground">{duration ?? '--'}</span>
+            <span className="flex-none text-foreground-4">{duration ?? '--'}</span>
           </div>
         </AccordionPrimitive.Trigger>
-        <AccordionPrimitive.Content className="relative h-full overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
-          {element && indicator && <TreeIndicator aria-hidden="true" />}
+        <AccordionPrimitive.Content className="relative h-full overflow-visible px-5 text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
           <AccordionPrimitive.Root
             dir={direction}
             type="multiple"
-            className="flex flex-col gap-1 pl-5 rtl:mr-5"
+            className="mt-3 flex flex-col gap-3 rtl:mr-5"
             defaultValue={expendedItems}
             value={expendedItems}
             onValueChange={value => {
@@ -264,6 +254,7 @@ const File = forwardRef<
     isSelectable?: boolean
     isSelect?: boolean
     fileIcon?: React.ReactNode
+    level: number
   } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> &
     ExecutionDetail
 >(
@@ -278,6 +269,7 @@ const File = forwardRef<
       children,
       status,
       duration,
+      level,
       ...props
     },
     ref
@@ -293,9 +285,14 @@ const File = forwardRef<
           disabled={!isSelectable}
           aria-label="File"
           className={cn(
-            'flex w-full cursor-pointer items-center gap-1 rounded-md px-1 py-1 text-sm duration-200 ease-in-out rtl:pl-1 rtl:pr-0',
-            { ['bg-[#18181B] px-2']: isSelected },
+            'flex relative w-full cursor-pointer items-center gap-1 rounded-md text-sm duration-200 ease-in-out rtl:pl-1 rtl:pr-0',
+            {
+              ['after:absolute after:bg-background-4 after:-inset-x-1 after:-inset-y-1.5 after:-z-10 after:rounded']:
+                isSelected
+            },
             isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50',
+            level >= 2 && 'pl-14',
+            level === 1 && 'pl-7',
             className
           )}
           onClick={() => {
@@ -303,12 +300,12 @@ const File = forwardRef<
             selectItem(value)
           }}
         >
-          <div className="flex w-full items-baseline justify-between">
-            <div className="flex items-baseline">
-              <div className="mr-1 flex size-4 self-center">{getStatusIcon(status)}</div>
-              <span className="ml-1 text-sm font-normal">{children}</span>
+          <div className="relative flex w-full justify-between pl-4 gap-x-2">
+            <div className="flex gap-x-2">
+              <div className="flex-none flex size-5 items-center justify-center">{getStatusIcon(status)}</div>
+              <span className="leading-tight text-foreground-8 mt-0.5 text-left">{children}</span>
             </div>
-            <span className="text-muted-foreground">{duration ?? '--'}</span>
+            <span className="text-foreground-4 flex-none">{duration ?? '--'}</span>
           </div>
         </AccordionPrimitive.Trigger>
       </AccordionPrimitive.Item>
diff --git a/packages/ui/src/icons/circle-with-sector.svg b/packages/ui/src/icons/circle-with-sector.svg
new file mode 100644
index 0000000000..6b349b9550
--- /dev/null
+++ b/packages/ui/src/icons/circle-with-sector.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="7" cy="7" r="6.5" stroke="currentColor" />
+  <path d="M7 0V7L11.9497 2.05025C10.683 0.783502 8.933 0 7 0Z" fill="currentColor" />
+</svg>
+
diff --git a/packages/ui/src/icons/collapse-in.svg b/packages/ui/src/icons/collapse-in.svg
new file mode 100644
index 0000000000..c57ad4faf3
--- /dev/null
+++ b/packages/ui/src/icons/collapse-in.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4561 6.74126H9.26562V2.55078" stroke="currentColor"  stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.2942 1.71289L9.26562 6.74146" stroke="currentColor"  stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.74516 13.4463V9.25586H2.55469" stroke="currentColor"  stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.71875 14.2844L6.74732 9.25586" stroke="currentColor"  stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/ui/src/icons/collapse-out.svg b/packages/ui/src/icons/collapse-out.svg
new file mode 100644
index 0000000000..c2168bf59c
--- /dev/null
+++ b/packages/ui/src/icons/collapse-out.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.89912 6.38863C8.70386 6.5839 8.70386 6.90048 8.89912 7.09574C9.09439 7.291 9.41097 7.291 9.60623 7.09574L13.7812 2.92072V5.9043C13.7812 6.18044 14.0051 6.4043 14.2812 6.4043C14.5574 6.4043 14.7812 6.18044 14.7812 5.9043V1.71382C14.7812 1.67668 14.7772 1.64048 14.7695 1.60564C14.7497 1.51565 14.7048 1.43006 14.6348 1.36006C14.5335 1.25877 14.3996 1.21003 14.2669 1.21382H10.0908C9.81463 1.21382 9.59077 1.43768 9.59077 1.71382C9.59077 1.98996 9.81463 2.21382 10.0908 2.21382H13.0739L8.89912 6.38863Z" fill="currentColor" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.90625 14.7852C6.18239 14.7852 6.40625 14.5613 6.40625 14.2852C6.40625 14.009 6.18239 13.7852 5.90625 13.7852H2.92072L7.09574 9.61014C7.291 9.41488 7.291 9.09829 7.09574 8.90303C6.90048 8.70777 6.5839 8.70777 6.38863 8.90303L2.21577 13.0759V10.0947C2.21577 9.81854 1.99192 9.59468 1.71577 9.59468C1.43963 9.59468 1.21577 9.81854 1.21577 10.0947V14.2386C1.20248 14.3816 1.25058 14.5292 1.36006 14.6387C1.45795 14.7366 1.58634 14.7854 1.71464 14.7852C1.71502 14.7852 1.71539 14.7852 1.71577 14.7852H5.90625Z" fill="currentColor" />
+</svg>
diff --git a/packages/ui/src/icons/command-symbol.svg b/packages/ui/src/icons/command-symbol.svg
new file mode 100644
index 0000000000..bb5103fc72
--- /dev/null
+++ b/packages/ui/src/icons/command-symbol.svg
@@ -0,0 +1,14 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_26485_167790)">
+<path d="M6.63021 3.30762H3.29688V6.65291H6.63021V3.30762Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M0.796875 2.05429C0.796875 1.36432 1.35937 0.799805 2.04687 0.799805C2.73437 0.799805 3.29687 1.36432 3.29687 2.05429C3.29687 2.36791 3.29687 3.30877 3.29687 3.30877C3.29687 3.30877 2.42187 3.30877 2.04687 3.30877C1.35937 3.30877 0.796875 2.74425 0.796875 2.05429Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M9.125 2.05429C9.125 1.36432 8.5625 0.799805 7.875 0.799805C7.1875 0.799805 6.625 1.36432 6.625 2.05429C6.625 2.36791 6.625 3.30877 6.625 3.30877C6.625 3.30877 7.5 3.30877 7.875 3.30877C8.5625 3.30877 9.125 2.74425 9.125 2.05429Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M9.125 7.90585C9.125 8.59582 8.5625 9.16033 7.875 9.16033C7.1875 9.16033 6.625 8.59582 6.625 7.90585C6.625 7.59223 6.625 6.65137 6.625 6.65137C6.625 6.65137 7.5 6.65137 7.875 6.65137C8.5625 6.65137 9.125 7.21588 9.125 7.90585Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M0.796875 7.90585C0.796875 8.59582 1.35937 9.16033 2.04687 9.16033C2.73437 9.16033 3.29687 8.59582 3.29687 7.90585C3.29687 7.59223 3.29687 6.65137 3.29687 6.65137C3.29687 6.65137 2.42187 6.65137 2.04687 6.65137C1.35937 6.65137 0.796875 7.21588 0.796875 7.90585Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>
+</g>
+<defs>
+<clipPath id="clip0_26485_167790">
+<rect width="10" height="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/ui/src/icons/docker.svg b/packages/ui/src/icons/docker.svg
new file mode 100644
index 0000000000..552c3ba2f3
--- /dev/null
+++ b/packages/ui/src/icons/docker.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="24" height="24" rx="4" fill="#1D63ED" style="fill:#1D63ED;fill:color(display-p3 0.1137 0.3882 0.9294);fill-opacity:1;" />
+	<g clip-path="url(#clip0_25801_76539)">
+		<path d="M19.7868 10.8742C19.3945 10.6102 18.3638 10.4974 17.6144 10.6993C17.574 9.95286 17.1891 9.32387 16.485 8.77507L16.2244 8.6001L16.0507 8.86244C15.7092 9.38078 15.5654 10.0713 15.6163 10.6991C15.6565 11.0858 15.7911 11.5206 16.0507 11.836C15.0754 12.4018 14.1764 12.2733 10.1951 12.2733H4.04825C4.03027 13.1723 4.17477 14.9016 5.2745 16.3094C5.39594 16.4649 5.52923 16.6153 5.67373 16.7603C6.56781 17.6556 7.91867 18.3121 9.93872 18.314C13.0204 18.3168 15.6608 16.6511 17.2668 12.6235C17.7953 12.6322 19.1903 12.7183 19.8731 11.3989C19.8898 11.3767 20.0468 11.049 20.0468 11.049L19.7865 10.874L19.7868 10.8742ZM8.05979 10.0521H6.33128V11.7806H8.05979V10.0521ZM10.2929 10.0521H8.56437V11.7806H10.2929V10.0521ZM12.526 10.0521H10.7975V11.7806H12.526V10.0521ZM14.7591 10.0521H13.0306V11.7806H14.7591V10.0521ZM5.82669 10.0521H4.09818V11.7806H5.82669V10.0521ZM8.05979 7.86892H6.33128V9.59743H8.05979V7.86892ZM10.2929 7.86892H8.56437V9.59743H10.2929V7.86892ZM12.526 7.86892H10.7975V9.59743H12.526V7.86892ZM12.526 5.68555H10.7975V7.41405H12.526V5.68555Z" fill="white" style="fill:white;fill-opacity:1;" />
+	</g>
+	<defs>
+		<clipPath id="clip0_25801_76539">
+			<rect width="16" height="16" fill="white" style="fill:white;fill-opacity:1;" transform="translate(4 4)" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/packages/ui/src/icons/list.svg b/packages/ui/src/icons/list.svg
index 911b208eea..15e0eeaeb5 100644
--- a/packages/ui/src/icons/list.svg
+++ b/packages/ui/src/icons/list.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.143" d="M5.504 3.992h9M5.504 7.992h9M5.504 12.492h9M2.004 4.492a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M2.004 8.492a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M2.004 12.492a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"><circle cx="3.75" cy="9" r="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></circle><line x1="8.25" y1="9" x2="15.75" y2="9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></line><circle cx="3.75" cy="3.75" r="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></circle><line x1="8.25" y1="3.75" x2="15.75" y2="3.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></line><circle cx="3.75" cy="14.25" r="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></circle><line x1="8.25" y1="14.25" x2="15.75" y2="14.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></line></svg>
\ No newline at end of file
diff --git a/packages/ui/src/icons/minus.svg b/packages/ui/src/icons/minus.svg
new file mode 100644
index 0000000000..a8a899f675
--- /dev/null
+++ b/packages/ui/src/icons/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"><line x1="3.25" y1="9" x2="14.75" y2="9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></line></svg>
\ No newline at end of file
diff --git a/packages/ui/src/icons/pin.svg b/packages/ui/src/icons/pin.svg
index 3d5fcc290b..5d73cd7b62 100644
--- a/packages/ui/src/icons/pin.svg
+++ b/packages/ui/src/icons/pin.svg
@@ -1,9 +1 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.6064 8.2064L12.8752 2.4752M9.7936 15.3936L12.6592 10.2592L15.5248 5.1248M11.4 1L17 6.6M6.2 11.8L1 17M1 6.6L11.4 17" stroke="url(#paint0_linear_4_17)" stroke-miterlimit="10" stroke-linecap="round"/>
-<defs>
-<linearGradient id="paint0_linear_4_17" x1="9" y1="1" x2="9" y2="17" gradientUnits="userSpaceOnUse">
-<stop stop-color="currentColor"/>
-<stop offset="1" stop-color="currentColor"/>
-</linearGradient>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"><line x1="9" y1="16.25" x2="9" y2="12.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line><path d="M14.25,12.25c-.089-.699-.318-1.76-.969-2.875-.335-.574-.703-1.028-1.031-1.375V3.75c0-1.105-.895-2-2-2h-2.5c-1.105,0-2,.895-2,2v4.25c-.329,.347-.697,.801-1.031,1.375-.65,1.115-.88,2.176-.969,2.875H14.25Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/ui/src/icons/plus.svg b/packages/ui/src/icons/plus.svg
index f09410c2b1..b5738ca716 100644
--- a/packages/ui/src/icons/plus.svg
+++ b/packages/ui/src/icons/plus.svg
@@ -1,3 +1 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 2V8V14M2 8H14" stroke="currentColor"  stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"><path d="M9 3.25V14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path> <path d="M3.25 9H14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path></svg>
\ No newline at end of file
diff --git a/packages/ui/src/icons/slack.svg b/packages/ui/src/icons/slack.svg
new file mode 100644
index 0000000000..ea22ee9a23
--- /dev/null
+++ b/packages/ui/src/icons/slack.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="24" height="24" rx="4" fill="white" style="fill:white;fill-opacity:1;" />
+	<g clip-path="url(#clip0_25801_76589)">
+		<path d="M7.82964 13.8758C7.82964 14.71 7.15536 15.3843 6.32107 15.3843C5.48679 15.3843 4.8125 14.71 4.8125 13.8758C4.8125 13.0415 5.48679 12.3672 6.32107 12.3672H7.82964V13.8758ZM8.58393 13.8758C8.58393 13.0415 9.25821 12.3672 10.0925 12.3672C10.9268 12.3672 11.6011 13.0415 11.6011 13.8758V17.6472C11.6011 18.4815 10.9268 19.1558 10.0925 19.1558C9.25821 19.1558 8.58393 18.4815 8.58393 17.6472V13.8758Z" fill="#E01E5A" style="fill:#E01E5A;fill:color(display-p3 0.8784 0.1176 0.3529);fill-opacity:1;" />
+		<path d="M10.0883 7.81792C9.25402 7.81792 8.57973 7.14364 8.57973 6.30935C8.57973 5.47507 9.25402 4.80078 10.0883 4.80078C10.9226 4.80078 11.5969 5.47507 11.5969 6.30935V7.81792H10.0883ZM10.0883 8.58364C10.9226 8.58364 11.5969 9.25792 11.5969 10.0922C11.5969 10.9265 10.9226 11.6008 10.0883 11.6008H6.30545C5.47116 11.6008 4.79688 10.9265 4.79688 10.0922C4.79688 9.25792 5.47116 8.58364 6.30545 8.58364H10.0883Z" fill="#36C5F0" style="fill:#36C5F0;fill:color(display-p3 0.2118 0.7725 0.9412);fill-opacity:1;" />
+		<path d="M16.1308 10.0922C16.1308 9.25792 16.8051 8.58364 17.6394 8.58364C18.4737 8.58364 19.1479 9.25792 19.1479 10.0922C19.1479 10.9265 18.4737 11.6008 17.6394 11.6008H16.1308V10.0922ZM15.3765 10.0922C15.3765 10.9265 14.7022 11.6008 13.8679 11.6008C13.0337 11.6008 12.3594 10.9265 12.3594 10.0922V6.30935C12.3594 5.47507 13.0337 4.80078 13.8679 4.80078C14.7022 4.80078 15.3765 5.47507 15.3765 6.30935V10.0922Z" fill="#2EB67D" style="fill:#2EB67D;fill:color(display-p3 0.1804 0.7137 0.4902);fill-opacity:1;" />
+		<path d="M13.8679 16.1386C14.7022 16.1386 15.3765 16.8129 15.3765 17.6472C15.3765 18.4815 14.7022 19.1558 13.8679 19.1558C13.0337 19.1558 12.3594 18.4815 12.3594 17.6472V16.1386H13.8679ZM13.8679 15.3843C13.0337 15.3843 12.3594 14.71 12.3594 13.8758C12.3594 13.0415 13.0337 12.3672 13.8679 12.3672H17.6508C18.4851 12.3672 19.1594 13.0415 19.1594 13.8758C19.1594 14.71 18.4851 15.3843 17.6508 15.3843H13.8679Z" fill="#ECB22E" style="fill:#ECB22E;fill:color(display-p3 0.9255 0.6980 0.1804);fill-opacity:1;" />
+	</g>
+	<defs>
+		<clipPath id="clip0_25801_76589">
+			<rect width="14.4" height="14.4" fill="white" style="fill:white;fill-opacity:1;" transform="translate(4.79688 4.80078)" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/packages/ui/src/icons/square-dashed.svg b/packages/ui/src/icons/square-dashed.svg
new file mode 100644
index 0000000000..f8f473680d
--- /dev/null
+++ b/packages/ui/src/icons/square-dashed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"><path d="M2.75,4.75c0-1.105,.895-2,2-2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M13.25,2.75c1.105,0,2,.895,2,2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M15.25,13.25c0,1.105-.895,2-2,2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M4.75,15.25c-1.105,0-2-.895-2-2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="7.75" y1="2.75" x2="10.25" y2="2.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line><line x1="7.75" y1="15.25" x2="10.25" y2="15.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line><line x1="15.25" y1="7.75" x2="15.25" y2="10.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line><line x1="2.75" y1="7.75" x2="2.75" y2="10.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
\ No newline at end of file
diff --git a/packages/ui/src/icons/stop-icon.svg b/packages/ui/src/icons/stop-icon.svg
new file mode 100644
index 0000000000..d06c6431df
--- /dev/null
+++ b/packages/ui/src/icons/stop-icon.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0" width="12" height="12" rx="1" fill="currentColor" />
+</svg>
diff --git a/packages/ui/src/icons/unpin.svg b/packages/ui/src/icons/unpin.svg
index 53b532ffff..b6958e1d42 100644
--- a/packages/ui/src/icons/unpin.svg
+++ b/packages/ui/src/icons/unpin.svg
@@ -1,9 +1 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.6064 8.2064L5.20569 6.75569M12.8752 2.4752L10.2702 3.92912M9.7936 15.3936L11.2264 12.8264M15.5248 5.1248L14.092 7.692M11.4 1L17 6.6M6.2 11.8L1 17M6.2 11.8L1 6.6M6.2 11.8L11.4 17M3.5 1L7.80498 5.30498L17 14.5" stroke="url(#paint0_linear_4_17)" stroke-miterlimit="10" stroke-linecap="round"/>
-<defs>
-<linearGradient id="paint0_linear_4_17" x1="9" y1="1" x2="9" y2="17" gradientUnits="userSpaceOnUse">
-<stop stop-color="currentColor"/>
-<stop offset="1" stop-color="currentColor"/>
-</linearGradient>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"><line x1="9" y1="16.25" x2="9" y2="12.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></line><path d="M9,12.25h5.25c-.089-.699-.318-1.76-.969-2.875-.148-.254-.303-.484-.458-.693" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M12.25,5.75v-2c0-1.105-.895-2-2-2h-2.5c-1.105,0-2,.895-2,2v4.25c-.329,.347-.697,.801-1.031,1.375-.65,1.115-.88,2.176-.969,2.875h2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="2" y1="16" x2="16" y2="2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
\ No newline at end of file
diff --git a/packages/ui/src/shared-style-variables.css b/packages/ui/src/shared-style-variables.css
index 8957922173..78786b60d3 100644
--- a/packages/ui/src/shared-style-variables.css
+++ b/packages/ui/src/shared-style-variables.css
@@ -45,7 +45,8 @@
 :root {
   /* value */
   /* color */
-  --canary-base-chrome-white: 0 0% 100%;
+  --canary-pure-white: 0 0% 100%;
+  --canary-pure-black: 0 0% 0%;
   --canary-base-chrome-50: 240 20% 99%;
   --canary-base-chrome-100: 240 28% 95.1%;
   --canary-base-chrome-150: 240 29.4% 88%;
@@ -54,12 +55,12 @@
   --canary-base-chrome-300: 240 12.9% 80.2%;
   --canary-base-chrome-500: 240 7.8% 59.6%;
   --canary-base-chrome-600: 244.3 6.4% 43.1%;
-  --canary-base-chrome-700: 240 8.2% 38%;
+  --canary-base-chrome-700: 240 8.2% 32%;
   --canary-base-chrome-800: 240 7.8% 27.6%;
   --canary-base-chrome-850: 240 8% 18%;
-  --canary-base-chrome-900: 240 6.4% 9.2%;
+  --canary-base-chrome-900: 240 6.4% 10%;
   --canary-base-chrome-950: 240 8.1% 7.3%;
-  --canary-base-chrome-black: 240 10.3% 5.7%;
+  --canary-base-chrome-1000: 240 10.3% 5.7%;
   --canary-accent-50: 210 100% 96.5%;
   --canary-accent-100: 210.7 100% 92%;
   --canary-accent-150: 215.3 89.5% 88.8%;
@@ -103,6 +104,7 @@
   --canary-amber-300: 42.1 63.3% 61.6%;
   --canary-amber-400: 40.2 56.5% 54.9%;
   --canary-amber-500: 37.3 50.2% 50.4%;
+  --canary-amber-600: 34.2 47.5% 47.1%;
   --canary-amber-700: 30.6 48.5% 38%;
   --canary-amber-800: 25.7 40.2% 34.1%;
   --canary-amber-850: 19.5 33.9% 24.9%;
@@ -454,40 +456,565 @@
     --canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
     --canary-graph-gradient-executing-1: hsla(220, 100%, 85%, 0.2);
     --canary-graph-gradient-executing-2: hsla(220, 100%, 85%, 1);
+    --canary-graph-viewport-bg: hsl(var(--canary-grey-12));
   }
 
   /* Need .light and .dark classes for MFE */
   /* Standalone app uses .light-std-std and .dark-std-std as defaults for light and dark themes */
   .light,
+  .light-std-low {
+    --canary-background: var(--canary-base-chrome-50);
+    --canary-foreground: var(--canary-base-chrome-850);
+    --canary-card: var(--canary-pure-white);
+    --canary-card-foreground: var(--canary-base-chrome-1000);
+    --canary-popover: var(--canary-pure-white);
+    --canary-popover-foreground: var(--canary-base-chrome-1000);
+    --canary-primary: var(--canary-base-chrome-1000);
+    --canary-primary-background: var(--canary-base-chrome-50);
+    --canary-primary-foreground: var(--canary-base-chrome-850);
+    --canary-primary-muted: var(--canary-base-chrome-850);
+    --canary-primary-accent: var(--canary-base-chrome-950);
+    --canary-secondary: var(--canary-base-chrome-100);
+    --canary-secondary-foreground: var(--canary-base-chrome-1000);
+    --canary-secondary-background: var(--canary-pure-white);
+    --canary-secondary-muted: var(--canary-base-chrome-600);
+    --canary-tertiary: var(--canary-base-chrome-100);
+    --canary-tertiary-foreground: var(--canary-base-chrome-1000);
+    --canary-tertiary-background: var(--canary-base-chrome-600);
+    --canary-muted: var(--canary-base-chrome-100);
+    --canary-muted-foreground: var(--canary-base-chrome-600);
+    --canary-accent: var(--canary-base-chrome-100);
+    --canary-accent-foreground: var(--canary-base-chrome-1000);
+    --canary-destructive: var(--canary-red-600);
+    --canary-destructive-foreground: var(--canary-pure-white);
+    --canary-border: var(--canary-base-chrome-150);
+    --canary-border-background: var(--canary-base-chrome-150);
+    --canary-input: var(--canary-base-chrome-150);
+    --canary-input-background: var(--canary-pure-white);
+    --canary-ring: var(--canary-accent-400);
+
+    --canary-radius: 0.5rem;
+    --canary-success: var(--canary-green-600);
+    --canary-error: var(--canary-red-500);
+    --canary-warning: var(--canary-amber-700);
+    --canary-emphasis: var(--canary-accent-600);
+    --canary-ai: var(--canary-purple-700);
+    --canary-ai-button-stop-1: var(--canary-yellow-100);
+    --canary-ai-button-stop-2: var(--canary-pink-200);
+    --canary-ai-button-stop-3: var(--canary-purple-400);
+    --canary-ai-button-stop-4: var(--canary-cyan-200);
+
+    --diff-grey: hsl(var(--canary-base-chrome-50));
+    --diff-add-content--: hsl(var(--canary-green-50));
+    --diff-del-content--: hsl(var(--canary-red-50));
+    --diff-add-lineNumber--: hsl(var(--canary-green-100));
+    --diff-del-lineNumber--: hsl(var(--canary-red-100));
+    --diff-plain-content--: hsl(var(--canary-background-01));
+    --diff-expand-content--: hsl(var(--canary-background-01));
+    --diff-plain-lineNumber--: hsl(var(--canary-background-01));
+    --diff-plain-lineNumber-color--: hsl(var(--canary-base-chrome-850));
+    --diff-hunk-content--: hsl(var(--canary-accent-50));
+    --diff-hunk-lineNumber--: hsla(var(--canary-accent-100) / 0.7);
+    --diff-add-content-highlight--: hsl(var(--canary-green-100));
+    --diff-del-content-highlight--: hsl(var(--canary-red-100));
+    --diff-add-widget--: hsl(var(--canary-base-chrome-100));
+    --diff-add-widget-color--: hsl(var(--canary-base-chrome-850));
+    --diff-empty-content--: hsl(var(--canary-background-01));
+    --diff-hunk-content-color--: hsl(var(--canary-base-chrome-850));
+
+    /* New colors design variables */
+    /* Text */
+    --canary-foreground-01: var(--canary-base-chrome-1000);
+    --canary-foreground-02: var(--canary-base-chrome-800);
+    --canary-foreground-03: var(--canary-base-chrome-700);
+    --canary-foreground-04: var(--canary-base-chrome-600);
+    --canary-foreground-05: var(--canary-base-chrome-500);
+    --canary-foreground-06: var(--canary-pure-white);
+    --canary-foreground-07: var(--canary-base-chrome-600);
+    --canary-foreground-08: var(--canary-base-chrome-800);
+    --canary-foreground-09: var(--canary-base-chrome-600);
+    --canary-foreground-10: var(--canary-base-chrome-200);
+    --canary-foreground-danger: var(--canary-red-500);
+    --canary-foreground-alert: var(--canary-amber-700);
+    --canary-foreground-success: var(--canary-green-600);
+    --canary-foreground-accent: var(--canary-accent-600);
+
+    /* Backgrounds */
+    --canary-background-01: var(--canary-base-chrome-50);
+    --canary-background-02: var(--canary-pure-white);
+    --canary-background-03: var(--canary-base-chrome-100);
+    --canary-background-04: var(--canary-base-chrome-500) / 0.12;
+    --canary-background-05: var(--canary-base-chrome-950);
+    --canary-background-06: var(--canary-base-chrome-850);
+    --canary-background-07: var(--canary-base-chrome-50);
+    --canary-background-08: var(--canary-pure-white);
+    --canary-background-09: var(--canary-base-chrome-150);
+    --canary-background-10: var(--canary-base-chrome-850);
+    --canary-background-11: var(--canary-base-chrome-200);
+    --canary-background-12: var(--canary-base-chrome-150);
+    --canary-background-13: var(--canary-base-chrome-600);
+    --canary-background-14: var(--canary-base-chrome-200);
+    --canary-background-surface: var(--canary-pure-white);
+    --canary-background-accent: var(--canary-accent-500);
+    --canary-background-danger: var(--canary-red-50);
+    --canary-background-success: var(--canary-green-50);
+    --canary-toast-background-danger: var(--canary-red-200);
+
+    /* Borders */
+    --canary-border-01: var(--canary-base-chrome-150);
+    --canary-border-02: var(--canary-base-chrome-150);
+    --canary-border-03: var(--canary-base-chrome-500);
+    --canary-border-04: var(--canary-base-chrome-150);
+    --canary-border-05: var(--canary-base-chrome-150);
+    --canary-border-06: var(--canary-base-chrome-600);
+    --canary-border-07: var(--canary-pure-white);
+    --canary-border-08: var(--canary-base-chrome-150);
+    --canary-border-09: var(--canary-base-chrome-1000);
+    --canary-border-10: var(--canary-base-chrome-150);
+    --canary-border-danger: var(--canary-red-400);
+    --canary-border-success: var(--canary-green-400);
+    --canary-border-accent: var(--canary-accent-400);
+    --canary-border-alert: var(--canary-amber-500);
+
+    /* Icons */
+    --canary-icon-01: var(--canary-base-chrome-600);
+    --canary-icon-02: var(--canary-base-chrome-1000);
+    --canary-icon-03: var(--canary-base-chrome-800);
+    --canary-icon-04: var(--canary-base-chrome-500);
+    --canary-icon-05: var(--canary-pure-white);
+    --canary-icon-06: var(--canary-base-chrome-200);
+    --canary-icon-07: var(--canary-base-chrome-800);
+    --canary-icon-08: var(--canary-base-chrome-1000);
+    --canary-icon-09: var(--canary-base-chrome-500);
+    --canary-icon-10: var(--canary-pure-white);
+    --canary-icon-danger: var(--canary-red-500);
+    --canary-icon-alert: var(--canary-amber-700);
+    --canary-icon-success: var(--canary-green-600);
+    --canary-icon-accent: var(--canary-accent-600);
+    --canary-icon-merged: var(--canary-purple-700);
+
+    /* Tags */
+    /* --gray */
+    --canary-tag-foreground-gray-01: var(--canary-base-chrome-800);
+    --canary-tag-border-gray-01: var(--canary-base-chrome-200);
+    --canary-tag-background-gray-01: var(--canary-base-chrome-100);
+    --canary-tag-background-gray-02: var(--canary-base-chrome-150);
+    /* --purple */
+    --canary-tag-foreground-purple-01: var(--canary-purple-700);
+    --canary-tag-border-purple-01: var(--canary-purple-150);
+    --canary-tag-background-purple-01: var(--canary-purple-50);
+    --canary-tag-background-purple-02: var(--canary-purple-100);
+    /* --blue */
+    --canary-tag-foreground-blue-01: var(--canary-accent-700);
+    --canary-tag-border-blue-01: var(--canary-accent-150);
+    --canary-tag-background-blue-01: var(--canary-accent-50);
+    --canary-tag-background-blue-02: var(--canary-accent-100);
+    /* --mint */
+    --canary-tag-foreground-mint-01: var(--canary-green-700);
+    --canary-tag-border-mint-01: var(--canary-green-150);
+    --canary-tag-background-mint-01: var(--canary-green-50);
+    --canary-tag-background-mint-02: var(--canary-green-100);
+    /* --amber */
+    --canary-tag-foreground-amber-01: var(--canary-amber-700);
+    --canary-tag-border-amber-01: var(--canary-amber-150);
+    --canary-tag-background-amber-01: var(--canary-amber-50);
+    --canary-tag-background-amber-02: var(--canary-amber-100);
+    /* --peach */
+    --canary-tag-foreground-peach-01: var(--canary-peach-700);
+    --canary-tag-border-peach-01: var(--canary-peach-150);
+    --canary-tag-background-peach-01: var(--canary-peach-50);
+    --canary-tag-background-peach-02: var(--canary-peach-100);
+    /* --red */
+    --canary-tag-foreground-red-01: var(--canary-red-700);
+    --canary-tag-border-red-01: var(--canary-red-150);
+    --canary-tag-background-red-01: var(--canary-red-50);
+    --canary-tag-background-red-02: var(--canary-red-100);
+
+    /* Labels */
+    --canary-label-background-black-01: hsla(var(--canary-pure-white) / 0.7);
+    --canary-label-background-blue-01: hsla(var(--canary-accent-100));
+    --canary-label-background-brown-01: hsla(var(--canary-brown-100));
+    --canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
+    --canary-label-background-green-01: hsla(var(--canary-green-100));
+    --canary-label-background-indigo-01: hsla(var(--canary-indigo-100));
+    --canary-label-background-lime-01: hsla(var(--canary-lime-100));
+    --canary-label-background-mint-01: hsla(var(--canary-mint-100));
+    --canary-label-background-orange-01: hsla(var(--canary-orange-100));
+    --canary-label-background-pink-01: hsla(var(--canary-pink-100));
+    --canary-label-background-purple-01: hsla(var(--canary-purple-100));
+    --canary-label-background-red-01: hsla(var(--canary-red-100));
+    --canary-label-background-violet-01: hsla(var(--canary-violet-100));
+    --canary-label-background-yellow-01: hsla(var(--canary-yellow-100));
+    --canary-label-foreground-blue-01: hsla(var(--canary-accent-700));
+    --canary-label-foreground-brown-01: hsla(var(--canary-brown-700));
+    --canary-label-foreground-cyan-01: hsla(var(--canary-cyan-700));
+    --canary-label-foreground-green-01: hsla(var(--canary-green-700));
+    --canary-label-foreground-indigo-01: hsla(var(--canary-indigo-700));
+    --canary-label-foreground-lime-01: hsla(var(--canary-lime-700));
+    --canary-label-foreground-mint-01: hsla(var(--canary-mint-700));
+    --canary-label-foreground-orange-01: hsla(var(--canary-orange-700));
+    --canary-label-foreground-pink-01: hsla(var(--canary-pink-700));
+    --canary-label-foreground-purple-01: hsla(var(--canary-purple-700));
+    --canary-label-foreground-red-01: hsla(var(--canary-red-700));
+    --canary-label-foreground-violet-01: hsla(var(--canary-violet-700));
+    --canary-label-foreground-yellow-01: hsla(var(--canary-yellow-700));
+
+    /* Button */
+    --canary-button-foreground-danger-01: var(--canary-red-700);
+    --canary-button-background-danger-01: var(--canary-red-50);
+    --canary-button-background-danger-02: var(--canary-red-100);
+    --canary-button-background-danger-03: var(--canary-red-50);
+    --canary-button-border-danger-01: var(--canary-red-150);
+    --canary-button-foreground-success-01: var(--canary-green-700);
+    --canary-button-background-success-01: var(--canary-green-50);
+    --canary-button-background-success-02: var(--canary-green-100);
+    --canary-button-border-success-01: var(--canary-green-150);
+    --canary-button-foreground-disabled-01: var(--canary-base-chrome-500);
+    --canary-button-background-disabled-01: var(--canary-base-chrome-50);
+    --canary-button-border-disabled-01: var(--canary-base-chrome-150);
+
+    /* Box shadow colors */
+    --canary-box-shadow-1: var(--canary-base-chrome-300) / 0.3;
+    --canary-box-shadow-2: var(--canary-base-chrome-300) / 0.12;
+    --canary-box-shadow-pagination: var(--canary-base-chrome-300) / 0.12;
+    --shadow-sm: var(--canary-base-chrome-100);
+
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-100) / 1;
+    --canary-widget-bg-gradient-to: var(--canary-pure-white) / 1;
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-500) / 1;
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 1;
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150) / 1;
+    --canary-widget-number-bg-gradient-to: var(--canary-pure-white) / 1;
+
+    /* Graph */
+    --canary-graph-gradient-bg-1: hsla(var(--canary-pure-white) / 0.5);
+    --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-100) / 0.3);
+    --canary-graph-gradient-executing-1: hsla(var(--canary-amber-100));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-amber-500));
+    --canary-graph-gradient-executing-3: hsla(var(--canary-amber-100));
+    --canary-graph-gradient-executing-4: hsla(var(--canary-amber-100));
+    --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
+
+    /* Navigation gradients */
+    /* We’ve removed them until we find a better solution in the design.
+    --canary-nav-gradient-1-1: var();
+    --canary-nav-gradient-1-2: var();
+    --canary-nav-gradient-2-1: var();
+    --canary-nav-gradient-2-2: var();
+    --canary-nav-gradient-2-3: var();
+    --canary-nav-gradient-3-1: var();
+    --canary-nav-gradient-3-2: var();
+    --canary-nav-gradient-4-1: var();
+    --canary-nav-gradient-4-2: var();
+    --canary-nav-item-gradient-1: var();
+    --canary-nav-item-gradient-2: var();
+    --canary-nav-item-gradient-3: var();
+    --canary-nav-item-gradient-4: var();
+    --canary-nav-item-gradient-5: var();
+    --canary-nav-item-gradient-6: var();
+   */
+
+    /* Selected tab bg element*/
+    /* We’ve removed them until we find a better solution in the design.
+   --canary-tab-item-gradient-from: var();
+   --canary-tab-item-gradient-to: var();
+   --canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
+     hsla(var(--canary-tab-item-gradient-to));
+   --canary-tab-background-gradient: radial-gradient(closest-side, var(--canary-tab-item-gradient-stops));
+   */
+  }
+
   .light-std-std {
     --canary-background: var(--canary-base-chrome-50);
     --canary-foreground: var(--canary-base-chrome-850);
-    --canary-card: var(--canary-base-chrome-white);
-    --canary-card-foreground: var(--canary-base-chrome-black);
-    --canary-popover: var(--canary-base-chrome-white);
-    --canary-popover-foreground: var(--canary-base-chrome-black);
-    --canary-primary: var(--canary-base-chrome-black);
+    --canary-card: var(--canary-pure-white);
+    --canary-card-foreground: var(--canary-base-chrome-1000);
+    --canary-popover: var(--canary-pure-white);
+    --canary-popover-foreground: var(--canary-base-chrome-1000);
+    --canary-primary: var(--canary-base-chrome-1000);
+    --canary-primary-background: var(--canary-base-chrome-50);
+    --canary-primary-foreground: var(--canary-base-chrome-850);
+    --canary-primary-muted: var(--canary-base-chrome-850);
+    --canary-primary-accent: var(--canary-base-chrome-950);
+    --canary-secondary: var(--canary-base-chrome-100);
+    --canary-secondary-foreground: var(--canary-base-chrome-1000);
+    --canary-secondary-background: var(--canary-pure-white);
+    --canary-secondary-muted: var(--canary-base-chrome-600);
+    --canary-tertiary: var(--canary-base-chrome-100);
+    --canary-tertiary-foreground: var(--canary-base-chrome-1000);
+    --canary-tertiary-background: var(--canary-base-chrome-600);
+    --canary-muted: var(--canary-base-chrome-100);
+    --canary-muted-foreground: var(--canary-base-chrome-600);
+    --canary-accent: var(--canary-base-chrome-100);
+    --canary-accent-foreground: var(--canary-base-chrome-1000);
+    --canary-destructive: var(--canary-red-600);
+    --canary-destructive-foreground: var(--canary-pure-white);
+    --canary-border: var(--canary-base-chrome-150);
+    --canary-border-background: var(--canary-base-chrome-150);
+    --canary-input: var(--canary-base-chrome-150);
+    --canary-input-background: var(--canary-pure-white);
+    --canary-ring: var(--canary-accent-400);
+
+    --canary-radius: 0.5rem;
+    --canary-success: var(--canary-green-600);
+    --canary-error: var(--canary-red-500);
+    --canary-warning: var(--canary-amber-700);
+    --canary-emphasis: var(--canary-accent-600);
+    --canary-ai: var(--canary-purple-700);
+    --canary-ai-button-stop-1: var(--canary-yellow-100);
+    --canary-ai-button-stop-2: var(--canary-pink-200);
+    --canary-ai-button-stop-3: var(--canary-purple-400);
+    --canary-ai-button-stop-4: var(--canary-cyan-200);
+
+    --diff-grey: hsl(var(--canary-base-chrome-50));
+    --diff-add-content--: hsl(var(--canary-green-50));
+    --diff-del-content--: hsl(var(--canary-red-50));
+    --diff-add-lineNumber--: hsl(var(--canary-green-100));
+    --diff-del-lineNumber--: hsl(var(--canary-red-100));
+    --diff-plain-content--: hsl(var(--canary-background-01));
+    --diff-expand-content--: hsl(var(--canary-background-01));
+    --diff-plain-lineNumber--: hsl(var(--canary-background-01));
+    --diff-plain-lineNumber-color--: hsl(var(--canary-base-chrome-850));
+    --diff-hunk-content--: hsl(var(--canary-accent-50));
+    --diff-hunk-lineNumber--: hsla(var(--canary-accent-100) / 0.7);
+    --diff-add-content-highlight--: hsl(var(--canary-green-100));
+    --diff-del-content-highlight--: hsl(var(--canary-red-100));
+    --diff-add-widget--: hsl(var(--canary-base-chrome-100));
+    --diff-add-widget-color--: hsl(var(--canary-base-chrome-850));
+    --diff-empty-content--: hsl(var(--canary-background-01));
+    --diff-hunk-content-color--: hsl(var(--canary-base-chrome-850));
+
+    /* New colors design variables */
+    /* Text */
+    --canary-foreground-01: var(--canary-base-chrome-1000);
+    --canary-foreground-02: var(--canary-base-chrome-800);
+    --canary-foreground-03: var(--canary-base-chrome-700);
+    --canary-foreground-04: var(--canary-base-chrome-600);
+    --canary-foreground-05: var(--canary-base-chrome-500);
+    --canary-foreground-06: var(--canary-pure-white);
+    --canary-foreground-07: var(--canary-base-chrome-600);
+    --canary-foreground-08: var(--canary-base-chrome-800);
+    --canary-foreground-09: var(--canary-base-chrome-600);
+    --canary-foreground-10: var(--canary-base-chrome-200);
+    --canary-foreground-danger: var(--canary-red-500);
+    --canary-foreground-alert: var(--canary-amber-700);
+    --canary-foreground-success: var(--canary-green-600);
+    --canary-foreground-accent: var(--canary-accent-600);
+
+    /* Backgrounds */
+    --canary-background-01: var(--canary-base-chrome-50);
+    --canary-background-02: var(--canary-pure-white);
+    --canary-background-03: var(--canary-base-chrome-100);
+    --canary-background-04: var(--canary-base-chrome-500) / 0.12;
+    --canary-background-05: var(--canary-base-chrome-950);
+    --canary-background-06: var(--canary-base-chrome-850);
+    --canary-background-07: var(--canary-base-chrome-50);
+    --canary-background-08: var(--canary-pure-white);
+    --canary-background-09: var(--canary-base-chrome-150);
+    --canary-background-10: var(--canary-base-chrome-850);
+    --canary-background-11: var(--canary-base-chrome-200);
+    --canary-background-12: var(--canary-base-chrome-150);
+    --canary-background-13: var(--canary-base-chrome-600);
+    --canary-background-14: var(--canary-base-chrome-200);
+    --canary-background-surface: var(--canary-pure-white);
+    --canary-background-accent: var(--canary-accent-500);
+    --canary-background-danger: var(--canary-red-50);
+    --canary-background-success: var(--canary-green-50);
+    --canary-toast-background-danger: var(--canary-red-200);
+
+    /* Borders */
+    --canary-border-01: var(--canary-base-chrome-150);
+    --canary-border-02: var(--canary-base-chrome-150);
+    --canary-border-03: var(--canary-base-chrome-500);
+    --canary-border-04: var(--canary-base-chrome-150);
+    --canary-border-05: var(--canary-base-chrome-150);
+    --canary-border-06: var(--canary-base-chrome-600);
+    --canary-border-07: var(--canary-pure-white);
+    --canary-border-08: var(--canary-base-chrome-150);
+    --canary-border-09: var(--canary-base-chrome-1000);
+    --canary-border-10: var(--canary-base-chrome-150);
+    --canary-border-danger: var(--canary-red-400);
+    --canary-border-success: var(--canary-green-400);
+    --canary-border-accent: var(--canary-accent-400);
+    --canary-border-alert: var(--canary-amber-500);
+
+    /* Icons */
+    --canary-icon-01: var(--canary-base-chrome-600);
+    --canary-icon-02: var(--canary-base-chrome-1000);
+    --canary-icon-03: var(--canary-base-chrome-800);
+    --canary-icon-04: var(--canary-base-chrome-500);
+    --canary-icon-05: var(--canary-pure-white);
+    --canary-icon-06: var(--canary-base-chrome-200);
+    --canary-icon-07: var(--canary-base-chrome-800);
+    --canary-icon-08: var(--canary-base-chrome-1000);
+    --canary-icon-09: var(--canary-base-chrome-500);
+    --canary-icon-10: var(--canary-pure-white);
+    --canary-icon-danger: var(--canary-red-500);
+    --canary-icon-alert: var(--canary-amber-700);
+    --canary-icon-success: var(--canary-green-600);
+    --canary-icon-accent: var(--canary-accent-600);
+    --canary-icon-merged: var(--canary-purple-700);
+
+    /* Tags */
+    /* --gray */
+    --canary-tag-foreground-gray-01: var(--canary-base-chrome-800);
+    --canary-tag-border-gray-01: var(--canary-base-chrome-200);
+    --canary-tag-background-gray-01: var(--canary-base-chrome-100);
+    --canary-tag-background-gray-02: var(--canary-base-chrome-150);
+    /* --purple */
+    --canary-tag-foreground-purple-01: var(--canary-purple-700);
+    --canary-tag-border-purple-01: var(--canary-purple-150);
+    --canary-tag-background-purple-01: var(--canary-purple-50);
+    --canary-tag-background-purple-02: var(--canary-purple-100);
+    /* --blue */
+    --canary-tag-foreground-blue-01: var(--canary-accent-700);
+    --canary-tag-border-blue-01: var(--canary-accent-150);
+    --canary-tag-background-blue-01: var(--canary-accent-50);
+    --canary-tag-background-blue-02: var(--canary-accent-100);
+    /* --mint */
+    --canary-tag-foreground-mint-01: var(--canary-green-700);
+    --canary-tag-border-mint-01: var(--canary-green-150);
+    --canary-tag-background-mint-01: var(--canary-green-50);
+    --canary-tag-background-mint-02: var(--canary-green-100);
+    /* --amber */
+    --canary-tag-foreground-amber-01: var(--canary-amber-700);
+    --canary-tag-border-amber-01: var(--canary-amber-150);
+    --canary-tag-background-amber-01: var(--canary-amber-50);
+    --canary-tag-background-amber-02: var(--canary-amber-100);
+    /* --peach */
+    --canary-tag-foreground-peach-01: var(--canary-peach-700);
+    --canary-tag-border-peach-01: var(--canary-peach-150);
+    --canary-tag-background-peach-01: var(--canary-peach-50);
+    --canary-tag-background-peach-02: var(--canary-peach-100);
+    /* --red */
+    --canary-tag-foreground-red-01: var(--canary-red-700);
+    --canary-tag-border-red-01: var(--canary-red-150);
+    --canary-tag-background-red-01: var(--canary-red-50);
+    --canary-tag-background-red-02: var(--canary-red-100);
+
+    /* Labels */
+    --canary-label-background-black-01: hsla(var(--canary-pure-white) / 0.7);
+    --canary-label-background-blue-01: hsla(var(--canary-accent-100));
+    --canary-label-background-brown-01: hsla(var(--canary-brown-100));
+    --canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
+    --canary-label-background-green-01: hsla(var(--canary-green-100));
+    --canary-label-background-indigo-01: hsla(var(--canary-indigo-100));
+    --canary-label-background-lime-01: hsla(var(--canary-lime-100));
+    --canary-label-background-mint-01: hsla(var(--canary-mint-100));
+    --canary-label-background-orange-01: hsla(var(--canary-orange-100));
+    --canary-label-background-pink-01: hsla(var(--canary-pink-100));
+    --canary-label-background-purple-01: hsla(var(--canary-purple-100));
+    --canary-label-background-red-01: hsla(var(--canary-red-100));
+    --canary-label-background-violet-01: hsla(var(--canary-violet-100));
+    --canary-label-background-yellow-01: hsla(var(--canary-yellow-100));
+    --canary-label-foreground-blue-01: hsla(var(--canary-accent-700));
+    --canary-label-foreground-brown-01: hsla(var(--canary-brown-700));
+    --canary-label-foreground-cyan-01: hsla(var(--canary-cyan-700));
+    --canary-label-foreground-green-01: hsla(var(--canary-green-700));
+    --canary-label-foreground-indigo-01: hsla(var(--canary-indigo-700));
+    --canary-label-foreground-lime-01: hsla(var(--canary-lime-700));
+    --canary-label-foreground-mint-01: hsla(var(--canary-mint-700));
+    --canary-label-foreground-orange-01: hsla(var(--canary-orange-700));
+    --canary-label-foreground-pink-01: hsla(var(--canary-pink-700));
+    --canary-label-foreground-purple-01: hsla(var(--canary-purple-700));
+    --canary-label-foreground-red-01: hsla(var(--canary-red-700));
+    --canary-label-foreground-violet-01: hsla(var(--canary-violet-700));
+    --canary-label-foreground-yellow-01: hsla(var(--canary-yellow-700));
+
+    /* Button */
+    --canary-button-foreground-danger-01: var(--canary-red-700);
+    --canary-button-background-danger-01: var(--canary-red-50);
+    --canary-button-background-danger-02: var(--canary-red-100);
+    --canary-button-background-danger-03: var(--canary-red-50);
+    --canary-button-border-danger-01: var(--canary-red-150);
+    --canary-button-foreground-success-01: var(--canary-green-700);
+    --canary-button-background-success-01: var(--canary-green-50);
+    --canary-button-background-success-02: var(--canary-green-100);
+    --canary-button-border-success-01: var(--canary-green-150);
+    --canary-button-foreground-disabled-01: var(--canary-base-chrome-500);
+    --canary-button-background-disabled-01: var(--canary-base-chrome-50);
+    --canary-button-border-disabled-01: var(--canary-base-chrome-150);
+
+    /* Box shadow colors */
+    --canary-box-shadow-1: var(--canary-base-chrome-300) / 0.3;
+    --canary-box-shadow-2: var(--canary-base-chrome-300) / 0.12;
+    --canary-box-shadow-pagination: var(--canary-base-chrome-300) / 0.12;
+    --shadow-sm: var(--canary-base-chrome-100);
+
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-100) / 1;
+    --canary-widget-bg-gradient-to: var(--canary-pure-white) / 1;
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-500) / 1;
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 1;
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150) / 1;
+    --canary-widget-number-bg-gradient-to: var(--canary-pure-white) / 1;
+
+    /* Graph */
+    --canary-graph-gradient-bg-1: hsla(var(--canary-pure-white) / 0.5);
+    --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-100) / 0.3);
+    --canary-graph-gradient-executing-1: hsla(var(--canary-amber-100));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-amber-500));
+    --canary-graph-gradient-executing-3: hsla(var(--canary-amber-100));
+    --canary-graph-gradient-executing-4: hsla(var(--canary-amber-100));
+    --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
+
+    /* Navigation gradients */
+    /* We’ve removed them until we find a better solution in the design.
+    --canary-nav-gradient-1-1: var();
+    --canary-nav-gradient-1-2: var();
+    --canary-nav-gradient-2-1: var();
+    --canary-nav-gradient-2-2: var();
+    --canary-nav-gradient-2-3: var();
+    --canary-nav-gradient-3-1: var();
+    --canary-nav-gradient-3-2: var();
+    --canary-nav-gradient-4-1: var();
+    --canary-nav-gradient-4-2: var();
+    --canary-nav-item-gradient-1: var();
+    --canary-nav-item-gradient-2: var();
+    --canary-nav-item-gradient-3: var();
+    --canary-nav-item-gradient-4: var();
+    --canary-nav-item-gradient-5: var();
+    --canary-nav-item-gradient-6: var();
+   */
+
+    /* Selected tab bg element*/
+    /* We’ve removed them until we find a better solution in the design.
+   --canary-tab-item-gradient-from: var();
+   --canary-tab-item-gradient-to: var();
+   --canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
+     hsla(var(--canary-tab-item-gradient-to));
+   --canary-tab-background-gradient: radial-gradient(closest-side, var(--canary-tab-item-gradient-stops));
+   */
+  }
+
+  .light-std-high {
+    --canary-background: var(--canary-base-chrome-50);
+    --canary-foreground: var(--canary-base-chrome-850);
+    --canary-card: var(--canary-pure-white);
+    --canary-card-foreground: var(--canary-base-chrome-1000);
+    --canary-popover: var(--canary-pure-white);
+    --canary-popover-foreground: var(--canary-base-chrome-1000);
+    --canary-primary: var(--canary-base-chrome-1000);
     --canary-primary-background: var(--canary-base-chrome-50);
     --canary-primary-foreground: var(--canary-base-chrome-850);
     --canary-primary-muted: var(--canary-base-chrome-850);
-    --canary-primary-accent: var(--canary-accent-500);
+    --canary-primary-accent: var(--canary-base-chrome-950);
     --canary-secondary: var(--canary-base-chrome-100);
-    --canary-secondary-foreground: var(--canary-base-chrome-black);
-    --canary-secondary-background: var(--canary-base-chrome-white);
+    --canary-secondary-foreground: var(--canary-base-chrome-1000);
+    --canary-secondary-background: var(--canary-pure-white);
     --canary-secondary-muted: var(--canary-base-chrome-600);
     --canary-tertiary: var(--canary-base-chrome-100);
-    --canary-tertiary-foreground: var(--canary-base-chrome-black);
+    --canary-tertiary-foreground: var(--canary-base-chrome-1000);
     --canary-tertiary-background: var(--canary-base-chrome-600);
     --canary-muted: var(--canary-base-chrome-100);
     --canary-muted-foreground: var(--canary-base-chrome-600);
     --canary-accent: var(--canary-base-chrome-100);
-    --canary-accent-foreground: var(--canary-base-chrome-black);
+    --canary-accent-foreground: var(--canary-base-chrome-1000);
     --canary-destructive: var(--canary-red-600);
-    --canary-destructive-foreground: var(--canary-base-chrome-white);
+    --canary-destructive-foreground: var(--canary-pure-white);
     --canary-border: var(--canary-base-chrome-150);
     --canary-border-background: var(--canary-base-chrome-150);
     --canary-input: var(--canary-base-chrome-150);
-    --canary-input-background: var(--canary-base-chrome-white);
+    --canary-input-background: var(--canary-pure-white);
     --canary-ring: var(--canary-accent-400);
 
     --canary-radius: 0.5rem;
@@ -521,14 +1048,14 @@
 
     /* New colors design variables */
     /* Text */
-    --canary-foreground-01: var(--canary-base-chrome-black);
-    --canary-foreground-02: var(--canary-base-chrome-850);
+    --canary-foreground-01: var(--canary-base-chrome-1000);
+    --canary-foreground-02: var(--canary-base-chrome-800);
     --canary-foreground-03: var(--canary-base-chrome-700);
     --canary-foreground-04: var(--canary-base-chrome-600);
-    --canary-foreground-05: var(--canary-base-chrome-600);
-    --canary-foreground-06: var(--canary-base-chrome-white);
+    --canary-foreground-05: var(--canary-base-chrome-500);
+    --canary-foreground-06: var(--canary-pure-white);
     --canary-foreground-07: var(--canary-base-chrome-600);
-    --canary-foreground-08: var(--canary-base-chrome-850);
+    --canary-foreground-08: var(--canary-base-chrome-800);
     --canary-foreground-09: var(--canary-base-chrome-600);
     --canary-foreground-10: var(--canary-base-chrome-200);
     --canary-foreground-danger: var(--canary-red-500);
@@ -538,20 +1065,20 @@
 
     /* Backgrounds */
     --canary-background-01: var(--canary-base-chrome-50);
-    --canary-background-02: var(--canary-base-chrome-white);
-    --canary-background-03: var(--canary-base-chrome-white);
+    --canary-background-02: var(--canary-pure-white);
+    --canary-background-03: var(--canary-base-chrome-100);
     --canary-background-04: var(--canary-base-chrome-500) / 0.12;
-    --canary-background-05: var(--canary-accent-500);
-    --canary-background-06: var(--canary-accent-500) / 0.2;
+    --canary-background-05: var(--canary-base-chrome-950);
+    --canary-background-06: var(--canary-base-chrome-850);
     --canary-background-07: var(--canary-base-chrome-50);
-    --canary-background-08: var(--canary-base-chrome-white);
+    --canary-background-08: var(--canary-pure-white);
     --canary-background-09: var(--canary-base-chrome-150);
-    --canary-background-10: var(--canary-accent-600);
+    --canary-background-10: var(--canary-base-chrome-850);
     --canary-background-11: var(--canary-base-chrome-200);
     --canary-background-12: var(--canary-base-chrome-150);
     --canary-background-13: var(--canary-base-chrome-600);
     --canary-background-14: var(--canary-base-chrome-200);
-    --canary-background-surface: var(--canary-base-chrome-white);
+    --canary-background-surface: var(--canary-pure-white);
     --canary-background-accent: var(--canary-accent-500);
     --canary-background-danger: var(--canary-red-50);
     --canary-background-success: var(--canary-green-50);
@@ -564,9 +1091,9 @@
     --canary-border-04: var(--canary-base-chrome-150);
     --canary-border-05: var(--canary-base-chrome-150);
     --canary-border-06: var(--canary-base-chrome-600);
-    --canary-border-07: var(--canary-base-chrome-white);
+    --canary-border-07: var(--canary-pure-white);
     --canary-border-08: var(--canary-base-chrome-150);
-    --canary-border-09: var(--canary-accent-400);
+    --canary-border-09: var(--canary-base-chrome-1000);
     --canary-border-10: var(--canary-base-chrome-150);
     --canary-border-danger: var(--canary-red-400);
     --canary-border-success: var(--canary-green-400);
@@ -575,15 +1102,15 @@
 
     /* Icons */
     --canary-icon-01: var(--canary-base-chrome-600);
-    --canary-icon-02: var(--canary-base-chrome-black);
-    --canary-icon-03: var(--canary-base-chrome-850);
-    --canary-icon-04: var(--canary-base-chrome-600);
-    --canary-icon-05: var(--canary-base-chrome-white);
+    --canary-icon-02: var(--canary-base-chrome-1000);
+    --canary-icon-03: var(--canary-base-chrome-800);
+    --canary-icon-04: var(--canary-base-chrome-500);
+    --canary-icon-05: var(--canary-pure-white);
     --canary-icon-06: var(--canary-base-chrome-200);
-    --canary-icon-07: var(--canary-base-chrome-850);
-    --canary-icon-08: var(--canary-base-chrome-black);
-    --canary-icon-09: var(--canary-base-chrome-600);
-    --canary-icon-10: var(--canary-base-chrome-white);
+    --canary-icon-07: var(--canary-base-chrome-800);
+    --canary-icon-08: var(--canary-base-chrome-1000);
+    --canary-icon-09: var(--canary-base-chrome-500);
+    --canary-icon-10: var(--canary-pure-white);
     --canary-icon-danger: var(--canary-red-500);
     --canary-icon-alert: var(--canary-amber-700);
     --canary-icon-success: var(--canary-green-600);
@@ -628,7 +1155,7 @@
     --canary-tag-background-red-02: var(--canary-red-100);
 
     /* Labels */
-    --canary-label-background-black-01: hsla(var(--canary-base-chrome-white) / 0.7);
+    --canary-label-background-black-01: hsla(var(--canary-pure-white) / 0.7);
     --canary-label-background-blue-01: hsla(var(--canary-accent-100));
     --canary-label-background-brown-01: hsla(var(--canary-brown-100));
     --canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
@@ -677,17 +1204,18 @@
     --shadow-sm: var(--canary-base-chrome-100);
 
     --canary-widget-bg-gradient-from: var(--canary-base-chrome-100) / 1;
-    --canary-widget-bg-gradient-to: var(--canary-base-chrome-white) / 1;
+    --canary-widget-bg-gradient-to: var(--canary-pure-white) / 1;
     --canary-widget-number-gradient-from: var(--canary-base-chrome-500) / 1;
     --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 1;
     --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150) / 1;
-    --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-white) / 1;
+    --canary-widget-number-bg-gradient-to: var(--canary-pure-white) / 1;
 
     /* Graph */
-    --canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
-    --canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
-    --canary-graph-gradient-executing-1: hsla(var(--canary-accent-200) / 0.2);
-    --canary-graph-gradient-executing-2: hsla(var(--canary-accent-500));
+    --canary-graph-gradient-bg-1: hsla(var(--canary-pure-white) / 0.5);
+    --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-100) / 0.3);
+    --canary-graph-gradient-executing-1: hsla(var(--canary-amber-150));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-amber-600));
+    --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
 
     /* Navigation gradients */
     /* We’ve removed them until we find a better solution in the design.
@@ -721,32 +1249,32 @@
   .light-prot-std {
     --canary-background: var(--canary-base-chrome-50);
     --canary-foreground: var(--canary-base-chrome-850);
-    --canary-card: var(--canary-base-chrome-white);
-    --canary-card-foreground: var(--canary-base-chrome-black);
-    --canary-popover: var(--canary-base-chrome-white);
-    --canary-popover-foreground: var(--canary-base-chrome-black);
-    --canary-primary: var(--canary-base-chrome-black);
+    --canary-card: var(--canary-pure-white);
+    --canary-card-foreground: var(--canary-base-chrome-1000);
+    --canary-popover: var(--canary-pure-white);
+    --canary-popover-foreground: var(--canary-base-chrome-1000);
+    --canary-primary: var(--canary-base-chrome-1000);
     --canary-primary-background: var(--canary-base-chrome-50);
     --canary-primary-foreground: var(--canary-base-chrome-850);
     --canary-primary-muted: var(--canary-base-chrome-850);
-    --canary-primary-accent: var(--canary-accent-500);
+    --canary-primary-accent: var(--canary-base-chrome-850);
     --canary-secondary: var(--canary-base-chrome-100);
-    --canary-secondary-foreground: var(--canary-base-chrome-black);
-    --canary-secondary-background: var(--canary-base-chrome-white);
+    --canary-secondary-foreground: var(--canary-base-chrome-1000);
+    --canary-secondary-background: var(--canary-pure-white);
     --canary-secondary-muted: var(--canary-base-chrome-600);
     --canary-tertiary: var(--canary-base-chrome-100);
-    --canary-tertiary-foreground: var(--canary-base-chrome-black);
+    --canary-tertiary-foreground: var(--canary-base-chrome-1000);
     --canary-tertiary-background: var(--canary-base-chrome-600);
     --canary-muted: var(--canary-base-chrome-100);
     --canary-muted-foreground: var(--canary-base-chrome-600);
     --canary-accent: var(--canary-base-chrome-100);
-    --canary-accent-foreground: var(--canary-base-chrome-black);
+    --canary-accent-foreground: var(--canary-base-chrome-1000);
     --canary-destructive: var(--canary-yellow-600);
-    --canary-destructive-foreground: var(--canary-base-chrome-white);
+    --canary-destructive-foreground: var(--canary-pure-white);
     --canary-border: var(--canary-base-chrome-150);
     --canary-border-background: var(--canary-base-chrome-150);
     --canary-input: var(--canary-base-chrome-150);
-    --canary-input-background: var(--canary-base-chrome-white);
+    --canary-input-background: var(--canary-pure-white);
     --canary-ring: var(--canary-accent-400);
 
     --canary-radius: 0.5rem;
@@ -780,14 +1308,14 @@
 
     /* New colors design variables */
     /* Text */
-    --canary-foreground-01: var(--canary-base-chrome-black);
-    --canary-foreground-02: var(--canary-base-chrome-850);
+    --canary-foreground-01: var(--canary-base-chrome-1000);
+    --canary-foreground-02: var(--canary-base-chrome-800);
     --canary-foreground-03: var(--canary-base-chrome-700);
     --canary-foreground-04: var(--canary-base-chrome-600);
-    --canary-foreground-05: var(--canary-base-chrome-600);
-    --canary-foreground-06: var(--canary-base-chrome-white);
+    --canary-foreground-05: var(--canary-base-chrome-500);
+    --canary-foreground-06: var(--canary-pure-white);
     --canary-foreground-07: var(--canary-base-chrome-600);
-    --canary-foreground-08: var(--canary-base-chrome-850);
+    --canary-foreground-08: var(--canary-base-chrome-800);
     --canary-foreground-09: var(--canary-base-chrome-600);
     --canary-foreground-10: var(--canary-base-chrome-200);
     --canary-foreground-danger: var(--canary-yellow-700);
@@ -797,20 +1325,20 @@
 
     /* Backgrounds */
     --canary-background-01: var(--canary-base-chrome-50);
-    --canary-background-02: var(--canary-base-chrome-white);
-    --canary-background-03: var(--canary-base-chrome-white);
+    --canary-background-02: var(--canary-pure-white);
+    --canary-background-03: var(--canary-base-chrome-100);
     --canary-background-04: var(--canary-base-chrome-500) / 0.12;
-    --canary-background-05: var(--canary-accent-500);
-    --canary-background-06: var(--canary-accent-500) / 0.2;
+    --canary-background-05: var(--canary-base-chrome-950);
+    --canary-background-06: var(--canary-base-chrome-850);
     --canary-background-07: var(--canary-base-chrome-50);
-    --canary-background-08: var(--canary-base-chrome-white);
+    --canary-background-08: var(--canary-pure-white);
     --canary-background-09: var(--canary-base-chrome-150);
-    --canary-background-10: var(--canary-accent-500);
+    --canary-background-10: var(--canary-base-chrome-850);
     --canary-background-11: var(--canary-base-chrome-200);
     --canary-background-12: var(--canary-base-chrome-150);
     --canary-background-13: var(--canary-base-chrome-600);
     --canary-background-14: var(--canary-base-chrome-200);
-    --canary-background-surface: var(--canary-base-chrome-white);
+    --canary-background-surface: var(--canary-pure-white);
     --canary-background-accent: var(--canary-accent-500);
     --canary-background-danger: var(--canary-yellow-50);
     --canary-background-success: var(--canary-indigo-50);
@@ -823,9 +1351,9 @@
     --canary-border-04: var(--canary-base-chrome-150);
     --canary-border-05: var(--canary-base-chrome-150);
     --canary-border-06: var(--canary-base-chrome-600);
-    --canary-border-07: var(--canary-base-chrome-white);
+    --canary-border-07: var(--canary-pure-white);
     --canary-border-08: var(--canary-base-chrome-150);
-    --canary-border-09: var(--canary-accent-400);
+    --canary-border-09: var(--canary-base-chrome-1000);
     --canary-border-10: var(--canary-base-chrome-150);
     --canary-border-danger: var(--canary-yellow-500);
     --canary-border-success: var(--canary-indigo-400);
@@ -834,15 +1362,15 @@
 
     /* Icons */
     --canary-icon-01: var(--canary-base-chrome-600);
-    --canary-icon-02: var(--canary-base-chrome-black);
+    --canary-icon-02: var(--canary-base-chrome-1000);
     --canary-icon-03: var(--canary-base-chrome-850);
     --canary-icon-04: var(--canary-base-chrome-600);
-    --canary-icon-05: var(--canary-base-chrome-white);
+    --canary-icon-05: var(--canary-pure-white);
     --canary-icon-06: var(--canary-base-chrome-200);
     --canary-icon-07: var(--canary-base-chrome-850);
-    --canary-icon-08: var(--canary-base-chrome-black);
+    --canary-icon-08: var(--canary-base-chrome-1000);
     --canary-icon-09: var(--canary-base-chrome-600);
-    --canary-icon-10: var(--canary-base-chrome-white);
+    --canary-icon-10: var(--canary-pure-white);
     --canary-icon-danger: var(--canary-yellow-700);
     --canary-icon-alert: var(--canary-amber-700);
     --canary-icon-success: var(--canary-indigo-600);
@@ -887,7 +1415,7 @@
     --canary-tag-background-red-02: var(--canary-yellow-100);
 
     /* Labels */
-    --canary-label-background-black-01: hsla(var(--canary-base-chrome-white) / 0.7);
+    --canary-label-background-black-01: hsla(var(--canary-pure-white) / 0.7);
     --canary-label-background-blue-01: hsla(var(--canary-accent-100));
     --canary-label-background-brown-01: hsla(var(--canary-brown-100));
     --canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
@@ -898,22 +1426,22 @@
     --canary-label-background-orange-01: hsla(var(--canary-orange-100));
     --canary-label-background-pink-01: hsla(var(--canary-pink-100));
     --canary-label-background-purple-01: hsla(var(--canary-purple-100));
-    --canary-label-background-red-01: var(--canary-yellow-100);
-    --canary-label-background-violet-01: var(--canary-violet-100);
-    --canary-label-background-yellow-01: var(--canary-yellow-100);
-    --canary-label-foreground-blue-01: var(--canary-accent-700);
-    --canary-label-foreground-brown-01: var(--canary-brown-700);
-    --canary-label-foreground-cyan-01: var(--canary-cyan-700);
-    --canary-label-foreground-green-01: var(--canary-indigo-700);
-    --canary-label-foreground-indigo-01: var(--canary-indigo-700);
-    --canary-label-foreground-lime-01: var(--canary-lime-700);
-    --canary-label-foreground-mint-01: var(--canary-mint-700);
-    --canary-label-foreground-orange-01: var(--canary-orange-700);
-    --canary-label-foreground-pink-01: var(--canary-pink-700);
-    --canary-label-foreground-purple-01: var(--canary-purple-700);
-    --canary-label-foreground-red-01: var(--canary-yellow-700);
-    --canary-label-foreground-violet-01: var(--canary-violet-700);
-    --canary-label-foreground-yellow-01: var(--canary-yellow-700);
+    --canary-label-background-red-01: hsla(var(--canary-yellow-100));
+    --canary-label-background-violet-01: hsla(var(--canary-violet-100));
+    --canary-label-background-yellow-01: hsla(var(--canary-yellow-100));
+    --canary-label-foreground-blue-01: hsla(var(--canary-accent-700));
+    --canary-label-foreground-brown-01: hsla(var(--canary-brown-700));
+    --canary-label-foreground-cyan-01: hsla(var(--canary-cyan-700));
+    --canary-label-foreground-green-01: hsla(var(--canary-indigo-700));
+    --canary-label-foreground-indigo-01: hsla(var(--canary-indigo-700));
+    --canary-label-foreground-lime-01: hsla(var(--canary-lime-700));
+    --canary-label-foreground-mint-01: hsla(var(--canary-mint-700));
+    --canary-label-foreground-orange-01: hsla(var(--canary-orange-700));
+    --canary-label-foreground-pink-01: hsla(var(--canary-pink-700));
+    --canary-label-foreground-purple-01: hsla(var(--canary-purple-700));
+    --canary-label-foreground-red-01: hsla(var(--canary-yellow-700));
+    --canary-label-foreground-violet-01: hsla(var(--canary-violet-700));
+    --canary-label-foreground-yellow-01: hsla(var(--canary-yellow-700));
 
     /* Button */
     --canary-button-foreground-danger-01: var(--canary-yellow-700);
@@ -936,13 +1464,24 @@
     --shadow-sm: var(--canary-base-chrome-100);
 
     /* Graph */
-    --canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
-    --canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
+    --canary-graph-gradient-bg-1: hsla(var(--canary-pure-white));
+    --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-100) / 0.3);
+    --canary-graph-gradient-executing-1: hsla(var(--canary-amber-100));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-amber-500));
+    --canary-graph-gradient-executing-3: hsla(var(--canary-amber-100));
+    --canary-graph-gradient-executing-4: hsla(var(--canary-amber-100));
+    --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
+
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-100);
+    --canary-widget-bg-gradient-to: var(--canary-pure-white);
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-500);
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600);
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150);
+    --canary-widget-number-bg-gradient-to: var(--canary-pure-white);
   }
 
   .dark,
-  .dark-std-low,
-  .dark-std-std {
+  .dark-std-low {
     --canary-background: var(--canary-grey-6);
     --canary-foreground: var(--canary-grey-94);
     --canary-card: var(--canary-grey-10);
@@ -967,7 +1506,7 @@
     --canary-accent-foreground: var(--canary-white);
     --canary-destructive: var(--canary-red);
     --canary-destructive-foreground: var(--canary-white);
-    --canary-border: var(--canary-grey-15);
+    --canary-border: var(--canary-grey-20);
     --canary-border-background: var(--canary-grey-10);
     --canary-input: var(--canary-grey-15);
     --canary-input-background: var(--canary-grey-6);
@@ -1172,38 +1711,43 @@
     /* Graph */
     --canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
     --canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
+    --canary-graph-gradient-executing-1: hsla(var(--canary-orange-55));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-orange-55) / 0.2);
+    --canary-graph-gradient-executing-3: hsla(var(--canary-orange-55));
+    --canary-graph-gradient-executing-4: hsla(var(--canary-orange-55));
+    --canary-graph-viewport-bg: hsla(var(--canary-grey-12));
   }
 
-  .dark-std-high {
-    --canary-background: var(--canary-base-chrome-black);
-    --canary-foreground: var(--canary-base-chrome-white);
+  .dark-std-std {
+    --canary-background: var(--canary-base-chrome-1000);
+    --canary-foreground: var(--canary-pure-white);
     --canary-card: var(--canary-base-chrome-950);
-    --canary-card-foreground: var(--canary-base-chrome-white);
+    --canary-card-foreground: var(--canary-pure-white);
     --canary-popover: var(--canary-base-chrome-900);
-    --canary-popover-foreground: var(--canary-base-chrome-white);
-    --canary-primary: var(--canary-base-chrome-white);
-    --canary-primary-background: var(--canary-base-chrome-black);
+    --canary-popover-foreground: var(--canary-pure-white);
+    --canary-primary: var(--canary-pure-white);
+    --canary-primary-background: var(--canary-base-chrome-1000);
     --canary-primary-foreground: var(--canary-base-chrome-950);
     --canary-primary-muted: var(--canary-base-chrome-200);
-    --canary-primary-accent: var(--canary-accent-600);
+    --canary-primary-accent: var(--canary-base-chrome-100);
     --canary-secondary: var(--canary-base-chrome-850);
-    --canary-secondary-foreground: var(--canary-base-chrome-white);
+    --canary-secondary-foreground: var(--canary-pure-white);
     --canary-secondary-background: var(--canary-base-chrome-950);
     --canary-secondary-muted: var(--canary-base-chrome-500);
     --canary-tertiary: var(--canary-base-chrome-850);
-    --canary-tertiary-foreground: var(--canary-base-chrome-white);
+    --canary-tertiary-foreground: var(--canary-pure-white);
     --canary-tertiary-background: var(--canary-base-chrome-500);
     --canary-muted: var(--canary-base-chrome-850);
     --canary-muted-foreground: var(--canary-base-chrome-500);
     --canary-accent: var(--canary-base-chrome-850);
-    --canary-accent-foreground: var(--canary-base-chrome-white);
+    --canary-accent-foreground: var(--canary-pure-white);
     --canary-destructive: var(--canary-red-200);
-    --canary-destructive-foreground: var(--canary-base-chrome-black);
+    --canary-destructive-foreground: var(--canary-base-chrome-1000);
     --canary-border: var(--canary-base-chrome-850);
     --canary-border-background: var(--canary-base-chrome-850);
     --canary-input: var(--canary-base-chrome-850);
     --canary-input-background: var(--canary-base-chrome-950);
-    --canary-ring: var(--canary-accent-300);
+    --canary-ring: var(--canary-base-chrome-400);
 
     --canary-radius: 0.5rem;
     --canary-success: var(--canary-green-200);
@@ -1236,12 +1780,12 @@
 
     /* New colors design variables */
     /* Text */
-    --canary-foreground-01: var(--canary-base-chrome-white);
+    --canary-foreground-01: var(--canary-pure-white);
     --canary-foreground-02: var(--canary-base-chrome-200);
     --canary-foreground-03: var(--canary-base-chrome-400);
     --canary-foreground-04: var(--canary-base-chrome-500);
     --canary-foreground-05: var(--canary-base-chrome-500);
-    --canary-foreground-06: var(--canary-base-chrome-white);
+    --canary-foreground-06: var(--canary-base-chrome-1000);
     --canary-foreground-07: var(--canary-base-chrome-500);
     --canary-foreground-08: var(--canary-base-chrome-200);
     --canary-foreground-09: var(--canary-base-chrome-400);
@@ -1249,19 +1793,19 @@
     --canary-foreground-danger: var(--canary-red-200);
     --canary-foreground-alert: var(--canary-amber-200);
     --canary-foreground-success: var(--canary-green-200);
-    --canary-foreground-accent: var(--canary-blue-60);
+    --canary-foreground-accent: var(--canary-accent-200);
 
     /* Backgrounds */
-    --canary-background-01: var(--canary-base-chrome-black);
+    --canary-background-01: var(--canary-base-chrome-1000);
     --canary-background-02: var(--canary-base-chrome-950);
-    --canary-background-03: var(--canary-base-chrome-950);
+    --canary-background-03: var(--canary-base-chrome-900);
     --canary-background-04: var(--canary-base-chrome-850) / 0.5;
-    --canary-background-05: var(--canary-accent-600);
-    --canary-background-06: var(--canary-accent-600) / 0.2;
-    --canary-background-07: var(--canary-base-chrome-black);
-    --canary-background-08: var(--canary-base-chrome-900);
+    --canary-background-05: var(--canary-base-chrome-100);
+    --canary-background-06: var(--canary-base-chrome-150);
+    --canary-background-07: var(--canary-base-chrome-1000);
+    --canary-background-08: var(--canary-base-chrome-850);
     --canary-background-09: var(--canary-base-chrome-850);
-    --canary-background-10: var(--canary-accent-500);
+    --canary-background-10: var(--canary-base-chrome-150);
     --canary-background-11: var(--canary-base-chrome-800);
     --canary-background-12: var(--canary-base-chrome-800);
     --canary-background-13: var(--canary-base-chrome-400);
@@ -1276,12 +1820,12 @@
     --canary-border-01: var(--canary-base-chrome-850);
     --canary-border-02: var(--canary-base-chrome-850);
     --canary-border-03: var(--canary-base-chrome-400);
-    --canary-border-04: var(--canary-base-chrome-850);
+    --canary-border-04: var(--canary-base-chrome-850) / 0.6;
     --canary-border-05: var(--canary-base-chrome-850);
     --canary-border-06: var(--canary-base-chrome-400);
-    --canary-border-07: var(--canary-base-chrome-white);
+    --canary-border-07: var(--canary-pure-white);
     --canary-border-08: var(--canary-base-chrome-850);
-    --canary-border-09: var(--canary-accent-300);
+    --canary-border-09: var(--canary-base-chrome-50);
     --canary-border-10: var(--canary-base-chrome-850);
     --canary-border-danger: var(--canary-red-300);
     --canary-border-success: var(--canary-green-300);
@@ -1290,15 +1834,15 @@
 
     /* Icons */
     --canary-icon-01: var(--canary-base-chrome-400);
-    --canary-icon-02: var(--canary-base-chrome-white);
+    --canary-icon-02: var(--canary-pure-white);
     --canary-icon-03: var(--canary-base-chrome-200);
     --canary-icon-04: var(--canary-base-chrome-500);
-    --canary-icon-05: var(--canary-base-chrome-black);
+    --canary-icon-05: var(--canary-base-chrome-1000);
     --canary-icon-06: var(--canary-base-chrome-700);
     --canary-icon-07: var(--canary-base-chrome-200);
-    --canary-icon-08: var(--canary-base-chrome-white);
+    --canary-icon-08: var(--canary-pure-white);
     --canary-icon-09: var(--canary-base-chrome-400);
-    --canary-icon-10: var(--canary-base-chrome-black);
+    --canary-icon-10: var(--canary-base-chrome-1000);
     --canary-icon-danger: var(--canary-red-200);
     --canary-icon-alert: var(--canary-amber-200);
     --canary-icon-success: var(--canary-green-200);
@@ -1343,7 +1887,7 @@
     --canary-tag-background-red-02: var(--canary-red-900);
 
     /* Labels */
-    --canary-label-background-black-01: hsla(var(--canary-base-chrome-black) / 0.45);
+    --canary-label-background-black-01: hsla(var(--canary-base-chrome-1000) / 0.45);
     --canary-label-background-blue-01: hsl(var(--canary-accent-900));
     --canary-label-background-brown-01: hsl(var(--canary-brown-900));
     --canary-label-background-cyan-01: hsl(var(--canary-cyan-900));
@@ -1386,14 +1930,288 @@
     --canary-button-border-disabled-01: var(--canary-base-chrome-850);
 
     /* Box shadow colors */
-    --canary-box-shadow-1: var(--canary-base-chrome-black) / 0.8;
-    --canary-box-shadow-2: var(--canary-base-chrome-black) / 0.6;
-    --canary-box-shadow-pagination: var(--canary-base-chrome-black) / 0.5;
-    --shadow-sm: 0px 1px 6px 0px var(--canary-base-chrome-black);
+    --canary-box-shadow-1: var(--canary-base-chrome-1000) / 0.8;
+    --canary-box-shadow-2: var(--canary-base-chrome-1000) / 0.6;
+    --canary-box-shadow-pagination: var(--canary-base-chrome-1000) / 0.5;
+    --shadow-sm: 0px 1px 6px 0px var(--canary-base-chrome-1000);
 
     /* Graph */
-    --canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
-    --canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
+    --canary-graph-gradient-bg-1: hsla(var(--canary-base-chrome-850));
+    --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-900));
+    --canary-graph-gradient-executing-1: hsla(var(--canary-amber-200));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-850));
+    --canary-graph-gradient-executing-3: hsla(var(--canary-amber-200));
+    --canary-graph-gradient-executing-4: hsla(var(--canary-amber-200));
+    --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-850) / 0.6);
+
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-200) / 1;
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 0;
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
+    --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
+
+    /* Navigation gradients */
+    /* We’ve removed them until we find a better solution in the design.
+    --canary-nav-gradient-1-1: var();
+    --canary-nav-gradient-1-2: var();
+    --canary-nav-gradient-2-1: var();
+    --canary-nav-gradient-2-2: var();
+    --canary-nav-gradient-2-3: var();
+    --canary-nav-gradient-3-1: var();
+    --canary-nav-gradient-3-2: var();
+    --canary-nav-gradient-4-1: var();
+    --canary-nav-gradient-4-2: var();
+    --canary-nav-item-gradient-1: var();
+    --canary-nav-item-gradient-2: var();
+    --canary-nav-item-gradient-3: var();
+    --canary-nav-item-gradient-4: var();
+    --canary-nav-item-gradient-5: var();
+    --canary-nav-item-gradient-6: var();
+   */
+
+    /* Selected tab bg element*/
+    /* We’ve removed them until we find a better solution in the design.
+   --canary-tab-item-gradient-from: var();
+   --canary-tab-item-gradient-to: var();
+   --canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
+     hsla(var(--canary-tab-item-gradient-to));
+   --canary-tab-background-gradient: radial-gradient(closest-side, var(--canary-tab-item-gradient-stops));
+   */
+  }
+
+  .dark-std-high {
+    --canary-background: var(--canary-base-chrome-1000);
+    --canary-foreground: var(--canary-pure-white);
+    --canary-card: var(--canary-base-chrome-900);
+    --canary-card-foreground: var(--canary-pure-white);
+    --canary-popover: var(--canary-base-chrome-900);
+    --canary-popover-foreground: var(--canary-pure-white);
+    --canary-primary: var(--canary-base-chrome-100);
+    --canary-primary-background: var(--canary-base-chrome-1000);
+    --canary-primary-foreground: var(--canary-base-chrome-950);
+    --canary-primary-muted: var(--canary-base-chrome-200);
+    --canary-primary-accent: var(--canary-base-chrome-100);
+    --canary-secondary: var(--canary-base-chrome-850);
+    --canary-secondary-foreground: var(--canary-pure-white);
+    --canary-secondary-background: var(--canary-base-chrome-950);
+    --canary-secondary-muted: var(--canary-base-chrome-400);
+    --canary-tertiary: var(--canary-base-chrome-850);
+    --canary-tertiary-foreground: var(--canary-pure-white);
+    --canary-tertiary-background: var(--canary-base-chrome-500);
+    --canary-muted: var(--canary-base-chrome-850);
+    --canary-muted-foreground: var(--canary-base-chrome-400);
+    --canary-accent: var(--canary-base-chrome-850);
+    --canary-accent-foreground: var(--canary-pure-white);
+    --canary-destructive: var(--canary-red-200);
+    --canary-destructive-foreground: var(--canary-base-chrome-1000);
+    --canary-border: var(--canary-base-chrome-700);
+    --canary-border-background: var(--canary-base-chrome-700);
+    --canary-input: var(--canary-base-chrome-700);
+    --canary-input-background: var(--canary-base-chrome-900);
+    --canary-ring: var(--canary-base-chrome-200);
+
+    --canary-radius: 0.5rem;
+    --canary-success: var(--canary-green-200);
+    --canary-error: var(--canary-red-200);
+    --canary-warning: var(--canary-amber-200);
+    --canary-emphasis: var(--canary-accent-200);
+    --canary-ai: var(--canary-purple-200);
+    --canary-ai-button-stop-1: var(--canary-yellow-100);
+    --canary-ai-button-stop-2: var(--canary-pink-150);
+    --canary-ai-button-stop-3: var(--canary-purple-300);
+    --canary-ai-button-stop-4: var(--canary-cyan-200);
+
+    --diff-grey: hsl(var(--canary-base-chrome-950));
+    --diff-add-content--: hsl(var(--canary-green-950));
+    --diff-del-content--: hsl(var(--canary-red-950));
+    --diff-add-lineNumber--: hsl(var(--canary-green-900));
+    --diff-del-lineNumber--: hsl(var(--canary-red-900));
+    --diff-plain-content--: hsl(var(--canary-background-01));
+    --diff-expand-content--: hsl(var(--canary-background-01));
+    --diff-plain-lineNumber--: hsl(var(--canary-background-01));
+    --diff-plain-lineNumber-color--: hsl(var(--canary-base-chrome-200));
+    --diff-hunk-content--: hsl(var(--canary-accent-950));
+    --diff-hunk-lineNumber--: hsla(var(--canary-accent-900) / 0.5);
+    --diff-add-content-highlight--: hsl(var(--canary-green-900));
+    --diff-del-content-highlight--: hsl(var(--canary-red-900));
+    --diff-add-widget--: hsl(var(--canary-base-chrome-900));
+    --diff-add-widget-color--: hsl(var(--canary-base-chrome-200));
+    --diff-empty-content--: hsl(var(--canary-background-01));
+    --diff-hunk-content-color--: hsl(var(--canary-base-chrome-200));
+
+    /* New colors design variables */
+    /* Text */
+    --canary-foreground-01: var(--canary-pure-white);
+    --canary-foreground-02: var(--canary-base-chrome-100);
+    --canary-foreground-03: var(--canary-base-chrome-200);
+    --canary-foreground-04: var(--canary-base-chrome-300);
+    --canary-foreground-05: var(--canary-base-chrome-300);
+    --canary-foreground-06: var(--canary-base-chrome-1000);
+    --canary-foreground-07: var(--canary-base-chrome-400);
+    --canary-foreground-08: var(--canary-base-chrome-150);
+    --canary-foreground-09: var(--canary-base-chrome-400);
+    --canary-foreground-10: var(--canary-base-chrome-700);
+    --canary-foreground-danger: var(--canary-red-200);
+    --canary-foreground-alert: var(--canary-amber-200);
+    --canary-foreground-success: var(--canary-green-200);
+    --canary-foreground-accent: var(--canary-accent-200);
+
+    /* Backgrounds */
+    --canary-background-01: var(--canary-base-chrome-1000);
+    --canary-background-02: var(--canary-base-chrome-950);
+    --canary-background-03: var(--canary-base-chrome-900);
+    --canary-background-04: var(--canary-base-chrome-400) / 0.1;
+    --canary-background-05: var(--canary-base-chrome-100);
+    --canary-background-06: var(--canary-base-chrome-150);
+    --canary-background-07: var(--canary-base-chrome-1000);
+    --canary-background-08: var(--canary-base-chrome-850);
+    --canary-background-09: var(--canary-base-chrome-850);
+    --canary-background-10: var(--canary-base-chrome-150);
+    --canary-background-11: var(--canary-base-chrome-800);
+    --canary-background-12: var(--canary-base-chrome-800);
+    --canary-background-13: var(--canary-base-chrome-400);
+    --canary-background-14: var(--canary-base-chrome-500);
+    --canary-background-surface: var(--canary-base-chrome-900);
+    --canary-background-accent: var(--canary-accent-600);
+    --canary-background-danger: var(--canary-red-950);
+    --canary-background-success: var(--canary-green-950);
+    --canary-toast-background-danger: var(--canary-red-600);
+
+    /* Borders */
+    --canary-border-01: var(--canary-base-chrome-700);
+    --canary-border-02: var(--canary-base-chrome-700);
+    --canary-border-03: var(--canary-base-chrome-200);
+    --canary-border-04: var(--canary-base-chrome-700) / 0.6;
+    --canary-border-05: var(--canary-base-chrome-700);
+    --canary-border-06: var(--canary-base-chrome-400);
+    --canary-border-07: var(--canary-pure-white);
+    --canary-border-08: var(--canary-base-chrome-700);
+    --canary-border-09: var(--canary-pure-white);
+    --canary-border-10: var(--canary-base-chrome-700);
+    --canary-border-danger: var(--canary-red-300);
+    --canary-border-success: var(--canary-green-300);
+    --canary-border-accent: var(--canary-accent-500);
+    --canary-border-alert: var(--canary-amber-400);
+
+    /* Icons */
+    --canary-icon-01: var(--canary-base-chrome-150);
+    --canary-icon-02: var(--canary-pure-white);
+    --canary-icon-03: var(--canary-base-chrome-150);
+    --canary-icon-04: var(--canary-base-chrome-200);
+    --canary-icon-05: var(--canary-base-chrome-1000);
+    --canary-icon-06: var(--canary-base-chrome-500);
+    --canary-icon-07: var(--canary-base-chrome-150);
+    --canary-icon-08: var(--canary-pure-white);
+    --canary-icon-09: var(--canary-base-chrome-150);
+    --canary-icon-10: var(--canary-base-chrome-1000);
+    --canary-icon-danger: var(--canary-red-200);
+    --canary-icon-alert: var(--canary-amber-200);
+    --canary-icon-success: var(--canary-green-200);
+    --canary-icon-accent: var(--canary-accent-200);
+    --canary-icon-merged: var(--canary-purple-200);
+
+    /* Tags */
+    /* --gray */
+    --canary-tag-foreground-gray-01: var(--canary-base-chrome-200);
+    --canary-tag-border-gray-01: var(--canary-base-chrome-800);
+    --canary-tag-background-gray-01: var(--canary-base-chrome-900);
+    --canary-tag-background-gray-02: var(--canary-base-chrome-850);
+    /* --purple */
+    --canary-tag-foreground-purple-01: var(--canary-purple-200);
+    --canary-tag-border-purple-01: var(--canary-purple-850);
+    --canary-tag-background-purple-01: var(--canary-purple-950);
+    --canary-tag-background-purple-02: var(--canary-purple-900);
+    /* --blue */
+    --canary-tag-foreground-blue-01: var(--canary-accent-200);
+    --canary-tag-border-blue-01: var(--canary-accent-850);
+    --canary-tag-background-blue-01: var(--canary-accent-950);
+    --canary-tag-background-blue-02: var(--canary-accent-950);
+    /* --mint */
+    --canary-tag-foreground-mint-01: var(--canary-green-200);
+    --canary-tag-border-mint-01: var(--canary-green-850);
+    --canary-tag-background-mint-01: var(--canary-green-950);
+    --canary-tag-background-mint-02: var(--canary-green-900);
+    /* --amber */
+    --canary-tag-foreground-amber-01: var(--canary-amber-200);
+    --canary-tag-border-amber-01: var(--canary-amber-850);
+    --canary-tag-background-amber-01: var(--canary-amber-950);
+    --canary-tag-background-amber-02: var(--canary-amber-900);
+    /* --peach */
+    --canary-tag-foreground-peach-01: var(--canary-peach-200);
+    --canary-tag-border-peach-01: var(--canary-peach-850);
+    --canary-tag-background-peach-01: var(--canary-peach-950);
+    --canary-tag-background-peach-02: var(--canary-peach-900);
+    /* --red */
+    --canary-tag-foreground-red-01: var(--canary-red-200);
+    --canary-tag-border-red-01: var(--canary-red-850);
+    --canary-tag-background-red-01: var(--canary-red-950);
+    --canary-tag-background-red-02: var(--canary-red-900);
+
+    /* Labels */
+    --canary-label-background-black-01: hsla(var(--canary-base-chrome-1000) / 0.45);
+    --canary-label-background-blue-01: hsl(var(--canary-accent-900));
+    --canary-label-background-brown-01: hsl(var(--canary-brown-900));
+    --canary-label-background-cyan-01: hsl(var(--canary-cyan-900));
+    --canary-label-background-green-01: hsl(var(--canary-green-900));
+    --canary-label-background-indigo-01: hsl(var(--canary-indigo-900));
+    --canary-label-background-lime-01: hsl(var(--canary-lime-900));
+    --canary-label-background-mint-01: hsl(var(--canary-mint-900));
+    --canary-label-background-orange-01: hsl(var(--canary-orange-900));
+    --canary-label-background-pink-01: hsl(var(--canary-pink-900));
+    --canary-label-background-purple-01: hsl(var(--canary-purple-900));
+    --canary-label-background-red-01: hsl(var(--canary-red-900));
+    --canary-label-background-violet-01: hsl(var(--canary-violet-900));
+    --canary-label-background-yellow-01: hsl(var(--canary-yellow-900));
+    --canary-label-foreground-blue-01: hsl(var(--canary-accent-300));
+    --canary-label-foreground-brown-01: hsl(var(--canary-brown-300));
+    --canary-label-foreground-cyan-01: hsl(var(--canary-cyan-300));
+    --canary-label-foreground-green-01: hsl(var(--canary-green-300));
+    --canary-label-foreground-indigo-01: hsl(var(--canary-indigo-300));
+    --canary-label-foreground-lime-01: hsl(var(--canary-lime-300));
+    --canary-label-foreground-mint-01: hsl(var(--canary-mint-300));
+    --canary-label-foreground-orange-01: hsl(var(--canary-orange-300));
+    --canary-label-foreground-pink-01: hsl(var(--canary-pink-300));
+    --canary-label-foreground-purple-01: hsl(var(--canary-purple-300));
+    --canary-label-foreground-red-01: hsl(var(--canary-red-300));
+    --canary-label-foreground-violet-01: hsl(var(--canary-violet-300));
+    --canary-label-foreground-yellow-01: hsl(var(--canary-yellow-300));
+
+    /* Button */
+    --canary-button-foreground-danger-01: var(--canary-red-200);
+    --canary-button-background-danger-01: var(--canary-red-950);
+    --canary-button-background-danger-02: var(--canary-red-900);
+    --canary-button-background-danger-03: var(--canary-red-950);
+    --canary-button-border-danger-01: var(--canary-red-850);
+    --canary-button-foreground-success-01: var(--canary-green-200);
+    --canary-button-background-success-01: var(--canary-green-950);
+    --canary-button-background-success-02: var(--canary-green-900);
+    --canary-button-border-success-01: var(--canary-green-850);
+    --canary-button-foreground-disabled-01: var(--canary-base-chrome-800);
+    --canary-button-background-disabled-01: var(--canary-base-chrome-950);
+    --canary-button-border-disabled-01: var(--canary-base-chrome-850);
+
+    /* Box shadow colors */
+    --canary-box-shadow-1: var(--canary-base-chrome-1000) / 0.8;
+    --canary-box-shadow-2: var(--canary-base-chrome-1000) / 0.6;
+    --canary-box-shadow-pagination: var(--canary-base-chrome-1000) / 0.5;
+    --shadow-sm: 0px 1px 6px 0px var(--canary-base-chrome-1000);
+
+    /* Graph */
+    --canary-graph-gradient-bg-1: hsla(var(--canary-base-chrome-800));
+    --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-900));
+    --canary-graph-gradient-executing-1: hsla(var(--canary-amber-200));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-700));
+    --canary-graph-gradient-executing-3: hsla(var(--canary-amber-200));
+    --canary-graph-gradient-executing-4: hsla(var(--canary-amber-200));
+    --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-700) / 0.5);
+
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-100);
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-500);
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
+    --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
 
     /* Navigation gradients */
     /* We’ve removed them until we find a better solution in the design.
@@ -1425,30 +2243,30 @@
   }
 
   .dark-prot-std {
-    --canary-background: var(--canary-base-chrome-black);
-    --canary-foreground: var(--canary-base-chrome-white);
+    --canary-background: var(--canary-base-chrome-1000);
+    --canary-foreground: var(--canary-pure-white);
     --canary-card: var(--canary-base-chrome-950);
-    --canary-card-foreground: var(--canary-base-chrome-white);
+    --canary-card-foreground: var(--canary-pure-white);
     --canary-popover: var(--canary-base-chrome-900);
-    --canary-popover-foreground: var(--canary-base-chrome-white);
-    --canary-primary: var(--canary-base-chrome-white);
-    --canary-primary-background: var(--canary-base-chrome-black);
+    --canary-popover-foreground: var(--canary-pure-white);
+    --canary-primary: var(--canary-pure-white);
+    --canary-primary-background: var(--canary-base-chrome-1000);
     --canary-primary-foreground: var(--canary-base-chrome-950);
     --canary-primary-muted: var(--canary-base-chrome-200);
-    --canary-primary-accent: var(--canary-accent-600);
+    --canary-primary-accent: var(--canary-base-chrome-100);
     --canary-secondary: var(--canary-base-chrome-850);
-    --canary-secondary-foreground: var(--canary-base-chrome-white);
+    --canary-secondary-foreground: var(--canary-pure-white);
     --canary-secondary-background: var(--canary-base-chrome-950);
     --canary-secondary-muted: var(--canary-base-chrome-500);
     --canary-tertiary: var(--canary-base-chrome-850);
-    --canary-tertiary-foreground: var(--canary-base-chrome-white);
+    --canary-tertiary-foreground: var(--canary-pure-white);
     --canary-tertiary-background: var(--canary-base-chrome-500);
     --canary-muted: var(--canary-base-chrome-850);
     --canary-muted-foreground: var(--canary-base-chrome-500);
     --canary-accent: var(--canary-base-chrome-850);
-    --canary-accent-foreground: var(--canary-base-chrome-white);
+    --canary-accent-foreground: var(--canary-pure-white);
     --canary-destructive: var(--canary-yellow-200);
-    --canary-destructive-foreground: var(--canary-base-chrome-black);
+    --canary-destructive-foreground: var(--canary-base-chrome-1000);
     --canary-border: var(--canary-base-chrome-850);
     --canary-border-background: var(--canary-base-chrome-850);
     --canary-input: var(--canary-base-chrome-850);
@@ -1483,12 +2301,12 @@
     --diff-hunk-content-color--: hsl(var(--canary-base-chrome-200));
     /* New colors design variables */
     /* Text */
-    --canary-foreground-01: var(--canary-base-chrome-white);
+    --canary-foreground-01: var(--canary-pure-white);
     --canary-foreground-02: var(--canary-base-chrome-200);
     --canary-foreground-03: var(--canary-base-chrome-400);
     --canary-foreground-04: var(--canary-base-chrome-500);
     --canary-foreground-05: var(--canary-base-chrome-500);
-    --canary-foreground-06: var(--canary-base-chrome-white);
+    --canary-foreground-06: var(--canary-base-chrome-1000);
     --canary-foreground-07: var(--canary-base-chrome-500);
     --canary-foreground-08: var(--canary-base-chrome-200);
     --canary-foreground-09: var(--canary-base-chrome-400);
@@ -1499,16 +2317,16 @@
     --canary-foreground-accent: var(--canary-accent-200);
 
     /* Backgrounds */
-    --canary-background-01: var(--canary-base-chrome-black);
+    --canary-background-01: var(--canary-base-chrome-1000);
     --canary-background-02: var(--canary-base-chrome-950);
-    --canary-background-03: var(--canary-base-chrome-950);
+    --canary-background-03: var(--canary-base-chrome-900);
     --canary-background-04: var(--canary-base-chrome-850) / 0.5;
-    --canary-background-05: var(--canary-accent-600);
-    --canary-background-06: var(--canary-accent-600) / 0.2;
-    --canary-background-07: var(--canary-base-chrome-black);
-    --canary-background-08: var(--canary-base-chrome-900);
+    --canary-background-05: var(--canary-base-chrome-100);
+    --canary-background-06: var(--canary-base-chrome-150);
+    --canary-background-07: var(--canary-base-chrome-1000);
+    --canary-background-08: var(--canary-base-chrome-850);
     --canary-background-09: var(--canary-base-chrome-850);
-    --canary-background-10: var(--canary-accent-600);
+    --canary-background-10: var(--canary-base-chrome-150);
     --canary-background-11: var(--canary-base-chrome-800);
     --canary-background-12: var(--canary-base-chrome-800);
     --canary-background-13: var(--canary-base-chrome-400);
@@ -1523,12 +2341,12 @@
     --canary-border-01: var(--canary-base-chrome-850);
     --canary-border-02: var(--canary-base-chrome-850);
     --canary-border-03: var(--canary-base-chrome-400);
-    --canary-border-04: var(--canary-base-chrome-850);
+    --canary-border-04: var(--canary-base-chrome-850) / 0.6;
     --canary-border-05: var(--canary-base-chrome-850);
     --canary-border-06: var(--canary-base-chrome-400);
-    --canary-border-07: var(--canary-base-chrome-white);
+    --canary-border-07: var(--canary-pure-white);
     --canary-border-08: var(--canary-base-chrome-850);
-    --canary-border-09: var(--canary-accent-300);
+    --canary-border-09: var(--canary-base-chrome-50);
     --canary-border-10: var(--canary-base-chrome-850);
     --canary-border-danger: var(--canary-yellow-400);
     --canary-border-success: var(--canary-indigo-300);
@@ -1537,15 +2355,15 @@
 
     /* Icons */
     --canary-icon-01: var(--canary-base-chrome-400);
-    --canary-icon-02: var(--canary-base-chrome-white);
+    --canary-icon-02: var(--canary-pure-white);
     --canary-icon-03: var(--canary-base-chrome-200);
     --canary-icon-04: var(--canary-base-chrome-500);
-    --canary-icon-05: var(--canary-base-chrome-white);
+    --canary-icon-05: var(--canary-base-chrome-1000);
     --canary-icon-06: var(--canary-base-chrome-700);
     --canary-icon-07: var(--canary-base-chrome-200);
-    --canary-icon-08: var(--canary-base-chrome-white);
+    --canary-icon-08: var(--canary-pure-white);
     --canary-icon-09: var(--canary-base-chrome-400);
-    --canary-icon-10: var(--canary-base-chrome-black);
+    --canary-icon-10: var(--canary-base-chrome-1000);
     --canary-icon-danger: var(--canary-yellow-200);
     --canary-icon-alert: var(--canary-amber-200);
     --canary-icon-success: var(--canary-indigo-300);
@@ -1590,7 +2408,7 @@
     --canary-tag-background-red-02: var(--canary-yellow-900);
 
     /* Labels */
-    --canary-label-background-black-01: hsla(var(--canary-base-chrome-black) / 0.45);
+    --canary-label-background-black-01: hsla(var(--canary-base-chrome-1000) / 0.45);
     --canary-label-background-blue-01: hsl(var(--canary-accent-900));
     --canary-label-background-brown-01: hsl(var(--canary-brown-900));
     --canary-label-background-cyan-01: hsl(var(--canary-cyan-900));
@@ -1633,13 +2451,25 @@
     --canary-button-border-disabled-01: var(--canary-base-chrome-850);
 
     /* Box shadow colors */
-    --canary-box-shadow-1: var(--canary-base-chrome-black) / 0.8;
-    --canary-box-shadow-2: var(--canary-base-chrome-black) / 0.6;
-    --canary-box-shadow-pagination: var(--canary-base-chrome-black) / 0.5;
-    --shadow-sm: 0px 1px 6px 0px var(--canary-base-chrome-black);
+    --canary-box-shadow-1: var(--canary-base-chrome-1000) / 0.8;
+    --canary-box-shadow-2: var(--canary-base-chrome-1000) / 0.6;
+    --canary-box-shadow-pagination: var(--canary-base-chrome-1000) / 0.5;
+    --shadow-sm: 0px 1px 6px 0px var(--canary-base-chrome-1000);
 
     /* Graph */
-    --canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
-    --canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
+    --canary-graph-gradient-bg-1: hsla(var(--canary-base-chrome-850));
+    --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-900));
+    --canary-graph-gradient-executing-1: hsla(var(--canary-amber-200));
+    --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-850));
+    --canary-graph-gradient-executing-3: hsla(var(--canary-amber-200));
+    --canary-graph-gradient-executing-4: hsla(var(--canary-amber-200));
+    --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-850) / 0.4);
+
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-200) / 1;
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 0;
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
+    --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
   }
 }
diff --git a/packages/ui/src/views/execution/console-logs.tsx b/packages/ui/src/views/execution/console-logs.tsx
index 2337549e0f..85fae88250 100644
--- a/packages/ui/src/views/execution/console-logs.tsx
+++ b/packages/ui/src/views/execution/console-logs.tsx
@@ -1,9 +1,9 @@
 import { FC, useCallback, useEffect, useRef } from 'react'
 
-import { Text } from '@/components'
+import { cn } from '@utils/cn'
 
-import { formatDuration, formatTimestamp } from '../../utils/TimeUtils'
-import { ConsoleLogsProps, LivelogLine } from './types'
+import { formatTimestamp } from '../../utils/TimeUtils'
+import { ConsoleLogsProps, LivelogLine, LivelogLineType } from './types'
 
 export const createStreamedLogLineElement = (log: LivelogLine) => {
   const lineElement = document.createElement('div')
@@ -45,19 +45,19 @@ const ConsoleLogs: FC<ConsoleLogsProps> = ({ logs, query }) => {
   const logText = useCallback(
     (log: string) => {
       if (!query?.length) {
-        return <Text className="ml-2 flex gap-1 font-mono text-sm font-normal text-ring">{log}</Text>
+        return <span className="ml-2 flex gap-1 font-mono text-sm font-normal">{log}</span>
       }
 
       const match = log.match(new RegExp(query, 'i'))
-      if (!match) return <Text className="ml-2 flex gap-1 font-mono text-sm font-normal text-ring">{log}</Text>
+      if (!match) return <span className="ml-2 flex gap-1 font-mono text-sm font-normal">{log}</span>
 
       const matchIndex = match.index ?? 0
       return (
-        <Text className="flex gap-1 font-mono text-sm font-normal text-ring">
+        <span className="flex gap-1 font-mono text-sm font-normal">
           {log.slice(0, matchIndex)}
           <mark>{log.slice(matchIndex, matchIndex + query.length)}</mark>
           {log.slice(matchIndex + query.length)}
-        </Text>
+        </span>
       )
     },
     [query]
@@ -66,17 +66,24 @@ const ConsoleLogs: FC<ConsoleLogsProps> = ({ logs, query }) => {
   if (!logs || !logs.length) return null
 
   return (
-    <div ref={containerRef} className="max-h-[600px] overflow-y-auto">
-      {logs.filter(Boolean).map(({ pos, out, time, duration }, index) => (
-        <div className="mb-2 flex items-baseline justify-between leading-[21px]" key={index}>
-          <div className="flex items-baseline gap-2">
-            {pos !== undefined && pos >= 0 ? <Text className="text-log flex min-w-5 justify-end">{pos}</Text> : null}
-            {time ? <Text className="text-log flex text-sm font-normal">[{formatTimestamp(time * 1_000)}]</Text> : null}
-            {out ? logText(out) : null}
+    <div ref={containerRef} className="overflow-y-auto pl-5">
+      {logs.filter(Boolean).map(({ pos, out, time, type = LivelogLineType.INFO }, index) => (
+        <div className="w-full" key={index}>
+          <div className="flex w-full items-baseline gap-5 font-mono text-15">
+            {pos !== undefined && pos >= 0 ? (
+              <span className="text-log flex min-w-5 justify-end text-foreground-7">{pos}</span>
+            ) : null}
+            <span
+              className={cn(
+                'text-log flex shrink-0 grow font-normal',
+                type === LivelogLineType.ERROR && 'text-foreground-danger bg-tag-background-red-2',
+                type === LivelogLineType.WARNING && 'text-foreground-alert bg-tag-background-amber-2'
+              )}
+            >
+              {time ? `[${formatTimestamp(time * 1_000)}]` : null}
+              {out ? logText(out) : null}
+            </span>
           </div>
-          <Text className="text-log mr-2 text-sm font-normal">
-            {formatDuration(duration && duration > 0 ? duration * 1_000 : 0)}
-          </Text>
         </div>
       ))}
     </div>
diff --git a/packages/ui/src/views/execution/execution-header.tsx b/packages/ui/src/views/execution/execution-header.tsx
index 70ac7e8b2a..d7fb5a7194 100644
--- a/packages/ui/src/views/execution/execution-header.tsx
+++ b/packages/ui/src/views/execution/execution-header.tsx
@@ -1,4 +1,7 @@
-import { Breadcrumb, Text } from '@/components'
+import { FC } from 'react'
+
+import { Icon } from '@/components'
+import { cn } from '@utils/cn'
 import { ExecutionState } from '@views/repo/pull-request'
 
 import { PipelineStatus } from './pipeline-status'
@@ -6,21 +9,24 @@ import { PipelineStatus } from './pipeline-status'
 interface ExecutionHeaderProps {
   commitName: string
   branchName: string
-  title: { number: string; title: string }
-  storage: string
-  storageAverage: string
-  simpleOperation: string
-  advancedOperations: string
-  dataTransfer: string
-  branch: string
-  commit: string
+  title: { number?: string; title: string }
+  storage?: string
+  storageAverage?: string
+  simpleOperation?: string
+  advancedOperations?: string
+  dataTransfer?: string
+  branch?: string
+  commit?: string
   status: ExecutionState
   buildTime: string
-  createdTime: string
+  createdTime?: string
+  startedTime?: string
+  delegateType?: string
   pipelineName: string
+  className?: string
 }
 
-export const ExecutionHeader: React.FC<ExecutionHeaderProps> = ({
+export const ExecutionHeader: FC<ExecutionHeaderProps> = ({
   title,
   storage,
   storageAverage,
@@ -32,72 +38,71 @@ export const ExecutionHeader: React.FC<ExecutionHeaderProps> = ({
   status,
   buildTime,
   createdTime,
-  pipelineName
+  startedTime,
+  delegateType,
+  className
 }) => {
   return (
-    <div className="space-y-4 px-6 py-4">
-      <div className="flex flex-col gap-2">
-        {/* Breadcrumbs */}
-        <Breadcrumb.Root className="mb-4 select-none">
-          <Breadcrumb.List>
-            <Breadcrumb.Item>
-              <Breadcrumb.Link href="/pipelines">Pipeline list</Breadcrumb.Link>
-            </Breadcrumb.Item>
-            <Breadcrumb.Separator />
-            <Breadcrumb.Page>{pipelineName}</Breadcrumb.Page>
-          </Breadcrumb.List>
-        </Breadcrumb.Root>
-
-        {/* <div className="flex gap-2">
-          <Button variant="secondary" size="xs" asChild>
-            <Link to="/">
-              <Icon name="tube-sign" size={12} className="mr-1 text-tertiary-background" />
-              {commitName}
-            </Link>
-          </Button>
-          <span className="text-foreground-1"> to </span>
-          <Button variant="secondary" size="xs" asChild>
-            <Link to="/">
-              <Icon name="branch" size={12} className="mr-1 text-tertiary-background" />
-              {branchName}
-            </Link>
-          </Button>
-        </div> */}
-        <Text size={5}>
-          <span className="text-foreground-5">#{title.number} </span>
-          <span className="text-primary">{title.title}</span>
-        </Text>
+    <div className={cn('px-6 py-5', className)}>
+      <div className="flex flex-col gap-[18px]">
+        <h1 className="max-w-[600px] text-18 font-medium leading-snug">
+          {title.number && <span className="text-foreground-4">#{title.number} </span>}
+          <span className="text-foreground-1">{title.title}</span>
+        </h1>
       </div>
 
-      <div className="flex w-full items-center justify-between ">
+      <div className="mt-6 flex w-full flex-wrap items-center justify-between gap-6 text-14 leading-none">
         <PipelineStatus
           branch={branch}
           commit={commit}
           status={status}
           buildTime={buildTime}
           createdTime={createdTime}
+          startedTime={startedTime}
+          delegateType={delegateType}
         />
-        <div className="flex h-full items-end gap-12">
-          <div className="flex flex-col">
-            <span className="text-foreground-5">Storage</span>
-            <span className="text-primary">{storage}</span>
-          </div>
-          <div className="flex flex-col">
-            <span className="text-foreground-5">Storage (average)</span>
-            <span className="text-primary">{storageAverage}</span>
-          </div>
-          <div className="flex flex-col">
-            <span className="text-foreground-5">Simple Operation</span>
-            <span className="text-primary">{simpleOperation}</span>
-          </div>
-          <div className="flex flex-col">
-            <span className="text-foreground-5">Advanced Operations</span>
-            <span className="text-primary">{advancedOperations}</span>
-          </div>
-          <div className="flex flex-col">
-            <span className="text-foreground-5">Data Transfer</span>
-            <span className="text-primary">{dataTransfer}</span>
-          </div>
+        <div className="flex h-full items-end gap-11">
+          {storage && (
+            <div className="flex flex-col gap-1.5">
+              <span className="leading-tight text-foreground-4">Storage</span>
+              <span className="text-foreground-1">{storage}</span>
+            </div>
+          )}
+          {storageAverage && (
+            <div className="flex flex-col gap-1.5">
+              <span className="leading-tight text-foreground-4">Storage (average)</span>
+              <span className="inline-flex gap-x-1.5 text-foreground-1">
+                {storageAverage} <span className="size-3.5 rounded-full border border-icons-7" />
+              </span>
+            </div>
+          )}
+          {simpleOperation && (
+            <div className="flex flex-col gap-1.5">
+              <span className="leading-tight text-foreground-4">Simple Operation</span>
+              <span className="inline-flex gap-x-1.5 text-foreground-1">
+                {simpleOperation}
+                <Icon className="text-icons-7" name="circle-with-sector" size={14} />
+              </span>
+            </div>
+          )}
+          {advancedOperations && (
+            <div className="flex flex-col gap-1.5">
+              <span className="leading-tight text-foreground-4">Advanced Operations</span>
+              <span className="inline-flex gap-x-1.5 text-foreground-1">
+                {advancedOperations}
+                <Icon className="text-icons-7" name="circle-with-sector" size={14} />
+              </span>
+            </div>
+          )}
+          {dataTransfer && (
+            <div className="flex flex-col gap-1.5">
+              <span className="leading-tight text-foreground-4">Data Transfer</span>
+              <span className="inline-flex gap-x-1.5 text-foreground-1">
+                {dataTransfer}
+                <Icon className="text-icons-7" name="circle-with-sector" size={14} />
+              </span>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/packages/ui/src/views/execution/execution-info.tsx b/packages/ui/src/views/execution/execution-info.tsx
index ff4aa96fc8..2502f4e7db 100644
--- a/packages/ui/src/views/execution/execution-info.tsx
+++ b/packages/ui/src/views/execution/execution-info.tsx
@@ -5,9 +5,10 @@ export const ExecutionInfo: React.FC<ExecutionInfoProps> = ({
   useLogsStore,
   onEdit,
   onDownload,
-  onCopy
+  onCopy,
+  isDrawer = false
 }): React.ReactElement => {
   const { logs } = useLogsStore()
 
-  return <StepExecution logs={logs} onEdit={onEdit} onDownload={onDownload} onCopy={onCopy} />
+  return <StepExecution logs={logs} onEdit={onEdit} onDownload={onDownload} onCopy={onCopy} isDrawer={isDrawer} />
 }
diff --git a/packages/ui/src/views/execution/execution-tree.tsx b/packages/ui/src/views/execution/execution-tree.tsx
index 44a8bdd4fc..344c4ad108 100644
--- a/packages/ui/src/views/execution/execution-tree.tsx
+++ b/packages/ui/src/views/execution/execution-tree.tsx
@@ -1,12 +1,14 @@
+import { FC } from 'react'
+
 import { Tree } from '@/components'
 
 import { ExecutionTreeProps } from './types'
 import { renderTree } from './utils'
 
-export const ExecutionTree: React.FC<ExecutionTreeProps> = props => {
+export const ExecutionTree: FC<ExecutionTreeProps> = props => {
   const { defaultSelectedId, elements } = props
   return (
-    <Tree className="bg-grey-6 overflow-hidden px-3" initialSelectedId={defaultSelectedId} elements={elements}>
+    <Tree className="-mb-3 overflow-hidden pb-3" initialSelectedId={defaultSelectedId} elements={elements}>
       {renderTree(elements, props.onSelectNode)}
     </Tree>
   )
diff --git a/packages/ui/src/views/execution/pipeline-status.tsx b/packages/ui/src/views/execution/pipeline-status.tsx
index 18fea7d8bd..f41c9d063b 100644
--- a/packages/ui/src/views/execution/pipeline-status.tsx
+++ b/packages/ui/src/views/execution/pipeline-status.tsx
@@ -1,83 +1,55 @@
-import { useEffect, useRef, useState } from 'react'
-
 import { ExecutionState } from '@views/repo/pull-request'
 
 import { ExecutionStatus } from './execution-status'
 
 const PipelineStatus = ({
   status,
-  // buildTime,
-  // createdTime,
+  buildTime,
+  createdTime,
   commit,
-  branch
+  branch,
+  delegateType
 }: {
   status: ExecutionState
   buildTime: string
-  createdTime: string
-  commit: string
-  branch: string
+  createdTime?: string
+  commit?: string
+  branch?: string
+  startedTime?: string
+  delegateType?: string
 }) => {
-  const [elapsedTime, setElapsedTime] = useState('00:00')
-  const [createdTimeElapsed, setCreatedTimeElapsed] = useState('00:00')
-  const createdStartRef = useRef<number>(Date.now())
-  const elapsedStartRef = useRef<number>(Date.now())
-
-  const formatTime = (seconds: number) => {
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
-  }
-
-  // Created timer (always counts up from 0)
-  useEffect(() => {
-    createdStartRef.current = Date.now()
-
-    const interval = setInterval(() => {
-      const now = Date.now()
-      const totalDiff = Math.floor((now - createdStartRef.current) / 1000)
-      setCreatedTimeElapsed(formatTime(totalDiff))
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [])
-
-  // Elapsed timer (stops when status changes to success)
-  useEffect(() => {
-    elapsedStartRef.current = Date.now()
-
-    const interval = setInterval(() => {
-      if (status === 'success') return
-
-      const now = Date.now()
-      const elapsedDiff = Math.floor((now - elapsedStartRef.current) / 1000)
-      setElapsedTime(formatTime(elapsedDiff))
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [status])
-
   return (
-    <div className="flex justify-between gap-12">
-      <div className="flex flex-col">
-        <span className="text-foreground-5">Commit</span>
-        <span className="text-primary">{commit}</span>
-      </div>
-      <div className="flex flex-col">
-        <span className="text-foreground-5">Branch</span>
-        <span className="text-primary">{branch}</span>
-      </div>
-      <div className="flex flex-col">
-        <span className="text-foreground-5">Status</span>
+    <div className="flex justify-between gap-11">
+      {commit && (
+        <div className="flex flex-col gap-1.5">
+          <span className="leading-tight text-foreground-4">Commit</span>
+          <span className="text-foreground-1">{commit}</span>
+        </div>
+      )}
+      {branch && (
+        <div className="flex flex-col gap-1.5">
+          <span className="leading-tight text-foreground-4">Branch</span>
+          <span className="text-foreground-1">{branch}</span>
+        </div>
+      )}
+      <div className="flex flex-col gap-1.5">
+        <span className="leading-tight text-foreground-4">Status</span>
         <ExecutionStatus.Badge status={status} minimal />
       </div>
-      <div className="flex flex-col">
-        <span className="text-foreground-5">Build time</span>
-        <span className="text-primary">{elapsedTime}</span>
+      <div className="flex flex-col gap-1.5">
+        <span className="leading-tight text-foreground-4">Build time</span>
+        <span className="text-foreground-1">{buildTime}</span>
       </div>
-      <div className="flex flex-col">
-        <span className="text-foreground-5">Created</span>
-        <span className="text-primary">{createdTimeElapsed}</span>
+      <div className="flex flex-col gap-1.5">
+        <span className="leading-tight text-foreground-4">Created</span>
+        <span className="text-foreground-1">{createdTime}</span>
       </div>
+      {delegateType && (
+        <div className="flex flex-col gap-1.5">
+          <span className="leading-tight text-foreground-4">Delegate type</span>
+          <span className="text-foreground-1">{delegateType}</span>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/packages/ui/src/views/execution/step-execution.tsx b/packages/ui/src/views/execution/step-execution.tsx
index 479086b39d..b08694004b 100644
--- a/packages/ui/src/views/execution/step-execution.tsx
+++ b/packages/ui/src/views/execution/step-execution.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 
 import { Button, Icon, Layout, ScrollArea, SearchBox, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components'
+import { cn } from '@utils/cn'
 
 import ConsoleLogs from './console-logs'
 import { KeyValueTable } from './key-value-table'
@@ -20,26 +21,43 @@ const StepExecutionToolbar: React.FC<
       <SearchBox.Root
         width="full"
         placeholder="Find in logs"
-        className="searchbox h-9"
+        className="searchbox h-8"
         handleChange={handleInputChange}
         value={query}
-      />
+      >
+        <div className="absolute inset-y-0 right-1.5 my-auto flex h-5 w-8 items-center justify-center gap-1 rounded border border-borders-2 bg-background-3">
+          <Icon className="text-icons-3" name="command-symbol" size={10} />
+          <span className="text-12 leading-none">F</span>
+        </div>
+      </SearchBox.Root>
       <div className="flex">
-        <Button variant="outline" size="icon" className="rounded-r-none border-r-0" onClick={onCopy}>
-          <Icon name="clone" className="size-4" />
+        <Button variant="outline" size="icon" className="rounded-r-none border-r-0 border-borders-1" onClick={onCopy}>
+          <Icon name="clone" className="size-4 text-icons-3" />
         </Button>
-        <Button variant="outline" size="icon" className="rounded-none" onClick={onEdit}>
-          <Icon name="edit-pen" className="size-4" />
+        <Button variant="outline" size="icon" className="rounded-none border-borders-1" onClick={onEdit}>
+          <Icon name="edit-pen" className="size-4 text-icons-3" />
         </Button>
-        <Button variant="outline" size="icon" className="rounded-l-none border-l-0" onClick={onDownload}>
-          <Icon name="download" className="size-4" />
+        <Button
+          variant="outline"
+          size="icon"
+          className="rounded-l-none border-l-0 border-borders-1"
+          onClick={onDownload}
+        >
+          <Icon name="download" className="size-4 text-icons-3" />
         </Button>
       </div>
     </Layout.Horizontal>
   )
 }
 
-export const StepExecution: React.FC<StepExecutionProps> = ({ step, logs, onEdit, onDownload, onCopy }) => {
+export const StepExecution: React.FC<StepExecutionProps> = ({
+  step,
+  logs,
+  onEdit,
+  onDownload,
+  onCopy,
+  isDrawer = false
+}) => {
   const inputTable = step?.inputs || []
   const outputTable = step?.outputs || []
   const [query, setQuery] = useState('')
@@ -50,14 +68,27 @@ export const StepExecution: React.FC<StepExecutionProps> = ({ step, logs, onEdit
 
   return (
     <Tabs defaultValue={StepExecutionTab.LOG} className="size-full">
-      <Layout.Vertical>
-        <Layout.Horizontal className="flex justify-between p-4 pb-0">
-          <TabsList className="w-fit">
-            <TabsTrigger className="h-full" value={StepExecutionTab.LOG}>
+      <Layout.Vertical className="space-y-0">
+        <Layout.Horizontal className="flex justify-between py-2.5 pl-5 pr-3.5">
+          <TabsList className="h-8 w-fit gap-x-0.5 border border-borders-1 bg-background-3">
+            <TabsTrigger
+              className="h-6 w-[68px] data-[state=active]:border data-[state=active]:border-borders-2 data-[state=active]:bg-background-9"
+              value={StepExecutionTab.LOG}
+            >
               Logs
             </TabsTrigger>
-            <TabsTrigger value={StepExecutionTab.INPUT}>Inputs</TabsTrigger>
-            <TabsTrigger value={StepExecutionTab.OUTPUT}>Output</TabsTrigger>
+            <TabsTrigger
+              className="h-6 w-[68px] data-[state=active]:border data-[state=active]:border-borders-2 data-[state=active]:bg-background-9"
+              value={StepExecutionTab.INPUT}
+            >
+              Inputs
+            </TabsTrigger>
+            <TabsTrigger
+              className="h-6 w-[68px] data-[state=active]:border data-[state=active]:border-borders-2 data-[state=active]:bg-background-9"
+              value={StepExecutionTab.OUTPUT}
+            >
+              Output
+            </TabsTrigger>
           </TabsList>
           <StepExecutionToolbar
             onEdit={onEdit}
@@ -68,13 +99,13 @@ export const StepExecution: React.FC<StepExecutionProps> = ({ step, logs, onEdit
           />
         </Layout.Horizontal>
         <TabsContent value={StepExecutionTab.LOG}>
-          <ScrollArea className="h-[calc(100vh-23rem)] border-t px-2 pt-4">
+          <ScrollArea className={cn(isDrawer ? 'pt-1.5 h-[calc(100vh-196px)]' : 'pt-4 h-[calc(100vh-278px)] border-t')}>
             <ConsoleLogs logs={logs} query={query} />
           </ScrollArea>
         </TabsContent>
         <TabsContent value={StepExecutionTab.INPUT}>
           {/*here is the execution details of input table */}
-          <ScrollArea className="h-[calc(100vh-23rem)] border-t pt-4">
+          <ScrollArea className="h-[calc(100vh-278px)] border-t pt-4">
             <KeyValueTable
               className="pt-2"
               tableSpec={inputTable}
@@ -85,7 +116,7 @@ export const StepExecution: React.FC<StepExecutionProps> = ({ step, logs, onEdit
         </TabsContent>
         <TabsContent value={StepExecutionTab.OUTPUT}>
           {/*here is the execution details of output table */}
-          <ScrollArea className="h-[calc(100vh-23rem)] border-t pt-4">
+          <ScrollArea className="h-[calc(100vh-278px)] border-t pt-4">
             <KeyValueTable
               className="pt-2"
               tableSpec={outputTable}
diff --git a/packages/ui/src/views/execution/types.ts b/packages/ui/src/views/execution/types.ts
index 89fd9a8f29..b015905b2c 100644
--- a/packages/ui/src/views/execution/types.ts
+++ b/packages/ui/src/views/execution/types.ts
@@ -13,6 +13,7 @@ export interface StepProps {
 }
 
 export interface StepExecutionProps {
+  isDrawer?: boolean
   onEdit: () => void
   onDownload: () => void
   onCopy: () => void
@@ -33,6 +34,7 @@ export interface ILogsStore {
 }
 
 export interface ExecutionInfoProps {
+  isDrawer?: boolean
   useLogsStore: () => ILogsStore
   onEdit: () => void
   onDownload: () => void
@@ -44,11 +46,18 @@ export interface ConsoleLogsProps {
   query?: string
 }
 
+export enum LivelogLineType {
+  ERROR = 'error',
+  WARNING = 'warning',
+  INFO = 'info'
+}
+
 export interface LivelogLine {
   out?: string
   pos?: number
   time?: number
   duration?: number
+  type?: LivelogLineType
 }
 
 export interface NodeSelectionProps {
diff --git a/packages/ui/src/views/execution/utils.tsx b/packages/ui/src/views/execution/utils.tsx
index 01bdba8858..a27a571aec 100644
--- a/packages/ui/src/views/execution/utils.tsx
+++ b/packages/ui/src/views/execution/utils.tsx
@@ -8,6 +8,7 @@ interface RenderTreeElementProps {
   element: TreeViewElement
   handleClick: ExecutionTreeProps['onSelectNode']
   parentElement?: TreeViewElement | null
+  level?: number
 }
 
 export const renderTree = (
@@ -20,41 +21,53 @@ export const renderTree = (
   ))
 }
 
-const renderTreeFolder = ({ element: folderElement, handleClick }: RenderTreeElementProps): ReactNode => {
+const renderTreeFolder = ({ element: folderElement, handleClick, level = 0 }: RenderTreeElementProps): ReactNode => {
   return (
     <Folder
       element={folderElement.name}
       value={folderElement.id}
       status={folderElement.status}
       duration={folderElement.duration}
+      level={level}
     >
       {folderElement.children?.map(childElement => (
-        <div key={childElement.id}>
-          {renderTreeElement({ parentElement: folderElement, element: childElement, handleClick })}
+        <div key={childElement.id} data-level={level}>
+          {renderTreeElement({ parentElement: folderElement, element: childElement, handleClick, level: level + 1 })}
         </div>
       ))}
     </Folder>
   )
 }
 
-const renderTreeFile = ({ element: fileElement, handleClick, parentElement }: RenderTreeElementProps): ReactNode => {
+const renderTreeFile = ({
+  element: fileElement,
+  handleClick,
+  parentElement,
+  level = 0
+}: RenderTreeElementProps): ReactNode => {
   return (
     <File
       value={fileElement.id}
       status={fileElement.status}
       duration={fileElement.duration}
       handleSelect={() => handleClick({ parentNode: parentElement, childNode: fileElement })}
+      level={level}
     >
-      <p>{fileElement.name}</p>
+      <p data-level={level}>{fileElement.name}</p>
     </File>
   )
 }
 
-const renderTreeElement = ({ element, handleClick, parentElement }: RenderTreeElementProps): React.ReactNode => {
+const renderTreeElement = ({
+  element,
+  handleClick,
+  parentElement,
+  level = 0
+}: RenderTreeElementProps): React.ReactNode => {
   if (element.children && element.children.length > 0) {
-    return renderTreeFolder({ element, handleClick, parentElement })
+    return renderTreeFolder({ element, handleClick, parentElement, level })
   }
-  return renderTreeFile({ element, handleClick, parentElement })
+  return renderTreeFile({ element, handleClick, parentElement, level })
 }
 
 export const getElementById = (elements: TreeViewElement[], id: string): TreeViewElement | null => {
diff --git a/packages/ui/src/views/index.ts b/packages/ui/src/views/index.ts
index 0ee931968f..27fdf2a16c 100644
--- a/packages/ui/src/views/index.ts
+++ b/packages/ui/src/views/index.ts
@@ -2,7 +2,7 @@
 export * from './types/link-types'
 
 // layouts
-export * as SandboxLayout from './layouts/SandboxLayout'
+export * from './layouts/SandboxLayout'
 export * from './layouts/Floating1ColumnLayout'
 export * from './layouts/PullRequestLayout'
 export * from './layouts/content-layout-with-sidebar'
diff --git a/packages/ui/src/views/layouts/SandboxLayout.tsx b/packages/ui/src/views/layouts/SandboxLayout.tsx
index fa5cbf0427..990bf9f512 100644
--- a/packages/ui/src/views/layouts/SandboxLayout.tsx
+++ b/packages/ui/src/views/layouts/SandboxLayout.tsx
@@ -102,4 +102,5 @@ function Column({ children, className }: { children: ReactNode; className?: stri
   )
 }
 
-export { Root, LeftPanel, LeftSubPanel, Header, SubHeader, Main, Content, Columns, Column }
+const SandboxLayout = { Root, LeftPanel, LeftSubPanel, Header, SubHeader, Main, Content, Columns, Column }
+export { SandboxLayout }
diff --git a/packages/ui/src/views/pipeline-edit/components/graph-implementation/canvas/canvas-controls.tsx b/packages/ui/src/views/pipeline-edit/components/graph-implementation/canvas/canvas-controls.tsx
index 4094fa5fc6..cd23c40089 100644
--- a/packages/ui/src/views/pipeline-edit/components/graph-implementation/canvas/canvas-controls.tsx
+++ b/packages/ui/src/views/pipeline-edit/components/graph-implementation/canvas/canvas-controls.tsx
@@ -1,19 +1,22 @@
+import { Icon } from '@components/icon'
+
 import { useCanvasContext } from '@harnessio/pipeline-graph'
 
 import { CanvasButton } from './canvas-button'
 
 export function CanvasControls() {
-  const { fit } = useCanvasContext()
+  const { reset, increase, decrease } = useCanvasContext()
 
   return (
     <div className="absolute bottom-2 left-2 flex flex-col gap-y-2">
-      {/* TODO: uncomment increase/decrease once its fixed in pipeline-graph */}
-      {/* 
-      <CanvasButton onClick={() => increase()}>+</CanvasButton>
-      <CanvasButton onClick={() => decrease()}>-</CanvasButton> 
-      */}
-      <CanvasButton onClick={() => fit()}>
-        <div className="size-3 border border-primary"></div>
+      <CanvasButton onClick={increase}>
+        <Icon name="plus" />
+      </CanvasButton>
+      <CanvasButton onClick={decrease}>
+        <Icon name="minus" />
+      </CanvasButton>
+      <CanvasButton onClick={reset}>
+        <Icon name="square-dashed" />
       </CanvasButton>
     </div>
   )
diff --git a/packages/ui/src/views/pipeline-edit/components/graph-implementation/context/PipelineStudioNodeContext.tsx b/packages/ui/src/views/pipeline-edit/components/graph-implementation/context/PipelineStudioNodeContext.tsx
index ede40ab587..1754c05d50 100644
--- a/packages/ui/src/views/pipeline-edit/components/graph-implementation/context/PipelineStudioNodeContext.tsx
+++ b/packages/ui/src/views/pipeline-edit/components/graph-implementation/context/PipelineStudioNodeContext.tsx
@@ -10,7 +10,7 @@ export interface ContextMenuData {
   isIn?: boolean
 }
 
-export interface PipelineStudioNodeContextProps {
+export interface PipelineStudioNodeContextProps<T> {
   // context menu
   showContextMenu: (
     contextMenu: () => React.ReactNode,
@@ -34,9 +34,10 @@ export interface PipelineStudioNodeContextProps {
   onEditIntention: (nodeData: CommonNodeDataType) => void
   onDeleteIntention: (nodeData: CommonNodeDataType) => void
   onRevealInYaml: (path: string | undefined) => void
+  globalData?: T
 }
 
-export const PipelineStudioNodeContext = createContext<PipelineStudioNodeContextProps>({
+export const PipelineStudioNodeContext = createContext<PipelineStudioNodeContextProps<any>>({
   showContextMenu: (
     _contextMenu: () => React.ReactNode,
     _nodeData: CommonNodeDataType,
@@ -60,11 +61,11 @@ export const PipelineStudioNodeContext = createContext<PipelineStudioNodeContext
   onRevealInYaml: (_path: string | undefined) => undefined
 })
 
-export function usePipelineStudioNodeContext(): PipelineStudioNodeContextProps {
+export function usePipelineStudioNodeContext<T>(): PipelineStudioNodeContextProps<T> {
   return useContext(PipelineStudioNodeContext)
 }
 
-export interface PipelineStudioNodeContextProviderProps {
+export interface PipelineStudioNodeContextProviderProps<T = unknown> {
   children: React.ReactNode
   selectedPath?: string
   onSelectIntention: (nodeData: CommonNodeDataType) => undefined
@@ -76,6 +77,7 @@ export interface PipelineStudioNodeContextProviderProps {
   onEditIntention: (nodeData: CommonNodeDataType) => undefined
   onDeleteIntention: (nodeData: CommonNodeDataType) => undefined
   onRevealInYaml: (_path: string | undefined) => undefined
+  globalData?: T
 }
 export const PipelineStudioNodeContextProvider: React.FC<PipelineStudioNodeContextProviderProps> = props => {
   const {
@@ -85,7 +87,8 @@ export const PipelineStudioNodeContextProvider: React.FC<PipelineStudioNodeConte
     onDeleteIntention,
     onRevealInYaml,
     children,
-    selectedPath
+    selectedPath,
+    globalData
   } = props
 
   const [contextMenuData, setContextMenuData] = useState<ContextMenuData | undefined>(undefined)
@@ -127,7 +130,8 @@ export const PipelineStudioNodeContextProvider: React.FC<PipelineStudioNodeConte
         onAddIntention,
         onEditIntention,
         onDeleteIntention,
-        onRevealInYaml
+        onRevealInYaml,
+        globalData
       }}
     >
       {children}
diff --git a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx
index 001a705c80..e6c5c821c2 100644
--- a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx
+++ b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx
@@ -1,4 +1,5 @@
 import { Icon, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem } from '@/components'
+import { cn } from '@utils/cn'
 
 import { PopoverCommitInfo } from './popover-commit-info'
 
@@ -34,7 +35,7 @@ export const PipelineStudioFooter: React.FC<PipelineStudioFooterProps> = (props:
   return (
     <footer
       className={
-        'bg-grey-6 text-grey-60 flex h-10 shrink-0 items-center justify-between border-t border-[#1d1d20] px-4 text-[12px] font-normal not-italic leading-[15px]'
+        'bg-grey-6 text-grey-60 flex h-10 shrink-0 items-center justify-between border-t border-borders-5 px-4 text-[12px] font-normal not-italic leading-[15px]'
       }
     >
       <div className="flex items-center gap-2">
@@ -44,25 +45,31 @@ export const PipelineStudioFooter: React.FC<PipelineStudioFooterProps> = (props:
           onClick={() => {
             props.togglePane?.()
           }}
-          className="flex h-full cursor-pointer gap-2 rounded-md px-2 py-1.5 duration-150 ease-in-out hover:bg-primary/10"
+          className="flex h-full cursor-pointer gap-2.5 rounded-md px-2 py-1.5 duration-150 ease-in-out hover:bg-primary/10"
         >
           <div className="flex items-center gap-1.5">
-            <Icon name="fail" className="text-tertiary-background" />
-            <span className="text-[12px] text-primary">{props.problems.error}</span>
+            <Icon
+              size={14}
+              name="cross-circle"
+              className={props.problems.error > 0 ? 'text-destructive' : 'text-tertiary-background'}
+            />
+            <span className={cn('text-[12px]', props.problems.error > 0 ? 'text-destructive' : 'text-primary')}>
+              {props.problems.error}
+            </span>
           </div>
           <div className="flex items-center gap-1.5">
-            <Icon name="triangle-warning" className="text-tertiary-background" />
+            <Icon size={14} name="warning-triangle-outline" className="text-tertiary-background" />
             <span className="text-[12px] text-primary">{props.problems.warning}</span>
           </div>
           <div className="flex items-center gap-1.5">
-            <Icon name="info-circle" className="text-tertiary-background" />
+            <Icon size={14} name="info-circle" className="text-tertiary-background" />
             <span className="text-[12px] text-primary">{props.problems.info}</span>
           </div>
         </div>
         {branchesLoading || branches || currentBranch ? (
           <div className={'flex gap-2'}>
             <div className={'flex items-center'}>
-              <span className="mr-1 text-[12px] text-tertiary-background">Branch:</span>
+              <span className="text-[12px] text-tertiary-background">Branch:</span>
               <Select value={currentBranch} disabled={branchesLoading} onValueChange={onBranchChange}>
                 <SelectContent>
                   {branches?.map(branch => (
diff --git a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-graph-view.tsx b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-graph-view.tsx
index e2987b3355..33c33f68d4 100644
--- a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-graph-view.tsx
+++ b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-graph-view.tsx
@@ -38,16 +38,17 @@ const endNode = {
   data: {}
 } satisfies AnyContainerNodeType
 
-export interface PipelineStudioGraphViewProps {
+export interface PipelineStudioGraphViewProps
+  extends Pick<
+    PipelineGraphProps,
+    'edgesConfig' | 'portComponent' | 'customCreateSVGPath' | 'collapseButtonComponent'
+  > {
   contentNodeFactory: ContentNodeFactory
   yamlRevision: YamlRevision
   onYamlRevisionChange: (YamlRevision: YamlRevision) => void
   getStepIcon?: (step: Record<string, any>) => JSX.Element
   serialContainerConfig?: Partial<SerialContainerConfig>
   parallelContainerConfig?: Partial<ParallelContainerConfig>
-  customCreateSVGPath?: PipelineGraphProps['customCreateSVGPath']
-  edgesConfig?: PipelineGraphProps['edgesConfig']
-  portComponent?: PipelineGraphProps['portComponent']
 }
 
 export const PipelineStudioGraphView = (props: PipelineStudioGraphViewProps): React.ReactElement => {
@@ -59,7 +60,8 @@ export const PipelineStudioGraphView = (props: PipelineStudioGraphViewProps): Re
     parallelContainerConfig,
     customCreateSVGPath,
     edgesConfig,
-    portComponent
+    portComponent,
+    collapseButtonComponent
   } = props
 
   const [data, setData] = useState<AnyContainerNodeType[]>([])
@@ -93,9 +95,9 @@ export const PipelineStudioGraphView = (props: PipelineStudioGraphViewProps): Re
           customCreateSVGPath={customCreateSVGPath}
           edgesConfig={edgesConfig}
           portComponent={portComponent}
+          collapseButtonComponent={collapseButtonComponent}
           data={data}
           nodes={nodes}
-          config={{ edgeClassName: 'stroke-borders-2' }}
           serialContainerConfig={serialContainerConfig}
           parallelContainerConfig={parallelContainerConfig}
         />
diff --git a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-internal.tsx b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-internal.tsx
index 372d68cbe0..d618581d29 100644
--- a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-internal.tsx
+++ b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-internal.tsx
@@ -5,19 +5,24 @@ import { PipelineStudioGraphView, PipelineStudioGraphViewProps } from './pipelin
 import { PipelineStudioYamlView, PipelineStudioYamlViewProps } from './pipeline-studio-yaml-view'
 
 export interface PipelineStudioInternalProps
-  extends Pick<PipelineStudioGraphViewProps, 'serialContainerConfig' | 'parallelContainerConfig'> {
+  extends Pick<
+    PipelineStudioGraphViewProps,
+    | 'serialContainerConfig'
+    | 'parallelContainerConfig'
+    | 'getStepIcon'
+    | 'customCreateSVGPath'
+    | 'edgesConfig'
+    | 'portComponent'
+    | 'collapseButtonComponent'
+  > {
   view: 'yaml' | 'graph'
   contentNodeFactory: ContentNodeFactory
   yamlRevision: YamlRevision
   onYamlRevisionChange: (YamlRevision: YamlRevision) => void
   yamlEditorConfig?: PipelineStudioYamlViewProps['yamlEditorConfig']
   onErrorChange?: PipelineStudioYamlViewProps['onErrorChange']
-  getStepIcon?: PipelineStudioGraphViewProps['getStepIcon']
   animateYamlOnUpdate?: boolean
   onYamlAnimateEnd?: () => void
-  customCreateSVGPath?: PipelineStudioGraphViewProps['customCreateSVGPath']
-  edgesConfig?: PipelineStudioGraphViewProps['edgesConfig']
-  portComponent?: PipelineStudioGraphViewProps['portComponent']
 }
 
 export default function PipelineStudioInternal(props: PipelineStudioInternalProps) {
@@ -35,7 +40,8 @@ export default function PipelineStudioInternal(props: PipelineStudioInternalProp
     parallelContainerConfig,
     customCreateSVGPath,
     edgesConfig,
-    portComponent
+    portComponent,
+    collapseButtonComponent
   } = props
 
   return view === 'graph' ? (
@@ -49,6 +55,7 @@ export default function PipelineStudioInternal(props: PipelineStudioInternalProp
       customCreateSVGPath={customCreateSVGPath}
       edgesConfig={edgesConfig}
       portComponent={portComponent}
+      collapseButtonComponent={collapseButtonComponent}
     />
   ) : (
     <YamlEditorContextProvider>
diff --git a/packages/ui/src/views/pipeline-edit/components/visual-yaml-toggle.tsx b/packages/ui/src/views/pipeline-edit/components/visual-yaml-toggle.tsx
index 0dd74285bf..054dca1771 100644
--- a/packages/ui/src/views/pipeline-edit/components/visual-yaml-toggle.tsx
+++ b/packages/ui/src/views/pipeline-edit/components/visual-yaml-toggle.tsx
@@ -12,6 +12,7 @@ export const VisualYamlToggle = (props: VisualYamlToggleProps): JSX.Element => {
   const { view, setView, isYamlValid } = props
   return (
     <ToggleGroup.Root
+      className="rounded-md border border-borders-1 bg-background-3 h-8 px-1"
       onValueChange={value => {
         if (value) {
           setView(value as VisualYamlValue)
@@ -19,21 +20,18 @@ export const VisualYamlToggle = (props: VisualYamlToggleProps): JSX.Element => {
       }}
       value={view}
       type="single"
-      unselectable={'on'}
-      className={'rounded-lg border border-primary/10 bg-primary-foreground p-0.5'}
+      unselectable="on"
     >
       <ToggleGroup.Item
         disabled={!isYamlValid}
-        value={'visual'}
-        className="h-7 rounded-md border border-transparent text-xs font-medium disabled:opacity-100 data-[state=on]:border-primary/10"
+        value="visual"
+        className="rounded text-13 disabled:opacity-100"
+        size="xs"
       >
         {!isYamlValid && <Icon name="fail" className="mr-1 text-destructive" />}
         Visual
       </ToggleGroup.Item>
-      <ToggleGroup.Item
-        value={'yaml'}
-        className="h-7 rounded-md border border-transparent text-xs font-medium text-tertiary-background data-[state=on]:border-white/10 data-[state=on]:text-primary"
-      >
+      <ToggleGroup.Item value="yaml" className="rounded text-13" size="xs">
         YAML
       </ToggleGroup.Item>
     </ToggleGroup.Root>
diff --git a/packages/ui/src/views/pipeline-edit/pipeline-edit.tsx b/packages/ui/src/views/pipeline-edit/pipeline-edit.tsx
index 6e45e15e79..e8f9754969 100644
--- a/packages/ui/src/views/pipeline-edit/pipeline-edit.tsx
+++ b/packages/ui/src/views/pipeline-edit/pipeline-edit.tsx
@@ -19,7 +19,16 @@ import { ErrorDataType } from './components/pipeline-studio-yaml-view'
 import { ContentNodeFactory, PipelineStudio, PipelineStudioProps, YamlRevision } from './pipeline-studio'
 
 export interface PipelineEditProps
-  extends Pick<PipelineStudioGraphViewProps, 'serialContainerConfig' | 'parallelContainerConfig'> {
+  extends Pick<PipelineStudioGraphViewProps, 'serialContainerConfig' | 'parallelContainerConfig'>,
+    Pick<
+      PipelineStudioProps,
+      | 'yamlEditorConfig'
+      | 'getStepIcon'
+      | 'customCreateSVGPath'
+      | 'edgesConfig'
+      | 'portComponent'
+      | 'collapseButtonComponent'
+    > {
   /** pipeline view */
   view: 'yaml' | 'graph'
   /** yaml state */
@@ -37,15 +46,10 @@ export interface PipelineEditProps
   onEditIntention: (nodeData: CommonNodeDataType) => undefined
   onDeleteIntention: (nodeData: CommonNodeDataType) => undefined
   onRevealInYaml: (_path: string | undefined) => undefined
-  yamlEditorConfig?: PipelineStudioProps['yamlEditorConfig']
   onErrorChange?: (data: ErrorDataType) => void
-  getStepIcon?: PipelineStudioProps['getStepIcon']
   contentNodeFactory?: ContentNodeFactory
   animateYamlOnUpdate?: boolean
   onYamlAnimateEnd?: () => void
-  customCreateSVGPath?: PipelineStudioProps['customCreateSVGPath']
-  edgesConfig?: PipelineStudioProps['edgesConfig']
-  portComponent?: PipelineStudioProps['portComponent']
 }
 
 export const PipelineEdit = (props: PipelineEditProps): JSX.Element => {
@@ -69,7 +73,8 @@ export const PipelineEdit = (props: PipelineEditProps): JSX.Element => {
     parallelContainerConfig,
     customCreateSVGPath,
     edgesConfig,
-    portComponent
+    portComponent,
+    collapseButtonComponent
   } = props
 
   const defaultContentNodeFactory = new ContentNodeFactory()
@@ -163,6 +168,7 @@ export const PipelineEdit = (props: PipelineEditProps): JSX.Element => {
         customCreateSVGPath={customCreateSVGPath}
         edgesConfig={edgesConfig}
         portComponent={portComponent}
+        collapseButtonComponent={collapseButtonComponent}
       />
       <PipelineStudioNodeContextMenu />
     </PipelineStudioNodeContextProvider>
diff --git a/packages/ui/src/views/pipeline-edit/pipeline-studio.tsx b/packages/ui/src/views/pipeline-edit/pipeline-studio.tsx
index f88f692e17..04fd8a3ee4 100644
--- a/packages/ui/src/views/pipeline-edit/pipeline-studio.tsx
+++ b/packages/ui/src/views/pipeline-edit/pipeline-studio.tsx
@@ -31,7 +31,15 @@ export interface YamlRevision {
 }
 
 export interface PipelineStudioProps
-  extends Pick<PipelineStudioGraphViewProps, 'serialContainerConfig' | 'parallelContainerConfig'> {
+  extends Pick<
+    PipelineStudioGraphViewProps,
+    | 'serialContainerConfig'
+    | 'parallelContainerConfig'
+    | 'customCreateSVGPath'
+    | 'edgesConfig'
+    | 'portComponent'
+    | 'collapseButtonComponent'
+  > {
   view: 'yaml' | 'graph'
   contentNodeFactory: ContentNodeFactory
   yamlRevision: YamlRevision
@@ -41,9 +49,6 @@ export interface PipelineStudioProps
   getStepIcon?: PipelineStudioInternalProps['getStepIcon']
   animateYamlOnUpdate?: boolean
   onYamlAnimateEnd?: () => void
-  customCreateSVGPath?: PipelineStudioGraphViewProps['customCreateSVGPath']
-  edgesConfig?: PipelineStudioGraphViewProps['edgesConfig']
-  portComponent?: PipelineStudioGraphViewProps['portComponent']
 }
 
 const PipelineStudio = (props: PipelineStudioProps): JSX.Element => {
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
index 99c9e60af5..0f469ecffe 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
@@ -54,7 +54,7 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
               <TableRow key={key.identifier}>
                 <TableCell className="content-center">
                   <div className="inline-flex items-center gap-x-2.5">
-                    <Icon name="ssh-key" size={32} className="bg-background-8 text-foreground-2 rounded-md" />
+                    <Icon name="ssh-key" size={32} className="rounded-md bg-background-8 text-foreground-2" />
                     <div className="flex flex-col">
                       <span className="block w-[200px] truncate font-medium text-foreground-1">{key.identifier}</span>
                       <span className="w-[200px] truncate text-12 text-foreground-3">{key.fingerprint}</span>
diff --git a/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx b/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx
index 80153b6893..c26b1742d1 100644
--- a/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx
+++ b/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx
@@ -37,7 +37,7 @@ export const BranchSelector: FC<BranchSelectorProps> = ({
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button
-          className="flex items-center gap-1.5 overflow-hidden px-3 data-[state=open]:border-borders-9 bg-input-background"
+          className="flex items-center gap-1.5 overflow-hidden bg-input-background px-3 data-[state=open]:border-borders-9"
           variant="outline"
           size={buttonSize}
         >
diff --git a/packages/ui/src/views/repo/components/summary/summary.tsx b/packages/ui/src/views/repo/components/summary/summary.tsx
index 7581cda79d..b6b168ae14 100644
--- a/packages/ui/src/views/repo/components/summary/summary.tsx
+++ b/packages/ui/src/views/repo/components/summary/summary.tsx
@@ -101,9 +101,7 @@ export const Summary = ({
                     }
                     size={16}
                   />
-                  <span color="primary" className="w-44 truncate">
-                    {file.name}
-                  </span>
+                  <span className="w-44 truncate text-foreground-1">{file.name}</span>
                 </div>
               </TableCell>
               <TableCell>
diff --git a/packages/ui/src/views/repo/pull-request/components/in-view-diff-renderer.tsx b/packages/ui/src/views/repo/pull-request/components/in-view-diff-renderer.tsx
index 31f3a68974..21ad680137 100644
--- a/packages/ui/src/views/repo/pull-request/components/in-view-diff-renderer.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/in-view-diff-renderer.tsx
@@ -31,7 +31,7 @@ const InViewDiffRendererInternal: FC<InViewDiffRendererProps> = ({
     initialInView: false
   })
   const setContainerRef = useCallback(
-    node => {
+    (node: HTMLDivElement) => {
       containerRef.current = node
       ref(node)
     },
diff --git a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
index 5bed6fb3c6..149d8241c4 100644
--- a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
+++ b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
@@ -116,12 +116,12 @@ const SandboxRepoListPage: FC<RepoListProps> = ({
           <>
             <Spacer size={8} />
             <div className="flex items-end">
-              <h1 className="text-foreground-1 text-2xl font-medium">
+              <h1 className="text-2xl font-medium text-foreground-1">
                 {t('views:repos.repositories', 'Repositories')}
               </h1>
               {viewManagement.currentView && (
                 <>
-                  <span className="bg-borders-1 mx-2.5 inline-flex h-[18px] w-px" />
+                  <span className="mx-2.5 inline-flex h-[18px] w-px bg-borders-1" />
                   <span className="text-14 text-foreground-3">{viewManagement.currentView.name}</span>
                 </>
               )}
diff --git a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
index 38cf028840..827973e37f 100644
--- a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
+++ b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
@@ -248,7 +248,7 @@ export function RepoSummaryView({
                   right
                   title={
                     <Button
-                      className="border-borders-1 hover:bg-background-3 flex border"
+                      className="flex border border-borders-1 hover:bg-background-3"
                       variant="ghost"
                       size="icon"
                       asChild
diff --git a/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx b/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
index be7a815579..1efafcfdf5 100644
--- a/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
+++ b/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
@@ -165,7 +165,7 @@ export function RepoWebhookList({
                   />
                 </StackedList.Item>
               </TableCell>
-              <TableCell className="content-center cursor-pointer">
+              <TableCell className="cursor-pointer content-center">
                 <Badge
                   size="md"
                   disableHover
@@ -188,7 +188,7 @@ export function RepoWebhookList({
                 </Badge>
               </TableCell>
 
-              <TableCell className="content-center text-right cursor-pointer">
+              <TableCell className="cursor-pointer content-center text-right">
                 <MoreActionsTooltip
                   actions={[
                     {
diff --git a/packages/ui/tailwind.ts b/packages/ui/tailwind.ts
index 5df121a9d9..0570f46723 100644
--- a/packages/ui/tailwind.ts
+++ b/packages/ui/tailwind.ts
@@ -386,7 +386,11 @@ export default {
         'widget-number-bg-gradient':
           'linear-gradient(135deg, hsla(var(--canary-widget-number-bg-gradient-from)) 0%, hsla(var(--canary-widget-number-bg-gradient-to)) 67.67%)',
         'graph-gradient-1':
-          'radial-gradient(88.57% 100% at 14.29% 0%, var(--canary-graph-gradient-bg-1) 10.62%, var(--canary-graph-gradient-bg-2) 75.86%)'
+          'radial-gradient(88.57% 100% at 14.29% 0%, var(--canary-graph-gradient-bg-1) 10.62%, var(--canary-graph-gradient-bg-2) 75.86%)',
+        'graph-bg-gradient': 'radial-gradient(circle, var(--canary-graph-viewport-bg) 1px, transparent 1px)'
+      },
+      backgroundSize: {
+        'graph-bg-size': '22px 22px'
       },
       keyframes: {
         'accordion-down': {
@@ -433,7 +437,7 @@ export default {
     'prose-img',
     'prose-code',
     { pattern: /^border-borders-/ },
-    { pattern: /^bg-graph-gradient-/ },
+    { pattern: /^bg-graph-/ },
     { pattern: /^text-foreground-/ },
     { pattern: /^bg-background-/ },
     // NOTE: stroke-border-2 temporary here as it is used by in gitness for pipeline-graph
diff --git a/packages/unified-pipeline/package.json b/packages/unified-pipeline/package.json
index 220a78de59..f10cfa74dd 100644
--- a/packages/unified-pipeline/package.json
+++ b/packages/unified-pipeline/package.json
@@ -43,8 +43,8 @@
     "dagre": "^0.8.5",
     "elkjs": "^0.9.3",
     "lodash-es": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "reactflow": "^11.11.4",
     "tailwindcss": "^3.4.4",
     "web-worker": "^1.0.0",
@@ -56,9 +56,9 @@
     "@types/dagre": "^0.7.52",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.2.0",
-    "@types/react": "^17.0.3",
+    "@types/react": "^18.3.18",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^17.0.3",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "dts-bundle-generator": "^6.4.0",
     "lint-staged": "^15.2.9",
diff --git a/packages/views/package.json b/packages/views/package.json
index 3ddf61ea04..61ddc86301 100644
--- a/packages/views/package.json
+++ b/packages/views/package.json
@@ -67,8 +67,8 @@
     "monaco-yaml": "^4.0.4",
     "overlayscrollbars": "^2.10.0",
     "pluralize": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.28.0",
     "react-keywords": "^1.0.0",
     "rehype-external-links": "^3.0.0",
@@ -82,8 +82,8 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/lodash-es": "^4.17.9",
     "@types/pluralize": "^0.0.33",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
diff --git a/packages/yaml-editor-playground/package.json b/packages/yaml-editor-playground/package.json
index 19a22e1e35..f7b16d6144 100644
--- a/packages/yaml-editor-playground/package.json
+++ b/packages/yaml-editor-playground/package.json
@@ -14,8 +14,8 @@
     "@monaco-editor/react": "4.6.0",
     "monaco-editor": "^0.40.0",
     "monaco-yaml": "^4.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ts-loader": "^9.5.1",
     "typescript": "^4.9.5"
   },
@@ -29,8 +29,8 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.101",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "babel-loader": "^9.1.3",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
diff --git a/packages/yaml-editor-playground/src/index.tsx b/packages/yaml-editor-playground/src/index.tsx
index 520933212b..35d7f78bc1 100644
--- a/packages/yaml-editor-playground/src/index.tsx
+++ b/packages/yaml-editor-playground/src/index.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
-import { render } from 'react-dom'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-render(
-  <React.StrictMode>
+const root = createRoot(document.getElementById('root')!)
+
+root.render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 )
diff --git a/packages/yaml-editor/package.json b/packages/yaml-editor/package.json
index 77ade421c8..7e5cc24fa6 100644
--- a/packages/yaml-editor/package.json
+++ b/packages/yaml-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@harnessio/yaml-editor",
-  "version": "0.15.0",
+  "version": "0.16.0-react18.alpha.4",
   "private": false,
   "author": "Harness Inc.",
   "license": "Apache-2.0",
@@ -27,8 +27,8 @@
     "@monaco-editor/react": "4.6.0",
     "monaco-editor": "^0.40.0",
     "monaco-yaml": "^4.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -40,8 +40,8 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.101",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "babel-loader": "^9.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee16735c9e..2a6abc0c0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,12 +4,6 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-overrides:
-  '@types/react': ^17.0.3
-  '@types/react-dom': ^17.0.3
-  react: 17.0.2
-  react-dom: 17.0.2
-
 importers:
 
   .:
@@ -93,27 +87,27 @@ importers:
         specifier: ^0.40.0
         version: 0.40.0
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       react-live:
         specifier: ^4.1.8
-        version: 4.1.8(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
         specifier: ^6.26.0
-        version: 6.28.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       vite-plugin-monaco-editor:
         specifier: ^1.1.0
         version: 1.1.0(monaco-editor@0.40.0)
     devDependencies:
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
         version: 3.7.2(vite@6.0.11(@types/node@22.10.10)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
@@ -167,10 +161,10 @@ importers:
         version: link:../../packages/yaml-editor
       '@hookform/resolvers':
         specifier: ^3.6.0
-        version: 3.10.0(react-hook-form@7.54.2(react@17.0.2))
+        version: 3.10.0(react-hook-form@7.54.2(react@18.3.1))
       '@tanstack/react-query':
         specifier: 4.20.4
-        version: 4.20.4(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 4.20.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       clipboard-copy:
         specifier: ^3.1.0
         version: 3.2.0
@@ -194,7 +188,7 @@ importers:
         version: 8.0.2
       jotai:
         specifier: ^2.6.3
-        version: 2.11.1(@types/react@17.0.83)(react@17.0.2)
+        version: 2.11.1(@types/react@18.3.18)(react@18.3.1)
       lang-map:
         specifier: ^0.4.0
         version: 0.4.0
@@ -214,20 +208,20 @@ importers:
         specifier: ^8.0.0
         version: 8.0.0
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.28.0
-        version: 7.54.2(react@17.0.2)
+        version: 7.54.2(react@18.3.1)
       react-i18next:
         specifier: ^15.1.1
-        version: 15.4.0(i18next@24.2.1(typescript@5.7.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 15.4.0(i18next@24.2.1(typescript@5.7.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
         specifier: ^6.26.0
-        version: 6.28.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       yaml:
         specifier: ^2.5.0
         version: 2.7.0
@@ -236,14 +230,14 @@ importers:
         version: 3.24.1
       zustand:
         specifier: ^4.5.4
-        version: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+        version: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     devDependencies:
       '@eslint/js':
         specifier: ^9.9.0
         version: 9.18.0
       '@git-diff-view/react':
         specifier: ^0.0.16
-        version: 0.0.16(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 0.0.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@swc/core':
         specifier: ^1.9.3
         version: 1.10.9
@@ -252,7 +246,7 @@ importers:
         version: 10.4.0
       '@testing-library/react':
         specifier: ^13.4.0
-        version: 13.4.0(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 13.4.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/event-source-polyfill':
         specifier: ^1.0.0
         version: 1.0.5
@@ -263,11 +257,11 @@ importers:
         specifier: ^0.0.33
         version: 0.0.33
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
         version: 3.7.2(vite@6.0.11(@types/node@22.10.10)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
@@ -345,7 +339,7 @@ importers:
     dependencies:
       '@astrojs/react':
         specifier: ^4.1.5
-        version: 4.1.6(@types/node@22.10.10)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(jiti@1.21.7)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0)
+        version: 4.1.6(@types/node@22.10.10)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(jiti@1.21.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0)
       '@astrojs/starlight':
         specifier: ^0.31.0
         version: 0.31.1(astro@5.1.9(@types/node@22.10.10)(jiti@1.21.7)(rollup@4.32.0)(sass@1.83.4)(terser@5.37.0)(typescript@5.7.3)(yaml@2.7.0))
@@ -360,7 +354,7 @@ importers:
         version: link:../../packages/ui
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.3
-        version: 1.2.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       astro:
         specifier: ^5.1.5
         version: 5.1.9(@types/node@22.10.10)(jiti@1.21.7)(rollup@4.32.0)(sass@1.83.4)(terser@5.37.0)(typescript@5.7.3)(yaml@2.7.0)
@@ -372,22 +366,22 @@ importers:
         version: 2.1.1
       lucide-react:
         specifier: ^0.407.0
-        version: 0.407.0(react@17.0.2)
+        version: 0.407.0(react@18.3.1)
       prism-react-renderer:
         specifier: ^2.4.1
-        version: 2.4.1(react@17.0.2)
+        version: 2.4.1(react@18.3.1)
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       react-live:
         specifier: ^4.1.8
-        version: 4.1.8(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
         specifier: ^6.26.0
-        version: 6.28.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       sharp:
         specifier: ^0.32.5
         version: 0.32.6
@@ -405,8 +399,8 @@ importers:
         specifier: ^0.9.4
         version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.4.2)(typescript@5.7.3)
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       lint-staged:
         specifier: ^15.2.9
         version: 15.4.2
@@ -424,91 +418,91 @@ importers:
     dependencies:
       '@hookform/resolvers':
         specifier: ^3.6.0
-        version: 3.10.0(react-hook-form@7.54.2(react@17.0.2))
+        version: 3.10.0(react-hook-form@7.54.2(react@18.3.1))
       '@radix-ui/react-accordion':
         specifier: ^1.2.0
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.1
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-aspect-ratio':
         specifier: ^1.1.0
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.1.0
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-checkbox':
         specifier: ^1.1.0
-        version: 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-collapsible':
         specifier: ^1.1.0
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-context-menu':
         specifier: ^2.2.1
-        version: 2.2.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.1.1
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.1
-        version: 2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-hover-card':
         specifier: ^1.1.1
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-icons':
         specifier: ^1.3.0
-        version: 1.3.2(react@17.0.2)
+        version: 1.3.2(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.1.0
-        version: 2.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-menubar':
         specifier: ^1.1.1
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.0
-        version: 1.2.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.1.1
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-progress':
         specifier: ^1.1.0
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.2.0
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area':
         specifier: ^1.1.0
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
         specifier: ^2.1.1
-        version: 2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
         specifier: ^1.1.0
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slider':
         specifier: ^1.2.0
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.1.0
-        version: 1.1.1(@types/react@17.0.83)(react@17.0.2)
+        version: 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-switch':
         specifier: ^1.1.0
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tabs':
         specifier: ^1.1.0
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toast':
         specifier: ^1.2.1
-        version: 1.2.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle':
         specifier: ^1.1.0
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle-group':
         specifier: ^1.1.0
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.1
-        version: 1.1.7(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       cal-sans:
         specifier: ^1.0.1
         version: 1.0.1
@@ -520,37 +514,37 @@ importers:
         version: 2.1.1
       cmdk:
         specifier: ^1.0.0
-        version: 1.0.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.0.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
       embla-carousel-react:
         specifier: ^8.1.5
-        version: 8.5.2(react@17.0.2)
+        version: 8.5.2(react@18.3.1)
       input-otp:
         specifier: ^1.2.4
-        version: 1.4.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-themes:
         specifier: ^0.3.0
-        version: 0.3.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-day-picker:
         specifier: ^8.10.1
-        version: 8.10.1(date-fns@3.6.0)(react@17.0.2)
+        version: 8.10.1(date-fns@3.6.0)(react@18.3.1)
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.28.0
-        version: 7.54.2(react@17.0.2)
+        version: 7.54.2(react@18.3.1)
       react-resizable-panels:
         specifier: ^2.0.19
-        version: 2.1.7(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       sonner:
         specifier: ^1.5.0
-        version: 1.7.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.6.0
@@ -559,14 +553,14 @@ importers:
         version: 1.0.7(tailwindcss@3.4.17)
       vaul:
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       zod:
         specifier: ^3.23.8
         version: 3.24.1
     devDependencies:
       '@testing-library/react':
         specifier: ^13.4.0
-        version: 13.4.0(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 13.4.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/jest':
         specifier: ^27.5.2
         version: 27.5.2
@@ -577,11 +571,11 @@ importers:
         specifier: ^20.14.9
         version: 20.17.16
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
         version: 3.7.2(vite@6.0.11(@types/node@20.17.16)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
@@ -628,24 +622,21 @@ importers:
   packages/filters:
     dependencies:
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: '>=17.0.0 <19.0.0'
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
-      react-router-dom:
-        specifier: '>=5.0.0 <7.0.0'
-        version: 6.28.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        specifier: '>=17.0.0 <19.0.0'
+        version: 18.3.1(react@18.3.1)
     devDependencies:
       '@types/node':
         specifier: ^16.18.84
         version: 16.18.125
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
         version: 3.7.2(vite@6.0.11(@types/node@16.18.125)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
@@ -667,6 +658,9 @@ importers:
       npm-run-all:
         specifier: ^4.1.5
         version: 4.1.5
+      react-router-dom:
+        specifier: ^6.26.0
+        version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       ts-jest:
         specifier: ^29.1.2
         version: 29.2.5(@babel/core@7.26.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.7))(jest@29.7.0(@types/node@16.18.125))(typescript@5.7.3)
@@ -692,10 +686,10 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       react:
-        specifier: 17.0.2
+        specifier: ^17.0.2
         version: 17.0.2
       react-dom:
-        specifier: 17.0.2
+        specifier: ^17.0.2
         version: 17.0.2(react@17.0.2)
       react-hook-form:
         specifier: ^7.28.0
@@ -715,7 +709,7 @@ importers:
         version: 5.17.0
       '@testing-library/react':
         specifier: ^13.4.0
-        version: 13.4.0(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 13.4.0(@types/react@18.3.18)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@testing-library/user-event':
         specifier: ^13.5.0
         version: 13.5.0(@testing-library/dom@10.4.0)
@@ -729,11 +723,11 @@ importers:
         specifier: ^16.18.84
         version: 16.18.125
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@types/uuid':
         specifier: ^8.3.0
         version: 8.3.4
@@ -783,11 +777,11 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
     devDependencies:
       '@types/lodash-es':
         specifier: ^4.17.12
@@ -796,11 +790,11 @@ importers:
         specifier: ^22.10.1
         version: 22.10.10
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
         version: 3.7.2(vite@6.0.11(@types/node@22.10.10)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
@@ -821,16 +815,16 @@ importers:
     dependencies:
       '@dnd-kit/core':
         specifier: ^6.1.0
-        version: 6.3.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@dnd-kit/sortable':
         specifier: ^8.0.0
-        version: 8.0.0(@dnd-kit/core@6.3.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+        version: 8.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@dnd-kit/utilities':
         specifier: ^3.2.2
-        version: 3.2.2(react@17.0.2)
+        version: 3.2.2(react@18.3.1)
       '@git-diff-view/react':
         specifier: ^0.0.21
-        version: 0.0.21(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 0.0.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@git-diff-view/shiki':
         specifier: ^0.0.21
         version: 0.0.21
@@ -842,97 +836,97 @@ importers:
         version: link:../yaml-editor
       '@hookform/resolvers':
         specifier: ^3.6.0
-        version: 3.10.0(react-hook-form@7.54.2(react@17.0.2))
+        version: 3.10.0(react-hook-form@7.54.2(react@18.3.1))
       '@radix-ui/react-accordion':
         specifier: ^1.2.2
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.4
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-aspect-ratio':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-checkbox':
         specifier: ^1.1.3
-        version: 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-collapsible':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-context-menu':
         specifier: ^2.2.4
-        version: 2.2.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.1.4
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.4
-        version: 2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-hover-card':
         specifier: ^1.1.4
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-icons':
         specifier: ^1.3.2
-        version: 1.3.2(react@17.0.2)
+        version: 1.3.2(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.1.1
-        version: 2.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-menubar':
         specifier: ^1.1.4
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.3
-        version: 1.2.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.1.4
-        version: 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-progress':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.2.2
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area':
         specifier: ^1.2.2
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
         specifier: ^2.1.4
-        version: 2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slider':
         specifier: ^1.2.2
-        version: 1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react@17.0.83)(react@17.0.2)
+        version: 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-switch':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tabs':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toast':
         specifier: ^1.2.4
-        version: 1.2.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle-group':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.6
-        version: 1.1.7(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tailwindcss/typography':
         specifier: ^0.5.15
         version: 0.5.16(tailwindcss@3.4.17)
       '@uiw/react-markdown-preview':
         specifier: ^5.1.1
-        version: 5.1.3(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 5.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       add:
         specifier: ^2.0.6
         version: 2.0.6
@@ -947,7 +941,7 @@ importers:
         version: 2.1.1
       cmdk:
         specifier: ^1.0.0
-        version: 1.0.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.0.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
@@ -956,7 +950,7 @@ importers:
         version: 3.4.22
       embla-carousel-react:
         specifier: ^8.1.5
-        version: 8.5.2(react@17.0.2)
+        version: 8.5.2(react@18.3.1)
       fast-diff:
         specifier: ^1.3.0
         version: 1.3.0
@@ -971,7 +965,7 @@ importers:
         version: 8.0.2
       input-otp:
         specifier: ^1.2.4
-        version: 1.4.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -982,26 +976,26 @@ importers:
         specifier: ^2.10.0
         version: 2.10.1
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: '>=18'
+        version: 18.3.1
       react-day-picker:
         specifier: ^8.10.1
-        version: 8.10.1(date-fns@3.6.0)(react@17.0.2)
+        version: 8.10.1(date-fns@3.6.0)(react@18.3.1)
       react-hook-form:
         specifier: ^7.28.0
-        version: 7.54.2(react@17.0.2)
+        version: 7.54.2(react@18.3.1)
       react-i18next:
         specifier: ^15.1.1
-        version: 15.4.0(i18next@24.2.1(typescript@5.6.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 15.4.0(i18next@24.2.1(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-intersection-observer:
         specifier: ^9.15.1
-        version: 9.15.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-resizable-panels:
         specifier: ^2.0.19
-        version: 2.1.7(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
         specifier: ^6.26.0
-        version: 6.28.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rehype-external-links:
         specifier: ^3.0.0
         version: 3.0.0
@@ -1016,7 +1010,7 @@ importers:
         version: 2.3.0
       sonner:
         specifier: ^1.5.0
-        version: 1.7.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.6.0
@@ -1025,7 +1019,7 @@ importers:
         version: 1.0.7(tailwindcss@3.4.17)
       vaul:
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       yaml:
         specifier: ^2.7.0
         version: 2.7.0
@@ -1038,7 +1032,7 @@ importers:
         version: 6.6.3
       '@testing-library/react':
         specifier: ^16.0.1
-        version: 16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/lodash-es':
         specifier: ^4.17.12
         version: 4.17.12
@@ -1046,8 +1040,8 @@ importers:
         specifier: ^22.9.0
         version: 22.10.10
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
         version: 3.7.2(vite@6.0.11(@types/node@22.10.10)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
@@ -1121,14 +1115,14 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       reactflow:
         specifier: ^11.11.4
-        version: 11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwindcss:
         specifier: ^3.4.4
         version: 3.4.17
@@ -1137,7 +1131,7 @@ importers:
         version: 1.3.0
       zustand:
         specifier: ^4.5.4
-        version: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+        version: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     devDependencies:
       '@modyfi/vite-plugin-yaml':
         specifier: ^1.1.0
@@ -1155,14 +1149,14 @@ importers:
         specifier: ^22.2.0
         version: 22.10.10
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-copy-to-clipboard':
         specifier: ^5.0.7
         version: 5.0.7
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
         version: 3.7.2(vite@6.0.11(@types/node@22.10.10)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
@@ -1198,7 +1192,7 @@ importers:
     dependencies:
       '@git-diff-view/react':
         specifier: ^0.0.16
-        version: 0.0.16(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 0.0.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@git-diff-view/shiki':
         specifier: ^0.0.16
         version: 0.0.16
@@ -1219,16 +1213,16 @@ importers:
         version: link:../yaml-editor
       '@hookform/resolvers':
         specifier: ^3.6.0
-        version: 3.10.0(react-hook-form@7.54.2(react@17.0.2))
+        version: 3.10.0(react-hook-form@7.54.2(react@18.3.1))
       '@monaco-editor/react':
         specifier: 4.6.0
-        version: 4.6.0(monaco-editor@0.40.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 4.6.0(monaco-editor@0.40.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@rollup/plugin-yaml':
         specifier: ^4.1.2
         version: 4.1.2(rollup@4.32.0)
       '@uiw/react-markdown-preview':
         specifier: ^5.1.1
-        version: 5.1.3(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 5.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       caret-xy:
         specifier: ^2.0.3
         version: 2.0.3
@@ -1252,7 +1246,7 @@ importers:
         version: 4.17.21
       lucide-react:
         specifier: ^0.407.0
-        version: 0.407.0(react@17.0.2)
+        version: 0.407.0(react@18.3.1)
       match-sorter:
         specifier: ^6.3.1
         version: 6.4.0
@@ -1272,20 +1266,20 @@ importers:
         specifier: ^8.0.0
         version: 8.0.0
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.28.0
-        version: 7.54.2(react@17.0.2)
+        version: 7.54.2(react@18.3.1)
       react-keywords:
         specifier: ^1.0.0
-        version: 1.0.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
         specifier: ^6.26.0
-        version: 6.28.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rehype-external-links:
         specifier: ^3.0.0
         version: 3.0.0
@@ -1315,11 +1309,11 @@ importers:
         specifier: ^0.0.33
         version: 0.0.33
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.5.0
         version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)
@@ -1367,7 +1361,7 @@ importers:
     dependencies:
       '@monaco-editor/react':
         specifier: 4.6.0
-        version: 4.6.0(monaco-editor@0.40.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 4.6.0(monaco-editor@0.40.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       monaco-editor:
         specifier: ^0.40.0
         version: 0.40.0
@@ -1375,11 +1369,11 @@ importers:
         specifier: ^4.0.4
         version: 4.0.4(monaco-editor@0.40.0)
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
     devDependencies:
       '@babel/core':
         specifier: ^7.24.7
@@ -1398,7 +1392,7 @@ importers:
         version: 5.17.0
       '@testing-library/react':
         specifier: ^13.4.0
-        version: 13.4.0(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 13.4.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^13.5.0
         version: 13.5.0(@testing-library/dom@10.4.0)
@@ -1409,11 +1403,11 @@ importers:
         specifier: ^16.18.101
         version: 16.18.125
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react':
         specifier: ^4.0.4
         version: 4.3.4(vite@4.5.9(@types/node@16.18.125)(sass@1.83.4)(terser@5.37.0))
@@ -1494,7 +1488,7 @@ importers:
         version: link:../yaml-editor
       '@monaco-editor/react':
         specifier: 4.6.0
-        version: 4.6.0(monaco-editor@0.40.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 4.6.0(monaco-editor@0.40.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       monaco-editor:
         specifier: ^0.40.0
         version: 0.40.0
@@ -1502,11 +1496,11 @@ importers:
         specifier: ^4.0.4
         version: 4.0.4(monaco-editor@0.40.0)
       react:
-        specifier: 17.0.2
-        version: 17.0.2
+        specifier: ^18.3.1
+        version: 18.3.1
       react-dom:
-        specifier: 17.0.2
-        version: 17.0.2(react@17.0.2)
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       ts-loader:
         specifier: ^9.5.1
         version: 9.5.2(typescript@4.9.5)(webpack@5.97.1)
@@ -1531,7 +1525,7 @@ importers:
         version: 5.17.0
       '@testing-library/react':
         specifier: ^13.4.0
-        version: 13.4.0(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+        version: 13.4.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^13.5.0
         version: 13.5.0(@testing-library/dom@10.4.0)
@@ -1542,11 +1536,11 @@ importers:
         specifier: ^16.18.101
         version: 16.18.125
       '@types/react':
-        specifier: ^17.0.3
-        version: 17.0.83
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^17.0.3
-        version: 17.0.26(@types/react@17.0.83)
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       babel-loader:
         specifier: ^9.1.3
         version: 9.2.1(@babel/core@7.26.7)(webpack@5.97.1)
@@ -1653,10 +1647,10 @@ packages:
     resolution: {integrity: sha512-lMBO+Va4JbLsXviagT9/ZmliwfQGmsiw4rvI4yusPZijQek3q5yfEnQor5XWNcErrkazjjNxY9BFO5f/eSfqmw==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': ^17.0.50 || ^18.0.21 || ^19.0.0
+      '@types/react-dom': ^17.0.17 || ^18.0.6 || ^19.0.0
+      react: ^17.0.2 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.2 || ^18.0.0 || ^19.0.0
 
   '@astrojs/sitemap@3.2.1':
     resolution: {integrity: sha512-uxMfO8f7pALq0ADL6Lk68UV6dNYjJ2xGUzyjjVj60JLBs5a6smtlkBYv3tQ0DzoqwS7c9n4FUx5lgv0yPo/fgA==}
@@ -2352,24 +2346,24 @@ packages:
   '@dnd-kit/accessibility@3.1.1':
     resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
-      react: 17.0.2
+      react: '>=16.8.0'
 
   '@dnd-kit/core@6.3.1':
     resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
 
   '@dnd-kit/sortable@8.0.0':
     resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==}
     peerDependencies:
       '@dnd-kit/core': ^6.1.0
-      react: 17.0.2
+      react: '>=16.8.0'
 
   '@dnd-kit/utilities@3.2.2':
     resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
     peerDependencies:
-      react: 17.0.2
+      react: '>=16.8.0'
 
   '@emmetio/abbreviation@2.3.3':
     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
@@ -2864,8 +2858,8 @@ packages:
   '@floating-ui/react-dom@2.1.2':
     resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
 
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
@@ -2885,14 +2879,14 @@ packages:
   '@git-diff-view/react@0.0.16':
     resolution: {integrity: sha512-mBvPfNYDDY/D8ZOdfzZ6bR76uSJel1Ma3OAmmYzwzVDhj/KfMRAwUuE4KCFXVWMi5dR1ZC/apUnIJRw5pGc99g==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
   '@git-diff-view/react@0.0.21':
     resolution: {integrity: sha512-JehkakAKlIwwRtlABLFWZEw+aYwm+Yam/+d8izPocKL3lz/PKohBs0YfQ19R8KEPIHTIXeloSl38abdC8pYQCg==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
   '@git-diff-view/shiki@0.0.16':
     resolution: {integrity: sha512-qKw0rN3O5H4xhDS7ExPlZpRVWOEIJuaNOPuj/JqNJqDvc7pGZry2nMVEyy5dmiIKcO+4QrzYXlP71PdoHj+HIQ==}
@@ -3202,8 +3196,8 @@ packages:
     resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
     peerDependencies:
       monaco-editor: '>= 0.25.0 < 1'
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -3354,10 +3348,10 @@ packages:
   '@radix-ui/react-accordion@1.2.2':
     resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3367,10 +3361,10 @@ packages:
   '@radix-ui/react-alert-dialog@1.1.5':
     resolution: {integrity: sha512-1Y2sI17QzSZP58RjGtrklfSGIf3AF7U/HkD3aAcAnhOUJrm7+7GG1wRDFaUlSe0nW5B/t4mYd/+7RNbP2Wexug==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3380,10 +3374,10 @@ packages:
   '@radix-ui/react-arrow@1.1.1':
     resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3393,10 +3387,10 @@ packages:
   '@radix-ui/react-aspect-ratio@1.1.1':
     resolution: {integrity: sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3406,10 +3400,10 @@ packages:
   '@radix-ui/react-avatar@1.1.2':
     resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3419,10 +3413,10 @@ packages:
   '@radix-ui/react-checkbox@1.1.3':
     resolution: {integrity: sha512-HD7/ocp8f1B3e6OHygH0n7ZKjONkhciy1Nh0yuBgObqThc3oyx+vuMfFHKAknXRHHWVE9XvXStxJFyjUmB8PIw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3432,10 +3426,10 @@ packages:
   '@radix-ui/react-collapsible@1.1.2':
     resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3445,10 +3439,10 @@ packages:
   '@radix-ui/react-collection@1.1.1':
     resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3458,8 +3452,8 @@ packages:
   '@radix-ui/react-compose-refs@1.1.1':
     resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3467,10 +3461,10 @@ packages:
   '@radix-ui/react-context-menu@2.2.5':
     resolution: {integrity: sha512-MY5PFCwo/ICaaQtpQBQ0g19AyjzI0mhz+a2GUWA2pJf4XFkvglAdcgDV2Iqm+lLbXn8hb+6rbLgcmRtc6ImPvg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3480,8 +3474,8 @@ packages:
   '@radix-ui/react-context@1.1.1':
     resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3489,10 +3483,10 @@ packages:
   '@radix-ui/react-dialog@1.1.5':
     resolution: {integrity: sha512-LaO3e5h/NOEL4OfXjxD43k9Dx+vn+8n+PCFt6uhX/BADFflllyv3WJG6rgvvSVBxpTch938Qq/LGc2MMxipXPw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3502,8 +3496,8 @@ packages:
   '@radix-ui/react-direction@1.1.0':
     resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3511,10 +3505,10 @@ packages:
   '@radix-ui/react-dismissable-layer@1.1.4':
     resolution: {integrity: sha512-XDUI0IVYVSwjMXxM6P4Dfti7AH+Y4oS/TB+sglZ/EXc7cqLwGAmp1NlMrcUjj7ks6R5WTZuWKv44FBbLpwU3sA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3524,10 +3518,10 @@ packages:
   '@radix-ui/react-dropdown-menu@2.1.5':
     resolution: {integrity: sha512-50ZmEFL1kOuLalPKHrLWvPFMons2fGx9TqQCWlPwDVpbAnaUJ1g4XNcKqFNMQymYU0kKWR4MDDi+9vUQBGFgcQ==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3537,8 +3531,8 @@ packages:
   '@radix-ui/react-focus-guards@1.1.1':
     resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3546,10 +3540,10 @@ packages:
   '@radix-ui/react-focus-scope@1.1.1':
     resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3559,10 +3553,10 @@ packages:
   '@radix-ui/react-hover-card@1.1.5':
     resolution: {integrity: sha512-0jPlX3ZrUIhtMAY0m1SBn1koI4Yqsizq2UwdUiQF1GseSZLZBPa6b8tNS+m32K94Yb4wxtWFSQs85wujQvwahg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3572,13 +3566,13 @@ packages:
   '@radix-ui/react-icons@1.3.2':
     resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
     peerDependencies:
-      react: 17.0.2
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
 
   '@radix-ui/react-id@1.1.0':
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3586,10 +3580,10 @@ packages:
   '@radix-ui/react-label@2.1.1':
     resolution: {integrity: sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3599,10 +3593,10 @@ packages:
   '@radix-ui/react-menu@2.1.5':
     resolution: {integrity: sha512-uH+3w5heoMJtqVCgYOtYVMECk1TOrkUn0OG0p5MqXC0W2ppcuVeESbou8PTHoqAjbdTEK19AGXBWcEtR5WpEQg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3612,10 +3606,10 @@ packages:
   '@radix-ui/react-menubar@1.1.5':
     resolution: {integrity: sha512-Kzbpcf2bxUmI/G+949+LvSvGkyzIaY7ctb8loydt6YpJR8pQF+j4QbVhYvjs7qxaWK0DEJL3XbP2p46YPRkS3A==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3625,10 +3619,10 @@ packages:
   '@radix-ui/react-navigation-menu@1.2.4':
     resolution: {integrity: sha512-wUi01RrTDTOoGtjEPHsxlzPtVzVc3R/AZ5wfh0dyqMAqolhHAHvG5iQjBCTi2AjQqa77FWWbA3kE3RkD+bDMgQ==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3638,10 +3632,10 @@ packages:
   '@radix-ui/react-popover@1.1.5':
     resolution: {integrity: sha512-YXkTAftOIW2Bt3qKH8vYr6n9gCkVrvyvfiTObVjoHVTHnNj26rmvO87IKa3VgtgCjb8FAQ6qOjNViwl+9iIzlg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3651,10 +3645,10 @@ packages:
   '@radix-ui/react-popper@1.2.1':
     resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3664,10 +3658,10 @@ packages:
   '@radix-ui/react-portal@1.1.3':
     resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3677,10 +3671,10 @@ packages:
   '@radix-ui/react-presence@1.1.2':
     resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3690,10 +3684,10 @@ packages:
   '@radix-ui/react-primitive@2.0.1':
     resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3703,10 +3697,10 @@ packages:
   '@radix-ui/react-progress@1.1.1':
     resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3716,10 +3710,10 @@ packages:
   '@radix-ui/react-radio-group@1.2.2':
     resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3729,10 +3723,10 @@ packages:
   '@radix-ui/react-roving-focus@1.1.1':
     resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3742,10 +3736,10 @@ packages:
   '@radix-ui/react-scroll-area@1.2.2':
     resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3755,10 +3749,10 @@ packages:
   '@radix-ui/react-select@2.1.5':
     resolution: {integrity: sha512-eVV7N8jBXAXnyrc+PsOF89O9AfVgGnbLxUtBb0clJ8y8ENMWLARGMI/1/SBRLz7u4HqxLgN71BJ17eono3wcjA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3768,10 +3762,10 @@ packages:
   '@radix-ui/react-separator@1.1.1':
     resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3781,10 +3775,10 @@ packages:
   '@radix-ui/react-slider@1.2.2':
     resolution: {integrity: sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3794,8 +3788,8 @@ packages:
   '@radix-ui/react-slot@1.1.1':
     resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3803,10 +3797,10 @@ packages:
   '@radix-ui/react-switch@1.1.2':
     resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3816,10 +3810,10 @@ packages:
   '@radix-ui/react-tabs@1.1.2':
     resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3829,10 +3823,10 @@ packages:
   '@radix-ui/react-toast@1.2.5':
     resolution: {integrity: sha512-ZzUsAaOx8NdXZZKcFNDhbSlbsCUy8qQWmzTdgrlrhhZAOx2ofLtKrBDW9fkqhFvXgmtv560Uj16pkLkqML7SHA==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3842,10 +3836,10 @@ packages:
   '@radix-ui/react-toggle-group@1.1.1':
     resolution: {integrity: sha512-OgDLZEA30Ylyz8YSXvnGqIHtERqnUt1KUYTKdw/y8u7Ci6zGiJfXc02jahmcSNK3YcErqioj/9flWC9S1ihfwg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3855,10 +3849,10 @@ packages:
   '@radix-ui/react-toggle@1.1.1':
     resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3868,10 +3862,10 @@ packages:
   '@radix-ui/react-tooltip@1.1.7':
     resolution: {integrity: sha512-ss0s80BC0+g0+Zc53MvilcnTYSOi4mSuFWBPYPuTOFGjx+pUU+ZrmamMNwS56t8MTFlniA5ocjd4jYm/CdhbOg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3881,8 +3875,8 @@ packages:
   '@radix-ui/react-use-callback-ref@1.1.0':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3890,8 +3884,8 @@ packages:
   '@radix-ui/react-use-controllable-state@1.1.0':
     resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3899,8 +3893,8 @@ packages:
   '@radix-ui/react-use-escape-keydown@1.1.0':
     resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3908,8 +3902,8 @@ packages:
   '@radix-ui/react-use-layout-effect@1.1.0':
     resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3917,8 +3911,8 @@ packages:
   '@radix-ui/react-use-previous@1.1.0':
     resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3926,8 +3920,8 @@ packages:
   '@radix-ui/react-use-rect@1.1.0':
     resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3935,8 +3929,8 @@ packages:
   '@radix-ui/react-use-size@1.1.0':
     resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3944,10 +3938,10 @@ packages:
   '@radix-ui/react-visually-hidden@1.1.1':
     resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -3960,38 +3954,38 @@ packages:
   '@reactflow/background@11.3.14':
     resolution: {integrity: sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=17'
+      react-dom: '>=17'
 
   '@reactflow/controls@11.2.14':
     resolution: {integrity: sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=17'
+      react-dom: '>=17'
 
   '@reactflow/core@11.11.4':
     resolution: {integrity: sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=17'
+      react-dom: '>=17'
 
   '@reactflow/minimap@11.7.14':
     resolution: {integrity: sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=17'
+      react-dom: '>=17'
 
   '@reactflow/node-resizer@2.2.14':
     resolution: {integrity: sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=17'
+      react-dom: '>=17'
 
   '@reactflow/node-toolbar@1.3.14':
     resolution: {integrity: sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=17'
+      react-dom: '>=17'
 
   '@remix-run/router@1.21.1':
     resolution: {integrity: sha512-KeBYSwohb8g4/wCcnksvKTYlg69O62sQeLynn2YE+5z7JWEj95if27kclW9QqbrlsQ2DINI8fjbV3zyuKfwjKg==}
@@ -4350,8 +4344,8 @@ packages:
   '@tanstack/react-query@4.20.4':
     resolution: {integrity: sha512-SJRxx13k/csb9lXAJfycgVA1N/yU/h3bvRNWP0+aHMfMjmbyX82FdoAcckDBbOdEyAupvb0byelNHNeypCFSyA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-native: '*'
     peerDependenciesMeta:
       react-dom:
@@ -4379,18 +4373,18 @@ packages:
     resolution: {integrity: sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==}
     engines: {node: '>=12'}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^18.0.0
+      react-dom: ^18.0.0
 
   '@testing-library/react@16.2.0':
     resolution: {integrity: sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ==}
     engines: {node: '>=18'}
     peerDependencies:
       '@testing-library/dom': ^10.0.0
-      '@types/react': ^17.0.3
-      '@types/react-dom': ^17.0.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -4665,13 +4659,13 @@ packages:
   '@types/react-copy-to-clipboard@5.0.7':
     resolution: {integrity: sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==}
 
-  '@types/react-dom@17.0.26':
-    resolution: {integrity: sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==}
+  '@types/react-dom@18.3.5':
+    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
     peerDependencies:
-      '@types/react': ^17.0.3
+      '@types/react': ^18.0.0
 
-  '@types/react@17.0.83':
-    resolution: {integrity: sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==}
+  '@types/react@18.3.18':
+    resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
 
   '@types/retry@0.12.2':
     resolution: {integrity: sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==}
@@ -4679,9 +4673,6 @@ packages:
   '@types/sax@1.2.7':
     resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
 
-  '@types/scheduler@0.16.8':
-    resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
-
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
@@ -4838,8 +4829,8 @@ packages:
   '@uiw/react-markdown-preview@5.1.3':
     resolution: {integrity: sha512-jV02wO4XHWFk54kz7sLqOkdPgJLttSfKLyen47XgjcyGgQXU2I4WJBygmdpV2AT9m/MiQ8qrN1Y+E5Syv9ZDpw==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
@@ -5689,8 +5680,8 @@ packages:
   cmdk@1.0.4:
     resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
 
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
@@ -6232,7 +6223,7 @@ packages:
   embla-carousel-react@8.5.2:
     resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
     peerDependencies:
-      react: 17.0.2
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
   embla-carousel-reactive-utils@8.5.2:
     resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
@@ -7397,8 +7388,8 @@ packages:
   input-otp@1.4.2:
     resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
@@ -7836,8 +7827,8 @@ packages:
     resolution: {integrity: sha512-41Su098mpHIX29hF/XOpDb0SqF6EES7+HXfrhuBqVSzRkxX48hD5i8nGsEewWZNAsBWJCTTmuz8M946Ih2PfcQ==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '>=17.0.0'
+      react: '>=17.0.0'
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -8092,7 +8083,7 @@ packages:
   lucide-react@0.407.0:
     resolution: {integrity: sha512-+dRIu9Sry+E8wPF9+sY5eKld2omrU4X5IKXxrgqBt+o11IIHVU0QOfNoVWFuj0ZRDrxr4Wci26o2mKZqLGE0lA==}
     peerDependencies:
-      react: 17.0.2
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
@@ -8502,8 +8493,8 @@ packages:
   next-themes@0.3.0:
     resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.8 || ^17 || ^18
+      react-dom: ^16.8 || ^17 || ^18
 
   nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
@@ -9084,7 +9075,7 @@ packages:
   prism-react-renderer@2.4.1:
     resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
     peerDependencies:
-      react: 17.0.2
+      react: '>=16.0.0'
 
   prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
@@ -9165,24 +9156,29 @@ packages:
     resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
     peerDependencies:
       date-fns: ^2.28.0 || ^3.0.0
-      react: 17.0.2
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
   react-dom@17.0.2:
     resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
     peerDependencies:
       react: 17.0.2
 
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
   react-hook-form@7.54.2:
     resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      react: 17.0.2
+      react: ^16.8.0 || ^17 || ^18 || ^19
 
   react-i18next@15.4.0:
     resolution: {integrity: sha512-Py6UkX3zV08RTvL6ZANRoBh9sL/ne6rQq79XlkHEdd82cZr2H9usbWpUNVadJntIZP2pu3M2rL1CN+5rQYfYFw==}
     peerDependencies:
       i18next: '>= 23.2.3'
-      react: 17.0.2
+      react: '>= 16.8.0'
       react-dom: '*'
       react-native: '*'
     peerDependenciesMeta:
@@ -9194,8 +9190,8 @@ packages:
   react-intersection-observer@9.15.1:
     resolution: {integrity: sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       react-dom:
         optional: true
@@ -9212,21 +9208,21 @@ packages:
   react-keywords@1.0.0:
     resolution: {integrity: sha512-UVrRZP9/QKph4QULhKHKr048STYc/7c/6jbepPEx4hJkTnepIIGKkp3707G6oDKwlX7rIcyjBoHYxnG49dWC0w==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
 
   react-live@4.1.8:
     resolution: {integrity: sha512-B2SgNqwPuS2ekqj4lcxi5TibEcjWkdVyYykBEUBshPAPDQ527x2zPEZg560n8egNtAjUpwXFQm7pcXV65aAYmg==}
     engines: {node: '>= 0.12.0', npm: '>= 2.0.0'}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
 
   react-markdown@9.0.3:
     resolution: {integrity: sha512-Yk7Z94dbgYTOrdk41Z74GoKA7rThnsbbqBTRYuxoe08qvfQ9tJVhmAKw6BJS/ZORG7kTy/s1QvYzSuaoBA1qfw==}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '>=18'
+      react: '>=18'
 
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
@@ -9236,8 +9232,8 @@ packages:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9246,8 +9242,8 @@ packages:
     resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9255,28 +9251,28 @@ packages:
   react-resizable-panels@2.1.7:
     resolution: {integrity: sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
   react-router-dom@6.28.2:
     resolution: {integrity: sha512-O81EWqNJWqvlN/a7eTudAdQm0TbI7hw+WIi7OwwMcTn5JMyZ0ibTFNGz+t+Lju0df4LcqowCegcrK22lB1q9Kw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=16.8'
+      react-dom: '>=16.8'
 
   react-router@6.28.2:
     resolution: {integrity: sha512-BgFY7+wEGVjHCiqaj2XiUBQ1kkzfg6UoKYwEe0wv+FF+HNPCxtS/MVPvLAPH++EsuCMReZl9RYVGqcHLk5ms3A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      react: 17.0.2
+      react: '>=16.8'
 
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9285,16 +9281,20 @@ packages:
     resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
     engines: {node: '>=0.10.0'}
 
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   reactflow@11.11.4:
     resolution: {integrity: sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: '>=17'
+      react-dom: '>=17'
 
   reactivity-store@0.3.9:
     resolution: {integrity: sha512-ADKscagTECPmc1zWkCbj6iuJgan3+DX8FcB3FwG4k00B+07kz+HWfp9hup5uyaElYnCrZsuvoClxzWV6AqP91A==}
     peerDependencies:
-      react: 17.0.2
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
@@ -9670,6 +9670,9 @@ packages:
   scheduler@0.20.2:
     resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==}
 
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
   schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
@@ -9842,8 +9845,8 @@ packages:
   sonner@1.7.2:
     resolution: {integrity: sha512-zMbseqjrOzQD1a93lxahm+qMGxWovdMxBlkTbbnZdNqVLt4j+amF9PQxUCL32WfztOFt9t9ADYkejAL3jF9iNA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
   sort-keys@5.1.0:
     resolution: {integrity: sha512-aSbHV0DaBcr7u0PVHXzM6NbZNAtrr9sF6+Qfs9UUVG7Ll3jQ6hHi8F/xqIIcn2rvIVbr0v/2zyjSdwSV47AgLQ==}
@@ -10597,8 +10600,8 @@ packages:
     resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10606,14 +10609,14 @@ packages:
   use-editable@2.3.3:
     resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==}
     peerDependencies:
-      react: 17.0.2
+      react: '>= 16.8.0'
 
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^17.0.3
-      react: 17.0.2
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10621,7 +10624,7 @@ packages:
   use-sync-external-store@1.4.0:
     resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
     peerDependencies:
-      react: 17.0.2
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -10659,8 +10662,8 @@ packages:
   vaul@1.1.2:
     resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
     peerDependencies:
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
@@ -11266,9 +11269,9 @@ packages:
     resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
     engines: {node: '>=12.7.0'}
     peerDependencies:
-      '@types/react': ^17.0.3
+      '@types/react': '>=16.8'
       immer: '>=9.0.6'
-      react: 17.0.2
+      react: '>=16.8'
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -11387,13 +11390,13 @@ snapshots:
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/react@4.1.6(@types/node@22.10.10)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(jiti@1.21.7)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0)':
+  '@astrojs/react@4.1.6(@types/node@22.10.10)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(jiti@1.21.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0)':
     dependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
       '@vitejs/plugin-react': 4.3.4(vite@6.0.11(@types/node@22.10.10)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0))
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       ultrahtml: 1.5.3
       vite: 6.0.11(@types/node@22.10.10)(jiti@1.21.7)(sass@1.83.4)(terser@5.37.0)(yaml@2.7.0)
     transitivePeerDependencies:
@@ -12296,29 +12299,29 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
-  '@dnd-kit/accessibility@3.1.1(react@17.0.2)':
+  '@dnd-kit/accessibility@3.1.1(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
       tslib: 2.8.1
 
-  '@dnd-kit/core@6.3.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@dnd-kit/accessibility': 3.1.1(react@17.0.2)
-      '@dnd-kit/utilities': 3.2.2(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@dnd-kit/accessibility': 3.1.1(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       tslib: 2.8.1
 
-  '@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.3.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+  '@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@dnd-kit/core': 6.3.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@dnd-kit/utilities': 3.2.2(react@17.0.2)
-      react: 17.0.2
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
       tslib: 2.8.1
 
-  '@dnd-kit/utilities@3.2.2(react@17.0.2)':
+  '@dnd-kit/utilities@3.2.2(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
       tslib: 2.8.1
 
   '@emmetio/abbreviation@2.3.3':
@@ -12621,11 +12624,11 @@ snapshots:
       '@floating-ui/core': 1.6.9
       '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/react-dom@2.1.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/dom': 1.6.13
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   '@floating-ui/utils@0.2.9': {}
 
@@ -12654,28 +12657,28 @@ snapshots:
       highlight.js: 11.11.1
       lowlight: 3.3.0
 
-  '@git-diff-view/react@0.0.16(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@git-diff-view/react@0.0.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@git-diff-view/core': 0.0.16
       '@types/hast': 3.0.4
       highlight.js: 11.11.1
       lowlight: 3.3.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      reactivity-store: 0.3.9(react@17.0.2)
-      use-sync-external-store: 1.4.0(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      reactivity-store: 0.3.9(react@18.3.1)
+      use-sync-external-store: 1.4.0(react@18.3.1)
 
-  '@git-diff-view/react@0.0.21(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@git-diff-view/react@0.0.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@git-diff-view/core': 0.0.21
       '@types/hast': 3.0.4
       fast-diff: 1.3.0
       highlight.js: 11.11.1
       lowlight: 3.3.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      reactivity-store: 0.3.9(react@17.0.2)
-      use-sync-external-store: 1.4.0(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      reactivity-store: 0.3.9(react@18.3.1)
+      use-sync-external-store: 1.4.0(react@18.3.1)
 
   '@git-diff-view/shiki@0.0.16':
     dependencies:
@@ -12695,6 +12698,10 @@ snapshots:
     dependencies:
       react-hook-form: 7.54.2(react@17.0.2)
 
+  '@hookform/resolvers@3.10.0(react-hook-form@7.54.2(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.54.2(react@18.3.1)
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -13180,12 +13187,12 @@ snapshots:
       monaco-editor: 0.40.0
       state-local: 1.0.7
 
-  '@monaco-editor/react@4.6.0(monaco-editor@0.40.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@monaco-editor/react@4.6.0(monaco-editor@0.40.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@monaco-editor/loader': 1.4.0(monaco-editor@0.40.0)
       monaco-editor: 0.40.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
@@ -13292,686 +13299,686 @@ snapshots:
 
   '@radix-ui/primitive@1.1.1': {}
 
-  '@radix-ui/react-accordion@1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-accordion@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-alert-dialog@1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-alert-dialog@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-arrow@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-arrow@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-aspect-ratio@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-aspect-ratio@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-avatar@1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-avatar@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-checkbox@1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-checkbox@1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-collapsible@1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-collapsible@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-collection@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-collection@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-compose-refs@1.1.1(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-context-menu@2.2.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-context-menu@2.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-menu': 2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-context@1.1.1(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-context@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-dialog@1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-dialog@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      react-remove-scroll: 2.6.3(@types/react@17.0.83)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-direction@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-direction@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-dismissable-layer@1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-dismissable-layer@1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-dropdown-menu@2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-dropdown-menu@2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-menu': 2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-focus-guards@1.1.1(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-hover-card@1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-hover-card@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-popper': 1.2.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-icons@1.3.2(react@17.0.2)':
+  '@radix-ui/react-icons@1.3.2(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
 
-  '@radix-ui/react-id@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-id@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-label@2.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-label@2.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-menu@2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-menu@2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-popper': 1.2.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      react-remove-scroll: 2.6.3(@types/react@17.0.83)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-menubar@1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-menubar@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-menu': 2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-navigation-menu@1.2.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-navigation-menu@1.2.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-popover@1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-popover@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-popper': 1.2.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      react-remove-scroll: 2.6.3(@types/react@17.0.83)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
-
-  '@radix-ui/react-popper@1.2.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-rect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@17.0.83)(react@17.0.2)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-popper@1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/rect': 1.1.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-portal@1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-portal@1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-presence@1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-primitive@2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-primitive@2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-progress@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-progress@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-radio-group@1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-radio-group@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/number': 1.1.0
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-select@2.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-select@2.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/number': 1.1.0
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-popper': 1.2.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       aria-hidden: 1.2.4
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      react-remove-scroll: 2.6.3(@types/react@17.0.83)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-separator@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-separator@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-slider@1.2.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-slider@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/number': 1.1.0
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-slot@1.1.1(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-slot@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-switch@1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-switch@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-tabs@1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-tabs@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-toast@1.2.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-toast@1.2.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-toggle-group@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-toggle-group@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-direction': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-toggle': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-toggle@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-toggle@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-tooltip@1.1.7(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-tooltip@1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-context': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-popper': 1.2.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-slot': 1.1.1(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
-  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-previous@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-rect@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       '@radix-ui/rect': 1.1.0
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-use-size@1.1.0(@types/react@17.0.83)(react@17.0.2)':
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      react: 17.0.2
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
   '@radix-ui/rect@1.1.0': {}
 
-  '@reactflow/background@11.3.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@reactflow/background@11.3.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      zustand: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/controls@11.2.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@reactflow/controls@11.2.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      zustand: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/core@11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@reactflow/core@11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@types/d3': 7.4.3
       '@types/d3-drag': 3.0.7
@@ -13981,48 +13988,48 @@ snapshots:
       d3-drag: 3.0.0
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      zustand: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/minimap@11.7.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@reactflow/minimap@11.7.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/d3-selection': 3.0.11
       '@types/d3-zoom': 3.0.8
       classcat: 5.0.5
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      zustand: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/node-resizer@2.2.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@reactflow/node-resizer@2.2.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
       d3-drag: 3.0.0
       d3-selection: 3.0.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      zustand: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/node-toolbar@1.3.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@reactflow/node-toolbar@1.3.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      zustand: 4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
@@ -14434,13 +14441,13 @@ snapshots:
 
   '@tanstack/query-core@4.20.4': {}
 
-  '@tanstack/react-query@4.20.4(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@tanstack/react-query@4.20.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/query-core': 4.20.4
-      react: 17.0.2
-      use-sync-external-store: 1.4.0(react@17.0.2)
+      react: 18.3.1
+      use-sync-external-store: 1.4.0(react@18.3.1)
     optionalDependencies:
-      react-dom: 17.0.2(react@17.0.2)
+      react-dom: 18.3.1(react@18.3.1)
 
   '@testing-library/dom@10.4.0':
     dependencies:
@@ -14486,25 +14493,35 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react@13.4.0(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@testing-library/react@13.4.0(@types/react@18.3.18)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
     dependencies:
       '@babel/runtime': 7.26.7
       '@testing-library/dom': 8.20.1
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
       react: 17.0.2
       react-dom: 17.0.2(react@17.0.2)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@testing-library/react@16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@testing-library/react@13.4.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.7
+      '@testing-library/dom': 8.20.1
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+
+  '@testing-library/react@16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
       '@testing-library/dom': 10.4.0
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
-      '@types/react-dom': 17.0.26(@types/react@17.0.83)
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
   '@testing-library/user-event@13.5.0(@testing-library/dom@10.4.0)':
     dependencies:
@@ -14819,16 +14836,15 @@ snapshots:
 
   '@types/react-copy-to-clipboard@5.0.7':
     dependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@types/react-dom@17.0.26(@types/react@17.0.83)':
+  '@types/react-dom@18.3.5(@types/react@18.3.18)':
     dependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  '@types/react@17.0.83':
+  '@types/react@18.3.18':
     dependencies:
       '@types/prop-types': 15.7.14
-      '@types/scheduler': 0.16.8
       csstype: 3.1.3
 
   '@types/retry@0.12.2': {}
@@ -14837,8 +14853,6 @@ snapshots:
     dependencies:
       '@types/node': 22.10.10
 
-  '@types/scheduler@0.16.8': {}
-
   '@types/semver@7.5.8': {}
 
   '@types/send@0.17.4':
@@ -15116,13 +15130,13 @@ snapshots:
 
   '@uiw/copy-to-clipboard@1.0.17': {}
 
-  '@uiw/react-markdown-preview@5.1.3(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+  '@uiw/react-markdown-preview@5.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
       '@uiw/copy-to-clipboard': 1.0.17
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      react-markdown: 9.0.3(@types/react@17.0.83)(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-markdown: 9.0.3(@types/react@18.3.18)(react@18.3.1)
       rehype-attr: 3.0.3
       rehype-autolink-headings: 7.1.0
       rehype-ignore: 2.0.2
@@ -15461,17 +15475,17 @@ snapshots:
 
   '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.97.1)':
     dependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.97.1)
 
   '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.97.1)':
     dependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.97.1)
 
   '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.2.0)(webpack@5.97.1)':
     dependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.97.1)
     optionalDependencies:
       webpack-dev-server: 5.2.0(webpack-cli@5.1.4)(webpack@5.97.1)
@@ -16363,14 +16377,14 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  cmdk@1.0.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  cmdk@1.0.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      use-sync-external-store: 1.4.0(react@17.0.2)
+      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.4.0(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -16576,7 +16590,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       semver: 7.6.3
     optionalDependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
 
   css-modules-loader-core@1.1.0:
     dependencies:
@@ -16911,11 +16925,11 @@ snapshots:
 
   elkjs@0.9.3: {}
 
-  embla-carousel-react@8.5.2(react@17.0.2):
+  embla-carousel-react@8.5.2(react@18.3.1):
     dependencies:
       embla-carousel: 8.5.2
       embla-carousel-reactive-utils: 8.5.2(embla-carousel@8.5.2)
-      react: 17.0.2
+      react: 18.3.1
 
   embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
     dependencies:
@@ -18285,7 +18299,7 @@ snapshots:
       pretty-error: 4.0.0
       tapable: 2.2.1
     optionalDependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
 
   html-whitespace-sensitive-tag-names@3.0.1: {}
 
@@ -18461,10 +18475,10 @@ snapshots:
 
   inline-style-parser@0.2.4: {}
 
-  input-otp@1.4.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  input-otp@1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   internal-slot@1.1.0:
     dependencies:
@@ -19171,10 +19185,10 @@ snapshots:
 
   jju@1.4.0: {}
 
-  jotai@2.11.1(@types/react@17.0.83)(react@17.0.2):
+  jotai@2.11.1(@types/react@18.3.18)(react@18.3.1):
     optionalDependencies:
-      '@types/react': 17.0.83
-      react: 17.0.2
+      '@types/react': 18.3.18
+      react: 18.3.1
 
   joycon@3.1.1: {}
 
@@ -19427,9 +19441,9 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  lucide-react@0.407.0(react@17.0.2):
+  lucide-react@0.407.0(react@18.3.1):
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
 
   lz-string@1.5.0: {}
 
@@ -20031,7 +20045,7 @@ snapshots:
     dependencies:
       loader-utils: 2.0.4
       monaco-editor: 0.40.0
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
 
   monaco-editor@0.40.0: {}
 
@@ -20094,10 +20108,10 @@ snapshots:
 
   neotraverse@0.6.18: {}
 
-  next-themes@0.3.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   nice-try@1.0.5: {}
 
@@ -20648,11 +20662,11 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 18.3.1
 
-  prism-react-renderer@2.4.1(react@17.0.2):
+  prism-react-renderer@2.4.1(react@18.3.1):
     dependencies:
       '@types/prismjs': 1.26.5
       clsx: 2.1.1
-      react: 17.0.2
+      react: 18.3.1
 
   prismjs@1.29.0: {}
 
@@ -20731,10 +20745,10 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-day-picker@8.10.1(date-fns@3.6.0)(react@17.0.2):
+  react-day-picker@8.10.1(date-fns@3.6.0)(react@18.3.1):
     dependencies:
       date-fns: 3.6.0
-      react: 17.0.2
+      react: 18.3.1
 
   react-dom@17.0.2(react@17.0.2):
     dependencies:
@@ -20743,33 +20757,43 @@ snapshots:
       react: 17.0.2
       scheduler: 0.20.2
 
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
   react-hook-form@7.54.2(react@17.0.2):
     dependencies:
       react: 17.0.2
 
-  react-i18next@15.4.0(i18next@24.2.1(typescript@5.6.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react-hook-form@7.54.2(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  react-i18next@15.4.0(i18next@24.2.1(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.7
       html-parse-stringify: 3.0.1
       i18next: 24.2.1(typescript@5.6.3)
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      react-dom: 17.0.2(react@17.0.2)
+      react-dom: 18.3.1(react@18.3.1)
 
-  react-i18next@15.4.0(i18next@24.2.1(typescript@5.7.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react-i18next@15.4.0(i18next@24.2.1(typescript@5.7.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.7
       html-parse-stringify: 3.0.1
       i18next: 24.2.1(typescript@5.7.3)
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      react-dom: 17.0.2(react@17.0.2)
+      react-dom: 18.3.1(react@18.3.1)
 
-  react-intersection-observer@9.15.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react-intersection-observer@9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
     optionalDependencies:
-      react-dom: 17.0.2(react@17.0.2)
+      react-dom: 18.3.1(react@18.3.1)
 
   react-is@16.13.1: {}
 
@@ -20777,28 +20801,28 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-keywords@1.0.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react-keywords@1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  react-live@4.1.8(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react-live@4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      prism-react-renderer: 2.4.1(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      prism-react-renderer: 2.4.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       sucrase: 3.35.0
-      use-editable: 2.3.3(react@17.0.2)
+      use-editable: 2.3.3(react@18.3.1)
 
-  react-markdown@9.0.3(@types/react@17.0.83)(react@17.0.2):
+  react-markdown@9.0.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       '@types/hast': 3.0.4
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
       devlop: 1.1.0
       hast-util-to-jsx-runtime: 2.3.2
       html-url-attributes: 3.0.1
       mdast-util-to-hast: 13.2.0
-      react: 17.0.2
+      react: 18.3.1
       remark-parse: 11.0.0
       remark-rehype: 11.1.1
       unified: 11.0.5
@@ -20809,76 +20833,80 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@17.0.83)(react@17.0.2):
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.18)(react@18.3.1):
     dependencies:
-      react: 17.0.2
-      react-style-singleton: 2.2.3(@types/react@17.0.83)(react@17.0.2)
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.18)(react@18.3.1)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  react-remove-scroll@2.6.3(@types/react@17.0.83)(react@17.0.2):
+  react-remove-scroll@2.6.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
-      react: 17.0.2
-      react-remove-scroll-bar: 2.3.8(@types/react@17.0.83)(react@17.0.2)
-      react-style-singleton: 2.2.3(@types/react@17.0.83)(react@17.0.2)
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.18)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.18)(react@18.3.1)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@17.0.83)(react@17.0.2)
-      use-sidecar: 1.1.3(@types/react@17.0.83)(react@17.0.2)
+      use-callback-ref: 1.3.3(@types/react@18.3.18)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  react-resizable-panels@2.1.7(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react-resizable-panels@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  react-router-dom@6.28.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react-router-dom@6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@remix-run/router': 1.21.1
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
-      react-router: 6.28.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-router: 6.28.2(react@18.3.1)
 
-  react-router@6.28.2(react@17.0.2):
+  react-router@6.28.2(react@18.3.1):
     dependencies:
       '@remix-run/router': 1.21.1
-      react: 17.0.2
+      react: 18.3.1
 
-  react-style-singleton@2.2.3(@types/react@17.0.83)(react@17.0.2):
+  react-style-singleton@2.2.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
-      react: 17.0.2
+      react: 18.3.1
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
   react@17.0.2:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
 
-  reactflow@11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  react@18.3.1:
     dependencies:
-      '@reactflow/background': 11.3.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@reactflow/controls': 11.2.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@reactflow/core': 11.11.4(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@reactflow/minimap': 11.7.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@reactflow/node-resizer': 2.2.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@reactflow/node-toolbar': 1.3.14(@types/react@17.0.83)(immer@10.1.1)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      loose-envify: 1.4.0
+
+  reactflow@11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@reactflow/background': 11.3.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/controls': 11.2.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/minimap': 11.7.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/node-resizer': 2.2.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/node-toolbar': 1.3.14(@types/react@18.3.18)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  reactivity-store@0.3.9(react@17.0.2):
+  reactivity-store@0.3.9(react@18.3.1):
     dependencies:
       '@vue/reactivity': 3.5.13
       '@vue/shared': 3.5.13
       jsan: 3.1.14
-      react: 17.0.2
-      use-sync-external-store: 1.4.0(react@17.0.2)
+      react: 18.3.1
+      use-sync-external-store: 1.4.0(react@18.3.1)
 
   read-cache@1.0.0:
     dependencies:
@@ -21393,6 +21421,10 @@ snapshots:
       loose-envify: 1.4.0
       object-assign: 4.1.1
 
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
@@ -21651,10 +21683,10 @@ snapshots:
       uuid: 8.3.2
       websocket-driver: 0.7.4
 
-  sonner@1.7.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  sonner@1.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   sort-keys@5.1.0:
     dependencies:
@@ -21879,7 +21911,7 @@ snapshots:
 
   style-loader@4.0.0(webpack@5.97.1):
     dependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
 
   style-to-object@1.0.8:
     dependencies:
@@ -22444,28 +22476,28 @@ snapshots:
     optionalDependencies:
       file-loader: 6.2.0(webpack@5.97.1)
 
-  use-callback-ref@1.3.3(@types/react@17.0.83)(react@17.0.2):
+  use-callback-ref@1.3.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  use-editable@2.3.3(react@17.0.2):
+  use-editable@2.3.3(react@18.3.1):
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
 
-  use-sidecar@1.1.3(@types/react@17.0.83)(react@17.0.2):
+  use-sidecar@1.1.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       detect-node-es: 1.1.0
-      react: 17.0.2
+      react: 18.3.1
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
 
-  use-sync-external-store@1.4.0(react@17.0.2):
+  use-sync-external-store@1.4.0(react@18.3.1):
     dependencies:
-      react: 17.0.2
+      react: 18.3.1
 
   util-deprecate@1.0.2: {}
 
@@ -22492,11 +22524,11 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vaul@1.1.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2):
+  vaul@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      react: 17.0.2
-      react-dom: 17.0.2(react@17.0.2)
+      '@radix-ui/react-dialog': 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -23002,7 +23034,7 @@ snapshots:
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
       webpack-merge: 5.10.0
     optionalDependencies:
       webpack-dev-server: 5.2.0(webpack-cli@5.1.4)(webpack@5.97.1)
@@ -23016,7 +23048,7 @@ snapshots:
       range-parser: 1.2.1
       schema-utils: 4.3.0
     optionalDependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
 
   webpack-dev-server@5.2.0(webpack-cli@5.1.4)(webpack@5.97.1):
     dependencies:
@@ -23048,7 +23080,7 @@ snapshots:
       webpack-dev-middleware: 7.4.2(webpack@5.97.1)
       ws: 8.18.0
     optionalDependencies:
-      webpack: 5.97.1(webpack-cli@5.1.4)
+      webpack: 5.97.1(@swc/core@1.10.9)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.97.1)
     transitivePeerDependencies:
       - bufferutil
@@ -23331,12 +23363,12 @@ snapshots:
 
   zod@3.24.1: {}
 
-  zustand@4.5.6(@types/react@17.0.83)(immer@10.1.1)(react@17.0.2):
+  zustand@4.5.6(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1):
     dependencies:
-      use-sync-external-store: 1.4.0(react@17.0.2)
+      use-sync-external-store: 1.4.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 17.0.83
+      '@types/react': 18.3.18
       immer: 10.1.1
-      react: 17.0.2
+      react: 18.3.1
 
   zwitch@2.0.4: {}