@tap-payments/os-micro-frontend-shared 0.1.96-test.24 → 0.1.96-test.26

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -1,14 +1,25 @@
 import { useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { animate, useMotionValue } from 'framer-motion';
 import { CHIP_GAP } from './style';
+/**
+ * Hook: useRightLeftExpandingCenterChip
+ * Encapsulates hover logic, measurement (anchors, chip widths, expandable width),
+ * and motion values for the RightLeftExpandingCenterChip component.
+ */
 export const DEFAULT_CHIP_MIN_WIDTH = 24;
 export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, }) {
+    // =================================
+    // State (move all state to the top)
+    // =================================
     const [isHovering, setIsHovering] = useState(false);
     const [anchors, setAnchors] = useState({ left: 0, right: 0 });
     const [leftWidths, setLeftWidths] = useState([]);
     const [rightWidths, setRightWidths] = useState([]);
     const [expandableRightWidth, setExpandableRightWidth] = useState(0);
     const [expandableLeftWidth, setExpandableLeftWidth] = useState(0);
+    // ======================
+    // Refs (DOM and timers)
+    // ======================
     const hoverTimeoutRef = useRef(null);
     const centerWrapRef = useRef(null);
     const centerContentRef = useRef(null);
@@ -17,7 +28,9 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     const rightChipRefs = useRef([]);
     const expandableRightInnerRef = useRef(null);
     const expandableLeftInnerRef = useRef(null);
+    // rAF id for resize throttling
     const resizeRaf = useRef(null);
+    // Small helpers to avoid unnecessary state updates
     const arraysEqual = useCallback((a, b) => {
         if (a === b)
             return true;
@@ -31,9 +44,16 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     const anchorsEqual = useCallback((a, b) => {
         return a.left === b.left && a.right === b.right;
     }, []);
+    // ======================
+    // Motion values
+    // ======================
     const expandedRightMV = useMotionValue(0);
     const expandedLeftMV = useMotionValue(0);
+    // Center icon stays fixed - no shift needed
     const shiftX = useMotionValue(0);
+    // ======================
+    // Computed values
+    // ======================
     const leftOffsets = useMemo(() => {
         if (!leftWidths.length)
             return [];
@@ -58,21 +78,31 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         }
         return acc;
     }, [rightWidths]);
+    // Right icons shift to account for expandable content without gap
     const rightShift = isHovering && expandableCenterRight ? expandableRightWidth : 0;
+    // Left icons shift to account for expandable content without gap
     const leftShift = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
+    // Predict max right shift even when not hovering to size hover zone generously
     const maxRightShift = expandableCenterRight ? expandableRightWidth : 0;
+    // ======================
+    // Callbacks
+    // ======================
     const handleMouseEnter = useCallback(() => {
         if (hoverTimeoutRef.current)
             clearTimeout(hoverTimeoutRef.current);
+        // Enter immediately to keep hover active while moving across expanded areas
         setIsHovering(true);
     }, []);
     const handleMouseLeave = useCallback(() => {
         if (hoverTimeoutRef.current)
             clearTimeout(hoverTimeoutRef.current);
+        // Delay hover off to avoid flicker when moving between center and expanded icons
         hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
     }, []);
+    // Single measurement function to batch reads and writes
     const measureAll = useCallback(() => {
         var _a, _b, _c, _d, _e;
+        // Read DOM
         const wrap = centerWrapRef.current;
         const chip = centerChipRef.current;
         const content = centerContentRef.current;
@@ -81,6 +111,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
             const wrapRect = wrap.getBoundingClientRect();
             const targetRect = (_a = (chip !== null && chip !== void 0 ? chip : content)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             if (targetRect) {
+                // Round to prevent tiny sub-pixel changes causing re-renders
                 const left = Math.round(targetRect.left - wrapRect.left);
                 const right = Math.round(targetRect.right - wrapRect.left);
                 nextAnchors = { left, right };
@@ -90,6 +121,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         const nextRightWidths = rightChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
         const nextExpandableRightWidth = (_c = (_b = expandableRightInnerRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
         const nextExpandableLeftWidth = (_e = (_d = expandableLeftInnerRef.current) === null || _d === void 0 ? void 0 : _d.scrollWidth) !== null && _e !== void 0 ? _e : 0;
+        // Write state only if changed
         if (!anchorsEqual(anchors, nextAnchors))
             setAnchors(nextAnchors);
         if (!arraysEqual(leftWidths, nextLeftWidths))
@@ -101,6 +133,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         if (expandableLeftWidth !== nextExpandableLeftWidth)
             setExpandableLeftWidth(nextExpandableLeftWidth);
     }, [anchors, leftWidths, rightWidths, expandableRightWidth, expandableLeftWidth, anchorsEqual, arraysEqual]);
+    // rAF-throttled resize handler (memoized)
     const onResize = useCallback(() => {
         if (resizeRaf.current)
             cancelAnimationFrame(resizeRaf.current);
@@ -108,17 +141,22 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
             measureAll();
         });
     }, [measureAll]);
+    // ======================
+    // Effects
+    // ======================
     useEffect(() => {
         return () => {
             if (hoverTimeoutRef.current)
                 clearTimeout(hoverTimeoutRef.current);
         };
     }, []);
+    // Perform initial measurements (and when inputs that affect layout change) before paint
     useLayoutEffect(() => {
         measureAll();
     }, [centerIcon, leftIcons, rightIcons, expandableCenterRight, expandableCenterLeft, measureAll]);
+    // Window resize listener effect
     useEffect(() => {
-        onResize();
+        onResize(); // initial measurement on mount
         window.addEventListener('resize', onResize);
         return () => {
             window.removeEventListener('resize', onResize);
@@ -126,16 +164,21 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
                 cancelAnimationFrame(resizeRaf.current);
         };
     }, [onResize]);
+    // Animate right expandable content - no gap for seamless connection
     useEffect(() => {
         const target = isHovering && expandableCenterRight ? expandableRightWidth : 0;
         const controls = animate(expandedRightMV, target, { duration: 0.2, ease: 'easeOut' });
         return () => controls.stop();
     }, [isHovering, expandableCenterRight, expandableRightWidth, expandedRightMV]);
+    // Animate left expandable content - no gap for seamless connection
     useEffect(() => {
         const target = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
         const controls = animate(expandedLeftMV, target, { duration: 0.2, ease: 'easeOut' });
         return () => controls.stop();
     }, [isHovering, expandableCenterLeft, expandableLeftWidth, expandedLeftMV]);
+    // ======================
+    // Derived hover zone widths (adjusted for seamless positioning)
+    // ======================
     const leftHoverWidth = useMemo(() => {
         var _a;
         if (!leftOffsets.length)
@@ -154,27 +197,36 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         const farthest = maxRightShift + rightOffsets[last] + lastWidth / 2;
         return farthest + CHIP_GAP;
     }, [rightOffsets, rightWidths, maxRightShift]);
+    // ======================
+    // Public API
+    // ======================
     return {
+        // hover state/handlers
         isHovering,
         handleMouseEnter,
         handleMouseLeave,
+        // anchors/refs
         centerWrapRef,
         centerContentRef,
         centerChipRef,
         anchors,
+        // chip measurement/offsets
         leftChipRefs,
         rightChipRefs,
         leftOffsets,
         rightOffsets,
+        // expandable area
         expandableRightInnerRef,
         expandableLeftInnerRef,
         expandableRightWidth,
         expandableLeftWidth,
+        // motion values
         expandedRightMV,
         expandedLeftMV,
         shiftX,
         rightShift,
         leftShift,
+        // hover zone widths
         leftHoverWidth,
         rightHoverWidth,
     };

package/build/components/ScrollLoader/ScrollLoader.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Stack from '@mui/material/Stack';
-const OFFSET = 50;
+const OFFSET = 50; // px to trigger loading before reaching full bottom
 const isNearBottom = (el, offset = OFFSET) => {
     const scrollBottom = el.scrollTop + el.clientHeight;
     const scrollHeight = el.scrollHeight;
@@ -44,6 +44,7 @@ const ScrollLoader = (props) => {
         el.addEventListener('scroll', handleScroll);
         return () => el.removeEventListener('scroll', handleScroll);
     }, [handleScroll]);
+    // Initially .. auto load the data if the scrollable container allows
     useEffect(() => {
         const el = containerRef.current;
         if (!el || loading || initialChecked)

package/build/components/SearchListInput/SearchListInput.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from '@mui/material/Box';
+type Props = BoxProps & {
+    value: string;
+    name: string;
+    placeholder: string;
+    onSearchChange: (value: string) => void;
+    onSearchReset: () => void;
+};
+declare const SearchListInput: ({ value, name, placeholder, onSearchChange, onSearchReset, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SearchListInput;

package/build/components/SearchListInput/SearchListInput.js

@@ -0,0 +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 Box from '@mui/material/Box';
+import { grayCloseIcon, searchIcon } from '../../constants/index.js';
+import { InputsWrapper, InputStyled } from './style';
+const SearchListInput = (_a) => {
+    var { value, name, placeholder, onSearchChange, onSearchReset } = _a, props = __rest(_a, ["value", "name", "placeholder", "onSearchChange", "onSearchReset"]);
+    return (_jsx(InputsWrapper, Object.assign({}, props, { children: _jsx(InputStyled, { className: "input", name: name, placeholder: placeholder, onChange: (e) => onSearchChange(e.target.value), value: value, inputProps: { autoComplete: 'off' }, endAdornment: _jsx(Box, { component: "img", "data-icon": value ? 'close' : 'search', src: value ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: value ? 'pointer' : 'default' }, onClick: onSearchReset }) }) })));
+};
+export default SearchListInput;

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

@@ -0,0 +1,2 @@
+import SearchListInput from './SearchListInput';
+export default SearchListInput;

package/build/components/SearchListInput/index.js

@@ -0,0 +1,2 @@
+import SearchListInput from './SearchListInput';
+export default SearchListInput;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const InputStyled: import("@emotion/styled").StyledComponent<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+}> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const InputsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/SearchListInput/style.js

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+import Input from '../Input';
+import Box from '@mui/material/Box';
+export const InputStyled = styled(Input)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    '.icon': {
+        width: 14,
+    },
+}));
+export const InputsWrapper = styled(Box)(() => ({
+    padding: '8px 16px',
+    '> div + div': {
+        marginTop: '8px',
+    },
+}));

package/build/components/StatusButton/StatusButton.js

@@ -19,29 +19,34 @@ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown
 import { statusButtonIcons } from './constant';
 const StatusButton = memo((props) => {
     var _a;
-    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
+    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick, iconMapper = statusButtonIcons } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick", "iconMapper"]);
     const [buttonClicks, setButtonClicks] = useState(0);
     const { t } = useTranslation();
     const buttonRef = useRef(null);
     const [anchorEl, setAnchorEl] = useState(null);
     const [selectedStatus, setSelectedStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
+    // Memoized computed values
     const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
+    // only open if button is clicked more than once
     const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
     const isActiveVariant = variant === 'active';
     const badgeVariant = useMemo(() => (isActiveVariant ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE), [isActiveVariant]);
-    const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null), [icon, variant]);
+    // Memoized UI elements
+    const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: iconMapper[icon], alt: `${icon}-icon` }) : null), [icon, iconMapper, variant]);
     const statusBadge = useMemo(() => {
         if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
             return null;
         return _jsx(StyledBadge, Object.assign({ variant: badgeVariant }, { children: formatNumber(Number(badgeCount)) }));
     }, [badgeCount, badgeVariant]);
     const dropdownIcon = useMemo(() => (hasDropdown ? _jsx(ChevronIcon, { isActive: isActiveVariant }) : null), [hasDropdown, isActiveVariant]);
