@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/TableCells/CustomCells/DestinationCell/utils.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CurrencyIcon } from '../../../index.js';
+import { CurrencySymbol } from '../../../index.js';
 import { formatAmount } from '../../../../utils/index.js';
 export const generateDestinationTooltip = ({ destination, amount: formattedSum, }) => {
     var _a, _b, _c;
     const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
     const destinationsTooltip = (destinations === null || destinations === void 0 ? void 0 : destinations.length) > 1 ? (_jsxs("div", { children: [_jsx("div", { children: "Destination" }), (_a = destination === null || destination === void 0 ? void 0 : destination.destination) === null || _a === void 0 ? void 0 : _a.map((dest) => {
                 const formattedAmount = formatAmount(dest.amount || 0);
-                return (_jsxs("div", { children: [dest === null || dest === void 0 ? void 0 : dest.id, " - ", _jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] }, dest === null || dest === void 0 ? void 0 : dest.id));
-            })] })) : (_jsxs("div", { children: ["Destination ", (_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.id, " - ", _jsx(CurrencyIcon, { currency: (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.currency }), " ", formattedSum.integerAmount, ".", formattedSum.decimalAmount] }));
+                return (_jsxs("div", { children: [dest === null || dest === void 0 ? void 0 : dest.id, " - ", _jsx(CurrencySymbol, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] }, dest === null || dest === void 0 ? void 0 : dest.id));
+            })] })) : (_jsxs("div", { children: ["Destination ", (_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.id, " - ", _jsx(CurrencySymbol, { currency: (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.currency }), " ", formattedSum.integerAmount, ".", formattedSum.decimalAmount] }));
     return destinationsTooltip;
 };

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

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -13,20 +12,21 @@ export declare const UnCapturedContainer: import("@emotion/styled").StyledCompon
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -46,7 +46,7 @@ export declare const UnCapturedContainer: import("@emotion/styled").StyledCompon
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -62,7 +62,7 @@ export declare const UnCapturedContainer: import("@emotion/styled").StyledCompon
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -72,7 +72,7 @@ export declare const UnCapturedContainer: import("@emotion/styled").StyledCompon
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -263,11 +263,10 @@ export declare const UnCapturedContainer: import("@emotion/styled").StyledCompon
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLSpanElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -275,20 +274,21 @@ export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -308,7 +308,7 @@ export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -324,7 +324,7 @@ export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -334,7 +334,7 @@ export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -525,11 +525,10 @@ export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLSpanElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -537,20 +536,21 @@ export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -570,7 +570,7 @@ export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -586,7 +586,7 @@ export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -596,7 +596,7 @@ export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -788,11 +788,10 @@ export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
 export declare const GateWayIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const GatewayIconWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -800,20 +799,21 @@ export declare const GatewayIconWrapper: import("@emotion/styled").StyledCompone
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -833,7 +833,7 @@ export declare const GatewayIconWrapper: import("@emotion/styled").StyledCompone
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -849,7 +849,7 @@ export declare const GatewayIconWrapper: import("@emotion/styled").StyledCompone
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -859,7 +859,7 @@ export declare const GatewayIconWrapper: import("@emotion/styled").StyledCompone
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -1050,11 +1050,10 @@ export declare const GatewayIconWrapper: import("@emotion/styled").StyledCompone
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLSpanElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const GatewaysContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -1062,20 +1061,21 @@ export declare const GatewaysContainer: import("@emotion/styled").StyledComponen
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -1095,7 +1095,7 @@ export declare const GatewaysContainer: import("@emotion/styled").StyledComponen
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -1111,7 +1111,7 @@ export declare const GatewaysContainer: import("@emotion/styled").StyledComponen
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -1121,7 +1121,7 @@ export declare const GatewaysContainer: import("@emotion/styled").StyledComponen
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

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

@@ -1,3 +1,3 @@
 import { DueCellProps } from './type';
-declare function DueDateCell({ dueDate, expiryDate, remindedCount, isTextShown, ...props }: DueCellProps): import("react/jsx-runtime").JSX.Element;
+declare function DueDateCell({ dueDate, expiryDate, ...props }: DueCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default DueDateCell;

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

@@ -9,178 +9,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { useTheme } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import dayjs from 'dayjs';
-import { motion } from 'framer-motion';
-import { useTranslation } from 'react-i18next';
-import StyledBadge, { BadgeVariants } from '../../../CountBadge';
-import { TableCell } from '../../../TableCells';
-import Tooltip from '../../../Tooltip';
-import { dueDateBlueIcon, dueDateRedIcon, timerBlueIcon, expiredIcon, dueDateGrayIcon, remindedRedIcon } from '../../../../constants/index.js';
-import { DueDateCellContainer, DateIcon, ReminderTextLabel, ExpiredTextLabel } from './style';
+import { TableCell, Tooltip, RightLeftExpandingCenterChip } from '../../../index.js';
 import { formatDate } from './utils';
+import { TextLabel } from './style';
 function DueDateCell(_a) {
-    var { dueDate, expiryDate, remindedCount, isTextShown } = _a, props = __rest(_a, ["dueDate", "expiryDate", "remindedCount", "isTextShown"]);
-    const theme = useTheme();
-    const dueDateRef = useRef(null);
-    const expiryRef = useRef(null);
-    const [dueDateRefClientWidth, setDueDateRefClientWidth] = useState(0);
-    const [expiryRefClientWidth, setReminderRefClientWidth] = useState(0);
-    useEffect(() => {
-        var _a, _b;
-        setDueDateRefClientWidth((_a = dueDateRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth);
-        setReminderRefClientWidth((_b = expiryRef === null || expiryRef === void 0 ? void 0 : expiryRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
-    }, [isTextShown]);
-    const { t } = useTranslation();
-    const isDueDatePassed = dayjs(dueDate).isBefore(dayjs(), 'day');
-    const isDueDateAfterTomorrow = dayjs(dueDate).isAfter(dayjs().add(2, 'day'), 'day');
-    let icon = dueDateBlueIcon;
-    let color = theme.palette.info.dark;
-    const date = formatDate(dayjs(dueDate).valueOf());
-    let backgroundColor = theme.palette.custom['200'];
-    if (isDueDatePassed) {
-        icon = dueDateRedIcon;
-        color = theme.palette.error.main;
-        backgroundColor = theme.palette.custom['300'];
-    }
-    else if (isDueDateAfterTomorrow) {
-        icon = dueDateGrayIcon;
-        color = theme.palette.grey.A700;
-        backgroundColor = theme.palette.custom['400'];
-    }
-    let expiryDateTimeLeft = dayjs(expiryDate).diff(dayjs(), 'day');
-    let expiryDateTimeLeftText = 'days';
-    const isExpired = dayjs(expiryDate).isBefore(dayjs(), 'second');
-    if (expiryDateTimeLeft < 1) {
-        expiryDateTimeLeft = dayjs(expiryDate).diff(dayjs(), 'hour');
-        expiryDateTimeLeftText = 'hours';
-    }
-    if (expiryDateTimeLeft < 1) {
-        expiryDateTimeLeft = dayjs(expiryDate).diff(dayjs(), 'minute');
-        expiryDateTimeLeftText = 'minutes';
-    }
-    if (expiryDateTimeLeft < 1) {
-        expiryDateTimeLeft = dayjs(expiryDate).diff(dayjs(), 'second');
-        expiryDateTimeLeftText = 'seconds';
-    }
-    const isExpiryLeftTimeMoreThanOneDay = dayjs(expiryDate).diff(dayjs(), 'day') > 1;
-    const expiryDateTimestamp = dayjs(expiryDate).valueOf();
-    const timeLeftLabel = isExpiryLeftTimeMoreThanOneDay ? formatDate(expiryDateTimestamp) : `${expiryDateTimeLeft} ${expiryDateTimeLeftText} left`;
-    const expiredDate = formatDate(expiryDateTimestamp);
-    const expiredDateLabel = `Expired on ${expiredDate}`;
-    const shownLabel = isExpired ? expiredDateLabel : timeLeftLabel;
-    const isRemindedExpansionShown = remindedCount > 1;
-    const reminderLeftOffset = (dueDateRefClientWidth || 0) + (expiryRefClientWidth || 0);
-    return (_jsx(TableCell, Object.assign({}, props, { sx: {
-            position: 'relative',
-            overflow: 'visible',
-        } }, { children: _jsxs("div", Object.assign({ style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                gap: '8px',
-                overflow: 'visible',
-            } }, { children: [!!dueDate && (_jsx(Tooltip, Object.assign({ title: isTextShown ? '' : date }, { children: _jsxs(DueDateCellContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", ref: dueDateRef, sx: Object.assign({ zIndex: 28, position: 'absolute', overflow: 'visible' }, (isTextShown && { paddingInline: theme.spacing(1) })), background: backgroundColor, variants: {
-                            animate: Object.assign({}, (!isTextShown && { boxShadow: theme.shadows[4], paddingInlineEnd: theme.spacing(1) })),
-                        } }, { children: [isTextShown ? (_jsx("span", Object.assign({ style: {
-                                    color,
-                                } }, { children: isDueDatePassed ? 'Past Due' : `Due ${date}` }))) : (_jsx(DateIcon, { src: icon, alt: "icon" })), !isTextShown && (_jsx(motion.div, Object.assign({ style: {
-                                    display: 'none',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    gap: '4px',
-                                    width: 0,
-                                }, initial: { width: 0, opacity: 0 }, transition: {
-                                    animate: {
-                                        duration: 0.5,
-                                    },
-                                    fadeIn: {
-                                        duration: 0.2,
-                                    },
-                                }, variants: {
-                                    animate: {
-                                        width: 'auto',
-                                        display: 'flex',
-                                    },
-                                    fadeIn: {
-                                        transition: {
-                                            delay: 0.5,
-                                        },
-                                        opacity: 1,
-                                    },
-                                } }, { children: date && _jsxs("span", Object.assign({ style: { color } }, { children: [date, " "] })) })))] })) }))), expiryDate && (_jsx(Tooltip, Object.assign({ title: isTextShown ? '' : shownLabel }, { children: _jsxs(DueDateCellContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", ref: expiryRef, sx: Object.assign({ zIndex: 27, position: 'absolute', left: isTextShown ? (dueDateRefClientWidth || 0) + 8 : '32px' }, (isTextShown && { paddingInline: theme.spacing(1) })), background: isExpired ? theme.palette.custom['100'] : theme.palette.custom['50'], variants: {
-                            animate: Object.assign({}, (!isTextShown && { boxShadow: theme.shadows[4], paddingInlineEnd: theme.spacing(1) })),
-                        } }, { children: [isTextShown ? (_jsx(ExpiredTextLabel, Object.assign({ sx: {
-                                    color: isExpired ? theme.palette.custom[500] : theme.palette.info.dark,
-                                    background: isExpired ? `${theme.palette.custom[500]}0d` : `${theme.palette.info.dark}0d`,
-                                } }, { children: isExpired ? 'Expired' : `Expiry ${shownLabel}` }))) : (_jsx(DateIcon, { src: isExpired ? expiredIcon : timerBlueIcon, alt: "icon" })), !isTextShown && (_jsx(motion.div, Object.assign({ style: {
-                                    display: 'none',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    gap: '4px',
-                                    width: 0,
-                                }, initial: { width: 0, opacity: 0 }, transition: {
-                                    animate: {
-                                        duration: 0.5,
-                                    },
-                                    fadeIn: {
-                                        duration: 0.2,
-                                    },
-                                }, variants: {
-                                    animate: {
-                                        width: 'auto',
-                                        display: 'flex',
-                                    },
-                                    fadeIn: {
-                                        transition: {
-                                            delay: 0.5,
-                                        },
-                                        opacity: 1,
-                                    },
-                                } }, { children: shownLabel && _jsx("span", Object.assign({ style: { color: isExpired ? theme.palette.custom[500] : theme.palette.info.dark } }, { children: shownLabel })) })))] })) }))), remindedCount > 0 && (_jsx(Tooltip, Object.assign({ title: t('reminded') }, { children: _jsxs(DueDateCellContainer, Object.assign({ whileHover: isRemindedExpansionShown ? ['animate', 'fadeIn'] : [], animate: "start", sx: {
-                            zIndex: 26,
-                            left: isTextShown ? reminderLeftOffset + (reminderLeftOffset ? 16 : 0) : '64px',
-                            position: 'absolute',
-                            overflow: 'visible',
-                            border: `1px solid ${theme.palette.error.main}1A`,
-                            paddingInline: isTextShown ? theme.spacing(1) : theme.spacing(0.5),
-                        }, background: isTextShown ? theme.palette.common.white : theme.palette.custom['600'], variants: {
-                            animate: {
-                                boxShadow: theme.shadows[4],
-                            },
-                        } }, { children: [isTextShown ? (_jsx(ReminderTextLabel, { children: "Reminder" })) : (_jsx(DateIcon, { sx: {
-                                    width: '14px',
-                                    height: '14px',
-                                }, src: remindedRedIcon, alt: "icon" })), _jsx(motion.div, Object.assign({ style: {
-                                    display: 'none',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    gap: '4px',
-                                    width: 0,
-                                }, initial: { width: 0, opacity: 0 }, transition: {
-                                    animate: {
-                                        duration: 0.5,
-                                    },
-                                    fadeIn: {
-                                        duration: 0.2,
-                                    },
-                                }, variants: {
-                                    animate: {
-                                        width: 'auto',
-                                        display: 'flex',
-                                    },
-                                    fadeIn: {
-                                        transition: {
-                                            delay: 0.5,
-                                        },
-                                        opacity: 1,
-                                    },
-                                } }, { children: isRemindedExpansionShown && (_jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
-                                        background: theme.palette.error.main,
-                                        fontWeight: 'bold',
-                                        color: theme.palette.common.white,
-                                    } }, { children: remindedCount }))) }))] })) })))] })) })));
+    var { dueDate, expiryDate } = _a, props = __rest(_a, ["dueDate", "expiryDate"]);
+    const dueMeta = useMemo(() => ({ label: formatDate(dayjs(dueDate).valueOf()), tooltip: 'Due Date' }), [dueDate]);
+    const expiryMeta = useMemo(() => ({ label: formatDate(dayjs(expiryDate).valueOf()), tooltip: 'Expiry Date' }), [expiryDate]);
+    const renderChipContent = (meta) => (_jsx(Tooltip, Object.assign({ title: meta.tooltip }, { children: _jsx(TextLabel, { children: meta.label }) })));
+    const centerIcon = useMemo(() => (dueDate ? renderChipContent(dueMeta) : expiryDate ? renderChipContent(expiryMeta) : null), [dueMeta, expiryMeta, dueDate, expiryDate]);
+    const rightIcons = useMemo(() => (expiryDate && dueDate ? [renderChipContent(expiryMeta)] : []), [dueMeta, expiryMeta, dueDate, expiryDate]);
+    if (!dueDate && !expiryDate)
+        return null;
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { position: 'relative', overflow: 'visible' } }, { children: _jsx(RightLeftExpandingCenterChip, { sx: { justifyContent: 'flex-start' }, centerIcon: centerIcon, rightIcons: rightIcons }) })));
 }
 export default DueDateCell;