@tap-payments/os-micro-frontend-shared 0.0.15 → 0.0.16-OTP-fix

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/CountBadge/style.d.ts

@@ -124,7 +124,7 @@ export declare const AgreementImageWrapper: import("@emotion/styled").StyledComp
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;

package/build/components/Dialog/style.d.ts

@@ -124,7 +124,7 @@ export declare const DialogWrapper: import("@emotion/styled").StyledComponent<{
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build/components/FlippingCard/style.d.ts

@@ -124,7 +124,7 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build/components/ImageWrapper/ImageWrapper.d.ts

@@ -124,7 +124,7 @@ declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;

package/build/components/JSONViewer/JSONViewer.d.ts

@@ -1,2 +1,2 @@
-import { JSONViewerProps } from './type';
-export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, windowOrder, requestJson }: JSONViewerProps): import("react/jsx-runtime").JSX.Element;
+import { JsonViewerProps } from './type';
+export default function JSONViewer({ index, json, requestJson, isWindowMinimized, windowOrder, onClose }: JsonViewerProps): import("react/jsx-runtime").JSX.Element;

package/build/components/JSONViewer/JSONViewer.js

@@ -14,7 +14,7 @@ import { ButtonsWrapper, FooterWrapper, JSONContainer, JSONViewerWrapper, Sectio
 import TableFooter from '../VirtualTable/components/TableFooter';
 const VIEWER_WIDTH = 400;
 const animationDuration = 0.5;
-export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, windowOrder, requestJson }) {
+export default function JSONViewer({ index, json, requestJson = {}, isWindowMinimized, windowOrder, onClose }) {
     var _a, _b, _c, _d;
     const [isMaximized, setIsMaximized] = useState(false);
     const [isResized, setIsResized] = useState(false);
@@ -29,25 +29,15 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
     const requestTimerRef = useRef();
     const { onMouseEnter, onMouseLeave, isHovered } = useMouseState();
     const { height, width } = useWindowDimensions();
-    const [position, setPosition] = useState({ x: width / 2 - VIEWER_WIDTH / 4, y: height / 2 - VIEWER_HEIGHT / 2 });
+    const [position, setPosition] = useState({
+        x: width / 2 + VIEWER_WIDTH / 4 - index * 20,
+        y: height / 2 - VIEWER_HEIGHT / 2 + index * 30,
+    });
     const resizableRef = useRef();
-    const isOpen = Boolean(anchorEl);
-    const jsonBody = useMemo(() => {
-        try {
-            const parsedJson = JSON.parse(json || '');
-            if (requestJson) {
-                parsedJson === null || parsedJson === void 0 ? true : delete parsedJson.request_body;
-            }
-            return parsedJson;
-        }
-        catch (error) {
-            return {};
-        }
-    }, [json, requestJson]);
     const objectPropertiesCount = useMemo(() => {
         var _a;
-        return (_a = Object.keys(jsonBody)) === null || _a === void 0 ? void 0 : _a.length;
-    }, [jsonBody]);
+        return (_a = Object.keys(json)) === null || _a === void 0 ? void 0 : _a.length;
+    }, [json]);
     const isSafari = isSafariBrowser();
     const currentRequestWidth = Number((_b = (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.width) || VIEWER_WIDTH;
     const onCopied = (text) => {
@@ -55,21 +45,10 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
             navigator.clipboard.writeText(text || '').then(() => { });
         }, 10);
     };
