@tap-payments/os-micro-frontend-shared 0.1.272 → 0.1.273-test.1

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { GetSourceAnimationFunction } from './type';
 export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: import("./type").ChipVariant | undefined;

package/build/components/ColorPicker/ColorPicker.d.ts

@@ -7,6 +7,7 @@ type ColorPickerProps = {
     sx?: SxProps;
     options?: {
         hideReset?: boolean;
+        disableAlpha?: boolean;
     };
 };
 declare const ColorPicker: ({ id, value, onChange, onReset, sx, options }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/ColorPicker/ColorPicker.js

@@ -8,8 +8,14 @@ import { StyledCloseButtonWrapper } from './style';
 import { closeXIcon } from '../../constants/index.js';
 import ColorPickerPanel from './ColorPickerPanel';
 import { Popper } from '@mui/material';
-const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options }) => {
+const DEFAULT_OPTIONS = {
+    hideReset: false,
+    disableAlpha: false,
+};
+const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options = DEFAULT_OPTIONS }) => {
     const [anchorEl, setAnchorEl] = useState(null);
+    const { disableAlpha = false, hideReset = false } = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+    console.log('disableAlpha', disableAlpha);
     const rootRef = useRef(null);
     const handleOpen = useCallback(() => {
         setAnchorEl(rootRef.current);
@@ -18,9 +24,9 @@ const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options })
         setAnchorEl(null);
     }, []);
     const handleConfirm = useCallback((newValue) => {
-        onChange(newValue);
+        onChange(disableAlpha ? newValue.substring(0, 7) : newValue);
         setAnchorEl(null);
-    }, [onChange]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !(options === null || options === void 0 ? void 0 : options.hideReset) ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsx(ColorPickerPanel, { initialValue: value, onCancel: handleCancel, onConfirm: handleConfirm }) }))] })) })));
+    }, [onChange, disableAlpha]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !hideReset ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsx(ColorPickerPanel, { initialValue: value, onCancel: handleCancel, onConfirm: handleConfirm, disableAlpha: disableAlpha }) }))] })) })));
 };
 export default ColorPicker;

package/build/components/ColorPicker/ColorPickerPanel.d.ts

@@ -2,6 +2,7 @@ export type ColorPickerPanelProps = {
     initialValue?: string;
     onCancel: () => void;
     onConfirm: (newValue: string) => void;
+    disableAlpha?: boolean;
 };
-declare const ColorPickerPanel: ({ initialValue, onCancel, onConfirm }: ColorPickerPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColorPickerPanel: ({ initialValue, onCancel, onConfirm, disableAlpha }: ColorPickerPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default ColorPickerPanel;

package/build/components/ColorPicker/ColorPickerPanel.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RgbaColorPicker } from 'react-colorful';
+import { RgbaColorPicker, RgbColorPicker } from 'react-colorful';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import { hexa2Rgba, rgba2Hexa } from '../../utils/index.js';
@@ -20,7 +20,7 @@ import { CancelButton, ConfirmButton, Footer, StyledColorWidgetWrapper } from '.
 import ColorSchemeSelect from './ColorSchemeSelect';
 import RGBAFields from './RGBAFields';
 import HexaFields from './HexaFields';
-const ColorPickerPanel = ({ initialValue = '#ffffff', onCancel, onConfirm }) => {
+const ColorPickerPanel = ({ initialValue = '#ffffff', onCancel, onConfirm, disableAlpha = false }) => {
     const [colorScheme, setColorScheme] = useState('RGB');
     const [color, setColor] = useState(() => {
         const _a = hexa2Rgba(initialValue).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
@@ -34,8 +34,23 @@ const ColorPickerPanel = ({ initialValue = '#ffffff', onCancel, onConfirm }) =>
     }, [initialValue, onCancel]);
     const handleConfirm = useCallback(() => {
         const { a: alpha } = color, rest = __rest(color, ["a"]);
-        onConfirm(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha })));
-    }, [color, onConfirm]);
-    return (_jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsxs(Stack, Object.assign({ mt: 2, spacing: 1, direction: "row" }, { children: [_jsx(ColorSchemeSelect, { scheme: colorScheme, setScheme: setColorScheme }), colorScheme === 'RGB' ? (_jsx(RGBAFields, { value: Object.assign(Object.assign({}, color), { a: Math.round(color.a * 100) }), onChange: (newColor) => setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a / 100 })) })) : (_jsx(HexaFields, { value: Object.assign(Object.assign({}, color), { a: color.a }), onChange: (newColor) => setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a })) }))] })), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })));
+        onConfirm(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha: disableAlpha ? 1 : alpha })));
+    }, [color, onConfirm, disableAlpha]);
+    const handleColorChange = useCallback((newColor) => {
+        if (disableAlpha) {
+            setColor(Object.assign(Object.assign({}, newColor), { a: 1 }));
+        }
+        else {
+            setColor(newColor);
+        }
+    }, [disableAlpha]);
+    const handleRGBAFieldsChange = useCallback((newColor) => {
+        setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a / 100 }));
+    }, []);
+    const handleHexaFieldsChange = useCallback((newColor) => {
+        setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a }));
+    }, []);
+    const PickerArea = disableAlpha ? RgbColorPicker : RgbaColorPicker;
+    return (_jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(PickerArea, { color: color, onChange: handleColorChange }), _jsxs(Stack, Object.assign({ mt: 2, spacing: 1, direction: "row" }, { children: [_jsx(ColorSchemeSelect, { scheme: colorScheme, setScheme: setColorScheme }), colorScheme === 'RGB' ? (_jsx(RGBAFields, { value: Object.assign(Object.assign({}, color), { a: Math.round(color.a * 100) }), onChange: handleRGBAFieldsChange, disableAlpha: disableAlpha })) : (_jsx(HexaFields, { value: Object.assign(Object.assign({}, color), { a: color.a }), onChange: handleHexaFieldsChange, disableAlpha: disableAlpha }))] })), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })));
 };
 export default ColorPickerPanel;

