@tap-payments/os-micro-frontend-shared 0.0.183 → 0.0.184

package/build/components/Inputs/SearchInput/SearchInput.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { exclamationErrorIcon, searchIcon } from '../../../constants/index.js';
+import Input from '../../Inputs/Input';
+import { StyledErrorMessage, ErrorIcon } from './styles';
+export default function SearchInput(_a) {
+    var { showSearchIcon = true } = _a, props = __rest(_a, ["showSearchIcon"]);
+    return (_jsxs(Box, { children: [_jsx(Input, Object.assign({ InputProps: Object.assign({ endAdornment: !props.disabled && showSearchIcon && _jsx(Box, { component: "img", maxWidth: "16px", maxHeight: "16px", src: searchIcon, alt: "search" }), sx: Object.assign({}, (props.error && {
+                        border: '1px solid #FF000026',
+                        borderBottom: 'none',
+                        borderRadius: '4px 4px 0 0',
+                    })) }, props.InputProps), sx: Object.assign({}, (props.error && { border: '1px solid #FF000026', borderBottom: 'none', borderRadius: '4px 4px 0 0' })) }, props)), props.error && (_jsxs(StyledErrorMessage, { children: [_jsx(ErrorIcon, { src: exclamationErrorIcon }), _jsx(Typography, Object.assign({ color: "red", fontSize: "10px" }, { children: props.errorMessage }))] }))] }));
+}

package/build/components/Inputs/SearchInput/index.d.ts

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

package/build/components/Inputs/SearchInput/index.js

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

package/build/components/Inputs/SearchInput/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ErrorIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledErrorMessage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/components/Inputs/SearchInput/styles.js

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material';
+export const ErrorIcon = styled('img')(() => ({
+    width: '12px',
+    height: '12px',
+    marginRight: '4px',
+}));
+export const StyledErrorMessage = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    color: `${theme.palette.custom[500]}`,
+    fontSize: '10px',
+    padding: '8px 12px',
+    background: '#FF000026',
+    borderRadius: '0 0 4px 4px',
+    borderTop: 'none',
+    height: '32px',
+}));

package/build/components/Inputs/Select/Select.d.ts

@@ -0,0 +1,2 @@
+import type { InputProps } from './type';
+export default function Select(props: InputProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Inputs/Select/Select.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as MuiSelect, FormControl, InputLabel, MenuItem, Box } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+import { StyledErrorMessage } from '../Input/style';
+export default function Select(props) {
+    const { control } = useFormContext();
+    return (_jsx(Controller, { name: props.name, control: control, render: ({ field, fieldState: { error } }) => {
+            var _a;
+            return (_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    alignItems: 'stretch',
+                    height: '100%',
+                    flexDirection: 'column',
+                    flex: 1,
+                } }, { children: [_jsxs(FormControl, Object.assign({ variant: "filled", sx: {
+                            minWidth: 52,
+                            height: '40px !important',
+                            maxHeight: '40px !important',
+                            width: '100%',
+                            '& .MuiFormLabel-asterisk': {
+                                color: 'red',
+                            },
+                            '& .MuiFormLabel-root': {
+                                fontSize: '10px',
+                                fontStyle: 'normal',
+                                fontWeight: 500,
+                                lineHeight: '100%',
+                                transform: 'translate(8px, 15px) scale(1)',
+                            },
+                            '.MuiFormLabel-root.MuiFormLabel-filled': {
+                                transform: 'translate(8px, 8px) scale(0.75) ',
+                            },
+                            '.MuiFormLabel-root.Mui-focused': {
+                                transform: 'translate(8px, 8px) scale(0.75)',
+                                fontSize: '10px',
+                                fontStyle: 'normal',
+                                fontWeight: 500,
+                                lineHeight: '100%',
+                            },
+                        }, required: props.required }, { children: [_jsx(InputLabel, Object.assign({ id: "demo-simple-select-filled-label", sx: {
+                                    fontSize: '11px',
+                                    color: '#8D8D94 !important',
+                                } }, { children: props.label })), _jsx(MuiSelect, Object.assign({ inputProps: {
+                                    sx: {
+                                        backgroundColor: '#F9F9F9 !important',
+                                        borderRadius: '4px',
+                                        fontSize: '11px',
+                                    },
+                                } }, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', error: !!error, disableUnderline: true, required: true, labelId: "demo-simple-select-filled-label", id: "demo-simple-select-filled", sx: Object.assign({ width: '100%', height: '40px !important', maxHeight: '40px !important', borderRadius: '4px', overflow: 'hidden', '.MuiSelect-select': {
+                                        padding: '0px 8px !important',
+                                        height: '40px !important',
+                                        maxHeight: '40px !important',
+                                        display: 'flex',
+                                        alignItems: 'flex-end !important',
+                                    }, '.MuiSelect-filled': {
+                                        padding: '0px 8px !important',
+                                    } }, (error && {
+                                    border: '1px solid #FF3D00',
+                                })) }, { children: (props.options || []).map((option) => {
+                                    var _a, _b;
+                                    return (_jsx(MenuItem, Object.assign({ value: (_a = option.value) !== null && _a !== void 0 ? _a : '', sx: {
+                                            fontSize: '12px',
+                                        } }, { children: option.label }), (_b = option.value) !== null && _b !== void 0 ? _b : ''));
+                                }) }))] })), _jsx(StyledErrorMessage, { children: error === null || error === void 0 ? void 0 : error.message })] })));
+        } }));
+}