-    const requestJsonBody = useMemo(() => {
-        try {
-            if (!requestJson) {
-                return {};
-            }
-            return JSON.parse(requestJson);
-        }
-        catch (error) {
-            return {};
-        }
-    }, [requestJson]);
     const requestObjectPropertiesCount = useMemo(() => {
         var _a;
-        return (_a = Object.keys(requestJsonBody)) === null || _a === void 0 ? void 0 : _a.length;
-    }, [requestJsonBody]);
+        return (_a = Object.keys(requestJson)) === null || _a === void 0 ? void 0 : _a.length;
+    }, [requestJson]);
     useEffect(() => {
         if (requestTimerRef.current) {
             clearTimeout(requestTimerRef.current);
@@ -95,7 +74,7 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
             });
         }, bounds: {
             top: 10,
-        } }, { children: _jsx(Dialog, Object.assign({ disableEnforceFocus: true, sx: Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: 'transparent', zIndex: (windowOrder || 0) + APP_WINDOW_Z_INDEX }, (isAppMinimized && {
+        } }, { children: _jsx(Dialog, Object.assign({ disableEnforceFocus: true, sx: Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: 'transparent', zIndex: (windowOrder || 0) + APP_WINDOW_Z_INDEX + (isMaximized ? 1 : 0) }, (isWindowMinimized && {
                 display: 'none',
             })), { transform: 'translate(180px, 14px)' }), (!isMaximized && {
                 width: isSafari ? (newDimensions === null || newDimensions === void 0 ? void 0 : newDimensions.width) || viewerWidth : 'fit-content',
@@ -113,7 +92,7 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
                 setTimeout(() => {
                     setIsToolbarAnimationDisabled(false);
                 }, animationDuration * 1000);
-            }, open: isOpen, hideBackdrop: true, fullScreen: isMaximized, "aria-labelledby": "draggable-dialog-title" }, { children: _jsx(Resizable, Object.assign({ enable: {
+            }, open: true, hideBackdrop: true, fullScreen: isMaximized, "aria-labelledby": "draggable-dialog-title" }, { children: _jsx(Resizable, Object.assign({ enable: {
                     left: false,
                     right: true,
                     bottomRight: true,
@@ -149,9 +128,7 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
                                 transform: `translateX(${isRequestShown ? -currentRequestWidth : 0}px)`,
                             })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
                                 duration: 0,
-                            })) }, { children: _jsx(JSONTitleBar, { title: isRequestShown ? 'JSON Request & Response' : 'JSON Response', onClose: (e) => {
-                                    onClose === null || onClose === void 0 ? void 0 : onClose(e);
-                                }, onMaximize: () => {
+                            })) }, { children: _jsx(JSONTitleBar, { title: isRequestShown ? 'JSON Request & Response' : 'JSON Response', onClose: () => onClose(), onMaximize: () => {
                                     setIsMaximized((prev) => !prev);
                                     setIsToolbarAnimationDisabled(true);
                                     setTimeout(() => {
@@ -167,7 +144,7 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
                                             height: VIEWER_HEIGHT,
                                         });
                                     }
-                                }, isRequestExpanded: isRequestShown, showRequestIcon: Boolean(requestJson) }) })), _jsxs(Box, Object.assign({ sx: {
+                                }, isRequestExpanded: isRequestShown, showRequestIcon: Boolean(requestObjectPropertiesCount) }) })), _jsxs(Box, Object.assign({ sx: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 justifyContent: 'space-between',
@@ -213,10 +190,10 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
                                                 }, isRequestShown: isRequestShown }, { children: [_jsx(StyledHeaderWrapper, { children: _jsx(StyledTitle, Object.assign({ variant: "subtitle1" }, { children: "API Request" })) }), _jsxs(ButtonsWrapper, { children: [_jsx(AnimatedButton, { disableAnimation: true, onClick: () => {
                                                                     setIsRequestCollapsed((prev) => !prev);
                                                                 }, icon: !isRequestCollapsed ? collapseArrowsIcon : expandArrowsIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                    navigator.clipboard.writeText(json || '').then(() => { });
+                                                                    navigator.clipboard.writeText(JSON.stringify(json)).then(() => { });
                                                                 }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                    navigator.clipboard.writeText((jsonBody === null || jsonBody === void 0 ? void 0 : jsonBody.id) || '').then(() => { });
-                                                                }, icon: idIcon })] })] })), _jsxs(JsonView, Object.assign({ value: requestJsonBody, style: requestJsonTheme, displayDataTypes: false, collapsed: isRequestCollapsed ? 1 : undefined, onCopied: (_, value) => {
+                                                                    navigator.clipboard.writeText((json === null || json === void 0 ? void 0 : json.id) || '').then(() => { });
+                                                                }, icon: idIcon })] })] })), _jsxs(JsonView, Object.assign({ value: requestJson, style: requestJsonTheme, displayDataTypes: false, collapsed: isRequestCollapsed ? 1 : undefined, onCopied: (_, value) => {
                                                     if (typeof value === 'string') {
                                                         onCopied(value);
                                                     }
@@ -265,10 +242,10 @@ export default function JSONViewer({ anchorEl, onClose, json, isAppMinimized, wi
                                     } }, { children: [_jsxs(SectionWrapper, Object.assign({ isMaximized: isMaximized, isScrollingRequest: isScrollingResponse, isRequestShown: isRequestShown }, { children: [_jsx(StyledHeaderWrapper, { children: _jsx(StyledTitle, Object.assign({ variant: "subtitle1" }, { children: "API Response" })) }), _jsxs(ButtonsWrapper, { children: [_jsx(AnimatedButton, { disableAnimation: true, onClick: () => {
                                                                 setIsResponseCollapsed((prev) => !prev);
                                                             }, icon: !isResponseCollapsed ? collapseArrowsIcon : expandArrowsIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                navigator.clipboard.writeText(json || '').then(() => { });
+                                                                navigator.clipboard.writeText(JSON.stringify(json, null, 2)).then(() => { });
                                                             }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                navigator.clipboard.writeText((jsonBody === null || jsonBody === void 0 ? void 0 : jsonBody.id) || '').then(() => { });
-                                                            }, icon: idIcon })] })] })), _jsxs(JsonView, Object.assign({ value: jsonBody, style: jsonTheme, displayDataTypes: false, collapsed: isResponseCollapsed ? 1 : undefined, onCopied: (_, value) => {
+                                                                navigator.clipboard.writeText((json === null || json === void 0 ? void 0 : json.id) || '').then(() => { });
+                                                            }, icon: idIcon })] })] })), _jsxs(JsonView, Object.assign({ value: json, style: jsonTheme, displayDataTypes: false, collapsed: isResponseCollapsed ? 1 : undefined, onCopied: (_, value) => {
                                                 if (typeof value === 'string') {
                                                     onCopied(value);
                                                 }

package/build/components/JSONViewer/JSONViewerList.d.ts

@@ -0,0 +1,9 @@
+import { JsonViewer } from './type';
+type Props = {
+    list: JsonViewer[];
+    onClose: (index: number) => void;
+    isWindowMinimized: boolean;
+    windowOrder: number;
+};
+export declare const JSONViewerList: ({ list, onClose, isWindowMinimized, windowOrder }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/components/JSONViewer/JSONViewerList.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import JSONViewer from './JSONViewer';
+export const JSONViewerList = ({ list, onClose, isWindowMinimized, windowOrder }) => {
+    if (!(list === null || list === void 0 ? void 0 : list.length)) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: list.map((item, index) => (_jsx(JSONViewer, { index: index, json: item.json, requestJson: item === null || item === void 0 ? void 0 : item.requestJson, onClose: () => {
+                onClose(index);
+            }, isWindowMinimized: isWindowMinimized, windowOrder: windowOrder }, item.json.id))) }));
+};

package/build/components/JSONViewer/components/JSONTitleBar/JSONTitleBar.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
-import Toolbar from '../../../Toolbar';
-import { StyledHeaderWrapperStyled } from '../../../Toolbar/style';
+import Toolbar, { StyledHeaderWrapperStyled } from '../../../Toolbar';
 import { CloseIcon, ExpandButton, MaximizeIcon } from '../../../ToolbarIcon';
 import { jsonIcon } from '../../../../constants/index.js';
 function JSONTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded = false, showRequestIcon = false, isHovered = false, }) {

package/build/components/JSONViewer/context/Provider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type JsonViewerDialogProviderProps = {
+    children: ReactNode;
+};
+export declare const JsonViewerDialogContextProvider: ({ children }: JsonViewerDialogProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/JSONViewer/context/Provider.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { JSONViewerList } from '../JSONViewerList';
+import { JsonViewerDialogContext } from './context';
+export const JsonViewerDialogContextProvider = ({ children }) => {
+    const [jsonViewerList, setJsonViewerList] = useState([]);
+    const [isWindowMinimized, setIsWindowMinimized] = useState(false);
+    const [windowOrder, setWindowOrder] = useState(1);
+    const handleJsonViewerDialogOpen = useCallback((jsonViewer) => {
+        var _a;
+        if (jsonViewerList.length === 7) {
+            alert('Maximum allowed active Json Viewer is 7 per table.');
+            return;
+        }
+        if (jsonViewerList.some((item) => item.json.id === jsonViewer.json.id)) {
+            return;
+        }
+        (_a = jsonViewer === null || jsonViewer === void 0 ? void 0 : jsonViewer.json) === null || _a === void 0 ? true : delete _a.request_body;
+        setJsonViewerList((prev) => [...prev, jsonViewer]);
+    }, [jsonViewerList]);
+    const handleJsonViewerDialogClose = (index) => {
+        setJsonViewerList((prev) => prev.filter((_, idx) => index !== idx));
+    };
+    const handleWindowMinimize = (value) => {
+        setIsWindowMinimized(value);
+    };
+    const handleWindowOrder = (value) => {
+        setWindowOrder(value);
+    };
+    const contextValue = useMemo(() => ({
+        jsonViewerList,
+        handleJsonViewerDialogOpen,
+        handleWindowMinimize,
+        handleWindowOrder,
+    }), [jsonViewerList, handleJsonViewerDialogOpen]);
+    return (_jsxs(JsonViewerDialogContext.Provider, Object.assign({ value: contextValue }, { children: [children, _jsx(JSONViewerList, { list: jsonViewerList, onClose: handleJsonViewerDialogClose, isWindowMinimized: isWindowMinimized, windowOrder: windowOrder })] })));
+};

package/build/components/JSONViewer/context/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { JsonViewerContext } from '../type';
+export declare const JsonViewerDialogContext: import("react").Context<JsonViewerContext>;

package/build/components/JSONViewer/context/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+export const JsonViewerDialogContext = createContext({
+    jsonViewerList: [],
+    handleJsonViewerDialogOpen: () => { },
+    handleWindowMinimize: () => { },
+    handleWindowOrder: () => { },
+});

package/build/components/JSONViewer/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export { JsonViewerDialogContextProvider } from './Provider';

package/build/components/JSONViewer/context/index.js

@@ -0,0 +1,2 @@
+export * from './context';
+export { JsonViewerDialogContextProvider } from './Provider';

package/build/components/JSONViewer/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useJsonViewerContext } from './useJsonViewerContext';

package/build/components/JSONViewer/hooks/index.js

@@ -0,0 +1 @@
+export { useJsonViewerContext } from './useJsonViewerContext';

package/build/components/JSONViewer/hooks/useJsonViewerContext.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    isWindowMinimized: boolean;
+    windowOrder: number;
+};
+export declare const useJsonViewerContext: ({ isWindowMinimized, windowOrder }: Props) => {
+    handleJsonViewerDialogOpen: (jsonViewer: import("..").JsonViewer) => void;
+};
+export {};