package/build/components/ColorPicker/HexaFields.d.ts

@@ -2,6 +2,7 @@ import { RgbaColor } from 'react-colorful';
 type HexaFieldsProps = {
     value: RgbaColor;
     onChange: (newValue: RgbaColor) => void;
+    disableAlpha?: boolean;
 };
-declare const HexaFields: ({ value, onChange }: HexaFieldsProps) => import("react/jsx-runtime").JSX.Element;
+declare const HexaFields: ({ value, onChange, disableAlpha }: HexaFieldsProps) => import("react/jsx-runtime").JSX.Element;
 export default HexaFields;

package/build/components/ColorPicker/HexaFields.js

@@ -6,7 +6,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import InputAdornment from '@mui/material/InputAdornment';
 import { StyledInput } from './style';
-const HexaFields = ({ value, onChange }) => {
+const HexaFields = ({ value, onChange, disableAlpha = false }) => {
     const colorAsHex = useMemo(() => {
         const color = Color.rgb(value.r, value.g, value.b, value.a);
         return color.hex().replace('#', '');
@@ -71,13 +71,13 @@ const HexaFields = ({ value, onChange }) => {
                     },
                 }, InputProps: {
                     startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: (theme) => alpha(theme.palette.text.primary, 0.5), display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "#" })) }))),
-                } }), _jsx(StyledInput, { type: "number", value: alphaPercent, onChange: handleAlphaChange, inputProps: { min: 0, max: 100 }, sx: {
+                } }), !disableAlpha && (_jsx(StyledInput, { type: "number", value: alphaPercent, onChange: handleAlphaChange, inputProps: { min: 0, max: 100 }, sx: {
                     flex: 0.8,
                     '& .MuiOutlinedInput-root': {
                         pr: 1,
                     },
                 }, InputProps: {
                     endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: "text.primary", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
-                } })] })));
+                } }))] })));
 };
 export default HexaFields;

package/build/components/ColorPicker/RGBAFields.d.ts

@@ -2,6 +2,7 @@ import { RgbaColor } from 'react-colorful';
 type RGBAFieldsProps = {
     value: RgbaColor;
     onChange: (newValue: RgbaColor) => void;
+    disableAlpha?: boolean;
 };
-declare const RGBAFields: ({ value, onChange }: RGBAFieldsProps) => import("react/jsx-runtime").JSX.Element;
+declare const RGBAFields: ({ value, onChange, disableAlpha }: RGBAFieldsProps) => import("react/jsx-runtime").JSX.Element;
 export default RGBAFields;

package/build/components/ColorPicker/RGBAFields.js

@@ -1,25 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import InputAdornment from '@mui/material/InputAdornment';
 import { StyledInput } from './style';
