@transferwise/components 46.86.1 → 46.86.3

package/build/avatarLayout/AvatarLayout.js

@@ -25,7 +25,8 @@ function AvatarLayout({
       // @ts-expect-error CSS custom props allowed
       '--np-avatar-layout-size': `${size}px`,
       '--np-avatar-size': `${avatarSize}px`,
-      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
+      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
+      '--np-avatar-avatars-count': avatars.length
     },
     ...restProps,
     children: avatars.map(({

package/build/avatarLayout/AvatarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}
+{"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n        '--np-avatar-avatars-count': avatars.length,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}

package/build/avatarLayout/AvatarLayout.mjs

@@ -23,7 +23,8 @@ function AvatarLayout({
       // @ts-expect-error CSS custom props allowed
       '--np-avatar-layout-size': `${size}px`,
       '--np-avatar-size': `${avatarSize}px`,
-      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
+      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
+      '--np-avatar-avatars-count': avatars.length
     },
     ...restProps,
     children: avatars.map(({

package/build/avatarLayout/AvatarLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}
+{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n        '--np-avatar-avatars-count': avatars.length,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}

package/build/index.js

@@ -106,6 +106,7 @@ var Tooltip = require('./tooltip/Tooltip.js');
 var Typeahead = require('./typeahead/Typeahead.js');
 var Upload = require('./upload/Upload.js');
 var UploadInput = require('./uploadInput/UploadInput.js');
+var Table = require('./table/Table.js');
 require('@transferwise/neptune-validation');
 var useDirection = require('./common/hooks/useDirection/useDirection.js');
 var useLayout = require('./common/hooks/useLayout/useLayout.js');
@@ -271,6 +272,7 @@ Object.defineProperty(exports, "UploadStep", {
 	get: function () { return Upload.UploadStep; }
 });
 exports.UploadInput = UploadInput;
+exports.Table = Table;
 exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;
 exports.useScreenSize = useScreenSize.useScreenSize;

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

@@ -104,6 +104,7 @@ export { default as Tooltip } from './tooltip/Tooltip.mjs';
 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';
+export { default as Table } from './table/Table.mjs';
 import '@transferwise/neptune-validation';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';

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

@@ -523,7 +523,8 @@ div.critical-comms .critical-comms-body {
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {

package/build/styles/avatarLayout/AvatarLayout.css

@@ -16,7 +16,8 @@
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {

package/build/styles/main.css

@@ -523,7 +523,8 @@ div.critical-comms .critical-comms-body {
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {

package/build/table/Table.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+var TableCell = require('./TableCell.js');
+var TableHeader = require('./TableHeader.js');
+var TableRow = require('./TableRow.js');
+var Alert = require('../alert/Alert.js');
+var Table_messages = require('./Table.messages.js');
+var Loader = require('../loader/Loader.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+var size = require('../common/propsValues/size.js');
+require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+var sentiment = require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/icons');
+var clsx = require('clsx');
+require('react');
+require('../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var StatusIcon = require('../statusIcon/StatusIcon.js');
+var componentsTheming = require('@wise/components-theming');
+var Body = require('../body/Body.js');
+
+const Table = ({
+  'aria-labelledby': ariaLabelledBy,
+  data,
+  loading,
+  className,
+  fullWidth = true,
+  error
+}) => {
+  const {
+    formatMessage
+  } = reactIntl.useIntl();
+  const {
+    theme
+  } = componentsTheming.useTheme();
+  const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);
+  const getRowLength = () => {
+    const columnsLength = data?.headers?.length ?? 0;
+    return data?.onRowClick ? columnsLength + 1 : columnsLength;
+  };
+  const getTableContent = () => {
+    if (loading) {
+      return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCell, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Loader, {
+            "data-testid": "np-table-loader"
+          })
+        })
+      });
+    }
+    // Shows the `emptyData` message when there is no data to display
+    if (!data?.rows?.length) {
+      return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCell, {
+          colSpan: data?.headers?.length,
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "np-table-empty-data",
+            "data-testid": "np-table-empty-data",
+            children: [/*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+              sentiment: sentiment.Sentiment.WARNING,
+              size: size.Size.MEDIUM
+            }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+              type: "body-default-bold",
+              children: formatMessage(Table_messages.emptyData)
+            })]
+          })
+        })
+      });
+    }
+    return data?.rows?.map((rowData, rowIndex) => {
+      return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+        rowData: rowData,
+        hasSeparator: data?.rows?.length ? data.rows.length - 1 !== rowIndex : false,
+        onRowClick: data?.onRowClick
+      }, 'table-row-'.concat(rowIndex.toString()));
+    });
+  };
+  if (error) {
+    return /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
+      className: "np-table-error",
+      message: error.message,
+      type: sentiment.Sentiment.NEGATIVE,
+      action: {
+        href: error?.action?.href ?? '/',
+        text: error?.action?.text ?? formatMessage(Table_messages.refreshPage)
+      },
+      "data-testid": "np-table-error"
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      "aria-live": "polite",
+      className: "sr-only",
+      children: formatMessage(Table_messages[loading ? 'loading' : 'loaded'])
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: loading ? 'presentation' : 'region',
+      "aria-labelledby": ariaLabelledBy,
+      className: clsx.clsx('np-table-outer-container', className, {
+        'np-theme-personal': theme === 'bright-green',
+        'np-table-outer-container--center': !fullWidth,
+        'np-table-outer-container--full-width': fullWidth
+      })
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0,
+      "data-testid": "np-table-outer-container",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: clsx.clsx('np-table-container', {
+          'np-table-container--loading': loading
+        }),
+        "data-testid": "np-table-container",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "np-table-inner-container",
+          children: /*#__PURE__*/jsxRuntime.jsxs("table", {
+            className: "np-table",
+            children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
+              "aria-hidden": isEmptyHeader,
+              children: /*#__PURE__*/jsxRuntime.jsxs("tr", {
+                children: [isEmptyHeader ? /*#__PURE__*/jsxRuntime.jsx(TableHeader, {}) : data?.headers?.map((headerItem, index) => /*#__PURE__*/jsxRuntime.jsx(TableHeader, {
+                  ...headerItem
+                }, headerItem.header?.concat(index.toString()))), data?.onRowClick && /*#__PURE__*/jsxRuntime.jsx(TableHeader, {
+                  isActionHeader: true
+                })]
+              })
+            }), /*#__PURE__*/jsxRuntime.jsxs("tbody", {
+              children: [/*#__PURE__*/jsxRuntime.jsx("tr", {
+                "aria-hidden": "true",
+                className: "np-table-row np-table-row--cosmetic",
+                children: /*#__PURE__*/jsxRuntime.jsx("td", {
+                  className: "np-table-cell",
+                  colSpan: getRowLength()
+                })
+              }, "first-np-table-row--cosmetic"), getTableContent(), /*#__PURE__*/jsxRuntime.jsx("tr", {
+                "aria-hidden": "true",
+                className: "np-table-row np-table-row--cosmetic",
+                children: /*#__PURE__*/jsxRuntime.jsx("td", {
+                  className: "np-table-cell",
+                  colSpan: getRowLength()
+                })
+              }, "last-np-table-row--cosmetic")]
+            })]
+          })
+        })
+      })
+    })]
+  });
+};
+
+module.exports = Table;
+//# sourceMappingURL=Table.js.map

