@transferwise/components 0.0.0-experimental-b26a3c1 → 0.0.0-experimental-f2eec9e

package/build/avatarLayout/AvatarLayout.js

@@ -32,7 +32,8 @@ function AvatarLayout({
       // @ts-expect-error CSS custom props allowed
       '--np-avatar-layout-size': `${size}px`,
       '--np-avatar-size': `${avatarSize}px`,
-      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
+      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
+      '--np-avatar-avatars-count': avatars.length
     },
     ...restProps,
     children: avatars.map(({

package/build/avatarLayout/AvatarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\nimport { useDirection } from '../common/hooks';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const { isRTL } = useDirection();\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isRTL","useDirection","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":";;;;;;;;;;AAiBc,SAAUA,YAAYA,CAAC;AACnCC,EAAAA,OAAO,GAAG,EAAE;EACZC,WAAW,EAAEC,eAAe,GAAG,YAAY;AAC3CC,EAAAA,IAAI,GAAG,EAAE;EACTC,SAAS;EACTC,WAAW;EACX,GAAGC,SAAAA;AACG,CAAA,EAAA;AACN,EAAA,MAAML,WAAW,GACfE,IAAI,KAAK,EAAE,IAAID,eAAe,KAAK,UAAU,GAAG,YAAY,GAAGA,eAAe,CAAA;EAChF,MAAM;AAAEK,IAAAA,KAAAA;GAAO,GAAGC,yBAAY,EAAE,CAAA;AAChC,EAAA,MAAMC,UAAU,GAAGR,WAAW,KAAK,UAAU,CAAA;EAC7C,MAAMS,UAAU,GAAGD,UAAU,GAAGE,4BAA4B,CAACR,IAAI,CAAC,EAAEO,UAAU,GAAGP,IAAI,CAAA;AACrF,EAAA,OAAOH,OAAO,CAACY,MAAM,GAAG,CAAC,GAAG,IAAI,GAAGZ,OAAO,CAACY,MAAM,KAAK,CAAC,gBACrDC,cAAA,CAACC,UAAU,EAAA;IAAA,GAAKd,OAAO,CAAC,CAAC,CAAC;AAAEG,IAAAA,IAAI,EAAEA,IAAK;AAAAY,IAAAA,QAAA,EACpCf,OAAO,CAAC,CAAC,CAAC,CAACgB,KAAAA;GACF,CAAC,gBAEbH,cAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEa,SAAI,CAAC,kBAAkB,EAAE,oBAAoBhB,WAAW,CAAA,CAAE,EAAEG,SAAS,CAAE;AAClFc,IAAAA,KAAK,EAAE;AACL;MACA,yBAAyB,EAAE,CAAGf,EAAAA,IAAI,CAAI,EAAA,CAAA;MACtC,kBAAkB,EAAE,CAAGO,EAAAA,UAAU,CAAI,EAAA,CAAA;AACrC,MAAA,oBAAoB,EAAE,CAAA,EAAGD,UAAU,GAAGE,4BAA4B,CAACR,IAAI,CAAC,CAACgB,MAAM,GAAGC,wBAAwB,CAACjB,IAAI,CAAC,CAAA,EAAA,CAAA;KAChH;AAAA,IAAA,GACEG,SAAS;AAAAS,IAAAA,QAAA,EAEZf,OAAO,CAACqB,GAAG,CAAC,CAAC;MAAEL,KAAK;MAAEE,KAAK;MAAE,GAAGI,MAAAA;KAAQ,EAAEC,KAAK,kBAC9CV,cAAA,CAAA,KAAA,EAAA;MAGET,SAAS,EAAEa,SAAI,CACb;AACE,QAAA,CAAC,oBAAoBhB,WAAW,CAAA,MAAA,CAAQ,GACtC,CAACQ,UAAU,IAAIF,KAAK,GAAGgB,KAAK,KAAKvB,OAAO,CAACY,MAAM,GAAG,CAAC,GAAGW,KAAK,KAAK,CAAA;OACnE,EACD;AACE,QAAA,CAAC,oBAAoBtB,WAAW,CAAA,KAAA,CAAO,GACrC,CAACQ,UAAU,IAAIF,KAAK,GAAGgB,KAAK,KAAK,CAAC,GAAGA,KAAK,KAAKvB,OAAO,CAACY,MAAM,GAAG,CAAA;AACnE,OAAA,CACD;MAAAG,QAAA,eAEFF,cAAA,CAACC,UAAU,EAAA;AAAA,QAAA,GACLQ,MAAM;AACVnB,QAAAA,IAAI,EAAEO,UAA4B;AAClCQ,QAAAA,KAAK,EAAE;AACL,UAAA,IAAIT,UAAU,IAAI;YAChB,eAAe,EAAE,CAAGC,EAAAA,UAAU,CAAI,EAAA,CAAA;YAClC,oBAAoB,EAAE,GAAGC,4BAA4B,CAACR,IAAI,CAAC,CAACqB,QAAQ,CAAI,EAAA,CAAA;AACxE,YAAA,oBAAoB,EAAE,CAAGb,EAAAA,4BAA4B,CAACR,IAAI,CAAC,CAACsB,QAAQ,CAAA,EAAA,CAAA;WACrE,CAAC;UACF,GAAGP,KAAAA;SACH;AACFb,QAAAA,WAAW,EAAEA,WAAY;AAAAU,QAAAA,QAAA,EAExBC,KAAAA;OACS,CAAA;AACd,KAAA,EA3BOO,KA2BF,CACN,CAAA;AAAC,GACC,CACN,CAAA;AACH,CAAA;AAEA;AACA,MAAMZ,4BAA4B,GAAG;AACnC;AACA,EAAA,EAAE,EAAE;AAAED,IAAAA,UAAU,EAAEgB,SAAS;AAAEP,IAAAA,MAAM,EAAEO,SAAS;AAAED,IAAAA,QAAQ,EAAEC,SAAS;AAAEF,IAAAA,QAAQ,EAAEE,SAAAA;GAAW;AAC1F,EAAA,EAAE,EAAE;AAAEhB,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,CAAC;AAAED,IAAAA,QAAQ,EAAE,KAAA;GAAO;AACjE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,EAAA;GAAI;AAC/D,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,EAAA;GAAI;AAC/D,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,KAAA;GAAO;AAClE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,KAAA;GAAO;AAChE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,EAAA;AAAI,GAAA;CAC9D,CAAA;AAED;AACA,MAAMJ,wBAAwB,GAAG;AAC/B,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAA;CACL;;;;"}
+{"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\nimport { useDirection } from '../common/hooks';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const { isRTL } = useDirection();\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n        '--np-avatar-avatars-count': avatars.length,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isRTL","useDirection","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}

package/build/avatarLayout/AvatarLayout.mjs

@@ -30,7 +30,8 @@ function AvatarLayout({
       // @ts-expect-error CSS custom props allowed
       '--np-avatar-layout-size': `${size}px`,
       '--np-avatar-size': `${avatarSize}px`,
-      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
+      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
+      '--np-avatar-avatars-count': avatars.length
     },
     ...restProps,
     children: avatars.map(({

package/build/avatarLayout/AvatarLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\nimport { useDirection } from '../common/hooks';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const { isRTL } = useDirection();\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isRTL","useDirection","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":";;;;;;;;AAiBc,SAAUA,YAAYA,CAAC;AACnCC,EAAAA,OAAO,GAAG,EAAE;EACZC,WAAW,EAAEC,eAAe,GAAG,YAAY;AAC3CC,EAAAA,IAAI,GAAG,EAAE;EACTC,SAAS;EACTC,WAAW;EACX,GAAGC,SAAAA;AACG,CAAA,EAAA;AACN,EAAA,MAAML,WAAW,GACfE,IAAI,KAAK,EAAE,IAAID,eAAe,KAAK,UAAU,GAAG,YAAY,GAAGA,eAAe,CAAA;EAChF,MAAM;AAAEK,IAAAA,KAAAA;GAAO,GAAGC,YAAY,EAAE,CAAA;AAChC,EAAA,MAAMC,UAAU,GAAGR,WAAW,KAAK,UAAU,CAAA;EAC7C,MAAMS,UAAU,GAAGD,UAAU,GAAGE,4BAA4B,CAACR,IAAI,CAAC,EAAEO,UAAU,GAAGP,IAAI,CAAA;AACrF,EAAA,OAAOH,OAAO,CAACY,MAAM,GAAG,CAAC,GAAG,IAAI,GAAGZ,OAAO,CAACY,MAAM,KAAK,CAAC,gBACrDC,GAAA,CAACC,UAAU,EAAA;IAAA,GAAKd,OAAO,CAAC,CAAC,CAAC;AAAEG,IAAAA,IAAI,EAAEA,IAAK;AAAAY,IAAAA,QAAA,EACpCf,OAAO,CAAC,CAAC,CAAC,CAACgB,KAAAA;GACF,CAAC,gBAEbH,GAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEa,IAAI,CAAC,kBAAkB,EAAE,oBAAoBhB,WAAW,CAAA,CAAE,EAAEG,SAAS,CAAE;AAClFc,IAAAA,KAAK,EAAE;AACL;MACA,yBAAyB,EAAE,CAAGf,EAAAA,IAAI,CAAI,EAAA,CAAA;MACtC,kBAAkB,EAAE,CAAGO,EAAAA,UAAU,CAAI,EAAA,CAAA;AACrC,MAAA,oBAAoB,EAAE,CAAA,EAAGD,UAAU,GAAGE,4BAA4B,CAACR,IAAI,CAAC,CAACgB,MAAM,GAAGC,wBAAwB,CAACjB,IAAI,CAAC,CAAA,EAAA,CAAA;KAChH;AAAA,IAAA,GACEG,SAAS;AAAAS,IAAAA,QAAA,EAEZf,OAAO,CAACqB,GAAG,CAAC,CAAC;MAAEL,KAAK;MAAEE,KAAK;MAAE,GAAGI,MAAAA;KAAQ,EAAEC,KAAK,kBAC9CV,GAAA,CAAA,KAAA,EAAA;MAGET,SAAS,EAAEa,IAAI,CACb;AACE,QAAA,CAAC,oBAAoBhB,WAAW,CAAA,MAAA,CAAQ,GACtC,CAACQ,UAAU,IAAIF,KAAK,GAAGgB,KAAK,KAAKvB,OAAO,CAACY,MAAM,GAAG,CAAC,GAAGW,KAAK,KAAK,CAAA;OACnE,EACD;AACE,QAAA,CAAC,oBAAoBtB,WAAW,CAAA,KAAA,CAAO,GACrC,CAACQ,UAAU,IAAIF,KAAK,GAAGgB,KAAK,KAAK,CAAC,GAAGA,KAAK,KAAKvB,OAAO,CAACY,MAAM,GAAG,CAAA;AACnE,OAAA,CACD;MAAAG,QAAA,eAEFF,GAAA,CAACC,UAAU,EAAA;AAAA,QAAA,GACLQ,MAAM;AACVnB,QAAAA,IAAI,EAAEO,UAA4B;AAClCQ,QAAAA,KAAK,EAAE;AACL,UAAA,IAAIT,UAAU,IAAI;YAChB,eAAe,EAAE,CAAGC,EAAAA,UAAU,CAAI,EAAA,CAAA;YAClC,oBAAoB,EAAE,GAAGC,4BAA4B,CAACR,IAAI,CAAC,CAACqB,QAAQ,CAAI,EAAA,CAAA;AACxE,YAAA,oBAAoB,EAAE,CAAGb,EAAAA,4BAA4B,CAACR,IAAI,CAAC,CAACsB,QAAQ,CAAA,EAAA,CAAA;WACrE,CAAC;UACF,GAAGP,KAAAA;SACH;AACFb,QAAAA,WAAW,EAAEA,WAAY;AAAAU,QAAAA,QAAA,EAExBC,KAAAA;OACS,CAAA;AACd,KAAA,EA3BOO,KA2BF,CACN,CAAA;AAAC,GACC,CACN,CAAA;AACH,CAAA;AAEA;AACA,MAAMZ,4BAA4B,GAAG;AACnC;AACA,EAAA,EAAE,EAAE;AAAED,IAAAA,UAAU,EAAEgB,SAAS;AAAEP,IAAAA,MAAM,EAAEO,SAAS;AAAED,IAAAA,QAAQ,EAAEC,SAAS;AAAEF,IAAAA,QAAQ,EAAEE,SAAAA;GAAW;AAC1F,EAAA,EAAE,EAAE;AAAEhB,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,CAAC;AAAED,IAAAA,QAAQ,EAAE,KAAA;GAAO;AACjE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,EAAA;GAAI;AAC/D,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,EAAA;GAAI;AAC/D,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,KAAA;GAAO;AAClE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,KAAA;GAAO;AAChE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE,EAAA;AAAI,GAAA;CAC9D,CAAA;AAED;AACA,MAAMJ,wBAAwB,GAAG;AAC/B,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAA;CACL;;;;"}
+{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\nimport { useDirection } from '../common/hooks';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n  AvatarViewProps,\n  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  avatars: SingleAvatarType[];\n  orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n  AvatarViewProps,\n  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n  avatars = [],\n  orientation: orientationProp = 'horizontal',\n  size = 48,\n  className,\n  interactive,\n  ...restProps\n}: Props) {\n  const orientation =\n    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n  const { isRTL } = useDirection();\n  const isDiagonal = orientation === 'diagonal';\n  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n  return avatars.length < 1 ? null : avatars.length === 1 ? (\n    <AvatarView {...avatars[0]} size={size}>\n      {avatars[0].asset}\n    </AvatarView>\n  ) : (\n    <div\n      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-avatar-layout-size': `${size}px`,\n        '--np-avatar-size': `${avatarSize}px`,\n        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n        '--np-avatar-avatars-count': avatars.length,\n      }}\n      {...restProps}\n    >\n      {avatars.map(({ asset, style, ...avatar }, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          className={clsx(\n            {\n              [`np-avatar-layout-${orientation}-child`]:\n                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,\n            },\n            {\n              [`np-avatar-layout-${orientation}-mask`]:\n                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,\n            },\n          )}\n        >\n          <AvatarView\n            {...avatar}\n            size={avatarSize as Props['size']}\n            style={{\n              ...(isDiagonal && {\n                '--circle-size': `${avatarSize}px`,\n                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n              }),\n              ...style,\n            }}\n            interactive={interactive}\n          >\n            {asset}\n          </AvatarView>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n  // Diagonal layout doesn't support 16 size\n  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n  16: 2,\n  24: 2,\n  32: 7,\n  40: 4,\n  48: 4,\n  56: 6,\n  72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isRTL","useDirection","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}

package/build/button/Button.js

@@ -42,11 +42,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
   disabled = false,
   priority = 'primary',
   sentiment = 'default',
-  // iconStart: IconStart,
-  // iconEnd: IconEnd,
-  // avatars,
-  addonStart,
-  addonEnd,
+  iconStart: IconStart,
+  iconEnd: IconEnd,
+  avatars,
   // @ts-expect-error NewButtonProps has `type` prop
   type = 'button',
   loading = false,
@@ -78,19 +76,17 @@ const Button = /*#__PURE__*/React.forwardRef(({
       className: "wds-Button-label",
       "aria-hidden": loading,
       children: size === 'lg' ? children : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: [size === 'md' && avatars && /*#__PURE__*/jsxRuntime.jsx("span", {
           className: "wds-Button-avatars",
           children: /*#__PURE__*/jsxRuntime.jsx(AvatarLayout, {
             orientation: "horizontal",
-            avatars: addonStart?.value,
+            avatars: avatars,
             size: 24
           })
-        }), addonStart?.type === 'icon' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "wds-Button-icon wds-Button-icon--start",
-          children: addonStart.value
-        }), children, addonEnd?.value && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "wds-Button-icon wds-Button-icon--end",
-          children: addonEnd.value
+        }), !avatars && IconStart && /*#__PURE__*/jsxRuntime.jsx(IconStart, {
+          className: "wds-Button-icon wds-Button-icon--start"
+        }), children, IconEnd && /*#__PURE__*/jsxRuntime.jsx(IconEnd, {
+          className: "wds-Button-icon wds-Button-icon--end"
         })]
       })
     })]

package/build/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { ComponentType, forwardRef, isValidElement, ReactElement, ReactNode } from 'react';\nimport {\n  AnchorElementProps,\n  ButtonReferenceType,\n  ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n  (\n    {\n      as = 'button',\n      children,\n      className,\n      size = 'lg',\n      href,\n      disabled = false,\n      priority = 'primary',\n      sentiment = 'default',\n      // iconStart: IconStart,\n      // iconEnd: IconEnd,\n      // avatars,\n      addonStart,\n      addonEnd,\n      // @ts-expect-error NewButtonProps has `type` prop\n      type = 'button',\n      loading = false,\n      block = false,\n      v2,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = clsx(\n      'wds-Button',\n      {\n        [`wds-Button--block`]: block,\n        [`wds-Button--disabled`]: disabled,\n        [`wds-Button--loading`]: loading,\n      },\n      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n      `wds-Button--${priority}`,\n      `wds-Button--${sentiment}`,\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <Body\n        as=\"span\"\n        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n        className={contentClassNames}\n      >\n        {loading && (\n          <ProcessIndicator\n            size={size === 'sm' ? 'xxs' : 'xs'}\n            className=\"wds-Button-loader\"\n            data-testid=\"button-loader-indicator\"\n          />\n        )}\n        <span className=\"wds-Button-label\" aria-hidden={loading}>\n          {size === 'lg' ? (\n            children\n          ) : (\n            <>\n              {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n                <span className=\"wds-Button-avatars\">\n                  <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n                </span>\n              )}\n\n              {addonStart?.type === 'icon' && addonStart.value && (\n                <span className=\"wds-Button-icon wds-Button-icon--start\">{addonStart.value}</span>\n              )}\n\n              {children}\n\n              {addonEnd?.value && (\n                <span className=\"wds-Button-icon wds-Button-icon--end\">{addonEnd.value}</span>\n              )}\n            </>\n          )}\n        </span>\n      </Body>\n    );\n\n    if (href || as === 'a') {\n      return (\n        <PrimitiveAnchor\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          {...(props as any)}\n          href={href}\n          className={classNames}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n        >\n          {content}\n        </PrimitiveAnchor>\n      );\n    }\n\n    return (\n      <PrimitiveButton\n        ref={ref as React.Ref<HTMLButtonElement>}\n        {...(props as any)}\n        className={classNames}\n        disabled={disabled}\n        loading={loading}\n        type={type}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","undefined","PrimitiveButton"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n  AnchorElementProps,\n  ButtonReferenceType,\n  ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n  (\n    {\n      as = 'button',\n      children,\n      className,\n      size = 'lg',\n      href,\n      disabled = false,\n      priority = 'primary',\n      sentiment = 'default',\n      iconStart: IconStart,\n      iconEnd: IconEnd,\n      avatars,\n      // @ts-expect-error NewButtonProps has `type` prop\n      type = 'button',\n      loading = false,\n      block = false,\n      v2,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = clsx(\n      'wds-Button',\n      {\n        [`wds-Button--block`]: block,\n        [`wds-Button--disabled`]: disabled,\n        [`wds-Button--loading`]: loading,\n      },\n      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n      `wds-Button--${priority}`,\n      `wds-Button--${sentiment}`,\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <Body\n        as=\"span\"\n        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n        className={contentClassNames}\n      >\n        {loading && (\n          <ProcessIndicator\n            size={size === 'sm' ? 'xxs' : 'xs'}\n            className=\"wds-Button-loader\"\n            data-testid=\"button-loader-indicator\"\n          />\n        )}\n        <span className=\"wds-Button-label\" aria-hidden={loading}>\n          {size === 'lg' ? (\n            children\n          ) : (\n            <>\n              {size === 'md' && avatars && (\n                <span className=\"wds-Button-avatars\">\n                  <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n                </span>\n              )}\n              {!avatars && IconStart && (\n                <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n              )}\n              {children}\n              {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n            </>\n          )}\n        </span>\n      </Body>\n    );\n\n    if (href || as === 'a') {\n      return (\n        <PrimitiveAnchor\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          {...(props as any)}\n          href={href}\n          className={classNames}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n        >\n          {content}\n        </PrimitiveAnchor>\n      );\n    }\n\n    return (\n      <PrimitiveButton\n        ref={ref as React.Ref<HTMLButtonElement>}\n        {...(props as any)}\n        className={classNames}\n        disabled={disabled}\n        loading={loading}\n        type={type}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","undefined","PrimitiveButton"],"mappings":"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"}

package/build/button/Button.mjs

@@ -40,11 +40,9 @@ const Button = /*#__PURE__*/forwardRef(({
   disabled = false,
   priority = 'primary',
   sentiment = 'default',
-  // iconStart: IconStart,
-  // iconEnd: IconEnd,
-  // avatars,
-  addonStart,
-  addonEnd,
+  iconStart: IconStart,
+  iconEnd: IconEnd,
+  avatars,
   // @ts-expect-error NewButtonProps has `type` prop
   type = 'button',
   loading = false,
@@ -76,19 +74,17 @@ const Button = /*#__PURE__*/forwardRef(({
       className: "wds-Button-label",
       "aria-hidden": loading,
       children: size === 'lg' ? children : /*#__PURE__*/jsxs(Fragment, {
-        children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsx("span", {
+        children: [size === 'md' && avatars && /*#__PURE__*/jsx("span", {
           className: "wds-Button-avatars",
           children: /*#__PURE__*/jsx(AvatarLayout, {
             orientation: "horizontal",
-            avatars: addonStart?.value,
+            avatars: avatars,
             size: 24
           })
-        }), addonStart?.type === 'icon' && addonStart.value && /*#__PURE__*/jsx("span", {
-          className: "wds-Button-icon wds-Button-icon--start",
-          children: addonStart.value
-        }), children, addonEnd?.value && /*#__PURE__*/jsx("span", {
-          className: "wds-Button-icon wds-Button-icon--end",
-          children: addonEnd.value
+        }), !avatars && IconStart && /*#__PURE__*/jsx(IconStart, {
+          className: "wds-Button-icon wds-Button-icon--start"
+        }), children, IconEnd && /*#__PURE__*/jsx(IconEnd, {
+          className: "wds-Button-icon wds-Button-icon--end"
         })]
       })
     })]

package/build/button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { ComponentType, forwardRef, isValidElement, ReactElement, ReactNode } from 'react';\nimport {\n  AnchorElementProps,\n  ButtonReferenceType,\n  ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n  (\n    {\n      as = 'button',\n      children,\n      className,\n      size = 'lg',\n      href,\n      disabled = false,\n      priority = 'primary',\n      sentiment = 'default',\n      // iconStart: IconStart,\n      // iconEnd: IconEnd,\n      // avatars,\n      addonStart,\n      addonEnd,\n      // @ts-expect-error NewButtonProps has `type` prop\n      type = 'button',\n      loading = false,\n      block = false,\n      v2,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = clsx(\n      'wds-Button',\n      {\n        [`wds-Button--block`]: block,\n        [`wds-Button--disabled`]: disabled,\n        [`wds-Button--loading`]: loading,\n      },\n      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n      `wds-Button--${priority}`,\n      `wds-Button--${sentiment}`,\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <Body\n        as=\"span\"\n        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n        className={contentClassNames}\n      >\n        {loading && (\n          <ProcessIndicator\n            size={size === 'sm' ? 'xxs' : 'xs'}\n            className=\"wds-Button-loader\"\n            data-testid=\"button-loader-indicator\"\n          />\n        )}\n        <span className=\"wds-Button-label\" aria-hidden={loading}>\n          {size === 'lg' ? (\n            children\n          ) : (\n            <>\n              {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n                <span className=\"wds-Button-avatars\">\n                  <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n                </span>\n              )}\n\n              {addonStart?.type === 'icon' && addonStart.value && (\n                <span className=\"wds-Button-icon wds-Button-icon--start\">{addonStart.value}</span>\n              )}\n\n              {children}\n\n              {addonEnd?.value && (\n                <span className=\"wds-Button-icon wds-Button-icon--end\">{addonEnd.value}</span>\n              )}\n            </>\n          )}\n        </span>\n      </Body>\n    );\n\n    if (href || as === 'a') {\n      return (\n        <PrimitiveAnchor\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          {...(props as any)}\n          href={href}\n          className={classNames}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n        >\n          {content}\n        </PrimitiveAnchor>\n      );\n    }\n\n    return (\n      <PrimitiveButton\n        ref={ref as React.Ref<HTMLButtonElement>}\n        {...(props as any)}\n        className={classNames}\n        disabled={disabled}\n        loading={loading}\n        type={type}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","undefined","PrimitiveButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAcA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,EAAE,GAAG,QAAQ;EACbC,QAAQ;EACRC,SAAS;AACTC,EAAAA,IAAI,GAAG,IAAI;EACXC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,SAAS,GAAG,SAAS;AACrB;AACA;AACA;EACAC,UAAU;EACVC,QAAQ;AACR;AACAC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,KAAK,GAAG,KAAK;EACbC,EAAE;EACF,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,UAAU,GAAGC,IAAI,CACrB,YAAY,EACZ;IACE,CAAC,CAAA,iBAAA,CAAmB,GAAGL,KAAK;IAC5B,CAAC,CAAA,oBAAA,CAAsB,GAAGP,QAAQ;AAClC,IAAA,CAAC,qBAAqB,GAAGM,OAAAA;AAC1B,GAAA,EACD,CAAe,YAAA,EAAA;AAAEO,IAAAA,EAAE,EAAE,OAAO;AAAEC,IAAAA,EAAE,EAAE,QAAQ;AAAEC,IAAAA,EAAE,EAAE,OAAA;AAAO,GAAE,CAACjB,IAAI,CAAC,CAAA,CAAE,EACjE,CAAeG,YAAAA,EAAAA,QAAQ,CAAE,CAAA,EACzB,CAAeC,YAAAA,EAAAA,SAAS,CAAE,CAAA,EAC1BL,SAAS,CACV,CAAA;AAED,EAAA,MAAMmB,iBAAiB,GAAGJ,IAAI,CAAC,oBAAoB,EAAE;AACnD,IAAA,CAAC,6BAA6B,GAAGN,OAAAA;AAClC,GAAA,CAAC,CAAA;AAEF,EAAA,MAAMW,OAAO,gBACXC,IAAA,CAACC,IAAI,EAAA;AACHxB,IAAAA,EAAE,EAAC,MAAM;IACTU,IAAI,EAAEP,IAAI,KAAK,IAAI,GAAGsB,UAAU,CAACC,iBAAiB,GAAGD,UAAU,CAACE,eAAgB;AAChFzB,IAAAA,SAAS,EAAEmB,iBAAkB;AAAApB,IAAAA,QAAA,EAE5BU,CAAAA,OAAO,iBACNiB,GAAA,CAACC,gBAAgB,EAAA;AACf1B,MAAAA,IAAI,EAAEA,IAAI,KAAK,IAAI,GAAG,KAAK,GAAG,IAAK;AACnCD,MAAAA,SAAS,EAAC,mBAAmB;MAC7B,aAAY,EAAA,yBAAA;KAAyB,CAExC,eACD0B,GAAA,CAAA,MAAA,EAAA;AAAM1B,MAAAA,SAAS,EAAC,kBAAkB;AAAC,MAAA,aAAA,EAAaS,OAAQ;MAAAV,QAAA,EACrDE,IAAI,KAAK,IAAI,GACZF,QAAQ,gBAERsB,IAAA,CAAAO,QAAA,EAAA;AAAA7B,QAAAA,QAAA,EACGE,CAAAA,IAAI,KAAK,IAAI,IAAIK,UAAU,EAAEE,IAAI,KAAK,QAAQ,IAAIF,UAAU,CAACuB,KAAK,iBACjEH,GAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,oBAAoB;UAAAD,QAAA,eAClC2B,GAAA,CAACI,YAAY,EAAA;AAACC,YAAAA,WAAW,EAAC,YAAY;YAACC,OAAO,EAAE1B,UAAU,EAAEuB,KAAM;AAAC5B,YAAAA,IAAI,EAAE,EAAA;WAC3E,CAAA;AAAA,SAAM,CACP,EAEAK,UAAU,EAAEE,IAAI,KAAK,MAAM,IAAIF,UAAU,CAACuB,KAAK,iBAC9CH,GAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,wCAAwC;UAAAD,QAAA,EAAEO,UAAU,CAACuB,KAAAA;SAAY,CAClF,EAEA9B,QAAQ,EAERQ,QAAQ,EAAEsB,KAAK,iBACdH,GAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,sCAAsC;UAAAD,QAAA,EAAEQ,QAAQ,CAACsB,KAAAA;AAAK,SAAO,CAC9E,CAAA;OACH,CAAA;AACD,KACG,CACR,CAAA;AAAA,GAAM,CACP,CAAA;AAED,EAAA,IAAI3B,IAAI,IAAIJ,EAAE,KAAK,GAAG,EAAE;IACtB,oBACE4B,GAAA,CAACO,eAAe,EAAA;AACdpB,MAAAA,GAAG,EAAEA,GAAoC;AAAA,MAAA,GACpCD,KAAa;AAClBV,MAAAA,IAAI,EAAEA,IAAK;AACXF,MAAAA,SAAS,EAAEc,UAAW;MACtBX,QAAQ,EAAEA,QAAQ,IAAIM,OAAQ;MAC9B,WAAWA,EAAAA,OAAO,IAAIyB,SAAU;AAAAnC,MAAAA,QAAA,EAE/BqB,OAAAA;AAAO,KACO,CAAC,CAAA;AAEtB,GAAA;EAEA,oBACEM,GAAA,CAACS,eAAe,EAAA;AACdtB,IAAAA,GAAG,EAAEA,GAAoC;AAAA,IAAA,GACpCD,KAAa;AAClBZ,IAAAA,SAAS,EAAEc,UAAW;AACtBX,IAAAA,QAAQ,EAAEA,QAAS;AACnBM,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,IAAI,EAAEA,IAAK;AAAAT,IAAAA,QAAA,EAEVqB,OAAAA;AAAO,GACO,CAAC,CAAA;AAEtB,CAAC;;;;"}
+{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n  AnchorElementProps,\n  ButtonReferenceType,\n  ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n  (\n    {\n      as = 'button',\n      children,\n      className,\n      size = 'lg',\n      href,\n      disabled = false,\n      priority = 'primary',\n      sentiment = 'default',\n      iconStart: IconStart,\n      iconEnd: IconEnd,\n      avatars,\n      // @ts-expect-error NewButtonProps has `type` prop\n      type = 'button',\n      loading = false,\n      block = false,\n      v2,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = clsx(\n      'wds-Button',\n      {\n        [`wds-Button--block`]: block,\n        [`wds-Button--disabled`]: disabled,\n        [`wds-Button--loading`]: loading,\n      },\n      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n      `wds-Button--${priority}`,\n      `wds-Button--${sentiment}`,\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <Body\n        as=\"span\"\n        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n        className={contentClassNames}\n      >\n        {loading && (\n          <ProcessIndicator\n            size={size === 'sm' ? 'xxs' : 'xs'}\n            className=\"wds-Button-loader\"\n            data-testid=\"button-loader-indicator\"\n          />\n        )}\n        <span className=\"wds-Button-label\" aria-hidden={loading}>\n          {size === 'lg' ? (\n            children\n          ) : (\n            <>\n              {size === 'md' && avatars && (\n                <span className=\"wds-Button-avatars\">\n                  <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n                </span>\n              )}\n              {!avatars && IconStart && (\n                <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n              )}\n              {children}\n              {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n            </>\n          )}\n        </span>\n      </Body>\n    );\n\n    if (href || as === 'a') {\n      return (\n        <PrimitiveAnchor\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          {...(props as any)}\n          href={href}\n          className={classNames}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n        >\n          {content}\n        </PrimitiveAnchor>\n      );\n    }\n\n    return (\n      <PrimitiveButton\n        ref={ref as React.Ref<HTMLButtonElement>}\n        {...(props as any)}\n        className={classNames}\n        disabled={disabled}\n        loading={loading}\n        type={type}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","undefined","PrimitiveButton"],"mappings":"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"}

package/build/index.js

@@ -106,6 +106,7 @@ var Tooltip = require('./tooltip/Tooltip.js');
 var Typeahead = require('./typeahead/Typeahead.js');
 var Upload = require('./upload/Upload.js');
 var UploadInput = require('./uploadInput/UploadInput.js');
+var Table = require('./table/Table.js');
 require('@transferwise/neptune-validation');
 var useDirection = require('./common/hooks/useDirection/useDirection.js');
 var useLayout = require('./common/hooks/useLayout/useLayout.js');
@@ -271,6 +272,7 @@ Object.defineProperty(exports, "UploadStep", {
 	get: function () { return Upload.UploadStep; }
 });
 exports.UploadInput = UploadInput;
+exports.Table = Table;
 exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;
 exports.useScreenSize = useScreenSize.useScreenSize;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs

@@ -104,6 +104,7 @@ export { default as Tooltip } from './tooltip/Tooltip.mjs';
 export { default as Typeahead } from './typeahead/Typeahead.mjs';
 export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
+export { default as Table } from './table/Table.mjs';
 import '@transferwise/neptune-validation';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/main.css

@@ -531,7 +531,8 @@ div.critical-comms .critical-comms-body {
   margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -3914,6 +3915,17 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/build/nudge/Nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`;\n\ntype BaseProps = {\n  /** @deprecated use `mediaName` property instead */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: ActionOptions;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}
+{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`;\n\ntype BaseProps = {\n  /** @deprecated use `mediaName` property instead */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: ActionOptions;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}

package/build/nudge/Nudge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`;\n\ntype BaseProps = {\n  /** @deprecated use `mediaName` property instead */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: ActionOptions;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}
+{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`;\n\ntype BaseProps = {\n  /** @deprecated use `mediaName` property instead */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: ActionOptions;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}

package/build/styles/avatarLayout/AvatarLayout.css

@@ -24,7 +24,8 @@
   margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {

package/build/styles/main.css

@@ -531,7 +531,8 @@ div.critical-comms .critical-comms-body {
   margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -3914,6 +3915,17 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/build/styles/nudge/Nudge.css

@@ -136,6 +136,17 @@
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;