@hitachivantara/uikit-react-lab 5.13.2 → 5.13.4

package/dist/cjs/components/Flow/DroppableFlow.cjs

@@ -9,13 +9,14 @@ const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const Flow_styles = require("./Flow.styles.cjs");
 const base = require("./base.cjs");
+const NodeMetaContext = require("./FlowContext/NodeMetaContext.cjs");
 const useFlowContext = require("./hooks/useFlowContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const ReactFlow__default = /* @__PURE__ */ _interopDefault(ReactFlow);
 const getNode = (nodes, nodeId) => {
   return nodes.find((n) => n.id === nodeId);
 };
-const validateEdge = (nodes, edge, nodeTypes) => {
+const validateEdge = (nodes, edge, nodeMetaRegistry) => {
   if (!edge.sourceHandle || !edge.targetHandle)
     return false;
   const sourceNode = getNode(nodes, edge.source);
@@ -26,26 +27,13 @@ const validateEdge = (nodes, edge, nodeTypes) => {
   const targetType = targetNode.type;
   if (!sourceType || !targetType)
     return false;
-  const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];
-  const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];
+  const inputs = nodeMetaRegistry[edge.target]?.inputs || [];
+  const outputs = nodeMetaRegistry[edge.source]?.outputs || [];
   const sourceProvides = outputs[edge.sourceHandle]?.provides || "";
   const targetAccepts = inputs[edge.targetHandle]?.accepts || [];
   const isValid = targetAccepts.includes(sourceProvides);
   return isValid;
 };
-const validateEdges = (edges, nodes, nodeTypes) => {
-  if (edges) {
-    const validEdges = [];
-    edges.forEach((edge) => {
-      const isValidEdge = validateEdge(nodes, edge, nodeTypes);
-      if (isValidEdge) {
-        validEdges.push(edge);
-      }
-    });
-    return validEdges;
-  }
-  return [];
-};
 const HvDroppableFlow = ({
   id,
   className,
@@ -129,11 +117,10 @@ const HvDroppableFlow = ({
     handleFlowChange(nodes, eds);
     onEdgesChangeProp?.(changes);
   }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
-  const isValidConnection = (connection) => {
-    const isValid = validateEdge(nodes, connection, nodeTypes);
-    return isValid;
-  };
-  const validEdges = validateEdges(edges, nodes, nodeTypes);
+  const {
+    registry
+  } = NodeMetaContext.useNodeMetaRegistry();
+  const isValidConnection = (connection) => validateEdge(nodes, connection, registry);
   const defaultEdgeOptions = {
     markerEnd: {
       type: ReactFlow.MarkerType.ArrowClosed,
@@ -144,7 +131,7 @@ const HvDroppableFlow = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: base.flowStyles }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, { nodes, edges: validEdges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions, ...others, children }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, { nodes, edges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions, ...others, children }) })
   ] });
 };
 exports.flowClasses = Flow_styles.staticClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTypes } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edge: Edge,\n  nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];\n  const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];\n\n  const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n\n  const isValid = targetAccepts.includes(sourceProvides);\n  return isValid;\n};\n\nconst validateEdges = (\n  edges: Edge[],\n  nodes: Node[],\n  nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n  if (edges) {\n    const validEdges: Edge[] = [];\n\n    edges.forEach((edge) => {\n      const isValidEdge = validateEdge(nodes, edge, nodeTypes);\n      if (isValidEdge) {\n        validEdges.push(edge);\n      }\n    });\n\n    return validEdges;\n  }\n  return [];\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.data.current?.hvFlow?.type;\n\n        // Only known node types can be dropped in the canvas\n        if (type && nodeTypes?.[type]) {\n          // Converts the coordinates to the react flow coordinate system\n          const position = reactFlowInstance.project({\n            x:\n              (event.active.data.current?.hvFlow?.x || 0) -\n              event.over.rect.left,\n            y:\n              (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n          });\n\n          // Node data\n          const data = event.active.data.current?.hvFlow?.data || {};\n\n          // Node to add\n          const newNode: Node = {\n            id: uid(),\n            position,\n            data,\n            type,\n          };\n\n          // Drop override\n          if (onDndDrop) {\n            onDndDrop(event, newNode);\n            return;\n          }\n\n          setNodes((nds) => nds.concat(newNode));\n        } else {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n      }\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const isValidConnection = (connection) => {\n    const isValid = validateEdge(nodes, connection, nodeTypes);\n    return isValid;\n  };\n\n  const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={validEdges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edge","nodeTypes","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","meta","outputs","sourceProvides","provides","targetAccepts","accepts","isValid","includes","validateEdges","edges","validEdges","forEach","isValidEdge","push","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edge: Edge,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n  const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n  const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n\n  const isValid = targetAccepts.includes(sourceProvides);\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.data.current?.hvFlow?.type;\n\n        // Only known node types can be dropped in the canvas\n        if (type && nodeTypes?.[type]) {\n          // Converts the coordinates to the react flow coordinate system\n          const position = reactFlowInstance.project({\n            x:\n              (event.active.data.current?.hvFlow?.x || 0) -\n              event.over.rect.left,\n            y:\n              (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n          });\n\n          // Node data\n          const data = event.active.data.current?.hvFlow?.data || {};\n\n          // Node to add\n          const newNode: Node = {\n            id: uid(),\n            position,\n            data,\n            type,\n          };\n\n          // Drop override\n          if (onDndDrop) {\n            onDndDrop(event, newNode);\n            return;\n          }\n\n          setNodes((nds) => nds.concat(newNode));\n        } else {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n      }\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n  const isValidConnection = (connection) =>\n    validateEdge(nodes, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","isValid","includes","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","edges","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.cjs","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport {\n  HvFlowDefaultActions,\n  HvFlowNodeGroups,\n  HvFlowNodeTypes,\n} from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowDefaultActions[];\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeTypes,\n  nodeGroups,\n  sidebar,\n  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\n  );\n\n  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider\n        nodeGroups={nodeGroups}\n        nodeTypes={nodeTypes}\n        defaultActions={defaultActions}\n      >\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","defaultActions","dndContextProps","others","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","jsx","ReactFlowProvider","HvFlowProvider","jsxs","DndContext","restrictToWindowEdges","HvDroppableFlow"],"mappings":";;;;;;;;AAiDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAMC,UAAUC,KAAAA,WACdC,KAAAA,UAAUC,KAAa,aAAA,GACvBD,KAAAA,UAAUE,KAAc,cAAA,CAC1B;AAIA,SACGC,2BAAA,IAAAC,UAAA,mBAAA,EACC,UAACD,2BAAA,IAAAE,4BAAA,EACC,YACA,WACA,gBAEA,UAACC,gCAAAC,KAAAA,YAAA,EACC,SACA,WAAW,CAACC,+BAAqB,GACjC,GAAIZ,iBAEJ,UAAA;AAAA,IAACO,2BAAAA,IAAAM,cAAA,iBAAA,EAAgB,GAAIZ,QAAO;AAAA,IAC3BH;AAAAA,EAAAA,GACH,GACF,EACF,CAAA;AAEJ;;"}
+{"version":3,"file":"Flow.cjs","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeTypes,\n  nodeGroups,\n  sidebar,\n  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\n  );\n\n  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider\n        nodeGroups={nodeGroups}\n        nodeTypes={nodeTypes}\n        defaultActions={defaultActions}\n      >\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","defaultActions","dndContextProps","others","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","jsx","ReactFlowProvider","HvFlowProvider","jsxs","DndContext","restrictToWindowEdges","HvDroppableFlow"],"mappings":";;;;;;;;AA6CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAMC,UAAUC,KAAAA,WACdC,KAAAA,UAAUC,KAAa,aAAA,GACvBD,KAAAA,UAAUE,KAAc,cAAA,CAC1B;AAIA,SACGC,2BAAA,IAAAC,UAAA,mBAAA,EACC,UAACD,2BAAA,IAAAE,4BAAA,EACC,YACA,WACA,gBAEA,UAACC,gCAAAC,KAAAA,YAAA,EACC,SACA,WAAW,CAACC,+BAAqB,GACjC,GAAIZ,iBAEJ,UAAA;AAAA,IAACO,2BAAAA,IAAAM,cAAA,iBAAA,EAAgB,GAAIZ,QAAO;AAAA,IAC3BH;AAAAA,EAAAA,GACH,GACF,EACF,CAAA;AAEJ;;"}