package/build/table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n  'aria-labelledby'?: string;\n  data: {\n    headers?: TableHeaderType[];\n    rows?: TableRowType[] | TableRowClickableType[];\n    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n  };\n  loading?: boolean;\n  className?: string | undefined;\n  fullWidth?: boolean;\n  error?: {\n    message?: string;\n    action?: {\n      href?: string;\n      text?: string;\n    };\n  };\n}\n\nconst Table = ({\n  'aria-labelledby': ariaLabelledBy,\n  data,\n  loading,\n  className,\n  fullWidth = true,\n  error,\n}: TableProps) => {\n  const { formatMessage } = useIntl();\n  const { theme } = useTheme();\n  const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n  const getRowLength = () => {\n    const columnsLength = data?.headers?.length ?? 0;\n    return data?.onRowClick ? columnsLength + 1 : columnsLength;\n  };\n\n  const getTableContent = () => {\n    if (loading) {\n      return (\n        <TableRow>\n          <TableCell>\n            <Loader data-testid=\"np-table-loader\" />\n          </TableCell>\n        </TableRow>\n      );\n    }\n\n    // Shows the `emptyData` message when there is no data to display\n    if (!data?.rows?.length) {\n      return (\n        <TableRow>\n          <TableCell colSpan={data?.headers?.length}>\n            <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n              <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n              <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n            </div>\n          </TableCell>\n        </TableRow>\n      );\n    }\n\n    return data?.rows?.map((rowData, rowIndex) => {\n      return (\n        <TableRow\n          key={'table-row-'.concat(rowIndex.toString())}\n          rowData={rowData}\n          hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n          onRowClick={data?.onRowClick}\n        />\n      );\n    });\n  };\n\n  if (error) {\n    return (\n      <Alert\n        className=\"np-table-error\"\n        message={error.message}\n        type={Sentiment.NEGATIVE}\n        action={{\n          href: error?.action?.href ?? '/',\n          text: error?.action?.text ?? formatMessage(messages.refreshPage),\n        }}\n        data-testid=\"np-table-error\"\n      />\n    );\n  }\n\n  return (\n    <>\n      <div aria-live=\"polite\" className=\"sr-only\">\n        {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n      </div>\n      <div\n        role={loading ? 'presentation' : 'region'}\n        aria-labelledby={ariaLabelledBy}\n        className={clsx('np-table-outer-container', className, {\n          'np-theme-personal': theme === 'bright-green',\n          'np-table-outer-container--center': !fullWidth,\n          'np-table-outer-container--full-width': fullWidth,\n        })}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        data-testid=\"np-table-outer-container\"\n      >\n        <div\n          className={clsx('np-table-container', {\n            'np-table-container--loading': loading,\n          })}\n          data-testid=\"np-table-container\"\n        >\n          <div className=\"np-table-inner-container\">\n            <table className=\"np-table\">\n              <thead aria-hidden={isEmptyHeader}>\n                <tr>\n                  {isEmptyHeader ? (\n                    <TableHeader />\n                  ) : (\n                    data?.headers?.map((headerItem: TableHeaderType, index) => (\n                      <TableHeader\n                        key={headerItem.header?.concat(index.toString())}\n                        {...headerItem}\n                      />\n                    ))\n                  )}\n                  {data?.onRowClick && <TableHeader isActionHeader />}\n                </tr>\n              </thead>\n              <tbody>\n                <tr\n                  key=\"first-np-table-row--cosmetic\"\n                  aria-hidden=\"true\"\n                  className=\"np-table-row np-table-row--cosmetic\"\n                >\n                  <td className=\"np-table-cell\" colSpan={getRowLength()} />\n                </tr>\n                {getTableContent()}\n                <tr\n                  key=\"last-np-table-row--cosmetic\"\n                  aria-hidden=\"true\"\n                  className=\"np-table-row np-table-row--cosmetic\"\n                >\n                  <td className=\"np-table-cell\" colSpan={getRowLength()} />\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"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"}

package/build/table/Table.messages.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  loading: {
+    id: "neptune.Table.loading"
+  },
+  loaded: {
+    id: "neptune.Table.loaded"
+  },
+  emptyData: {
+    id: "neptune.Table.emptyData"
+  },
+  refreshPage: {
+    id: "neptune.Table.refreshPage"
+  },
+  actionHeader: {
+    id: "neptune.Table.actionHeader"
+  }
+});
+
+module.exports = messages;
+//# sourceMappingURL=Table.messages.js.map

package/build/table/Table.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.messages.js","sources":["../../src/table/Table.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  loading: {\n    id: 'neptune.Table.loading',\n    defaultMessage: 'Table data is loading',\n  },\n  loaded: {\n    id: 'neptune.Table.loaded',\n    defaultMessage: 'Table data has loaded',\n  },\n  emptyData: {\n    id: 'neptune.Table.emptyData',\n    defaultMessage: 'No results found',\n  },\n  refreshPage: {\n    id: 'neptune.Table.refreshPage',\n    defaultMessage: 'Refresh page',\n  },\n  actionHeader: {\n    id: 'neptune.Table.actionHeader',\n    defaultMessage: 'Action',\n  },\n});\n"],"names":["defineMessages","loading","id","loaded","emptyData","refreshPage","actionHeader"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,OAAO,EAAE;IACPC,EAAE,EAAA,uBAAA;GAEH;AACDC,EAAAA,MAAM,EAAE;IACND,EAAE,EAAA,sBAAA;GAEH;AACDE,EAAAA,SAAS,EAAE;IACTF,EAAE,EAAA,yBAAA;GAEH;AACDG,EAAAA,WAAW,EAAE;IACXH,EAAE,EAAA,2BAAA;GAEH;AACDI,EAAAA,YAAY,EAAE;IACZJ,EAAE,EAAA,4BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/table/Table.messages.mjs

