balkan-orgchart-react 9.1.68 → 9.1.80

package/index.es.d.ts

@@ -1,9 +1,19 @@
 import { default as default_2 } from 'react';
 import { JSX } from 'react/jsx-runtime';
 
-export declare const Employee: ({ children, title, name, photo, assistant, partner, ...rest }: OrgChartEmployeeProps) => JSX.Element;
+export declare const Employee: ({ children, title, name, photo, assistant, partner, template, ...rest }: OrgChartEmployeeProps) => JSX.Element;
 
-export declare const OrgChart: default_2.ForwardRefExoticComponent<OrgChartProps & default_2.RefAttributes<OrgChartRef>>;
+declare interface OrgChartEmployeeProps {
+    children?: default_2.ReactNode;
+    title?: string;
+    name?: string;
+    photo?: string;
+    assistant?: boolean;
+    partner?: boolean;
+    template?: string;
+    tags?: Array<string>;
+    [key: string]: unknown;
+}
 
 /**
  * ```typescript  
@@ -37,7 +47,7 @@ export declare const OrgChart: default_2.ForwardRefExoticComponent<OrgChartProps
  * </html>
  * ```
  */
-declare class OrgChart_2  {
+export declare class OrgChartJS  {
     /**
      * ```typescript     
      * let chart = new OrgChart('#tree', {});
@@ -45,7 +55,7 @@ declare class OrgChart_2  {
      * @param element HTML element or string selector for example '#tree'
      * @param options configuration options
      */
-    constructor(element?: HTMLElement | string | null, options?: OrgChart_2.options);
+    constructor(element?: HTMLElement | string | null, options?: OrgChartJS.options);
 
 
     /**
@@ -61,7 +71,7 @@ declare class OrgChart_2  {
      * @param type A case-sensitive string representing the event type to listen for.
      * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
      */
-    on(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener: (sender: OrgChart_2, args?: any, args1?: any, args2?: any) => void | boolean): OrgChart_2;
+    on(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener: (sender: OrgChartJS, args?: any, args1?: any, args2?: any) => void | boolean): OrgChartJS;
 
 
 
@@ -76,7 +86,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */
-    onUpdateNode(listener: (this: OrgChart_2, args: OrgChart_2.updateNodeEventArgs) => void): OrgChart_2;
+    onUpdateNode(listener: (this: OrgChartJS, args: OrgChartJS.updateNodeEventArgs) => void): OrgChartJS;
 
     /**
      * Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations.
@@ -89,7 +99,7 @@ declare class OrgChart_2  {
      * ```
      * @category Event Listeners
      */
-    onUpdated(listener: (this: OrgChart_2) => void): OrgChart_2;
+    onUpdated(listener: (this: OrgChartJS) => void): OrgChartJS;
 
 
     /**
@@ -103,7 +113,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */
-    onRemoveNode(listener: (this: OrgChart_2, args: OrgChart_2.removeNodeEventArgs) => void): OrgChart_2;
+    onRemoveNode(listener: (this: OrgChartJS, args: OrgChartJS.removeNodeEventArgs) => void): OrgChartJS;
 
     /**
      * Occurs when a node has been added by addNode method.
@@ -116,7 +126,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */
-    onAddNode(listener: (this: OrgChart_2, args: OrgChart_2.addNodeEventArgs) => void): OrgChart_2;
+    onAddNode(listener: (this: OrgChartJS, args: OrgChartJS.addNodeEventArgs) => void): OrgChartJS;
     /**
      * The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
      *  ```typescript     
@@ -128,7 +138,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */
-    onDrag(listener: (this: OrgChart_2, args: OrgChart_2.dragEventArgs) => void): OrgChart_2;
+    onDrag(listener: (this: OrgChartJS, args: OrgChartJS.dragEventArgs) => void): OrgChartJS;
     /**
      * The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
      *  ```typescript     
@@ -140,7 +150,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */
-    onDrop(listener: (this: OrgChart_2, args: OrgChart_2.dropEventArgs) => void): OrgChart_2;
+    onDrop(listener: (this: OrgChartJS, args: OrgChartJS.dropEventArgs) => void): OrgChartJS;
 
 
 
@@ -155,7 +165,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */
-    onInit(listener: (this: OrgChart_2) => void): OrgChart_2;
+    onInit(listener: (this: OrgChartJS) => void): OrgChartJS;
 
     /**
      * The onRedraw event occurs when the chart is redrawed.
@@ -168,7 +178,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */        
-    onRedraw(listener: (this: OrgChart_2) => void): OrgChart_2;
+    onRedraw(listener: (this: OrgChartJS) => void): OrgChartJS;
 
     /**
      * The onExpandCollapseButtonClick event occurs when the chart is redrawed.
@@ -182,7 +192,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */         
-    onExpandCollapseButtonClick(listener: (this: OrgChart_2, args: OrgChart_2.expandCollapseButtonClickEventArgs) => void): OrgChart_2;
+    onExpandCollapseButtonClick(listener: (this: OrgChartJS, args: OrgChartJS.expandCollapseButtonClickEventArgs) => void): OrgChartJS;
 
     /**
      * Occurs in the beginning of the export. Extra css styles can be added to the exported document using this event listener or show loading image.
@@ -197,7 +207,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */             
-    onExportStart(listener: (this: OrgChart_2, args: OrgChart_2.exportStartEventArgs) => void): OrgChart_2;
+    onExportStart(listener: (this: OrgChartJS, args: OrgChartJS.exportStartEventArgs) => void): OrgChartJS;
 
     /**
      * Occurs in the beginning of the export. Use this event listener to hide loading image or upload exported document to your server using ArrayBuffer argument.
@@ -211,7 +221,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */         
-    onExportEnd(listener: (this: OrgChart_2, args: OrgChart_2.exportEndEventArgs) => void): OrgChart_2;
+    onExportEnd(listener: (this: OrgChartJS, args: OrgChartJS.exportEndEventArgs) => void): OrgChartJS;
 
     /**
      * On node click event listener.
@@ -225,7 +235,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */   
-    onNodeClick(listener: (this: OrgChart_2, args: OrgChart_2.nodeClickEventArgs) => void): OrgChart_2;
+    onNodeClick(listener: (this: OrgChartJS, args: OrgChartJS.nodeClickEventArgs) => void): OrgChartJS;
 
 
     /**
@@ -239,7 +249,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */   
-    onCanvasClick(listener: (this: OrgChart_2, args: OrgChart_2.canvasClickEventArgs) => void): OrgChart_2;
+    onCanvasClick(listener: (this: OrgChartJS, args: OrgChartJS.canvasClickEventArgs) => void): OrgChartJS;
 
     /**
      * In onAIToolCalls we parse the AI responce to our functions
@@ -255,7 +265,7 @@ declare class OrgChart_2  {
      * [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
      * @param listener 
      */
-    onAIToolCalls(listener: (this: OrgChart_2, args: OrgChart_2.aiToolCallsEventArgs) => void): OrgChart_2;
+    onAIToolCalls(listener: (this: OrgChartJS, args: OrgChartJS.aiToolCallsEventArgs) => void): OrgChartJS;
 
     /**
      * On node double click event listener.
@@ -269,7 +279,7 @@ declare class OrgChart_2  {
      * @category Event Listeners
      * @param listener 
      */       
-    onNodeDoubleClick(listener: (this: OrgChart_2, args: OrgChart_2.nodeDoubleClickEventArgs) => void): OrgChart_2;
+    onNodeDoubleClick(listener: (this: OrgChartJS, args: OrgChartJS.nodeDoubleClickEventArgs) => void): OrgChartJS;
 
 
     /**
@@ -524,7 +534,7 @@ declare class OrgChart_2  {
      * chart.load(nodes)
      * ```
      */
-    nodes: { [key in any]: OrgChart_2.node };
+    nodes: { [key in any]: OrgChartJS.node };
 
     /**
      * Returns true if chart is visible
@@ -560,7 +570,7 @@ declare class OrgChart_2  {
      * ```
      * @param newData node data
      */
-    update(newData: object): OrgChart_2;
+    update(newData: object): OrgChartJS;
 
     /**
      * Removes specified node from nodes collection
@@ -573,7 +583,7 @@ declare class OrgChart_2  {
 
      * @param id identification number of the node
      */
-    remove(id: string | number): OrgChart_2;
+    remove(id: string | number): OrgChartJS;
     /**
      * Adds new node to the nodes collection
      * ```typescript     
@@ -585,7 +595,7 @@ declare class OrgChart_2  {
 
      * @param data node data
      */
-    add(data: object): OrgChart_2;
+    add(data: object): OrgChartJS;
 
     /**
      * Adds new node to the nodes collection, redraws the chart and fires remove event
@@ -598,7 +608,7 @@ declare class OrgChart_2  {
      * @param callback called at the end of animation
      * @param fireEvent indicates if the add event will be called or not
      */
-    addNode(data: OrgChart_2.nodeData, callback?: () => void, fireEvent?: boolean): void;  
+    addNode(data: OrgChartJS.nodeData, callback?: () => void, fireEvent?: boolean): void;  
 
     /**
      * Removes specified node from nodes collection, redraws the chart and fires remove event.
@@ -621,7 +631,7 @@ declare class OrgChart_2  {
      * @param element 
      * @param options 
      */
-    init(element?: HTMLElement | string | null, options?: OrgChart_2.options): void;
+    init(element?: HTMLElement | string | null, options?: OrgChartJS.options): void;
 
 
     /**
@@ -633,7 +643,7 @@ declare class OrgChart_2  {
      * ```
      * @param id identification number of the node
      */
-    get(id: string | number): OrgChart_2.nodeData;
+    get(id: string | number): OrgChartJS.nodeData;
     /**
      * If specified node has assistant/s or partner/s as children will return false.
      * ```typescript     
@@ -731,7 +741,7 @@ declare class OrgChart_2  {
      * @param data nodes data array
      * @param callback function called after the load
      */
-    load(data: Array<OrgChart_2.nodeData>, callback?: () => void): OrgChart_2;
+    load(data: Array<OrgChartJS.nodeData>, callback?: () => void): OrgChartJS;
 
 
 
@@ -746,7 +756,7 @@ declare class OrgChart_2  {
      * @param callback function called when the animation completes
      * @param fireEvent if it set to true the update event is called
      */
-    updateNode(data: OrgChart_2.nodeData, callback?: () => void, fireEvent?: boolean): void;
+    updateNode(data: OrgChartJS.nodeData, callback?: () => void, fireEvent?: boolean): void;
 
     /**
      * Loads nodes from xml.
@@ -758,7 +768,7 @@ declare class OrgChart_2  {
      * @param xml Xml with node structure
      * @param callback function called after the load
      */
-    loadXML(xml: string, callback?: () => void): OrgChart_2;
+    loadXML(xml: string, callback?: () => void): OrgChartJS;
     /**
      * Gets nodes as xml.
      * ```typescript     
@@ -779,7 +789,7 @@ declare class OrgChart_2  {
      * @param actionParams parameters for the action
      * @param callback called when the animation completes
      */
-    draw(action?: OrgChart_2.action, actionParams?: any, callback?: () => void): void;
+    draw(action?: OrgChartJS.action, actionParams?: any, callback?: () => void): void;
     /**
      * Gets the width of the container.
      * ```typescript     
@@ -912,7 +922,7 @@ declare class OrgChart_2  {
      * ```
      * @param nodeId 
      */
-    getNode(nodeId: string | number): OrgChart_2.node;
+    getNode(nodeId: string | number): OrgChartJS.node;
 
 
     /**
@@ -926,7 +936,7 @@ declare class OrgChart_2  {
      * @param lcn lyout config name for the specified sub tree
      */
 
-    setLayout(layout: OrgChart_2.layout | number, lcn?: string): void;
+    setLayout(layout: OrgChartJS.layout | number, lcn?: string): void;
     /**
      * Sets orientation.
      * ```typescript     
@@ -938,7 +948,7 @@ declare class OrgChart_2  {
      * @param lcn lyout config name for the specified sub tree
      * @param callback called at the end of animation
      */
-    setOrientation(orientation: OrgChart_2.orientation, lcn?: string, callback?: () => void): void;
+    setOrientation(orientation: OrgChartJS.orientation, lcn?: string, callback?: () => void): void;
 
     /**
      * ```typescript     
@@ -980,7 +990,7 @@ declare class OrgChart_2  {
      * ```
      * @param node 
      */
-    getCollapsedIds(node: OrgChart_2.node): Array<string | number>;
+    getCollapsedIds(node: OrgChartJS.node): Array<string | number>;
     /**
      * State to url.
      * ```typescript     
@@ -1036,7 +1046,7 @@ declare class OrgChart_2  {
      * @param label link label
      * @param template link template, for example 'orange'
      */
-    addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChart_2;
+    addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChartJS;
     /**
      * Removes curved link.
      * ```typescript     
@@ -1048,7 +1058,7 @@ declare class OrgChart_2  {
      * @param from from node with id
      * @param to to node with id
      */
-    removeClink(from: string | number, to: string | number): OrgChart_2;
+    removeClink(from: string | number, to: string | number): OrgChartJS;
     /**
      * Adds second link.
      * ```typescript     
@@ -1062,7 +1072,7 @@ declare class OrgChart_2  {
      * @param label link label
      * @param template link template, for example 'orange'
      */    
-    addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChart_2;
+    addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChartJS;
     /**
      * Removes second link.
      * ```typescript     
@@ -1074,7 +1084,7 @@ declare class OrgChart_2  {
      * @param from from node with id
      * @param to to node with id
      */    
-    removeSlink(from: string | number, to: string | number): OrgChart_2;
+    removeSlink(from: string | number, to: string | number): OrgChartJS;
     /**
      * Gets svg html element
      * ```typescript     
@@ -1115,7 +1125,7 @@ declare class OrgChart_2  {
      * @param filename The name of the exported file
      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
      */
-    exportToCSV(filename?: string | OrgChart_2.exportCSVXMLJSONOptions): void;
+    exportToCSV(filename?: string | OrgChartJS.exportCSVXMLJSONOptions): void;
     /**
      * Exports to XML   
      * ```typescript     
@@ -1126,7 +1136,7 @@ declare class OrgChart_2  {
      * @param filename The name of the exported file
      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
      */
-    exportToXML(filename: string | OrgChart_2.exportCSVXMLJSONOptions): void;
+    exportToXML(filename: string | OrgChartJS.exportCSVXMLJSONOptions): void;
     /**
      * Exports to JSON   
      * ```typescript     
@@ -1137,7 +1147,7 @@ declare class OrgChart_2  {
      * @param filename The name of the exported file
      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
      */
-    exportToJSON(filename?: string | OrgChart_2.exportCSVXMLJSONOptions ): void;
+    exportToJSON(filename?: string | OrgChartJS.exportCSVXMLJSONOptions ): void;
 
     /**
      * ```typescript     
@@ -1161,11 +1171,11 @@ declare class OrgChart_2  {
      * @param callback called when the export completes
      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther | See doc...}       
      */    
-    exportToVisio(options?: OrgChart_2.exportVisioOptions, callback?: () => void): void;
-    exportToPowerPoint(options?: OrgChart_2.exportPowerPointOptions, callback?: () => void): void;
-    exportToPDF(options?: OrgChart_2.exportPDFOptions, callback?: () => void): void;
-    exportToPNG(options?: OrgChart_2.exportPNGOptions, callback?: () => void): void;
-    exportToSVG(options?: OrgChart_2.exportSVGOptions, callback?: () => void): void;
+    exportToVisio(options?: OrgChartJS.exportVisioOptions, callback?: () => void): void;
+    exportToPowerPoint(options?: OrgChartJS.exportPowerPointOptions, callback?: () => void): void;
+    exportToPDF(options?: OrgChartJS.exportPDFOptions, callback?: () => void): void;
+    exportToPNG(options?: OrgChartJS.exportPNGOptions, callback?: () => void): void;
+    exportToSVG(options?: OrgChartJS.exportSVGOptions, callback?: () => void): void;
     exportToPDFProfile(nodeId: number | string, callback?: () => void):  void;
 
 
@@ -1229,7 +1239,7 @@ declare class OrgChart_2  {
      * @param front show on front or back 
      * @param anim animation type
      */
-    magnify(id: string | number, scale: number, front?: boolean, anim?: OrgChart_2.anim | null, callback?: () => void): void;     
+    magnify(id: string | number, scale: number, front?: boolean, anim?: OrgChartJS.anim | null, callback?: () => void): void;     
 
     /**
      * Starts the move 
@@ -1243,7 +1253,7 @@ declare class OrgChart_2  {
      * @param func the name of the animation function, for example OrgChart.anim.inSin
      * @param duration duration before going to 100 percent speed
      */
-    moveStart(movePosition: OrgChart_2.move, tick?: () => void, func?: OrgChart_2.anim, duration?: number): void;
+    moveStart(movePosition: OrgChartJS.move, tick?: () => void, func?: OrgChartJS.anim, duration?: number): void;
 
     /**
      * Ends the move
@@ -1344,7 +1354,7 @@ declare class OrgChart_2  {
      * let editUI = chart.editUI;
      * ```
      */
-    editUI: OrgChart_2.editUI;
+    editUI: OrgChartJS.editUI;
 
     /**
      * The chart aiUI object.
@@ -1353,7 +1363,7 @@ declare class OrgChart_2  {
      * let aiUI = chart.aiUI;
      * ```
      */
-    aiUI: OrgChart_2.aiUI;
+    aiUI: OrgChartJS.aiUI;
 
     /**
      * The chart orgScribeUI object.
@@ -1362,7 +1372,7 @@ declare class OrgChart_2  {
      * let orgScribeUI = chart.orgScribeUI;
      * ```
      */
-    orgScribeUI: OrgChart_2.orgScribeUI;
+    orgScribeUI: OrgChartJS.orgScribeUI;
 
     /**
      * The chart searchUI object.
@@ -1371,7 +1381,7 @@ declare class OrgChart_2  {
      * let searchUI = chart.searchUI;
      * ```
      */
-    searchUI: OrgChart_2.searchUI;
+    searchUI: OrgChartJS.searchUI;
 
     /**
      * The chart nodeMenuUI object.
@@ -1380,13 +1390,13 @@ declare class OrgChart_2  {
      * let nodeMenuUI = chart.nodeMenuUI;
      * ```
      */
-    nodeMenuUI: OrgChart_2.menuUI;
+    nodeMenuUI: OrgChartJS.menuUI;
 
-    powerPointPreviewUI: OrgChart_2.powerPointPreviewUI;
+    powerPointPreviewUI: OrgChartJS.powerPointPreviewUI;
 
-    pdfPreviewUI: OrgChart_2.pdfPreviewUI;
-    svgPreviewUI: OrgChart_2.pngPreviewUI;
-    pngPreviewUI: OrgChart_2.pngPreviewUI;
+    pdfPreviewUI: OrgChartJS.pdfPreviewUI;
+    svgPreviewUI: OrgChartJS.pngPreviewUI;
+    pngPreviewUI: OrgChartJS.pngPreviewUI;
 
     /**
      * The chart filterUI object.
@@ -1395,17 +1405,17 @@ declare class OrgChart_2  {
      * let filterUI = chart.filterUI;
      * ```
      */
-    filterUI: OrgChart_2.filterUI;
+    filterUI: OrgChartJS.filterUI;
 
     /**
      * @ignore
      */
-    xScrollUI: OrgChart_2.xScrollUI;
+    xScrollUI: OrgChartJS.xScrollUI;
 
     /**
      * @ignore
      */
-    yScrollUI: OrgChart_2.yScrollUI;
+    yScrollUI: OrgChartJS.yScrollUI;
 
     /**
      * The chart undoRedoUI object.
@@ -1414,7 +1424,7 @@ declare class OrgChart_2  {
      * let undoRedoUI = chart.undoRedoUI;
      * ```
      */
-    undoRedoUI: OrgChart_2.undoRedoUI;
+    undoRedoUI: OrgChartJS.undoRedoUI;
 
     /**
      * The chart nodeCircleMenuUI object.
@@ -1423,7 +1433,7 @@ declare class OrgChart_2  {
      * let nodeCircleMenuUI = chart.nodeCircleMenuUI;
      * ```
      */
-    nodeCircleMenuUI: OrgChart_2.circleMenuUI;
+    nodeCircleMenuUI: OrgChartJS.circleMenuUI;
 
     /**
      * The chart controlsUI object.
@@ -1432,7 +1442,7 @@ declare class OrgChart_2  {
      * let controlsUI = chart.controlsUI;
      * ```
      */
-    controlsUI: OrgChart_2.controlsUI;    
+    controlsUI: OrgChartJS.controlsUI;    
 
     /**
      * The chart nodeContextMenuUI object.
@@ -1441,7 +1451,7 @@ declare class OrgChart_2  {
      * let nodeContextMenuUI = chart.nodeContextMenuUI;
      * ```
      */
-    nodeContextMenuUI: OrgChart_2.menuUI;
+    nodeContextMenuUI: OrgChartJS.menuUI;
 
     /**
      * The chart menuUI object.
@@ -1450,7 +1460,7 @@ declare class OrgChart_2  {
      * let menuUI = chart.menuUI;
      * ```
      */
-    menuUI: OrgChart_2.menuUI;
+    menuUI: OrgChartJS.menuUI;
 
     /**
      * The chart toolbarUI object.
@@ -1459,7 +1469,7 @@ declare class OrgChart_2  {
      * let toolbarUI = chart.toolbarUI;
      * ```
      */
-    toolbarUI: OrgChart_2.toolbarUI;  
+    toolbarUI: OrgChartJS.toolbarUI;  
 
     /**
      * The chart config object.
@@ -1468,7 +1478,7 @@ declare class OrgChart_2  {
      * let config = chart.config;
      * ```
      */
-    config: OrgChart_2.options;
+    config: OrgChartJS.options;
 
     /**
      * All root nodes in the chart
@@ -1480,7 +1490,7 @@ declare class OrgChart_2  {
      * chart.load(nodes)
      * ```
      */
-    roots: Array<OrgChart_2.node>;
+    roots: Array<OrgChartJS.node>;
 
     /**
      * Opens file upload dialog
@@ -1528,7 +1538,7 @@ declare class OrgChart_2  {
      * ```
      * @param node 
      */
-    static getRootOf(node: OrgChart_2.node): OrgChart_2.node;
+    static getRootOf(node: OrgChartJS.node): OrgChartJS.node;
 
     /**
      * is null, empty or undefined
@@ -1628,7 +1638,7 @@ declare class OrgChart_2  {
          * @param chart 
          * @returns void
          */
-        show: (chart: OrgChart_2) => void,
+        show: (chart: OrgChartJS) => void,
         /**
          * ```typescript
          * let chart = new OrgChart('#tree', {});
@@ -1641,7 +1651,7 @@ declare class OrgChart_2  {
          * @param chart 
          * @returns void
          */
-        hide: (chart: OrgChart_2) => void
+        hide: (chart: OrgChartJS) => void
     }
     /**
      * ```typescript
@@ -1651,7 +1661,7 @@ declare class OrgChart_2  {
      * ```
      */
     static clinkTemplates: {
-        [key: string]: OrgChart_2.linkTemplate
+        [key: string]: OrgChartJS.linkTemplate
     }
     /**
      * ```typescript
@@ -1661,7 +1671,7 @@ declare class OrgChart_2  {
      * ```
      */
     static slinkTemplates: {
-        [key: string]: OrgChart_2.linkTemplate
+        [key: string]: OrgChartJS.linkTemplate
     }
 
     /**
@@ -1671,7 +1681,7 @@ declare class OrgChart_2  {
      *  `<rect x="0" y="0" height="80" width="300" fill="#039BE5" stroke-width="1" stroke="#686868" rx="40" ry="40"></rect>`;
      * ```
      */
-    static templates: { [key: string]: OrgChart_2.template} ;
+    static templates: { [key: string]: OrgChartJS.template} ;
 
 
     /**
@@ -1731,7 +1741,7 @@ declare class OrgChart_2  {
      * @param func - funcition to animate with
      * @param callback - callback function
      */
-    static animate(element: Object, attrStart?: Object, attrEnd?: Object, duration?: number, func?: OrgChart_2.anim, callback?: Function, tick?: Function): void;
+    static animate(element: Object, attrStart?: Object, attrEnd?: Object, duration?: number, func?: OrgChartJS.anim, callback?: Function, tick?: Function): void;
 
     /**
      * Minimap options.
@@ -1764,7 +1774,13 @@ declare class OrgChart_2  {
         position: Object
     };
 
-
+    /**
+     * OrgChart version
+     * ```typescript
+     * OrgChart.VERSION;
+     * ```
+     */
+    static VERSION: string;
     /**
      * @ignore
      */
@@ -2128,22 +2144,19 @@ declare class OrgChart_2  {
     static grCloseTag: any;
 }
 
-declare namespace OrgChart_2 {   
-
-
-
-    interface updateNodeEventArgs{
+export declare namespace OrgChartJS {   
+    export interface updateNodeEventArgs{
         /**
          * old node data
          */
-        oldData: OrgChart_2.nodeData,
+        oldData: OrgChartJS.nodeData,
         /**
          * new node data
          */
-        newData: OrgChart_2.nodeData
+        newData: OrgChartJS.nodeData
     }
 
-    interface removeNodeEventArgs{
+    export interface removeNodeEventArgs{
         /**
          * node id
          */
@@ -2157,14 +2170,14 @@ declare namespace OrgChart_2 {
         }
     }
 
-    interface addNodeEventArgs{
+    export interface addNodeEventArgs{
         /**
          * new added data node
          */
-        data: OrgChart_2.nodeData
+        data: OrgChartJS.nodeData
     }
 
-    interface dragEventArgs{
+    export interface dragEventArgs{
         /**
          * dragged node id
          */
@@ -2178,7 +2191,7 @@ declare namespace OrgChart_2 {
         nodeIds: Array<string | number>
     }
 
-    interface dropEventArgs{
+    export interface dropEventArgs{
         /**
          * dragged node id
          */
@@ -2197,7 +2210,7 @@ declare namespace OrgChart_2 {
         event: MouseEvent
     }
 
-    interface expandCollapseButtonClickEventArgs{
+    export interface expandCollapseButtonClickEventArgs{
         /**
          * Indicates id the operation is collaps or expand
          */
@@ -2212,7 +2225,7 @@ declare namespace OrgChart_2 {
         ids: Array<number | string>
     }
 
-    interface exportStartEventArgs {
+    export interface exportStartEventArgs {
         options: {
             childLevels?: number,
             expandChildren?: boolean,
@@ -2229,7 +2242,7 @@ declare namespace OrgChart_2 {
             parentLevels?: number,
             type?: string,
             pages?: Array<{            
-                chartInstance?: OrgChart_2,
+                chartInstance?: OrgChartJS,
                 childLevels?: number,
                 expandChildren?: boolean,
                 footer?: string,
@@ -2252,7 +2265,7 @@ declare namespace OrgChart_2 {
     /**
      * for PDF/PNG
      */
-    interface exportEndEventArgs  {
+    export interface exportEndEventArgs  {
         /**
          * the array buffer is the exported document, you can save it on a server or send it via email
          * 
@@ -2291,11 +2304,11 @@ declare namespace OrgChart_2 {
         styles: string,        
     }
 
-    interface nodeClickEventArgs  {
+    export interface nodeClickEventArgs  {
         /**
          * node JSON object
          */
-        node: OrgChart_2.node,
+        node: OrgChartJS.node,
         /**
          * the browser event
          */
@@ -2303,7 +2316,7 @@ declare namespace OrgChart_2 {
     }
 
 
-    interface canvasClickEventArgs  {
+    export interface canvasClickEventArgs  {
         /**
          * the browser event
          */
@@ -2311,7 +2324,7 @@ declare namespace OrgChart_2 {
     }
 
 
-    interface aiToolCallsEventArgs  {
+    export interface aiToolCallsEventArgs  {
         toolCalls: Array<{
             FunctionName : string,
             FunctionResult  : string,
@@ -2320,7 +2333,7 @@ declare namespace OrgChart_2 {
     }
 
 
-    interface nodeDoubleClickEventArgs  {
+    export interface nodeDoubleClickEventArgs  {
         /**
          * clicked node data
          */
@@ -2334,7 +2347,7 @@ declare namespace OrgChart_2 {
      * { id: 2, pid: 1, tags: ["HR"], name: "Anna Smith" }
      * ```
      */
-    interface nodeData {
+    export interface nodeData {
 
         /**
          * the id of the node
@@ -2356,6 +2369,11 @@ declare namespace OrgChart_2 {
          */
         stpid?: number | string,
 
+        /**
+         * The template name associated with the specified node.
+         */
+        template?: string,
+
         /**
          * Set custom configuration for the tagged node
          *{@link https://balkan.app/OrgChartJS/Docs/Tags | See Tags doc page...} 
@@ -2409,7 +2427,7 @@ declare namespace OrgChart_2 {
      */
     const treeRightOffset: any;
 
-    interface options {
+    export interface options {
         /**
          * With the drag and drop features enabled you can move nodes easily and change the tree structure. Default value - *false*.
          * ```typescript     
@@ -2476,7 +2494,7 @@ declare namespace OrgChart_2 {
      * chart.load(nodes)
      * ```
      */
-    interface node {
+    export interface node {
         /**
          * the same id you provided in the source node
          */
@@ -2662,7 +2680,7 @@ declare namespace OrgChart_2 {
      * OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);
      * ```
      */
-    interface template  
+    export interface template  
         {
         /**
          * SVG <defs?> of the template
@@ -2685,6 +2703,26 @@ declare namespace OrgChart_2 {
          */
         size?: Array<number>,
 
+        /**
+         * Inner spacing around the node content area.
+         *
+         * Order of values:
+         * [top, right, bottom, left]
+         *
+         * Example:
+         * OrgChart.templates.myTemplate.padding = [10, 15, 10, 15];
+         *
+         * Meaning:
+         * - top:    10px
+         * - right:  15px
+         * - bottom: 10px
+         * - left:   15px
+         *
+         * Use this to prevent content from touching the edges of the node
+         * and to control internal layout spacing.
+         */
+        padding?: [number, number, number, number],
+
         /**
          * Size of the expandCollapse button
          * ```typescript
@@ -2724,19 +2762,9 @@ declare namespace OrgChart_2 {
         ripple?: {
             radius?: number,
             color?: string,
-            rect?: Array<number>
+            rect?: { x: number, y: number, width: number, height: number }
         },
 
-        /**
-         * Assistance link
-         * ```typescript
-         * OrgChart.templates.myTemplate.assistanseLink = 
-         *  `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none" 
-         *  d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />`;
-         * }
-         * ```
-         */
-        assistanseLink?: string,
 
         /**
          * Template main svg definition
@@ -2781,7 +2809,7 @@ declare namespace OrgChart_2 {
          *  `<rect x="0" y="0" height="{h}" width="{w}" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`;
          * ```
          */
-        node?: string | ((node: OrgChart_2.node, data: OrgChart_2.nodeData, template: OrgChart_2.template, config: OrgChart_2.options) => string),
+        node?: string | ((node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => string),
 
         /**
          * Plus/expand button
@@ -2792,7 +2820,7 @@ declare namespace OrgChart_2 {
          *  <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#aeaeae"></line>`;
          * ```
          */
-        plus?: string | ((node: OrgChart_2.node, data: OrgChart_2.nodeData, template: OrgChart_2.template, config: OrgChart_2.options) => string),
+        plus?: string | ((node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => string),
 
         /**
          * Minus/collapse button
@@ -2802,7 +2830,7 @@ declare namespace OrgChart_2 {
          *  <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>`;
          * ```
          */
-        minus?: string | ((node: OrgChart_2.node, data: OrgChart_2.nodeData, template: OrgChart_2.template, config: OrgChart_2.options) => string),
+        minus?: string | ((node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => string),
 
         /**
          * Node menu button
@@ -2815,7 +2843,7 @@ declare namespace OrgChart_2 {
          *      </g>`;
          * ```
          */
-        nodeMenuButton?: string | ((node: OrgChart_2.node, data: OrgChart_2.nodeData, template: OrgChart_2.template, config: OrgChart_2.options) => string),
+        nodeMenuButton?: string | ((node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => string),
 
         /**
          * Menu button
@@ -2839,7 +2867,7 @@ declare namespace OrgChart_2 {
          *     </image>`;
          * ```
          */
-        img_0?: string | ((node: OrgChart_2.node, data: OrgChart_2.nodeData, template: OrgChart_2.template, config: OrgChart_2.options) => string),
+        img_0?: string | ((node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => string),
 
         /**
          * Link label
@@ -2883,7 +2911,7 @@ declare namespace OrgChart_2 {
          * OrgChart.templates.myTemplate.min.field_1 = "";
          * ```
          */
-        min?: OrgChart_2.template,
+        min?: OrgChartJS.template,
 
 
         /**
@@ -2919,12 +2947,12 @@ declare namespace OrgChart_2 {
      * chart.load(nodes)
      * ```
      */
-    interface editUI {
+    export interface editUI {
         /**
          * Inits edit ui
          * @param obj 
          */
-        init(obj: OrgChart_2): void;
+        init(obj: OrgChartJS): void;
         /**
          * The on() method of the editUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
          * @category Event Listeners
@@ -2961,7 +2989,7 @@ declare namespace OrgChart_2 {
      * chart.load(nodes)
      * ```
      */
-    interface aiUI {
+    export interface aiUI {
         /**
          * The width of the ai UI
          */
@@ -2974,7 +3002,7 @@ declare namespace OrgChart_2 {
          * Inits ai ui
          * @param obj 
          */
-        init(obj: OrgChart_2): void;        
+        init(obj: OrgChartJS): void;        
         /**
          * Shows the ai form 
          * @param dontFocus if true the imput will not be focused
@@ -3002,7 +3030,7 @@ declare namespace OrgChart_2 {
      * chart.load(nodes)
      * ```
      */
-    interface orgScribeUI {
+    export interface orgScribeUI {
         /**
          * The width of the orgscribe UI
          */
@@ -3015,7 +3043,7 @@ declare namespace OrgChart_2 {
          * Inits orgscribe ui
          * @param obj 
          */
-        init(obj: OrgChart_2): void;        
+        init(obj: OrgChartJS): void;        
         /**
          * Shows the orgscribe form 
          * @param dontFocus if true the imput will not be focused
@@ -3032,11 +3060,11 @@ declare namespace OrgChart_2 {
         isVisible(): boolean;
     }    
 
-    interface searchUI {
+    export interface searchUI {
         /**
          * @ignore
          */
-        init(obj: OrgChart_2): void;
+        init(obj: OrgChartJS): void;
 
         /**
          * The on() method of the searchUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
@@ -3131,7 +3159,7 @@ declare namespace OrgChart_2 {
         /**
          * @ignore
          */
-        instance: OrgChart_2;
+        instance: OrgChartJS;
         /**
          * @ignore
          */
@@ -3139,11 +3167,11 @@ declare namespace OrgChart_2 {
     }
 
 
-    interface filterUI {
+    export interface filterUI {
         /**
          * @ignore
          */
-        init(instance: OrgChart_2): void;   
+        init(instance: OrgChartJS): void;   
 
         /**
          * @ignore
@@ -3225,13 +3253,13 @@ declare namespace OrgChart_2 {
         /**
          * @ignore
          */
-        instance: OrgChart_2;
+        instance: OrgChartJS;
     }
 
     /**
      * @ignore
      */
-    interface xScrollUI {
+    export interface xScrollUI {
         addListener(svg: HTMLElement): void;   
         create(width: number): void;   
         setPosition(width: number): void;   
@@ -3242,7 +3270,7 @@ declare namespace OrgChart_2 {
     /**
      * @ignore
      */
-    interface yScrollUI {
+    export interface yScrollUI {
         addListener(svg: HTMLElement): void;   
         create(width: number): void;   
         setPosition(width: number): void;   
@@ -3262,8 +3290,8 @@ declare namespace OrgChart_2 {
      * chart.load(nodes)
      * ```
      */
-    interface menuUI  {
-        init(obj: OrgChart_2, menu: { [key: string]: menu }): void;
+    export interface menuUI  {
+        init(obj: OrgChartJS, menu: { [key: string]: menu }): void;
         /**
          * The on() method of the menuUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
          * @category Event Listeners
@@ -3311,8 +3339,8 @@ declare namespace OrgChart_2 {
      * chart.load(nodes)
      * ```
      */
-    interface controlsUI  {
-        init(obj: OrgChart_2): void;
+    export interface controlsUI  {
+        init(obj: OrgChartJS): void;
 
         /**
          * Hieds controls
@@ -3324,14 +3352,14 @@ declare namespace OrgChart_2 {
         show(): void;
     }
 
-    interface powerPointPreviewUI  {
+    export interface powerPointPreviewUI  {
         /**
          * The width of the EXPORT UI
          */
         get width(): number;
-        get instance(): OrgChart_2;
-        get options(): OrgChart_2.exportPowerPointOptions;
-        get selectedPage(): OrgChart_2.exportPowerPointPage;
+        get instance(): OrgChartJS;
+        get options(): OrgChartJS.exportPowerPointOptions;
+        get selectedPage(): OrgChartJS.exportPowerPointPage;
 
         locExport: string;
         locCancel: string;
@@ -3362,25 +3390,25 @@ declare namespace OrgChart_2 {
             addNewPage: boolean;
         },        
 
-        init(obj: OrgChart_2): void;
+        init(obj: OrgChartJS): void;
         refresh(): void;
         isVisible(): boolean;
         hide(): void;
-        show(options: OrgChart_2.exportPowerPointOptions): void;
+        show(options: OrgChartJS.exportPowerPointOptions): void;
 
         selectPage(index: number) : void;      
         removePage(index: number) : void;    
-        addPage(page: OrgChart_2.exportPowerPointPage) : void;           
+        addPage(page: OrgChartJS.exportPowerPointPage) : void;           
     }
 
-    interface pdfPreviewUI  {
+    export interface pdfPreviewUI  {
         /**
          * The width of the EXPORT UI
          */
         get width(): number;
-        get instance(): OrgChart_2;
-        get options(): OrgChart_2.exportPDFOptions;
-        get selectedPage(): OrgChart_2.exportPDFPage;
+        get instance(): OrgChartJS;
+        get options(): OrgChartJS.exportPDFOptions;
+        get selectedPage(): OrgChartJS.exportPDFPage;
 
         locExport: string;
         locCancel: string;
@@ -3420,28 +3448,28 @@ declare namespace OrgChart_2 {
             landscapePortrait: boolean;
         },
 
-        init(obj: OrgChart_2): void;
+        init(obj: OrgChartJS): void;
         refresh(): void;
         isVisible(): boolean;
         hide(): void;
-        show(options: OrgChart_2.exportPDFOptions): void;
+        show(options: OrgChartJS.exportPDFOptions): void;
 
         selectPage(index: number) : void;      
         removePage(index: number) : void;       
         toggelePrintTreeOrProfile() : void;  
         toggleLanscape(): void;      
-        addPage(page: OrgChart_2.exportPDFPage) : void;       
+        addPage(page: OrgChartJS.exportPDFPage) : void;       
     }
 
 
-    interface pngPreviewUI  {
+    export interface pngPreviewUI  {
         /**
          * The width of the EXPORT UI
          */
         get width(): number;
-        get instance(): OrgChart_2;
-        get options(): OrgChart_2.exportPNGOptions;
-        get selectedPage(): OrgChart_2.exportPNGPage;
+        get instance(): OrgChartJS;
+        get options(): OrgChartJS.exportPNGOptions;
+        get selectedPage(): OrgChartJS.exportPNGPage;
 
 
         locExport: string;
@@ -3473,27 +3501,27 @@ declare namespace OrgChart_2 {
             addNewPage: boolean;
         },        
 
-        init(obj: OrgChart_2): void;
+        init(obj: OrgChartJS): void;
         refresh(): void;
         isVisible(): boolean;
         hide(): void;
-        show(options: OrgChart_2.exportPNGOptions): void;
+        show(options: OrgChartJS.exportPNGOptions): void;
         selectPage(index: number) : void;      
         removePage(index: number) : void;       
-        addPage(page: OrgChart_2.exportPNGPage) : void;           
+        addPage(page: OrgChartJS.exportPNGPage) : void;           
     }
 
 
 
 
-    interface svgPreviewUI  {
+    export interface svgPreviewUI  {
         /**
          * The width of the EXPORT UI
          */
         get width(): number;
-        get instance(): OrgChart_2;
-        get options(): OrgChart_2.exportPNGOptions;
-        get selectedPage(): OrgChart_2.exportPNGPage;
+        get instance(): OrgChartJS;
+        get options(): OrgChartJS.exportPNGOptions;
+        get selectedPage(): OrgChartJS.exportPNGPage;
 
 
         locExport: string;
@@ -3525,14 +3553,14 @@ declare namespace OrgChart_2 {
             addNewPage: boolean;
         },        
 
-        init(obj: OrgChart_2): void;
+        init(obj: OrgChartJS): void;
         refresh(): void;
         isVisible(): boolean;
         hide(): void;
-        show(options: OrgChart_2.exportPNGOptions): void;
+        show(options: OrgChartJS.exportPNGOptions): void;
         selectPage(index: number) : void;      
         removePage(index: number) : void;       
-        addPage(page: OrgChart_2.exportSVGPage) : void;           
+        addPage(page: OrgChartJS.exportSVGPage) : void;           
     }
 
     /**
@@ -3544,13 +3572,13 @@ declare namespace OrgChart_2 {
      * });
      * ```
      */
-    interface circleMenuUI {
+    export interface circleMenuUI {
         /**
          * Inits circle menu instance
          * @param obj 
          * @param menu 
          */
-        init(obj: OrgChart_2, menu: { [key: string]: menu }): void;
+        init(obj: OrgChartJS, menu: { [key: string]: menu }): void;
         /**
          * Shows circle menu 
          * 
@@ -3578,13 +3606,13 @@ declare namespace OrgChart_2 {
         on(type: "click" | "show" | "drag" | "drop" | "mouseenter" | "mouseout", listener: (sender: circleMenuUI, args: any, args1: any, args2: any) => void | boolean): circleMenuUI;
     }
 
-    interface undoRedoUI {
+    export interface undoRedoUI {
         /**
          * Inits undoRedoUI
          * @ignore
          * @param instance 
          */
-        init(instance: OrgChart_2): void;
+        init(instance: OrgChartJS): void;
         /**
          * Refreshes the UI buttonss
          * @ignore
@@ -3615,12 +3643,12 @@ declare namespace OrgChart_2 {
              */
             redoStepsCount: number
         }) => void): undoRedoUI;
-        instance: OrgChart_2;
+        instance: OrgChartJS;
     }
 
 
 
-    interface keyNavigation {
+    export interface keyNavigation {
         /**
          * Set focus to specified id on initial load
          *  ```typescript     
@@ -3637,13 +3665,13 @@ declare namespace OrgChart_2 {
     /**
      * Toolbar UI
      */
-    interface toolbarUI {
+    export interface toolbarUI {
         /**
          * @ignore
          * @param obj 
          * @param toolbar 
          */
-        init(obj: OrgChart_2, toolbar: toolbar): void;
+        init(obj: OrgChartJS, toolbar: toolbar): void;
 
         /**
          * Shows the layout
@@ -3804,7 +3832,7 @@ declare namespace OrgChart_2 {
      * ```
      * [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
      */
-    interface aiChatTool  {
+    export interface aiChatTool  {
         /**
          * The unique identifier for the function within the API call.
          */
@@ -3848,7 +3876,7 @@ declare namespace OrgChart_2 {
      * 
      * For better experiense please use the new feature Controls instead of Toolbars.
      */
-    interface toolbar  {
+    export interface toolbar  {
 
         /**
          * Shows the layout options
@@ -3915,7 +3943,7 @@ declare namespace OrgChart_2 {
     /**
      * miniMap options
      */
-    interface miniMap  {
+    export interface miniMap  {
 
         /**
          * Array of colors to use for the miniMap
@@ -4001,7 +4029,7 @@ declare namespace OrgChart_2 {
          * }
          * ```
          */
-        position?: OrgChart_2.position,
+        position?: OrgChartJS.position,
 
         /**
          * Draggable option
@@ -4024,7 +4052,7 @@ declare namespace OrgChart_2 {
      * };
      * ```
      */
-    interface position  {
+    export interface position  {
         top?: string,
         left?: string,
         right?: string,
@@ -4034,8 +4062,8 @@ declare namespace OrgChart_2 {
 
 
 
-    interface exportPowerPointPage {                    
-        chartInstance?: OrgChart_2,
+    export interface exportPowerPointPage {                    
+        chartInstance?: OrgChartJS,
         nodeId?: number | string,
         expandChildren?: boolean,
         childLevels?: number,
@@ -4048,7 +4076,7 @@ declare namespace OrgChart_2 {
 
 
 
-    interface exportPowerPointOptions {
+    export interface exportPowerPointOptions {
         openInNewTab?: boolean,
         fileName?: string,
         // width?: number,
@@ -4059,15 +4087,15 @@ declare namespace OrgChart_2 {
         childLevels?: number,
         parentLevels?: number,
         min?: boolean,
-        pages?: Array<OrgChart_2.exportPowerPointPage>,
+        pages?: Array<OrgChartJS.exportPowerPointPage>,
         format?: "Screen" | "Widescreen" | "Standard",
         header?: string,
         footer?: string
     }
 
-    interface exportPDFPage {                    
+    export interface exportPDFPage {                    
         isProfile?: boolean,
-        chartInstance?: OrgChart_2,
+        chartInstance?: OrgChartJS,
         nodeId?: number | string,
         expandChildren?: boolean,
         childLevels?: number,
@@ -4078,7 +4106,7 @@ declare namespace OrgChart_2 {
         content?:  string
     }
 
-    interface exportPDFOptions {
+    export interface exportPDFOptions {
         openInNewTab?: boolean,
         fileName?: string,
         landscape?: boolean,
@@ -4090,14 +4118,14 @@ declare namespace OrgChart_2 {
         childLevels?: number,
         parentLevels?: number,
         min?: boolean,
-        pages?: Array<OrgChart_2.exportPDFPage>,
+        pages?: Array<OrgChartJS.exportPDFPage>,
         format?: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal" | "auto",
         header?: string,
         footer?: string
     }
 
-    interface exportPNGPage {
-        chartInstance?: OrgChart_2,
+    export interface exportPNGPage {
+        chartInstance?: OrgChartJS,
         nodeId?: number | string,
         expandChildren?: boolean,
         childLevels?: number,
@@ -4107,7 +4135,7 @@ declare namespace OrgChart_2 {
         footer?: string,
         content?:  string
     }
-    interface exportPNGOptions {
+    export interface exportPNGOptions {
         openInNewTab?: boolean,
         fileName?: string,
         //landscape?: boolean,  
@@ -4117,14 +4145,14 @@ declare namespace OrgChart_2 {
         childLevels?: number,
         parentLevels?: number,
         min?: boolean,
-        pages?: Array<OrgChart_2.exportPNGPage>,
+        pages?: Array<OrgChartJS.exportPNGPage>,
         header?: string,
         footer?: string
     }
 
 
-    interface exportSVGPage {
-        chartInstance?: OrgChart_2,
+    export interface exportSVGPage {
+        chartInstance?: OrgChartJS,
         nodeId?: number | string,
         expandChildren?: boolean,
         childLevels?: number,
@@ -4134,7 +4162,7 @@ declare namespace OrgChart_2 {
         footer?: string,
         content?:  string
     }
-    interface exportSVGOptions {
+    export interface exportSVGOptions {
         openInNewTab?: boolean,
         fileName?: string,
         //landscape?: boolean,  
@@ -4144,13 +4172,13 @@ declare namespace OrgChart_2 {
         childLevels?: number,
         parentLevels?: number,
         min?: boolean,
-        pages?: Array<OrgChart_2.exportSVGPage>,
+        pages?: Array<OrgChartJS.exportSVGPage>,
         header?: string,
         footer?: string
     }
 
 
-    interface exportVisioOptions {
+    export interface exportVisioOptions {
         fileName?: string,
         padding?: number,
         margin?: Array<number>,
@@ -4173,7 +4201,7 @@ declare namespace OrgChart_2 {
      * ```
      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
      */
-    interface exportCSVXMLJSONOptions  {
+    export interface exportCSVXMLJSONOptions  {
         filename?: string,
         expandChildren?: boolean,
         min?: boolean,
@@ -4187,7 +4215,7 @@ declare namespace OrgChart_2 {
      *  '<text transform="translate(300, 750) rotate(-90)" fill="#F57C00" text-anchor="middle" x="{x}" y="{y}">{val}</text>';
      * ```
      */
-    interface linkTemplate {
+    export interface linkTemplate {
         defs?: string,
         link?: string,
         label?: string,
@@ -4209,12 +4237,14 @@ declare namespace OrgChart_2 {
      * ```
      * {@link https://balkan.app/OrgChartJS/Docs/Menus#yourMenu | See doc...}
      */
-    interface menu  {
-        [key: string]: {
-            text: string,
-            icon?: string,
-            onClick?: Function
-        }
+    export interface menu { [key: string]: menuItem; }
+
+    export interface menuItem {
+        text: string;
+        icon?: string;
+        onClick?: () => void;
+        devider?: boolean;
+        subMenu?: Record<string, menuItem>;
     }
 
     /**
@@ -4232,13 +4262,13 @@ declare namespace OrgChart_2 {
      * ```
      * {@link https://balkan.app/OrgChartJS/Docs/Controls | See doc...}
      */
-    interface controls  {
+    export interface controls  {
         [key: string]: {
             title: string,
             icon?: string,
             onClick?: Function,
             isOn?: boolean,
-            anchor?: OrgChart_2.anchor
+            anchor?: OrgChartJS.anchor
         }
     }    
     /**
@@ -4262,7 +4292,7 @@ declare namespace OrgChart_2 {
      * ```
      * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
      */
-    interface circleMenu  {
+    export interface circleMenu  {
         [key: string]: {
             text: string,
             icon?: string,
@@ -4285,7 +4315,7 @@ declare namespace OrgChart_2 {
      * ```    
      * {@link https://balkan.app/OrgChartJS/Docs/Edit | See doc...}   
      */    
-    interface editFormElement {
+    export interface editFormElement {
         type?: string,
         label?: string,
         binding?: string,
@@ -4306,7 +4336,7 @@ declare namespace OrgChart_2 {
      * });
      * ```
      */
-    interface link {
+    export interface link {
         from?: string | number,
         to?: string | number,
         template?: string,
@@ -4316,7 +4346,7 @@ declare namespace OrgChart_2 {
     /**
      * @ignore
      */
-    interface backdrop {
+    export interface backdrop {
         id?: string | number,
         levels?: number,
         color?: string,
@@ -4335,7 +4365,7 @@ declare namespace OrgChart_2 {
      * ```
      * {@link https://balkan.app/OrgChartJS/Docs/DottedLine | See doc...}
      */
-    interface dottedLine {
+    export interface dottedLine {
         from?: string | number,
         to?: string | number,
         tags?: Array<string>
@@ -4352,7 +4382,7 @@ declare namespace OrgChart_2 {
      * });
      * ```      
      */
-    interface orderBy {
+    export interface orderBy {
         field?: string,
         desc?: boolean
     }
@@ -4367,7 +4397,7 @@ declare namespace OrgChart_2 {
      * });
      * ```
      */
-    interface move {
+    export interface move {
         left?: boolean,
         right?: boolean,
         up?: boolean,
@@ -4377,7 +4407,7 @@ declare namespace OrgChart_2 {
     /**
      * Set the chart orientation
      */
-    enum orientation {
+    export enum orientation {
 
         /**
          * top orientation (default)
@@ -4476,7 +4506,7 @@ declare namespace OrgChart_2 {
     }
 
 
-    enum anchor {
+    export enum anchor {
         top_right,
         right_top,
         bottom_right,
@@ -4494,7 +4524,7 @@ declare namespace OrgChart_2 {
     /**
      * Specifies the layout of the chart
      */
-    enum layout {
+    export enum layout {
 
         /**
          * The default layout
@@ -4613,7 +4643,7 @@ declare namespace OrgChart_2 {
     /**
      * Specifies the alignment of the nodes inside OrgChart JS
      */
-    enum align {
+    export enum align {
 
         /**
          * Centered
@@ -4644,7 +4674,7 @@ declare namespace OrgChart_2 {
      * });
      * ```
      */
-    enum anim {
+    export enum anim {
         inPow,
         outPow,
         inOutPow,
@@ -4668,7 +4698,7 @@ declare namespace OrgChart_2 {
     /**
      * Defines how the initial chart scale is calculated to fit the container.
      */
-    enum match {
+    export enum match {
 
         /**
          * Scales the chart to fit the container **height**.
@@ -4728,7 +4758,7 @@ declare namespace OrgChart_2 {
     /**
      * Add movable functionality
      */
-    enum movable {
+    export enum movable {
 
         /**
          * Moves the node
@@ -4767,7 +4797,7 @@ declare namespace OrgChart_2 {
     /**
      * [Example with all actions](https://code.balkan.app/org-chart-js/which-action-triggers-redraw#JS)
      */
-    enum action {
+    export enum action {
 
         /**
          * OrgChart.action.update = 7;
@@ -4996,7 +5026,7 @@ declare namespace OrgChart_2 {
 
 
 
-    interface options  {
+    export interface options  {
         /**
          * Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - *true*.
          * ```typescript     
@@ -5073,7 +5103,7 @@ declare namespace OrgChart_2 {
          * ```
          * {@link https://balkan.app/OrgChartJS/Docs/KeyNavigation | See doc...}
          */
-        keyNavigation?: boolean | OrgChart_2.keyNavigation,
+        keyNavigation?: boolean | OrgChartJS.keyNavigation,
         /**
          * Shows mini map over the expanded tree. Default value - *false*.
          * ```typescript     
@@ -5098,7 +5128,7 @@ declare namespace OrgChart_2 {
          * ```
          * {@link https://balkan.app/OrgChartJS/Docs/Controls | See doc...}
          */
-        controls?: OrgChart_2.controls;
+        controls?: OrgChartJS.controls;
 
 
         /**
@@ -5116,7 +5146,7 @@ declare namespace OrgChart_2 {
          * ```
          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
          */
-        nodeMenu?: OrgChart_2.menu;
+        nodeMenu?: OrgChartJS.menu;
         /**
          * With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template.
          * ```typescript     
@@ -5138,7 +5168,7 @@ declare namespace OrgChart_2 {
          * ```
          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
          */
-        nodeCircleMenu?: OrgChart_2.circleMenu,
+        nodeCircleMenu?: OrgChartJS.circleMenu,
         /**
          * Customizable context menu. Also you can define your own node operation.
          * ```typescript     
@@ -5154,7 +5184,7 @@ declare namespace OrgChart_2 {
          * ```
          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
          */
-        nodeContextMenu?: OrgChart_2.menu,
+        nodeContextMenu?: OrgChartJS.menu,
         /**
          * Enables export to csv, export to svg and other OrgChart operations. Also you can define your own OrgChart operation.
          * ```typescript     
@@ -5168,7 +5198,7 @@ declare namespace OrgChart_2 {
          * ```
          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
          */
-        menu?: OrgChart_2.menu,
+        menu?: OrgChartJS.menu,
 
         /**
          * Array of tools called by the AI     
@@ -5182,7 +5212,7 @@ declare namespace OrgChart_2 {
          * ```        
          * {@link https://balkan.app/OrgChartJS/Docs/AI | See doc...}   
          */
-        aiChatTools?: Array<OrgChart_2.aiChatTool>,
+        aiChatTools?: Array<OrgChartJS.aiChatTool>,
         /**
          * Shows a toolbar
          * 
@@ -5199,7 +5229,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        toolbar?: OrgChart_2.toolbar,
+        toolbar?: OrgChartJS.toolbar,
 
         /**
          * nodeMouseClick can accept the following values:
@@ -5216,7 +5246,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        nodeMouseClick?: OrgChart_2.action,
+        nodeMouseClick?: OrgChartJS.action,
         /**
          * nodeMouseDbClick can accept the following values:
          * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
@@ -5231,7 +5261,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        nodeMouseDbClick?: OrgChart_2.action,
+        nodeMouseDbClick?: OrgChartJS.action,
         /**
          * mouseScrool can accept the following values:
          * - OrgChart.action.zoom - will zoom in/out on mouse scroll
@@ -5247,7 +5277,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        mouseScrool?: OrgChart_2.action,
+        mouseScrool?: OrgChartJS.action,
         /**
          * Shows horizontal scrollbar. Default value - *false*.
          * ```typescript     
@@ -5267,7 +5297,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        movable?: OrgChart_2.movable,
+        movable?: OrgChartJS.movable,
         /**
          * Shows vertical scrollbar. Default value - *false*.
          * ```typescript     
@@ -5324,17 +5354,17 @@ declare namespace OrgChart_2 {
             [key: string]: {
                 template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | "treeListItem" | "clara" | (string & {}),
                 subLevels?: number,
-                nodeMenu?: OrgChart_2.menu,
-                nodeCircleMenu?: OrgChart_2.circleMenu,
-                nodeContextMenu?: OrgChart_2.menu,
+                nodeMenu?: OrgChartJS.menu,
+                nodeCircleMenu?: OrgChartJS.circleMenu,
+                nodeContextMenu?: OrgChartJS.menu,
                 min?: boolean,
                 subTreeConfig?: {
-                    orientation?: OrgChart_2.orientation,
+                    orientation?: OrgChartJS.orientation,
                     levelSeparation?: number,
                     mixedHierarchyNodesSeparation?: number,
                     subtreeSeparation?: number,
                     siblingSeparation?: number,
-                    layout?: OrgChart_2.layout | number,
+                    layout?: OrgChartJS.layout | number,
                     columns?: number,
                     collapse?: {
                         level?: number,
@@ -5448,7 +5478,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        nodes?: Array<OrgChart_2.nodeData>,
+        nodes?: Array<OrgChartJS.nodeData>,
         /**
          * Adds curved link.
          * ```typescript     
@@ -5461,7 +5491,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        clinks?: Array<OrgChart_2.link>,
+        clinks?: Array<OrgChartJS.link>,
         /**
          * Adds second link.
          * ```typescript     
@@ -5474,12 +5504,12 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        slinks?: Array<OrgChart_2.link>,
+        slinks?: Array<OrgChartJS.link>,
 
         /**
          * @ignore
          */
-        backdrops?: Array<OrgChart_2.backdrop>,
+        backdrops?: Array<OrgChartJS.backdrop>,
 
 
         /**
@@ -5492,7 +5522,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        dottedLines?: Array<OrgChart_2.dottedLine>,
+        dottedLines?: Array<OrgChartJS.dottedLine>,
 
         /**
          * Adds group dotted line.
@@ -5504,7 +5534,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        groupDottedLines?: Array<OrgChart_2.dottedLine>,
+        groupDottedLines?: Array<OrgChartJS.dottedLine>,
 
         /**
          * The gap between each level. Default value - *60*
@@ -5623,7 +5653,7 @@ declare namespace OrgChart_2 {
          * });
          * ```
          */
-        orientation?: OrgChart_2.orientation,
+        orientation?: OrgChartJS.orientation,
         /**
          * Sets the layout algoritm:
          * - OrgChart.layout.normal
@@ -5643,7 +5673,7 @@ declare namespace OrgChart_2 {
          * });
          * ```          
          */
-        layout?: OrgChart_2.layout | number,
+        layout?: OrgChartJS.layout | number,
         /**
          * Sets the maximum number of columns in grid layout, it has to be even nymber or 'dynamic' string
          * The default id 'dynamic', that means that the maximum colomn numbers are dinamicly calculated 
@@ -5670,7 +5700,7 @@ declare namespace OrgChart_2 {
          * ```          
          * {@link https://balkan.app/OrgChartJS/Docs/Layout | See doc...}         
          */
-        scaleInitial?: number | OrgChart_2.match,
+        scaleInitial?: number | OrgChartJS.match,
         /**
          * Determines the minimum scale factor. Default value - *0.1*
          * ```typescript       
@@ -5716,7 +5746,7 @@ declare namespace OrgChart_2 {
          * });
          * ```      
          */
-        orderBy?: string | Array<string> | OrgChart_2.orderBy | Array<OrgChart_2.orderBy>,
+        orderBy?: string | Array<string> | OrgChartJS.orderBy | Array<OrgChartJS.orderBy>,
         /**
          * Filter the OrgChart by the specified fields.
          * ```typescript       
@@ -5750,73 +5780,73 @@ declare namespace OrgChart_2 {
          * ```
          * [Go to edit doc page for more details](https://balkan.app/OrgChartJS/Docs/Edit#custom)
          */
-        editUI?: OrgChart_2.editUI,
+        editUI?: OrgChartJS.editUI,
         /**
          * @ignore
          */
-        aiUI?: OrgChart_2.aiUI,
+        aiUI?: OrgChartJS.aiUI,
         /**
          * @ignore
          */
-        orgScribeUI?: OrgChart_2.orgScribeUI,        
+        orgScribeUI?: OrgChartJS.orgScribeUI,        
         /**
          * @ignore
          */
-        searchUI?: OrgChart_2.searchUI,
+        searchUI?: OrgChartJS.searchUI,
         /**
          * @ignore
          */
-        filterUI?: OrgChart_2.filterUI,        
+        filterUI?: OrgChartJS.filterUI,        
         /**
          * @ignore
          */
-        xScrollUI?: OrgChart_2.xScrollUI,
+        xScrollUI?: OrgChartJS.xScrollUI,
         /**
          * @ignore
          */
-        yScrollUI?: OrgChart_2.yScrollUI,
+        yScrollUI?: OrgChartJS.yScrollUI,
         /**
          * @ignore
          */
-        nodeMenuUI?: OrgChart_2.menuUI,
+        nodeMenuUI?: OrgChartJS.menuUI,
         /**
          * @ignore
          */
-        powerPointPreviewUI?: OrgChart_2.powerPointPreviewUI,        
+        powerPointPreviewUI?: OrgChartJS.powerPointPreviewUI,        
 
         /**
          * @ignore
          */
-        pdfPreviewUI?: OrgChart_2.pdfPreviewUI,   
+        pdfPreviewUI?: OrgChartJS.pdfPreviewUI,   
 
         /**
          * @ignore
          */
-        svgPreviewUI?: OrgChart_2.svgPreviewUI,   
+        svgPreviewUI?: OrgChartJS.svgPreviewUI,   
 
         /**
          * @ignore
          */
-        pngPreviewUI?: OrgChart_2.pngPreviewUI,  
+        pngPreviewUI?: OrgChartJS.pngPreviewUI,  
 
         /**
          * @ignore
          */
-        nodeCircleMenuUI?: OrgChart_2.circleMenuUI,
+        nodeCircleMenuUI?: OrgChartJS.circleMenuUI,
         /**
          * @ignore
          */
-        nodeContextMenuUI?: OrgChart_2.menuUI,
+        nodeContextMenuUI?: OrgChartJS.menuUI,
 
         /**
          * @ignore
          */
-        controlsUI?: OrgChart_2.controlsUI,
+        controlsUI?: OrgChartJS.controlsUI,
 
         /**
          * @ignore
          */
-        toolbarUI?: OrgChart_2.toolbarUI,
+        toolbarUI?: OrgChartJS.toolbarUI,
         /**
          * @ignore
          */
@@ -5824,11 +5854,11 @@ declare namespace OrgChart_2 {
         /**
          * @ignore
          */        
-        menuUI?: OrgChart_2.menuUI,
+        menuUI?: OrgChartJS.menuUI,
         /**
          * @ignore
          */      
-        undoRedoUI?: OrgChart_2.undoRedoUI,
+        undoRedoUI?: OrgChartJS.undoRedoUI,
         /**
          * @ignore
          */
@@ -5857,7 +5887,7 @@ declare namespace OrgChart_2 {
          * });
          * ```          
          */         
-        align?: OrgChart_2.align | number,
+        align?: OrgChartJS.align | number,
         /**
          * Can be used to control the transition of the nodes on expand/collapse operation. Default value - *func: OrgChart.anim.outPow, duration: 200*
          * ```typescript       
@@ -5870,7 +5900,7 @@ declare namespace OrgChart_2 {
             /**
              * defines how long time an animation should take to complete
              */
-            func?: OrgChart_2.anim,
+            func?: OrgChartJS.anim,
             /**
              * Easing functions specify the speed at which an animation progresses at different points within the animation.
              */
@@ -5998,7 +6028,7 @@ declare namespace OrgChart_2 {
                 } | null
             },
             // elements?: { [key: string]: OrgChart.editFormElement | Array<OrgChart.editFormElement> }
-            elements?: Array<OrgChart_2.editFormElement | Array<OrgChart_2.editFormElement>>
+            elements?: Array<OrgChartJS.editFormElement | Array<OrgChartJS.editFormElement>>
         }
     }
 
@@ -6008,42 +6038,64 @@ declare namespace OrgChart_2 {
     var ui: {
         defs(fromrender: string): string;
         lonely(config: Object): string;
-        pointer(config: Object, action: OrgChart_2.action, scale: number): string;
-        node(node: OrgChart_2.node, data: Object, animations: OrgChart_2.anim, config: Object, x: number | undefined, y: number | undefined, nodeBinding: Object | undefined, action: OrgChart_2.action, scale: number, sender: Object): string; 
-        nodeBtns(config: Object, node: OrgChart_2.node, data: Object, action: OrgChart_2.action, t: Object, sender: Object): string;
-        expandCollapseBtn(chart: OrgChart_2, node: OrgChart_2.node, data: Object, config: Object, layoutConfigs: any, action: OrgChart_2.action, scale: number): string;
-        link(node: OrgChart_2.node, obj: Object, scale: number, bordersByRootIdAndLevel: Object, nodes: Object, action: OrgChart_2.action): Array<string>;
+        pointer(config: Object, action: OrgChartJS.action, scale: number): string;
+        node(node: OrgChartJS.node, data: Object, animations: OrgChartJS.anim, config: Object, x: number | undefined, y: number | undefined, nodeBinding: Object | undefined, action: OrgChartJS.action, scale: number, sender: Object): string; 
+        nodeBtns(config: Object, node: OrgChartJS.node, data: Object, action: OrgChartJS.action, t: Object, sender: Object): string;
+        expandCollapseBtn(chart: OrgChartJS, node: OrgChartJS.node, data: Object, config: Object, layoutConfigs: any, action: OrgChartJS.action, scale: number): string;
+        link(node: OrgChartJS.node, obj: Object, scale: number, bordersByRootIdAndLevel: Object, nodes: Object, action: OrgChartJS.action): Array<string>;
         svg(width: number, height: number, viewBox: Array<number>, config: Object, content: string, scale: number): string;
         menuButton(config: Object): string;
     };
 
-
-}
-
-declare interface OrgChartEmployeeProps {
-    children?: default_2.ReactNode;
-    title?: string;
-    name?: string;
-    photo?: string;
-    assistant?: boolean;
-    partner?: boolean;
-    tags?: Array<string>;
-    [key: string]: unknown;
+    /**
+     * @ignore
+     */
+    var t: any;
 }
 
-declare type OrgChartOptions = Omit<OrgChart_2.options, 'nodes' | 'UI' | 'aiUI' | 'editUI' | 'orgScribeUI' | 'powerPointPreviewUI' | 'pdfPreviewUI' | 'svgPreviewUI' | 'pngPreviewUI' | 'filterUI' | 'searchUI' | 'xScrollUI' | 'yScrollUI' | 'nodeMenuUI' | 'controlsUI' | 'nodeCircleMenuUI' | 'nodeContextMenuUI' | 'toolbarUI' | 'notifierUI' | 'menuUI' | 'undoRedoUI'>;
+declare type OrgChartOptions = Omit<OrgChartJS.options, 'nodes' | 'UI' | 'aiUI' | 'editUI' | 'orgScribeUI' | 'powerPointPreviewUI' | 'pdfPreviewUI' | 'svgPreviewUI' | 'pngPreviewUI' | 'filterUI' | 'searchUI' | 'xScrollUI' | 'yScrollUI' | 'nodeMenuUI' | 'controlsUI' | 'nodeCircleMenuUI' | 'nodeContextMenuUI' | 'toolbarUI' | 'notifierUI' | 'menuUI' | 'undoRedoUI'>;
 
 declare interface OrgChartProps extends Partial<OrgChartOptions> {
     id?: string;
     children?: default_2.ReactNode;
     className?: string;
     style?: default_2.CSSProperties;
-    data?: Array<OrgChart_2.nodeData>;
-    onUpdateNode?: (this: OrgChart_2, args: OrgChart_2.updateNodeEventArgs) => void;
+    data?: Array<OrgChartJS.nodeData>;
+    onUpdateNode?: (this: OrgChartJS, args: OrgChartJS.updateNodeEventArgs) => void;
+    onUpdated?: (this: OrgChartJS) => void;
+    onRemoveNode?: (this: OrgChartJS, args: OrgChartJS.removeNodeEventArgs) => void;
+    onAddNode?: (this: OrgChartJS, args: OrgChartJS.addNodeEventArgs) => void;
+    onDrag?: (this: OrgChartJS, args: OrgChartJS.dragEventArgs) => void;
+    onDrop?: (this: OrgChartJS, args: OrgChartJS.dropEventArgs) => void;
+    onInit?: (this: OrgChartJS) => void;
+    onRedraw?: (this: OrgChartJS) => void;
+    onExpandCollapseButtonClick?: (this: OrgChartJS, args: OrgChartJS.expandCollapseButtonClickEventArgs) => void;
+    onExportStart?: (this: OrgChartJS, args: OrgChartJS.exportStartEventArgs) => void;
+    onExportEnd?: (this: OrgChartJS, args: OrgChartJS.exportEndEventArgs) => void;
+    onNodeClick?: (this: OrgChartJS, args: OrgChartJS.nodeClickEventArgs) => void;
+    onCanvasClick?: (this: OrgChartJS, args: OrgChartJS.canvasClickEventArgs) => void;
+    onAIToolCalls?: (this: OrgChartJS, args: OrgChartJS.aiToolCallsEventArgs) => void;
+    onNodeDoubleClick?: (this: OrgChartJS, args: OrgChartJS.nodeDoubleClickEventArgs) => void;
 }
 
-export declare interface OrgChartRef {
-    readonly instance: OrgChart_2 | null;
-}
+export declare const OrgChartReact: default_2.ForwardRefExoticComponent<OrgChartProps & default_2.RefAttributes<OrgChartJS>>;
+
+export declare const Template: ({ name, baseTemplateName, renderNode, renderPlus, renderMinus, renderNodeMenuButton, nodeWidth, nodeHeight, padding, treeListMaxHeight, editFormHeaderColor, rippleRadius, rippleColor }: TemplateProps) => null;
+
+declare type TemplateProps = {
+    name: string;
+    baseTemplateName?: string;
+    nodeWidth?: number;
+    nodeHeight?: number;
+    padding?: [number, number, number, number];
+    treeListMaxHeight?: number;
+    editFormHeaderColor?: string;
+    rippleRadius?: number;
+    rippleColor?: string;
+    renderNode?: (node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => default_2.ReactNode;
+    renderPlus?: (node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => default_2.ReactNode;
+    renderMinus?: (node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => default_2.ReactNode;
+    renderNodeMenuButton?: (node: OrgChartJS.node, data: OrgChartJS.nodeData, template: OrgChartJS.template, config: OrgChartJS.options) => default_2.ReactNode;
+};
 
 export { }