package/build/components/JSONViewer/hooks/useJsonViewerContext.js

@@ -0,0 +1,18 @@
+import { useContext, useEffect, useCallback } from 'react';
+import { JsonViewerDialogContext } from '../context';
+export const useJsonViewerContext = ({ isWindowMinimized, windowOrder }) => {
+    const { handleJsonViewerDialogOpen, handleWindowMinimize, handleWindowOrder } = useContext(JsonViewerDialogContext);
+    const onWindowMinimize = useCallback(() => {
+        handleWindowMinimize(isWindowMinimized);
+    }, [handleWindowMinimize, isWindowMinimized]);
+    const onWindowOrder = useCallback(() => {
+        handleWindowOrder(windowOrder);
+    }, [handleWindowOrder, windowOrder]);
+    useEffect(() => {
+        onWindowOrder();
+    }, [onWindowOrder]);
+    useEffect(() => {
+        onWindowMinimize();
+    }, [onWindowMinimize]);
+    return { handleJsonViewerDialogOpen };
+};

package/build/components/JSONViewer/index.d.ts

@@ -1,4 +1,7 @@
 import JSONViewer from './JSONViewer';
-export * from './components';
+export * from './context';
 export * from './type';
+export * from './hooks';
+export * from './JSONViewerList';
+export * from './components';
 export default JSONViewer;

