@transferwise/components 46.123.0 → 46.124.0

package/build/common/initials.js

@@ -4,12 +4,16 @@ function startsWithParenthesis(part) {
   return /^[({[<]/.test(part);
 }
 // Reuse a single Intl.Segmenter instance to avoid repeated allocations
-const GRAPHEME_SEGMENTER = new Intl.Segmenter('en', {
+const GRAPHEME_SEGMENTER = typeof Intl.Segmenter === 'function' ? new Intl.Segmenter('en', {
   granularity: 'grapheme'
-});
+}) : undefined;
 // Helper to split the string into grapheme clusters, which handles complex characters correctly
 function getGraphemes(str) {
-  return Array.from(GRAPHEME_SEGMENTER.segment(str), s => s.segment);
+  if (GRAPHEME_SEGMENTER) {
+    return Array.from(GRAPHEME_SEGMENTER.segment(str), s => s.segment);
+  }
+  // Fallback to still splitting by Unicode code points when Intl.Segmenter is not available (NOTE: Won't handle complex graphemes perfectly)
+  return Array.from(str);
 }
 function getInitials(name) {
   if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {

package/build/common/initials.js.map

@@ -1 +1 @@
-{"version":3,"file":"initials.js","sources":["../../src/common/initials.ts"],"sourcesContent":["function startsWithParenthesis(part: string) {\n  return /^[({[<]/.test(part);\n}\n\n// Reuse a single Intl.Segmenter instance to avoid repeated allocations\nconst GRAPHEME_SEGMENTER = new Intl.Segmenter('en', { granularity: 'grapheme' });\n\n// Helper to split the string into grapheme clusters, which handles complex characters correctly\nfunction getGraphemes(str: string): string[] {\n  return Array.from(GRAPHEME_SEGMENTER.segment(str), (s) => s.segment);\n}\n\nexport function getInitials(name: string) {\n  if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {\n    return name;\n  }\n\n  const allInitials = name\n    .split(' ')\n    .filter((part) => !startsWithParenthesis(part))\n    .map((part) => getGraphemes(part)[0])\n    .join('')\n    .toUpperCase();\n\n  // Get graphemes of the initials string to handle complex characters correctly\n  const graphemes = getGraphemes(allInitials);\n\n  if (graphemes.length === 1) {\n    return graphemes[0];\n  }\n\n  return graphemes[0] + graphemes[graphemes.length - 1];\n}\n"],"names":["startsWithParenthesis","part","test","GRAPHEME_SEGMENTER","Intl","Segmenter","granularity","getGraphemes","str","Array","from","segment","s","getInitials","name","length","allInitials","split","filter","map","join","toUpperCase","graphemes"],"mappings":";;AAAA,SAASA,qBAAqBA,CAACC,IAAY,EAAA;AACzC,EAAA,OAAO,SAAS,CAACC,IAAI,CAACD,IAAI,CAAC;AAC7B;AAEA;AACA,MAAME,kBAAkB,GAAG,IAAIC,IAAI,CAACC,SAAS,CAAC,IAAI,EAAE;AAAEC,EAAAA,WAAW,EAAE;AAAU,CAAE,CAAC;AAEhF;AACA,SAASC,YAAYA,CAACC,GAAW,EAAA;AAC/B,EAAA,OAAOC,KAAK,CAACC,IAAI,CAACP,kBAAkB,CAACQ,OAAO,CAACH,GAAG,CAAC,EAAGI,CAAC,IAAKA,CAAC,CAACD,OAAO,CAAC;AACtE;AAEM,SAAUE,WAAWA,CAACC,IAAY,EAAA;AACtC,EAAA,IAAIA,IAAI,CAACC,MAAM,KAAK,CAAC,IAAI,YAAY,CAACb,IAAI,CAACY,IAAI,CAAC,EAAE;AAChD,IAAA,OAAOA,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,WAAW,GAAGF,IAAI,CACrBG,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEjB,IAAI,IAAK,CAACD,qBAAqB,CAACC,IAAI,CAAC,CAAC,CAC9CkB,GAAG,CAAElB,IAAI,IAAKM,YAAY,CAACN,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CACpCmB,IAAI,CAAC,EAAE,CAAC,CACRC,WAAW,EAAE;AAEhB;AACA,EAAA,MAAMC,SAAS,GAAGf,YAAY,CAACS,WAAW,CAAC;AAE3C,EAAA,IAAIM,SAAS,CAACP,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAOO,SAAS,CAAC,CAAC,CAAC;AACrB,EAAA;AAEA,EAAA,OAAOA,SAAS,CAAC,CAAC,CAAC,GAAGA,SAAS,CAACA,SAAS,CAACP,MAAM,GAAG,CAAC,CAAC;AACvD;;;;"}
+{"version":3,"file":"initials.js","sources":["../../src/common/initials.ts"],"sourcesContent":["function startsWithParenthesis(part: string) {\n  return /^[({[<]/.test(part);\n}\n\n// Reuse a single Intl.Segmenter instance to avoid repeated allocations\nconst GRAPHEME_SEGMENTER =\n  typeof Intl.Segmenter === 'function'\n    ? new Intl.Segmenter('en', { granularity: 'grapheme' })\n    : undefined;\n\n// Helper to split the string into grapheme clusters, which handles complex characters correctly\nfunction getGraphemes(str: string): string[] {\n  if (GRAPHEME_SEGMENTER) {\n    return Array.from(GRAPHEME_SEGMENTER.segment(str), (s) => s.segment);\n  }\n  // Fallback to still splitting by Unicode code points when Intl.Segmenter is not available (NOTE: Won't handle complex graphemes perfectly)\n  return Array.from(str);\n}\n\nexport function getInitials(name: string) {\n  if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {\n    return name;\n  }\n\n  const allInitials = name\n    .split(' ')\n    .filter((part) => !startsWithParenthesis(part))\n    .map((part) => getGraphemes(part)[0])\n    .join('')\n    .toUpperCase();\n\n  // Get graphemes of the initials string to handle complex characters correctly\n  const graphemes = getGraphemes(allInitials);\n\n  if (graphemes.length === 1) {\n    return graphemes[0];\n  }\n\n  return graphemes[0] + graphemes[graphemes.length - 1];\n}\n"],"names":["startsWithParenthesis","part","test","GRAPHEME_SEGMENTER","Intl","Segmenter","granularity","undefined","getGraphemes","str","Array","from","segment","s","getInitials","name","length","allInitials","split","filter","map","join","toUpperCase","graphemes"],"mappings":";;AAAA,SAASA,qBAAqBA,CAACC,IAAY,EAAA;AACzC,EAAA,OAAO,SAAS,CAACC,IAAI,CAACD,IAAI,CAAC;AAC7B;AAEA;AACA,MAAME,kBAAkB,GACtB,OAAOC,IAAI,CAACC,SAAS,KAAK,UAAU,GAChC,IAAID,IAAI,CAACC,SAAS,CAAC,IAAI,EAAE;AAAEC,EAAAA,WAAW,EAAE;CAAY,CAAC,GACrDC,SAAS;AAEf;AACA,SAASC,YAAYA,CAACC,GAAW,EAAA;AAC/B,EAAA,IAAIN,kBAAkB,EAAE;AACtB,IAAA,OAAOO,KAAK,CAACC,IAAI,CAACR,kBAAkB,CAACS,OAAO,CAACH,GAAG,CAAC,EAAGI,CAAC,IAAKA,CAAC,CAACD,OAAO,CAAC;AACtE,EAAA;AACA;AACA,EAAA,OAAOF,KAAK,CAACC,IAAI,CAACF,GAAG,CAAC;AACxB;AAEM,SAAUK,WAAWA,CAACC,IAAY,EAAA;AACtC,EAAA,IAAIA,IAAI,CAACC,MAAM,KAAK,CAAC,IAAI,YAAY,CAACd,IAAI,CAACa,IAAI,CAAC,EAAE;AAChD,IAAA,OAAOA,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,WAAW,GAAGF,IAAI,CACrBG,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAElB,IAAI,IAAK,CAACD,qBAAqB,CAACC,IAAI,CAAC,CAAC,CAC9CmB,GAAG,CAAEnB,IAAI,IAAKO,YAAY,CAACP,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CACpCoB,IAAI,CAAC,EAAE,CAAC,CACRC,WAAW,EAAE;AAEhB;AACA,EAAA,MAAMC,SAAS,GAAGf,YAAY,CAACS,WAAW,CAAC;AAE3C,EAAA,IAAIM,SAAS,CAACP,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAOO,SAAS,CAAC,CAAC,CAAC;AACrB,EAAA;AAEA,EAAA,OAAOA,SAAS,CAAC,CAAC,CAAC,GAAGA,SAAS,CAACA,SAAS,CAACP,MAAM,GAAG,CAAC,CAAC;AACvD;;;;"}

package/build/common/initials.mjs

@@ -2,12 +2,16 @@ function startsWithParenthesis(part) {
   return /^[({[<]/.test(part);
 }
 // Reuse a single Intl.Segmenter instance to avoid repeated allocations
-const GRAPHEME_SEGMENTER = new Intl.Segmenter('en', {
+const GRAPHEME_SEGMENTER = typeof Intl.Segmenter === 'function' ? new Intl.Segmenter('en', {
   granularity: 'grapheme'
-});
+}) : undefined;
 // Helper to split the string into grapheme clusters, which handles complex characters correctly
 function getGraphemes(str) {
-  return Array.from(GRAPHEME_SEGMENTER.segment(str), s => s.segment);
+  if (GRAPHEME_SEGMENTER) {
+    return Array.from(GRAPHEME_SEGMENTER.segment(str), s => s.segment);
+  }
+  // Fallback to still splitting by Unicode code points when Intl.Segmenter is not available (NOTE: Won't handle complex graphemes perfectly)
+  return Array.from(str);
 }
 function getInitials(name) {
   if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {

package/build/common/initials.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"initials.mjs","sources":["../../src/common/initials.ts"],"sourcesContent":["function startsWithParenthesis(part: string) {\n  return /^[({[<]/.test(part);\n}\n\n// Reuse a single Intl.Segmenter instance to avoid repeated allocations\nconst GRAPHEME_SEGMENTER = new Intl.Segmenter('en', { granularity: 'grapheme' });\n\n// Helper to split the string into grapheme clusters, which handles complex characters correctly\nfunction getGraphemes(str: string): string[] {\n  return Array.from(GRAPHEME_SEGMENTER.segment(str), (s) => s.segment);\n}\n\nexport function getInitials(name: string) {\n  if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {\n    return name;\n  }\n\n  const allInitials = name\n    .split(' ')\n    .filter((part) => !startsWithParenthesis(part))\n    .map((part) => getGraphemes(part)[0])\n    .join('')\n    .toUpperCase();\n\n  // Get graphemes of the initials string to handle complex characters correctly\n  const graphemes = getGraphemes(allInitials);\n\n  if (graphemes.length === 1) {\n    return graphemes[0];\n  }\n\n  return graphemes[0] + graphemes[graphemes.length - 1];\n}\n"],"names":["startsWithParenthesis","part","test","GRAPHEME_SEGMENTER","Intl","Segmenter","granularity","getGraphemes","str","Array","from","segment","s","getInitials","name","length","allInitials","split","filter","map","join","toUpperCase","graphemes"],"mappings":"AAAA,SAASA,qBAAqBA,CAACC,IAAY,EAAA;AACzC,EAAA,OAAO,SAAS,CAACC,IAAI,CAACD,IAAI,CAAC;AAC7B;AAEA;AACA,MAAME,kBAAkB,GAAG,IAAIC,IAAI,CAACC,SAAS,CAAC,IAAI,EAAE;AAAEC,EAAAA,WAAW,EAAE;AAAU,CAAE,CAAC;AAEhF;AACA,SAASC,YAAYA,CAACC,GAAW,EAAA;AAC/B,EAAA,OAAOC,KAAK,CAACC,IAAI,CAACP,kBAAkB,CAACQ,OAAO,CAACH,GAAG,CAAC,EAAGI,CAAC,IAAKA,CAAC,CAACD,OAAO,CAAC;AACtE;AAEM,SAAUE,WAAWA,CAACC,IAAY,EAAA;AACtC,EAAA,IAAIA,IAAI,CAACC,MAAM,KAAK,CAAC,IAAI,YAAY,CAACb,IAAI,CAACY,IAAI,CAAC,EAAE;AAChD,IAAA,OAAOA,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,WAAW,GAAGF,IAAI,CACrBG,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEjB,IAAI,IAAK,CAACD,qBAAqB,CAACC,IAAI,CAAC,CAAC,CAC9CkB,GAAG,CAAElB,IAAI,IAAKM,YAAY,CAACN,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CACpCmB,IAAI,CAAC,EAAE,CAAC,CACRC,WAAW,EAAE;AAEhB;AACA,EAAA,MAAMC,SAAS,GAAGf,YAAY,CAACS,WAAW,CAAC;AAE3C,EAAA,IAAIM,SAAS,CAACP,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAOO,SAAS,CAAC,CAAC,CAAC;AACrB,EAAA;AAEA,EAAA,OAAOA,SAAS,CAAC,CAAC,CAAC,GAAGA,SAAS,CAACA,SAAS,CAACP,MAAM,GAAG,CAAC,CAAC;AACvD;;;;"}
+{"version":3,"file":"initials.mjs","sources":["../../src/common/initials.ts"],"sourcesContent":["function startsWithParenthesis(part: string) {\n  return /^[({[<]/.test(part);\n}\n\n// Reuse a single Intl.Segmenter instance to avoid repeated allocations\nconst GRAPHEME_SEGMENTER =\n  typeof Intl.Segmenter === 'function'\n    ? new Intl.Segmenter('en', { granularity: 'grapheme' })\n    : undefined;\n\n// Helper to split the string into grapheme clusters, which handles complex characters correctly\nfunction getGraphemes(str: string): string[] {\n  if (GRAPHEME_SEGMENTER) {\n    return Array.from(GRAPHEME_SEGMENTER.segment(str), (s) => s.segment);\n  }\n  // Fallback to still splitting by Unicode code points when Intl.Segmenter is not available (NOTE: Won't handle complex graphemes perfectly)\n  return Array.from(str);\n}\n\nexport function getInitials(name: string) {\n  if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {\n    return name;\n  }\n\n  const allInitials = name\n    .split(' ')\n    .filter((part) => !startsWithParenthesis(part))\n    .map((part) => getGraphemes(part)[0])\n    .join('')\n    .toUpperCase();\n\n  // Get graphemes of the initials string to handle complex characters correctly\n  const graphemes = getGraphemes(allInitials);\n\n  if (graphemes.length === 1) {\n    return graphemes[0];\n  }\n\n  return graphemes[0] + graphemes[graphemes.length - 1];\n}\n"],"names":["startsWithParenthesis","part","test","GRAPHEME_SEGMENTER","Intl","Segmenter","granularity","undefined","getGraphemes","str","Array","from","segment","s","getInitials","name","length","allInitials","split","filter","map","join","toUpperCase","graphemes"],"mappings":"AAAA,SAASA,qBAAqBA,CAACC,IAAY,EAAA;AACzC,EAAA,OAAO,SAAS,CAACC,IAAI,CAACD,IAAI,CAAC;AAC7B;AAEA;AACA,MAAME,kBAAkB,GACtB,OAAOC,IAAI,CAACC,SAAS,KAAK,UAAU,GAChC,IAAID,IAAI,CAACC,SAAS,CAAC,IAAI,EAAE;AAAEC,EAAAA,WAAW,EAAE;CAAY,CAAC,GACrDC,SAAS;AAEf;AACA,SAASC,YAAYA,CAACC,GAAW,EAAA;AAC/B,EAAA,IAAIN,kBAAkB,EAAE;AACtB,IAAA,OAAOO,KAAK,CAACC,IAAI,CAACR,kBAAkB,CAACS,OAAO,CAACH,GAAG,CAAC,EAAGI,CAAC,IAAKA,CAAC,CAACD,OAAO,CAAC;AACtE,EAAA;AACA;AACA,EAAA,OAAOF,KAAK,CAACC,IAAI,CAACF,GAAG,CAAC;AACxB;AAEM,SAAUK,WAAWA,CAACC,IAAY,EAAA;AACtC,EAAA,IAAIA,IAAI,CAACC,MAAM,KAAK,CAAC,IAAI,YAAY,CAACd,IAAI,CAACa,IAAI,CAAC,EAAE;AAChD,IAAA,OAAOA,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,WAAW,GAAGF,IAAI,CACrBG,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAElB,IAAI,IAAK,CAACD,qBAAqB,CAACC,IAAI,CAAC,CAAC,CAC9CmB,GAAG,CAAEnB,IAAI,IAAKO,YAAY,CAACP,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CACpCoB,IAAI,CAAC,EAAE,CAAC,CACRC,WAAW,EAAE;AAEhB;AACA,EAAA,MAAMC,SAAS,GAAGf,YAAY,CAACS,WAAW,CAAC;AAE3C,EAAA,IAAIM,SAAS,CAACP,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAOO,SAAS,CAAC,CAAC,CAAC;AACrB,EAAA;AAEA,EAAA,OAAOA,SAAS,CAAC,CAAC,CAAC,GAAGA,SAAS,CAACA,SAAS,CAACP,MAAM,GAAG,CAAC,CAAC;AACvD;;;;"}

package/build/main.css

@@ -948,7 +948,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/build/styles/avatarView/AvatarView.css

@@ -26,7 +26,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/build/styles/main.css

@@ -948,7 +948,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/build/types/common/initials.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initials.d.ts","sourceRoot":"","sources":["../../../src/common/initials.ts"],"names":[],"mappings":"AAYA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,UAoBvC"}
+{"version":3,"file":"initials.d.ts","sourceRoot":"","sources":["../../../src/common/initials.ts"],"names":[],"mappings":"AAmBA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,UAoBvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.123.0",
+  "version": "46.124.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -4,6 +4,7 @@ import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Body from '../body';
+import SentimentSurface from '../sentimentSurface';
 
 export default {
   title: 'Content/AvatarLayout',
@@ -283,3 +284,55 @@ export const EdgeInstances: Story = {
     </div>
   ),
 };
+
+/**
+ * Like [AvatarView](?path=/docs/content-avatarview--docs#sentiment-awareness), `AvatarLayout` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
+ * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
+ * 
+ * Features like: `interactive` are not supported.
+ * Also `AvatarLayout` isn't supported on `"elevated"` state of `SentimentSurface`.
+ */
+export const SentimentAwareness: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => (
+    <>
+      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) =>
+        <SentimentSurface
+          key={`${sentiment}-base`}
+          sentiment={sentiment}
+          emphasis="base"
+          className="p-a-1 d-flex"
+          style={{ gap: 'var(--size-16)' }}
+        >
+          <AvatarLayout avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]} />
+          <AvatarLayout
+            orientation="diagonal"
+            avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+          />
+        </SentimentSurface>
+      )}
+    </>
+  ),
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <div
+        style={{
+          width: '100%',
+          display: 'grid',
+          gridTemplateColumns: 'min-content min-content',
+          justifyContent: 'center',
+          gap: '1rem',
+          maxWidth: '800px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/avatarView/AvatarView.css

@@ -26,7 +26,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/src/avatarView/AvatarView.less

@@ -2,7 +2,7 @@
 
 .np-avatar-view {
   .np-avatar-view-content {
-    color: var(--color-content-primary);
+    color: var(--color-sentiment-content-primary, var(--color-content-primary));
   }
 
   &-interactive {

package/src/avatarView/AvatarView.story.tsx

@@ -17,12 +17,15 @@ import {
   Transport,
   Wallet,
   Water,
+  Bank,
+  GiftBox,
 } from '@transferwise/icons';
 import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
 import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
 import Display from '../display';
 import Body from '../body';
+import SentimentSurface from '../sentimentSurface';
 
 export default {
   title: 'Content/AvatarView',
@@ -35,6 +38,20 @@ const profileName1 = 'Wolter White';
 const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
+const withComponentGrid = (Story: () => JSX.Element) => (
+  <div
+    style={{
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      maxWidth: '800px',
+    }}
+  >
+    <Story />
+  </div>
+);
+
 export const Selected: Story = {
   render: () => {
     return (
@@ -420,6 +437,55 @@ export const Profiles: Story = {
   },
 };
 
+/**
+ * `AvatarView` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
+ * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
+ * 
+ * Features like `online`, `notification`, `selected`, and `interactive` are not supported.
+ * For badge (`<AvatarView badge={}>`) only `flagCode` is supported.
+ * Also `AvatarView` isn't supported on `"elevated"` state of `SentimentSurface`.
+ */
+export const SentimentAwareness: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+      source: { type: 'code' },
+    },
+  },
+  render: () => {
+    return (
+      <>
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            className="p-a-1 d-flex"
+            style={{ gap: 'var(--size-16)' }}
+          >
+            <AvatarView size={32}>
+              <Bank />
+            </AvatarView>
+            <AvatarView size={32} profileName="John Doe" />
+            <AvatarView size={32}>
+              <Flag code="JPY" intrinsicSize={32} />
+            </AvatarView>
+            <AvatarView size={32} badge={sentiment === 'proposition' ? undefined : { status: sentiment }}>
+              <Bank />
+            </AvatarView>
+            <AvatarView size={32} badge={{ flagCode: 'eu' }}>
+              <Bank />
+            </AvatarView>
+          </SentimentSurface>
+        ))}
+      </>
+    );
+  },
+  decorators: [withComponentGrid],
+};
+
 export const ProfileBrokenImageFallback: Story = {
   parameters: {
     chromatic: {

package/src/common/initials.ts

@@ -3,11 +3,18 @@ function startsWithParenthesis(part: string) {
 }
 
 // Reuse a single Intl.Segmenter instance to avoid repeated allocations
-const GRAPHEME_SEGMENTER = new Intl.Segmenter('en', { granularity: 'grapheme' });
+const GRAPHEME_SEGMENTER =
+  typeof Intl.Segmenter === 'function'
+    ? new Intl.Segmenter('en', { granularity: 'grapheme' })
+    : undefined;
 
 // Helper to split the string into grapheme clusters, which handles complex characters correctly
 function getGraphemes(str: string): string[] {
-  return Array.from(GRAPHEME_SEGMENTER.segment(str), (s) => s.segment);
+  if (GRAPHEME_SEGMENTER) {
+    return Array.from(GRAPHEME_SEGMENTER.segment(str), (s) => s.segment);
+  }
+  // Fallback to still splitting by Unicode code points when Intl.Segmenter is not available (NOTE: Won't handle complex graphemes perfectly)
+  return Array.from(str);
 }
 
 export function getInitials(name: string) {

package/src/main.css

@@ -948,7 +948,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;