@tap-payments/os-micro-frontend-shared 0.1.140-test.3 → 0.1.141

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

@@ -15,7 +15,7 @@ export declare const Charge: import("@emotion/styled").StyledComponent<import("@
 export declare const DropDownChargeGapColumn: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledAmount: import("@emotion/styled").StyledComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "width" | "height" | "hidden" | "type" | "color" | "content" | "translate" | "value" | "list" | "form" | "slot" | "style" | "title" | "name" | "ref" | "pattern" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "multiple" | "autoComplete" | "readOnly" | "required" | "max" | "src" | "alt" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "min" | "accept" | "capture" | "checked" | "formEncType" | "minLength"> & {
+}, "width" | "height" | "hidden" | "type" | "color" | "content" | "translate" | "name" | "value" | "list" | "form" | "slot" | "style" | "title" | "ref" | "pattern" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "multiple" | "autoComplete" | "readOnly" | "required" | "max" | "src" | "alt" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "min" | "accept" | "capture" | "checked" | "formEncType" | "minLength"> & {
     allowDecimals?: boolean | undefined;
     allowNegativeValue?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,11 +1,16 @@
 import React from 'react';
-import { AppDetails, UserApp } from '../../types/index.js';
+import { AppService } from '../../types/index.js';
 import { ServiceItemProps } from './ServiceItem';
 interface AppServicesProps extends Pick<ServiceItemProps, 'onClickServiceItem'> {
-    appInfo: AppDetails;
-    userApp?: UserApp;
-    onChangeAppServiceCode?: (serviceCode: string) => void;
+    serviceCode: string;
+    services: AppService[];
+    isMaximized: boolean;
+    appCode: string;
+    dimensions: {
+        width: string | number;
+    };
+    onChangeServiceCode?: (serviceCode: string) => void;
 }
-declare function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }: AppServicesProps): import("react/jsx-runtime").JSX.Element;
+declare function AppServices({ isMaximized, serviceCode, dimensions, appCode, services, onChangeServiceCode, onClickServiceItem, }: Readonly<AppServicesProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AppServices>;
 export default _default;

package/build/components/AppServices/AppServices.js

@@ -2,7 +2,6 @@ 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 { getNameText } from '../../utils/index.js';
@@ -11,31 +10,32 @@ 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, appCode, 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 : [];
+    const servicesList = useMemo(() => {
+        var _a;
+        if (appCode === APP_CODES.account.code) {
+            return (_a = 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]);
+        return services !== null && services !== void 0 ? services : [];
+    }, [appCode, 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 = servicesList.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);
+    }, [servicesList, i18n.language, serviceCode]);
     useEffect(() => {
         setSelectedOption(activeTabTitle);
     }, [activeTabTitle]);
@@ -47,14 +47,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.width) < initServicesWidth + 10);
+    }, [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.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.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 +74,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 +83,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

@@ -5,7 +5,7 @@ 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 }) {
+function ServiceItem({ isDropdown = false, name, code, activeCode, navigateToMenuItem, onClickServiceItem }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const { t } = useTranslation();
     const open = Boolean(anchorEl);
@@ -13,7 +13,7 @@ function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick,
         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);
@@ -31,8 +31,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/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.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, appCode: appCode, 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/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, }: 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

@@ -5,6 +5,6 @@ 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" })))] }) }) })));
+    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: "Sections" })))] }) }) })));
 }
 export default memo(AccountHeaderTitle);

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/JSONViewer/components/JSONTitleBar/JSONTitleBar.d.ts

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

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

@@ -4,6 +4,6 @@ import Toolbar, { StyledHeaderWrapperStyled } from '../../../Toolbar';
 import { CloseIcon, ExpandButton, MaximizeIcon } from '../../../ToolbarIcon';
 import { jsonIcon } from '../../../../constants/index.js';
 function JSONTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded = false, showRequestIcon = false, isHovered = false, }) {
-    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
 }
 export default memo(JSONTitleBar);

package/build/components/ListLayout/ListLayout.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { ListLayoutStyled } from './styles';
+interface ListLayoutProps extends ComponentPropsWithoutRef<typeof ListLayoutStyled> {
+}
+declare function ListLayout({ children, ...props }: Readonly<ListLayoutProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListLayout {
+    var displayName: string;
+}
+declare const _default: import("react").MemoExoticComponent<typeof ListLayout>;
+export default _default;

package/build/components/ListLayout/ListLayout.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 { ListLayoutStyled } from './styles';
+function ListLayout(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(ListLayoutStyled, Object.assign({ component: "article", "data-testid": "ListLayout" }, props, { children: children })));
+}
+ListLayout.displayName = 'ListLayout';
+export default memo(ListLayout);

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

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