package/build/components/JSONViewer/index.js

@@ -1,4 +1,7 @@
 import JSONViewer from './JSONViewer';
-export * from './components';
+export * from './context';
 export * from './type';
+export * from './hooks';
+export * from './JSONViewerList';
+export * from './components';
 export default JSONViewer;

package/build/components/JSONViewer/style.d.ts

@@ -215,7 +215,7 @@ export declare const JSONViewerWrapper: import("@emotion/styled").StyledComponen
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -480,7 +480,7 @@ export declare const JSONViewerWrapperRequest: import("@emotion/styled").StyledC
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build/components/JSONViewer/type.d.ts

@@ -1,14 +1,22 @@
-import React, { SyntheticEvent } from 'react';
-export interface JSONViewerProps {
-    json?: string;
-    anchorEl: null | HTMLElement;
-    onClose?: (e?: SyntheticEvent) => void;
-    requestJson?: string;
-    isAppMinimized?: boolean;
+import type { HTMLAttributes, ReactNode } from 'react';
+export type JsonViewerProps = JsonViewer & {
+    index: number;
+    onClose: () => void;
+    isWindowMinimized?: boolean;
     windowOrder?: number;
-}
-export interface AnimatedButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    label?: React.ReactNode;
+};
+export interface AnimatedButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    label?: ReactNode;
     icon?: string;
     disableAnimation?: boolean;
 }
