@transferwise/components 46.80.0 → 46.82.0

package/build/index.js

@@ -8,8 +8,17 @@ var SelectOption = require('./selectOption/SelectOption.js');
 var Alert = require('./alert/Alert.js');
 var avatarTypes = require('./avatar/avatarTypes.js');
 var Avatar = require('./avatar/Avatar.js');
+var AvatarView = require('./avatarView/AvatarView.js');
 var AvatarWrapper = require('./avatarWrapper/AvatarWrapper.js');
 var Badge = require('./badge/Badge.js');
+var StatusIcon = require('./statusIcon/StatusIcon.js');
+require('@wise/art');
+require('react');
+require('clsx');
+var breakpoint = require('./common/propsValues/breakpoint.js');
+require('react/jsx-runtime');
+var Image = require('./image/Image.js');
+require('@transferwise/icons');
 var Body = require('./body/Body.js');
 var Button = require('./button/Button.js');
 var Carousel = require('./carousel/Carousel.js');
@@ -37,7 +46,6 @@ var Emphasis = require('./emphasis/Emphasis.js');
 var Field = require('./field/Field.js');
 var FlowNavigation = require('./flowNavigation/FlowNavigation.js');
 var Header = require('./header/Header.js');
-var Image = require('./image/Image.js');
 var infoPresentations = require('./info/infoPresentations.js');
 var Info = require('./info/Info.js');
 var InlineAlert = require('./inlineAlert/InlineAlert.js');
@@ -84,7 +92,6 @@ var SlidingPanel = require('./slidingPanel/SlidingPanel.js');
 var Snackbar = require('./snackbar/Snackbar.js');
 var SnackbarContext = require('./snackbar/SnackbarContext.js');
 var SnackbarProvider = require('./snackbar/SnackbarProvider.js');
-var StatusIcon = require('./statusIcon/StatusIcon.js');
 var Stepper = require('./stepper/Stepper.js');
 var Sticky = require('./sticky/Sticky.js');
 var Summary = require('./summary/Summary.js');
@@ -98,7 +105,6 @@ var Typeahead = require('./typeahead/Typeahead.js');
 var Upload = require('./upload/Upload.js');
 var UploadInput = require('./uploadInput/UploadInput.js');
 require('@transferwise/neptune-validation');
-require('react');
 var useDirection = require('./common/hooks/useDirection/useDirection.js');
 var useLayout = require('./common/hooks/useLayout/useLayout.js');
 var useScreenSize = require('./common/hooks/useScreenSize.js');
@@ -107,7 +113,6 @@ var documentIosClick = require('./common/domHelpers/documentIosClick.js');
 var theme = require('./common/theme.js');
 var direction = require('./common/direction.js');
 var control = require('./common/propsValues/control.js');
-var breakpoint = require('./common/propsValues/breakpoint.js');
 var size = require('./common/propsValues/size.js');
 var typography = require('./common/propsValues/typography.js');
 var width = require('./common/propsValues/width.js');
@@ -124,11 +129,9 @@ var scroll = require('./common/propsValues/scroll.js');
 var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
 var fileType = require('./common/fileType.js');
 var index = require('./common/locale/index.js');
-require('@transferwise/icons');
-require('clsx');
+var colors = require('./common/colors.js');
 require('react-intl');
 require('./common/closeButton/CloseButton.messages.js');
-require('react/jsx-runtime');
 var index$1 = require('./i18n/index.js');
 var withId = require('./withId/withId.js');
 
@@ -148,8 +151,15 @@ Object.defineProperty(exports, "AvatarType", {
 	get: function () { return avatarTypes.AvatarType; }
 });
 exports.Avatar = Avatar;
+exports.AvatarView = AvatarView;
 exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
+exports.StatusIcon = StatusIcon;
+Object.defineProperty(exports, "Breakpoint", {
+	enumerable: true,
+	get: function () { return breakpoint.Breakpoint; }
+});
+exports.Image = Image.default;
 exports.Body = Body;
 exports.Button = Button;
 exports.Carousel = Carousel;
@@ -185,7 +195,6 @@ exports.Emphasis = Emphasis;
 exports.Field = Field.Field;
 exports.FlowNavigation = FlowNavigation;
 exports.Header = Header.Header;