package/dist/cjs/components/Flow/Flow.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const Node_styles = require("./Node/Node.styles.cjs");
+const BaseNode_styles = require("./Node/BaseNode.styles.cjs");
 require("@emotion/react/jsx-runtime");
 require("react");
 require("reactflow");
@@ -35,7 +35,7 @@ const {
         translate: "0 4px"
       }
     },
-    [`& .selected > .${Node_styles.staticClasses.root}`]: {
+    [`& .selected > .${BaseNode_styles.staticClasses.root}`]: {
       border: `1px solid ${uikitReactCore.theme.colors.secondary_60}`,
       borderRadius: uikitReactCore.theme.radii.round,
       boxSizing: "border-box"

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.cjs","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,eAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,eAAAA,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,eAAAA,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,eAAAA,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,0BAAgBb,IAAK,EAAC,GAAG;AAAA,MAC1Cc,QAAS,aAAYX,eAAMC,MAAAA,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,eAAAA,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Flow.styles.cjs","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowBaseNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowBaseNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,eAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,eAAAA,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,eAAAA,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,eAAAA,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,8BAAoBb,IAAK,EAAC,GAAG;AAAA,MAC9Cc,QAAS,aAAYX,eAAMC,MAAAA,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,eAAAA,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
+const NodeMetaContext = require("./NodeMetaContext.cjs");
 const HvFlowContext = React.createContext({});
 const HvFlowProvider = ({
   nodeGroups,
@@ -17,7 +18,7 @@ const HvFlowProvider = ({
     expandedNodeGroups,
     setExpandedNodeGroups
   }), [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]);
-  return /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(NodeMetaContext.HvFlowNodeMetaProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children }) });
 };
 exports.HvFlowContext = HvFlowContext;
 exports.HvFlowProvider = HvFlowProvider;

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