+export type JsonViewer = {
+    json: Record<string, any>;
+    requestJson?: Record<string, any>;
+};
+export type JsonViewerContext = {
+    jsonViewerList: JsonViewer[];
+    handleJsonViewerDialogOpen: (jsonViewer: JsonViewer) => void;
+    handleWindowMinimize: (value: boolean) => void;
+    handleWindowOrder: (value: number) => void;
+};

package/build/components/{OTPInput/OTPInput.d.ts → OTPInputField/OTPInputField.d.ts}

@@ -5,6 +5,6 @@ interface OTPInputProps extends Omit<OtpInputProps, 'numInputs' | 'onChange'> {
     onChange?: (otp: string) => void;
     onSubmitOtp?: (otp: string) => void;
 }
-declare function OTPInput({ numInputs, separateAfter, isInputSecure, isInputNum, onSubmitOtp, ...props }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof OTPInput>;
+declare function OTPInputField({ numInputs, separateAfter, isInputSecure, isInputNum, onSubmitOtp, ...props }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof OTPInputField>;
 export default _default;

package/build/components/{OTPInput/OTPInput.js → OTPInputField/OTPInputField.js}

@@ -14,7 +14,7 @@ import { useState, memo } from 'react';
 import Box from '@mui/material/Box';
 import OtpInput from 'react18-input-otp';
 import { inputFocusStyle, inputStyle, inputErrorStyle, Separator } from './style';
-function OTPInput(_a) {
+function OTPInputField(_a) {
     var { numInputs = 6, separateAfter = 3, isInputSecure = true, isInputNum = true, onSubmitOtp } = _a, props = __rest(_a, ["numInputs", "separateAfter", "isInputSecure", "isInputNum", "onSubmitOtp"]);
     const [otp, setOtp] = useState('');
     const handleChange = (enteredOtp) => {
@@ -29,4 +29,4 @@ function OTPInput(_a) {
             },
         } }, { children: _jsx(OtpInput, Object.assign({ inputStyle: Object.assign(Object.assign({}, inputStyle), props.inputProps), focusStyle: inputFocusStyle, errorStyle: inputErrorStyle, value: otp, separator: _jsx(Separator, { children: "-" }), isInputNum: isInputNum, isInputSecure: isInputSecure, numInputs: numInputs, separateAfter: separateAfter, shouldAutoFocus: true, onChange: handleChange }, props)) })));
 }
-export default memo(OTPInput);
+export default memo(OTPInputField);

package/build/components/OTPInputField/index.d.ts

@@ -0,0 +1,2 @@
+import OTPInputField from './OTPInputField';
+export default OTPInputField;

package/build/components/OTPInputField/index.js

@@ -0,0 +1,2 @@
+import OTPInputField from './OTPInputField';
+export default OTPInputField;

package/build/components/SearchButton/styles.d.ts

@@ -130,7 +130,7 @@ export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
     onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLInputElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
@@ -418,7 +418,7 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onBlurCapture?: import("react").FocusEventHandler<HTMLImageElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLImageElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLImageElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLImageElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLImageElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLImageElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLImageElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLImageElement> | undefined;

package/build/components/StatusIcons/AuthIcons/style.d.ts

@@ -126,7 +126,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
@@ -393,7 +393,7 @@ export declare const AuthCellContainer: import("@emotion/styled").StyledComponen
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts

@@ -124,7 +124,7 @@ export declare const BalanceCellContainer: import("@emotion/styled").StyledCompo
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts

@@ -124,7 +124,7 @@ export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
@@ -386,7 +386,7 @@ export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
@@ -649,7 +649,7 @@ export declare const GatewayIconWrapper: import("@emotion/styled").StyledCompone
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
@@ -911,7 +911,7 @@ export declare const GatewaysContainer: import("@emotion/styled").StyledComponen
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -1175,7 +1175,7 @@ export declare const UnCapturedBadge: import("@emotion/styled").StyledComponent<
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -1437,7 +1437,7 @@ export declare const UnCapturedContainer: import("@emotion/styled").StyledCompon
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -126,7 +126,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;