@tap-payments/os-micro-frontend-shared 0.0.129-sheetview-component-ui-v1 → 0.0.130

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

@@ -12,7 +12,7 @@ export const chargeTableCellWidth = {
     id: {
         default: '225px',
         text: '225px',
-        sheet: '215px',
+        sheet: '225px',
     },
     product: {
         default: '85px',
@@ -22,12 +22,12 @@ export const chargeTableCellWidth = {
     date: {
         default: '170px',
         text: '170px',
-        sheet: '129px',
+        sheet: '170px',
     },
     reference: {
         default: '95px',
         text: '180px',
-        sheet: '550px',
+        sheet: '180px',
     },
     order: {
         default: '80px',
@@ -37,12 +37,12 @@ export const chargeTableCellWidth = {
     customer: {
         default: '180px',
         text: '180px',
-        sheet: '115px',
+        sheet: '180px',
     },
     source: {
         default: '114px',
         text: '125px',
-        sheet: '450px',
+        sheet: '125px',
     },
     authenticate: {
         default: '55px',
@@ -57,7 +57,7 @@ export const chargeTableCellWidth = {
     amount: {
         default: '170px',
         text: '195px',
-        sheet: '141px',
+        sheet: '195px',
     },
     destinations: {
         default: '70px',
@@ -72,12 +72,12 @@ export const chargeTableCellWidth = {
     status: {
         default: '70px',
         text: '300px',
-        sheet: '400px',
+        sheet: '300px',
     },
     merchant: {
         default: '100px',
         text: '150px',
-        sheet: '115px',
+        sheet: '150px',
     },
     charge: {
         default: '150px',
@@ -97,7 +97,7 @@ export const chargeTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '131px',
+        sheet: '150px',
     },
     fees: {
         default: '150px',
@@ -107,7 +107,7 @@ export const chargeTableCellWidth = {
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '235px',
+        sheet: '180px',
     },
     settlement: {
         default: '200px',
@@ -122,7 +122,7 @@ export const chargeTableCellWidth = {
     actions: {
         default: '100px',
         text: '100px',
-        sheet: '315px',
+        sheet: '100px',
     },
     payment_id: {
         default: '150px',
@@ -132,7 +132,7 @@ export const chargeTableCellWidth = {
     card_number: {
         default: '120px',
         text: '120px',
-        sheet: '190px',
+        sheet: '120px',
     },
     auth_code: {
         default: '80px',
@@ -142,7 +142,7 @@ export const chargeTableCellWidth = {
     rrn: {
         default: '100px',
         text: '100px',
-        sheet: '83px',
+        sheet: '100px',
     },
     device: {
         default: '70px',
@@ -152,7 +152,7 @@ export const chargeTableCellWidth = {
     card_no: {
         default: '120px',
         text: '120px',
-        sheet: '190px',
+        sheet: '120px',
     },
     meta: {
         default: '52px',

package/build/types/table.d.ts

@@ -93,7 +93,6 @@ export interface IColumnFilterCustom {
     render: (v: any) => JSX.Element;
 }
 export type AnimationType = false | 'pulse' | 'wave' | undefined;
-export type TableMode = 'sheet' | 'text' | 'default';
 export interface IVirtualTable<R = any> {
     rows: R[];
     columns: Array<IColumnProps<R>>;
@@ -118,7 +117,7 @@ export interface IVirtualTable<R = any> {
     areAllRowsLoaded?: boolean;
     tableBodyStyles?: React.CSSProperties;
     isTextShown?: boolean;
-    tableMode?: TableMode;
+    tableMode?: 'default' | 'text' | 'sheet';
     tableTitle?: string;
     dimensions?: {
         height: string | number;

package/package.json

@@ -1,132 +1,132 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.129-sheetview-component-ui-v1",
-  "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 version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
-    "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": "^6.14.2",
-    "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.0.130",
+  "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 version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
+    "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": "^6.14.2",
+    "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/"
+  }
+}

package/build/components/MaskedText/MaskedText.d.ts

@@ -1,3 +0,0 @@
-import { MaskedTextProps } from './type';
-declare const MaskedText: ({ text, startLength, endLength }: MaskedTextProps) => import("react/jsx-runtime").JSX.Element;
-export default MaskedText;

package/build/components/MaskedText/MaskedText.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import StatusChip from '../StatusChip';
-import { Box, useTheme } from '@mui/material';
-import { passwordDotsIcon } from '../../constants/index.js';
-const MaskedText = ({ text, startLength = 8, endLength = 4 }) => {
-    const theme = useTheme();
-    const startText = text.slice(0, startLength);
-    const endText = text.slice(text.length - endLength);
-    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: theme.spacing(0.5) } }, { children: [_jsx(StatusChip, Object.assign({ bgColor: "#EFF1F2", borderColor: "transparent", textColor: theme.palette.text.primary }, { children: startText })), _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), _jsx(StatusChip, Object.assign({ bgColor: "#EFF1F2", borderColor: "transparent", textColor: theme.palette.text.primary }, { children: endText }))] })));
-};
-export default MaskedText;

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

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

package/build/components/MaskedText/index.js

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

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

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-export interface MaskedTextProps {
-    text: string;
-    startLength?: number;
-    endLength?: number;
-    separator?: ReactNode;
-}

package/build/components/MaskedText/type.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { ChipProps } from './type';
-declare const StatusChip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -1,19 +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 } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { ChipStyled } from './style';
-const StatusChip = forwardRef((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (_jsx(ChipStyled, Object.assign({ ref: ref }, props, { children: children })));
-});
-export default StatusChip;

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

@@ -1,3 +0,0 @@
-import StatusChip from './StatusChip';
-export type { ChipProps as StatusChipProps } from './type';
-export default StatusChip;

package/build/components/StatusChip/index.js

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

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

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-export declare const ChipStyled: 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> & {
-    textColor?: string | undefined;
-    bgColor?: string | undefined;
-    borderColor?: string | undefined;
-    disabled?: boolean | undefined;
-    padding?: string | 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").Theme>> & {
-    children?: import("react").ReactNode;
-}, {}, {}>;

package/build/components/StatusChip/style.js

@@ -1,32 +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 { Box, styled } from '@mui/material';
-export const ChipStyled = styled(Box)((_a) => {
-    var { theme } = _a, props = __rest(_a, ["theme"]);
-    const { textColor = theme.palette.text.primary, bgColor = theme.palette.background.paper, borderColor = theme.palette.divider, disabled = false, padding, } = props;
-    return {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '18px',
-        padding: padding || `${theme.spacing(0.25)} ${theme.spacing(1.5)}`,
-        borderRadius: '30px',
-        border: `1px solid ${borderColor}`,
-        backgroundColor: bgColor,
-        color: textColor,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-        whiteSpace: 'nowrap',
-        fontSize: '11px',
-        minWidth: '67px',
-    };
-});

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

@@ -1,9 +0,0 @@
-import { BoxProps } from '@mui/material';
-import { PropsWithChildren } from 'react';
-export type ChipProps = PropsWithChildren<{
-    textColor?: string;
-    bgColor?: string;
-    borderColor?: string;
-    disabled?: boolean;
-    padding?: string;
-} & BoxProps>;

package/build/components/StatusChip/type.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface SheetViewIDButtonI {
-    rowId?: string;
-}
-declare function SheetViewIDButton({ rowId }: SheetViewIDButtonI): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof SheetViewIDButton>;
-export default _default;

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

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useState } from 'react';
-import Box from '@mui/material/Box';
-import { useTranslation } from 'react-i18next';
-import Tooltip from '../../../Tooltip';
-import { greenCheckIcon } from '../../../../constants/index.js';
-import { copyText } from '../../../../utils/index.js';
-import { RowId, Button } from './style';
-function SheetViewIDButton({ rowId }) {
-    const [showCopy, setShowCopy] = useState(false);
-    const { t } = useTranslation();
-    const handleCopyRowId = () => {
-        if (rowId && !showCopy) {
-            setShowCopy(true);
-            copyText(rowId);
-            const timer = setTimeout(() => {
-                setShowCopy(false);
-            }, 2000);
-            return () => {
-                clearTimeout(timer);
-            };
-        }
-    };
-    return (_jsx(Tooltip, Object.assign({ title: t('copy') }, { children: _jsxs(Button, Object.assign({ sx: { minWidth: '213px' }, onClick: handleCopyRowId }, { children: [_jsx(RowId, Object.assign({ style: { visibility: showCopy ? 'hidden' : 'visible' } }, { children: rowId })), showCopy && (_jsx(Box, Object.assign({ sx: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    } }, { children: _jsx(Box, { component: "img", src: greenCheckIcon, alt: "copied", sx: { width: 14, height: 14 } }) })))] })) })));
-}
-export default memo(SheetViewIDButton);

package/build/components/TableCells/CustomCells/SheetViewIDButton/index.d.ts

@@ -1 +0,0 @@
-export { default } from './SheetViewIDButton';

package/build/components/TableCells/CustomCells/SheetViewIDButton/index.js

@@ -1 +0,0 @@
-export { default } from './SheetViewIDButton';

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const RowId: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,22 +0,0 @@
-import { styled } from '@mui/material/styles';
-export const Button = styled('div')(({ theme }) => ({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(1),
-    cursor: 'pointer',
-    justifyContent: 'center',
-    paddingInline: '8px',
-    borderRadius: '24px',
-    border: `1px solid ${theme.palette.divider}`,
-}));
-export const RowId = styled('div')(({ theme }) => ({
-    fontSize: '11px',
-    height: '18px',
-    display: 'flex',
-    alignItems: 'center',
-    fontWeight: 400,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-}));