@transferwise/components 46.81.0 → 46.82.0

package/build/i18n/en.json

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",
+  "neptune.Table.actionHeader": "Action",
+  "neptune.Table.emptyData": "No results found",
+  "neptune.Table.loaded": "Table data has loaded",
+  "neptune.Table.loading": "Table data is loading",
+  "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/build/i18n/en.json.js

@@ -37,6 +37,11 @@ var en = {
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",
+	"neptune.Table.actionHeader": "Action",
+	"neptune.Table.emptyData": "No results found",
+	"neptune.Table.loaded": "Table data has loaded",
+	"neptune.Table.loading": "Table data is loading",
+	"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/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -35,6 +35,11 @@ var en = {
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",
+	"neptune.Table.actionHeader": "Action",
+	"neptune.Table.emptyData": "No results found",
+	"neptune.Table.loaded": "Table data has loaded",
+	"neptune.Table.loading": "Table data is loading",
+	"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/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/main.css

@@ -5121,6 +5121,280 @@ html:not([dir="rtl"]) .np-navigation-option {
     padding: 0 var(--size-24);
   }
 }
+.np-table {
+  width: 100%;
+  background-color: transparent;
+}
+.np-table-outer-container {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.np-table-outer-container:focus {
+  outline: none;
+}
+.np-table-outer-container:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-table-outer-container:focus-visible {
+  outline-offset: 0;
+}
+.np-table-outer-container--center {
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (max-width: 767px) {
+  .np-table-outer-container--center {
+    width: 100%;
+  }
+}
+.np-table-outer-container--full-width {
+  width: 100%;
+}
+.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: inherit;
+}
+.np-table-container--loading .np-table-inner-container {
+  background-image: none;
+}
+.np-table-inner-container {
+  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-color: var(--color-contrast-overlay);
+  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+  background-attachment: local, local, scroll, scroll;
+  overflow-x: auto;
+  border-radius: 10px;
+}
+.np-theme-personal--dark .np-table-inner-container {
+  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
+}
+.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:focus {
+  outline: none;
+}
+.np-table-row:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-table-row:focus-visible {
+  outline-offset: -2px;
+  border-radius: 6px;
+}
+.np-table-row--clickable .np-table-cell {
+  position: relative;
+}
+.np-table-row--clickable .np-table-cell:before {
+  display: none;
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--color-background-screen-hover);
+}
+.np-table-row--clickable .np-table-cell:first-child:before,
+.np-table-row--clickable .np-table-cell:last-child:before {
+  width: calc(100% - 8px);
+  width: calc(100% - var(--size-8));
+}
+.np-table-row--clickable .np-table-cell:first-child:before {
+  left: 8px;
+  left: var(--size-8);
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.np-table-row--clickable .np-table-cell:last-child:before {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.np-table-row--clickable:hover .np-table-cell:before {
+  display: block;
+}
+.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before,
+.np-table-row--clickable:hover:focus-visible .np-table-cell:last-child:before {
+  width: 100%;
+}
+.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before {
+  left: 0;
+}
+.np-table-row--cosmetic .np-table-cell {
+  height: 8px;
+  height: var(--size-8);
+  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-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:not(.np-table-header--right),
+.np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
+  padding-left: calc(8px + 12px);
+  padding-left: calc(var(--size-8) + var(--size-12));
+}
+.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: var(--color-interactive-primary);
+}
+.np-table-header-content {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  white-space: nowrap;
+  line-height: 1.375rem;
+  line-height: var(--line-height-22);
+  letter-spacing: 0.0125em;
+  letter-spacing: var(--letter-spacing-sm);
+}
+.np-table-header--error {
+  color: var(--color-sentiment-negative);
+}
+.np-table-header--action {
+  min-width: 0;
+  padding: 0;
+}
+.np-table-cell {
+  padding: 16px 8px;
+  padding: var(--size-16) var(--size-8);
+  position: relative;
+}
+.np-table-cell--cosmetic {
+  padding: 0;
+}
+.np-table-cell--primary {
+  min-width: 200px;
+}
+.np-table-cell--currency .np-text-body-default {
+  white-space: nowrap;
+}
+.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;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  padding: 0;
+}
+.np-table-cell .np-text-body-default-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/build/money/Money.js

