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

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

@@ -1 +1 @@
-{"version":3,"file":"InfiniteScrollPaginator.mjs","names":[],"sources":["../../../../src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport debounce from 'lodash.debounce';\nimport type { PropsWithChildren } from 'react';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';\n\n/**\n * Prevents Chrome hangups\n * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257\n */\nconst mousewheelListener = (event: Event) => {\n  if (event instanceof WheelEvent && event.deltaY === 1) {\n    event.preventDefault();\n  }\n};\n\nexport type InfiniteScrollPaginatorProps = React.ComponentProps<'div'> & {\n  /**\n   * Props spread onto the inner content wrapper (the element that directly wraps\n   * `children`). Use this to e.g. mark the wrapper `role=\"presentation\"` so it stays\n   * transparent in the accessibility tree and does not break the ownership between an\n   * ancestor (`listbox`/`menu`) and its `option`/`menuitem` children.\n   */\n  contentProps?: React.ComponentProps<'div'>;\n  listenToScroll?: (\n    distanceFromBottom: number,\n    distanceFromTop: number,\n    threshold: number,\n  ) => void;\n  loadNextDebounceMs?: number;\n  loadNextOnScrollToBottom?: () => void;\n  loadNextOnScrollToTop?: () => void;\n  /** Offset from when to start the loadNextPage call */\n  threshold?: number;\n  useCapture?: boolean;\n};\n\nexport const InfiniteScrollPaginator = (\n  props: PropsWithChildren<InfiniteScrollPaginatorProps>,\n) => {\n  const {\n    children,\n    className,\n    contentProps,\n    listenToScroll,\n    loadNextDebounceMs = 500,\n    loadNextOnScrollToBottom,\n    loadNextOnScrollToTop,\n    threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,\n    useCapture = false,\n    ...componentProps\n  } = props;\n  const { className: contentClassName, ...contentRestProps } = contentProps ?? {};\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const childRef = useRef<HTMLDivElement | null>(null);\n\n  const scrollListener = useMemo(\n    () =>\n      debounce(() => {\n        const root = rootRef.current;\n        const child = childRef.current;\n        if (!root || root.offsetParent === null || !child) {\n          return;\n        }\n\n        const distanceFromBottom =\n          child.scrollHeight - root.scrollTop - root.clientHeight;\n        const distanceFromTop = root.scrollTop;\n\n        if (listenToScroll) {\n          listenToScroll(distanceFromBottom, distanceFromTop, threshold);\n        }\n\n        if (distanceFromTop < Number(threshold)) {\n          loadNextOnScrollToTop?.();\n        }\n\n        if (distanceFromBottom < Number(threshold)) {\n          loadNextOnScrollToBottom?.();\n        }\n      }, loadNextDebounceMs),\n    [\n      listenToScroll,\n      loadNextDebounceMs,\n      loadNextOnScrollToBottom,\n      loadNextOnScrollToTop,\n      threshold,\n    ],\n  );\n\n  useEffect(() => {\n    const scrollElement = rootRef.current;\n    if (!scrollElement) return;\n\n    scrollElement.addEventListener('scroll', scrollListener, useCapture);\n\n    return () => {\n      scrollElement.removeEventListener('scroll', scrollListener, useCapture);\n    };\n  }, [scrollListener, useCapture]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root || typeof ResizeObserver === 'undefined' || !scrollListener) return;\n    const observer = new ResizeObserver(scrollListener);\n    observer.observe(root as Element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [scrollListener]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (root) {\n      root.addEventListener('wheel', mousewheelListener, { passive: false });\n    }\n    return () => {\n      if (root) {\n        root.removeEventListener('wheel', mousewheelListener, useCapture);\n      }\n    };\n  }, [useCapture]);\n\n  return (\n    <div\n      {...componentProps}\n      className={clsx('str-chat__infinite-scroll-paginator', className)}\n      ref={rootRef}\n    >\n      <div\n        {...contentRestProps}\n        className={clsx('str-chat__infinite-scroll-paginator__content', contentClassName)}\n        ref={childRef}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,sBAAsB,UAAiB;CAC3C,IAAI,iBAAiB,cAAc,MAAM,WAAW,GAClD,MAAM,eAAe;AAEzB;AAuBA,IAAa,2BACX,UACG;CACH,MAAM,EACJ,UACA,WACA,cACA,gBACA,qBAAqB,KACrB,0BACA,uBACA,YAAA,KACA,aAAa,OACb,GAAG,mBACD;CACJ,MAAM,EAAE,WAAW,kBAAkB,GAAG,qBAAqB,gBAAgB,CAAC;CAE9E,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,iBAAiB,cAEnB,eAAe;EACb,MAAM,OAAO,QAAQ;EACrB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,QAAQ,KAAK,iBAAiB,QAAQ,CAAC,OAC1C;EAGF,MAAM,qBACJ,MAAM,eAAe,KAAK,YAAY,KAAK;EAC7C,MAAM,kBAAkB,KAAK;EAE7B,IAAI,gBACF,eAAe,oBAAoB,iBAAiB,SAAS;EAG/D,IAAI,kBAAkB,OAAO,SAAS,GACpC,wBAAwB;EAG1B,IAAI,qBAAqB,OAAO,SAAS,GACvC,2BAA2B;CAE/B,GAAG,kBAAkB,GACvB;EACE;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,gBAAgB;EACd,MAAM,gBAAgB,QAAQ;EAC9B,IAAI,CAAC,eAAe;EAEpB,cAAc,iBAAiB,UAAU,gBAAgB,UAAU;EAEnE,aAAa;GACX,cAAc,oBAAoB,UAAU,gBAAgB,UAAU;EACxE;CACF,GAAG,CAAC,gBAAgB,UAAU,CAAC;CAE/B,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,eAAe,CAAC,gBAAgB;EACvE,MAAM,WAAW,IAAI,eAAe,cAAc;EAClD,SAAS,QAAQ,IAAe;EAEhC,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,MACF,KAAK,iBAAiB,SAAS,oBAAoB,EAAE,SAAS,MAAM,CAAC;EAEvE,aAAa;GACX,IAAI,MACF,KAAK,oBAAoB,SAAS,oBAAoB,UAAU;EAEpE;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,uCAAuC,SAAS;EAChE,KAAK;YAEL,oBAAC,OAAD;GACE,GAAI;GACJ,WAAW,KAAK,gDAAgD,gBAAgB;GAChF,KAAK;GAEJ;EACE,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"InfiniteScrollPaginator.mjs","names":[],"sources":["../../../../src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport debounce from 'lodash.debounce';\nimport type { PropsWithChildren } from 'react';\nimport { forwardRef } from 'react';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';\n\n/**\n * Prevents Chrome hangups\n * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257\n */\nconst mousewheelListener = (event: Event) => {\n  if (event instanceof WheelEvent && event.deltaY === 1) {\n    event.preventDefault();\n  }\n};\n\ntype InfiniteScrollPaginatorOwnProps = {\n  element?: React.ElementType;\n  /**\n   * Props spread onto the inner content wrapper (the element that directly wraps\n   * `children`). Use this to e.g. mark the wrapper `role=\"presentation\"` so it stays\n   * transparent in the accessibility tree and does not break the ownership between an\n   * ancestor (`listbox`/`menu`) and its `option`/`menuitem` children.\n   */\n  contentProps?: React.ComponentProps<'div'>;\n  listenToScroll?: (\n    distanceFromBottom: number,\n    distanceFromTop: number,\n    threshold: number,\n  ) => void;\n  loadNextDebounceMs?: number;\n  loadNextOnScrollToBottom?: () => void;\n  loadNextOnScrollToTop?: () => void;\n  /** Offset from when to start the loadNextPage call */\n  threshold?: number;\n  useCapture?: boolean;\n};\n\n// polymorphic props, defaulting to 'div'. `ref` is carried by `ComponentPropsWithRef<C>`\n// (it is not omitted below), so the props type already exposes the correct ref — no separate\n// `ref?` signature is needed (and the react-compat lint rule forbids a literal one; the\n// component is a real `forwardRef` below).\nexport type InfiniteScrollPaginatorProps<C extends React.ElementType = 'div'> =\n  PropsWithChildren<\n    InfiniteScrollPaginatorOwnProps & {\n      element?: C;\n    } & Omit<\n        React.ComponentPropsWithRef<C>,\n        keyof InfiniteScrollPaginatorOwnProps | 'element'\n      >\n  >;\n\ntype InfiniteScrollPaginatorComponent = <C extends React.ElementType = 'div'>(\n  props: InfiniteScrollPaginatorProps<C>,\n) => React.ReactNode;\n\nconst renderPolymorphic = <C extends React.ElementType>(\n  Comp: C,\n  props: React.ComponentPropsWithRef<C>,\n  children?: React.ReactNode,\n) => React.createElement(Comp, props, children);\n\nexport const InfiniteScrollPaginator = forwardRef(function InfiniteScrollPaginator<\n  E extends React.ElementType = 'div',\n>(props: InfiniteScrollPaginatorProps<E>, ref: React.ForwardedRef<unknown>) {\n  const {\n    children,\n    className,\n    contentProps,\n    element: Component = 'div' as E,\n    listenToScroll,\n    loadNextDebounceMs = 500,\n    loadNextOnScrollToBottom,\n    loadNextOnScrollToTop,\n    threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,\n    useCapture = false,\n    ...componentProps\n  } = props;\n  const { className: contentClassName, ...contentRestProps } = contentProps ?? {};\n\n  const rootRef = useRef<HTMLElement | null>(null);\n  const childRef = useRef<HTMLDivElement | null>(null);\n\n  const scrollListener = useMemo(\n    () =>\n      debounce(() => {\n        const root = rootRef.current;\n        const child = childRef.current;\n        if (!root || root.offsetParent === null || !child) {\n          return;\n        }\n\n        const distanceFromBottom =\n          child.scrollHeight - root.scrollTop - root.clientHeight;\n        const distanceFromTop = root.scrollTop;\n\n        if (listenToScroll) {\n          listenToScroll(distanceFromBottom, distanceFromTop, threshold);\n        }\n\n        if (distanceFromTop < Number(threshold)) {\n          loadNextOnScrollToTop?.();\n        }\n\n        if (distanceFromBottom < Number(threshold)) {\n          loadNextOnScrollToBottom?.();\n        }\n      }, loadNextDebounceMs),\n    [\n      listenToScroll,\n      loadNextDebounceMs,\n      loadNextOnScrollToBottom,\n      loadNextOnScrollToTop,\n      threshold,\n    ],\n  );\n\n  useEffect(() => {\n    const scrollElement = rootRef.current;\n    if (!scrollElement) return;\n\n    scrollElement.addEventListener('scroll', scrollListener, useCapture);\n\n    return () => {\n      scrollElement.removeEventListener('scroll', scrollListener, useCapture);\n    };\n  }, [scrollListener, useCapture]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root || typeof ResizeObserver === 'undefined' || !scrollListener) return;\n    const observer = new ResizeObserver(scrollListener);\n    observer.observe(root as Element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [scrollListener]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (root) {\n      root.addEventListener('wheel', mousewheelListener, { passive: false });\n    }\n    return () => {\n      if (root) {\n        root.removeEventListener('wheel', mousewheelListener, useCapture);\n      }\n    };\n  }, [useCapture]);\n\n  return renderPolymorphic(\n    Component as E,\n    {\n      ...(componentProps as React.ComponentPropsWithRef<E>),\n      className: clsx('str-chat__infinite-scroll-paginator', className),\n      ref: (node: React.ComponentRef<E> | null) => {\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref && 'current' in ref) {\n          (ref as React.RefObject<React.ComponentRef<E> | null>).current = node;\n        }\n        rootRef.current = node && node instanceof HTMLElement ? node : null;\n      },\n    },\n    React.createElement(\n      'div',\n      {\n        ...contentRestProps,\n        className: clsx('str-chat__infinite-scroll-paginator__content', contentClassName),\n        ref: childRef,\n      },\n      children,\n    ),\n  );\n}) as InfiniteScrollPaginatorComponent;\n"],"mappings":";;;;;;;;AAWA,IAAM,sBAAsB,UAAiB;CAC3C,IAAI,iBAAiB,cAAc,MAAM,WAAW,GAClD,MAAM,eAAe;AAEzB;AA0CA,IAAM,qBACJ,MACA,OACA,aACG,MAAM,cAAc,MAAM,OAAO,QAAQ;AAE9C,IAAa,0BAA0B,WAAW,SAAS,wBAEzD,OAAwC,KAAkC;CAC1E,MAAM,EACJ,UACA,WACA,cACA,SAAS,YAAY,OACrB,gBACA,qBAAqB,KACrB,0BACA,uBACA,YAAA,KACA,aAAa,OACb,GAAG,mBACD;CACJ,MAAM,EAAE,WAAW,kBAAkB,GAAG,qBAAqB,gBAAgB,CAAC;CAE9E,MAAM,UAAU,OAA2B,IAAI;CAC/C,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,iBAAiB,cAEnB,eAAe;EACb,MAAM,OAAO,QAAQ;EACrB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,QAAQ,KAAK,iBAAiB,QAAQ,CAAC,OAC1C;EAGF,MAAM,qBACJ,MAAM,eAAe,KAAK,YAAY,KAAK;EAC7C,MAAM,kBAAkB,KAAK;EAE7B,IAAI,gBACF,eAAe,oBAAoB,iBAAiB,SAAS;EAG/D,IAAI,kBAAkB,OAAO,SAAS,GACpC,wBAAwB;EAG1B,IAAI,qBAAqB,OAAO,SAAS,GACvC,2BAA2B;CAE/B,GAAG,kBAAkB,GACvB;EACE;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,gBAAgB;EACd,MAAM,gBAAgB,QAAQ;EAC9B,IAAI,CAAC,eAAe;EAEpB,cAAc,iBAAiB,UAAU,gBAAgB,UAAU;EAEnE,aAAa;GACX,cAAc,oBAAoB,UAAU,gBAAgB,UAAU;EACxE;CACF,GAAG,CAAC,gBAAgB,UAAU,CAAC;CAE/B,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,eAAe,CAAC,gBAAgB;EACvE,MAAM,WAAW,IAAI,eAAe,cAAc;EAClD,SAAS,QAAQ,IAAe;EAEhC,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,MACF,KAAK,iBAAiB,SAAS,oBAAoB,EAAE,SAAS,MAAM,CAAC;EAEvE,aAAa;GACX,IAAI,MACF,KAAK,oBAAoB,SAAS,oBAAoB,UAAU;EAEpE;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,OAAO,kBACL,WACA;EACE,GAAI;EACJ,WAAW,KAAK,uCAAuC,SAAS;EAChE,MAAM,SAAuC;GAC3C,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;QACH,IAAI,OAAO,aAAa,KAC7B,IAAuD,UAAU;GAEnE,QAAQ,UAAU,QAAQ,gBAAgB,cAAc,OAAO;EACjE;CACF,GACA,MAAM,cACJ,OACA;EACE,GAAG;EACH,WAAW,KAAK,gDAAgD,gBAAgB;EAChF,KAAK;CACP,GACA,QACF,CACF;AACF,CAAC"}

package/dist/es/components/InfiniteScrollPaginator/InfiniteScrollWithComponents.mjs

@@ -0,0 +1,43 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { InfiniteScrollPaginator } from "./InfiniteScrollPaginator.mjs";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/InfiniteScrollPaginator/InfiniteScrollWithComponents.tsx
+/**
+* Renders any paginator-backed list with pluggable indicator/item components,
+* driven by the paginator's reactive `state`. Used by the ChannelManager-driven
+* channel list. `forwardRef` so callers can put the scroll root's DOM node to use
+* (e.g. the channel list marks it `role="listbox"` and drives keyboard roving off it).
+*/
+var InfiniteScrollWithComponents = forwardRef(function InfiniteScrollWithComponents(props, ref) {
+	const { EmptyListIndicator, EndReachedIndicator, FirstPageLoadingIndicator, hasReachedBottom, hasReachedTop, ListItem, LoadingNextPageIndicator, paginator, ...componentProps } = props;
+	const { isLoading, items } = useStateStore(paginator.state, (state) => ({
+		isLoading: state.isLoading,
+		items: state.items
+	}));
+	const isLoadingFirstPage = items === void 0;
+	const isEmpty = items?.length === 0;
+	const topEndReached = hasReachedTop?.(paginator) ?? !paginator.hasPrev;
+	const bottomEndReached = hasReachedBottom?.(paginator) ?? !paginator.hasNext;
+	if (isLoadingFirstPage) return /* @__PURE__ */ jsx(FirstPageLoadingIndicator, {});
+	if (isEmpty) return /* @__PURE__ */ jsx(EmptyListIndicator, {});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(EndReachedIndicator, {
+			hasEnded: topEndReached,
+			reached: "top"
+		}),
+		/* @__PURE__ */ jsxs(InfiniteScrollPaginator, {
+			...componentProps,
+			ref,
+			children: [items.map((item) => /* @__PURE__ */ jsx(ListItem, { item }, item.id)), /* @__PURE__ */ jsx(LoadingNextPageIndicator, { isLoading })]
+		}),
+		/* @__PURE__ */ jsx(EndReachedIndicator, {
+			hasEnded: bottomEndReached,
+			reached: "bottom"
+		})
+	] });
+});
+//#endregion
+export { InfiniteScrollWithComponents };
+
+//# sourceMappingURL=InfiniteScrollWithComponents.mjs.map

