@tap-payments/os-micro-frontend-shared 0.1.96-test.16 → 0.1.96-test.18

package/build/components/StatusChip/StatusChip.js

@@ -15,15 +15,15 @@ import { useTranslation } from 'react-i18next';
 import { AnimatePresence, motion } from 'framer-motion';
 import { copyText as copyTextHandler } from '../../utils/index.js';
 import { copyIcon, greenCheckIcon } from '../../constants/index.js';
-import { unknownGeographyColors } from './constants';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
+import { emptyStatusChipColors } from '../../constants/index.js';
 const StatusChip = (_a) => {
-    var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
+    var { children, unknownText, copyText, expandDirection = 'right', chipStyles } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection", "chipStyles"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
     const isSelected = props.isSelected;
     if (!children) {
-        return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
+        return (_jsx(ChipStyled, Object.assign({}, emptyStatusChipColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
     }
     const handleCopy = (e) => {
         e.stopPropagation();
@@ -38,12 +38,15 @@ const StatusChip = (_a) => {
             };
         }
     };
-    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
-                        paddingRight: isSelected && copyText ? 12 : 0,
-                    }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { delay: isSelected ? 0.2 : 0, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
-                                        height: 12,
-                                        width: 12,
-                                        objectFit: 'contain',
-                                    } }) })) })] })) }))] })));
+    const isCopyActive = isSelected && copyText;
+    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(motion.div, Object.assign({ style: { position: 'absolute', top: 0, zIndex: isSelected ? 3 : 0 }, animate: {
+                    left: isCopyActive && expandDirection === 'left' ? -12 : 0,
+                }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected }, chipStyles, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
+                            paddingRight: isCopyActive ? 12 : 0,
+                        }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isCopyActive && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0, x: -5 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -2 }, transition: { delay: 0.2, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
+                                            height: 12,
+                                            width: 12,
+                                            objectFit: 'contain',
+                                        } }) })) })] })) })) }))] })));
 };
 export default StatusChip;

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

@@ -8,9 +8,13 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     disabled?: boolean | undefined;
     padding?: string | undefined;
     unknownText?: string | undefined;
+    minWidth?: string | undefined;
     maxWidth?: string | undefined;
     isSelected?: boolean | undefined;
     copyText?: string | undefined;