@@ -1 +1 @@
-{"version":3,"file":"FlowContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport {\n  HvFlowDefaultActions,\n  HvFlowNodeGroups,\n  HvFlowNodeTypes,\n} from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Flow default actions. */\n  defaultActions?: HvFlowDefaultActions[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Flow default actions. */\n  defaultActions?: HvFlowDefaultActions[];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  nodeTypes,\n  defaultActions,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeTypes,\n      nodeGroups,\n      defaultActions,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]\n  );\n\n  return (\n    <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n  );\n};\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","defaultActions","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","jsx"],"mappings":";;;;AA2BaA,MAAAA,gBAAgBC,MAAkC,cAAA,EAAE;AAa1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLP;AAAAA,IACAD;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAC;AAAAA,EAAAA,IAEF,CAACJ,WAAWD,YAAYE,gBAAgBE,kBAAkB,CAC5D;AAEA,SACGK,2BAAAA,IAAA,cAAc,UAAd,EAAuB,OAAeN,SAAS,CAAA;AAEpD;;;"}
+{"version":3,"file":"FlowContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\nimport { HvFlowNodeMetaProvider } from \"./NodeMetaContext\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  nodeTypes,\n  defaultActions,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeTypes,\n      nodeGroups,\n      defaultActions,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]\n  );\n\n  return (\n    <HvFlowNodeMetaProvider>\n      <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n    </HvFlowNodeMetaProvider>\n  );\n};\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","defaultActions","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","jsx","HvFlowNodeMetaProvider"],"mappings":";;;;;AAwBaA,MAAAA,gBAAgBC,MAAkC,cAAA,EAAE;AAa1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLP;AAAAA,IACAD;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAC;AAAAA,EAAAA,IAEF,CAACJ,WAAWD,YAAYE,gBAAgBE,kBAAkB,CAC5D;AAGE,SAAAK,+BAACC,gBAAAA,0BACC,UAACD,2BAAAA,IAAA,cAAc,UAAd,EAAuB,OAAeN,SAAS,CAAA,EAClD,CAAA;AAEJ;;;"}

