@hitachivantara/uikit-react-lab 5.9.0 → 5.11.0

package/dist/cjs/components/Flow/Sidebar/Sidebar.cjs

@@ -4,12 +4,14 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const debounce = require("lodash/debounce");
 const core = require("@dnd-kit/core");
+const modifiers = require("@dnd-kit/modifiers");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const Sidebar_styles = require("./Sidebar.styles.cjs");
 const utils = require("./utils.cjs");
 const SidebarGroup = require("./SidebarGroup/SidebarGroup.cjs");
-const FlowContext = require("../FlowContext/FlowContext.cjs");
+const SidebarGroupItem = require("./SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs");
+const useFlowContext = require("../hooks/useFlowContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
 const DEFAULT_LABELS = {
@@ -35,9 +37,10 @@ const HvFlowSidebar = ({
     nodeGroups,
     nodeTypes,
     setExpandedNodeGroups
-  } = FlowContext.useFlowContext();
+  } = useFlowContext.useFlowContext();
   const unfilteredGroups = React.useMemo(() => utils.buildGroups(nodeGroups, nodeTypes), [nodeGroups, nodeTypes]);
   const [groups, setGroups] = React.useState(unfilteredGroups);
+  const [draggingLabel, setDraggingLabel] = React.useState(void 0);
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarDrawer");
   const groupsElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarGroups");
@@ -46,6 +49,19 @@ const HvFlowSidebar = ({
   } = core.useDroppable({
     id: drawerElementId
   });
+  const handleDragStart = (event) => {
+    var _a, _b;
+    if ((_a = event.active.data.current) == null ? void 0 : _a.hvFlow) {
+      setDraggingLabel((_b = event.active.data.current.hvFlow) == null ? void 0 : _b.label);
+    }
+  };
+  const handleDragEnd = () => {
+    setDraggingLabel(void 0);
+  };
+  core.useDndMonitor({
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart
+  });
   const handleSearch = (event, value) => {
     const gps = value ? Object.entries(unfilteredGroups).reduce((acc, curr) => {
       const filteredNodes = curr[1].nodes.filter((obj) => obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()));
@@ -62,25 +78,28 @@ const HvFlowSidebar = ({
     setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups(value ? Object.keys(gps) : []);
   };
   const handleDebouncedSearch = debounce__default.default(handleSearch, 500);
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
-    paper: classes.drawerPaper
-  }, anchor, buttonTitle, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, { role: "none" }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title3", children: title })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.contentContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.description, children: description }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvInput, { className: classes.searchRoot, type: "search", placeholder: labels == null ? void 0 : labels.searchPlaceholder, "aria-label": labels == null ? void 0 : labels.searchAriaLabel, "aria-controls": groupsElementId, "aria-owns": groupsElementId, onChange: handleDebouncedSearch, inputProps: {
-        autoComplete: "off"
-      } }),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup.HvFlowSidebarGroup, { id: obj[0], expandButtonProps: {
-        "aria-label": labels == null ? void 0 : labels.expandGroupButtonAriaLabel
-      }, itemProps: {
-        "aria-roledescription": labels == null ? void 0 : labels.itemAriaRoleDescription
-      }, ...obj[1] }, obj[0])) })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
+      paper: classes.drawerPaper
+    }, anchor, buttonTitle, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, { role: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title3", children: title })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.contentContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.description, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvInput, { className: classes.searchRoot, type: "search", placeholder: labels == null ? void 0 : labels.searchPlaceholder, "aria-label": labels == null ? void 0 : labels.searchAriaLabel, "aria-controls": groupsElementId, "aria-owns": groupsElementId, onChange: handleDebouncedSearch, inputProps: {
+          autoComplete: "off"
+        } }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup.HvFlowSidebarGroup, { id: obj[0], expandButtonProps: {
+          "aria-label": labels == null ? void 0 : labels.expandGroupButtonAriaLabel
+        }, itemProps: {
+          "aria-roledescription": labels == null ? void 0 : labels.itemAriaRoleDescription
+        }, ...obj[1] }, obj[0])) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+  ] });
 };
 exports.flowSidebarClasses = Sidebar_styles.staticClasses;
 exports.HvFlowSidebar = HvFlowSidebar;

package/dist/cjs/components/Flow/Sidebar/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\n\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../FlowContext\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"labels\"] = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography variant=\"title3\">{title}</HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          <ul id={groupsElementId} className={classes.groupsContainer}>\n            {Object.entries(groups).map((obj) => (\n              <HvFlowSidebarGroup\n                key={obj[0]}\n                id={obj[0]}\n                expandButtonProps={{\n                  \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                }}\n                itemProps={{\n                  \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                }}\n                {...obj[1]}\n              />\n            ))}\n          </ul>\n        </div>\n      </div>\n    </HvDrawer>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleSearch","event","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","label","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","HvDrawer","undefined","paper","drawerPaper","jsxs","titleContainer","jsx","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup"],"mappings":"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"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport {\n  DndContextProps,\n  DragOverlay,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../hooks\";\nimport { buildGroups } from \"./utils\";\nimport { HvFlowSidebarGroupItem } from \"./SidebarGroup/SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"labels\"] = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n    onDragStart: handleDragStart,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\n        anchor={anchor}\n        buttonTitle={buttonTitle}\n        {...others}\n      >\n        <div id={drawerElementId} ref={setNodeRef}>\n          <div className={classes.titleContainer}>\n            <Add role=\"none\" />\n            <HvTypography variant=\"title3\">{title}</HvTypography>\n          </div>\n          <div className={classes.contentContainer}>\n            <HvTypography className={classes.description}>\n              {description}\n            </HvTypography>\n            <HvInput\n              className={classes.searchRoot}\n              type=\"search\"\n              placeholder={labels?.searchPlaceholder}\n              aria-label={labels?.searchAriaLabel}\n              aria-controls={groupsElementId}\n              aria-owns={groupsElementId}\n              onChange={handleDebouncedSearch}\n              inputProps={{ autoComplete: \"off\" }}\n            />\n            <ul id={groupsElementId} className={classes.groupsContainer}>\n              {Object.entries(groups).map((obj) => (\n                <HvFlowSidebarGroup\n                  key={obj[0]}\n                  id={obj[0]}\n                  expandButtonProps={{\n                    \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                  }}\n                  itemProps={{\n                    \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                  }}\n                  {...obj[1]}\n                />\n              ))}\n            </ul>\n          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","draggingLabel","setDraggingLabel","undefined","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","useDndMonitor","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","jsxs","Fragment","jsx","HvDrawer","paper","drawerPaper","titleContainer","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs

@@ -6,7 +6,7 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const SidebarGroup_styles = require("./SidebarGroup.styles.cjs");
-const FlowContext = require("../../FlowContext/FlowContext.cjs");
+const useFlowContext = require("../../hooks/useFlowContext.cjs");
 const DraggableSidebarGroupItem = require("./SidebarGroupItem/DraggableSidebarGroupItem.cjs");
 const HvFlowSidebarGroup = ({
   id,
@@ -27,7 +27,7 @@ const HvFlowSidebarGroup = ({
   const {
     expandedNodeGroups,
     setExpandedNodeGroups
-  } = FlowContext.useFlowContext();
+  } = useFlowContext.useFlowContext();
   const opened = React.useMemo(() => !!(expandedNodeGroups == null ? void 0 : expandedNodeGroups.find((groupId) => groupId === id)), [expandedNodeGroups, id]);
   const handleClick = React.useCallback(() => {
     setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
@@ -43,7 +43,7 @@ const HvFlowSidebarGroup = ({
       /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: handleClick, "aria-expanded": opened, ...expandButtonProps, children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { role: "none" }) })
     ] }),
     description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }) }),
