@odigos/ui-kit 0.0.51 → 0.0.52

package/lib/{index-1-F2f04H.js → index-4dd6a1ce.js}

@@ -1,13 +1,13 @@
-import React, { useState, useEffect, useRef, forwardRef, useMemo, createElement, useCallback, Fragment, memo, useContext, createContext, useLayoutEffect } from 'react';
-import { T as Theme, B as BUTTON_TEXTS, v as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, i as usePendingStore, j as useSelectedStore, f as useInstrumentStore, u as useActiveNodeStore, h as useNotificationStore, m as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, q as getProgrammingLanguageIcon, D as DISPLAY_LANGUAGES } from './index-BC03UmY5.js';
+import React, { useState, useEffect, useRef, forwardRef, useMemo, createElement, useCallback, Fragment, createContext, memo, useContext, useLayoutEffect } from 'react';
+import { T as Theme, B as BUTTON_TEXTS, j as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-118aa476.js';
 import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.js';
-import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon, A as ArrowIcon } from './index-CyHOJpMl.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, p as parseBooleanFromString, i as isValidVersion, e as splitCamelString, d as parseJsonStringToPrettyString, n as numbersOnly } from './index-Dbs7YARA.js';
+import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon, A as ArrowIcon } from './index-f40b593d.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, p as parseBooleanFromString, i as isValidVersion, e as splitCamelString, d as parseJsonStringToPrettyString, n as numbersOnly } from './index-4c55824c.js';
 import styled, { css } from 'styled-components';
-import { s as safeJsonParse, i as isEmpty } from './index-BnvrwbRB.js';
+import { s as safeJsonParse, i as isEmpty } from './index-ec555530.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { g as usePopup, b as useCopy, u as useClickNode, c as useGenericForm, a as useContainerSize, i as useTransition, e as useKeyDown, f as useOnClickOutside } from './useTransition-DmHfJSEP.js';
-import { I as InfoIcon } from './index-H8TwBQHm.js';
+import { d as usePopup, h as useCopy, c as useClickNode, i as useGenericForm, b as useContainerSize, f as useTransition, u as useKeyDown, a as useOnClickOutside } from './useTransition-53e46214.js';
+import { I as InfoIcon } from './index-974c5344.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -159,7 +159,7 @@ const AutocompleteInput = ({ placeholder = 'Type to search...', options, selecte
     const [query, setQuery] = useState(selectedOption?.label || defaultText || '');
     const [filteredOptions, setFilteredOptions] = useState(filterOptions(options, query));
     const [showOptions, setShowOptions] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(-1);
+    useState(-1);
     useEffect(() => setFilteredOptions(filterOptions(options, query)), [options]);
     const Icon = selectedOption?.icon;
     const handleChange = (e) => {
@@ -585,7 +585,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 
@@ -2097,9 +2097,13 @@ var colors = {
   string: "#8dc891",
   variable: "#d7deea",
   boolean: "#ff8b50",
+  punctuation: "#5FB3B3",
   tag: "#fc929e",
   function: "#79b6f2",
-  className: "#FAC863"};
+  className: "#FAC863",
+  method: "#6699CC",
+  operator: "#fc929e"
+};
 var theme7 = {
   plain: {
     backgroundColor: "#282c34",
@@ -3937,28 +3941,28 @@ const FadeLoader = ({ loading = true, color: clr, scale = 1, speedMultiplier = 1
             } }),
         React.createElement("span", { style: {
                 ...styles(4, 45),
-                top: `calc(50% + ${ -1 * quarter}px)`,
+                top: `calc(50% + ${-1 * quarter}px)`,
                 left: `calc(50% + ${quarter}px)`,
             } }),
         React.createElement("span", { style: {
                 ...styles(5, 0),
-                top: `calc(50% + ${ -1 * radiusValue}px)`,
+                top: `calc(50% + ${-1 * radiusValue}px)`,
                 left: '50%',
             } }),
         React.createElement("span", { style: {
                 ...styles(6, -45),
-                top: `calc(50% + ${ -1 * quarter}px)`,
-                left: `calc(50% + ${ -1 * quarter}px)`,
+                top: `calc(50% + ${-1 * quarter}px)`,
+                left: `calc(50% + ${-1 * quarter}px)`,
             } }),
         React.createElement("span", { style: {
                 ...styles(7, 90),
                 top: '50%',
-                left: `calc(50% + ${ -1 * radiusValue}px)`,
+                left: `calc(50% + ${-1 * radiusValue}px)`,
             } }),
         React.createElement("span", { style: {
                 ...styles(8, 45),
                 top: `calc(50% + ${quarter}px)`,
-                left: `calc(50% + ${ -1 * quarter}px)`,
+                left: `calc(50% + ${-1 * quarter}px)`,
             } })));
 };
 