+    // Reset button clicks and anchor element when variant changes
     useEffect(() => {
         if (!isActiveVariant) {
             setButtonClicks(0);
             setAnchorEl(null);
         }
     }, [isActiveVariant]);
+    // Event handlers
     const handleDropdownClose = useCallback(() => {
         setAnchorEl(null);
     }, []);
@@ -58,12 +63,15 @@ const StatusButton = memo((props) => {
         handleDropdownToggle();
         setButtonClicks((prev) => prev + 1);
     }, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
-    const handleMenuItemClick = useCallback((item) => (e) => {
+    const handleMenuItemClick = useCallback(
+    // eslint-disable-next-line
+    (item) => (e) => {
         var _a;
         (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
         setSelectedStatus(item.status);
         handleDropdownClose();
     }, [handleDropdownClose]);
+    // Enhanced dropdown menu items
     const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
     const ButtonComponent = statusButtonVariants[variant];
     const displayLabel = selectedStatus ? t(selectedStatus) : label;

package/build/components/StatusButton/constant.js

@@ -1,4 +1,6 @@
-import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, } from '../../constants/index.js';
+import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon,
+// trashBinIcon,
+ } from '../../constants/index.js';
 export const statusButtonIcons = {
     inProgress: initiatedIcon,
     initiated: initiatedIcon,

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

@@ -1,5 +1,6 @@
 import type React from 'react';
 import { type Theme } from '@mui/material';
+import { StatusButtonProps } from './type';
 export declare const statusButtonVariants: {
     active: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
@@ -35,5 +36,5 @@ export declare const LabelWrapper: import("@emotion/styled").StyledComponent<imp
 }, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const StyledStatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant: StatusButtonVariant;
-    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
+    icon?: StatusButtonProps['icon'];
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

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

@@ -8,11 +8,23 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     variant?: StatusButtonVariant;
     badgeCount?: number | string;
     hasDropdown?: boolean;
-    icon?: StatusButtonIcon;
+    icon?: StatusButtonIcon | (string & {});
     label?: ReactNode | null;
     showDropdownIcon?: boolean;
     totalCount?: number;
     onButtonBodyClick?: (status: TableHeaderStatus) => void;
+    /**
+     * @description
+     * `iconMapper` is used as an override for mapping between a given key (statusKey .. ex:`"active"`) and icon src URL
+     * @example
+     * ```js
+     *  iconMapper: {
+     *    active:'http://base-url/active.svg',
+     *    inactive:'http://base-url/inactive.svg',
+     *  }
+     * ```
+     */
+    iconMapper?: Record<StatusButtonIcon | (string & {}), string>;
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;

package/build/components/StatusIcons/AuthIcons/constants.js

@@ -27,4 +27,9 @@ export const statusLabels = {
         icon: authenticationDeclinedIcon,
         borderColor: 'rgba(255, 61, 0, 0.10)',
     },
+    // noAuth: {
+    // 	tooltip: 'Not Authenticated',
+    // 	icon: authenticationNoAuthIcon,
+    // 	borderColor: '#F2F2F2'
+    // }
 };

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

@@ -20,6 +20,17 @@ function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, auto
     const formattedAmount = formatAmount(remainingAmount || 0);
     const generateAutoTooltip = useCallback((type) => {
         return `Auto ${type} - ${currency} ${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`;
+        // if (!lastDate) return `Auto ${type}`
+        // const typeLabel = `Auto ${type} - Scheduled`
+        // const date = dayjs(lastDate).calendar(null, {
+        // 	sameDay: '[for Today at] h:mm A',
+        // 	nextDay: '[for Tomorrow at] h:mm A',
+        // 	lastDay: '[for Yesterday at] h:mm A',
+        // 	sameElse: '[for] MMM DD [at] h:mm A',
+        // 	lastWeek: '[for] MMM DD [at] h:mm A',
+        // 	nextWeek: '[for] MMM DD [at] h:mm A'
+        // })
+        // return `${typeLabel} ${date}`
     }, [currency, formattedAmount.decimalAmount, formattedAmount.integerAmount]);
     const generatePartialTooltip = useCallback((type) => {
         const amount = type === 'Capture' ? captureAmount : voidAmount;

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

@@ -20,6 +20,17 @@ function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType,
     const formattedAmount = formatAmount(remainingAmount || 0);
     const generateAutoTooltip = useCallback((type) => {
         return `Auto ${type} - ${currency} ${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`;
+        // if (!lastDate) return `Auto ${type}`
+        // const typeLabel = `Auto ${type} - Scheduled`
+        // const date = dayjs(lastDate).calendar(null, {
+        // 	sameDay: '[for Today at] h:mm A',
+        // 	nextDay: '[for Tomorrow at] h:mm A',
+        // 	lastDay: '[for Yesterday at] h:mm A',
+        // 	sameElse: '[for] MMM DD [at] h:mm A',
+        // 	lastWeek: '[for] MMM DD [at] h:mm A',
+        // 	nextWeek: '[for] MMM DD [at] h:mm A'
+        // })
+        // return `${typeLabel} ${date}`
     }, [currency, formattedAmount.decimalAmount, formattedAmount.integerAmount]);
     const generatePartialTooltip = useCallback((type) => {
         const amount = type === 'Capture' ? captureAmount : voidAmount;

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

@@ -49,7 +49,9 @@ export default function ApplicationStatusCell(_a) {
                     }, borderColor: "transparent" }) })) }), `${app}-${index}`));
     }), [apps, theme]);
     const appsCount = (apps === null || apps === void 0 ? void 0 : apps.length) || 0;
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledAppsCell, { children: appsCount > 0 ? (_jsx(AppsStatusContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: appsCount, variants: { animate: { width: appsCount * (6 + 32) } }, style: {
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledAppsCell, { children: appsCount > 0 ? (_jsx(AppsStatusContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", 
+                // animate when state changes
+                animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: appsCount, variants: { animate: { width: appsCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: appsStatus }))) : null }) })));
 }

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

