@tap-payments/os-micro-frontend-shared 0.1.95 → 0.1.96-test.11

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,21 +10,20 @@ 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);
     };
@@ -34,8 +32,8 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
     };
     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 +45,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 +72,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 +81,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,25 @@
+/// <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;
+    services: AppService[];
+    isMaximized: boolean;
+    dimensions: {
+        width: number | string;
+    };
+    features: {
+        sandboxMode: boolean;
+        initialServiceCode?: string;
+    };
+    ui: {
+        onStartDrag: DragControls['start'];
+    };
+    onChangeServiceCode: (serviceCode: string) => void;
+    onClickServiceItem: (code: string) => void;
+    sx?: SxProps<Theme>;
+}
+declare function AppServicesBar({ appCode, services, isMaximized, dimensions, features: { initialServiceCode }, 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, features: { initialServiceCode }, 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: initialServiceCode !== null && initialServiceCode !== void 0 ? initialServiceCode : '', 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/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/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/StatusIcons/AuthorizedIcon/AuthorizedIcon.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { type AuthorizedStatusType } from '../../TableCells';
-import { TableMode } from '../../../types/index.js';
+import { SelectionProps, TableMode } from '../../../types/index.js';
 type AuthorizedIconProps = {
     iconStyles?: React.CSSProperties;
     authorizedStatus?: AuthorizedStatusType;
     isTextShown?: boolean;
     tableMode?: TableMode;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex, selectionProps }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/AuthorizedIcon/AuthorizedIcon.js

@@ -6,10 +6,15 @@ import Tooltip from '../../Tooltip';
 import { authorizedStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import Icon from '../../Icon';
 import { TextLabel } from '../../TableCells/CustomCells/style';
-export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex = 0, selectionProps = {} }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (_jsx(Tooltip, Object.assign({ title: tableMode === 'sheet' ? '' : t(camelCase(authorizedStatus)) }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: Object.assign({ color: theme.palette.info.dark }, (tableMode === 'sheet' && {
-                height: '18px',
-            })) }, { children: t(camelCase(authorizedStatus)) }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
+    const status = t(camelCase(authorizedStatus));
+    if (tableMode === 'sheet') {
+        return (_jsx(StatusChipWithCopy, Object.assign({ copyText: status, chipIndex: chipIndex, selectionProps: selectionProps }, { children: status })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: status }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: {
+                color: theme.palette.info.dark,
+            } }, { children: status }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
 };

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { SelectionProps } from '../../../types/index.js';
 import { type ChargeStatus } from '../../TableCells';
-export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, isSheetViewShown, selectionProps, }: Readonly<{
+export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, isSheetViewShown, selectionProps, chipIndex, }: Readonly<{
     chargeStatus?: ChargeStatus;
     gatewayTooltip?: string;
     showAuthorizedStatus?: boolean;
@@ -20,4 +20,5 @@ export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquire
     showBadge?: boolean;
     isSheetViewShown?: boolean;
     selectionProps?: SelectionProps;
+    chipIndex?: number;
 }>): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.js

@@ -8,7 +8,7 @@ import StatusChipWithCopy from '../../StatusChipWithCopy';
 import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon, StatusIconWrapper, TextLabel } from '../../TableCells/CustomCells/style';
 import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
-export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, }) {
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, chipIndex = 0, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
     const theme = useTheme();
@@ -18,7 +18,7 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
     const gatewayTooltipTitle = gatewayTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Gateway" }), _jsx("div", { children: gatewayTooltip })] }));
     const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx("div", Object.assign({ "data-testid": "ChargeStatusIcon_ChargeIcon", style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px', borderRadius: unCapturedStatusStyle ? '50%' : '' }, iconWrapperStyles) }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", "data-testid": "ChargeStatusIcon_StatusIcon", style: Object.assign({ borderRadius: unCapturedStatusStyle ? '50%' : '', width: '16px', height: '16px' }, iconStyles) }) })));
     if (isSheetViewShown) {
-        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: 0, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
+        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: chipIndex, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
     }
     if (isTextShown) {
         return (_jsxs(TextViewWrapper, { children: [_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle }, { children: _jsxs(StatusTextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(chargeStatus), sx: {

package/build/components/StatusIcons/DestinationIcon/DestinationIcon.d.ts

@@ -1,5 +1,8 @@
-import { DestinationStatus } from '../../../types/index.js';
-export declare function DestinationIcon({ status, isTextShown, }: Readonly<{
+import { DestinationStatus, SelectionProps } from '../../../types/index.js';
+export declare function DestinationIcon({ status, isTextShown, isSheetViewShown, chipIndex, selectionProps, }: Readonly<{
     status: DestinationStatus;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 }>): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/DestinationIcon/DestinationIcon.js

@@ -5,10 +5,18 @@ import Tooltip from '../../Tooltip';
 import { camelCase } from 'lodash';
 import { useTheme } from '@mui/material';
 import { t } from 'i18next';
-export function DestinationIcon({ status, isTextShown, }) {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export function DestinationIcon({ status, isTextShown, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) {
     const theme = useTheme();
-    return isTextShown && destinationStatusIcons[status] ? (_jsx(TextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(status), sx: {
-            background: '#1F88D00D',
-            color: status === 'PROCESSED' ? theme.palette.info.dark : theme.palette.common.black,
-        } }, { children: t(camelCase(status)) }))) : (_jsx(StatusIconWrapper, Object.assign({ className: "destination-status" }, { children: status && destinationStatusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(StatusIcon, { src: destinationStatusIcons[status], alt: "destination-icon" }) }))) })));
+    const statusText = t(camelCase(status));
+    if (isSheetViewShown && destinationStatusIcons[status]) {
+        return (_jsx(StatusChipWithCopy, Object.assign({ copyText: statusText, chipIndex: chipIndex, selectionProps: selectionProps }, { children: statusText })));
+    }
+    if (isTextShown && destinationStatusIcons[status]) {
+        return (_jsx(TextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(status), sx: {
+                background: '#1F88D00D',
+                color: status === 'PROCESSED' ? theme.palette.info.dark : theme.palette.common.black,
+            } }, { children: statusText })));
+    }
+    return (_jsx(StatusIconWrapper, Object.assign({ className: "destination-status" }, { children: status && destinationStatusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(StatusIcon, { src: destinationStatusIcons[status], alt: "destination-icon" }) }))) })));
 }

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { PayoutStatusType } from '../../TableCells';
+import { SelectionProps } from '../../../types/index.js';
 type PayoutIconProps = {
     iconStyles?: React.CSSProperties;
     payoutStatus?: PayoutStatusType;
     payoutTooltip?: React.ReactNode;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-export declare const PayoutIcon: ({ payoutStatus, isTextShown, payoutTooltip, iconStyles }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayoutIcon: ({ payoutStatus, isTextShown, payoutTooltip, iconStyles, isSheetViewShown, chipIndex, selectionProps, }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.js

@@ -5,8 +5,13 @@ import Tooltip from '../../Tooltip';
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
 import { payoutStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
-export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) => {
     const { t } = useTranslation();
-    const title = payoutTooltip ? payoutTooltip : t(camelCase(payoutStatus));
-    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_PayoutStatusLabel" }, { children: t(camelCase(payoutStatus)) }))) : (_jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", "data-testid": "StatusCell_PayoutStatusIcon", style: iconStyles })) })));
+    const statusText = t(camelCase(payoutStatus));
+    const title = payoutTooltip ? payoutTooltip : statusText;
+    if (isSheetViewShown) {
+        return (_jsx(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: statusText, selectionProps: selectionProps }, { children: statusText })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_PayoutStatusLabel" }, { children: statusText }))) : (_jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", "data-testid": "StatusCell_PayoutStatusIcon", style: iconStyles })) })));
 };

