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

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

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 export declare const DueDateCellContainer: 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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     "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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     "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;
@@ -266,3 +266,8 @@ export declare const DueDateCellContainer: import("@emotion/styled").StyledCompo
 export declare const DateIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReminderTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ExpiredTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextLabel: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,3 +1,4 @@
+import Text from '../../../Text';
 import { styled } from '@mui/material';
 import { motion } from 'framer-motion';
 export const DueDateCellContainer = styled(motion.div)(({ theme, background }) => ({
@@ -34,3 +35,9 @@ export const ExpiredTextLabel = styled('div')(({ theme }) => ({
     padding: '2px 0',
     color: theme.palette.error.main,
 }));
+export const TextLabel = styled(Text)(({ theme }) => ({
+    fontSize: '11px',
+    fontWeight: 500,
+    color: '#000',
+    cursor: 'default',
+}));

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

@@ -2,6 +2,4 @@ import { TableCellProps } from '@mui/material';
 export interface DueCellProps extends TableCellProps {
     dueDate?: string | Date;
     expiryDate?: string | Date;
-    remindedCount: number;
-    isTextShown?: boolean;
 }

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

@@ -1 +1,9 @@
 export declare function formatDate(date?: number): string;
+export declare function buildDueMeta(dueDate?: Date | string): {
+    icon: string;
+    label: string;
+} | null;
+export declare function buildExpiryMeta(expiryDate?: Date | string): {
+    icon: string;
+    label: string;
+} | null;

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

@@ -1,4 +1,6 @@
-import { formatCellDate } from '../../../../utils/index.js';
+import dayjs from 'dayjs';
+import { formatCellDate, isValidDate } from '../../../../utils/index.js';
+import { dueDateBlueIcon, dueDateRedIcon, dueDateGrayIcon, expiredIcon, timerBlueIcon } from '../../../../constants/index.js';
 export function formatDate(date) {
     return formatCellDate(date, {
         sameDay: '[Today at] h:mm A',
@@ -9,3 +11,43 @@ export function formatDate(date) {
         nextWeek: 'MMM DD, YYYY',
     });
 }
+export function buildDueMeta(dueDate) {
+    if (!isValidDate(dueDate))
+        return null;
+    let icon = dueDateBlueIcon;
+    if (dayjs(dueDate).isBefore(dayjs(), 'day')) {
+        icon = dueDateRedIcon;
+    }
+    else if (dayjs(dueDate).isAfter(dayjs().add(2, 'day'), 'day')) {
+        icon = dueDateGrayIcon;
+    }
+    return { icon, label: formatDate(dayjs(dueDate).valueOf()) };
+}
+export function buildExpiryMeta(expiryDate) {
+    if (!isValidDate(expiryDate))
+        return null;
+    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) // Use your custom formatDate function
+        : `${expiryDateTimeLeft} ${expiryDateTimeLeftText} left`;
+    const expiredDateLabel = `Expired on ${formatDate(expiryDateTimestamp)}`; // Use your function here too
+    const label = isExpired ? expiredDateLabel : timeLeftLabel;
+    const icon = isExpired ? expiredIcon : timerBlueIcon;
+    return { icon, label };
+}

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

@@ -10,14 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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 { 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 TableCell from '../../TableCell';
+import { EntityName, EntityWrapper, VerificationIcon, VerificationContainer, EntityWrapperContent } from './style';
+import { verificationIcon } from './constants';
 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({ hasClick: !!(props === null || props === void 0 ? void 0 : props.onClick), licenseNumber: licenseNumber }, { children: _jsxs(EntityWrapperContent, { children: [_jsx(Tooltip, Object.assign({ title: country ? getCountryNameByISO(country) : '' }, { children: _jsx(CountryFlag, { countryCode: country }) })), _jsx(EntityName, Object.assign({ licenseNumber: licenseNumber }, { children: licenseNumber || 'Not Available' })), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] }) })) })) })));
 }

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

@@ -1,7 +1,7 @@
-import { blueVerifyIcon, grayVerifyIcon, greenVerifyIcon } from '../../../../constants/index.js';
+import { darkBlueVerifyIcon, grayVerifyIcon, greenVerifyIcon } from '../../../../constants/index.js';
 export const verificationIcon = {
     incomplete: grayVerifyIcon,
-    complete: blueVerifyIcon,
-    reviewed: blueVerifyIcon,
+    complete: darkBlueVerifyIcon,
+    reviewed: darkBlueVerifyIcon,
     verified: greenVerifyIcon,
 };

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

@@ -1,9 +1,14 @@
 /// <reference types="react" />
