@transferwise/components 0.0.0-experimental-58e9ef8 → 0.0.0-experimental-a88d24d

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 '../badge';\nimport Dot, { DotProps } from './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;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  '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} 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};\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 '../badge';\nimport Dot, { DotProps } from './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;\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} 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};\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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"}

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 '../badge';\nimport Dot, { DotProps } from './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;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  '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} 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};\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 '../badge';\nimport Dot, { DotProps } from './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;\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} 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};\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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"}

package/build/common/preventScroll/PreventScroll.js

@@ -1,17 +1,10 @@
 'use strict';
 
 var overlays = require('@react-aria/overlays');
-var jsxRuntime = require('react/jsx-runtime');
 
 function PreventScroll() {
   overlays.usePreventScroll();
-  // ios18
-  return /*#__PURE__*/jsxRuntime.jsx("style", {
-    children: `html, body { 
-    height: 100dvh; 
-    overflow: hidden;
-  }`
-  });
+  return null;
 }
 
 exports.PreventScroll = PreventScroll;

package/build/common/preventScroll/PreventScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreventScroll.js","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n  usePreventScroll();\n\n  // ios18\n  return (\n    <style>{`html, body { \n    height: 100dvh; \n    overflow: hidden;\n  }`}</style>\n  );\n\n  // ios26\n  return <style>{`html, body { height: 100dvh; overflow: hidden; }`}</style>;\n}\n"],"names":["PreventScroll","usePreventScroll","_jsx","children"],"mappings":";;;;;SAEgBA,aAAaA,GAAA;AAC3BC,EAAAA,yBAAgB,EAAE;AAElB;AACA,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AAAAC,IAAAA,QAAA,EAAQ,CAAA;;;AAGR,GAAA;AAAA,GAAQ,CAAC;AAKb;;;;"}
+{"version":3,"file":"PreventScroll.js","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n  usePreventScroll();\n  return null;\n}\n"],"names":["PreventScroll","usePreventScroll"],"mappings":";;;;SAEgBA,aAAaA,GAAA;AAC3BC,EAAAA,yBAAgB,EAAE;AAClB,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/common/preventScroll/PreventScroll.mjs

@@ -1,15 +1,8 @@
 import { usePreventScroll } from '@react-aria/overlays';
-import { jsx } from 'react/jsx-runtime';
 
 function PreventScroll() {
   usePreventScroll();
-  // ios18
-  return /*#__PURE__*/jsx("style", {
-    children: `html, body { 
-    height: 100dvh; 
-    overflow: hidden;
-  }`
-  });
+  return null;
 }
 
 export { PreventScroll };

package/build/common/preventScroll/PreventScroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreventScroll.mjs","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n  usePreventScroll();\n\n  // ios18\n  return (\n    <style>{`html, body { \n    height: 100dvh; \n    overflow: hidden;\n  }`}</style>\n  );\n\n  // ios26\n  return <style>{`html, body { height: 100dvh; overflow: hidden; }`}</style>;\n}\n"],"names":["PreventScroll","usePreventScroll","_jsx","children"],"mappings":";;;SAEgBA,aAAaA,GAAA;AAC3BC,EAAAA,gBAAgB,EAAE;AAElB;AACA,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AAAAC,IAAAA,QAAA,EAAQ,CAAA;;;AAGR,GAAA;AAAA,GAAQ,CAAC;AAKb;;;;"}
+{"version":3,"file":"PreventScroll.mjs","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n  usePreventScroll();\n  return null;\n}\n"],"names":["PreventScroll","usePreventScroll"],"mappings":";;SAEgBA,aAAaA,GAAA;AAC3BC,EAAAA,gBAAgB,EAAE;AAClB,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/inputs/_BottomSheet.js

@@ -6,37 +6,12 @@ var focus = require('@react-aria/focus');
 var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
 var React = require('react');