package/build/components/StatusIcons/RefundIcon/RefundIcon.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="react" />
 import { type RefundStatusType } from '../../TableCells';
+import { SelectionProps } from '../../../types/index.js';
 type RefundIconProps = {
     iconStyles?: React.CSSProperties;
     refundStatus?: RefundStatusType;
     refundTooltip?: React.ReactNode;
     refundCount?: number;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-declare const RefundIcon: ({ isTextShown, refundStatus, refundTooltip, refundCount, iconStyles }: RefundIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const RefundIcon: ({ isTextShown, refundStatus, refundTooltip, refundCount, iconStyles, isSheetViewShown, chipIndex, selectionProps, }: RefundIconProps) => import("react/jsx-runtime").JSX.Element;
 export default RefundIcon;

package/build/components/StatusIcons/RefundIcon/RefundIcon.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
@@ -8,9 +8,15 @@ import { MultiRefundContainer, MultiRefundIcon, RefundsCountBadge } from '../../
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
 import { refundStatusIcons, refundStyles } from '../../TableCells/CustomCells/StatusCell/constant';
-const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) => {
     const { t } = useTranslation();
     const theme = useTheme();
+    const refundCountShown = (refundCount || 0) > 1;
+    const status = t(camelCase(refundStatus));
+    if (isSheetViewShown) {
+        return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, selectionProps: selectionProps, copyText: status }, { children: [status, " ", refundCountShown ? `${refundCount}x` : null] })));
+    }
     const refundCountBadge = (_jsxs(RefundsCountBadge, Object.assign({ "data-testid": "StatusCell_RefundsCountBadge", initial: { width: 0, opacity: 0, padding: '0px' }, transition: {
             animate: {
                 duration: 0.5,
@@ -31,8 +37,8 @@ const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '',
                 opacity: 1,
             },
         } }, { children: [refundCount, "x"] })));
