@uipath/apollo-react 4.1.0 → 4.1.1

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: [

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

@@ -4,19 +4,19 @@ import { EdgeLabelRenderer, getSmoothStepPath, useStore } from "../../xyflow/rea
 import { memo } from "react";
 const StageEdgeLabel = styled.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) {
@@ -35,7 +35,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] = getSmoothStepPath({
         sourceX: geometry.sourceX,
         sourceY: geometry.sourceY,
@@ -47,7 +47,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__*/ jsxs(Fragment, {
         children: [