@@ -6,13 +6,16 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const Money = ({
   amount,
-  currency
+  currency,
+  alwaysShowDecimals = false
 }) => {
   const {
     locale
   } = reactIntl.useIntl();
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: formatting.formatMoney(amount, currency, locale)
+    children: formatting.formatMoney(amount, currency, locale, {
+      alwaysShowDecimals
+    })
   });
 };
 

package/build/money/Money.js.map

@@ -1 +1 @@
-{"version":3,"file":"Money.js","sources":["../../src/money/Money.tsx"],"sourcesContent":["import { formatMoney } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nexport interface MoneyProps {\n  amount: number;\n  currency: string;\n}\n\nconst Money = ({ amount, currency }: MoneyProps) => {\n  const { locale } = useIntl();\n  return <>{formatMoney(amount, currency, locale)}</>;\n};\n\nexport default Money;\n"],"names":["Money","amount","currency","locale","useIntl","_jsx","_Fragment","children","formatMoney"],"mappings":";;;;;;AAQMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,MAAM;AAAEC,EAAAA,QAAAA;AAAsB,CAAA,KAAI;EACjD,MAAM;AAAEC,IAAAA,MAAAA;GAAQ,GAAGC,iBAAO,EAAE,CAAA;EAC5B,oBAAOC,cAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGC,sBAAW,CAACP,MAAM,EAAEC,QAAQ,EAAEC,MAAM,CAAA;AAAC,GAAC,CAAG,CAAA;AACrD;;;;"}
+{"version":3,"file":"Money.js","sources":["../../src/money/Money.tsx"],"sourcesContent":["import { formatMoney } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nexport interface MoneyProps {\n  amount: number;\n  currency: string;\n  alwaysShowDecimals?: boolean;\n}\n\nconst Money = ({ amount, currency, alwaysShowDecimals = false }: MoneyProps) => {\n  const { locale } = useIntl();\n  return (\n    <>\n      {formatMoney(amount, currency, locale, {\n        alwaysShowDecimals,\n      })}\n    </>\n  );\n};\n\nexport default Money;\n"],"names":["Money","amount","currency","alwaysShowDecimals","locale","useIntl","_jsx","_Fragment","children","formatMoney"],"mappings":";;;;;;AASMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,MAAM;EAAEC,QAAQ;AAAEC,EAAAA,kBAAkB,GAAG,KAAA;AAAK,CAAc,KAAI;EAC7E,MAAM;AAAEC,IAAAA,MAAAA;GAAQ,GAAGC,iBAAO,EAAE,CAAA;EAC5B,oBACEC,cAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EACGC,sBAAW,CAACR,MAAM,EAAEC,QAAQ,EAAEE,MAAM,EAAE;AACrCD,MAAAA,kBAAAA;KACD,CAAA;AAAC,GACJ,CAAG,CAAA;AAEP;;;;"}

package/build/money/Money.mjs

@@ -4,13 +4,16 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 
 const Money = ({
   amount,
-  currency
+  currency,
+  alwaysShowDecimals = false
 }) => {
   const {
     locale
   } = useIntl();
   return /*#__PURE__*/jsx(Fragment, {
-    children: formatMoney(amount, currency, locale)
+    children: formatMoney(amount, currency, locale, {
+      alwaysShowDecimals
+    })
   });
 };
 

package/build/money/Money.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Money.mjs","sources":["../../src/money/Money.tsx"],"sourcesContent":["import { formatMoney } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nexport interface MoneyProps {\n  amount: number;\n  currency: string;\n}\n\nconst Money = ({ amount, currency }: MoneyProps) => {\n  const { locale } = useIntl();\n  return <>{formatMoney(amount, currency, locale)}</>;\n};\n\nexport default Money;\n"],"names":["Money","amount","currency","locale","useIntl","_jsx","_Fragment","children","formatMoney"],"mappings":";;;;AAQMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,MAAM;AAAEC,EAAAA,QAAAA;AAAsB,CAAA,KAAI;EACjD,MAAM;AAAEC,IAAAA,MAAAA;GAAQ,GAAGC,OAAO,EAAE,CAAA;EAC5B,oBAAOC,GAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGC,WAAW,CAACP,MAAM,EAAEC,QAAQ,EAAEC,MAAM,CAAA;AAAC,GAAC,CAAG,CAAA;AACrD;;;;"}
+{"version":3,"file":"Money.mjs","sources":["../../src/money/Money.tsx"],"sourcesContent":["import { formatMoney } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nexport interface MoneyProps {\n  amount: number;\n  currency: string;\n  alwaysShowDecimals?: boolean;\n}\n\nconst Money = ({ amount, currency, alwaysShowDecimals = false }: MoneyProps) => {\n  const { locale } = useIntl();\n  return (\n    <>\n      {formatMoney(amount, currency, locale, {\n        alwaysShowDecimals,\n      })}\n    </>\n  );\n};\n\nexport default Money;\n"],"names":["Money","amount","currency","alwaysShowDecimals","locale","useIntl","_jsx","_Fragment","children","formatMoney"],"mappings":";;;;AASMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,MAAM;EAAEC,QAAQ;AAAEC,EAAAA,kBAAkB,GAAG,KAAA;AAAK,CAAc,KAAI;EAC7E,MAAM;AAAEC,IAAAA,MAAAA;GAAQ,GAAGC,OAAO,EAAE,CAAA;EAC5B,oBACEC,GAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EACGC,WAAW,CAACR,MAAM,EAAEC,QAAQ,EAAEE,MAAM,EAAE;AACrCD,MAAAA,kBAAAA;KACD,CAAA;AAAC,GACJ,CAAG,CAAA;AAEP;;;;"}

