@uipath/apollo-react 4.1.0 → 4.1.1

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

@@ -72,9 +72,9 @@ const getValidationStatusBorder = (validationStatus)=>{
         case 'ERROR':
         case 'CRITICAL':
             return (0, react_namespaceObject.css)`
-        border-color: var(--uix-canvas-error-icon);
-        background: var(--uix-canvas-error-background);
-        animation: ${(0, execution_status_cjs_namespaceObject.pulseAnimation)('--uix-canvas-error-icon')} 2s infinite;
+        border-color: var(--canvas-error-icon);
+        background: var(--canvas-error-background);
+        animation: ${(0, execution_status_cjs_namespaceObject.pulseAnimation)('--canvas-error-icon')} 2s infinite;
       `;
         default:
             return null;
@@ -84,7 +84,7 @@ const getInteractionStateBorder = (interactionState)=>{
     switch(interactionState){
         case 'hover':
             return (0, react_namespaceObject.css)`
-        outline: 4px solid var(--uix-canvas-secondary-focused);
+        outline: 4px solid var(--canvas-secondary-focused);
       `;
         case 'disabled':
             return (0, react_namespaceObject.css)`
@@ -113,11 +113,11 @@ const getSuggestionTypeBorder = (suggestionType)=>{
 const getSuggestionTypeBorderColorVar = (suggestionType)=>{
     switch(suggestionType){
         case 'add':
-            return '--uix-canvas-success-icon';
+            return '--canvas-success-icon';
         case 'update':
-            return '--uix-canvas-warning-icon';
+            return '--canvas-warning-icon';
         case 'delete':
-            return '--uix-canvas-error-icon';
+            return '--canvas-error-icon';
         default:
             return null;
     }
@@ -125,11 +125,11 @@ const getSuggestionTypeBorderColorVar = (suggestionType)=>{
 const getSuggestionTypeBackgroundColorVar = (suggestionType)=>{
     switch(suggestionType){
         case 'add':
-            return '--uix-canvas-success-background';
+            return '--canvas-success-background';
         case 'update':
-            return '--uix-canvas-warning-background';
+            return '--canvas-warning-background';
         case 'delete':
-            return '--uix-canvas-error-background';
+            return '--canvas-error-background';
         default:
             return null;
     }
@@ -154,8 +154,8 @@ const BaseContainer = styled_default().div`
     }
     return height ? `${height}px` : `${NODE_HEIGHT_DEFAULT}px`;
 }};
-  background: ${({ backgroundColor })=>backgroundColor || 'var(--uix-canvas-background)'};
-  border: 1.5px solid var(--uix-canvas-border-de-emp);
+  background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background)'};
+  border: 1.5px solid var(--canvas-border-de-emp);
   border-radius: ${({ shape })=>{
     if ('circle' === shape) return '50%';
     return '16px';
@@ -191,8 +191,8 @@ const BaseContainer = styled_default().div`
       `;
     }
     if (selected) return (0, react_namespaceObject.css)`
-        border-color: var(--uix-canvas-primary);
-        outline: 4px solid var(--uix-canvas-secondary-pressed);
+        border-color: var(--canvas-primary);
+        outline: 4px solid var(--canvas-secondary-pressed);
       `;
     return '';
 }}
