@transferwise/components 46.71.8 → 46.72.1

package/build/{avatar/colors → common}/colors.js

@@ -5,7 +5,7 @@
  * Changing this array will change the assignment between seeds.
  * Do not change this array.
  */
-const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+const avatarColors = ['var(--color-bright-blue)', 'var(--color-bright-yellow)', 'var(--color-bright-pink)', 'var(--color-bright-orange)'];
 /*
  * Takes in a "seed" string and spits out an index for the color we should use.
  * This implementation has been synced across all three clients so that we consistently
@@ -23,9 +23,9 @@ const hashSeed = seed => {
   }
   return hashValue;
 };
-const getAvatarColorFromSeed = seed => {
+const getBrandColorFromSeed = seed => {
   return avatarColors[hashSeed(seed)];
 };
 
-exports.getAvatarColorFromSeed = getAvatarColorFromSeed;
+exports.getBrandColorFromSeed = getBrandColorFromSeed;
 //# sourceMappingURL=colors.js.map

package/build/common/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../src/common/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getBrandColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getBrandColorFromSeed"],"mappings":";;AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,qBAAqB,GAAIR,IAAY,IAAmC;AACnF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}

package/build/{avatar/colors → common}/colors.mjs

@@ -3,7 +3,7 @@
  * Changing this array will change the assignment between seeds.
  * Do not change this array.
  */