@@ -14,12 +14,12 @@ import Tooltip from '../../../Tooltip';
 import CountryFlag from '../../../CountryFlag';
 import { TableCell } from '../../../TableCells';
 import { bankIcon } from '../../../../constants/index.js';
-import { getCountryName } from '../../../../utils/index.js';
+import { getCountryNameByISO } from '../../../../utils/index.js';
 import { BankCellContainer, BankIcon, BankIdContainer, BankWrapper, IconWrapper } from './style';
 import { GeographyBox } from '../style';
 function BankCell(_a) {
     var { walletId, country, name } = _a, props = __rest(_a, ["walletId", "country", "name"]);
-    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
+    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
     return (_jsx(TableCell, Object.assign({ style: {
             textAlign: 'center',
             overflow: 'visible',

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

@@ -17,6 +17,7 @@ import { BrandCellContainer, WalletIcon, WalletIconContainer } from './style';
 function BrandCell(_a) {
     var { brandName, brandIcon } = _a, props = __rest(_a, ["brandName", "brandIcon"]);
     const icon = brandIcon ? (_jsx(Tooltip, Object.assign({ title: brandName }, { children: _jsx(WalletIcon, { src: brandIcon, alt: "brand icon", onError: (e) => {
+                // set the default icon if the image is not found
                 e.currentTarget.src = brandPlaceholderIcon;
             } }) }))) : (_jsx(WalletIcon, { src: brandPlaceholderIcon, alt: "brand icon" }));
     return (_jsx(TableCell, Object.assign({ style: {

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

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

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

@@ -11,13 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TableCell from '../../TableCell';
-import { EntityName, EntityWrapper, VerificationIcon, EntityContainer, EntityInfoContainer, VerificationContainer, EmptyCell } from './style';
+import { EntityName, EntityWrapper, VerificationIcon, VerificationContainer } from './style';
 import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
 import { CountryFlag } from '../../../index.js';
-import { getCountryName } from '../../../../utils/index.js';
+import { getCountryNameByISO } from '../../../../utils/index.js';
+import { Box } from '@mui/material';
 export default function EntityCell(_a) {
     var { entity, country, verificationStatus, licenseNumber, hideStatus } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, { children: licenseNumber ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber })] }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) })) })) })));
 }

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