-const RGBAFields = ({ value, onChange }) => {
-    const handleChange = (key, max) => (event) => {
-        let num = parseInt(event.target.value, 10);
+const RGBAFields = ({ value, onChange, disableAlpha = false }) => {
+    const [internalValue, setInternalValue] = useState(value);
+    const { r, g, b, a } = internalValue;
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const handleValueBoundaries = useCallback((num, max) => {
         if (isNaN(num))
             num = 0;
         if (num < 0)
             num = 0;
         if (num > max)
             num = max;
-        onChange(Object.assign(Object.assign({}, value), { [key]: num }));
-    };
-    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1 }, { children: [_jsx(StyledInput, { type: "number", value: value.r, onChange: handleChange('r', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.g, onChange: handleChange('g', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.b, onChange: handleChange('b', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.a, onChange: handleChange('a', 100), inputProps: { min: 0, max: 100, style: { textAlign: 'center' } }, variant: "outlined", sx: {
+        console.log('num', num);
+        return num;
+    }, []);
+    const handleChange = useCallback((key, max) => (event) => {
+        setInternalValue(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(+event.target.value, max) }));
+    }, [internalValue, handleValueBoundaries]);
+    const handleBlur = useCallback((key, max) => {
+        onChange(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(internalValue[key], max) }));
+    }, [onChange, internalValue, handleValueBoundaries]);
+    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1 }, (disableAlpha && { flex: 1 }), { children: [_jsx(StyledInput, Object.assign({ type: "number", value: r, onBlur: () => handleBlur('r', 255), onChange: handleChange('r', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: g, onBlur: () => handleBlur('g', 255), onChange: handleChange('g', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: b, onBlur: () => handleBlur('b', 255), onChange: handleChange('b', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), !disableAlpha && (_jsx(StyledInput, { type: "number", value: a, onBlur: () => handleBlur('a', 100), onChange: handleChange('a', 100), inputProps: { min: 0, max: 100, style: { textAlign: 'center' } }, variant: "outlined", sx: {
                     '& .MuiOutlinedInput-root': {
                         pr: 1,
                     },
                 }, InputProps: {
                     endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
-                }, size: "small" })] })));
+                }, size: "small" }))] })));
 };
 export default RGBAFields;

package/build/components/ColorPicker/style.js

@@ -34,18 +34,19 @@ export const StyledColorWidgetWrapper = styled(Box)(({ theme }) => ({
             },
         },
         '&__hue': {
-            marginBottom: theme.spacing(2),
             borderRadius: '4px',
-            height: '16px',
+            height: '8px',
             '&-pointer': {
                 width: 10,
                 height: 10,
             },
         },
         '&__alpha': {
+            marginTop: theme.spacing(2),
+            marginBottom: 0,
             border: 0,
             borderRadius: '4px',
-            height: '16px',
+            height: '8px',
             '&-pointer': {
                 width: 10,
                 height: 10,

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AgreementImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DialogWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/ImageWrapper/ImageWrapper.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const FOOTER_HEIGHT = 37;
 export declare const TITLE_BAR_HEIGHT = "32px";
 export declare const VIEWER_HEIGHT = 545;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import type { SxProps, Theme } from '@mui/material/styles';
 export declare const CHIP_GAP = 3;
 export declare const DEFAULT_CHIP_MIN_WIDTH = 24;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import type { SxProps, Theme } from '@mui/material/styles';
 export declare const CHIP_GAP = 3;
 export declare const CenterIconWrapper: import("@emotion/styled").StyledComponent<{

package/build/components/SearchButton/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

package/build/components/StatusIcons/AuthIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { TableMode } from '../../../../types/index.js';
 export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     tableMode?: TableMode | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,3 +1,9 @@
-import { DateCellProps } from '../type';
-declare function DateCell({ value, format: dateFormat, flagIcon, hasFlag, tableMode, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
-export default DateCell;
+import { DateCellBaseProps } from '../../../index.js';
+interface DateCellProps extends DateCellBaseProps {
+    currentTimezone?: string;
+    timezoneOffset?: number;
+    defaultTimezoneOffset?: number;
+    hideTimezoneIcon?: boolean;
+}
+export default function DateCell({ value, currentTimezone, timezoneOffset, defaultTimezoneOffset, hideTimezoneIcon, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -10,20 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { TableCell } from '../../../TableCells';
-import Tooltip from '../../../Tooltip';
-import CountryFlag from '../../../CountryFlag';
-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: getCountryNameByISO(flagIcon || '') }, { children: _jsx(CountryFlag, { countryCode: 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',
-                    }, className: "geography-box" }, { children: icon }))), _jsx(Box, Object.assign({ sx: Object.assign({}, (tableMode === 'sheet' && { fontSize: '11px' })) }, { children: renderedValue }))] }) })));
+import Box from '@mui/material/Box';
+import { Tooltip } from '../../../index.js';
+import DateViewer from './DateViewer';
+import { greyTimezoneIcon, TIMEZONES } from '../../../../constants/index.js';
+import { changeDateTimezone, formatCellDate } from '../../../../utils/index.js';
+export default function DateCell(_a) {
+    var { value, currentTimezone = TIMEZONES.UTC, timezoneOffset = 0, defaultTimezoneOffset = 0, hideTimezoneIcon = false } = _a, props = __rest(_a, ["value", "currentTimezone", "timezoneOffset", "defaultTimezoneOffset", "hideTimezoneIcon"]);
+    const formatDate = (targetTimezone) => changeDateTimezone(value, { currentTimezone, targetTimezone });
+    const formattedDate = formatDate(timezoneOffset);
+    const formattedDefaultDate = formatDate(defaultTimezoneOffset);
+    const renderDefaultDate = formatCellDate(formattedDefaultDate);
+    const showTimezoneIcon = !hideTimezoneIcon && defaultTimezoneOffset !== timezoneOffset;
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '8px' } }, { children: [_jsx(DateViewer, Object.assign({ value: formattedDate }, props)), showTimezoneIcon && (_jsx(Tooltip, Object.assign({ title: renderDefaultDate }, { children: _jsx("img", { src: greyTimezoneIcon, width: 14, alt: "timezone" }) })))] })));
 }
