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

package/build/components/AppServices/ServiceItem.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DropdownMenu, Icon } from '../index.js';
+import { isInsightService } from '../../utils/index.js';
+import { homeIcon, newWindowIcon } from '../../constants/index.js';
+import { ServiceItemStyled } from './style';
+function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const isHomeService = isInsightService(code);
+    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: appInfo.serviceCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    navigateToMenuItem(code);
+                }, title: isHomeService ? undefined : name, onContextMenu: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleClose();
+                    setAnchorEl(event.currentTarget);
+                } }, { children: isHomeService ? _jsx(Icon, { src: homeIcon }) : name })), _jsx(DropdownMenu, { open: open, anchorEl: anchorEl, onClose: handleClose, menuItems: [
+                    {
+                        label: t('openNewWindow'),
+                        name: 'new',
+                        icon: _jsx("img", { src: newWindowIcon, alt: "new-window-icon" }),
+                        onClick: (e) => {
+                            e.stopPropagation();
+                            onClickServiceItem === null || onClickServiceItem === void 0 ? void 0 : onClickServiceItem(code);
+                            handleClose();
+                            if (onDropdownClick)
+                                onDropdownClick();
+                        },
+                    },
+                ] })] }));
+}
+export default memo(ServiceItem);

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

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

package/build/components/AppServices/index.js

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    maximized?: boolean | undefined;
+}, {}, {}>;
+export declare const ServiceItemStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    title?: string | undefined;
+    isDropdown: boolean;
+}, {}, {}>;

package/build/components/AppServices/style.js

@@ -0,0 +1,33 @@
+import Box from '@mui/material/Box';
+import Text from '../Text';
+import { styled } from '@mui/material/styles';
+import { getBrowserName } from '../../utils/index.js';
+export const Wrapper = styled(Box, { shouldForwardProp: (props) => props !== 'maximized' })(({ theme, maximized }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    overflow: 'hidden',
+    height: maximized ? '4.75rem' : '4.1875rem',
+    paddingBottom: maximized ? '0rem' : '1.2rem',
+    paddingInline: theme.spacing(4),
+    paddingTop: maximized ? '1.35rem' : theme.spacing(0.5),
+}));
+const browserName = getBrowserName();
+export const ServiceItemStyled = styled(Text, {
+    shouldForwardProp: (props) => props !== 'title' && props !== 'isDropdown',
+})(({ title, isDropdown, theme }) => ({
+    position: 'relative',
+    fontWeight: theme.typography.fontWeightMedium,
+    padding: theme.spacing(1),
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    lineHeight: '15px',
+    borderRadius: theme.shape.borderRadius,
+    transition: theme.transitions.create(['backgroundColor', 'boxShadow'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.complex,
+    }),
+    whiteSpace: 'nowrap',
+    textTransform: 'capitalize',
+    '&:hover, &.active': Object.assign(Object.assign({}, (!isDropdown && { backgroundColor: theme.palette.common.white, boxShadow: theme.shadows[2] })), { cursor: 'pointer', position: 'relative', color: 'transparent', '&:after': Object.assign(Object.assign({}, (title && { content: `"${title}"` })), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, overflow: 'hidden', position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, display: 'flex', alignItems: 'center', justifyContent: isDropdown ? 'flex-start' : 'center', letterSpacing: browserName === 'safari' ? '-1px' : '', padding: 8, borderRadius: theme.shape.borderRadius }) }),
+}));

package/build/components/AppWindowWrapper/AppWindow/AppWindow.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WindowProps } from './type';
+declare function Window({ children, titleBar, titleBarText, mainAppOrder, mainAppIsMinimized, showSectionsButton }: WindowProps): import("react").ReactPortal;
+declare const _default: import("react").MemoExoticComponent<typeof Window>;
+export default _default;

