@tap-payments/os-micro-frontend-shared 0.1.85 → 0.1.87-test.2-test.3

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/StatusIcons/AuthorizationAutoIcons/CaptureAutoIcon.d.ts

@@ -1,3 +1,3 @@
 import { BalanceCellProps } from './type';
-declare function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element;
+declare function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, isSheetViewShown, selectionProps, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element;
 export default CaptureAutoIcon;

package/build/components/StatusIcons/AuthorizationAutoIcons/CaptureAutoIcon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
@@ -8,10 +8,11 @@ import { CaptureTextLabel } from '../../TableCells/CustomCells/style';
 import Tooltip from '../../Tooltip';
 import { capturedAuthorizeIcon, capturedIcon } from '../../../constants/index.js';
 import { formatAmount, formatAmountWithCurrency } from '../../../utils/index.js';
+import StatusChipWithCopy from '../../StatusChipWithCopy';
 import { autoIcons } from './constant';
 import { AutoIconWrapper, BalanceCellContainer, PartialIcon, PercentageContainer, PiePercentage, AutoIconImage, FullyCapturedWrapper } from './style';
 import { formatPercentage } from './utils';
-function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }) {
+function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, isSheetViewShown, selectionProps = {}, }) {
     var _a, _b;
     const isFullyUsed = Number(capturePercentage) + Number(voidPercentage) === 100 || remainingAmount <= 0;
     const theme = useTheme();
@@ -54,7 +55,15 @@ function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, auto
                         },
                     } }, { children: [_jsxs(PercentageContainer, Object.assign({ isCapture: true, percentage: capturePercentage }, { children: [capturePercentage, "% ", _jsx(PiePercentage, { isCapture: true, percentage: formatPercentage(capturePercentage) })] })), captureCount > 1 && (_jsxs(StyledBadge, Object.assign({ compact: true, variant: BadgeVariants.DARK }, { children: [captureCount, "x"] })))] }))] })) }))) : autoType === 'CAPTURED' && !isFullyUsed ? (_jsx(Tooltip, Object.assign({ title: generateAutoTooltip('Capture') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: (_a = autoIcons.CAPTURED) === null || _a === void 0 ? void 0 : _a.icon, alt: "auto" }) }) }))) : (_jsx(Tooltip, Object.assign({ title: generateAutoTooltip('Capture') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: (_b = autoIcons.CAPTURED) === null || _b === void 0 ? void 0 : _b.icon, alt: "auto" }) }) })));
     const captureStatus = capturePercentage === 100 ? (_jsx(Tooltip, Object.assign({ title: t('captured') }, { children: _jsx(FullyCapturedWrapper, { children: _jsx(AutoIconImage, { src: capturedIcon, alt: "captured" }) }) }))) : (autoCaptureStatus);
-    const captureContent = isTextShown && captureStatus ? _jsx(CaptureTextLabel, { children: t('captured') }) : captureStatus;
+    const captureContent = useMemo(() => {
+        if (isSheetViewShown && captureStatus) {
+            return (_jsx(StatusChipWithCopy, Object.assign({ chipIndex: 4, copyText: t('captured'), selectionProps: selectionProps }, { children: t('captured') })));
+        }
+        if (isTextShown && captureStatus) {
+            return _jsx(CaptureTextLabel, { children: t('captured') });
+        }
+        return captureStatus;
+    }, [isTextShown, captureStatus, isSheetViewShown, selectionProps]);
     return (captureContent && (_jsx("div", Object.assign({ style: {
             zIndex: 12,
         } }, { children: captureContent }))));

package/build/components/StatusIcons/AuthorizationAutoIcons/VoidAutoIcon.d.ts

@@ -1,3 +1,3 @@
 import { BalanceCellProps } from './type';
-declare function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element | null;
+declare function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, isSheetViewShown, selectionProps, remainingAmount, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default VoidAutoIcon;

