@transferwise/components 0.0.0-experimental-d1715ff → 0.0.0-experimental-3064bdb

package/build/types/table/Table.d.ts

@@ -0,0 +1,23 @@
+import { TableHeaderType } from './TableHeader';
+import { TableRowClickableType, TableRowType } from './TableRow';
+export interface TableProps {
+    data: {
+        headers?: TableHeaderType[];
+        content?: TableRowType[] | TableRowClickableType[];
+        onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
+    };
+    loading?: boolean;
+    className?: string | undefined;
+    fullWidth?: boolean;
+    error?: {
+        message?: string;
+        action?: {
+            href?: string;
+            text?: string;
+        };
+    };
+    onRetry?: () => void;
+}
+declare const Table: React.FC<TableProps>;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/build/types/table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAoB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAiB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAS3E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;QAC5B,OAAO,CAAC,EAAE,YAAY,EAAE,GAAG,qBAAqB,EAAE,CAAC;QACnD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;KACtE,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE;YACP,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuF/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/table/Table.messages.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    refreshPage: {
+        id: string;
+        defaultMessage: string;
+    };
+    emptyData: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Table.messages.d.ts.map

package/build/types/table/Table.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.messages.d.ts","sourceRoot":"","sources":["../../../src/table/Table.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}

package/build/types/table/TableCell.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+interface TextPropsType {
+    primaryText?: string;
+    secondaryText?: string;
+}
+interface StatusPropsType {
+    status?: 'error' | 'success';
+}
+export interface LeadingContentType extends TextPropsType, StatusPropsType {
+    initials?: string;
+}
+export interface TextContentType extends StatusPropsType {
+    text?: string;
+}
+interface CurrencyType {
+    value: string | number;
+    currency: string;
+}
+export interface CurrencyContentType extends StatusPropsType {
+    primaryCurrency?: CurrencyType;
+    secondaryCurrency?: CurrencyType;
+}
+export interface StatusContentType extends TextPropsType {
+    sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
+}
+export interface TableCellProps {
+    type?: 'leading' | 'text' | 'currency' | 'status';
+    content?: LeadingContentType & TextContentType & CurrencyContentType & StatusContentType;
+    alignment?: 'right' | 'left';
+    className?: string;
+    colSpan?: number;
+    hasSeparator?: boolean;
+    children?: React.ReactNode;
+}
+declare const TableCell: ({ type, content, alignment, className, colSpan, hasSeparator, children, }: TableCellProps) => React.JSX.Element;
+export default TableCell;
+//# sourceMappingURL=TableCell.d.ts.map

package/build/types/table/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,aAAa;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,UAAU,eAAe;IACvB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAGD,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,eAAe;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,iBAAiB,CAAC,EAAE,YAAY,CAAC;CAClC;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;CACzE;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IAClD,OAAO,CAAC,EAAE,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IACzF,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,8EAQZ,cAAc,sBAwFhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/types/table/TableHeader.d.ts

@@ -0,0 +1,12 @@
+export interface TableHeaderType {
+    header?: string;
+    className?: string;
+    alignment?: 'right' | 'left';
+    hasError?: boolean;
+}
+export interface TableHeaderProps extends TableHeaderType {
+    hasActionColumn?: boolean;
+}
+declare const TableHeader: React.FC<TableHeaderProps>;
+export default TableHeader;
+//# sourceMappingURL=TableHeader.d.ts.map

package/build/types/table/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/table/TableHeader.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgC3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/table/TableRow.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TableCellProps } from './TableCell';
+export interface TableRowType {
+    rowContent?: TableCellProps[];
+}
+export interface TableRowClickableType extends TableRowType {
+    id: number | string;
+}
+export interface TableRowProps {
+    rowData?: TableRowType | TableRowClickableType;
+    hasSeparator?: boolean;
+    children?: React.ReactNode;
+    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
+}
+declare const TableRow: ({ rowData, hasSeparator, children, onRowClick }: TableRowProps) => React.JSX.Element;
+export default TableRow;
+//# sourceMappingURL=TableRow.d.ts.map

package/build/types/table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,YAAY,GAAG,qBAAqB,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;CACtE;AAED,QAAA,MAAM,QAAQ,oDAA6D,aAAa,sBAsCvF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/table/TableStatusText.d.ts