package/dist/cjs/components/Flow/FlowContext/NodeMetaContext.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const HvFlowNodeMetaContext = React.createContext(void 0);
+const HvFlowNodeMetaProvider = ({
+  children
+}) => {
+  const registryRef = React.useRef({});
+  const registerNode = React.useCallback((id, nodeInfo) => {
+    registryRef.current[id] = nodeInfo;
+  }, []);
+  const unregisterNode = React.useCallback((id) => {
+    delete registryRef.current[id];
+  }, []);
+  const getRegistry = React.useCallback(() => {
+    return registryRef.current;
+  }, []);
+  const value = React.useMemo(() => ({
+    registerNode,
+    unregisterNode,
+    getRegistry
+  }), [registerNode, unregisterNode, getRegistry]);
+  return /* @__PURE__ */ jsxRuntime.jsx(HvFlowNodeMetaContext.Provider, { value, children });
+};
+function useNodeMetaRegistry() {
+  const context = React.useContext(HvFlowNodeMetaContext);
+  if (context === void 0) {
+    throw new Error("useNodeRegistry must be used within a HvFlowNodeMetaProvider");
+  }
+  return {
+    registerNode: context.registerNode,
+    unregisterNode: context.unregisterNode,
+    registry: context.getRegistry()
+  };
+}
+exports.HvFlowNodeMetaProvider = HvFlowNodeMetaProvider;
+exports.useNodeMetaRegistry = useNodeMetaRegistry;
+//# sourceMappingURL=NodeMetaContext.cjs.map