@@ -208,8 +208,8 @@ const BaseIconWrapper = styled_default().div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ color })=>color || 'var(--uix-canvas-foreground)'};
-  background: ${({ backgroundColor })=>backgroundColor || 'var(--uix-canvas-background-secondary)'};
+  color: ${({ color })=>color || 'var(--canvas-foreground)'};
+  background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-secondary)'};
   border-radius: ${({ shape })=>{
     if ('circle' === shape) return '50%';
     return '8px';
@@ -269,7 +269,7 @@ const BaseTextContainer = styled_default().div`
 const BaseHeader = styled_default().div`
   font-weight: 600;
   font-size: 13px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   ${({ backgroundColor })=>backgroundColor && (0, react_namespaceObject.css)`
       background-color: ${backgroundColor};
       padding: 2px 6px;
@@ -291,7 +291,7 @@ const BaseHeader = styled_default().div`
 `;
 const BaseSubHeader = styled_default().div`
   font-size: 11px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   line-height: 1.3;
   word-break: break-word;
   overflow: hidden;
@@ -311,17 +311,17 @@ const EditableLabel = styled_default().textarea`
   font-size: ${({ variant })=>'subtext' === variant ? '11px' : '13px'};
   line-height: ${({ variant })=>'subtext' === variant ? '1.3' : '1.4'};
   font-family: inherit;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   border: none;
   border-radius: 4px;
-  outline: 1px dashed var(--uix-canvas-border-de-emp);
+  outline: 1px dashed var(--canvas-border-de-emp);
   margin-bottom: ${({ variant })=>'subtext' === variant ? 0 : '2px'};
   max-width: 100%;
 
   ${({ backgroundColor })=>backgroundColor ? (0, react_namespaceObject.css)`
           background-color: ${backgroundColor};
           padding: 2px 6px;
-        ` : 'background-color: color-mix(in srgb, var(--uix-canvas-background) 10%, transparent);'}
+        ` : 'background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);'}
 
   ${({ shape })=>'rectangle' === shape ? (0, react_namespaceObject.css)`
           width: 100%;
@@ -333,9 +333,9 @@ const EmptyLabelPlaceholder = styled_default().div`
   font-weight: 600;
   font-size: 13px;
   line-height: 1.4;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   background: transparent;
-  border: 1px dashed var(--uix-canvas-border-de-emp);
+  border: 1px dashed var(--canvas-border-de-emp);
   border-radius: 4px;
   cursor: pointer;
   opacity: 0;
@@ -345,7 +345,7 @@ const EmptyLabelPlaceholder = styled_default().div`
 
   &:hover {
     opacity: 1;
-    background-color: color-mix(in srgb, var(--uix-canvas-background) 10%, transparent);
+    background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);
   }
 `;
 const BaseBadgeSlot = styled_default().div`

package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA4GtD,eAAO,MAAM,aAAa;;;;eACb,OAAO;sBACA,MAAM;YAChB,SAAS;sBACC,MAAM;uBACL,MAAM;uBACN,MAAM;qBACR,MAAM;YACf,MAAM;aACL,MAAM;gBACH,OAAO;oBACH,aAAa;yGAuE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;YAClB,MAAM;sBACI,MAAM;YAChB,SAAS;aACR,MAAM;YACP,MAAM;yGA0Cf,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uBAAmC,OAAO;YAAU,SAAS;yGAiC1F,CAAC;AAEF,eAAO,MAAM,UAAU;;;;YAAwB,SAAS;sBAAoB,MAAM;yGA2BjF,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAAwB,SAAS;yGAiB1D,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAChB,SAAS;sBACC,MAAM;aACf,QAAQ,GAAG,SAAS;2HA+B9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAkBjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cACd,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc;YAC3D,SAAS;yGAsBlB,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;YAGnB,SAAS;iBACJ,MAAM;gBACP,MAAM;UAcnB,CAAC"}
+{"version":3,"file":"BaseNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA4GtD,eAAO,MAAM,aAAa;;;;eACb,OAAO;sBACA,MAAM;YAChB,SAAS;sBACC,MAAM;uBACL,MAAM;uBACN,MAAM;qBACR,MAAM;YACf,MAAM;aACL,MAAM;gBACH,OAAO;oBACH,aAAa;yGAuE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;YAClB,MAAM;sBACI,MAAM;YAChB,SAAS;aACR,MAAM;YACP,MAAM;yGAyCf,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uBAAmC,OAAO;YAAU,SAAS;yGAiC1F,CAAC;AAEF,eAAO,MAAM,UAAU;;;;YAAwB,SAAS;sBAAoB,MAAM;yGA2BjF,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAAwB,SAAS;yGAiB1D,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAChB,SAAS;sBACC,MAAM;aACf,QAAQ,GAAG,SAAS;2HA+B9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAkBjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cACd,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc;YAC3D,SAAS;yGAsBlB,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;YAGnB,SAAS;iBACJ,MAAM;gBACP,MAAM;UAcnB,CAAC"}

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

@@ -26,9 +26,9 @@ const getValidationStatusBorder = (validationStatus)=>{
         case 'ERROR':
         case 'CRITICAL':
             return css`
-        border-color: var(--uix-canvas-error-icon);
-        background: var(--uix-canvas-error-background);
-        animation: ${pulseAnimation('--uix-canvas-error-icon')} 2s infinite;
+        border-color: var(--canvas-error-icon);
+        background: var(--canvas-error-background);
+        animation: ${pulseAnimation('--canvas-error-icon')} 2s infinite;
       `;
         default:
             return null;
@@ -38,7 +38,7 @@ const getInteractionStateBorder = (interactionState)=>{
     switch(interactionState){
         case 'hover':
             return css`
-        outline: 4px solid var(--uix-canvas-secondary-focused);
+        outline: 4px solid var(--canvas-secondary-focused);
       `;
         case 'disabled':
             return css`
@@ -67,11 +67,11 @@ const getSuggestionTypeBorder = (suggestionType)=>{
 const getSuggestionTypeBorderColorVar = (suggestionType)=>{
     switch(suggestionType){
         case 'add':
-            return '--uix-canvas-success-icon';
+            return '--canvas-success-icon';
         case 'update':
-            return '--uix-canvas-warning-icon';
+            return '--canvas-warning-icon';
         case 'delete':
-            return '--uix-canvas-error-icon';
+            return '--canvas-error-icon';
         default:
             return null;
     }
@@ -79,11 +79,11 @@ const getSuggestionTypeBorderColorVar = (suggestionType)=>{
 const getSuggestionTypeBackgroundColorVar = (suggestionType)=>{
     switch(suggestionType){
         case 'add':
-            return '--uix-canvas-success-background';
+            return '--canvas-success-background';
         case 'update':
-            return '--uix-canvas-warning-background';
+            return '--canvas-warning-background';
         case 'delete':
-            return '--uix-canvas-error-background';
+            return '--canvas-error-background';
         default:
             return null;
     }
@@ -108,8 +108,8 @@ const BaseContainer = styled.div`
     }
     return height ? `${height}px` : `${NODE_HEIGHT_DEFAULT}px`;
 }};
-  background: ${({ backgroundColor })=>backgroundColor || 'var(--uix-canvas-background)'};
-  border: 1.5px solid var(--uix-canvas-border-de-emp);
+  background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background)'};
+  border: 1.5px solid var(--canvas-border-de-emp);
   border-radius: ${({ shape })=>{
     if ('circle' === shape) return '50%';
     return '16px';
@@ -145,8 +145,8 @@ const BaseContainer = styled.div`
       `;
     }
     if (selected) return css`
-        border-color: var(--uix-canvas-primary);
-        outline: 4px solid var(--uix-canvas-secondary-pressed);
+        border-color: var(--canvas-primary);
+        outline: 4px solid var(--canvas-secondary-pressed);
       `;
     return '';
 }}
@@ -162,8 +162,8 @@ const BaseIconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ color })=>color || 'var(--uix-canvas-foreground)'};
-  background: ${({ backgroundColor })=>backgroundColor || 'var(--uix-canvas-background-secondary)'};
+  color: ${({ color })=>color || 'var(--canvas-foreground)'};
+  background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-secondary)'};
   border-radius: ${({ shape })=>{
     if ('circle' === shape) return '50%';
     return '8px';
@@ -223,7 +223,7 @@ const BaseTextContainer = styled.div`
 const BaseHeader = styled.div`
   font-weight: 600;
   font-size: 13px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   ${({ backgroundColor })=>backgroundColor && css`
       background-color: ${backgroundColor};
       padding: 2px 6px;
@@ -245,7 +245,7 @@ const BaseHeader = styled.div`
 `;
 const BaseSubHeader = styled.div`
   font-size: 11px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   line-height: 1.3;
   word-break: break-word;
   overflow: hidden;
@@ -265,17 +265,17 @@ const EditableLabel = styled.textarea`
   font-size: ${({ variant })=>'subtext' === variant ? '11px' : '13px'};
   line-height: ${({ variant })=>'subtext' === variant ? '1.3' : '1.4'};
   font-family: inherit;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   border: none;
   border-radius: 4px;
-  outline: 1px dashed var(--uix-canvas-border-de-emp);
+  outline: 1px dashed var(--canvas-border-de-emp);
   margin-bottom: ${({ variant })=>'subtext' === variant ? 0 : '2px'};
   max-width: 100%;
 
   ${({ backgroundColor })=>backgroundColor ? css`
           background-color: ${backgroundColor};
           padding: 2px 6px;
-        ` : 'background-color: color-mix(in srgb, var(--uix-canvas-background) 10%, transparent);'}
+        ` : 'background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);'}
 
   ${({ shape })=>'rectangle' === shape ? css`
           width: 100%;
@@ -287,9 +287,9 @@ const EmptyLabelPlaceholder = styled.div`
   font-weight: 600;
   font-size: 13px;
   line-height: 1.4;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   background: transparent;
-  border: 1px dashed var(--uix-canvas-border-de-emp);
+  border: 1px dashed var(--canvas-border-de-emp);
   border-radius: 4px;
   cursor: pointer;
   opacity: 0;
@@ -299,7 +299,7 @@ const EmptyLabelPlaceholder = styled.div`
 
   &:hover {
     opacity: 1;
-    background-color: color-mix(in srgb, var(--uix-canvas-background) 10%, transparent);
+    background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);
   }
 `;
 const BaseBadgeSlot = styled.div`

package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.cjs

@@ -69,7 +69,7 @@ const BlankCanvasNode = (props)=>{
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                         icon: "plus",
                         size: 48,
-                        color: "var(--uix-canvas-foreground-de-emp)"
+                        color: "var(--canvas-foreground-de-emp)"
                     })
                 })
             }),

package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.js

@@ -41,7 +41,7 @@ const BlankCanvasNode = (props)=>{
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "plus",
                         size: 48,
-                        color: "var(--uix-canvas-foreground-de-emp)"
+                        color: "var(--canvas-foreground-de-emp)"
                     })
                 })
             }),

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

