@tap-payments/os-micro-frontend-shared 0.0.128 → 0.0.129

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.25)} ${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: 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/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/DestinationCell/DestinationCell.d.ts

@@ -1,3 +1,3 @@
 import { DestinationCellProps } from '../type';
-declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
+declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default DestinationCell;

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

@@ -19,7 +19,7 @@ import { TextLabel } from '../style';
 import { CurrencyIcon } from '../../../index.js';
 function DestinationCell(_a) {
     var _b, _c, _d, _e, _f;
-    var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection"]);
+    var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode"]);
     if (!destinationsCount || hidden) {
         return null;
     }
@@ -29,10 +29,11 @@ function DestinationCell(_a) {
     const textView = (_jsx(TextLabel, Object.assign({ sx: {
             textAlign: 'left',
             justifyContent: 'flex-start',
+            height: tableMode === 'sheet' ? '18px' : 'auto',
         } }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id, " - ", _jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
     return (_jsx(TableCell, Object.assign({ sx: {
             width: 'fit-content',
             overflow: 'visible',
-        } }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: !isTextShown ? (_jsxs(StyledDestinationCell, { children: [_jsx(StyledDestinationIcon, { src: destinationSolidIcon, pointLeft: iconDirection === 'left' }), destinationsCount > 1 && (_jsx(DestinationCellContainer, Object.assign({ destinationsCount: 1 }, { children: _jsx(DestinationCount, { children: destinationsCount }) })))] })) : (textView) })) })));
+        } }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: !isTextShown ? (_jsxs(StyledDestinationCell, Object.assign({ tableMode: tableMode }, { children: [_jsx(StyledDestinationIcon, { src: destinationSolidIcon, pointLeft: iconDirection === 'left' }), destinationsCount > 1 && (_jsx(DestinationCellContainer, Object.assign({ destinationsCount: 1 }, { children: _jsx(DestinationCount, { children: destinationsCount }) })))] }))) : (textView) })) })));
 }
 export default DestinationCell;

package/build/components/TableCells/CustomCells/DestinationCell/styled.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import { TableMode } from '../../../../types/index.js';
 export declare const DestinationCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     destinationsCount: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const DestinationCount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledDestinationCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledDestinationCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    tableMode?: TableMode | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledDestinationImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     order: number;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/TableCells/CustomCells/DestinationCell/styled.js

@@ -19,7 +19,9 @@ export const DestinationCount = styled('span')(({ theme }) => ({
     justifyContent: 'center',
     backgroundColor: `${theme.palette.info.dark}1A`,
 }));
-export const StyledDestinationCell = styled('span')(({ theme }) => ({
+export const StyledDestinationCell = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ theme, tableMode }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -28,7 +30,7 @@ export const StyledDestinationCell = styled('span')(({ theme }) => ({
     border: `1px solid ${theme.palette.divider}`,
     paddingInline: theme.spacing(1),
     borderRadius: '56px',
-    height: '24px',
+    height: tableMode === 'sheet' ? '18px' : '24px',
 }));
 export const StyledDestinationImage = styled('img')(({ theme, order }) => ({
     borderRadius: '50%',

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

@@ -1,4 +1,5 @@
-export declare const ReceiptCell: ({ receiptId, isTextShown }: {
+export declare const ReceiptCell: ({ receiptId, isTextShown, tableMode, }: {
     receiptId: string;
     isTextShown?: boolean | undefined;
+    tableMode?: "text" | "sheet" | "default" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,10 @@ import { TextTableCell } from '..';
 import { TextLabel } from '../style';
 import Tooltip from '../../../Tooltip';
 import { receiptBillIcon } from '../../../../constants/index.js';
-export const ReceiptCell = ({ receiptId, isTextShown }) => {
+export const ReceiptCell = ({ receiptId, isTextShown, tableMode, }) => {
+    if (tableMode === 'sheet') {
+        return (_jsx(TextTableCell, { children: _jsx("span", { children: receiptId }) }));
+    }
     return isTextShown ? (_jsx(TextTableCell, { children: _jsx("span", { children: receiptId }) })) : (_jsx(TableCell, Object.assign({ component: "div" }, { children: _jsx(Tooltip, Object.assign({ title: `Receipt - ${receiptId}` }, { children: _jsx(TextLabel, Object.assign({ sx: {
                     padding: '3px 8px',
                     maxWidth: '50px',

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

@@ -1,3 +1,3 @@
 import type { ReferenceCellProps } from './type';
-declare function ReferenceCell({ isTextShown, ...props }: ReferenceCellProps): import("react/jsx-runtime").JSX.Element;
+declare function ReferenceCell({ isTextShown, tableMode, ...props }: ReferenceCellProps): import("react/jsx-runtime").JSX.Element;
 export default ReferenceCell;