package/build/styles/main.css

@@ -5121,6 +5121,280 @@ html:not([dir="rtl"]) .np-navigation-option {
     padding: 0 var(--size-24);
   }
 }
+.np-table {
+  width: 100%;
+  background-color: transparent;
+}
+.np-table-outer-container {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.np-table-outer-container:focus {
+  outline: none;
+}
+.np-table-outer-container:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-table-outer-container:focus-visible {
+  outline-offset: 0;
+}
+.np-table-outer-container--center {
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (max-width: 767px) {
+  .np-table-outer-container--center {
+    width: 100%;
+  }
+}
+.np-table-outer-container--full-width {
+  width: 100%;
+}
+.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: inherit;
+}
+.np-table-container--loading .np-table-inner-container {
+  background-image: none;
+}
+.np-table-inner-container {
+  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-color: var(--color-contrast-overlay);
+  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+  background-attachment: local, local, scroll, scroll;
+  overflow-x: auto;
+  border-radius: 10px;
+}
+.np-theme-personal--dark .np-table-inner-container {
+  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
+}
+.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:focus {
+  outline: none;
+}
+.np-table-row:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-table-row:focus-visible {
+  outline-offset: -2px;
+  border-radius: 6px;
+}
+.np-table-row--clickable .np-table-cell {
+  position: relative;
+}
+.np-table-row--clickable .np-table-cell:before {
+  display: none;
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--color-background-screen-hover);
+}
+.np-table-row--clickable .np-table-cell:first-child:before,
+.np-table-row--clickable .np-table-cell:last-child:before {
+  width: calc(100% - 8px);
+  width: calc(100% - var(--size-8));
+}
+.np-table-row--clickable .np-table-cell:first-child:before {
+  left: 8px;
+  left: var(--size-8);
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.np-table-row--clickable .np-table-cell:last-child:before {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.np-table-row--clickable:hover .np-table-cell:before {
+  display: block;
+}
+.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before,
+.np-table-row--clickable:hover:focus-visible .np-table-cell:last-child:before {
+  width: 100%;
+}
+.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before {
+  left: 0;
+}
+.np-table-row--cosmetic .np-table-cell {
+  height: 8px;
+  height: var(--size-8);
+  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-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:not(.np-table-header--right),
+.np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
+  padding-left: calc(8px + 12px);
+  padding-left: calc(var(--size-8) + var(--size-12));
+}
+.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: var(--color-interactive-primary);
+}
+.np-table-header-content {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  white-space: nowrap;
+  line-height: 1.375rem;
+  line-height: var(--line-height-22);
+  letter-spacing: 0.0125em;
+  letter-spacing: var(--letter-spacing-sm);
+}
+.np-table-header--error {
+  color: var(--color-sentiment-negative);
+}
+.np-table-header--action {
+  min-width: 0;
+  padding: 0;
+}
+.np-table-cell {
+  padding: 16px 8px;
+  padding: var(--size-16) var(--size-8);
+  position: relative;
+}
+.np-table-cell--cosmetic {
+  padding: 0;
+}
+.np-table-cell--primary {
+  min-width: 200px;
+}
+.np-table-cell--currency .np-text-body-default {
+  white-space: nowrap;
+}
+.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;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  padding: 0;
+}
+.np-table-cell .np-text-body-default-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;