@@ -46,8 +46,8 @@ const NodeContainer = styled_default().div`
   width: 96px;
   height: 96px;
   border-radius: 16px;
-  background: var(--uix-canvas-background);
-  border: 1.5px solid var(--uix-canvas-border-de-emp);
+  background: var(--canvas-background);
+  border: 1.5px solid var(--canvas-border-de-emp);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
@@ -56,8 +56,8 @@ const NodeContainer = styled_default().div`
   cursor: pointer;
 
   ${({ selected })=>selected && (0, react_namespaceObject.css)`
-      border-color: var(--uix-canvas-selection-indicator);
-      outline: 6px solid var(--uix-canvas-secondary-pressed);
+      border-color: var(--canvas-selection-indicator);
+      outline: 6px solid var(--canvas-secondary-pressed);
     `}
 `;
 const IconWrapper = styled_default().div`
@@ -67,7 +67,7 @@ const IconWrapper = styled_default().div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--uix-canvas-background-secondary);
+  background: var(--canvas-background-secondary);
   object-fit: contain;
 `;
 const TextContainer = styled_default().div`
@@ -85,7 +85,7 @@ const TextContainer = styled_default().div`
 const Header = styled_default().div`
   font-weight: 600;
   font-size: 13px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   line-height: 1.4;
   margin-bottom: 2px;
   word-break: break-word;

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