package/build/components/ListLayout/index.js

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ListLayoutStyled: 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/ListLayout/styles.js

@@ -0,0 +1,9 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const ListLayoutStyled = styled(Box)(() => ({
+    flex: 1,
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));

package/build/components/MFWidgetLoader/MFWidgetLoader.d.ts

@@ -0,0 +1,2 @@
+declare const MFWidgetLoader: () => import("react/jsx-runtime").JSX.Element;
+export default MFWidgetLoader;

package/build/components/MFWidgetLoader/MFWidgetLoader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack } from '@mui/material';
+import Skeleton from '@mui/material/Skeleton';
+const MFWidgetLoader = () => {
+    return (_jsxs(Stack, Object.assign({ height: "100%", borderRadius: "0 0 12px 12px", overflow: "hidden" }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, height: "4.1875rem", sx: {
+                    pb: '1.2rem',
+                    paddingInline: '32px',
+                    pt: '4px',
+                    background: (theme) => theme.palette.background.transparent[0],
+                } }, { children: [_jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: "rounded", width: 70, height: 33 }), _jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: "rounded", width: 70, height: 33 }), _jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: "rounded", width: 70, height: 33 })] })), _jsx(Box, { flex: 1, bgcolor: "#fff" })] })));
+};
+export default MFWidgetLoader;

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

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

package/build/components/MFWidgetLoader/index.js

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

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

@@ -9,12 +9,12 @@ export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
+    name?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     list?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     title?: string | undefined;
-    name?: string | undefined;
     className?: string | undefined;
     pattern?: string | undefined;
     defaultChecked?: boolean | undefined;

package/build/components/StatusButton/constant.d.ts

@@ -19,6 +19,4 @@ export declare const statusButtonIcons: {
     paidOut: string;
     scheduled: string;
     checked: string;
-    dashedChecked: string;
-    deactivated: string;
 };

package/build/components/StatusButton/constant.js

@@ -1,4 +1,4 @@
-import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, dashedCheckIcon, deactivatedIcon,
+import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon,
 // trashBinIcon,
  } from '../../constants/index.js';
 export const statusButtonIcons = {
@@ -22,6 +22,4 @@ export const statusButtonIcons = {
     paidOut: paidOutFilterIcon,
     scheduled: scheduledFilterIcon,
     checked: completedBlackIcon,
-    dashedChecked: dashedCheckIcon,
-    deactivated: deactivatedIcon,
 };

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

@@ -21,7 +21,7 @@ export declare const CountBadge: import("@emotion/styled").StyledComponent<impor
 }, {}, {}>;
 export declare const StatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant: StatusButtonVariant;
-    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | "dashedChecked" | "deactivated" | undefined;
+    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const StyledFilterName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("../DropdownMenu").IProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

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

@@ -9,10 +9,14 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
     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>, {}, {}>;
 export declare const StyledHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    sandboxMode?: boolean | undefined;
     maximized?: boolean | undefined;
     isDragging?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledAppHeaderWrapper: 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> & {
+    isDragging?: boolean | undefined;
+}, {}, {}>;
 export declare const ToolbarStyled: 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> & {
@@ -20,7 +24,6 @@ export declare const ToolbarStyled: import("@emotion/styled").StyledComponent<im
     isHovered?: boolean | undefined;
 }, {}, {}>;
 export declare const StyledHeaderWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    sandboxMode?: boolean | undefined;
     maximized?: boolean | undefined;
     isDragging?: boolean | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;

package/build/components/Toolbar/style.js