-    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem, { ...itemProps, ...obj }, obj.id)) })
+    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem, { ...itemProps, ...obj }, obj.type)) })
   ] });
 };
 exports.flowSidebarGroupClasses = SidebarGroup_styles.staticClasses;

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.cjs","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../FlowContext\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNodes = {\n  id: string;\n  label: string;\n}[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon} role=\"none\">\n            {icon}\n          </div>\n          <HvTypography variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.id}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","jsxs","borderColor","getColor","root","titleContainer","labelContainer","jsx","HvTypography","length","HvButton","Up","Down","descriptionContainer","itemsContainer","map","obj","HvFlowDraggableSidebarGroupItem"],"mappings":";;;;;;;;;;AAyCO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,oBAAAA,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,YAAe,eAAA;AAErE,QAAMC,SAASC,MAAAA,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpCP,mEAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE;AAAA,EAEjE,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACGU,2BAAA,KAAA,MAAA,EAAG,WAAWd,GAAGC,IAAI;AAAA,IAAEc,aAAaC,qBAASvB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQoB,IAAI,GACnE,UAAA;AAAA,IAACH,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQqB,gBACtB,UAAA;AAAA,MAACJ,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQsB,gBACtB,UAAA;AAAA,QAAAC,+BAAC,SAAI,WAAWvB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACCyB,2BAAA,IAAAC,eAAA,cAAA,EAAa,SAAQ,UACnB7B,UAAM8B,MAAAA,SAAS,IAAK,GAAE/B,KAAM,KAAIC,MAAM8B,MAAO,MAAK/B,OACrD;AAAA,MAAA,GACF;AAAA,MACA6B,2BAAAA,IAACG,2BACC,MAAI,MACJ,SAASb,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAUc,2BAAA,IAAAI,oBAAA,EAAG,MAAK,QAAM,mCAAOC,gBAAAA,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACC/B,8CACE,OAAI,EAAA,WAAWG,QAAQ6B,sBACtB,UAAAN,2BAAAA,IAACC,eAAAA,cAAc3B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACEc,2BAAAA,IAAA,OAAA,EAAI,WAAWvB,QAAQ8B,gBACrBnC,gBAAMoC,IAAKC,CAAAA,QACTT,+BAAAU,0BAAAA,iCAAA,EAEK/B,GAAAA,WACA8B,GAAAA,OAFCA,IAAIvC,EAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"SidebarGroup.cjs","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../hooks\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNodes = {\n  type: string;\n  label: string;\n  data?: unknown;\n}[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon} role=\"none\">\n            {icon}\n          </div>\n          <HvTypography variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","jsxs","borderColor","getColor","root","titleContainer","labelContainer","jsx","HvTypography","length","HvButton","Up","Down","descriptionContainer","itemsContainer","map","obj","HvFlowDraggableSidebarGroupItem","type"],"mappings":";;;;;;;;;;AA0CO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,oBAAAA,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe,eAAA;AAErE,QAAMC,SAASC,MAAAA,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpCP,mEAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE;AAAA,EAEjE,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACGU,2BAAA,KAAA,MAAA,EAAG,WAAWd,GAAGC,IAAI;AAAA,IAAEc,aAAaC,qBAASvB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQoB,IAAI,GACnE,UAAA;AAAA,IAACH,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQqB,gBACtB,UAAA;AAAA,MAACJ,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQsB,gBACtB,UAAA;AAAA,QAAAC,+BAAC,SAAI,WAAWvB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACCyB,2BAAA,IAAAC,eAAA,cAAA,EAAa,SAAQ,UACnB7B,UAAM8B,MAAAA,SAAS,IAAK,GAAE/B,KAAM,KAAIC,MAAM8B,MAAO,MAAK/B,OACrD;AAAA,MAAA,GACF;AAAA,MACA6B,2BAAAA,IAACG,2BACC,MAAI,MACJ,SAASb,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAUc,2BAAA,IAAAI,oBAAA,EAAG,MAAK,QAAM,mCAAOC,gBAAAA,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACC/B,8CACE,OAAI,EAAA,WAAWG,QAAQ6B,sBACtB,UAAAN,2BAAAA,IAACC,eAAAA,cAAc3B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACEc,2BAAAA,IAAA,OAAA,EAAI,WAAWvB,QAAQ8B,gBACrBnC,gBAAMoC,IAAKC,CAAAA,QACTT,+BAAAU,0BAAAA,iCAAA,EAEK/B,GAAAA,WACA8B,GAAAA,OAFCA,IAAIE,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs

@@ -1,17 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const material = require("@mui/material");
 const React = require("react");
+const material = require("@mui/material");
 const core = require("@dnd-kit/core");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const SidebarGroupItem = require("./SidebarGroupItem.cjs");
 const HvFlowDraggableSidebarGroupItem = ({
-  label,
   id,
+  label,
+  type,
+  data,
   ...others
 }) => {
   var _a, _b;
   const itemRef = React.useRef(null);
+  const elementId = uikitReactCore.useUniqueId(id, `hvFlowDraggableItem-${type}`);
   const {
     attributes,
     listeners,
@@ -19,14 +23,18 @@ const HvFlowDraggableSidebarGroupItem = ({
     isDragging,
     transform
   } = core.useDraggable({
-    id,
+    id: elementId,
     data: {
       hvFlow: {
+        // Needed to know which item is being dragged and dropped
+        type,
         // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow
         label,
         // Item position: used to position the item when dropped
         x: (_a = itemRef.current) == null ? void 0 : _a.getBoundingClientRect().x,
-        y: (_b = itemRef.current) == null ? void 0 : _b.getBoundingClientRect().y
+        y: (_b = itemRef.current) == null ? void 0 : _b.getBoundingClientRect().y,
+        // Data
+        data
       }
     }
   });

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.cjs","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useForkRef } from \"@mui/material\";\n\nimport { useRef } from \"react\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item id: the item type. */\n  id: string;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  label,\n  id,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id,\n      data: {\n        hvFlow: {\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowDraggableSidebarGroupItem","label","id","others","itemRef","useRef","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","data","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined","jsx","HvFlowSidebarGroupItem"],"mappings":";;;;;;;AAiBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,aAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,kBAAa;AAAA,IACXT;AAAAA,IACAU,MAAM;AAAA,MACJC,QAAQ;AAAA;AAAA,QAENZ;AAAAA;AAAAA,QAEAa,IAAGV,aAAQW,YAARX,mBAAiBY,wBAAwBF;AAAAA,QAC5CG,IAAGb,aAAQW,YAARX,mBAAiBY,wBAAwBC;AAAAA,MAC9C;AAAA,IACF;AAAA,EAAA,CACD;AAEGC,QAAAA,YAAYC,SAAAA,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACGC,2BAAA,IAAAC,iBAAA,wBAAA,EACC,KAAKL,WACL,OACA,OACA,YACIX,GAAAA,cACAD,YACAH,GAAAA,OACJ,CAAA;AAEN;;"}
+{"version":3,"file":"DraggableSidebarGroupItem.cjs","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item type. */\n  type: string;\n  /** Item data. */\n  data?: unknown;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id,\n  label,\n  type,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id: elementId,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type,\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n          // Data\n          data,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowDraggableSidebarGroupItem","id","label","type","data","others","itemRef","useRef","elementId","useUniqueId","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined","jsx","HvFlowSidebarGroupItem"],"mappings":";;;;;;;;AAqBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,aAAoB,IAAI;AAExC,QAAMC,YAAYC,eAAAA,YAAYR,IAAK,uBAAsBE,IAAK,EAAC;AAEzD,QAAA;AAAA,IAAEO;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,kBAAa;AAAA,IACXd,IAAIO;AAAAA,IACJJ,MAAM;AAAA,MACJY,QAAQ;AAAA;AAAA,QAENb;AAAAA;AAAAA,QAEAD;AAAAA;AAAAA,QAEAe,IAAGX,aAAQY,YAARZ,mBAAiBa,wBAAwBF;AAAAA,QAC5CG,IAAGd,aAAQY,YAARZ,mBAAiBa,wBAAwBC;AAAAA;AAAAA,QAE5ChB;AAAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEGiB,QAAAA,YAAYC,SAAAA,WAAWhB,SAASM,UAAU;AAEhD,QAAMW,QAAQT,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUG,CAAE,OAAMH,UAAUM,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACGC,2BAAA,IAAAC,iBAAA,wBAAA,EACC,KAAKL,WACL,OACA,OACA,YACIV,GAAAA,cACAD,YACAL,GAAAA,OACJ,CAAA;AAEN;;"}