@@ -5,8 +5,8 @@ const NodeContainer = styled.div`
   width: 96px;
   height: 96px;
   border-radius: 16px;
-  background: var(--uix-canvas-background);
-  border: 1.5px solid var(--uix-canvas-border-de-emp);
+  background: var(--canvas-background);
+  border: 1.5px solid var(--canvas-border-de-emp);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
@@ -15,8 +15,8 @@ const NodeContainer = styled.div`
   cursor: pointer;
 
   ${({ selected })=>selected && css`
-      border-color: var(--uix-canvas-selection-indicator);
-      outline: 6px solid var(--uix-canvas-secondary-pressed);
+      border-color: var(--canvas-selection-indicator);
+      outline: 6px solid var(--canvas-secondary-pressed);
     `}
 `;
 const IconWrapper = styled.div`
@@ -26,7 +26,7 @@ const IconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--uix-canvas-background-secondary);
+  background: var(--canvas-background-secondary);
   object-fit: contain;
 `;
 const TextContainer = styled.div`
@@ -44,7 +44,7 @@ const TextContainer = styled.div`
 const Header = styled.div`
   font-weight: 600;
   font-size: 13px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   line-height: 1.4;
   margin-bottom: 2px;
   word-break: break-word;

package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs

@@ -72,7 +72,7 @@ const AddButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ onAc
         })
     });
 });
