@transferwise/components 0.0.0-experimental-4aa072a → 0.0.0-experimental-6b7c8fd

package/src/avatarView/Dot.less

@@ -0,0 +1,31 @@
+.np-dot {
+  --np-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+
+  &-mask {
+    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
+    );
+  }
+
+  &-badge {
+    position: absolute;
+    width: var(--np-dot-size);
+    height: var(--np-dot-size);
+    border-radius: var(--radius-full);
+    right: 0;
+    
+    &-notification {
+      background-color: var(--color-sentiment-negative);
+    }
+
+    &-online {
+      background-color: var(--color-interactive-accent);
+    }
+  }
+}

package/src/avatarView/Dot.tsx

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import { Props as AvatarViewProps } from './AvatarView';
+import { clsx } from 'clsx';
+
+export type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  avatarSize?: AvatarViewProps['size'];
+  variant?: 'notification' | 'online';
+};
+
+/**
+ * Depending on avatar size, dot size and offset are different
+ */
+const MAP_STYLE_CONFIG = {
+  16: { size: 6, offset: 1 },
+  24: { size: 8, offset: 2 },
+  32: { size: 10, offset: 2 },
+  40: { size: 10, offset: 2 },
+  48: { size: 14, offset: 2 },
+  56: { size: 16, offset: 3 },
+  72: { size: 20, offset: 3 },
+};
+
+export default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {
+  return (
+    <div
+      className="np-dot"
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
+        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,
+      }}
+    >
+      <div
+        className={clsx('np-dot-badge', {
+          'np-dot-badge-notification': variant === 'notification',
+          'np-dot-badge-online': variant === 'online',
+        })}
+      />
+      <div className="np-dot-mask">{children}</div>
+    </div>
+  );
+}

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -61,7 +61,7 @@ export default {
     size: 48,
     selected: false,
     badge: { type: 'action' },
-    notification: false,
+    dot: undefined,
     profileName: undefined,
     profileType: undefined,
     imgSrc: undefined,
@@ -88,9 +88,10 @@ export default {
         type: { summary: 'ProfileType' },
       },
     },