package/dist/es/components/InfiniteScrollPaginator/InfiniteScrollWithComponents.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteScrollWithComponents.mjs","names":[],"sources":["../../../../src/components/InfiniteScrollPaginator/InfiniteScrollWithComponents.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { StateStore } from '@stream-io/state-store';\nimport type { PaginatorState } from 'stream-chat';\n\nimport { useStateStore } from '../../store';\nimport type { InfiniteScrollPaginatorProps } from './InfiniteScrollPaginator';\nimport { InfiniteScrollPaginator } from './InfiniteScrollPaginator';\n\n/** Minimal structural view of a paginator this component reads — avoids coupling\n * to `BasePaginator`'s generic variance (items only need an optional `id` for keys). */\ntype PaginatorLike<TItem> = {\n  hasNext: boolean;\n  hasPrev: boolean;\n  state: StateStore<PaginatorState<TItem>>;\n};\n\nexport type InfiniteScrollWithComponentsProps<TItem extends { id?: string }> =\n  InfiniteScrollPaginatorProps & {\n    EmptyListIndicator: React.ComponentType;\n    EndReachedIndicator: React.ComponentType<{\n      hasEnded: boolean;\n      reached: 'top' | 'bottom';\n    }>;\n    FirstPageLoadingIndicator: React.ComponentType;\n    ListItem: ComponentType<{ item: TItem }>;\n    LoadingNextPageIndicator: React.ComponentType<{ isLoading?: boolean }>;\n    paginator: PaginatorLike<TItem>;\n    hasReachedBottom?: (paginator: PaginatorLike<TItem>) => boolean;\n    hasReachedTop?: (paginator: PaginatorLike<TItem>) => boolean;\n  };\n\ntype InfiniteScrollWithComponentsComponent = <TItem extends { id?: string }>(\n  props: InfiniteScrollWithComponentsProps<TItem>,\n) => React.ReactNode;\n\n/**\n * Renders any paginator-backed list with pluggable indicator/item components,\n * driven by the paginator's reactive `state`. Used by the ChannelManager-driven\n * channel list. `forwardRef` so callers can put the scroll root's DOM node to use\n * (e.g. the channel list marks it `role=\"listbox\"` and drives keyboard roving off it).\n */\nexport const InfiniteScrollWithComponents = forwardRef(\n  function InfiniteScrollWithComponents<TItem extends { id?: string }>(\n    props: InfiniteScrollWithComponentsProps<TItem>,\n    ref: React.ForwardedRef<unknown>,\n  ) {\n    const {\n      EmptyListIndicator,\n      EndReachedIndicator,\n      FirstPageLoadingIndicator,\n      hasReachedBottom,\n      hasReachedTop,\n      ListItem,\n      LoadingNextPageIndicator,\n      paginator,\n      ...componentProps\n    } = props;\n\n    const { isLoading, items } = useStateStore(paginator.state, (state) => ({\n      isLoading: state.isLoading,\n      items: state.items,\n    }));\n    const isLoadingFirstPage = items === undefined;\n    const isEmpty = items?.length === 0;\n    const topEndReached = hasReachedTop?.(paginator) ?? !paginator.hasPrev;\n    const bottomEndReached = hasReachedBottom?.(paginator) ?? !paginator.hasNext;\n\n    if (isLoadingFirstPage) return <FirstPageLoadingIndicator />;\n    if (isEmpty) return <EmptyListIndicator />;\n\n    return (\n      <>\n        <EndReachedIndicator hasEnded={topEndReached} reached='top' />\n        <InfiniteScrollPaginator {...componentProps} ref={ref}>\n          {items.map((item) => (\n            <ListItem item={item} key={item.id} />\n          ))}\n          <LoadingNextPageIndicator isLoading={isLoading} />\n        </InfiniteScrollPaginator>\n        <EndReachedIndicator hasEnded={bottomEndReached} reached='bottom' />\n      </>\n    );\n  },\n) as InfiniteScrollWithComponentsComponent;\n"],"mappings":";;;;;;;;;;;AA0CA,IAAa,+BAA+B,WAC1C,SAAS,6BACP,OACA,KACA;CACA,MAAM,EACJ,oBACA,qBACA,2BACA,kBACA,eACA,UACA,0BACA,WACA,GAAG,mBACD;CAEJ,MAAM,EAAE,WAAW,UAAU,cAAc,UAAU,QAAQ,WAAW;EACtE,WAAW,MAAM;EACjB,OAAO,MAAM;CACf,EAAE;CACF,MAAM,qBAAqB,UAAU,KAAA;CACrC,MAAM,UAAU,OAAO,WAAW;CAClC,MAAM,gBAAgB,gBAAgB,SAAS,KAAK,CAAC,UAAU;CAC/D,MAAM,mBAAmB,mBAAmB,SAAS,KAAK,CAAC,UAAU;CAErE,IAAI,oBAAoB,OAAO,oBAAC,2BAAD,CAA4B,CAAA;CAC3D,IAAI,SAAS,OAAO,oBAAC,oBAAD,CAAqB,CAAA;CAEzC,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,qBAAD;GAAqB,UAAU;GAAe,SAAQ;EAAO,CAAA;EAC7D,qBAAC,yBAAD;GAAyB,GAAI;GAAqB;aAAlD,CACG,MAAM,KAAK,SACV,oBAAC,UAAD,EAAgB,KAAqB,GAAV,KAAK,EAAK,CACtC,GACD,oBAAC,0BAAD,EAAqC,UAAY,CAAA,CAC1B;;EACzB,oBAAC,qBAAD;GAAqB,UAAU;GAAkB,SAAQ;EAAU,CAAA;CACnE,EAAA,CAAA;AAEN,CACF"}

