@tap-payments/os-micro-frontend-shared 0.0.45 → 0.0.47

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/Chip/Chip.js

@@ -13,7 +13,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from 'react';
 import { ChipStyled } from './style';
 const Chip = forwardRef((_a, ref) => {
-    var { icon, children } = _a, props = __rest(_a, ["icon", "children"]);
-    return (_jsxs(ChipStyled, Object.assign({ ref: ref }, props, (icon && { sx: { justifyContent: 'flex-start', gap: 1 } }), { children: [_jsx(_Fragment, { children: icon }), children] })));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { icon } = props;
+    return (_jsxs(ChipStyled, Object.assign({ ref: ref }, props, { children: [_jsx(_Fragment, { children: icon }), children] })));
 });
 export default Chip;

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

@@ -1,3 +1,3 @@
 import { GroupIconChipProps } from './type';
-declare const GroupIconChip: ({ order, children }: GroupIconChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const GroupIconChip: ({ order, children, getSourceAnimation: customGetSourceAnimation, sourceCount, expandDirection }: GroupIconChipProps) => import("react/jsx-runtime").JSX.Element;
 export default GroupIconChip;

package/build/components/Chip/GroupIconChip.js

@@ -2,10 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import ImageWrapper from '../ImageWrapper';
 import { useTheme } from '@mui/material';
-import { getSourceAnimation } from './style';
-const GroupIconChip = ({ order, children }) => {
+import { defaultGetSourceAnimation } from './style';
+const GroupIconChip = ({ order, children, getSourceAnimation: customGetSourceAnimation, sourceCount, expandDirection }) => {
+    const getSourceAnimation = customGetSourceAnimation || defaultGetSourceAnimation;
     const theme = useTheme();
-    const variants = useMemo(() => getSourceAnimation(order, theme.shadows[4]), [order, theme.shadows]);
+    const variants = useMemo(() => getSourceAnimation({
+        index: order,
+        shadow: theme.shadows[4],
+        itemsCount: sourceCount,
+        expandDirection,
+    }), [order, theme.shadows, getSourceAnimation, sourceCount, expandDirection]);
     return (_jsx(ImageWrapper, Object.assign({ order: order, variants: variants }, { children: children })));
 };
 export default GroupIconChip;

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

@@ -1,3 +1,3 @@
 import { GroupIconChipsProps } from './type';
-declare const GroupIconChips: ({ children, className }: GroupIconChipsProps) => import("react/jsx-runtime").JSX.Element;
+declare const GroupIconChips: ({ children, className, getSourceAnimation, expandDirection }: GroupIconChipsProps) => import("react/jsx-runtime").JSX.Element;
 export default GroupIconChips;

package/build/components/Chip/GroupIconChips.js

@@ -1,10 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { SourcesContainer, StyledSourceCell } from './style';
-const GroupIconChips = ({ children, className }) => {
+import GroupIconChip from './GroupIconChip';
+const GroupIconChips = ({ children, className, getSourceAnimation, expandDirection }) => {
     const sourceCount = React.Children.count(children);
-    return (_jsx(StyledSourceCell, { children: _jsx(SourcesContainer, Object.assign({ layout: true, className: className, whileHover: "animate", animate: "start", sourcesCount: sourceCount || 0, variants: { animate: { width: (sourceCount || 0) * (6 + 32) } }, style: {
+    const [cellDimentions, setCellDimentions] = useState({ width: 0, height: 0 });
+    const animationContainerRef = useRef(null);
+    useEffect(() => {
+        if (!animationContainerRef.current)
+            return;
+        const animationContainer = animationContainerRef.current;
+        setCellDimentions({
+            width: animationContainer.clientWidth,
+            height: animationContainer.clientHeight,
+        });
+    }, []);
+    const overrideChildren = useMemo(() => React.Children.map(children, (child) => {
+        if (!React.isValidElement(child) || child.type !== GroupIconChip) {
+            console.error(`⚠️ WARNING: "${GroupIconChips.name}" must contains only children of type "${GroupIconChip.name}"`);
+            return child;
+        }
+        return React.cloneElement(child, Object.assign(Object.assign({}, child.props), { sourceCount,
+            getSourceAnimation,
+            expandDirection }));
+    }), [children, getSourceAnimation, sourceCount, expandDirection]);
+    return (_jsx(StyledSourceCell, Object.assign({ "data-testid": "styled-source-cell", sx: Object.assign({}, cellDimentions) }, { children: _jsx(SourcesContainer, Object.assign({ ref: animationContainerRef, id: "test", layout: true, className: className, whileHover: "animate", animate: "start", sourcesCount: sourceCount, variants: { animate: { width: sourceCount * (6 + 32) } }, style: {
                 zIndex: 29,
-            } }, { children: children })) }));
+            } }, { children: overrideChildren })) })));
 };
 export default GroupIconChips;

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

@@ -1,4 +1,5 @@
 /// <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;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactDOM | null | undefined;
@@ -272,22 +273,4 @@ export declare const SourcesContainer: import("@emotion/styled").StyledComponent
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLSpanElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     sourcesCount: number;
 }, {}, {}>;
-export declare const getSourceAnimation: (index: number, shadow: string, xDelta?: number) => {
-    start: {
-        x: number;
-        transition: {
-            duration: number;
-            type: string;
-            ease: string;
-        };
-    };
-    animate: {
-        x: number;
-        transition: {
-            duration: number;
-            type: string;
-            ease: string;
-        };
-        boxShadow: string;
-    };
-};
+export declare const defaultGetSourceAnimation: GetSourceAnimationFunction;

package/build/components/Chip/style.js

@@ -17,34 +17,27 @@ export const ChipStyled = styled(forwardRef((props, ref) => {
     const _a = props, { className, variant = 'text' } = _a, restProps = __rest(_a, ["className", "variant"]);
     const calcClassName = `${className || ''} CustomVariant_${variant}`;
     return _jsx(Box, Object.assign({ ref: ref }, restProps, { className: calcClassName }));
-}))(({ theme }) => {
-    return {
-        border: `1px solid ${theme.palette.divider}`,
-        borderRadius: '30px',
-        backgroundColor: theme.palette.background.paper,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        '&.CustomVariant_text': {
+}), {
+    shouldForwardProp: (prop) => prop !== 'icon',
+})(({ theme, icon }) => {
+    return Object.assign(Object.assign({ border: `1px solid ${theme.palette.divider}`, borderRadius: '30px', backgroundColor: theme.palette.background.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }, (icon && { justifyContent: 'flex-start', gap: theme.spacing(1) })), { '&.CustomVariant_text': {
             padding: `${theme.spacing(0.75)} ${theme.spacing(1)}`,
             height: '30px',
             maxWidth: '150px',
-        },
-        '&.CustomVariant_circular': {
+        }, '&.CustomVariant_circular': {
             height: 24,
             width: 24,
-        },
-        '&.CustomVariant_pill-icon': {
+        }, '&.CustomVariant_pill-icon': {
             height: 24,
             width: 36,
-        },
-    };
+        } });
 });
 export const StyledSourceCell = styled('span')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
+    position: 'relative',
 }));
 export const SourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
     display: 'flex',