package/build/components/Inputs/Select/index.d.ts

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

package/build/components/Inputs/Select/index.js

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

package/build/components/Inputs/Select/style.d.ts

@@ -0,0 +1 @@
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<import("@mui/material").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/Inputs/Select/style.js

@@ -0,0 +1,23 @@
+import { Select, styled } from '@mui/material';
+export const StyledSelect = styled(Select)(({ theme }) => ({
+    fontSize: '11px',
+    lineHeight: '11px',
+    color: theme.palette.common.black,
+    borderRadius: '4px',
+    boxShadow: '0px 0px 6px 0px rgba(0, 0, 0, 0.11);',
+    height: '32px',
+    border: 'none',
+    outline: 'none',
+    width: '100%',
+    '&:focus': {
+        border: '1px solid #1F88D0',
+    },
+    '& .MuiOutlinedInput-root': {
+        '& fieldset': {
+            borderColor: 'rgba(0, 0, 0, 0.23)',
+        },
+        '&.Mui-focused fieldset': {
+            border: '2px solid red',
+        },
+    },
+}));

package/build/components/Inputs/Select/type.d.ts

@@ -0,0 +1,9 @@
+import { SelectProps as MuInputProps } from '@mui/material';
+export type InputProps = Partial<MuInputProps> & {
+    label?: string;
+    options: Array<{
+        value: string | number;
+        label: string | number;
+    }>;
+    name: string;
+};

package/build/components/Inputs/Select/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export { default as FileInput } from './FileInput';
+export { default as CountriesDropdown, InputNumberStyled, MobileWrapper } from './CountriesDropDown';
+export { default as SearchInput } from './SearchInput';
+export { default as Input } from './Input';
+export { default as Select } from './Select';

package/build/components/Inputs/index.js