@@ -0,0 +1,9 @@
+export interface TableStatusTextProps {
+    text: string;
+    className?: string;
+    status?: 'success' | 'error';
+    typography?: 'default' | 'large-bold';
+}
+declare const TableStatusText: React.FC<TableStatusTextProps>;
+export default TableStatusText;
+//# sourceMappingURL=TableStatusText.d.ts.map

package/build/types/table/TableStatusText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStatusText.d.ts","sourceRoot":"","sources":["../../../src/table/TableStatusText.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACvC;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsBnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/build/types/table/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './Table';
+export type { TableProps } from './Table';
+export type { TableRowType, TableRowClickableType } from './TableRow';
+export type { TableHeaderType } from './TableHeader';
+export type { LeadingContentType, TextContentType, CurrencyContentType, StatusContentType, TableCellProps, } from './TableCell';
+//# sourceMappingURL=index.d.ts.map

package/build/types/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,GACf,MAAM,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-d1715ff",
+  "version": "0.0.0-experimental-3064bdb",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -79,7 +79,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "4.4.10",
-    "@wise/art": "^2.16.3",
+    "@wise/art": "^2.7.0",
     "babel-plugin-formatjs": "^10.5.16",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
@@ -91,14 +91,14 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.19.1",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
     "@transferwise/neptune-css": "^14.9.6",
-    "@wise/art": "^2.16",
+    "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",
     "react-dom": ">=18",

package/src/i18n/en.json

@@ -30,6 +30,8 @@
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",
+  "neptune.Table.emptyData": "No results found",
+  "neptune.Table.refreshPage": "Refresh page",
   "neptune.Upload.csButtonText": "Upload another file?",
   "neptune.Upload.csFailureText": "Upload failed. Please, try again",
   "neptune.Upload.csSuccessText": "Upload complete!",

package/src/main.css

@@ -5025,6 +5025,220 @@ html:not([dir="rtl"]) .np-navigation-option {
     padding: 0 var(--size-24);
   }
 }
