@tap-payments/os-micro-frontend-shared 0.0.128 → 0.0.129-sheetview-component-ui-v2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/DeviceIcon/DeviceIcon.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
 import { DEVICE_ICON } from './constants';
+import { TableMode } from '../../types/index.js';
 interface DeviceIconProps extends BoxProps {
     type?: keyof typeof DEVICE_ICON;
     isTextShown?: boolean;
+    tableMode?: TableMode;
 }
-declare function DeviceIcon({ type, isTextShown, ...props }: DeviceIconProps): import("react/jsx-runtime").JSX.Element;
+declare function DeviceIcon({ type, isTextShown, tableMode, ...props }: DeviceIconProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof DeviceIcon>;
 export default _default;

package/build/components/DeviceIcon/DeviceIcon.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import Box from '@mui/material/Box';
 import capitalize from 'lodash/capitalize';
@@ -21,9 +21,9 @@ import Tooltip from '../Tooltip';
 import { DEVICE_ICON } from './constants';
 import { isDeviceIconShown } from './utils';
 function DeviceIcon(_a) {
-    var { type, isTextShown } = _a, props = __rest(_a, ["type", "isTextShown"]);
+    var { type, isTextShown, tableMode } = _a, props = __rest(_a, ["type", "isTextShown", "tableMode"]);
     const { t } = useTranslation();
     const icon = isDeviceIconShown(type) ? DEVICE_ICON[type] : null;
-    return (_jsx(Tooltip, Object.assign({ title: icon ? capitalizeFirstLetter((type !== null && type !== void 0 ? type : '').toLowerCase()) : t('unKnown') }, { children: isTextShown ? (_jsx(TextLabel, { children: type ? capitalize(type) : 'Unknown' })) : (_jsx(Box, Object.assign({}, props, { component: "img", src: type ? icon || defaultDeviceIcon : defaultDeviceIcon, alt: type }))) })));
+    return (_jsx(Tooltip, Object.assign({ title: icon ? capitalizeFirstLetter((type !== null && type !== void 0 ? type : '').toLowerCase()) : t('unKnown') }, { children: isTextShown ? (_jsxs(TextLabel, Object.assign({ tableMode: tableMode }, { children: [" ", type ? capitalize(type) : 'Unknown'] }))) : (_jsx(Box, Object.assign({}, props, { component: "img", src: type ? icon || defaultDeviceIcon : defaultDeviceIcon, alt: type }))) })));
 }
 export default memo(DeviceIcon);

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

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+import { TableMode } from '../../types/index.js';
 export declare const TextLabel: 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>, {}, {}>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    tableMode?: TableMode | undefined;
+}, {}, {}>;

package/build/components/DeviceIcon/style.js

@@ -1,6 +1,8 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-export const TextLabel = styled(Box)(({ theme }) => ({
+export const TextLabel = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ theme, tableMode }) => ({
     fontSize: '11px',
     display: 'flex',
     alignItems: 'center',
@@ -12,4 +14,5 @@ export const TextLabel = styled(Box)(({ theme }) => ({
     borderRadius: '24px',
     border: `1px solid ${theme.palette.divider}`,
     color: theme.palette.text.primary,
+    height: tableMode === 'sheet' ? '18px' : '24px',
 }));

package/build/components/MaskedText/MaskedText.d.ts

@@ -0,0 +1,3 @@
+import { MaskedTextProps } from './type';
+declare const MaskedText: ({ text, startLength, endLength }: MaskedTextProps) => import("react/jsx-runtime").JSX.Element;
+export default MaskedText;

package/build/components/MaskedText/MaskedText.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import StatusChip from '../StatusChip';
+import { Box, useTheme } from '@mui/material';
+import { passwordDotsIcon } from '../../constants/index.js';
+const MaskedText = ({ text, startLength = 8, endLength = 4 }) => {
+    const theme = useTheme();
+    const startText = text.slice(0, startLength);
+    const endText = text.slice(text.length - endLength);
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: theme.spacing(0.5) } }, { children: [_jsx(StatusChip, Object.assign({ bgColor: "#EFF1F2", borderColor: "transparent", textColor: theme.palette.text.primary }, { children: startText })), _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), _jsx(StatusChip, Object.assign({ bgColor: "#EFF1F2", borderColor: "transparent", textColor: theme.palette.text.primary }, { children: endText }))] })));
+};
+export default MaskedText;

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

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

package/build/components/MaskedText/index.js

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

