@tap-payments/os-micro-frontend-shared 0.0.140 → 0.0.142

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/SearchButton/styles.d.ts

@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/StatusChip/style.js

@@ -18,7 +18,7 @@ export const ChipStyled = styled(Box)((_a) => {
         alignItems: 'center',
         justifyContent: 'center',
         height: '18px',
-        padding: padding || `${theme.spacing(0.25)} ${theme.spacing(1.5)}`,
+        padding: padding || `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
         borderRadius: '30px',
         border: `1px solid ${borderColor}`,
         backgroundColor: bgColor,

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

@@ -9,7 +9,7 @@ import { TextLabel } from '../../TableCells/CustomCells/style';
 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: Object.assign({ color: theme.palette.info.dark }, (tableMode === 'sheet' && {
+    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/ChargeStatusIcon/ChargeStatusIcon.d.ts

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

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

@@ -5,17 +5,22 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
 import { unCapturedStatuses } from '../../../constants/index.js';
 import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
-import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
+import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons, sheetViewChipStyles, } from '../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon, StatusIconWrapper, TextLabel } from '../../TableCells/CustomCells/style';
-export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, }) {
+import StatusChip from '../../StatusChip';
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, tableMode, showBadge = true, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
+    const sheetViewStatusStyle = chargeStatus ? sheetViewChipStyles[chargeStatus] : null;
     const theme = useTheme();
     const { t } = useTranslation();
     const chargeTooltipTitle = chargeTooltip && (_jsx(_Fragment, { children: _jsx("div", { children: chargeTooltip }) }));
     const acquirerTooltipTitle = acquirerTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Acquirer" }), _jsx("div", { children: 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 (tableMode === 'sheet') {
+        return _jsx(StatusChip, Object.assign({ sx: Object.assign({}, sheetViewStatusStyle) }, { children: t(camelCase(chargeStatus)) }));
+    }
     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: {
                             background: (unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background) || (captureStatusStyle === null || captureStatusStyle === void 0 ? void 0 : captureStatusStyle.background) || 'transparent',

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

@@ -272,9 +272,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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,10 +18,10 @@ 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 { fullAmount } = formatAmountWithCurrency(amount, currency);
     const [integerAmount, decimalAmount] = fullAmount.toString().split('.');
-    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',
 }));

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

@@ -1,3 +1,3 @@
 import type { CustomerCellProps } from '../type';
-declare function CustomerCell({ customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, ...props }: Readonly<CustomerCellProps>): import("react/jsx-runtime").JSX.Element;
+declare function CustomerCell({ customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, tableMode, ...props }: Readonly<CustomerCellProps>): import("react/jsx-runtime").JSX.Element;
 export default CustomerCell;

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

@@ -20,7 +20,7 @@ import { TableCell } from '../../../TableCells';
 import { AvatarStyled, StarBadgeWrapper } from '../style';
 function CustomerCell(_a) {
     var _b;
-    var { customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id } = _a, props = __rest(_a, ["customerInitiated", "children", "isTimezoneIconShown", "hasCustomerIcon", "customerIcon", "customerName", "hideCustomerInitiatedIcon", "hideTimezoneIcon", "phone", "email", "id"]);
+    var { customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, tableMode } = _a, props = __rest(_a, ["customerInitiated", "children", "isTimezoneIconShown", "hasCustomerIcon", "customerIcon", "customerName", "hideCustomerInitiatedIcon", "hideTimezoneIcon", "phone", "email", "id", "tableMode"]);
     const { t } = useTranslation();
     const customerInitiatedTooltip = customerInitiated === false ? t('merchantInitiated') : '';
     const isArabicCustomerName = isArabic(customerName);
@@ -38,6 +38,9 @@ function CustomerCell(_a) {
             return null;
         return (_jsx("div", Object.assign({ "data-testid": "CustomerCell_customerTooltip" }, { children: tooltipOptions.map(({ name, value }) => value && (_jsx("div", Object.assign({ "data-testid": `CustomerCell_customerTooltip_${name}` }, { children: name === 'Name' ? value : `${name}: ${value}` }), value))) })));
     }, [tooltipOptions]);
+    if (tableMode === 'sheet') {
+        return (_jsx(StyledCustomerName, Object.assign({ tableMode: tableMode, "data-testid": "CustomerCell_StyledCustomerName", "data-is-arabic": isArabicCustomerName }, { children: children })));
+    }
     return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "CustomerCell_TableCell" }, { children: _jsxs(StyledCustomerCell, Object.assign({ "data-testid": "CustomerCell_StyledCustomerCell" }, { children: [customerShownIcon, _jsx(Tooltip, Object.assign({ title: customerTooltip }, { children: _jsx(StyledCustomerName, Object.assign({ "data-testid": "CustomerCell_StyledCustomerName", "data-is-arabic": isArabicCustomerName }, { children: children })) })), !hideTimezoneIcon && (_jsx(StyledCustomerIconContainer, Object.assign({ "data-testid": "CustomerCell_StyledCustomerIconContainer" }, { children: isTimezoneIconShown && _jsx(StyledCustomerIcon, { src: timezoneIcon, "data-testid": "CustomerCell_StyledCustomerIcon" }) }))), !hideCustomerInitiatedIcon && (_jsx(Tooltip, Object.assign({ title: customerInitiatedTooltip }, { children: _jsx(StarBadgeWrapper, Object.assign({ "data-testid": "CustomerCell_StarBadgeWrapper", className: "geography-box", isShown: !!customerInitiatedTooltip }, { children: customerInitiatedTooltip && (_jsx("img", { "data-testid": "CustomerCell_merchantInitiatedIcon", src: merchantInitiatedIcon, alt: "merchant", style: {
                                 width: '16px',
                                 height: '16px',

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
+import { TableMode } from '../../../../types/index.js';
 export declare const StyledCustomerCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledCustomerName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledCustomerName: 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 StyledCustomerIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledCustomerIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

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

@@ -5,13 +5,9 @@ export const StyledCustomerCell = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
-export const StyledCustomerName = styled('span')({
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    maxWidth: '25ch',
-    flex: 1,
-});
+export const StyledCustomerName = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ theme, tableMode }) => (Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '25ch', flex: 1 }, (tableMode === 'sheet' && { fontSize: '11px', color: theme.palette.text.primary }))));
 export const StyledCustomerIconContainer = styled('span')({
     width: '11.6px',
     height: '11.6px',

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

@@ -1,3 +1,3 @@
 import { DateCellProps } from '../type';
-declare function DateCell({ value, format: dateFormat, flagIcon, hasFlag, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
+declare function DateCell({ value, format: dateFormat, flagIcon, hasFlag, tableMode, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
 export default DateCell;

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

@@ -17,12 +17,13 @@ import CountryFlag from '../../../CountryFlag';
 import { formatCellDate, getCountryName } from '../../../../utils/index.js';
 import { DateCellContainer } from './style';
 import { GeographyBox } from '../style';
+import { Box } from '@mui/material';
 function DateCell(_a) {
-    var { value, format: dateFormat, flagIcon, hasFlag } = _a, props = __rest(_a, ["value", "format", "flagIcon", "hasFlag"]);
+    var { value, format: dateFormat, flagIcon, hasFlag, tableMode } = _a, props = __rest(_a, ["value", "format", "flagIcon", "hasFlag", "tableMode"]);
     const icon = flagIcon && (_jsx(Tooltip, Object.assign({ title: getCountryName(flagIcon || '') }, { children: _jsx(CountryFlag, { code: flagIcon }) })));
     const renderedValue = useMemo(() => formatCellDate(value, dateFormat), [value]);
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(DateCellContainer, { children: [hasFlag && (_jsx(GeographyBox, Object.assign({ sx: {
                         visibility: 'visible',
-                    }, className: "geography-box" }, { children: icon }))), renderedValue] }) })));
+                    }, className: "geography-box" }, { children: icon }))), _jsx(Box, Object.assign({ sx: Object.assign({}, (tableMode === 'sheet' && { fontSize: '11px' })) }, { children: renderedValue }))] }) })));
 }
 export default DateCell;

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

@@ -1,3 +1,3 @@
 import { OrderCellProps } from '../type';
-declare function OrderCell({ value, label, items, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
+declare function OrderCell({ value, label, items, tableMode, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
 export default OrderCell;

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

@@ -14,7 +14,7 @@ import { TableCell } from '../../../TableCells';
 import Tooltip from '../../../Tooltip';
 import { MAX_TOOLTIP_ITEM_LENGTH } from './constant';
 function OrderCell(_a) {
-    var { value, label, items } = _a, props = __rest(_a, ["value", "label", "items"]);
+    var { value, label, items, tableMode } = _a, props = __rest(_a, ["value", "label", "items", "tableMode"]);
     const orderDiscriminator = Number.isInteger(value) && Number(value) > 1 && label.charAt(label.length - 1) !== 's' ? `${label}s` : label;
     const orderLabel = `${value} ${orderDiscriminator}`;
     const orderTooltip = (_jsx(_Fragment, { children: items === null || items === void 0 ? void 0 : items.map((item) => {
@@ -22,6 +22,9 @@ function OrderCell(_a) {
             const truncatedItemContent = ((itemContent === null || itemContent === void 0 ? void 0 : itemContent.length) || 0) > MAX_TOOLTIP_ITEM_LENGTH ? `${itemContent === null || itemContent === void 0 ? void 0 : itemContent.slice(0, MAX_TOOLTIP_ITEM_LENGTH)}...` : itemContent;
             return _jsx("div", { children: truncatedItemContent }, item.id);
         }) }));
+    if (tableMode === 'sheet') {
+        return (_jsx(TableCell, Object.assign({ sx: { fontSize: '11px' } }, props, { children: orderLabel })));
+    }
     return (_jsx(Tooltip, Object.assign({ title: (items || []).length > 1 ? orderTooltip : undefined }, { children: _jsx(TableCell, Object.assign({}, props, { children: _jsx("span", { children: orderLabel }) })) })));
 }
 export default OrderCell;

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableCell } from '@mui/material';
 import { TextTableCell } from '..';
-import { TextLabel } from '../style';
+import { StyledTextTableCell, TextLabel } from '../style';
 import Tooltip from '../../../Tooltip';
 import { receiptBillIcon } from '../../../../constants/index.js';
 export const ReceiptCell = ({ receiptId, isTextShown, tableMode, }) => {
     if (tableMode === 'sheet') {
-        return (_jsx(TextTableCell, { children: _jsx("span", { children: receiptId }) }));
+        return (_jsx(StyledTextTableCell, { 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',

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

@@ -17,8 +17,9 @@ import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
 import StatusChip from '../../../StatusChip';
-import { referenceIcons } from './constant';
+import { referenceIcons, REFERENCE_ORDER, REFERENCE_WIDTH_MAP } from './constant';
 import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, referenceSourceAnimation, } from './style';
+import { Box } from '@mui/material';
 function ReferenceCell(_a) {
     var { isTextShown, tableMode } = _a, props = __rest(_a, ["isTextShown", "tableMode"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -36,7 +37,25 @@ function ReferenceCell(_a) {
     }), [props, references, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
     if (tableMode === 'sheet') {
-        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: references.map((reference) => (_jsx(StatusChip, { children: `${startCase(reference)}: ${props[reference]}` }, reference))) }) })));
+        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, Object.assign({ sx: { gap: '4px', display: 'flex', flexWrap: 'nowrap' } }, { children: REFERENCE_ORDER.map((referenceKey) => {
+                    const referenceValue = props[referenceKey];
+                    const hasValue = !!referenceValue;
+                    const widthConfig = REFERENCE_WIDTH_MAP[referenceKey];
+                    return (_jsx(Box, Object.assign({ sx: {
+                            width: widthConfig.width,
+                            minWidth: widthConfig.width,
+                            maxWidth: widthConfig.width,
+                            flexShrink: 0,
+                        } }, { children: hasValue ? (_jsx(StatusChip, Object.assign({ sx: {
+                                maxWidth: '100%',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                boxSizing: 'border-box',
+                                display: 'inline-block',
+                                padding: '0.75px 12px',
+                            } }, { children: `${startCase(referenceKey)}: ${referenceValue}` }))) : null }), referenceKey));
+                }) })) })));
     }
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,

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

@@ -4,3 +4,8 @@ export declare const referenceIcons: {
     payment: string;
     order: string;
 };
+export type ReferenceFields = 'order' | 'payment' | 'acquirer' | 'generic' | 'merchant' | 'customer';
+export declare const REFERENCE_ORDER: ReferenceFields[];
+export declare const REFERENCE_WIDTH_MAP: Record<ReferenceFields, {
+    width: string;
+}>;

package/build/components/TableCells/CustomCells/ReferenceCell/constant.js

@@ -5,3 +5,12 @@ export const referenceIcons = {
     payment: transactionIcon,
     order: orderIcon,
 };
+export const REFERENCE_ORDER = ['order', 'payment', 'acquirer', 'generic', 'merchant', 'customer'];
+export const REFERENCE_WIDTH_MAP = {
+    order: { width: '185px' },
+    payment: { width: '205px' },
+    acquirer: { width: '155px' },
+    generic: { width: '166px' },
+    merchant: { width: '140px' },
+    customer: { width: '140px' },
+};

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

@@ -267,6 +267,7 @@ export declare const ReferenceSourcesContainer: import("@emotion/styled").Styled
 }, {}, {}>;
 export declare const ReferenceTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ReferenceTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReferenceEmptyPlaceholder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const referenceSourceAnimation: (index: number, shadow: string, xDelta?: number) => {
     start: {
         x: number;

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

@@ -34,6 +34,9 @@ export const ReferenceTextWrapper = styled('div')(() => ({
     justifyContent: 'center',
     paddingInline: '4px',
 }));
+export const ReferenceEmptyPlaceholder = styled('div')(() => ({
+    height: '18px',
+}));
 export const referenceSourceAnimation = (index, shadow, xDelta) => ({
     start: {
         x: index * 6,

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

@@ -8,7 +8,7 @@ export const StyledSourceCell = styled('span')(({ theme }) => ({
 }));
 export const StyledSourceImage = styled('img')(() => ({
     maxWidth: '36px',
-    maxHeight: '16px',
+    maxHeight: '24px',
 }));
 export const SalesChannelsContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
     display: 'flex',

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

@@ -21,7 +21,7 @@ function SheetViewIDButton({ rowId }) {
             };
         }
     };
-    return (_jsx(Tooltip, Object.assign({ title: t('copy') }, { children: _jsxs(Button, Object.assign({ onClick: handleCopyRowId }, { children: [_jsx(RowId, Object.assign({ style: { visibility: showCopy ? 'hidden' : 'visible' } }, { children: rowId })), showCopy && (_jsx(Box, Object.assign({ sx: {
+    return (_jsx(Tooltip, Object.assign({ title: t('copy') }, { children: _jsxs(Button, Object.assign({ sx: { minWidth: '213px' }, onClick: handleCopyRowId }, { children: [_jsx(RowId, Object.assign({ style: { visibility: showCopy ? 'hidden' : 'visible' } }, { children: rowId })), showCopy && (_jsx(Box, Object.assign({ sx: {
                         position: 'absolute',
                         top: 0,
                         left: 0,

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { TableCell } from '../../../TableCells';
-import { StatusContainer, StatusWrapper, StatusIcon } from './style';
+import { StatusContainer, StatusWrapper, StatusIcon, SheetModeContainer, SheetModeStatusWrapper, SheetModeIconContainer } from './style';
 import { getIconXTranslation } from './utils';
 import CollapsedViewIcon from './CollapsedViewIcon';
 function SourceMergedCell(_a) {
@@ -46,23 +46,7 @@ function SourceMergedCell(_a) {
                 position: 'relative',
                 overflow: 'visible',
                 zIndex: 101,
-            } }, { children: _jsx("div", Object.assign({ style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    height: '18px',
-                } }, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx("div", Object.assign({ "data-testid": `StatusWrapper-${icon.key}`, style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        opacity: 1,
-                        border: '1px solid #F2F2F2',
-                        borderRadius: '24px',
-                        padding: '0px 8px',
-                    } }, { children: _jsx("div", Object.assign({ style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            opacity: 1,
-                        } }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`))) })) })));
+            } }, { children: _jsx(SheetModeContainer, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx(SheetModeStatusWrapper, Object.assign({ "data-testid": `StatusWrapper-${icon.key}` }, { children: _jsx(SheetModeIconContainer, { children: icon.icon }) }), `StatusWrapper-${icon.key}-${index}`))) }) })));
     }
     return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
             position: 'relative',

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

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;
@@ -1617,3 +1617,6 @@ export declare const StatusContainer: import("@emotion/styled").StyledComponent<
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isReversed?: boolean | undefined;
 }, {}, {}>;
