@tap-payments/os-micro-frontend-shared 0.1.39-test.1 → 0.1.40-9.fix.1

package/build/components/AppServices/AppServices.js

@@ -2,40 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useEffect, useRef, useState, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router';
 import { StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent } from '../index.js';
-import { APP_CODES, blackHeadingDownArrow, blueHeadingDropdownArrow } from '../../constants/index.js';
+import { blackHeadingDownArrow, blueHeadingDropdownArrow } from '../../constants/index.js';
 import { getNameText } from '../../utils/index.js';
 import ServiceItem from './ServiceItem';
 import { Wrapper } from './style';
 const selectedIcon = (props) => {
     return (_jsx(StyledIconForDropDown, { src: props.className.includes('MuiSelect-iconOpen') ? blueHeadingDropdownArrow : blackHeadingDownArrow, alt: "dropdown" }));
 };
-function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }) {
+function AppServices({ isMaximized, serviceCode, dimensions, services, onChangeServiceCode, onClickServiceItem }) {
     const [initServicesWidth, setInitServicesWidth] = useState(0);
     const [isDropdown, setIsDropdown] = useState(false);
     const [selectedOption, setSelectedOption] = useState('');
     const servicesRef = useRef(null);
     const [openDropdown, setOpenDropdown] = React.useState(false);
-    const pathname = useLocation();
     const { i18n } = useTranslation();
-    const services = useMemo(() => {
-        var _a, _b;
-        if (appInfo.appCode === APP_CODES.account.code) {
-            return (_a = userApp === null || userApp === void 0 ? void 0 : userApp.app_services.filter((service) => service.code === APP_CODES.account.services.account.code)) !== null && _a !== void 0 ? _a : [];
-        }
-        return (_b = userApp === null || userApp === void 0 ? void 0 : userApp.app_services) !== null && _b !== void 0 ? _b : [];
-    }, [appInfo.appCode, userApp === null || userApp === void 0 ? void 0 : userApp.app_services]);
     const handleChange = (event) => {
         setSelectedOption(event.target.value);
     };
     const handleOpenDropdown = () => {
         setOpenDropdown((prev) => !prev);
     };
+    // NOTE: Removed `pathname` from deps — tab title now updates based on serviceCode changes.
+    // Revisit if issues arise with tab title updates during navigation.
     const activeTabTitle = useMemo(() => {
         var _a, _b;
-        return getNameText((_b = (_a = services.filter((service) => service.code.toLowerCase() === decodeURIComponent(appInfo.serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
-    }, [pathname, appInfo.serviceCode]);
+        return getNameText((_b = (_a = services.filter((service) => service.code.toLowerCase() === decodeURIComponent(serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
+    }, [services, i18n.language, serviceCode]);
     useEffect(() => {
         setSelectedOption(activeTabTitle);
     }, [activeTabTitle]);
@@ -47,14 +40,14 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
         setInitServicesWidth(((_a = servicesRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) + iconSize + iconGap + iconMargin);
     }, []);
     useEffect(() => {
-        setIsDropdown(Number(appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width) < initServicesWidth + 10);
-    }, [appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width]);
-    const navigateToService = (serviceCode) => {
-        onChangeAppServiceCode === null || onChangeAppServiceCode === void 0 ? void 0 : onChangeAppServiceCode(serviceCode);
+        setIsDropdown(Number(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) < initServicesWidth + 10);
+    }, [dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, initServicesWidth]);
+    const navigateToService = (newServiceCode) => {
+        onChangeServiceCode === null || onChangeServiceCode === void 0 ? void 0 : onChangeServiceCode(newServiceCode);
         setOpenDropdown(false);
     };
     const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
-    return (_jsxs(Wrapper, Object.assign({ maximized: appInfo.isMaximized }, { children: [services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { appInfo: appInfo, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
+    return (_jsxs(Wrapper, Object.assign({ maximized: isMaximized }, { children: [!!(services === null || services === void 0 ? void 0 : services.length) && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { activeCode: serviceCode, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), !!(services === null || services === void 0 ? void 0 : services.length) && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
                     anchorOrigin: {
                         vertical: 40,
                         horizontal: 83,
@@ -74,7 +67,7 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
                         paddingTop: '0px !important',
                         paddingBottom: '0px !important',
                     },
-                } }, { children: services.map((service) => {
+                } }, { children: services.map((service, idx) => {
                     var _a;
                     if (((_a = getNameText(service.name, i18n.language)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.toLowerCase())) {
                         return null;
@@ -83,7 +76,7 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
                             e.preventDefault();
                             e.stopPropagation();
                             navigateToService(service.code);
-                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) })));
+                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) }), `option-${service.code}-${idx}`));
                 }) })))] })));
 }
 export default memo(AppServices);

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

@@ -1,14 +1,12 @@
 /// <reference types="react" />
-import { AppDetails } from '../../types/index.js';
 export interface ServiceItemProps {
-    appInfo: AppDetails;
+    activeCode: string;
     isDropdown?: boolean;
     name: string;
     code: string;
-    onDropdownClick?: () => void;
     navigateToMenuItem: (serviceCode: string) => void;
     onClickServiceItem?: (code: string) => void;
 }
-declare function ServiceItem({ isDropdown, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }: ServiceItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ServiceItem({ isDropdown, name, code, activeCode, navigateToMenuItem, onClickServiceItem }: Readonly<ServiceItemProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ServiceItem>;
 export default _default;

package/build/components/AppServices/ServiceItem.js

@@ -1,28 +1,26 @@
 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 { DropdownMenu } from '../index.js';
+import { newWindowIcon } from '../../constants/index.js';
 import { ServiceItemStyled } from './style';
-function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }) {
+function ServiceItem({ isDropdown = false, name, code, activeCode, 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) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: activeCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     navigateToMenuItem(code);
-                }, title: isHomeService ? undefined : name, onContextMenu: (event) => {
+                }, title: 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: [
+                } }, { children: name })), _jsx(DropdownMenu, { open: open, anchorEl: anchorEl, onClose: handleClose, menuItems: [
                     {
                         label: t('openNewWindow'),
                         name: 'new',
@@ -31,8 +29,6 @@ function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick,
                             e.stopPropagation();
                             onClickServiceItem === null || onClickServiceItem === void 0 ? void 0 : onClickServiceItem(code);
                             handleClose();
-                            if (onDropdownClick)
-                                onDropdownClick();
                         },
                     },
                 ] })] }));

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

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