@@ -38,12 +38,17 @@ export const StyledBox = styled(Box)(({ theme }) => ({
 }));
 export const StyledHeaderWrapper = styled('div', {
     shouldForwardProp: (prop) => prop !== 'sandboxMode' && prop !== 'maximized' && prop !== 'isDragging',
-})(({ theme, sandboxMode, maximized, isDragging }) => (Object.assign(Object.assign(Object.assign({ background: sandboxMode ? theme.palette.common.lightOrange : theme.palette.background.transparent[0], backdropFilter: 'blur(32px)' }, (!maximized && {
+})(({ maximized, isDragging }) => (Object.assign(Object.assign(Object.assign({}, (!maximized && {
     borderTopRightRadius: 12,
     borderTopLeftRadius: 12,
 })), (isDragging && {
     cursor: 'move',
 })), { margin: 0 })));
+export const StyledAppHeaderWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'maximized' && prop !== 'isDragging',
+})(({ isDragging }) => (Object.assign(Object.assign({}, (isDragging && {
+    cursor: 'move',
+})), { margin: 0 })));
 export const ToolbarStyled = styled(Box, {
     shouldForwardProp: (props) => props !== 'maximized' && props !== 'isHovered',
 })(({ theme, maximized }) => (Object.assign(Object.assign({ height: 32, position: 'relative', display: 'flex', width: '100%', justifyContent: 'center', transition: 'all 0.5s ease-in-out', borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }, (maximized && {

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -6,7 +6,7 @@ import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
 import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
-function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
+function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
     // Custom hooks for state management
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     // Table data processing
@@ -41,7 +41,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         handleChipClick,
     });
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
         const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, isMinimized, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -34,11 +34,11 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, isMinimized, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.d.ts

@@ -8,6 +8,6 @@ export interface VirtualTableWithCardProps extends Omit<IVirtualTable, 'showHead
     tableHeight: number;
     tableHeaderHeight?: number;
 }
-declare function VirtualTableWithCard({ rows, threshold, rowProps, footerProps, rowHeight, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, dragControls, }: VirtualTableWithCardProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTableWithCard({ rows, threshold, rowProps, footerProps, rowHeight, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, onStartDrag, }: Readonly<VirtualTableWithCardProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTableWithCard>;
 export default _default;

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.js

@@ -32,11 +32,11 @@ const createItemData = memoize((isLoading, rows, rowProps, scrollToIndex, lastIt
     areAllRowsLoaded,
     renderCardComponent,
 }));
-function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, dragControls, }) {
+function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, onStartDrag, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,

package/build/components/Window/Window.d.ts

@@ -18,7 +18,8 @@ interface WindowWrapperProps {
         order?: number;
         openOrder?: number;
     };
+    sandboxMode?: boolean;
 }
-declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, }: WindowWrapperProps): import("react/jsx-runtime").JSX.Element;
+declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, sandboxMode, }: Readonly<WindowWrapperProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof WindowWrapper>;
 export default _default;

package/build/components/Window/Window.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo, useState, useRef, useEffect } from 'react';
+import { useTheme } from '@mui/material';
 import { motion } from 'framer-motion';
 import { Resizable } from 're-resizable';
 import { APP_WINDOW_Z_INDEX, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../constants/index.js';
 import { contentStyle, ContentWrapper, initalStyle, resizableMainStyle, AppContainerWrapper, AppContainerContainer } from './style';
-function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, }) {
+function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, sandboxMode = false, }) {
+    const theme = useTheme();
     const [isDrag, setIsDrag] = useState(true);
     const modalRef = useRef(null);
     const constraintsRef = useRef(null);
@@ -16,9 +18,9 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
         onClick === null || onClick === void 0 ? void 0 : onClick();
         setIsDrag(false);
     };
