@transferwise/components 46.111.0 → 46.112.0

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/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../../src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO5C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,6DAO1B,iBAAiB,gCA4BnB,CAAC"}

package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/listItem/Prompt/InlinePrompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

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>
-  );
-}