@@ -57,22 +50,27 @@ export const SourcesContainer = styled(motion.span)(({ theme, sourcesCount }) =>
     backgroundColor: theme.palette.background.paper,
     borderRadius: '16px',
 }));
-export const getSourceAnimation = (index, shadow, xDelta = 0) => ({
-    start: {
-        x: index * 6,
-        transition: {
-            duration: 0.3,
-            type: 'tween',
-            ease: 'easeIn',
+export const defaultGetSourceAnimation = (params) => {
+    const { index, xDelta = 39, shadow, itemsCount = 0, expandDirection = 'RIGHT' } = params;
+    const startDisplacement = (itemsCount - 1) * 6;
+    const result = {
+        start: {
+            x: index * 6,
+            transition: {
+                duration: 0.3,
+                type: 'tween',
+                ease: 'easeIn',
+            },
         },
-    },
-    animate: {
-        x: xDelta ? index * xDelta : index * 39,
-        transition: {
-            duration: 0.3,
-            type: 'tween',
-            ease: 'easeOut',
+        animate: {
+            x: expandDirection === 'RIGHT' ? index * xDelta : startDisplacement + -1 * ((itemsCount - 1 - index) * xDelta),
+            transition: {
+                duration: 0.3,
+                type: 'tween',
+                ease: 'easeOut',
+            },
+            boxShadow: shadow,
         },
-        boxShadow: shadow,
-    },
-});
+    };
+    return result;
+};

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

@@ -1,4 +1,5 @@
 import { BoxProps } from '@mui/material';
+import { AnimationProps } from 'framer-motion';
 import { PropsWithChildren } from 'react';
 export type ChipVariant = 'text' | 'circular' | 'pill-icon';
 export type ChipProps = PropsWithChildren<{
@@ -7,7 +8,20 @@ export type ChipProps = PropsWithChildren<{
 } & BoxProps>;
 export type GroupIconChipProps = PropsWithChildren<{
     order: number;
+    getSourceAnimation?: GetSourceAnimationFunction;
+    sourceCount?: number;
+    expandDirection?: GetSourceAnimationParams['expandDirection'];
 }>;
 export type GroupIconChipsProps = PropsWithChildren<{
     className?: string;
+    getSourceAnimation?: GetSourceAnimationFunction;
+    expandDirection?: GetSourceAnimationParams['expandDirection'];
 }>;
+export type GetSourceAnimationParams = {
+    index: number;
+    shadow: string;
+    xDelta?: number;
+    itemsCount?: number;
+    expandDirection?: 'LEFT' | 'RIGHT';
+};
+export type GetSourceAnimationFunction = (param: GetSourceAnimationParams) => AnimationProps['variants'];

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

@@ -9,24 +9,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TableCell from '../../TableCell';
 import Icon from '../../../Icon';
 import { getCountriesIcon } from '../../../../constants/index.js';
-import { EntityName, EntityWrapper, VerificationIcon } from './style';
+import { EntityName, EntityWrapper, VerificationIcon, EntityContainer, EntityInfoContainer, VerificationContainer, EmptyCell } from './style';
 import { verificationIcon } from './constants';
-import { Typography } from '@mui/material';
 import Tooltip from '../../../Tooltip';
 export default function EntityCell(_a) {
     var { entity, country, verificationStatus, licenseNumber } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber"]);
     const countryIcon = getCountriesIcon(country);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    const emptyCell = (_jsx(Typography, Object.assign({ sx: {
-            fontWeight: 400,
-            fontSize: 14,
-            lineHeight: '120%',
-            letterSpacing: 0,
-            color: '#B1B1B1',
-        } }, { children: "Not Available" })));
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: licenseNumber }, { children: _jsx(EntityWrapper, { children: entity ? (_jsxs(_Fragment, { children: [_jsx(Icon, { src: countryIcon, sx: { width: '16px', height: '11.73' } }), _jsx(EntityName, { children: entity }), _jsx(VerificationIcon, { src: icon })] })) : (emptyCell) }) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: licenseNumber }, { children: _jsx(EntityWrapper, { children: entity ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Icon, { src: countryIcon, sx: { width: '16px', height: '11.73' } }), _jsx(EntityName, { children: entity })] }), _jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
 }

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

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

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

@@ -25,3 +25,28 @@ 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/IndividualsCell/IndividualsCell.js

@@ -9,21 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TableCell from '../../TableCell';
-import { Count, IndividualName, IndividualsWrapper, VerificationIcon } from './style';
 import { verificationIcons } from './constants';
-import { Typography } from '@mui/material';
+import { IndividualsWrapper, IndividualName, VerificationIcon, Count, IndividualContainer, VerificationContainer, EmptyCell } from './style';
 import Tooltip from '../../../Tooltip';
 export default function IndividualsCell(_a) {
     var { id, status, count } = _a, props = __rest(_a, ["id", "status", "count"]);
     const icon = verificationIcons[status !== null && status !== void 0 ? status : 'incomplete'];
-    const emptyCell = (_jsx(Typography, Object.assign({ sx: {
-            fontWeight: 400,
-            fontSize: 14,
-            lineHeight: '120%',
-            letterSpacing: 0,
-            color: '#B1B1B1',
-        } }, { children: "Not Available" })));
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, Object.assign({ title: id }, { children: _jsx(IndividualName, { children: id }) })), _jsx(VerificationIcon, { src: icon }), count > 1 && (_jsx("div", { children: _jsxs(Count, { children: ["+", count] }) }))] })) : (emptyCell) }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(IndividualContainer, { children: [_jsx(Tooltip, Object.assign({ title: id }, { 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" })) }) })));
 }

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

@@ -3,3 +3,6 @@ export declare const IndividualsWrapper: import("@emotion/styled").StyledCompone
 export declare const IndividualName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VerificationIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const Count: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IndividualContainer: 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/IndividualsCell/style.js

@@ -15,7 +15,7 @@ export const IndividualName = styled('div')(({ theme }) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    maxWidth: '100%',
+    minWidth: '80px',
 }));
 export const VerificationIcon = styled('img')(() => ({
     width: '10.5px',
@@ -29,3 +29,23 @@ export const Count = styled('span')(({ theme }) => ({
     borderRadius: '4px',
     padding: '1px 2px',
 }));
+export const IndividualContainer = styled('div')({
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+});
+export const VerificationContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+});
+export const EmptyCell = styled('div')({
+    fontWeight: 400,
+    fontSize: 14,
+    lineHeight: '120%',
+    letterSpacing: 0,
+    color: '#B1B1B1',
+    textAlign: 'center',
+    width: '100%',
+});

package/build/constants/assets.d.ts

@@ -469,3 +469,7 @@ export declare const terminalTypeIcon: string;
 export declare const terminalBrushIcon: string;
 export declare const terminalBrushMuted: string;
 export declare const navigationIcon: string;
+export declare const babyBlueCheckIcon: string;
+export declare const digitalReceiptIcon: string;
+export declare const bankNoteIcon: string;
+export declare const terminalDeviceFrame: string;

package/build/constants/assets.js

@@ -473,3 +473,7 @@ export const terminalTypeIcon = `${lightUrl}/terminalTypeIcon.svg`;
 export const terminalBrushIcon = `${lightUrl}/terminalBrush.svg`;
 export const terminalBrushMuted = `${lightUrl}/terminalBrushMuted.svg`;
 export const navigationIcon = `${lightUrl}/navigationIcon.svg`;
+export const babyBlueCheckIcon = `${lightUrl}/babyBlueCheckIcon.svg`;
+export const digitalReceiptIcon = `${lightUrl}/digitalReceiptIcon.svg`;
+export const bankNoteIcon = `${lightUrl}/bankNoteIcon.svg`;
+export const terminalDeviceFrame = `${lightUrl}/terminalDeviceFrame.svg`;

package/package.json

@@ -1,130 +1,130 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.45",
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./build/index.js",
-      "require": "./build/index.js",
-      "types": "./build/index.d.ts"
-    },
-    "./constants": {
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js",
-      "types": "./build/constants/index.d.ts"
-    },
-    "./components": {
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js",
-      "types": "./build/components/index.d.ts"
-    },
-    "./components/*": {
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js",
-      "types": "./build/components/*/index.d.ts"
-    },
-    "./hooks": {
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js",
-      "types": "./build/hooks/index.d.ts"
-    },
-    "./utils": {
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js",
-      "types": "./build/utils/index.d.ts"
-    },
-    "./theme": {
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js",
-      "types": "./build/theme/index.d.ts"
-    },
-    "./types": {
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js",
-      "types": "./build/types/index.d.ts"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^6.14.2",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.0.47",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.js",
+      "types": "./build/index.d.ts"
+    },
+    "./constants": {
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js",
+      "types": "./build/constants/index.d.ts"
+    },
+    "./components": {
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js",
+      "types": "./build/components/index.d.ts"
+    },
+    "./components/*": {
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js",
+      "types": "./build/components/*/index.d.ts"
+    },
+    "./hooks": {
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js",
+      "types": "./build/hooks/index.d.ts"
+    },
+    "./utils": {
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js",
+      "types": "./build/utils/index.d.ts"
+    },
+    "./theme": {
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js",
+      "types": "./build/theme/index.d.ts"
+    },
+    "./types": {
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js",
+      "types": "./build/types/index.d.ts"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^6.14.2",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  }
+}