package/dist/es/components/InfiniteScrollPaginator/hooks/useCursorPaginator.mjs

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo } from "react";
-import { StateStore } from "stream-chat";
+import { StateStore } from "@stream-io/state-store";
 import uniqBy from "lodash.uniqby";
 //#region src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts
 var useCursorPaginator = (paginationFn, loadFirstPage) => {

package/dist/es/components/InfiniteScrollPaginator/hooks/useCursorPaginator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorPaginator.mjs","names":[],"sources":["../../../../../src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts"],"sourcesContent":["import uniqBy from 'lodash.uniqby';\nimport { useCallback, useEffect, useMemo } from 'react';\nimport { StateStore } from 'stream-chat';\n\nexport type CursorPaginatorState<T> = {\n  hasNextPage: boolean;\n  items: T[];\n  latestPageItems: T[];\n  loading: boolean;\n  error?: Error;\n  next?: string | null;\n};\n\nexport type CursorPaginatorStateStore<T> = StateStore<CursorPaginatorState<T>>;\n\nexport type PaginationFn<T> = (next?: string) => Promise<{ items: T[]; next?: string }>;\n\nexport const useCursorPaginator = <T>(\n  paginationFn: PaginationFn<T>,\n  loadFirstPage?: boolean,\n) => {\n  const cursorPaginatorState = useMemo(\n    () =>\n      new StateStore<CursorPaginatorState<T>>({\n        hasNextPage: true,\n        items: [],\n        latestPageItems: [],\n        loading: false,\n      }),\n    [],\n  );\n\n  const loadMore = useCallback(async () => {\n    const { loading, next: currentNext } = cursorPaginatorState.getLatestValue();\n    if (currentNext === null || loading) return;\n\n    cursorPaginatorState.partialNext({ loading: true });\n\n    try {\n      const { items, next } = await paginationFn(currentNext);\n      cursorPaginatorState.next((prev) => ({\n        ...prev,\n        hasNextPage: !!next,\n        items: uniqBy(prev.items.concat(items), 'id'),\n        latestPageItems: items,\n        next: next || null,\n      }));\n    } catch (error) {\n      cursorPaginatorState.partialNext({ error: error as Error });\n    }\n    cursorPaginatorState.partialNext({ loading: false });\n  }, [cursorPaginatorState, paginationFn]);\n\n  useEffect(() => {\n    const { items } = cursorPaginatorState.getLatestValue();\n    if (!loadFirstPage || items.length) return;\n    loadMore();\n  }, [cursorPaginatorState, loadFirstPage, loadMore]);\n\n  return {\n    cursorPaginatorState,\n    loadMore,\n  };\n};\n"],"mappings":";;;;AAiBA,IAAa,sBACX,cACA,kBACG;CACH,MAAM,uBAAuB,cAEzB,IAAI,WAAoC;EACtC,aAAa;EACb,OAAO,CAAC;EACR,iBAAiB,CAAC;EAClB,SAAS;CACX,CAAC,GACH,CAAC,CACH;CAEA,MAAM,WAAW,YAAY,YAAY;EACvC,MAAM,EAAE,SAAS,MAAM,gBAAgB,qBAAqB,eAAe;EAC3E,IAAI,gBAAgB,QAAQ,SAAS;EAErC,qBAAqB,YAAY,EAAE,SAAS,KAAK,CAAC;EAElD,IAAI;GACF,MAAM,EAAE,OAAO,SAAS,MAAM,aAAa,WAAW;GACtD,qBAAqB,MAAM,UAAU;IACnC,GAAG;IACH,aAAa,CAAC,CAAC;IACf,OAAO,OAAO,KAAK,MAAM,OAAO,KAAK,GAAG,IAAI;IAC5C,iBAAiB;IACjB,MAAM,QAAQ;GAChB,EAAE;EACJ,SAAS,OAAO;GACd,qBAAqB,YAAY,EAAS,MAAe,CAAC;EAC5D;EACA,qBAAqB,YAAY,EAAE,SAAS,MAAM,CAAC;CACrD,GAAG,CAAC,sBAAsB,YAAY,CAAC;CAEvC,gBAAgB;EACd,MAAM,EAAE,UAAU,qBAAqB,eAAe;EACtD,IAAI,CAAC,iBAAiB,MAAM,QAAQ;EACpC,SAAS;CACX,GAAG;EAAC;EAAsB;EAAe;CAAQ,CAAC;CAElD,OAAO;EACL;EACA;CACF;AACF"}
+{"version":3,"file":"useCursorPaginator.mjs","names":[],"sources":["../../../../../src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts"],"sourcesContent":["import uniqBy from 'lodash.uniqby';\nimport { useCallback, useEffect, useMemo } from 'react';\nimport { StateStore } from '@stream-io/state-store';\n\nexport type CursorPaginatorState<T> = {\n  hasNextPage: boolean;\n  items: T[];\n  latestPageItems: T[];\n  loading: boolean;\n  error?: Error;\n  next?: string | null;\n};\n\nexport type CursorPaginatorStateStore<T> = StateStore<CursorPaginatorState<T>>;\n\nexport type PaginationFn<T> = (next?: string) => Promise<{ items: T[]; next?: string }>;\n\nexport const useCursorPaginator = <T>(\n  paginationFn: PaginationFn<T>,\n  loadFirstPage?: boolean,\n) => {\n  const cursorPaginatorState = useMemo(\n    () =>\n      new StateStore<CursorPaginatorState<T>>({\n        hasNextPage: true,\n        items: [],\n        latestPageItems: [],\n        loading: false,\n      }),\n    [],\n  );\n\n  const loadMore = useCallback(async () => {\n    const { loading, next: currentNext } = cursorPaginatorState.getLatestValue();\n    if (currentNext === null || loading) return;\n\n    cursorPaginatorState.partialNext({ loading: true });\n\n    try {\n      const { items, next } = await paginationFn(currentNext);\n      cursorPaginatorState.next((prev) => ({\n        ...prev,\n        hasNextPage: !!next,\n        items: uniqBy(prev.items.concat(items), 'id'),\n        latestPageItems: items,\n        next: next || null,\n      }));\n    } catch (error) {\n      cursorPaginatorState.partialNext({ error: error as Error });\n    }\n    cursorPaginatorState.partialNext({ loading: false });\n  }, [cursorPaginatorState, paginationFn]);\n\n  useEffect(() => {\n    const { items } = cursorPaginatorState.getLatestValue();\n    if (!loadFirstPage || items.length) return;\n    loadMore();\n  }, [cursorPaginatorState, loadFirstPage, loadMore]);\n\n  return {\n    cursorPaginatorState,\n    loadMore,\n  };\n};\n"],"mappings":";;;;AAiBA,IAAa,sBACX,cACA,kBACG;CACH,MAAM,uBAAuB,cAEzB,IAAI,WAAoC;EACtC,aAAa;EACb,OAAO,CAAC;EACR,iBAAiB,CAAC;EAClB,SAAS;CACX,CAAC,GACH,CAAC,CACH;CAEA,MAAM,WAAW,YAAY,YAAY;EACvC,MAAM,EAAE,SAAS,MAAM,gBAAgB,qBAAqB,eAAe;EAC3E,IAAI,gBAAgB,QAAQ,SAAS;EAErC,qBAAqB,YAAY,EAAE,SAAS,KAAK,CAAC;EAElD,IAAI;GACF,MAAM,EAAE,OAAO,SAAS,MAAM,aAAa,WAAW;GACtD,qBAAqB,MAAM,UAAU;IACnC,GAAG;IACH,aAAa,CAAC,CAAC;IACf,OAAO,OAAO,KAAK,MAAM,OAAO,KAAK,GAAG,IAAI;IAC5C,iBAAiB;IACjB,MAAM,QAAQ;GAChB,EAAE;EACJ,SAAS,OAAO;GACd,qBAAqB,YAAY,EAAS,MAAe,CAAC;EAC5D;EACA,qBAAqB,YAAY,EAAE,SAAS,MAAM,CAAC;CACrD,GAAG,CAAC,sBAAsB,YAAY,CAAC;CAEvC,gBAAgB;EACd,MAAM,EAAE,UAAU,qBAAqB,eAAe;EACtD,IAAI,CAAC,iBAAiB,MAAM,QAAQ;EACpC,SAAS;CACX,GAAG;EAAC;EAAsB;EAAe;CAAQ,CAAC;CAElD,OAAO;EACL;EACA;CACF;AACF"}

package/dist/es/components/LoadMore/LoadMoreButton.mjs

@@ -5,13 +5,13 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/LoadMore/LoadMoreButton.tsx
 var UnMemoizedLoadMoreButton = ({ children, isLoading, onClick }) => {
-	const { t } = useTranslationContext("UnMemoizedLoadMoreButton");
-	const childrenOrDefaultString = children ?? t("Load more");
+	const { t } = useTranslationContext();
+	const childrenOrDefaultString = children ?? t("loadMore.button.loadMore.label", "Load more");
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__load-more-button",
 		children: /* @__PURE__ */ jsx(Button, {
 			appearance: "ghost",
-			"aria-label": t("Load more"),
+			"aria-label": t("loadMore.button.loadMore.label", "Load more"),
 			"data-testid": "load-more-button",
 			disabled: isLoading,
 			onClick,

package/dist/es/components/LoadMore/LoadMoreButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMoreButton.mjs","names":[],"sources":["../../../../src/components/LoadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { LoadingIndicator } from '../Loading';\nimport { useTranslationContext } from '../../context';\nimport { Button } from '../Button';\n\nexport type LoadMoreButtonProps = {\n  /** onClick handler load more button. Pagination logic should be executed in this handler. */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /** indicates whether a loading request is in progress */\n  isLoading?: boolean;\n};\n\nconst UnMemoizedLoadMoreButton = ({\n  children,\n  isLoading,\n  onClick,\n}: PropsWithChildren<LoadMoreButtonProps>) => {\n  const { t } = useTranslationContext('UnMemoizedLoadMoreButton');\n\n  const childrenOrDefaultString = children ?? t('Load more');\n\n  return (\n    <div className='str-chat__load-more-button'>\n      <Button\n        appearance='ghost'\n        aria-label={t('Load more')}\n        data-testid='load-more-button'\n        disabled={isLoading}\n        onClick={onClick}\n        size='sm'\n        variant='secondary'\n      >\n        {isLoading ? <LoadingIndicator /> : childrenOrDefaultString}\n      </Button>\n    </div>\n  );\n};\n\nexport const LoadMoreButton = React.memo(\n  UnMemoizedLoadMoreButton,\n) as typeof UnMemoizedLoadMoreButton;\n"],"mappings":";;;;;;AAaA,IAAM,4BAA4B,EAChC,UACA,WACA,cAC4C;CAC5C,MAAM,EAAE,MAAM,sBAAsB,0BAA0B;CAE9D,MAAM,0BAA0B,YAAY,EAAE,WAAW;CAEzD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,WAAW;GACzB,eAAY;GACZ,UAAU;GACD;GACT,MAAK;GACL,SAAQ;aAEP,YAAY,oBAAC,kBAAD,CAAmB,CAAA,IAAI;EAC9B,CAAA;CACL,CAAA;AAET;AAEA,IAAa,iBAAiB,MAAM,KAClC,wBACF"}
+{"version":3,"file":"LoadMoreButton.mjs","names":[],"sources":["../../../../src/components/LoadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { LoadingIndicator } from '../Loading';\nimport { useTranslationContext } from '../../context';\nimport { Button } from '../Button';\n\nexport type LoadMoreButtonProps = {\n  /** onClick handler load more button. Pagination logic should be executed in this handler. */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /** indicates whether a loading request is in progress */\n  isLoading?: boolean;\n};\n\nconst UnMemoizedLoadMoreButton = ({\n  children,\n  isLoading,\n  onClick,\n}: PropsWithChildren<LoadMoreButtonProps>) => {\n  const { t } = useTranslationContext();\n\n  const childrenOrDefaultString =\n    children ?? t('loadMore.button.loadMore.label', 'Load more');\n\n  return (\n    <div className='str-chat__load-more-button'>\n      <Button\n        appearance='ghost'\n        aria-label={t('loadMore.button.loadMore.label', 'Load more')}\n        data-testid='load-more-button'\n        disabled={isLoading}\n        onClick={onClick}\n        size='sm'\n        variant='secondary'\n      >\n        {isLoading ? <LoadingIndicator /> : childrenOrDefaultString}\n      </Button>\n    </div>\n  );\n};\n\nexport const LoadMoreButton = React.memo(\n  UnMemoizedLoadMoreButton,\n) as typeof UnMemoizedLoadMoreButton;\n"],"mappings":";;;;;;AAaA,IAAM,4BAA4B,EAChC,UACA,WACA,cAC4C;CAC5C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,0BACJ,YAAY,EAAE,kCAAkC,WAAW;CAE7D,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,kCAAkC,WAAW;GAC3D,eAAY;GACZ,UAAU;GACD;GACT,MAAK;GACL,SAAQ;aAEP,YAAY,oBAAC,kBAAD,CAAmB,CAAA,IAAI;EAC9B,CAAA;CACL,CAAA;AAET;AAEA,IAAa,iBAAiB,MAAM,KAClC,wBACF"}

package/dist/es/components/Loading/AttachmentUploadedSizeIndicator.mjs

@@ -2,18 +2,9 @@ import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { FileSizeIndicator } from "../Attachment/components/FileSizeIndicator.mjs";
 import { UploadedSizeIndicator } from "./UploadedSizeIndicator.mjs";
 import "react";
+import { resolveAttachmentFileSize, resolveAttachmentFullByteSize } from "stream-chat";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Loading/AttachmentUploadedSizeIndicator.tsx
-function resolveAttachmentFullByteSize(attachment) {
-	const fromFile = attachment.localMetadata?.file?.size;
-	if (typeof fromFile === "number" && Number.isFinite(fromFile) && fromFile >= 0) return fromFile;
-	const raw = attachment.file_size;
-	if (typeof raw === "number" && Number.isFinite(raw) && raw >= 0) return raw;
-	if (typeof raw === "string") {
-		const n = parseFloat(raw);
-		if (Number.isFinite(n) && n >= 0) return n;
-	}
-}
 var AttachmentUploadedSizeIndicator = ({ attachment, uploadProgress: liveUploadProgress }) => {
 	const { FileSizeIndicator: FileSizeIndicator$1 = FileSizeIndicator, UploadedSizeIndicator: UploadedSizeIndicator$1 = UploadedSizeIndicator } = useComponentContext();
 	const { uploadState } = attachment.localMetadata ?? {};
@@ -24,7 +15,7 @@ var AttachmentUploadedSizeIndicator = ({ attachment, uploadProgress: liveUploadP
 		fullBytes,
 		uploadedBytes: uploaded
 	});
-	if (uploadState === "finished") return /* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: attachment.file_size });
+	if (uploadState === "finished") return /* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: resolveAttachmentFileSize(attachment) });
 	return null;
 };
 //#endregion

package/dist/es/components/Loading/AttachmentUploadedSizeIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentUploadedSizeIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/AttachmentUploadedSizeIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context';\nimport { FileSizeIndicator as DefaultFileSizeIndicator } from '../Attachment/components/FileSizeIndicator';\nimport { UploadedSizeIndicator as DefaultUploadedSizeIndicator } from './UploadedSizeIndicator';\n\nfunction resolveAttachmentFullByteSize(attachment: {\n  file_size?: number | string;\n  localMetadata?: { file?: { size?: unknown } } | null;\n}): number | undefined {\n  const fromFile = attachment.localMetadata?.file?.size;\n  if (typeof fromFile === 'number' && Number.isFinite(fromFile) && fromFile >= 0) {\n    return fromFile;\n  }\n  const raw = attachment.file_size;\n  if (typeof raw === 'number' && Number.isFinite(raw) && raw >= 0) return raw;\n  if (typeof raw === 'string') {\n    const n = parseFloat(raw);\n    if (Number.isFinite(n) && n >= 0) return n;\n  }\n  return undefined;\n}\n\nexport type AttachmentUploadedSizeIndicatorProps = {\n  /**\n   * Live progress, overriding `localMetadata.uploadProgress`. Required when rendering an\n   * attachment carried by a message: the value stored there is a snapshot frozen when the\n   * message was composed, whereas `client.uploadManager` keeps reporting.\n   */\n  uploadProgress?: number;\n  attachment: {\n    file_size?: number | string;\n    localMetadata?: {\n      file?: { size?: unknown };\n      uploadProgress?: number;\n      uploadState?: string;\n    } | null;\n  };\n};\n\nexport const AttachmentUploadedSizeIndicator = ({\n  attachment,\n  uploadProgress: liveUploadProgress,\n}: AttachmentUploadedSizeIndicatorProps) => {\n  const {\n    FileSizeIndicator = DefaultFileSizeIndicator,\n    UploadedSizeIndicator = DefaultUploadedSizeIndicator,\n  } = useComponentContext();\n  const { uploadState } = attachment.localMetadata ?? {};\n  const uploadProgress = liveUploadProgress ?? attachment.localMetadata?.uploadProgress;\n  const fullBytes = resolveAttachmentFullByteSize(attachment);\n  const uploaded =\n    uploadProgress !== undefined && fullBytes !== undefined\n      ? Math.round((uploadProgress / 100) * fullBytes)\n      : undefined;\n\n  if (uploadState === 'uploading' && uploaded !== undefined && fullBytes !== undefined) {\n    return <UploadedSizeIndicator fullBytes={fullBytes} uploadedBytes={uploaded} />;\n  }\n\n  if (uploadState === 'finished') {\n    return <FileSizeIndicator fileSize={attachment.file_size} />;\n  }\n\n  return null;\n};\n"],"mappings":";;;;;;AAMA,SAAS,8BAA8B,YAGhB;CACrB,MAAM,WAAW,WAAW,eAAe,MAAM;CACjD,IAAI,OAAO,aAAa,YAAY,OAAO,SAAS,QAAQ,KAAK,YAAY,GAC3E,OAAO;CAET,MAAM,MAAM,WAAW;CACvB,IAAI,OAAO,QAAQ,YAAY,OAAO,SAAS,GAAG,KAAK,OAAO,GAAG,OAAO;CACxE,IAAI,OAAO,QAAQ,UAAU;EAC3B,MAAM,IAAI,WAAW,GAAG;EACxB,IAAI,OAAO,SAAS,CAAC,KAAK,KAAK,GAAG,OAAO;CAC3C;AAEF;AAmBA,IAAa,mCAAmC,EAC9C,YACA,gBAAgB,yBAC0B;CAC1C,MAAM,EACJ,mBAAA,sBAAoB,mBACpB,uBAAA,0BAAwB,0BACtB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,WAAW,iBAAiB,CAAC;CACrD,MAAM,iBAAiB,sBAAsB,WAAW,eAAe;CACvE,MAAM,YAAY,8BAA8B,UAAU;CAC1D,MAAM,WACJ,mBAAmB,KAAA,KAAa,cAAc,KAAA,IAC1C,KAAK,MAAO,iBAAiB,MAAO,SAAS,IAC7C,KAAA;CAEN,IAAI,gBAAgB,eAAe,aAAa,KAAA,KAAa,cAAc,KAAA,GACzE,OAAO,oBAAC,yBAAD;EAAkC;EAAW,eAAe;CAAW,CAAA;CAGhF,IAAI,gBAAgB,YAClB,OAAO,oBAAC,qBAAD,EAAmB,UAAU,WAAW,UAAY,CAAA;CAG7D,OAAO;AACT"}
+{"version":3,"file":"AttachmentUploadedSizeIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/AttachmentUploadedSizeIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { resolveAttachmentFileSize, resolveAttachmentFullByteSize } from 'stream-chat';\n\nimport { useComponentContext } from '../../context';\nimport { FileSizeIndicator as DefaultFileSizeIndicator } from '../Attachment/components/FileSizeIndicator';\nimport { UploadedSizeIndicator as DefaultUploadedSizeIndicator } from './UploadedSizeIndicator';\n\nexport type AttachmentUploadedSizeIndicatorProps = {\n  /**\n   * Live progress, overriding `localMetadata.uploadProgress`. Required when rendering an\n   * attachment carried by a message: the value stored there is a snapshot frozen when the\n   * message was composed, whereas `client.uploadManager` keeps reporting.\n   */\n  uploadProgress?: number;\n  attachment: {\n    custom?: { file_size?: number | string } | null;\n    file_size?: number | string;\n    localMetadata?: {\n      file?: { size?: unknown };\n      uploadProgress?: number;\n      uploadState?: string;\n    } | null;\n  };\n};\n\nexport const AttachmentUploadedSizeIndicator = ({\n  attachment,\n  uploadProgress: liveUploadProgress,\n}: AttachmentUploadedSizeIndicatorProps) => {\n  const {\n    FileSizeIndicator = DefaultFileSizeIndicator,\n    UploadedSizeIndicator = DefaultUploadedSizeIndicator,\n  } = useComponentContext();\n  const { uploadState } = attachment.localMetadata ?? {};\n  const uploadProgress = liveUploadProgress ?? attachment.localMetadata?.uploadProgress;\n  const fullBytes = resolveAttachmentFullByteSize(attachment);\n  const uploaded =\n    uploadProgress !== undefined && fullBytes !== undefined\n      ? Math.round((uploadProgress / 100) * fullBytes)\n      : undefined;\n\n  if (uploadState === 'uploading' && uploaded !== undefined && fullBytes !== undefined) {\n    return <UploadedSizeIndicator fullBytes={fullBytes} uploadedBytes={uploaded} />;\n  }\n\n  if (uploadState === 'finished') {\n    return <FileSizeIndicator fileSize={resolveAttachmentFileSize(attachment)} />;\n  }\n\n  return null;\n};\n"],"mappings":";;;;;;;AAyBA,IAAa,mCAAmC,EAC9C,YACA,gBAAgB,yBAC0B;CAC1C,MAAM,EACJ,mBAAA,sBAAoB,mBACpB,uBAAA,0BAAwB,0BACtB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,WAAW,iBAAiB,CAAC;CACrD,MAAM,iBAAiB,sBAAsB,WAAW,eAAe;CACvE,MAAM,YAAY,8BAA8B,UAAU;CAC1D,MAAM,WACJ,mBAAmB,KAAA,KAAa,cAAc,KAAA,IAC1C,KAAK,MAAO,iBAAiB,MAAO,SAAS,IAC7C,KAAA;CAEN,IAAI,gBAAgB,eAAe,aAAa,KAAA,KAAa,cAAc,KAAA,GACzE,OAAO,oBAAC,yBAAD;EAAkC;EAAW,eAAe;CAAW,CAAA;CAGhF,IAAI,gBAAgB,YAClB,OAAO,oBAAC,qBAAD,EAAmB,UAAU,0BAA0B,UAAU,EAAI,CAAA;CAG9E,OAAO;AACT"}

package/dist/es/components/Loading/LoadingErrorIndicator.mjs

@@ -6,9 +6,9 @@ import { jsx } from "react/jsx-runtime";
 * UI component for error indicator in a Channel
 */
 var UnMemoizedLoadingErrorIndicator = ({ error }) => {
-	const { t } = useTranslationContext("LoadingErrorIndicator");
+	const { t } = useTranslationContext();
 	if (!error) return null;
-	return /* @__PURE__ */ jsx("div", { children: t("Error: {{ errorMessage }}", { errorMessage: error.message }) });
+	return /* @__PURE__ */ jsx("div", { children: t("loading.errorIndicator.error.text", "Error: {{ errorMessage }}", { errorMessage: error.message }) });
 };
 var LoadingErrorIndicator = React.memo(UnMemoizedLoadingErrorIndicator, (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message);
 //#endregion

package/dist/es/components/Loading/LoadingErrorIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingErrorIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingErrorIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type LoadingErrorIndicatorProps = {\n  /** Error object */\n  error?: Error | null;\n};\n\n/**\n * UI component for error indicator in a Channel\n */\nconst UnMemoizedLoadingErrorIndicator = ({ error }: LoadingErrorIndicatorProps) => {\n  const { t } = useTranslationContext('LoadingErrorIndicator');\n\n  if (!error) return null;\n\n  return <div>{t('Error: {{ errorMessage }}', { errorMessage: error.message })}</div>;\n};\n\nexport const LoadingErrorIndicator = React.memo(\n  UnMemoizedLoadingErrorIndicator,\n  (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message,\n) as typeof UnMemoizedLoadingErrorIndicator;\n"],"mappings":";;;;;;;AAYA,IAAM,mCAAmC,EAAE,YAAwC;CACjF,MAAM,EAAE,MAAM,sBAAsB,uBAAuB;CAE3D,IAAI,CAAC,OAAO,OAAO;CAEnB,OAAO,oBAAC,OAAD,EAAA,UAAM,EAAE,6BAA6B,EAAE,cAAc,MAAM,QAAQ,CAAC,EAAO,CAAA;AACpF;AAEA,IAAa,wBAAwB,MAAM,KACzC,kCACC,WAAW,cAAc,UAAU,OAAO,YAAY,UAAU,OAAO,OAC1E"}
+{"version":3,"file":"LoadingErrorIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingErrorIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type LoadingErrorIndicatorProps = {\n  /** Error object */\n  error?: Error | null;\n};\n\n/**\n * UI component for error indicator in a Channel\n */\nconst UnMemoizedLoadingErrorIndicator = ({ error }: LoadingErrorIndicatorProps) => {\n  const { t } = useTranslationContext();\n\n  if (!error) return null;\n\n  return (\n    <div>\n      {t('loading.errorIndicator.error.text', 'Error: {{ errorMessage }}', {\n        errorMessage: error.message,\n      })}\n    </div>\n  );\n};\n\nexport const LoadingErrorIndicator = React.memo(\n  UnMemoizedLoadingErrorIndicator,\n  (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message,\n) as typeof UnMemoizedLoadingErrorIndicator;\n"],"mappings":";;;;;;;AAYA,IAAM,mCAAmC,EAAE,YAAwC;CACjF,MAAM,EAAE,MAAM,sBAAsB;CAEpC,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,OAAD,EAAA,UACG,EAAE,qCAAqC,6BAA6B,EACnE,cAAc,MAAM,QACtB,CAAC,EACE,CAAA;AAET;AAEA,IAAa,wBAAwB,MAAM,KACzC,kCACC,WAAW,cAAc,UAAU,OAAO,YAAY,UAAU,OAAO,OAC1E"}

package/dist/es/components/Loading/LoadingIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingIndicator.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons } from '../../context';\nimport type { IconLoading as DefaultIconLoading } from '../Icons';\n\nexport type LoadingIndicatorProps = ComponentProps<typeof DefaultIconLoading>;\n\nexport const LoadingIndicator = (props: LoadingIndicatorProps) => {\n  const { IconLoading } = useComponentContextIcons();\n  return <IconLoading {...props} className='str-chat__loading-indicator' />;\n};\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,gBAAgB,yBAAyB;CACjD,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAO,WAAU;CAA+B,CAAA;AAC1E"}
+{"version":3,"file":"LoadingIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContextIcons } from '../../context';\nimport type { BaseIconProps } from '../Icons/BaseIcon';\n\n// Typed off the icon contract rather than off a concrete icon: the rendered icon now comes from\n// the `IconLoading` slot, which any override can replace.\nexport type LoadingIndicatorProps = BaseIconProps;\n\nexport const LoadingIndicator = (props: LoadingIndicatorProps) => {\n  const { IconLoading } = useComponentContextIcons();\n\n  return <IconLoading {...props} className='str-chat__loading-indicator' />;\n};\n"],"mappings":";;;;AAQA,IAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,gBAAgB,yBAAyB;CAEjD,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAO,WAAU;CAA+B,CAAA;AAC1E"}

package/dist/es/components/Loading/UploadProgressIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadProgressIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/UploadProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context';\nimport { CircularProgressIndicator as DefaultProgressIndicator } from './progress-indicators';\nimport { LoadingIndicator as DefaultLoadingIndicator } from './LoadingIndicator';\n\nexport type UploadProgressIndicatorProps = {\n  /**\n   * Every byte has been sent, but the server has not confirmed yet — see\n   * `UploadRecord.uploadConfirmationPending` in `stream-chat`. Renders the indeterminate indicator, since\n   * a bar sitting at 100% would claim the upload is confirmed while it is not.\n   */\n  uploadConfirmationPending?: boolean;\n  uploadProgress?: number;\n};\n\nexport const UploadProgressIndicator = ({\n  uploadConfirmationPending,\n  uploadProgress,\n}: UploadProgressIndicatorProps) => {\n  const {\n    LoadingIndicator = DefaultLoadingIndicator,\n    ProgressIndicator = DefaultProgressIndicator,\n  } = useComponentContext();\n\n  if (uploadConfirmationPending || uploadProgress === undefined) {\n    return <LoadingIndicator data-testid='loading-indicator' />;\n  }\n\n  return <ProgressIndicator percent={uploadProgress} />;\n};\n"],"mappings":";;;;;;AAgBA,IAAa,2BAA2B,EACtC,2BACA,qBACkC;CAClC,MAAM,EACJ,kBAAA,qBAAmB,kBACnB,oBAAoB,8BAClB,oBAAoB;CAExB,IAAI,6BAA6B,mBAAmB,KAAA,GAClD,OAAO,oBAAC,oBAAD,EAAkB,eAAY,oBAAqB,CAAA;CAG5D,OAAO,oBAAC,mBAAD,EAAmB,SAAS,eAAiB,CAAA;AACtD"}
+{"version":3,"file":"UploadProgressIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/UploadProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context';\nimport { CircularProgressIndicator as DefaultProgressIndicator } from './progress-indicators';\nimport { LoadingIndicator as DefaultLoadingIndicator } from './LoadingIndicator';\n\nexport type UploadProgressIndicatorProps = {\n  /**\n   * Every byte has been sent, but the server has not confirmed yet — see\n   * `UploadRecord.uploadConfirmationPending` in `stream-chat`. Renders the indeterminate\n   * indicator, since a bar sitting at 100% would claim the upload is confirmed while it is not.\n   */\n  uploadConfirmationPending?: boolean;\n  uploadProgress?: number;\n};\n\nexport const UploadProgressIndicator = ({\n  uploadConfirmationPending,\n  uploadProgress,\n}: UploadProgressIndicatorProps) => {\n  const {\n    LoadingIndicator = DefaultLoadingIndicator,\n    ProgressIndicator = DefaultProgressIndicator,\n  } = useComponentContext();\n\n  if (uploadConfirmationPending || uploadProgress === undefined) {\n    return <LoadingIndicator data-testid='loading-indicator' />;\n  }\n\n  return <ProgressIndicator percent={uploadProgress} />;\n};\n"],"mappings":";;;;;;AAgBA,IAAa,2BAA2B,EACtC,2BACA,qBACkC;CAClC,MAAM,EACJ,kBAAA,qBAAmB,kBACnB,oBAAoB,8BAClB,oBAAoB;CAExB,IAAI,6BAA6B,mBAAmB,KAAA,GAClD,OAAO,oBAAC,oBAAD,EAAkB,eAAY,oBAAqB,CAAA;CAG5D,OAAO,oBAAC,mBAAD,EAAmB,SAAS,eAAiB,CAAA;AACtD"}

package/dist/es/components/Loading/progress-indicators.mjs

@@ -6,12 +6,12 @@ var RING_RADIUS = 12;
 var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 /** Circular progress indicator with input from 0 to 100. */
 var CircularProgressIndicator = ({ percent }) => {
-	const { t } = useTranslationContext("CircularProgressIndicator");
+	const { t } = useTranslationContext();
 	const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__circular-progress-indicator str-chat__progress-indicator",
 		children: /* @__PURE__ */ jsxs("svg", {
-			"aria-label": t("aria/Percent complete", { percent }),
+			"aria-label": t("loading.progressIndicators.percentComplete.ariaLabel", "{{percent}} percent complete", { percent }),
 			"aria-valuemax": 100,
 			"aria-valuemin": 0,
 			"aria-valuenow": percent,

package/dist/es/components/Loading/progress-indicators.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicators.mjs","names":[],"sources":["../../../../src/components/Loading/progress-indicators.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type ProgressIndicatorProps = {\n  /** Clamped 0–100 completion. */\n  percent: number;\n};\n\nconst RING_RADIUS = 12;\nconst RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;\n\n/** Circular progress indicator with input from 0 to 100. */\nexport const CircularProgressIndicator = ({ percent }: ProgressIndicatorProps) => {\n  const { t } = useTranslationContext('CircularProgressIndicator');\n  const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);\n\n  return (\n    <div className='str-chat__circular-progress-indicator str-chat__progress-indicator'>\n      <svg\n        aria-label={t('aria/Percent complete', { percent })}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={percent}\n        data-testid='circular-progress-ring'\n        height='100%'\n        role='progressbar'\n        viewBox='0 0 32 32'\n        width='100%'\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <circle\n          cx='16'\n          cy='16'\n          fill='none'\n          r={RING_RADIUS}\n          stroke='currentColor'\n          strokeOpacity={0.35}\n          strokeWidth='2.5'\n        />\n        <circle\n          cx='16'\n          cy='16'\n          fill='none'\n          r={RING_RADIUS}\n          stroke='currentColor'\n          strokeDasharray={RING_CIRCUMFERENCE}\n          strokeDashoffset={dashOffset}\n          strokeLinecap='round'\n          strokeWidth='2.5'\n          transform='rotate(-90 16 16)'\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAM,cAAc;AACpB,IAAM,qBAAqB,IAAI,KAAK,KAAK;;AAGzC,IAAa,6BAA6B,EAAE,cAAsC;CAChF,MAAM,EAAE,MAAM,sBAAsB,2BAA2B;CAC/D,MAAM,aAAa,sBAAsB,IAAI,UAAU;CAEvD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GACE,cAAY,EAAE,yBAAyB,EAAE,QAAQ,CAAC;GAClD,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,eAAY;GACZ,QAAO;GACP,MAAK;GACL,SAAQ;GACR,OAAM;GACN,OAAM;aAVR,CAYE,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,MAAK;IACL,GAAG;IACH,QAAO;IACP,eAAe;IACf,aAAY;GACb,CAAA,GACD,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,MAAK;IACL,GAAG;IACH,QAAO;IACP,iBAAiB;IACjB,kBAAkB;IAClB,eAAc;IACd,aAAY;IACZ,WAAU;GACX,CAAA,CACE;;CACF,CAAA;AAET"}
+{"version":3,"file":"progress-indicators.mjs","names":[],"sources":["../../../../src/components/Loading/progress-indicators.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type ProgressIndicatorProps = {\n  /** Clamped 0–100 completion. */\n  percent: number;\n};\n\nconst RING_RADIUS = 12;\nconst RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;\n\n/** Circular progress indicator with input from 0 to 100. */\nexport const CircularProgressIndicator = ({ percent }: ProgressIndicatorProps) => {\n  const { t } = useTranslationContext();\n  const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);\n\n  return (\n    <div className='str-chat__circular-progress-indicator str-chat__progress-indicator'>\n      <svg\n        aria-label={t(\n          'loading.progressIndicators.percentComplete.ariaLabel',\n          '{{percent}} percent complete',\n          { percent },\n        )}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={percent}\n        data-testid='circular-progress-ring'\n        height='100%'\n        role='progressbar'\n        viewBox='0 0 32 32'\n        width='100%'\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <circle\n          cx='16'\n          cy='16'\n          fill='none'\n          r={RING_RADIUS}\n          stroke='currentColor'\n          strokeOpacity={0.35}\n          strokeWidth='2.5'\n        />\n        <circle\n          cx='16'\n          cy='16'\n          fill='none'\n          r={RING_RADIUS}\n          stroke='currentColor'\n          strokeDasharray={RING_CIRCUMFERENCE}\n          strokeDashoffset={dashOffset}\n          strokeLinecap='round'\n          strokeWidth='2.5'\n          transform='rotate(-90 16 16)'\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAM,cAAc;AACpB,IAAM,qBAAqB,IAAI,KAAK,KAAK;;AAGzC,IAAa,6BAA6B,EAAE,cAAsC;CAChF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,aAAa,sBAAsB,IAAI,UAAU;CAEvD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GACE,cAAY,EACV,wDACA,gCACA,EAAE,QAAQ,CACZ;GACA,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,eAAY;GACZ,QAAO;GACP,MAAK;GACL,SAAQ;GACR,OAAM;GACN,OAAM;aAdR,CAgBE,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,MAAK;IACL,GAAG;IACH,QAAO;IACP,eAAe;IACf,aAAY;GACb,CAAA,GACD,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,MAAK;IACL,GAAG;IACH,QAAO;IACP,iBAAiB;IACjB,kBAAkB;IAClB,eAAc;IACd,aAAY;IACZ,WAAU;GACX,CAAA,CACE;;CACF,CAAA;AAET"}

package/dist/es/components/Location/ShareLocationDialog.mjs

@@ -1,12 +1,12 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
 import { Button } from "../Button/Button.mjs";
 import { ContextMenuBody, ContextMenuButton, ContextMenuRoot } from "../Dialog/components/ContextMenu.mjs";
 import { Prompt } from "../Dialog/components/Prompt.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
 import { Dropdown, useDropdownContext } from "../Form/Dropdown.mjs";
 import { SwitchField } from "../Form/SwitchField.mjs";
-import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
-import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -37,7 +37,7 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 	const [loadingLocation, setLoadingLocation] = useState(false);
 	const [geolocationPositionError, setGeolocationPositionError] = useState(void 0);
 	const validShareDurations = useMemo(() => shareDurations.filter((d) => d >= MIN_LIVE_LOCATION_SHARE_DURATION), [shareDurations]);
-	const selectedDurationLabel = useMemo(() => durations.length > 0 ? t("duration/Share Location", { milliseconds: selectedDuration ?? durations[0] }) : void 0, [
+	const selectedDurationLabel = useMemo(() => durations.length > 0 ? t("duration.shareLocation", { milliseconds: selectedDuration ?? durations[0] }) : void 0, [
 		durations,
 		selectedDuration,
 		t
@@ -74,8 +74,8 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 		children: [
 			/* @__PURE__ */ jsx(Prompt.Header, {
 				close,
-				description: t("Select your current location and optionally enable live location sharing"),
-				title: t("Share Location")
+				description: t("location.shareLocationDialog.description", "Select your current location and optionally enable live location sharing"),
+				title: t("location.shareLocationDialog.shareLocation.title", "Share Location")
 			}),
 			/* @__PURE__ */ jsxs(Prompt.Body, { children: [/* @__PURE__ */ jsx(GeolocationMap, {
 				geolocationPositionError,
@@ -99,7 +99,7 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 							setSelectedDuration(validShareDurations[0]);
 						}
 					},
-					title: t("Share live location for")
+					title: t("location.shareLocationDialog.shareLiveLocation.title", "Share live location for")
 				}), liveLocationSwitchEnabled && selectedDurationLabel && /* @__PURE__ */ jsx("div", {
 					className: "str-chat__live-location-sharing-duration-selector",
 					children: /* @__PURE__ */ jsx(Dropdown, {
@@ -121,7 +121,7 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 						messageComposer.locationComposer.initState();
 						close();
 					},
-					children: t("Cancel")
+					children: t("common.cancel.label", "Cancel")
 				}),
 				/* @__PURE__ */ jsx(Prompt.FooterControlsButtonSecondary, {
 					className: "str-chat__prompt__footer__controls-button--submit",
@@ -139,7 +139,7 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 						close();
 					},
 					type: "submit",
-					children: t("Attach")
+					children: t("location.shareLocationDialog.attach.text", "Attach")
 				}),
 				/* @__PURE__ */ jsx(Prompt.FooterControlsButtonPrimary, {
 					className: "str-chat__prompt__footer__controls-button--submit",
@@ -155,7 +155,7 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 							addNotification({
 								emitter: "ShareLocationDialog",
 								error: e instanceof Error ? e : void 0,
-								message: t("Failed to retrieve location"),
+								message: t("notification.locationGetFailed", "Failed to retrieve location"),
 								severity: "error",
 								type: "browser:location:get:failed"
 							});
@@ -171,7 +171,7 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 							addNotification({
 								emitter: "ShareLocationDialog",
 								error: err instanceof Error ? err : void 0,
-								message: t("Failed to share location"),
+								message: t("notification.locationShareFailed", "Failed to share location"),
 								severity: "error",
 								type: "api:location:share:failed"
 							});
@@ -180,7 +180,7 @@ var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shar
 						close();
 					},
 					type: "submit",
-					children: t("Share")
+					children: t("location.shareLocationDialog.share.text", "Share")
 				})
 			] }) })
 		]
@@ -197,7 +197,7 @@ var DurationDropdownItems = ({ durations, selectDuration, selectedDuration }) =>
 			close();
 		},
 		role: "menuitemradio",
-		children: t("duration/Share Location", { milliseconds: duration })
+		children: t("duration.shareLocation", { milliseconds: duration })
 	}, `duration-${duration}`)) }) });
 };
 //#endregion