-export declare const EntityWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EntityWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    licenseNumber?: string | undefined;
+    hasClick?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EntityWrapperContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 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 EntityName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    licenseNumber?: string | undefined;
+}, 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

@@ -1,52 +1,28 @@
 import { styled } from '@mui/material';
-export const EntityWrapper = styled('div')(({ theme }) => ({
+import Box from '@mui/material/Box';
+export const EntityWrapper = styled('div', { shouldForwardProp: (props) => !['licenseNumber', 'hasClick'].includes(props) })(({ theme, licenseNumber, hasClick }) => (Object.assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1), border: '1px solid #F2F2F2', borderRadius: '44px', padding: '3.5px 5px', height: '24px', cursor: hasClick ? 'pointer' : 'default' }, (licenseNumber && {
+    padding: '3.5px 8px',
+}))));
+export const EntityWrapperContent = styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
-    gap: theme.spacing(1),
-    border: '1.029px solid #F2F2F2',
-    borderRadius: '44px',
-    padding: '4px 8px',
-    lineHeight: '120%',
+    gap: '4px',
+    overflow: 'hidden',
+    width: '100%',
 }));
 export const EntityIcon = styled('img')(() => ({
     width: '16px',
     height: '11.73px',
 }));
-export const EntityName = styled('div')(({ theme }) => ({
-    fontSize: '14px',
-    fontWeight: 400,
-    color: theme.palette.text.primary,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    maxWidth: '100%',
-}));
+export const EntityName = styled('div', { shouldForwardProp: (props) => !['licenseNumber'].includes(props) })(({ theme, licenseNumber }) => (Object.assign({ fontSize: '14px', fontWeight: 400, color: theme.palette.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', margin: '0', width: '74px' }, (!licenseNumber && {
+    color: '#B1B1B1',
+    width: '84px',
+}))));
 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/IDButton/IDButton.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 interface IDButtonI {
-    rowId?: string;
+    icon: string;
+    id?: string;
 }
-declare function IDButton({ rowId }: IDButtonI): import("react/jsx-runtime").JSX.Element;
+declare function IDButton({ icon, id }: IDButtonI): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof IDButton>;
 export default _default;

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

@@ -3,17 +3,17 @@ import { memo, useState } from 'react';
 import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../../Tooltip';
-import { greenCheckIcon, idIcon } from '../../../../constants/index.js';
+import { greenCheckIcon } from '../../../../constants/index.js';
 import { copyText } from '../../../../utils/index.js';
 import { RowId, Button } from './style';
