@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/components/AppServicesActionMenu/AppServicesActionMenu.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import Box from '@mui/material/Box';
+import Popper from '@mui/material/Popper';
+import { ClickAwayListener } from '@mui/material';
+import { rightArrow, jsonBlackIcon } from '../../constants/index.js';
+import CustomBackdrop from '../CustomBackdrop';
+import { App, AppDetails, AppName, AppList, AppIcon } from './style';
+import ServicesSubmenu from './ServicesSubmenu';
+export function AppServicesActionMenu({ anchorEl, open, onClose, items, onSelectService, showViewApi = false, onViewApiClick, }) {
+    const [childAnchorEl, setChildAnchorEl] = useState(null);
+    const [hoveredItem, setHoveredItem] = useState(null);
+    const [hoveredViewApi, setHoveredViewApi] = useState(false);
+    const onChildMouseOver = useCallback((event, item) => {
+        setChildAnchorEl(event.currentTarget);
+        setHoveredItem(item);
+        setHoveredViewApi(false);
+    }, []);
+    const onChildLeave = useCallback(() => {
+        setChildAnchorEl(null);
+        setHoveredItem(null);
+        setHoveredViewApi(false);
+    }, []);
+    const handleClose = useCallback(() => {
+        onClose();
+        onChildLeave();
+    }, [onClose, onChildLeave]);
+    const handleSelectService = useCallback((appCode, serviceCode) => {
+        onSelectService(appCode, serviceCode);
+        handleClose();
+    }, [onSelectService, handleClose]);
+    const handleViewApiClick = useCallback((e) => {
+        e.stopPropagation();
+        onViewApiClick === null || onViewApiClick === void 0 ? void 0 : onViewApiClick();
+        handleClose();
+    }, [onViewApiClick, handleClose]);
+    if (!open)
+        return null;
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(Box, { children: [_jsx(CustomBackdrop, { onClick: handleClose }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: { zIndex: 2000 } }, { children: _jsx(AppList, { children: items.length === 0 && !showViewApi ? (_jsx(App, Object.assign({ sx: { cursor: 'default', '&:hover': { boxShadow: 'none' } } }, { children: _jsx(AppDetails, { children: _jsx(AppName, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "No actions available" })) }) }))) : (_jsxs(_Fragment, { children: [items.map((item) => (_jsxs(App, Object.assign({ onMouseOver: (e) => onChildMouseOver(e, item), open: (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.appCode) === item.appCode }, { children: [_jsxs(AppDetails, { children: [_jsx(AppIcon, { children: _jsx("img", { src: item.appIconUrl, alt: "app", width: 16, height: 16 }) }), _jsx(AppName, { children: item.appName })] }), _jsx(AppDetails, { children: _jsx("img", { src: rightArrow, alt: "icon", className: "arrow-icon" }) })] }), item.appCode))), showViewApi && onViewApiClick && (_jsx(App, Object.assign({ onClick: handleViewApiClick, open: hoveredViewApi, onMouseOver: () => {
+                                        setHoveredItem(null);
+                                        setHoveredViewApi(true);
+                                    }, onMouseLeave: () => setHoveredViewApi(false) }, { children: _jsxs(AppDetails, { children: [_jsx(AppIcon, { children: _jsx("img", { src: jsonBlackIcon, alt: "app", width: 16, height: 16 }) }), _jsx(AppName, { children: "View API" })] }) })))] })) }) })), items.length > 0 && (_jsx(ServicesSubmenu, { item: hoveredItem, anchorEl: childAnchorEl, onMouseLeave: onChildLeave, onSelectService: handleSelectService }))] }) })));
+}
+export default AppServicesActionMenu;