package/build/components/StatusIcons/AuthorizationAutoIcons/VoidAutoIcon.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import StyledBadge, { BadgeVariants } from '../../CountBadge';
 import { VoidTextLabel } from '../../TableCells/CustomCells/style';
+import StatusChipWithCopy from '../../StatusChipWithCopy';
 import Tooltip from '../../Tooltip';
 import { voidedIcon } from '../../../constants/index.js';
 import { formatAmount, formatAmountWithCurrency } from '../../../utils/index.js';
 import { autoIcons } from './constant';
 import { AutoIconWrapper, BalanceCellContainer, PercentageContainer, PiePercentage, AutoIconImage } from './style';
 import { formatPercentage } from './utils';
-function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }) {
+function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, isSheetViewShown, selectionProps = {}, remainingAmount, }) {
     var _a;
     const isFullyUsed = Number(capturePercentage) + Number(voidPercentage) === 100 || remainingAmount <= 0;
     const theme = useTheme();
@@ -59,7 +60,15 @@ function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType,
                         },
                     } }, { children: _jsxs(StyledBadge, Object.assign({ compact: true, variant: BadgeVariants.NEUTRAL }, { children: [voidCount, "x"] })) })))] })) }))) : autoType === 'VOID' && !isFullyUsed ? (_jsx(Tooltip, Object.assign({ title: generateAutoTooltip('Void') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: (_a = autoIcons.VOID) === null || _a === void 0 ? void 0 : _a.icon, alt: "auto" }) }) }))) : null;
     const voidStatus = voidPercentage === 100 ? (_jsx(Tooltip, Object.assign({ title: t('void') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: voidedIcon, alt: "void" }) }) }))) : (autoVoidStatus);
-    const voidContent = isTextShown && voidStatus ? _jsx(VoidTextLabel, { children: t('void') }) : voidStatus;
-    return voidContent ? _jsx("div", Object.assign({ style: { zIndex: 11 } }, { children: voidContent })) : null;
+    const voidContent = useMemo(() => {
+        if (isSheetViewShown && voidStatus) {
+            return (_jsx(StatusChipWithCopy, Object.assign({ chipIndex: 5, copyText: t('void'), selectionProps: selectionProps }, { children: t('void') })));
+        }
+        if (isTextShown && voidStatus) {
+            return _jsx(VoidTextLabel, { children: t('void') });
+        }
+        return voidStatus;
+    }, [isTextShown, voidStatus, isSheetViewShown, selectionProps]);
+    return voidContent ? _jsx("div", Object.assign({ style: Object.assign({}, (!isSheetViewShown && { zIndex: 11 })) }, { children: voidContent })) : null;
 }
 export default VoidAutoIcon;

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

@@ -1,4 +1,5 @@
 import { TableCellProps } from '@mui/material';
+import { SelectionProps } from '../../../types/index.js';
 export interface BalanceCellProps extends TableCellProps {
     autoType?: 'VOID' | 'CAPTURED';
     capturePercentage: number;
@@ -11,4 +12,6 @@ export interface BalanceCellProps extends TableCellProps {
     voidCount: number;
     isTextShown?: boolean;
     remainingAmount: number;
+    isSheetViewShown?: boolean;
+    selectionProps?: SelectionProps;
 }

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

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

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

@@ -4,10 +4,11 @@ import camelCase from 'lodash/camelCase';
 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 StatusChipWithCopy from '../../StatusChipWithCopy';
 import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } 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 { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
     const theme = useTheme();
@@ -16,6 +17,9 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
     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 (isSheetViewShown) {
+        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: 0, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
+    }
     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/TableCells/CustomCells/AmountCell/AmountCell.d.ts

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

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

@@ -10,17 +10,29 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { TableCell } from '../../../TableCells';
 import Tooltip from '../../../Tooltip';
-import { CurrencyIcon } from '../../../index.js';
+import { CurrencyIcon, StatusChipWithCopy } from '../../../index.js';
 import { getCurrenciesIcon } from '../../../../constants/index.js';
 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, tableMode } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown", "tableMode"]);