package/dist/cjs/components/Flow/FlowContext/NodeMetaContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeMetaContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/NodeMetaContext.tsx"],"sourcesContent":["import { createContext, useRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvFlowNodeMeta } from \"../types\";\n\ninterface HvFlowNodeMetaContextType {\n  registerNode: (id: string, nodeInfo: HvFlowNodeMeta) => void;\n  unregisterNode: (id: string) => void;\n  getRegistry: () => Record<string, HvFlowNodeMeta>;\n}\n\nconst HvFlowNodeMetaContext = createContext<\n  HvFlowNodeMetaContextType | undefined\n>(undefined);\n\nexport const HvFlowNodeMetaProvider = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const registryRef = useRef<Record<string, HvFlowNodeMeta>>({});\n\n  const registerNode = useCallback((id: string, nodeInfo: HvFlowNodeMeta) => {\n    registryRef.current[id] = nodeInfo;\n  }, []);\n\n  const unregisterNode = useCallback((id: string) => {\n    delete registryRef.current[id];\n  }, []);\n\n  const getRegistry = useCallback(() => {\n    return registryRef.current;\n  }, []);\n\n  const value = useMemo<HvFlowNodeMetaContextType>(\n    () => ({\n      registerNode,\n      unregisterNode,\n      getRegistry,\n    }),\n    [registerNode, unregisterNode, getRegistry]\n  );\n\n  return (\n    <HvFlowNodeMetaContext.Provider value={value}>\n      {children}\n    </HvFlowNodeMetaContext.Provider>\n  );\n};\n\nexport function useNodeMeta(nodeId: string): HvFlowNodeMeta | undefined {\n  const context = useContext(HvFlowNodeMetaContext);\n\n  if (context === undefined) {\n    throw new Error(\"useNodeMeta must be used within a HvFlowNodeMetaProvider\");\n  }\n\n  const registry = context.getRegistry();\n  return registry[nodeId];\n}\n\nexport function useNodeMetaRegistry() {\n  const context = useContext(HvFlowNodeMetaContext);\n\n  if (context === undefined) {\n    throw new Error(\n      \"useNodeRegistry must be used within a HvFlowNodeMetaProvider\"\n    );\n  }\n\n  return {\n    registerNode: context.registerNode,\n    unregisterNode: context.unregisterNode,\n    registry: context.getRegistry(),\n  };\n}\n"],"names":["HvFlowNodeMetaContext","createContext","undefined","HvFlowNodeMetaProvider","children","registryRef","useRef","registerNode","useCallback","id","nodeInfo","current","unregisterNode","getRegistry","value","useMemo","jsx","useNodeMetaRegistry","context","useContext","Error","registry"],"mappings":";;;;AAUA,MAAMA,wBAAwBC,MAAAA,cAE5BC,MAAS;AAEJ,MAAMC,yBAAyBA,CAAC;AAAA,EACrCC;AAGF,MAAM;AACEC,QAAAA,cAAcC,aAAuC,CAAA,CAAE;AAE7D,QAAMC,eAAeC,MAAAA,YAAY,CAACC,IAAYC,aAA6B;AAC7DC,gBAAAA,QAAQF,EAAE,IAAIC;AAAAA,EAC5B,GAAG,CAAE,CAAA;AAECE,QAAAA,iBAAiBJ,kBAAY,CAACC,OAAe;AAC1CJ,WAAAA,YAAYM,QAAQF,EAAE;AAAA,EAC/B,GAAG,CAAE,CAAA;AAECI,QAAAA,cAAcL,MAAAA,YAAY,MAAM;AACpC,WAAOH,YAAYM;AAAAA,EACrB,GAAG,CAAE,CAAA;AAECG,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLR;AAAAA,IACAK;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACN,cAAcK,gBAAgBC,WAAW,CAC5C;AAEA,SACGG,2BAAAA,IAAA,sBAAsB,UAAtB,EAA+B,OAC7BZ,SACH,CAAA;AAEJ;AAaO,SAASa,sBAAsB;AAC9BC,QAAAA,UAAUC,iBAAWnB,qBAAqB;AAEhD,MAAIkB,YAAYhB,QAAW;AACnB,UAAA,IAAIkB,MACR,8DACF;AAAA,EACF;AAEO,SAAA;AAAA,IACLb,cAAcW,QAAQX;AAAAA,IACtBK,gBAAgBM,QAAQN;AAAAA,IACxBS,UAAUH,QAAQL,YAAY;AAAA,EAAA;AAElC;;;"}