package/build/components/AppServicesActionMenu/ServicesSubmenu.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Popper from '@mui/material/Popper';
+import { Box } from '@mui/material';
+import { Service, ServicesList } from './style';
+export default function ServicesSubmenu({ item, anchorEl, onMouseLeave, onSelectService }) {
+    if (!item)
+        return null;
+    return (_jsx(Popper, Object.assign({ open: true, anchorEl: anchorEl, placement: "left-start", onMouseLeave: onMouseLeave, sx: { zIndex: 2000 } }, { children: _jsx(ServicesList, { children: item.services.map((service) => (_jsx(Service, Object.assign({ onClick: (e) => {
+                    e.stopPropagation();
+                    onSelectService(item.appCode, service.serviceCode);
+                } }, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [service.iconUrl && _jsx("img", { src: service.iconUrl, alt: "service", width: 16, height: 16 }), _jsxs("span", { children: ["View ", service.label] })] })) }), service.serviceCode))) }) })));
+}

package/build/components/AppServicesActionMenu/index.js

@@ -1 +1,3 @@
-export{b as AppServicesActionMenu,a as ServicesSubmenu}from'../../chunk-NLPYBEGY.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+export { default as AppServicesActionMenu } from './AppServicesActionMenu';
+export { default as ServicesSubmenu } from './ServicesSubmenu';
+export * from './types';

package/build/components/AppServicesActionMenu/style.js

@@ -0,0 +1,45 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const AppDetails = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+}));
+export const AppName = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+}));
+export const AppIcon = styled(Box)(() => ({
+    width: 16,
+    height: 16,
+}));
+export const ServicesList = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: '4px',
+    borderTopRightRadius: 0,
+    filter: 'drop-shadow(0px 8px 30px rgba(0, 0, 0, 0.16))',
+    width: 'max-content',
+    minWidth: 150,
+}));
+export const AppList = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: '4px',
+    filter: 'drop-shadow(0px 8px 30px rgba(0, 0, 0, 0.16))',
+    minWidth: 130,
+    width: 'max-content',
+    marginTop: '8px',
+}));
+export const App = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 32, padding: '8px 8px 8px 12px', cursor: 'pointer' }, (open && { boxShadow: theme.shadows[3] }))));
+export const Service = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    height: 32,
+    padding: '8px 12px',
+    cursor: 'pointer',
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    fontWeight: 500,
+    '&:hover': { boxShadow: theme.shadows[3] },
+}));

package/build/components/AppServicesActionMenu/types.js

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