package/dist/cjs/components/Flow/Sidebar/utils.cjs

@@ -4,11 +4,12 @@ const buildGroups = (nodeGroups, nodeTypes) => {
   if (nodeGroups) {
     const groups = Object.entries(nodeGroups).reduce((acc, curr) => {
       const nodes = nodeTypes ? Object.entries(nodeTypes).reduce((accN, currN) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (((_a = currN[1].meta) == null ? void 0 : _a.groupId) === curr[0]) {
           accN.push({
-            id: currN[0],
-            label: (_b = currN[1].meta) == null ? void 0 : _b.label
+            type: currN[0],
+            label: (_b = currN[1].meta) == null ? void 0 : _b.label,
+            data: (_c = currN[1].meta) == null ? void 0 : _c.data
           });
         }
         return accN;

package/dist/cjs/components/Flow/Sidebar/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { HvFlowSidebarGroupNodes } from \"./SidebarGroup\";\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"]\n): {\n  [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n  if (nodeGroups) {\n    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n      const nodes = nodeTypes\n        ? Object.entries(nodeTypes).reduce(\n            (accN: HvFlowSidebarGroupNodes, currN) => {\n              if (currN[1].meta?.groupId === curr[0]) {\n                accN.push({\n                  id: currN[0],\n                  label: currN[1].meta?.label,\n                });\n              }\n              return accN;\n            },\n            []\n          )\n        : [];\n\n      acc[curr[0]] = {\n        ...curr[1],\n        nodes,\n      };\n\n      return acc;\n    }, {});\n\n    return groups;\n  }\n\n  return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","groups","Object","entries","reduce","acc","curr","nodes","accN","currN","meta","groupId","push","id","label"],"mappings":";;AAIaA,MAAAA,cAAcA,CACzBC,YACAC,cAGG;AACH,MAAID,YAAY;AACRE,UAAAA,SAASC,OAAOC,QAAQJ,UAAU,EAAEK,OAAO,CAACC,KAAKC,SAAS;AACxDC,YAAAA,QAAQP,YACVE,OAAOC,QAAQH,SAAS,EAAEI,OACxB,CAACI,MAA+BC,UAAU;;AACxC,cAAIA,WAAM,CAAC,EAAEC,SAATD,mBAAeE,aAAYL,KAAK,CAAC,GAAG;AACtCE,eAAKI,KAAK;AAAA,YACRC,IAAIJ,MAAM,CAAC;AAAA,YACXK,QAAOL,WAAM,CAAC,EAAEC,SAATD,mBAAeK;AAAAA,UAAAA,CACvB;AAAA,QACH;AACON,eAAAA;AAAAA,MAAAA,GAET,CAAA,CACF,IACA;AAEAF,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,QACTC;AAAAA,MAAAA;AAGKF,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { HvFlowSidebarGroupNodes } from \"./SidebarGroup\";\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"]\n): {\n  [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n  if (nodeGroups) {\n    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n      const nodes = nodeTypes\n        ? Object.entries(nodeTypes).reduce(\n            (accN: HvFlowSidebarGroupNodes, currN) => {\n              if (currN[1].meta?.groupId === curr[0]) {\n                accN.push({\n                  type: currN[0],\n                  label: currN[1].meta?.label,\n                  data: currN[1].meta?.data,\n                });\n              }\n              return accN;\n            },\n            []\n          )\n        : [];\n\n      acc[curr[0]] = {\n        ...curr[1],\n        nodes,\n      };\n\n      return acc;\n    }, {});\n\n    return groups;\n  }\n\n  return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","groups","Object","entries","reduce","acc","curr","nodes","accN","currN","meta","groupId","push","type","label","data"],"mappings":";;AAIaA,MAAAA,cAAcA,CACzBC,YACAC,cAGG;AACH,MAAID,YAAY;AACRE,UAAAA,SAASC,OAAOC,QAAQJ,UAAU,EAAEK,OAAO,CAACC,KAAKC,SAAS;AACxDC,YAAAA,QAAQP,YACVE,OAAOC,QAAQH,SAAS,EAAEI,OACxB,CAACI,MAA+BC,UAAU;;AACxC,cAAIA,WAAM,CAAC,EAAEC,SAATD,mBAAeE,aAAYL,KAAK,CAAC,GAAG;AACtCE,eAAKI,KAAK;AAAA,YACRC,MAAMJ,MAAM,CAAC;AAAA,YACbK,QAAOL,WAAM,CAAC,EAAEC,SAATD,mBAAeK;AAAAA,YACtBC,OAAMN,WAAM,CAAC,EAAEC,SAATD,mBAAeM;AAAAA,UAAAA,CACtB;AAAA,QACH;AACOP,eAAAA;AAAAA,MAAAA,GAET,CAAA,CACF,IACA;AAEAF,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,QACTC;AAAAA,MAAAA;AAGKF,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;;"}

package/dist/cjs/components/Flow/base.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const flowStyles = process.env.NODE_ENV === "production" ? {
+  name: "136w4yv",
+  styles: ".react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0;}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab;}.react-flow__pane.selection{cursor:pointer;}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing;}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none;}.react-flow__renderer{z-index:4;}.react-flow__selection{z-index:6;}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none;}.react-flow .react-flow__edges{pointer-events:none;overflow:visible;}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none;}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer;}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw 0.5s linear infinite;animation:dashdraw 0.5s linear infinite;}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none;}.react-flow__edge.inactive{pointer-events:none;}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none;}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555;}.react-flow__edge-textwrapper{pointer-events:all;}.react-flow__edge-textbg{fill:white;}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}.react-flow__connection{pointer-events:none;}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw 0.5s linear infinite;animation:dashdraw 0.5s linear infinite;}.react-flow__connectionline{z-index:1001;}.react-flow__nodes{pointer-events:none;transform-origin:0 0;}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab;}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing;}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none;}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab;}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%;}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair;}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%, 0);}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%, 0);}.react-flow__handle-left{top:50%;left:-4px;transform:translate(0, -50%);}.react-flow__handle-right{right:-4px;top:50%;transform:translate(0, -50%);}.react-flow__edgeupdater{cursor:move;pointer-events:all;}.react-flow__panel{position:absolute;z-index:5;margin:15px;}.react-flow__panel.top{top:0;}.react-flow__panel.bottom{bottom:0;}.react-flow__panel.left{left:0;}.react-flow__panel.right{right:0;}.react-flow__panel.center{left:50%;transform:translateX(-50%);}.react-flow__attribution{font-size:10px;background:rgba(255, 255, 255, 0.5);padding:2px 3px;margin:0;}.react-flow__attribution a{text-decoration:none;color:#999;}@-webkit-keyframes dashdraw{from{stroke-dashoffset:10;}}@keyframes dashdraw{from{stroke-dashoffset:10;}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}.react-flow__edge.updating .react-flow__edge-path{stroke:#777;}.react-flow__edge-text{font-size:10px;}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none;}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:white;}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px rgba(0, 0, 0, 0.08);}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 0.5px #1a192b;}.react-flow__node-group{background-color:rgba(240, 240, 240, 0.25);}.react-flow__nodesselection-rect,.react-flow__selection{background:rgba(0, 89, 220, 0.08);border:1px dotted rgba(0, 89, 220, 0.8);}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none;}.react-flow__controls{box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.08);}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px;}.react-flow__controls-button:hover{background:#f4f4f4;}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;}.react-flow__controls-button:disabled{pointer-events:none;}.react-flow__controls-button:disabled svg{fill-opacity:0.4;}.react-flow__minimap{background-color:#fff;}.react-flow__resize-control{position:absolute;}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize;}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize;}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize;}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize;}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%, -50%);}.react-flow__resize-control.handle.left{left:0;top:50%;}.react-flow__resize-control.handle.right{left:100%;top:50%;}.react-flow__resize-control.handle.top{left:50%;top:0;}.react-flow__resize-control.handle.bottom{left:50%;top:100%;}.react-flow__resize-control.handle.top.left{left:0;}.react-flow__resize-control.handle.bottom.left{left:0;}.react-flow__resize-control.handle.top.right{left:100%;}.react-flow__resize-control.handle.bottom.right{left:100%;}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid;}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%, 0);top:0;height:100%;}.react-flow__resize-control.line.left{left:0;border-left-width:1px;}.react-flow__resize-control.line.right{left:100%;border-right-width:1px;}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translate(0, -50%);left:0;width:100%;}.react-flow__resize-control.line.top{top:0;border-top-width:1px;}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%;}"
+} : {
+  name: "hv0xjo-flowStyles",
+  styles: ".react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0;}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab;}.react-flow__pane.selection{cursor:pointer;}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing;}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none;}.react-flow__renderer{z-index:4;}.react-flow__selection{z-index:6;}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none;}.react-flow .react-flow__edges{pointer-events:none;overflow:visible;}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none;}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer;}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw 0.5s linear infinite;animation:dashdraw 0.5s linear infinite;}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none;}.react-flow__edge.inactive{pointer-events:none;}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none;}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555;}.react-flow__edge-textwrapper{pointer-events:all;}.react-flow__edge-textbg{fill:white;}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}.react-flow__connection{pointer-events:none;}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw 0.5s linear infinite;animation:dashdraw 0.5s linear infinite;}.react-flow__connectionline{z-index:1001;}.react-flow__nodes{pointer-events:none;transform-origin:0 0;}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab;}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing;}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none;}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab;}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%;}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair;}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%, 0);}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%, 0);}.react-flow__handle-left{top:50%;left:-4px;transform:translate(0, -50%);}.react-flow__handle-right{right:-4px;top:50%;transform:translate(0, -50%);}.react-flow__edgeupdater{cursor:move;pointer-events:all;}.react-flow__panel{position:absolute;z-index:5;margin:15px;}.react-flow__panel.top{top:0;}.react-flow__panel.bottom{bottom:0;}.react-flow__panel.left{left:0;}.react-flow__panel.right{right:0;}.react-flow__panel.center{left:50%;transform:translateX(-50%);}.react-flow__attribution{font-size:10px;background:rgba(255, 255, 255, 0.5);padding:2px 3px;margin:0;}.react-flow__attribution a{text-decoration:none;color:#999;}@-webkit-keyframes dashdraw{from{stroke-dashoffset:10;}}@keyframes dashdraw{from{stroke-dashoffset:10;}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}.react-flow__edge.updating .react-flow__edge-path{stroke:#777;}.react-flow__edge-text{font-size:10px;}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none;}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:white;}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px rgba(0, 0, 0, 0.08);}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 0.5px #1a192b;}.react-flow__node-group{background-color:rgba(240, 240, 240, 0.25);}.react-flow__nodesselection-rect,.react-flow__selection{background:rgba(0, 89, 220, 0.08);border:1px dotted rgba(0, 89, 220, 0.8);}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none;}.react-flow__controls{box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.08);}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px;}.react-flow__controls-button:hover{background:#f4f4f4;}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;}.react-flow__controls-button:disabled{pointer-events:none;}.react-flow__controls-button:disabled svg{fill-opacity:0.4;}.react-flow__minimap{background-color:#fff;}.react-flow__resize-control{position:absolute;}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize;}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize;}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize;}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize;}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%, -50%);}.react-flow__resize-control.handle.left{left:0;top:50%;}.react-flow__resize-control.handle.right{left:100%;top:50%;}.react-flow__resize-control.handle.top{left:50%;top:0;}.react-flow__resize-control.handle.bottom{left:50%;top:100%;}.react-flow__resize-control.handle.top.left{left:0;}.react-flow__resize-control.handle.bottom.left{left:0;}.react-flow__resize-control.handle.top.right{left:100%;}.react-flow__resize-control.handle.bottom.right{left:100%;}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid;}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%, 0);top:0;height:100%;}.react-flow__resize-control.line.left{left:0;border-left-width:1px;}.react-flow__resize-control.line.right{left:100%;border-right-width:1px;}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translate(0, -50%);left:0;width:100%;}.react-flow__resize-control.line.top{top:0;border-top-width:1px;}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%;};label:flowStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9GbG93L2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRTZCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9GbG93L2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcblxuZXhwb3J0IGNvbnN0IGZsb3dTdHlsZXMgPSBjc3NgXG4gIC8qIHRoaXMgZ2V0cyBleHBvcnRlZCBhcyBzdHlsZS5jc3MgYW5kIGNhbiBiZSB1c2VkIGZvciB0aGUgZGVmYXVsdCB0aGVtaW5nICovXG4gIC8qIHRoZXNlIGFyZSB0aGUgbmVjZXNzYXJ5IHN0eWxlcyBmb3IgUmVhY3QgRmxvdywgdGhleSBnZXQgdXNlZCBieSBiYXNlLmNzcyBhbmQgc3R5bGUuY3NzICovXG4gIC5yZWFjdC1mbG93X19jb250YWluZXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX3BhbmUge1xuICAgIHotaW5kZXg6IDE7XG4gICAgY3Vyc29yOiAtd2Via2l0LWdyYWI7XG4gICAgY3Vyc29yOiBncmFiO1xuICB9XG4gIC5yZWFjdC1mbG93X19wYW5lLnNlbGVjdGlvbiB7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG4gIC5yZWFjdC1mbG93X19wYW5lLmRyYWdnaW5nIHtcbiAgICBjdXJzb3I6IC13ZWJraXQtZ3JhYmJpbmc7XG4gICAgY3Vyc29yOiBncmFiYmluZztcbiAgfVxuICAucmVhY3QtZmxvd19fdmlld3BvcnQge1xuICAgIHRyYW5zZm9ybS1vcmlnaW46IDAgMDtcbiAgICB6LWluZGV4OiAyO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG4gIC5yZWFjdC1mbG93X19yZW5kZXJlciB7XG4gICAgei1pbmRleDogNDtcbiAgfVxuICAucmVhY3QtZmxvd19fc2VsZWN0aW9uIHtcbiAgICB6LWluZGV4OiA2O1xuICB9XG4gIC5yZWFjdC1mbG93X19ub2Rlc3NlbGVjdGlvbi1yZWN0OmZvY3VzLFxuICAucmVhY3QtZmxvd19fbm9kZXNzZWxlY3Rpb24tcmVjdDpmb2N1cy12aXNpYmxlIHtcbiAgICBvdXRsaW5lOiBub25lO1xuICB9XG4gIC5yZWFjdC1mbG93IC5yZWFjdC1mbG93X19lZGdlcyB7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgb3ZlcmZsb3c6IHZpc2libGU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2UtcGF0aCxcbiAgLnJlYWN0LWZsb3dfX2Nvbm5lY3Rpb24tcGF0aCB7XG4gICAgc3Ryb2tlOiAjYjFiMWI3O1xuICAgIHN0cm9rZS13aWR0aDogMTtcbiAgICBmaWxsOiBub25lO1xuICB9XG4gIC5yZWFjdC1mbG93X19lZGdlIHtcbiAgICBwb2ludGVyLWV2ZW50czogdmlzaWJsZVN0cm9rZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2UuYW5pbWF0ZWQgcGF0aCB7XG4gICAgc3Ryb2tlLWRhc2hhcnJheTogNTtcbiAgICAtd2Via2l0LWFuaW1hdGlvbjogZGFzaGRyYXcgMC41cyBsaW5lYXIgaW5maW5pdGU7XG4gICAgYW5pbWF0aW9uOiBkYXNoZHJhdyAwLjVzIGxpbmVhciBpbmZpbml0ZTtcbiAgfVxuICAucmVhY3QtZmxvd19fZWRnZS5hbmltYXRlZCBwYXRoLnJlYWN0LWZsb3dfX2VkZ2UtaW50ZXJhY3Rpb24ge1xuICAgIHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7XG4gICAgLXdlYmtpdC1hbmltYXRpb246IG5vbmU7XG4gICAgYW5pbWF0aW9uOiBub25lO1xuICB9XG4gIC5yZWFjdC1mbG93X19lZGdlLmluYWN0aXZlIHtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuICAucmVhY3QtZmxvd19fZWRnZS5zZWxlY3RlZCxcbiAgLnJlYWN0LWZsb3dfX2VkZ2U6Zm9jdXMsXG4gIC5yZWFjdC1mbG93X19lZGdlOmZvY3VzLXZpc2libGUge1xuICAgIG91dGxpbmU6IG5vbmU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2Uuc2VsZWN0ZWQgLnJlYWN0LWZsb3dfX2VkZ2UtcGF0aCxcbiAgLnJlYWN0LWZsb3dfX2VkZ2U6Zm9jdXMgLnJlYWN0LWZsb3dfX2VkZ2UtcGF0aCxcbiAgLnJlYWN0LWZsb3dfX2VkZ2U6Zm9jdXMtdmlzaWJsZSAucmVhY3QtZmxvd19fZWRnZS1wYXRoIHtcbiAgICBzdHJva2U6ICM1NTU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2UtdGV4dHdyYXBwZXIge1xuICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2UtdGV4dGJnIHtcbiAgICBmaWxsOiB3aGl0ZTtcbiAgfVxuICAucmVhY3QtZmxvd19fZWRnZSAucmVhY3QtZmxvd19fZWRnZS10ZXh0IHtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICAgIC1tb3otdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2Nvbm5lY3Rpb24ge1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG4gIC5yZWFjdC1mbG93X19jb25uZWN0aW9uIC5hbmltYXRlZCB7XG4gICAgc3Ryb2tlLWRhc2hhcnJheTogNTtcbiAgICAtd2Via2l0LWFuaW1hdGlvbjogZGFzaGRyYXcgMC41cyBsaW5lYXIgaW5maW5pdGU7XG4gICAgYW5pbWF0aW9uOiBkYXNoZHJhdyAwLjVzIGxpbmVhciBpbmZpbml0ZTtcbiAgfVxuICAucmVhY3QtZmxvd19fY29ubmVjdGlvbmxpbmUge1xuICAgIHotaW5kZXg6IDEwMDE7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX25vZGVzIHtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB0cmFuc2Zvcm0tb3JpZ2luOiAwIDA7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX25vZGUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICAgIC1tb3otdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgcG9pbnRlci1ldmVudHM6IGFsbDtcbiAgICB0cmFuc2Zvcm0tb3JpZ2luOiAwIDA7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjdXJzb3I6IC13ZWJraXQtZ3JhYjtcbiAgICBjdXJzb3I6IGdyYWI7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX25vZGUuZHJhZ2dpbmcge1xuICAgIGN1cnNvcjogLXdlYmtpdC1ncmFiYmluZztcbiAgICBjdXJzb3I6IGdyYWJiaW5nO1xuICB9XG4gIC5yZWFjdC1mbG93X19ub2Rlc3NlbGVjdGlvbiB7XG4gICAgei1pbmRleDogMztcbiAgICB0cmFuc2Zvcm0tb3JpZ2luOiBsZWZ0IHRvcDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuICAucmVhY3QtZmxvd19fbm9kZXNzZWxlY3Rpb24tcmVjdCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gICAgY3Vyc29yOiAtd2Via2l0LWdyYWI7XG4gICAgY3Vyc29yOiBncmFiO1xuICB9XG4gIC5yZWFjdC1mbG93X19oYW5kbGUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICBtaW4td2lkdGg6IDVweDtcbiAgICBtaW4taGVpZ2h0OiA1cHg7XG4gICAgd2lkdGg6IDZweDtcbiAgICBoZWlnaHQ6IDZweDtcbiAgICBiYWNrZ3JvdW5kOiAjMWExOTJiO1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHdoaXRlO1xuICAgIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2hhbmRsZS5jb25uZWN0aW9uaW5kaWNhdG9yIHtcbiAgICBwb2ludGVyLWV2ZW50czogYWxsO1xuICAgIGN1cnNvcjogY3Jvc3NoYWlyO1xuICB9XG4gIC5yZWFjdC1mbG93X19oYW5kbGUtYm90dG9tIHtcbiAgICB0b3A6IGF1dG87XG4gICAgbGVmdDogNTAlO1xuICAgIGJvdHRvbTogLTRweDtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAwKTtcbiAgfVxuICAucmVhY3QtZmxvd19faGFuZGxlLXRvcCB7XG4gICAgbGVmdDogNTAlO1xuICAgIHRvcDogLTRweDtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAwKTtcbiAgfVxuICAucmVhY3QtZmxvd19faGFuZGxlLWxlZnQge1xuICAgIHRvcDogNTAlO1xuICAgIGxlZnQ6IC00cHg7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgLTUwJSk7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2hhbmRsZS1yaWdodCB7XG4gICAgcmlnaHQ6IC00cHg7XG4gICAgdG9wOiA1MCU7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgLTUwJSk7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2V1cGRhdGVyIHtcbiAgICBjdXJzb3I6IG1vdmU7XG4gICAgcG9pbnRlci1ldmVudHM6IGFsbDtcbiAgfVxuICAucmVhY3QtZmxvd19fcGFuZWwge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB6LWluZGV4OiA1O1xuICAgIG1hcmdpbjogMTVweDtcbiAgfVxuICAucmVhY3QtZmxvd19fcGFuZWwudG9wIHtcbiAgICB0b3A6IDA7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX3BhbmVsLmJvdHRvbSB7XG4gICAgYm90dG9tOiAwO1xuICB9XG4gIC5yZWFjdC1mbG93X19wYW5lbC5sZWZ0IHtcbiAgICBsZWZ0OiAwO1xuICB9XG4gIC5yZWFjdC1mbG93X19wYW5lbC5yaWdodCB7XG4gICAgcmlnaHQ6IDA7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX3BhbmVsLmNlbnRlciB7XG4gICAgbGVmdDogNTAlO1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtNTAlKTtcbiAgfVxuICAucmVhY3QtZmxvd19fYXR0cmlidXRpb24ge1xuICAgIGZvbnQtc2l6ZTogMTBweDtcbiAgICBiYWNrZ3JvdW5kOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSk7XG4gICAgcGFkZGluZzogMnB4IDNweDtcbiAgICBtYXJnaW46IDA7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2F0dHJpYnV0aW9uIGEge1xuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICBjb2xvcjogIzk5OTtcbiAgfVxuICBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaGRyYXcge1xuICAgIGZyb20ge1xuICAgICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDEwO1xuICAgIH1cbiAgfVxuICBAa2V5ZnJhbWVzIGRhc2hkcmF3IHtcbiAgICBmcm9tIHtcbiAgICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAxMDtcbiAgICB9XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2VsYWJlbC1yZW5kZXJlciB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICAgIC1tb3otdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2VkZ2UudXBkYXRpbmcgLnJlYWN0LWZsb3dfX2VkZ2UtcGF0aCB7XG4gICAgc3Ryb2tlOiAjNzc3O1xuICB9XG4gIC5yZWFjdC1mbG93X19lZGdlLXRleHQge1xuICAgIGZvbnQtc2l6ZTogMTBweDtcbiAgfVxuICAucmVhY3QtZmxvd19fbm9kZS5zZWxlY3RhYmxlOmZvY3VzLFxuICAucmVhY3QtZmxvd19fbm9kZS5zZWxlY3RhYmxlOmZvY3VzLXZpc2libGUge1xuICAgIG91dGxpbmU6IG5vbmU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX25vZGUtZGVmYXVsdCxcbiAgLnJlYWN0LWZsb3dfX25vZGUtaW5wdXQsXG4gIC5yZWFjdC1mbG93X19ub2RlLW91dHB1dCxcbiAgLnJlYWN0LWZsb3dfX25vZGUtZ3JvdXAge1xuICAgIHBhZGRpbmc6IDEwcHg7XG4gICAgYm9yZGVyLXJhZGl1czogM3B4O1xuICAgIHdpZHRoOiAxNTBweDtcbiAgICBmb250LXNpemU6IDEycHg7XG4gICAgY29sb3I6ICMyMjI7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgIGJvcmRlci13aWR0aDogMXB4O1xuICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgYm9yZGVyLWNvbG9yOiAjMWExOTJiO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICB9XG4gIC5yZWFjdC1mbG93X19ub2RlLWRlZmF1bHQuc2VsZWN0YWJsZTpob3ZlcixcbiAgLnJlYWN0LWZsb3dfX25vZGUtaW5wdXQuc2VsZWN0YWJsZTpob3ZlcixcbiAgLnJlYWN0LWZsb3dfX25vZGUtb3V0cHV0LnNlbGVjdGFibGU6aG92ZXIsXG4gIC5yZWFjdC1mbG93X19ub2RlLWdyb3VwLnNlbGVjdGFibGU6aG92ZXIge1xuICAgIGJveC1zaGFkb3c6IDAgMXB4IDRweCAxcHggcmdiYSgwLCAwLCAwLCAwLjA4KTtcbiAgfVxuICAucmVhY3QtZmxvd19fbm9kZS1kZWZhdWx0LnNlbGVjdGFibGUuc2VsZWN0ZWQsXG4gIC5yZWFjdC1mbG93X19ub2RlLWRlZmF1bHQuc2VsZWN0YWJsZTpmb2N1cyxcbiAgLnJlYWN0LWZsb3dfX25vZGUtZGVmYXVsdC5zZWxlY3RhYmxlOmZvY3VzLXZpc2libGUsXG4gIC5yZWFjdC1mbG93X19ub2RlLWlucHV0LnNlbGVjdGFibGUuc2VsZWN0ZWQsXG4gIC5yZWFjdC1mbG93X19ub2RlLWlucHV0LnNlbGVjdGFibGU6Zm9jdXMsXG4gIC5yZWFjdC1mbG93X19ub2RlLWlucHV0LnNlbGVjdGFibGU6Zm9jdXMtdmlzaWJsZSxcbiAgLnJlYWN0LWZsb3dfX25vZGUtb3V0cHV0LnNlbGVjdGFibGUuc2VsZWN0ZWQsXG4gIC5yZWFjdC1mbG93X19ub2RlLW91dHB1dC5zZWxlY3RhYmxlOmZvY3VzLFxuICAucmVhY3QtZmxvd19fbm9kZS1vdXRwdXQuc2VsZWN0YWJsZTpmb2N1cy12aXNpYmxlLFxuICAucmVhY3QtZmxvd19fbm9kZS1ncm91cC5zZWxlY3RhYmxlLnNlbGVjdGVkLFxuICAucmVhY3QtZmxvd19fbm9kZS1ncm91cC5zZWxlY3RhYmxlOmZvY3VzLFxuICAucmVhY3QtZmxvd19fbm9kZS1ncm91cC5zZWxlY3RhYmxlOmZvY3VzLXZpc2libGUge1xuICAgIGJveC1zaGFkb3c6IDAgMCAwIDAuNXB4ICMxYTE5MmI7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX25vZGUtZ3JvdXAge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjQwLCAyNDAsIDI0MCwgMC4yNSk7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX25vZGVzc2VsZWN0aW9uLXJlY3QsXG4gIC5yZWFjdC1mbG93X19zZWxlY3Rpb24ge1xuICAgIGJhY2tncm91bmQ6IHJnYmEoMCwgODksIDIyMCwgMC4wOCk7XG4gICAgYm9yZGVyOiAxcHggZG90dGVkIHJnYmEoMCwgODksIDIyMCwgMC44KTtcbiAgfVxuICAucmVhY3QtZmxvd19fbm9kZXNzZWxlY3Rpb24tcmVjdDpmb2N1cyxcbiAgLnJlYWN0LWZsb3dfX25vZGVzc2VsZWN0aW9uLXJlY3Q6Zm9jdXMtdmlzaWJsZSxcbiAgLnJlYWN0LWZsb3dfX3NlbGVjdGlvbjpmb2N1cyxcbiAgLnJlYWN0LWZsb3dfX3NlbGVjdGlvbjpmb2N1cy12aXNpYmxlIHtcbiAgICBvdXRsaW5lOiBub25lO1xuICB9XG4gIC5yZWFjdC1mbG93X19jb250cm9scyB7XG4gICAgYm94LXNoYWRvdzogMCAwIDJweCAxcHggcmdiYSgwLCAwLCAwLCAwLjA4KTtcbiAgfVxuICAucmVhY3QtZmxvd19fY29udHJvbHMtYnV0dG9uIHtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogI2ZlZmVmZTtcbiAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2VlZTtcbiAgICBib3gtc2l6aW5nOiBjb250ZW50LWJveDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgd2lkdGg6IDE2cHg7XG4gICAgaGVpZ2h0OiAxNnB4O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICAgIC1tb3otdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgcGFkZGluZzogNXB4O1xuICB9XG4gIC5yZWFjdC1mbG93X19jb250cm9scy1idXR0b246aG92ZXIge1xuICAgIGJhY2tncm91bmQ6ICNmNGY0ZjQ7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX2NvbnRyb2xzLWJ1dHRvbiBzdmcge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTJweDtcbiAgICBtYXgtaGVpZ2h0OiAxMnB4O1xuICB9XG4gIC5yZWFjdC1mbG93X19jb250cm9scy1idXR0b246ZGlzYWJsZWQge1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG4gIC5yZWFjdC1mbG93X19jb250cm9scy1idXR0b246ZGlzYWJsZWQgc3ZnIHtcbiAgICBmaWxsLW9wYWNpdHk6IDAuNDtcbiAgfVxuICAucmVhY3QtZmxvd19fbWluaW1hcCB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wubGVmdCxcbiAgLnJlYWN0LWZsb3dfX3Jlc2l6ZS1jb250cm9sLnJpZ2h0IHtcbiAgICBjdXJzb3I6IGV3LXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wudG9wLFxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wuYm90dG9tIHtcbiAgICBjdXJzb3I6IG5zLXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wudG9wLmxlZnQsXG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5ib3R0b20ucmlnaHQge1xuICAgIGN1cnNvcjogbndzZS1yZXNpemU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX3Jlc2l6ZS1jb250cm9sLmJvdHRvbS5sZWZ0LFxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wudG9wLnJpZ2h0IHtcbiAgICBjdXJzb3I6IG5lc3ctcmVzaXplO1xuICB9XG4gIC8qIGhhbmRsZSBzdHlsZXMgKi9cbiAgLnJlYWN0LWZsb3dfX3Jlc2l6ZS1jb250cm9sLmhhbmRsZSB7XG4gICAgd2lkdGg6IDRweDtcbiAgICBoZWlnaHQ6IDRweDtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAjZmZmO1xuICAgIGJvcmRlci1yYWRpdXM6IDFweDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzM2N2Q5O1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpO1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5oYW5kbGUubGVmdCB7XG4gICAgbGVmdDogMDtcbiAgICB0b3A6IDUwJTtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wuaGFuZGxlLnJpZ2h0IHtcbiAgICBsZWZ0OiAxMDAlO1xuICAgIHRvcDogNTAlO1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5oYW5kbGUudG9wIHtcbiAgICBsZWZ0OiA1MCU7XG4gICAgdG9wOiAwO1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5oYW5kbGUuYm90dG9tIHtcbiAgICBsZWZ0OiA1MCU7XG4gICAgdG9wOiAxMDAlO1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5oYW5kbGUudG9wLmxlZnQge1xuICAgIGxlZnQ6IDA7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX3Jlc2l6ZS1jb250cm9sLmhhbmRsZS5ib3R0b20ubGVmdCB7XG4gICAgbGVmdDogMDtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wuaGFuZGxlLnRvcC5yaWdodCB7XG4gICAgbGVmdDogMTAwJTtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wuaGFuZGxlLmJvdHRvbS5yaWdodCB7XG4gICAgbGVmdDogMTAwJTtcbiAgfVxuICAvKiBsaW5lIHN0eWxlcyAqL1xuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wubGluZSB7XG4gICAgYm9yZGVyLWNvbG9yOiAjMzM2N2Q5O1xuICAgIGJvcmRlci13aWR0aDogMDtcbiAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5saW5lLmxlZnQsXG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5saW5lLnJpZ2h0IHtcbiAgICB3aWR0aDogMXB4O1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIDApO1xuICAgIHRvcDogMDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gIH1cbiAgLnJlYWN0LWZsb3dfX3Jlc2l6ZS1jb250cm9sLmxpbmUubGVmdCB7XG4gICAgbGVmdDogMDtcbiAgICBib3JkZXItbGVmdC13aWR0aDogMXB4O1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5saW5lLnJpZ2h0IHtcbiAgICBsZWZ0OiAxMDAlO1xuICAgIGJvcmRlci1yaWdodC13aWR0aDogMXB4O1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5saW5lLnRvcCxcbiAgLnJlYWN0LWZsb3dfX3Jlc2l6ZS1jb250cm9sLmxpbmUuYm90dG9tIHtcbiAgICBoZWlnaHQ6IDFweDtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLCAtNTAlKTtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG4gIC5yZWFjdC1mbG93X19yZXNpemUtY29udHJvbC5saW5lLnRvcCB7XG4gICAgdG9wOiAwO1xuICAgIGJvcmRlci10b3Atd2lkdGg6IDFweDtcbiAgfVxuICAucmVhY3QtZmxvd19fcmVzaXplLWNvbnRyb2wubGluZS5ib3R0b20ge1xuICAgIGJvcmRlci1ib3R0b20td2lkdGg6IDFweDtcbiAgICB0b3A6IDEwMCU7XG4gIH1cbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+exports.flowStyles = flowStyles;
+//# sourceMappingURL=base.cjs.map

package/dist/cjs/components/Flow/base.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.cjs","sources":["../../../../src/components/Flow/base.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\n\nexport const flowStyles = css`\n  /* this gets exported as style.css and can be used for the default theming */\n  /* these are the necessary styles for React Flow, they get used by base.css and style.css */\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    cursor: -webkit-grab;\n    cursor: grab;\n  }\n  .react-flow__pane.selection {\n    cursor: pointer;\n  }\n  .react-flow__pane.dragging {\n    cursor: -webkit-grabbing;\n    cursor: grabbing;\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 .react-flow__edges {\n    pointer-events: none;\n    overflow: visible;\n  }\n  .react-flow__edge-path,\n  .react-flow__connection-path {\n    stroke: #b1b1b7;\n    stroke-width: 1;\n    fill: none;\n  }\n  .react-flow__edge {\n    pointer-events: visibleStroke;\n    cursor: pointer;\n  }\n  .react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    -webkit-animation: dashdraw 0.5s linear infinite;\n    animation: dashdraw 0.5s linear infinite;\n  }\n  .react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    -webkit-animation: 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:focus .react-flow__edge-path,\n  .react-flow__edge:focus-visible .react-flow__edge-path {\n    stroke: #555;\n  }\n  .react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n  .react-flow__edge-textbg {\n    fill: white;\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    -webkit-animation: dashdraw 0.5s linear infinite;\n    animation: dashdraw 0.5s linear infinite;\n  }\n  .react-flow__connectionline {\n    z-index: 1001;\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: -webkit-grab;\n    cursor: grab;\n  }\n  .react-flow__node.dragging {\n    cursor: -webkit-grabbing;\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: -webkit-grab;\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: #1a192b;\n    border: 1px solid white;\n    border-radius: 100%;\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: -4px;\n    transform: translate(-50%, 0);\n  }\n  .react-flow__handle-top {\n    left: 50%;\n    top: -4px;\n    transform: translate(-50%, 0);\n  }\n  .react-flow__handle-left {\n    top: 50%;\n    left: -4px;\n    transform: translate(0, -50%);\n  }\n  .react-flow__handle-right {\n    right: -4px;\n    top: 50%;\n    transform: translate(0, -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.left {\n    left: 0;\n  }\n  .react-flow__panel.right {\n    right: 0;\n  }\n  .react-flow__panel.center {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  .react-flow__attribution {\n    font-size: 10px;\n    background: rgba(255, 255, 255, 0.5);\n    padding: 2px 3px;\n    margin: 0;\n  }\n  .react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n  @-webkit-keyframes dashdraw {\n    from {\n      stroke-dashoffset: 10;\n    }\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  }\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-default,\n  .react-flow__node-input,\n  .react-flow__node-output,\n  .react-flow__node-group {\n    padding: 10px;\n    border-radius: 3px;\n    width: 150px;\n    font-size: 12px;\n    color: #222;\n    text-align: center;\n    border-width: 1px;\n    border-style: solid;\n    border-color: #1a192b;\n    background-color: white;\n  }\n  .react-flow__node-default.selectable:hover,\n  .react-flow__node-input.selectable:hover,\n  .react-flow__node-output.selectable:hover,\n  .react-flow__node-group.selectable:hover {\n    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  }\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-input.selectable.selected,\n  .react-flow__node-input.selectable:focus,\n  .react-flow__node-input.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: 0 0 0 0.5px #1a192b;\n  }\n  .react-flow__node-group {\n    background-color: rgba(240, 240, 240, 0.25);\n  }\n  .react-flow__nodesselection-rect,\n  .react-flow__selection {\n    background: rgba(0, 89, 220, 0.08);\n    border: 1px dotted rgba(0, 89, 220, 0.8);\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 {\n    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n  }\n  .react-flow__controls-button {\n    border: none;\n    background: #fefefe;\n    border-bottom: 1px solid #eee;\n    box-sizing: content-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n    padding: 5px;\n  }\n  .react-flow__controls-button:hover {\n    background: #f4f4f4;\n  }\n  .react-flow__controls-button svg {\n    width: 100%;\n    max-width: 12px;\n    max-height: 12px;\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__minimap {\n    background-color: #fff;\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: 4px;\n    height: 4px;\n    border: 1px solid #fff;\n    border-radius: 1px;\n    background-color: #3367d9;\n    transform: 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: #3367d9;\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`;\n"],"names":["flowStyles","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;AAEO,MAAMA,aAAUC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA;;"}

package/dist/cjs/components/Flow/hooks/useFlowContext.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const FlowContext = require("../FlowContext/FlowContext.cjs");
+const useFlowContext = () => React.useContext(FlowContext.HvFlowContext);
+exports.useFlowContext = useFlowContext;
+//# sourceMappingURL=useFlowContext.cjs.map

package/dist/cjs/components/Flow/hooks/useFlowContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowContext.cjs","sources":["../../../../../src/components/Flow/hooks/useFlowContext.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvFlowContext } from \"../FlowContext\";\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["useFlowContext","useContext","HvFlowContext"],"mappings":";;;;AAIaA,MAAAA,iBAAiBA,MAAMC,MAAAA,WAAWC,YAAa,aAAA;;"}

package/dist/cjs/components/Flow/hooks/useFlowNode.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ReactFlow = require("reactflow");
+const useFlowNode = (id) => {
+  const nodes = ReactFlow.useStore((state) => state.getNodes());
+  const edges = ReactFlow.useStore((state) => state.edges);
+  return {
+    // self node
+    get node() {
+      const self = nodes.find((n) => n.id === id);
+      return self;
+    },
+    // parent nodes
+    get parentNodes() {
+      const connectedEdges = edges.filter((e) => e.target === id);
+      const parentNodeArray = connectedEdges.map((e) => {
+        const parentNode = nodes.find((n) => n.id === e.source);
+        return parentNode;
+      });
+      return parentNodeArray;
+    }
+  };
+};
+exports.useFlowNode = useFlowNode;
+//# sourceMappingURL=useFlowNode.cjs.map

package/dist/cjs/components/Flow/hooks/useFlowNode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowNode.cjs","sources":["../../../../../src/components/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { Edge, Node, useStore } from \"reactflow\";\n\nexport const useFlowNode = (id: string) => {\n  const nodes = useStore((state) => state.getNodes());\n  const edges = useStore((state) => state.edges);\n\n  return {\n    // self node\n    get node() {\n      const self = nodes.find((n: Node) => n.id === id);\n      return self;\n    },\n\n    // parent nodes\n    get parentNodes() {\n      const connectedEdges = edges.filter((e: Edge) => e.target === id);\n      const parentNodeArray = connectedEdges.map((e) => {\n        const parentNode = nodes.find((n: Node) => n.id === e.source) as Node;\n        return parentNode;\n      });\n      return parentNodeArray;\n    },\n  };\n};\n"],"names":["useFlowNode","id","nodes","useStore","state","getNodes","edges","node","self","find","n","parentNodes","connectedEdges","filter","e","target","parentNodeArray","map","parentNode","source"],"mappings":";;;AAEaA,MAAAA,cAAcA,CAACC,OAAe;AACzC,QAAMC,QAAQC,UAAAA,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,QAAMC,QAAQH,UAAAA,SAAUC,CAAUA,UAAAA,MAAME,KAAK;AAEtC,SAAA;AAAA;AAAA,IAEL,IAAIC,OAAO;AACT,YAAMC,OAAON,MAAMO,KAAK,CAACC,MAAYA,EAAET,OAAOA,EAAE;AACzCO,aAAAA;AAAAA,IACT;AAAA;AAAA,IAGA,IAAIG,cAAc;AAChB,YAAMC,iBAAiBN,MAAMO,OAAO,CAACC,MAAYA,EAAEC,WAAWd,EAAE;AAC1De,YAAAA,kBAAkBJ,eAAeK,IAAKH,CAAM,MAAA;AAC1CI,cAAAA,aAAahB,MAAMO,KAAK,CAACC,MAAYA,EAAET,OAAOa,EAAEK,MAAM;AACrDD,eAAAA;AAAAA,MAAAA,CACR;AACMF,aAAAA;AAAAA,IACT;AAAA,EAAA;AAEJ;;"}