-require('../common/theme.js');
-require('../common/direction.js');
-require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
-var size = require('../common/propsValues/size.js');
-require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var useVirtualKeyboard = require('../common/hooks/useVirtualKeyboard.js');
 var PreventScroll = require('../common/preventScroll/PreventScroll.js');
+var size = require('../common/propsValues/size.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-const freezeScroll = (shouldFreeze = true) => {
-  if (shouldFreeze) {
-    document.documentElement.style.scrollBehavior = 'unset';
-  } else {
-    document.documentElement.style.removeProperty('scroll-behavior');
-  }
-};
 function BottomSheet({
   open,
   renderTrigger,
@@ -59,9 +34,6 @@ function BottomSheet({
       }
     }
   });
-  React.useEffect(() => {
-    freezeScroll(open);
-  }, [open]);
   const dismiss = react.useDismiss(context);
   const role = react.useRole(context);
   const {

package/build/inputs/_BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition, TransitionChild } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState, useEffect } from 'react';\n\nimport { CloseButton, Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n  if (shouldFreeze) {\n    document.documentElement.style.scrollBehavior = 'unset';\n  } else {\n    document.documentElement.style.removeProperty('scroll-behavior');\n  }\n};\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard(open);\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  useEffect(() => {\n    freezeScroll(open);\n  }, [open]);\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n  const [floatingKey, setFloatingKey] = useState(0);\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <TransitionChild\n              as=\"div\"\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <TransitionChild\n                      ref={refs.setFloating}\n                      as=\"div\"\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </TransitionChild>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["freezeScroll","shouldFreeze","document","documentElement","style","scrollBehavior","removeProperty","BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","useEffect","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
+{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition, TransitionChild } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard(open);\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <TransitionChild\n              as=\"div\"\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <TransitionChild\n                      ref={refs.setFloating}\n                      as=\"div\"\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </TransitionChild>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}

package/build/inputs/_BottomSheet.mjs

@@ -3,38 +3,13 @@ import { Transition, TransitionChild } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useEffect, useState, Fragment as Fragment$1 } from 'react';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import { Size } from '../common/propsValues/size.mjs';
-import '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
+import { useState, Fragment as Fragment$1 } from 'react';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard.mjs';
 import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
+import { Size } from '../common/propsValues/size.mjs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-const freezeScroll = (shouldFreeze = true) => {
-  if (shouldFreeze) {
-    document.documentElement.style.scrollBehavior = 'unset';
-  } else {
-    document.documentElement.style.removeProperty('scroll-behavior');
-  }
-};
 function BottomSheet({
   open,
   renderTrigger,
@@ -57,9 +32,6 @@ function BottomSheet({
       }
     }
   });
-  useEffect(() => {
-    freezeScroll(open);
-  }, [open]);
   const dismiss = useDismiss(context);
   const role = useRole(context);
   const {

package/build/inputs/_BottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition, TransitionChild } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState, useEffect } from 'react';\n\nimport { CloseButton, Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n  if (shouldFreeze) {\n    document.documentElement.style.scrollBehavior = 'unset';\n  } else {\n    document.documentElement.style.removeProperty('scroll-behavior');\n  }\n};\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard(open);\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  useEffect(() => {\n    freezeScroll(open);\n  }, [open]);\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n  const [floatingKey, setFloatingKey] = useState(0);\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <TransitionChild\n              as=\"div\"\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <TransitionChild\n                      ref={refs.setFloating}\n                      as=\"div\"\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </TransitionChild>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["freezeScroll","shouldFreeze","document","documentElement","style","scrollBehavior","removeProperty","BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","useEffect","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
+{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition, TransitionChild } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard(open);\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <TransitionChild\n              as=\"div\"\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <TransitionChild\n                      ref={refs.setFloating}\n                      as=\"div\"\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </TransitionChild>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}

package/build/main.css