@@ -0,0 +1,22 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  loading: {
+    id: "neptune.Table.loading"
+  },
+  loaded: {
+    id: "neptune.Table.loaded"
+  },
+  emptyData: {
+    id: "neptune.Table.emptyData"
+  },
+  refreshPage: {
+    id: "neptune.Table.refreshPage"
+  },
+  actionHeader: {
+    id: "neptune.Table.actionHeader"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=Table.messages.mjs.map

package/build/table/Table.messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.messages.mjs","sources":["../../src/table/Table.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  loading: {\n    id: 'neptune.Table.loading',\n    defaultMessage: 'Table data is loading',\n  },\n  loaded: {\n    id: 'neptune.Table.loaded',\n    defaultMessage: 'Table data has loaded',\n  },\n  emptyData: {\n    id: 'neptune.Table.emptyData',\n    defaultMessage: 'No results found',\n  },\n  refreshPage: {\n    id: 'neptune.Table.refreshPage',\n    defaultMessage: 'Refresh page',\n  },\n  actionHeader: {\n    id: 'neptune.Table.actionHeader',\n    defaultMessage: 'Action',\n  },\n});\n"],"names":["defineMessages","loading","id","loaded","emptyData","refreshPage","actionHeader"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,OAAO,EAAE;IACPC,EAAE,EAAA,uBAAA;GAEH;AACDC,EAAAA,MAAM,EAAE;IACND,EAAE,EAAA,sBAAA;GAEH;AACDE,EAAAA,SAAS,EAAE;IACTF,EAAE,EAAA,yBAAA;GAEH;AACDG,EAAAA,WAAW,EAAE;IACXH,EAAE,EAAA,2BAAA;GAEH;AACDI,EAAAA,YAAY,EAAE;IACZJ,EAAE,EAAA,4BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/table/Table.mjs