package/build/components/AppServicesBar/AppServicesBar.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { DragControls } from 'framer-motion';
+import { SxProps, Theme } from '@mui/material/styles';
+import { AppService } from '../../types/index.js';
+export interface AppServicesBarProps {
+    appCode: string;
+    serviceCode: string;
+    services: AppService[];
+    isMaximized: boolean;
+    dimensions: {
+        width: number | string;
+    };
+    ui: {
+        onStartDrag: DragControls['start'];
+    };
+    onChangeServiceCode: (serviceCode: string) => void;
+    onClickServiceItem: (code: string) => void;
+    sx?: SxProps<Theme>;
+}
+declare function AppServicesBar({ appCode, services, isMaximized, dimensions, serviceCode, ui: { onStartDrag }, onChangeServiceCode, onClickServiceItem, sx, }: Readonly<AppServicesBarProps>): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<typeof AppServicesBar>;
+export default _default;

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

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

package/build/components/AppServicesBar/index.js

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const AppContainerHeader: 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>, {}, {}>;

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

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

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

@@ -9,7 +9,7 @@ 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 }) {
+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();
@@ -77,6 +77,6 @@ function Window({ children, titleBar, titleBarText, mainAppOrder, mainAppIsMinim
                     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);
+                    }, "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/style.d.ts

@@ -6,7 +6,7 @@ export declare const StyledMenuLink: import("@emotion/styled").StyledComponent<i
 }, {}, {}>;
 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" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "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>, {}, {}>;
@@ -15,4 +15,4 @@ export declare const StyledFooter: import("@emotion/styled").StyledComponent<imp
 }, 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" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 export interface WindowProps {
     children: React.ReactNode;
     titleBar?: React.ReactNode;