package/dist/cjs/components/Flow/Node/BaseNode.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const ReactFlow = require("reactflow");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const NodeMetaContext = require("../FlowContext/NodeMetaContext.cjs");
+const BaseNode_styles = require("./BaseNode.styles.cjs");
+const isInputConnected = (id, type, idx, edges) => {
+  if (type === "target") {
+    return edges.some((e) => e.target === id && e.targetHandle === idx.toString());
+  }
+  if (type === "source") {
+    return edges.some((e) => e.source === id && e.sourceHandle === idx.toString());
+  }
+  return false;
+};
+const defaultActions = [{
+  id: "delete",
+  label: "Delete",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {})
+}, {
+  id: "duplicate",
+  label: "Duplicate",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Duplicate, {})
+}];
+const renderedIcon = (actionIcon) => React.isValidElement(actionIcon) ? actionIcon : actionIcon?.();
+const HvFlowBaseNode = ({
+  id,
+  title,
+  headerItems,
+  icon,
+  color: colorProp,
+  inputs,
+  outputs,
+  nodeActions = defaultActions,
+  classes: classesProp,
+  className,
+  children
+}) => {
+  const {
+    registerNode,
+    unregisterNode
+  } = NodeMetaContext.useNodeMetaRegistry();
+  React.useEffect(() => {
+    registerNode(id, {
+      label: title || "",
+      inputs,
+      outputs
+    });
+    return () => unregisterNode(id);
+  }, [id, title, inputs, outputs, registerNode, unregisterNode]);
+  const [showActions, setShowActions] = React.useState(false);
+  const reactFlowInstance = ReactFlow.useReactFlow();
+  const {
+    classes,
+    cx,
+    css
+  } = BaseNode_styles.useClasses(classesProp);
+  const edges = ReactFlow.useStore((s) => s.edges);
+  const nodes = ReactFlow.useStore((s) => s.getNodes());
+  const node = nodes.find((n) => n.id === id);
+  const handleDefaultAction = React.useCallback((action) => {
+    if (!node)
+      return;
+    if (action.callback) {
+      action.callback(node);
+      return;
+    }
+    switch (action.id) {
+      case "delete":
+        reactFlowInstance.deleteElements({
+          nodes: [node]
+        });
+        break;
+      case "duplicate":
+        reactFlowInstance.addNodes([{
+          ...node,
+          id: `${reactFlowInstance.getNodes().length + 1}`,
+          position: {
+            x: node.position.x,
+            y: node.position.y + (node.height || 0) + 20
+          },
+          selected: false,
+          zIndex: Number(uikitStyles.theme.zIndices.overlay)
+        }]);
+        break;
+    }
+  }, [node, reactFlowInstance]);
+  if (!node)
+    return null;
+  const color = uikitStyles.getColor(colorProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
+    border: `1px solid ${color}`
+  }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: () => handleDefaultAction(action), children: renderedIcon(action.icon) }, action.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
+      backgroundColor: color
+    }), classes.headerContainer), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", className: classes.title, children: title })
+      ] }),
+      headerItems && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        display: "flex"
+      }, children: headerItems })
+    ] }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
+    inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Inputs" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: ReactFlow.Position.Left, style: {
+          top: "auto",
+          bottom: (outputs?.length ? 80 : 18) + (outputs?.length || 0) * 29 + 29 * idx
+        } }),
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: input.label }),
+        input.isMandatory && !isInputConnected(id, "target", idx, edges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
+      ] }, idx)) })
+    ] }),
+    outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Outputs" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "source", isConnectableEnd: false, id: `${idx}`, position: ReactFlow.Position.Right, style: {
+          bottom: -10 + 29 * (outputs.length - idx),
+          top: "auto"
+        } }),
+        output.isMandatory && !isInputConnected(id, "source", idx, edges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: output.label })
+      ] }, idx)) })
+    ] })
+  ] });
+};
+exports.flowBaseNodeClasses = BaseNode_styles.staticClasses;
+exports.HvFlowBaseNode = HvFlowBaseNode;
+//# sourceMappingURL=BaseNode.cjs.map

