@uipath/apollo-react 4.1.0 → 4.1.2

package/dist/canvas/components/AddNodePanel/AddNodePreview.cjs

@@ -45,9 +45,9 @@ const PreviewContainer = styled_default().div`
   width: ${(props)=>props.width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
   height: ${(props)=>props.height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
   border-radius: 16px;
-  background: var(--uix-canvas-background-secondary);
+  background: var(--canvas-background-secondary);
   border: 2px dashed
-    ${(props)=>props.selected ? 'var(--uix-canvas-selection-indicator)' : 'var(--uix-canvas-border-de-emp)'};
+    ${(props)=>props.selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -59,12 +59,12 @@ const getIcon = (iconName)=>{
     if (iconName) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
         icon: iconName,
         size: 40,
-        color: "var(--uix-canvas-foreground-de-emp)"
+        color: "var(--canvas-foreground-de-emp)"
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
         icon: "ellipsis",
         size: 40,
-        color: "var(--uix-canvas-foreground-de-emp)"
+        color: "var(--canvas-foreground-de-emp)"
     });
 };
 const AddNodePreview = ({ selected, data, width, height })=>{

package/dist/canvas/components/AddNodePanel/AddNodePreview.js

@@ -7,9 +7,9 @@ const PreviewContainer = styled.div`
   width: ${(props)=>props.width ?? DEFAULT_NODE_SIZE}px;
   height: ${(props)=>props.height ?? DEFAULT_NODE_SIZE}px;
   border-radius: 16px;
-  background: var(--uix-canvas-background-secondary);
+  background: var(--canvas-background-secondary);
   border: 2px dashed