-export default DateCell;

package/build/components/TableCells/CustomCells/DateCell/DateViewer.d.ts

@@ -0,0 +1,3 @@
+import { DateCellBaseProps } from '../type';
+declare function DateViewer({ value, format: dateFormat, flagIcon, hasFlag, tableMode, ...props }: DateCellBaseProps): import("react/jsx-runtime").JSX.Element;
+export default DateViewer;

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

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { TableCell } from '../../../TableCells';
+import Tooltip from '../../../Tooltip';
+import CountryFlag from '../../../CountryFlag';
+import { formatCellDate, getCountryNameByISO } from '../../../../utils/index.js';
+import { DateCellContainer } from './style';
+import { GeographyBox } from '../style';
+import { Box } from '@mui/material';
+function DateViewer(_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: getCountryNameByISO(flagIcon || '') }, { children: _jsx(CountryFlag, { countryCode: 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',
+                    }, className: "geography-box" }, { children: icon }))), _jsx(Box, Object.assign({ sx: Object.assign({}, (tableMode === 'sheet' && { fontSize: '11px' })) }, { children: renderedValue }))] }) })));
+}
+export default DateViewer;

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

@@ -1 +1,2 @@
+export { default as DateViewer } from './DateViewer';
 export { default as DateCell } from './DateCell';

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

@@ -1 +1,2 @@
+export { default as DateViewer } from './DateViewer';
 export { default as DateCell } from './DateCell';

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,2 +1,2 @@
-import { DateCellProps } from '../type';
-export default function PayoutDateCell({ value, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
+import { DateCellBaseProps } from '../type';
+export default function PayoutDateCell({ value, ...props }: DateCellBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ProductCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundChargeCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;
@@ -266,7 +265,7 @@ export declare const RefundCellContainer: import("@emotion/styled").StyledCompon
     isFullyUsed?: boolean | undefined;
 }, {}, {}>;
 export declare const PercentageContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DateContainer: import("@emotion/styled").StyledComponent<import("..").DateCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const DateContainer: import("@emotion/styled").StyledComponent<import("..").DateCellBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const PiePercentage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     percentage: number;
     isCapture?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { motion } from 'framer-motion';
-import DateCell from '../DateCell/DateCell';
+import DateViewer from '../DateCell/DateViewer';
 import Box from '@mui/material/Box';
 export const RefundCellContainer = styled(motion.div)(({ theme }) => ({
     display: 'flex',
@@ -32,7 +32,7 @@ export const PercentageContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(0.5),
     lineHeight: 0,
 }));
-export const DateContainer = styled(DateCell)(({ theme }) => ({
+export const DateContainer = styled(DateViewer)(({ theme }) => ({
     fontSize: '12px',
     fontWeight: theme.typography.fontWeightRegular,
     color: theme.palette.secondary.main,

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "Global" | "Regional" | "Local" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -5,7 +5,7 @@ import { getGeographyBoxColor } from '../../../utils/index.js';
 import type { ActionType, FlagType } from './ActionCell';
 export type GeographyBoxVariant = keyof ReturnType<typeof getGeographyBoxColor>;
 export type PaymentMethod = 'VISA' | 'card' | 'MASTERCARD' | 'APPLE_PAY' | 'KNET' | 'MADA';
-export interface DateCellProps extends TableCellProps {
+export interface DateCellBaseProps extends TableCellProps {
     value: string | Date;
     format?: object;
     flagIcon?: string;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.272",
-  "testVersion": 0,
+  "version": "0.1.273-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -164,4 +164,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}