@tap-payments/os-micro-frontend-shared 0.0.44 → 0.0.46

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

@@ -24,5 +24,5 @@ export default function BrandsCell(_a) {
         overlayIcon: icon ? _jsx(VerificationIcon, { src: icon }) : null,
         label: brand.name,
     };
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(BrandsWrapper, { children: [_jsx(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px' }, { children: _jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon, label: item.label }, item.label) })), _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsx(Label, { children: brand.name }) }))] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden' } }, { children: [_jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
 }

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

@@ -5,6 +5,7 @@ export const BrandsWrapper = styled('div')(({ theme }) => ({
     gap: theme.spacing(1),
     borderRadius: '44px',
     lineHeight: '120%',
+    cursor: 'pointer',
 }));
 export const BrandName = styled('div')(({ theme }) => ({
     fontSize: '14px',

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, { 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",