package/build/components/MaskedText/type.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface MaskedTextProps {
+    text: string;
+    startLength?: number;
+    endLength?: number;
+    separator?: ReactNode;
+}

package/build/components/MaskedText/type.js

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

package/build/components/StatusButton/StatusButton.js

@@ -37,17 +37,18 @@ function StatusButton(_a) {
                     var _a, _b;
                     (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
                     onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
-                    if (showDropdownIcon) {
-                        return;
-                    }
-                    e.stopPropagation();
-                    e.preventDefault();
-                    if (hasDropdown) {
-                        setAnchorEl(buttonRef.current);
-                    }
                 }, sx: Object.assign({}, (hasDropdown && {
                     paddingInlineEnd: '27px',
-                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), open && !showDropdownIcon && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_c = (dropdownOptions || [])) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
+                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && (_jsx(ChevronContainer, Object.assign({ onClick: (e) => {
+                                if (showDropdownIcon) {
+                                    return;
+                                }
+                                e.stopPropagation();
+                                e.preventDefault();
+                                if (hasDropdown) {
+                                    setAnchorEl(buttonRef.current);
+                                }
+                            } }, { children: dropdownIcon })))] }) })), open && !showDropdownIcon && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_c = (dropdownOptions || [])) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
                         var _a;
                         (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
                         setLastActiveStatus(item.status);

package/build/components/StatusChip/StatusChip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ChipProps } from './type';
+declare const StatusChip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -0,0 +1,19 @@
+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 { forwardRef } from 'react';
+import { ChipStyled } from './style';
+const StatusChip = forwardRef((_a, ref) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(ChipStyled, Object.assign({ ref: ref }, props, { children: children })));
+});
+export default StatusChip;

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

@@ -0,0 +1,3 @@
+import StatusChip from './StatusChip';
+export type { ChipProps as StatusChipProps } from './type';
+export default StatusChip;

package/build/components/StatusChip/index.js

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    textColor?: string | undefined;
+    bgColor?: string | undefined;
+    borderColor?: string | undefined;
+    disabled?: boolean | undefined;
+    padding?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & 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/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    children?: import("react").ReactNode;
+}, {}, {}>;

package/build/components/StatusChip/style.js