+export declare const SheetModeContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SheetModeStatusWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SheetModeIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -74,3 +74,22 @@ export const StatusContainer = styled(motion.div)(({ isReversed }) => ({
     position: 'relative',
     overflow: 'visible',
 }));
+export const SheetModeContainer = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    height: '18px',
+}));
+export const SheetModeStatusWrapper = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    opacity: 1,
+    border: '1px solid #F2F2F2',
+    borderRadius: '24px',
+    padding: '0px 8px',
+}));
+export const SheetModeIconContainer = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    opacity: 1,
+}));

package/build/components/TableCells/CustomCells/StatusCell/constant.d.ts

@@ -13,6 +13,18 @@ export declare const statusIcons: {
     UNKNOWN: string;
     AUTHORIZED: string;
 };
+export declare const sheetViewChipStyles: {
+    ABANDONED: {
+        color: string;
+        background: string;
+        border: string;
+    };
+    CANCELLED: {
+        color: string;
+        background: string;
+        border: string;
+    };
+};
 export declare const unCapturedStatusesStyles: Record<(typeof unCapturedStatuses)[number], {
     gatewayIcon: string;
     acquirerIcon: string;
@@ -38,6 +50,23 @@ export declare const payoutStatusIcons: {
     SETTLED: string;
     PENDING: string;
 };
+export declare const payoutStatusStyles: {
+    PAID_OUT: {
+        color: string;
+        background: string;
+        border: string;
+    };
+    SETTLED: {
+        color: string;
+        background: string;
+        border: string;
+    };
+    PENDING: {
+        color: string;
+        background: string;
+        border: string;
+    };
+};
 export declare const authorizedStatusIcons: {
     AUTHORIZED: string;
 };

package/build/components/TableCells/CustomCells/StatusCell/constant.js

@@ -13,6 +13,18 @@ export const statusIcons = {
     UNKNOWN: unknownIcon,
     AUTHORIZED: authorizedIcon,
 };
+export const sheetViewChipStyles = {
+    ABANDONED: {
+        color: '#FFD600',
+        background: 'transparent',
+        border: '1px solid #FFD60080',
+    },
+    CANCELLED: {
+        color: '#EDC806',
+        background: '#FFD6001A',
+        border: 'none',
+    },
+};
 export const unCapturedStatusesStyles = {
     UNKNOWN: {
         gatewayIcon: gatewayOrangeIcon,
@@ -82,6 +94,23 @@ export const payoutStatusIcons = {
     SETTLED: settledIcon,
     PENDING: settlementInitiatedIcon,
 };
+export const payoutStatusStyles = {
+    PAID_OUT: {
+        color: '#2ACE00',
+        background: '#2ACE001A',
+        border: 'none',
+    },
+    SETTLED: {
+        color: '#2ACE00',
+        background: 'transparent',
+        border: '1px solid #2ACE0066',
+    },
+    PENDING: {
+        color: '#FF7A00',
+        background: '#FF7A000D',
+        border: 'none',
+    },
+};
 export const authorizedStatusIcons = {
     AUTHORIZED: authorizedIcon,
 };

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

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -10,6 +10,7 @@ export interface DateCellProps extends TableCellProps {
     format?: object;
     flagIcon?: string;
     hasFlag?: boolean;
+    tableMode?: TableMode;
 }
 export interface OrderCellProps extends TableCellProps {
     label: string;
@@ -19,6 +20,7 @@ export interface OrderCellProps extends TableCellProps {
         description?: string;
         name?: string;
     }>;
+    tableMode?: TableMode;
 }
 export interface CustomerCellProps extends TableCellProps {
     customerInitiated?: boolean;
@@ -32,6 +34,7 @@ export interface CustomerCellProps extends TableCellProps {
     email?: string;
     phone?: string;
     id?: string;
+    tableMode?: TableMode;
 }
 export interface SourceCellProps extends TableCellProps {
     geographyVariant?: 'G' | 'L' | 'R';
@@ -51,6 +54,7 @@ export interface AmountCellProps extends TableCellProps {
     tooltipLabel?: React.ReactNode;
     amountTooltipLabel?: React.ReactNode;
     isTextShown?: boolean;
+    tableMode?: TableMode;
 }
 export interface DestinationCellProps extends TableCellProps {
     destinationsCount?: number;

package/build/components/VirtualTable/components/TableRowLoading.js

@@ -8,6 +8,7 @@ import { areEqual } from 'react-window';
 const StyledSkeleton = styled(Skeleton)(({ theme }) => ({
     backgroundColor: theme.palette.grey[100],
     borderRadius: '64px',
+    minWidth: '20px',
 }));
 function TableRowLoading({ columns, style, index, animationType }) {
     return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #e3e8ee', '&:hover': {

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

@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/constants/table/cell/chargeTableCellWidth.d.ts

@@ -22,12 +22,12 @@ export declare const chargeTableCellWidth: {
     readonly date: {
         readonly default: "170px";
         readonly text: "170px";
-        readonly sheet: "170px";
+        readonly sheet: "129px";
     };
     readonly reference: {
         readonly default: "95px";
         readonly text: "180px";
-        readonly sheet: "550px";
+        readonly sheet: "985px";
     };
     readonly order: {
         readonly default: "80px";
@@ -42,7 +42,7 @@ export declare const chargeTableCellWidth: {
     readonly source: {
         readonly default: "114px";
         readonly text: "125px";
-        readonly sheet: "410px";
+        readonly sheet: "450px";
     };
     readonly authenticate: {
         readonly default: "55px";
@@ -72,7 +72,7 @@ export declare const chargeTableCellWidth: {
     readonly status: {
         readonly default: "70px";
         readonly text: "300px";
-        readonly sheet: "185px";
+        readonly sheet: "385px";
     };
     readonly merchant: {
         readonly default: "100px";
@@ -107,7 +107,7 @@ export declare const chargeTableCellWidth: {
     readonly metadata: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "235px";
+        readonly sheet: "245px";
     };
     readonly settlement: {
         readonly default: "200px";

package/build/constants/table/cell/chargeTableCellWidth.js

@@ -22,12 +22,12 @@ export const chargeTableCellWidth = {
     date: {
         default: '170px',
         text: '170px',
-        sheet: '170px',
+        sheet: '129px',
     },
     reference: {
         default: '95px',
         text: '180px',
-        sheet: '550px',
+        sheet: '985px',
     },
     order: {
         default: '80px',
@@ -42,7 +42,7 @@ export const chargeTableCellWidth = {
     source: {
         default: '114px',
         text: '125px',
-        sheet: '410px',
+        sheet: '450px',
     },
     authenticate: {
         default: '55px',
@@ -72,7 +72,7 @@ export const chargeTableCellWidth = {
     status: {
         default: '70px',
         text: '300px',
-        sheet: '185px',
+        sheet: '385px',
     },
     merchant: {
         default: '100px',
@@ -107,7 +107,7 @@ export const chargeTableCellWidth = {
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '235px',
+        sheet: '245px',
     },
     settlement: {
         default: '200px',

package/package.json

@@ -1,132 +1,132 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.140",
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^6.14.2",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.0.142",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^6.14.2",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}