@@ -2574,7 +2574,6 @@ button.np-option {
 }
 .no-scroll {
   overflow: hidden;
-  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;
@@ -3840,38 +3839,35 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  height: 100vh;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
+  inset: 0px;
   bottom: env(keyboard-inset-height, 0px);
-  padding-top: 64px;
-  padding-top: var(--size-64);
-  padding-bottom: min(env(safe-area-inset-bottom, 16px));
-  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/prompt/ActionPrompt/ActionPrompt.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var React = require('react');
 var clsx = require('clsx');
 var StatusIcon = require('../../statusIcon/StatusIcon.js');
 var Body = require('../../body/Body.js');
@@ -26,7 +27,6 @@ require('../../common/propsValues/scroll.js');
 require('../../common/propsValues/markdownNodeType.js');
 require('../../common/fileType.js');
 var icons = require('@transferwise/icons');
-require('react');
 require('react-intl');
 require('../../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -40,17 +40,23 @@ const ActionPrompt = ({
   title,
   description,
   onDismiss,
-  media,
+  media = {},
   action,
   actionSecondary,
   id,
   className,
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': ariaLabel
 }) => {
   const isMobile = !useScreenSize.useScreenSize(breakpoint.Breakpoint.MEDIUM);
+  const mediaId = React.useId();
+  const titleId = React.useId();
+  const descId = React.useId();
+  const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, Boolean(ariaLabel) ? undefined : titleId].filter(Boolean).join(' ');
   const renderMedia = () => {
     if (media?.imgSrc) {
       return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
+        id: mediaId,
         src: media.imgSrc,
         className: "wds-action-prompt--media-image",
         alt: media['aria-label'] ?? ''
@@ -63,16 +69,24 @@ const ActionPrompt = ({
       return /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
         ...media.avatar,
         badge: badge,
+        "aria-label": media['aria-label'],
+        "aria-hidden": media['aria-hidden'],
+        id: mediaId,
         size: 48,
         children: media.avatar.asset
       });
     }
     return sentiment === 'proposition' ? /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+      id: mediaId,
       size: 48,
+      "aria-label": media['aria-label'],
+      "aria-hidden": media['aria-hidden'],
       children: /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {})
     }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+      id: mediaId,
       size: 48,
-      sentiment: sentiment
+      sentiment: sentiment,
+      iconLabel: Boolean(media['aria-hidden']) ? null : media['aria-label']
     });
   };
   return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
@@ -106,12 +120,21 @@ const ActionPrompt = ({
       })]
     }),
     onDismiss: onDismiss,
+    role: "region",
+    ...(Boolean(ariaLabel) ? {
+      'aria-label': ariaLabel
+    } : {
+      'aria-labelledby': ariaLabelledByIds,
+      'aria-describedby': descId
+    }),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: clsx.clsx('d-flex', 'flex-column', 'justify-content-center'),
       children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
+        id: titleId,
         type: typography.Typography.BODY_LARGE_BOLD,
         children: title
       }), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+        id: descId,
         children: description
       })]
     })

package/build/prompt/ActionPrompt/ActionPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media,\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView {...media.avatar} badge={badge} size={48}>\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView size={48}>\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon size={48} sentiment={sentiment} />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      onDismiss={onDismiss}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n        {description && <Body>{description}</Body>}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
+{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n    'aria-hidden'?: boolean;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    Boolean(ariaLabel) ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          id={mediaId}\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView\n          {...media.avatar}\n          badge={badge}\n          aria-label={media['aria-label']}\n          aria-hidden={media['aria-hidden']}\n          id={mediaId}\n          size={48}\n        >\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView\n        id={mediaId}\n        size={48}\n        aria-label={media['aria-label']}\n        aria-hidden={media['aria-hidden']}\n      >\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon\n        id={mediaId}\n        size={48}\n        sentiment={sentiment}\n        iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}\n      />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      onDismiss={onDismiss}\n      role=\"region\"\n      {...(Boolean(ariaLabel)\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>\n          {title}\n        </Body>\n        {description && <Body id={descId}>{description}</Body>}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","Boolean","filter","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}