-const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+const avatarColors = ['var(--color-bright-blue)', 'var(--color-bright-yellow)', 'var(--color-bright-pink)', 'var(--color-bright-orange)'];
 /*
  * Takes in a "seed" string and spits out an index for the color we should use.
  * This implementation has been synced across all three clients so that we consistently
@@ -21,9 +21,9 @@ const hashSeed = seed => {
   }
   return hashValue;
 };
-const getAvatarColorFromSeed = seed => {
+const getBrandColorFromSeed = seed => {
   return avatarColors[hashSeed(seed)];
 };
 
-export { getAvatarColorFromSeed };
+export { getBrandColorFromSeed };
 //# sourceMappingURL=colors.mjs.map

package/build/common/colors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.mjs","sources":["../../src/common/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getBrandColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getBrandColorFromSeed"],"mappings":"AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,qBAAqB,GAAIR,IAAY,IAAmC;AACnF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}

package/build/common/initials.js

@@ -0,0 +1,12 @@
+'use strict';
+
+function getInitials(name) {
+  const allInitials = name.split(' ').map(part => part[0]).join('').toUpperCase();
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+  return allInitials[0] + allInitials.slice(-1);
+}
+
+exports.getInitials = getInitials;
+//# sourceMappingURL=initials.js.map

package/build/common/initials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initials.js","sources":["../../src/common/initials.ts"],"sourcesContent":["export function getInitials(name: string) {\n  const allInitials = name\n    .split(' ')\n    .map((part) => part[0])\n    .join('')\n    .toUpperCase();\n\n  if (allInitials.length === 1) {\n    return allInitials[0];\n  }\n\n  return allInitials[0] + allInitials.slice(-1);\n}\n"],"names":["getInitials","name","allInitials","split","map","part","join","toUpperCase","length","slice"],"mappings":";;AAAM,SAAUA,WAAWA,CAACC,IAAY,EAAA;EACtC,MAAMC,WAAW,GAAGD,IAAI,CACrBE,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAAC,CAAC,CAAC,CAAC,CACtBC,IAAI,CAAC,EAAE,CAAC,CACRC,WAAW,EAAE,CAAA;AAEhB,EAAA,IAAIL,WAAW,CAACM,MAAM,KAAK,CAAC,EAAE;IAC5B,OAAON,WAAW,CAAC,CAAC,CAAC,CAAA;AACvB,GAAA;EAEA,OAAOA,WAAW,CAAC,CAAC,CAAC,GAAGA,WAAW,CAACO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AAC/C;;;;"}

package/build/common/initials.mjs

@@ -0,0 +1,10 @@
+function getInitials(name) {
+  const allInitials = name.split(' ').map(part => part[0]).join('').toUpperCase();
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+  return allInitials[0] + allInitials.slice(-1);
+}
+
+export { getInitials };
+//# sourceMappingURL=initials.mjs.map

package/build/common/initials.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"initials.mjs","sources":["../../src/common/initials.ts"],"sourcesContent":["export function getInitials(name: string) {\n  const allInitials = name\n    .split(' ')\n    .map((part) => part[0])\n    .join('')\n    .toUpperCase();\n\n  if (allInitials.length === 1) {\n    return allInitials[0];\n  }\n\n  return allInitials[0] + allInitials.slice(-1);\n}\n"],"names":["getInitials","name","allInitials","split","map","part","join","toUpperCase","length","slice"],"mappings":"AAAM,SAAUA,WAAWA,CAACC,IAAY,EAAA;EACtC,MAAMC,WAAW,GAAGD,IAAI,CACrBE,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAAC,CAAC,CAAC,CAAC,CACtBC,IAAI,CAAC,EAAE,CAAC,CACRC,WAAW,EAAE,CAAA;AAEhB,EAAA,IAAIL,WAAW,CAACM,MAAM,KAAK,CAAC,EAAE;IAC5B,OAAON,WAAW,CAAC,CAAC,CAAC,CAAA;AACvB,GAAA;EAEA,OAAOA,WAAW,CAAC,CAAC,CAAC,GAAGA,WAAW,CAACO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AAC/C;;;;"}

package/build/display/Display.js

@@ -13,7 +13,7 @@ function Display({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Heading, {
     id: id,
-    className: clsx.clsx(`np-text-${type}`, 'text-primary', className),
+    className: clsx.clsx('np-display', `np-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/display/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,SAAI,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEG,SAAI,CAAC,YAAY,EAAE,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC1FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/display/Display.mjs

@@ -11,7 +11,7 @@ function Display({
 }) {
   return /*#__PURE__*/jsx(Heading, {
     id: id,
-    className: clsx(`np-text-${type}`, 'text-primary', className),
+    className: clsx('np-display', `np-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/display/Display.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Display.mjs","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,IAAI,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Display.mjs","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEG,IAAI,CAAC,YAAY,EAAE,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC1FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/types/alert/Alert.d.ts

@@ -33,6 +33,8 @@ export interface AlertProps {
     /** The type dictates which icon and colour will be used */
     type?: AlertType;
     variant?: `${Variant}`;
+    /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */
+    active?: boolean;
     /** @deprecated Use `InlineAlert` instead. */
     arrow?: `${AlertArrowPosition}`;
     /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -42,6 +44,6 @@ export interface AlertProps {
     /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */
     size?: `${Size}`;
 }
-export default function Alert({ arrow, action, children, className, dismissible, icon, onDismiss, message, size, title, type, variant, }: AlertProps): import("react").JSX.Element;
+export default function Alert({ arrow, action, children, className, dismissible, icon, onDismiss, message, size, title, type, variant, active, }: AlertProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,GACpB,EAAE,UAAU,+BAqGZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,4LAA4L;IAC5L,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,MAAa,GACd,EAAE,UAAU,+BAyGZ"}

package/build/types/avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAQA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/avatarWrapper/AvatarWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarWrapper.d.ts","sourceRoot":"","sources":["../../../src/avatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AAGA,OAAe,EAAE,WAAW,EAAc,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAe,mBAAmB,EAAE,mBAAmB,EAAQ,SAAS,EAAE,MAAM,WAAW,CAAC;AAuCnG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,EAAE,SAAS,CAAC;CAC5B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,CACJ,CAAC;AAEF,QAAA,MAAM,aAAa,sIAWhB,kBAAkB,gCAoDpB,CAAC;AAgBF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AvatarWrapper.d.ts","sourceRoot":"","sources":["../../../src/avatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AAGA,OAAe,EAAE,WAAW,EAAc,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAEL,mBAAmB,EACnB,mBAAmB,EAEnB,SAAS,EAEV,MAAM,WAAW,CAAC;AAuCnB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,EAAE,SAAS,CAAC;CAC5B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,CACJ,CAAC;AAEF,QAAA,MAAM,aAAa,sIAWhB,kBAAkB,gCAoDpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/common/colors.d.ts

@@ -0,0 +1,4 @@
+declare const avatarColors: readonly ["var(--color-bright-blue)", "var(--color-bright-yellow)", "var(--color-bright-pink)", "var(--color-bright-orange)"];
+export declare const getBrandColorFromSeed: (seed: string) => (typeof avatarColors)[number];
+export {};
+//# sourceMappingURL=colors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/common/colors.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,YAAY,+HAKR,CAAC;AAuBX,eAAO,MAAM,qBAAqB,SAAU,MAAM,KAAG,CAAC,OAAO,YAAY,EAAE,MAAM,CAEhF,CAAC"}

package/build/types/common/index.d.ts

@@ -12,6 +12,8 @@ export * from "./propsValues/profileType";
 export * from "./propsValues/scroll";
 export * from "./locale";
 export * from "./commonProps";
+export * from "./initials";
+export * from "./colors";
 export { Breakpoint } from "./propsValues/breakpoint";
 export { Type } from "./propsValues/type";
 export { DateMode } from "./propsValues/dateMode";

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

@@ -0,0 +1,2 @@
+export declare function getInitials(name: string): string;
+//# sourceMappingURL=initials.d.ts.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.71.8",
+  "version": "46.72.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -79,7 +79,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "4.4.10",
-    "@wise/art": "^2.7.0",
+    "@wise/art": "^2.16.3",
     "babel-plugin-formatjs": "^10.5.16",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
@@ -91,14 +91,14 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.19.1",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
     "@transferwise/neptune-css": "^14.9.6",
-    "@wise/art": "^2.7.0",
+    "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",
     "react-dom": ">=18",

package/src/alert/Alert.spec.tsx

@@ -467,4 +467,24 @@ describe('Alert', () => {
       expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
   });
+
+  describe('`active` prop', () => {
+    it('should render wrapper and alert if `active` is unset', () => {
+      render(<Alert message={message} />);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.getByText(message)).toBeInTheDocument();
+    });
+
+    it('should render wrapper and alert if `active={false}', () => {
+      render(<Alert message={message} active={false} />);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.queryByText(message)).not.toBeInTheDocument();
+    });
+
+    it('should render wrapper and alert if `active` is set', () => {
+      render(<Alert message={message} />);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.getByText(message)).toBeInTheDocument();
+    });
+  });
 });