@@ -0,0 +1,5 @@
+export { default as FileInput } from './FileInput';
+export { default as CountriesDropdown, InputNumberStyled, MobileWrapper } from './CountriesDropDown';
+export { default as SearchInput } from './SearchInput';
+export { default as Input } from './Input';
+export { default as Select } from './Select';

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,277 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Dialog } from '@mui/material';
+import JsonView from '@uiw/react-json-view';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Resizable } from 're-resizable';
+import Draggable from 'react-draggable';
+import { APP_WINDOW_Z_INDEX, codeIcon, collapseArrowsIcon, copyIcon, expandArrowsIcon, greenCheckIcon, idIcon } from '../../constants/index.js';
+import { useMouseState, useWindowDimensions } from '../../hooks/index.js';
+import { isSafariBrowser } from '../../utils/index.js';
+import AnimatedButton from './components/FooterButton';
+import JSONTitleBar from './components/JSONTitleBar';
+import { ButtonsWrapper, FooterWrapper, JSONContainer, JSONViewerWrapper, SectionWrapper, StyledCopyButton, StyledHeaderWrapper, StyledTitle, jsonTheme, requestJsonTheme, TITLE_BAR_HEIGHT, VIEWER_HEIGHT, FOOTER_HEIGHT, } from './style';
+import TableFooter from '../VirtualTable/components/TableFooter';
+const VIEWER_WIDTH = 400;
+const animationDuration = 0.5;
+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);
+    const [isResponseCollapsed, setIsResponseCollapsed] = useState(true);
+    const [isScrollingResponse, setIsScrollingResponse] = useState(false);
+    const [newDimensions, setNewDimensions] = useState({ width: 0, height: 0 });
+    const [isToolbarAnimationDisabled, setIsToolbarAnimationDisabled] = useState(true);
+    const [isRequestShown, setIsRequestShown] = useState(false);
+    const [isRequestCollapsed, setIsRequestCollapsed] = useState(true);
+    const [isScrollingRequest, setIsScrollingRequest] = useState(false);
+    const [viewerWidth, setViewerWidth] = useState(VIEWER_WIDTH);
+    const requestTimerRef = useRef();
+    const { onMouseEnter, onMouseLeave, isHovered } = useMouseState();
+    const { height, width } = useWindowDimensions();
+    const [position, setPosition] = useState({
+        x: width / 2 + VIEWER_WIDTH / 4 - index * 20,
+        y: height / 2 - VIEWER_HEIGHT / 2 + index * 30,
+    });
+    const resizableRef = useRef();
+    const objectPropertiesCount = useMemo(() => {
+        var _a;
+        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) => {
+        setTimeout(() => {
+            navigator.clipboard.writeText(text || '').then(() => { });
+        }, 10);
+    };
+    const requestObjectPropertiesCount = useMemo(() => {
+        var _a;
+        return (_a = Object.keys(requestJson)) === null || _a === void 0 ? void 0 : _a.length;
+    }, [requestJson]);
+    useEffect(() => {
+        if (requestTimerRef.current) {
+            clearTimeout(requestTimerRef.current);
+        }
+        if (!isRequestShown) {
+            requestTimerRef.current = setTimeout(() => {
+                setViewerWidth(currentRequestWidth);
+            }, animationDuration * 1000);
+            return;
+        }
+        setViewerWidth(currentRequestWidth);
+    }, [isRequestShown, currentRequestWidth]);
+    return (_jsx(Draggable, Object.assign({ disabled: isMaximized, handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', defaultPosition: {
+            x: width / 2 - VIEWER_WIDTH / 4,
+            y: height / 2 - VIEWER_HEIGHT / 2,
+        }, position: {
+            x: width - position.x,
+            y: position.y,
+        }, onStop: (_, data) => {
+            setPosition({
+                x: width - data.x,
+                y: data.y,
+            });
+        }, 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 + (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',
+                height: isSafari ? (newDimensions === null || newDimensions === void 0 ? void 0 : newDimensions.height) || VIEWER_HEIGHT : 'fit-content',
+            })), (isMaximized && {
+                transform: 'none !important',
+            })), PaperProps: {
+                style: Object.assign(Object.assign({ margin: 0, maxHeight: '100%', maxWidth: 'none', background: 'transparent', width: !isResized ? viewerWidth : 'fit-content', height: !isResized ? VIEWER_HEIGHT : 'fit-content' }, (isMaximized && {
+                    width: '100%',
+                    height: '100%',
+                })), { position: 'relative' }),
+            }, onClose: () => {
+                setIsMaximized(false);
+                setIsToolbarAnimationDisabled(true);
+                setTimeout(() => {
+                    setIsToolbarAnimationDisabled(false);
+                }, animationDuration * 1000);
+            }, open: true, hideBackdrop: true, fullScreen: isMaximized, "aria-labelledby": "draggable-dialog-title" }, { children: _jsx(Resizable, Object.assign({ enable: {
+                    left: false,
+                    right: true,
+                    bottomRight: true,
+                    bottom: true,
+                }, maxHeight: height - 40, maxWidth: width, minWidth: isMaximized ? '100vw' : viewerWidth, minHeight: isMaximized ? '100vh' : '300px', ref: (c) => {
+                    resizableRef.current = c;
+                }, onResizeStart: () => {
+                    setIsToolbarAnimationDisabled(true);
+                }, onResizeStop: () => {
+                    setIsToolbarAnimationDisabled(false);
+                }, onResize: (_, __, element) => {
+                    setIsResized(true);
+                    setNewDimensions({
+                        width: element.offsetWidth,
+                        height: element.offsetHeight,
+                    });
+                }, defaultSize: {
+                    width: viewerWidth,
+                    height: VIEWER_HEIGHT,
+                }, style: Object.assign(Object.assign({ background: 'transparent' }, (isMaximized && {
+                    height: '100% !important',
+                    width: '100% !important',
+                    flex: 1,
+                })), (isMaximized && {
+                    position: 'relative',
+                })) }, { children: _jsxs(JSONContainer, { children: [_jsx(motion.div, Object.assign({ style: Object.assign({}, (isMaximized && {
+                                height: TITLE_BAR_HEIGHT,
+                                position: 'fixed',
+                                zIndex: 1000,
+                            })), animate: Object.assign(Object.assign({ width: isRequestShown ? currentRequestWidth * 2 : currentRequestWidth }, (isMaximized && {
+                                width: '100vw',
+                            })), (!isMaximized && {
+                                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: () => onClose(), onMaximize: () => {
+                                    setIsMaximized((prev) => !prev);
+                                    setIsToolbarAnimationDisabled(true);
+                                    setTimeout(() => {
+                                        setIsToolbarAnimationDisabled(false);
+                                    }, animationDuration * 1000);
+                                }, isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "draggable-dialog-title", onRequestClick: () => {
+                                    var _a;
+                                    setIsRequestShown((prev) => !prev);
+                                    setIsToolbarAnimationDisabled(false);
+                                    if (!isRequestShown) {
+                                        (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({
+                                            width: VIEWER_WIDTH,
+                                            height: VIEWER_HEIGHT,
+                                        });
+                                    }
+                                }, isRequestExpanded: isRequestShown, showRequestIcon: Boolean(requestObjectPropertiesCount) }) })), _jsxs(Box, Object.assign({ sx: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                height: isMaximized
+                                    ? `calc(100vh - ${FOOTER_HEIGHT}px)`
+                                    : (Number((_d = (_c = resizableRef.current) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.height) || VIEWER_HEIGHT) - FOOTER_HEIGHT + 5,
+                                background: 'transparent',
+                                position: 'fixed',
+                                width: '100%',
+                            } }, { children: [_jsx(AnimatePresence, { children: isRequestShown && (_jsxs(motion.div, Object.assign({ initial: Object.assign({ left: isMaximized ? '50vw' : 0 }, (isMaximized && {
+                                            position: 'relative',
+                                            left: '-50vw',
+                                        })), animate: Object.assign(Object.assign({ left: isMaximized ? '50vw' : -currentRequestWidth }, (isMaximized && {
+                                            position: 'relative',
+                                            left: '0',
+                                        })), (!isRequestShown && {
+                                            left: 0,
+                                        })), exit: Object.assign({ left: isMaximized ? '50vw' : 0 }, (isMaximized && {
+                                            position: 'relative',
+                                            left: '0',
+                                        })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
+                                            duration: 0,
+                                        })), style: {
+                                            flex: 1,
+                                            backgroundColor: '#E7E7E7B2',
+                                            backdropFilter: 'blur(12px)',
+                                            height: isMaximized ? '100vh' : '100%',
+                                            overflowY: 'auto',
+                                            position: 'absolute',
+                                            width: isMaximized ? '100vw' : currentRequestWidth,
+                                            zIndex: 19,
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            borderBottomLeftRadius: '12px',
+                                        }, onScroll: () => {
+                                            setIsScrollingRequest(true);
+                                            setTimeout(() => {
+                                                setIsScrollingRequest(false);
+                                            }, 2000);
+                                        } }, { children: [_jsxs(SectionWrapper, Object.assign({ isMaximized: isMaximized, isScrollingRequest: isScrollingRequest, sx: {
+                                                    background: '#E7E7E7B2',
+                                                }, 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.stringify(json)).then(() => { });
+                                                                }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
+                                                                    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);
+                                                    }
+                                                }, enableClipboard: false }, { children: [_jsx(JsonView.CountInfo, { render: (_, { keyName }) => {
+                                                            if (!keyName) {
+                                                                return _jsx("span", {});
+                                                            }
+                                                        } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
+                                                            if (!keyName) {
+                                                                return _jsx("span", {});
+                                                            }
+                                                            return (_jsxs(StyledCopyButton, Object.assign({ style: style, onClick: (e) => {
+                                                                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                                                } }, { children: [_jsx(AnimatePresence, { children: copied && (_jsx(motion.img, { style: {
+                                                                                height: '14px',
+                                                                                width: '14px',
+                                                                            }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: greenCheckIcon, alt: "icon" }, "id-icon")) }), _jsx(AnimatePresence, { children: !copied && (_jsx(motion.img, { style: {
+                                                                                height: '14px',
+                                                                                width: '14px',
+                                                                            }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: copyIcon, alt: "icon" }, "id-icon")) })] })));
+                                                        } })] })), _jsx(AnimatePresence, { children: isRequestShown && (_jsx(FooterWrapper, Object.assign({ sx: {
+                                                        flex: 1,
+                                                        height: FOOTER_HEIGHT,
+                                                        left: 0,
+                                                    } }, { children: _jsx(TableFooter, { sx: {
+                                                            paddingLeft: '12px',
+                                                            borderBottomRightRadius: '0',
+                                                            background: '#f8f9fb',
+                                                            flex: 1,
+                                                        }, totalCount: requestObjectPropertiesCount }) }))) })] }))) }), _jsxs(JSONViewerWrapper, Object.assign({ isMaximized: isMaximized, isRequestShown: isRequestShown, style: {
+                                        left: 0,
+                                        maxHeight: '100vw',
+                                    }, initial: Object.assign({}, (isMaximized && {
+                                        width: '100vw',
+                                        left: 0,
+                                    })), animate: Object.assign({}, (isMaximized && {
+                                        position: 'absolute',
+                                        left: isRequestShown ? '50vw' : '0',
+                                    })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
+                                        duration: 0,
+                                    })), onScroll: () => {
+                                        setIsScrollingResponse(true);
+                                        setTimeout(() => {
+                                            setIsScrollingResponse(false);
+                                        }, 2000);
+                                    } }, { 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.stringify(json, null, 2)).then(() => { });
+                                                            }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
+                                                                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);
+                                                }
+                                            } }, { children: [_jsx(JsonView.CountInfo, { render: (_, { keyName }) => {
+                                                        if (!keyName) {
+                                                            return _jsx("span", {});
+                                                        }
+                                                    } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
+                                                        if (!keyName) {
+                                                            return _jsx("span", {});
+                                                        }
+                                                        return (_jsxs(StyledCopyButton, Object.assign({ style: style, onClick: (e) => {
+                                                                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                                            } }, { children: [_jsx(AnimatePresence, { children: copied && (_jsx(motion.img, { style: {
+                                                                            height: '14px',
+                                                                            width: '14px',
+                                                                        }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: greenCheckIcon, alt: "icon" }, "id-icon")) }), _jsx(AnimatePresence, { children: !copied && (_jsx(motion.img, { style: {
+                                                                            height: '14px',
+                                                                            width: '14px',
+                                                                        }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: copyIcon, alt: "icon" }, "id-icon")) })] })));
+                                                    } })] })), _jsx(FooterWrapper, Object.assign({ sx: {
+                                                flex: 1,
+                                                height: FOOTER_HEIGHT,
+                                            } }, { children: _jsx(TableFooter, { sx: {
+                                                    borderBottomLeftRadius: isRequestShown ? 0 : '12px',
+                                                    background: '#f8f9fb',
+                                                    flex: 1,
+                                                }, totalCount: objectPropertiesCount }) }))] }))] }))] }) })) })) })));
+}

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/FooterButton/FooterButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AnimatedButtonProps } from '../../type';
+declare function FooterButton({ onClick, icon, label, disableAnimation, ...props }: AnimatedButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FooterButton>;
+export default _default;

package/build/components/JSONViewer/components/FooterButton/FooterButton.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { memo } from 'react';
+import Box from '@mui/material/Box';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import { greenCheckIcon } from '../../../../constants/index.js';
+import { StyledAnimatedButton } from '../../style';
+function FooterButton(_a) {
+    var { onClick, icon, label, disableAnimation } = _a, props = __rest(_a, ["onClick", "icon", "label", "disableAnimation"]);
+    const [isClicked, setIsClicked] = React.useState(false);
+    const { t } = useTranslation();
+    const handleClick = (e) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (disableAnimation)
+            return;
+        setIsClicked(true);
+        setTimeout(() => {
+            setIsClicked(false);
+        }, 2000);
+    };
+    return (_jsxs(StyledAnimatedButton, Object.assign({}, props, { onClick: handleClick }, { children: [_jsxs(Box, Object.assign({ sx: {
+                    width: '16px',
+                    display: 'flex',
+                    overflow: 'hidden',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } }, { children: [_jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: isClicked && (_jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: 0.4 } }, exit: { opacity: 0, transition: { duration: 0.1 } }, transition: { duration: 0.4 }, src: greenCheckIcon, alt: "icon" }, "id-icon")) })), _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: !isClicked && (_jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: 0.4 } }, exit: { opacity: 0, transition: { duration: 0.1 } }, transition: { duration: 0.4 }, src: icon, alt: "icon" }, "id-icon")) }))] })), label && (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isClicked && (_jsx(motion.span, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: 'absolute' }, transition: {
+                                duration: 0.4,
+                            } }, { children: t('copied') }))) }), _jsx(AnimatePresence, { children: !isClicked && (_jsx(motion.span, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: 'absolute', width: '53px' }, transition: {
+                                duration: 0.4,
+                            } }, { children: label }))) })] }))] })));
+}
+export default memo(FooterButton);

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

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

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { JSONTitleBarProps } from './type';
+declare function JSONTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded, showRequestIcon, isHovered, }: JSONTitleBarProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof JSONTitleBar>;
+export default _default;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+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, }) {
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
+}
+export default memo(JSONTitleBar);

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

@@ -0,0 +1,3 @@
+import JSONTitleBar from './JSONTitleBar';
+export * from './type';
+export default JSONTitleBar;

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

@@ -0,0 +1,3 @@
+import JSONTitleBar from './JSONTitleBar';
+export * from './type';
+export default JSONTitleBar;

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

@@ -0,0 +1,14 @@
+import { SyntheticEvent } from 'react';
+export interface JSONTitleBarProps {
+    title: string;
+    onClose?: (e: SyntheticEvent) => void;
+    onMaximize?: (e: SyntheticEvent) => void;
+    maximized?: boolean;
+    id?: string;
+    onRequestClick?: (e: SyntheticEvent) => void;
+    isRequestExpanded?: boolean;
+    onMouseHover: (e: SyntheticEvent) => void;
+    onMouseLeave: (e: SyntheticEvent) => void;
+    showRequestIcon?: boolean;
+    isHovered?: boolean;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as FooterButton } from './FooterButton';
+export { default as JSONTitleBar, type JSONTitleBarProps } from './JSONTitleBar';

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

@@ -0,0 +1,2 @@
+export { default as FooterButton } from './FooterButton';
+export { default as JSONTitleBar } from './JSONTitleBar';