@@ -4464,7 +4468,7 @@ const nodeConfig = {
     framePadding: 12,
 };
 
-var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
+var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__pane.selection .react-flow__panel {\n  pointer-events: none;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
 styleInject(css_248z);
 
 function getDefaultExportFromCjs (x) {
@@ -4601,7 +4605,7 @@ function requireReactJsxRuntime_development () {
 	        testStringCoercion(value);
 	        var JSCompiler_inline_result = !1;
 	      } catch (e) {
-	        JSCompiler_inline_result = true;
+	        JSCompiler_inline_result = !0;
 	      }
 	      if (JSCompiler_inline_result) {
 	        JSCompiler_inline_result = console;
@@ -4645,29 +4649,29 @@ function requireReactJsxRuntime_development () {
 	    function hasValidKey(config) {
 	      if (hasOwnProperty.call(config, "key")) {
 	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-	        if (getter && getter.isReactWarning) return false;
+	        if (getter && getter.isReactWarning) return !1;
 	      }
 	      return void 0 !== config.key;
 	    }
 	    function defineKeyPropWarningGetter(props, displayName) {
 	      function warnAboutAccessingKey() {
 	        specialPropKeyWarningShown ||
-	          ((specialPropKeyWarningShown = true),
+	          ((specialPropKeyWarningShown = !0),
 	          console.error(
 	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
 	            displayName
 	          ));
 	      }
-	      warnAboutAccessingKey.isReactWarning = true;
+	      warnAboutAccessingKey.isReactWarning = !0;
 	      Object.defineProperty(props, "key", {
 	        get: warnAboutAccessingKey,
-	        configurable: true
+	        configurable: !0
 	      });
 	    }
 	    function elementRefGetterWithDeprecationWarning() {
 	      var componentName = getComponentNameFromType(this.type);
 	      didWarnAboutElementRef[componentName] ||
-	        ((didWarnAboutElementRef[componentName] = true),
+	        ((didWarnAboutElementRef[componentName] = !0),
 	        console.error(
 	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
 	        ));
@@ -4694,33 +4698,33 @@ function requireReactJsxRuntime_development () {
 	      };
 	      null !== (void 0 !== self ? self : null)
 	        ? Object.defineProperty(type, "ref", {
-	            enumerable: false,
+	            enumerable: !1,
 	            get: elementRefGetterWithDeprecationWarning
 	          })
-	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	        : Object.defineProperty(type, "ref", { enumerable: !1, value: null });
 	      type._store = {};
 	      Object.defineProperty(type._store, "validated", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
+	        configurable: !1,
+	        enumerable: !1,
+	        writable: !0,
 	        value: 0
 	      });
 	      Object.defineProperty(type, "_debugInfo", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
+	        configurable: !1,
+	        enumerable: !1,
+	        writable: !0,
 	        value: null
 	      });
 	      Object.defineProperty(type, "_debugStack", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
+	        configurable: !1,
+	        enumerable: !1,
+	        writable: !0,
 	        value: debugStack
 	      });
 	      Object.defineProperty(type, "_debugTask", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
+	        configurable: !1,
+	        enumerable: !1,
+	        writable: !0,
 	        value: debugTask
 	      });
 	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
@@ -4771,7 +4775,7 @@ function requireReactJsxRuntime_development () {
 	            keys,
 	            children
 	          ),
-	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	          (didWarnAboutKeySpread[children + isStaticChildren] = !0));
 	      }
 	      children = null;
 	      void 0 !== maybeKey &&
@@ -4853,7 +4857,7 @@ function requireReactJsxRuntime_development () {
 	        type,
 	        config,
 	        maybeKey,
-	        false,
+	        !1,
 	        source,
 	        self,
 	        trackActualOwner
@@ -4869,7 +4873,7 @@ function requireReactJsxRuntime_development () {
 	        type,
 	        config,
 	        maybeKey,
-	        true,
+	        !0,
 	        source,
 	        self,
 	        trackActualOwner
@@ -8261,6 +8265,7 @@ function zoom() {
         new ZoomEvent(type, {
           sourceEvent: this.sourceEvent,
           target: zoom,
+          type,
           transform: this.that.__zoom,
           dispatch: listeners
         }),
@@ -8819,7 +8824,7 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
     const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
     const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
     const origin = node.origin ?? nodeOrigin;
-    let extent = nodeExtent;
+    let extent = node.extent || nodeExtent;
     if (node.extent === 'parent' && !node.expandParent) {
         if (!parentNode) {
             onError?.('005', errorMessages['error005']());
@@ -9362,13 +9367,18 @@ function getEdgeCenter({ sourceX, sourceY, targetX, targetY, }) {
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
     return [centerX, centerY, xOffset, yOffset];
 }
-function getElevatedEdgeZIndex({ sourceNode, targetNode, selected = false, zIndex = 0, elevateOnSelect = false, }) {
-    if (!elevateOnSelect) {
+/**
+ * Returns the z-index for an edge based on the node it connects and whether it is selected.
+ * By default, edges are rendered below nodes. This behaviour is different for edges that are
+ * connected to nodes with a parent, as they are rendered above the parent node.
+ */
+function getElevatedEdgeZIndex({ sourceNode, targetNode, selected = false, zIndex, elevateOnSelect = false, }) {
+    if (zIndex !== undefined) {
         return zIndex;
     }
-    const edgeOrConnectedNodeSelected = selected || targetNode.selected || sourceNode.selected;
-    const selectedZIndex = Math.max(sourceNode.internals.z || 0, targetNode.internals.z || 0, 1000);
-    return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
+    const edgeZ = elevateOnSelect && selected ? 1000 : 0;
+    const nodeZ = Math.max(sourceNode.parentId ? sourceNode.internals.z : 0, targetNode.parentId ? targetNode.internals.z : 0);
+    return edgeZ + nodeZ;
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
     const edgeBox = getBoundsOfBoxes(nodeToBox(sourceNode), nodeToBox(targetNode));
@@ -9488,7 +9498,7 @@ const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y
  * With this function we try to mimic an orthogonal edge routing behaviour
  * It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
  */
-function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) {
+function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, stepPosition, }) {
     const sourceDir = handleDirections[sourcePosition];
     const targetDir = handleDirections[targetPosition];
     const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
@@ -9504,7 +9514,7 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     let centerX, centerY;
     const sourceGapOffset = { x: 0, y: 0 };
     const targetGapOffset = { x: 0, y: 0 };
-    const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
+    const [, , defaultOffsetX, defaultOffsetY] = getEdgeCenter({
         sourceX: source.x,
         sourceY: source.y,
         targetX: target.x,
@@ -9512,8 +9522,16 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     });
     // opposite handle positions, default case
     if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-        centerX = center.x ?? defaultCenterX;
-        centerY = center.y ?? defaultCenterY;
+        if (dirAccessor === 'x') {
+            // Primary direction is horizontal, so stepPosition affects X coordinate
+            centerX = center.x ?? (sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition);
+            centerY = center.y ?? (sourceGapped.y + targetGapped.y) / 2;
+        }
+        else {
+            // Primary direction is vertical, so stepPosition affects Y coordinate  
+            centerX = center.x ?? (sourceGapped.x + targetGapped.x) / 2;
+            centerY = center.y ?? (sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition);
+        }
         /*
          *    --->
          *    |
@@ -9646,7 +9664,7 @@ function getBend(a, b, c, size) {
  * ```
  * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
  */
-function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) {
+function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, stepPosition = 0.5, }) {
     const [points, labelX, labelY, offsetX, offsetY] = getPoints({
         source: { x: sourceX, y: sourceY },
         sourcePosition,
@@ -9654,6 +9672,7 @@ function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom,
         targetPosition,
         center: { x: centerX, y: centerY },
         offset,
+        stepPosition,
     });
     const path = points.reduce((res, p, i) => {
         let segment = '';
@@ -9925,7 +9944,7 @@ function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, select
     return {
         x: absolutePosition.x,
         y: absolutePosition.y,
-        z: parentZ > childZ ? parentZ : childZ,
+        z: parentZ >= childZ ? parentZ + 1 : childZ,
     };
 }
 function handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin = [0, 0]) {
@@ -10544,7 +10563,7 @@ function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
 }
 
 const alwaysValid = () => true;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
@@ -10553,6 +10572,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     const clickedHandle = doc?.elementFromPoint(x, y);
     const handleType = getHandleType(edgeUpdaterType, clickedHandle);
     const containerBounds = domNode?.getBoundingClientRect();
+    let connectionStarted = false;
     if (!containerBounds || !handleType) {
         return;
     }
@@ -10583,7 +10603,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     };
     const fromNodeInternal = nodeLookup.get(nodeId);
     const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true);
-    const newConnection = {
+    let previousConnection = {
         inProgress: true,
         isValid: null,
         from,
@@ -10595,10 +10615,25 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         toPosition: oppositePosition[fromHandle.position],
         toNode: null,
     };
-    updateConnection(newConnection);
-    let previousConnection = newConnection;
-    onConnectStart?.(event, { nodeId, handleId, handleType });
+    function startConnection() {
+        connectionStarted = true;
+        updateConnection(previousConnection);
+        onConnectStart?.(event, { nodeId, handleId, handleType });
+    }
+    if (dragThreshold === 0) {
+        startConnection();
+    }
     function onPointerMove(event) {
+        if (!connectionStarted) {
+            const { x: evtX, y: evtY } = getEventPosition(event);
+            const dx = evtX - x;
+            const dy = evtY - y;
+            const nextConnectionStarted = dx * dx + dy * dy > dragThreshold * dragThreshold;
+            if (!nextConnectionStarted) {
+                return;
+            }
+            startConnection();
+        }
         if (!getFromHandle() || !fromHandle) {
             onPointerUp(event);
             return;
@@ -10655,22 +10690,24 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         previousConnection = newConnection;
     }
     function onPointerUp(event) {
-        if ((closestHandle || handleDomNode) && connection && isValid) {
-            onConnect?.(connection);
-        }
-        /*
-         * it's important to get a fresh reference from the store here
-         * in order to get the latest state of onConnectEnd
-         */
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { inProgress, ...connectionState } = previousConnection;
-        const finalConnectionState = {
-            ...connectionState,
-            toPosition: previousConnection.toHandle ? previousConnection.toPosition : null,
-        };
-        onConnectEnd?.(event, finalConnectionState);
-        if (edgeUpdaterType) {
-            onReconnectEnd?.(event, finalConnectionState);
+        if (connectionStarted) {
+            if ((closestHandle || handleDomNode) && connection && isValid) {
+                onConnect?.(connection);
+            }
+            /*
+             * it's important to get a fresh reference from the store here
+             * in order to get the latest state of onConnectEnd
+             */
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { inProgress, ...connectionState } = previousConnection;
+            const finalConnectionState = {
+                ...connectionState,
+                toPosition: previousConnection.toHandle ? previousConnection.toPosition : null,
+            };
+            onConnectEnd?.(event, finalConnectionState);
+            if (edgeUpdaterType) {
+                onReconnectEnd?.(event, finalConnectionState);
+            }
         }
         cancelConnection();
         cancelAnimationFrame(autoPanId);
@@ -11687,7 +11724,7 @@ function requireUseSyncExternalStoreShim_production () {
 	    var nextValue = latestGetSnapshot();
 	    return !objectIs(inst, nextValue);
 	  } catch (error) {
-	    return true;
+	    return !0;
 	  }
 	}
 	function useSyncExternalStore$1(subscribe, getSnapshot) {
@@ -11729,7 +11766,7 @@ function requireUseSyncExternalStoreShim_development () {
 	    function useSyncExternalStore$2(subscribe, getSnapshot) {
 	      didWarnOld18Alpha ||
 	        void 0 === React$1.startTransition ||
-	        ((didWarnOld18Alpha = true),
+	        ((didWarnOld18Alpha = !0),
 	        console.error(
 	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
 	        ));
@@ -11740,7 +11777,7 @@ function requireUseSyncExternalStoreShim_development () {
 	          (console.error(
 	            "The result of getSnapshot should be cached to avoid an infinite loop"
 	          ),
-	          (didWarnUncachedGetSnapshot = true));
+	          (didWarnUncachedGetSnapshot = !0));
 	      }
 	      cachedValue = useState({
 	        inst: { value: value, getSnapshot: getSnapshot }
@@ -11774,7 +11811,7 @@ function requireUseSyncExternalStoreShim_development () {
 	        var nextValue = latestGetSnapshot();
 	        return !objectIs(inst, nextValue);
 	      } catch (error) {
-	        return true;
+	        return !0;
 	      }
 	    }
 	    function useSyncExternalStore$1(subscribe, getSnapshot) {
@@ -11790,8 +11827,8 @@ function requireUseSyncExternalStoreShim_development () {
 	      useEffect = React$1.useEffect,
 	      useLayoutEffect = React$1.useLayoutEffect,
 	      useDebugValue = React$1.useDebugValue,
-	      didWarnOld18Alpha = false,
-	      didWarnUncachedGetSnapshot = false,
+	      didWarnOld18Alpha = !1,
+	      didWarnUncachedGetSnapshot = !1,
 	      shim =
 	        "undefined" === typeof window ||
 	        "undefined" === typeof window.document ||
@@ -11857,14 +11894,14 @@ function requireWithSelector_production () {
 	) {
 	  var instRef = useRef(null);
 	  if (null === instRef.current) {
-	    var inst = { hasValue: false, value: null };
+	    var inst = { hasValue: !1, value: null };
 	    instRef.current = inst;
 	  } else inst = instRef.current;
 	  instRef = useMemo(
 	    function () {
 	      function memoizedSelector(nextSnapshot) {
 	        if (!hasMemo) {
-	          hasMemo = true;
+	          hasMemo = !0;
 	          memoizedSnapshot = nextSnapshot;
 	          nextSnapshot = selector(nextSnapshot);
 	          if (void 0 !== isEqual && inst.hasValue) {
@@ -11882,7 +11919,7 @@ function requireWithSelector_production () {
 	        memoizedSnapshot = nextSnapshot;
 	        return (memoizedSelection = nextSelection);
 	      }
-	      var hasMemo = false,
+	      var hasMemo = !1,
 	        memoizedSnapshot,
 	        memoizedSelection,
 	        maybeGetServerSnapshot =
@@ -11903,7 +11940,7 @@ function requireWithSelector_production () {
 	  var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
 	  useEffect(
 	    function () {
-	      inst.hasValue = true;
+	      inst.hasValue = !0;
 	      inst.value = value;
 	    },
 	    [value]
@@ -11957,14 +11994,14 @@ function requireWithSelector_development () {
 	    ) {
 	      var instRef = useRef(null);
 	      if (null === instRef.current) {
-	        var inst = { hasValue: false, value: null };
+	        var inst = { hasValue: !1, value: null };
 	        instRef.current = inst;
 	      } else inst = instRef.current;
 	      instRef = useMemo(
 	        function () {
 	          function memoizedSelector(nextSnapshot) {
 	            if (!hasMemo) {
-	              hasMemo = true;
+	              hasMemo = !0;
 	              memoizedSnapshot = nextSnapshot;
 	              nextSnapshot = selector(nextSnapshot);
 	              if (void 0 !== isEqual && inst.hasValue) {
@@ -11983,7 +12020,7 @@ function requireWithSelector_development () {
 	            memoizedSnapshot = nextSnapshot;
 	            return (memoizedSelection = nextSelection);
 	          }
-	          var hasMemo = false,
+	          var hasMemo = !1,
 	            memoizedSnapshot,
 	            memoizedSelection,
 	            maybeGetServerSnapshot =
@@ -12004,7 +12041,7 @@ function requireWithSelector_development () {
 	      var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
 	      useEffect(
 	        function () {
-	          inst.hasValue = true;
+	          inst.hasValue = !0;
 	          inst.value = value;
 	        },
 	        [value]
@@ -12214,7 +12251,6 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }) {
                     : ariaLabelConfig['node.a11yDescription.keyboardDisabled'] }), jsxRuntimeExports.jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: ariaLabelConfig['edge.a11yDescription.default'] }), !disableKeyboardA11y && jsxRuntimeExports.jsx(AriaLiveMessage, { rfId: rfId })] }));
 }
 
-const selector$n = (s) => (s.userSelectionActive ? 'none' : 'all');
 /**
  * The `<Panel />` component helps you position content above the viewport.
  * It is used internally by the [`<MiniMap />`](/api-reference/components/minimap)
@@ -12241,9 +12277,8 @@ const selector$n = (s) => (s.userSelectionActive ? 'none' : 'all');
  *```
  */
 const Panel = forwardRef(({ position = 'top-left', children, className, style, ...rest }, ref) => {
-    const pointerEvents = useStore(selector$n);
     const positionClasses = `${position}`.split('-');
-    return (jsxRuntimeExports.jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: { ...style, pointerEvents }, ref: ref, ...rest, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: style, ref: ref, ...rest, children: children }));
 });
 Panel.displayName = 'Panel';
 
@@ -12355,6 +12390,7 @@ const reactFlowFieldsToTrack = [
     'isValidConnection',
     'selectNodesOnDrag',
     'nodeDragThreshold',
+    'connectionDragThreshold',
     'onBeforeDelete',
     'debug',
     'autoPanSpeed',
@@ -12424,14 +12460,13 @@ function StoreUpdater(props) {
                 setNodeExtent(fieldValue);
             else if (fieldName === 'paneClickDistance')
                 setPaneClickDistance(fieldValue);
+            else if (fieldName === 'ariaLabelConfig')
+                store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue) });
             // Renamed fields
             else if (fieldName === 'fitView')
                 store.setState({ fitViewQueued: fieldValue });
             else if (fieldName === 'fitViewOptions')
                 store.setState({ fitViewOptions: fieldValue });
-            if (fieldName === 'ariaLabelConfig') {
-                store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue) });
-            }
             // General case
             else
                 store.setState({ [fieldName]: fieldValue });
@@ -13264,7 +13299,9 @@ function useReactFlow() {
                     const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode);
                     const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
                     const partiallyVisible = partially && overlappingArea > 0;
-                    return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+                    return (partiallyVisible ||
+                        overlappingArea >= currNodeRect.width * currNodeRect.height ||
+                        overlappingArea >= nodeRect.width * nodeRect.height);
                 });
             },
             isNodeIntersecting: (nodeOrRect, area, partially = true) => {
@@ -13876,6 +13913,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
                 getTransform: () => store.getState().transform,
                 getFromHandle: () => store.getState().connection.fromHandle,
                 autoPanSpeed: currentStore.autoPanSpeed,
+                dragThreshold: currentStore.connectionDragThreshold,
             });
         }
         if (isMouseTriggered) {
@@ -14199,7 +14237,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     if (NodeComponent === undefined) {
         onError?.('003', errorMessages['error003'](nodeType));
         nodeType = 'default';
-        NodeComponent = builtinNodeTypes.default;
+        NodeComponent = nodeTypes?.['default'] || builtinNodeTypes.default;
     }
     const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
     const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
@@ -14631,6 +14669,7 @@ function createSmoothStepEdge(params) {
             targetPosition,
             borderRadius: pathOptions?.borderRadius,
             offset: pathOptions?.offset,
+            stepPosition: pathOptions?.stepPosition,
         });
         const _id = params.isInternal ? undefined : id;
         return (jsxRuntimeExports.jsx(BaseEdge, { id: _id, path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart, interactionWidth: interactionWidth }));
@@ -14836,13 +14875,16 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
         }
         const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
         const isTarget = oppositeHandle.type === 'target';
-        setReconnecting(true);
-        onReconnectStart?.(event, edge, oppositeHandle.type);
         const _onReconnectEnd = (evt, connectionState) => {
             setReconnecting(false);
             onReconnectEnd?.(evt, edge, oppositeHandle.type, connectionState);
         };
         const onConnectEdge = (connection) => onReconnect?.(edge, connection);
+        const _onConnectStart = (_event, params) => {
+            setReconnecting(true);
+            onReconnectStart?.(event, edge, oppositeHandle.type);
+            onConnectStart?.(_event, params);
+        };
         XYHandle.onPointerDown(event.nativeEvent, {
             autoPanOnConnect,
             connectionMode,
@@ -14859,12 +14901,13 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
             panBy,
             isValidConnection,
             onConnect: onConnectEdge,
-            onConnectStart,
+            onConnectStart: _onConnectStart,
             onConnectEnd,
             onReconnectEnd: _onReconnectEnd,
             updateConnection,
             getTransform: () => store.getState().transform,
             getFromHandle: () => store.getState().connection.fromHandle,
+            dragThreshold: store.getState().connectionDragThreshold,
         });
     };
     const onReconnectSourceMouseDown = (event) => handleEdgeUpdater(event, { nodeId: edge.target, id: edge.targetHandle ?? null, type: 'target' });
@@ -14883,7 +14926,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
     if (EdgeComponent === undefined) {
         onError?.('011', errorMessages['error011'](edgeType));
         edgeType = 'default';
-        EdgeComponent = builtinEdgeTypes.default;
+        EdgeComponent = edgeTypes?.['default'] || builtinEdgeTypes.default;
     }
     const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
     const isReconnectable = typeof onReconnect !== 'undefined' &&
@@ -15061,6 +15104,13 @@ function storeSelector$1(s) {
         : { ...s.connection };
 }
 function getSelector(connectionSelector) {
+    if (connectionSelector) {
+        const combinedSelector = (s) => {
+            const connection = storeSelector$1(s);
+            return connectionSelector(connection);
+        };
+        return combinedSelector;
+    }
     return storeSelector$1;
 }
 /**
@@ -15093,7 +15143,7 @@ function getSelector(connectionSelector) {
  * @returns ConnectionState
  */
 function useConnection(connectionSelector) {
-    const combinedSelector = getSelector();
+    const combinedSelector = getSelector(connectionSelector);
     return useStore(combinedSelector, shallow$1);
 }
 
@@ -15251,6 +15301,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         noPanClassName: 'nopan',
         nodeOrigin: storeNodeOrigin,
         nodeDragThreshold: 1,
+        connectionDragThreshold: 1,
         snapGrid: [15, 15],
         snapToGrid: false,
         nodesDraggable: true,
@@ -15635,7 +15686,7 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0,
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, ...rest }, ref) {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
     // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
@@ -15643,7 +15694,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
         e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
         onScroll?.(e);
     }, [onScroll]);
-    return (jsxRuntimeExports.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", children: jsxRuntimeExports.jsxs(Wrapper$1, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsxRuntimeExports.jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsxRuntimeExports.jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, autoPanOnNodeFocus: autoPanOnNodeFocus, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug, ariaLabelConfig: ariaLabelConfig }), jsxRuntimeExports.jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsxRuntimeExports.jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsxRuntimeExports.jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+    return (jsxRuntimeExports.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", children: jsxRuntimeExports.jsxs(Wrapper$1, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsxRuntimeExports.jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsxRuntimeExports.jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, autoPanOnNodeFocus: autoPanOnNodeFocus, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug, ariaLabelConfig: ariaLabelConfig }), jsxRuntimeExports.jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsxRuntimeExports.jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsxRuntimeExports.jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
 }
 /**
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -21314,7 +21365,7 @@ function requireLottie () {
 		    var math = Math;
 		    function pointOnLine2D(x1, y1, x2, y2, x3, y3) {
 		      var det1 = x1 * y2 + y1 * x3 + x2 * y3 - x3 * y2 - y3 * x1 - x2 * y1;
-		      return det1 > -1e-3 && det1 < 0.001;
+		      return det1 > -0.001 && det1 < 0.001;
 		    }
 		    function pointOnLine3D(x1, y1, z1, x2, y2, z2, x3, y3, z3) {
 		      if (z1 === 0 && z2 === 0 && z3 === 0) {
@@ -21335,7 +21386,7 @@ function requireLottie () {
 		      } else {
 		        diffDist = dist2 - dist1 - dist3;
 		      }
-		      return diffDist > -1e-4 && diffDist < 0.0001;
+		      return diffDist > -0.0001 && diffDist < 0.0001;
 		    }
 		    var getBezierLength = function () {
 		      return function (pt1, pt2, pt3, pt4) {
@@ -23031,7 +23082,7 @@ function requireLottie () {
 		    }
 		    function roundMatrixProperty(val) {
 		      var v = 10000;
-		      if (val < 0.000001 && val > 0 || val > -1e-6 && val < 0) {
+		      if (val < 0.000001 && val > 0 || val > -0.000001 && val < 0) {
 		        return _rnd(val * v) / v;
 		      }
 		      return val;
@@ -34716,7 +34767,7 @@ function requireLottie () {
 		      if (this.vel !== undefined) {
 		        return this.vel;
 		      }
-		      var delta = -1e-3;
+		      var delta = -0.001;
 		      // frameNum += this.elem.data.st;
 		      var v1 = this.getValueAtTime(frameNum);
 		      var v2 = this.getValueAtTime(frameNum + delta);
@@ -35793,9 +35844,9 @@ function _arrayWithHoles(r) {
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
   }) : e[r] = t, e;
 }
 function _iterableToArrayLimit(r, l) {
@@ -35806,12 +35857,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = true,
-      o = false;
+      f = !0,
+      o = !1;
     try {
-      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
-      o = true, n = r;
+      o = !0, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -35838,7 +35892,7 @@ function ownKeys(e, r) {
 function _objectSpread2(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
       _defineProperty(e, r, t[r]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
@@ -35873,7 +35927,7 @@ function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r);
+    var i = e.call(t, r || "default");
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -38318,4 +38372,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { MonitorsIcons as $, AddButton$1 as A, BaseNode as B, CopyText as C, DataCard as D, EdgedNode as E, Flow as F, Header as G, HeaderNode as H, IconButton as I, IconGroup as J, IconTitleBadge as K, LabeledEdge as L, MapItemNode as M, NoDataNode as N, IconWrapped as O, PodContainer as P, IconsNav as Q, ImageControlled as R, ScrollNode as S, ToggleCodeComponent as T, Input as U, InputList as V, InputTable as W, InteractiveTable as X, KeyValueInputsList as Y, Modal as Z, MonitorsCheckboxes as _, AddNode as a, NavigationButtons as a0, NoDataFound as a1, NotificationNote as a2, Popup as a3, PopupForm as a4, ScrollX as a5, SectionTitle as a6, Segment as a7, SelectionButton as a8, SkeletonLoader as a9, Status as aa, Stepper as ab, Tag as ac, Text as ad, TextArea as ae, Toggle as af, Tooltip as ag, TraceLoader as ah, WarningModal as ai, FlexRow as aj, FlexColumn as ak, CenterThis as al, VerticalScroll as am, Overlay as an, ModalBody as ao, TableContainer as ap, TableTitleWrap as aq, TableWrap as ar, useNodesState as as, useEdgesState as at, applyNodeChanges as au, MarkerType as av, FrameNode as b, SkeletonNode as c, SourceContainer as d, Button$4 as e, AutocompleteInput as f, Badge as g, Checkbox as h, Code as i, ConditionDetails as j, DataCardFields as k, DataCardFieldTypes as l, DataFinger as m, nodeConfig as n, DataTab as o, DescribeRow as p, Divider as q, DocsButton as r, Drawer as s, DrawerHeader as t, DrawerFooter as u, Dropdown as v, ExtendArrow as w, FadeLoader as x, FieldError as y, FieldLabel as z };
+export { Toggle as $, AutocompleteInput as A, Button$4 as B, Checkbox as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, PopupForm as O, Popup as P, SectionTitle as Q, Segment as R, ScrollX as S, ToggleCodeComponent as T, SelectionButton as U, SkeletonLoader as V, Status as W, Stepper as X, Tag as Y, Text as Z, TextArea as _, Badge as a, Tooltip as a0, TraceLoader as a1, WarningModal as a2, FlexRow as a3, FlexColumn as a4, CenterThis as a5, VerticalScroll as a6, Overlay as a7, ModalBody as a8, TableContainer as a9, TableTitleWrap as aa, TableWrap as ab, nodeConfig as ac, useNodesState as ad, useEdgesState as ae, Flow as af, applyNodeChanges as ag, AddButton$1 as ah, MarkerType as ai, CopyText as aj, PodContainer as ak, SourceContainer as al, AddNode as am, BaseNode as an, EdgedNode as ao, FrameNode as ap, HeaderNode as aq, MapItemNode as ar, NoDataNode as as, ScrollNode as at, SkeletonNode as au, LabeledEdge as av, Code as b, ConditionDetails as c, DataCardFields as d, DataCardFieldTypes as e, DataFinger as f, DataTab as g, DescribeRow as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };