react-dialogger 1.1.20 → 1.1.22

package/components/CircularProgress.d.ts

@@ -1,8 +1,7 @@
-import * as React from "react";
 import { IInProcess } from "../types/types";
 declare const _default: ({ size, color, inProcess }: {
     color?: string;
     inProcess: IInProcess;
     size: number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/components/CircularProgress.js

@@ -34,17 +34,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 exports.default = (function (_a) {
     var size = _a.size, color = _a.color, inProcess = _a.inProcess;
     if (inProcess === null || inProcess === void 0 ? void 0 : inProcess.inProcess) {
-        return React.createElement("div", { style: { display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' } },
-            React.createElement("span", { className: "circular-root", style: __assign({ display: 'flex', flex: 1, width: size, height: size }, color ? { color: color } : {}), role: "progressbar" },
-                React.createElement("svg", { className: "circular", viewBox: "22 22 44 44" },
-                    React.createElement("circle", { className: "circular-circle", cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6" }))),
-            inProcess.message
-                &&
-                    React.createElement("span", { style: { fontStyle: 'normal', fontSize: 12 } }, inProcess.message));
+        return (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "circular-root", style: __assign({ display: 'flex', flex: 1, width: size, height: size }, color ? { color: color } : {}), role: "progressbar", children: (0, jsx_runtime_1.jsx)("svg", { className: "circular", viewBox: "22 22 44 44", children: (0, jsx_runtime_1.jsx)("circle", { className: "circular-circle", cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6" }) }) }), inProcess.message
+                    &&
+                        (0, jsx_runtime_1.jsx)("span", { style: { fontStyle: 'normal', fontSize: 12 }, children: inProcess.message })] });
     }
-    return React.createElement(React.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(React.Fragment, {});
 });

package/components/DialogActionBase.d.ts

@@ -1,5 +1,4 @@
 import { Component } from "react";
-import * as React from "react";
 import DialogBase from "./DialogBase";
 import { ActionProps, ActionState, DialogActionType, TBVariant, TBColor, DialogActionOptionsType, TDialogStateListenerForActionCallbackType } from "../types/DialogActionTypes";
 declare class DialogActionBase extends Component<ActionProps, ActionState> {
@@ -39,6 +38,6 @@ declare class DialogActionBase extends Component<ActionProps, ActionState> {
     remove: () => void;
     click: () => void;
     onClickHandler: () => DialogActionType;
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 }
 export default DialogActionBase;

package/components/DialogActionBase.js

@@ -52,6 +52,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var React = __importStar(require("react"));
 var RippleButton_1 = __importDefault(require("./RippleButton"));
@@ -133,22 +134,20 @@ var DialogActionBase = /** @class */ (function (_super) {
         };
         _this.render = function () {
             console.log('this._options.style.render', _this._options);
-            return React.createElement(RippleButton_1.default, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
+            return (0, jsx_runtime_1.jsx)(RippleButton_1.default, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
                     if (_this._options.disabled || _this.isInProcess())
                         return;
                     // @ts-ignore
                     _this._onClick(_this, _this._dialogBaseComponent);
-                }, style: _this._options.style, baseStyle: _this.props.baseStyle, fontFamily: _this.props.fontFamily }, function (buttonRef) {
-                if (buttonRef) {
-                    if (!_this.isInProcess()) {
-                        buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
+                }, style: _this._options.style, baseStyle: _this.props.baseStyle, fontFamily: _this.props.fontFamily, children: function (buttonRef) {
+                    if (buttonRef) {
+                        if (!_this.isInProcess()) {
+                            buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
+                        }
                     }
-                }
-                return React.createElement(React.Fragment, null,
-                    React.createElement(CircularProgress_1.default, { size: 15, inProcess: { inProcess: _this.isInProcess() } }),
-                    !_this.isInProcess() &&
-                        _this._options.label);
-            });
+                    return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15, inProcess: { inProcess: _this.isInProcess() } }), !_this.isInProcess() &&
+                                _this._options.label] });
+                } });
         };
         _this._options = props.options;
         // this._label = props.label;

package/components/DialogBase.d.ts

@@ -1,5 +1,5 @@
 import { Component, ReactNode, RefObject } from "react";
-import { FormikProps } from "../types/FormikProps";
+import { FormikProps } from "formik";
 import * as React from "react";
 import Dialog from "../models/Dialog";
 import { DialogAction } from "../models/DialogAction";
@@ -41,6 +41,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     protected _shInterval: number;
     protected _onClose: TDialogCallbackVoidFn;
     private _inProcess;
+    private _footeRef;
     /**
      * @deprecated
      * @see dialogOptions.snackbar.anchorOrigin */
@@ -98,7 +99,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     close: (callbackFn?: any) => void;
     focus: () => void;
     get actions(): {
-        [key: string]: Pick<DialogActionBase, "remove" | "click" | "options" | "setInProcess" | "setOptions" | "getLabel">;
+        [key: string]: Pick<DialogActionBase, "options" | "setInProcess" | "setOptions" | "getLabel" | "click" | "remove">;
     };
     private orderPositionWithReference;
     /**
@@ -131,6 +132,6 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     private Actions;
     private Content;
     protected show(callback?: TDialogCallbackVoidFn): void;
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 }
 export default DialogBase;

package/components/DialogBase.js

@@ -53,6 +53,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogHeaderFooterContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var React = __importStar(require("react"));
 var react_draggable_1 = __importDefault(require("react-draggable"));
@@ -65,10 +66,10 @@ var Resizeable_1 = __importDefault(require("../models/Resizeable"));
 var ResizeIcon_1 = __importDefault(require("./icons/ResizeIcon"));
 var Futures_1 = require("./Futures");
 var WithSnackbar = function (props) {
-    return React.createElement(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack }, props.children);
+    return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
 };
 var WithHeaderFooterContext = function (props) {
-    return React.createElement(exports.DialogHeaderFooterContext.Provider, { value: __assign({}, props) }, props.children);
+    return (0, jsx_runtime_1.jsx)(exports.DialogHeaderFooterContext.Provider, { value: __assign({}, props), children: props.children });
 };
 var hexToRgb = function (hex, opacity) {
     try {
@@ -95,6 +96,7 @@ var DialogBase = /** @class */ (function (_super) {
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
         _this._shInterval = 300;
         _this._inProcess = { inProcess: false };
+        _this._footeRef = React.createRef();
         // Initialize a ref for each action dynamically
         _this.initializeActionRef = function (key) {
             if (!_this._actionRefs.hasOwnProperty(key)) {
@@ -170,7 +172,7 @@ var DialogBase = /** @class */ (function (_super) {
             return _this;
         };
         _this.setInProcess = function (process, message, holder) {
-            var _a, _b;
+            var _a, _b, _c;
             _this._inProcess = __assign({ inProcess: process }, message ? { message: message } : {});
             // this.setState( prevState => ({
             //     ...prevState, inProcess: { inProcess: process, ...message ? {message} : {} }
@@ -212,7 +214,9 @@ var DialogBase = /** @class */ (function (_super) {
             if (!process) {
                 _this.snackbar.close("kInProcess");
             }
-            _this.forceUpdate();
+            // @ts-ignore
+            (_c = _this._footeRef.current) === null || _c === void 0 ? void 0 : _c.setProcessing(process);
+            // this.forceUpdate();
             return _this;
         };
         _this.isInProcess = function () {
@@ -310,7 +314,7 @@ var DialogBase = /** @class */ (function (_super) {
             _this.orderPositionWithReference();
             var _a = _this._dialogOptions.backdrop, backgroundColor = _a.backgroundColor, opacity = _a.opacity;
             var bgCl = hexToRgb(backgroundColor, opacity);
-            return React.createElement("div", { className: "dialog-backdrop dialog-backdrop-show", ref: _this._backdropRef, style: {
+            return (0, jsx_runtime_1.jsx)("div", { className: "dialog-backdrop dialog-backdrop-show", ref: _this._backdropRef, style: {
                     justifyContent: _this._dialogOptions.base.initialAnchor.horizontal,
                     // alignItems: dialogOptions.base.initialAnchor.vertical,
                     background: bgCl
@@ -322,7 +326,7 @@ var DialogBase = /** @class */ (function (_super) {
                         return;
                     }
                     _this.baseZoomEffect();
-                } }, _this.Content(body, header, actions));
+                }, children: _this.Content(body, header, actions) });
         };
         _this.switchFullScreen = function () {
             if (!_this.state.fullscreenMode) {
@@ -343,11 +347,11 @@ var DialogBase = /** @class */ (function (_super) {
                 _this._dialogOptions.base.style.backgroundColor : "#FFFFFF";
             var bg = _this._dialogOptions.base.style.background ?
                 _this._dialogOptions.base.style.background : "#FFFFFF";
-            return React.createElement("div", { className: 'dialog-content-placeholder', style: {
+            return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-content-placeholder', style: {
                     backgroundColor: bgColor,
                     background: bg,
                     display: placeholder ? 'flex' : 'none',
-                } }, placeholder);
+                }, children: placeholder });
         };
         _this.Header = function (header) {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -364,46 +368,92 @@ var DialogBase = /** @class */ (function (_super) {
                 headerProps = _this._dialogOptions.slotProps.header(staticProps);
             }
             if (_this._dialogOptions.slot.header) {
-                return React.createElement("div", { onDoubleClick: function (event) {
+                return (0, jsx_runtime_1.jsx)("div", { onDoubleClick: function (event) {
                         if (_this._fullscreen) {
                             _this.switchFullScreen();
                         }
-                    }, style: (_c = (_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : '') },
-                    React.createElement(WithHeaderFooterContext, __assign({}, staticProps),
-                        React.createElement(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this }))));
+                    }, style: (_c = (_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : ''), children: (0, jsx_runtime_1.jsx)(WithHeaderFooterContext, __assign({}, staticProps, { children: (0, jsx_runtime_1.jsx)(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this })) })) });
             }
             if (header instanceof Function) {
-                return React.createElement("div", { onDoubleClick: function (event) {
+                return (0, jsx_runtime_1.jsxs)("div", { onDoubleClick: function (event) {
                         if (_this._fullscreen) {
                             _this.switchFullScreen();
                         }
-                    }, style: (_e = (_d = _this._dialogOptions.base) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : '') },
-                    header(_this),
-                    (_this._closeable || _this._fullscreen) &&
-                        React.createElement(WithHeaderFooterContext, { dialog: _this },
-                            React.createElement(Futures_1.DialogHeaderActionsWrapper, null,
-                                _this._fullscreen &&
-                                    React.createElement(Futures_1.DialogFullscreenAction, null),
-                                _this._closeable &&
-                                    React.createElement(Futures_1.DialogCloseAction, null))));
+                    }, style: (_e = (_d = _this._dialogOptions.base) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : ''), children: [header(_this), (_this._closeable || _this._fullscreen) &&
+                            (0, jsx_runtime_1.jsx)(WithHeaderFooterContext, { dialog: _this, children: (0, jsx_runtime_1.jsxs)(Futures_1.DialogHeaderActionsWrapper, { children: [_this._fullscreen &&
+                                            (0, jsx_runtime_1.jsx)(Futures_1.DialogFullscreenAction, {}), _this._closeable &&
+                                            (0, jsx_runtime_1.jsx)(Futures_1.DialogCloseAction, {})] }) })] });
             }
-            return React.createElement("div", { style: (_g = (_f = _this._dialogOptions.base) === null || _f === void 0 ? void 0 : _f.header) === null || _g === void 0 ? void 0 : _g.style, className: 'drag-handle dialog-header' }, header);
+            return (0, jsx_runtime_1.jsx)("div", { style: (_g = (_f = _this._dialogOptions.base) === null || _f === void 0 ? void 0 : _f.header) === null || _g === void 0 ? void 0 : _g.style, className: 'drag-handle dialog-header', children: header });
         };
         _this.Body = function (body) {
             if (body instanceof Function) {
-                return React.createElement("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' } },
-                    _this.Placeholder(_this._holder),
-                    body(_this));
+                return (0, jsx_runtime_1.jsxs)("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' }, children: [_this.Placeholder(_this._holder), body(_this)] });
             }
-            return React.createElement("div", { style: { height: '100%', padding: 10 } }, _this._holder ?
-                _this.Placeholder(_this._holder)
-                :
-                    //@ts-ignore
-                    body);
+            return (0, jsx_runtime_1.jsx)("div", { style: { height: '100%', padding: 10 }, children: _this._holder ?
+                    _this.Placeholder(_this._holder)
+                    :
+                        //@ts-ignore
+                        body });
         };
-        _this.Footer = function (actions) {
-            var _a, _b, _c;
-            var CustomFooter = (_a = _this._dialogOptions.slot) === null || _a === void 0 ? void 0 : _a.footer;
+        // private Footer = (actions?: DialogAction[]) => {
+        //
+        //     const CustomFooter = this._dialogOptions.slot?.footer;
+        //
+        //
+        //     const staticProps: BaseDialogSlotProps = {
+        //         dialogValues: this.state.values,
+        //         dialogOptions: this._dialogOptions,
+        //         // apiRef: { current: this as IDialogRef } as RefObject<IDialogRef|IDialogCloseRef>
+        //         // apiRef: { current: this as IDialogRef }
+        //         dialog: this as IDialogDef
+        //     };
+        //
+        //     let footerProps = {};
+        //
+        //     if( this._dialogOptions.slotProps.footer ){
+        //         footerProps = this._dialogOptions.slotProps.footer({
+        //             dialogValues: this.state.values,
+        //             dialogOptions: this._dialogOptions,
+        //             inProcess: this.isInProcess()
+        //         })
+        //     }
+        //
+        //
+        //     console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
+        //
+        //     return <div className={'dialog-footer'} style={this._dialogOptions.base?.footer?.style}>
+        //         <div>
+        //             <WithHeaderFooterContext {...staticProps} dialog={this}>
+        //                 {
+        //                     this._dialogOptions.slot.footer ?
+        //                         /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
+        //                         <CustomFooter {...staticProps} {...footerProps} />
+        //                         :
+        //                         <DialogProcessing />
+        //                     /*<CircularProgress size={20} inProcess={this._inProcess} color={this._dialogOptions.progress.color}/>*/
+        //                 }
+        //             </WithHeaderFooterContext>
+        //
+        //
+        //         </div>
+        //         { this.Actions(actions)}
+        //     </div>
+        //
+        // };
+        // Bu islem Dialog Base state inden bagimsiz calisir
+        _this.Footer = React.forwardRef(function (_a, ref) {
+            var _b, _c, _d;
+            var actions = _a.actions;
+            var CustomFooter = (_b = _this._dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.footer;
+            // Imperative handle
+            var _e = React.useState(false), inProcess = _e[0], setInProcess = _e[1];
+            var setProcessing = function (inProcess) {
+                setInProcess(inProcess);
+            };
+            React.useImperativeHandle(ref, function () { return ({
+                setProcessing: setProcessing
+            }); });
             var staticProps = {
                 dialogValues: _this.state.values,
                 dialogOptions: _this._dialogOptions,
@@ -419,44 +469,39 @@ var DialogBase = /** @class */ (function (_super) {
                     inProcess: _this.isInProcess()
                 });
             }
-            console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik');
-            return React.createElement("div", { className: 'dialog-footer', style: (_c = (_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.footer) === null || _c === void 0 ? void 0 : _c.style },
-                React.createElement("div", null,
-                    React.createElement(WithHeaderFooterContext, __assign({}, staticProps, { dialog: _this }), _this._dialogOptions.slot.footer ?
-                        /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
-                        React.createElement(CustomFooter, __assign({}, staticProps, footerProps))
-                        :
-                            React.createElement(Futures_1.DialogProcessing, null)
-                    /*<CircularProgress size={20} inProcess={this._inProcess} color={this._dialogOptions.progress.color}/>*/
-                    )),
-                _this.Actions(actions));
-        };
+            console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
+            return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-footer', style: (_d = (_c = _this._dialogOptions.base) === null || _c === void 0 ? void 0 : _c.footer) === null || _d === void 0 ? void 0 : _d.style, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(WithHeaderFooterContext, __assign({}, staticProps, { dialog: _this, children: _this._dialogOptions.slot.footer ?
+                                /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
+                                (0, jsx_runtime_1.jsx)(CustomFooter, __assign({}, staticProps, footerProps))
+                                :
+                                    (0, jsx_runtime_1.jsx)(Futures_1.DialogProcessing, {}) })) }), _this.Actions(actions)] });
+        });
         _this.Actions = function (actions) {
-            return React.createElement("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' } }, actions.map(function (action, index) {
-                // const ref = this.slotActionsRef[index];
-                // const ActionSlot = this._dialogOptions?.slot?.action;
-                // // console.log('ActionSlot',ActionSlot);
-                // if (ActionSlot) {
-                //     return <ActionSlot
-                //         ref={ref}
-                //         key={index.toString()}
-                //         {...this._dialogOptions?.slotProps?.action}
-                //         onClick={ (event: React.MouseEvent) => {
-                //             action._onClickSlot( ref, this );
-                //         }}
-                //         label={action.options.label}
-                //         style={{...this._dialogOptions.slotProps?.action?.style, ...action.options.style }}
-                //     />
-                //
-                // }
-                var referencedAction = _this.initializeActionRef(action.name);
-                // this._actions[action.name] = referencedAction.current
-                return React.createElement(DialogActionBase_1.default, { name: action.name, ref: referencedAction, key: index.toString(), dialogBaseComponent: _this, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), 
-                    // onLoad={ dialogAction => {
-                    //     action.baseDialogAction = dialogAction;
-                    // }}
-                    style: action.options.style, baseStyle: _this._dialogOptions.base.actions.baseStyle, fontFamily: _this._fontFamily, stateListener: action._stateListener });
-            }));
+            return (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: actions.map(function (action, index) {
+                    // const ref = this.slotActionsRef[index];
+                    // const ActionSlot = this._dialogOptions?.slot?.action;
+                    // // console.log('ActionSlot',ActionSlot);
+                    // if (ActionSlot) {
+                    //     return <ActionSlot
+                    //         ref={ref}
+                    //         key={index.toString()}
+                    //         {...this._dialogOptions?.slotProps?.action}
+                    //         onClick={ (event: React.MouseEvent) => {
+                    //             action._onClickSlot( ref, this );
+                    //         }}
+                    //         label={action.options.label}
+                    //         style={{...this._dialogOptions.slotProps?.action?.style, ...action.options.style }}
+                    //     />
+                    //
+                    // }
+                    var referencedAction = _this.initializeActionRef(action.name);
+                    // this._actions[action.name] = referencedAction.current
+                    return (0, jsx_runtime_1.jsx)(DialogActionBase_1.default, { name: action.name, ref: referencedAction, dialogBaseComponent: _this, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), 
+                        // onLoad={ dialogAction => {
+                        //     action.baseDialogAction = dialogAction;
+                        // }}
+                        style: action.options.style, baseStyle: _this._dialogOptions.base.actions.baseStyle, fontFamily: _this._fontFamily, stateListener: action._stateListener }, index.toString());
+                }) });
         };
         _this.Content = function (body, header, actions) {
             var _a;
@@ -476,11 +521,10 @@ var DialogBase = /** @class */ (function (_super) {
             console.log('Content:', actions);
             var xKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "left" : "marginLeft";
             var yKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "top" : "marginTop";
-            return React.createElement(react_draggable_1.default, { disabled: !_this._draggable || _this.state.fullscreenMode, axis: 'both', handle: _this._draggable ? '.drag-handle' : '', scale: 1, ref: _this._backdropRef, onDrag: function (event, data) {
+            return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !_this._draggable || _this.state.fullscreenMode, axis: 'both', handle: _this._draggable ? '.drag-handle' : '', scale: 1, ref: _this._backdropRef, onDrag: function (event, data) {
                     event.stopPropagation();
                     _this._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
-                } },
-                React.createElement("div", { id: "dialog-main", ref: _this._dialogRef, onClick: function (e) {
+                }, children: (0, jsx_runtime_1.jsxs)("div", { id: "dialog-main", ref: _this._dialogRef, onClick: function (e) {
                         e.stopPropagation();
                     }, onKeyDown: function (e) {
                         if (typeof _this.props.keyboardListener === "function") {
@@ -489,15 +533,8 @@ var DialogBase = /** @class */ (function (_super) {
                         }
                     }, 
                     // className={this._dialogSize.width === 'auto' ? 'auto' : `dialog-width-${this._dialogSize.width} dialog-main show-opacity show-position-${this._dialogOptions.base.initialAnchor.vertical}`}
-                    className: _this._dialogOptions.base.size.width === 'auto' ? 'auto' : "dialog-width-".concat(_this._dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(_this._dialogOptions.base.initialAnchor.vertical), style: __assign(__assign(__assign(__assign({ alignSelf: _this._dialogOptions.base.initialAnchor.vertical, height: (_b = _this._dialogOptions.base.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof _this._dialogOptions.base.size.width === "number" ? { width: _this._dialogOptions.base.size.width } : null), (_a = { outline: 'none' }, _a[yKey] = _this.dialogPosFromMultipleDialogs.top + 'px', _a[xKey] = _this.dialogPosFromMultipleDialogs.left + 'px', _a)), _this._dialogOptions.base.style), { fontFamily: _this._fontFamily }) },
-                    React.createElement(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack },
-                        (_this._header || _this._dialogOptions.slot.header) && _this.Header(header),
-                        _this.Body(body),
-                        _this.Footer(actions)),
-                    (_this._dialogOptions.base.resizeable) &&
-                        React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "resizable-handle", onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown },
-                                React.createElement(ResizeIcon_1.default, { color: '#286e94' })))));
+                    className: _this._dialogOptions.base.size.width === 'auto' ? 'auto' : "dialog-width-".concat(_this._dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(_this._dialogOptions.base.initialAnchor.vertical), style: __assign(__assign(__assign(__assign({ alignSelf: _this._dialogOptions.base.initialAnchor.vertical, height: (_b = _this._dialogOptions.base.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof _this._dialogOptions.base.size.width === "number" ? { width: _this._dialogOptions.base.size.width } : null), (_a = { outline: 'none' }, _a[yKey] = _this.dialogPosFromMultipleDialogs.top + 'px', _a[xKey] = _this.dialogPosFromMultipleDialogs.left + 'px', _a)), _this._dialogOptions.base.style), { fontFamily: _this._fontFamily }), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack, children: [(_this._header || _this._dialogOptions.slot.header) && _this.Header(header), _this.Body(body), (0, jsx_runtime_1.jsx)(_this.Footer, { ref: _this._footeRef, actions: actions })] }), (_this._dialogOptions.base.resizeable) &&
+                            (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
         };
         _this.render = function () {
             return _this.withBackdrop(_this._body, _this._header, _this._actions);

package/components/Futures/DialogCloseAction.d.ts

@@ -1,3 +1,2 @@
-import * as React from "react";
-declare const DialogCloseAction: () => React.JSX.Element;
+declare const DialogCloseAction: () => import("react/jsx-runtime").JSX.Element;
 export { DialogCloseAction };

package/components/Futures/DialogCloseAction.js

@@ -1,34 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogCloseAction = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var CloseIcon_1 = __importDefault(require("../icons/CloseIcon"));
-var React = __importStar(require("react"));
 var react_1 = require("react");
 var DialogBase_1 = require("../DialogBase");
 // const DialogCloseAction = ({dialog}:{dialog: React.RefObject<IDialogRef> | undefined}) => {
@@ -39,16 +16,15 @@ var DialogCloseAction = function () {
     var _dialog = dialogHeaderContext.dialog;
     // console.log('DialogCloseAction_props', dialogHeaderContext);
     // return <div className={'close-icon-wrapper'} onClick={event => apiRef.current.close()} >
-    return React.createElement("div", { className: 'close-icon-wrapper', onClick: function (event) {
+    return (0, jsx_runtime_1.jsx)("div", { className: 'close-icon-wrapper', onClick: function (event) {
             // props.dialog.close()
             _dialog.close();
-        } },
-        React.createElement(CloseIcon_1.default
+        }, children: (0, jsx_runtime_1.jsx)(CloseIcon_1.default
         // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
         // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
         , { 
             // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
             // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
-            size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null }));
+            size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null }) });
 };
 exports.DialogCloseAction = DialogCloseAction;

package/components/Futures/DialogFullscreenAction.d.ts

@@ -1,3 +1,2 @@
-import * as React from "react";
-declare const DialogFullscreenAction: () => React.JSX.Element;
+declare const DialogFullscreenAction: () => import("react/jsx-runtime").JSX.Element;
 export { DialogFullscreenAction };

package/components/Futures/DialogFullscreenAction.js

@@ -1,33 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogFullscreenAction = void 0;
-var React = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var FullscreenExitIcon_1 = __importDefault(require("../icons/FullscreenExitIcon"));
 var FullscreenIcon_1 = __importDefault(require("../icons/FullscreenIcon"));
 var react_1 = require("react");
@@ -37,24 +14,24 @@ var DialogFullscreenAction = function () {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var dialogHeaderContext = (0, react_1.useContext)(DialogBase_1.DialogHeaderFooterContext);
     var _dialog = dialogHeaderContext.dialog;
-    return React.createElement("div", { className: 'fullscreen-icon-wrapper', onClick: function (event) {
+    return (0, jsx_runtime_1.jsx)("div", { className: 'fullscreen-icon-wrapper', onClick: function (event) {
             event.stopPropagation();
             _dialog.switchFullScreen();
-        } }, _dialog.state.fullscreenMode ?
-        React.createElement(FullscreenExitIcon_1.default
-        // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
-        // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
-        , { 
-            // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
-            // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
-            size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null })
-        :
-            React.createElement(FullscreenIcon_1.default
+        }, children: _dialog.state.fullscreenMode ?
+            (0, jsx_runtime_1.jsx)(FullscreenExitIcon_1.default
             // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
             // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
             , { 
                 // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
                 // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
-                size: (_f = (_e = _dialog.dialogOptions.base.headerControllerIcons) === null || _e === void 0 ? void 0 : _e.size) !== null && _f !== void 0 ? _f : 24, color: (_h = (_g = _dialog.dialogOptions.base.headerControllerIcons) === null || _g === void 0 ? void 0 : _g.color) !== null && _h !== void 0 ? _h : null }));
+                size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null })
+            :
+                (0, jsx_runtime_1.jsx)(FullscreenIcon_1.default
+                // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
+                // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
+                , { 
+                    // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
+                    // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
+                    size: (_f = (_e = _dialog.dialogOptions.base.headerControllerIcons) === null || _e === void 0 ? void 0 : _e.size) !== null && _f !== void 0 ? _f : 24, color: (_h = (_g = _dialog.dialogOptions.base.headerControllerIcons) === null || _g === void 0 ? void 0 : _g.color) !== null && _h !== void 0 ? _h : null }) });
 };
 exports.DialogFullscreenAction = DialogFullscreenAction;

package/components/Futures/DialogHeaderActionsWrapper.d.ts

@@ -3,5 +3,5 @@ interface IProps {
     gap?: number;
     children?: React.ReactNode;
 }
-declare const DialogHeaderActionsWrapper: (props: IProps) => React.JSX.Element;
+declare const DialogHeaderActionsWrapper: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export { DialogHeaderActionsWrapper };

package/components/Futures/DialogHeaderActionsWrapper.js

@@ -10,14 +10,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogHeaderActionsWrapper = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var DialogHeaderActionsWrapper = function (props) {
     var _a;
-    return (react_1.default.createElement("div", __assign({}, props, { className: 'header-actions-wrapper', style: { columnGap: "".concat((_a = props.gap) !== null && _a !== void 0 ? _a : 10, "px") } }), props.children));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { className: 'header-actions-wrapper', style: { columnGap: "".concat((_a = props.gap) !== null && _a !== void 0 ? _a : 10, "px") }, children: props.children })));
 };
 exports.DialogHeaderActionsWrapper = DialogHeaderActionsWrapper;

package/components/Futures/DialogInfoAction.d.ts

@@ -1,3 +1,2 @@
-import * as React from "react";
-declare const DialogInfoAction: () => React.JSX.Element;
+declare const DialogInfoAction: () => import("react/jsx-runtime").JSX.Element;
 export { DialogInfoAction };

package/components/Futures/DialogInfoAction.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogInfoAction = void 0;
-var React = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var DialogBase_1 = require("../DialogBase");
 var InfoIcon_1 = __importDefault(require("../icons/InfoIcon"));
@@ -39,7 +39,7 @@ var DialogInfoAction = function () {
     var _a, _b, _c, _d;
     var dialogHeaderContext = (0, react_1.useContext)(DialogBase_1.DialogHeaderFooterContext);
     var _dialog = dialogHeaderContext.dialog;
-    return React.createElement("div", { className: 'info-icon-wrapper', onClick: function (event) {
+    return (0, jsx_runtime_1.jsx)("div", { className: 'info-icon-wrapper', onClick: function (event) {
             var closeAction = new __1.DialogAction('closeAction', {
                 label: 'Close',
                 variant: 'text',
@@ -72,23 +72,12 @@ var DialogInfoAction = function () {
             });
             dialog
                 .setHeader(function (dialog1) { return 'Info'; })
-                .setBody(function (dialog1) { return React.createElement("table", null,
-                React.createElement("tbody", null,
-                    React.createElement("tr", null,
-                        React.createElement("td", null, "Name"),
-                        React.createElement("td", null, package_json_1.default.name)),
-                    React.createElement("tr", null,
-                        React.createElement("td", null, "Varsion"),
-                        React.createElement("td", null, package_json_1.default.version)),
-                    React.createElement("tr", null,
-                        React.createElement("td", null, "Author"),
-                        React.createElement("td", null, package_json_1.default.author)))); })
+                .setBody(function (dialog1) { return (0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Name" }), (0, jsx_runtime_1.jsx)("td", { children: package_json_1.default.name })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Varsion" }), (0, jsx_runtime_1.jsx)("td", { children: package_json_1.default.version })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Author" }), (0, jsx_runtime_1.jsx)("td", { children: package_json_1.default.author })] })] }) }); })
                 .addActions([
                 closeAction
             ])
                 .initialState({})
                 .show();
-        } },
-        React.createElement(InfoIcon_1.default, { size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null }));
+        }, children: (0, jsx_runtime_1.jsx)(InfoIcon_1.default, { size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null }) });
 };
 exports.DialogInfoAction = DialogInfoAction;

package/components/Futures/DialogProcessing.d.ts

@@ -1,3 +1,2 @@
-import * as React from "react";
-declare const DialogProcessing: () => React.JSX.Element;
+declare const DialogProcessing: () => import("react/jsx-runtime").JSX.Element;
 export { DialogProcessing };

package/components/Futures/DialogProcessing.js

@@ -1,34 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogProcessing = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var CircularProgress_1 = __importDefault(require("../CircularProgress"));
-var React = __importStar(require("react"));
 var react_1 = require("react");
 var DialogBase_1 = require("../DialogBase");
 var DialogProcessing = function () {
@@ -36,6 +13,6 @@ var DialogProcessing = function () {
     var dialogHeaderContext = (0, react_1.useContext)(DialogBase_1.DialogHeaderFooterContext);
     var _dialog = dialogHeaderContext.dialog;
     console.log('_dialog_isInProcess', _dialog.isInProcess());
-    return React.createElement(CircularProgress_1.default, { size: (_a = _dialog.dialogOptions.progress.size) !== null && _a !== void 0 ? _a : 20, inProcess: _dialog.isInProcess(), color: (_c = (_b = _dialog.dialogOptions.progress) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : '#399aec' });
+    return (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: (_a = _dialog.dialogOptions.progress.size) !== null && _a !== void 0 ? _a : 20, inProcess: _dialog.isInProcess(), color: (_c = (_b = _dialog.dialogOptions.progress) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : '#399aec' });
 };
 exports.DialogProcessing = DialogProcessing;

package/components/RippleButton.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 var react_1 = require("react");
 exports.default = React.forwardRef(function (_a, ref) {
@@ -66,7 +67,7 @@ exports.default = React.forwardRef(function (_a, ref) {
         rippleEffect: rippleEffect
     }); });
     console.log('Ripple_button_style', style);
-    return (React.createElement("button", { 
+    return ((0, jsx_runtime_1.jsxs)("button", { 
         // ref={buttonRef}
         ref: ref, disabled: disabled, className: "ripple-button ripple-button-".concat(variant, " ripple-button-").concat(color, " ").concat(disabled ? 'ripple-button-disabled' : ''), onClick: function (e) {
             //@ts-ignore
@@ -75,7 +76,5 @@ exports.default = React.forwardRef(function (_a, ref) {
             setTimeout(function () {
                 onClick && onClick(e);
             }, 200);
-        }, style: __assign(__assign(__assign({}, baseStyle), style), { fontFamily: fontFamily }) },
-        isRippling && React.createElement("span", { className: "ripple", style: { left: coords.x, top: coords.y } }),
-        React.createElement("span", { className: "content" }, children(ref.current))));
+        }, style: __assign(__assign(__assign({}, baseStyle), style), { fontFamily: fontFamily }), children: [isRippling && (0, jsx_runtime_1.jsx)("span", { className: "ripple", style: { left: coords.x, top: coords.y } }), (0, jsx_runtime_1.jsx)("span", { className: "content", children: children(ref.current) })] }));
 });

package/components/icons/CloseIcon.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare const _default: ({ size, color }: {
     size?: number;
     color?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/components/icons/CloseIcon.js

@@ -10,14 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 exports.default = (function (_a) {
     var size = _a.size, color = _a.color;
-    return react_1.default.createElement("div", { className: 'close-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null) },
-        react_1.default.createElement("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "CloseIcon" },
-            react_1.default.createElement("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })));
+    return (0, jsx_runtime_1.jsx)("div", { className: 'close-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null), children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "CloseIcon", children: (0, jsx_runtime_1.jsx)("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) });
 });

package/components/icons/FullscreenExitIcon.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare const _default: ({ size, color }: {
     size?: number;
     color?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/components/icons/FullscreenExitIcon.js

@@ -10,14 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 exports.default = (function (_a) {
     var size = _a.size, color = _a.color;
-    return react_1.default.createElement("div", { className: 'fullscreen-exit-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null) },
-        react_1.default.createElement("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "FullscreenExitIcon" },
-            react_1.default.createElement("path", { d: "M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11V5h-2v5h5V8z" })));
+    return (0, jsx_runtime_1.jsx)("div", { className: 'fullscreen-exit-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null), children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "FullscreenExitIcon", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11V5h-2v5h5V8z" }) }) });
 });

package/components/icons/FullscreenIcon.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare const _default: ({ size, color }: {
     size?: number;
     color?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/components/icons/FullscreenIcon.js

@@ -10,14 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 exports.default = (function (_a) {
     var size = _a.size, color = _a.color;
-    return react_1.default.createElement("div", { className: 'fullscreen-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null) },
-        react_1.default.createElement("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "FullscreenIcon", color: color },
-            react_1.default.createElement("path", { d: "M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z" })));
+    return (0, jsx_runtime_1.jsx)("div", { className: 'fullscreen-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null), children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "FullscreenIcon", color: color, children: (0, jsx_runtime_1.jsx)("path", { d: "M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z" }) }) });
 });

package/components/icons/InfoIcon.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare const _default: ({ size, color }: {
     size?: number;
     color?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/components/icons/InfoIcon.js

@@ -10,14 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 exports.default = (function (_a) {
     var size = _a.size, color = _a.color;
-    return react_1.default.createElement("div", { className: 'info-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null) },
-        react_1.default.createElement("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "InfoIcon" },
-            react_1.default.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z" })));
+    return (0, jsx_runtime_1.jsx)("div", { className: 'info-icon icon-base', style: __assign({ fill: color }, size ? { width: size } : null), children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "InfoIcon", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z" }) }) });
 });

package/components/icons/ResizeIcon.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare const _default: ({ size, color }: {
     size?: number;
     color?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/components/icons/ResizeIcon.js

@@ -1,14 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 exports.default = (function (_a) {
     var size = _a.size, color = _a.color;
-    return react_1.default.createElement("div", { className: 'resizable-handle-icon icon-base', style: {
+    return (0, jsx_runtime_1.jsx)("div", { className: 'resizable-handle-icon icon-base', style: {
             fill: color
-        } },
-        react_1.default.createElement("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ArrowBackIosNewIcon" },
-            react_1.default.createElement("path", { d: "M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z" })));
+        }, children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ArrowBackIosNewIcon", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z" }) }) });
 });

package/models/DialogAction.d.ts

@@ -1,7 +1,6 @@
 import { TDialogStateListenerForActionCallbackType, DialogActionOptionsType, TBVariant, TBColor, ActionProps, DialogActionType } from "../types/DialogActionTypes";
 import DialogActionBase from "../components/DialogActionBase";
-import * as React from "react";
-declare const ActionProgress: () => React.JSX.Element;
+declare const ActionProgress: () => import("react/jsx-runtime").JSX.Element;
 export { ActionProgress };
 declare class DialogAction extends DialogActionBase {
     constructor(name: string, options?: DialogActionOptionsType);

package/models/DialogAction.js

@@ -25,39 +25,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogAction = exports.ActionProgress = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var DialogActionBase_1 = __importDefault(require("../components/DialogActionBase"));
 var CircularProgress_1 = __importDefault(require("../components/CircularProgress"));
-var React = __importStar(require("react"));
 var ActionProgress = function () {
-    return React.createElement(CircularProgress_1.default, { size: 20, inProcess: { inProcess: true } });
+    return (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 20, inProcess: { inProcess: true } });
 };
 exports.ActionProgress = ActionProgress;
 var DialogAction = /** @class */ (function (_super) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",
@@ -21,7 +21,7 @@
     }
   ],
   "scripts": {
-    "pb": "git add . && git commit -m \"My Changes update\" && npm version patch && npm publish && cp ./package.json ../src/dist.package.json"
+    "pb": "npm version patch && npm publish && cp ./package.json ../src/dist.package.json"
   },
   "keywords": [
     "react",