-    ${(props)=>props.selected ? 'var(--uix-canvas-selection-indicator)' : 'var(--uix-canvas-border-de-emp)'};
+    ${(props)=>props.selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -21,12 +21,12 @@ const getIcon = (iconName)=>{
     if (iconName) return /*#__PURE__*/ jsx(CanvasIcon, {
         icon: iconName,
         size: 40,
-        color: "var(--uix-canvas-foreground-de-emp)"
+        color: "var(--canvas-foreground-de-emp)"
     });
     return /*#__PURE__*/ jsx(CanvasIcon, {
         icon: "ellipsis",
         size: 40,
-        color: "var(--uix-canvas-foreground-de-emp)"
+        color: "var(--canvas-foreground-de-emp)"
     });
 };
 const AddNodePreview = ({ selected, data, width, height })=>{

package/dist/canvas/components/AgentCanvas/AgentFlow.cjs

@@ -60,8 +60,8 @@ const external_agent_flow_manifest_cjs_namespaceObject = require("./agent-flow.m
 const ToolbarContainer = styled_default().div`
   display: flex;
   align-items: center;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-de-emp);
   border-radius: 16px;
   padding: 4px;
   gap: 4px;
@@ -78,10 +78,10 @@ const ToolbarButton = styled_default().button`
   cursor: pointer;
   border-radius: 16px;
   transition: background-color 0.15s ease;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
 
   &:hover {
-    background: var(--uix-canvas-background-hover);
+    background: var(--canvas-background-hover);
   }
 `;
 const edgeTypes = {

package/dist/canvas/components/AgentCanvas/AgentFlow.js

@@ -22,8 +22,8 @@ import { agentFlowManifest } from "./agent-flow.manifest.js";
 const ToolbarContainer = styled.div`
   display: flex;
   align-items: center;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-de-emp);
   border-radius: 16px;
   padding: 4px;
   gap: 4px;
@@ -40,10 +40,10 @@ const ToolbarButton = styled.button`
   cursor: pointer;
   border-radius: 16px;
   transition: background-color 0.15s ease;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
 
   &:hover {
-    background: var(--uix-canvas-background-hover);
+    background: var(--canvas-background-hover);
   }
 `;
 const edgeTypes = {

package/dist/canvas/components/AgentCanvas/agent-flow.manifest.cjs

@@ -42,7 +42,7 @@ const agentFlowCategories = [
         sortOrder: 1,
         color: 'linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%)',
         colorDark: 'linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%)',
-        icon: 'smart_toy',
+        icon: 'bot',
         tags: [
             'agent',
             'ai',
@@ -76,7 +76,7 @@ const conversationalAgentManifest = {
     display: {
         label: 'Conversational Agent',
         description: 'An agent that can engage in conversations',
-        icon: 'chat',
+        icon: 'bot-message-square',
         shape: 'rectangle'
     },
     handleConfiguration: [
@@ -133,7 +133,7 @@ const autonomousAgentManifest = {
     display: {
         label: 'Autonomous Agent',
         description: 'An agent that can work independently',
-        icon: 'precision_manufacturing',
+        icon: 'bot',
         shape: 'rectangle'
     },
     handleConfiguration: [
@@ -190,7 +190,7 @@ const contextResourceManifest = {
     display: {
         label: 'Context',
         description: 'Context information for agents',
-        icon: "description",
+        icon: 'file-text',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -219,7 +219,7 @@ const toolResourceManifest = {
     display: {
         label: 'Tool',
         description: 'A tool or function for agents to use',
-        icon: 'build',
+        icon: 'wrench',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -248,7 +248,7 @@ const mcpResourceManifest = {
     display: {
         label: 'MCP Resource',
         description: 'Model Context Protocol resource',
-        icon: 'hub',
+        icon: 'network',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -277,7 +277,7 @@ const escalationResourceManifest = {
     display: {
         label: 'Escalation',
         description: 'Escalation point for human intervention',
-        icon: 'person',
+        icon: 'user',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -306,7 +306,7 @@ const memoryResourceManifest = {
     display: {
         label: 'Memory Space',
         description: 'Memory storage for agent state',
-        icon: 'memory',
+        icon: 'memory-stick',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -336,7 +336,7 @@ const a2aResourceManifest = {
     display: {
         label: 'A2A Resource',
         description: 'Agent-to-Agent Protocol resource',
-        icon: 'hub',
+        icon: 'network',
         shape: 'circle'
     },
     handleConfiguration: [

package/dist/canvas/components/AgentCanvas/agent-flow.manifest.js

@@ -5,7 +5,7 @@ const agentFlowCategories = [
         sortOrder: 1,
         color: 'linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%)',
         colorDark: 'linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%)',
-        icon: 'smart_toy',
+        icon: 'bot',
         tags: [
             'agent',
             'ai',
@@ -39,7 +39,7 @@ const conversationalAgentManifest = {
     display: {
         label: 'Conversational Agent',
         description: 'An agent that can engage in conversations',
-        icon: 'chat',
+        icon: 'bot-message-square',
         shape: 'rectangle'
     },
     handleConfiguration: [
@@ -96,7 +96,7 @@ const autonomousAgentManifest = {
     display: {
         label: 'Autonomous Agent',
         description: 'An agent that can work independently',
-        icon: 'precision_manufacturing',
+        icon: 'bot',
         shape: 'rectangle'
     },
     handleConfiguration: [
@@ -153,7 +153,7 @@ const contextResourceManifest = {
     display: {
         label: 'Context',
         description: 'Context information for agents',
-        icon: "description",
+        icon: 'file-text',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -182,7 +182,7 @@ const toolResourceManifest = {
     display: {
         label: 'Tool',
         description: 'A tool or function for agents to use',
-        icon: 'build',
+        icon: 'wrench',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -211,7 +211,7 @@ const mcpResourceManifest = {
     display: {
         label: 'MCP Resource',
         description: 'Model Context Protocol resource',
-        icon: 'hub',
+        icon: 'network',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -240,7 +240,7 @@ const escalationResourceManifest = {
     display: {
         label: 'Escalation',
         description: 'Escalation point for human intervention',
-        icon: 'person',
+        icon: 'user',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -269,7 +269,7 @@ const memoryResourceManifest = {
     display: {
         label: 'Memory Space',
         description: 'Memory storage for agent state',
-        icon: 'memory',
+        icon: 'memory-stick',
         shape: 'circle'
     },
     handleConfiguration: [
@@ -299,7 +299,7 @@ const a2aResourceManifest = {
     display: {
         label: 'A2A Resource',
         description: 'Agent-to-Agent Protocol resource',
-        icon: 'hub',
+        icon: 'network',
         shape: 'circle'
     },
     handleConfiguration: [

package/dist/canvas/components/AgentCanvas/components/PaneContextMenu.cjs

@@ -45,7 +45,7 @@ const MenuContainer = styled_default()(react_namespaceObject.motion.div)`
   left: ${(props)=>props.$x}px;
   top: ${(props)=>props.$y}px;
   min-width: 180px;
-  background: var(--uix-canvas-background);
+  background: var(--canvas-background);
   box-shadow:
     0 8px 24px rgba(0, 0, 0, 0.08),
     0 2px 8px rgba(0, 0, 0, 0.04);
@@ -64,11 +64,11 @@ const MenuItem = styled_default().button`
   transition: background 0.15s ease;
   font-size: 12px;
   font-weight: 400;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   text-align: left;
 
   &:hover {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
   }
 `;
 const PaneContextMenu = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ isOpen, position, items, onClose })=>{

package/dist/canvas/components/AgentCanvas/components/PaneContextMenu.js

@@ -7,7 +7,7 @@ const MenuContainer = styled(motion.div)`
   left: ${(props)=>props.$x}px;
   top: ${(props)=>props.$y}px;
   min-width: 180px;
-  background: var(--uix-canvas-background);
+  background: var(--canvas-background);
   box-shadow:
     0 8px 24px rgba(0, 0, 0, 0.08),
     0 2px 8px rgba(0, 0, 0, 0.04);
@@ -26,11 +26,11 @@ const MenuItem = styled.button`
   transition: background 0.15s ease;
   font-size: 12px;
   font-weight: 400;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   text-align: left;
 
   &:hover {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
   }
 `;
 const PaneContextMenu = /*#__PURE__*/ memo(({ isOpen, position, items, onClose })=>{

package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.cjs

@@ -63,7 +63,7 @@ const Divider = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         style: {
             width: 1,
             height: '24px',
-            backgroundColor: 'var(--uix-canvas-border)'
+            backgroundColor: 'var(--canvas-border)'
         }
     });
 const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
@@ -87,7 +87,7 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
                 onClick: onNavigatePrevious,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                     icon: "chevron-up",
-                    color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
+                    color: isHoveringUp ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)',
                     size: iconSize
                 })
             }),
@@ -108,7 +108,7 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
                 onClick: onNavigateNext,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                     icon: "chevron-down",
-                    color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
+                    color: isHoveringDown ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)',
                     size: iconSize
                 })
             })
@@ -126,10 +126,10 @@ const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, curre
             px: apollo_core_namespaceObject.Spacing.SpacingXs,
             gap: apollo_core_namespaceObject.Spacing.SpacingXs,
             style: {
-                backgroundColor: 'var(--uix-canvas-background-secondary)',
-                color: 'var(--uix-canvas-foreground)',
+                backgroundColor: 'var(--canvas-background-secondary)',
+                color: 'var(--canvas-foreground)',
                 borderRadius: '8px',
-                border: '1px solid var(--uix-canvas-border-de-emp)',
+                border: '1px solid var(--canvas-border-de-emp)',
                 boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.3)'
             },
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {

package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AA2GD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CAyD3B,CAAC"}
+{"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAyGD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CAyD3B,CAAC"}

package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.js

@@ -35,7 +35,7 @@ const Divider = ()=>/*#__PURE__*/ jsx("div", {
         style: {
             width: 1,
             height: '24px',
-            backgroundColor: 'var(--uix-canvas-border)'
+            backgroundColor: 'var(--canvas-border)'
         }
     });
 const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
@@ -59,7 +59,7 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
                 onClick: onNavigatePrevious,
                 children: /*#__PURE__*/ jsx(CanvasIcon, {
                     icon: "chevron-up",
-                    color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
+                    color: isHoveringUp ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)',
                     size: iconSize
                 })
             }),
@@ -80,7 +80,7 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
                 onClick: onNavigateNext,
                 children: /*#__PURE__*/ jsx(CanvasIcon, {
                     icon: "chevron-down",
-                    color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
+                    color: isHoveringDown ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)',
                     size: iconSize
                 })
             })
@@ -98,10 +98,10 @@ const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, curre
             px: Spacing.SpacingXs,
             gap: Spacing.SpacingXs,
             style: {
-                backgroundColor: 'var(--uix-canvas-background-secondary)',
-                color: 'var(--uix-canvas-foreground)',
+                backgroundColor: 'var(--canvas-background-secondary)',
+                color: 'var(--canvas-foreground)',
                 borderRadius: '8px',
-                border: '1px solid var(--uix-canvas-border-de-emp)',
+                border: '1px solid var(--canvas-border-de-emp)',
                 boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.3)'
             },
             children: /*#__PURE__*/ jsxs(Row, {

package/dist/canvas/components/AgentCanvas/components/TimelinePlayer.cjs

@@ -72,17 +72,17 @@ const TimelineBar = /*#__PURE__*/ external_react_default().forwardRef((props, re
 const SpanBlock = ({ left, width, isActive = false, isPlayed = false, depth = 0, title, status, progressPosition = 0 })=>{
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const getStatusColor = ()=>{
-        if (1 === status) return 'var(--uix-canvas-success-icon)';
-        if (2 === status) return 'var(--uix-canvas-error-icon)';
-        if (3 === status) return 'var(--uix-canvas-info-icon)';
-        return 'var(--uix-canvas-border-de-emp)';
+        if (1 === status) return 'var(--canvas-success-icon)';
+        if (2 === status) return 'var(--canvas-error-icon)';
+        if (3 === status) return 'var(--canvas-info-icon)';
+        return 'var(--canvas-border-de-emp)';
     };
     const getBackgroundStyle = ()=>{
         if (isPlayed) return {
             backgroundColor: getStatusColor()
         };
         return {
-            backgroundColor: 'var(--uix-canvas-border-de-emp)'
+            backgroundColor: 'var(--canvas-border-de-emp)'
         };
     };
     const getBaseBackgroundStyle = ()=>{
@@ -109,7 +109,7 @@ const SpanBlock = ({ left, width, isActive = false, isPlayed = false, depth = 0,
                             left: 0,
                             width: `${progressWithinSpan}%`,
                             height: '100%',
-                            backgroundColor: 'var(--uix-canvas-info-icon)',
+                            backgroundColor: 'var(--canvas-info-icon)',
                             borderRadius: 'var(--Small, 2px)',
                             borderTopRightRadius: 100 === progressWithinSpan ? 'var(--Small, 2px)' : 0,
                             borderBottomRightRadius: 100 === progressWithinSpan ? 'var(--Small, 2px)' : 0
@@ -122,7 +122,7 @@ const SpanBlock = ({ left, width, isActive = false, isPlayed = false, depth = 0,
                             left: `${progressWithinSpan}%`,
                             width: `${100 - progressWithinSpan}%`,
                             height: '100%',
-                            backgroundColor: 'var(--uix-canvas-border-de-emp)',
+                            backgroundColor: 'var(--canvas-border-de-emp)',
                             borderRadius: 'var(--Small, 2px)',
                             borderTopLeftRadius: 0 === progressWithinSpan ? 'var(--Small, 2px)' : 0,
                             borderBottomLeftRadius: 0 === progressWithinSpan ? 'var(--Small, 2px)' : 0
@@ -158,7 +158,7 @@ const TrackBar = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         style: {
             position: 'absolute',
             top: `${TIMELINE_BAR_HEIGHT / 2 - TIMELINE_TRACK_BAR_HEIGHT / 2}px`,
-            backgroundColor: 'var(--uix-canvas-background)',
+            backgroundColor: 'var(--canvas-background)',
             height: `${TIMELINE_TRACK_BAR_HEIGHT}px`,
             borderRadius: '2px',
             width: '100%',
@@ -177,7 +177,7 @@ const Scrubber = ({ left })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.TimelineProgressIcon, {
             w: 10,
             h: 10,
-            color: "color-mix(in srgb, var(--uix-canvas-info-icon) 85%, black)"
+            color: "color-mix(in srgb, var(--canvas-info-icon) 85%, black)"
         })
     });
 function formatTime(ms) {
@@ -412,10 +412,10 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
         gap: apollo_core_namespaceObject.Spacing.SpacingXs,
         minW: 640,
         style: {
-            backgroundColor: 'var(--uix-canvas-background-secondary)',
-            color: 'var(--uix-canvas-foreground)',
+            backgroundColor: 'var(--canvas-background-secondary)',
+            color: 'var(--canvas-foreground)',
             borderRadius: '8px',
-            border: '1px solid var(--uix-canvas-border-de-emp)'
+            border: '1px solid var(--canvas-border-de-emp)'
         },
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Row, {
@@ -430,11 +430,11 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                         children: playing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.TimelinePauseIcon, {
                             w: 24,
                             h: 24,
-                            color: "var(--uix-canvas-icon-default)"
+                            color: "var(--canvas-icon-default)"
                         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.TimelinePlayIcon, {
                             w: 24,
                             h: 24,
-                            color: "var(--uix-canvas-icon-default)"
+                            color: "var(--canvas-icon-default)"
                         })
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {

package/dist/canvas/components/AgentCanvas/components/TimelinePlayer.js

@@ -34,17 +34,17 @@ const TimelineBar = /*#__PURE__*/ react.forwardRef((props, ref)=>/*#__PURE__*/ j
 const SpanBlock = ({ left, width, isActive = false, isPlayed = false, depth = 0, title, status, progressPosition = 0 })=>{
     const [isHovered, setIsHovered] = useState(false);
     const getStatusColor = ()=>{
-        if (1 === status) return 'var(--uix-canvas-success-icon)';
-        if (2 === status) return 'var(--uix-canvas-error-icon)';
-        if (3 === status) return 'var(--uix-canvas-info-icon)';
-        return 'var(--uix-canvas-border-de-emp)';
+        if (1 === status) return 'var(--canvas-success-icon)';
+        if (2 === status) return 'var(--canvas-error-icon)';
+        if (3 === status) return 'var(--canvas-info-icon)';
+        return 'var(--canvas-border-de-emp)';
     };
     const getBackgroundStyle = ()=>{
         if (isPlayed) return {
             backgroundColor: getStatusColor()
         };
         return {
-            backgroundColor: 'var(--uix-canvas-border-de-emp)'
+            backgroundColor: 'var(--canvas-border-de-emp)'
         };
     };
     const getBaseBackgroundStyle = ()=>{
@@ -71,7 +71,7 @@ const SpanBlock = ({ left, width, isActive = false, isPlayed = false, depth = 0,
                             left: 0,
                             width: `${progressWithinSpan}%`,
                             height: '100%',
-                            backgroundColor: 'var(--uix-canvas-info-icon)',
+                            backgroundColor: 'var(--canvas-info-icon)',
                             borderRadius: 'var(--Small, 2px)',
                             borderTopRightRadius: 100 === progressWithinSpan ? 'var(--Small, 2px)' : 0,
                             borderBottomRightRadius: 100 === progressWithinSpan ? 'var(--Small, 2px)' : 0
@@ -84,7 +84,7 @@ const SpanBlock = ({ left, width, isActive = false, isPlayed = false, depth = 0,
                             left: `${progressWithinSpan}%`,
                             width: `${100 - progressWithinSpan}%`,
                             height: '100%',
-                            backgroundColor: 'var(--uix-canvas-border-de-emp)',
+                            backgroundColor: 'var(--canvas-border-de-emp)',
                             borderRadius: 'var(--Small, 2px)',
                             borderTopLeftRadius: 0 === progressWithinSpan ? 'var(--Small, 2px)' : 0,
                             borderBottomLeftRadius: 0 === progressWithinSpan ? 'var(--Small, 2px)' : 0
@@ -120,7 +120,7 @@ const TrackBar = ()=>/*#__PURE__*/ jsx("div", {
         style: {
             position: 'absolute',
             top: `${TIMELINE_BAR_HEIGHT / 2 - TIMELINE_TRACK_BAR_HEIGHT / 2}px`,
-            backgroundColor: 'var(--uix-canvas-background)',
+            backgroundColor: 'var(--canvas-background)',
             height: `${TIMELINE_TRACK_BAR_HEIGHT}px`,
             borderRadius: '2px',
             width: '100%',
@@ -139,7 +139,7 @@ const Scrubber = ({ left })=>/*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsx(TimelineProgressIcon, {
             w: 10,
             h: 10,
-            color: "color-mix(in srgb, var(--uix-canvas-info-icon) 85%, black)"
+            color: "color-mix(in srgb, var(--canvas-info-icon) 85%, black)"
         })
     });
 function formatTime(ms) {
@@ -374,10 +374,10 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
         gap: Spacing.SpacingXs,
         minW: 640,
         style: {
-            backgroundColor: 'var(--uix-canvas-background-secondary)',
-            color: 'var(--uix-canvas-foreground)',
+            backgroundColor: 'var(--canvas-background-secondary)',
+            color: 'var(--canvas-foreground)',
             borderRadius: '8px',
-            border: '1px solid var(--uix-canvas-border-de-emp)'
+            border: '1px solid var(--canvas-border-de-emp)'
         },
         children: [
             /*#__PURE__*/ jsxs(Row, {
@@ -392,11 +392,11 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                         children: playing ? /*#__PURE__*/ jsx(TimelinePauseIcon, {
                             w: 24,
                             h: 24,
-                            color: "var(--uix-canvas-icon-default)"
+                            color: "var(--canvas-icon-default)"
                         }) : /*#__PURE__*/ jsx(TimelinePlayIcon, {
                             w: 24,
                             h: 24,
-                            color: "var(--uix-canvas-icon-default)"
+                            color: "var(--canvas-icon-default)"
                         })
                     }),
                     /*#__PURE__*/ jsxs("span", {

package/dist/canvas/components/AgentCanvas/edges/StaticEdge.cjs

@@ -47,15 +47,15 @@ const StaticEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, ta
     ]);
     const strokeColor = (0, external_react_namespaceObject.useMemo)(()=>{
         if (isSuggestion) {
-            if ('add' === suggestionType) return 'var(--uix-canvas-success-icon)';
-            if ('update' === suggestionType) return 'var(--uix-canvas-warning-icon)';
-            if ('delete' === suggestionType) return 'var(--uix-canvas-error-icon)';
+            if ('add' === suggestionType) return 'var(--canvas-success-icon)';
+            if ('update' === suggestionType) return 'var(--canvas-warning-icon)';
+            if ('delete' === suggestionType) return 'var(--canvas-error-icon)';
         }
-        if (hasError) return 'var(--uix-canvas-error-icon)';
-        if (isCurrentBreakpoint) return 'var(--uix-canvas-warning-icon)';
-        if (hasSuccess) return 'var(--uix-canvas-success-icon)';
-        if (hasRunning) return 'var(--uix-canvas-primary)';
-        return isConnectedToSelectedResource ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border)';
+        if (hasError) return 'var(--canvas-error-icon)';
+        if (isCurrentBreakpoint) return 'var(--canvas-warning-icon)';
+        if (hasSuccess) return 'var(--canvas-success-icon)';
+        if (hasRunning) return 'var(--canvas-primary)';
+        return isConnectedToSelectedResource ? 'var(--canvas-primary)' : 'var(--canvas-border)';
     }, [
         hasError,
         isCurrentBreakpoint,

package/dist/canvas/components/AgentCanvas/edges/StaticEdge.js

@@ -19,15 +19,15 @@ const StaticEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, ta
     ]);
     const strokeColor = useMemo(()=>{
         if (isSuggestion) {
-            if ('add' === suggestionType) return 'var(--uix-canvas-success-icon)';
-            if ('update' === suggestionType) return 'var(--uix-canvas-warning-icon)';
-            if ('delete' === suggestionType) return 'var(--uix-canvas-error-icon)';
+            if ('add' === suggestionType) return 'var(--canvas-success-icon)';
+            if ('update' === suggestionType) return 'var(--canvas-warning-icon)';
+            if ('delete' === suggestionType) return 'var(--canvas-error-icon)';
         }
-        if (hasError) return 'var(--uix-canvas-error-icon)';
-        if (isCurrentBreakpoint) return 'var(--uix-canvas-warning-icon)';
-        if (hasSuccess) return 'var(--uix-canvas-success-icon)';
-        if (hasRunning) return 'var(--uix-canvas-primary)';
-        return isConnectedToSelectedResource ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border)';
+        if (hasError) return 'var(--canvas-error-icon)';
+        if (isCurrentBreakpoint) return 'var(--canvas-warning-icon)';
+        if (hasSuccess) return 'var(--canvas-success-icon)';
+        if (hasRunning) return 'var(--canvas-primary)';
+        return isConnectedToSelectedResource ? 'var(--canvas-primary)' : 'var(--canvas-border)';
     }, [
         hasError,
         isCurrentBreakpoint,