+    var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode, selectionProps = {}, chipIndex = 0 } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown", "tableMode", "selectionProps", "chipIndex"]);
     const icon = currency && _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: "customer icon" });
     const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currency);
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionType && (_jsx(ConversionBadge, Object.assign({ 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: amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, decimalAmount && (_jsxs(_Fragment, { children: [".", _jsx(DecimalSpan, { children: decimalAmount })] }))] })) : (_jsx("span", { children: "-" })) })) }))] }) })));
+    const conversionTypeLabel = useMemo(() => {
+        if (!conversionType)
+            return _jsx(_Fragment, {});
+        return (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType })));
+    }, [conversionType, tableMode]);
+    const currencyInfo = useMemo(() => {
+        return (_jsx(CurrencySpan, Object.assign({ tableMode: tableMode }, { children: amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, decimalAmount && (_jsxs(_Fragment, { children: [".", _jsx(DecimalSpan, { children: decimalAmount })] }))] })) : (_jsx("span", { children: "-" })) })));
+    }, [amount, tableMode, currency, integerAmount, decimalAmount]);
+    if (tableMode === 'sheet') {
+        return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: amount ? `${integerAmount}.${decimalAmount}` : '-', selectionProps: selectionProps }, { children: [conversionTypeLabel, currencyInfo] })));
+    }
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionTypeLabel })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: currencyInfo }))] }) })));
 }
 export default AmountCell;

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

@@ -1,3 +1,3 @@
 import { BalanceCellProps } from './type';
