@hitachivantara/uikit-react-lab 5.9.0 → 5.11.0

package/dist/esm/components/Flow/Sidebar/Sidebar.js

@@ -1,14 +1,16 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { useMemo, useState } from "react";
 import debounce from "lodash/debounce";
-import { useDroppable } from "@dnd-kit/core";
+import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
+import { restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { useLabels, useUniqueId, HvDrawer, HvTypography, HvInput } from "@hitachivantara/uikit-react-core";
 import { Add } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./Sidebar.styles.js";
 import { staticClasses } from "./Sidebar.styles.js";
 import { buildGroups } from "./utils.js";
 import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
-import { useFlowContext } from "../FlowContext/FlowContext.js";
+import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
+import { useFlowContext } from "../hooks/useFlowContext.js";
 const DEFAULT_LABELS = {
   itemAriaRoleDescription: "Draggable",
   expandGroupButtonAriaLabel: "Expand group",
@@ -35,6 +37,7 @@ const HvFlowSidebar = ({
   } = useFlowContext();
   const unfilteredGroups = useMemo(() => buildGroups(nodeGroups, nodeTypes), [nodeGroups, nodeTypes]);
   const [groups, setGroups] = useState(unfilteredGroups);
+  const [draggingLabel, setDraggingLabel] = useState(void 0);
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = useUniqueId(id, "hvFlowSidebarDrawer");
   const groupsElementId = useUniqueId(id, "hvFlowSidebarGroups");
@@ -43,6 +46,19 @@ const HvFlowSidebar = ({
   } = 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);
+  };
+  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()));
@@ -59,25 +75,28 @@ const HvFlowSidebar = ({
     setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups(value ? Object.keys(gps) : []);
   };
   const handleDebouncedSearch = debounce(handleSearch, 500);
-  return /* @__PURE__ */ jsx(HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
-    paper: classes.drawerPaper
-  }, anchor, buttonTitle, ...others, children: /* @__PURE__ */ jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
-    /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
-      /* @__PURE__ */ jsx(Add, { role: "none" }),
-      /* @__PURE__ */ jsx(HvTypography, { variant: "title3", children: title })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: classes.contentContainer, children: [
-      /* @__PURE__ */ jsx(HvTypography, { className: classes.description, children: description }),
-      /* @__PURE__ */ jsx(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__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
+      paper: classes.drawerPaper
+    }, anchor, buttonTitle, ...others, children: /* @__PURE__ */ jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
+        /* @__PURE__ */ jsx(Add, { role: "none" }),
+        /* @__PURE__ */ jsx(HvTypography, { variant: "title3", children: title })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: classes.contentContainer, children: [
+        /* @__PURE__ */ jsx(HvTypography, { className: classes.description, children: description }),
+        /* @__PURE__ */ jsx(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__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsx(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__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+  ] });
 };
 export {
   HvFlowSidebar,

package/dist/esm/components/Flow/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","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","undefined","paper","drawerPaper","titleContainer","contentContainer","searchRoot","autoComplete","groupsContainer","map"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","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","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","paper","drawerPaper","titleContainer","contentContainer","searchRoot","autoComplete","groupsContainer","map","restrictToWindowEdges"],"mappings":"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"}

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.js

@@ -5,7 +5,7 @@ import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./SidebarGroup.styles.js";
 import { staticClasses } from "./SidebarGroup.styles.js";
-import { useFlowContext } from "../../FlowContext/FlowContext.js";
+import { useFlowContext } from "../../hooks/useFlowContext.js";
 import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.js";
 const HvFlowSidebarGroup = ({
   id,
@@ -42,7 +42,7 @@ const HvFlowSidebarGroup = ({
       /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: handleClick, "aria-expanded": opened, ...expandButtonProps, children: opened ? /* @__PURE__ */ jsx(Up, { role: "none" }) : /* @__PURE__ */ jsx(Down, { role: "none" }) })
     ] }),
     description && /* @__PURE__ */ jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: description }) }),
-    opened && /* @__PURE__ */ jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, { ...itemProps, ...obj }, obj.id)) })
+    opened && /* @__PURE__ */ jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, { ...itemProps, ...obj }, obj.type)) })
   ] });
 };
 export {

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.js","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","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj"],"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,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,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,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,SAAQ,UACnBH,UAAM2B,MAAAA,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIjC,EAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SidebarGroup.js","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","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj","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,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,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,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,SAAQ,UACnBH,UAAM2B,MAAAA,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIC,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js

@@ -1,15 +1,19 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useForkRef } from "@mui/material";
 import { useRef } from "react";