package/build/components/AppServicesBar/AppServicesBar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback, useState } from 'react';
+import { AppServices } from '../index.js';
+import { StyledAppHeaderWrapper } from '../Toolbar/style';
+function AppServicesBar({ appCode, services, isMaximized, dimensions, serviceCode, ui: { onStartDrag }, onChangeServiceCode, onClickServiceItem, sx, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const onPointerDown = useCallback((e) => {
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+        setIsDragging(true);
+    }, [onStartDrag, setIsDragging]);
+    const onPointerUp = () => {
+        setIsDragging(false);
+    };
+    if (!appCode || !(services === null || services === void 0 ? void 0 : services.length))
+        return null;
+    return (_jsx(StyledAppHeaderWrapper, Object.assign({ id: "app-header-wrapper", onPointerDown: onPointerDown, onPointerUp: onPointerUp, isDragging: isDragging, sx: sx }, { children: _jsx(AppServices, { onClickServiceItem: onClickServiceItem, dimensions: { width: dimensions.width }, serviceCode: serviceCode, services: services, isMaximized: isMaximized, onChangeServiceCode: onChangeServiceCode }) })));
+}
+export default memo(AppServicesBar);

package/build/components/AppServicesBar/index.js

@@ -1 +1,3 @@
-export{Xb as default}from'../../chunk-WGPV3VEK.js';import'../../chunk-5ZTIXOFI.js';import'../../chunk-RUU3IQ7Y.js';import'../../chunk-3EU4NGZ7.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-KM4UT2GM.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-FQXBL3YF.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-JQYBCTVW.js';import'../../chunk-7NYF2UBV.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-XY57JRPE.js';import'../../chunk-BV5VAMBI.js';import'../../chunk-LONKQ3XM.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-VNK7I7AL.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-WGCHJPEZ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-ZWJTEKFP.js';import'../../chunk-2FDPAJY4.js';import'../../chunk-544TDVOA.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-IXQ7Y6Y5.js';import'../../chunk-F4KVGV4T.js';import'../../chunk-ZUBHIDDI.js';import'../../chunk-FAYAV46R.js';import'../../chunk-6DLPM4RB.js';import'../../chunk-XQVSYDRO.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-T3BFBXVJ.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-V5OHALLD.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-NLOKMDQY.js';import'../../chunk-OLPNHTE7.js';import'../../chunk-UF4FBI5V.js';import'../../chunk-OJJ2Q5XK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-XZORYOIS.js';import'../../chunk-BTANFCN2.js';import'../../chunk-YTBVTQNQ.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-LMKY6Q27.js';import'../../chunk-OFBKWUDT.js';import'../../chunk-NQVCWKMH.js';import'../../chunk-YVHYNRRL.js';import'../../chunk-LOJTJZSX.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-XRTET45W.js';import'../../chunk-LDZG7EXA.js';import'../../chunk-NLEKLEHC.js';import'../../chunk-B4QKXIT7.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-FL7ZDVP7.js';import'../../chunk-23C4BLEJ.js';import'../../chunk-7A7PBYFB.js';import'../../chunk-J72TLM2F.js';import'../../chunk-HRHKLBHG.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-YLE4Q6WH.js';import'../../chunk-D5EB3ZRT.js';import'../../chunk-BNUBHZV7.js';import'../../chunk-3ABTBVXY.js';import'../../chunk-AUM6AR3E.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-2T2Z5RPJ.js';import'../../chunk-SZBR7LB3.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-JWC3XDE4.js';import'../../chunk-UB5L7C6S.js';import'../../chunk-JYJ3D2X6.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-62CGUEB4.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-NLPYBEGY.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-GF7D4WGP.js';import'../../chunk-6ZPCHYOF.js';import'../../chunk-GI3U6XGW.js';import'../../chunk-3A4B5D6T.js';import'../../chunk-24XGEJR2.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-EAUWAY4T.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-MYFLXP7G.js';import'../../chunk-G6N4V3PP.js';import'../../chunk-P6K4PD7Y.js';import'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-KGQT7R3W.js';import'../../chunk-XXZJ5D5P.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-7IW25XZP.js';import'../../chunk-WHWKA4SY.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import AppServicesBar from './AppServicesBar';
+export * from './AppServicesBar';
+export default AppServicesBar;

package/build/components/AppServicesBar/style.js

@@ -0,0 +1,6 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const AppContainerHeader = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+}));

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, rightActions }) {
+    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, rightActions: rightActions })), children] })) })) })) })), document.body);
+}
+export default memo(Window);

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.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.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.js

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

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.js

@@ -0,0 +1,71 @@
+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, initialPosition, }) {
+    var _a, _b;
+    const { height, width } = useWindowDimensions();
+    const viewerDefaultWidth = defaultWindowWidth || DEFAULT_VIEWER_WIDTH;
+    const viewerDefaultHeight = defaultWindowHeight || DEFAULT_VIEWER_HEIGHT;
+    const [position, setPosition] = useState({
+        x: (_a = initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.x) !== null && _a !== void 0 ? _a : width / 2 + viewerDefaultWidth / 2,
+        y: (_b = initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.y) !== null && _b !== void 0 ? _b : 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.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.js

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

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

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

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, rightActions, }) {
+    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, rightActions: rightActions }) })));
+}
+export default memo(AccountHeader);

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, rightActions, }) {
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, "data-testid": "UserTitleBar", maximized: maximized || 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: "Sidebar" })))] }), rightActions: rightActions }) })));
+}
+export default memo(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.js

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { useMouseState } from '../../../../hooks/index.js';
+import { animationDuration } from '../../AppWindow/constant';
+import AppWindowHeaderBase from './AppWindowHeaderBase';
+import { CloseIcon, MaximizeIcon } from '../../../ToolbarIcon';
+function AppWindowHeader({ isMaximized, id, isToolbarAnimationDisabled, title, leftActions, onClose, onMaximize, sx }) {
+    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(0px)',
+            width: '100%',
+        })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
+            duration: 0,
+        })) }, { children: _jsx(AppWindowHeaderBase, { title: title, maximized: isMaximized, id: id || 'draggable-dialog-title', isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, leftActions: leftActions || (_jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: isMaximized, onClick: () => onMaximize === null || onMaximize === void 0 ? void 0 : onMaximize(!isMaximized) })] })), sx: sx }) })));
+}
+export default memo(AppWindowHeader);