package/src/alert/Alert.story.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable no-alert */
+import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { Sentiment } from '../common';
-
+import { Button } from '..';
 import Alert, { AlertArrowPosition } from './Alert';
 
 export default {
@@ -12,6 +12,7 @@ export default {
   title: 'Feedback/Alert',
   args: {
     type: Sentiment.POSITIVE,
+    active: true,
     message:
       'Payments sent to your bank details **today** might not arrive in time for the holidays.',
   },
@@ -103,3 +104,50 @@ export const WithTitle: Story = {
     onDismiss: () => {},
   },
 };
+
+/**
+ * For ARIA live region to function correctly with screen readers,
+ * the container with an appropriate ARIA role (in the case of this
+ * component, it's `status` or `alert`) must be rendered first.
+ * Once present in the accessibility tree, its dynamic contents
+ * will be announced correctly.
+ *
+ * Because of that, using logical AND (&&) operator is discouraged
+ * and, instead, engineers should toggle the `active` prop which
+ * provides that logic internally.
+ */
+export const ConditionallyRendered: Story = {
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+      <>
+        <Button htmlType="button" onClick={() => setIsActive((value) => !value)}>
+          Trigger Alert
+        </Button>
+
+        <Alert {...args} active={isActive} className="m-t-5" />
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+function Render (args) {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <>
+      <Button htmlType="button" onClick={() => setIsActive(value => !value)}>
+        Trigger Alert
+      </Button>
+
+      <Alert {...args} active={isActive} className="m-t-5" />
+    </>
+  )
+}`,
+      },
+    },
+  },
+};

package/src/alert/Alert.tsx

@@ -52,6 +52,8 @@ export interface AlertProps {
   /** The type dictates which icon and colour will be used */
   type?: AlertType;
   variant?: `${Variant}`;
+  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */
+  active?: boolean;
   /** @deprecated Use `InlineAlert` instead. */
   arrow?: `${AlertArrowPosition}`;
   /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -88,6 +90,7 @@ export default function Alert({
   title,
   type = 'neutral',
   variant = 'desktop',
+  active = true,
 }: AlertProps) {
   useEffect(() => {
     if (arrow !== undefined) {
@@ -133,59 +136,63 @@ export default function Alert({
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
   return (
-    <div
-      className={clsx(
-        'alert d-flex',
-        `alert-${resolvedType}`,
-        arrow != null && alertArrowClassNames(arrow),
-        className,
-      )}
-      data-testid="alert"
-      onTouchStart={() => setShouldFire(true)}
-      onTouchEnd={(event) => {
-        if (
-          shouldFire &&
-          action?.href &&
-          // Check if current event is triggered from closeButton
-          event.target instanceof Node &&
-          closeButtonReference.current &&
-          !closeButtonReference.current.contains(event.target)
-        ) {
-          if (action.target === '_blank') {
-            window.top?.open(action.href);
-          } else {
-            window.top?.location.assign(action.href);
-          }
-        }
-        setShouldFire(false);
-      }}
-      onTouchMove={() => setShouldFire(false)}
-    >
-      <div
-        className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
-        data-testid={variant}
-      >
-        {icon ? (
-          <div className="alert__icon">{icon}</div>
-        ) : (
-          <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
-        )}
-        <div className="alert__message">
-          <div role={Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status'}>
-            {title && (
-              <Title className="m-b-1" type={Typography.TITLE_BODY}>
-                {title}
-              </Title>
+    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>
+      {active && (
+        <div
+          className={clsx(
+            'alert d-flex',
+            `alert-${resolvedType}`,
+            arrow != null && alertArrowClassNames(arrow),
+            className,
+          )}
+          data-testid="alert"
+          onTouchStart={() => setShouldFire(true)}
+          onTouchEnd={(event) => {
+            if (
+              shouldFire &&
+              action?.href &&
+              // Check if current event is triggered from closeButton
+              event.target instanceof Node &&
+              closeButtonReference.current &&
+              !closeButtonReference.current.contains(event.target)
+            ) {
+              if (action.target === '_blank') {
+                window.top?.open(action.href);
+              } else {
+                window.top?.location.assign(action.href);
+              }
+            }
+            setShouldFire(false);
+          }}
+          onTouchMove={() => setShouldFire(false)}
+        >
+          <div
+            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
+            data-testid={variant}
+          >
+            {icon ? (
+              <div className="alert__icon">{icon}</div>
+            ) : (
+              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
             )}
-            <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
-              {children || <InlineMarkdown>{message}</InlineMarkdown>}
-            </Body>
+            <div className="alert__message">
+              <div>
+                {title && (
+                  <Title className="m-b-1" type={Typography.TITLE_BODY}>
+                    {title}
+                  </Title>
+                )}
+                <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
+                  {children || <InlineMarkdown>{message}</InlineMarkdown>}
+                </Body>
+              </div>
+              {action && <Action action={action} className="m-t-1" />}
+            </div>
           </div>
-          {action && <Action action={action} className="m-t-1" />}
+          {onDismiss && (
+            <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
+          )}
         </div>
-      </div>
-      {onDismiss && (
-        <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
       )}
     </div>
   );

package/src/avatar/Avatar.tsx

@@ -1,9 +1,8 @@
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 
-import { Theme } from '../common';
+import { getBrandColorFromSeed, Theme } from '../common';
 
-import { getAvatarColorFromSeed } from './colors';
 import Circle from '../common/circle';
 
 type NumericAvatarSize = 24 | 40 | 48 | 56 | 72;
@@ -58,7 +57,7 @@ const Avatar: React.FC<AvatarProps> = ({
   const backgroundColorFromSeed = useMemo<string | undefined>(
     () =>
       !backgroundColor && backgroundColorSeed
-        ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})`
+        ? getBrandColorFromSeed(backgroundColorSeed)
         : undefined,
     [backgroundColor, backgroundColorSeed],
   );

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -3,7 +3,14 @@ import { useState, useEffect } from 'react';
 
 import Avatar, { AvatarProps, AvatarType } from '../avatar';
 import Badge, { BadgeProps } from '../badge';