+    expandDirection?: "left" | "right" | undefined;
+    chipStyles?: object | undefined;
+    disableAnimation?: boolean | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {

package/build/components/StatusChip/style.js

@@ -1,10 +1,19 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 export const ChipStyled = styled(Box, {
-    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth', 'isSelected'].includes(prop),
-})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth, }) => {
-    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box', borderColor: theme.palette.common.white }, (isSelected && {
-        boxShadow: 'rgb(242, 242, 242) 7px 0px 8px 2px',
+    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'minWidth', 'padding', 'maxWidth', 'isSelected', 'disableAnimation'].includes(prop),
+})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, minWidth, maxWidth, disableAnimation, }) => {
+    return Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: minWidth || '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
+        boxShadow: 'white 7px 0px 8px 2px',
+    })), (disableAnimation && {
+        transition: 'none !important',
+        animation: 'none !important',
+        transform: 'none !important',
+        '& *': {
+            transition: 'none !important',
+            animation: 'none !important',
+            transform: 'none !important',
+        },
     }));
 });
 export const Wrapper = styled(Box)(() => ({
@@ -12,7 +21,6 @@ export const Wrapper = styled(Box)(() => ({
     alignItems: 'center',
     justifyContent: 'center',
     gap: '4px',
-    minWidth: 46,
     textAlign: 'center',
 }));
 export const CopyWrapper = styled(Box)(() => ({

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

@@ -7,7 +7,11 @@ export type ChipProps = PropsWithChildren<{
     disabled?: boolean;
     padding?: string;
     unknownText?: string;
+    minWidth?: string;
     maxWidth?: string;
     isSelected?: boolean;
     copyText?: string;
+    expandDirection?: 'left' | 'right';
+    chipStyles?: object;
+    disableAnimation?: boolean;
 } & BoxProps>;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.d.ts

@@ -5,7 +5,8 @@ export interface StatusChipWithCopyProps extends StatusChipProps {
     copyText?: string;
     chipIndex: number;
     selectionProps: SelectionProps;
+    chipStyles?: object;
 }
-declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...rest }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof StatusChipWithCopy>;
 export default _default;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.js

@@ -14,9 +14,9 @@ import { memo, useMemo } from 'react';
 import StatusChip from '../StatusChip';
 import { checkIsSelected } from './utils';
 function StatusChipWithCopy(_a) {
-    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
+    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, rest = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
     const isSelected = useMemo(() => checkIsSelected({ rowIndex, colIndex, selectedId, chipIndex }), [rowIndex, colIndex, selectedId, chipIndex]);
-    return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
+    return (_jsx(StatusChip, Object.assign({}, rest, { copyText: copyText, onClick: (e) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(e, chipIndex);
         }, isSelected: isSelected }, { children: children })));
 }

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

@@ -33,7 +33,7 @@ export const PercentageContainer = styled('div')(({ theme, percentage, isCapture
     gap: theme.spacing(0.5),
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

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

@@ -28,4 +28,5 @@ export declare const actionIcons: {
     users: string;
     brand: string;
     clipboard: string;
+    viewApi: string;
 };

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

@@ -1,5 +1,5 @@
 import { BadgeVariants } from '../../../CountBadge';
-import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, } from '../../../../constants/index.js';
+import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, jsonBlackIcon, } from '../../../../constants/index.js';
 export const flags = {
     GRAY: { icon: closedFlagIcon, color: '#CFCFCF' },
     ORANGE: { icon: orangeFlagIcon, color: '#FFD503' },
@@ -24,4 +24,5 @@ export const actionIcons = {
     users: usersIcon,
     brand: brandPlaceholderIcon,
     clipboard: clipboardIcon,
+    viewApi: jsonBlackIcon,
 };

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

@@ -13,7 +13,7 @@ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdow
         label: string;
         onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
         onRightClick?: ((e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void) | undefined;
-        icon: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard";
+        icon: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | "viewApi";
         isLoading?: boolean | undefined;
         isError?: boolean | undefined;
         isSuccess?: boolean | undefined;

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

@@ -283,5 +283,5 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     fetchPriority?: "auto" | "high" | "low" | undefined;
     srcSet?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    icon?: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | undefined;
+    icon?: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | "viewApi" | undefined;
 }, {}, {}>;

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

@@ -30,11 +30,10 @@ export default function ApplicationStatusCell(_a) {
             tooltip: 'Acceptance',
             enabled: isAcceptanceEnabled,
             shown: !hideAcceptance,
+            zIndex: isAcceptanceEnabled && !isPayoutEnabled ? 3 : 1,
         },
-        { icon: isPayoutEnabled ? payoutsGreenIcon : payoutWindowIcon, tooltip: 'Payout', enabled: isPayoutEnabled, shown: !hidePayout },
-    ]
-        .filter((app) => app.shown)
-        .sort((a, b) => (a.enabled !== b.enabled && b.enabled ? -1 : 0)), [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
+        { icon: isPayoutEnabled ? payoutsGreenIcon : payoutWindowIcon, tooltip: 'Payout', enabled: isPayoutEnabled, shown: !hidePayout, zIndex: 2 },
+    ].filter((app) => app.shown), [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
     const appsStatus = useMemo(() => apps.map((app, index) => {
         const sourceTooltip = app.tooltip;
         return (_jsx(Tooltip, Object.assign({ onOpen: () => {
@@ -43,6 +42,7 @@ export default function ApplicationStatusCell(_a) {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: appStatusAnimation(index, theme.shadows[4], 40), sx: {
                     width: '36px',
+                    zIndex: app.zIndex + 6,
                 } }, { children: _jsx(IconWithBadge, { mainIcon: app.icon, mainIconSize: 16, containerSize: 16, sx: { borderRadius: '40px' }, onError: (e) => {
                         e.currentTarget.src = app.icon;
                         e.currentTarget.style.borderRadius = '0px';

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

@@ -31,7 +31,7 @@ export const PercentageContainer = styled('div')(({ theme, percentage }) => ({
     gap: theme.spacing(0.5),
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

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

@@ -34,7 +34,7 @@ export const PercentageContainer = styled('div')(({ theme }) => ({
     lineHeight: 0,
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

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

@@ -31,7 +31,7 @@ export const PercentageContainer = styled(motion.div)(({ theme, percentage }) =>
     minWidth: '44px',
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

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

@@ -38,7 +38,7 @@ export const DateContainer = styled(DateCell)(({ theme }) => ({
     color: theme.palette.secondary.main,
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

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

@@ -136,7 +136,7 @@ export const StatusIcon = styled('img')(() => ({
     height: '16px',
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/TableCells/SheetViewCells/CustomerSheetCell/CustomerSheetCell.d.ts

@@ -0,0 +1,14 @@
+import { StatusChipWithCopyProps } from '../../../StatusChipWithCopy';
+interface CustomerSheetCellProps extends Pick<StatusChipWithCopyProps, 'selectionProps'> {
+    id?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    isFirstNameShown?: boolean;
+    isLastNameShown?: boolean;
+    isEmailShown?: boolean;
+    isPhoneShown?: boolean;
+    isIdShown?: boolean;
+}
+declare function CustomerSheetCell({ id, name, email, phone, isFirstNameShown, isLastNameShown, isEmailShown, isPhoneShown, isIdShown, ...props }: CustomerSheetCellProps): import("react/jsx-runtime").JSX.Element;
+export default CustomerSheetCell;

package/build/components/TableCells/SheetViewCells/CustomerSheetCell/CustomerSheetCell.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { StatusChipWithCopy } from '../../../index.js';
+import { isArabic } from '../../../../utils/index.js';
+function CustomerSheetCell(_a) {
+    var { id, name, email, phone, isFirstNameShown = true, isLastNameShown = true, isEmailShown = true, isPhoneShown = true, isIdShown = true } = _a, props = __rest(_a, ["id", "name", "email", "phone", "isFirstNameShown", "isLastNameShown", "isEmailShown", "isPhoneShown", "isIdShown"]);
+    const isArabicname = isArabic(name);
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'row', gap: '4px' } }, { children: [name && (isFirstNameShown || isLastNameShown) && (_jsx(StatusChipWithCopy, Object.assign({ disableAnimation: true, copyText: name, chipIndex: 0 }, props, { children: _jsx("span", Object.assign({ "data-is-arabic": isArabicname }, { children: name })) }))), isEmailShown && email && (_jsx(StatusChipWithCopy, Object.assign({ copyText: email, chipIndex: 1 }, props, { children: email }))), isPhoneShown && phone && (_jsx(StatusChipWithCopy, Object.assign({ copyText: phone, chipIndex: 2 }, props, { children: phone }))), isIdShown && id && (_jsx(StatusChipWithCopy, Object.assign({ copyText: id, chipIndex: 3 }, props, { children: id })))] })));
+}
+export default CustomerSheetCell;

package/build/components/TableCells/SheetViewCells/CustomerSheetCell/index.d.ts

@@ -0,0 +1 @@
+export { default as CustomerSheetCell } from './CustomerSheetCell';

package/build/components/TableCells/SheetViewCells/CustomerSheetCell/index.js

@@ -0,0 +1 @@
+export { default as CustomerSheetCell } from './CustomerSheetCell';

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/PaymentAgreementCell.d.ts

@@ -0,0 +1,13 @@
+import { StatusChipWithCopyProps } from '../../../StatusChipWithCopy';
+interface PaymentAgreementCellProps extends Omit<StatusChipWithCopyProps, 'chipIndex'> {
+    type?: keyof typeof paymentAgreementTypes;
+    count?: number;
+}
+declare const paymentAgreementTypes: {
+    SAVED_CARD: string;
+    ORDER: string;
+    SUBSCRIPTION: string;
+    INSTALLMENT: string;
+};
+declare function PaymentAgreementCell({ type, count, ...props }: PaymentAgreementCellProps): import("react/jsx-runtime").JSX.Element;
+export default PaymentAgreementCell;

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/PaymentAgreementCell.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { StatusChipWithCopy } from '../../../index.js';
+const paymentAgreementTypes = {
+    SAVED_CARD: 'Card Agreement',
+    ORDER: 'Order',
+    SUBSCRIPTION: 'Subscription',
+    INSTALLMENT: 'Installment',
+};
+function PaymentAgreementCell(_a) {
+    var { type, count } = _a, props = __rest(_a, ["type", "count"]);
+    const countText = count === null || count === void 0 ? void 0 : count.toString();
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'row', gap: '4px' } }, { children: [_jsx(StatusChipWithCopy, Object.assign({ copyText: type, unknownText: "noPaymentAgreement" }, props, { chipIndex: 0 }, { children: type ? paymentAgreementTypes[type] : type })), countText && (_jsx(StatusChipWithCopy, Object.assign({ copyText: countText }, props, { chipIndex: 1, minWidth: "38px" }, { children: countText })))] })));
+}
+export default PaymentAgreementCell;

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/index.d.ts

@@ -0,0 +1 @@
+export { default as PaymentAgreementCell } from './PaymentAgreementCell';

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/index.js

@@ -0,0 +1 @@
+export { default as PaymentAgreementCell } from './PaymentAgreementCell';

package/build/components/TableCells/SheetViewCells/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PaymentAgreementCell';
+export * from './CustomerSheetCell';

package/build/components/TableCells/SheetViewCells/index.js

@@ -0,0 +1,2 @@
+export * from './PaymentAgreementCell';
+export * from './CustomerSheetCell';

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

@@ -1,3 +1,4 @@
 export { default as TableCell } from './TableCell';
 export * from './CustomCells';
+export * from './SheetViewCells';
 export * from './type';

package/build/components/TableCells/index.js

@@ -1,3 +1,4 @@
 export { default as TableCell } from './TableCell';
 export * from './CustomCells';
+export * from './SheetViewCells';
 export * from './type';

package/build/components/ToggleView/style.js

@@ -7,7 +7,7 @@ export const ToggleWrapperStyled = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
-    cursor: 'pointer'
+    cursor: 'pointer',
 }));
 export const ViewButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ isActive }) => ({
     flex: 1,
@@ -16,7 +16,7 @@ export const ViewButton = styled(Box, { shouldForwardProp: (props) => props !==
     alignItems: 'center',
     position: 'relative',
     zIndex: 2,
-    opacity: isActive ? 1 : 0.5
+    opacity: isActive ? 1 : 0.5,
 }));
 export const ActiveOverlay = styled(Box, { shouldForwardProp: (props) => props !== 'activeIndex' })(({ theme, activeIndex }) => ({
     position: 'absolute',
@@ -27,5 +27,5 @@ export const ActiveOverlay = styled(Box, { shouldForwardProp: (props) => props !
     height: '28px',
     backgroundColor: theme.palette.common.white,
     borderRadius: '2px',
-    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)'
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',
 }));

package/build/components/VirtualTables/SheetViewVirtualTable/components/LoadingMainTable.js

@@ -12,8 +12,10 @@ function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, s
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
                                 height: '100%',
+                                maxHeight: '100%',
                                 display: 'flex',
                                 flexDirection: 'column',
+                                overflow: 'hidden',
                             } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })));
 }
 export default memo(LoadingMainTable);

package/build/components/VirtualTables/SheetViewVirtualTable/components/MainTable.js

@@ -10,6 +10,10 @@ function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHead
     return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',
-                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
+                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                                height: '100%',
+                                maxHeight: '100%',
+                                overflow: 'hidden',
+                            } }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
 }
 export default memo(MainTable);

package/build/components/VirtualTables/SheetViewVirtualTable/components/PinnedColumn.js

@@ -15,6 +15,10 @@ function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList,
                         width: '100%',
                         minWidth: 'fit-content',
                         overflowX: 'hidden',
-                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
+                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                            height: '100%',
+                            maxHeight: '100%',
+                            overflow: 'hidden',
+                        } }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
 }
 export default memo(PinnedColumn);

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableLoading.js

@@ -1,19 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import uniqueId from 'lodash/uniqueId';
 import { calculateMaxAllowedRows } from '../../../../utils/index.js';
 import SheetViewTableRowLoading from './SheetViewTableRowLoading';
+import { SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
 const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
     overflow: 'hidden',
     paddingInline: isLoaded && !isPinned ? '32px' : '0px',
     backgroundColor: isLoaded && !isPinned ? 'rgba(255, 255, 255, 0.60)' : 'none',
     filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
     marginTop: isLoaded && !isPinned ? '1rem' : '0',
+    height: '100%',
+    maxHeight: '100%',
 }));
-function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, }) {
-    let maxAllowedRows = rowsCount || calculateMaxAllowedRows(isLoaded, isLoading);
-    maxAllowedRows = rowsCount || Math.max(maxAllowedRows, 25);
+function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount = 13, isPinned = false, }) {
+    const [maxAllowedRows, setMaxAllowedRows] = useState(() => {
+        return rowsCount || Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 15);
+    });
+    useEffect(() => {
+        if (rowsCount) {
+            setMaxAllowedRows(rowsCount);
+            return;
+        }
+        const calculateRowsForContainer = () => {
+            var _a;
+            const wrapperElement = document.querySelector('[data-testid="SheetViewTableLoading"]');
+            if (!wrapperElement) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const containerHeight = ((_a = wrapperElement.parentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+            const rowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT;
+            const headerHeight = 40;
+            const availableHeight = containerHeight - headerHeight;
+            if (availableHeight <= 0) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const calculatedRows = Math.floor(availableHeight / rowHeight);
+            return Math.max(3, Math.min(calculatedRows + 2, 25));
+        };
+        const rows = calculateRowsForContainer();
+        setMaxAllowedRows(rows);
+        const handleResize = () => {
+            const calculatedRows = calculateRowsForContainer();
+            setMaxAllowedRows(calculatedRows);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isLoaded, isLoading, rowsCount]);
     return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
 }
 export default memo(SheetViewTableLoading);

package/build/components/VirtualTables/components/ColumnFilter/List/List.js

@@ -56,6 +56,6 @@ function List({ onCloseDropdown, filter, styles }) {
                 bottom: 0,
                 backgroundColor: 'white',
                 zIndex: 99999,
-            } }, { children: [_jsx(CancelButton, Object.assign({ onClick: onClickCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ onClick: onClickOkay }, { children: t('okay') }))] })) }));
+            } }, { children: [_jsx(CancelButton, Object.assign({ onClick: onClickCancel }, { children: t('cancel') }), "nested-dropdown-cancel"), _jsx(OkayButton, Object.assign({ onClick: onClickOkay }, { children: t('okay') }), "nested-dropdown-ok")] })) }));
 }
 export default memo(List);