@@ -0,0 +1,164 @@
+import { useIntl } from 'react-intl';
+import TableCell from './TableCell.mjs';
+import TableHeader from './TableHeader.mjs';
+import TableRow from './TableRow.mjs';
+import Alert from '../alert/Alert.mjs';
+import messages from './Table.messages.mjs';
+import Loader from '../loader/Loader.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
+import { Size } from '../common/propsValues/size.mjs';
+import '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import { Sentiment } from '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/icons';
+import { clsx } from 'clsx';
+import 'react';
+import '../common/closeButton/CloseButton.messages.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import StatusIcon from '../statusIcon/StatusIcon.mjs';
+import { useTheme } from '@wise/components-theming';
+import Body from '../body/Body.mjs';
+
+const Table = ({
+  'aria-labelledby': ariaLabelledBy,
+  data,
+  loading,
+  className,
+  fullWidth = true,
+  error
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    theme
+  } = useTheme();
+  const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);
+  const getRowLength = () => {
+    const columnsLength = data?.headers?.length ?? 0;
+    return data?.onRowClick ? columnsLength + 1 : columnsLength;
+  };
+  const getTableContent = () => {
+    if (loading) {
+      return /*#__PURE__*/jsx(TableRow, {
+        children: /*#__PURE__*/jsx(TableCell, {
+          children: /*#__PURE__*/jsx(Loader, {
+            "data-testid": "np-table-loader"
+          })
+        })
+      });
+    }
+    // Shows the `emptyData` message when there is no data to display
+    if (!data?.rows?.length) {
+      return /*#__PURE__*/jsx(TableRow, {
+        children: /*#__PURE__*/jsx(TableCell, {
+          colSpan: data?.headers?.length,
+          children: /*#__PURE__*/jsxs("div", {
+            className: "np-table-empty-data",
+            "data-testid": "np-table-empty-data",
+            children: [/*#__PURE__*/jsx(StatusIcon, {
+              sentiment: Sentiment.WARNING,
+              size: Size.MEDIUM
+            }), /*#__PURE__*/jsx(Body, {
+              type: "body-default-bold",
+              children: formatMessage(messages.emptyData)
+            })]
+          })
+        })
+      });
+    }
+    return data?.rows?.map((rowData, rowIndex) => {
+      return /*#__PURE__*/jsx(TableRow, {
+        rowData: rowData,
+        hasSeparator: data?.rows?.length ? data.rows.length - 1 !== rowIndex : false,
+        onRowClick: data?.onRowClick
+      }, 'table-row-'.concat(rowIndex.toString()));
+    });
+  };
+  if (error) {
+    return /*#__PURE__*/jsx(Alert, {
+      className: "np-table-error",
+      message: error.message,
+      type: Sentiment.NEGATIVE,
+      action: {
+        href: error?.action?.href ?? '/',
+        text: error?.action?.text ?? formatMessage(messages.refreshPage)
+      },
+      "data-testid": "np-table-error"
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      "aria-live": "polite",
+      className: "sr-only",
+      children: formatMessage(messages[loading ? 'loading' : 'loaded'])
+    }), /*#__PURE__*/jsx("div", {
+      role: loading ? 'presentation' : 'region',
+      "aria-labelledby": ariaLabelledBy,
+      className: clsx('np-table-outer-container', className, {
+        'np-theme-personal': theme === 'bright-green',
+        'np-table-outer-container--center': !fullWidth,
+        'np-table-outer-container--full-width': fullWidth
+      })
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0,
+      "data-testid": "np-table-outer-container",
+      children: /*#__PURE__*/jsx("div", {
+        className: clsx('np-table-container', {
+          'np-table-container--loading': loading
+        }),
+        "data-testid": "np-table-container",
+        children: /*#__PURE__*/jsx("div", {
+          className: "np-table-inner-container",
+          children: /*#__PURE__*/jsxs("table", {
+            className: "np-table",
+            children: [/*#__PURE__*/jsx("thead", {
+              "aria-hidden": isEmptyHeader,
+              children: /*#__PURE__*/jsxs("tr", {
+                children: [isEmptyHeader ? /*#__PURE__*/jsx(TableHeader, {}) : data?.headers?.map((headerItem, index) => /*#__PURE__*/jsx(TableHeader, {
+                  ...headerItem
+                }, headerItem.header?.concat(index.toString()))), data?.onRowClick && /*#__PURE__*/jsx(TableHeader, {
+                  isActionHeader: true
+                })]
+              })
+            }), /*#__PURE__*/jsxs("tbody", {
+              children: [/*#__PURE__*/jsx("tr", {
+                "aria-hidden": "true",
+                className: "np-table-row np-table-row--cosmetic",
+                children: /*#__PURE__*/jsx("td", {
+                  className: "np-table-cell",
+                  colSpan: getRowLength()
+                })
+              }, "first-np-table-row--cosmetic"), getTableContent(), /*#__PURE__*/jsx("tr", {
+                "aria-hidden": "true",
+                className: "np-table-row np-table-row--cosmetic",
+                children: /*#__PURE__*/jsx("td", {
+                  className: "np-table-cell",
+                  colSpan: getRowLength()
+                })
+              }, "last-np-table-row--cosmetic")]
+            })]
+          })
+        })
+      })
+    })]
+  });
+};
+
+export { Table as default };
+//# sourceMappingURL=Table.mjs.map

