@tumaet/apollon 4.2.12 → 4.2.13

package/dist/assets/style.css

@@ -1 +1 @@
-.alignment-guides-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}.alignment-guide-line{stroke-width:1;stroke-dasharray:5,5;pointer-events:none;opacity:.8;animation:alignmentPulse .8s ease-in-out infinite}.alignment-guide-vertical{stroke:var(--apollon-guide-vertical, #d63031)}.alignment-guide-horizontal{stroke:var(--apollon-guide-horizontal, #0984e3)}@keyframes alignmentPulse{0%,to{opacity:.8}50%{opacity:.5}}.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgb(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgb(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--apollon-primary: #3e8acc;--apollon-primary-contrast: #000000;--apollon-secondary: #6c757d;--apollon-alert-warning-yellow: #ffc107;--apollon-alert-warning-background: #fff3cd;--apollon-alert-warning-border: #ffeeba;--apollon-background: white;--apollon-background-inverse: #000000;--apollon-background-variant: #f8f9fa;--apollon-gray: #e9ecef;--apollon-grid: rgba(36, 39, 36, .1);--apollon-gray-variant: #495057;--apollon-alert-danger-color: #721c24;--apollon-alert-danger-background: #f8d7da;--apollon-alert-danger-border: #f5c6cb;--apollon-switch-box-border-color: #dee2e6;--apollon-list-group-color: #ffffff;--apollon-btn-outline-secondary-color: #6c757d;--apollon-modal-bottom-border: #e9ecef;--xy-controls-button-background-color: var(--apollon-background)}.react-flow{--panel-background: var(--apollon-background);--panel-shadow: 0 0 4px 0 var(--apollon-background-variant);--text: var(--apollon-primary-contrast);--xy-edge-stroke: var(--apollon-primary-contrast);--xy-edge-stroke-width: 2px;--xy-minimap-mask-background-color-props: #00000020}.react-flow__controls-button{background:none;border-bottom:none}.react-flow__panel,.react-flow__node-toolbar{background-color:var(--panel-background);box-shadow:var(--panel-shadow);border-radius:8px;padding:8px}.react-flow svg{display:block}.react-flow__node-toolbar{display:flex;gap:8px}.react-flow__controls-button,.react-flow__controls-button:hover{background:var(--panel-background);border-bottom:none}.react-flow__controls-button>svg{fill:var(--text)}.react-flow__handle{opacity:0;background-color:#639af2}.react-flow__resize-control line{z-index:9}.react-flow__resize-control.handle{z-index:20}.react-flow__node:hover .react-flow__handle,.react-flow__node.selected .react-flow__handle{opacity:.6;background-color:#639af2}.edge-circle{opacity:0;background-color:#639af2}.react-flow__edge:hover .edge-circle,.react-flow__edge.selected .edge-circle{opacity:.4;padding:4px;fill:#007bff}.react-flow__edge:hover .edge-overlay,.react-flow__edge:hover .edge-marker-highlight,.react-flow__edge.selected .edge-overlay,.react-flow__edge.selected .edge-marker-highlight{opacity:.4;padding:4px;stroke:#007bff;stroke-width:15px}.react-flow__node:hover,.react-flow__node.selected{opacity:.9}.react-flow__edges{z-index:9999}.react-flow__node{z-index:9998}svg.react-flow__connectionline{z-index:10000}.react-flow__connection-path{stroke:var(--xy-edge-stroke);stroke-width:var(--xy-edge-stroke-width);opacity:.5}.react-flow__minimap-mask{fill:"#f2f2f2";opacity:.6}.prevent-select{-webkit-user-select:none;-ms-user-select:none;user-select:none}.control-button{background-color:var(--apollon-background);border:1px solid var(--apollon-gray-variant);border-radius:8px;padding:6px 8px;cursor:pointer;opacity:1;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;font-size:14px;font-weight:700;transition:background-color .2s ease}.control-button:hover:not(.disabled){background-color:var(--apollon-background-variant)}.control-button.disabled{cursor:not-allowed;opacity:.5}.control-button.disabled:hover{background-color:var( --apollon-background )}.horizontally-not-resizable .react-flow__resize-control.top.line:hover,.horizontally-not-resizable .react-flow__resize-control.bottom.line:hover,.vertically-not-resizable .react-flow__resize-control.right.line:hover,.vertically-not-resizable .react-flow__resize-control.left.line:hover{cursor:grab}.MuiSelect-select,.MuiFormLabel-root{color:var(--apollon-primary-contrast)!important}.MuiOutlinedInput-notchedOutline{border-color:var(--apollon-primary-contrast)!important}.MuiSvgIcon-root{color:var(--apollon-primary-contrast)!important}.scroll-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#00000026;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);z-index:10;cursor:not-allowed;animation:fadeIn .2s ease-in-out;display:flex;align-items:center;justify-content:center;pointer-events:auto}.scroll-overlay-hint{position:absolute;bottom:40px;left:50%;transform:translate(-50%);z-index:11}.scroll-overlay-hint-content{background-color:var(--apollon-background);border:2px solid var(--apollon-primary);border-radius:8px;padding:16px 24px;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;justify-content:center}.scroll-overlay-hint-text{margin:0;color:var(--apollon-primary);font-weight:600;font-size:14px;text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
+.alignment-guides-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}.alignment-guide-line{stroke-width:1;stroke-dasharray:5,5;pointer-events:none;opacity:.8;animation:alignmentPulse .8s ease-in-out infinite}.alignment-guide-vertical{stroke:var(--apollon-guide-vertical, #d63031)}.alignment-guide-horizontal{stroke:var(--apollon-guide-horizontal, #0984e3)}@keyframes alignmentPulse{0%,to{opacity:.8}50%{opacity:.5}}.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgb(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgb(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}.react-flow{--panel-background: var(--apollon-background, white);--panel-shadow: 0 0 4px 0 var(--apollon-background-variant, #f8f9fa);--text: var(--apollon-primary-contrast, #000000);--xy-edge-stroke: var(--apollon-primary-contrast, #000000);--xy-edge-stroke-width: 2px;--xy-minimap-mask-background-color-props: #00000020;--xy-controls-button-background-color: var(--apollon-background, white)}.react-flow__controls-button{background:none;border-bottom:none}.react-flow__panel,.react-flow__node-toolbar{background-color:var(--panel-background);box-shadow:var(--panel-shadow);border-radius:8px;padding:8px}.react-flow svg{display:block}.react-flow__node-toolbar{display:flex;gap:8px}.react-flow__controls-button,.react-flow__controls-button:hover{background:var(--panel-background);border-bottom:none}.react-flow__controls-button>svg{fill:var(--text)}.react-flow__handle{opacity:0;background-color:#639af2}.react-flow__resize-control line{z-index:9}.react-flow__resize-control.handle{z-index:20}.react-flow__node:hover .react-flow__handle,.react-flow__node.selected .react-flow__handle{opacity:.6;background-color:#639af2}.edge-circle{opacity:0;background-color:#639af2}.react-flow__edge:hover .edge-circle,.react-flow__edge.selected .edge-circle{opacity:.4;padding:4px;fill:#007bff}.react-flow__edge:hover .edge-overlay,.react-flow__edge:hover .edge-marker-highlight,.react-flow__edge.selected .edge-overlay,.react-flow__edge.selected .edge-marker-highlight{opacity:.4;padding:4px;stroke:#007bff;stroke-width:15px}.react-flow__node:hover,.react-flow__node.selected{opacity:.9}.react-flow__edges{z-index:9999}.react-flow__node{z-index:9998}svg.react-flow__connectionline{z-index:10000}.react-flow__connection-path{stroke:var(--xy-edge-stroke);stroke-width:var(--xy-edge-stroke-width);opacity:.5}.react-flow__minimap-mask{fill:"#f2f2f2";opacity:.6}.prevent-select{-webkit-user-select:none;-ms-user-select:none;user-select:none}.control-button{background-color:var(--apollon-background, white);border:1px solid var(--apollon-gray-variant, #495057);border-radius:8px;padding:6px 8px;cursor:pointer;opacity:1;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;font-size:14px;font-weight:700;transition:background-color .2s ease}.control-button:hover:not(.disabled){background-color:var(--apollon-background-variant, #f8f9fa)}.control-button.disabled{cursor:not-allowed;opacity:.5}.control-button.disabled:hover{background-color:var(--apollon-background, white)}.horizontally-not-resizable .react-flow__resize-control.top.line:hover,.horizontally-not-resizable .react-flow__resize-control.bottom.line:hover,.vertically-not-resizable .react-flow__resize-control.right.line:hover,.vertically-not-resizable .react-flow__resize-control.left.line:hover{cursor:grab}.apollon-editor .MuiSelect-select,.apollon-editor .MuiFormLabel-root{color:var(--apollon-primary-contrast, #000000)!important}.apollon-editor .MuiOutlinedInput-notchedOutline{border-color:var(--apollon-primary-contrast, #000000)!important}.apollon-editor .MuiSvgIcon-root{color:var(--apollon-primary-contrast, #000000)!important}.scroll-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#00000026;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);z-index:10;cursor:not-allowed;animation:fadeIn .2s ease-in-out;display:flex;align-items:center;justify-content:center;pointer-events:auto}.scroll-overlay-hint{position:absolute;bottom:40px;left:50%;transform:translate(-50%);z-index:11}.scroll-overlay-hint-content{background-color:var(--apollon-background, white);border:2px solid var(--apollon-primary, #3e8acc);border-radius:8px;padding:16px 24px;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;justify-content:center}.scroll-overlay-hint-text{margin:0;color:var(--apollon-primary, #3e8acc);font-weight:600;font-size:14px;text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}

package/dist/index.js

@@ -27512,7 +27512,7 @@ function iQ({ nodeId: e, children: t, className: n, style: o, isVisible: i, posi
 }
 const dn = ({
   children: e,
-  fill: t = "var(--apollon-primary-contrast)",
+  fill: t = "var(--apollon-primary-contrast, #000000)",
   x: n = "50%",
   y: o = "50%",
   dominantBaseline: i = "central",
@@ -52740,9 +52740,9 @@ const kle = {
   padding: "4px 8px",
   fontWeight: 500,
   fontSize: "0.875rem",
-  border: "1px solid var(--apollon-primary)",
-  backgroundColor: "var(--apollon-background)",
-  color: "var(--apollon-primary)",
+  border: "1px solid var(--apollon-primary, #3e8acc)",
+  backgroundColor: "var(--apollon-background, white)",
+  color: "var(--apollon-primary, #3e8acc)",
   cursor: "pointer"
 }, Rle = ({
   children: e,
@@ -52752,8 +52752,8 @@ const kle = {
 }) => {
   const i = {
     ...kle,
-    backgroundColor: t ? "var(--apollon-primary)" : "var(--apollon-background)",
-    color: t ? "var(--apollon-background)" : "var(--apollon-primary)",
+    backgroundColor: t ? "var(--apollon-primary, #3e8acc)" : "var(--apollon-background, white)",
+    color: t ? "var(--apollon-background, white)" : "var(--apollon-primary, #3e8acc)",
     ...o
   };
   return /* @__PURE__ */ h.jsx("button", { style: i, onClick: n, children: e });
@@ -52789,7 +52789,7 @@ const kle = {
   return /* @__PURE__ */ h.jsx("div", { style: _le, children: Dle.map((i, a) => /* @__PURE__ */ h.jsx(
     Rle,
     {
-      style: a === 0 ? { borderLeft: "1px solid var(--apollon-primary)" } : {},
+      style: a === 0 ? { borderLeft: "1px solid var(--apollon-primary, #3e8acc)" } : {},
       isSelected: t === i,
       onClick: () => o(i),
       children: i
@@ -52801,9 +52801,9 @@ const kle = {
   {
     sx: {
       ...e,
-      bgcolor: "var(--apollon-background)",
+      bgcolor: "var(--apollon-background, white)",
       input: {
-        color: "var(--apollon-primary-contrast)",
+        color: "var(--apollon-primary-contrast, #000000)",
         border: "none"
       }
     },
@@ -52813,7 +52813,7 @@ const kle = {
   width: e = "100%",
   height: t = "1px",
   style: n,
-  backgroundColor: o = "var(--apollon-primary-contrast)"
+  backgroundColor: o = "var(--apollon-primary-contrast, #000000)"
 }) => /* @__PURE__ */ h.jsx(
   "div",
   {
@@ -52828,7 +52828,7 @@ const kle = {
 ), to = ({ sx: e, ...t }) => /* @__PURE__ */ h.jsx(
   iC,
   {
-    sx: { ...e, color: "var(--apollon-primary-contrast)" },
+    sx: { ...e, color: "var(--apollon-primary-contrast, #000000)" },
     ...t
   }
 ), ST = ({
@@ -52844,9 +52844,9 @@ const kle = {
       alignItems: "center",
       justifyContent: "center",
       zIndex: Lh.HEADER_SWITCH,
-      color: "var(--apollon-primary-contrast)",
+      color: "var(--apollon-primary-contrast, #000000)",
       ...t && {
-        background: "linear-gradient(to top right, transparent calc(50% - 1px), var(--apollon-primary-contrast) 50%, transparent calc(50% + 1px))"
+        background: "linear-gradient(to top right, transparent calc(50% - 1px), var(--apollon-primary-contrast, #000000) 50%, transparent calc(50% + 1px))"
       }
     },
     children: "«»"
@@ -53100,8 +53100,8 @@ const kle = {
     flexDirection: "column",
     marginTop: 10,
     marginBottom: 10,
-    backgroundColor: "var(--apollon-background)",
-    border: "1px solid var(--apollon-gray)",
+    backgroundColor: "var(--apollon-background, white)",
+    border: "1px solid var(--apollon-gray, #e9ecef)",
     paddingBottom: 10
   },
   colorOption: {
@@ -53120,9 +53120,9 @@ const kle = {
   resetButton: {
     marginTop: 12,
     padding: "6px 12px",
-    backgroundColor: "var(--apollon-background)",
-    color: "var(--apollon-primary-contrast)",
-    border: "1px solid var(--apollon-gray)",
+    backgroundColor: "var(--apollon-background, white)",
+    color: "var(--apollon-primary-contrast, #000000)",
+    border: "1px solid var(--apollon-gray, #e9ecef)",
     cursor: "pointer",
     borderRadius: 4,
     width: "fit-content"
@@ -53190,7 +53190,7 @@ const kle = {
             /* @__PURE__ */ h.jsx(
               aO,
               {
-                fill: "var(--apollon-primary-contrast)",
+                fill: "var(--apollon-primary-contrast, #000000)",
                 onClick: () => b(null)
               }
             )
@@ -53221,7 +53221,7 @@ const kle = {
         },
         `${e.name}-${T}-option`
       ),
-      T !== p[p.length - 1].key && /* @__PURE__ */ h.jsx(nc, { backgroundColor: "var(--apollon-gray)" })
+      T !== p[p.length - 1].key && /* @__PURE__ */ h.jsx(nc, { backgroundColor: "var(--apollon-gray, #e9ecef)" })
     ] }, `${e.name}-${T}-option`)) })
   ] });
 }, lx = {
@@ -53238,8 +53238,8 @@ const kle = {
     flexDirection: "column",
     marginTop: 10,
     marginBottom: 10,
-    backgroundColor: "var(--apollon-background)",
-    border: "1px solid var(--apollon-gray)",
+    backgroundColor: "var(--apollon-background, white)",
+    border: "1px solid var(--apollon-gray, #e9ecef)",
     paddingBottom: 10
   },
   colorOption: {
@@ -53258,9 +53258,9 @@ const kle = {
   resetButton: {
     marginTop: 12,
     padding: "6px 12px",
-    backgroundColor: "var(--apollon-background)",
-    color: "var(--apollon-primary-contrast)",
-    border: "1px solid var(--apollon-gray)",
+    backgroundColor: "var(--apollon-background, white)",
+    color: "var(--apollon-primary-contrast, #000000)",
+    border: "1px solid var(--apollon-gray, #e9ecef)",
     cursor: "pointer",
     borderRadius: 4,
     width: "fit-content"
@@ -53319,7 +53319,7 @@ const kle = {
                 /* @__PURE__ */ h.jsx(
                   aO,
                   {
-                    fill: "var(--apollon-primary-contrast)",
+                    fill: "var(--apollon-primary-contrast, #000000)",
                     onClick: () => u(null)
                   }
                 )
@@ -53350,7 +53350,7 @@ const kle = {
             },
             `${e == null ? void 0 : e.label}-${y}-option`
           ),
-          y !== Xw[Xw.length - 1].key && /* @__PURE__ */ h.jsx(nc, { backgroundColor: "var(--apollon-gray)" })
+          y !== Xw[Xw.length - 1].key && /* @__PURE__ */ h.jsx(nc, { backgroundColor: "var(--apollon-gray, #e9ecef)" })
         ] })) })
       ]
     }
@@ -53652,8 +53652,8 @@ const kle = {
                       borderRadius: "4px",
                       padding: "4px",
                       flex: 1,
-                      backgroundColor: "var(--apollon-background)",
-                      color: "var(--apollon-primary-contrast)"
+                      backgroundColor: "var(--apollon-background, white)",
+                      color: "var(--apollon-primary-contrast, #000000)"
                     },
                     maxLength: 20,
                     type: "number",
@@ -53682,8 +53682,8 @@ const kle = {
             padding: "4px",
             flex: 1,
             resize: "vertical",
-            backgroundColor: "var(--apollon-background)",
-            color: "var(--apollon-primary-contrast)"
+            backgroundColor: "var(--apollon-background, white)",
+            color: "var(--apollon-primary-contrast, #000000)"
           },
           placeholder: "You can enter feedback here...",
           maxLength: 500,
@@ -56303,39 +56303,46 @@ const pn = ({ score: e, x: t, y: n }) => {
   maxWidth: p = 278,
   minWidth: m = 200,
   style: y
-}) => /* @__PURE__ */ h.jsx(
-  oO,
-  {
-    id: n ? e : void 0,
-    open: n,
-    anchorEl: t,
-    onClose: o,
-    anchorOrigin: a,
-    transformOrigin: l,
-    style: { maxHeight: u, width: "100%", ...y },
-    onClick: (v) => {
-      v.stopPropagation();
-    },
-    children: /* @__PURE__ */ h.jsx(
-      qM,
-      {
-        elevation: 2,
-        sx: {
-          width: "100%",
-          maxWidth: p,
-          minWidth: m,
-          px: 1,
-          py: 1.25,
-          display: "flex",
-          flex: 1,
-          flexDirection: "column",
-          backgroundColor: "var(--apollon-background-variant)"
-        },
-        children: i
-      }
-    )
-  }
-), uh = ({ elementId: e }) => {
+}) => {
+  const v = $.useMemo(() => {
+    var S;
+    return t ? (t instanceof SVGElement ? t.closest(".apollon-editor") ?? ((S = t.ownerSVGElement) == null ? void 0 : S.closest(".apollon-editor")) : t.closest(".apollon-editor")) ?? void 0 : void 0;
+  }, [t]);
+  return /* @__PURE__ */ h.jsx(
+    oO,
+    {
+      id: n ? e : void 0,
+      open: n,
+      anchorEl: t,
+      onClose: o,
+      anchorOrigin: a,
+      transformOrigin: l,
+      container: v,
+      style: { maxHeight: u, width: "100%", ...y },
+      onClick: (b) => {
+        b.stopPropagation();
+      },
+      children: /* @__PURE__ */ h.jsx(
+        qM,
+        {
+          elevation: 2,
+          sx: {
+            width: "100%",
+            maxWidth: p,
+            minWidth: m,
+            px: 1,
+            py: 1.25,
+            display: "flex",
+            flex: 1,
+            flexDirection: "column",
+            backgroundColor: "var(--apollon-background-variant, #f8f9fa)"
+          },
+          children: i
+        }
+      )
+    }
+  );
+}, uh = ({ elementId: e }) => {
   var j, M;
   const { getEdge: t, getNode: n, updateEdgeData: o } = Pn(), i = t(e), {
     handleSourceRoleChange: a,
@@ -56671,13 +56678,13 @@ const pn = ({ score: e, x: t, y: n }) => {
                   $le,
                   {
                     fontSize: "small",
-                    fill: "var(--apollon-primary-contrast)"
+                    fill: "var(--apollon-primary-contrast, #000000)"
                   }
                 ) : /* @__PURE__ */ h.jsx(
                   Lle,
                   {
                     fontSize: "small",
-                    fill: "var(--apollon-primary-contrast)"
+                    fill: "var(--apollon-primary-contrast, #000000)"
                   }
                 )
               }
@@ -58823,7 +58830,7 @@ function Jce({
 const Ey = ({
   y: e,
   width: t,
-  strokeColor: n = "var(--apollon-primary-contrast)"
+  strokeColor: n = "var(--apollon-primary-contrast, #000000)"
 }) => /* @__PURE__ */ h.jsx(
   "line",
   {
@@ -58842,7 +58849,7 @@ const Ey = ({
   headerHeight: i,
   isUnderlined: a = !1,
   textColor: l,
-  fill: u = "var(--apollon-background)"
+  fill: u = "var(--apollon-background, white)"
 }) => /* @__PURE__ */ h.jsxs(h.Fragment, { children: [
   /* @__PURE__ */ h.jsx(
     "rect",
@@ -58967,8 +58974,8 @@ const Ey = ({
     u.id
   );
 }) }), Ar = ({
-  stroke: e = "var(--apollon-primary-contrast)",
-  fill: t = "var(--apollon-background)",
+  stroke: e = "var(--apollon-primary-contrast, #000000)",
+  fill: t = "var(--apollon-background, white)",
   ...n
 }) => /* @__PURE__ */ h.jsx(
   "rect",
@@ -59145,7 +59152,7 @@ const Jw = 10, eue = 5, hO = ({
   showAssessmentResults: l = !1
 }) => {
   var T;
-  const { name: u } = o, m = (T = Ve(je((k) => k.assessments))[e]) == null ? void 0 : T.score, y = t * (a ?? 1), v = n * (a ?? 1), b = o.strokeColor || "var(--apollon-primary-contrast)", S = o.fillColor || "var(--apollon-background)", C = o.textColor || "var(--apollon-primary-contrast)";
+  const { name: u } = o, m = (T = Ve(je((k) => k.assessments))[e]) == null ? void 0 : T.score, y = t * (a ?? 1), v = n * (a ?? 1), b = o.strokeColor || "var(--apollon-primary-contrast, #000000)", S = o.fillColor || "var(--apollon-background, white)", C = o.textColor || "var(--apollon-primary-contrast, #000000)";
   return /* @__PURE__ */ h.jsxs(
     "svg",
     {
@@ -59236,9 +59243,9 @@ const Jw = 10, eue = 5, hO = ({
             y: 10 / 2,
             width: e - 10,
             height: t - 10,
-            stroke: "var(--apollon-primary-contrast)",
+            stroke: "var(--apollon-primary-contrast, #000000)",
             strokeWidth: me.LINE_WIDTH,
-            fill: "var(--apollon-background)"
+            fill: "var(--apollon-background, white)"
           }
         ),
         /* @__PURE__ */ h.jsx(
@@ -59248,7 +59255,7 @@ const Jw = 10, eue = 5, hO = ({
             y: 10 + 30 / 2,
             fontSize: "16",
             fontWeight: "bold",
-            fill: "var(--apollon-primary-contrast)",
+            fill: "var(--apollon-primary-contrast, #000000)",
             textAnchor: "middle",
             alignmentBaseline: "middle",
             children: n
@@ -59261,7 +59268,7 @@ const Jw = 10, eue = 5, hO = ({
             x2: e - 10 / 2,
             y1: 40,
             y2: 40,
-            stroke: "var(--apollon-primary-contrast)",
+            stroke: "var(--apollon-primary-contrast, #000000)",
             strokeWidth: me.LINE_WIDTH
           }
         ),
@@ -59271,7 +59278,7 @@ const Jw = 10, eue = 5, hO = ({
             x: 10,
             y: y + j * m,
             fontSize: "14",
-            fill: "var(--apollon-primary-contrast)",
+            fill: "var(--apollon-primary-contrast, #000000)",
             alignmentBaseline: "hanging",
             children: _
           },
@@ -59400,7 +59407,7 @@ const Jw = 10, eue = 5, hO = ({
             cx: i / 2,
             cy: a / 2,
             r: i / 2,
-            fill: "var(--apollon-primary-contrast)"
+            fill: "var(--apollon-primary-contrast, #000000)"
           }
         ),
         o && /* @__PURE__ */ h.jsx(pn, { x: i - 15, y: -15, score: u })
@@ -59432,7 +59439,7 @@ const Jw = 10, eue = 5, hO = ({
             cx: i / 2,
             cy: a / 2,
             r: i / 2,
-            fill: "var(--apollon-primary-contrast)"
+            fill: "var(--apollon-primary-contrast, #000000)"
           }
         ),
         /* @__PURE__ */ h.jsx(
@@ -59441,8 +59448,8 @@ const Jw = 10, eue = 5, hO = ({
             cx: i / 2,
             cy: a / 2,
             r: i / 2 * 0.8,
-            fill: "var(--apollon-primary-contrast)",
-            stroke: "var(--apollon-background)",
+            fill: "var(--apollon-primary-contrast, #000000)",
+            stroke: "var(--apollon-background, white)",
             strokeWidth: me.LINE_WIDTH
           }
         ),
@@ -59609,7 +59616,7 @@ const Jw = 10, eue = 5, hO = ({
   showAssessmentResults: l = !1
 }) => {
   var b;
-  const p = (b = Ve(je((S) => S.assessments))[e]) == null ? void 0 : b.score, m = t * (a ?? 1), y = n * (a ?? 1), v = i.fillColor || "var(--apollon-primary-contrast)";
+  const p = (b = Ve(je((S) => S.assessments))[e]) == null ? void 0 : b.score, m = t * (a ?? 1), y = n * (a ?? 1), v = i.fillColor || "var(--apollon-primary-contrast, #000000)";
   return /* @__PURE__ */ h.jsxs(
     "svg",
     {
@@ -59634,7 +59641,7 @@ const Jw = 10, eue = 5, hO = ({
   data: l
 }) => {
   var b;
-  const p = (b = Ve(je((S) => S.assessments))[e]) == null ? void 0 : b.score, m = t * (i ?? 1), y = n * (i ?? 1), v = l.fillColor || "var(--apollon-primary-contrast)";
+  const p = (b = Ve(je((S) => S.assessments))[e]) == null ? void 0 : b.score, m = t * (i ?? 1), y = n * (i ?? 1), v = l.fillColor || "var(--apollon-primary-contrast, #000000)";
   return /* @__PURE__ */ h.jsxs(
     "svg",
     {
@@ -62306,7 +62313,7 @@ const Jw = 10, eue = 5, hO = ({
   svgAttributes: o,
   SIDEBAR_PREVIEW_SCALE: i
 }) => {
-  const { name: a, showHint: l } = n, u = i ?? 1, p = e * u, m = t * u, y = me.DEFAULT_ATTRIBUTE_HEIGHT, v = y * u, b = t + y, S = m + v, C = e / 2, T = t / 2, k = Math.min(e, t) / 2, { strokeColor: _ } = fn(n), j = n.fillColor || "var(--apollon-primary-contrast)";
+  const { name: a, showHint: l } = n, u = i ?? 1, p = e * u, m = t * u, y = me.DEFAULT_ATTRIBUTE_HEIGHT, v = y * u, b = t + y, S = m + v, C = e / 2, T = t / 2, k = Math.min(e, t) / 2, { strokeColor: _ } = fn(n), j = n.fillColor || "var(--apollon-primary-contrast, #000000)";
   return /* @__PURE__ */ h.jsxs(
     "svg",
     {
@@ -67851,7 +67858,7 @@ const oj = ({
         width: "180px",
         minWidth: "180px",
         height: "100%",
-        backgroundColor: "var(--apollon-background)",
+        backgroundColor: "var(--apollon-background, white)",
         display: "flex",
         flexDirection: "column",
         padding: "10px",
@@ -67932,8 +67939,8 @@ const oj = ({
         wn,
         {
           sx: {
-            backgroundColor: "var(--apollon-background)",
-            boxShadow: "0 0 4px 0 var(--apollon-background-variant)",
+            backgroundColor: "var(--apollon-background, white)",
+            boxShadow: "0 0 4px 0 var(--apollon-background-variant, #f8f9fa)",
             borderRadius: "8px",
             padding: "8px",
             display: "flex",
@@ -67956,7 +67963,7 @@ const oj = ({
                 sx: {
                   width: "16px",
                   height: "16px",
-                  backgroundColor: "var(--apollon-background)",
+                  backgroundColor: "var(--apollon-background, white)",
                   borderRadius: 1,
                   display: "flex",
                   justifyContent: "center",
@@ -67974,7 +67981,7 @@ const oj = ({
                 sx: {
                   width: "16px",
                   height: "16px",
-                  backgroundColor: "var(--apollon-background)",
+                  backgroundColor: "var(--apollon-background, white)",
                   borderRadius: 1,
                   display: "flex",
                   justifyContent: "center",
@@ -68146,7 +68153,7 @@ function Aa({
 }
 const sfe = () => {
   const [e, t] = $.useState(!0);
-  return e ? /* @__PURE__ */ h.jsx(_x, { position: "bottom-right", onClick: () => t(!1), children: /* @__PURE__ */ h.jsx(jle, { fill: "var(--apollon-primary-contrast)" }) }) : /* @__PURE__ */ h.jsxs(
+  return e ? /* @__PURE__ */ h.jsx(_x, { position: "bottom-right", onClick: () => t(!1), children: /* @__PURE__ */ h.jsx(jle, { fill: "var(--apollon-primary-contrast, #000000)" }) }) : /* @__PURE__ */ h.jsxs(
     _x,
     {
       position: "bottom-right",
@@ -68163,14 +68170,14 @@ const sfe = () => {
               display: "flex",
               zIndex: Lh.PANEL,
               padding: 8,
-              backgroundColor: "var(--apollon-background)",
+              backgroundColor: "var(--apollon-background, white)",
               borderRadius: "4px",
               justifyContent: "center",
               alignItems: "center",
               cursor: "pointer",
               boxShadow: "0 0 4px 0 rgb(0 0 0 / 0.2)"
             },
-            children: /* @__PURE__ */ h.jsx(Ile, { fill: "var(--apollon-primary-contrast)" })
+            children: /* @__PURE__ */ h.jsx(Ile, { fill: "var(--apollon-primary-contrast, #000000)" })
           }
         ),
         /* @__PURE__ */ h.jsx(
@@ -68780,7 +68787,7 @@ const lfe = () => {
               {
                 width: 16,
                 height: 16,
-                fill: o ? "var(--apollon-primary-contrast)" : "var(--apollon-secondary)"
+                fill: o ? "var(--apollon-primary-contrast, #000000)" : "var(--apollon-secondary, #6c757d)"
               }
             )
           }
@@ -68796,7 +68803,7 @@ const lfe = () => {
               {
                 width: 16,
                 height: 16,
-                fill: i ? "var(--apollon-primary-contrast)" : "var(--apollon-secondary)"
+                fill: i ? "var(--apollon-primary-contrast, #000000)" : "var(--apollon-secondary, #6c757d)"
               }
             )
           }
@@ -68806,7 +68813,7 @@ const lfe = () => {
           {
             style: {
               userSelect: "none",
-              border: "1px solid var(--apollon-primary-contrast)",
+              border: "1px solid var(--apollon-primary-contrast, #000000)",
               borderRadius: 8,
               paddingLeft: 4,
               paddingRight: 4,
@@ -68815,7 +68822,7 @@ const lfe = () => {
               height: "100%",
               alignItems: "center",
               justifyContent: "center",
-              color: "var(--apollon-primary-contrast)"
+              color: "var(--apollon-primary-contrast, #000000)"
             },
             onClick: () => e(1),
             children: [
@@ -68833,7 +68840,7 @@ const lfe = () => {
     {
       id: "1",
       gap: 10,
-      color: "var(--apollon-gray)",
+      color: "var(--apollon-gray, #e9ecef)",
       variant: nu.Lines
     }
   ),
@@ -68842,7 +68849,7 @@ const lfe = () => {
     {
       id: "2",
       gap: 50,
-      color: "var(--apollon-grid)",
+      color: "var(--apollon-grid, rgba(36, 39, 36, 0.1))",
       variant: nu.Lines
     }
   )
@@ -68907,7 +68914,7 @@ function ufe() {
                 "div",
                 {
                   style: {
-                    border: "2px solid var(--apollon-grid)",
+                    border: "2px solid var(--apollon-grid, rgba(36, 39, 36, 0.1))",
                     padding: "4px"
                   },
                   children: [
@@ -69038,7 +69045,7 @@ const dfe = () => {
   targetY: a,
   sourcePosition: l,
   targetPosition: u,
-  textColor: p = "var(--apollon-primary-contrast)"
+  textColor: p = "var(--apollon-primary-contrast, #000000)"
 }) => {
   const m = $.useMemo(() => {
     if (t.length < 2)
@@ -69483,7 +69490,7 @@ const dfe = () => {
       className: "edge-label",
       style: {
         fontSize: "12px",
-        fill: "var(--apollon-primary-contrast)",
+        fill: "var(--apollon-primary-contrast, #000000)",
         fontStyle: "italic",
         userSelect: "none",
         fontWeight: "bold",
@@ -71331,12 +71338,13 @@ function Nfe({ onReactFlowInit: e }) {
   return /* @__PURE__ */ h.jsxs(
     "div",
     {
+      className: "apollon-editor",
       style: {
         display: "flex",
         height: "100%",
         width: "100%",
         overflow: "hidden",
-        backgroundColor: "var(--apollon-background)",
+        backgroundColor: "var(--apollon-background, white)",
         position: "relative"
       },
       children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tumaet/apollon",
-  "version": "4.2.12",
+  "version": "4.2.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",