@transferwise/components 0.0.0-experimental-37d8e2c → 0.0.0-experimental-dabe7c7

package/src/main.css

@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }
@@ -421,56 +432,6 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
-.np-avatar-view {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  color: var(--color-interactive-primary);
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.np-avatar-view .np-circle {
-  background-color: transparent;
-  border: var(--avatar-view-non-interactive-border-width) solid rgba(0,0,0,0.10196);
-  border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
-}
-.np-avatar-view-selected .np-circle {
-  border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
-}
-.np-avatar-view-interactive .np-circle {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border: none;
-}
-.np-avatar-group {
-  display: inline-flex;
-  --np-avatar-group-size: 48px;
-  --np-avatar-size: 32px;
-}
-.np-avatar-group-diagonal {
-  width: var(--np-avatar-group-size);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
-          mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
-}
-.np-avatar-group-diagonal-child {
-  margin-left: calc((var(--np-avatar-size) / 2) * -1);
-  margin-top: calc((var(--np-avatar-size) * var(--np-avatar-group-index)) / 2);
-}
-.np-avatar-group-horizontal {
-  width: calc((var(--np-avatar-size) * 2) - 2px);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
-          mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
-}
-.np-avatar-group-horizontal-child {
-  margin-left: calc((var(--np-avatar-size) / 4) * -1);
-}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -487,16 +448,16 @@ div.critical-comms .critical-comms-body {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: var(--badge-bottom-position);
+  bottom: 0;
   right: 0;
   box-sizing: border-box;
   text-align: center;
@@ -1035,6 +996,30 @@ div.critical-comms .critical-comms-body {
   cursor: pointer;
   position: relative;
 }
+.np-circular-btn .tw-icon {
+  position: absolute;
+  top: 16px;
+  top: var(--size-16);
+  pointer-events: none;
+  color: white;
+  transition: color 0.15s ease-in-out;
+  width: 100%;
+  left: 0;
+}
+[dir="rtl"] .np-circular-btn .tw-icon {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+@media (max-width: 320px) {
+  .np-circular-btn .tw-icon {
+    top: 8px;
+    top: var(--size-8);
+  }
+}
+.np-circular-btn .tw-icon > svg {
+  margin: 0 auto;
+}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
@@ -1183,23 +1168,6 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  font-size: var(--circle-font-size);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-}
-.np-circle img {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: 100%;
-}
-.np-circle .np-display {
-  font-size: var(--circle-font-size);
-}
-.np-circle .tw-icon > svg {
-  height: var(--circle-icon-size);
-  width: var(--circle-icon-size);
 }
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
@@ -1482,16 +1450,6 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
-.np-notification-dot {
-  --badge-notification-dot-size: 14px;
-  width: 14px;
-  width: var(--badge-notification-dot-size);
-  height: 14px;
-  height: var(--badge-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-}
 .np-select-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -4197,6 +4155,12 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
+.status-icon > svg {
+  height: 32px;
+  height: var(--size-32);
+  width: 32px;
+  width: var(--size-32);
+}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4212,6 +4176,12 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
+.status-circle-sm .status-icon > svg {
+  height: 14px;
+  height: var(--size-14);
+  width: 14px;
+  width: var(--size-14);
+}
 @media (max-width: 320px) {
   .status-circle-sm .status-icon > svg {
     width: 24px;
@@ -5732,3 +5702,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.np-action-btn-chevron {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}

package/src/main.less

@@ -2,8 +2,6 @@
 @import "./accordion/Accordion.less";
 @import "./actionButton/ActionButton.less";
 @import "./avatar/Avatar.less";
-@import "./avatarView/AvatarView.less";
-@import "./avatarGroup/AvatarGroup.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
@@ -16,7 +14,6 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
-@import "./common/notificationDot/NotificationDot.less";
 @import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
@@ -74,6 +71,7 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./listItem/ListItem.less";
+@import "./actionOption/ActionOption.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/statusIcon/StatusIcon.css

@@ -1,3 +1,9 @@
+.status-icon > svg {
+  height: 32px;
+  height: var(--size-32);
+  width: 32px;
+  width: var(--size-32);
+}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -13,6 +19,12 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
+.status-circle-sm .status-icon > svg {
+  height: 14px;
+  height: var(--size-14);
+  width: 14px;
+  width: var(--size-14);
+}
 @media (max-width: 320px) {
   .status-circle-sm .status-icon > svg {
     width: 24px;

package/src/statusIcon/StatusIcon.less

@@ -1,7 +1,7 @@
-// .status-icon > svg {
-//   height: var(--size-32);
-//   width: var(--size-32);
-// }
+.status-icon > svg {
+  height: var(--size-32);
+  width: var(--size-32);
+}
 
 .status-circle {
   .light {
@@ -25,8 +25,8 @@
 
   &-sm {
     .status-icon > svg {
-      // height: var(--size-14);
-      // width: var(--size-14);
+      height: var(--size-14);
+      width: var(--size-14);
 
       @media (--screen-400-zoom) {
         width: var(--size-24);

package/src/statusIcon/StatusIcon.story.tsx

@@ -20,36 +20,32 @@ export const Basic: Story = {
 };
 
 export const Variants: Story = {
-  render: () => {
-    const sizes = [16, 24, 32, 40, 48, 56, 72];
-    return (
-      <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-        {[
-          Sentiment.POSITIVE,
-          Sentiment.NEGATIVE,
-          Sentiment.WARNING,
-          Sentiment.NEUTRAL,
-          Sentiment.PENDING,
-        ].map((sentiment) => {
-          return (
-            <span
-              key={sentiment}
-              style={{
-                display: 'flex',
-                gap: '1em',
-                justifyContent: 'space-between',
-                flexDirection: 'column',
-                minHeight: '150px',
-                alignItems: 'center',
-              }}
-            >
-              {sizes.map((size) => {
-                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
-              })}
-            </span>
-          );
-        })}
-      </span>
-    );
-  },
+  render: () => (
+    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
+      {[
+        Sentiment.POSITIVE,
+        Sentiment.NEGATIVE,
+        Sentiment.NEUTRAL,
+        Sentiment.WARNING,
+        Sentiment.PENDING,
+      ].map((sentiment) => {
+        return (
+          <span
+            key={sentiment}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'column',
+              minHeight: '150px',
+              alignItems: 'center',
+            }}
+          >
+            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
+              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+            })}
+          </span>
+        );
+      })}
+    </span>
+  ),
 };

package/src/statusIcon/StatusIcon.tsx

@@ -5,14 +5,9 @@ import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '.
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
-/**
- * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
- */
-type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
-
 export type StatusIconProps = {
-  sentiment?: `${Sentiment}`;
-  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  sentiment: `${Sentiment}`;
+  size: SizeSmall | SizeMedium | SizeLarge;
 };
 
 const iconTypeMap = {
@@ -36,22 +31,13 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIcon
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size =
-    sizeProp === Size.SMALL && isTinyViewport
-      ? 32
-      : typeof sizeProp === 'string'
-        ? mapLegacySize[sizeProp]
-        : sizeProp;
+  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
   return (
     <Circle
       as="span"
       size={size}
       data-testid="status-icon"
-      className={clsx(
-        'status-circle',
-        // `status-circle-${sizeProp}`,
-        sentiment,
-      )}
+      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
     >
       <Icon className={clsx('status-icon', iconColor)} />
     </Circle>

package/build/avatarView/AvatarView.js

@@ -1,207 +0,0 @@
-'use strict';
-
-var Badge = require('../badge/Badge.js');
-var NotificationDot = require('../common/notificationDot/NotificationDot.js');
-var StatusIcon = require('../statusIcon/StatusIcon.js');
-var Circle = require('../common/circle/Circle.js');
-var React = require('react');
-var clsx = require('clsx');
-var icons = require('@transferwise/icons');
-var jsxRuntime = require('react/jsx-runtime');
-var initials = require('../common/initials.js');
-
-const AvatarViewDefaultSize = 48;
-/** Non interactive avatar view has custom border width */
-const mapNonInteractiveBorderWidth = {
-  16: 0.667,
-  24: 1,
-  32: 1,
-  40: 1.25,
-  48: 1.5,
-  56: 1.75,
-  72: 2.25
-};
-/** Selected state has custom border width */
-const mapSelectedBorderWidth = {
-  16: 1,
-  24: 1,
-  32: 1,
-  40: 2,
-  48: 2,
-  56: 2,
-  72: 2
-};
-function AvatarView({
-  children = undefined,
-  size = AvatarViewDefaultSize,
-  selected,
-  notification,
-  badge,
-  entity,
-  action,
-  className,
-  style
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Interactive, {
-    ...action,
-    className: clsx.clsx('np-avatar-view', {
-      'np-avatar-view-selected': selected
-    }, className),
-    children: /*#__PURE__*/jsxRuntime.jsx(Badges, {
-      asset: badge,
-      avatarProps: {
-        size,
-        notification,
-        selected
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx(Circle, {
-        size: size,
-        fixedSize: true,
-        style: {
-          // @ts-expect-error CSS custom props allowed
-          '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,
-          '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,
-          ...style
-        },
-        children: children === undefined ? /*#__PURE__*/jsxRuntime.jsx(Entity, {
-          ...entity
-        }) : children
-      })
-    })
-  });
-}
-function Interactive({
-  children,
-  onClick,
-  href,
-  target,
-  className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledby
-}) {
-  const elementName = onClick ? 'button' : href ? 'a' : null;
-  if (elementName === null) {
-    // non interactive
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: className,
-      children: children
-    });
-  }
-  const a11yProps = {
-    ariaLabel,
-    ariaLabelledby
-  };
-  if (elementName === 'button') {
-    return /*#__PURE__*/jsxRuntime.jsx("button", {
-      type: "button",
-      className: clsx.clsx(className, 'np-avatar-view-interactive', 'btn-unstyled'),
-      onClick: onClick,
-      ...a11yProps,
-      children: children
-    });
-  }
-  if (elementName === 'a') {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-no-target-blank
-      jsxRuntime.jsx("a", {
-        href: href,
-        target: target,
-        rel: target === '_blank' ? 'noreferrer' : undefined,
-        className: clsx.clsx(className, 'np-avatar-view-interactive', 'text-no-decoration'),
-        ...a11yProps,
-        children: children
-      })
-    );
-  }
-}
-const mapBadgeSize = {
-  16: 'sm',
-  24: 'sm',
-  32: 'sm',
-  40: 'sm',
-  48: 'sm',
-  56: 'lg',
-  72: 'lg'
-};
-/** AvatarView has a custom sizes for badge */
-const mapNotificationSize = {
-  16: 6,
-  24: 8,
-  32: 10,
-  40: 10,
-  48: 14,
-  56: 16,
-  72: 20
-};
-function Badges({
-  children,
-  asset,
-  avatarProps
-}) {
-  const {
-    size = AvatarViewDefaultSize,
-    selected,
-    notification
-  } = avatarProps;
-  if (asset || selected || notification) {
-    if (asset && size > 16) {
-      return /*#__PURE__*/jsxRuntime.jsx(Badge, {
-        badge: asset,
-        size: mapBadgeSize[size],
-        children: children
-      });
-    }
-    if (selected && size > 16) {
-      return /*#__PURE__*/jsxRuntime.jsx(Badge, {
-        badge: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
-          sentiment: "positive",
-          size: mapBadgeSize[size]
-        }),
-        size: mapBadgeSize[size],
-        children: children
-      });
-    }
-    if (notification) {
-      return /*#__PURE__*/jsxRuntime.jsx(Badge, {
-        badge: /*#__PURE__*/jsxRuntime.jsx(NotificationDot
-        // @ts-expect-error CSS custom props allowed
-        , {
-          style: {
-            '--badge-notification-dot-size': `${mapNotificationSize[size]}px`
-          }
-        }),
-        position: "top-right",
-        size: mapBadgeSize[size],
-        children: children
-      });
-    }
-  }
-  return children;
-}
-function Entity({
-  imageSrc = null,
-  name = null,
-  profileType = null
-}) {
-  const [tryLoadImage, setTryLoadImage] = React.useState(true);
-  if (imageSrc && tryLoadImage) {
-    return /*#__PURE__*/jsxRuntime.jsx("img", {
-      src: imageSrc,
-      alt: "",
-      onError: () => setTryLoadImage(false)
-    });
-  }
-  if (profileType) {
-    return profileType === 'business' ? /*#__PURE__*/jsxRuntime.jsx(icons.Briefcase, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
-  }
-  if (name) {
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: initials.getInitials(name)
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
-}
-
-module.exports = AvatarView;
-//# sourceMappingURL=AvatarView.js.map

package/build/avatarView/AvatarView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge from '../badge';\nimport { getInitials } from '../common';\nimport NotificationDot from '../common/notificationDot/NotificationDot';\nimport StatusIcon from '../statusIcon';\nimport Circle from '../common/circle';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { ActionOptions as ActionProps } from '../common/action/Action';\nimport { clsx } from 'clsx';\nimport { Briefcase, Profile } from '@transferwise/icons';\n\ntype InteractiveProps = Omit<ActionProps, 'text'> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;\n\nconst AvatarViewDefaultSize = 48;\n\nexport type Props = PropsWithChildren<{\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** adds prebuilt notification dot via Badge component */\n  notification?: boolean;\n  /** adds custom badge to avatar */\n  badge?: React.ReactNode;\n  entity?: EntityProps;\n  /** changes background color to neutral and wraps component with button */\n  action?: InteractiveProps;\n  /** changes background color to neutral and adds predefined Badge */\n  selected?: boolean;\n  /** often use case to override `background-color` or `border` */\n  style?: React.CSSProperties;\n}> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;\n\n/** Non interactive avatar view has custom border width */\nconst mapNonInteractiveBorderWidth = {\n  16: 0.667,\n  24: 1,\n  32: 1,\n  40: 1.25,\n  48: 1.5,\n  56: 1.75,\n  72: 2.25,\n};\n\n/** Selected state has custom border width */\nconst mapSelectedBorderWidth = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\nfunction AvatarView({\n  children = undefined,\n  size = AvatarViewDefaultSize,\n  selected,\n  notification,\n  badge,\n  entity,\n  action,\n  className,\n  style,\n}: Props) {\n  return (\n    <Interactive\n      {...action}\n      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}\n    >\n      <Badges asset={badge} avatarProps={{ size, notification, selected }}>\n        <Circle\n          size={size}\n          fixedSize\n          style={{\n            // @ts-expect-error CSS custom props allowed\n            '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,\n            '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,\n            ...style,\n          }}\n        >\n          {children === undefined ? <Entity {...entity} /> : children}\n        </Circle>\n      </Badges>\n    </Interactive>\n  );\n}\n\nfunction Interactive({\n  children,\n  onClick,\n  href,\n  target,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: PropsWithChildren<InteractiveProps>) {\n  const elementName: React.ElementType | null = onClick ? 'button' : href ? 'a' : null;\n  if (elementName === null) {\n    // non interactive\n    return <div className={className}>{children}</div>;\n  }\n  const a11yProps = { ariaLabel, ariaLabelledby };\n  if (elementName === 'button') {\n    return (\n      <button\n        type=\"button\"\n        className={clsx(className, 'np-avatar-view-interactive', 'btn-unstyled')}\n        onClick={onClick}\n        {...a11yProps}\n      >\n        {children}\n      </button>\n    );\n  }\n  if (elementName === 'a') {\n    return (\n      // eslint-disable-next-line react/jsx-no-target-blank\n      <a\n        href={href}\n        target={target}\n        rel={target === '_blank' ? 'noreferrer' : undefined}\n        className={clsx(className, 'np-avatar-view-interactive', 'text-no-decoration')}\n        {...a11yProps}\n      >\n        {children}\n      </a>\n    );\n  }\n}\n\nconst mapBadgeSize = {\n  16: 'sm',\n  24: 'sm',\n  32: 'sm',\n  40: 'sm',\n  48: 'sm',\n  56: 'lg',\n  72: 'lg',\n};\n\n/** AvatarView has a custom sizes for badge */\nconst mapNotificationSize = {\n  16: 6,\n  24: 8,\n  32: 10,\n  40: 10,\n  48: 14,\n  56: 16,\n  72: 20,\n};\n\ntype BadgesProps = PropsWithChildren<{\n  asset: React.ReactNode;\n  avatarProps: Pick<Props, 'selected' | 'size' | 'notification'>;\n}>;\n\nfunction Badges({ children, asset, avatarProps }: BadgesProps) {\n  const { size = AvatarViewDefaultSize, selected, notification } = avatarProps;\n  if (asset || selected || notification) {\n    if (asset && size > 16) {\n      return (\n        <Badge badge={asset} size={mapBadgeSize[size]}>\n          {children}\n        </Badge>\n      );\n    }\n    if (selected && size > 16) {\n      return (\n        <Badge\n          badge={<StatusIcon sentiment=\"positive\" size={mapBadgeSize[size]} />}\n          size={mapBadgeSize[size]}\n        >\n          {children}\n        </Badge>\n      );\n    }\n    if (notification) {\n      return (\n        <Badge\n          badge={\n            <NotificationDot\n              // @ts-expect-error CSS custom props allowed\n              style={{ '--badge-notification-dot-size': `${mapNotificationSize[size]}px` }}\n            />\n          }\n          position=\"top-right\"\n          size={mapBadgeSize[size]}\n        >\n          {children}\n        </Badge>\n      );\n    }\n  }\n  return children;\n}\n\nexport type EntityProps = {\n  imageSrc?: string | null;\n  name?: string | null;\n  profileType?: 'personal' | 'business' | null;\n};\n\nfunction Entity({ imageSrc = null, name = null, profileType = null }: EntityProps) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (imageSrc && tryLoadImage) {\n    return <img src={imageSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n  }\n  if (profileType) {\n    return profileType === 'business' ? <Briefcase /> : <Profile />;\n  }\n  if (name) {\n    return <>{getInitials(name)}</>;\n  }\n  return <Profile />;\n}\n\nexport default AvatarView;\n"],"names":["AvatarViewDefaultSize","mapNonInteractiveBorderWidth","mapSelectedBorderWidth","AvatarView","children","undefined","size","selected","notification","badge","entity","action","className","style","_jsx","Interactive","clsx","Badges","asset","avatarProps","Circle","fixedSize","Entity","onClick","href","target","ariaLabel","ariaLabelledby","elementName","a11yProps","type","rel","mapBadgeSize","mapNotificationSize","Badge","StatusIcon","sentiment","NotificationDot","position","imageSrc","name","profileType","tryLoadImage","setTryLoadImage","useState","src","alt","onError","Briefcase","Profile","_Fragment","getInitials"],"mappings":"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"}