package/build/table/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n  'aria-labelledby'?: string;\n  data: {\n    headers?: TableHeaderType[];\n    rows?: TableRowType[] | TableRowClickableType[];\n    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n  };\n  loading?: boolean;\n  className?: string | undefined;\n  fullWidth?: boolean;\n  error?: {\n    message?: string;\n    action?: {\n      href?: string;\n      text?: string;\n    };\n  };\n}\n\nconst Table = ({\n  'aria-labelledby': ariaLabelledBy,\n  data,\n  loading,\n  className,\n  fullWidth = true,\n  error,\n}: TableProps) => {\n  const { formatMessage } = useIntl();\n  const { theme } = useTheme();\n  const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n  const getRowLength = () => {\n    const columnsLength = data?.headers?.length ?? 0;\n    return data?.onRowClick ? columnsLength + 1 : columnsLength;\n  };\n\n  const getTableContent = () => {\n    if (loading) {\n      return (\n        <TableRow>\n          <TableCell>\n            <Loader data-testid=\"np-table-loader\" />\n          </TableCell>\n        </TableRow>\n      );\n    }\n\n    // Shows the `emptyData` message when there is no data to display\n    if (!data?.rows?.length) {\n      return (\n        <TableRow>\n          <TableCell colSpan={data?.headers?.length}>\n            <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n              <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n              <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n            </div>\n          </TableCell>\n        </TableRow>\n      );\n    }\n\n    return data?.rows?.map((rowData, rowIndex) => {\n      return (\n        <TableRow\n          key={'table-row-'.concat(rowIndex.toString())}\n          rowData={rowData}\n          hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n          onRowClick={data?.onRowClick}\n        />\n      );\n    });\n  };\n\n  if (error) {\n    return (\n      <Alert\n        className=\"np-table-error\"\n        message={error.message}\n        type={Sentiment.NEGATIVE}\n        action={{\n          href: error?.action?.href ?? '/',\n          text: error?.action?.text ?? formatMessage(messages.refreshPage),\n        }}\n        data-testid=\"np-table-error\"\n      />\n    );\n  }\n\n  return (\n    <>\n      <div aria-live=\"polite\" className=\"sr-only\">\n        {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n      </div>\n      <div\n        role={loading ? 'presentation' : 'region'}\n        aria-labelledby={ariaLabelledBy}\n        className={clsx('np-table-outer-container', className, {\n          'np-theme-personal': theme === 'bright-green',\n          'np-table-outer-container--center': !fullWidth,\n          'np-table-outer-container--full-width': fullWidth,\n        })}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        data-testid=\"np-table-outer-container\"\n      >\n        <div\n          className={clsx('np-table-container', {\n            'np-table-container--loading': loading,\n          })}\n          data-testid=\"np-table-container\"\n        >\n          <div className=\"np-table-inner-container\">\n            <table className=\"np-table\">\n              <thead aria-hidden={isEmptyHeader}>\n                <tr>\n                  {isEmptyHeader ? (\n                    <TableHeader />\n                  ) : (\n                    data?.headers?.map((headerItem: TableHeaderType, index) => (\n                      <TableHeader\n                        key={headerItem.header?.concat(index.toString())}\n                        {...headerItem}\n                      />\n                    ))\n                  )}\n                  {data?.onRowClick && <TableHeader isActionHeader />}\n                </tr>\n              </thead>\n              <tbody>\n                <tr\n                  key=\"first-np-table-row--cosmetic\"\n                  aria-hidden=\"true\"\n                  className=\"np-table-row np-table-row--cosmetic\"\n                >\n                  <td className=\"np-table-cell\" colSpan={getRowLength()} />\n                </tr>\n                {getTableContent()}\n                <tr\n                  key=\"last-np-table-row--cosmetic\"\n                  aria-hidden=\"true\"\n                  className=\"np-table-row np-table-row--cosmetic\"\n                >\n                  <td className=\"np-table-cell\" colSpan={getRowLength()} />\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;AACb,EAAA,iBAAiB,EAAEC,cAAc;EACjCC,IAAI;EACJC,OAAO;EACPC,SAAS;AACTC,EAAAA,SAAS,GAAG,IAAI;AAChBC,EAAAA,KAAAA;AACW,CAAA,KAAI;EACf,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;EACnC,MAAM;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,QAAQ,EAAE,CAAA;AAC5B,EAAA,MAAMC,aAAa,GAAGR,OAAO,KAAKD,IAAI,EAAEU,OAAO,IAAI,CAACV,IAAI,EAAEU,OAAO,CAACC,MAAM,CAAC,CAAA;EAEzE,MAAMC,YAAY,GAAGA,MAAK;IACxB,MAAMC,aAAa,GAAGb,IAAI,EAAEU,OAAO,EAAEC,MAAM,IAAI,CAAC,CAAA;IAChD,OAAOX,IAAI,EAAEc,UAAU,GAAGD,aAAa,GAAG,CAAC,GAAGA,aAAa,CAAA;GAC5D,CAAA;EAED,MAAME,eAAe,GAAGA,MAAK;AAC3B,IAAA,IAAId,OAAO,EAAE;MACX,oBACEe,GAAA,CAACC,QAAQ,EAAA;QAAAC,QAAA,eACPF,GAAA,CAACG,SAAS,EAAA;UAAAD,QAAA,eACRF,GAAA,CAACI,MAAM,EAAA;YAAC,aAAY,EAAA,iBAAA;WACtB,CAAA;SAAW,CAAA;AACb,OAAU,CAAC,CAAA;AAEf,KAAA;AAEA;AACA,IAAA,IAAI,CAACpB,IAAI,EAAEqB,IAAI,EAAEV,MAAM,EAAE;MACvB,oBACEK,GAAA,CAACC,QAAQ,EAAA;QAAAC,QAAA,eACPF,GAAA,CAACG,SAAS,EAAA;AAACG,UAAAA,OAAO,EAAEtB,IAAI,EAAEU,OAAO,EAAEC,MAAO;AAAAO,UAAAA,QAAA,eACxCK,IAAA,CAAA,KAAA,EAAA;AAAKrB,YAAAA,SAAS,EAAC,qBAAqB;AAAC,YAAA,aAAA,EAAY,qBAAqB;YAAAgB,QAAA,EAAA,cACpEF,GAAA,CAACQ,UAAU,EAAA;cAACC,SAAS,EAAEC,SAAS,CAACC,OAAQ;cAACC,IAAI,EAAEC,IAAI,CAACC,MAAAA;AAAO,aAC5D,CAAA,eAAAd,GAAA,CAACe,IAAI,EAAA;AAACC,cAAAA,IAAI,EAAC,mBAAmB;AAAAd,cAAAA,QAAA,EAAEb,aAAa,CAAC4B,QAAQ,CAACC,SAAS,CAAA;AAAC,aAAO,CAC1E,CAAA;WAAK,CAAA;SACI,CAAA;AACb,OAAU,CAAC,CAAA;AAEf,KAAA;IAEA,OAAOlC,IAAI,EAAEqB,IAAI,EAAEc,GAAG,CAAC,CAACC,OAAO,EAAEC,QAAQ,KAAI;MAC3C,oBACErB,GAAA,CAACC,QAAQ,EAAA;AAEPmB,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,YAAY,EAAEtC,IAAI,EAAEqB,IAAI,EAAEV,MAAM,GAAGX,IAAI,CAACqB,IAAI,CAACV,MAAM,GAAG,CAAC,KAAK0B,QAAQ,GAAG,KAAM;QAC7EvB,UAAU,EAAEd,IAAI,EAAEc,UAAAA;OAHb,EAAA,YAAY,CAACyB,MAAM,CAACF,QAAQ,CAACG,QAAQ,EAAE,CAI5C,CAAA,CAAA;AAEN,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAIpC,KAAK,EAAE;IACT,oBACEY,GAAA,CAACyB,KAAK,EAAA;AACJvC,MAAAA,SAAS,EAAC,gBAAgB;MAC1BwC,OAAO,EAAEtC,KAAK,CAACsC,OAAQ;MACvBV,IAAI,EAAEN,SAAS,CAACiB,QAAS;AACzBC,MAAAA,MAAM,EAAE;AACNC,QAAAA,IAAI,EAAEzC,KAAK,EAAEwC,MAAM,EAAEC,IAAI,IAAI,GAAG;QAChCC,IAAI,EAAE1C,KAAK,EAAEwC,MAAM,EAAEE,IAAI,IAAIzC,aAAa,CAAC4B,QAAQ,CAACc,WAAW,CAAA;OAC/D;MACF,aAAY,EAAA,gBAAA;AAAgB,KAAA,CAC5B,CAAA;AAEN,GAAA;EAEA,oBACExB,IAAA,CAAAyB,QAAA,EAAA;AAAA9B,IAAAA,QAAA,gBACEF,GAAA,CAAA,KAAA,EAAA;AAAK,MAAA,WAAA,EAAU,QAAQ;AAACd,MAAAA,SAAS,EAAC,SAAS;MAAAgB,QAAA,EACxCb,aAAa,CAAC4B,QAAQ,CAAChC,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;KACpD,CACL,eAAAe,GAAA,CAAA,KAAA,EAAA;AACEiC,MAAAA,IAAI,EAAEhD,OAAO,GAAG,cAAc,GAAG,QAAS;AAC1C,MAAA,iBAAA,EAAiBF,cAAe;AAChCG,MAAAA,SAAS,EAAEgD,IAAI,CAAC,0BAA0B,EAAEhD,SAAS,EAAE;QACrD,mBAAmB,EAAEK,KAAK,KAAK,cAAc;QAC7C,kCAAkC,EAAE,CAACJ,SAAS;AAC9C,QAAA,sCAAsC,EAAEA,SAAAA;OACzC,CAAA;AACD;AAAA;AACAgD,MAAAA,QAAQ,EAAE,CAAE;AACZ,MAAA,aAAA,EAAY,0BAA0B;AAAAjC,MAAAA,QAAA,eAEtCF,GAAA,CAAA,KAAA,EAAA;AACEd,QAAAA,SAAS,EAAEgD,IAAI,CAAC,oBAAoB,EAAE;AACpC,UAAA,6BAA6B,EAAEjD,OAAAA;AAChC,SAAA,CAAE;AACH,QAAA,aAAA,EAAY,oBAAoB;AAAAiB,QAAAA,QAAA,eAEhCF,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAC,0BAA0B;AAAAgB,UAAAA,QAAA,eACvCK,IAAA,CAAA,OAAA,EAAA;AAAOrB,YAAAA,SAAS,EAAC,UAAU;AAAAgB,YAAAA,QAAA,gBACzBF,GAAA,CAAA,OAAA,EAAA;AAAO,cAAA,aAAA,EAAaP,aAAc;AAAAS,cAAAA,QAAA,eAChCK,IAAA,CAAA,IAAA,EAAA;gBAAAL,QAAA,EAAA,CACGT,aAAa,gBACZO,GAAA,CAACoC,WAAW,EAAA,EAAA,CAAG,GAEfpD,IAAI,EAAEU,OAAO,EAAEyB,GAAG,CAAC,CAACkB,UAA2B,EAAEC,KAAK,kBACpDtC,GAAA,CAACoC,WAAW,EAAA;kBAAA,GAENC,UAAAA;iBADCA,EAAAA,UAAU,CAACE,MAAM,EAAEhB,MAAM,CAACe,KAAK,CAACd,QAAQ,EAAE,CAE/C,CACH,CACF,EACAxC,IAAI,EAAEc,UAAU,iBAAIE,GAAA,CAACoC,WAAW,EAAA;kBAACI,cAAc,EAAA,IAAA;AAAA,iBAAA,CAAG,CAAA;eACjD,CAAA;aACC,CACP,eAAAjC,IAAA,CAAA,OAAA,EAAA;AAAAL,cAAAA,QAAA,gBACEF,GAAA,CAAA,IAAA,EAAA;AAEE,gBAAA,aAAA,EAAY,MAAM;AAClBd,gBAAAA,SAAS,EAAC,qCAAqC;AAAAgB,gBAAAA,QAAA,eAE/CF,GAAA,CAAA,IAAA,EAAA;AAAId,kBAAAA,SAAS,EAAC,eAAe;kBAACoB,OAAO,EAAEV,YAAY,EAAE;iBACvD,CAAA;AAAA,eAAA,EALM,8BAKF,CACJ,EAACG,eAAe,EAAE,eAClBC,GAAA,CAAA,IAAA,EAAA;AAEE,gBAAA,aAAA,EAAY,MAAM;AAClBd,gBAAAA,SAAS,EAAC,qCAAqC;AAAAgB,gBAAAA,QAAA,eAE/CF,GAAA,CAAA,IAAA,EAAA;AAAId,kBAAAA,SAAS,EAAC,eAAe;kBAACoB,OAAO,EAAEV,YAAY,EAAE;iBACvD,CAAA;AAAA,eAAA,EALM,6BAKF,CACN,CAAA;AAAA,aAAO,CACT,CAAA;WAAO,CAAA;SACJ,CAAA;OACF,CAAA;AACP,KAAK,CACP,CAAA;AAAA,GAAA,CAAG,CAAA;AAEP;;;;"}