@uipath/apollo-react 4.1.0 → 4.1.1

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/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,

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.cjs

@@ -56,12 +56,12 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
     const suggestTranslations = suggestionTranslations ?? external_types_cjs_namespaceObject.DefaultSuggestionTranslations;
     const agentIcon = (0, external_react_namespaceObject.useMemo)(()=>{
         if (isConversational) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ConversationalAgentIcon, {
-            color: "var(--uix-canvas-foreground-de-emp)",
+            color: "var(--canvas-foreground-de-emp)",
             w: 32,
             h: 32
         });
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.AutonomousAgentIcon, {
-            color: "var(--uix-canvas-foreground-de-emp)",
+            color: "var(--canvas-foreground-de-emp)",
             w: 32,
             h: 32
         });
@@ -136,8 +136,8 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
             handleType: 'artifact',
             label: translations.memory,
             showButton: 'design' === mode && !hasMemory,
-            color: 'var(--uix-canvas-foreground-de-emp)',
-            labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+            color: 'var(--canvas-foreground-de-emp)',
+            labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayMemory,
             onAction: (_e)=>{
                 onAddResource?.('memorySpace');
@@ -149,8 +149,8 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
             handleType: 'artifact',
             label: translations.escalations,
             showButton: 'design' === mode,
-            color: 'var(--uix-canvas-foreground-de-emp)',
-            labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+            color: 'var(--canvas-foreground-de-emp)',
+            labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayEscalation,
             onAction: (_e)=>{
                 onAddResource?.('escalation');
@@ -168,8 +168,8 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
                 handleType: 'artifact',
                 label: translations.context,
                 showButton: 'design' === mode,
-                color: 'var(--uix-canvas-foreground-de-emp)',
-                labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+                color: 'var(--canvas-foreground-de-emp)',
+                labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayContext,
                 onAction: (_e)=>{
                     onAddResource?.('context');
@@ -180,8 +180,8 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
                 handleType: 'artifact',
                 label: translations.tools,
                 showButton: 'design' === mode,
-                color: 'var(--uix-canvas-foreground-de-emp)',
-                labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+                color: 'var(--canvas-foreground-de-emp)',
+                labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayTool || displayMcp || displayA2a,
                 onAction: (_e)=>{
                     if (displayTool) onAddResource?.('tool');
@@ -490,8 +490,8 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
                             label: name,
                             subLabel: isConversational ? translations.conversationalAgent : translations.autonomousAgent,
                             shape: 'rectangle',
-                            background: 'var(--uix-canvas-background)',
-                            iconBackground: 'var(--uix-canvas-background-secondary)'
+                            background: 'var(--canvas-background)',
+                            iconBackground: 'var(--canvas-background-secondary)'
                         }
                     },
                     selected: selected

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.js

@@ -28,12 +28,12 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
     const suggestTranslations = suggestionTranslations ?? DefaultSuggestionTranslations;
     const agentIcon = useMemo(()=>{
         if (isConversational) return /*#__PURE__*/ jsx(ConversationalAgentIcon, {
-            color: "var(--uix-canvas-foreground-de-emp)",
+            color: "var(--canvas-foreground-de-emp)",
             w: 32,
             h: 32
         });
         return /*#__PURE__*/ jsx(AutonomousAgentIcon, {
-            color: "var(--uix-canvas-foreground-de-emp)",
+            color: "var(--canvas-foreground-de-emp)",
             w: 32,
             h: 32
         });
@@ -108,8 +108,8 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
             handleType: 'artifact',
             label: translations.memory,
             showButton: 'design' === mode && !hasMemory,
-            color: 'var(--uix-canvas-foreground-de-emp)',
-            labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+            color: 'var(--canvas-foreground-de-emp)',
+            labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayMemory,
             onAction: (_e)=>{
                 onAddResource?.('memorySpace');
@@ -121,8 +121,8 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
             handleType: 'artifact',
             label: translations.escalations,
             showButton: 'design' === mode,
-            color: 'var(--uix-canvas-foreground-de-emp)',
-            labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+            color: 'var(--canvas-foreground-de-emp)',
+            labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayEscalation,
             onAction: (_e)=>{
                 onAddResource?.('escalation');
@@ -140,8 +140,8 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
                 handleType: 'artifact',
                 label: translations.context,
                 showButton: 'design' === mode,
-                color: 'var(--uix-canvas-foreground-de-emp)',
-                labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+                color: 'var(--canvas-foreground-de-emp)',
+                labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayContext,
                 onAction: (_e)=>{
                     onAddResource?.('context');
@@ -152,8 +152,8 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
                 handleType: 'artifact',
                 label: translations.tools,
                 showButton: 'design' === mode,
-                color: 'var(--uix-canvas-foreground-de-emp)',
-                labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+                color: 'var(--canvas-foreground-de-emp)',
+                labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayTool || displayMcp || displayA2a,
                 onAction: (_e)=>{
                     if (displayTool) onAddResource?.('tool');
@@ -462,8 +462,8 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
                             label: name,
                             subLabel: isConversational ? translations.conversationalAgent : translations.autonomousAgent,
                             shape: 'rectangle',
-                            background: 'var(--uix-canvas-background)',
-                            iconBackground: 'var(--uix-canvas-background-secondary)'
+                            background: 'var(--canvas-background)',
+                            iconBackground: 'var(--canvas-background-secondary)'
                         }
                     },
                     selected: selected