package/build/components/AppWindowWrapper/AppWindow/AppWindow.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useContext, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Dialog } from '@mui/material';
+import Box from '@mui/material/Box';
+import { Resizable } from 're-resizable';
+import Draggable from 'react-draggable';
+import { AppWindowContext } from '../context';
+import { isSafariBrowser } from '../../../utils/index.js';
+import { animationDuration } from './constant';
+import AccountHeader from '../headers/AccountHeader';
+function Window({ children, titleBar, titleBarText, mainAppOrder, mainAppIsMinimized, showSectionsButton = true }) {
+    const windowNodeRef = useRef(null);
+    const { dimensions, position, resizableRef, isMaximized, isOpen, onClose, viewerDefaultWidth, viewerDefaultHeight, windowZIndex, setPosition, setNewDimensions, isToolbarAnimationDisabled, fullWindowWidth, fullWindowHeight, setIsMaximized, setIsResized, isResized, setIsToolbarAnimationDisabled, setIsSidebarExpanded, isSidebarExpanded, } = useContext(AppWindowContext);
+    const isSafari = isSafariBrowser();
+    const currentWindowWidth = dimensions.width || viewerDefaultWidth;
+    return createPortal(_jsx(Draggable, Object.assign({ nodeRef: windowNodeRef, disabled: isMaximized, handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', defaultClassName: "draggable-lead-dialog", defaultPosition: {
+            x: fullWindowWidth / 2 - currentWindowWidth / 2,
+            y: fullWindowHeight / 2 - viewerDefaultHeight / 2,
+        }, position: {
+            x: fullWindowWidth - position.x,
+            y: position.y,
+        }, onStop: (_, pos) => {
+            setPosition({
+                x: fullWindowWidth - pos.x,
+                y: pos.y,
+            });
+        }, bounds: {
+            top: 10,
+        } }, { children: _jsx(Dialog, Object.assign({ ref: windowNodeRef, sx: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: 'transparent', zIndex: Number(mainAppOrder || 0) + windowZIndex }, (mainAppIsMinimized && {
+                display: 'none',
+            })), { transform: 'translate(180px, 14px)' }), (!isMaximized && {
+                width: isSafari ? currentWindowWidth : 'fit-content',
+                height: isSafari ? viewerDefaultHeight : 'fit-content',
+            })), (isMaximized && {
+                transform: 'none !important',
+            })), { boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.15)' }), PaperProps: {
+                style: Object.assign(Object.assign({ margin: 0, maxHeight: '100%', maxWidth: 'none', background: 'transparent', width: !isResized ? currentWindowWidth : 'fit-content', height: !isResized ? '100%' : 'fit-content' }, (isMaximized && {
+                    width: '100%',
+                    height: '100%',
+                })), { position: 'relative' }),
+            }, onClose: () => {
+                setIsMaximized(false);
+                setIsToolbarAnimationDisabled(true);
+                setTimeout(() => {
+                    setIsToolbarAnimationDisabled(false);
+                }, animationDuration * 1000);
+            }, open: isOpen, hideBackdrop: true, fullScreen: isMaximized, "aria-labelledby": "draggable-dialog-title", disablePortal: true }, { children: _jsx(Resizable, Object.assign({ "data-testid": "Resizable", enable: {
+                    left: true,
+                    right: true,
+                    bottomRight: true,
+                    bottom: true,
+                    top: true,
+                }, size: {
+                    width: dimensions.width,
+                    height: dimensions.height,
+                }, maxHeight: fullWindowHeight - 40, maxWidth: fullWindowWidth, minWidth: isMaximized ? '100vw' : viewerDefaultWidth, minHeight: isMaximized ? '100vh' : viewerDefaultHeight, ref: (c) => {
+                    resizableRef.current = c;
+                }, onResizeStart: () => {
+                    setIsToolbarAnimationDisabled(true);
+                }, onResizeStop: () => {
+                    setIsToolbarAnimationDisabled(false);
+                }, onResize: (_, __, element) => {
+                    setIsResized(true);
+                    setNewDimensions({
+                        width: element.offsetWidth,
+                        height: element.offsetHeight,
+                    });
+                }, defaultSize: {
+                    width: currentWindowWidth,
+                    height: viewerDefaultHeight,
+                }, style: Object.assign(Object.assign({ background: 'transparent', height: dimensions.height, overflow: 'hidden' }, (isMaximized && {
+                    height: '100% !important',
+                    width: '100% !important',
+                    flex: 1,
+                })), (isMaximized && {
+                    position: 'relative',
+                })) }, { children: _jsxs(Box, Object.assign({ sx: {
+                        height: '100%',
+                    }, "data-testid": "AppWindow" }, { children: [titleBar !== null && titleBar !== void 0 ? titleBar : (_jsx(AccountHeader, { setIsToolbarAnimationDisabled: setIsToolbarAnimationDisabled, onClose: onClose, setIsMaximized: setIsMaximized, isToolbarAnimationDisabled: isToolbarAnimationDisabled, setIsSidebarExpanded: setIsSidebarExpanded, isSidebarExpanded: isSidebarExpanded, title: titleBarText, isMaximized: isMaximized, showSectionsButton: showSectionsButton })), children] })) })) })) })), document.body);
+}
+export default memo(Window);

