@tap-payments/os-micro-frontend-shared 0.0.258-test.2 → 0.0.259-test.2

package/build/components/Menu/Menu.d.ts

@@ -5,6 +5,6 @@ interface MenuProps extends PopperProps {
     children: ReactNode;
     popperSx?: SxProps<Theme>;
 }
-declare function Menu({ open, anchorEl, children, sx, placement, popperSx }: MenuProps): import("react/jsx-runtime").JSX.Element;
+declare function Menu({ open, anchorEl, children, sx, placement, popperSx, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Menu>;
 export default _default;

package/build/components/Menu/Menu.js

@@ -1,8 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import Popper from '@mui/material/Popper';
 import { Dropdown } from './style';
-function Menu({ open, anchorEl, children, sx, placement, popperSx }) {
-    return (_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement || 'bottom-start', sx: popperSx }, { children: _jsx(Dropdown, Object.assign({ sx: sx }, { children: children })) }), "menu"));
+function Menu(_a) {
+    var { open, anchorEl, children, sx, placement, popperSx } = _a, props = __rest(_a, ["open", "anchorEl", "children", "sx", "placement", "popperSx"]);
+    return (_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement || 'bottom-start', sx: popperSx }, props, { children: _jsx(Dropdown, Object.assign({ className: "MuiPopper-dropdown", sx: sx }, { children: children })) }), "menu"));
 }
 export default memo(Menu);

package/build/components/RangeCalender/components/Timezone/Timezone.js

@@ -27,6 +27,6 @@ function CustomTimezone({ onChange, selectedTimezone, defaultTimezone, browserTi
             return entityTimezoneIcon;
         return savedTimezoneIcon;
     }, [browserTimezone, defaultTimezone.timezone, selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(TimezoneWrapper, Object.assign({ "data-testid": "CustomTimezone" }, { children: [_jsxs(SelectedTimezone, Object.assign({ open: open, onClick: onOpen }, { children: [_jsx("img", { src: selectedTimezoneIcon, alt: "timezone-icon" }), _jsx(CountryFlag, { code: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.countryCode }), _jsx("span", { children: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label })] })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { zIndex: 3 } }, { children: _jsxs(TimezoneDropdown, Object.assign({ "data-testid": "CustomTimezone_dropdown" }, { children: [_jsx(EntitiesTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone }), _jsx(UserTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, browserTimezone: browserTimezone })] })) }))] })) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(TimezoneWrapper, Object.assign({ "data-testid": "CustomTimezone" }, { children: [_jsxs(SelectedTimezone, Object.assign({ open: open, onClick: onOpen }, { children: [_jsx("img", { src: selectedTimezoneIcon, alt: "timezone-icon" }), _jsx(CountryFlag, { code: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.countryCode }), _jsx("span", { children: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label })] })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { zIndex: 1400 } }, { children: _jsxs(TimezoneDropdown, Object.assign({ "data-testid": "CustomTimezone_dropdown" }, { children: [_jsx(EntitiesTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone }), _jsx(UserTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, browserTimezone: browserTimezone })] })) }))] })) })));
 }
 export default memo(CustomTimezone);

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

@@ -8,6 +8,7 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     disabled?: boolean | undefined;
     padding?: string | undefined;
     unknownText?: string | undefined;