-    notification: {
-      control: 'boolean',
-      description: 'Shows notification dot',
+    dot: {
+      control: 'select',
+      options: ['notification', 'online'],
+      description: 'Dot variant',
     },
     selected: {
       control: 'boolean',
@@ -257,14 +258,44 @@ export const Notification: Story = {
   args: {
     badge: undefined,
   },
-  argTypes: hideControls([
-    'profileName',
-    'imgSrc',
-    'profileType',
-    'size',
-    'notification',
-    'selected',
-  ]),
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'size', 'dot', 'selected']),
+  render: (args) => {
+    return (
+      <List>
+        {SIZES.map((size) => (
+          <ListItem
+            key={size}
+            title={`Size ${size}`}
+            subtitle={lorem10}
+            media={
+              <ListItem.AvatarView {...args} size={size} dot="notification">
+                <Taxi />
+              </ListItem.AvatarView>
+            }
+            control={CONTROLS.iconButton}
+          />
+        ))}
+      </List>
+    );
+  },
+};
+
+/**
+ * Similarly, AvatarView also support an online dot, which also adjusts to the Avatar's size. <br />
+ * **NB:** You cannot use online and badge at the same time – badge will always take precedence over online.
+ */
+export const Online: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  args: {
+    badge: undefined,
+  },
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'size', 'dot', 'selected']),
   render: (args) => {
     return (
       <List>
@@ -274,7 +305,7 @@ export const Notification: Story = {
             title={`Size ${size}`}
             subtitle={lorem10}
             media={
-              <ListItem.AvatarView {...args} size={size} notification>
+              <ListItem.AvatarView {...args} size={size} dot="online">
                 <Taxi />
               </ListItem.AvatarView>
             }
@@ -294,7 +325,7 @@ export const Badges: Story = {
   args: {
     imgSrc: '../avatar-square-dude.webp',
   },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'dot', 'selected']),
   parameters: {
     docs: {
       canvas: {
@@ -323,7 +354,7 @@ export const Badges: Story = {
  * AvatarView supports selected state for interactive contexts.
  */
 export const Selected: Story = {
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'dot', 'selected']),
   render: (args) => {
     return (
       <List>

package/src/listItem/ListItem.tsx

@@ -188,6 +188,7 @@ export const ListItem = ({
     const hasInfo = Boolean(additionalInfo);
     const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));
 
+    /* eslint-disable functional/immutable-data */
     if (hasMedia && hasControl) {
       partials.push('wds-list-item-hasMedia-hasControl');
     }
@@ -216,6 +217,7 @@ export const ListItem = ({
     if (!hasInfo && !hasPrompt) {
       partials.push('wds-list-item-noInfo-noPrompt');
     }
+    /* eslint-enable functional/immutable-data */
 
     return partials.join(' ');
   };

package/src/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/avatarView/NotificationDot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationDot.js","sources":["../../src/avatarView/NotificationDot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\n\ntype Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n};\n\n/**\n * Depending on avatar size, notifcation 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 NotificationDot({ children, avatarSize = 48 }: Props) {\n  return (\n    <div\n      className=\"np-notification-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div className=\"np-notification-dot-badge\" />\n      <div className=\"np-notification-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","NotificationDot","children","avatarSize","_jsxs","className","style","_jsx"],"mappings":";;;;;;AAOA;;AAEG;AACH,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,eAAeA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG;AAAE,CAAS,EAAA;AAC1E,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,qBAAqB;AAC/BC,IAAAA,KAAK,EAAE;AACL;MACA,4BAA4B,EAAE,GAAGR,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACtE,MAAA,8BAA8B,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACtE;AAAAE,IAAAA,QAAA,gBAEFK,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC;KAA2B,CAC1C,eAAAE,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,0BAA0B;AAAAH,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC3D;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/avatarView/NotificationDot.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationDot.mjs","sources":["../../src/avatarView/NotificationDot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\n\ntype Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n};\n\n/**\n * Depending on avatar size, notifcation 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 NotificationDot({ children, avatarSize = 48 }: Props) {\n  return (\n    <div\n      className=\"np-notification-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div className=\"np-notification-dot-badge\" />\n      <div className=\"np-notification-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","NotificationDot","children","avatarSize","_jsxs","className","style","_jsx"],"mappings":";;AAOA;;AAEG;AACH,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,eAAeA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG;AAAE,CAAS,EAAA;AAC1E,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,qBAAqB;AAC/BC,IAAAA,KAAK,EAAE;AACL;MACA,4BAA4B,EAAE,GAAGR,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACtE,MAAA,8BAA8B,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACtE;AAAAE,IAAAA,QAAA,gBAEFK,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC;KAA2B,CAC1C,eAAAE,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,0BAA0B;AAAAH,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC3D;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/styles/avatarView/NotificationDot.css

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

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

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { Props as AvatarViewProps } from './AvatarView';
-type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    avatarSize?: AvatarViewProps['size'];
-};
-export default function NotificationDot({ children, avatarSize }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=NotificationDot.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationDot.d.ts","sourceRoot":"","sources":["../../../src/avatarView/NotificationDot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAExD,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9D,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAeF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,EAAE,KAAK,+BAc3E"}

package/src/avatarView/NotificationDot.css

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

package/src/avatarView/NotificationDot.less

@@ -1,24 +0,0 @@
-.np-notification-dot {
-  --np-notification-dot-size: 14px;
-  position: relative;
-  display: inline-block;
-
-  &-mask {
-    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
-    );
-  }
-
-  &-badge {
-    position: absolute;
-    width: var(--np-notification-dot-size);
-    height: var(--np-notification-dot-size);
-    background-color: var(--color-sentiment-negative);
-    border-radius: var(--radius-full);
-    right: 0;
-  }
-}

package/src/avatarView/NotificationDot.tsx

@@ -1,35 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { Props as AvatarViewProps } from './AvatarView';
-
-type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
-  avatarSize?: AvatarViewProps['size'];
-};
-
-/**
- * Depending on avatar size, notifcation dot size and offset are different
- */
-const MAP_STYLE_CONFIG = {
-  16: { size: 6, offset: 1 },
-  24: { size: 8, offset: 2 },
-  32: { size: 10, offset: 2 },
-  40: { size: 10, offset: 2 },
-  48: { size: 14, offset: 2 },
-  56: { size: 16, offset: 3 },
-  72: { size: 20, offset: 3 },
-};
-
-export default function NotificationDot({ children, avatarSize = 48 }: Props) {
-  return (
-    <div
-      className="np-notification-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`,
-      }}
-    >
-      <div className="np-notification-dot-badge" />
-      <div className="np-notification-dot-mask">{children}</div>
-    </div>
-  );
-}