package/build/components/AppWindowWrapper/AppWindow/constant.d.ts

@@ -0,0 +1,6 @@
+export declare const animationDuration = 0.5;
+export declare const LEFT_SIDEBAR = 183;
+export declare const RIGHT_SIDEBAR = 287;
+export declare const VIEWER_WIDTH = 840;
+export declare const VIEWER_HEIGHT = 545;
+export declare const FOOTER_HEIGHT = 35;

package/build/components/AppWindowWrapper/AppWindow/constant.js

@@ -0,0 +1,6 @@
+export const animationDuration = 0.5;
+export const LEFT_SIDEBAR = 183;
+export const RIGHT_SIDEBAR = 287;
+export const VIEWER_WIDTH = 840;
+export const VIEWER_HEIGHT = 545;
+export const FOOTER_HEIGHT = 35;

package/build/components/AppWindowWrapper/AppWindow/index.d.ts

@@ -0,0 +1,5 @@
+import AppWindow from './AppWindow';
+export type { WindowProps } from './type';
+export { FOOTER_HEIGHT, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration } from './constant';
+export * from './style';
+export default AppWindow;

package/build/components/AppWindowWrapper/AppWindow/index.js

@@ -0,0 +1,4 @@
+import AppWindow from './AppWindow';
+export { FOOTER_HEIGHT, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration } from './constant';
+export * from './style';
+export default AppWindow;

package/build/components/AppWindowWrapper/AppWindow/style.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const StyledMenuLink: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isActive?: boolean | undefined;
+}, {}, {}>;
+export declare const StyledSubmitButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SubmitButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledFooter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledHideButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/AppWindowWrapper/AppWindow/style.js

@@ -0,0 +1,77 @@
+import { Box, Button, alpha, styled } from '@mui/material';
+import { FOOTER_HEIGHT } from './constant';
+export const StyledMenuLink = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => ({
+    background: isActive ? 'linear-gradient(270deg, #147DC5 0.67%, #3DA6E1 98.91%)' : 'transparent',
+    borderRadius: '4px',
+    padding: '4px 8px',
+    color: isActive ? theme.palette.common.white : theme.palette.text.primary,
+    fontSize: '11px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: '4px',
+    cursor: 'pointer',
+}));
+export const StyledSubmitButton = styled(Button)(({ theme, disabled }) => ({
+    background: disabled ? alpha(theme.palette.info.dark, 0.4) : theme.palette.info.dark,
+    color: theme.palette.common.white,
+    padding: '0px 8px',
+    fontSize: '9px',
+    fontWeight: 600,
+    height: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '4px',
+    textTransform: 'none',
+    '&:hover': {
+        background: theme.palette.info.dark,
+        opacity: 0.8,
+    },
+    '&.Mui-disabled': {
+        color: theme.palette.common.white,
+    },
+}));
+export const SubmitButtonWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: '8px',
+    backgroundColor: theme.palette.background.paper,
+    padding: '6px',
+    transform: 'translateY(calc(-50% - 6px))',
+    boxShadow: '0px 4px 40px 0px rgba(0, 0, 0, 0.19)',
+    borderRadius: '4px',
+    height: '36px',
+    transition: theme.transitions.create(['width'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.complex,
+    }),
+}));
+export const StyledFooter = styled(Box)(() => ({
+    position: 'fixed',
+    height: FOOTER_HEIGHT,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: '6px 16px',
+    zIndex: 1,
+    backgroundColor: `#eaeaea`,
+    backdropFilter: 'blur(12px)',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    borderBottomLeftRadius: '12px',
+    borderBottomRightRadius: '12px',
+}));
+export const StyledHideButton = styled(Button)(() => ({
+    padding: '4px 8px',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: '4px',
+    color: 'rgba(32, 35, 43, 0.80)',
+    fontWeight: 600,
+    fontSize: '9px',
+    textTransform: 'none',
+}));