package/build/components/VirtualTables/components/TableRow.js

@@ -53,9 +53,10 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                     isPinnedEnd: column.pinned === 'end',
                 })
                 : {};
+            const isIndexColumn = column.pinned === 'start' && effectiveFirst;
             return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
                     onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
-                }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+                }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: isIndexColumn ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, selectedChip, isSheetView]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }

package/build/components/VirtualTables/components/style.js

@@ -146,7 +146,7 @@ export const SheetViewTableContainer = styled(Box)(() => ({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    height: 'calc(100vh - 300px)',
+    height: '100%',
     paddingInline: '28px',
     borderRadius: '8px',
     marginBottom: '16px !important',

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.d.ts

@@ -9,6 +9,7 @@ export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow,
 }) => import("react/jsx-runtime").JSX.Element>;
 export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
+    isSheetView?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, isLoadMoreLoading, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
 export default ListItemWrapper;

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.js

@@ -46,8 +46,8 @@ const createRowClickHandler = (row, onRowClick) => (e) => {
 };
 export const StyledItemWrapper = styled('div', {
     shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'isSheetView',
-})(({ theme }) => ({
-    height: '100%',
+})(({ theme, isSheetView }) => ({
+    height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : '100%',
     backgroundColor: theme.palette.background.default,
 }));
 function ListItemWrapper(_a) {
@@ -105,6 +105,6 @@ function ListItemWrapper(_a) {
         renderSheetViewLoadingRow,
         isLoadMoreLoading,
     ]);
-    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
+    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, (!isSheetView && style)), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper", isSheetView: isSheetView }, { children: memoizedListItemComponent })) })));
 }
 export default ListItemWrapper;

package/build/components/index.d.ts

@@ -97,10 +97,6 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
-export { default as ListLayout } from './ListLayout';
-export * from './ListLayout';
-export { default as ToggleView } from './ToggleView';
-export * from './ToggleView';
 export * from './RightLeftExpandingCenterChip';
 export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
@@ -109,6 +105,12 @@ export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
+export { default as AmountStatusChip, type AmountStatusChipProps } from './AmountStatusChip';
+export { default as AuthenticationTypeChip, type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
 export * from './LazyImage';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as ToggleView } from './ToggleView';
+export * from './ToggleView';
 export { default as AppServicesBar } from './AppServicesBar';
 export * from './AppServicesBar';