@tap-payments/os-micro-frontend-shared 0.1.291 → 0.1.292

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

@@ -10,14 +10,13 @@ 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 { BrandsWrapper, Label } from './style';
-import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
-import { Box } from '@mui/material';
 import IconWithBadge from '../../../IconWithBadge';
+import TableCell from '../../TableCell';
+import { BrandsWrapper, BrandsWrapperContent, Label } from './style';
+import { verificationIcon } from './constants';
 export default function BrandsCell(_a) {
     var { brand, verificationStatus, hideStatus } = _a, props = __rest(_a, ["brand", "verificationStatus", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsx(BrandsWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ sx: Object.assign({}, (!brand.name && { color: '#B1B1B1' })) }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 10, containerSize: 10, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsx(BrandsWrapper, Object.assign({ hasClick: !!props.onClick }, { children: _jsxs(BrandsWrapperContent, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ brandName: brand.name }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 10, containerSize: 10, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] }) })) })) })));
 }

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

@@ -1,5 +1,12 @@
 /// <reference types="react" />
-export declare const BrandsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BrandsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasClick?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BrandsWrapperContent: 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 BrandName: 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 Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    brandName?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

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

@@ -1,12 +1,21 @@
 import { styled } from '@mui/material';
-export const BrandsWrapper = styled('div')(({ theme }) => ({
+import Box from '@mui/material/Box';
+export const BrandsWrapper = styled('div', { shouldForwardProp: (props) => !['hasClick'].includes(props) })(({ theme, hasClick }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
     border: '1px solid #F2F2F2',
     borderRadius: '44px',
-    padding: '4px 8px',
-    lineHeight: '120%',
+    padding: '3.5px 5px',
+    height: '24px',
+    cursor: hasClick ? 'pointer' : 'default',
+}));
+export const BrandsWrapperContent = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    overflow: 'hidden',
+    width: '100%',
 }));
 export const BrandName = styled('div')(({ theme }) => ({
     fontSize: '14px',
@@ -17,13 +26,7 @@ export const VerificationIcon = styled('img')(() => ({
     width: '8px',
     height: '8px',
 }));
-export const Label = styled('p')(({ theme }) => ({
-    fontSize: '14px',
-    fontWeight: 400,
-    color: theme.palette.text.primary,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    width: '74px',
-    margin: '0',
-}));
+export const Label = styled('p', { shouldForwardProp: (props) => !['brandName'].includes(props) })(({ theme, brandName }) => (Object.assign({ fontSize: '14px', fontWeight: 400, color: theme.palette.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '74px', margin: '0' }, (!brandName && {
+    color: '#B1B1B1',
+    width: '84px',
+}))));

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

@@ -10,15 +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, VerificationContainer } from './style';
-import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
 import { CountryFlag } from '../../../index.js';
 import { getCountryNameByISO } from '../../../../utils/index.js';
-import { Box } from '@mui/material';
+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, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { countryCode: country }) })), _jsx(EntityName, Object.assign({ sx: Object.assign({}, (!licenseNumber && { color: '#B1B1B1' })) }, { children: licenseNumber || 'Not Available' })), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) })) })) })));
+    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: 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/style.d.ts

@@ -1,6 +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 VerificationContainer: 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,27 +1,23 @@
 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: '1px 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%',
-    margin: '0',
-}));
+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',

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/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.1.291",
+  "version": "0.1.292",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",