diff --git a/dist/meta-diagram.cjs.development.js b/dist/meta-diagram.cjs.development.js
index 5c8b09e..8404ff5 100644
--- a/dist/meta-diagram.cjs.development.js
+++ b/dist/meta-diagram.cjs.development.js
@@ -118,12 +118,14 @@ class MetaNodeFactory extends reactCanvasCore.AbstractReactFactory {
 
   generateReactWidget(event) {
     if (this.componentsMap.has(event.model.options.shape)) {
-      const ReactComponentType = this.componentsMap.get(event.model.options.shape); // @ts-ignore
-
-      return React__default.createElement(ReactComponentType, {
-        engine: this.engine,
-        model: event.model
-      });
+      const ReactComponentType = this.componentsMap.get(event.model.options.shape);
+      return (// @ts-ignore
+        React__default.createElement(ReactComponentType, {
+          key: `node-factory-${event.model.getOptions().id}`,
+          engine: this.engine,
+          model: event.model
+        })
+      );
     } // TODO: Generate default node instead
 
 
@@ -160,6 +162,7 @@ class MetaLinkFactory extends createEngine.DefaultLinkFactory {
       model.getOptions().shape);
       return (// @ts-ignore
         React__default.createElement(ReactComponentType, {
+          key: `link-factory-${model.getOptions().id}`,
           engine: this.engine,
           model: model,
           path: path,
diff --git a/dist/meta-diagram.cjs.development.js.map b/dist/meta-diagram.cjs.development.js.map
index c8367ab..fba8126 100644
--- a/dist/meta-diagram.cjs.development.js.map
+++ b/dist/meta-diagram.cjs.development.js.map
@@ -1 +1 @@
-{"version":3,"file":"meta-diagram.cjs.development.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/theme.ts","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  children: MetaNode[];\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    options: Map<string, any>\n  ) {\n    this.children = [];\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          engine={this.engine}\n          model={model}\n          path={path}\n          selected={selected}\n        />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\n\ntype ThemeVars = {\n  [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n  const {\n    primaryBg,\n    fontFamily,\n    chipTextColor,\n    chipBgColor,\n    textWhite,\n    listItemActiveBg,\n    listSelectedTextColor,\n    listBoxShadow,\n    listBorderColor,\n  } = params;\n  return {\n    components: {\n      MuiCssBaseline: {\n        styleOverrides: `\n          html {\n            background: ${primaryBg};\n            font-family: ${fontFamily};\n          }\n          body {\n            background-color:${primaryBg};\n            font-family: ${fontFamily};\n            font-size: 1rem;\n          }\n        `,\n      },\n      MuiList: {\n        styleOverrides: {\n          root: {\n            '&.customSwitch': {\n              padding: '0.125rem',\n              background: chipTextColor,\n              borderRadius: '0.5rem',\n              display: 'flex',\n              '& .MuiListItemButton-root': {\n                padding: '0.25rem 0.75rem',\n                borderRadius: '0.4375rem',\n                width: '10.59375rem',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                '&:not(:last-child)': {\n                  marginBottom: '0',\n                },\n                '&.Mui-disabled': {\n                  opacity: 1,\n                },\n                '&.Mui-selected': {\n                  background: textWhite,\n                  boxShadow: listBoxShadow,\n                  border: `0.03125rem solid ${listBorderColor}`,\n                  '& .MuiTypography-root': {\n                    color: listSelectedTextColor,\n                  },\n                },\n              },\n              '& .MuiChip-root': {\n                marginLeft: '0.25rem',\n              },\n              '& .MuiTypography-root': {\n                fontWeight: 500,\n                fontSize: '0.8125rem',\n                lineHeight: '1.25rem',\n                letterSpacing: '-0.005rem',\n                color: chipBgColor,\n                margin: 0,\n              },\n            },\n          },\n        },\n      },\n      MuiListItemIcon: {\n        styleOverrides: {\n          root: {\n            minWidth: 'inherit',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            padding: 0,\n            width: '2.5rem',\n            height: '2.5rem',\n            borderRadius: '50%',\n            justifyContent: 'center',\n            backgroundColor: chipTextColor,\n            '&:hover': {\n              backgroundColor: chipTextColor,\n            },\n            '&:not(:last-child)': {\n              marginBottom: '0.75rem',\n            },\n            '&.Mui-selected': {\n              backgroundColor: listItemActiveBg,\n              '&:hover': {\n                backgroundColor: listItemActiveBg,\n              },\n            },\n            '&.Mui-disabled': {\n              opacity: 0.8,\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default (customVariables: ThemeVars) =>\n  applicationTheme({\n    ...vars,\n    ...customVariables,\n  });\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#fffff',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n  metaTheme: {\n    customThemeVariables: {};\n    canvasClassName: string;\n  };\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  metaTheme,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = metaNodes.map(\n    mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n  );\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n\n  return (\n    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>\n      <CssBaseline />\n      <Box className={containerClassName}>\n        <Sidebar />\n        <CanvasWidget\n          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}\n          engine={engine}\n        />\n      </Box>\n    </ThemeProvider>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","alignItems","justifyContent","marginBottom","opacity","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"meta-diagram.cjs.development.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/theme.ts","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  children: MetaNode[];\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    options: Map<string, any>\n  ) {\n    this.children = [];\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          key={`node-factory-${event.model.getOptions().id}`}\n          engine={this.engine}\n          model={event.model}\n        />\n      );\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          key={`link-factory-${model.getOptions().id}`}\n          engine={this.engine}\n          model={model}\n          path={path}\n          selected={selected}\n        />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\n\ntype ThemeVars = {\n  [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n  const {\n    primaryBg,\n    fontFamily,\n    chipTextColor,\n    chipBgColor,\n    textWhite,\n    listItemActiveBg,\n    listSelectedTextColor,\n    listBoxShadow,\n    listBorderColor,\n  } = params;\n  return {\n    components: {\n      MuiCssBaseline: {\n        styleOverrides: `\n          html {\n            background: ${primaryBg};\n            font-family: ${fontFamily};\n          }\n          body {\n            background-color:${primaryBg};\n            font-family: ${fontFamily};\n            font-size: 1rem;\n          }\n        `,\n      },\n      MuiList: {\n        styleOverrides: {\n          root: {\n            '&.customSwitch': {\n              padding: '0.125rem',\n              background: chipTextColor,\n              borderRadius: '0.5rem',\n              display: 'flex',\n              '& .MuiListItemButton-root': {\n                padding: '0.25rem 0.75rem',\n                borderRadius: '0.4375rem',\n                width: '10.59375rem',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                '&:not(:last-child)': {\n                  marginBottom: '0',\n                },\n                '&.Mui-disabled': {\n                  opacity: 1,\n                },\n                '&.Mui-selected': {\n                  background: textWhite,\n                  boxShadow: listBoxShadow,\n                  border: `0.03125rem solid ${listBorderColor}`,\n                  '& .MuiTypography-root': {\n                    color: listSelectedTextColor,\n                  },\n                },\n              },\n              '& .MuiChip-root': {\n                marginLeft: '0.25rem',\n              },\n              '& .MuiTypography-root': {\n                fontWeight: 500,\n                fontSize: '0.8125rem',\n                lineHeight: '1.25rem',\n                letterSpacing: '-0.005rem',\n                color: chipBgColor,\n                margin: 0,\n              },\n            },\n          },\n        },\n      },\n      MuiListItemIcon: {\n        styleOverrides: {\n          root: {\n            minWidth: 'inherit',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            padding: 0,\n            width: '2.5rem',\n            height: '2.5rem',\n            borderRadius: '50%',\n            justifyContent: 'center',\n            backgroundColor: chipTextColor,\n            '&:hover': {\n              backgroundColor: chipTextColor,\n            },\n            '&:not(:last-child)': {\n              marginBottom: '0.75rem',\n            },\n            '&.Mui-selected': {\n              backgroundColor: listItemActiveBg,\n              '&:hover': {\n                backgroundColor: listItemActiveBg,\n              },\n            },\n            '&.Mui-disabled': {\n              opacity: 0.8,\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default (customVariables: ThemeVars) =>\n  applicationTheme({\n    ...vars,\n    ...customVariables,\n  });\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#fffff',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n  metaTheme: {\n    customThemeVariables: {};\n    canvasClassName: string;\n  };\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  metaTheme,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = metaNodes.map(\n    mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n  );\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n\n  return (\n    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>\n      <CssBaseline />\n      <Box className={containerClassName}>\n        <Sidebar />\n        <CanvasWidget\n          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}\n          engine={engine}\n        />\n      </Box>\n    </ThemeProvider>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","alignItems","justifyContent","marginBottom","opacity","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/meta-diagram.cjs.production.min.js b/dist/meta-diagram.cjs.production.min.js
index ce79500..4c55df1 100644
--- a/dist/meta-diagram.cjs.production.min.js
+++ b/dist/meta-diagram.cjs.production.min.js
@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=require("react"),o=e(r),n=require("@projectstorm/react-diagrams"),i=e(n),s=require("@projectstorm/react-canvas-core"),a=require("@mui/styles"),l=require("@mui/system"),d=require("@mui/material"),c=require("@mui/material/styles"),m=e(require("@mui/material/CssBaseline"));class g{constructor(e,t,r,o){this.options=o,this.options.set("id",e),this.options.set("name",t),this.options.set("shape",r)}getId(){return this.options.get("id")}getShape(){return this.options.get("shape")}}!function(e){e.META_NODE="meta-node-type",e.META_LINK="meta-link-type"}(t||(t={}));class C extends n.NodeModel{constructor(e={}){super({...e,type:t.META_NODE}),this.addPort(new n.DefaultPortModel({in:!0,name:"in"})),this.addPort(new n.DefaultPortModel({in:!1,name:"out"}))}}const u=()=>o.createElement("div",null,"Unknown Type");class h extends s.AbstractReactFactory{constructor(e){super(t.META_NODE),this.componentsMap=e}generateModel(){return new C}generateReactWidget(e){if(this.componentsMap.has(e.model.options.shape)){const t=this.componentsMap.get(e.model.options.shape);return o.createElement(t,{engine:this.engine,model:e.model})}return o.createElement(u,null)}}class p extends n.DefaultLinkModel{constructor(e={}){super({...e,type:t.META_LINK})}}class f extends n.DefaultLinkFactory{constructor(e){super(t.META_LINK),this.componentsMap=e}generateModel(){return new p}generateLinkSegment(e,t,r){var n;if(this.componentsMap.has(null==(n=e.getOptions())?void 0:n.shape)){const n=this.componentsMap.get(e.getOptions().shape);return o.createElement(n,{engine:this.engine,model:e,path:r,selected:t})}return o.createElement(u,null)}}function w(e,t){return t.find(t=>t.getOptions().id===e)}const b={fontFamily:"Inter, sans-serif",primaryBg:"#f1f1f1",textWhite:"#FFFFFF",chipTextColor:"#F2F2F7",chipBgColor:"rgba(60, 60, 67, 0.4)",chipPrimaryTextColor:"rgba(255, 255, 255, 0.8)",chipPrimaryBgColor:"rgba(0, 122, 255, 0.6)",breadcrumbLinkColor:"#A2A2A2",breadcrumbTextColor:"#292929",buttonPrimaryBgColor:"4353FF",buttonPrimaryBgHoverColor:"#3443E1",buttonPrimaryDisabledBgColor:"rgba(0, 122, 255, 0.4)",listItemActiveBg:"#007AFF",listSelectedTextColor:"#3C3C43",listBoxShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)",listBorderColor:"rgba(0, 0, 0, 0.04)",dividerColor:"rgba(118, 120, 125, 0.12)",dropdownBg:"rgba(246, 246, 248, 0.8)",dropdownTextColor:"rgba(60, 60, 67, 0.6)",overlayColor:"rgba(0, 0, 0, 0.4)",progressBg:"#E5E5E5",progressBar:"#017AFF",progressShadow:"inset 0 0 0.0625rem #E3E3E3",switchShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)"},{textWhite:M,dividerColor:v}=b,x=a.makeStyles(()=>({root:{zIndex:"5",width:"4rem",background:M,boxShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",borderRadius:"2rem",position:"fixed",left:"1rem",top:"50%",transform:"translateY(-50%)","&.right":{left:"auto",right:"1rem"},"& .MuiList-root":{padding:"0.75rem"}},node:{margin:"0.25rem 0","& .MuiDivider-root":{borderColor:v,width:"calc(100% - 1.5rem)",margin:"0 auto",border:"none",borderTop:"0.0625rem solid"},"& img":{display:"block",margin:"1rem 0"}}})),y=()=>{const e=x();return o.createElement(l.Box,{className:e.root+" left"},o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{selected:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.3125 15.1328L5.40625 8.36719L4.89062 9.33594L8.95312 9.57031C9.15104 9.58594 9.3099 9.53646 9.42969 9.42188C9.55469 9.30208 9.61979 9.15625 9.625 8.98438C9.63021 8.8125 9.5625 8.65365 9.42188 8.50781L1.57812 0.523438C1.44792 0.388021 1.30208 0.320312 1.14062 0.320312C0.979167 0.315104 0.841146 0.367188 0.726562 0.476562C0.611979 0.585938 0.552083 0.734375 0.546875 0.921875L0.40625 12.0469C0.401042 12.2604 0.460938 12.4271 0.585938 12.5469C0.716146 12.6615 0.869792 12.7188 1.04688 12.7188C1.22396 12.7135 1.3776 12.6302 1.50781 12.4688L4.11719 9.5625L3.05469 9.21875L5.85938 16.1562C5.92708 16.3281 6.03385 16.4427 6.17969 16.5C6.33073 16.5625 6.48177 16.5625 6.63281 16.5L8.02344 15.9375C8.1849 15.875 8.29167 15.7656 8.34375 15.6094C8.39583 15.4583 8.38542 15.2995 8.3125 15.1328Z" fill="white"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M1.25 9.91406L3.75 12.2812C3.92708 12.4479 4.10938 12.5234 4.29688 12.5078C4.48438 12.4922 4.64323 12.4115 4.77344 12.2656C4.90365 12.1198 4.96875 11.9349 4.96875 11.7109V10.0547H9.30469V14.4062H7.64062C7.41667 14.4062 7.23177 14.4714 7.08594 14.6016C6.9401 14.7266 6.85938 14.8828 6.84375 15.0703C6.82812 15.263 6.90365 15.4453 7.07031 15.6172L9.4375 18.1172C9.60417 18.2943 9.79427 18.3802 10.0078 18.375C10.2214 18.3698 10.4089 18.2812 10.5703 18.1094L12.9297 15.6172C13.0964 15.4453 13.1719 15.263 13.1562 15.0703C13.1458 14.8828 13.0651 14.7266 12.9141 14.6016C12.7682 14.4714 12.5833 14.4062 12.3594 14.4062H10.7031V10.0547H15.0312V11.7109C15.0312 11.9349 15.0964 12.1198 15.2266 12.2656C15.3568 12.4115 15.5156 12.4922 15.7031 12.5078C15.8906 12.5234 16.0729 12.4479 16.25 12.2812L18.7422 9.92188C18.9089 9.76042 18.9948 9.57292 19 9.35938C19.0052 9.14583 18.9219 8.95573 18.75 8.78906L16.25 6.42188C16.0729 6.25521 15.8906 6.17969 15.7031 6.19531C15.5156 6.21094 15.3568 6.29167 15.2266 6.4375C15.0964 6.58333 15.0312 6.76823 15.0312 6.99219V8.65625H10.7031V4.29688H12.3594C12.5833 4.29688 12.7682 4.23177 12.9141 4.10156C13.0651 3.97135 13.1458 3.8125 13.1562 3.625C13.1719 3.4375 13.0964 3.25781 12.9297 3.08594L10.5625 0.585938C10.3958 0.408854 10.2057 0.322917 9.99219 0.328125C9.78385 0.333333 9.59635 0.421875 9.42969 0.59375L7.07031 3.08594C6.90365 3.25781 6.82812 3.4375 6.84375 3.625C6.85938 3.8125 6.9401 3.97135 7.08594 4.10156C7.23177 4.23177 7.41667 4.29688 7.64062 4.29688H9.30469V8.65625H4.96875V6.99219C4.96875 6.76823 4.90365 6.58333 4.77344 6.4375C4.64323 6.29167 4.48438 6.21094 4.29688 6.19531C4.10938 6.17969 3.92708 6.25521 3.75 6.42188L1.25781 8.78125C1.09115 8.94271 1.00521 9.13021 1 9.34375C0.994792 9.55729 1.07812 9.7474 1.25 9.91406Z" fill="#3C3C43" fill-opacity="0.6"/>\n</svg>').toString("base64"),alt:"move"})))),o.createElement(l.Box,{className:e.node},o.createElement(d.Divider,null),o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="58" height="102" viewBox="0 0 58 102" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g opacity="0.5" filter="url(#filter0_d_307_751)">\n<rect x="-38" y="2" width="90" height="90" rx="45" fill="#F2F2F7"/>\n</g>\n<path d="M52 91V86.4142C52 85.5233 50.9229 85.0771 50.2929 85.7071L45.7071 90.2929C45.0771 90.9229 45.5233 92 46.4142 92H51C51.5523 92 52 91.5523 52 91Z" fill="#3C3C43" fill-opacity="0.2"/>\n<defs>\n<filter id="filter0_d_307_751" x="-44" y="0" width="102" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_307_751"/>\n<feOffset dy="4"/>\n<feGaussianBlur stdDeviation="5"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.235294 0 0 0 0 0.262745 0 0 0 0.3 0"/>\n<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_307_751"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_307_751" result="shape"/>\n</filter>\n</defs>\n</svg>').toString("base64"),alt:"node"}),o.createElement(d.Divider,null)),o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{disabled:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.3906 12.7188C11.901 12.7188 11.4531 12.8385 11.0469 13.0781C10.6458 13.3177 10.3255 13.6406 10.0859 14.0469C9.84635 14.4479 9.72656 14.8932 9.72656 15.3828C9.72656 15.8672 9.84635 16.3099 10.0859 16.7109C10.3255 17.1172 10.6458 17.4375 11.0469 17.6719C11.4531 17.9062 11.901 18.0234 12.3906 18.0234C12.8802 18.0234 13.3255 17.9062 13.7266 17.6719C14.1276 17.4375 14.4479 17.1172 14.6875 16.7109C14.9271 16.3099 15.0469 15.8672 15.0469 15.3828C15.0469 14.8932 14.9271 14.4479 14.6875 14.0469C14.4479 13.6406 14.1276 13.3177 13.7266 13.0781C13.3255 12.8385 12.8802 12.7188 12.3906 12.7188ZM12.3906 14.1562C12.7292 14.1562 13.0156 14.276 13.25 14.5156C13.4896 14.75 13.6094 15.0391 13.6094 15.3828C13.6094 15.7214 13.4896 16.0078 13.25 16.2422C13.0156 16.4766 12.7292 16.5938 12.3906 16.5938C12.0469 16.5938 11.7552 16.4766 11.5156 16.2422C11.2812 16.0078 11.1641 15.7214 11.1641 15.3828C11.1641 15.0339 11.2812 14.7422 11.5156 14.5078C11.7552 14.2734 12.0469 14.1562 12.3906 14.1562ZM3.60938 6.03906C4.09896 6.03906 4.54427 5.91927 4.94531 5.67969C5.34635 5.4401 5.66667 5.11979 5.90625 4.71875C6.14583 4.3125 6.26562 3.86458 6.26562 3.375C6.26562 2.88542 6.14583 2.4401 5.90625 2.03906C5.66667 1.63802 5.34635 1.31771 4.94531 1.07812C4.54427 0.838542 4.09896 0.71875 3.60938 0.71875C3.11979 0.71875 2.67448 0.838542 2.27344 1.07812C1.8724 1.31771 1.55208 1.63802 1.3125 2.03906C1.07292 2.4401 0.953125 2.88542 0.953125 3.375C0.953125 3.86458 1.07292 4.3125 1.3125 4.71875C1.55208 5.11979 1.8724 5.4401 2.27344 5.67969C2.67448 5.91927 3.11979 6.03906 3.60938 6.03906ZM3.60938 4.60156C3.26562 4.60156 2.97656 4.48438 2.74219 4.25C2.50781 4.01042 2.39062 3.71875 2.39062 3.375C2.39062 3.03125 2.50781 2.74219 2.74219 2.50781C2.97656 2.27344 3.26562 2.15625 3.60938 2.15625C3.95312 2.15625 4.24219 2.27344 4.47656 2.50781C4.71094 2.74219 4.82812 3.03125 4.82812 3.375C4.82812 3.71875 4.71094 4.01042 4.47656 4.25C4.24219 4.48438 3.95312 4.60156 3.60938 4.60156ZM2.85156 6.22656C2.85156 7.0599 3.10156 7.76042 3.60156 8.32812C4.10156 8.89583 4.83594 9.30729 5.80469 9.5625L9.75 10.6328C11.0052 10.9766 11.6328 11.6068 11.6328 12.5234V13.1641H13.1406V12.5234C13.1406 11.6901 12.8906 10.9922 12.3906 10.4297C11.8958 9.86198 11.1641 9.45052 10.1953 9.19531L6.25 8.125C4.98958 7.78125 4.35938 7.14844 4.35938 6.22656V5.58594H2.85156V6.22656Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M0.703125 4.22656H2.24219V2.74219C2.24219 2.36719 2.33594 2.08594 2.52344 1.89844C2.71615 1.71094 2.99479 1.61719 3.35938 1.61719H4.82812V0.078125H3.26562C2.42188 0.078125 1.78385 0.291667 1.35156 0.71875C0.919271 1.14583 0.703125 1.77865 0.703125 2.61719V4.22656ZM5.96875 1.61719H10.0234V0.078125H5.96875V1.61719ZM13.75 4.22656H15.2891V2.61719C15.2891 1.77865 15.0729 1.14583 14.6406 0.71875C14.2083 0.291667 13.5703 0.078125 12.7266 0.078125H11.1641V1.61719H12.6328C12.9922 1.61719 13.2682 1.71094 13.4609 1.89844C13.6536 2.08594 13.75 2.36719 13.75 2.74219V4.22656ZM13.75 9.36719H15.2891V5.36719H13.75V9.36719ZM11.1641 14.6641H12.7266C13.5703 14.6641 14.2083 14.4479 14.6406 14.0156C15.0729 13.5885 15.2891 12.9583 15.2891 12.125V10.5156H13.75V11.9922C13.75 12.3724 13.6536 12.6562 13.4609 12.8438C13.2682 13.0312 12.9922 13.125 12.6328 13.125H11.1641V14.6641ZM5.96875 14.6641H10.0234V13.125H5.96875V14.6641ZM3.26562 14.6641H4.82812V13.125H3.35938C2.99479 13.125 2.71615 13.0312 2.52344 12.8438C2.33594 12.6562 2.24219 12.3724 2.24219 11.9922V10.5156H0.703125V12.125C0.703125 12.9583 0.919271 13.5885 1.35156 14.0156C1.78385 14.4479 2.42188 14.6641 3.26562 14.6641ZM0.703125 9.36719H2.24219V5.36719H0.703125V9.36719Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"fullscreen"})))))},E=a.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#fffff"}}));exports.ComponentsMap=class{constructor(e,t){this.nodes=e,this.links=t}},exports.MetaLink=class{constructor(e,t,r,o,n,i,s,a){this.sourceId=o,this.sourcePortId=n,this.targetId=i,this.targetPortId=s,this.options=new g(e,t,r,a)}getSourceId(){return this.sourceId}getSourcePortId(){return this.sourcePortId}getTargetId(){return this.targetId}getTargetPortId(){return this.targetPortId}},exports.MetaLinkModel=p,exports.MetaNode=class{constructor(e,t,r,o,n){this.children=[],n.set("position",o),this.options=new g(e,t,r,n)}},exports.MetaNodeModel=C,exports.Position=class{constructor(e,t){this.x=e,this.y=t}},exports.default=({metaNodes:e,metaLinks:t,componentsMap:o,wrapperClassName:a,metaTheme:l})=>{const g=E(),u=i();u.getNodeFactories().registerFactory(new h(o.nodes)),u.getLinkFactories().registerFactory(new f(o.links));const M=new n.DiagramModel,v=e.map(e=>new C(Object.fromEntries(e.options.options))),x=t.map(e=>function(e,t){const r=new p(Object.fromEntries(e.options.options)),o=w(e.getSourceId(),t),n=w(e.getTargetId(),t);if(o&&n)return r.setSourcePort(o.getPort(e.getSourcePortId())),r.setTargetPort(n.getPort(e.getTargetPortId())),r}(e,v)).filter(e=>void 0!==e);M.addAll(...v,...x),u.setModel(M);const L=a||g.container;return r.createElement(c.ThemeProvider,{theme:c.createTheme((B=null==l?void 0:l.customThemeVariables,(e=>{const{primaryBg:t,fontFamily:r,chipTextColor:o,chipBgColor:n,textWhite:i,listItemActiveBg:s,listSelectedTextColor:a,listBoxShadow:l,listBorderColor:d}=e;return{components:{MuiCssBaseline:{styleOverrides:`\n          html {\n            background: ${t};\n            font-family: ${r};\n          }\n          body {\n            background-color:${t};\n            font-family: ${r};\n            font-size: 1rem;\n          }\n        `},MuiList:{styleOverrides:{root:{"&.customSwitch":{padding:"0.125rem",background:o,borderRadius:"0.5rem",display:"flex","& .MuiListItemButton-root":{padding:"0.25rem 0.75rem",borderRadius:"0.4375rem",width:"10.59375rem",display:"flex",alignItems:"center",justifyContent:"center","&:not(:last-child)":{marginBottom:"0"},"&.Mui-disabled":{opacity:1},"&.Mui-selected":{background:i,boxShadow:l,border:"0.03125rem solid "+d,"& .MuiTypography-root":{color:a}}},"& .MuiChip-root":{marginLeft:"0.25rem"},"& .MuiTypography-root":{fontWeight:500,fontSize:"0.8125rem",lineHeight:"1.25rem",letterSpacing:"-0.005rem",color:n,margin:0}}}}},MuiListItemIcon:{styleOverrides:{root:{minWidth:"inherit"}}},MuiListItemButton:{styleOverrides:{root:{padding:0,width:"2.5rem",height:"2.5rem",borderRadius:"50%",justifyContent:"center",backgroundColor:o,"&:hover":{backgroundColor:o},"&:not(:last-child)":{marginBottom:"0.75rem"},"&.Mui-selected":{backgroundColor:s,"&:hover":{backgroundColor:s}},"&.Mui-disabled":{opacity:.8}}}}}}})({...b,...B})))},r.createElement(m,null),r.createElement(d.Box,{className:L},r.createElement(y,null),r.createElement(s.CanvasWidget,{className:`${g.canvasContainer} ${null==l?void 0:l.canvasClassName}`,engine:u})));var B};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=require("react"),o=e(r),n=require("@projectstorm/react-diagrams"),i=e(n),s=require("@projectstorm/react-canvas-core"),a=require("@mui/styles"),l=require("@mui/system"),d=require("@mui/material"),c=require("@mui/material/styles"),m=e(require("@mui/material/CssBaseline"));class g{constructor(e,t,r,o){this.options=o,this.options.set("id",e),this.options.set("name",t),this.options.set("shape",r)}getId(){return this.options.get("id")}getShape(){return this.options.get("shape")}}!function(e){e.META_NODE="meta-node-type",e.META_LINK="meta-link-type"}(t||(t={}));class C extends n.NodeModel{constructor(e={}){super({...e,type:t.META_NODE}),this.addPort(new n.DefaultPortModel({in:!0,name:"in"})),this.addPort(new n.DefaultPortModel({in:!1,name:"out"}))}}const u=()=>o.createElement("div",null,"Unknown Type");class p extends s.AbstractReactFactory{constructor(e){super(t.META_NODE),this.componentsMap=e}generateModel(){return new C}generateReactWidget(e){if(this.componentsMap.has(e.model.options.shape)){const t=this.componentsMap.get(e.model.options.shape);return o.createElement(t,{key:"node-factory-"+e.model.getOptions().id,engine:this.engine,model:e.model})}return o.createElement(u,null)}}class h extends n.DefaultLinkModel{constructor(e={}){super({...e,type:t.META_LINK})}}class f extends n.DefaultLinkFactory{constructor(e){super(t.META_LINK),this.componentsMap=e}generateModel(){return new h}generateLinkSegment(e,t,r){var n;if(this.componentsMap.has(null==(n=e.getOptions())?void 0:n.shape)){const n=this.componentsMap.get(e.getOptions().shape);return o.createElement(n,{key:"link-factory-"+e.getOptions().id,engine:this.engine,model:e,path:r,selected:t})}return o.createElement(u,null)}}function w(e,t){return t.find(t=>t.getOptions().id===e)}const b={fontFamily:"Inter, sans-serif",primaryBg:"#f1f1f1",textWhite:"#FFFFFF",chipTextColor:"#F2F2F7",chipBgColor:"rgba(60, 60, 67, 0.4)",chipPrimaryTextColor:"rgba(255, 255, 255, 0.8)",chipPrimaryBgColor:"rgba(0, 122, 255, 0.6)",breadcrumbLinkColor:"#A2A2A2",breadcrumbTextColor:"#292929",buttonPrimaryBgColor:"4353FF",buttonPrimaryBgHoverColor:"#3443E1",buttonPrimaryDisabledBgColor:"rgba(0, 122, 255, 0.4)",listItemActiveBg:"#007AFF",listSelectedTextColor:"#3C3C43",listBoxShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)",listBorderColor:"rgba(0, 0, 0, 0.04)",dividerColor:"rgba(118, 120, 125, 0.12)",dropdownBg:"rgba(246, 246, 248, 0.8)",dropdownTextColor:"rgba(60, 60, 67, 0.6)",overlayColor:"rgba(0, 0, 0, 0.4)",progressBg:"#E5E5E5",progressBar:"#017AFF",progressShadow:"inset 0 0 0.0625rem #E3E3E3",switchShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)"},{textWhite:M,dividerColor:v}=b,y=a.makeStyles(()=>({root:{zIndex:"5",width:"4rem",background:M,boxShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",borderRadius:"2rem",position:"fixed",left:"1rem",top:"50%",transform:"translateY(-50%)","&.right":{left:"auto",right:"1rem"},"& .MuiList-root":{padding:"0.75rem"}},node:{margin:"0.25rem 0","& .MuiDivider-root":{borderColor:v,width:"calc(100% - 1.5rem)",margin:"0 auto",border:"none",borderTop:"0.0625rem solid"},"& img":{display:"block",margin:"1rem 0"}}})),x=()=>{const e=y();return o.createElement(l.Box,{className:e.root+" left"},o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{selected:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.3125 15.1328L5.40625 8.36719L4.89062 9.33594L8.95312 9.57031C9.15104 9.58594 9.3099 9.53646 9.42969 9.42188C9.55469 9.30208 9.61979 9.15625 9.625 8.98438C9.63021 8.8125 9.5625 8.65365 9.42188 8.50781L1.57812 0.523438C1.44792 0.388021 1.30208 0.320312 1.14062 0.320312C0.979167 0.315104 0.841146 0.367188 0.726562 0.476562C0.611979 0.585938 0.552083 0.734375 0.546875 0.921875L0.40625 12.0469C0.401042 12.2604 0.460938 12.4271 0.585938 12.5469C0.716146 12.6615 0.869792 12.7188 1.04688 12.7188C1.22396 12.7135 1.3776 12.6302 1.50781 12.4688L4.11719 9.5625L3.05469 9.21875L5.85938 16.1562C5.92708 16.3281 6.03385 16.4427 6.17969 16.5C6.33073 16.5625 6.48177 16.5625 6.63281 16.5L8.02344 15.9375C8.1849 15.875 8.29167 15.7656 8.34375 15.6094C8.39583 15.4583 8.38542 15.2995 8.3125 15.1328Z" fill="white"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M1.25 9.91406L3.75 12.2812C3.92708 12.4479 4.10938 12.5234 4.29688 12.5078C4.48438 12.4922 4.64323 12.4115 4.77344 12.2656C4.90365 12.1198 4.96875 11.9349 4.96875 11.7109V10.0547H9.30469V14.4062H7.64062C7.41667 14.4062 7.23177 14.4714 7.08594 14.6016C6.9401 14.7266 6.85938 14.8828 6.84375 15.0703C6.82812 15.263 6.90365 15.4453 7.07031 15.6172L9.4375 18.1172C9.60417 18.2943 9.79427 18.3802 10.0078 18.375C10.2214 18.3698 10.4089 18.2812 10.5703 18.1094L12.9297 15.6172C13.0964 15.4453 13.1719 15.263 13.1562 15.0703C13.1458 14.8828 13.0651 14.7266 12.9141 14.6016C12.7682 14.4714 12.5833 14.4062 12.3594 14.4062H10.7031V10.0547H15.0312V11.7109C15.0312 11.9349 15.0964 12.1198 15.2266 12.2656C15.3568 12.4115 15.5156 12.4922 15.7031 12.5078C15.8906 12.5234 16.0729 12.4479 16.25 12.2812L18.7422 9.92188C18.9089 9.76042 18.9948 9.57292 19 9.35938C19.0052 9.14583 18.9219 8.95573 18.75 8.78906L16.25 6.42188C16.0729 6.25521 15.8906 6.17969 15.7031 6.19531C15.5156 6.21094 15.3568 6.29167 15.2266 6.4375C15.0964 6.58333 15.0312 6.76823 15.0312 6.99219V8.65625H10.7031V4.29688H12.3594C12.5833 4.29688 12.7682 4.23177 12.9141 4.10156C13.0651 3.97135 13.1458 3.8125 13.1562 3.625C13.1719 3.4375 13.0964 3.25781 12.9297 3.08594L10.5625 0.585938C10.3958 0.408854 10.2057 0.322917 9.99219 0.328125C9.78385 0.333333 9.59635 0.421875 9.42969 0.59375L7.07031 3.08594C6.90365 3.25781 6.82812 3.4375 6.84375 3.625C6.85938 3.8125 6.9401 3.97135 7.08594 4.10156C7.23177 4.23177 7.41667 4.29688 7.64062 4.29688H9.30469V8.65625H4.96875V6.99219C4.96875 6.76823 4.90365 6.58333 4.77344 6.4375C4.64323 6.29167 4.48438 6.21094 4.29688 6.19531C4.10938 6.17969 3.92708 6.25521 3.75 6.42188L1.25781 8.78125C1.09115 8.94271 1.00521 9.13021 1 9.34375C0.994792 9.55729 1.07812 9.7474 1.25 9.91406Z" fill="#3C3C43" fill-opacity="0.6"/>\n</svg>').toString("base64"),alt:"move"})))),o.createElement(l.Box,{className:e.node},o.createElement(d.Divider,null),o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="58" height="102" viewBox="0 0 58 102" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g opacity="0.5" filter="url(#filter0_d_307_751)">\n<rect x="-38" y="2" width="90" height="90" rx="45" fill="#F2F2F7"/>\n</g>\n<path d="M52 91V86.4142C52 85.5233 50.9229 85.0771 50.2929 85.7071L45.7071 90.2929C45.0771 90.9229 45.5233 92 46.4142 92H51C51.5523 92 52 91.5523 52 91Z" fill="#3C3C43" fill-opacity="0.2"/>\n<defs>\n<filter id="filter0_d_307_751" x="-44" y="0" width="102" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_307_751"/>\n<feOffset dy="4"/>\n<feGaussianBlur stdDeviation="5"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.235294 0 0 0 0 0.262745 0 0 0 0.3 0"/>\n<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_307_751"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_307_751" result="shape"/>\n</filter>\n</defs>\n</svg>').toString("base64"),alt:"node"}),o.createElement(d.Divider,null)),o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{disabled:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.3906 12.7188C11.901 12.7188 11.4531 12.8385 11.0469 13.0781C10.6458 13.3177 10.3255 13.6406 10.0859 14.0469C9.84635 14.4479 9.72656 14.8932 9.72656 15.3828C9.72656 15.8672 9.84635 16.3099 10.0859 16.7109C10.3255 17.1172 10.6458 17.4375 11.0469 17.6719C11.4531 17.9062 11.901 18.0234 12.3906 18.0234C12.8802 18.0234 13.3255 17.9062 13.7266 17.6719C14.1276 17.4375 14.4479 17.1172 14.6875 16.7109C14.9271 16.3099 15.0469 15.8672 15.0469 15.3828C15.0469 14.8932 14.9271 14.4479 14.6875 14.0469C14.4479 13.6406 14.1276 13.3177 13.7266 13.0781C13.3255 12.8385 12.8802 12.7188 12.3906 12.7188ZM12.3906 14.1562C12.7292 14.1562 13.0156 14.276 13.25 14.5156C13.4896 14.75 13.6094 15.0391 13.6094 15.3828C13.6094 15.7214 13.4896 16.0078 13.25 16.2422C13.0156 16.4766 12.7292 16.5938 12.3906 16.5938C12.0469 16.5938 11.7552 16.4766 11.5156 16.2422C11.2812 16.0078 11.1641 15.7214 11.1641 15.3828C11.1641 15.0339 11.2812 14.7422 11.5156 14.5078C11.7552 14.2734 12.0469 14.1562 12.3906 14.1562ZM3.60938 6.03906C4.09896 6.03906 4.54427 5.91927 4.94531 5.67969C5.34635 5.4401 5.66667 5.11979 5.90625 4.71875C6.14583 4.3125 6.26562 3.86458 6.26562 3.375C6.26562 2.88542 6.14583 2.4401 5.90625 2.03906C5.66667 1.63802 5.34635 1.31771 4.94531 1.07812C4.54427 0.838542 4.09896 0.71875 3.60938 0.71875C3.11979 0.71875 2.67448 0.838542 2.27344 1.07812C1.8724 1.31771 1.55208 1.63802 1.3125 2.03906C1.07292 2.4401 0.953125 2.88542 0.953125 3.375C0.953125 3.86458 1.07292 4.3125 1.3125 4.71875C1.55208 5.11979 1.8724 5.4401 2.27344 5.67969C2.67448 5.91927 3.11979 6.03906 3.60938 6.03906ZM3.60938 4.60156C3.26562 4.60156 2.97656 4.48438 2.74219 4.25C2.50781 4.01042 2.39062 3.71875 2.39062 3.375C2.39062 3.03125 2.50781 2.74219 2.74219 2.50781C2.97656 2.27344 3.26562 2.15625 3.60938 2.15625C3.95312 2.15625 4.24219 2.27344 4.47656 2.50781C4.71094 2.74219 4.82812 3.03125 4.82812 3.375C4.82812 3.71875 4.71094 4.01042 4.47656 4.25C4.24219 4.48438 3.95312 4.60156 3.60938 4.60156ZM2.85156 6.22656C2.85156 7.0599 3.10156 7.76042 3.60156 8.32812C4.10156 8.89583 4.83594 9.30729 5.80469 9.5625L9.75 10.6328C11.0052 10.9766 11.6328 11.6068 11.6328 12.5234V13.1641H13.1406V12.5234C13.1406 11.6901 12.8906 10.9922 12.3906 10.4297C11.8958 9.86198 11.1641 9.45052 10.1953 9.19531L6.25 8.125C4.98958 7.78125 4.35938 7.14844 4.35938 6.22656V5.58594H2.85156V6.22656Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M0.703125 4.22656H2.24219V2.74219C2.24219 2.36719 2.33594 2.08594 2.52344 1.89844C2.71615 1.71094 2.99479 1.61719 3.35938 1.61719H4.82812V0.078125H3.26562C2.42188 0.078125 1.78385 0.291667 1.35156 0.71875C0.919271 1.14583 0.703125 1.77865 0.703125 2.61719V4.22656ZM5.96875 1.61719H10.0234V0.078125H5.96875V1.61719ZM13.75 4.22656H15.2891V2.61719C15.2891 1.77865 15.0729 1.14583 14.6406 0.71875C14.2083 0.291667 13.5703 0.078125 12.7266 0.078125H11.1641V1.61719H12.6328C12.9922 1.61719 13.2682 1.71094 13.4609 1.89844C13.6536 2.08594 13.75 2.36719 13.75 2.74219V4.22656ZM13.75 9.36719H15.2891V5.36719H13.75V9.36719ZM11.1641 14.6641H12.7266C13.5703 14.6641 14.2083 14.4479 14.6406 14.0156C15.0729 13.5885 15.2891 12.9583 15.2891 12.125V10.5156H13.75V11.9922C13.75 12.3724 13.6536 12.6562 13.4609 12.8438C13.2682 13.0312 12.9922 13.125 12.6328 13.125H11.1641V14.6641ZM5.96875 14.6641H10.0234V13.125H5.96875V14.6641ZM3.26562 14.6641H4.82812V13.125H3.35938C2.99479 13.125 2.71615 13.0312 2.52344 12.8438C2.33594 12.6562 2.24219 12.3724 2.24219 11.9922V10.5156H0.703125V12.125C0.703125 12.9583 0.919271 13.5885 1.35156 14.0156C1.78385 14.4479 2.42188 14.6641 3.26562 14.6641ZM0.703125 9.36719H2.24219V5.36719H0.703125V9.36719Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"fullscreen"})))))},E=a.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#fffff"}}));exports.ComponentsMap=class{constructor(e,t){this.nodes=e,this.links=t}},exports.MetaLink=class{constructor(e,t,r,o,n,i,s,a){this.sourceId=o,this.sourcePortId=n,this.targetId=i,this.targetPortId=s,this.options=new g(e,t,r,a)}getSourceId(){return this.sourceId}getSourcePortId(){return this.sourcePortId}getTargetId(){return this.targetId}getTargetPortId(){return this.targetPortId}},exports.MetaLinkModel=h,exports.MetaNode=class{constructor(e,t,r,o,n){this.children=[],n.set("position",o),this.options=new g(e,t,r,n)}},exports.MetaNodeModel=C,exports.Position=class{constructor(e,t){this.x=e,this.y=t}},exports.default=({metaNodes:e,metaLinks:t,componentsMap:o,wrapperClassName:a,metaTheme:l})=>{const g=E(),u=i();u.getNodeFactories().registerFactory(new p(o.nodes)),u.getLinkFactories().registerFactory(new f(o.links));const M=new n.DiagramModel,v=e.map(e=>new C(Object.fromEntries(e.options.options))),y=t.map(e=>function(e,t){const r=new h(Object.fromEntries(e.options.options)),o=w(e.getSourceId(),t),n=w(e.getTargetId(),t);if(o&&n)return r.setSourcePort(o.getPort(e.getSourcePortId())),r.setTargetPort(n.getPort(e.getTargetPortId())),r}(e,v)).filter(e=>void 0!==e);M.addAll(...v,...y),u.setModel(M);const L=a||g.container;return r.createElement(c.ThemeProvider,{theme:c.createTheme((B=null==l?void 0:l.customThemeVariables,(e=>{const{primaryBg:t,fontFamily:r,chipTextColor:o,chipBgColor:n,textWhite:i,listItemActiveBg:s,listSelectedTextColor:a,listBoxShadow:l,listBorderColor:d}=e;return{components:{MuiCssBaseline:{styleOverrides:`\n          html {\n            background: ${t};\n            font-family: ${r};\n          }\n          body {\n            background-color:${t};\n            font-family: ${r};\n            font-size: 1rem;\n          }\n        `},MuiList:{styleOverrides:{root:{"&.customSwitch":{padding:"0.125rem",background:o,borderRadius:"0.5rem",display:"flex","& .MuiListItemButton-root":{padding:"0.25rem 0.75rem",borderRadius:"0.4375rem",width:"10.59375rem",display:"flex",alignItems:"center",justifyContent:"center","&:not(:last-child)":{marginBottom:"0"},"&.Mui-disabled":{opacity:1},"&.Mui-selected":{background:i,boxShadow:l,border:"0.03125rem solid "+d,"& .MuiTypography-root":{color:a}}},"& .MuiChip-root":{marginLeft:"0.25rem"},"& .MuiTypography-root":{fontWeight:500,fontSize:"0.8125rem",lineHeight:"1.25rem",letterSpacing:"-0.005rem",color:n,margin:0}}}}},MuiListItemIcon:{styleOverrides:{root:{minWidth:"inherit"}}},MuiListItemButton:{styleOverrides:{root:{padding:0,width:"2.5rem",height:"2.5rem",borderRadius:"50%",justifyContent:"center",backgroundColor:o,"&:hover":{backgroundColor:o},"&:not(:last-child)":{marginBottom:"0.75rem"},"&.Mui-selected":{backgroundColor:s,"&:hover":{backgroundColor:s}},"&.Mui-disabled":{opacity:.8}}}}}}})({...b,...B})))},r.createElement(m,null),r.createElement(d.Box,{className:L},r.createElement(x,null),r.createElement(s.CanvasWidget,{className:`${g.canvasContainer} ${null==l?void 0:l.canvasClassName}`,engine:u})));var B};
 //# sourceMappingURL=meta-diagram.cjs.production.min.js.map
diff --git a/dist/meta-diagram.cjs.production.min.js.map b/dist/meta-diagram.cjs.production.min.js.map
index 8f12b7f..5121e5c 100644
--- a/dist/meta-diagram.cjs.production.min.js.map
+++ b/dist/meta-diagram.cjs.production.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"meta-diagram.cjs.production.min.js","sources":["../src/constants.ts","../src/models/MetaOptions.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts","../src/theme.ts"],"sourcesContent":["export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          engine={this.engine}\n          model={model}\n          path={path}\n          selected={selected}\n        />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#fffff',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n  metaTheme: {\n    customThemeVariables: {};\n    canvasClassName: string;\n  };\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  metaTheme,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = metaNodes.map(\n    mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n  );\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n\n  return (\n    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>\n      <CssBaseline />\n      <Box className={containerClassName}>\n        <Sidebar />\n        <CanvasWidget\n          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}\n          engine={engine}\n        />\n      </Box>\n    </ThemeProvider>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  children: MetaNode[];\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    options: Map<string, any>\n  ) {\n    this.children = [];\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","import vars from './components/assets/styles/variables';\n\ntype ThemeVars = {\n  [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n  const {\n    primaryBg,\n    fontFamily,\n    chipTextColor,\n    chipBgColor,\n    textWhite,\n    listItemActiveBg,\n    listSelectedTextColor,\n    listBoxShadow,\n    listBorderColor,\n  } = params;\n  return {\n    components: {\n      MuiCssBaseline: {\n        styleOverrides: `\n          html {\n            background: ${primaryBg};\n            font-family: ${fontFamily};\n          }\n          body {\n            background-color:${primaryBg};\n            font-family: ${fontFamily};\n            font-size: 1rem;\n          }\n        `,\n      },\n      MuiList: {\n        styleOverrides: {\n          root: {\n            '&.customSwitch': {\n              padding: '0.125rem',\n              background: chipTextColor,\n              borderRadius: '0.5rem',\n              display: 'flex',\n              '& .MuiListItemButton-root': {\n                padding: '0.25rem 0.75rem',\n                borderRadius: '0.4375rem',\n                width: '10.59375rem',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                '&:not(:last-child)': {\n                  marginBottom: '0',\n                },\n                '&.Mui-disabled': {\n                  opacity: 1,\n                },\n                '&.Mui-selected': {\n                  background: textWhite,\n                  boxShadow: listBoxShadow,\n                  border: `0.03125rem solid ${listBorderColor}`,\n                  '& .MuiTypography-root': {\n                    color: listSelectedTextColor,\n                  },\n                },\n              },\n              '& .MuiChip-root': {\n                marginLeft: '0.25rem',\n              },\n              '& .MuiTypography-root': {\n                fontWeight: 500,\n                fontSize: '0.8125rem',\n                lineHeight: '1.25rem',\n                letterSpacing: '-0.005rem',\n                color: chipBgColor,\n                margin: 0,\n              },\n            },\n          },\n        },\n      },\n      MuiListItemIcon: {\n        styleOverrides: {\n          root: {\n            minWidth: 'inherit',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            padding: 0,\n            width: '2.5rem',\n            height: '2.5rem',\n            borderRadius: '50%',\n            justifyContent: 'center',\n            backgroundColor: chipTextColor,\n            '&:hover': {\n              backgroundColor: chipTextColor,\n            },\n            '&:not(:last-child)': {\n              marginBottom: '0.75rem',\n            },\n            '&.Mui-selected': {\n              backgroundColor: listItemActiveBg,\n              '&:hover': {\n                backgroundColor: listItemActiveBg,\n              },\n            },\n            '&.Mui-disabled': {\n              opacity: 0.8,\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default (customVariables: ThemeVars) =>\n  applicationTheme({\n    ...vars,\n    ...customVariables,\n  });\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","options","this","set","getId","get","getShape","MetaNodeModel","NodeModel","super","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","_model$getOptions","getNode","nodes","find","n","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","position","left","top","transform","&.right","right","& .MuiList-root","padding","node","margin","& .MuiDivider-root","borderColor","border","borderTop","& img","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","toString","alt","Divider","disabled","_","container","height","canvasContainer","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","children","x","y","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","Object","fromEntries","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","undefined","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customVariables","customThemeVariables","params","components","MuiCssBaseline","styleOverrides","MuiList","&.customSwitch","& .MuiListItemButton-root","alignItems","justifyContent","&:not(:last-child)","marginBottom","&.Mui-disabled","opacity","&.Mui-selected","& .MuiTypography-root","color","& .MuiChip-root","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","backgroundColor","&:hover","applicationTheme","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"meta-diagram.cjs.production.min.js","sources":["../src/constants.ts","../src/models/MetaOptions.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts","../src/theme.ts"],"sourcesContent":["export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          key={`node-factory-${event.model.getOptions().id}`}\n          engine={this.engine}\n          model={event.model}\n        />\n      );\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          key={`link-factory-${model.getOptions().id}`}\n          engine={this.engine}\n          model={model}\n          path={path}\n          selected={selected}\n        />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#fffff',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n  metaTheme: {\n    customThemeVariables: {};\n    canvasClassName: string;\n  };\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  metaTheme,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = metaNodes.map(\n    mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n  );\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n\n  return (\n    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>\n      <CssBaseline />\n      <Box className={containerClassName}>\n        <Sidebar />\n        <CanvasWidget\n          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}\n          engine={engine}\n        />\n      </Box>\n    </ThemeProvider>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  children: MetaNode[];\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    options: Map<string, any>\n  ) {\n    this.children = [];\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","import vars from './components/assets/styles/variables';\n\ntype ThemeVars = {\n  [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n  const {\n    primaryBg,\n    fontFamily,\n    chipTextColor,\n    chipBgColor,\n    textWhite,\n    listItemActiveBg,\n    listSelectedTextColor,\n    listBoxShadow,\n    listBorderColor,\n  } = params;\n  return {\n    components: {\n      MuiCssBaseline: {\n        styleOverrides: `\n          html {\n            background: ${primaryBg};\n            font-family: ${fontFamily};\n          }\n          body {\n            background-color:${primaryBg};\n            font-family: ${fontFamily};\n            font-size: 1rem;\n          }\n        `,\n      },\n      MuiList: {\n        styleOverrides: {\n          root: {\n            '&.customSwitch': {\n              padding: '0.125rem',\n              background: chipTextColor,\n              borderRadius: '0.5rem',\n              display: 'flex',\n              '& .MuiListItemButton-root': {\n                padding: '0.25rem 0.75rem',\n                borderRadius: '0.4375rem',\n                width: '10.59375rem',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                '&:not(:last-child)': {\n                  marginBottom: '0',\n                },\n                '&.Mui-disabled': {\n                  opacity: 1,\n                },\n                '&.Mui-selected': {\n                  background: textWhite,\n                  boxShadow: listBoxShadow,\n                  border: `0.03125rem solid ${listBorderColor}`,\n                  '& .MuiTypography-root': {\n                    color: listSelectedTextColor,\n                  },\n                },\n              },\n              '& .MuiChip-root': {\n                marginLeft: '0.25rem',\n              },\n              '& .MuiTypography-root': {\n                fontWeight: 500,\n                fontSize: '0.8125rem',\n                lineHeight: '1.25rem',\n                letterSpacing: '-0.005rem',\n                color: chipBgColor,\n                margin: 0,\n              },\n            },\n          },\n        },\n      },\n      MuiListItemIcon: {\n        styleOverrides: {\n          root: {\n            minWidth: 'inherit',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            padding: 0,\n            width: '2.5rem',\n            height: '2.5rem',\n            borderRadius: '50%',\n            justifyContent: 'center',\n            backgroundColor: chipTextColor,\n            '&:hover': {\n              backgroundColor: chipTextColor,\n            },\n            '&:not(:last-child)': {\n              marginBottom: '0.75rem',\n            },\n            '&.Mui-selected': {\n              backgroundColor: listItemActiveBg,\n              '&:hover': {\n                backgroundColor: listItemActiveBg,\n              },\n            },\n            '&.Mui-disabled': {\n              opacity: 0.8,\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default (customVariables: ThemeVars) =>\n  applicationTheme({\n    ...vars,\n    ...customVariables,\n  });\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","options","this","set","getId","get","getShape","MetaNodeModel","NodeModel","super","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","_model$getOptions","getNode","nodes","find","n","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","position","left","top","transform","&.right","right","& .MuiList-root","padding","node","margin","& .MuiDivider-root","borderColor","border","borderTop","& img","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","toString","alt","Divider","disabled","_","container","height","canvasContainer","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","children","x","y","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","Object","fromEntries","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","undefined","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customVariables","customThemeVariables","params","components","MuiCssBaseline","styleOverrides","MuiList","&.customSwitch","& .MuiListItemButton-root","alignItems","justifyContent","&:not(:last-child)","marginBottom","&.Mui-disabled","opacity","&.Mui-selected","& .MuiTypography-root","color","& .MuiChip-root","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","backgroundColor","&:hover","applicationTheme","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/meta-diagram.esm.js b/dist/meta-diagram.esm.js
index 6256211..700a5bc 100644
--- a/dist/meta-diagram.esm.js
+++ b/dist/meta-diagram.esm.js
@@ -110,12 +110,14 @@ class MetaNodeFactory extends AbstractReactFactory {
 
   generateReactWidget(event) {
     if (this.componentsMap.has(event.model.options.shape)) {
-      const ReactComponentType = this.componentsMap.get(event.model.options.shape); // @ts-ignore
-
-      return React__default.createElement(ReactComponentType, {
-        engine: this.engine,
-        model: event.model
-      });
+      const ReactComponentType = this.componentsMap.get(event.model.options.shape);
+      return (// @ts-ignore
+        React__default.createElement(ReactComponentType, {
+          key: `node-factory-${event.model.getOptions().id}`,
+          engine: this.engine,
+          model: event.model
+        })
+      );
     } // TODO: Generate default node instead
 
 
@@ -152,6 +154,7 @@ class MetaLinkFactory extends DefaultLinkFactory {
       model.getOptions().shape);
       return (// @ts-ignore
         React__default.createElement(ReactComponentType, {
+          key: `link-factory-${model.getOptions().id}`,
           engine: this.engine,
           model: model,
           path: path,
diff --git a/dist/meta-diagram.esm.js.map b/dist/meta-diagram.esm.js.map
index 81d901d..2e776aa 100644
--- a/dist/meta-diagram.esm.js.map
+++ b/dist/meta-diagram.esm.js.map
@@ -1 +1 @@
-{"version":3,"file":"meta-diagram.esm.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/theme.ts","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  children: MetaNode[];\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    options: Map<string, any>\n  ) {\n    this.children = [];\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          engine={this.engine}\n          model={model}\n          path={path}\n          selected={selected}\n        />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\n\ntype ThemeVars = {\n  [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n  const {\n    primaryBg,\n    fontFamily,\n    chipTextColor,\n    chipBgColor,\n    textWhite,\n    listItemActiveBg,\n    listSelectedTextColor,\n    listBoxShadow,\n    listBorderColor,\n  } = params;\n  return {\n    components: {\n      MuiCssBaseline: {\n        styleOverrides: `\n          html {\n            background: ${primaryBg};\n            font-family: ${fontFamily};\n          }\n          body {\n            background-color:${primaryBg};\n            font-family: ${fontFamily};\n            font-size: 1rem;\n          }\n        `,\n      },\n      MuiList: {\n        styleOverrides: {\n          root: {\n            '&.customSwitch': {\n              padding: '0.125rem',\n              background: chipTextColor,\n              borderRadius: '0.5rem',\n              display: 'flex',\n              '& .MuiListItemButton-root': {\n                padding: '0.25rem 0.75rem',\n                borderRadius: '0.4375rem',\n                width: '10.59375rem',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                '&:not(:last-child)': {\n                  marginBottom: '0',\n                },\n                '&.Mui-disabled': {\n                  opacity: 1,\n                },\n                '&.Mui-selected': {\n                  background: textWhite,\n                  boxShadow: listBoxShadow,\n                  border: `0.03125rem solid ${listBorderColor}`,\n                  '& .MuiTypography-root': {\n                    color: listSelectedTextColor,\n                  },\n                },\n              },\n              '& .MuiChip-root': {\n                marginLeft: '0.25rem',\n              },\n              '& .MuiTypography-root': {\n                fontWeight: 500,\n                fontSize: '0.8125rem',\n                lineHeight: '1.25rem',\n                letterSpacing: '-0.005rem',\n                color: chipBgColor,\n                margin: 0,\n              },\n            },\n          },\n        },\n      },\n      MuiListItemIcon: {\n        styleOverrides: {\n          root: {\n            minWidth: 'inherit',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            padding: 0,\n            width: '2.5rem',\n            height: '2.5rem',\n            borderRadius: '50%',\n            justifyContent: 'center',\n            backgroundColor: chipTextColor,\n            '&:hover': {\n              backgroundColor: chipTextColor,\n            },\n            '&:not(:last-child)': {\n              marginBottom: '0.75rem',\n            },\n            '&.Mui-selected': {\n              backgroundColor: listItemActiveBg,\n              '&:hover': {\n                backgroundColor: listItemActiveBg,\n              },\n            },\n            '&.Mui-disabled': {\n              opacity: 0.8,\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default (customVariables: ThemeVars) =>\n  applicationTheme({\n    ...vars,\n    ...customVariables,\n  });\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#fffff',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n  metaTheme: {\n    customThemeVariables: {};\n    canvasClassName: string;\n  };\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  metaTheme,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = metaNodes.map(\n    mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n  );\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n\n  return (\n    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>\n      <CssBaseline />\n      <Box className={containerClassName}>\n        <Sidebar />\n        <CanvasWidget\n          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}\n          engine={engine}\n        />\n      </Box>\n    </ThemeProvider>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","alignItems","justifyContent","marginBottom","opacity","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":";;;;;;;;;MAGaA;EAGXC,YACEC,IACAC,MACAC,OACAC;IAEA,KAAKA,OAAL,GAAeA,OAAf;IACA,KAAKA,OAAL,CAAaC,GAAb,CAAiB,IAAjB,EAAuBJ,EAAvB;IACA,KAAKG,OAAL,CAAaC,GAAb,CAAiB,MAAjB,EAAyBH,IAAzB;IACA,KAAKE,OAAL,CAAaC,GAAb,CAAiB,OAAjB,EAA0BF,KAA1B;;;EAGFG,KAAK;IACH,OAAO,KAAKF,OAAL,CAAaG,GAAb,CAAiB,IAAjB,CAAP;;;EAGFC,QAAQ;IACN,OAAO,KAAKJ,OAAL,CAAaG,GAAb,CAAiB,OAAjB,CAAP;;;;;MCpBSE;EAIXT,YACEC,IACAC,MACAC,OACAO,UACAN;IAEA,KAAKO,QAAL,GAAgB,EAAhB;IACAP,OAAO,CAACC,GAAR,CAAY,UAAZ,EAAwBK,QAAxB;IACA,KAAKN,OAAL,GAAe,IAAIL,WAAJ,CAAgBE,EAAhB,EAAoBC,IAApB,EAA0BC,KAA1B,EAAiCC,OAAjC,CAAf;;;;;MCbSQ;EAOXZ,YACEC,IACAC,MACAC,OACAU,UACAC,cACAC,UACAC,cACAZ;IAEA,KAAKS,QAAL,GAAgBA,QAAhB;IACA,KAAKC,YAAL,GAAoBA,YAApB;IACA,KAAKC,QAAL,GAAgBA,QAAhB;IACA,KAAKC,YAAL,GAAoBA,YAApB;IACA,KAAKZ,OAAL,GAAe,IAAIL,WAAJ,CAAgBE,EAAhB,EAAoBC,IAApB,EAA0BC,KAA1B,EAAiCC,OAAjC,CAAf;;;EAGFa,WAAW;IACT,OAAO,KAAKJ,QAAZ;;;EAGFK,eAAe;IACb,OAAO,KAAKJ,YAAZ;;;EAGFK,WAAW;IACT,OAAO,KAAKJ,QAAZ;;;EAGFK,eAAe;IACb,OAAO,KAAKJ,YAAZ;;;;;MCtCSK;EAIXrB,YACEsB,UACAC;IAEA,KAAKC,KAAL,GAAaF,QAAb;IACA,KAAKG,KAAL,GAAaF,QAAb;;;;;ACXJ,IAAYG,qBAAZ;;AAAA,WAAYA;EACVA,kCAAA,mBAAA;EACAA,kCAAA,mBAAA;AACD,CAHD,EAAYA,qBAAqB,KAArBA,qBAAqB,KAAA,CAAjC;;MCGaC,sBAAsBC;EACjC5B,YAAYI,OAAO,GAAG;IACpB,MAAM,EACJ,GAAGA,OADC;MAEJyB,IAAI,EAAEH,qBAAqB,CAACI;KAF9B;;IAOA,KAAKC,OAAL,CACE,IAAIC,gBAAJ,CAAqB;MACnBC,EAAE,EAAE,IADe;MAEnB/B,IAAI,EAAE;KAFR,CADF;IAMA,KAAK6B,OAAL,CACE,IAAIC,gBAAJ,CAAqB;MACnBC,EAAE,EAAE,KADe;MAEnB/B,IAAI,EAAE;KAFR,CADF;;;;;AChBG,MAAMgC,iBAAiB,GAAG;EAC/B,OAAOC,4BAAA,MAAA,MAAA,gBAAA,CAAP;AACD,CAFM;;MCIMC,wBAAwBC;EAGnCrC,YAAYsC;IACV,MAAMZ,qBAAqB,CAACI,SAA5B;IACA,KAAKQ,aAAL,GAAqBA,aAArB;;;EAGFC,aAAa;IACX,OAAO,IAAIZ,aAAJ,EAAP;;;EAGFa,mBAAmB,CAACC,KAAD;IACjB,IAAI,KAAKH,aAAL,CAAmBI,GAAnB,CAAuBD,KAAK,CAACE,KAAN,CAAYvC,OAAZ,CAAoBD,KAA3C,CAAJ,EAAuD;MACrD,MAAMyC,kBAAkB,GAAG,KAAKN,aAAL,CAAmB/B,GAAnB,CACzBkC,KAAK,CAACE,KAAN,CAAYvC,OAAZ,CAAoBD,KADK,CAA3B,CADqD;;MAKrD,OAAOgC,4BAAA,CAACS,kBAAD;QAAoBC,MAAM,EAAE,KAAKA;QAAQF,KAAK,EAAEF,KAAK,CAACE;OAAtD,CAAP;;;;IAGF,OAAOR,4BAAA,CAACD,iBAAD,MAAA,CAAP;;;;;MCxBSY,sBAAsBC;EACjC/C,YAAYI,OAAO,GAAG;IACpB,MAAM,EACJ,GAAGA,OADC;MAEJyB,IAAI,EAAEH,qBAAqB,CAACsB;KAF9B;;;;;MCCSC,wBAAwBC;EAGnClD,YAAYsC;IACV,MAAMZ,qBAAqB,CAACsB,SAA5B;IACA,KAAKV,aAAL,GAAqBA,aAArB;;;EAGFC,aAAa;IACX,OAAO,IAAIO,aAAJ,EAAP;;;EAGFK,mBAAmB,CACjBR,KADiB,EAEjBS,QAFiB,EAGjBC,IAHiB;;;;IAMjB,IAAI,KAAKf,aAAL,CAAmBI,GAAnB,sBAAuBC,KAAK,CAACW,UAAN,EAAvB,qBAAuB,kBAAoBnD,KAA3C,CAAJ,EAAuD;MACrD,MAAMyC,kBAAkB,GAAG,KAAKN,aAAL,CAAmB/B,GAAnB;MAEzBoC,KAAK,CAACW,UAAN,GAAmBnD,KAFM,CAA3B;MAKA;QAEEgC,4BAAA,CAACS,kBAAD;UACEC,MAAM,EAAE,KAAKA;UACbF,KAAK,EAAEA;UACPU,IAAI,EAAEA;UACND,QAAQ,EAAEA;SAJZ;;;;;IASJ,OAAOjB,4BAAA,CAACD,iBAAD,MAAA,CAAP;;;;;SCvCYqB,QACdtD,IACAuB;EAEA,OAAOA,KAAK,CAACgC,IAAN,CAAWC,CAAC,IAAIA,CAAC,CAACH,UAAF,GAAerD,EAAf,KAAsBA,EAAtC,CAAP;AACD;;SCFeyD,aACdC,UACAnC;EAEA,MAAMoC,IAAI,GAAG,IAAId,aAAJ,CAAkBe,MAAM,CAACC,WAAP,CAAmBH,QAAQ,CAACvD,OAAT,CAAiBA,OAApC,CAAlB,CAAb;EACA,MAAM2D,MAAM,GAAGR,OAAO,CAACI,QAAQ,CAAC1C,WAAT,EAAD,EAAyBO,KAAzB,CAAtB;EACA,MAAMwC,MAAM,GAAGT,OAAO,CAACI,QAAQ,CAACxC,WAAT,EAAD,EAAyBK,KAAzB,CAAtB;;EACA,IAAIuC,MAAM,IAAIC,MAAd,EAAsB;IACpBJ,IAAI,CAACK,aAAL,CAAmBF,MAAM,CAACG,OAAP,CAAeP,QAAQ,CAACzC,eAAT,EAAf,CAAnB;IACA0C,IAAI,CAACO,aAAL,CAAmBH,MAAM,CAACE,OAAP,CAAeP,QAAQ,CAACvC,eAAT,EAAf,CAAnB;IACA,OAAOwC,IAAP;;;EAEF,OAAOQ,SAAP;AACD;;AClBD,MAAMC,IAAI,GAAG;EACXC,UAAU,EAAE,mBADD;EAEXC,SAAS,EAAE,SAFA;EAGXC,SAAS,EAAE,SAHA;EAIXC,aAAa,EAAE,SAJJ;EAKXC,WAAW,EAAE,uBALF;EAOXC,oBAAoB,EAAE,0BAPX;EAQXC,kBAAkB,EAAE,wBART;EAUXC,mBAAmB,EAAE,SAVV;EAWXC,mBAAmB,EAAE,SAXV;EAaXC,oBAAoB,EAAE,QAbX;EAcXC,yBAAyB,EAAE,SAdhB;EAeXC,4BAA4B,EAAE,wBAfnB;EAiBXC,gBAAgB,EAAE,SAjBP;EAkBXC,qBAAqB,EAAE,SAlBZ;EAmBXC,aAAa,EACX,mFApBS;EAqBXC,eAAe,EAAE,qBArBN;EAuBXC,YAAY,EAAE,2BAvBH;EAyBXC,UAAU,EAAE,0BAzBD;EA0BXC,iBAAiB,EAAE,uBA1BR;EA4BXC,YAAY,EAAE,oBA5BH;EA8BXC,UAAU,EAAE,SA9BD;EA+BXC,WAAW,EAAE,SA/BF;EAgCXC,cAAc,EAAE,6BAhCL;EAkCXC,YAAY,EACV;AAnCS,CAAb;;;;;;;;;;;;ACWA,MAAM;EAAErB,SAAF;EAAac;AAAb,IAA8BjB,IAApC;AAEA,MAAMyB,SAAS,gBAAGC,UAAU,CAAC,OAAO;EAClCC,IAAI,EAAE;IACJC,MAAM,EAAE,GADJ;IAEJC,KAAK,EAAE,MAFH;IAGJC,UAAU,EAAE3B,SAHR;IAIJ4B,SAAS,EACP,8EALE;IAMJC,YAAY,EAAE,MANV;IAOJ3F,QAAQ,EAAE,OAPN;IAQJ4F,IAAI,EAAE,MARF;IASJC,GAAG,EAAE,KATD;IAUJC,SAAS,EAAE,kBAVP;IAYJ,WAAW;MACTF,IAAI,EAAE,MADG;MAETG,KAAK,EAAE;KAdL;IAiBJ,mBAAmB;MACjBC,OAAO,EAAE;;GAnBqB;EAuBlCC,IAAI,EAAE;IACJC,MAAM,EAAE,WADJ;IAEJ,sBAAsB;MACpBC,WAAW,EAAEvB,YADO;MAEpBY,KAAK,EAAE,qBAFa;MAGpBU,MAAM,EAAE,QAHY;MAIpBE,MAAM,EAAE,MAJY;MAKpBC,SAAS,EAAE;KAPT;IAUJ,SAAS;MACPC,OAAO,EAAE,OADF;MAEPJ,MAAM,EAAE;;;AAnCsB,CAAP,CAAD,CAA5B;;AAwCA,MAAMK,OAAO,GAAG;EACd,MAAMC,OAAO,GAAGpB,SAAS,EAAzB;EACA,OACE3D,4BAAA,CAACgF,GAAD;IAAKC,SAAS,KAAKF,OAAO,CAAClB;GAA3B,EACE7D,4BAAA,CAACkF,IAAD;IAAMC,cAAc;IAACC,SAAS,EAAC;GAA/B,EACEpF,4BAAA,CAACqF,cAAD;IAAgBpE,QAAQ;GAAxB,EACEjB,4BAAA,CAACsF,YAAD,MAAA,EACEtF,4BAAA,MAAA;IACEuF,GAAG,+BAA+B,IAAIC,MAAJ,CAAWC,MAAX,EAAmBC,QAAnB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CADF,EAYE3F,4BAAA,CAACqF,cAAD,MAAA,EACErF,4BAAA,CAACsF,YAAD,MAAA,EACEtF,4BAAA,MAAA;IACEuF,GAAG,+BAA+B,IAAIC,MAAJ,CAAWI,IAAX,EAAiBF,QAAjB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CAZF,CADF,EAyBE3F,4BAAA,CAACgF,GAAD;IAAKC,SAAS,EAAEF,OAAO,CAACP;GAAxB,EACExE,4BAAA,CAAC6F,OAAD,MAAA,CADF,EAEE7F,4BAAA,MAAA;IACEuF,GAAG,+BAA+B,IAAIC,MAAJ,CAAWM,IAAX,EAAiBJ,QAAjB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CAFF,EAQE3F,4BAAA,CAAC6F,OAAD,MAAA,CARF,CAzBF,EAoCE7F,4BAAA,CAACkF,IAAD;IAAMC,cAAc;IAACC,SAAS,EAAC;GAA/B,EACEpF,4BAAA,CAACqF,cAAD;IAAgBU,QAAQ;GAAxB,EACE/F,4BAAA,CAACsF,YAAD,MAAA,EACEtF,4BAAA,MAAA;IACEuF,GAAG,+BAA+B,IAAIC,MAAJ,CAAWQ,IAAX,EAAiBN,QAAjB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CADF,EAYE3F,4BAAA,CAACqF,cAAD,MAAA,EACErF,4BAAA,CAACsF,YAAD,MAAA,EACEtF,4BAAA,MAAA;IACEuF,GAAG,+BAA+B,IAAIC,MAAJ,CAAWS,UAAX,EAAuBP,QAAvB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CAZF,CApCF,CADF;AA8DD,CAhED;;AC/CA,MAAMO,gBAAgB,GAAIC,MAAD;EACvB,MAAM;IACJ/D,SADI;IAEJD,UAFI;IAGJG,aAHI;IAIJC,WAJI;IAKJF,SALI;IAMJU,gBANI;IAOJC,qBAPI;IAQJC,aARI;IASJC;MACEiD,MAVJ;EAWA,OAAO;IACLC,UAAU,EAAE;MACVC,cAAc,EAAE;QACdC,cAAc;;0BAEIlE;2BACCD;;;+BAGIC;2BACJD;;;;OATX;MAcVoE,OAAO,EAAE;QACPD,cAAc,EAAE;UACdzC,IAAI,EAAE;YACJ,kBAAkB;cAChBU,OAAO,EAAE,UADO;cAEhBP,UAAU,EAAE1B,aAFI;cAGhB4B,YAAY,EAAE,QAHE;cAIhBW,OAAO,EAAE,MAJO;cAKhB,6BAA6B;gBAC3BN,OAAO,EAAE,iBADkB;gBAE3BL,YAAY,EAAE,WAFa;gBAG3BH,KAAK,EAAE,aAHoB;gBAI3Bc,OAAO,EAAE,MAJkB;gBAK3B2B,UAAU,EAAE,QALe;gBAM3BC,cAAc,EAAE,QANW;gBAO3B,sBAAsB;kBACpBC,YAAY,EAAE;iBARW;gBAU3B,kBAAkB;kBAChBC,OAAO,EAAE;iBAXgB;gBAa3B,kBAAkB;kBAChB3C,UAAU,EAAE3B,SADI;kBAEhB4B,SAAS,EAAEhB,aAFK;kBAGhB0B,MAAM,sBAAsBzB,iBAHZ;kBAIhB,yBAAyB;oBACvB0D,KAAK,EAAE5D;;;eAvBG;cA2BhB,mBAAmB;gBACjB6D,UAAU,EAAE;eA5BE;cA8BhB,yBAAyB;gBACvBC,UAAU,EAAE,GADW;gBAEvBC,QAAQ,EAAE,WAFa;gBAGvBC,UAAU,EAAE,SAHW;gBAIvBC,aAAa,EAAE,WAJQ;gBAKvBL,KAAK,EAAErE,WALgB;gBAMvBkC,MAAM,EAAE;;;;;OArDR;MA2DVyC,eAAe,EAAE;QACfZ,cAAc,EAAE;UACdzC,IAAI,EAAE;YACJsD,QAAQ,EAAE;;;OA9DN;MAkEVC,iBAAiB,EAAE;QACjBd,cAAc,EAAE;UACdzC,IAAI,EAAE;YACJU,OAAO,EAAE,CADL;YAEJR,KAAK,EAAE,QAFH;YAGJsD,MAAM,EAAE,QAHJ;YAIJnD,YAAY,EAAE,KAJV;YAKJuC,cAAc,EAAE,QALZ;YAMJa,eAAe,EAAEhF,aANb;YAOJ,WAAW;cACTgF,eAAe,EAAEhF;aARf;YAUJ,sBAAsB;cACpBoE,YAAY,EAAE;aAXZ;YAaJ,kBAAkB;cAChBY,eAAe,EAAEvE,gBADD;cAEhB,WAAW;gBACTuE,eAAe,EAAEvE;;aAhBjB;YAmBJ,kBAAkB;cAChB4D,OAAO,EAAE;;;;;;GAzFrB;AAgGD,CA5GD;;AA8GA,aAAgBY,eAAD,IACbrB,gBAAgB,CAAC,EACf,GAAGhE,IADY;EAEf,GAAGqF;AAFY,CAAD,CADlB;;MCpHaC;EAIX3J,YAAY4J,GAAWC;IACrB,KAAKD,CAAL,GAASA,CAAT;IACA,KAAKC,CAAL,GAASA,CAAT;;;;;ACWJ,MAAM/D,WAAS,gBAAGC,UAAU,CAAC+D,CAAC,KAAK;EACjCC,SAAS,EAAE;IACTP,MAAM,EAAE,MADC;IAETtD,KAAK,EAAE;GAHwB;EAKjC8D,eAAe,EAAE;IACfR,MAAM,EAAE,MADO;IAEftD,KAAK,EAAE,MAFQ;IAGfC,UAAU,EAAE;;AARmB,CAAL,CAAF,CAA5B;;AAwBA,MAAM8D,WAAW,GAAG,CAAC;EACnBC,SADmB;EAEnBC,SAFmB;EAGnB7H,aAHmB;EAInB8H,gBAJmB;EAKnBC;AALmB,CAAD;EAOlB,MAAMnD,OAAO,GAAGpB,WAAS,EAAzB;;EAGA,MAAMjD,MAAM,GAAGyH,YAAY,EAA3B;EAEAzH,MAAM,CACH0H,gBADH;GAGGC,eAHH,CAGmB,IAAIpI,eAAJ,CAAoBE,aAAa,CAACd,KAAlC,CAHnB;EAKAqB,MAAM,CACH4H,gBADH;GAGGD,eAHH,CAGmB,IAAIvH,eAAJ,CAAoBX,aAAa,CAACb,KAAlC,CAHnB;;EAOA,MAAMkB,KAAK,GAAG,IAAI+H,YAAJ,EAAd;EACA,MAAMlJ,KAAK,GAAG0I,SAAS,CAACS,GAAV,CACZC,EAAE,IAAI,IAAIjJ,aAAJ,CAAkBkC,MAAM,CAACC,WAAP,CAAmB8G,EAAE,CAACxK,OAAH,CAAWA,OAA9B,CAAlB,CADM,CAAd;EAGA,MAAMqB,KAAK,GAAG0I,SAAS,CACpBQ,GADW,CACPE,EAAE,IAAInH,YAAY,CAACmH,EAAD,EAAKrJ,KAAL,CADX,EAEXsJ,MAFW,CAEJC,GAAG,IAAIA,GAAG,KAAK3G,SAFX,CAAd;;EAIAzB,KAAK,CAACqI,MAAN,CAAa,GAAGxJ,KAAhB,EAAuB,GAAGC,KAA1B;;EAGAoB,MAAM,CAACoI,QAAP,CAAgBtI,KAAhB;EAEA,MAAMuI,kBAAkB,GAAGd,gBAAgB,GACvCA,gBADuC,GAEvClD,OAAO,CAAC6C,SAFZ;EAIA,OACE5H,aAAA,CAACgJ,aAAD;IAAeC,KAAK,EAAEC,WAAW,CAACD,KAAK,CAACf,SAAD,oBAACA,SAAS,CAAEiB,oBAAZ,CAAN;GAAjC,EACEnJ,aAAA,CAACoJ,WAAD,MAAA,CADF,EAEEpJ,aAAA,CAACgF,KAAD;IAAKC,SAAS,EAAE8D;GAAhB,EACE/I,aAAA,CAAC8E,OAAD,MAAA,CADF,EAEE9E,aAAA,CAACqJ,YAAD;IACEpE,SAAS,KAAKF,OAAO,CAAC8C,mBAAmBK,SAA9B,oBAA8BA,SAAS,CAAEoB;IACpD5I,MAAM,EAAEA;GAFV,CAFF,CAFF,CADF;AAYD,CArDD;;;;;"}
\ No newline at end of file
+{"version":3,"file":"meta-diagram.esm.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/theme.ts","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  children: MetaNode[];\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    options: Map<string, any>\n  ) {\n    this.children = [];\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          key={`node-factory-${event.model.getOptions().id}`}\n          engine={this.engine}\n          model={event.model}\n        />\n      );\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType\n          key={`link-factory-${model.getOptions().id}`}\n          engine={this.engine}\n          model={model}\n          path={path}\n          selected={selected}\n        />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\n\ntype ThemeVars = {\n  [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n  const {\n    primaryBg,\n    fontFamily,\n    chipTextColor,\n    chipBgColor,\n    textWhite,\n    listItemActiveBg,\n    listSelectedTextColor,\n    listBoxShadow,\n    listBorderColor,\n  } = params;\n  return {\n    components: {\n      MuiCssBaseline: {\n        styleOverrides: `\n          html {\n            background: ${primaryBg};\n            font-family: ${fontFamily};\n          }\n          body {\n            background-color:${primaryBg};\n            font-family: ${fontFamily};\n            font-size: 1rem;\n          }\n        `,\n      },\n      MuiList: {\n        styleOverrides: {\n          root: {\n            '&.customSwitch': {\n              padding: '0.125rem',\n              background: chipTextColor,\n              borderRadius: '0.5rem',\n              display: 'flex',\n              '& .MuiListItemButton-root': {\n                padding: '0.25rem 0.75rem',\n                borderRadius: '0.4375rem',\n                width: '10.59375rem',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                '&:not(:last-child)': {\n                  marginBottom: '0',\n                },\n                '&.Mui-disabled': {\n                  opacity: 1,\n                },\n                '&.Mui-selected': {\n                  background: textWhite,\n                  boxShadow: listBoxShadow,\n                  border: `0.03125rem solid ${listBorderColor}`,\n                  '& .MuiTypography-root': {\n                    color: listSelectedTextColor,\n                  },\n                },\n              },\n              '& .MuiChip-root': {\n                marginLeft: '0.25rem',\n              },\n              '& .MuiTypography-root': {\n                fontWeight: 500,\n                fontSize: '0.8125rem',\n                lineHeight: '1.25rem',\n                letterSpacing: '-0.005rem',\n                color: chipBgColor,\n                margin: 0,\n              },\n            },\n          },\n        },\n      },\n      MuiListItemIcon: {\n        styleOverrides: {\n          root: {\n            minWidth: 'inherit',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            padding: 0,\n            width: '2.5rem',\n            height: '2.5rem',\n            borderRadius: '50%',\n            justifyContent: 'center',\n            backgroundColor: chipTextColor,\n            '&:hover': {\n              backgroundColor: chipTextColor,\n            },\n            '&:not(:last-child)': {\n              marginBottom: '0.75rem',\n            },\n            '&.Mui-selected': {\n              backgroundColor: listItemActiveBg,\n              '&:hover': {\n                backgroundColor: listItemActiveBg,\n              },\n            },\n            '&.Mui-disabled': {\n              opacity: 0.8,\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default (customVariables: ThemeVars) =>\n  applicationTheme({\n    ...vars,\n    ...customVariables,\n  });\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#fffff',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n  metaTheme: {\n    customThemeVariables: {};\n    canvasClassName: string;\n  };\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  metaTheme,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = metaNodes.map(\n    mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n  );\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n\n  return (\n    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>\n      <CssBaseline />\n      <Box className={containerClassName}>\n        <Sidebar />\n        <CanvasWidget\n          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}\n          engine={engine}\n        />\n      </Box>\n    </ThemeProvider>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","alignItems","justifyContent","marginBottom","opacity","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"}
\ No newline at end of file
diff --git a/package.json b/package.json
index 1450aa4..62b6a75 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
diff --git a/src/react-diagrams/MetaLinkFactory.tsx b/src/react-diagrams/MetaLinkFactory.tsx
index b4625a3..2b941fa 100644
--- a/src/react-diagrams/MetaLinkFactory.tsx
+++ b/src/react-diagrams/MetaLinkFactory.tsx
@@ -31,6 +31,7 @@ export class MetaLinkFactory extends DefaultLinkFactory {
       return (
         // @ts-ignore
         <ReactComponentType
+          key={`link-factory-${model.getOptions().id}`}
           engine={this.engine}
           model={model}
           path={path}
diff --git a/src/react-diagrams/MetaNodeFactory.tsx b/src/react-diagrams/MetaNodeFactory.tsx
index 8e33433..e885a05 100644
--- a/src/react-diagrams/MetaNodeFactory.tsx
+++ b/src/react-diagrams/MetaNodeFactory.tsx
@@ -21,8 +21,14 @@ export class MetaNodeFactory extends AbstractReactFactory {
       const ReactComponentType = this.componentsMap.get(
         event.model.options.shape
       );
-      // @ts-ignore
-      return <ReactComponentType engine={this.engine} model={event.model} />;
+      return (
+        // @ts-ignore
+        <ReactComponentType
+          key={`node-factory-${event.model.getOptions().id}`}
+          engine={this.engine}
+          model={event.model}
+        />
+      );
     }
     // TODO: Generate default node instead
     return <UnknownTypeWidget />;