+.np-table {
+  width: 100%;
+  background-color: transparent;
+}
+.np-table-container {
+  padding: 8px;
+  padding: var(--size-8);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.np-table-container--loading .np-table-header {
+  min-width: calc(160px * 2);
+}
+.np-table-container--center {
+  margin-right: auto;
+  margin-left: auto;
+}
+.np-table-container--full-width {
+  width: 100%;
+}
+.np-table-inner-container {
+  background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
+  background-attachment: local, local, scroll, scroll;
+  overflow-x: auto;
+  border-radius: 10px;
+}
+.np-table-row:last-child .np-table-cell:first-child {
+  border-bottom-left-radius: 10px;
+}
+.np-table-row:last-child .np-table-cell:last-child {
+  border-bottom-right-radius: 10px;
+}
+.np-table-row--clickable:hover .np-table-cell {
+  background-color: var(--color-background-screen-hover);
+  cursor: pointer;
+}
+.np-table-row--separator .np-table-cell {
+  padding: 0;
+}
+.np-table-header,
+.np-table-cell {
+  padding: 0;
+}
+.np-table-header:first-child,
+.np-table-cell:first-child {
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+.np-table-header:first-child .np-table-header-content,
+.np-table-cell:first-child .np-table-header-content,
+.np-table-header:first-child .np-table-cell-content,
+.np-table-cell:first-child .np-table-cell-content {
+  padding-left: 0;
+}
+.np-table-header:last-child,
+.np-table-cell:last-child {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+}
+.np-table-header:last-child .np-table-header-content,
+.np-table-cell:last-child .np-table-header-content,
+.np-table-header:last-child .np-table-cell-content,
+.np-table-cell:last-child .np-table-cell-content {
+  padding-right: 0;
+}
+.np-table-header .np-text-body-large-bold,
+.np-table-cell .np-text-body-large-bold {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+}
+.np-table-header.np-table-header--right,
+.np-table-cell.np-table-cell--right {
+  padding-right: calc(8px + 12px);
+  padding-right: calc(var(--size-8) + var(--size-12));
+}
+.np-table-header.np-table-header--right > .np-text-body-default,
+.np-table-cell.np-table-cell--right > .np-text-body-default {
+  text-align: right;
+}
+.np-table-header.np-table-header--right .np-table-header-content,
+.np-table-cell.np-table-cell--right .np-table-content {
+  justify-content: end;
+}
+.np-table-header-content,
+.np-table-content {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.np-table-header {
+  min-width: 160px;
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  padding-bottom: 8px;
+  padding-bottom: var(--size-8);
+  padding-left: 8px;
+  padding-left: var(--size-8);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-table-header-content {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  white-space: nowrap;
+}
+.np-table-header--has-error {
+  color: var(--color-sentiment-negative);
+}
+.np-table-cell {
+  padding: 16px 8px;
+  padding: var(--size-16) var(--size-8);
+}
+.np-table-cell--primary {
+  min-width: 200px;
+}
+.np-table-cell--currency .np-text-body-default {
+  white-space: nowrap;
+}
+.np-table-cell--status .status-circle {
+  width: 24px;
+  height: 24px;
+}
+.np-table-cell--status .status-circle .status-icon > svg {
+  width: 21px;
+  height: 21px;
+}
+.np-table-cell .tw-chevron {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.np-table-cell-separator {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  margin-bottom: 4px;
+  margin-bottom: var(--size-4);
+  height: 1px;
+  padding: 0;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-table-cell .np-text-body-default {
+  line-height: 1.375rem;
+  line-height: var(--line-height-22);
+}
+.np-table-cell .np-text-body-large-bold {
+  display: flex;
+  align-items: center;
+  color: #37517e;
+  color: var(--color-content-primary);
+  white-space: nowrap;
+}
+.np-table-cell .np-table-content--success {
+  color: var(--color-sentiment-positive);
+}
+.np-table-cell .np-table-content--error {
+  color: var(--color-sentiment-negative);
+}
+.np-table-cell .tw-loader {
+  margin: 150px auto;
+}
+@media (max-width: 320px) {
+  .np-table-cell .tw-loader {
+    margin-top: 70px;
+    margin-bottom: 70px;
+  }
+}
+.np-table-content {
+  gap: 12px;
+  gap: var(--size-12);
+}
+.np-table-content--success,
+.np-table-content--error {
+  gap: 4px;
+  gap: var(--size-4);
+}
+.np-table-content--success .np-table-content-text,
+.np-table-content--error .np-table-content-text {
+  line-height: 155%;
+}
+.np-table-content-media {
+  flex-shrink: 0;
+}
+.np-table-content-body {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-table-content--reversed {
+  flex-direction: row-reverse;
+}
+.np-table-content--reversed .np-table-content-body {
+  align-items: end;
+}
+.np-table-empty-data {
+  display: flex;
+  align-items: center;
+}
+.np-table-empty-data .status-circle {
+  margin-right: 12px;
+  margin-right: var(--size-12);
+}
 .np-tile {
   min-width: 120px;
   border-radius: 10px;

package/src/main.less

@@ -60,6 +60,7 @@
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
 @import "./tabs/Tabs.less";
+@import "./table/Table.less";
 @import "./tile/Tile.less";
 @import "./tooltip/Tooltip.less";
 @import "./typeahead/Typeahead.less";

package/src/table/Table.css

@@ -0,0 +1,214 @@
+.np-table {
+  width: 100%;
+  background-color: transparent;
+}
+.np-table-container {
+  padding: 8px;
+  padding: var(--size-8);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.np-table-container--loading .np-table-header {
+  min-width: calc(160px * 2);
+}
+.np-table-container--center {
+  margin-right: auto;
+  margin-left: auto;
+}
+.np-table-container--full-width {
+  width: 100%;
+}
+.np-table-inner-container {
+  background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
+  background-attachment: local, local, scroll, scroll;
+  overflow-x: auto;
+  border-radius: 10px;
+}
+.np-table-row:last-child .np-table-cell:first-child {
+  border-bottom-left-radius: 10px;
+}
+.np-table-row:last-child .np-table-cell:last-child {
+  border-bottom-right-radius: 10px;
+}
+.np-table-row--clickable:hover .np-table-cell {
+  background-color: var(--color-background-screen-hover);
+  cursor: pointer;
+}
+.np-table-row--separator .np-table-cell {
+  padding: 0;
+}
+.np-table-header,
+.np-table-cell {
+  padding: 0;
+}
+.np-table-header:first-child,
+.np-table-cell:first-child {
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+.np-table-header:first-child .np-table-header-content,
+.np-table-cell:first-child .np-table-header-content,
+.np-table-header:first-child .np-table-cell-content,
+.np-table-cell:first-child .np-table-cell-content {
+  padding-left: 0;
+}
+.np-table-header:last-child,
+.np-table-cell:last-child {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+}
+.np-table-header:last-child .np-table-header-content,
+.np-table-cell:last-child .np-table-header-content,
+.np-table-header:last-child .np-table-cell-content,
+.np-table-cell:last-child .np-table-cell-content {
+  padding-right: 0;
+}
+.np-table-header .np-text-body-large-bold,
+.np-table-cell .np-text-body-large-bold {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+}
+.np-table-header.np-table-header--right,
+.np-table-cell.np-table-cell--right {
+  padding-right: calc(8px + 12px);
+  padding-right: calc(var(--size-8) + var(--size-12));
+}
+.np-table-header.np-table-header--right > .np-text-body-default,
+.np-table-cell.np-table-cell--right > .np-text-body-default {
+  text-align: right;
+}
+.np-table-header.np-table-header--right .np-table-header-content,
+.np-table-cell.np-table-cell--right .np-table-content {
+  justify-content: end;
+}
+.np-table-header-content,
+.np-table-content {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.np-table-header {
+  min-width: 160px;
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  padding-bottom: 8px;
+  padding-bottom: var(--size-8);
+  padding-left: 8px;
+  padding-left: var(--size-8);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-table-header-content {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  white-space: nowrap;
+}
+.np-table-header--has-error {
+  color: var(--color-sentiment-negative);
+}
+.np-table-cell {
+  padding: 16px 8px;
+  padding: var(--size-16) var(--size-8);
+}
+.np-table-cell--primary {
+  min-width: 200px;
+}
+.np-table-cell--currency .np-text-body-default {
+  white-space: nowrap;
+}
+.np-table-cell--status .status-circle {
+  width: 24px;
+  height: 24px;
+}
+.np-table-cell--status .status-circle .status-icon > svg {
+  width: 21px;
+  height: 21px;
+}
+.np-table-cell .tw-chevron {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.np-table-cell-separator {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  margin-bottom: 4px;
+  margin-bottom: var(--size-4);
+  height: 1px;
+  padding: 0;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-table-cell .np-text-body-default {
+  line-height: 1.375rem;
+  line-height: var(--line-height-22);
+}
+.np-table-cell .np-text-body-large-bold {
+  display: flex;
+  align-items: center;
+  color: #37517e;
+  color: var(--color-content-primary);
+  white-space: nowrap;
+}
+.np-table-cell .np-table-content--success {
+  color: var(--color-sentiment-positive);
+}
+.np-table-cell .np-table-content--error {
+  color: var(--color-sentiment-negative);
+}
+.np-table-cell .tw-loader {
+  margin: 150px auto;
+}
+@media (max-width: 320px) {
+  .np-table-cell .tw-loader {
+    margin-top: 70px;
+    margin-bottom: 70px;
+  }
+}
+.np-table-content {
+  gap: 12px;
+  gap: var(--size-12);
+}
+.np-table-content--success,
+.np-table-content--error {
+  gap: 4px;
+  gap: var(--size-4);
+}
+.np-table-content--success .np-table-content-text,
+.np-table-content--error .np-table-content-text {
+  line-height: 155%;
+}
+.np-table-content-media {
+  flex-shrink: 0;
+}
+.np-table-content-body {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-table-content--reversed {
+  flex-direction: row-reverse;
+}
+.np-table-content--reversed .np-table-content-body {
+  align-items: end;
+}
+.np-table-empty-data {
+  display: flex;
+  align-items: center;
+}
+.np-table-empty-data .status-circle {
+  margin-right: 12px;
+  margin-right: var(--size-12);
+}