@uipath/apollo-react 4.1.0 → 4.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/components/AddNodePanel/AddNodePreview.cjs +4 -4
- package/dist/canvas/components/AddNodePanel/AddNodePreview.js +4 -4
- package/dist/canvas/components/AgentCanvas/AgentFlow.cjs +4 -4
- package/dist/canvas/components/AgentCanvas/AgentFlow.js +4 -4
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.cjs +9 -9
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.js +9 -9
- package/dist/canvas/components/AgentCanvas/components/PaneContextMenu.cjs +3 -3
- package/dist/canvas/components/AgentCanvas/components/PaneContextMenu.js +3 -3
- package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.cjs +6 -6
- package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.d.ts.map +1 -1
- package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.js +6 -6
- package/dist/canvas/components/AgentCanvas/components/TimelinePlayer.cjs +14 -14
- package/dist/canvas/components/AgentCanvas/components/TimelinePlayer.js +14 -14
- package/dist/canvas/components/AgentCanvas/edges/StaticEdge.cjs +8 -8
- package/dist/canvas/components/AgentCanvas/edges/StaticEdge.js +8 -8
- package/dist/canvas/components/AgentCanvas/nodes/AgentNode.cjs +13 -13
- package/dist/canvas/components/AgentCanvas/nodes/AgentNode.js +13 -13
- package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.cjs +18 -18
- package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.js +18 -18
- package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.cjs +12 -12
- package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.d.ts.map +1 -1
- package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.js +12 -12
- package/dist/canvas/components/BaseCanvas/BaseCanvas.constants.cjs +2 -2
- package/dist/canvas/components/BaseCanvas/BaseCanvas.constants.d.ts +2 -2
- package/dist/canvas/components/BaseCanvas/BaseCanvas.constants.js +2 -2
- package/dist/canvas/components/BaseCanvas/PanShortcutTeachingUI.cjs +2 -2
- package/dist/canvas/components/BaseCanvas/PanShortcutTeachingUI.js +2 -2
- package/dist/canvas/components/BaseNode/BaseNode.cjs +2 -2
- package/dist/canvas/components/BaseNode/BaseNode.js +2 -2
- package/dist/canvas/components/BaseNode/BaseNode.styles.cjs +24 -24
- package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.styles.js +24 -24
- package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.cjs +1 -1
- package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.js +1 -1
- package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.styles.cjs +6 -6
- package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.styles.js +6 -6
- package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandle.js +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandle.styles.cjs +11 -11
- package/dist/canvas/components/ButtonHandle/ButtonHandle.styles.js +11 -11
- package/dist/canvas/components/ButtonHandle/SmartHandle.cjs +1 -1
- package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/SmartHandle.js +1 -1
- package/dist/canvas/components/CodedAgent/CodedAgentFlow.cjs +6 -6
- package/dist/canvas/components/CodedAgent/CodedAgentFlow.d.ts.map +1 -1
- package/dist/canvas/components/CodedAgent/CodedAgentFlow.js +6 -6
- package/dist/canvas/components/CodedAgent/coded-agent.manifest.cjs +1 -1
- package/dist/canvas/components/CodedAgent/coded-agent.manifest.js +1 -1
- package/dist/canvas/components/Edges/EdgeUtils.cjs +14 -14
- package/dist/canvas/components/Edges/EdgeUtils.js +14 -14
- package/dist/canvas/components/Edges/SequenceEdge.cjs +11 -11
- package/dist/canvas/components/Edges/SequenceEdge.js +11 -11
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs +4 -4
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts.map +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js +4 -4
- package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.cjs +5 -5
- package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.js +5 -5
- package/dist/canvas/components/GroupNode/GroupNode.styles.cjs +19 -19
- package/dist/canvas/components/GroupNode/GroupNode.styles.js +19 -19
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs +2 -2
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js +2 -2
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs +7 -7
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js +7 -7
- package/dist/canvas/components/MiniCanvasNavigator/MiniCanvasNavigator.cjs +2 -2
- package/dist/canvas/components/MiniCanvasNavigator/MiniCanvasNavigator.js +2 -2
- package/dist/canvas/components/NodeInspector.cjs +4 -4
- package/dist/canvas/components/NodeInspector.js +4 -4
- package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.cjs +30 -30
- package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.js +30 -30
- package/dist/canvas/components/StageNode/StageConnectionEdge.cjs +1 -1
- package/dist/canvas/components/StageNode/StageConnectionEdge.js +1 -1
- package/dist/canvas/components/StageNode/StageEdge.cjs +7 -7
- package/dist/canvas/components/StageNode/StageEdge.js +7 -7
- package/dist/canvas/components/StageNode/StageNode.styles.cjs +34 -34
- package/dist/canvas/components/StageNode/StageNode.styles.js +34 -34
- package/dist/canvas/components/StageNode/TaskContent.cjs +1 -1
- package/dist/canvas/components/StageNode/TaskContent.js +1 -1
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.cjs +20 -20
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.d.ts.map +1 -1
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.js +20 -20
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.types.cjs +1 -1
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.types.d.ts +1 -1
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.types.js +1 -1
- package/dist/canvas/components/TaskIcon/TaskIcon.styles.cjs +1 -1
- package/dist/canvas/components/TaskIcon/TaskIcon.styles.js +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.cjs +2 -2
- package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.js +2 -2
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js +1 -1
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.cjs +9 -9
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.js +9 -9
- package/dist/canvas/components/Toolbar/shared/ToolbarButton.styles.cjs +3 -3
- package/dist/canvas/components/Toolbar/shared/ToolbarButton.styles.js +3 -3
- package/dist/canvas/components/Toolbox/ListView.cjs +3 -3
- package/dist/canvas/components/Toolbox/ListView.js +3 -3
- package/dist/canvas/components/Toolbox/ListView.styles.cjs +7 -7
- package/dist/canvas/components/Toolbox/ListView.styles.js +7 -7
- package/dist/canvas/components/Toolbox/SearchBox.styles.cjs +8 -8
- package/dist/canvas/components/Toolbox/SearchBox.styles.js +8 -8
- package/dist/canvas/components/Toolbox/Toolbox.styles.cjs +2 -2
- package/dist/canvas/components/Toolbox/Toolbox.styles.js +2 -2
- package/dist/canvas/components/TriggerNode/TriggerNode.styles.cjs +15 -15
- package/dist/canvas/components/TriggerNode/TriggerNode.styles.js +15 -15
- package/dist/canvas/styles/execution-status.cjs +10 -10
- package/dist/canvas/styles/execution-status.js +10 -10
- package/dist/canvas/styles/variables.css +64 -64
- package/dist/canvas/utils/adornment-resolver.cjs +2 -2
- package/dist/canvas/utils/adornment-resolver.js +2 -2
- package/dist/canvas/utils/coded-agents/mermaid-parser.cjs +1 -1
- package/dist/canvas/utils/coded-agents/mermaid-parser.js +1 -1
- package/dist/canvas/utils/createPreviewNode.cjs +1 -1
- package/dist/canvas/utils/createPreviewNode.js +1 -1
- package/dist/canvas/utils/export-canvas.cjs +1 -1
- package/dist/canvas/utils/export-canvas.d.ts.map +1 -1
- package/dist/canvas/utils/export-canvas.js +1 -1
- package/dist/canvas/utils/manifest-resolver.cjs +1 -1
- package/dist/canvas/utils/manifest-resolver.js +1 -1
- package/package.json +3 -3
|
@@ -67,7 +67,7 @@ const CodedAgentEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
|
|
|
67
67
|
targetY,
|
|
68
68
|
targetPosition
|
|
69
69
|
});
|
|
70
|
-
const strokeColor = animated ? 'var(--
|
|
70
|
+
const strokeColor = animated ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)';
|
|
71
71
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.BaseEdge, {
|
|
72
72
|
id: id,
|
|
73
73
|
path: edgePath,
|
|
@@ -81,7 +81,7 @@ const CodedAgentEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
|
|
|
81
81
|
});
|
|
82
82
|
});
|
|
83
83
|
const CenteredDiv = styled_default().div`
|
|
84
|
-
background-color: var(--
|
|
84
|
+
background-color: var(--canvas-background-secondary);
|
|
85
85
|
width: 100%;
|
|
86
86
|
height: 100%;
|
|
87
87
|
display: flex;
|
|
@@ -142,12 +142,12 @@ const createCodedAgentNodeWrapper = (translations = external_types_cjs_namespace
|
|
|
142
142
|
if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
|
|
143
143
|
icon: "circle-alert",
|
|
144
144
|
size: 16,
|
|
145
|
-
color: "var(--
|
|
145
|
+
color: "var(--canvas-error-icon)"
|
|
146
146
|
});
|
|
147
147
|
if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
|
|
148
148
|
icon: "circle-check",
|
|
149
149
|
size: 16,
|
|
150
|
-
color: "var(--
|
|
150
|
+
color: "var(--canvas-success-icon)"
|
|
151
151
|
});
|
|
152
152
|
if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
|
|
153
153
|
size: "sm"
|
|
@@ -240,12 +240,12 @@ const CodedResourceNodeElement = /*#__PURE__*/ (0, external_react_namespaceObjec
|
|
|
240
240
|
if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
|
|
241
241
|
icon: "circle-alert",
|
|
242
242
|
size: 16,
|
|
243
|
-
color: "var(--
|
|
243
|
+
color: "var(--canvas-error-icon)"
|
|
244
244
|
});
|
|
245
245
|
if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
|
|
246
246
|
icon: "circle-check",
|
|
247
247
|
size: 16,
|
|
248
|
-
color: "var(--
|
|
248
|
+
color: "var(--canvas-success-icon)"
|
|
249
249
|
});
|
|
250
250
|
if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
|
|
251
251
|
size: "sm"
|
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -29,7 +29,7 @@ const CodedAgentEdge = /*#__PURE__*/ memo(({ id, sourceX, sourceY, targetX, targ
|
|
|
29
29
|
targetY,
|
|
30
30
|
targetPosition
|
|
31
31
|
});
|
|
32
|
-
const strokeColor = animated ? 'var(--
|
|
32
|
+
const strokeColor = animated ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)';
|
|
33
33
|
return /*#__PURE__*/ jsx(BaseEdge, {
|
|
34
34
|
id: id,
|
|
35
35
|
path: edgePath,
|
|
@@ -43,7 +43,7 @@ const CodedAgentEdge = /*#__PURE__*/ memo(({ id, sourceX, sourceY, targetX, targ
|
|
|
43
43
|
});
|
|
44
44
|
});
|
|
45
45
|
const CenteredDiv = styled.div`
|
|
46
|
-
background-color: var(--
|
|
46
|
+
background-color: var(--canvas-background-secondary);
|
|
47
47
|
width: 100%;
|
|
48
48
|
height: 100%;
|
|
49
49
|
display: flex;
|
|
@@ -104,12 +104,12 @@ const createCodedAgentNodeWrapper = (translations = DefaultCodedAgentNodeTransla
|
|
|
104
104
|
if (nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
|
|
105
105
|
icon: "circle-alert",
|
|
106
106
|
size: 16,
|
|
107
|
-
color: "var(--
|
|
107
|
+
color: "var(--canvas-error-icon)"
|
|
108
108
|
});
|
|
109
109
|
if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
|
|
110
110
|
icon: "circle-check",
|
|
111
111
|
size: 16,
|
|
112
|
-
color: "var(--
|
|
112
|
+
color: "var(--canvas-success-icon)"
|
|
113
113
|
});
|
|
114
114
|
if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(Spinner, {
|
|
115
115
|
size: "sm"
|
|
@@ -202,12 +202,12 @@ const CodedResourceNodeElement = /*#__PURE__*/ memo(({ data, selected, id, ...no
|
|
|
202
202
|
if (nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
|
|
203
203
|
icon: "circle-alert",
|
|
204
204
|
size: 16,
|
|
205
|
-
color: "var(--
|
|
205
|
+
color: "var(--canvas-error-icon)"
|
|
206
206
|
});
|
|
207
207
|
if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
|
|
208
208
|
icon: "circle-check",
|
|
209
209
|
size: 16,
|
|
210
|
-
color: "var(--
|
|
210
|
+
color: "var(--canvas-success-icon)"
|
|
211
211
|
});
|
|
212
212
|
if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(Spinner, {
|
|
213
213
|
size: "sm"
|
|
@@ -30,20 +30,20 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
31
|
const execution_cjs_namespaceObject = require("../../types/execution.cjs");
|
|
32
32
|
const edgeTargetStatusToEdgeColor = {
|
|
33
|
-
Cancelled: 'var(--
|
|
34
|
-
Completed: 'var(--
|
|
35
|
-
CRITICAL: 'var(--
|
|
36
|
-
ERROR: 'var(--
|
|
37
|
-
Failed: 'var(--
|
|
38
|
-
INFO: 'var(--
|
|
39
|
-
InProgress: 'var(--
|
|
40
|
-
NotExecuted: 'var(--
|
|
41
|
-
Paused: 'var(--
|
|
42
|
-
Terminated: 'var(--
|
|
43
|
-
Warning: 'var(--
|
|
44
|
-
UserCancelled: 'var(--
|
|
45
|
-
WARNING: 'var(--
|
|
46
|
-
None: 'var(--
|
|
33
|
+
Cancelled: 'var(--canvas-error-icon)',
|
|
34
|
+
Completed: 'var(--canvas-success-icon)',
|
|
35
|
+
CRITICAL: 'var(--canvas-error-icon)',
|
|
36
|
+
ERROR: 'var(--canvas-error-icon)',
|
|
37
|
+
Failed: 'var(--canvas-error-icon)',
|
|
38
|
+
INFO: 'var(--canvas-info-icon)',
|
|
39
|
+
InProgress: 'var(--canvas-info-icon)',
|
|
40
|
+
NotExecuted: 'var(--canvas-border)',
|
|
41
|
+
Paused: 'var(--canvas-warning-icon)',
|
|
42
|
+
Terminated: 'var(--canvas-error-icon)',
|
|
43
|
+
Warning: 'var(--canvas-warning-icon)',
|
|
44
|
+
UserCancelled: 'var(--canvas-info-icon)',
|
|
45
|
+
WARNING: 'var(--canvas-warning-icon)',
|
|
46
|
+
None: 'var(--canvas-border)'
|
|
47
47
|
};
|
|
48
48
|
const getStatusAnimation = (status, edgePath)=>{
|
|
49
49
|
const shouldAnimate = status === execution_cjs_namespaceObject.ElementStatusValues.InProgress;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ElementStatusValues } from "../../types/execution.js";
|
|
3
3
|
const edgeTargetStatusToEdgeColor = {
|
|
4
|
-
Cancelled: 'var(--
|
|
5
|
-
Completed: 'var(--
|
|
6
|
-
CRITICAL: 'var(--
|
|
7
|
-
ERROR: 'var(--
|
|
8
|
-
Failed: 'var(--
|
|
9
|
-
INFO: 'var(--
|
|
10
|
-
InProgress: 'var(--
|
|
11
|
-
NotExecuted: 'var(--
|
|
12
|
-
Paused: 'var(--
|
|
13
|
-
Terminated: 'var(--
|
|
14
|
-
Warning: 'var(--
|
|
15
|
-
UserCancelled: 'var(--
|
|
16
|
-
WARNING: 'var(--
|
|
17
|
-
None: 'var(--
|
|
4
|
+
Cancelled: 'var(--canvas-error-icon)',
|
|
5
|
+
Completed: 'var(--canvas-success-icon)',
|
|
6
|
+
CRITICAL: 'var(--canvas-error-icon)',
|
|
7
|
+
ERROR: 'var(--canvas-error-icon)',
|
|
8
|
+
Failed: 'var(--canvas-error-icon)',
|
|
9
|
+
INFO: 'var(--canvas-info-icon)',
|
|
10
|
+
InProgress: 'var(--canvas-info-icon)',
|
|
11
|
+
NotExecuted: 'var(--canvas-border)',
|
|
12
|
+
Paused: 'var(--canvas-warning-icon)',
|
|
13
|
+
Terminated: 'var(--canvas-error-icon)',
|
|
14
|
+
Warning: 'var(--canvas-warning-icon)',
|
|
15
|
+
UserCancelled: 'var(--canvas-info-icon)',
|
|
16
|
+
WARNING: 'var(--canvas-warning-icon)',
|
|
17
|
+
None: 'var(--canvas-border)'
|
|
18
18
|
};
|
|
19
19
|
const getStatusAnimation = (status, edgePath)=>{
|
|
20
20
|
const shouldAnimate = status === ElementStatusValues.InProgress;
|
|
@@ -114,13 +114,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
|
|
|
114
114
|
target
|
|
115
115
|
});
|
|
116
116
|
const getEdgeColor = ()=>{
|
|
117
|
-
if (isDiffAdded) return 'var(--
|
|
118
|
-
if (isDiffRemoved) return 'var(--
|
|
119
|
-
if (isPreviewEdge) return 'var(--
|
|
120
|
-
if (selected) return 'var(--
|
|
121
|
-
if (isHovered) return 'var(--
|
|
122
|
-
if (status) return external_EdgeUtils_cjs_namespaceObject.edgeTargetStatusToEdgeColor[status] ?? 'var(--
|
|
123
|
-
return 'var(--
|
|
117
|
+
if (isDiffAdded) return 'var(--canvas-success-icon)';
|
|
118
|
+
if (isDiffRemoved) return 'var(--canvas-error-icon)';
|
|
119
|
+
if (isPreviewEdge) return 'var(--canvas-primary)';
|
|
120
|
+
if (selected) return 'var(--canvas-primary)';
|
|
121
|
+
if (isHovered) return 'var(--canvas-primary-hover)';
|
|
122
|
+
if (status) return external_EdgeUtils_cjs_namespaceObject.edgeTargetStatusToEdgeColor[status] ?? 'var(--canvas-border)';
|
|
123
|
+
return 'var(--canvas-border)';
|
|
124
124
|
};
|
|
125
125
|
const edgeColor = getEdgeColor();
|
|
126
126
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
@@ -145,7 +145,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
|
|
|
145
145
|
className: "react-flow__edge-outline",
|
|
146
146
|
d: edgePath,
|
|
147
147
|
fill: "none",
|
|
148
|
-
stroke: "var(--
|
|
148
|
+
stroke: "var(--canvas-primary)",
|
|
149
149
|
strokeWidth: 10,
|
|
150
150
|
opacity: 0.3,
|
|
151
151
|
style: {
|
|
@@ -197,13 +197,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
|
|
|
197
197
|
transform: 'translate(-50%, -50%)',
|
|
198
198
|
whiteSpace: 'nowrap',
|
|
199
199
|
pointerEvents: 'none',
|
|
200
|
-
color: 'var(--
|
|
201
|
-
background: 'var(--
|
|
200
|
+
color: 'var(--canvas-foreground)',
|
|
201
|
+
background: 'var(--canvas-background)',
|
|
202
202
|
padding: '4px 8px',
|
|
203
203
|
borderRadius: '4px',
|
|
204
204
|
fontSize: '12px',
|
|
205
205
|
fontWeight: 500,
|
|
206
|
-
border: `1px solid ${selected ? 'var(--
|
|
206
|
+
border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
|
|
207
207
|
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
|
|
208
208
|
},
|
|
209
209
|
children: data.label
|
|
@@ -86,13 +86,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
|
|
|
86
86
|
target
|
|
87
87
|
});
|
|
88
88
|
const getEdgeColor = ()=>{
|
|
89
|
-
if (isDiffAdded) return 'var(--
|
|
90
|
-
if (isDiffRemoved) return 'var(--
|
|
91
|
-
if (isPreviewEdge) return 'var(--
|
|
92
|
-
if (selected) return 'var(--
|
|
93
|
-
if (isHovered) return 'var(--
|
|
94
|
-
if (status) return edgeTargetStatusToEdgeColor[status] ?? 'var(--
|
|
95
|
-
return 'var(--
|
|
89
|
+
if (isDiffAdded) return 'var(--canvas-success-icon)';
|
|
90
|
+
if (isDiffRemoved) return 'var(--canvas-error-icon)';
|
|
91
|
+
if (isPreviewEdge) return 'var(--canvas-primary)';
|
|
92
|
+
if (selected) return 'var(--canvas-primary)';
|
|
93
|
+
if (isHovered) return 'var(--canvas-primary-hover)';
|
|
94
|
+
if (status) return edgeTargetStatusToEdgeColor[status] ?? 'var(--canvas-border)';
|
|
95
|
+
return 'var(--canvas-border)';
|
|
96
96
|
};
|
|
97
97
|
const edgeColor = getEdgeColor();
|
|
98
98
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
@@ -117,7 +117,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
|
|
|
117
117
|
className: "react-flow__edge-outline",
|
|
118
118
|
d: edgePath,
|
|
119
119
|
fill: "none",
|
|
120
|
-
stroke: "var(--
|
|
120
|
+
stroke: "var(--canvas-primary)",
|
|
121
121
|
strokeWidth: 10,
|
|
122
122
|
opacity: 0.3,
|
|
123
123
|
style: {
|
|
@@ -169,13 +169,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
|
|
|
169
169
|
transform: 'translate(-50%, -50%)',
|
|
170
170
|
whiteSpace: 'nowrap',
|
|
171
171
|
pointerEvents: 'none',
|
|
172
|
-
color: 'var(--
|
|
173
|
-
background: 'var(--
|
|
172
|
+
color: 'var(--canvas-foreground)',
|
|
173
|
+
background: 'var(--canvas-background)',
|
|
174
174
|
padding: '4px 8px',
|
|
175
175
|
borderRadius: '4px',
|
|
176
176
|
fontSize: '12px',
|
|
177
177
|
fontWeight: 500,
|
|
178
|
-
border: `1px solid ${selected ? 'var(--
|
|
178
|
+
border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
|
|
179
179
|
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
|
|
180
180
|
},
|
|
181
181
|
children: data.label
|
|
@@ -44,9 +44,9 @@ const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
|
|
|
44
44
|
const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
|
|
45
45
|
const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
|
|
46
46
|
const PanelContainer = styled_default().div`
|
|
47
|
-
color: var(--
|
|
48
|
-
background-color: var(--
|
|
49
|
-
border: 1px solid var(--
|
|
47
|
+
color: var(--canvas-foreground);
|
|
48
|
+
background-color: var(--canvas-background);
|
|
49
|
+
border: 1px solid var(--canvas-border-de-emp);
|
|
50
50
|
border-radius: ${(props)=>props.isPinned ? '0' : '8px'};
|
|
51
51
|
box-shadow: ${(props)=>props.isPinned ? 'none' : '0 4px 16px rgba(0, 0, 0, 0.12)'};
|
|
52
52
|
font-size: 14px;
|
|
@@ -58,7 +58,7 @@ const PanelContainer = styled_default().div`
|
|
|
58
58
|
display: flex;
|
|
59
59
|
flex-direction: column;
|
|
60
60
|
transition: opacity 0.2s ease-in-out;
|
|
61
|
-
border-left: ${(props)=>props.isPinned ? '1px solid var(--
|
|
61
|
+
border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
|
|
62
62
|
`;
|
|
63
63
|
function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
|
|
64
64
|
const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA4I1B"}
|
|
@@ -6,9 +6,9 @@ import { CanvasPortal } from "./CanvasPortal.js";
|
|
|
6
6
|
import { PanelChrome } from "./PanelChrome.js";
|
|
7
7
|
import { useFloatingPosition } from "./useFloatingPosition.js";
|
|
8
8
|
const PanelContainer = styled.div`
|
|
9
|
-
color: var(--
|
|
10
|
-
background-color: var(--
|
|
11
|
-
border: 1px solid var(--
|
|
9
|
+
color: var(--canvas-foreground);
|
|
10
|
+
background-color: var(--canvas-background);
|
|
11
|
+
border: 1px solid var(--canvas-border-de-emp);
|
|
12
12
|
border-radius: ${(props)=>props.isPinned ? '0' : '8px'};
|
|
13
13
|
box-shadow: ${(props)=>props.isPinned ? 'none' : '0 4px 16px rgba(0, 0, 0, 0.12)'};
|
|
14
14
|
font-size: 14px;
|
|
@@ -20,7 +20,7 @@ const PanelContainer = styled.div`
|
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
transition: opacity 0.2s ease-in-out;
|
|
23
|
-
border-left: ${(props)=>props.isPinned ? '1px solid var(--
|
|
23
|
+
border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
|
|
24
24
|
`;
|
|
25
25
|
function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
|
|
26
26
|
const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = useFloatingPosition({
|
|
@@ -43,9 +43,9 @@ const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
|
43
43
|
const external_react_namespaceObject = require("react");
|
|
44
44
|
const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
|
|
45
45
|
const PanelHeader = styled_default().div`
|
|
46
|
-
border-bottom: 1px solid var(--
|
|
46
|
+
border-bottom: 1px solid var(--canvas-border-de-emp);
|
|
47
47
|
padding: 8px 16px;
|
|
48
|
-
background-color: var(--
|
|
48
|
+
background-color: var(--canvas-background);
|
|
49
49
|
border-radius: 8px 8px 0 0;
|
|
50
50
|
flex-shrink: 0;
|
|
51
51
|
`;
|
|
@@ -59,16 +59,16 @@ const PanelContent = styled_default().div`
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
&::-webkit-scrollbar-track {
|
|
62
|
-
background: var(--
|
|
62
|
+
background: var(--canvas-background-secondary);
|
|
63
63
|
border-radius: 3px;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
&::-webkit-scrollbar-thumb {
|
|
67
|
-
background: var(--
|
|
67
|
+
background: var(--canvas-border);
|
|
68
68
|
border-radius: 3px;
|
|
69
69
|
|
|
70
70
|
&:hover {
|
|
71
|
-
background: var(--
|
|
71
|
+
background: var(--canvas-border-de-emp);
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
`;
|
|
@@ -5,9 +5,9 @@ import { Button } from "@uipath/apollo-wind";
|
|
|
5
5
|
import { useEffect, useRef } from "react";
|
|
6
6
|
import { CanvasIcon } from "../../utils/icon-registry.js";
|
|
7
7
|
const PanelHeader = styled.div`
|
|
8
|
-
border-bottom: 1px solid var(--
|
|
8
|
+
border-bottom: 1px solid var(--canvas-border-de-emp);
|
|
9
9
|
padding: 8px 16px;
|
|
10
|
-
background-color: var(--
|
|
10
|
+
background-color: var(--canvas-background);
|
|
11
11
|
border-radius: 8px 8px 0 0;
|
|
12
12
|
flex-shrink: 0;
|
|
13
13
|
`;
|
|
@@ -21,16 +21,16 @@ const PanelContent = styled.div`
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&::-webkit-scrollbar-track {
|
|
24
|
-
background: var(--
|
|
24
|
+
background: var(--canvas-background-secondary);
|
|
25
25
|
border-radius: 3px;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
&::-webkit-scrollbar-thumb {
|
|
29
|
-
background: var(--
|
|
29
|
+
background: var(--canvas-border);
|
|
30
30
|
border-radius: 3px;
|
|
31
31
|
|
|
32
32
|
&:hover {
|
|
33
|
-
background: var(--
|
|
33
|
+
background: var(--canvas-border-de-emp);
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
`;
|
|
@@ -52,19 +52,19 @@ const GroupContainer = styled_default().div`
|
|
|
52
52
|
position: relative;
|
|
53
53
|
width: 100%;
|
|
54
54
|
height: 100%;
|
|
55
|
-
background-color: ${({ backgroundColor })=>backgroundColor || 'var(--
|
|
55
|
+
background-color: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-raised)'} !important;
|
|
56
56
|
border: 2px solid
|
|
57
|
-
${({ borderColor, selected })=>selected ? 'var(--
|
|
57
|
+
${({ borderColor, selected })=>selected ? 'var(--canvas-primary)' : borderColor || 'var(--canvas-border)'};
|
|
58
58
|
border-radius: 16px !important;
|
|
59
59
|
transition: border-color 0.2s ease;
|
|
60
60
|
overflow: visible;
|
|
61
|
-
box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--
|
|
61
|
+
box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--canvas-primary)' : 'none'};
|
|
62
62
|
padding: 0 !important;
|
|
63
63
|
|
|
64
64
|
${({ executionStatus })=>(0, execution_status_cjs_namespaceObject.getExecutionStatusBorder)(executionStatus)}
|
|
65
65
|
|
|
66
66
|
&:hover {
|
|
67
|
-
${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--
|
|
67
|
+
${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border-hover)'};`}
|
|
68
68
|
}
|
|
69
69
|
`;
|
|
70
70
|
const GroupHeader = styled_default().div`
|
|
@@ -75,8 +75,8 @@ const GroupHeader = styled_default().div`
|
|
|
75
75
|
align-items: center;
|
|
76
76
|
gap: 4px;
|
|
77
77
|
padding: 2px;
|
|
78
|
-
background: var(--
|
|
79
|
-
border: 1px solid var(--
|
|
78
|
+
background: var(--canvas-background);
|
|
79
|
+
border: 1px solid var(--canvas-border-grid);
|
|
80
80
|
border-radius: 8px;
|
|
81
81
|
box-shadow:
|
|
82
82
|
0 2px 8px rgba(0, 0, 0, 0.08),
|
|
@@ -97,13 +97,13 @@ const GroupIconWrapper = styled_default().div`
|
|
|
97
97
|
cursor: default;
|
|
98
98
|
|
|
99
99
|
svg {
|
|
100
|
-
color: var(--
|
|
100
|
+
color: var(--canvas-foreground);
|
|
101
101
|
}
|
|
102
102
|
`;
|
|
103
103
|
const GroupTitle = styled_default().div`
|
|
104
104
|
font-size: 14px;
|
|
105
105
|
font-weight: 500;
|
|
106
|
-
color: var(--
|
|
106
|
+
color: var(--canvas-foreground);
|
|
107
107
|
white-space: nowrap;
|
|
108
108
|
overflow: hidden;
|
|
109
109
|
text-overflow: ellipsis;
|
|
@@ -132,7 +132,7 @@ const GroupHeaderButton = styled_default().button`
|
|
|
132
132
|
pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
|
|
133
133
|
|
|
134
134
|
&:hover:not(:disabled) {
|
|
135
|
-
background: var(--
|
|
135
|
+
background: var(--canvas-background-secondary);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
&:active:not(:disabled) {
|
|
@@ -140,14 +140,14 @@ const GroupHeaderButton = styled_default().button`
|
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
svg {
|
|
143
|
-
color: var(--
|
|
143
|
+
color: var(--canvas-foreground);
|
|
144
144
|
}
|
|
145
145
|
`;
|
|
146
146
|
const GroupHeaderSeparator = styled_default().div`
|
|
147
147
|
width: 1px;
|
|
148
148
|
height: 20px;
|
|
149
149
|
margin: 0 4px;
|
|
150
|
-
background: var(--
|
|
150
|
+
background: var(--canvas-border-grid);
|
|
151
151
|
align-self: center;
|
|
152
152
|
`;
|
|
153
153
|
const GroupContent = styled_default().div`
|
|
@@ -183,8 +183,8 @@ const TopCornerIndicators = styled_default().div`
|
|
|
183
183
|
left: -5px;
|
|
184
184
|
width: 6px;
|
|
185
185
|
height: 6px;
|
|
186
|
-
background: var(--
|
|
187
|
-
border: 1px solid var(--
|
|
186
|
+
background: var(--canvas-background);
|
|
187
|
+
border: 1px solid var(--canvas-primary);
|
|
188
188
|
border-radius: 1px;
|
|
189
189
|
}
|
|
190
190
|
|
|
@@ -196,8 +196,8 @@ const TopCornerIndicators = styled_default().div`
|
|
|
196
196
|
right: -5px;
|
|
197
197
|
width: 6px;
|
|
198
198
|
height: 6px;
|
|
199
|
-
background: var(--
|
|
200
|
-
border: 1px solid var(--
|
|
199
|
+
background: var(--canvas-background);
|
|
200
|
+
border: 1px solid var(--canvas-primary);
|
|
201
201
|
border-radius: 1px;
|
|
202
202
|
}
|
|
203
203
|
`;
|
|
@@ -216,8 +216,8 @@ const BottomCornerIndicators = styled_default().div`
|
|
|
216
216
|
left: -5px;
|
|
217
217
|
width: 6px;
|
|
218
218
|
height: 6px;
|
|
219
|
-
background: var(--
|
|
220
|
-
border: 1px solid var(--
|
|
219
|
+
background: var(--canvas-background);
|
|
220
|
+
border: 1px solid var(--canvas-primary);
|
|
221
221
|
border-radius: 1px;
|
|
222
222
|
}
|
|
223
223
|
|
|
@@ -229,8 +229,8 @@ const BottomCornerIndicators = styled_default().div`
|
|
|
229
229
|
right: -5px;
|
|
230
230
|
width: 6px;
|
|
231
231
|
height: 6px;
|
|
232
|
-
background: var(--
|
|
233
|
-
border: 1px solid var(--
|
|
232
|
+
background: var(--canvas-background);
|
|
233
|
+
border: 1px solid var(--canvas-primary);
|
|
234
234
|
border-radius: 1px;
|
|
235
235
|
}
|
|
236
236
|
`;
|
|
@@ -4,19 +4,19 @@ const GroupContainer = styled.div`
|
|
|
4
4
|
position: relative;
|
|
5
5
|
width: 100%;
|
|
6
6
|
height: 100%;
|
|
7
|
-
background-color: ${({ backgroundColor })=>backgroundColor || 'var(--
|
|
7
|
+
background-color: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-raised)'} !important;
|
|
8
8
|
border: 2px solid
|
|
9
|
-
${({ borderColor, selected })=>selected ? 'var(--
|
|
9
|
+
${({ borderColor, selected })=>selected ? 'var(--canvas-primary)' : borderColor || 'var(--canvas-border)'};
|
|
10
10
|
border-radius: 16px !important;
|
|
11
11
|
transition: border-color 0.2s ease;
|
|
12
12
|
overflow: visible;
|
|
13
|
-
box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--
|
|
13
|
+
box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--canvas-primary)' : 'none'};
|
|
14
14
|
padding: 0 !important;
|
|
15
15
|
|
|
16
16
|
${({ executionStatus })=>getExecutionStatusBorder(executionStatus)}
|
|
17
17
|
|
|
18
18
|
&:hover {
|
|
19
|
-
${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--
|
|
19
|
+
${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border-hover)'};`}
|
|
20
20
|
}
|
|
21
21
|
`;
|
|
22
22
|
const GroupHeader = styled.div`
|
|
@@ -27,8 +27,8 @@ const GroupHeader = styled.div`
|
|
|
27
27
|
align-items: center;
|
|
28
28
|
gap: 4px;
|
|
29
29
|
padding: 2px;
|
|
30
|
-
background: var(--
|
|
31
|
-
border: 1px solid var(--
|
|
30
|
+
background: var(--canvas-background);
|
|
31
|
+
border: 1px solid var(--canvas-border-grid);
|
|
32
32
|
border-radius: 8px;
|
|
33
33
|
box-shadow:
|
|
34
34
|
0 2px 8px rgba(0, 0, 0, 0.08),
|
|
@@ -49,13 +49,13 @@ const GroupIconWrapper = styled.div`
|
|
|
49
49
|
cursor: default;
|
|
50
50
|
|
|
51
51
|
svg {
|
|
52
|
-
color: var(--
|
|
52
|
+
color: var(--canvas-foreground);
|
|
53
53
|
}
|
|
54
54
|
`;
|
|
55
55
|
const GroupTitle = styled.div`
|
|
56
56
|
font-size: 14px;
|
|
57
57
|
font-weight: 500;
|
|
58
|
-
color: var(--
|
|
58
|
+
color: var(--canvas-foreground);
|
|
59
59
|
white-space: nowrap;
|
|
60
60
|
overflow: hidden;
|
|
61
61
|
text-overflow: ellipsis;
|
|
@@ -84,7 +84,7 @@ const GroupHeaderButton = styled.button`
|
|
|
84
84
|
pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
|
|
85
85
|
|
|
86
86
|
&:hover:not(:disabled) {
|
|
87
|
-
background: var(--
|
|
87
|
+
background: var(--canvas-background-secondary);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
&:active:not(:disabled) {
|
|
@@ -92,14 +92,14 @@ const GroupHeaderButton = styled.button`
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
svg {
|
|
95
|
-
color: var(--
|
|
95
|
+
color: var(--canvas-foreground);
|
|
96
96
|
}
|
|
97
97
|
`;
|
|
98
98
|
const GroupHeaderSeparator = styled.div`
|
|
99
99
|
width: 1px;
|
|
100
100
|
height: 20px;
|
|
101
101
|
margin: 0 4px;
|
|
102
|
-
background: var(--
|
|
102
|
+
background: var(--canvas-border-grid);
|
|
103
103
|
align-self: center;
|
|
104
104
|
`;
|
|
105
105
|
const GroupContent = styled.div`
|
|
@@ -135,8 +135,8 @@ const TopCornerIndicators = styled.div`
|
|
|
135
135
|
left: -5px;
|
|
136
136
|
width: 6px;
|
|
137
137
|
height: 6px;
|
|
138
|
-
background: var(--
|
|
139
|
-
border: 1px solid var(--
|
|
138
|
+
background: var(--canvas-background);
|
|
139
|
+
border: 1px solid var(--canvas-primary);
|
|
140
140
|
border-radius: 1px;
|
|
141
141
|
}
|
|
142
142
|
|
|
@@ -148,8 +148,8 @@ const TopCornerIndicators = styled.div`
|
|
|
148
148
|
right: -5px;
|
|
149
149
|
width: 6px;
|
|
150
150
|
height: 6px;
|
|
151
|
-
background: var(--
|
|
152
|
-
border: 1px solid var(--
|
|
151
|
+
background: var(--canvas-background);
|
|
152
|
+
border: 1px solid var(--canvas-primary);
|
|
153
153
|
border-radius: 1px;
|
|
154
154
|
}
|
|
155
155
|
`;
|
|
@@ -168,8 +168,8 @@ const BottomCornerIndicators = styled.div`
|
|
|
168
168
|
left: -5px;
|
|
169
169
|
width: 6px;
|
|
170
170
|
height: 6px;
|
|
171
|
-
background: var(--
|
|
172
|
-
border: 1px solid var(--
|
|
171
|
+
background: var(--canvas-background);
|
|
172
|
+
border: 1px solid var(--canvas-primary);
|
|
173
173
|
border-radius: 1px;
|
|
174
174
|
}
|
|
175
175
|
|
|
@@ -181,8 +181,8 @@ const BottomCornerIndicators = styled.div`
|
|
|
181
181
|
right: -5px;
|
|
182
182
|
width: 6px;
|
|
183
183
|
height: 6px;
|
|
184
|
-
background: var(--
|
|
185
|
-
border: 1px solid var(--
|
|
184
|
+
background: var(--canvas-background);
|
|
185
|
+
border: 1px solid var(--canvas-primary);
|
|
186
186
|
border-radius: 1px;
|
|
187
187
|
}
|
|
188
188
|
`;
|