-function IDButton({ rowId }) {
+function IDButton({ icon, id }) {
     const [showCopy, setShowCopy] = useState(false);
     const [isHover, setIsHover] = useState(false);
     const { t } = useTranslation();
     const handleCopyRowId = () => {
-        if (rowId) {
+        if (id) {
             setShowCopy(true);
-            copyText(rowId);
+            copyText(id);
             const timer = setTimeout(() => {
                 setShowCopy(false);
             }, 2000);
@@ -30,8 +30,8 @@ function IDButton({ rowId }) {
         if (isHover)
             setIsHover(false);
     };
-    return (_jsx(Tooltip, Object.assign({ title: t('copy') }, { children: _jsx(Box, Object.assign({ sx: { position: 'relative', minWidth: '20px', height: '26px', cursor: 'pointer' } }, { children: _jsxs(Button, Object.assign({ onClick: handleCopyRowId, onMouseEnter: onShow, onMouseLeave: onHide, isHover: isHover, initial: { width: '20px' }, animate: {
-                    width: isHover ? 'auto' : '20px',
+    return (_jsx(Tooltip, Object.assign({ title: t('copy') }, { children: _jsx(Box, Object.assign({ sx: { position: 'relative', width: '24px', height: '24px', cursor: 'pointer' } }, { children: _jsxs(Button, Object.assign({ onClick: handleCopyRowId, onMouseEnter: onShow, onMouseLeave: onHide, isHover: isHover, initial: { width: '24px' }, style: Object.assign({}, (showCopy && { padding: '4px' })), animate: {
+                    width: isHover ? 'auto' : '24px',
                     position: isHover ? 'absolute' : 'static',
                 } }, { children: [isHover && (_jsx(RowId, Object.assign({ initial: {
                             opacity: 0,
@@ -39,6 +39,6 @@ function IDButton({ rowId }) {
                             opacity: isHover ? 1 : 0,
                         }, exit: {
                             opacity: 0,
-                        }, transition: { delay: isHover ? 0.3 : 0, duration: isHover ? 0.3 : 0.1 } }, { children: rowId }))), _jsx(Box, { component: "img", src: showCopy ? greenCheckIcon : idIcon, alt: "id" })] })) })) })));
+                        }, transition: { delay: isHover ? 0.3 : 0, duration: isHover ? 0.3 : 0.1 } }, { children: id }))), _jsx(Box, { component: "img", src: showCopy ? greenCheckIcon : icon, alt: "id" })] })) })) })));
 }
 export default memo(IDButton);

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

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 export declare const Button: 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 Button: 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;
@@ -46,7 +46,7 @@ export declare const Button: 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;
@@ -62,7 +62,7 @@ export declare const Button: 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;
@@ -72,7 +72,7 @@ export declare const Button: 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;
@@ -265,11 +265,10 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 export declare const RowId: 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;
@@ -277,20 +276,21 @@ export declare const RowId: 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;
@@ -310,7 +310,7 @@ export declare const RowId: 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;
@@ -326,7 +326,7 @@ export declare const RowId: 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;
@@ -336,7 +336,7 @@ export declare const RowId: 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;

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

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { motion } from 'framer-motion';
-export const Button = styled(motion.div, { shouldForwardProp: (props) => props !== 'isHover' })(({ theme, isHover }) => (Object.assign({ padding: '4px', paddingInlineStart: '8px', border: '1px solid transparent', display: 'flex', gap: '4px', alignItems: 'center', justifyContent: 'flex-end', backgroundColor: theme.palette.common.white, float: 'right', borderRadius: '56px' }, (isHover && {
+export const Button = styled(motion.div, { shouldForwardProp: (props) => props !== 'isHover' })(({ theme, isHover }) => (Object.assign({ paddingInlineStart: '8px', border: '1px solid transparent', display: 'flex', gap: '4px', alignItems: 'center', justifyContent: 'flex-end', backgroundColor: theme.palette.common.white, float: 'right', borderRadius: '56px' }, (isHover && {
     borderColor: 'rgba(92, 92, 92, 0.05)',
     boxShadow: '-7px 0px 8px 0px #F2F2F2',
     position: 'absolute',

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

@@ -17,5 +17,5 @@ import Tooltip from '../../../Tooltip';
 export default function IndividualsCell(_a) {
     var { id, status, count, name } = _a, props = __rest(_a, ["id", "status", "count", "name"]);
     const icon = verificationIcons[status !== null && status !== void 0 ? status : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(IndividualContainer, { children: [_jsx(Tooltip, Object.assign({ title: name }, { children: _jsx(IndividualName, { children: id }) })), _jsxs(VerificationContainer, { children: [_jsx(VerificationIcon, { src: icon }), count > 1 && (_jsx("div", { children: _jsxs(Count, { children: ["+", count] }) }))] })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: name }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(IndividualContainer, { children: [_jsx(IndividualName, { children: id }), _jsxs(VerificationContainer, { children: [_jsx(VerificationIcon, { src: icon }), count > 1 && (_jsx("div", { children: _jsxs(Count, { children: ["+", count - 1] }) }))] })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
 }

package/build/components/TableCells/CustomCells/IndividualsCell/constants.js

@@ -1,7 +1,7 @@
-import { blueVerifyIcon, grayVerifyIcon, greenVerifyIcon } from '../../../../constants/index.js';
+import { darkBlueVerifyIcon, grayVerifyIcon, greenVerifyIcon } from '../../../../constants/index.js';
 export const verificationIcons = {
     incomplete: grayVerifyIcon,
-    complete: blueVerifyIcon,
-    reviewed: blueVerifyIcon,
+    complete: darkBlueVerifyIcon,
+    reviewed: darkBlueVerifyIcon,
     verified: greenVerifyIcon,
 };

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

@@ -15,7 +15,7 @@ export const IndividualName = styled('div')(({ theme }) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    minWidth: '80px',
+    width: '84px',
 }));
 export const VerificationIcon = styled('img')(() => ({
     width: '10.5px',

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

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 export declare const DueDateCellContainer: 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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     "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 DueDateCellContainer: import("@emotion/styled").StyledCompo
     "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/InvoiceStatusCell/ChargeStatusIcon.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { type ChargeStatus } from '../../../TableCells';
+interface SmallChargeStatusIconProps {
+    chargeStatus?: ChargeStatus;
+    chargeTooltip?: string;
+    errorCode?: string;
+    iconStyles?: CSSProperties;
+    iconWrapperStyles?: CSSProperties;
+}
+export declare function ChargeStatusIcon({ chargeStatus, chargeTooltip, errorCode, iconStyles, iconWrapperStyles }: Readonly<SmallChargeStatusIconProps>): import("react/jsx-runtime").JSX.Element | null;
+export {};