package/dist/cjs/components/Flow/Node/BaseNode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNode.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types/index\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n\n  return (\n    <div\n      className={cx(\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.titleContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","Delete","Duplicate","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useStore","s","nodes","getNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","length","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","jsxs","border","root","jsx","NodeToolbar","map","HvButton","backgroundColor","headerContainer","titleContainer","HvTypography","display","contentContainer","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

package/dist/cjs/components/Flow/Node/BaseNode.styles.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvFlowBaseNode", {
+  root: {
+    borderRadius: uikitReactCore.theme.radii.round,
+    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    boxShadow: uikitReactCore.theme.colors.shadow,
+    minWidth: "250px"
+  },
+  headerContainer: {
+    padding: uikitReactCore.theme.spacing(0.5, 1),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderTopLeftRadius: uikitReactCore.theme.radii.round,
+    borderTopRightRadius: uikitReactCore.theme.radii.round
+  },
+  titleContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  title: {
+    color: uikitReactCore.theme.colors.base_dark
+  },
+  inputsTitleContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: uikitReactCore.theme.space.xs,
+    backgroundColor: uikitReactCore.theme.colors.atmo2,
+    borderTop: `1px solid ${uikitReactCore.theme.colors.atmo4}`,
+    borderBottom: `1px solid ${uikitReactCore.theme.colors.atmo4}`
+  },
+  outputsTitleContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: uikitReactCore.theme.space.xs,
+    backgroundColor: uikitReactCore.theme.colors.atmo2,
+    borderTop: `1px solid ${uikitReactCore.theme.colors.atmo4}`,
+    borderBottom: `1px solid ${uikitReactCore.theme.colors.atmo4}`
+  },
+  contentContainer: {},
+  inputsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: uikitReactCore.theme.space.sm,
+    gap: uikitReactCore.theme.space.xs,
+    alignItems: "flex-start"
+  },
+  outputsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: uikitReactCore.theme.space.sm,
+    gap: uikitReactCore.theme.space.xs,
+    alignItems: "flex-end"
+  },
+  inputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  outputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  mandatory: {
+    width: 10,
+    height: 10,
+    margin: uikitReactCore.theme.spacing(0, uikitReactCore.theme.space.xs),
+    borderRadius: uikitReactCore.theme.radii.circle,
+    backgroundColor: uikitReactCore.theme.colors.negative_20
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=BaseNode.styles.cjs.map

package/dist/cjs/components/Flow/Node/BaseNode.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNode.styles.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: theme.radii.round,\n    borderTopRightRadius: theme.radii.round,\n  },\n  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  title: {\n    color: theme.colors.base_dark,\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  contentContainer: {},\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","borderTopLeftRadius","borderTopRightRadius","titleContainer","title","color","base_dark","inputsTitleContainer","space","xs","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","contentContainer","inputsContainer","sm","gap","outputsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJC,cAAcC,eAAAA,MAAMC,MAAMC;AAAAA,IAC1BC,iBAAiBH,eAAAA,MAAMI,OAAOC;AAAAA,IAC9BC,WAAWN,eAAAA,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,SAASV,eAAAA,MAAMW,QAAQ,KAAK,CAAC;AAAA,IAC7BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,qBAAqBhB,eAAAA,MAAMC,MAAMC;AAAAA,IACjCe,sBAAsBjB,eAAAA,MAAMC,MAAMC;AAAAA,EACpC;AAAA,EACAgB,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAI,OAAO;AAAA,IACLC,OAAOpB,eAAAA,MAAMI,OAAOiB;AAAAA,EACtB;AAAA,EACAC,sBAAsB;AAAA,IACpBV,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,eAAAA,MAAMuB,MAAMC;AAAAA,IACrBrB,iBAAiBH,eAAAA,MAAMI,OAAOqB;AAAAA,IAC9BC,WAAY,aAAY1B,eAAMI,MAAAA,OAAOuB,KAAM;AAAA,IAC3CC,cAAe,aAAY5B,eAAMI,MAAAA,OAAOuB,KAAM;AAAA,EAChD;AAAA,EACAE,uBAAuB;AAAA,IACrBjB,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,eAAAA,MAAMuB,MAAMC;AAAAA,IACrBrB,iBAAiBH,eAAAA,MAAMI,OAAOqB;AAAAA,IAC9BC,WAAY,aAAY1B,eAAMI,MAAAA,OAAOuB,KAAM;AAAA,IAC3CC,cAAe,aAAY5B,eAAMI,MAAAA,OAAOuB,KAAM;AAAA,EAChD;AAAA,EACAG,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IACfnB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,eAAAA,MAAMuB,MAAMS;AAAAA,IACrBC,KAAKjC,eAAAA,MAAMuB,MAAMC;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAmB,kBAAkB;AAAA,IAChBtB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,eAAAA,MAAMuB,MAAMS;AAAAA,IACrBC,KAAKjC,eAAAA,MAAMuB,MAAMC;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAoB,gBAAgB;AAAA,IACdvB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAqB,iBAAiB;AAAA,IACfxB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAsB,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQxC,eAAMW,MAAAA,QAAQ,GAAGX,eAAAA,MAAMuB,MAAMC,EAAE;AAAA,IACvCzB,cAAcC,eAAAA,MAAMC,MAAMwC;AAAAA,IAC1BtC,iBAAiBH,eAAAA,MAAMI,OAAOsC;AAAAA,EAChC;AACF,CAAC;;;"}