package/dist/cjs/index.cjs

@@ -20,9 +20,12 @@ const Minimap_styles = require("./components/Flow/Minimap/Minimap.styles.cjs");
 const Minimap = require("./components/Flow/Minimap/Minimap.cjs");
 const Sidebar_styles = require("./components/Flow/Sidebar/Sidebar.styles.cjs");
 const Sidebar = require("./components/Flow/Sidebar/Sidebar.cjs");
+const Empty = require("./components/Flow/Empty/Empty.cjs");
 const Flow = require("./components/Flow/Flow.cjs");
 const Node_styles = require("./components/Flow/Node/Node.styles.cjs");
 const Node = require("./components/Flow/Node/Node.cjs");
+const useFlowNode = require("./components/Flow/hooks/useFlowNode.cjs");
+const useFlowContext = require("./components/Flow/hooks/useFlowContext.cjs");
 exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
 exports.HvStepNavigation = StepNavigation.HvStepNavigation;
 exports.wizardClasses = Wizard_styles.staticClasses;
@@ -43,7 +46,10 @@ exports.flowMinimapClasses = Minimap_styles.staticClasses;
 exports.HvFlowMinimap = Minimap.HvFlowMinimap;
 exports.flowSidebarClasses = Sidebar_styles.staticClasses;
 exports.HvFlowSidebar = Sidebar.HvFlowSidebar;
+exports.HvFlowEmpty = Empty.HvFlowEmpty;
 exports.HvFlow = Flow.HvFlow;
 exports.flowNodeClasses = Node_styles.staticClasses;
 exports.HvFlowNode = Node.HvFlowNode;
+exports.useFlowNode = useFlowNode.useFlowNode;
+exports.useFlowContext = useFlowContext.useFlowContext;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}