package/build/components/AppWindowWrapper/headers/AppWindowHeader/AppWindowHeaderBase.js

@@ -0,0 +1,20 @@
+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 { memo } from 'react';
+import Toolbar from '../../../Toolbar';
+import { StyledHeaderWrapperStyled } from '../../../Toolbar/style';
+function AppWindowHeaderBase(_a) {
+    var { title, maximized = false, id, isHovered = false, onMouseHover, onMouseLeave, leftActions, titleIconSrc, sx } = _a, rootProps = __rest(_a, ["title", "maximized", "id", "isHovered", "onMouseHover", "onMouseLeave", "leftActions", "titleIconSrc", "sx"]);
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ className: "header-wrapper", id: id, maximized: maximized || false, sx: sx }, rootProps, { children: _jsx(Toolbar, { onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, isHovered: isHovered, title: title || '', icon: titleIconSrc, leftActions: leftActions }) })));
+}
+export default memo(AppWindowHeaderBase);

package/build/components/AppWindowWrapper/headers/AppWindowHeader/index.js

@@ -0,0 +1,4 @@
+import AppWindowHeader from './AppWindowHeader';
+export default AppWindowHeader;
+export { default as AppWindowHeaderBase } from './AppWindowHeaderBase';
+export * from './type';

package/build/components/AppWindowWrapper/headers/AppWindowHeader/type.js

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

package/build/components/AppWindowWrapper/index.js

@@ -1 +1,7 @@
-export{i as AccountHeaderTitle,o as AppWindow,a as AppWindowContext,b as AppWindowContextProvider,q as AppWindowHeader,p as AppWindowHeaderBase,h as FOOTER_HEIGHT,d as LEFT_SIDEBAR,e as RIGHT_SIDEBAR,m as StyledFooter,n as StyledHideButton,j as StyledMenuLink,k as StyledSubmitButton,l as SubmitButtonWrapper,g as VIEWER_HEIGHT,f as VIEWER_WIDTH,c as animationDuration,r as default}from'../../chunk-GF7D4WGP.js';import'../../chunk-6ZPCHYOF.js';import'../../chunk-GI3U6XGW.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-XXZJ5D5P.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import AppWindowWrapper from './AppWindowWrapper';
+export { default as AppWindow, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, FOOTER_HEIGHT, StyledFooter, StyledHideButton, StyledMenuLink, StyledSubmitButton, SubmitButtonWrapper, } from './AppWindow';
+export * from './headers/AccountHeader';
+export * from './headers/AppWindowHeader';
+export { default as AppWindowHeader } from './headers/AppWindowHeader';
+export * from './context';
+export default AppWindowWrapper;

package/build/components/AppWindowWrapper/type.js

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

package/build/components/AuthenticationTypeChip/AuthenticationTypeChip.js

@@ -0,0 +1,21 @@
+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 { memo } from 'react';
+import StatusChipWithCopy from '../StatusChipWithCopy';
+import { chipAuthenticationTypes } from './constants';
+function AuthenticationTypeChip(_a) {
+    var { title, ref } = _a, rest = __rest(_a, ["title", "ref"]);
+    const chipAuthenticationType = chipAuthenticationTypes[title];
+    return (_jsx(StatusChipWithCopy, Object.assign({ chipStyles: chipAuthenticationType === null || chipAuthenticationType === void 0 ? void 0 : chipAuthenticationType.styles, ref: ref }, rest, { children: (chipAuthenticationType === null || chipAuthenticationType === void 0 ? void 0 : chipAuthenticationType.text) || title })));
+}
+export default memo(AuthenticationTypeChip);