@tap-payments/os-micro-frontend-shared 0.1.99 → 0.1.101-test.5

package/build/components/StatusChip/StatusChip.d.ts

@@ -1,3 +1,3 @@
 import { ChipProps } from './type';
-declare const StatusChip: ({ children, unknownText, copyText, expandDirection, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusChip: ({ children, unknownText, copyText, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -18,7 +18,7 @@ import { copyIcon, greenCheckIcon } from '../../constants/index.js';
 import { unknownGeographyColors } from './constants';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
 const StatusChip = (_a) => {
-    var { children, unknownText, copyText, expandDirection = 'right' } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection"]);
+    var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
     const isSelected = props.isSelected;
@@ -38,15 +38,12 @@ const StatusChip = (_a) => {
             };
         }
     };
-    const isCopyActive = isSelected && copyText;
-    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(motion.div, Object.assign({ style: { position: 'absolute', top: 0, zIndex: isSelected ? 3 : 0 }, animate: {
-                    left: isCopyActive && expandDirection === 'left' ? -12 : 0,
-                }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
-                            paddingRight: isCopyActive ? 12 : 0,
-                        }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isCopyActive && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0, x: -5 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -2 }, transition: { delay: 0.2, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
-                                            height: 12,
-                                            width: 12,
-                                            objectFit: 'contain',
-                                        } }) })) })] })) })) }))] })));
+    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
+                        paddingRight: isSelected && copyText ? 12 : 0,
+                    }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { delay: isSelected ? 0.2 : 0, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
+                                        height: 12,
+                                        width: 12,
+                                        objectFit: 'contain',
+                                    } }) })) })] })) }))] })));
 };
 export default StatusChip;

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

@@ -11,7 +11,6 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     maxWidth?: string | undefined;
     isSelected?: boolean | undefined;
     copyText?: string | undefined;
-    expandDirection?: "left" | "right" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & 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/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {

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

@@ -10,5 +10,4 @@ export type ChipProps = PropsWithChildren<{
     maxWidth?: string;
     isSelected?: boolean;
     copyText?: string;
-    expandDirection?: 'left' | 'right';
 } & BoxProps>;

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

@@ -30,11 +30,10 @@ export default function ApplicationStatusCell(_a) {
             tooltip: 'Acceptance',
             enabled: isAcceptanceEnabled,
             shown: !hideAcceptance,
+            zIndex: isAcceptanceEnabled && !isPayoutEnabled ? 3 : 1,
         },
-        { icon: isPayoutEnabled ? payoutsGreenIcon : payoutWindowIcon, tooltip: 'Payout', enabled: isPayoutEnabled, shown: !hidePayout },
-    ]
-        .filter((app) => app.shown)
-        .sort((a, b) => (a.enabled !== b.enabled && b.enabled ? -1 : 0)), [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
+        { icon: isPayoutEnabled ? payoutsGreenIcon : payoutWindowIcon, tooltip: 'Payout', enabled: isPayoutEnabled, shown: !hidePayout, zIndex: 2 },
+    ].filter((app) => app.shown), [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
     const appsStatus = useMemo(() => apps.map((app, index) => {
         const sourceTooltip = app.tooltip;
         return (_jsx(Tooltip, Object.assign({ onOpen: () => {
@@ -43,6 +42,7 @@ export default function ApplicationStatusCell(_a) {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: appStatusAnimation(index, theme.shadows[4], 40), sx: {
                     width: '36px',
+                    zIndex: app.zIndex + 6,
                 } }, { children: _jsx(IconWithBadge, { mainIcon: app.icon, mainIconSize: 16, containerSize: 16, sx: { borderRadius: '40px' }, onError: (e) => {
                         e.currentTarget.src = app.icon;
                         e.currentTarget.style.borderRadius = '0px';

package/build/components/VirtualTables/SheetViewVirtualTable/components/LoadingMainTable.js

@@ -10,10 +10,13 @@ function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, s
     return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',
+                            flex: '1 1 auto',
+                            height: '100%',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
                                 height: '100%',
                                 display: 'flex',
                                 flexDirection: 'column',
+                                flex: '1 1 auto',
                             } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })));
 }
 export default memo(LoadingMainTable);

package/build/components/VirtualTables/SheetViewVirtualTable/components/MainTable.js

@@ -10,6 +10,13 @@ function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHead
     return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',
-                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
+                            flex: '1 1 auto',
+                            height: '100%',
+                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                                height: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flex: '1 1 auto',
+                            } }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
 }
 export default memo(MainTable);

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableLoading.js

@@ -1,19 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { styled } from '@mui/material/styles';
 import uniqueId from 'lodash/uniqueId';
-import { calculateMaxAllowedRows } from '../../../../utils/index.js';
 import SheetViewTableRowLoading from './SheetViewTableRowLoading';
 const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
+    height: '100%',
     overflow: 'hidden',
     paddingInline: isLoaded && !isPinned ? '32px' : '0px',
     backgroundColor: isLoaded && !isPinned ? 'rgba(255, 255, 255, 0.60)' : 'none',
     filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
     marginTop: isLoaded && !isPinned ? '1rem' : '0',
 }));
+const LoadingContentWrapper = styled('div')({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+});
 function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, }) {
-    let maxAllowedRows = rowsCount || calculateMaxAllowedRows(isLoaded, isLoading);
-    maxAllowedRows = rowsCount || Math.max(maxAllowedRows, 25);
-    return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
+    const ROW_HEIGHT = 28;
+    return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: _jsx(AutoSizer, { children: ({ height }) => {
+                const calculatedRows = Math.floor(height / ROW_HEIGHT);
+                const maxAllowedRows = rowsCount || Math.max(calculatedRows, 1);
+                return (_jsx(LoadingContentWrapper, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) }));
+            } }) })));
 }
 export default memo(SheetViewTableLoading);