-    const resizableStyle = useMemo(() => (Object.assign(Object.assign(Object.assign({}, resizableMainStyle), { maxWidth: width, borderRadius: !isMaximized ? 12 : '0 !important' }), (!isMaximized && {
+    const resizableStyle = useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({}, resizableMainStyle), { maxWidth: width, borderRadius: !isMaximized ? 12 : '0 !important' }), (!isMaximized && {
         top: 0,
-    }))), [isMaximized, width]);
+    })), { background: sandboxMode ? theme.palette.common.lightOrange : theme.palette.background.transparent[0], backdropFilter: 'blur(32px)' })), [width, isMaximized, sandboxMode]);
     useEffect(() => {
         var _a;
         (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({

package/build/components/index.d.ts

@@ -115,3 +115,8 @@ export { default as ToggleView, type ToggleViewsValues, ToggleViews } from './To
 export { default as LanguageDropdown } from './LanguageDropdown';
 export { default as DisplayAmount } from './DisplayAmount';
 export { default as AmountInput } from './AmountInput';
+export { default as AppServicesBar } from './AppServicesBar';
+export * from './AppServicesBar';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as MFWidgetLoader } from './MFWidgetLoader';

package/build/components/index.js

@@ -115,3 +115,8 @@ export { default as ToggleView, ToggleViews } from './ToggleView';
 export { default as LanguageDropdown } from './LanguageDropdown';
 export { default as DisplayAmount } from './DisplayAmount';
 export { default as AmountInput } from './AmountInput';
+export { default as AppServicesBar } from './AppServicesBar';
+export * from './AppServicesBar';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as MFWidgetLoader } from './MFWidgetLoader';

package/build/constants/apps.d.ts

@@ -760,3 +760,6 @@ export declare const APP_ICONS: {
     toolbarIconUrl: string;
 }[];
 export declare const excludedApps: string[];
+export declare const MF_APPS_MAPPER: Readonly<{
+    TERMINALS: "TERMINALS";
+}>;

package/build/constants/apps.js

@@ -374,3 +374,6 @@ export const APP_ICONS = [
     },
 ];
 export const excludedApps = ['login'];
+export const MF_APPS_MAPPER = Object.freeze({
+    TERMINALS: 'TERMINALS',
+});

package/build/constants/assets.d.ts

@@ -72,8 +72,6 @@ export declare const percentage100Icon: string;
 export declare const maximizeIcon: string;
 export declare const minimizeIcon: string;
 export declare const closeIcon: string;
-export declare const dashedCheckIcon: string;
-export declare const deactivatedIcon: string;
 export declare const topUpIcon: string;
 export declare const deMaximizeIcon: string;
 export declare const pendingFlag: string;

package/build/constants/assets.js

@@ -77,8 +77,6 @@ export const percentage100Icon = `${lightUrl}/percentage100.svg`;
 export const maximizeIcon = `${lightUrl}/maximize.svg`;
 export const minimizeIcon = `${lightUrl}/minimize.svg`;
 export const closeIcon = `${lightUrl}/close.svg`;
-export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
-export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
 export const topUpIcon = `${lightUrl}/topup.svg`;
 export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
 export const pendingFlag = `${lightUrl}/pendingFlag.svg`;

package/build/types/apps.d.ts

@@ -1,6 +1,11 @@
 import { ColumnsView } from './column';
-import { TextAndLang } from './user';
+import { Segment, SegmentCountry, TextAndLang } from './user';
 import { BusinessMerchant } from './merchant';
+import type { i18n } from 'i18next';
+import type { DragControls } from 'framer-motion';
+import { Theme } from '@mui/material';
+import { CalenderMode } from './theme';
+import { Timezone } from './appConfig';
 export interface AccountAppPayload {
     disabledAccountDataFetching?: boolean;
     isAccountDetailsOpen: boolean;
@@ -63,3 +68,47 @@ export interface UserApp {
     name: TextAndLang[];
     app_services: AppService[];
 }
+export type NavigateFunction = (params: {
+    instanceId?: string;
+    appId?: string;
+    appCode: string;
+    serviceCode: string;
+    state?: any;
+}) => void;
+export type MFWidgetBaseProps = {
+    instanceId: string;
+    i18n?: i18n;
+    app?: UserApp;
+    appWindow: {
+        isMinimized: boolean;
+        isMaximized: boolean;
+        order: number;
+        dimensions: Pick<AppDetails['dimensions'], 'width' | 'height'>;
+    };
+    features: {
+        hasReportsApp: boolean;
+        hasHeader: boolean;
+        sandboxMode: boolean;
+        initialServiceCode?: string;
+    };
+    segment: Pick<Segment, 'id' | 'brands' | 'countries'> & {
+        defaultCountry?: SegmentCountry;
+    };
+    ui: {
+        theme: Theme;
+        onStartDrag: DragControls['start'];
+    };
+    calendar: {
+        mode: CalenderMode;
+        onSwitch: (mode: CalenderMode) => void;
+    };
+    navigation: {
+        navigate: NavigateFunction;
+    };
+    timezone: {
+        current?: Timezone | null;
+        default?: Timezone;
+        onChange: (timezone: Timezone) => void;
+        onChangeHistory: (timezone: Timezone) => void;
+    };
+};

package/build/types/table.d.ts

@@ -136,7 +136,7 @@ export interface IVirtualTable<R = any> {
         height: string | number;
         width: string | number;
     };
-    dragControls?: DragControls;
+    onStartDrag?: DragControls['start'];
     isSheetView?: boolean;
     isMinimized?: boolean;
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.140-test.3",
-  "testVersion": 3,
+  "version": "0.1.141",
+  "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
   "types": "build/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
       "types": "./build/index.d.ts",
       "import": "./build/index.js",
@@ -127,6 +128,32 @@
     "vite": "6.0.5",
     "vite-tsconfig-paths": "^4.2.0"
   },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "@mui/material": "^5",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "framer-motion": "^10",
+    "react-hook-form": "^7",
+    "@hookform/resolvers": "^3",
+    "react-router-dom": "^7",
+    "i18next": "^22",
+    "react-i18next": "^12",
+    "react-multi-date-picker": "^4",
+    "dayjs": "^1",
+    "react-dropzone": "^14",
+    "react-hot-toast": "^2",
+    "recharts": "^2",
+    "react-window": "^1.8",
+    "react-window-infinite-loader": "^1",
+    "react-virtualized-auto-sizer": "^1",
+    "re-resizable": "^6",
+    "react-draggable": "^4",
+    "react-currency-input-field": "^3",
+    "react18-input-otp": "^1",
+    "@uiw/react-json-view": "^2.0.0-alpha"
+  },
   "lint-staged": {
     "src/**/*.{ts,tsx,json,js,jsx}": [
       "yarn run prettier:fix",
@@ -136,4 +163,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}