package/build/components/AppWindowWrapper/AppWindow/type.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface WindowProps {
+    children: React.ReactNode;
+    titleBar?: React.ReactNode;
+    titleBarText?: string;
+    mainAppIsMinimized?: boolean;
+    mainAppOrder?: number;
+    showSectionsButton?: boolean;
+}

package/build/components/AppWindowWrapper/AppWindow/type.js

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

package/build/components/AppWindowWrapper/AppWindowWrapper.d.ts

@@ -0,0 +1,3 @@
+import { AppWindowProps } from './type';
+declare function AppWindow({ children, windowProps, ...props }: AppWindowProps): import("react/jsx-runtime").JSX.Element | null;
+export default AppWindow;

package/build/components/AppWindowWrapper/AppWindowWrapper.js

@@ -0,0 +1,22 @@
+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 } from "react/jsx-runtime";
+import { AppWindowContextProvider } from './context';
+import Window from './AppWindow';
+function AppWindow(_a) {
+    var { children, windowProps } = _a, props = __rest(_a, ["children", "windowProps"]);
+    if (!props.isOpen) {
+        return null;
+    }
+    return (_jsx(AppWindowContextProvider, Object.assign({}, props, { children: _jsx(Window, Object.assign({}, windowProps, { children: children })) })));
+}
+export default AppWindow;

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

