@transferwise/components 46.154.0 → 46.155.1

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  'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  /** @default [] */\n  avatars: SingleAvatarType[];\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'diagonal';\n  /** @default 48 */\n  size?: AvatarViewProps['size'];\n} & Pick<\n  AvatarViewProps,\n  '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: 16, 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  88: { avatarSize: 54, offset: 7, fontSize: 26, iconSize: 27 },\n  96: { avatarSize: 58, offset: 8, fontSize: 28, iconSize: 29 },\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  88: 10,\n  96: 10,\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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"}
+{"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  'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type AvatarLayoutProps = {\n  /** @default [] */\n  avatars: SingleAvatarType[];\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'diagonal';\n  /** @default 48 */\n  size?: AvatarViewProps['size'];\n} & Pick<\n  AvatarViewProps,\n  '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}: AvatarLayoutProps) {\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 AvatarLayoutProps['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: 16, 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  88: { avatarSize: 54, offset: 7, fontSize: 26, iconSize: 27 },\n  96: { avatarSize: 58, offset: 8, fontSize: 28, iconSize: 29 },\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  88: 10,\n  96: 10,\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":";;;;;;;;;;;;AAqBc,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;AAAS,CACM,EAAA;AAClB,EAAA,MAAML,WAAW,GACfE,IAAI,KAAK,EAAE,IAAID,eAAe,KAAK,UAAU,GAAG,YAAY,GAAGA,eAAe;EAChF,MAAM;AAAEK,IAAAA;GAAO,GAAGC,yBAAY,EAAE;AAChC,EAAA,MAAMC,UAAU,GAAGR,WAAW,KAAK,UAAU;EAC7C,MAAMS,UAAU,GAAGD,UAAU,GAAGE,4BAA4B,CAACR,IAAI,CAAC,EAAEO,UAAU,GAAGP,IAAI;AACrF,EAAA,OAAOH,OAAO,CAACY,MAAM,GAAG,CAAC,GAAG,IAAI,GAAGZ,OAAO,CAACY,MAAM,KAAK,CAAC,gBACrDC,cAAA,CAACC,kBAAU,EAAA;IAAA,GAAKd,OAAO,CAAC,CAAC,CAAC;AAAEG,IAAAA,IAAI,EAAEA,IAAK;AAAAY,IAAAA,QAAA,EACpCf,OAAO,CAAC,CAAC,CAAC,CAACgB;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,CAAA,EAAGf,IAAI,CAAA,EAAA,CAAI;MACtC,kBAAkB,EAAE,CAAA,EAAGO,UAAU,CAAA,EAAA,CAAI;AACrC,MAAA,oBAAoB,EAAE,CAAA,EAAGD,UAAU,GAAGE,4BAA4B,CAACR,IAAI,CAAC,CAACgB,MAAM,GAAGC,wBAAwB,CAACjB,IAAI,CAAC,CAAA,EAAA,CAAI;MACpH,2BAA2B,EAAEH,OAAO,CAACY;KACrC;AAAA,IAAA,GACEN,SAAS;AAAAS,IAAAA,QAAA,EAEZf,OAAO,CAACqB,GAAG,CAAC,CAAC;MAAEL,KAAK;MAAEE,KAAK;MAAE,GAAGI;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;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;AACnE,OAAA,CACD;MAAAG,QAAA,eAEFF,cAAA,CAACC,kBAAU,EAAA;AAAA,QAAA,GACLQ,MAAM;AACVnB,QAAAA,IAAI,EAAEO,UAAwC;AAC9CQ,QAAAA,KAAK,EAAE;AACL,UAAA,IAAIT,UAAU,IAAI;YAChB,eAAe,EAAE,CAAA,EAAGC,UAAU,CAAA,EAAA,CAAI;YAClC,oBAAoB,EAAE,GAAGC,4BAA4B,CAACR,IAAI,CAAC,CAACqB,QAAQ,CAAA,EAAA,CAAI;AACxE,YAAA,oBAAoB,EAAE,CAAA,EAAGb,4BAA4B,CAACR,IAAI,CAAC,CAACsB,QAAQ,CAAA,EAAA;WACrE,CAAC;UACF,GAAGP;SACH;AACFb,QAAAA,WAAW,EAAEA,WAAY;AAAAU,QAAAA,QAAA,EAExBC;OACS;AACd,KAAA,EA3BOO,KA2BF,CACN;AAAC,GACC,CACN;AACH;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;GAAW;AAC1F,EAAA,EAAE,EAAE;AAAEhB,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,CAAC;AAAED,IAAAA,QAAQ,EAAE;GAAO;AACjE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,GAAG;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE;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;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;GAAO;AAClE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE;GAAO;AAChE,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE;GAAI;AAC7D,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE;GAAI;AAC7D,EAAA,EAAE,EAAE;AAAEd,IAAAA,UAAU,EAAE,EAAE;AAAES,IAAAA,MAAM,EAAE,CAAC;AAAEM,IAAAA,QAAQ,EAAE,EAAE;AAAED,IAAAA,QAAQ,EAAE;AAAE;CAC5D;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,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;;;;"}

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  'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n  /** @default [] */\n  avatars: SingleAvatarType[];\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'diagonal';\n  /** @default 48 */\n  size?: AvatarViewProps['size'];\n} & Pick<\n  AvatarViewProps,\n  '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: 16, 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  88: { avatarSize: 54, offset: 7, fontSize: 26, iconSize: 27 },\n  96: { avatarSize: 58, offset: 8, fontSize: 28, iconSize: 29 },\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  88: 10,\n  96: 10,\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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"}
+{"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  'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type AvatarLayoutProps = {\n  /** @default [] */\n  avatars: SingleAvatarType[];\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'diagonal';\n  /** @default 48 */\n  size?: AvatarViewProps['size'];\n} & Pick<\n  AvatarViewProps,\n  '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}: AvatarLayoutProps) {\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 AvatarLayoutProps['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: 16, 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  88: { avatarSize: 54, offset: 7, fontSize: 26, iconSize: 27 },\n  96: { avatarSize: 58, offset: 8, fontSize: 28, iconSize: 29 },\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  88: 10,\n  96: 10,\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/AvatarView/AvatarView.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.js","sources":["../../src/AvatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../_deprecated/Badge';\nimport Dot from './Dot/Dot';\nimport Circle from '../common/Circle';\nimport Image from '../Image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n  88: 24,\n  96: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n  88: 2,\n  96: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
+{"version":3,"file":"AvatarView.js","sources":["../../src/AvatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../_deprecated/Badge';\nimport Dot from './Dot/Dot';\nimport Circle from '../common/Circle';\nimport Image from '../Image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type AvatarViewProps = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: AvatarViewProps) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n  88: 24,\n  96: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n  88: 2,\n  96: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<AvatarViewProps, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/AvatarView/AvatarView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.mjs","sources":["../../src/AvatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../_deprecated/Badge';\nimport Dot from './Dot/Dot';\nimport Circle from '../common/Circle';\nimport Image from '../Image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n  88: 24,\n  96: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n  88: 2,\n  96: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
+{"version":3,"file":"AvatarView.mjs","sources":["../../src/AvatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../_deprecated/Badge';\nimport Dot from './Dot/Dot';\nimport Circle from '../common/Circle';\nimport Image from '../Image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type AvatarViewProps = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: AvatarViewProps) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n  88: 24,\n  96: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n  88: 2,\n  96: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<AvatarViewProps, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/AvatarView/Dot/Dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","sources":["../../../src/AvatarView/Dot/Dot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from '../AvatarView';\nimport { clsx } from 'clsx';\n\nexport type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n  variant?: 'notification' | 'online';\n};\n\n/**\n * Depending on avatar size, dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n  88: { size: 24, offset: 4 },\n  96: { size: 24, offset: 4 },\n};\n\nexport default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {\n  return (\n    <div\n      className=\"np-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div\n        className={clsx('np-dot-badge', {\n          'np-dot-badge-notification': variant === 'notification',\n          'np-dot-badge-online': variant === 'online',\n        })}\n      />\n      <div className=\"np-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","Dot","children","avatarSize","variant","_jsxs","className","style","_jsx","clsx"],"mappings":";;;;;;;AAYA,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAE;AAAEC,EAAAA,OAAO,GAAG;AAAc,CAAY,EAAA;AAC3F,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,KAAK,EAAE;AACL;MACA,eAAe,EAAE,GAAGT,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACzD,MAAA,iBAAiB,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACzD;AAAAE,IAAAA,QAAA,gBAEFM,cAAA,CAAA,KAAA,EAAA;AACEF,MAAAA,SAAS,EAAEG,SAAI,CAAC,cAAc,EAAE;QAC9B,2BAA2B,EAAEL,OAAO,KAAK,cAAc;QACvD,qBAAqB,EAAEA,OAAO,KAAK;OACpC;KAAE,CAEL,eAAAI,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,aAAa;AAAAJ,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC9C;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Dot.js","sources":["../../../src/AvatarView/Dot/Dot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport type { AvatarViewProps } from '../AvatarView';\nimport { clsx } from 'clsx';\n\nexport type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n  variant?: 'notification' | 'online';\n};\n\n/**\n * Depending on avatar size, dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n  88: { size: 24, offset: 4 },\n  96: { size: 24, offset: 4 },\n};\n\nexport default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {\n  return (\n    <div\n      className=\"np-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div\n        className={clsx('np-dot-badge', {\n          'np-dot-badge-notification': variant === 'notification',\n          'np-dot-badge-online': variant === 'online',\n        })}\n      />\n      <div className=\"np-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","Dot","children","avatarSize","variant","_jsxs","className","style","_jsx","clsx"],"mappings":";;;;;;;AAYA,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAE;AAAEC,EAAAA,OAAO,GAAG;AAAc,CAAY,EAAA;AAC3F,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,KAAK,EAAE;AACL;MACA,eAAe,EAAE,GAAGT,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACzD,MAAA,iBAAiB,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACzD;AAAAE,IAAAA,QAAA,gBAEFM,cAAA,CAAA,KAAA,EAAA;AACEF,MAAAA,SAAS,EAAEG,SAAI,CAAC,cAAc,EAAE;QAC9B,2BAA2B,EAAEL,OAAO,KAAK,cAAc;QACvD,qBAAqB,EAAEA,OAAO,KAAK;OACpC;KAAE,CAEL,eAAAI,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,aAAa;AAAAJ,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC9C;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/AvatarView/Dot/Dot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.mjs","sources":["../../../src/AvatarView/Dot/Dot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from '../AvatarView';\nimport { clsx } from 'clsx';\n\nexport type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n  variant?: 'notification' | 'online';\n};\n\n/**\n * Depending on avatar size, dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n  88: { size: 24, offset: 4 },\n  96: { size: 24, offset: 4 },\n};\n\nexport default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {\n  return (\n    <div\n      className=\"np-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div\n        className={clsx('np-dot-badge', {\n          'np-dot-badge-notification': variant === 'notification',\n          'np-dot-badge-online': variant === 'online',\n        })}\n      />\n      <div className=\"np-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","Dot","children","avatarSize","variant","_jsxs","className","style","_jsx","clsx"],"mappings":";;;AAYA,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAE;AAAEC,EAAAA,OAAO,GAAG;AAAc,CAAY,EAAA;AAC3F,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,KAAK,EAAE;AACL;MACA,eAAe,EAAE,GAAGT,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACzD,MAAA,iBAAiB,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACzD;AAAAE,IAAAA,QAAA,gBAEFM,GAAA,CAAA,KAAA,EAAA;AACEF,MAAAA,SAAS,EAAEG,IAAI,CAAC,cAAc,EAAE;QAC9B,2BAA2B,EAAEL,OAAO,KAAK,cAAc;QACvD,qBAAqB,EAAEA,OAAO,KAAK;OACpC;KAAE,CAEL,eAAAI,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,aAAa;AAAAJ,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC9C;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Dot.mjs","sources":["../../../src/AvatarView/Dot/Dot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport type { AvatarViewProps } from '../AvatarView';\nimport { clsx } from 'clsx';\n\nexport type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n  variant?: 'notification' | 'online';\n};\n\n/**\n * Depending on avatar size, dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n  88: { size: 24, offset: 4 },\n  96: { size: 24, offset: 4 },\n};\n\nexport default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {\n  return (\n    <div\n      className=\"np-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div\n        className={clsx('np-dot-badge', {\n          'np-dot-badge-notification': variant === 'notification',\n          'np-dot-badge-online': variant === 'online',\n        })}\n      />\n      <div className=\"np-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","Dot","children","avatarSize","variant","_jsxs","className","style","_jsx","clsx"],"mappings":";;;AAYA,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAE;AAAEC,EAAAA,OAAO,GAAG;AAAc,CAAY,EAAA;AAC3F,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,KAAK,EAAE;AACL;MACA,eAAe,EAAE,GAAGT,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACzD,MAAA,iBAAiB,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACzD;AAAAE,IAAAA,QAAA,gBAEFM,GAAA,CAAA,KAAA,EAAA;AACEF,MAAAA,SAAS,EAAEG,IAAI,CAAC,cAAc,EAAE;QAC9B,2BAA2B,EAAEL,OAAO,KAAK,cAAc;QACvD,qBAAqB,EAAEA,OAAO,KAAK;OACpC;KAAE,CAEL,eAAAI,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,aAAa;AAAAJ,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC9C;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/Body/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../src/Body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/PropsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /** @default 'body-default' */\n  type?: BodyTypes;\n  /** @default 'div' */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC;AAcF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAS,EAC1FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,SAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.js","sources":["../../src/Body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/PropsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\nexport type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /** @default 'body-default' */\n  type?: BodyTypes;\n  /** @default 'div' */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: BodyProps,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC;AAcF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAa,EAC9FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,SAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/Body/Body.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Body.mjs","sources":["../../src/Body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/PropsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /** @default 'body-default' */\n  type?: BodyTypes;\n  /** @default 'div' */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC;AAcF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAS,EAC1FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,IAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.mjs","sources":["../../src/Body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/PropsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\nexport type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /** @default 'body-default' */\n  type?: BodyTypes;\n  /** @default 'div' */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: BodyProps,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC;AAcF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAa,EAC9FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,IAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/Chips/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACF,KAAI;AACb,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}

package/build/Chips/Chip/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACF,KAAI;AACb,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}

package/build/DefinitionList/DefinitionList.js

@@ -61,7 +61,8 @@ function DefinitionList({
       'text-muted': muted,
       'flex-column': layout === layouts.Layout.VERTICAL_ONE_COLUMN,
       'tw-definition-list--columns flex-column flex-row--sm': layout === layouts.Layout.VERTICAL_TWO_COLUMN,
-      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
+      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),
+      'tw-definition-list--horizontal-right-aligned': layout === layouts.Layout.HORIZONTAL_RIGHT_ALIGNED
     }),
     children: definitions.filter(definition => definition).map(({
       action,

package/build/DefinitionList/DefinitionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.js","sources":["../../src/DefinitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../Button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}
+{"version":3,"file":"DefinitionList.js","sources":["../../src/DefinitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../Button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n        'tw-definition-list--horizontal-right-aligned': layout === Layout.HORIZONTAL_RIGHT_ALIGNED,\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}

package/build/DefinitionList/DefinitionList.mjs

@@ -57,7 +57,8 @@ function DefinitionList({
       'text-muted': muted,
       'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
       'tw-definition-list--columns flex-column flex-row--sm': layout === Layout.VERTICAL_TWO_COLUMN,
-      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
+      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),
+      'tw-definition-list--horizontal-right-aligned': layout === Layout.HORIZONTAL_RIGHT_ALIGNED
     }),
     children: definitions.filter(definition => definition).map(({
       action,

package/build/DefinitionList/DefinitionList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.mjs","sources":["../../src/DefinitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../Button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}
+{"version":3,"file":"DefinitionList.mjs","sources":["../../src/DefinitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../Button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n        'tw-definition-list--horizontal-right-aligned': layout === Layout.HORIZONTAL_RIGHT_ALIGNED,\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}

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-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;AAAE,CACI,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;AAAQ,GACF,CAAC;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\nexport type DisplayProps = 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}: DisplayProps) {\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;AAAE,CACW,EAAA;EACb,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;AAAQ,GACF,CAAC;AAEd;;;;"}

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-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;AAAE,CACI,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;AAAQ,GACF,CAAC;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\nexport type DisplayProps = 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}: DisplayProps) {\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;AAAE,CACW,EAAA;EACb,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;AAAQ,GACF,CAAC;AAEd;;;;"}

package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js

@@ -2,7 +2,7 @@
 
 var formatting = require('@transferwise/formatting');
 var clsx = require('clsx');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 var React = require('react');
 var reactIntl = require('react-intl');
 var AnimatedNumber = require('../AnimatedNumber/AnimatedNumber.js');
@@ -259,7 +259,7 @@ const AmountInput = ({
           setTimeout(() => setVisualFocus(false), 30);
         },
         onKeyDown: e => handleKeyDown(e)
-      }), /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
+      }), /*#__PURE__*/jsxRuntime.jsx(react.AnimatePresence, {
         initial: false,
         children: addonContent !== null && /*#__PURE__*/jsxRuntime.jsx(AnimatedNumber.AnimatedNumber, {
           className: clsx.clsx('wds-amount-input-placeholder', visualFocus && 'wds-amount-input-placeholder-focus'),

package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.js","sources":["../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype Props = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: Props) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(() =>\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const prevAmountRef = useRef<string | number | null | undefined>(amount);\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (prevAmountRef.current !== amount) {\n      prevAmountRef.current = amount;\n\n      // Only update the displayed value if not focused (preserve user input when focused)\n      if (!focus) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused\n        setValue(\n          amount\n            ? getFormattedString({\n                value: amount,\n                currency,\n                locale: intl.locale,\n              })\n            : '',\n        );\n      }\n    }\n  }, [amount, focus, currency, intl.locale]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [onFocusChange, visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\">\n      <div\n        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}\n        style={style}\n      >\n        <input\n          ref={ref}\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","prevAmountRef","useRef","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}
+{"version":3,"file":"AmountInput.js","sources":["../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype AmountInputProps = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: AmountInputProps) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(() =>\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const prevAmountRef = useRef<string | number | null | undefined>(amount);\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (prevAmountRef.current !== amount) {\n      prevAmountRef.current = amount;\n\n      // Only update the displayed value if not focused (preserve user input when focused)\n      if (!focus) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused\n        setValue(\n          amount\n            ? getFormattedString({\n                value: amount,\n                currency,\n                locale: intl.locale,\n              })\n            : '',\n        );\n      }\n    }\n  }, [amount, focus, currency, intl.locale]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [onFocusChange, visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\">\n      <div\n        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}\n        style={style}\n      >\n        <input\n          ref={ref}\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","prevAmountRef","useRef","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}

package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs

@@ -1,6 +1,6 @@
 import { formatAmount } from '@transferwise/formatting';
 import { clsx } from 'clsx';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber.mjs';