@transferwise/components 46.80.0 → 46.82.0

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -1,12 +1,10 @@
 import { boolean, select, text } from '@storybook/addon-knobs';
-import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
-import Avatar, { AvatarType } from '../avatar';
-import AvatarWrapper from '../avatarWrapper';
+import AvatarView from '../avatarView';
 import Body from '../body';
 import Button from '../button';
-import { ProfileType, Size, Typography } from '../common';
+import { ProfileType, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 
@@ -19,43 +17,24 @@ export default {
   component: FlowNavigation,
   title: 'Navigation/FlowNavigation',
 };
-const avatarProfiles = {
-  '': null,
-  Business: <BriefcaseIcon />,
-  Profile: <ProfileIcon />,
-};
-type ProfileTypeKeys = keyof typeof ProfileType;
-
-const getAvatarProfile = (showAvatar: string) =>
-  showAvatar in avatarProfiles ? avatarProfiles[showAvatar as keyof typeof avatarProfiles] : null;
 
 export const Variants = () => {
   const [activeStep, setActiveStep] = useState(2);
   const [closed, setClosed] = useState(false);
-  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
+  const profileType = select(
+    'avatar',
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
+    ProfileType.PERSONAL,
+  );
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
-  const profileType: ProfileTypeKeys | undefined = select(
-    'profileType',
-    Object.keys(ProfileType) as ProfileTypeKeys[],
-    undefined,
-  );
-  const avatarURL = text(
-    'avatarURL',
-    'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
-  );
+  const avatarURL = text('avatarURL', '../tapestry-01.png');
 
   return !closed ? (
     <>
       <FlowNavigation
-        avatar={
-          !showAvatar ? null : (
-            <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-              {getAvatarProfile(showAvatar)}
-            </Avatar>
-          )
-        }
+        avatar={!profileType ? null : <AvatarView profileType={profileType} />}
         logo={<Logo />}
         activeStep={activeStep}
         done={done}
@@ -132,7 +111,7 @@ export const Variants = () => {
 
       <FlowNavigation
         done={done}
-        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           {
@@ -178,7 +157,7 @@ export const Variants = () => {
       {/* Instance of always `done` FlowNav for visual testing */}
       <FlowNavigation
         done
-        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
@@ -240,11 +219,7 @@ export const SendFlow = () => {
   return (
     <>
       <FlowNavigation
-        avatar={
-          <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-            <ProfileIcon />
-          </Avatar>
-        }
+        avatar={<AvatarView />}
         logo={<Logo />}
         activeStep={activeStep}
         steps={steps}
@@ -272,7 +247,11 @@ export const SendFlow = () => {
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);
-  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
+  const profileType = select(
+    'avatar',
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
+    ProfileType.PERSONAL,
+  );
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
@@ -281,13 +260,7 @@ export const WithOverlayHeaderComparison = () => {
     <>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <FlowNavigation
-          avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {getAvatarProfile(showAvatar)}
-              </Avatar>
-            ) : null
-          }
+          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
           activeStep={activeStep}
           done={done}
           steps={[]}
@@ -301,13 +274,7 @@ export const WithOverlayHeaderComparison = () => {
       </div>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <OverlayHeader
-          avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {getAvatarProfile(showAvatar)}
-              </Avatar>
-            ) : null
-          }
+          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
           onClose={showCloseButton ? () => setClosed(true) : undefined}
         />
       </div>

package/src/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/src/i18n/zh-HK.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
   "neptune.SelectOption.action.label": "選擇",
   "neptune.SelectOption.selected.action.label": "更改已選選項",
+  "neptune.StatusIcon.iconLabel.error": "錯誤:",
+  "neptune.StatusIcon.iconLabel.information": "資訊:",
+  "neptune.StatusIcon.iconLabel.pending": "處理中:",
+  "neptune.StatusIcon.iconLabel.success": "成功:",
+  "neptune.StatusIcon.iconLabel.warning": "警告：",
   "neptune.Summary.statusDone": "已完成事項",
   "neptune.Summary.statusNotDone": "未完成事項",
   "neptune.Summary.statusPending": "待處理事項",

package/src/index.ts

@@ -8,6 +8,7 @@ export type { ActionOptionProps } from './actionOption';
 export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
+export type { AvatarViewProps } from './avatarView';
 export type { BadgeProps } from './badge';
 export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
@@ -103,6 +104,7 @@ export { default as ActionOption } from './actionOption';
 export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
+export { default as AvatarView } from './avatarView';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';
@@ -244,6 +246,7 @@ export {
   getLangFromLocale,
   isBrowser,
   isServerSide,
+  getBrandColorFromSeed,
 } from './common';
 
 /**

package/src/listItem/ListItem.story.tsx

@@ -1,15 +1,13 @@
 /* eslint-disable react/jsx-child-element-spacing */
 
 import { action } from '@storybook/addon-actions';
-import { Documents } from '@transferwise/icons';
+import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
 import ActionButton from '../actionButton/ActionButton';
-import Avatar from '../avatar';
-import Badge from '../badge';
+import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-
 import ListItem, { List } from '.';
 
 export default {
@@ -40,17 +38,7 @@ export const Variants = () => {
       <div className="m-t-4 m-b-2">
         <Title type="title-body">With Icon Avatar</Title>
         <List>
-          <Template
-            media={
-              <Avatar>
-                <img
-                  style={{ width: 32, height: 32 }}
-                  src="https://wise.com/public-resources/assets/balances/savings-emoji/google/✈️.png"
-                  alt=""
-                />
-              </Avatar>
-            }
-          />
+          <Template media={<AvatarView imgSrc="../tapestry-01.png" />} />
         </List>
       </div>
       <div className="m-t-4 m-b-2">
@@ -59,22 +47,7 @@ export const Variants = () => {
           <Template
             title="Sandra Pepper"
             value="Personal account"
-            media={
-              <Badge
-                badge={
-                  <img
-                    src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
-                    alt=""
-                    height="24px"
-                    width="24px"
-                  />
-                }
-              >
-                <Avatar type="initials" size="md">
-                  <span aria-hidden>SP</span>
-                </Avatar>
-              </Badge>
-            }
+            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
           />
         </List>
       </div>
@@ -84,22 +57,7 @@ export const Variants = () => {
           <Template
             title="Account holder"
             value="Sandra Pepper"
-            media={
-              <Badge
-                badge={
-                  <img
-                    src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
-                    alt=""
-                    height="24px"
-                    width="24px"
-                  />
-                }
-              >
-                <Avatar type="initials" size="md">
-                  <span aria-hidden>SP</span>
-                </Avatar>
-              </Badge>
-            }
+            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
             action={<ActionButton>Share details</ActionButton>}
           />
         </List>

package/src/main.css

@@ -469,6 +469,42 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.np-notification-dot {
+  --np-notification-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+}
+.np-notification-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+}
+.np-notification-dot-badge {
+  position: absolute;
+  width: var(--np-notification-dot-size);
+  height: var(--np-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  right: 0;
+}
+.np-avatar-view .np-avatar-view-content {
+  color: var(--color-interactive-primary);
+}
+.np-avatar-view-interactive {
+  cursor: pointer;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-avatar-view-non-interactive .np-circle {
+  background-color: transparent;
+}
+.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
+  box-shadow: none;
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -476,6 +512,7 @@ div.critical-comms .critical-comms-body {
   --badge-mask: 2px;
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
+  --badge-content-position: 0px;
 }
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
@@ -485,8 +522,8 @@ div.critical-comms .critical-comms-body {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
@@ -496,8 +533,8 @@ div.critical-comms .critical-comms-body {
   position: absolute;
   width: var(--badge-size);
   height: var(--badge-size);
-  bottom: 0;
-  right: 0;
+  bottom: var(--badge-content-position);
+  right: var(--badge-content-position);
   box-sizing: border-box;
   border-radius: 50%;
   text-align: center;
@@ -510,7 +547,7 @@ div.critical-comms .critical-comms-body {
           user-select: none;
 }
 [dir="rtl"] .tw-badge > .tw-badge__content {
-  left: 0;
+  left: var(--badge-content-position);
   right: auto;
   right: initial;
 }
@@ -1211,11 +1248,43 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+  --circle-border-color: var(--color-border-neutral);
+  --circle-border-width: 1px;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle .np-display {
+  font-size: var(--circle-font-size);
 }
 .np-circle .tw-icon > svg {
   height: var(--circle-icon-size);
   width: var(--circle-icon-size);
 }
+.np-circle img,
+.np-circle .wds-flag {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.np-circle-border {
+  position: relative;
+}
+.np-circle-border::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -5052,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/src/main.less

@@ -3,6 +3,7 @@
 @import "./actionButton/ActionButton.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
+@import "./avatarView/AvatarView.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
@@ -61,6 +62,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";