stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useComponentContextIcons } from '../../context';\n\nexport type AvatarProps = {\n  /**\n   * Custom icon rendered when there is no image and no initials.\n   * @deprecated Use the `icons.IconUser` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconUser: ... } }}>`) instead.\n   * Passing this prop still wins over the context slot for backwards compatibility.\n   */\n  FallbackIcon?: ComponentType<ComponentPropsWithoutRef<'svg'>>;\n  /** URL of the avatar image */\n  imageUrl?: string;\n  /** Name of the user (first and last name), used for avatar image alt text and title fallback */\n  userName?: string;\n  /**\n   * Initials that are used directly instead of generating intials from `userName` property.\n   * @note Providing more than two characters will break the default UI.\n   */\n  initials?: string;\n  /** Online status indicator, not rendered if not of type boolean */\n  isOnline?: boolean;\n  size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}) | null;\n} & ComponentPropsWithoutRef<'div'>;\n\nconst getInitials = (name?: string) => {\n  const regex = /(\\p{L}{1})\\p{L}+/gu;\n\n  if (!name || name.trim().length === 0) {\n    return '';\n  }\n\n  const initials = Array.from(name?.matchAll(regex) || []);\n\n  if (!initials.length) {\n    return '';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const startInitial = initials.at(0)![1];\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const endInitial = initials.length > 1 ? initials.at(-1)![1] : '';\n\n  return `${startInitial}${endInitial}`;\n};\n\n/**\n * A round avatar image with fallback to username's first letter\n */\nexport const Avatar = ({\n  className,\n  FallbackIcon,\n  imageUrl,\n  initials: customInitials,\n  isOnline,\n  size,\n  userName,\n  ...rest\n}: AvatarProps) => {\n  const { IconUser } = useComponentContextIcons();\n  const ResolvedFallbackIcon = FallbackIcon ?? IconUser;\n  const [error, setError] = useState(false);\n\n  useEffect(() => () => setError(false), [imageUrl]);\n\n  const nameString = userName?.toString().trim() || '';\n\n  const sizeAwareInitials = useMemo(() => {\n    const initials = customInitials || getInitials(nameString);\n\n    if (size === 'sm' || size === 'xs') {\n      return initials.charAt(0);\n    }\n\n    return initials;\n  }, [nameString, size, customInitials]);\n\n  const showImage = typeof imageUrl === 'string' && imageUrl && !error;\n\n  return (\n    <div\n      className={clsx(`str-chat__avatar`, className, {\n        'str-chat__avatar--multiple-letters': sizeAwareInitials.length > 1,\n        'str-chat__avatar--no-letters': !sizeAwareInitials.length,\n        'str-chat__avatar--one-letter': sizeAwareInitials.length === 1,\n        [`str-chat__avatar--size-${size}`]: typeof size === 'string',\n      })}\n      data-testid='avatar'\n      role='button'\n      title={userName}\n      {...rest}\n    >\n      {typeof isOnline === 'boolean' && (\n        <div\n          className={clsx('str-chat__avatar-status-badge', {\n            'str-chat__avatar-status-badge--offline': !isOnline,\n            'str-chat__avatar-status-badge--online': isOnline,\n          })}\n        />\n      )}\n      {showImage ? (\n        <img\n          alt={nameString}\n          className='str-chat__avatar-image'\n          data-testid='avatar-img'\n          onError={() => setError(true)}\n          src={imageUrl}\n        />\n      ) : (\n        <>\n          {!!sizeAwareInitials.length && (\n            <div className='str-chat__avatar-initials' data-testid='avatar-fallback'>\n              {sizeAwareInitials}\n            </div>\n          )}\n          {!sizeAwareInitials.length && <ResolvedFallbackIcon />}\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AA+BA,IAAM,eAAe,SAAkB;CACrC,MAAM,QAAQ;CAEd,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,WAAW,GAClC,OAAO;CAGT,MAAM,WAAW,MAAM,KAAK,MAAM,SAAS,KAAK,KAAK,CAAC,CAAC;CAEvD,IAAI,CAAC,SAAS,QACZ,OAAO;CAQT,OAAO,GAJc,SAAS,GAAG,CAAC,CAAC,CAAE,KAElB,SAAS,SAAS,IAAI,SAAS,GAAG,EAAE,CAAC,CAAE,KAAK;AAGjE;;;;AAKA,IAAa,UAAU,EACrB,WACA,cACA,UACA,UAAU,gBACV,UACA,MACA,UACA,GAAG,WACc;CACjB,MAAM,EAAE,aAAa,yBAAyB;CAC9C,MAAM,uBAAuB,gBAAgB;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAExC,sBAAsB,SAAS,KAAK,GAAG,CAAC,QAAQ,CAAC;CAEjD,MAAM,aAAa,UAAU,SAAS,CAAC,CAAC,KAAK,KAAK;CAElD,MAAM,oBAAoB,cAAc;EACtC,MAAM,WAAW,kBAAkB,YAAY,UAAU;EAEzD,IAAI,SAAS,QAAQ,SAAS,MAC5B,OAAO,SAAS,OAAO,CAAC;EAG1B,OAAO;CACT,GAAG;EAAC;EAAY;EAAM;CAAc,CAAC;CAErC,MAAM,YAAY,OAAO,aAAa,YAAY,YAAY,CAAC;CAE/D,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,oBAAoB,WAAW;GAC7C,sCAAsC,kBAAkB,SAAS;GACjE,gCAAgC,CAAC,kBAAkB;GACnD,gCAAgC,kBAAkB,WAAW;IAC5D,0BAA0B,SAAS,OAAO,SAAS;EACtD,CAAC;EACD,eAAY;EACZ,MAAK;EACL,OAAO;EACP,GAAI;YAVN,CAYG,OAAO,aAAa,aACnB,oBAAC,OAAD,EACE,WAAW,KAAK,iCAAiC;GAC/C,0CAA0C,CAAC;GAC3C,yCAAyC;EAC3C,CAAC,EACF,CAAA,GAEF,YACC,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,eAAY;GACZ,eAAe,SAAS,IAAI;GAC5B,KAAK;EACN,CAAA,IAED,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,CAAC,kBAAkB,UACnB,oBAAC,OAAD;GAAK,WAAU;GAA4B,eAAY;aACpD;EACE,CAAA,GAEN,CAAC,kBAAkB,UAAU,oBAAC,sBAAD,CAAuB,CAAA,CACrD,EAAA,CAAA,CAED;;AAET"}
+{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useComponentContextIcons } from '../../context';\n\nexport type AvatarProps = {\n  /** Custom icon rendered when there is no image and no initials */\n  FallbackIcon?: ComponentType<ComponentPropsWithoutRef<'svg'>>;\n  /** URL of the avatar image */\n  imageUrl?: string;\n  /** Name of the user (first and last name), used for avatar image alt text and title fallback */\n  userName?: string;\n  /**\n   * Initials that are used directly instead of generating intials from `userName` property.\n   * @note Providing more than two characters will break the default UI.\n   */\n  initials?: string;\n  /** Online status indicator, not rendered if not of type boolean */\n  isOnline?: boolean;\n  size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}) | null;\n} & ComponentPropsWithoutRef<'div'>;\n\nconst getInitials = (name?: string) => {\n  const regex = /(\\p{L}{1})\\p{L}+/gu;\n\n  if (!name || name.trim().length === 0) {\n    return '';\n  }\n\n  const initials = Array.from(name?.matchAll(regex) || []);\n\n  if (!initials.length) {\n    return '';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const startInitial = initials.at(0)![1];\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const endInitial = initials.length > 1 ? initials.at(-1)![1] : '';\n\n  return `${startInitial}${endInitial}`;\n};\n\n/**\n * A round avatar image with fallback to username's first letter\n */\nexport const Avatar = ({\n  className,\n  FallbackIcon,\n  imageUrl,\n  initials: customInitials,\n  isOnline,\n  size,\n  userName,\n  ...rest\n}: AvatarProps) => {\n  const { IconUser } = useComponentContextIcons();\n  // The prop still wins over the context slot: it targets one avatar, the slot rebrands all of them.\n  const ResolvedFallbackIcon = FallbackIcon ?? IconUser;\n  const [error, setError] = useState(false);\n\n  useEffect(() => () => setError(false), [imageUrl]);\n\n  const nameString = userName?.toString().trim() || '';\n\n  const sizeAwareInitials = useMemo(() => {\n    const initials = customInitials || getInitials(nameString);\n\n    if (size === 'sm' || size === 'xs') {\n      return initials.charAt(0);\n    }\n\n    return initials;\n  }, [nameString, size, customInitials]);\n\n  const showImage = typeof imageUrl === 'string' && imageUrl && !error;\n\n  return (\n    <div\n      className={clsx(`str-chat__avatar`, className, {\n        'str-chat__avatar--multiple-letters': sizeAwareInitials.length > 1,\n        'str-chat__avatar--no-letters': !sizeAwareInitials.length,\n        'str-chat__avatar--one-letter': sizeAwareInitials.length === 1,\n        [`str-chat__avatar--size-${size}`]: typeof size === 'string',\n      })}\n      data-testid='avatar'\n      role='button'\n      title={userName}\n      {...rest}\n    >\n      {typeof isOnline === 'boolean' && (\n        <div\n          className={clsx('str-chat__avatar-status-badge', {\n            'str-chat__avatar-status-badge--offline': !isOnline,\n            'str-chat__avatar-status-badge--online': isOnline,\n          })}\n        />\n      )}\n      {showImage ? (\n        <img\n          alt={nameString}\n          className='str-chat__avatar-image'\n          data-testid='avatar-img'\n          onError={() => setError(true)}\n          src={imageUrl}\n        />\n      ) : (\n        <>\n          {!!sizeAwareInitials.length && (\n            <div className='str-chat__avatar-initials' data-testid='avatar-fallback'>\n              {sizeAwareInitials}\n            </div>\n          )}\n          {!sizeAwareInitials.length && <ResolvedFallbackIcon />}\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AA2BA,IAAM,eAAe,SAAkB;CACrC,MAAM,QAAQ;CAEd,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,WAAW,GAClC,OAAO;CAGT,MAAM,WAAW,MAAM,KAAK,MAAM,SAAS,KAAK,KAAK,CAAC,CAAC;CAEvD,IAAI,CAAC,SAAS,QACZ,OAAO;CAQT,OAAO,GAJc,SAAS,GAAG,CAAC,CAAC,CAAE,KAElB,SAAS,SAAS,IAAI,SAAS,GAAG,EAAE,CAAC,CAAE,KAAK;AAGjE;;;;AAKA,IAAa,UAAU,EACrB,WACA,cACA,UACA,UAAU,gBACV,UACA,MACA,UACA,GAAG,WACc;CACjB,MAAM,EAAE,aAAa,yBAAyB;CAE9C,MAAM,uBAAuB,gBAAgB;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAExC,sBAAsB,SAAS,KAAK,GAAG,CAAC,QAAQ,CAAC;CAEjD,MAAM,aAAa,UAAU,SAAS,CAAC,CAAC,KAAK,KAAK;CAElD,MAAM,oBAAoB,cAAc;EACtC,MAAM,WAAW,kBAAkB,YAAY,UAAU;EAEzD,IAAI,SAAS,QAAQ,SAAS,MAC5B,OAAO,SAAS,OAAO,CAAC;EAG1B,OAAO;CACT,GAAG;EAAC;EAAY;EAAM;CAAc,CAAC;CAErC,MAAM,YAAY,OAAO,aAAa,YAAY,YAAY,CAAC;CAE/D,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,oBAAoB,WAAW;GAC7C,sCAAsC,kBAAkB,SAAS;GACjE,gCAAgC,CAAC,kBAAkB;GACnD,gCAAgC,kBAAkB,WAAW;IAC5D,0BAA0B,SAAS,OAAO,SAAS;EACtD,CAAC;EACD,eAAY;EACZ,MAAK;EACL,OAAO;EACP,GAAI;YAVN,CAYG,OAAO,aAAa,aACnB,oBAAC,OAAD,EACE,WAAW,KAAK,iCAAiC;GAC/C,0CAA0C,CAAC;GAC3C,yCAAyC;EAC3C,CAAC,EACF,CAAA,GAEF,YACC,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,eAAY;GACZ,eAAe,SAAS,IAAI;GAC5B,KAAK;EACN,CAAA,IAED,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,CAAC,kBAAkB,UACnB,oBAAC,OAAD;GAAK,WAAU;GAA4B,eAAY;aACpD;EACE,CAAA,GAEN,CAAC,kBAAkB,UAAU,oBAAC,sBAAD,CAAuB,CAAA,CACrD,EAAA,CAAA,CAED;;AAET"}

package/dist/es/components/Avatar/AvatarStack.mjs

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Avatar/AvatarStack.tsx
 function AvatarStack({ badgeSize, capLimit = 3, component: Component = "div", displayInfo = [], size }) {
-	const { Avatar: Avatar$1 = Avatar } = useComponentContext(AvatarStack.name);
+	const { Avatar: Avatar$1 = Avatar } = useComponentContext();
 	const displayInfoToRender = useMemo(() => displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo, [displayInfo, capLimit]);
 	const overflowCount = displayInfo.length - displayInfoToRender.length;
 	if (!displayInfo.length) return null;

package/dist/es/components/Avatar/AvatarStack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.mjs","names":[],"sources":["../../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["import React, { type ComponentProps, type ElementType, useMemo } from 'react';\nimport { useComponentContext } from '../../context';\nimport { type AvatarProps, Avatar as DefaultAvatar } from './Avatar';\nimport clsx from 'clsx';\nimport { Badge, type BadgeSize } from '../Badge';\n\nexport function AvatarStack({\n  badgeSize,\n  capLimit = 3,\n  component: Component = 'div',\n  displayInfo = [],\n  size,\n}: {\n  component?: ElementType;\n  displayInfo?: (Pick<AvatarProps, 'imageUrl' | 'userName'> & { id?: string })[];\n  size: 'md' | 'sm' | 'xs' | null;\n  badgeSize?: BadgeSize;\n  capLimit?: number;\n}) {\n  const { Avatar = DefaultAvatar } = useComponentContext(AvatarStack.name);\n\n  const displayInfoToRender = useMemo(\n    () => (displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo),\n    [displayInfo, capLimit],\n  );\n  const overflowCount = displayInfo.length - displayInfoToRender.length;\n\n  if (!displayInfo.length) {\n    return null;\n  }\n\n  return (\n    <Component\n      className={clsx('str-chat__avatar-stack', {\n        [`str-chat__avatar-stack--size-${size}`]: typeof size === 'string',\n      })}\n      data-testid='avatar-stack'\n    >\n      {displayInfoToRender.map((info, index) => (\n        <Avatar\n          imageUrl={info.imageUrl}\n          key={info.id ?? `${info.userName}-${info.imageUrl}-${index}`}\n          size={size}\n          userName={info.userName}\n        />\n      ))}\n      {typeof overflowCount === 'number' && overflowCount > 0 && (\n        <Badge\n          className='str-chat__avatar-stack__count-badge'\n          data-testid='avatar-stack-count-badge'\n          size={badgeSize ?? size}\n          variant='counter'\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </Component>\n  );\n}\n\nexport type AvatarStackProps = ComponentProps<typeof AvatarStack>;\n"],"mappings":";;;;;;;AAMA,SAAgB,YAAY,EAC1B,WACA,WAAW,GACX,WAAW,YAAY,OACvB,cAAc,CAAC,GACf,QAOC;CACD,MAAM,EAAE,QAAA,WAAS,WAAkB,oBAAoB,YAAY,IAAI;CAEvE,MAAM,sBAAsB,cACnB,YAAY,SAAS,WAAW,YAAY,MAAM,GAAG,QAAQ,IAAI,aACxE,CAAC,aAAa,QAAQ,CACxB;CACA,MAAM,gBAAgB,YAAY,SAAS,oBAAoB;CAE/D,IAAI,CAAC,YAAY,QACf,OAAO;CAGT,OACE,qBAAC,WAAD;EACE,WAAW,KAAK,0BAA0B,GACvC,gCAAgC,SAAS,OAAO,SAAS,SAC5D,CAAC;EACD,eAAY;YAJd,CAMG,oBAAoB,KAAK,MAAM,UAC9B,oBAAC,UAAD;GACE,UAAU,KAAK;GAET;GACN,UAAU,KAAK;EAChB,GAHM,KAAK,MAAM,GAAG,KAAK,SAAS,GAAG,KAAK,SAAS,GAAG,OAGtD,CACF,GACA,OAAO,kBAAkB,YAAY,gBAAgB,KACpD,qBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,MAAM,aAAa;GACnB,SAAQ;aAJV,CAKC,KACG,aACG;IAEA;;AAEf"}
+{"version":3,"file":"AvatarStack.mjs","names":[],"sources":["../../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["import React, { type ComponentProps, type ElementType, useMemo } from 'react';\nimport { useComponentContext } from '../../context';\nimport { type AvatarProps, Avatar as DefaultAvatar } from './Avatar';\nimport clsx from 'clsx';\nimport { Badge, type BadgeSize } from '../Badge';\n\nexport function AvatarStack({\n  badgeSize,\n  capLimit = 3,\n  component: Component = 'div',\n  displayInfo = [],\n  size,\n}: {\n  component?: ElementType;\n  displayInfo?: (Pick<AvatarProps, 'imageUrl' | 'userName'> & { id?: string })[];\n  size: 'md' | 'sm' | 'xs' | null;\n  badgeSize?: BadgeSize;\n  capLimit?: number;\n}) {\n  const { Avatar = DefaultAvatar } = useComponentContext();\n\n  const displayInfoToRender = useMemo(\n    () => (displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo),\n    [displayInfo, capLimit],\n  );\n  const overflowCount = displayInfo.length - displayInfoToRender.length;\n\n  if (!displayInfo.length) {\n    return null;\n  }\n\n  return (\n    <Component\n      className={clsx('str-chat__avatar-stack', {\n        [`str-chat__avatar-stack--size-${size}`]: typeof size === 'string',\n      })}\n      data-testid='avatar-stack'\n    >\n      {displayInfoToRender.map((info, index) => (\n        <Avatar\n          imageUrl={info.imageUrl}\n          key={info.id ?? `${info.userName}-${info.imageUrl}-${index}`}\n          size={size}\n          userName={info.userName}\n        />\n      ))}\n      {typeof overflowCount === 'number' && overflowCount > 0 && (\n        <Badge\n          className='str-chat__avatar-stack__count-badge'\n          data-testid='avatar-stack-count-badge'\n          size={badgeSize ?? size}\n          variant='counter'\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </Component>\n  );\n}\n\nexport type AvatarStackProps = ComponentProps<typeof AvatarStack>;\n"],"mappings":";;;;;;;AAMA,SAAgB,YAAY,EAC1B,WACA,WAAW,GACX,WAAW,YAAY,OACvB,cAAc,CAAC,GACf,QAOC;CACD,MAAM,EAAE,QAAA,WAAS,WAAkB,oBAAoB;CAEvD,MAAM,sBAAsB,cACnB,YAAY,SAAS,WAAW,YAAY,MAAM,GAAG,QAAQ,IAAI,aACxE,CAAC,aAAa,QAAQ,CACxB;CACA,MAAM,gBAAgB,YAAY,SAAS,oBAAoB;CAE/D,IAAI,CAAC,YAAY,QACf,OAAO;CAGT,OACE,qBAAC,WAAD;EACE,WAAW,KAAK,0BAA0B,GACvC,gCAAgC,SAAS,OAAO,SAAS,SAC5D,CAAC;EACD,eAAY;YAJd,CAMG,oBAAoB,KAAK,MAAM,UAC9B,oBAAC,UAAD;GACE,UAAU,KAAK;GAET;GACN,UAAU,KAAK;EAChB,GAHM,KAAK,MAAM,GAAG,KAAK,SAAS,GAAG,KAAK,SAAS,GAAG,OAGtD,CACF,GACA,OAAO,kBAAkB,YAAY,gBAAgB,KACpD,qBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,MAAM,aAAa;GACnB,SAAQ;aAJV,CAKC,KACG,aACG;IAEA;;AAEf"}

package/dist/es/components/Badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":[],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons } from '../../context';\n\nexport type BadgeVariant =\n  | 'default'\n  | 'primary'\n  | 'error'\n  | 'neutral'\n  | 'counter'\n  | 'inverse';\n\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | null;\n\nexport type BadgeProps = ComponentProps<'div'> & {\n  /** Visual variant mapping to design tokens */\n  variant?: BadgeVariant;\n  /** Size preset (typography and padding) */\n  size?: BadgeSize;\n};\n\n/**\n * Compact pill/circle badge for counts and labels.\n * Uses design tokens: --badge-bg-*, --badge-text-*, --badge-border.\n */\nexport const Badge = ({\n  children,\n  className,\n  size = 'md',\n  variant = 'default',\n  ...spanProps\n}: BadgeProps) => (\n  <div\n    {...spanProps}\n    className={clsx(\n      'str-chat__badge',\n      `str-chat__badge--variant-${variant}`,\n      { [`str-chat__badge--size-${size}`]: size },\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport const ErrorBadge = ({\n  className,\n  size = 'sm',\n  ...rest\n}: Omit<BadgeProps, 'variant'>) => {\n  const { IconExclamationMarkFill } = useComponentContextIcons();\n  return (\n    <Badge {...rest} className={className} size={size} variant='error'>\n      <IconExclamationMarkFill />\n    </Badge>\n  );\n};\n"],"mappings":";;;;;;;;;AAyBA,IAAa,SAAS,EACpB,UACA,WACA,OAAO,MACP,UAAU,WACV,GAAG,gBAEH,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,KACT,mBACA,4BAA4B,WAC5B,GAAG,yBAAyB,SAAS,KAAK,GAC1C,SACF;CAEC;AACE,CAAA;AAGP,IAAa,cAAc,EACzB,WACA,OAAO,MACP,GAAG,WAC8B;CACjC,MAAM,EAAE,4BAA4B,yBAAyB;CAC7D,OACE,oBAAC,OAAD;EAAO,GAAI;EAAiB;EAAiB;EAAM,SAAQ;YACzD,oBAAC,yBAAD,CAA0B,CAAA;CACrB,CAAA;AAEX"}
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons } from '../../context';\n\nexport type BadgeVariant =\n  | 'default'\n  | 'primary'\n  | 'error'\n  | 'neutral'\n  | 'counter'\n  | 'inverse';\n\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | null;\n\nexport type BadgeProps = ComponentProps<'div'> & {\n  /** Visual variant mapping to design tokens */\n  variant?: BadgeVariant;\n  /** Size preset (typography and padding) */\n  size?: BadgeSize;\n};\n\n/**\n * Compact pill/circle badge for counts and labels.\n * Uses design tokens: --badge-bg-*, --badge-text-*, --badge-border.\n */\nexport const Badge = ({\n  children,\n  className,\n  size = 'md',\n  variant = 'default',\n  ...spanProps\n}: BadgeProps) => (\n  <div\n    {...spanProps}\n    className={clsx(\n      'str-chat__badge',\n      `str-chat__badge--variant-${variant}`,\n      { [`str-chat__badge--size-${size}`]: size },\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport const ErrorBadge = ({\n  className,\n  size = 'sm',\n  ...rest\n}: Omit<BadgeProps, 'variant'>) => {\n  const { IconExclamationMarkFill } = useComponentContextIcons();\n\n  return (\n    <Badge {...rest} className={className} size={size} variant='error'>\n      <IconExclamationMarkFill />\n    </Badge>\n  );\n};\n"],"mappings":";;;;;;;;;AAyBA,IAAa,SAAS,EACpB,UACA,WACA,OAAO,MACP,UAAU,WACV,GAAG,gBAEH,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,KACT,mBACA,4BAA4B,WAC5B,GAAG,yBAAyB,SAAS,KAAK,GAC1C,SACF;CAEC;AACE,CAAA;AAGP,IAAa,cAAc,EACzB,WACA,OAAO,MACP,GAAG,WAC8B;CACjC,MAAM,EAAE,4BAA4B,yBAAyB;CAE7D,OACE,oBAAC,OAAD;EAAO,GAAI;EAAiB;EAAiB;EAAM,SAAQ;YACzD,oBAAC,yBAAD,CAA0B,CAAA;CACrB,CAAA;AAEX"}

package/dist/es/components/Badge/MediaBadge.mjs

@@ -9,9 +9,10 @@ var MediaBadge = ({ attachment, variant }) => {
 		video: IconVideoFill,
 		voiceRecording: IconMicrophoneSolid
 	}[variant];
+	const { duration } = attachment.custom ?? {};
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("str-chat__media-badge", { [`str-chat__media-badge--${variant}`]: variant }),
-		children: [Icon && /* @__PURE__ */ jsx(Icon, {}), attachment.duration ? /* @__PURE__ */ jsx("div", { children: attachment.duration }) : null]
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {}), duration ? /* @__PURE__ */ jsx("div", { children: duration }) : null]
 	});
 };
 //#endregion

package/dist/es/components/Badge/MediaBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBadge.mjs","names":[],"sources":["../../../../src/components/Badge/MediaBadge.tsx"],"sourcesContent":["import { useComponentContextIcons } from '../../context';\nimport React, { type ComponentType } from 'react';\nimport type { LocalAttachment } from 'stream-chat';\nimport clsx from 'clsx';\n\nexport type MediaBadgeVariant = 'video' | 'voice-recording' | string;\n\nexport type MediaBadgeProps = {\n  attachment: LocalAttachment;\n  variant: 'video' | 'voice-recording' | string;\n};\n\nexport const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {\n  const { IconMicrophoneSolid, IconVideoFill } = useComponentContextIcons();\n\n  const mediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {\n    video: IconVideoFill,\n    voiceRecording: IconMicrophoneSolid,\n  };\n\n  const Icon = mediaBadgeVariantToIcon[variant];\n  return (\n    <div\n      className={clsx('str-chat__media-badge', {\n        [`str-chat__media-badge--${variant}`]: variant,\n      })}\n    >\n      {Icon && <Icon />}\n      {attachment.duration ? <div>{attachment.duration}</div> : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAYA,IAAa,cAAc,EAAE,YAAY,cAA+B;CACtE,MAAM,EAAE,qBAAqB,kBAAkB,yBAAyB;CAOxE,MAAM,OAAO;EAJX,OAAO;EACP,gBAAgB;CAGL,EAAwB;CACrC,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,yBAAyB,GACtC,0BAA0B,YAAY,QACzC,CAAC;YAHH,CAKG,QAAQ,oBAAC,MAAD,CAAO,CAAA,GACf,WAAW,WAAW,oBAAC,OAAD,EAAA,UAAM,WAAW,SAAc,CAAA,IAAI,IACvD;;AAET"}
+{"version":3,"file":"MediaBadge.mjs","names":[],"sources":["../../../../src/components/Badge/MediaBadge.tsx"],"sourcesContent":["import { useComponentContextIcons } from '../../context';\nimport React, { type ComponentType } from 'react';\nimport type { LocalAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';\nimport clsx from 'clsx';\n\nexport type MediaBadgeVariant = 'video' | 'voice-recording' | string;\n\nexport type MediaBadgeProps = {\n  attachment: LocalAttachment;\n  variant: 'video' | 'voice-recording' | string;\n};\n\nexport const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {\n  const { IconMicrophoneSolid, IconVideoFill } = useComponentContextIcons();\n\n  const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {\n    video: IconVideoFill,\n    voiceRecording: IconMicrophoneSolid,\n  };\n\n  const Icon = MediaBadgeVariantToIcon[variant];\n  const { duration } = (attachment as LocalVoiceRecordingAttachment).custom ?? {};\n  return (\n    <div\n      className={clsx('str-chat__media-badge', {\n        [`str-chat__media-badge--${variant}`]: variant,\n      })}\n    >\n      {Icon && <Icon />}\n      {duration ? <div>{duration}</div> : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAYA,IAAa,cAAc,EAAE,YAAY,cAA+B;CACtE,MAAM,EAAE,qBAAqB,kBAAkB,yBAAyB;CAOxE,MAAM,OAAO;EAJX,OAAO;EACP,gBAAgB;CAGL,EAAwB;CACrC,MAAM,EAAE,aAAc,WAA6C,UAAU,CAAC;CAC9E,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,yBAAyB,GACtC,0BAA0B,YAAY,QACzC,CAAC;YAHH,CAKG,QAAQ,oBAAC,MAAD,CAAO,CAAA,GACf,WAAW,oBAAC,OAAD,EAAA,UAAM,SAAc,CAAA,IAAI,IACjC;;AAET"}

package/dist/es/components/BaseImage/ImagePlaceholder.mjs

@@ -1,14 +1,14 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/BaseImage/ImagePlaceholder.tsx
 var ImagePlaceholder = ({ className }) => {
-	const { IconImage } = useComponentContextIcons();
 	const { t } = useTranslationContext();
+	const { IconImage } = useComponentContextIcons();
 	return /* @__PURE__ */ jsx("div", {
-		"aria-label": t("aria/Image failed to load"),
+		"aria-label": t("baseImage.imagePlaceholder.imageFailedLoad.ariaLabel", "Image failed to load"),
 		className: clsx("str-chat__image-placeholder", className),
 		"data-testid": "str-chat__base-image-placeholder",
 		role: "img",

package/dist/es/components/BaseImage/ImagePlaceholder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePlaceholder.mjs","names":[],"sources":["../../../../src/components/BaseImage/ImagePlaceholder.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useComponentContextIcons } from '../../context';\n\nexport type ImagePlaceholderProps = {\n  className?: string;\n};\n\nexport const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {\n  const { IconImage } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  return (\n    <div\n      aria-label={t('aria/Image failed to load')}\n      className={clsx('str-chat__image-placeholder', className)}\n      data-testid='str-chat__base-image-placeholder'\n      role='img'\n    >\n      <IconImage />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,IAAa,oBAAoB,EAAE,gBAAuC;CACxE,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,OAAD;EACE,cAAY,EAAE,2BAA2B;EACzC,WAAW,KAAK,+BAA+B,SAAS;EACxD,eAAY;EACZ,MAAK;YAEL,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}
+{"version":3,"file":"ImagePlaceholder.mjs","names":[],"sources":["../../../../src/components/BaseImage/ImagePlaceholder.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useComponentContextIcons } from '../../context';\n\nexport type ImagePlaceholderProps = {\n  className?: string;\n};\n\nexport const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {\n  const { t } = useTranslationContext();\n  const { IconImage } = useComponentContextIcons();\n\n  return (\n    <div\n      aria-label={t(\n        'baseImage.imagePlaceholder.imageFailedLoad.ariaLabel',\n        'Image failed to load',\n      )}\n      className={clsx('str-chat__image-placeholder', className)}\n      data-testid='str-chat__base-image-placeholder'\n      role='img'\n    >\n      <IconImage />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,IAAa,oBAAoB,EAAE,gBAAuC;CACxE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,OACE,oBAAC,OAAD;EACE,cAAY,EACV,wDACA,sBACF;EACA,WAAW,KAAK,+BAA+B,SAAS;EACxD,eAAY;EACZ,MAAK;YAEL,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}

package/dist/es/components/Button/PlayButton.mjs

@@ -1,16 +1,16 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "./Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Button/PlayButton.tsx
 var PlayButton = ({ className, isPlaying, ...props }) => {
-	const { IconPauseFill, IconPlayFill } = useComponentContextIcons();
 	const { t } = useTranslationContext();
+	const { IconPauseFill, IconPlayFill } = useComponentContextIcons();
 	return /* @__PURE__ */ jsx(Button, {
 		appearance: "outline",
-		"aria-label": isPlaying ? t("aria/Pause") : t("aria/Play"),
+		"aria-label": isPlaying ? t("common.pause.ariaLabel", "Pause") : t("common.play.ariaLabel", "Play"),
 		circular: true,
 		className: clsx("str-chat__button-play", className),
 		"data-testid": isPlaying ? "pause-audio" : "play-audio",

package/dist/es/components/Button/PlayButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PlayButton.mjs","names":[],"sources":["../../../../src/components/Button/PlayButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from './Button';\nimport type { ComponentProps } from 'react';\nimport clsx from 'clsx';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type PlayButtonProps = ComponentProps<'button'> & {\n  isPlaying: boolean;\n};\n\nexport const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => {\n  const { IconPauseFill, IconPlayFill } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  return (\n    <Button\n      appearance='outline'\n      aria-label={isPlaying ? t('aria/Pause') : t('aria/Play')}\n      circular\n      className={clsx('str-chat__button-play', className)}\n      data-testid={isPlaying ? 'pause-audio' : 'play-audio'}\n      size='sm'\n      variant='secondary'\n      {...props}\n    >\n      {isPlaying ? <IconPauseFill /> : <IconPlayFill />}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,cAAc,EAAE,WAAW,WAAW,GAAG,YAA6B;CACjF,MAAM,EAAE,eAAe,iBAAiB,yBAAyB;CAEjE,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,YAAY,EAAE,YAAY,IAAI,EAAE,WAAW;EACvD,UAAA;EACA,WAAW,KAAK,yBAAyB,SAAS;EAClD,eAAa,YAAY,gBAAgB;EACzC,MAAK;EACL,SAAQ;EACR,GAAI;YAEH,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,cAAD,CAAe,CAAA;CAC1C,CAAA;AAEZ"}
+{"version":3,"file":"PlayButton.mjs","names":[],"sources":["../../../../src/components/Button/PlayButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from './Button';\nimport type { ComponentProps } from 'react';\nimport clsx from 'clsx';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type PlayButtonProps = ComponentProps<'button'> & {\n  isPlaying: boolean;\n};\n\nexport const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => {\n  const { t } = useTranslationContext();\n  const { IconPauseFill, IconPlayFill } = useComponentContextIcons();\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={\n        isPlaying\n          ? t('common.pause.ariaLabel', 'Pause')\n          : t('common.play.ariaLabel', 'Play')\n      }\n      circular\n      className={clsx('str-chat__button-play', className)}\n      data-testid={isPlaying ? 'pause-audio' : 'play-audio'}\n      size='sm'\n      variant='secondary'\n      {...props}\n    >\n      {isPlaying ? <IconPauseFill /> : <IconPlayFill />}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,cAAc,EAAE,WAAW,WAAW,GAAG,YAA6B;CACjF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,eAAe,iBAAiB,yBAAyB;CAEjE,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cACE,YACI,EAAE,0BAA0B,OAAO,IACnC,EAAE,yBAAyB,MAAM;EAEvC,UAAA;EACA,WAAW,KAAK,yBAAyB,SAAS;EAClD,eAAa,YAAY,gBAAgB;EACzC,MAAK;EACL,SAAQ;EACR,GAAI;YAEH,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,cAAD,CAAe,CAAA;CAC1C,CAAA;AAEZ"}

package/dist/es/components/Button/WorkspaceNavigationButtons.mjs

@@ -0,0 +1,94 @@
+import { useChannelInstanceContext } from "../../context/ChannelInstanceContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useCloseThread } from "../Threads/hooks/useCloseThread.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "./Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useWorkspaceNavigation, useWorkspacePanel } from "../../context/WorkspaceNavigationContext.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Button/WorkspaceNavigationButtons.tsx
+/**
+* Steps back from the channel or thread whose header renders it: removes it from its panel,
+* revealing what it is stacked over. Renders nothing when there is nothing beneath.
+*/
+var WorkspaceNavigationBackButton = () => {
+	const { IconArrowLeft } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { canGoBack, goBack } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	const thread = useThreadContext();
+	const { channel } = useChannelInstanceContext();
+	const key = thread ? thread.id : channel?.cid;
+	if (key === void 0 || !canGoBack(key, panel)) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("common.back.label", "Back"),
+		circular: true,
+		className: thread ? "str-chat__thread-header__back-button" : "str-chat__channel-header__back-button",
+		"data-testid": thread ? "thread-header-back-button" : "channel-header-back-button",
+		onClick: (event) => goBack(key, {
+			event,
+			panel
+		}),
+		size: "md",
+		variant: "secondary",
+		children: /* @__PURE__ */ jsx(IconArrowLeft, {})
+	});
+};
+var CloseThreadButton = () => {
+	const { IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { isThreadDismissable } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	const thread = useThreadContext();
+	const closeThread = useCloseThread();
+	if (!isThreadDismissable(thread?.id, panel)) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("thread.header.closeThread.ariaLabel", "Close thread"),
+		circular: true,
+		className: "str-chat__close-thread-button",
+		"data-testid": "close-thread-button",
+		onClick: (event) => closeThread({ event }),
+		size: "md",
+		variant: "secondary",
+		children: /* @__PURE__ */ jsx(IconXmark, {})
+	});
+};
+var CloseChannelButton = ({ cid }) => {
+	const { IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { closeChannel, isChannelDismissable } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	if (!isChannelDismissable(cid, panel)) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("channelHeader.closeChannel.ariaLabel", "Close channel"),
+		circular: true,
+		className: "str-chat__close-channel-button",
+		"data-testid": "close-channel-button",
+		onClick: (event) => closeChannel(cid, {
+			event,
+			panel
+		}),
+		size: "md",
+		variant: "secondary",
+		children: /* @__PURE__ */ jsx(IconXmark, {})
+	});
+};
+/**
+* Closes the whole panel of the channel or thread whose header renders it, with everything stacked
+* in it. Renders nothing for a panel that cannot be dismissed, such as the primary channel.
+*/
+var WorkspaceNavigationCloseButton = () => {
+	const thread = useThreadContext();
+	const { channel } = useChannelInstanceContext();
+	if (thread) return /* @__PURE__ */ jsx(CloseThreadButton, {});
+	if (channel?.cid) return /* @__PURE__ */ jsx(CloseChannelButton, { cid: channel.cid });
+	return null;
+};
+//#endregion
+export { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton };
+
+//# sourceMappingURL=WorkspaceNavigationButtons.mjs.map

package/dist/es/components/Button/WorkspaceNavigationButtons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceNavigationButtons.mjs","names":[],"sources":["../../../../src/components/Button/WorkspaceNavigationButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  useChannelInstanceContext,\n  useComponentContextIcons,\n  useTranslationContext,\n  useWorkspaceNavigation,\n  useWorkspacePanel,\n} from '../../context';\nimport { Button } from './Button';\nimport { useThreadContext } from '../Threads/ThreadContext';\nimport { useCloseThread } from '../Threads/hooks/useCloseThread';\n\n// The header these buttons sit in belongs to the thread in context when there is one (a thread\n// panel), otherwise to the channel in context. The list headers share the slots too and have\n// neither, so there the buttons render nothing.\n\n/**\n * Steps back from the channel or thread whose header renders it: removes it from its panel,\n * revealing what it is stacked over. Renders nothing when there is nothing beneath.\n */\nexport const WorkspaceNavigationBackButton = () => {\n  const { IconArrowLeft } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { canGoBack, goBack } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n  const thread = useThreadContext();\n  const { channel } = useChannelInstanceContext();\n  const key = thread ? thread.id : channel?.cid;\n\n  if (key === undefined || !canGoBack(key, panel)) return null;\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t('common.back.label', 'Back')}\n      circular\n      className={\n        thread\n          ? 'str-chat__thread-header__back-button'\n          : 'str-chat__channel-header__back-button'\n      }\n      data-testid={thread ? 'thread-header-back-button' : 'channel-header-back-button'}\n      onClick={(event) => goBack(key, { event, panel })}\n      size='md'\n      variant='secondary'\n    >\n      <IconArrowLeft />\n    </Button>\n  );\n};\n\nconst CloseThreadButton = () => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { isThreadDismissable } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n  const thread = useThreadContext();\n  // Closes in the panel it renders in; `useCloseThread` passes that panel along.\n  const closeThread = useCloseThread();\n\n  // Hidden for the threads view's primary thread, which is the main panel — you switch views\n  // rather than close it.\n  if (!isThreadDismissable(thread?.id, panel)) return null;\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t('thread.header.closeThread.ariaLabel', 'Close thread')}\n      circular\n      className='str-chat__close-thread-button'\n      data-testid='close-thread-button'\n      onClick={(event) => closeThread({ event })}\n      size='md'\n      variant='secondary'\n    >\n      <IconXmark />\n    </Button>\n  );\n};\n\nconst CloseChannelButton = ({ cid }: { cid: string }) => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { closeChannel, isChannelDismissable } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n\n  // Shown for a channel opened beside another one; the primary channel panel stays open.\n  if (!isChannelDismissable(cid, panel)) return null;\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t('channelHeader.closeChannel.ariaLabel', 'Close channel')}\n      circular\n      className='str-chat__close-channel-button'\n      data-testid='close-channel-button'\n      onClick={(event) => closeChannel(cid, { event, panel })}\n      size='md'\n      variant='secondary'\n    >\n      <IconXmark />\n    </Button>\n  );\n};\n\n/**\n * Closes the whole panel of the channel or thread whose header renders it, with everything stacked\n * in it. Renders nothing for a panel that cannot be dismissed, such as the primary channel.\n */\nexport const WorkspaceNavigationCloseButton = () => {\n  const thread = useThreadContext();\n  const { channel } = useChannelInstanceContext();\n\n  if (thread) return <CloseThreadButton />;\n  if (channel?.cid) return <CloseChannelButton cid={channel.cid} />;\n  return null;\n};\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAa,sCAAsC;CACjD,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,WAAW,uBAAuB;CACrD,MAAM,QAAQ,kBAAkB;CAChC,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,YAAY,0BAA0B;CAC9C,MAAM,MAAM,SAAS,OAAO,KAAK,SAAS;CAE1C,IAAI,QAAQ,KAAA,KAAa,CAAC,UAAU,KAAK,KAAK,GAAG,OAAO;CAExD,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,qBAAqB,MAAM;EACzC,UAAA;EACA,WACE,SACI,yCACA;EAEN,eAAa,SAAS,8BAA8B;EACpD,UAAU,UAAU,OAAO,KAAK;GAAE;GAAO;EAAM,CAAC;EAChD,MAAK;EACL,SAAQ;YAER,oBAAC,eAAD,CAAgB,CAAA;CACV,CAAA;AAEZ;AAEA,IAAM,0BAA0B;CAC9B,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,wBAAwB,uBAAuB;CACvD,MAAM,QAAQ,kBAAkB;CAChC,MAAM,SAAS,iBAAiB;CAEhC,MAAM,cAAc,eAAe;CAInC,IAAI,CAAC,oBAAoB,QAAQ,IAAI,KAAK,GAAG,OAAO;CAEpD,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,uCAAuC,cAAc;EACnE,UAAA;EACA,WAAU;EACV,eAAY;EACZ,UAAU,UAAU,YAAY,EAAE,MAAM,CAAC;EACzC,MAAK;EACL,SAAQ;YAER,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ;AAEA,IAAM,sBAAsB,EAAE,UAA2B;CACvD,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,cAAc,yBAAyB,uBAAuB;CACtE,MAAM,QAAQ,kBAAkB;CAGhC,IAAI,CAAC,qBAAqB,KAAK,KAAK,GAAG,OAAO;CAE9C,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,wCAAwC,eAAe;EACrE,UAAA;EACA,WAAU;EACV,eAAY;EACZ,UAAU,UAAU,aAAa,KAAK;GAAE;GAAO;EAAM,CAAC;EACtD,MAAK;EACL,SAAQ;YAER,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ;;;;;AAMA,IAAa,uCAAuC;CAClD,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,YAAY,0BAA0B;CAE9C,IAAI,QAAQ,OAAO,oBAAC,mBAAD,CAAoB,CAAA;CACvC,IAAI,SAAS,KAAK,OAAO,oBAAC,oBAAD,EAAoB,KAAK,QAAQ,IAAM,CAAA;CAChE,OAAO;AACT"}