@tap-payments/os-micro-frontend-shared 0.1.241-test.1 → 0.1.241-test.3

package/build/components/CurrencyCountryFlag/CurrencyCountryFlag.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+interface CurrencyCountryFlagProps extends BoxProps {
+    code?: string;
+}
+declare function CurrencyCountryFlag({ code, ...props }: CurrencyCountryFlagProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CurrencyCountryFlag>;
+export default _default;

package/build/components/CurrencyCountryFlag/CurrencyCountryFlag.js

@@ -0,0 +1,22 @@
+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 } from "react/jsx-runtime";
+import { memo } from 'react';
+import Box from '@mui/material/Box';
+import { defaultCountryIcon, getCurrenciesIcon } from '../../constants/index.js';
+function CurrencyCountryFlag(_a) {
+    var { code = '' } = _a, props = __rest(_a, ["code"]);
+    return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCurrenciesIcon(code) || defaultCountryIcon, alt: code, loading: "lazy", onError: (e) => {
+            e.currentTarget.src = defaultCountryIcon;
+        } })));
+}
+export default memo(CurrencyCountryFlag);

package/build/components/CurrencyCountryFlag/index.d.ts

@@ -0,0 +1,2 @@
+import CurrencyCountryFlag from './CurrencyCountryFlag';
+export default CurrencyCountryFlag;

package/build/components/CurrencyCountryFlag/index.js

@@ -0,0 +1,2 @@
+import CurrencyCountryFlag from './CurrencyCountryFlag';
+export default CurrencyCountryFlag;

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

@@ -15,13 +15,11 @@ import { TableCell } from '../../../TableCells';
 import Tooltip from '../../../Tooltip';
 import { CurrencyIcon } from '../../../index.js';
 import { getCurrenciesIcon } from '../../../../constants/index.js';
-import { AmountCellContainer, FlagContainer } from './style';
-import { FlagIcon } from '../style';
+import { AmountCellContainer } from './style';
 import { ConversionTypeLabel, CurrencyInfo } from './components';
 const tableMode = 'default';
 function AmountCell(_a) {
     var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel"]);
-    const icon = currency && _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: "customer icon" });
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: _jsx(Box, { children: _jsx(ConversionTypeLabel, { tableMode: tableMode, conversionType: conversionType }) }) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencyInfo, { tableMode: tableMode, amount: amount, currency: currency }) }))] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: _jsx(Box, { children: _jsx(ConversionTypeLabel, { tableMode: tableMode, conversionType: conversionType }) }) })), currency && (_jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: _jsx("img", { src: getCurrenciesIcon(currency), alt: "customer icon" }) }))), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencyInfo, { tableMode: tableMode, amount: amount, currency: currency }) }))] }) })));
 }
 export default AmountCell;

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

@@ -4,7 +4,6 @@ export declare const AmountCellContainer: import("@emotion/styled").StyledCompon
 export declare const ConversionBadge: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     tableMode?: TableMode | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const FlagContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const CurrencySpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     tableMode?: TableMode | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -15,12 +15,6 @@ export const ConversionBadge = styled('span')(({ theme, tableMode }) => ({
     textTransform: 'uppercase',
     fontWeight: theme.typography.fontWeightBold,
 }));
-export const FlagContainer = styled('span')(() => ({
-    display: 'flex',
-    width: '16px',
-    height: '12px',
-    flexShrink: 0,
-}));
 export const CurrencySpan = styled('span')(({ theme, tableMode }) => ({
     fontSize: tableMode === 'sheet' ? '11px' : theme.typography.body2.fontSize,
     lineHeight: '17px',

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCurrenciesIcon } from '../../../../constants/index.js';
-import { Currency, FlagContainer, Wrapper } from './style';
-import { FlagIcon } from '../style';
+import { Currency, Wrapper } from './style';
 export function CurrencyCell({ currency }) {
-    return (_jsxs(Wrapper, { children: [_jsx(FlagContainer, { children: _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: currency }) }), _jsx(Currency, { children: currency })] }));
+    return (_jsxs(Wrapper, { children: [_jsx("img", { src: getCurrenciesIcon(currency), alt: currency }), _jsx(Currency, { children: currency })] }));
 }

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

@@ -5,5 +5,3 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<import("
 export declare const Currency: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").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/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const FlagContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const FlagIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

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

@@ -10,13 +10,3 @@ export const Currency = styled(Box)(({ theme }) => ({
     color: theme.palette.text.primary,
     lineHeight: '16.8px',
 }));
-export const FlagContainer = styled('span')(() => ({
-    display: 'flex',
-    width: '17px',
-    height: '12px',
-    flexShrink: 0,
-}));
-export const FlagIcon = styled('img')({
-    width: '100%',
-    height: '100%',
-});

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

@@ -2,7 +2,6 @@
 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>, {}>;
-export declare const FlagIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const TransparentButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export declare const BadgeWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

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

@@ -19,10 +19,6 @@ export const GeographyBox = styled('span', {
         objectFit: 'cover',
     },
 }));
-export const FlagIcon = styled('img')({
-    width: '100%',
-    height: '100%',
-});
 export const TransparentButton = styled('button')({
     background: 'transparent',
     border: 'none',

package/build/components/index.d.ts

@@ -122,3 +122,4 @@ export * from './ListLayout';
 export { default as MFWidgetLoader } from './MFWidgetLoader';
 export { default as BetaBanner } from './BetaBanner';
 export * from './Autocomplete';
+export { default as CurrencyCountryFlag } from './CurrencyCountryFlag';

package/build/components/index.js

@@ -122,3 +122,4 @@ export * from './ListLayout';
 export { default as MFWidgetLoader } from './MFWidgetLoader';
 export { default as BetaBanner } from './BetaBanner';
 export * from './Autocomplete';
+export { default as CurrencyCountryFlag } from './CurrencyCountryFlag';

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.241-test.1",
-  "testVersion": 1,
+  "version": "0.1.241-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",