-declare function BalanceCell({ percentage, days, remainingAmount, currency, isTextShown, ...props }: BalanceCellProps): import("react/jsx-runtime").JSX.Element;
+declare function BalanceCell({ percentage, days, remainingAmount, currency, isTextShown, isSheetViewShown, selectionProps, ...props }: BalanceCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default BalanceCell;

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

@@ -15,19 +15,25 @@ import { useTheme } from '@mui/material/styles';
 import { motion } from 'framer-motion';
 import Tooltip from '../../../Tooltip';
 import { TableCell } from '../../../TableCells';
-import { CurrencyIcon } from '../../../index.js';
+import { CurrencyIcon, StatusChipWithCopy } from '../../../index.js';
 import { formatAmountWithCurrency } from '../../../../utils/index.js';
 import { BalanceCellContainer, PercentageContainer } from './style';
 import { formatPercentage } from './utils';
 import { TextLabel, PiePercentage } from '../style';
 function BalanceCell(_a) {
-    var { percentage, days, remainingAmount, currency, isTextShown } = _a, props = __rest(_a, ["percentage", "days", "remainingAmount", "currency", "isTextShown"]);
+    var { percentage, days, remainingAmount, currency, isTextShown, isSheetViewShown, selectionProps = {} } = _a, props = __rest(_a, ["percentage", "days", "remainingAmount", "currency", "isTextShown", "isSheetViewShown", "selectionProps"]);
     const theme = useTheme();
+    const currencyIcon = _jsx(CurrencyIcon, { currency: currency });
+    const { integerAmount, decimalAmount } = formatAmountWithCurrency(remainingAmount, currency);
+    const amount = `${integerAmount}.${decimalAmount}`;
     const generatedTooltip = useMemo(() => {
-        const { integerAmount, decimalAmount } = formatAmountWithCurrency(remainingAmount, currency);
-        const currencyIcon = _jsx(CurrencyIcon, { currency: currency });
-        return (_jsxs(_Fragment, { children: ["Remaining Authorized Balance - ", currencyIcon, " ", integerAmount, ".", decimalAmount] }));
+        return (_jsxs(_Fragment, { children: ["Remaining Authorized Balance - ", currencyIcon, " ", amount] }));
     }, [remainingAmount, currency]);
+    if (isSheetViewShown) {
+        if (percentage === 0)
+            return null;
+        return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: 0, copyText: `${integerAmount}.${decimalAmount}`, selectionProps: selectionProps }, { children: [percentage, "% | Remaining balance - ", currencyIcon, " ", amount] })));
+    }
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx("div", Object.assign({ style: {
                 display: 'flex',
                 alignItems: 'center',

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

@@ -1,8 +1,11 @@
 import { TableCellProps } from '@mui/material';
+import { SelectionProps } from '../../../../types/index.js';
 export interface BalanceCellProps extends TableCellProps {
     percentage: number;
     days?: number;
     remainingAmount?: number;
     currency?: string;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    selectionProps?: SelectionProps;
 }

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

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
+import { openNewTab } from '../../../../utils/index.js';
 import { ChannelTextLabel, ChannelTextWrapper, salesChannelAnimation, SalesChannelsContainer, StyledSourceCell, StyledSourceImage } from './style';
 function SalesChannelCell(_a) {
     var _b;
@@ -25,7 +26,8 @@ function SalesChannelCell(_a) {
                     width: isTextShown ? '70px' : '36px',
                     cursor: 'pointer',
                 }, onClick: () => {
-                    window.open(channel.address, '_blank');
+                    if (channel === null || channel === void 0 ? void 0 : channel.address)
+                        openNewTab(channel.address);
                 } }, { children: isTextShown ? (_jsx(ChannelTextWrapper, { children: _jsx(ChannelTextLabel, { children: channelCode }) })) : (_jsx(StyledSourceImage, { src: channel.logo, alt: channelCode })) })) }), `${channel}-${index}`));
     });
     const salesChannelsCount = (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) || 0;

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

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableCell } from '../../../TableCells';
-import StatusChip from '../../../StatusChip';
 import { StatusIcon, StatusContainer, StatusWrapper } from './style';
 import { getStatusesFilteredObject } from './utils';
 function StatusCell(_a) {
@@ -19,7 +18,7 @@ function StatusCell(_a) {
     const statusesFilteredObject = statuses ? getStatusesFilteredObject(statuses) : {};
     const statusesList = Object.values(statusesFilteredObject).filter(Boolean);
     if (tableMode === 'sheet') {
-        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StatusContainer, { children: statusesList.map((status, index) => (_jsx(StatusChip, Object.assign({ borderColor: "transparent", padding: '0px' }, { children: status }), index))) }) })));
+        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StatusContainer, Object.assign({ sx: { paddingRight: '30px' } }, { children: statusesList.map((status) => status) })) })));
     }
     const xGapValue = isTextShown ? xGap || 120 : 40;
     const centerIconIndex = centerIconKey ? Object.entries(statusesFilteredObject).findIndex(([key]) => key === centerIconKey) : 0;

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