-exports.Image = Image.default;
 Object.defineProperty(exports, "InfoPresentation", {
 	enumerable: true,
 	get: function () { return infoPresentations.InfoPresentation; }
@@ -242,7 +251,6 @@ exports.SnackbarPortal = Snackbar.default;
 exports.SnackbarConsumer = SnackbarContext.SnackbarConsumer;
 exports.SnackbarContext = SnackbarContext.SnackbarContext;
 exports.SnackbarProvider = SnackbarProvider;
-exports.StatusIcon = StatusIcon;
 exports.Stepper = Stepper;
 exports.Sticky = Sticky;
 exports.Summary = Summary;
@@ -281,10 +289,6 @@ Object.defineProperty(exports, "Priority", {
 	enumerable: true,
 	get: function () { return control.Priority; }
 });
-Object.defineProperty(exports, "Breakpoint", {
-	enumerable: true,
-	get: function () { return breakpoint.Breakpoint; }
-});
 Object.defineProperty(exports, "Size", {
 	enumerable: true,
 	get: function () { return size.Size; }
@@ -353,6 +357,7 @@ exports.adjustLocale = index.adjustLocale;
 exports.getCountryFromLocale = index.getCountryFromLocale;
 exports.getDirectionFromLocale = index.getDirectionFromLocale;
 exports.getLangFromLocale = index.getLangFromLocale;
+exports.getBrandColorFromSeed = colors.getBrandColorFromSeed;
 exports.translations = index$1;
 exports.withId = withId;
 //# sourceMappingURL=index.js.map

package/build/index.js.map

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

package/build/index.mjs

@@ -6,8 +6,17 @@ export { default as SelectOption } from './selectOption/SelectOption.mjs';
 export { default as Alert, AlertArrowPosition } from './alert/Alert.mjs';
 export { AvatarType } from './avatar/avatarTypes.mjs';
 export { default as Avatar } from './avatar/Avatar.mjs';
+export { default as AvatarView } from './avatarView/AvatarView.mjs';
 export { default as AvatarWrapper } from './avatarWrapper/AvatarWrapper.mjs';
 export { default as Badge } from './badge/Badge.mjs';
+export { default as StatusIcon } from './statusIcon/StatusIcon.mjs';
+import '@wise/art';
+import 'react';
+import 'clsx';
+export { Breakpoint } from './common/propsValues/breakpoint.mjs';
+import 'react/jsx-runtime';
+export { default as Image } from './image/Image.mjs';
+import '@transferwise/icons';
 export { default as Body } from './body/Body.mjs';
 export { default as Button } from './button/Button.mjs';
 export { default as Carousel } from './carousel/Carousel.mjs';
@@ -35,7 +44,6 @@ export { default as Emphasis } from './emphasis/Emphasis.mjs';
 export { Field } from './field/Field.mjs';
 export { default as FlowNavigation } from './flowNavigation/FlowNavigation.mjs';
 export { Header } from './header/Header.mjs';
-export { default as Image } from './image/Image.mjs';
 export { InfoPresentation } from './info/infoPresentations.mjs';
 export { default as Info } from './info/Info.mjs';
 export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
@@ -82,7 +90,6 @@ export { default as SlidingPanel } from './slidingPanel/SlidingPanel.mjs';
 export { default as SnackbarPortal } from './snackbar/Snackbar.mjs';
 export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext.mjs';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider.mjs';
-export { default as StatusIcon } from './statusIcon/StatusIcon.mjs';
 export { default as Stepper } from './stepper/Stepper.mjs';
 export { default as Sticky } from './sticky/Sticky.mjs';
 export { default as Summary } from './summary/Summary.mjs';
@@ -96,7 +103,6 @@ export { default as Typeahead } from './typeahead/Typeahead.mjs';
 export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
 import '@transferwise/neptune-validation';
-import 'react';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';
 export { useScreenSize } from './common/hooks/useScreenSize.mjs';
@@ -105,7 +111,6 @@ export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mj
 export { Theme } from './common/theme.mjs';
 export { Direction } from './common/direction.mjs';
 export { ControlType, Priority } from './common/propsValues/control.mjs';
-export { Breakpoint } from './common/propsValues/breakpoint.mjs';
 export { Size } from './common/propsValues/size.mjs';
 export { Typography } from './common/propsValues/typography.mjs';
 export { Width } from './common/propsValues/width.mjs';
@@ -122,11 +127,9 @@ export { Scroll } from './common/propsValues/scroll.mjs';
 export { MarkdownNodeType } from './common/propsValues/markdownNodeType.mjs';
 export { FileType } from './common/fileType.mjs';
 export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale } from './common/locale/index.mjs';
-import '@transferwise/icons';
-import 'clsx';
+export { getBrandColorFromSeed } from './common/colors.mjs';
 import 'react-intl';
 import './common/closeButton/CloseButton.messages.mjs';
-import 'react/jsx-runtime';
 export { default as translations } from './i18n/index.mjs';
 export { default as withId } from './withId/withId.mjs';
 //# sourceMappingURL=index.mjs.map

package/build/index.mjs.map

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

package/build/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/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/avatarView/AvatarView.css

@@ -0,0 +1,36 @@
+.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;
+}