+    maxWidth?: string | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {

package/build/components/StatusChip/style.js

@@ -10,15 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Box, styled } from '@mui/material';
-export const ChipStyled = styled(Box)((_a) => {
+export const ChipStyled = styled(Box, {
+    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth'].includes(prop),
+})((_a) => {
     var { theme } = _a, props = __rest(_a, ["theme"]);
-    const { textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding } = props;
+    const { textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth } = props;
     return {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        display: 'block',
+        textAlign: 'center',
+        verticalAlign: 'middle',
         height: '18px',
-        padding: padding || `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
+        padding: padding || '0px 9.5px',
         borderRadius: '30px',
         border: `1px solid ${borderColor}`,
         backgroundColor: bgColor,
@@ -28,5 +30,9 @@ export const ChipStyled = styled(Box)((_a) => {
         whiteSpace: 'nowrap',
         fontSize: '11px',
         minWidth: '67px',
+        maxWidth: maxWidth || 'none',
+        overflow: 'hidden',
+        textOverflow: maxWidth ? 'ellipsis' : 'unset',
+        boxSizing: 'border-box',
     };
 });

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

@@ -7,4 +7,5 @@ export type ChipProps = PropsWithChildren<{
     disabled?: boolean;
     padding?: string;
     unknownText?: string;
+    maxWidth?: string;
 } & BoxProps>;

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

@@ -9,6 +9,7 @@ export declare const StyledStatusChip: import("@emotion/styled").StyledComponent
     disabled?: boolean | undefined;
     padding?: string | undefined;
     unknownText?: string | undefined;
+    maxWidth?: string | undefined;
 } & import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {

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

@@ -63,7 +63,7 @@ export const CountBadge = styled('span')(({ theme }) => ({
     fontSize: '9.782px',
     fontWeight: 600,
 }));
-export const IdButtonContainer = styled('div')(({ theme }) => ({
+export const IdButtonContainer = styled('div')(() => ({
     display: 'flex',
     width: '24px',
     height: '24px',

package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js

@@ -45,7 +45,7 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                     const isPinned = pinnedColumns.includes(id);
                     const isDefaultPinned = !!column.isDefaultPinned;
                     const isSelected = selectedColumn === id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "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, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#e3f2fd' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: (event) => {
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "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, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
                                     event.stopPropagation();
                                     handlePinClick(id);
                                 }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));

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

@@ -2,9 +2,7 @@
 export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const HeaderText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    isPinned: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 interface StyledHeaderProps {
     showBackDrop: boolean;
 }

package/build/components/VirtualTable/SheetView/style.js

@@ -18,7 +18,7 @@ export const HeaderText = styled('span')(({ theme }) => ({
     fontSize: '12px',
     fontWeight: 600,
 }));
-export const PinIconContainer = styled('div')(({ theme, isPinned }) => ({
+export const PinIconContainer = styled('div')(() => ({
     width: '16px',
     height: 'auto',
     cursor: 'pointer',

package/build/components/VirtualTable/components/TableRow.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from '../style';
-import { getBorderStyle } from '../utils/getBorderStyle';
+import { getSelectionStyles } from '../utils/getSelectionStyles';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;
@@ -19,13 +19,13 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             const isCellSelected = selectedCell === cellKey;
             const isColumnSelected = selectedColumn === columnIdStr;
             const isSelected = isCellSelected || isColumnSelected;
-            const borderStyle = getBorderStyle({
+            const selectionStyles = getSelectionStyles({
                 isSelected,
                 isCellSelected,
                 isColumnSelected,
                 isLastRow,
             });
-            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: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: 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' }, borderStyle), column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
+            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: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: 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), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected && (column === null || column === void 0 ? void 0 : column.isDefaultPinned) }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
     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/VirtualTable/style.d.ts

@@ -18,6 +18,7 @@ export declare const StyledCell: import("@emotion/styled").StyledComponent<impor
     isLast: boolean;
     isFirst: boolean;
     isSheetView?: boolean | undefined;
+    isSelected?: boolean | undefined;
 }, {}, {}>;
 interface StyledVirtualListProps {
     areTotalRowsNotFillingHeight: boolean;

package/build/components/VirtualTable/style.js

@@ -30,11 +30,16 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
 }));
 export const StyledCell = styled(TableCell, {
     shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
-})(({ theme, isLast, isFirst, isSheetView }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: theme.palette.grey[700], fontSize: theme.typography.caption.fontSize, height: '100%', fontWeight: theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
+})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',
     paddingLeft: '8px !important',
     paddingRight: '8px !important',
+})), (isSelected && {
+    color: '#1F88D0 !important',
+    '& *': {
+        color: '#1F88D0 !important',
+    },
 }))));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),

package/build/components/VirtualTable/utils/{getBorderStyle.d.ts → getSelectionStyles.d.ts}

@@ -1,12 +1,13 @@
-interface GetBorderStyleParams {
+interface GetSelectionStylesParams {
     isSelected: boolean;
     isCellSelected: boolean;
     isColumnSelected: boolean;
     isLastRow: boolean;
 }
-export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetBorderStyleParams) => {
+export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => {
     border?: undefined;
     backgroundColor?: undefined;
+    color?: undefined;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -18,6 +19,7 @@ export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSele
 } | {
     border: string;
     backgroundColor: string;
+    color: string;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -31,11 +33,12 @@ export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSele
     borderStyle: string;
     borderColor: string;
     borderBottom: string;
-    backgroundColor: string;
     height: string;
     minHeight: string;
     display: string;
     alignItems: string;
     border?: undefined;
+    backgroundColor?: undefined;
+    color?: undefined;
 };
 export {};

package/build/components/VirtualTable/utils/{getBorderStyle.js → getSelectionStyles.js}

@@ -1,19 +1,19 @@
-export const getBorderStyle = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
+export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
     if (!isSelected)
         return {};
     if (isCellSelected && !isColumnSelected) {
         return {
-            border: '0.5px solid #1F88D0',
-            backgroundColor: '#F4F9FC',
+            border: '2px solid #1F88D0',
+            backgroundColor: 'white',
+            color: '#1F88D0',
         };
     }
     if (isColumnSelected) {
         return {
-            borderWidth: isLastRow ? '0px 0.5px 1px 0.5px' : '0px 0.5px 0px 0.5px',
+            borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
             borderStyle: 'solid',
             borderColor: '#1F88D0',
-            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '0.5px solid #1F88D0',
-            backgroundColor: '#F4F9FC',
+            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '1.5px solid #1F88D0',
             height: '100%',
             minHeight: '28px',
             display: 'flex',

package/build/constants/index.d.ts

@@ -10,3 +10,4 @@ export * from './timezones';
 export * from './currency';
 export * from './table';
 export * from './toggleOptions';
+export * from './payment';

package/build/constants/index.js

@@ -10,3 +10,4 @@ export * from './timezones';
 export * from './currency';
 export * from './table';
 export * from './toggleOptions';
+export * from './payment';

package/build/constants/payment.d.ts

@@ -0,0 +1,5 @@
+export declare const PAYMENT_TYPES: {
+    name: string;
+    label: string;
+    icon: string;
+}[];

package/build/constants/payment.js

@@ -0,0 +1,38 @@
+import { lightUrl } from './assets';
+export const PAYMENT_TYPES = [
+    {
+        name: 'CARD',
+        label: 'Card',
+        icon: `${lightUrl}/payment-method/card.svg`,
+    },
+    {
+        name: 'EXPRESS',
+        label: 'Express Checkout',
+        icon: `${lightUrl}/express_checkout.svg`,
+    },
+    {
+        name: 'DEVICE',
+        label: 'Device',
+        icon: `${lightUrl}/device.svg`,
+    },
+    {
+        name: 'PT_WALLET',
+        label: 'Pass-Thru Wallet',
+        icon: `${lightUrl}/passThruWallet.svg`,
+    },
+    {
+        name: 'SV_WALLET',
+        label: 'Stored Value Wallet',
+        icon: `${lightUrl}/storedValueWallet.svg`,
+    },
+    {
+        name: 'BNPL',
+        label: 'Buy Now Pay Later',
+        icon: `${lightUrl}/buyNowPayLater.svg`,
+    },
+    {
+        name: 'CASH',
+        label: 'Cash Wallet',
+        icon: `${lightUrl}/cash.svg`,
+    },
+];

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

@@ -77,7 +77,7 @@ export declare const chargeTableCellWidth: {
     readonly merchant: {
         readonly default: "100px";
         readonly text: "150px";
-        readonly sheet: "115px";
+        readonly sheet: "190px";
     };
     readonly charge: {
         readonly default: "150px";
@@ -122,7 +122,7 @@ export declare const chargeTableCellWidth: {
     readonly actions: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "315px";
+        readonly sheet: "85px";
     };
     readonly payment_id: {
         readonly default: "150px";

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

@@ -77,7 +77,7 @@ export const chargeTableCellWidth = {
     merchant: {
         default: '100px',
         text: '150px',
-        sheet: '115px',
+        sheet: '190px',
     },
     charge: {
         default: '150px',
@@ -122,7 +122,7 @@ export const chargeTableCellWidth = {
     actions: {
         default: '100px',
         text: '100px',
-        sheet: '315px',
+        sheet: '85px',
     },
     payment_id: {
         default: '150px',

package/build/types/analytics.d.ts

@@ -27,5 +27,6 @@ export interface AnalyticsDetails {
 export declare enum ChargeBreakDownType {
     PaymentMethod = "PAYMENT_METHOD",
     PaymentCurrency = "PAYMENT_CURRENCY",
-    PaymentScheme = "PAYMENT_SCHEME"
+    PaymentScheme = "PAYMENT_SCHEME",
+    PaymentType = "PAYMENT_TYPE"
 }

package/build/types/analytics.js

@@ -3,4 +3,5 @@ export var ChargeBreakDownType;
     ChargeBreakDownType["PaymentMethod"] = "PAYMENT_METHOD";
     ChargeBreakDownType["PaymentCurrency"] = "PAYMENT_CURRENCY";
     ChargeBreakDownType["PaymentScheme"] = "PAYMENT_SCHEME";
+    ChargeBreakDownType["PaymentType"] = "PAYMENT_TYPE";
 })(ChargeBreakDownType || (ChargeBreakDownType = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.258-test.2",
+  "version": "0.0.259-test.2",
   "testVersion": 2,
   "type": "module",
   "main": "build/index.js",