@@ -3,7 +3,4 @@ export declare const EntityWrapper: import("@emotion/styled").StyledComponent<im
 export declare const EntityIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const EntityName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VerificationIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const EntityContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const EntityInfoContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VerificationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const EmptyCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -3,7 +3,7 @@ export const EntityWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
-    border: '1.029px solid #F2F2F2',
+    border: '1px solid #F2F2F2',
     borderRadius: '44px',
     padding: '4px 8px',
     lineHeight: '120%',
@@ -20,33 +20,13 @@ export const EntityName = styled('div')(({ theme }) => ({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     maxWidth: '100%',
+    margin: '0',
 }));
 export const VerificationIcon = styled('img')(() => ({
     width: '10.5px',
     height: '10.5px',
 }));
-export const EntityContainer = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-});
-export const EntityInfoContainer = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    minWidth: '110px',
-    gap: '8px',
-});
 export const VerificationContainer = styled('div')({
     marginLeft: 'auto',
     width: 'auto',
 });
-export const EmptyCell = styled('div')({
-    fontWeight: 400,
-    fontSize: 14,
-    lineHeight: '120%',
-    letterSpacing: 0,
-    color: '#B1B1B1',
-    textAlign: 'center',
-    width: '100%',
-});

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

@@ -34,7 +34,9 @@ function ReferenceCell(_a) {
                 } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(reference) }) })) : (_jsx(StyledSourceImage, { src: referenceIcons[reference], alt: reference, sx: Object.assign({}, (reference === 'order' && { width: '11.82px' })) })) })) }), `${reference}-${index}`));
     }), [props, references, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", 
+                // animate when state changes
+                animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: ReferenceSources }))) : null }) })));
 }

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