package/build/components/index.d.ts

@@ -105,5 +105,4 @@ export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
-export { default as AmountStatusChip, type AmountStatusChipProps } from './AmountStatusChip';
 export * from './LazyImage';

package/build/components/index.js

@@ -105,5 +105,4 @@ export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
-export { default as AmountStatusChip } from './AmountStatusChip';
 export * from './LazyImage';

package/build/constants/table/cell/authorizationTableCellWidth.d.ts

@@ -57,12 +57,12 @@ export declare const authorizationTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "230px";
+        readonly sheet: "170px";
     };
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
-        readonly sheet: "150px";
+        readonly sheet: "195px";
     };
     readonly destinations: {
         readonly default: "70px";

package/build/constants/table/cell/authorizationTableCellWidth.js

@@ -57,12 +57,12 @@ export const authorizationTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '230px',
+        sheet: '170px',
     },
     amount: {
         default: '170px',
         text: '195px',
-        sheet: '150px',
+        sheet: '195px',
     },
     destinations: {
         default: '70px',

package/build/constants/table/cell/chargeTableCellWidth.d.ts

@@ -52,7 +52,7 @@ export declare const chargeTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "230px";
+        readonly sheet: "165px";
     };
     readonly payment_initiated: {
         readonly default: "150px";
@@ -222,7 +222,7 @@ export declare const chargeTableCellWidth: {
     readonly consolidated_amount: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "150px";
+        readonly sheet: "180px";
     };
     readonly customer_amount: {
         readonly default: "150px";

package/build/constants/table/cell/chargeTableCellWidth.js

@@ -52,7 +52,7 @@ export const chargeTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '230px',
+        sheet: '165px',
     },
     payment_initiated: {
         default: '150px',
@@ -222,7 +222,7 @@ export const chargeTableCellWidth = {
     consolidated_amount: {
         default: '180px',
         text: '180px',
-        sheet: '150px',
+        sheet: '180px',
     },
     customer_amount: {
         default: '150px',

package/build/constants/table/cell/destinationsTableCellWidth.d.ts

@@ -62,12 +62,12 @@ export declare const destinationsTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
-        readonly sheet: "230px";
+        readonly sheet: "165px";
     };
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "150px";
+        readonly sheet: "195px";
     };
     readonly status: {
         readonly default: "50px";

package/build/constants/table/cell/destinationsTableCellWidth.js

@@ -62,12 +62,12 @@ export const destinationsTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '250px',
-        sheet: '230px',
+        sheet: '165px',
     },
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '150px',
+        sheet: '195px',
     },
     status: {
         default: '50px',

package/build/constants/table/cell/refundTableCellWidth.d.ts

@@ -47,7 +47,7 @@ export declare const refundTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "200px";
-        readonly sheet: "230px";
+        readonly sheet: "165px";
     };
     readonly payment_initiated: {
         readonly default: "150px";
@@ -92,7 +92,7 @@ export declare const refundTableCellWidth: {
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "150px";
+        readonly sheet: "180px";
     };
     readonly payouts: {
         readonly default: "195px";

package/build/constants/table/cell/refundTableCellWidth.js

@@ -47,7 +47,7 @@ export const refundTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '200px',
-        sheet: '230px',
+        sheet: '165px',
     },
     payment_initiated: {
         default: '150px',
@@ -92,7 +92,7 @@ export const refundTableCellWidth = {
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '150px',
+        sheet: '180px',
     },
     payouts: {
         default: '195px',

package/build/utils/object.js

@@ -4,10 +4,10 @@ export function removeUndefinedValues(obj) {
 export function removeUndefinedArrayValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([, value]) => {
         if (Array.isArray(value)) {
-            return value.length > 0 && (value === null || value === void 0 ? void 0 : value.some((v) => !!v));
+            return value.length > 0 && (value === null || value === void 0 ? void 0 : value.some((v) => v !== undefined && v !== null && v !== ''));
         }
         if (typeof value === 'object') {
-            return Object.values(value || {}).some((v) => !!v);
+            return Object.values(value || {}).some((v) => v !== undefined && v !== null && v !== '');
         }
         return !!value;
     }));

package/build/utils/style.js

@@ -31,6 +31,10 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
 const getRowSelectionStyles = () => ({
     backgroundColor: SELECTION_COLORS.background,
     color: SELECTION_COLORS.primary,
+    border: 'none',
+    '&:before': {
+        border: 'none',
+    },
 });
 const getSingleCellSelectionStyles = () => ({
     border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,

package/package.json

@@ -1,139 +1,139 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.99",
-  "testVersion": 3,
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "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:local": "yarn ts:build && yalc publish --push",
-    "push": "npm run ts:build && npm publish --access public",
-    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
-    "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",
-    "color": "^5.0.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-colorful": "^5.6.1",
-    "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-lazy-load-image-component": "^1.6.3",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^7.7.0",
-    "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-lazy-load-image-component": "^1.6.4",
-    "@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-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.1.101-test.5",
+  "testVersion": 5,
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "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:local": "yarn ts:build && yalc publish --push",
+    "push": "npm run ts:build && npm publish --access public",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "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",
+    "color": "^5.0.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-colorful": "^5.6.1",
+    "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-lazy-load-image-component": "^1.6.3",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^7.7.0",
+    "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-lazy-load-image-component": "^1.6.4",
+    "@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-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/build/components/AmountStatusChip/AmountStatusChip.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { StatusChipWithCopyProps } from '../StatusChipWithCopy';
-export interface AmountStatusChipProps extends StatusChipWithCopyProps {
-    amount?: string;
-    currency?: string;
-}
-declare function AmountStatusChip({ amount, currency, ...rest }: AmountStatusChipProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof AmountStatusChip>;
-export default _default;

package/build/components/AmountStatusChip/AmountStatusChip.js

@@ -1,20 +0,0 @@
-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 { memo } from 'react';
-import CurrencyIcon from '../CurrencyIcon';
-import { AmountLabel, CurrencyIconContainer, StyledAmountStatusChip } from './style';
-function AmountStatusChip(_a) {
-    var { amount, currency } = _a, rest = __rest(_a, ["amount", "currency"]);
-    return (_jsxs(StyledAmountStatusChip, Object.assign({ expandDirection: "left" }, rest, { children: [currency && (_jsx(AmountLabel, { children: _jsx(CurrencyIconContainer, { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }) })), amount] })));
-}
-export default memo(AmountStatusChip);

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

@@ -1,3 +0,0 @@
-import AmountStatusChip from './AmountStatusChip';
-export { type AmountStatusChipProps } from './AmountStatusChip';
-export default AmountStatusChip;

package/build/components/AmountStatusChip/index.js

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

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const StyledAmountStatusChip: import("@emotion/styled").StyledComponent<import("../StatusChipWithCopy").StatusChipWithCopyProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const AmountLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const CurrencyIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/AmountStatusChip/style.js

@@ -1,27 +0,0 @@
-import { styled } from '@mui/material/styles';
-import StatusChipWithCopy from '../StatusChipWithCopy';
-export const StyledAmountStatusChip = styled(StatusChipWithCopy)(() => ({
-    backgroundColor: '#EFF1F2',
-    border: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: 'none !important',
-    animation: 'none !important',
-    transform: 'none !important',
-    '& *': {
-        transition: 'none !important',
-        animation: 'none !important',
-        transform: 'none !important',
-    },
-}));
-export const AmountLabel = styled('span')(() => ({
-    marginRight: '2px',
-    display: 'flex',
-    alignItems: 'center',
-}));
-export const CurrencyIconContainer = styled('span')(() => ({
-    marginInline: '1.5px',
-    display: 'flex',
-    alignItems: 'center',
-}));