@@ -6,4 +7,5 @@ export interface WindowProps {
     mainAppIsMinimized?: boolean;
     mainAppOrder?: number;
     showSectionsButton?: boolean;
+    rightActions?: ReactNode;
 }

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

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

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

@@ -4,13 +4,14 @@ 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 }) {
+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: width / 2 + viewerDefaultWidth / 2,
-        y: height / 2 - viewerDefaultHeight / 2,
+        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);

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

@@ -6,6 +6,10 @@ export interface AppWindowProviderProps {
     onClose: () => void;
     defaultWindowWidth?: number;
     defaultWindowHeight?: number;
+    initialPosition?: {
+        x?: number | null;
+        y?: number | null;
+    };
 }
 export interface AppWindowContextProps {
     position: {

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

@@ -1,5 +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 function AccountHeader({ isMaximized, setIsToolbarAnimationDisabled, setIsMaximized, onClose, isSidebarExpanded, setIsSidebarExpanded, isToolbarAnimationDisabled, title, showSectionsButton, rightActions, }: 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

@@ -4,7 +4,7 @@ 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, }) {
+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,
@@ -26,6 +26,6 @@ function AccountHeader({ isMaximized, setIsToolbarAnimationDisabled, setIsMaximi
             }, 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 }) })));
+            }, isSidebarExpanded: isSidebarExpanded, isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, rightActions: rightActions }) })));
 }
 export default memo(AccountHeader);

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

@@ -1,5 +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 function AccountHeaderTitle({ title, onClose, onMaximize, maximized, id, onRequestClick, isSidebarExpanded, isHovered, onMouseHover, onMouseLeave, showSectionsButton, rightActions, }: Readonly<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

@@ -4,7 +4,7 @@ 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" })))] }) }) })));
+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/type.d.ts

@@ -1,5 +1,5 @@
-import { SyntheticEvent } from 'react';
-import { BoxProps } from '@mui/material/Box';
+import type { ReactNode, SyntheticEvent } from 'react';
+import type { BoxProps } from '@mui/material/Box';
 export interface AccountHeaderTitleProps extends BoxProps {
     title: string;
     onClose?: (e: SyntheticEvent) => void;
@@ -11,4 +11,5 @@ export interface AccountHeaderTitleProps extends BoxProps {
     isHovered?: boolean;
     onMouseHover?: (e: SyntheticEvent) => void;
     showSectionsButton?: boolean;
+    rightActions?: ReactNode;
 }

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

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
 export interface AccountHeaderProps {
     isSidebarExpanded: boolean;
     setIsSidebarExpanded: (value: boolean) => void;
@@ -9,4 +9,5 @@ export interface AccountHeaderProps {
     onClose?: () => void;
     title?: string;
     showSectionsButton?: boolean;
+    rightActions?: ReactNode;
 }

package/build/components/AppWindowWrapper/headers/AppWindowHeader/AppWindowHeaderBase.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { AppWindowHeaderBaseProps } from './type';
-declare function AppWindowHeaderBase({ title, maximized, id, isHovered, onMouseHover, onMouseLeave, leftActions, sandboxMode, titleIconSrc, sx, ...rootProps }: AppWindowHeaderBaseProps): import("react/jsx-runtime").JSX.Element;
+declare function AppWindowHeaderBase({ title, maximized, id, isHovered, onMouseHover, onMouseLeave, leftActions, titleIconSrc, sx, ...rootProps }: AppWindowHeaderBaseProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof AppWindowHeaderBase>;
 export default _default;

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

@@ -14,7 +14,7 @@ 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, sandboxMode = false, titleIconSrc, sx } = _a, rootProps = __rest(_a, ["title", "maximized", "id", "isHovered", "onMouseHover", "onMouseLeave", "leftActions", "sandboxMode", "titleIconSrc", "sx"]);
-    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ className: "header-wrapper", id: id, maximized: maximized || false, sandboxMode: sandboxMode, sx: sx }, rootProps, { children: _jsx(Toolbar, { onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, isHovered: isHovered, title: title || '', icon: titleIconSrc, leftActions: leftActions }) })));
+    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/AuthenticationTypeChip/AuthenticationTypeChip.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StatusChipWithCopyProps } from '../StatusChipWithCopy';
+import { chipAuthenticationTypes } from './constants';
+export interface AuthenticationTypeChipProps extends StatusChipWithCopyProps {
+    title: keyof typeof chipAuthenticationTypes;
+}
+declare function AuthenticationTypeChip({ title, ref, ...rest }: AuthenticationTypeChipProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AuthenticationTypeChip>;
+export default _default;

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);