-import { ProfileType, ProfileTypePersonal, ProfileTypeBusiness, Size, Sentiment } from '../common';
+import {
+  ProfileType,
+  ProfileTypePersonal,
+  ProfileTypeBusiness,
+  Size,
+  Sentiment,
+  getInitials,
+} from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
 interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
@@ -133,18 +140,4 @@ const AvatarWrapper = ({
   );
 };
 
-function getInitials(name: string) {
-  const allInitials = name
-    .split(' ')
-    .map((part) => part[0])
-    .join('')
-    .toUpperCase();
-
-  if (allInitials.length === 1) {
-    return allInitials[0];
-  }
-
-  return allInitials[0] + allInitials.slice(-1);
-}
-
 export default AvatarWrapper;

package/src/{avatar/colors → common}/colors.ts

@@ -4,10 +4,10 @@
  * Do not change this array.
  */
 const avatarColors = [
-  '--color-bright-blue',
-  '--color-bright-yellow',
-  '--color-bright-pink',
-  '--color-bright-orange',
+  'var(--color-bright-blue)',
+  'var(--color-bright-yellow)',
+  'var(--color-bright-pink)',
+  'var(--color-bright-orange)',
 ] as const;
 
 /*
@@ -31,6 +31,6 @@ const hashSeed = (seed: string): number => {
   return hashValue;
 };
 
-export const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {
+export const getBrandColorFromSeed = (seed: string): (typeof avatarColors)[number] => {
   return avatarColors[hashSeed(seed)];
 };

package/src/common/index.js

@@ -23,3 +23,5 @@ export { MarkdownNodeType } from './propsValues/markdownNodeType';
 export { FileType } from './fileType';
 export * from './locale';
 export * from './commonProps';
+export * from './initials';
+export * from './colors';

package/src/common/initials.ts

@@ -0,0 +1,13 @@
+export function getInitials(name: string) {
+  const allInitials = name
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+
+  return allInitials[0] + allInitials.slice(-1);
+}

package/src/display/Display.tsx

@@ -18,7 +18,7 @@ function Display({
   id,
 }: Props) {
   return (
-    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>
+    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
       {children}
     </Heading>
   );

package/src/promoCard/__snapshots__/PromoCard.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`PromoCard matches snapshot 1`] = `
   id="test-promo-card"
 >
   <h3
-    class="np-text-display-small text-primary np-Card-title"
+    class="np-display np-text-display-small text-primary np-Card-title"
     id="test-promo-card-title"
   >
     Test Title

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -17,7 +17,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
     tabindex="0"
   >
     <h3
-      class="np-text-display-small text-primary np-Card-title"
+      class="np-display np-text-display-small text-primary np-Card-title"
       id="radio-1-title"
     >
       Test Card
@@ -51,7 +51,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
     tabindex="0"
   >
     <h3
-      class="np-text-display-small text-primary np-Card-title"
+      class="np-display np-text-display-small text-primary np-Card-title"
       id="radio-2-title"
     >
       Test Card

package/build/avatar/colors/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sources":["../../../src/avatar/colors/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  '--color-bright-blue',\n  '--color-bright-yellow',\n  '--color-bright-pink',\n  '--color-bright-orange',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getAvatarColorFromSeed"],"mappings":";;AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,CACf,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,sBAAsB,GAAIR,IAAY,IAAmC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}