package/dist/es/components/Location/ShareLocationDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShareLocationDialog.mjs","names":[],"sources":["../../../../src/components/Location/ShareLocationDialog.tsx"],"sourcesContent":["import React, {\n  type ComponentType,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { ContextMenuBody, ContextMenuButton, ContextMenuRoot, Prompt } from '../Dialog';\nimport {\n  Dropdown,\n  type DropdownTriggerProps,\n  useDropdownContext,\n} from '../Form/Dropdown';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { SwitchField } from '../Form/SwitchField';\nimport { useNotificationApi } from '../Notifications';\nimport type { Coords } from 'stream-chat';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\n\nconst MIN_LIVE_LOCATION_SHARE_DURATION = 60 * 1000; // 1 minute;\n\nconst DEFAULT_SHARE_LOCATION_DURATIONS = [\n  15 * 60 * 1000, // 15 minutes\n  60 * 60 * 1000, // 1 hour\n  8 * 60 * 60 * 1000, // 8 hours\n];\n\nexport type ShareGeolocationMapProps = Partial<Coords> & {\n  loadingLocation: boolean;\n  restartLocationWatching: () => void;\n  geolocationPositionError?: GeolocationPositionError;\n};\n\nexport type ShareLocationDialogProps = {\n  close: () => void;\n  shareDurations?: number[];\n  GeolocationMap?: ComponentType<ShareGeolocationMapProps>;\n  DurationDropdownItems?: ComponentType<DurationDropdownItemsProps>;\n};\n\nconst DefaultGeolocationMap = () => null;\n\nconst LiveLocationDurationTrigger = ({\n  children,\n  onClick,\n  referenceRef,\n  ...props\n}: DropdownTriggerProps) => (\n  <Button\n    {...props}\n    className='str-chat__live-location-sharing-duration-selector__button'\n    onClick={onClick}\n    ref={referenceRef as React.Ref<HTMLButtonElement>}\n    type='button'\n  >\n    {children}\n  </Button>\n);\n\nexport const ShareLocationDialog = ({\n  close,\n  GeolocationMap = DefaultGeolocationMap,\n  shareDurations = DEFAULT_SHARE_LOCATION_DURATIONS,\n}: ShareLocationDialogProps) => {\n  const { IconChevronDown } = useComponentContextIcons();\n\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const messageComposer = useMessageComposerController();\n  const [durations, setDurations] = useState<number[]>([]);\n  const [selectedDuration, setSelectedDuration] = useState<number | undefined>(undefined);\n  const [geolocationPosition, setGeolocationPosition] =\n    useState<GeolocationPosition | null>(null);\n  const [loadingLocation, setLoadingLocation] = useState<boolean>(false);\n  const [geolocationPositionError, setGeolocationPositionError] = useState<\n    GeolocationPositionError | undefined\n  >(undefined);\n\n  const validShareDurations = useMemo(\n    () => shareDurations.filter((d) => d >= MIN_LIVE_LOCATION_SHARE_DURATION),\n    [shareDurations],\n  );\n\n  const selectedDurationLabel = useMemo(\n    () =>\n      durations.length > 0\n        ? t('duration/Share Location', {\n            milliseconds: selectedDuration ?? durations[0],\n          })\n        : undefined,\n    [durations, selectedDuration, t],\n  );\n\n  const durationTriggerProps = useMemo(\n    () => ({\n      children: selectedDurationLabel ? (\n        <>\n          <span>{selectedDurationLabel}</span>\n          <IconChevronDown />\n        </>\n      ) : null,\n    }),\n    [IconChevronDown, selectedDurationLabel],\n  );\n\n  const getPosition = useCallback(\n    (): Promise<GeolocationPosition> =>\n      new Promise((resolve, reject) => {\n        navigator.geolocation.getCurrentPosition(\n          (position) => {\n            resolve(position);\n          },\n          (positionError) => {\n            console.warn(positionError);\n            reject(positionError);\n          },\n          { timeout: 1000 },\n        );\n      }),\n    [],\n  );\n\n  const setupPositionWatching = useCallback(() => {\n    setLoadingLocation(true);\n    const watch = navigator.geolocation.watchPosition(\n      (position) => {\n        setGeolocationPosition(position);\n        setLoadingLocation(false);\n        setGeolocationPositionError(undefined);\n      },\n      (error) => {\n        setGeolocationPosition(null);\n        setLoadingLocation(false);\n        setGeolocationPositionError(error);\n      },\n      { timeout: 1000 },\n    );\n\n    return () => {\n      navigator.geolocation.clearWatch(watch);\n    };\n  }, []);\n\n  useEffect(() => setupPositionWatching(), [setupPositionWatching]);\n\n  const liveLocationSwitchEnabled = durations.length > 0;\n  return (\n    <Prompt.Root\n      className='str-chat__share-location-dialog'\n      data-testid='share-location-dialog'\n    >\n      <Prompt.Header\n        close={close}\n        description={t(\n          'Select your current location and optionally enable live location sharing',\n        )}\n        title={t('Share Location')}\n      />\n      <Prompt.Body>\n        <GeolocationMap\n          geolocationPositionError={geolocationPositionError}\n          latitude={geolocationPosition?.coords.latitude}\n          loadingLocation={loadingLocation}\n          longitude={geolocationPosition?.coords.longitude}\n          restartLocationWatching={setupPositionWatching}\n        />\n        {validShareDurations.length > 0 && (\n          <div\n            className={clsx('str-chat__live-location-activation', {\n              'str-chat__live-location-activation--expanded': liveLocationSwitchEnabled,\n            })}\n          >\n            <SwitchField\n              checked={liveLocationSwitchEnabled}\n              data-testid='share-location-dialog-live-location-switch'\n              disabled={!geolocationPosition}\n              onChange={(e) => {\n                e.stopPropagation();\n                if (liveLocationSwitchEnabled) {\n                  setDurations([]);\n                  setSelectedDuration(undefined);\n                } else {\n                  setDurations(validShareDurations);\n                  setSelectedDuration(validShareDurations[0]);\n                }\n              }}\n              title={t('Share live location for')}\n            />\n            {liveLocationSwitchEnabled && selectedDurationLabel && (\n              <div className='str-chat__live-location-sharing-duration-selector'>\n                <Dropdown\n                  placement='bottom-start'\n                  TriggerComponent={LiveLocationDurationTrigger}\n                  triggerProps={durationTriggerProps}\n                >\n                  <DurationDropdownItems\n                    durations={durations}\n                    selectDuration={setSelectedDuration}\n                    selectedDuration={selectedDuration}\n                  />\n                </Dropdown>\n              </div>\n            )}\n          </div>\n        )}\n      </Prompt.Body>\n      <Prompt.Footer>\n        <Prompt.FooterControls>\n          <Prompt.FooterControlsButtonSecondary\n            className='str-chat__prompt__footer__controls-button--cancel'\n            onClick={() => {\n              messageComposer.locationComposer.initState();\n              close();\n            }}\n          >\n            {t('Cancel')}\n          </Prompt.FooterControlsButtonSecondary>\n          <Prompt.FooterControlsButtonSecondary\n            className='str-chat__prompt__footer__controls-button--submit'\n            disabled={!geolocationPosition}\n            onClick={async () => {\n              let coords = geolocationPosition && {\n                latitude: geolocationPosition.coords.latitude,\n                longitude: geolocationPosition.coords.longitude,\n              };\n              if (!coords) {\n                coords = (await getPosition()).coords;\n              }\n              messageComposer.locationComposer.setData({\n                ...coords,\n                durationMs: selectedDuration,\n              });\n              close();\n            }}\n            type='submit'\n          >\n            {t('Attach')}\n          </Prompt.FooterControlsButtonSecondary>\n          <Prompt.FooterControlsButtonPrimary\n            className='str-chat__prompt__footer__controls-button--submit'\n            disabled={!geolocationPosition}\n            onClick={async () => {\n              let coords = geolocationPosition && {\n                latitude: geolocationPosition.coords.latitude,\n                longitude: geolocationPosition.coords.longitude,\n              };\n              if (!coords) {\n                try {\n                  coords = (await getPosition()).coords;\n                } catch (e) {\n                  addNotification({\n                    emitter: 'ShareLocationDialog',\n                    error: e instanceof Error ? e : undefined,\n                    message: t('Failed to retrieve location'),\n                    severity: 'error',\n                    type: 'browser:location:get:failed',\n                  });\n                  return;\n                }\n              }\n\n              messageComposer.locationComposer.setData({\n                ...coords,\n                durationMs: selectedDuration,\n              });\n              try {\n                await messageComposer.sendLocation();\n              } catch (err) {\n                addNotification({\n                  emitter: 'ShareLocationDialog',\n                  error: err instanceof Error ? err : undefined,\n                  message: t('Failed to share location'),\n                  severity: 'error',\n                  type: 'api:location:share:failed',\n                });\n                return;\n              }\n              close();\n            }}\n            type='submit'\n          >\n            {t('Share')}\n          </Prompt.FooterControlsButtonPrimary>\n        </Prompt.FooterControls>\n      </Prompt.Footer>\n    </Prompt.Root>\n  );\n};\n\nexport type DurationDropdownItemsProps = {\n  durations: number[];\n  selectedDuration?: number;\n  selectDuration: (duration: number) => void;\n};\nconst DurationDropdownItems = ({\n  durations,\n  selectDuration,\n  selectedDuration,\n}: DurationDropdownItemsProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useDropdownContext();\n  return (\n    <ContextMenuRoot>\n      <ContextMenuBody>\n        {durations.map((duration) => (\n          <ContextMenuButton\n            aria-checked={selectedDuration === duration}\n            className='str-chat__live-location-sharing-duration-option'\n            key={`duration-${duration}`}\n            onClick={() => {\n              selectDuration(duration);\n              close();\n            }}\n            role='menuitemradio'\n          >\n            {t('duration/Share Location', { milliseconds: duration })}\n          </ContextMenuButton>\n        ))}\n      </ContextMenuBody>\n    </ContextMenuRoot>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ShareLocationDialog.mjs","names":[],"sources":["../../../../src/components/Location/ShareLocationDialog.tsx"],"sourcesContent":["import React, {\n  type ComponentType,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { ContextMenuBody, ContextMenuButton, ContextMenuRoot, Prompt } from '../Dialog';\nimport {\n  Dropdown,\n  type DropdownTriggerProps,\n  useDropdownContext,\n} from '../Form/Dropdown';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { SwitchField } from '../Form/SwitchField';\nimport { useNotificationApi } from '../Notifications';\nimport type { Coords } from 'stream-chat';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\n\nconst MIN_LIVE_LOCATION_SHARE_DURATION = 60 * 1000; // 1 minute;\n\nconst DEFAULT_SHARE_LOCATION_DURATIONS = [\n  15 * 60 * 1000, // 15 minutes\n  60 * 60 * 1000, // 1 hour\n  8 * 60 * 60 * 1000, // 8 hours\n];\n\nexport type ShareGeolocationMapProps = Partial<Coords> & {\n  loadingLocation: boolean;\n  restartLocationWatching: () => void;\n  geolocationPositionError?: GeolocationPositionError;\n};\n\nexport type ShareLocationDialogProps = {\n  close: () => void;\n  shareDurations?: number[];\n  GeolocationMap?: ComponentType<ShareGeolocationMapProps>;\n  DurationDropdownItems?: ComponentType<DurationDropdownItemsProps>;\n};\n\nconst DefaultGeolocationMap = () => null;\n\nconst LiveLocationDurationTrigger = ({\n  children,\n  onClick,\n  referenceRef,\n  ...props\n}: DropdownTriggerProps) => (\n  <Button\n    {...props}\n    className='str-chat__live-location-sharing-duration-selector__button'\n    onClick={onClick}\n    ref={referenceRef as React.Ref<HTMLButtonElement>}\n    type='button'\n  >\n    {children}\n  </Button>\n);\n\nexport const ShareLocationDialog = ({\n  close,\n  GeolocationMap = DefaultGeolocationMap,\n  shareDurations = DEFAULT_SHARE_LOCATION_DURATIONS,\n}: ShareLocationDialogProps) => {\n  const { IconChevronDown } = useComponentContextIcons();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const messageComposer = useMessageComposerController();\n  const [durations, setDurations] = useState<number[]>([]);\n  const [selectedDuration, setSelectedDuration] = useState<number | undefined>(undefined);\n  const [geolocationPosition, setGeolocationPosition] =\n    useState<GeolocationPosition | null>(null);\n  const [loadingLocation, setLoadingLocation] = useState<boolean>(false);\n  const [geolocationPositionError, setGeolocationPositionError] = useState<\n    GeolocationPositionError | undefined\n  >(undefined);\n\n  const validShareDurations = useMemo(\n    () => shareDurations.filter((d) => d >= MIN_LIVE_LOCATION_SHARE_DURATION),\n    [shareDurations],\n  );\n\n  const selectedDurationLabel = useMemo(\n    () =>\n      durations.length > 0\n        ? t('duration.shareLocation', {\n            milliseconds: selectedDuration ?? durations[0],\n          })\n        : undefined,\n    [durations, selectedDuration, t],\n  );\n\n  const durationTriggerProps = useMemo(\n    () => ({\n      children: selectedDurationLabel ? (\n        <>\n          <span>{selectedDurationLabel}</span>\n          <IconChevronDown />\n        </>\n      ) : null,\n    }),\n    [IconChevronDown, selectedDurationLabel],\n  );\n\n  const getPosition = useCallback(\n    (): Promise<GeolocationPosition> =>\n      new Promise((resolve, reject) => {\n        navigator.geolocation.getCurrentPosition(\n          (position) => {\n            resolve(position);\n          },\n          (positionError) => {\n            console.warn(positionError);\n            reject(positionError);\n          },\n          { timeout: 1000 },\n        );\n      }),\n    [],\n  );\n\n  const setupPositionWatching = useCallback(() => {\n    setLoadingLocation(true);\n    const watch = navigator.geolocation.watchPosition(\n      (position) => {\n        setGeolocationPosition(position);\n        setLoadingLocation(false);\n        setGeolocationPositionError(undefined);\n      },\n      (error) => {\n        setGeolocationPosition(null);\n        setLoadingLocation(false);\n        setGeolocationPositionError(error);\n      },\n      { timeout: 1000 },\n    );\n\n    return () => {\n      navigator.geolocation.clearWatch(watch);\n    };\n  }, []);\n\n  useEffect(() => setupPositionWatching(), [setupPositionWatching]);\n\n  const liveLocationSwitchEnabled = durations.length > 0;\n  return (\n    <Prompt.Root\n      className='str-chat__share-location-dialog'\n      data-testid='share-location-dialog'\n    >\n      <Prompt.Header\n        close={close}\n        description={t(\n          'location.shareLocationDialog.description',\n          'Select your current location and optionally enable live location sharing',\n        )}\n        title={t('location.shareLocationDialog.shareLocation.title', 'Share Location')}\n      />\n      <Prompt.Body>\n        <GeolocationMap\n          geolocationPositionError={geolocationPositionError}\n          latitude={geolocationPosition?.coords.latitude}\n          loadingLocation={loadingLocation}\n          longitude={geolocationPosition?.coords.longitude}\n          restartLocationWatching={setupPositionWatching}\n        />\n        {validShareDurations.length > 0 && (\n          <div\n            className={clsx('str-chat__live-location-activation', {\n              'str-chat__live-location-activation--expanded': liveLocationSwitchEnabled,\n            })}\n          >\n            <SwitchField\n              checked={liveLocationSwitchEnabled}\n              data-testid='share-location-dialog-live-location-switch'\n              disabled={!geolocationPosition}\n              onChange={(e) => {\n                e.stopPropagation();\n                if (liveLocationSwitchEnabled) {\n                  setDurations([]);\n                  setSelectedDuration(undefined);\n                } else {\n                  setDurations(validShareDurations);\n                  setSelectedDuration(validShareDurations[0]);\n                }\n              }}\n              title={t(\n                'location.shareLocationDialog.shareLiveLocation.title',\n                'Share live location for',\n              )}\n            />\n            {liveLocationSwitchEnabled && selectedDurationLabel && (\n              <div className='str-chat__live-location-sharing-duration-selector'>\n                <Dropdown\n                  placement='bottom-start'\n                  TriggerComponent={LiveLocationDurationTrigger}\n                  triggerProps={durationTriggerProps}\n                >\n                  <DurationDropdownItems\n                    durations={durations}\n                    selectDuration={setSelectedDuration}\n                    selectedDuration={selectedDuration}\n                  />\n                </Dropdown>\n              </div>\n            )}\n          </div>\n        )}\n      </Prompt.Body>\n      <Prompt.Footer>\n        <Prompt.FooterControls>\n          <Prompt.FooterControlsButtonSecondary\n            className='str-chat__prompt__footer__controls-button--cancel'\n            onClick={() => {\n              messageComposer.locationComposer.initState();\n              close();\n            }}\n          >\n            {t('common.cancel.label', 'Cancel')}\n          </Prompt.FooterControlsButtonSecondary>\n          <Prompt.FooterControlsButtonSecondary\n            className='str-chat__prompt__footer__controls-button--submit'\n            disabled={!geolocationPosition}\n            onClick={async () => {\n              let coords = geolocationPosition && {\n                latitude: geolocationPosition.coords.latitude,\n                longitude: geolocationPosition.coords.longitude,\n              };\n              if (!coords) {\n                coords = (await getPosition()).coords;\n              }\n              messageComposer.locationComposer.setData({\n                ...coords,\n                durationMs: selectedDuration,\n              });\n              close();\n            }}\n            type='submit'\n          >\n            {t('location.shareLocationDialog.attach.text', 'Attach')}\n          </Prompt.FooterControlsButtonSecondary>\n          <Prompt.FooterControlsButtonPrimary\n            className='str-chat__prompt__footer__controls-button--submit'\n            disabled={!geolocationPosition}\n            onClick={async () => {\n              let coords = geolocationPosition && {\n                latitude: geolocationPosition.coords.latitude,\n                longitude: geolocationPosition.coords.longitude,\n              };\n              if (!coords) {\n                try {\n                  coords = (await getPosition()).coords;\n                } catch (e) {\n                  addNotification({\n                    emitter: 'ShareLocationDialog',\n                    error: e instanceof Error ? e : undefined,\n                    message: t(\n                      'notification.locationGetFailed',\n                      'Failed to retrieve location',\n                    ),\n                    severity: 'error',\n                    type: 'browser:location:get:failed',\n                  });\n                  return;\n                }\n              }\n\n              messageComposer.locationComposer.setData({\n                ...coords,\n                durationMs: selectedDuration,\n              });\n              try {\n                await messageComposer.sendLocation();\n              } catch (err) {\n                addNotification({\n                  emitter: 'ShareLocationDialog',\n                  error: err instanceof Error ? err : undefined,\n                  message: t(\n                    'notification.locationShareFailed',\n                    'Failed to share location',\n                  ),\n                  severity: 'error',\n                  type: 'api:location:share:failed',\n                });\n                return;\n              }\n              close();\n            }}\n            type='submit'\n          >\n            {t('location.shareLocationDialog.share.text', 'Share')}\n          </Prompt.FooterControlsButtonPrimary>\n        </Prompt.FooterControls>\n      </Prompt.Footer>\n    </Prompt.Root>\n  );\n};\n\nexport type DurationDropdownItemsProps = {\n  durations: number[];\n  selectedDuration?: number;\n  selectDuration: (duration: number) => void;\n};\nconst DurationDropdownItems = ({\n  durations,\n  selectDuration,\n  selectedDuration,\n}: DurationDropdownItemsProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useDropdownContext();\n  return (\n    <ContextMenuRoot>\n      <ContextMenuBody>\n        {durations.map((duration) => (\n          <ContextMenuButton\n            aria-checked={selectedDuration === duration}\n            className='str-chat__live-location-sharing-duration-option'\n            key={`duration-${duration}`}\n            onClick={() => {\n              selectDuration(duration);\n              close();\n            }}\n            role='menuitemradio'\n          >\n            {t('duration.shareLocation', { milliseconds: duration })}\n          </ContextMenuButton>\n        ))}\n      </ContextMenuBody>\n    </ContextMenuRoot>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/Location/hooks/useLiveLocationSharingManager.mjs

@@ -47,6 +47,7 @@ var useLiveLocationSharingManager = ({ client, getDeviceId, watchLocation }) =>
 		manager.init();
 		return () => {
 			manager.unregisterSubscriptions();
+			manager.dispose();
 		};
 	}, [manager]);
 	return manager;