@@ -0,0 +1,32 @@
+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 { Box, styled } from '@mui/material';
+export const ChipStyled = styled(Box)((_a) => {
+    var { theme } = _a, props = __rest(_a, ["theme"]);
+    const { textColor = theme.palette.text.primary, bgColor = theme.palette.background.paper, borderColor = theme.palette.divider, disabled = false, padding, } = props;
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '18px',
+        padding: padding || `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
+        borderRadius: '30px',
+        border: `1px solid ${borderColor}`,
+        backgroundColor: bgColor,
+        color: textColor,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        whiteSpace: 'nowrap',
+        fontSize: '11px',
+        minWidth: '67px',
+    };
+});

package/build/components/StatusChip/type.d.ts

@@ -0,0 +1,9 @@
+import { BoxProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export type ChipProps = PropsWithChildren<{
+    textColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+    disabled?: boolean;
+    padding?: string;
+} & BoxProps>;

package/build/components/StatusChip/type.js

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

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

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

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

@@ -6,10 +6,10 @@ 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 }) => {
+export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (_jsx(Tooltip, Object.assign({ title: t(camelCase(authorizedStatus)) }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: {
-                color: theme.palette.info.dark,
-            } }, { children: t(camelCase(authorizedStatus)) }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
+    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 })) })));
 };

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

@@ -1,8 +1,10 @@
+import { TableMode } from '../../../types/index.js';
 interface DeviceIconChipProps {
     geographyVariant?: 'G' | 'L' | 'R';
     isTextShown?: boolean;
     deviceCountry?: string;
     deviceType?: 'DESKTOP' | 'PHONE' | 'TABLET';
+    tableMode?: TableMode;
 }
-export declare const DeviceIconChip: ({ geographyVariant, isTextShown, deviceCountry, deviceType }: DeviceIconChipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeviceIconChip: ({ geographyVariant, isTextShown, deviceCountry, deviceType, tableMode }: DeviceIconChipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/DeviceIcon/DeviceIcon.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import DeviceIcon from '../../DeviceIcon';
 import { GeographyIcon } from '../GeographyIcon/GeographyIcon';
-export const DeviceIconChip = ({ geographyVariant, isTextShown, deviceCountry, deviceType }) => {
-    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '8px', alignItems: 'center' } }, { children: [_jsx(GeographyIcon, { geographyVariant: geographyVariant, isTextShown: isTextShown, countryCode: deviceCountry }), _jsx(DeviceIcon, { type: deviceType, isTextShown: isTextShown })] })));
+export const DeviceIconChip = ({ geographyVariant, isTextShown, deviceCountry, deviceType, tableMode }) => {
+    return (_jsxs(Box, Object.assign({ sx: Object.assign({ display: 'flex', gap: '8px', alignItems: 'center' }, (tableMode === 'sheet' && { height: '18px' })) }, { children: [_jsx(GeographyIcon, { geographyVariant: geographyVariant, isTextShown: isTextShown, countryCode: deviceCountry }), _jsx(DeviceIcon, { type: deviceType, isTextShown: isTextShown, tableMode: tableMode })] })));
 };

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

@@ -1,2 +1,2 @@
 import { IssuerIconProps } from './type';
-export default function IssuerIcon({ countryCode, isTextShown, cardNumber, bankName }: IssuerIconProps): import("react/jsx-runtime").JSX.Element;
+export default function IssuerIcon({ countryCode, isTextShown, cardNumber, bankName, tableMode }: IssuerIconProps): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/IssuerIcon/IssuerIcon.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GeographyIcon } from '../GeographyIcon/GeographyIcon';
 import { IssuerIconContainer, CardNumber } from './style';
 import Tooltip from '../../Tooltip';
-export default function IssuerIcon({ countryCode, isTextShown, cardNumber, bankName }) {
+export default function IssuerIcon({ countryCode, isTextShown, cardNumber, bankName, tableMode }) {
     const firstFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(0, 4);
     const lastFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(-4);
-    return (_jsxs(IssuerIconContainer, { children: [countryCode && _jsx(GeographyIcon, { countryCode: countryCode, isTextShown: isTextShown }), _jsx(Tooltip, Object.assign({ title: bankName }, { children: _jsx(CardNumber, { children: `${firstFourDigits || ''} ${lastFourDigits || ''}` }) }))] }));
+    return (_jsxs(IssuerIconContainer, Object.assign({ tableMode: tableMode }, { children: [countryCode && _jsx(GeographyIcon, { countryCode: countryCode, isTextShown: isTextShown }), _jsx(Tooltip, Object.assign({ title: bankName }, { children: _jsx(CardNumber, { children: `${firstFourDigits || ''} ${lastFourDigits || ''}` }) }))] })));
 }

package/build/components/StatusIcons/IssuerIcon/style.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
+import { TableMode } from '../../../types/index.js';
 export declare const IssuerIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    tableMode?: TableMode | undefined;
+}, {}, {}>;
 export declare const CardNumber: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/StatusIcons/IssuerIcon/style.js

@@ -1,9 +1,8 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-export const IssuerIconContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(0.5),
-}));
+export const IssuerIconContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ theme, tableMode }) => (Object.assign(Object.assign({ display: 'flex', gap: theme.spacing(0.5) }, (tableMode === 'sheet' && { height: '18px' })), { alignItems: 'center' })));
 export const CardNumber = styled('span')(({ theme }) => ({
     fontSize: '10px',
     fontWeight: 500,

package/build/components/StatusIcons/IssuerIcon/type.d.ts

@@ -1,6 +1,8 @@
+import { TableMode } from '../../../types/index.js';
 export type IssuerIconProps = {
     countryCode?: string;
     isTextShown?: boolean;
     cardNumber?: string;
     bankName?: string;
+    tableMode?: TableMode;
 };

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

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

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

@@ -4,9 +4,14 @@ import { useTranslation } from 'react-i18next';
 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 { payoutStatusIcons, payoutStatusStyles } from '../../TableCells/CustomCells/StatusCell/constant';
+import { StatusChip } from '../../index.js';
+export const PayoutIcon = ({ payoutStatus = 'PENDING', tableMode, isTextShown, payoutTooltip, iconStyles }) => {
     const { t } = useTranslation();
+    const payoutStatusStyle = payoutStatusStyles[payoutStatus];
+    if (tableMode === 'sheet') {
+        return _jsx(StatusChip, Object.assign({ sx: Object.assign({}, payoutStatusStyle) }, { children: t(camelCase(payoutStatus)) }));
+    }
     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 })) })));
 };

package/build/components/TableCells/CustomCells/ActionCell/ActionCell.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ActionCellProps } from '../type';
+import { TableMode } from '../../../../types/index.js';
 type Props = Readonly<ActionCellProps> & {
     onJsonViewClick?: () => void;
+    tableMode?: TableMode;
 };
-declare function ActionCell({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+declare function ActionCell({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, tableMode, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ActionCell>;
 export default _default;

package/build/components/TableCells/CustomCells/ActionCell/ActionCell.js

@@ -24,14 +24,15 @@ import { useActionCell } from './hooks/useActionCell';
 import { ActionCellContainer, ActionIcon, ActionsIconContainer } from './style';
 import { IDButton } from '../IDButton';
 import { BadgeWrapper, IdButtonContainer, TextLabel, TransparentButton } from '../style';
+import SheetViewIDButton from '../SheetViewIDButton/SheetViewIDButton';
 function ActionCell(_a) {
     var _b, _c;
-    var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick"]);
+    var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, tableMode } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "tableMode"]);
     const { t } = useTranslation();
     const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, } = useActionCell({ actions, isDropdownShown, onCloseDropdown });
     return (_jsx(TableCell, Object.assign({}, props, { sx: {
             overflow: 'visible',
-        } }, { children: _jsxs(ActionCellContainer, Object.assign({ "data-testid": "ActionCell_ActionCellContainer" }, { children: [flag && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "ActionCell_FlagLabel", sx: {
+        } }, { children: _jsxs(ActionCellContainer, Object.assign({ "data-testid": "ActionCell_ActionCellContainer", tableMode: tableMode }, { children: [flag && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "ActionCell_FlagLabel", sx: {
                                 textAlign: 'left',
                                 justifyContent: 'flex-start',
                             } }, { children: flagTooltip })) }))) : (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsxs(BadgeWrapper, Object.assign({ "data-testid": "ActionCell_FlagBadge", sx: {
@@ -71,12 +72,12 @@ function ActionCell(_a) {
                                             },
                                             opacity: 1,
                                         },
-                                    } }, { children: _jsxs(StyledBadge, Object.assign({ compact: true, variant: colorToVariant[(_c = flags[flag]) === null || _c === void 0 ? void 0 : _c.color] || BadgeVariants.ORANGE, "data-testid": "ActionCell_StyledBadge" }, { children: [flagsCount, "x"] })) })))] })) }))) })), showIdButton && _jsx(IDButton, { rowId: rowId || row.id }), _jsxs("div", Object.assign({ "data-testid": "ActionCell_IconsContainer", style: {
+                                    } }, { children: _jsxs(StyledBadge, Object.assign({ compact: true, variant: colorToVariant[(_c = flags[flag]) === null || _c === void 0 ? void 0 : _c.color] || BadgeVariants.ORANGE, "data-testid": "ActionCell_StyledBadge" }, { children: [flagsCount, "x"] })) })))] })) }))) })), showIdButton ? (tableMode === 'sheet' ? (_jsx(SheetViewIDButton, { rowId: rowId || row.id })) : (_jsx(IDButton, { rowId: rowId || row.id }))) : null, _jsxs("div", Object.assign({ "data-testid": "ActionCell_IconsContainer", style: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         gap: '5px',
-                    } }, { children: [showJsonViewer && (_jsx(_Fragment, { children: _jsx(TransparentButton, Object.assign({ onClick: onJsonViewClick, type: "button", "data-testid": "ActionCell_TransparentButton" }, { children: _jsx(Tooltip, Object.assign({ title: t('jsonViewer') }, { children: _jsx(IdButtonContainer, Object.assign({ "data-testid": "ActionCell_IdButtonContainer" }, { children: _jsx(motion.img, { src: jsonBlackIcon, alt: "icon" }, "id-icon") })) })) })) })), _jsxs(ActionsIconContainer, Object.assign({ id: "styled-popover", selected: !!dropdownAction || open, "data-testid": "ActionCell_ActionsIconContainer", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
+                    } }, { children: [showJsonViewer && (_jsx(_Fragment, { children: _jsx(TransparentButton, Object.assign({ onClick: onJsonViewClick, type: "button", "data-testid": "ActionCell_TransparentButton" }, { children: _jsx(Tooltip, Object.assign({ title: t('jsonViewer') }, { children: _jsx(IdButtonContainer, Object.assign({ tableMode: tableMode, "data-testid": "ActionCell_IdButtonContainer" }, { children: tableMode === 'sheet' ? (_jsx("span", Object.assign({ style: { fontSize: '11px', fontWeight: 400 } }, { children: "View API" }))) : (_jsx(motion.img, { src: jsonBlackIcon, alt: "icon" }, "id-icon")) })) })) })) })), _jsxs(ActionsIconContainer, Object.assign({ id: "styled-popover", selected: !!dropdownAction || open, "data-testid": "ActionCell_ActionsIconContainer", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
                                 pointerEvents: 'none',
                             })) }, { children: [_jsx(TransparentButton, Object.assign({ onClick: handleClick, "data-testid": "ActionCell_ActionsIconContainer_TransparentButton", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
                                         pointerEvents: 'none',

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+import { TableMode } from '../../../../types/index.js';
+export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    tableMode?: TableMode | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const ActionsIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     selected: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableCells/CustomCells/ActionCell/style.js

@@ -1,12 +1,14 @@
 import { styled } from '@mui/material/styles';
 import { motion } from 'framer-motion';
-export const ActionCellContainer = styled('section')(({ theme }) => ({
+export const ActionCellContainer = styled('section', {
+    shouldForwardProp: (props) => props !== 'tableMode',
+})(({ theme, tableMode }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     textAlign: 'center',
     borderRadius: '50%',
-    gap: theme.spacing(1),
+    gap: tableMode === 'sheet' ? '4px' : theme.spacing(1),
     overflow: 'visible',
 }));
 export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', '&:hover': {

package/build/components/TableCells/CustomCells/AmountCell/AmountCell.d.ts

@@ -1,3 +1,3 @@
 import { AmountCellProps } from '../type';
-declare function AmountCell({ conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, ...props }: AmountCellProps): import("react/jsx-runtime").JSX.Element;
+declare function AmountCell({ conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode, ...props }: AmountCellProps): import("react/jsx-runtime").JSX.Element;
 export default AmountCell;

package/build/components/TableCells/CustomCells/AmountCell/AmountCell.js

@@ -18,9 +18,9 @@ import { formatAmountWithCurrency } from '../../../../utils/index.js';
 import { AmountCellContainer, ConversionBadge, CurrencySpan, DecimalSpan, FlagContainer } from './style';
 import { FlagIcon } from '../style';
 function AmountCell(_a) {
-    var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown"]);
+    var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown", "tableMode"]);
     const icon = currency && _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: "customer icon" });
     const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currency);
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionType && _jsx(ConversionBadge, Object.assign({ className: "conversion-type" }, { children: conversionType })) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencySpan, { children: integerAmount && decimalAmount && amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, ".", _jsx(DecimalSpan, { children: decimalAmount })] })) : (_jsx("span", { children: "-" })) }) }))] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionType && (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType }))) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencySpan, Object.assign({ tableMode: tableMode }, { children: integerAmount && decimalAmount && amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, ".", _jsx(DecimalSpan, { children: decimalAmount })] })) : (_jsx("span", { children: "-" })) })) }))] }) })));
 }
 export default AmountCell;

package/build/components/TableCells/CustomCells/AmountCell/style.d.ts

@@ -1,8 +1,13 @@
 /// <reference types="react" />
+import { TableMode } from '../../../../types/index.js';
 export declare const AmountCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ConversionBadge: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ConversionBadge: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    tableMode?: TableMode | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FlagContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const CurrencySpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CurrencySpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    tableMode?: TableMode | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const DecimalSpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ConversionTooltip: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ConversionTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {

package/build/components/TableCells/CustomCells/AmountCell/style.js

@@ -5,12 +5,12 @@ export const AmountCellContainer = styled('span')(({ theme }) => ({
     justifyContent: 'flex-end',
     gap: theme.spacing(1),
 }));
-export const ConversionBadge = styled('span')(({ theme }) => ({
+export const ConversionBadge = styled('span')(({ theme, tableMode }) => ({
     backgroundColor: theme.palette.grey[100],
     display: 'block',
     borderRadius: '4px',
     padding: '1.5px 3px',
-    fontSize: '10px',
+    fontSize: tableMode === 'sheet' ? '11px' : '10px',
     lineHeight: '13px',
     textTransform: 'uppercase',
     fontWeight: theme.typography.fontWeightBold,
@@ -21,8 +21,8 @@ export const FlagContainer = styled('span')(() => ({
     height: '12px',
     flexShrink: 0,
 }));
-export const CurrencySpan = styled('span')(({ theme }) => ({
-    fontSize: theme.typography.body2.fontSize,
+export const CurrencySpan = styled('span')(({ theme, tableMode }) => ({
+    fontSize: tableMode === 'sheet' ? '11px' : theme.typography.body2.fontSize,
     lineHeight: '17px',
     fontWeight: '700',
 }));