@uipath/apollo-react 4.1.0 → 4.1.2

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs

@@ -275,7 +275,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
             width: '100%',
             height: '100%',
             position: 'relative',
-            background: 'var(--uix-canvas-background-secondary)'
+            background: 'var(--canvas-background-secondary)'
         },
         children: [
             breadcrumbs.length > 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -284,7 +284,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                     top: 16,
                     left: 16,
                     zIndex: 10,
-                    background: 'var(--uix-canvas-background)',
+                    background: 'var(--canvas-background)',
                     borderRadius: '8px',
                     padding: '8px 12px',
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js

@@ -247,7 +247,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
             width: '100%',
             height: '100%',
             position: 'relative',
-            background: 'var(--uix-canvas-background-secondary)'
+            background: 'var(--canvas-background-secondary)'
         },
         children: [
             breadcrumbs.length > 1 && /*#__PURE__*/ jsx("div", {
@@ -256,7 +256,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                     top: 16,
                     left: 16,
                     zIndex: 10,
-                    background: 'var(--uix-canvas-background)',
+                    background: 'var(--canvas-background)',
                     borderRadius: '8px',
                     padding: '8px 12px',
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs

@@ -85,7 +85,7 @@ const workflowCategories = [
         sortOrder: 0,
         color: 'linear-gradient(135deg, #FAFAFB 0%, #ECEDEF 100%)',
         colorDark: 'linear-gradient(135deg, #526069 0%, rgba(50, 60, 66, 0.6) 100%)',
-        icon: 'widgets',
+        icon: 'boxes',
         tags: [
             'basic',
             'fundamental'
@@ -140,7 +140,7 @@ const workflowManifests = [
         sortOrder: 1,
         display: {
             label: 'Start',
-            icon: 'play_circle',
+            icon: 'circle-play',
             shape: 'circle'
         },
         handleConfiguration: [
@@ -168,7 +168,7 @@ const workflowManifests = [
         sortOrder: 2,
         display: {
             label: 'End',
-            icon: 'stop_circle',
+            icon: 'circle-stop',
             shape: 'circle'
         },
         handleConfiguration: [
@@ -233,7 +233,7 @@ const workflowManifests = [
         sortOrder: 20,
         display: {
             label: 'Decision',
-            icon: 'help',
+            icon: 'split',
             shape: 'square'
         },
         handleConfiguration: [
@@ -454,7 +454,7 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         flexDirection: 'column',
                         gap: '8px',
                         padding: '8px',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         minWidth: '180px'
@@ -551,8 +551,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     style: {
                         padding: '12px',
-                        color: 'var(--uix-canvas-foreground)',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        color: 'var(--canvas-foreground)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         fontSize: '12px'

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js

@@ -57,7 +57,7 @@ const workflowCategories = [
         sortOrder: 0,
         color: 'linear-gradient(135deg, #FAFAFB 0%, #ECEDEF 100%)',
         colorDark: 'linear-gradient(135deg, #526069 0%, rgba(50, 60, 66, 0.6) 100%)',
-        icon: 'widgets',
+        icon: 'boxes',
         tags: [
             'basic',
             'fundamental'
@@ -112,7 +112,7 @@ const workflowManifests = [
         sortOrder: 1,
         display: {
             label: 'Start',
-            icon: 'play_circle',
+            icon: 'circle-play',
             shape: 'circle'
         },
         handleConfiguration: [
@@ -140,7 +140,7 @@ const workflowManifests = [
         sortOrder: 2,
         display: {
             label: 'End',
-            icon: 'stop_circle',
+            icon: 'circle-stop',
             shape: 'circle'
         },
         handleConfiguration: [
@@ -205,7 +205,7 @@ const workflowManifests = [
         sortOrder: 20,
         display: {
             label: 'Decision',
-            icon: 'help',
+            icon: 'split',
             shape: 'square'
         },
         handleConfiguration: [
@@ -426,7 +426,7 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         flexDirection: 'column',
                         gap: '8px',
                         padding: '8px',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         minWidth: '180px'
@@ -523,8 +523,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                 children: /*#__PURE__*/ jsxs("div", {
                     style: {
                         padding: '12px',
-                        color: 'var(--uix-canvas-foreground)',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        color: 'var(--canvas-foreground)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         fontSize: '12px'

package/dist/canvas/components/MiniCanvasNavigator/MiniCanvasNavigator.cjs

@@ -50,8 +50,8 @@ const MiniCanvasNavigator = /*#__PURE__*/ (0, external_react_namespaceObject.mem
         style: {
             width: 300,
             height: 200,
-            background: 'var(--uix-canvas-background)',
-            border: '1px solid var(--uix-canvas-border-grid)',
+            background: 'var(--canvas-background)',
+            border: '1px solid var(--canvas-border-grid)',
             borderRadius: 8,
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
         },

package/dist/canvas/components/MiniCanvasNavigator/MiniCanvasNavigator.js

@@ -22,8 +22,8 @@ const MiniCanvasNavigator = /*#__PURE__*/ memo(({ previousCanvas, currentCanvasI
         style: {
             width: 300,
             height: 200,
-            background: 'var(--uix-canvas-background)',
-            border: '1px solid var(--uix-canvas-border-grid)',
+            background: 'var(--canvas-background)',
+            border: '1px solid var(--canvas-border-grid)',
             borderRadius: 8,
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
         },

package/dist/canvas/components/NodeInspector.cjs

@@ -142,10 +142,10 @@ function NodeInfoContent({ node, position, absPosition: _absPosition, width, hei
                             whiteSpace: 'pre-wrap',
                             wordWrap: 'break-word',
                             padding: 8,
-                            background: 'var(--uix-canvas-background-secondary)',
+                            background: 'var(--canvas-background-secondary)',
                             overflow: 'auto',
                             height: 300,
-                            color: 'var(--uix-canvas-foreground-de-emp)',
+                            color: 'var(--canvas-foreground-de-emp)',
                             userSelect: 'text'
                         },
                         children: 'string' == typeof data ? data : safeStringify(data)
@@ -305,10 +305,10 @@ function EdgeInfoContent({ edge }) {
                             whiteSpace: 'pre-wrap',
                             wordWrap: 'break-word',
                             padding: 8,
-                            background: 'var(--uix-canvas-background-secondary)',
+                            background: 'var(--canvas-background-secondary)',
                             overflow: 'auto',
                             height: 300,
-                            color: 'var(--uix-canvas-foreground-de-emp)',
+                            color: 'var(--canvas-foreground-de-emp)',
                             userSelect: 'text'
                         },
                         children: 'string' == typeof data ? data : safeStringify(data)

package/dist/canvas/components/NodeInspector.js

@@ -114,10 +114,10 @@ function NodeInfoContent({ node, position, absPosition: _absPosition, width, hei
                             whiteSpace: 'pre-wrap',
                             wordWrap: 'break-word',
                             padding: 8,
-                            background: 'var(--uix-canvas-background-secondary)',
+                            background: 'var(--canvas-background-secondary)',
                             overflow: 'auto',
                             height: 300,
-                            color: 'var(--uix-canvas-foreground-de-emp)',
+                            color: 'var(--canvas-foreground-de-emp)',
                             userSelect: 'text'
                         },
                         children: 'string' == typeof data ? data : safeStringify(data)
@@ -277,10 +277,10 @@ function EdgeInfoContent({ edge }) {
                             whiteSpace: 'pre-wrap',
                             wordWrap: 'break-word',
                             padding: 8,
-                            background: 'var(--uix-canvas-background-secondary)',
+                            background: 'var(--canvas-background-secondary)',
                             overflow: 'auto',
                             height: 300,
-                            color: 'var(--uix-canvas-foreground-de-emp)',
+                            color: 'var(--canvas-foreground-de-emp)',
                             userSelect: 'text'
                         },
                         children: 'string' == typeof data ? data : safeStringify(data)

package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.cjs

@@ -54,7 +54,7 @@ const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const ConfigSection = styled_default().div`
   padding: 16px;
-  border-bottom: 1px solid var(--uix-canvas-border-de-emp);
+  border-bottom: 1px solid var(--canvas-border-de-emp);
 
   &:last-child {
     border-bottom: none;
@@ -63,7 +63,7 @@ const ConfigSection = styled_default().div`
 const SectionTitle = styled_default().div`
   font-weight: 500;
   font-size: 14px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   margin-bottom: 8px;
 `;
 const FieldContainer = styled_default().div`
@@ -75,19 +75,19 @@ const FieldContainer = styled_default().div`
 `;
 const FieldLabel = styled_default().label`
   font-size: 14px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   display: block;
   margin-bottom: 4px;
 `;
 const FieldHelpText = styled_default().span`
   font-size: 12px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   display: block;
   margin-top: 4px;
 `;
 const FieldError = styled_default().span`
   font-size: 12px;
-  color: var(--uix-canvas-error);
+  color: var(--canvas-error);
   display: block;
   margin-top: 4px;
 `;
@@ -97,18 +97,18 @@ const TextInput = styled_default().input`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   transition:
     border-color 0.2s,
     box-shadow 0.2s;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -122,10 +122,10 @@ const TextArea = styled_default().textarea`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   transition:
     border-color 0.2s,
@@ -133,8 +133,8 @@ const TextArea = styled_default().textarea`
   resize: vertical;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -148,10 +148,10 @@ const SelectInput = styled_default().select`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   cursor: pointer;
   transition:
@@ -164,8 +164,8 @@ const SelectInput = styled_default().select`
   background-size: 20px;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -179,18 +179,18 @@ const NumberInput = styled_default().input`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   transition:
     border-color 0.2s,
     box-shadow 0.2s;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -211,12 +211,12 @@ const CheckboxContainer = styled_default().div`
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: var(--uix-canvas-background-hover);
+    background-color: var(--canvas-background-hover);
   }
 `;
 const CheckboxLabel = styled_default().label`
   font-size: 14px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   cursor: pointer;
   user-select: none;
   display: flex;
@@ -227,11 +227,11 @@ const CheckboxInput = styled_default().input`
   height: 18px;
   margin-right: 8px;
   cursor: pointer;
-  accent-color: var(--uix-canvas-primary);
+  accent-color: var(--canvas-primary);
 `;
 const CheckboxHelpText = styled_default().span`
   font-size: 12px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   margin-left: 26px;
   display: block;
 `;
@@ -241,7 +241,7 @@ const InputWrapper = styled_default().div`
   gap: 8px;
 `;
 const InputSuffix = styled_default().span`
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   font-size: 14px;
   white-space: nowrap;
 `;

package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 const ConfigSection = styled.div`
   padding: 16px;
-  border-bottom: 1px solid var(--uix-canvas-border-de-emp);
+  border-bottom: 1px solid var(--canvas-border-de-emp);
 
   &:last-child {
     border-bottom: none;
@@ -10,7 +10,7 @@ const ConfigSection = styled.div`
 const SectionTitle = styled.div`
   font-weight: 500;
   font-size: 14px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   margin-bottom: 8px;
 `;
 const FieldContainer = styled.div`
@@ -22,19 +22,19 @@ const FieldContainer = styled.div`
 `;
 const FieldLabel = styled.label`
   font-size: 14px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   display: block;
   margin-bottom: 4px;
 `;
 const FieldHelpText = styled.span`
   font-size: 12px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   display: block;
   margin-top: 4px;
 `;
 const FieldError = styled.span`
   font-size: 12px;
-  color: var(--uix-canvas-error);
+  color: var(--canvas-error);
   display: block;
   margin-top: 4px;
 `;
@@ -44,18 +44,18 @@ const TextInput = styled.input`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   transition:
     border-color 0.2s,
     box-shadow 0.2s;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -69,10 +69,10 @@ const TextArea = styled.textarea`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   transition:
     border-color 0.2s,
@@ -80,8 +80,8 @@ const TextArea = styled.textarea`
   resize: vertical;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -95,10 +95,10 @@ const SelectInput = styled.select`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   cursor: pointer;
   transition:
@@ -111,8 +111,8 @@ const SelectInput = styled.select`
   background-size: 20px;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -126,18 +126,18 @@ const NumberInput = styled.input`
   font-size: 14px;
   font-family: inherit;
   border: 1px solid
-    ${(props)=>props.hasError ? 'var(--uix-canvas-error)' : 'var(--uix-canvas-border)'};
+    ${(props)=>props.hasError ? 'var(--canvas-error)' : 'var(--canvas-border)'};
   border-radius: 4px;
-  background-color: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground);
+  background-color: var(--canvas-background);
+  color: var(--canvas-foreground);
   outline: none;
   transition:
     border-color 0.2s,
     box-shadow 0.2s;
 
   &:focus {
-    border-color: var(--uix-canvas-primary);
-    box-shadow: 0 0 0 2px var(--uix-canvas-primary-alpha-20);
+    border-color: var(--canvas-primary);
+    box-shadow: 0 0 0 2px var(--canvas-primary-alpha-20);
   }
 
   &:disabled {
@@ -158,12 +158,12 @@ const CheckboxContainer = styled.div`
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: var(--uix-canvas-background-hover);
+    background-color: var(--canvas-background-hover);
   }
 `;
 const CheckboxLabel = styled.label`
   font-size: 14px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   cursor: pointer;
   user-select: none;
   display: flex;
@@ -174,11 +174,11 @@ const CheckboxInput = styled.input`
   height: 18px;
   margin-right: 8px;
   cursor: pointer;
-  accent-color: var(--uix-canvas-primary);
+  accent-color: var(--canvas-primary);
 `;
 const CheckboxHelpText = styled.span`
   font-size: 12px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   margin-left: 26px;
   display: block;
 `;
@@ -188,7 +188,7 @@ const InputWrapper = styled.div`
   gap: 8px;
 `;
 const InputSuffix = styled.span`
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   font-size: 14px;
   white-space: nowrap;
 `;

package/dist/canvas/components/StageNode/StageConnectionEdge.cjs

@@ -55,7 +55,7 @@ function StageConnectionEdge({ fromX, fromY, toX, toY, fromPosition, toPosition,
         targetY,
         targetPosition: toPosition
     });
-    const stroke = 'var(--uix-canvas-selection-indicator)';
+    const stroke = 'var(--canvas-selection-indicator)';
     const strokeWidth = 2.5;
     const arrowSize = 10;
     const { endX, endY, angle } = getArrowFromBezier(pathData, arrowSize);

package/dist/canvas/components/StageNode/StageConnectionEdge.js

@@ -27,7 +27,7 @@ function StageConnectionEdge({ fromX, fromY, toX, toY, fromPosition, toPosition,
         targetY,
         targetPosition: toPosition
     });
-    const stroke = 'var(--uix-canvas-selection-indicator)';
+    const stroke = 'var(--canvas-selection-indicator)';
     const strokeWidth = 2.5;
     const arrowSize = 10;
     const { endX, endY, angle } = getArrowFromBezier(pathData, arrowSize);

package/dist/canvas/components/StageNode/StageEdge.cjs

@@ -43,19 +43,19 @@ const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const StageEdgeLabel = styled_default().div`
   position: absolute;
-  color: var(--uix-canvas-foreground);
-  background: var(--uix-canvas-background);
+  color: var(--canvas-foreground);
+  background: var(--canvas-background);
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid var(--uix-canvas-border);
+  border: 1px solid var(--canvas-border);
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   pointer-events: all;
 
   &:hover {
-    background: var(--uix-canvas-background-hover);
-    border-color: var(--uix-canvas-border-hover);
+    background: var(--canvas-background-hover);
+    border-color: var(--canvas-border-hover);
   }
 `;
 function stageEdgeGeometryEquality(previous, next) {
@@ -74,7 +74,7 @@ function getArrowFromBezier(path, arrowSize) {
         angle
     };
 }
-function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
+function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, style, stroke = 'var(--canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
     const [pathData, labelX, labelY, _ex, _ey] = (0, react_cjs_namespaceObject.getSmoothStepPath)({
         sourceX: geometry.sourceX,
         sourceY: geometry.sourceY,
@@ -86,7 +86,7 @@ function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, st
     });
     const { endX, endY, angle } = getArrowFromBezier(pathData, arrowSize);
     const arrowLineLength = arrowSize;
-    const strokeColor = selected ? 'var(--uix-canvas-selection-indicator)' : stroke;
+    const strokeColor = selected ? 'var(--canvas-selection-indicator)' : stroke;
     const strokeWidthValue = selected ? strokeWidth + 1 : strokeWidth;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [