@transferwise/components 0.0.0-experimental-87a405e → 0.0.0-experimental-6b7c8fd

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';\nimport { useDirection } from '../common/hooks';\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 { isRTL } = useDirection();\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            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\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: 16, 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","isRTL","useDirection","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';\nimport { useDirection } from '../common/hooks';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive' | 'dot'\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 { isRTL } = useDirection();\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            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\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: 16, 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","isRTL","useDirection","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.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\nimport { useDirection } from '../common/hooks';\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 { isRTL } = useDirection();\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            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\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: 16, 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","isRTL","useDirection","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';\nimport { useDirection } from '../common/hooks';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive' | 'dot'\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 { isRTL } = useDirection();\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            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\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: 16, 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","isRTL","useDirection","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/avatarView/AvatarView.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Badge = require('../badge/Badge.js');
 var BadgeAssets = require('../badge/BadgeAssets.js');
-var NotificationDot = require('./NotificationDot.js');
+var Dot = require('./Dot.js');
 var Circle = require('../common/circle/Circle.js');
 var Image = require('../image/Image.js');
 var React = require('react');
@@ -39,6 +39,7 @@ function AvatarView({
   size = 48,
   selected,
   notification,
+  dot,
   badge,
   interactive = false,
   className,
@@ -59,6 +60,7 @@ function AvatarView({
       avatar: {
         size,
         notification,
+        dot,
         selected
       },
       ...badge,
@@ -122,7 +124,8 @@ function Badges({
   const {
     size = 48,
     selected,
-    notification
+    notification,
+    dot
   } = avatar;
   const anyBadge = Object.values({
     customBadge,
@@ -150,9 +153,10 @@ function Badges({
       children: children
     });
   }
-  if (notification) {
-    return /*#__PURE__*/jsxRuntime.jsx(NotificationDot.default, {
+  if (notification || dot) {
+    return /*#__PURE__*/jsxRuntime.jsx(Dot.default, {
       avatarSize: size,
+      variant: dot,
       children: children
     });
   }

package/build/avatarView/AvatarView.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  notification?: boolean;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, notification, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected, notification } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n  if ((anyBadge || selected) && size > 16) {\n    const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        size={badgeSize}\n        badge={\n          customBadge ? (\n            <Circle fixedSize size={badgeSize}>\n              {customBadge}\n            </Circle>\n          ) : (\n            <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n          )\n        }\n        style={{\n          // @ts-expect-error CSS custom props allowed\n          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n        }}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  if (notification) {\n    return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n  }\n  return children;\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
+{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** @deprecated Use `dot` instead. */\n  notification?: boolean;\n  dot?: DotProps['variant'];\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\n  dot,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, notification, dot, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size' | 'notification' | 'dot'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected, notification, dot } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n  if ((anyBadge || selected) && size > 16) {\n    const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        size={badgeSize}\n        badge={\n          customBadge ? (\n            <Circle fixedSize size={badgeSize}>\n              {customBadge}\n            </Circle>\n          ) : (\n            <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n          )\n        }\n        style={{\n          // @ts-expect-error CSS custom props allowed\n          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n        }}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  if (notification || dot) {\n    return (\n      <Dot avatarSize={size} variant={dot}>\n        {children}\n      </Dot>\n    );\n  }\n  return children;\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","dot","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","Dot","avatarSize","variant","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/avatarView/AvatarView.mjs

@@ -1,6 +1,6 @@
 import Badge from '../badge/Badge.mjs';
 import BadgeAssets from '../badge/BadgeAssets.mjs';
-import NotificationDot from './NotificationDot.mjs';
+import Dot from './Dot.mjs';
 import Circle from '../common/circle/Circle.mjs';
 import Image from '../image/Image.mjs';
 import { useState } from 'react';
@@ -35,6 +35,7 @@ function AvatarView({
   size = 48,
   selected,
   notification,
+  dot,
   badge,
   interactive = false,
   className,
@@ -55,6 +56,7 @@ function AvatarView({
       avatar: {
         size,
         notification,
+        dot,
         selected
       },
       ...badge,
@@ -118,7 +120,8 @@ function Badges({
   const {
     size = 48,
     selected,
-    notification
+    notification,
+    dot
   } = avatar;
   const anyBadge = Object.values({
     customBadge,
@@ -146,9 +149,10 @@ function Badges({
       children: children
     });
   }
-  if (notification) {
-    return /*#__PURE__*/jsx(NotificationDot, {
+  if (notification || dot) {
+    return /*#__PURE__*/jsx(Dot, {
       avatarSize: size,
+      variant: dot,
       children: children
     });
   }

package/build/avatarView/AvatarView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  notification?: boolean;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, notification, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected, notification } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n  if ((anyBadge || selected) && size > 16) {\n    const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        size={badgeSize}\n        badge={\n          customBadge ? (\n            <Circle fixedSize size={badgeSize}>\n              {customBadge}\n            </Circle>\n          ) : (\n            <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n          )\n        }\n        style={{\n          // @ts-expect-error CSS custom props allowed\n          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n        }}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  if (notification) {\n    return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n  }\n  return children;\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
+{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** @deprecated Use `dot` instead. */\n  notification?: boolean;\n  dot?: DotProps['variant'];\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\n  dot,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, notification, dot, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size' | 'notification' | 'dot'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected, notification, dot } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n  if ((anyBadge || selected) && size > 16) {\n    const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        size={badgeSize}\n        badge={\n          customBadge ? (\n            <Circle fixedSize size={badgeSize}>\n              {customBadge}\n            </Circle>\n          ) : (\n            <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n          )\n        }\n        style={{\n          // @ts-expect-error CSS custom props allowed\n          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n        }}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  if (notification || dot) {\n    return (\n      <Dot avatarSize={size} variant={dot}>\n        {children}\n      </Dot>\n    );\n  }\n  return children;\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","dot","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","Dot","avatarSize","variant","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/avatarView/{NotificationDot.js → Dot.js}

@@ -2,11 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 
-/**
- * Depending on avatar size, notifcation dot size and offset are different
- */
 const MAP_STYLE_CONFIG = {
   16: {
     size: 6,
@@ -37,25 +35,29 @@ const MAP_STYLE_CONFIG = {
     offset: 3
   }
 };
-function NotificationDot({
+function Dot({
   children,
-  avatarSize = 48
+  avatarSize = 48,
+  variant = 'notification'
 }) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "np-notification-dot",
+    className: "np-dot",
     style: {
       // @ts-expect-error CSS custom props allowed
-      '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
-      '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`
+      '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
+      '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`
     },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-notification-dot-badge"
+      className: clsx.clsx('np-dot-badge', {
+        'np-dot-badge-notification': variant === 'notification',
+        'np-dot-badge-online': variant === 'online'
+      })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-notification-dot-mask",
+      className: "np-dot-mask",
       children: children
     })]
   });
 }
 
-exports.default = NotificationDot;
-//# sourceMappingURL=NotificationDot.js.map
+exports.default = Dot;
+//# sourceMappingURL=Dot.js.map

package/build/avatarView/Dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.js","sources":["../../src/avatarView/Dot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\nimport { clsx } from 'clsx';\n\nexport type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n  variant?: 'notification' | 'online';\n};\n\n/**\n * Depending on avatar size, dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n};\n\nexport default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {\n  return (\n    <div\n      className=\"np-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div\n        className={clsx('np-dot-badge', {\n          'np-dot-badge-notification': variant === 'notification',\n          'np-dot-badge-online': variant === 'online',\n        })}\n      />\n      <div className=\"np-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","Dot","children","avatarSize","variant","_jsxs","className","style","_jsx","clsx"],"mappings":";;;;;;;AAYA,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAE;AAAEC,EAAAA,OAAO,GAAG;AAAc,CAAY,EAAA;AAC3F,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,KAAK,EAAE;AACL;MACA,eAAe,EAAE,GAAGT,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACzD,MAAA,iBAAiB,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACzD;AAAAE,IAAAA,QAAA,gBAEFM,cAAA,CAAA,KAAA,EAAA;AACEF,MAAAA,SAAS,EAAEG,SAAI,CAAC,cAAc,EAAE;QAC9B,2BAA2B,EAAEL,OAAO,KAAK,cAAc;QACvD,qBAAqB,EAAEA,OAAO,KAAK;OACpC;KAAE,CAEL,eAAAI,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,aAAa;AAAAJ,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC9C;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/avatarView/{NotificationDot.mjs → Dot.mjs}

@@ -1,8 +1,6 @@
+import { clsx } from 'clsx';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-/**
- * Depending on avatar size, notifcation dot size and offset are different
- */
 const MAP_STYLE_CONFIG = {
   16: {
     size: 6,
@@ -33,25 +31,29 @@ const MAP_STYLE_CONFIG = {
     offset: 3
   }
 };
-function NotificationDot({
+function Dot({
   children,
-  avatarSize = 48
+  avatarSize = 48,
+  variant = 'notification'
 }) {
   return /*#__PURE__*/jsxs("div", {
-    className: "np-notification-dot",
+    className: "np-dot",
     style: {
       // @ts-expect-error CSS custom props allowed
-      '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
-      '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`
+      '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
+      '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`
     },
     children: [/*#__PURE__*/jsx("div", {
-      className: "np-notification-dot-badge"
+      className: clsx('np-dot-badge', {
+        'np-dot-badge-notification': variant === 'notification',
+        'np-dot-badge-online': variant === 'online'
+      })
     }), /*#__PURE__*/jsx("div", {
-      className: "np-notification-dot-mask",
+      className: "np-dot-mask",
       children: children
     })]
   });
 }
 
-export { NotificationDot as default };
-//# sourceMappingURL=NotificationDot.mjs.map
+export { Dot as default };
+//# sourceMappingURL=Dot.mjs.map

package/build/avatarView/Dot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.mjs","sources":["../../src/avatarView/Dot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\nimport { clsx } from 'clsx';\n\nexport type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n  variant?: 'notification' | 'online';\n};\n\n/**\n * Depending on avatar size, dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n};\n\nexport default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {\n  return (\n    <div\n      className=\"np-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div\n        className={clsx('np-dot-badge', {\n          'np-dot-badge-notification': variant === 'notification',\n          'np-dot-badge-online': variant === 'online',\n        })}\n      />\n      <div className=\"np-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","Dot","children","avatarSize","variant","_jsxs","className","style","_jsx","clsx"],"mappings":";;;AAYA,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAE;AAAEC,EAAAA,OAAO,GAAG;AAAc,CAAY,EAAA;AAC3F,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,KAAK,EAAE;AACL;MACA,eAAe,EAAE,GAAGT,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACzD,MAAA,iBAAiB,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACzD;AAAAE,IAAAA,QAAA,gBAEFM,GAAA,CAAA,KAAA,EAAA;AACEF,MAAAA,SAAS,EAAEG,IAAI,CAAC,cAAc,EAAE;QAC9B,2BAA2B,EAAEL,OAAO,KAAK,cAAc;QACvD,qBAAqB,EAAEA,OAAO,KAAK;OACpC;KAAE,CAEL,eAAAI,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,aAAa;AAAAJ,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC9C;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/main.css

@@ -433,26 +433,32 @@
 .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;
+.np-dot {
+  --np-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-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
 }
-.np-notification-dot-badge {
+.np-dot-badge {
   position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
   border-radius: 9999px;
   border-radius: var(--radius-full);
   right: 0;
 }
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
   color: var(--color-content-primary);

package/build/styles/avatarView/AvatarView.css

@@ -1,23 +1,29 @@
-.np-notification-dot {
-  --np-notification-dot-size: 14px;
+.np-dot {
+  --np-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-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
 }
-.np-notification-dot-badge {
+.np-dot-badge {
   position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
   border-radius: 9999px;
   border-radius: var(--radius-full);
   right: 0;
 }
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
   color: var(--color-content-primary);

package/build/styles/avatarView/Dot.css

@@ -0,0 +1,26 @@
+.np-dot {
+  --np-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+}
+.np-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+}
+.np-dot-badge {
+  position: absolute;
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  right: 0;
+}
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}

package/build/styles/main.css

@@ -433,26 +433,32 @@
 .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;
+.np-dot {
+  --np-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-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
 }
-.np-notification-dot-badge {
+.np-dot-badge {
   position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
   border-radius: 9999px;
   border-radius: var(--radius-full);
   right: 0;
 }
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
   color: var(--color-content-primary);

package/build/types/avatarLayout/AvatarLayout.d.ts

@@ -1,7 +1,7 @@
 import { AvatarViewProps } from '../avatarView';
 type SingleAvatarType = {
     asset?: AvatarViewProps['children'];
-} & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'>;
+} & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive' | 'dot'>;
 export type Props = {
     avatars: SingleAvatarType[];
     orientation?: 'horizontal' | 'diagonal';

package/build/types/avatarLayout/AvatarLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CACpE,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAC5E,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CACN,eAAe,EACf,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAY,EACZ,WAAW,EAAE,eAA8B,EAC3C,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,sCAwDP"}
+{"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CACpE,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,KAAK,CACpF,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CACN,eAAe,EACf,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAY,EACZ,WAAW,EAAE,eAA8B,EAC3C,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,sCAwDP"}

package/build/types/avatarView/AvatarView.d.ts

@@ -1,4 +1,5 @@
 import { BadgeProps, BadgeAssetsProps } from '../badge';
+import { DotProps } from './Dot';
 import { HTMLAttributes } from 'react';
 import { ProfileTypeBusiness, ProfileTypePersonal } from '../common';
 export type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> & Pick<BadgeProps, 'aria-label'> & {
@@ -15,12 +16,14 @@ export type Props = {
     profileName?: string | null;
     profileType?: ProfileTypeBusiness | ProfileTypePersonal;
     size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+    /** @deprecated Use `dot` instead. */
     notification?: boolean;
+    dot?: DotProps['variant'];
     badge?: AvatarViewBadgeProps;
     interactive?: boolean;
     selected?: boolean;
     style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
 } & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
-declare function AvatarView({ children, size, selected, notification, badge, interactive, className, style, imgSrc, profileType, profileName, ...restProps }: Props): import("react").JSX.Element;
+declare function AvatarView({ children, size, selected, notification, dot, badge, interactive, className, style, imgSrc, profileType, profileName, ...restProps }: Props): import("react").JSX.Element;
 export default AvatarView;
 //# sourceMappingURL=AvatarView.d.ts.map

package/build/types/avatarView/AvatarView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AAmGD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5E,OAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,qCAAqC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,GAAG,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AAuGD,eAAe,UAAU,CAAC"}