@@ -8,6 +8,7 @@ import { RefundStatusIcon } from './RefundStatusIcon';
 export function RefundStateIcon({ status, gatewayTooltip, unCapturedTooltip, acquirerTooltip, errorCode, acquirerCode, gatewayCode, refundTooltip, }) {
     const { t } = useTranslation();
     if (!(unCapturedStatuses === null || unCapturedStatuses === void 0 ? void 0 : unCapturedStatuses.includes(status !== null && status !== void 0 ? status : ''))) {
+        // eslint-disable-next-line
         return _jsx(RefundStatusIcon, { status: status, refundTooltip: refundTooltip });
     }
     return (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(ChargeStatusIcon, { chargeStatus: status, gatewayTooltip: gatewayTooltip, chargeTooltip: unCapturedTooltip, acquirerTooltip: acquirerTooltip, errorCode: errorCode, acquirerCode: acquirerCode, gatewayCode: gatewayCode, unCapturedStyles: {

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

@@ -24,9 +24,10 @@ function SalesChannelCell(_a) {
         const sourceTooltip = channel.address;
         const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
         const isLastChannel = index === (channels === null || channels === void 0 ? void 0 : channels.length) - 1;
-        return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: Object.assign({ width: isTextShown ? '70px' : '36px', cursor: NON_CLICKABLE_CHANNELS.includes(channel.code) ? 'default' : 'pointer' }, (isLastChannel && {
-                    boxShadow: '7px 0px 8px 0px #F2F2F2',
-                })), onClick: () => {
+        return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0, isLastChannel), sx: {
+                    width: isTextShown ? '70px' : '36px',
+                    cursor: NON_CLICKABLE_CHANNELS.includes(channel.code) ? 'default' : 'pointer',
+                }, onClick: () => {
                     if (NON_CLICKABLE_CHANNELS.includes(channel.code))
                         return;
                     if (channel === null || channel === void 0 ? void 0 : channel.address)

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

@@ -267,7 +267,7 @@ export declare const SalesChannelsContainer: import("@emotion/styled").StyledCom
 }, {}, {}>;
 export declare const ChannelTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ChannelTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const salesChannelAnimation: (index: number, xDelta?: number) => {
+export declare const salesChannelAnimation: (index: number, xDelta?: number, isLastChannel?: boolean) => {
     start: {
         x: number;
         transition: {
@@ -277,6 +277,7 @@ export declare const salesChannelAnimation: (index: number, xDelta?: number) =>
         };
     };
     animate: {
+        boxShadow?: string | undefined;
         x: number;
         transition: {
             duration: number;