@@ -61,6 +61,8 @@ export interface AmountCellProps extends TableCellProps {
     amountTooltipLabel?: React.ReactNode;
     isTextShown?: boolean;
     tableMode?: TableMode;
+    selectionProps?: SelectionProps;
+    chipIndex?: number;
 }
 export interface DestinationCellProps extends TableCellProps {
     destinationsCount?: number;

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

@@ -7,7 +7,7 @@ export declare const authorizationTableCellWidth: {
     readonly id: {
         readonly default: "225px";
         readonly text: "225px";
-        readonly sheet: "225px";
+        readonly sheet: "250x";
     };
     readonly auto: {
         readonly default: "70px";
@@ -17,7 +17,7 @@ export declare const authorizationTableCellWidth: {
     readonly balance: {
         readonly default: "60px";
         readonly text: "60px";
-        readonly sheet: "60px";
+        readonly sheet: "250px";
     };
     readonly product: {
         readonly default: "85px";
@@ -57,7 +57,7 @@ export declare const authorizationTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "170px";
     };
     readonly amount: {
         readonly default: "170px";
@@ -77,12 +77,12 @@ export declare const authorizationTableCellWidth: {
     readonly status: {
         readonly default: "77px";
         readonly text: "100px";
-        readonly sheet: "100px";
+        readonly sheet: "300px";
     };
     readonly merchant: {
         readonly default: "110px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "215px";
     };
     readonly charge: {
         readonly default: "150px";
@@ -112,7 +112,7 @@ export declare const authorizationTableCellWidth: {
     readonly metadata: {
         readonly default: "185px";
         readonly text: "185px";
-        readonly sheet: "185px";
+        readonly sheet: "250px";
     };
     readonly settlement: {
         readonly default: "200px";
@@ -152,16 +152,66 @@ export declare const authorizationTableCellWidth: {
     readonly device: {
         readonly default: "60px";
         readonly text: "190px";
-        readonly sheet: "190px";
+        readonly sheet: "235px";
     };
     readonly card_no: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "120px";
+        readonly sheet: "140px";
     };
     readonly brand: {
         readonly default: "116px";
         readonly text: "116px";
         readonly sheet: "116px";
     };
+    readonly payment_initiated: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "150px";
+    };
+    readonly payment_issuers: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "350px";
+    };
+    readonly card_number: {
+        readonly default: "120px";
+        readonly text: "120px";
+        readonly sheet: "155px";
+    };
+    readonly payment_type: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "120px";
+    };
+    readonly payment_method: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "145px";
+    };
+    readonly payment_scheme: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "145px";
+    };
+    readonly auth_status: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "165px";
+    };
+    readonly auth_type: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "155px";
+    };
+    readonly eci: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "100px";
+    };
+    readonly acquirer_response: {
+        readonly default: "70px";
+        readonly text: "70px";
+        readonly sheet: "225px";
+    };
 };

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