@@ -0,0 +1,2 @@
+import { AppWindowProviderProps } from './type';
+export declare function AppWindowContextProvider({ children, isOpen, onClose, defaultWindowHeight, defaultWindowWidth }: AppWindowProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { useWindowDimensions } from '../../../hooks/index.js';
+import { AppWindowContext } from './context';
+const DEFAULT_VIEWER_WIDTH = 555;
+const DEFAULT_VIEWER_HEIGHT = 545;
+export function AppWindowContextProvider({ children, isOpen, onClose, defaultWindowHeight, defaultWindowWidth }) {
+    const { height, width } = useWindowDimensions();
+    const viewerDefaultWidth = defaultWindowWidth || DEFAULT_VIEWER_WIDTH;
+    const viewerDefaultHeight = defaultWindowHeight || DEFAULT_VIEWER_HEIGHT;
+    const [position, setPosition] = useState({
+        x: width / 2 + viewerDefaultWidth / 2,
+        y: height / 2 - viewerDefaultHeight / 2,
+    });
+    const [isMaximized, setIsMaximized] = useState(false);
+    const [isResized, setIsResized] = useState(false);
+    const [isToolbarAnimationDisabled, setIsToolbarAnimationDisabled] = useState(false);
+    const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+    const resizableRef = useRef();
+    const [dimensions, setNewDimensions] = useState({ width: 0, height: 0 });
+    const updateRefSize = ({ width: windowWidth, height: windowHeight }) => {
+        var _a;
+        (_a = resizableRef === null || resizableRef === void 0 ? void 0 : resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({ width: windowWidth, height: windowHeight });
+    };
+    const contextValue = useMemo(() => ({
+        position,
+        setPosition,
+        resizableRef,
+        windowZIndex: 1,
+        isOpen,
+        setIsMaximized,
+        setIsSidebarExpanded,
+        setIsToolbarAnimationDisabled,
+        setIsResized,
+        isMaximized,
+        isToolbarAnimationDisabled,
+        isSidebarExpanded,
+        isResized,
+        dimensions,
+        setNewDimensions,
+        viewerDefaultWidth,
+        viewerDefaultHeight,
+        onClose,
+        fullWindowWidth: width,
+        fullWindowHeight: height,
+        updateRefSize,
+    }), [
+        position,
+        setPosition,
+        resizableRef,
+        isOpen,
+        setIsMaximized,
+        setIsSidebarExpanded,
+        setIsToolbarAnimationDisabled,
+        setIsResized,
+        isMaximized,
+        isToolbarAnimationDisabled,
+        isSidebarExpanded,
+        isResized,
+        dimensions,
+        setNewDimensions,
+        width,
+        height,
+        viewerDefaultWidth,
+        viewerDefaultHeight,
+        updateRefSize,
+        onClose,
+    ]);
+    return _jsx(AppWindowContext.Provider, Object.assign({ value: contextValue }, { children: children }));
+}

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

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

package/build/components/AppWindowWrapper/context/context.js

@@ -0,0 +1,30 @@
+import { createContext } from 'react';
+export const AppWindowContext = createContext({
+    viewerDefaultWidth: 555,
+    viewerDefaultHeight: 545,
+    position: {
+        x: 0,
+        y: 0,
+    },
+    setPosition: () => { },
+    dimensions: {
+        width: 0,
+        height: 0,
+    },
+    windowZIndex: 10000,
+    isOpen: true,
+    setIsMaximized: () => { },
+    setIsSidebarExpanded: () => { },
+    setIsToolbarAnimationDisabled: () => { },
+    setIsResized: () => { },
+    setNewDimensions: () => { },
+    isMaximized: false,
+    isToolbarAnimationDisabled: true,
+    isSidebarExpanded: false,
+    isResized: false,
+    onClose: () => { },
+    fullWindowWidth: 0,
+    fullWindowHeight: 0,
+    resizableRef: { current: null },
+    updateRefSize: () => { },
+});

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

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

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

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

package/build/components/AppWindowWrapper/context/type.d.ts

@@ -0,0 +1,47 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Resizable } from 're-resizable';
+export interface AppWindowProviderProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+    defaultWindowWidth?: number;
+    defaultWindowHeight?: number;
+}
+export interface AppWindowContextProps {
+    position: {
+        x: number;
+        y: number;
+    };
+    setPosition: Dispatch<SetStateAction<{
+        x: number;
+        y: number;
+    }>>;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    viewerDefaultWidth: number;
+    viewerDefaultHeight: number;
+    windowZIndex: number;
+    isOpen: boolean;
+    setIsMaximized: Dispatch<SetStateAction<boolean>>;
+    setIsSidebarExpanded: Dispatch<SetStateAction<boolean>>;
+    setIsToolbarAnimationDisabled: Dispatch<SetStateAction<boolean>>;
+    setIsResized: Dispatch<SetStateAction<boolean>>;
+    setNewDimensions: Dispatch<SetStateAction<{
+        width: number;
+        height: number;
+    }>>;
+    isMaximized: boolean;
+    isToolbarAnimationDisabled: boolean;
+    isSidebarExpanded: boolean;
+    isResized: boolean;
+    onClose: () => void;
+    resizableRef: React.MutableRefObject<Resizable | null | undefined>;
+    fullWindowWidth: number;
+    fullWindowHeight: number;
+    updateRefSize: (size: {
+        width: number;
+        height: number;
+    }) => void;
+}

package/build/components/AppWindowWrapper/context/type.js

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