package/dist/es/components/Location/hooks/useLiveLocationSharingManager.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveLocationSharingManager.mjs","names":[],"sources":["../../../../../src/components/Location/hooks/useLiveLocationSharingManager.ts"],"sourcesContent":["import { LiveLocationManager } from 'stream-chat';\nimport { useEffect, useMemo } from 'react';\nimport type { LiveLocationManagerConstructorParameters, StreamChat } from 'stream-chat';\n\nconst isMobile = () => /Mobi/i.test(navigator.userAgent);\n/**\n * Checks whether the current browser is Safari.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');\n};\n\n/**\n * Checks whether the current browser is Firefox.\n */\nexport const isFirefox = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Firefox');\n};\n\n/**\n * Checks whether the current browser is Google Chrome.\n */\nexport const isChrome = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Chrome');\n};\n\nconst browser = () => {\n  if (isChrome()) return 'chrome';\n  if (isFirefox()) return 'firefox';\n  if (isSafari()) return 'safari';\n  return 'other';\n};\n\nexport const useLiveLocationSharingManager = ({\n  client,\n  getDeviceId,\n  watchLocation,\n}: Omit<LiveLocationManagerConstructorParameters, 'client' | 'getDeviceId'> & {\n  client?: StreamChat | null;\n  getDeviceId?: () => string;\n}) => {\n  const manager = useMemo(() => {\n    if (!client) return null;\n\n    return new LiveLocationManager({\n      client,\n      getDeviceId:\n        getDeviceId ??\n        (() => `web-${isMobile() ? 'mobile' : 'desktop'}-${browser()}-${client.userID}`),\n      watchLocation,\n    });\n  }, [client, getDeviceId, watchLocation]);\n\n  useEffect(() => {\n    if (!manager) return;\n\n    manager.init();\n\n    return () => {\n      manager.unregisterSubscriptions();\n    };\n  }, [manager]);\n\n  return manager;\n};\n"],"mappings":";;;AAIA,IAAM,iBAAiB,QAAQ,KAAK,UAAU,SAAS;;;;AAIvD,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,iCAAiC,KAAK,UAAU,aAAa,EAAE;AACxE;;;;AAKA,IAAa,kBAAkB;CAC7B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,SAAS;AAChD;;;;AAKA,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,QAAQ;AAC/C;AAEA,IAAM,gBAAgB;CACpB,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,UAAU,GAAG,OAAO;CACxB,IAAI,SAAS,GAAG,OAAO;CACvB,OAAO;AACT;AAEA,IAAa,iCAAiC,EAC5C,QACA,aACA,oBAII;CACJ,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,QAAQ,OAAO;EAEpB,OAAO,IAAI,oBAAoB;GAC7B;GACA,aACE,sBACO,OAAO,SAAS,IAAI,WAAW,UAAU,GAAG,QAAQ,EAAE,GAAG,OAAO;GACzE;EACF,CAAC;CACH,GAAG;EAAC;EAAQ;EAAa;CAAa,CAAC;CAEvC,gBAAgB;EACd,IAAI,CAAC,SAAS;EAEd,QAAQ,KAAK;EAEb,aAAa;GACX,QAAQ,wBAAwB;EAClC;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}
+{"version":3,"file":"useLiveLocationSharingManager.mjs","names":[],"sources":["../../../../../src/components/Location/hooks/useLiveLocationSharingManager.ts"],"sourcesContent":["import { LiveLocationManager } from 'stream-chat';\nimport { useEffect, useMemo } from 'react';\nimport type { LiveLocationManagerConstructorParameters, StreamChat } from 'stream-chat';\n\nconst isMobile = () => /Mobi/i.test(navigator.userAgent);\n/**\n * Checks whether the current browser is Safari.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');\n};\n\n/**\n * Checks whether the current browser is Firefox.\n */\nexport const isFirefox = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Firefox');\n};\n\n/**\n * Checks whether the current browser is Google Chrome.\n */\nexport const isChrome = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Chrome');\n};\n\nconst browser = () => {\n  if (isChrome()) return 'chrome';\n  if (isFirefox()) return 'firefox';\n  if (isSafari()) return 'safari';\n  return 'other';\n};\n\nexport const useLiveLocationSharingManager = ({\n  client,\n  getDeviceId,\n  watchLocation,\n}: Omit<LiveLocationManagerConstructorParameters, 'client' | 'getDeviceId'> & {\n  client?: StreamChat | null;\n  getDeviceId?: () => string;\n}) => {\n  const manager = useMemo(() => {\n    if (!client) return null;\n\n    return new LiveLocationManager({\n      client,\n      getDeviceId:\n        getDeviceId ??\n        (() => `web-${isMobile() ? 'mobile' : 'desktop'}-${browser()}-${client.userID}`),\n      watchLocation,\n    });\n  }, [client, getDeviceId, watchLocation]);\n\n  useEffect(() => {\n    if (!manager) return;\n\n    manager.init();\n\n    return () => {\n      // Two teardowns, because the manager has two lifetimes. `unregisterSubscriptions` is ref-counted\n      // and releases the WS subscriptions; `dispose` releases the configuration subscription, which the\n      // client's configuration registry holds a handle to — without it a manager per memo generation\n      // accumulates for the life of the client.\n      //\n      // Safe to call here even though StrictMode runs cleanup between two mounts of the same instance:\n      // `registerSubscriptions` (via `init`) re-subscribes configuration if it was disposed. That\n      // recovery is a microtask late, because `init` awaits its state fetch first — nothing is lost,\n      // since subscribing applies whatever is registered at that moment.\n      manager.unregisterSubscriptions();\n      manager.dispose();\n    };\n  }, [manager]);\n\n  return manager;\n};\n"],"mappings":";;;AAIA,IAAM,iBAAiB,QAAQ,KAAK,UAAU,SAAS;;;;AAIvD,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,iCAAiC,KAAK,UAAU,aAAa,EAAE;AACxE;;;;AAKA,IAAa,kBAAkB;CAC7B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,SAAS;AAChD;;;;AAKA,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,QAAQ;AAC/C;AAEA,IAAM,gBAAgB;CACpB,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,UAAU,GAAG,OAAO;CACxB,IAAI,SAAS,GAAG,OAAO;CACvB,OAAO;AACT;AAEA,IAAa,iCAAiC,EAC5C,QACA,aACA,oBAII;CACJ,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,QAAQ,OAAO;EAEpB,OAAO,IAAI,oBAAoB;GAC7B;GACA,aACE,sBACO,OAAO,SAAS,IAAI,WAAW,UAAU,GAAG,QAAQ,EAAE,GAAG,OAAO;GACzE;EACF,CAAC;CACH,GAAG;EAAC;EAAQ;EAAa;CAAa,CAAC;CAEvC,gBAAgB;EACd,IAAI,CAAC,SAAS;EAEd,QAAQ,KAAK;EAEb,aAAa;GAUX,QAAQ,wBAAwB;GAChC,QAAQ,QAAQ;EAClB;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorder.mjs

@@ -1,5 +1,5 @@
-import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
 import { MediaRecordingState } from "../classes/MediaRecorderController.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
 import { AudioRecordingPlayback } from "./AudioRecordingPlayback.mjs";
 import { AudioRecordingPreview } from "./AudioRecordingPreview.mjs";
 import { isStopped } from "./recordingStateIdentity.mjs";
@@ -19,10 +19,10 @@ var AudioRecorder = () => {
 		className: "str-chat__audio_recorder",
 		"data-testid": "audio-recorder",
 		children: [(isStopped(recordingState) || state.paused) && recording?.asset_url ? /* @__PURE__ */ jsx(AudioRecordingPlayback, {
-			durationSeconds: recording.duration ?? 0,
-			mimeType: recording.mime_type,
+			durationSeconds: recording.custom?.duration ?? 0,
+			mimeType: recording.custom?.mime_type,
 			src: recording.asset_url,
-			waveformData: recording.waveform_data
+			waveformData: recording.custom?.waveform_data
 		}) : state.recording ? /* @__PURE__ */ jsx(AudioRecordingPreview, {}) : null, /* @__PURE__ */ jsx(AudioRecorderRecordingControls, {})]
 	});
 };

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecorder.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AudioRecordingPlayback } from './AudioRecordingPlayback';\nimport { AudioRecordingPreview } from './AudioRecordingPreview';\nimport { MediaRecordingState } from '../classes';\nimport { useMessageComposerContext } from '../../../context/MessageComposerContext';\nimport { AudioRecorderRecordingControls } from './AudioRecorderRecordingControls';\nimport { isStopped } from './recordingStateIdentity';\n\nexport const AudioRecorder = () => {\n  const {\n    recordingController: { recorder, recording, recordingState },\n  } = useMessageComposerContext();\n\n  const state = useMemo(\n    () => ({\n      paused: recordingState === MediaRecordingState.PAUSED,\n      recording: recordingState === MediaRecordingState.RECORDING,\n      stopped: recordingState === MediaRecordingState.STOPPED,\n    }),\n    [recordingState],\n  );\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__audio_recorder' data-testid={'audio-recorder'}>\n      {(isStopped(recordingState) || state.paused) && recording?.asset_url ? (\n        <AudioRecordingPlayback\n          durationSeconds={recording.duration ?? 0}\n          mimeType={recording.mime_type}\n          src={recording.asset_url}\n          waveformData={recording.waveform_data}\n        />\n      ) : state.recording ? (\n        <AudioRecordingPreview />\n      ) : null}\n\n      <AudioRecorderRecordingControls />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,sBAAsB;CACjC,MAAM,EACJ,qBAAqB,EAAE,UAAU,WAAW,qBAC1C,0BAA0B;CAE9B,MAAM,QAAQ,eACL;EACL,QAAQ,mBAAmB,oBAAoB;EAC/C,WAAW,mBAAmB,oBAAoB;EAClD,SAAS,mBAAmB,oBAAoB;CAClD,IACA,CAAC,cAAc,CACjB;CAEA,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;EAA2B,eAAa;YAAvD,EACI,UAAU,cAAc,KAAK,MAAM,WAAW,WAAW,YACzD,oBAAC,wBAAD;GACE,iBAAiB,UAAU,YAAY;GACvC,UAAU,UAAU;GACpB,KAAK,UAAU;GACf,cAAc,UAAU;EACzB,CAAA,IACC,MAAM,YACR,oBAAC,uBAAD,CAAwB,CAAA,IACtB,MAEJ,oBAAC,gCAAD,CAAiC,CAAA,CAC9B;;AAET"}
+{"version":3,"file":"AudioRecorder.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AudioRecordingPlayback } from './AudioRecordingPlayback';\nimport { AudioRecordingPreview } from './AudioRecordingPreview';\nimport { MediaRecordingState } from '../classes';\nimport { useMessageComposerContext } from '../../../context/MessageComposerContext';\nimport { AudioRecorderRecordingControls } from './AudioRecorderRecordingControls';\nimport { isStopped } from './recordingStateIdentity';\n\nexport const AudioRecorder = () => {\n  const {\n    recordingController: { recorder, recording, recordingState },\n  } = useMessageComposerContext();\n\n  const state = useMemo(\n    () => ({\n      paused: recordingState === MediaRecordingState.PAUSED,\n      recording: recordingState === MediaRecordingState.RECORDING,\n      stopped: recordingState === MediaRecordingState.STOPPED,\n    }),\n    [recordingState],\n  );\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__audio_recorder' data-testid={'audio-recorder'}>\n      {(isStopped(recordingState) || state.paused) && recording?.asset_url ? (\n        <AudioRecordingPlayback\n          durationSeconds={recording.custom?.duration ?? 0}\n          mimeType={recording.custom?.mime_type}\n          src={recording.asset_url}\n          waveformData={recording.custom?.waveform_data}\n        />\n      ) : state.recording ? (\n        <AudioRecordingPreview />\n      ) : null}\n\n      <AudioRecorderRecordingControls />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,sBAAsB;CACjC,MAAM,EACJ,qBAAqB,EAAE,UAAU,WAAW,qBAC1C,0BAA0B;CAE9B,MAAM,QAAQ,eACL;EACL,QAAQ,mBAAmB,oBAAoB;EAC/C,WAAW,mBAAmB,oBAAoB;EAClD,SAAS,mBAAmB,oBAAoB;CAClD,IACA,CAAC,cAAc,CACjB;CAEA,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;EAA2B,eAAa;YAAvD,EACI,UAAU,cAAc,KAAK,MAAM,WAAW,WAAW,YACzD,oBAAC,wBAAD;GACE,iBAAiB,UAAU,QAAQ,YAAY;GAC/C,UAAU,UAAU,QAAQ;GAC5B,KAAK,UAAU;GACf,cAAc,UAAU,QAAQ;EACjC,CAAA,IACC,MAAM,YACR,oBAAC,uBAAD,CAAwB,CAAA,IACtB,MAEJ,oBAAC,gCAAD,CAAiC,CAAA,CAC9B;;AAET"}

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.mjs

@@ -1,11 +1,11 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
-import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { CheckSignIcon } from "../../MessageComposer/icons.mjs";
 import { isRecording } from "./recordingStateIdentity.mjs";
-import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
@@ -16,7 +16,7 @@ var ToggleRecordingButton = () => {
 	const recording = isRecording(recordingState);
 	return /* @__PURE__ */ jsx(Button, {
 		appearance: "outline",
-		"aria-label": recording ? t("aria/Pause recording") : t("aria/Resume recording"),
+		"aria-label": recording ? t("mediaRecorder.audioRecorderRecording.pauseRecording.ariaLabel", "Pause recording") : t("mediaRecorder.audioRecorderRecording.resumeRecording.ariaLabel", "Resume recording"),
 		circular: true,
 		className: "str-chat__audio_recorder__toggle-recording-button",
 		onClick: () => recording ? recorder?.pause() : recorder?.resume(),
@@ -38,7 +38,7 @@ var AudioRecorderRecordingControls = () => {
 		children: [
 			!isRecording(recordingState) && /* @__PURE__ */ jsx(Button, {
 				appearance: "ghost",
-				"aria-label": t("aria/Cancel recording"),
+				"aria-label": t("mediaRecorder.audioRecorderRecording.cancelRecording.ariaLabel", "Cancel recording"),
 				circular: true,
 				className: "str-chat__audio_recorder__cancel-button",
 				"data-testid": "cancel-recording-audio-button",
@@ -47,7 +47,7 @@ var AudioRecorderRecordingControls = () => {
 					recorder.cancel();
 					addNotification({
 						emitter: "AudioRecorder",
-						message: t("Voice message deleted"),
+						message: t("mediaRecorder.audioRecorderRecording.voiceMessageDeleted.text", "Voice message deleted"),
 						severity: "info",
 						type: "audioRecording:cancel:success"
 					});
@@ -59,7 +59,7 @@ var AudioRecorderRecordingControls = () => {
 			/* @__PURE__ */ jsx(ToggleRecordingButton, {}),
 			/* @__PURE__ */ jsx(Button, {
 				appearance: "solid",
-				"aria-label": t("aria/Complete recording"),
+				"aria-label": t("mediaRecorder.audioRecorderRecording.completeRecording.ariaLabel", "Complete recording"),
 				circular: true,
 				className: "str-chat__audio_recorder__stop-button",
 				"data-testid": "audio-recorder-stop-button",

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecorderRecordingControls.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx"],"sourcesContent":["import { CheckSignIcon } from '../../MessageComposer/icons';\nimport React from 'react';\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../../context';\nimport { isRecording } from './recordingStateIdentity';\nimport { Button } from '../../Button';\nimport { useNotificationApi } from '../../Notifications';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\n\nconst ToggleRecordingButton = () => {\n  const { IconPauseFill, IconVoice } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const {\n    recordingController: { recorder, recordingState },\n  } = useMessageComposerContext();\n\n  const recording = isRecording(recordingState);\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={recording ? t('aria/Pause recording') : t('aria/Resume recording')}\n      circular\n      className='str-chat__audio_recorder__toggle-recording-button'\n      onClick={() => (recording ? recorder?.pause() : recorder?.resume())}\n      size='sm'\n      variant='secondary'\n    >\n      {recording ? <IconPauseFill /> : <IconVoice />}\n    </Button>\n  );\n};\n\nexport const AudioRecorderRecordingControls = () => {\n  const { IconDelete } = useComponentContextIcons();\n\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const {\n    recordingController: { completeRecording, recorder, recording, recordingState },\n  } = useMessageComposerContext();\n  const isUploadingFile = recording?.localMetadata?.uploadState === 'uploading';\n  const uploadProgress = recording?.localMetadata?.uploadProgress;\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__audio_recorder__recording-controls'>\n      {!isRecording(recordingState) && (\n        <Button\n          appearance='ghost'\n          aria-label={t('aria/Cancel recording')}\n          circular\n          className='str-chat__audio_recorder__cancel-button'\n          data-testid={'cancel-recording-audio-button'}\n          disabled={isUploadingFile}\n          onClick={() => {\n            recorder.cancel();\n            addNotification({\n              emitter: 'AudioRecorder',\n              message: t('Voice message deleted'),\n              severity: 'info',\n              type: 'audioRecording:cancel:success',\n            });\n          }}\n          size='sm'\n          variant='secondary'\n        >\n          <IconDelete />\n        </Button>\n      )}\n      <ToggleRecordingButton />\n      <Button\n        appearance='solid'\n        aria-label={t('aria/Complete recording')}\n        circular\n        className='str-chat__audio_recorder__stop-button'\n        data-testid='audio-recorder-stop-button'\n        onClick={completeRecording}\n        size='sm'\n        variant='primary'\n      >\n        {isUploadingFile ? (\n          <UploadProgressIndicator uploadProgress={uploadProgress} />\n        ) : (\n          <CheckSignIcon />\n        )}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,8BAA8B;CAClC,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qBAAqB,EAAE,UAAU,qBAC/B,0BAA0B;CAE9B,MAAM,YAAY,YAAY,cAAc;CAE5C,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,YAAY,EAAE,sBAAsB,IAAI,EAAE,uBAAuB;EAC7E,UAAA;EACA,WAAU;EACV,eAAgB,YAAY,UAAU,MAAM,IAAI,UAAU,OAAO;EACjE,MAAK;EACL,SAAQ;YAEP,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA;CACvC,CAAA;AAEZ;AAEA,IAAa,uCAAuC;CAClD,MAAM,EAAE,eAAe,yBAAyB;CAEhD,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qBAAqB,EAAE,mBAAmB,UAAU,WAAW,qBAC7D,0BAA0B;CAC9B,MAAM,kBAAkB,WAAW,eAAe,gBAAgB;CAClE,MAAM,iBAAiB,WAAW,eAAe;CAEjD,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,CAAC,YAAY,cAAc,KAC1B,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EAAE,uBAAuB;IACrC,UAAA;IACA,WAAU;IACV,eAAa;IACb,UAAU;IACV,eAAe;KACb,SAAS,OAAO;KAChB,gBAAgB;MACd,SAAS;MACT,SAAS,EAAE,uBAAuB;MAClC,UAAU;MACV,MAAM;KACR,CAAC;IACH;IACA,MAAK;IACL,SAAQ;cAER,oBAAC,YAAD,CAAa,CAAA;GACP,CAAA;GAEV,oBAAC,uBAAD,CAAwB,CAAA;GACxB,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EAAE,yBAAyB;IACvC,UAAA;IACA,WAAU;IACV,eAAY;IACZ,SAAS;IACT,MAAK;IACL,SAAQ;cAEP,kBACC,oBAAC,yBAAD,EAAyC,eAAiB,CAAA,IAE1D,oBAAC,eAAD,CAAgB,CAAA;GAEZ,CAAA;EACL;;AAET"}
+{"version":3,"file":"AudioRecorderRecordingControls.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx"],"sourcesContent":["import { CheckSignIcon } from '../../MessageComposer/icons';\nimport React from 'react';\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../../context';\nimport { isRecording } from './recordingStateIdentity';\nimport { Button } from '../../Button';\nimport { useNotificationApi } from '../../Notifications';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\n\nconst ToggleRecordingButton = () => {\n  const { IconPauseFill, IconVoice } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const {\n    recordingController: { recorder, recordingState },\n  } = useMessageComposerContext();\n\n  const recording = isRecording(recordingState);\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={\n        recording\n          ? t(\n              'mediaRecorder.audioRecorderRecording.pauseRecording.ariaLabel',\n              'Pause recording',\n            )\n          : t(\n              'mediaRecorder.audioRecorderRecording.resumeRecording.ariaLabel',\n              'Resume recording',\n            )\n      }\n      circular\n      className='str-chat__audio_recorder__toggle-recording-button'\n      onClick={() => (recording ? recorder?.pause() : recorder?.resume())}\n      size='sm'\n      variant='secondary'\n    >\n      {recording ? <IconPauseFill /> : <IconVoice />}\n    </Button>\n  );\n};\n\nexport const AudioRecorderRecordingControls = () => {\n  const { IconDelete } = useComponentContextIcons();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const {\n    recordingController: { completeRecording, recorder, recording, recordingState },\n  } = useMessageComposerContext();\n  const isUploadingFile = recording?.localMetadata?.uploadState === 'uploading';\n  const uploadProgress = recording?.localMetadata?.uploadProgress;\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__audio_recorder__recording-controls'>\n      {!isRecording(recordingState) && (\n        <Button\n          appearance='ghost'\n          aria-label={t(\n            'mediaRecorder.audioRecorderRecording.cancelRecording.ariaLabel',\n            'Cancel recording',\n          )}\n          circular\n          className='str-chat__audio_recorder__cancel-button'\n          data-testid={'cancel-recording-audio-button'}\n          disabled={isUploadingFile}\n          onClick={() => {\n            recorder.cancel();\n            addNotification({\n              emitter: 'AudioRecorder',\n              message: t(\n                'mediaRecorder.audioRecorderRecording.voiceMessageDeleted.text',\n                'Voice message deleted',\n              ),\n              severity: 'info',\n              type: 'audioRecording:cancel:success',\n            });\n          }}\n          size='sm'\n          variant='secondary'\n        >\n          <IconDelete />\n        </Button>\n      )}\n      <ToggleRecordingButton />\n      <Button\n        appearance='solid'\n        aria-label={t(\n          'mediaRecorder.audioRecorderRecording.completeRecording.ariaLabel',\n          'Complete recording',\n        )}\n        circular\n        className='str-chat__audio_recorder__stop-button'\n        data-testid='audio-recorder-stop-button'\n        onClick={completeRecording}\n        size='sm'\n        variant='primary'\n      >\n        {isUploadingFile ? (\n          <UploadProgressIndicator uploadProgress={uploadProgress} />\n        ) : (\n          <CheckSignIcon />\n        )}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,8BAA8B;CAClC,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qBAAqB,EAAE,UAAU,qBAC/B,0BAA0B;CAE9B,MAAM,YAAY,YAAY,cAAc;CAE5C,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cACE,YACI,EACE,iEACA,iBACF,IACA,EACE,kEACA,kBACF;EAEN,UAAA;EACA,WAAU;EACV,eAAgB,YAAY,UAAU,MAAM,IAAI,UAAU,OAAO;EACjE,MAAK;EACL,SAAQ;YAEP,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA;CACvC,CAAA;AAEZ;AAEA,IAAa,uCAAuC;CAClD,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qBAAqB,EAAE,mBAAmB,UAAU,WAAW,qBAC7D,0BAA0B;CAC9B,MAAM,kBAAkB,WAAW,eAAe,gBAAgB;CAClE,MAAM,iBAAiB,WAAW,eAAe;CAEjD,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,CAAC,YAAY,cAAc,KAC1B,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EACV,kEACA,kBACF;IACA,UAAA;IACA,WAAU;IACV,eAAa;IACb,UAAU;IACV,eAAe;KACb,SAAS,OAAO;KAChB,gBAAgB;MACd,SAAS;MACT,SAAS,EACP,iEACA,uBACF;MACA,UAAU;MACV,MAAM;KACR,CAAC;IACH;IACA,MAAK;IACL,SAAQ;cAER,oBAAC,YAAD,CAAa,CAAA;GACP,CAAA;GAEV,oBAAC,uBAAD,CAAwB,CAAA;GACxB,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EACV,oEACA,oBACF;IACA,UAAA;IACA,WAAU;IACV,eAAY;IACZ,SAAS;IACT,MAAK;IACL,SAAQ;cAEP,kBACC,oBAAC,yBAAD,EAAyC,eAAiB,CAAA,IAE1D,oBAAC,eAAD,CAAgB,CAAA;GAEZ,CAAA;EACL;;AAET"}