-const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, labelIcon, labelBackgroundColor = 'var(--uix-canvas-background-secondary)', visible = true, showButton = true, color = 'var(--uix-canvas-border)', selected = false, index = 0, total = 1, onAction, showNotches = true, customPositionAndOffsets, nodeWidth, nodeHeight })=>{
+const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', visible = true, showButton = true, color = 'var(--canvas-border)', selected = false, index = 0, total = 1, onAction, showNotches = true, customPositionAndOffsets, nodeWidth, nodeHeight })=>{
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const isVertical = position === react_cjs_namespaceObject.Position.Top || position === react_cjs_namespaceObject.Position.Bottom;
     const positionPercent = (0, external_react_namespaceObject.useMemo)(()=>{

package/dist/canvas/components/ButtonHandle/ButtonHandle.js

@@ -43,7 +43,7 @@ const AddButton = /*#__PURE__*/ memo(({ onAction })=>{
         })
     });
 });
-const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, labelIcon, labelBackgroundColor = 'var(--uix-canvas-background-secondary)', visible = true, showButton = true, color = 'var(--uix-canvas-border)', selected = false, index = 0, total = 1, onAction, showNotches = true, customPositionAndOffsets, nodeWidth, nodeHeight })=>{
+const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', visible = true, showButton = true, color = 'var(--canvas-border)', selected = false, index = 0, total = 1, onAction, showNotches = true, customPositionAndOffsets, nodeWidth, nodeHeight })=>{
     const [isHovered, setIsHovered] = useState(false);
     const isVertical = position === Position.Top || position === Position.Bottom;
     const positionPercent = useMemo(()=>{

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

@@ -53,10 +53,10 @@ const StyledAddButton = styled_default()(external_motion_react_namespaceObject.m
   justify-content: center;
   width: 24px;
   height: 24px;
-  background: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground-emp);
+  background: var(--canvas-background);
+  color: var(--canvas-foreground-emp);
   border-radius: 50%;
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  border: 1px solid var(--canvas-border-de-emp);
   cursor: pointer;
   transition:
     background-color 0.2s ease,
@@ -64,9 +64,9 @@ const StyledAddButton = styled_default()(external_motion_react_namespaceObject.m
     border-color 0.2s ease;
 
   &:hover {
-    background-color: var(--uix-canvas-selection-indicator);
-    color: var(--uix-canvas-background);
-    border-color: var(--uix-canvas-selection-indicator);
+    background-color: var(--canvas-selection-indicator);
+    color: var(--canvas-background);
+    border-color: var(--canvas-selection-indicator);
   }
 `;
 const StyledWrapper = styled_default().div`
@@ -105,7 +105,7 @@ const StyledLine = styled_default().div`
   background-color: transparent;
   border-style: solid;
   border-width: 1px;
-  border-color: ${(p)=>p.$selected ? 'var(--uix-canvas-selection-indicator)' : 'var(--uix-canvas-border-de-emp)'};
+  border-color: ${(p)=>p.$selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
   height: ${(p)=>p.$isVertical ? p.$size : '1px'};
   width: ${(p)=>p.$isVertical ? '1px' : p.$size};
   transition: border-color 0.2s ease-in-out;
@@ -158,14 +158,14 @@ const StyledNotch = styled_default().div`
   border-width: 2px;
   border-style: solid;
   border-color: ${(p)=>{
-    if (p.$selected || p.$hovered) return 'var(--uix-canvas-primary)';
-    return 'var(--uix-canvas-border)';
+    if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
+    return 'var(--canvas-border)';
 }};
   border-radius: ${(p)=>'artifact' === p.$handleType || 'input' === p.$handleType ? 0 : '50%'};
   transform: ${(p)=>'artifact' === p.$handleType ? 'rotate(45deg)' : 'none'};
   background-color: ${(p)=>{
-    if (p.$selected || p.$hovered) return 'var(--uix-canvas-primary)';
-    return 'var(--uix-canvas-background, white)';
+    if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
+    return 'var(--canvas-background, white)';
 }};
   opacity: ${(p)=>p.$showNotch ? 1 : 0};
   pointer-events: none;

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

@@ -10,10 +10,10 @@ const StyledAddButton = styled(motion.div)`
   justify-content: center;
   width: 24px;
   height: 24px;
-  background: var(--uix-canvas-background);
-  color: var(--uix-canvas-foreground-emp);
+  background: var(--canvas-background);
+  color: var(--canvas-foreground-emp);
   border-radius: 50%;
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  border: 1px solid var(--canvas-border-de-emp);
   cursor: pointer;
   transition:
     background-color 0.2s ease,
@@ -21,9 +21,9 @@ const StyledAddButton = styled(motion.div)`
     border-color 0.2s ease;
 
   &:hover {
-    background-color: var(--uix-canvas-selection-indicator);
-    color: var(--uix-canvas-background);
-    border-color: var(--uix-canvas-selection-indicator);
+    background-color: var(--canvas-selection-indicator);
+    color: var(--canvas-background);
+    border-color: var(--canvas-selection-indicator);
   }
 `;
 const StyledWrapper = styled.div`
@@ -62,7 +62,7 @@ const StyledLine = styled.div`
   background-color: transparent;
   border-style: solid;
   border-width: 1px;
-  border-color: ${(p)=>p.$selected ? 'var(--uix-canvas-selection-indicator)' : 'var(--uix-canvas-border-de-emp)'};
+  border-color: ${(p)=>p.$selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
   height: ${(p)=>p.$isVertical ? p.$size : '1px'};
   width: ${(p)=>p.$isVertical ? '1px' : p.$size};
   transition: border-color 0.2s ease-in-out;
@@ -115,14 +115,14 @@ const StyledNotch = styled.div`
   border-width: 2px;
   border-style: solid;
   border-color: ${(p)=>{
-    if (p.$selected || p.$hovered) return 'var(--uix-canvas-primary)';
-    return 'var(--uix-canvas-border)';
+    if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
+    return 'var(--canvas-border)';
 }};
   border-radius: ${(p)=>'artifact' === p.$handleType || 'input' === p.$handleType ? 0 : '50%'};
   transform: ${(p)=>'artifact' === p.$handleType ? 'rotate(45deg)' : 'none'};
   background-color: ${(p)=>{
-    if (p.$selected || p.$hovered) return 'var(--uix-canvas-primary)';
-    return 'var(--uix-canvas-background, white)';
+    if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
+    return 'var(--canvas-background, white)';
 }};
   opacity: ${(p)=>p.$showNotch ? 1 : 0};
   pointer-events: none;

package/dist/canvas/components/ButtonHandle/SmartHandle.cjs

@@ -283,7 +283,7 @@ function useSmartPosition(nodeId, handleId, handleType, defaultPosition, hasSour
         hasSourceHandles
     ]);
 }
-function SmartHandle({ type, id, defaultPosition = 'source' === type ? react_namespaceObject.Position.Right : react_namespaceObject.Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--uix-canvas-background-secondary)', showButton = false, selected = false, color = 'var(--uix-canvas-border)', showNotches = true, onAction, visible = true, configOrder, ...rest }) {
+function SmartHandle({ type, id, defaultPosition = 'source' === type ? react_namespaceObject.Position.Right : react_namespaceObject.Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', showButton = false, selected = false, color = 'var(--canvas-border)', showNotches = true, onAction, visible = true, configOrder, ...rest }) {
     const nodeId = (0, react_namespaceObject.useNodeId)();
     const updateNodeInternals = (0, react_namespaceObject.useUpdateNodeInternals)();
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);

package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartHandle.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/SmartHandle.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EAEhB,QAAQ,EAKT,MAAM,eAAe,CAAC;AAcvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiBxD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAErE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAM9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuGD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiEA;AAyUD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,EAAE,EACF,eAAoE,EACpE,UAAmD,EACnD,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,oBAA+D,EAC/D,UAAkB,EAClB,QAAgB,EAChB,KAAkC,EAClC,WAAkB,EAClB,QAAQ,EACR,OAAc,EACd,WAAW,EACX,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAmMlB;AASD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE;AAKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE"}
+{"version":3,"file":"SmartHandle.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/SmartHandle.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EAEhB,QAAQ,EAKT,MAAM,eAAe,CAAC;AAcvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiBxD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAErE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAM9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuGD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiEA;AAyUD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,EAAE,EACF,eAAoE,EACpE,UAAmD,EACnD,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,oBAA2D,EAC3D,UAAkB,EAClB,QAAgB,EAChB,KAA8B,EAC9B,WAAkB,EAClB,QAAQ,EACR,OAAc,EACd,WAAW,EACX,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAmMlB;AASD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE;AAKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE"}

package/dist/canvas/components/ButtonHandle/SmartHandle.js

@@ -252,7 +252,7 @@ function useSmartPosition(nodeId, handleId, handleType, defaultPosition, hasSour
         hasSourceHandles
     ]);
 }
-function SmartHandle({ type, id, defaultPosition = 'source' === type ? Position.Right : Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--uix-canvas-background-secondary)', showButton = false, selected = false, color = 'var(--uix-canvas-border)', showNotches = true, onAction, visible = true, configOrder, ...rest }) {
+function SmartHandle({ type, id, defaultPosition = 'source' === type ? Position.Right : Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', showButton = false, selected = false, color = 'var(--canvas-border)', showNotches = true, onAction, visible = true, configOrder, ...rest }) {
     const nodeId = useNodeId();
     const updateNodeInternals = useUpdateNodeInternals();
     const [isHovered, setIsHovered] = useState(false);

package/dist/canvas/components/CodedAgent/CodedAgentFlow.cjs

@@ -67,7 +67,7 @@ const CodedAgentEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
         targetY,
         targetPosition
     });
-    const strokeColor = animated ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)';
+    const strokeColor = animated ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)';
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.BaseEdge, {
         id: id,
         path: edgePath,
@@ -81,7 +81,7 @@ const CodedAgentEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
     });
 });
 const CenteredDiv = styled_default().div`
-  background-color: var(--uix-canvas-background-secondary);
+  background-color: var(--canvas-background-secondary);
   width: 100%;
   height: 100%;
   display: flex;
@@ -142,12 +142,12 @@ const createCodedAgentNodeWrapper = (translations = external_types_cjs_namespace
             if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                 icon: "circle-alert",
                 size: 16,
-                color: "var(--uix-canvas-error-icon)"
+                color: "var(--canvas-error-icon)"
             });
             if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                 icon: "circle-check",
                 size: 16,
-                color: "var(--uix-canvas-success-icon)"
+                color: "var(--canvas-success-icon)"
             });
             if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
                 size: "sm"
@@ -240,12 +240,12 @@ const CodedResourceNodeElement = /*#__PURE__*/ (0, external_react_namespaceObjec
         if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
             icon: "circle-alert",
             size: 16,
-            color: "var(--uix-canvas-error-icon)"
+            color: "var(--canvas-error-icon)"
         });
         if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
             icon: "circle-check",
             size: 16,
-            color: "var(--uix-canvas-success-icon)"
+            color: "var(--canvas-success-icon)"
         });
         if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
             size: "sm"

package/dist/canvas/components/CodedAgent/CodedAgentFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodedAgentFlow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CodedAgent/CodedAgentFlow.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAEZ,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAG7F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAoUnD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC5B;AAsJD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,KAAG,YAQ3D,CAAC"}
+{"version":3,"file":"CodedAgentFlow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CodedAgent/CodedAgentFlow.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAEZ,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAG7F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAkUnD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC5B;AAsJD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,KAAG,YAQ3D,CAAC"}