package/build/components/AuthenticationTypeChip/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const chipAuthenticationTypes: {
+    '3DS': {
+        text: string;
+    };
+    'Non-3DS': {
+        text: string;
+        styles: {
+            bgColor: string;
+            borderColor: string;
+            textColor: string;
+        };
+    };
+    'Device Biometric': {
+        text: string;
+    };
+};

package/build/components/AuthenticationTypeChip/constants.js

@@ -0,0 +1,13 @@
+import { emptyStatusChipColors } from '../../constants/index.js';
+export const chipAuthenticationTypes = {
+    '3DS': {
+        text: '3DS',
+    },
+    'Non-3DS': {
+        text: 'Non 3DS',
+        styles: Object.assign({}, emptyStatusChipColors),
+    },
+    'Device Biometric': {
+        text: 'Biometric',
+    },
+};

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

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

package/build/components/AuthenticationTypeChip/index.js

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

package/build/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AutocompleteRenderInputParams, AutocompleteProps as MuiAutocompleteProps } from '@mui/material/Autocomplete';
+import { TextFieldProps } from '@mui/material/TextField';
+import { MakeOptional } from '../../types/index.js';
+export type AutocompleteProps<Value = string, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = 'div'> = {
+    label?: TextFieldProps['label'];
+    textFieldProps?: TextFieldProps | ((params: AutocompleteRenderInputParams) => TextFieldProps);
+} & MakeOptional<MuiAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'renderInput'>;
+declare const Autocomplete: <Value = string, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => import("react/jsx-runtime").JSX.Element;
+export default Autocomplete;

package/build/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,33 @@
+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 { useCallback } from 'react';
+import MuiAutocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import { PopperStyled, AutocompleteTextFieldStyled as TextField } from './style';
+import { blackRightArrowIcon } from '../../constants/index.js';
+const Autocomplete = (props) => {
+    const { options, value, onChange, label, renderInput, slotProps, textFieldProps } = props, rest = __rest(props, ["options", "value", "onChange", "label", "renderInput", "slotProps", "textFieldProps"]);
+    const defaultRenderInput = useCallback((params) => {
+        const fieldProps = typeof textFieldProps === 'function' ? textFieldProps(params) : textFieldProps;
+        return _jsx(TextField, Object.assign({}, params, fieldProps, { label: label }));
+    }, [textFieldProps, label]);
+    return (_jsx(MuiAutocomplete, Object.assign({ options: options, value: value, onChange: onChange, popupIcon: _jsx(Box, { component: "img", src: blackRightArrowIcon, sx: { transform: 'rotate(90deg)' }, width: 8, alt: "close" }), renderInput: renderInput || defaultRenderInput, PopperComponent: PopperStyled }, rest, { slotProps: Object.assign(Object.assign({}, slotProps), { popper: Object.assign({ modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 4],
+                        },
+                    },
+                ] }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.popper) }) })));
+};
+export default Autocomplete;

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

@@ -0,0 +1,2 @@
+export { default as Autocomplete } from './Autocomplete';
+export type { AutocompleteProps } from './Autocomplete';

package/build/components/Autocomplete/index.js

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import TextField from '@mui/material/TextField';
+export declare const AutocompleteTextFieldStyled: typeof TextField;
+export declare const PopperStyled: import("react").ForwardRefExoticComponent<import("@mui/material/Popper").PopperProps & import("react").RefAttributes<HTMLDivElement>>;