@tap-payments/os-micro-frontend-shared 0.1.6 → 0.1.7

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/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.js

@@ -26,7 +26,15 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
     return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
             setColumnFilterEl(event.currentTarget);
-        }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle)) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
+        }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: isSelected ? '28px' : 'auto', position: 'relative', '&:before': {
+                content: '""',
+                border: isSelected ? '1px solid #1F88D0' : '1px solid transparent',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                left: 0,
+                bottom: 0,
+            } }, headerStyle)) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
                     onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
                 } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
                     onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e);

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

@@ -44,6 +44,7 @@ export const StyledHeader = styled(TableHead, {
 export const StyledMUITableRow = styled(MUITableRow)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-start',
+    alignItems: 'center',
     width: '100%',
     minWidth: 'fit-content',
     height: '28px',

package/build/components/VirtualTables/components/ColumnSort/ColumnSort.js

@@ -27,7 +27,7 @@ function ColumnSort({ onColumnSort, columnsSorting, columnId, onClick }) {
             handleClose(event);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ColumnIcon, { onClick: handleClick, src: columnIcon, alt: "column-icon", "data-id": columnId, sx: { userSelect: 'none' } }), open && _jsx(CustomBackdrop, { onClick: handleClose }), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open }, { children: [_jsxs(MenuItem, Object.assign({ onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ColumnIcon, { onClick: handleClick, src: columnIcon, alt: "column-icon", "data-id": columnId, sx: { userSelect: 'none', marginTop: '2px' } }), open && _jsx(CustomBackdrop, { onClick: handleClose }), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open }, { children: [_jsxs(MenuItem, Object.assign({ onClick: (e) => {
                             handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc', e);
                         }, sx: (theme) => (Object.assign({}, ((columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc' && { boxShadow: theme.shadows[10] }))) }, { children: [_jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }), _jsx(Text, Object.assign({ sx: { fontSize: '0.6875rem' } }, { children: "Sort Z-A" }))] })), _jsxs(MenuItem, Object.assign({ onClick: (e) => {
                             handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc', e);

package/build/components/VirtualTables/components/TableRow.js

@@ -25,7 +25,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 isColumnSelected,
                 isLastRow,
             });
-            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected && (column === null || column === void 0 ? void 0 : column.isDefaultPinned) }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
+            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }

package/build/components/VirtualTables/components/style.js

@@ -30,15 +30,22 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
 }));
 export const StyledCell = styled(TableCell, {
     shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
-})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center', cursor: 'pointer' }, (isSheetView && {
-    borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
+})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center', cursor: 'pointer' }, (isSheetView && {
+    borderRight: isLast ? '1px solid transparent' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',
     paddingLeft: '8px !important',
     paddingRight: '8px !important',
-})), (isSelected && {
-    color: '#1F88D0 !important',
-    '& *': {
-        color: '#1F88D0 !important',
+    position: 'relative',
+    borderTop: '1px solid transparent',
+    borderLeft: '1px solid transparent',
+    '&:before': {
+        content: '""',
+        borderRight: isLast ? 'none' : '1px solid transparent',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
     },
 }))));
 export const StyledVirtualList = styled(VirtualScrollList, {

package/build/components/VirtualTables/utils/getSelectionStyles.d.ts

@@ -8,6 +8,7 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     border?: undefined;
     backgroundColor?: undefined;
     color?: undefined;
+    '&:before'?: undefined;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -20,6 +21,11 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     border: string;
     backgroundColor: string;
     color: string;
+    '&:before': {
+        border: string;
+        borderWidth?: undefined;
+        borderBottom?: undefined;
+    };
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -37,6 +43,11 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     minHeight: string;
     display: string;
     alignItems: string;
+    '&:before': {
+        borderWidth: string;
+        borderBottom: string;
+        border?: undefined;
+    };
     border?: undefined;
     backgroundColor?: undefined;
     color?: undefined;

package/build/components/VirtualTables/utils/getSelectionStyles.js

@@ -3,9 +3,12 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
         return {};
     if (isCellSelected && !isColumnSelected) {
         return {
-            border: '2px solid #1F88D0',
+            border: '1px solid #1F88D0',
             backgroundColor: 'white',
             color: '#1F88D0',
+            '&:before': {
+                border: '1px solid #1F88D0',
+            },
         };
     }
     if (isColumnSelected) {
@@ -18,6 +21,10 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
             minHeight: '28px',
             display: 'flex',
             alignItems: 'center',
+            '&:before': {
+                borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
+                borderBottom: !isLastRow ? '1px solid transparent' : '1.5px solid #1F88D0',
+            },
         };
     }
     return {};

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

@@ -52,48 +52,8 @@ export declare const chargeTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "165px";
-    };
-    readonly payment_initiated: {
-        readonly default: "150px";
-        readonly text: "150px";
         readonly sheet: "150px";
     };
-    readonly payment_issuers: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "350px";
-    };
-    readonly payment_method: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "145px";
-    };
-    readonly payment_type: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "120px";
-    };
-    readonly payment_scheme: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "145px";
-    };
-    readonly auth_status: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "165px";
-    };
-    readonly auth_type: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "155px";
-    };
-    readonly eci: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "90px";
-    };
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
@@ -187,7 +147,7 @@ export declare const chargeTableCellWidth: {
     readonly card_number: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "145px";
+        readonly sheet: "190px";
     };
     readonly auth_code: {
         readonly default: "80px";
@@ -202,7 +162,7 @@ export declare const chargeTableCellWidth: {
     readonly device: {
         readonly default: "70px";
         readonly text: "190px";
-        readonly sheet: "225px";
+        readonly sheet: "190px";
     };
     readonly card_no: {
         readonly default: "120px";

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

@@ -52,48 +52,8 @@ export const chargeTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '165px',
-    },
-    payment_initiated: {
-        default: '150px',
-        text: '150px',
         sheet: '150px',
     },
-    payment_issuers: {
-        default: '150px',
-        text: '150px',
-        sheet: '350px',
-    },
-    payment_method: {
-        default: '150px',
-        text: '150px',
-        sheet: '145px',
-    },
-    payment_type: {
-        default: '150px',
-        text: '150px',
-        sheet: '120px',
-    },
-    payment_scheme: {
-        default: '150px',
-        text: '150px',
-        sheet: '145px',
-    },
-    auth_status: {
-        default: '150px',
-        text: '150px',
-        sheet: '165px',
-    },
-    auth_type: {
-        default: '150px',
-        text: '150px',
-        sheet: '155px',
-    },
-    eci: {
-        default: '150px',
-        text: '150px',
-        sheet: '90px',
-    },
     amount: {
         default: '170px',
         text: '195px',
@@ -187,7 +147,7 @@ export const chargeTableCellWidth = {
     card_number: {
         default: '120px',
         text: '120px',
-        sheet: '145px',
+        sheet: '190px',
     },
     auth_code: {
         default: '80px',
@@ -202,7 +162,7 @@ export const chargeTableCellWidth = {
     device: {
         default: '70px',
         text: '190px',
-        sheet: '225px',
+        sheet: '190px',
     },
     card_no: {
         default: '120px',

package/package.json

@@ -1,134 +1,134 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.6",
-  "testVersion": 52,
-  "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": "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",
-    "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": "^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-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.7",
+  "testVersion": 0,
+  "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": "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",
+    "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": "^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-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/"
+  }
+}