@@ -7,7 +7,7 @@ export const authorizationTableCellWidth = {
     id: {
         default: '225px',
         text: '225px',
-        sheet: '225px',
+        sheet: '250x',
     },
     auto: {
         default: '70px',
@@ -17,7 +17,7 @@ export const authorizationTableCellWidth = {
     balance: {
         default: '60px',
         text: '60px',
-        sheet: '60px',
+        sheet: '250px',
     },
     product: {
         default: '85px',
@@ -57,7 +57,7 @@ export const authorizationTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '150px',
+        sheet: '170px',
     },
     amount: {
         default: '170px',
@@ -77,12 +77,12 @@ export const authorizationTableCellWidth = {
     status: {
         default: '77px',
         text: '100px',
-        sheet: '100px',
+        sheet: '300px',
     },
     merchant: {
         default: '110px',
         text: '150px',
-        sheet: '150px',
+        sheet: '215px',
     },
     charge: {
         default: '150px',
@@ -112,7 +112,7 @@ export const authorizationTableCellWidth = {
     metadata: {
         default: '185px',
         text: '185px',
-        sheet: '185px',
+        sheet: '250px',
     },
     settlement: {
         default: '200px',
@@ -152,16 +152,66 @@ export const authorizationTableCellWidth = {
     device: {
         default: '60px',
         text: '190px',
-        sheet: '190px',
+        sheet: '235px',
     },
     card_no: {
         default: '120px',
         text: '120px',
-        sheet: '120px',
+        sheet: '140px',
     },
     brand: {
         default: '116px',
         text: '116px',
         sheet: '116px',
     },
+    payment_initiated: {
+        default: '150px',
+        text: '150px',
+        sheet: '150px',
+    },
+    payment_issuers: {
+        default: '150px',
+        text: '150px',
+        sheet: '350px',
+    },
+    card_number: {
+        default: '120px',
+        text: '120px',
+        sheet: '155px',
+    },
+    payment_type: {
+        default: '150px',
+        text: '150px',
+        sheet: '120px',
+    },
+    payment_method: {
+        default: '150px',
+        text: '150px',
+        sheet: '145px',
+    },
+    payment_scheme: {
+        default: '150px',
+        text: '150px',
+        sheet: '145px',
+    },
+    auth_status: {
+        default: '150px',
+        text: '150px',
+        sheet: '165px',
+    },
+    auth_type: {
+        default: '150px',
+        text: '150px',
+        sheet: '155px',
+    },
+    eci: {
+        default: '150px',
+        text: '150px',
+        sheet: '100px',
+    },
+    acquirer_response: {
+        default: '70px',
+        text: '70px',
+        sheet: '225px',
+    },
 };

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

@@ -94,16 +94,6 @@ export declare const refundTableCellWidth: {
         readonly text: "195px";
         readonly sheet: "180px";
     };
-    readonly payouts: {
-        readonly default: "195px";
-        readonly text: "195px";
-        readonly sheet: "300px";
-    };
-    readonly reason: {
-        readonly default: "170px";
-        readonly text: "240px";
-        readonly sheet: "160px";
-    };
     readonly destinations: {
         readonly default: "70px";
         readonly text: "240px";
@@ -192,7 +182,7 @@ export declare const refundTableCellWidth: {
     readonly charge_meta: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "250px";
+        readonly sheet: "100px";
     };
     readonly brand: {
         readonly default: "116px";

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

@@ -94,16 +94,6 @@ export const refundTableCellWidth = {
         text: '195px',
         sheet: '180px',
     },
-    payouts: {
-        default: '195px',
-        text: '195px',
-        sheet: '300px',
-    },
-    reason: {
-        default: '170px',
-        text: '240px',
-        sheet: '160px',
-    },
     destinations: {
         default: '70px',
         text: '240px',
@@ -192,7 +182,7 @@ export const refundTableCellWidth = {
     charge_meta: {
         default: '100px',
         text: '100px',
-        sheet: '250px',
+        sheet: '100px',
     },
     brand: {
         default: '116px',

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

@@ -30,9 +30,9 @@ export declare const terminalsTableCellWidth: {
         readonly sheet: "80px";
     };
     readonly features: {
-        readonly default: "80px";
-        readonly text: "80px";
-        readonly sheet: "80px";
+        readonly default: "100px";
+        readonly text: "100px";
+        readonly sheet: "100px";
     };
     readonly acceptance: {
         readonly default: "80px";

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

@@ -30,9 +30,9 @@ export const terminalsTableCellWidth = {
         sheet: '80px',
     },
     features: {
-        default: '80px',
-        text: '80px',
-        sheet: '80px',
+        default: '100px',
+        text: '100px',
+        sheet: '100px',
     },
     acceptance: {
         default: '80px',

package/build/utils/url.d.ts

@@ -1 +1,2 @@
 export declare const openNewTab: (url: string, target?: string) => void;
+export declare const openUrl: (url: string) => void;

package/build/utils/url.js

@@ -6,3 +6,13 @@ export const openNewTab = (url, target = '_blank') => {
     link.click();
     link.remove();
 };
+export const openUrl = (url) => {
+    const isUrl = /^https?:\/\//i.test(url);
+    if (isUrl) {
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+    else {
+        const newUrl = 'about:blank?' + encodeURIComponent(url);
+        window.open(newUrl, '_blank', 'noopener,noreferrer');
+    }
+};

package/package.json

@@ -1,139 +1,139 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.85",
-  "testVersion": 1,
-  "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:local": "yarn ts:build && yalc publish --push",
-    "push": "npm run ts:build && npm publish --access public",
-    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
-    "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",
-    "color": "^5.0.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-colorful": "^5.6.1",
-    "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-lazy-load-image-component": "^1.6.3",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^7.7.0",
-    "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-lazy-load-image-component": "^1.6.4",
-    "@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.1.87-test.2-test.3",
+  "testVersion": 3,
+  "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:local": "yarn ts:build && yalc publish --push",
+    "push": "npm run ts:build && npm publish --access public",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "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",
+    "color": "^5.0.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-colorful": "^5.6.1",
+    "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-lazy-load-image-component": "^1.6.3",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^7.7.0",
+    "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-lazy-load-image-component": "^1.6.4",
+    "@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/"
+  }
+}