package/build/components/AppWindowWrapper/headers/AccountHeader/AccountHeader.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AccountHeaderProps } from './type';
+declare function AccountHeader({ isMaximized, setIsToolbarAnimationDisabled, setIsMaximized, onClose, isSidebarExpanded, setIsSidebarExpanded, isToolbarAnimationDisabled, title, showSectionsButton, }: AccountHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AccountHeader>;
+export default _default;

package/build/components/AppWindowWrapper/headers/AccountHeader/AccountHeader.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { useMouseState } from '../../../../hooks/index.js';
+import AccountHeaderTitle from './components/AccountHeaderTitle';
+import { animationDuration } from '../../AppWindow/constant';
+function AccountHeader({ isMaximized, setIsToolbarAnimationDisabled, setIsMaximized, onClose, isSidebarExpanded, setIsSidebarExpanded, isToolbarAnimationDisabled, title, showSectionsButton, }) {
+    const { isHovered, onMouseEnter, onMouseLeave } = useMouseState();
+    return (_jsx(motion.div, Object.assign({ style: Object.assign({}, (isMaximized && {
+            height: 0,
+            zIndex: 1000,
+            position: 'relative',
+        })), animate: Object.assign(Object.assign({}, (isMaximized && {
+            width: '100vw',
+        })), (!isMaximized && {
+            transform: `translateX(${0}px)`,
+            width: '100%',
+        })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
+            duration: 0,
+        })) }, { children: _jsx(AccountHeaderTitle, { title: title || 'Users', showSectionsButton: showSectionsButton, onClose: onClose, onMaximize: () => {
+                setIsMaximized === null || setIsMaximized === void 0 ? void 0 : setIsMaximized((prev) => !prev);
+                setIsToolbarAnimationDisabled === null || setIsToolbarAnimationDisabled === void 0 ? void 0 : setIsToolbarAnimationDisabled(true);
+                setTimeout(() => {
+                    setIsToolbarAnimationDisabled === null || setIsToolbarAnimationDisabled === void 0 ? void 0 : setIsToolbarAnimationDisabled(false);
+                }, animationDuration * 1000);
+            }, maximized: isMaximized, id: "draggable-dialog-title", onRequestClick: () => {
+                setIsToolbarAnimationDisabled === null || setIsToolbarAnimationDisabled === void 0 ? void 0 : setIsToolbarAnimationDisabled(false);
+                setIsSidebarExpanded(!isSidebarExpanded);
+            }, isSidebarExpanded: isSidebarExpanded, isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave }) })));
+}
+export default memo(AccountHeader);

package/build/components/AppWindowWrapper/headers/AccountHeader/components/AccountHeaderTitle/AccountHeaderTitle.d.ts

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

package/build/components/AppWindowWrapper/headers/AccountHeader/components/AccountHeaderTitle/AccountHeaderTitle.js

@@ -0,0 +1,10 @@
+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 { CloseIcon, ExpandButton, MaximizeIcon } from '../../../../../ToolbarIcon';
+import { teamWindowIcon } from '../../../../../../constants/index.js';
+function AccountHeaderTitle({ title, onClose, onMaximize, maximized = false, id, onRequestClick, isSidebarExpanded = false, isHovered = false, onMouseHover, onMouseLeave, showSectionsButton, }) {
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, "data-testid": "UserTitleBar", maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, isHovered: isHovered, title: title, icon: teamWindowIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showSectionsButton && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isSidebarExpanded, isHovered: isHovered }, { children: "Sections" })))] }) }) })));
+}
+export default memo(AccountHeaderTitle);

package/build/components/AppWindowWrapper/headers/AccountHeader/components/AccountHeaderTitle/index.d.ts

@@ -0,0 +1,3 @@
+import AccountHeaderTitle from './AccountHeaderTitle';
+export type { AccountHeaderTitleProps } from './type';
+export default AccountHeaderTitle;

package/build/components/AppWindowWrapper/headers/AccountHeader/components/AccountHeaderTitle/index.js

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

package/build/components/AppWindowWrapper/headers/AccountHeader/components/AccountHeaderTitle/type.d.ts

@@ -0,0 +1,14 @@
+import { SyntheticEvent } from 'react';
+import { BoxProps } from '@mui/material/Box';
+export interface AccountHeaderTitleProps extends BoxProps {
+    title: string;
+    onClose?: (e: SyntheticEvent) => void;
+    onMaximize?: (e: SyntheticEvent) => void;
+    maximized?: boolean;
+    id?: string;
+    onRequestClick?: (e: SyntheticEvent) => void;
+    isSidebarExpanded?: boolean;
+    isHovered?: boolean;
+    onMouseHover?: (e: SyntheticEvent) => void;
+    showSectionsButton?: boolean;
+}

package/build/components/AppWindowWrapper/headers/AccountHeader/components/AccountHeaderTitle/type.js

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

package/build/components/AppWindowWrapper/headers/AccountHeader/index.d.ts

@@ -0,0 +1,4 @@
+import AccountHeader from './AccountHeader';
+export { default as AccountHeaderTitle, type AccountHeaderTitleProps } from './components/AccountHeaderTitle';
+export type { AccountHeaderProps } from './type';
+export default AccountHeader;