-    const refundCountShown = (refundCount || 0) > 1;
-    return (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: _jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_RefundStatusLabel", sx: {
+    if (isTextShown) {
+        return (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: _jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_RefundStatusLabel", sx: {
                     color: refundStyles[refundStatus].color,
                     backgroundColor: refundStyles[refundStatus].backgroundColor,
                     width: '90px',
@@ -41,11 +47,13 @@ const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '',
                             boxShadow: theme.shadows[4],
                             gap: theme.spacing(0.5),
                         },
-                    } }, { children: [t(camelCase(refundStatus)), " ", refundCountShown ? refundCountBadge : null] })) })) }))) : (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: refundCountShown ? (_jsxs(MultiRefundContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", variants: {
-                    animate: {
-                        boxShadow: theme.shadows[4],
-                        gap: theme.spacing(0.5),
-                    },
-                } }, { children: [_jsx(MultiRefundIcon, { src: refundSettledIcon, alt: "multi-refunded-icon", "data-testid": "StatusCell_MultiRefundIcon" }), refundCountBadge] }))) : (_jsx(StatusIcon, { src: refundStatusIcons[refundStatus], alt: "refunded-icon", "data-testid": "StatusCell_RefundStatusIcon", style: iconStyles })) }))) }));
+                    } }, { children: [status, " ", refundCountShown ? refundCountBadge : null] })) })) })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: refundCountShown ? (_jsxs(MultiRefundContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", variants: {
+                animate: {
+                    boxShadow: theme.shadows[4],
+                    gap: theme.spacing(0.5),
+                },
+            } }, { children: [_jsx(MultiRefundIcon, { src: refundSettledIcon, alt: "multi-refunded-icon", "data-testid": "StatusCell_MultiRefundIcon" }), refundCountBadge] }))) : (_jsx(StatusIcon, { src: refundStatusIcons[refundStatus], alt: "refunded-icon", "data-testid": "StatusCell_RefundStatusIcon", style: iconStyles })) })));
 };
 export default RefundIcon;

package/build/components/ToggleView/ToggleView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ToggleViews, ToggleViewsValues } from './types';
+declare const DEFAULT_TOGGLE_VIEWS: {
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: ToggleViews;
+}[];
+export interface ToggleViewProps {
+    onToggleClick: (view: ToggleViewsValues) => void;
+    currentView: ToggleViewsValues;
+    getOverrideViews?: (defaultViews: typeof DEFAULT_TOGGLE_VIEWS) => {
+        icon: React.ReactNode;
+        value: ToggleViewsValues;
+    }[];
+}
+declare const ToggleView: (props: ToggleViewProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ToggleView;