+import { useForkRef } from "@mui/material";
 import { useDraggable } from "@dnd-kit/core";
+import { useUniqueId } from "@hitachivantara/uikit-react-core";
 import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
 const HvFlowDraggableSidebarGroupItem = ({
-  label,
   id,
+  label,
+  type,
+  data,
   ...others
 }) => {
   var _a, _b;
   const itemRef = useRef(null);
+  const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);
   const {
     attributes,
     listeners,
@@ -17,14 +21,18 @@ const HvFlowDraggableSidebarGroupItem = ({
     isDragging,
     transform
   } = 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/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.js","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"],"mappings":";;;;;AAiBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;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,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACG,oBAAA,wBAAA,EACC,KAAKH,WACL,OACA,OACA,YACIX,GAAAA,cACAD,YACAH,GAAAA,OACJ,CAAA;AAEN;"}
+{"version":3,"file":"DraggableSidebarGroupItem.js","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"],"mappings":";;;;;;AAqBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAExC,QAAMC,YAAYC,YAAYR,IAAK,uBAAsBE,IAAK,EAAC;AAEzD,QAAA;AAAA,IAAEO;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;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,WAAWhB,SAASM,UAAU;AAEhD,QAAMW,QAAQT,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUG,CAAE,OAAMH,UAAUM,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACG,oBAAA,wBAAA,EACC,KAAKH,WACL,OACA,OACA,YACIV,GAAAA,cACAD,YACAL,GAAAA,OACJ,CAAA;AAEN;"}

package/dist/esm/components/Flow/Sidebar/utils.js

@@ -2,11 +2,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/esm/components/Flow/Sidebar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","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;AAVzCX;AAWC,cAAIW,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.js","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;AAVzCX;AAWC,cAAIW,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/esm/components/Flow/base.js

@@ -0,0 +1,16 @@
+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__
+};
+export {
+  flowStyles
+};
+//# sourceMappingURL=base.js.map

package/dist/esm/components/Flow/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","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/esm/components/Flow/hooks/useFlowContext.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { HvFlowContext } from "../FlowContext/FlowContext.js";
+const useFlowContext = () => useContext(HvFlowContext);
+export {
+  useFlowContext
+};
+//# sourceMappingURL=useFlowContext.js.map

package/dist/esm/components/Flow/hooks/useFlowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowContext.js","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,WAAWC,aAAa;"}

package/dist/esm/components/Flow/hooks/useFlowNode.js

@@ -0,0 +1,25 @@
+import { useStore } from "reactflow";
+const useFlowNode = (id) => {
+  const nodes = useStore((state) => state.getNodes());
+  const edges = 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;
+    }
+  };
+};
+export {
+  useFlowNode
+};
+//# sourceMappingURL=useFlowNode.js.map

package/dist/esm/components/Flow/hooks/useFlowNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowNode.js","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,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,QAAMC,QAAQH,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/esm/index.js

@@ -18,13 +18,17 @@ import { staticClasses as staticClasses8 } from "./components/Flow/Minimap/Minim
 import { HvFlowMinimap } from "./components/Flow/Minimap/Minimap.js";
 import { staticClasses as staticClasses9 } from "./components/Flow/Sidebar/Sidebar.styles.js";
 import { HvFlowSidebar } from "./components/Flow/Sidebar/Sidebar.js";
+import { HvFlowEmpty } from "./components/Flow/Empty/Empty.js";
 import { HvFlow } from "./components/Flow/Flow.js";
 import { staticClasses as staticClasses10 } from "./components/Flow/Node/Node.styles.js";
 import { HvFlowNode } from "./components/Flow/Node/Node.js";
+import { useFlowNode } from "./components/Flow/hooks/useFlowNode.js";
+import { useFlowContext } from "./components/Flow/hooks/useFlowContext.js";
 export {
   HvFlow,
   HvFlowBackground,
   HvFlowControls,
+  HvFlowEmpty,
   HvFlowMinimap,
   HvFlowNode,
   HvFlowSidebar,
@@ -40,6 +44,8 @@ export {
   staticClasses10 as flowNodeClasses,
   staticClasses9 as flowSidebarClasses,
   staticClasses as stepNavigationClasses,
+  useFlowContext,
+  useFlowNode,
   staticClasses3 as wizardActionsClasses,
   staticClasses2 as wizardClasses,
   staticClasses4 as wizardContainerClasses,

package/dist/esm/index.js.map

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