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

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateIndicator.mjs","names":[],"sources":["../../../../src/components/EmptyStateIndicator/EmptyStateIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContextIcons } from '../../context';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type EmptyStateIndicatorProps = {\n  /** List Type: channel | message */\n  listType?: 'channel' | 'message' | 'thread';\n  messageText?: string;\n};\n\nconst UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {\n  const { listType, messageText } = props;\n\n  const { t } = useTranslationContext('EmptyStateIndicator');\n  const { IconMessageBubble, IconMessageBubbles } = useComponentContextIcons();\n\n  if (listType === 'thread') return null;\n\n  if (listType === 'channel') {\n    const text = t('No conversations yet');\n    return (\n      <div className='str-chat__channel-list-empty'>\n        <IconMessageBubbles />\n        <p role='listitem'>{text}</p>\n      </div>\n    );\n  }\n\n  if (listType === 'message') {\n    const text = t(messageText || 'Send a message to start the conversation');\n    return (\n      <div className='str-chat__empty-channel'>\n        <IconMessageBubble />\n        <p className='str-chat__empty-channel-text' role='listitem'>\n          {text}\n        </p>\n      </div>\n    );\n  }\n\n  return <p>{t('No items exist')}</p>;\n};\n\nexport const EmptyStateIndicator = React.memo(\n  UnMemoizedEmptyStateIndicator,\n) as typeof UnMemoizedEmptyStateIndicator;\n"],"mappings":";;;;;AAWA,IAAM,iCAAiC,UAAoC;CACzE,MAAM,EAAE,UAAU,gBAAgB;CAElC,MAAM,EAAE,MAAM,sBAAsB,qBAAqB;CACzD,MAAM,EAAE,mBAAmB,uBAAuB,yBAAyB;CAE3E,IAAI,aAAa,UAAU,OAAO;CAElC,IAAI,aAAa,WAAW;EAC1B,MAAM,OAAO,EAAE,sBAAsB;EACrC,OACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,KAAD;IAAG,MAAK;cAAY;GAAQ,CAAA,CACzB;;CAET;CAEA,IAAI,aAAa,WAAW;EAC1B,MAAM,OAAO,EAAE,eAAe,0CAA0C;EACxE,OACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,mBAAD,CAAoB,CAAA,GACpB,oBAAC,KAAD;IAAG,WAAU;IAA+B,MAAK;cAC9C;GACA,CAAA,CACA;;CAET;CAEA,OAAO,oBAAC,KAAD,EAAA,UAAI,EAAE,gBAAgB,EAAK,CAAA;AACpC;AAEA,IAAa,sBAAsB,MAAM,KACvC,6BACF"}
+{"version":3,"file":"EmptyStateIndicator.mjs","names":[],"sources":["../../../../src/components/EmptyStateIndicator/EmptyStateIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useComponentContextIcons } from '../../context';\nimport { asDynamicKey } from '../../i18n/utils';\n\nexport type EmptyStateIndicatorProps = {\n  /** List Type: channel | message */\n  listType?: 'channel' | 'message' | 'thread';\n  messageText?: string;\n};\n\nconst UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {\n  const { listType, messageText } = props;\n\n  const { t } = useTranslationContext();\n  const { IconMessageBubble, IconMessageBubbles } = useComponentContextIcons();\n\n  if (listType === 'thread') return null;\n\n  if (listType === 'channel') {\n    const text = t(\n      'emptyState.indicator.noConversationsYet.label',\n      'No conversations yet',\n    );\n    return (\n      <div className='str-chat__channel-list-empty'>\n        <IconMessageBubbles />\n        <p role='listitem'>{text}</p>\n      </div>\n    );\n  }\n\n  if (listType === 'message') {\n    // `messageText` is integrator-supplied and may itself be a translation key, so it is\n    // passed through `t` as-is; only the built-in default carries a key + inline copy.\n    const text = messageText\n      ? t(asDynamicKey(messageText))\n      : t(\n          'emptyState.indicator.startConversation.label',\n          'Send a message to start the conversation',\n        );\n    return (\n      <div className='str-chat__empty-channel'>\n        <IconMessageBubble />\n        <p className='str-chat__empty-channel-text' role='listitem'>\n          {text}\n        </p>\n      </div>\n    );\n  }\n\n  return <p>{t('emptyState.indicator.noItemsExist.text', 'No items exist')}</p>;\n};\n\nexport const EmptyStateIndicator = React.memo(\n  UnMemoizedEmptyStateIndicator,\n) as typeof UnMemoizedEmptyStateIndicator;\n"],"mappings":";;;;;;AAYA,IAAM,iCAAiC,UAAoC;CACzE,MAAM,EAAE,UAAU,gBAAgB;CAElC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,mBAAmB,uBAAuB,yBAAyB;CAE3E,IAAI,aAAa,UAAU,OAAO;CAElC,IAAI,aAAa,WAAW;EAC1B,MAAM,OAAO,EACX,iDACA,sBACF;EACA,OACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,KAAD;IAAG,MAAK;cAAY;GAAQ,CAAA,CACzB;;CAET;CAEA,IAAI,aAAa,WAAW;EAG1B,MAAM,OAAO,cACT,EAAE,aAAa,WAAW,CAAC,IAC3B,EACE,gDACA,0CACF;EACJ,OACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,mBAAD,CAAoB,CAAA,GACpB,oBAAC,KAAD;IAAG,WAAU;IAA+B,MAAK;cAC9C;GACA,CAAA,CACA;;CAET;CAEA,OAAO,oBAAC,KAAD,EAAA,UAAI,EAAE,0CAA0C,gBAAgB,EAAK,CAAA;AAC9E;AAEA,IAAa,sBAAsB,MAAM,KACvC,6BACF"}

package/dist/es/components/Form/Dropdown.mjs

@@ -1,5 +1,5 @@
-import { usePopoverPosition } from "../Dialog/hooks/usePopoverPosition.mjs";
 import { createRovingFocusKeyDownHandler } from "../../a11y/a11yUtils.mjs";
+import { usePopoverPosition } from "../Dialog/hooks/usePopoverPosition.mjs";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -13,12 +13,15 @@ var DropdownContextProvider = ({ children, ...props }) => /* @__PURE__ */ jsx(Dr
 	children
 });
 var useDropdownContext = () => React.useContext(DropdownContext);
-var Dropdown = ({ children, className, matchReferenceWidth = false, onClose, onOpen, placement = "bottom", referenceElement, TriggerComponent, triggerProps }) => {
+var Dropdown = ({ children, className, fitAvailableSpace = false, matchReferenceWidth = false, onClose, onOpen, placement = "bottom", referenceElement, TriggerComponent, triggerProps }) => {
 	const [mountedReferenceElement, setMountedReferenceElement] = useState(null);
 	const resolvedReferenceElement = TriggerComponent ? mountedReferenceElement : referenceElement ?? null;
 	const [isOpen, setIsOpen] = useState(!TriggerComponent);
 	const [floatingElement, setFloatingElement] = useState(null);
-	const { refs, strategy, update, x, y } = usePopoverPosition({ placement });
+	const { refs, strategy, update, x, y } = usePopoverPosition({
+		fitAvailableSpace,
+		placement
+	});
 	useEffect(() => {
 		if (!TriggerComponent) return;
 		setIsOpen(false);

package/dist/es/components/Form/Dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.mjs","names":[],"sources":["../../../../src/components/Form/Dropdown.tsx"],"sourcesContent":["import { FocusScope } from '@react-aria/focus';\nimport clsx from 'clsx';\nimport type {\n  ComponentProps,\n  ComponentType,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { createRovingFocusKeyDownHandler } from '../../a11y/a11yUtils';\nimport {\n  type PopperLikePlacement,\n  usePopoverPosition,\n} from '../Dialog/hooks/usePopoverPosition';\n\nconst DEFAULT_DROPDOWN_ITEM_SELECTOR =\n  '[role=\"option\"]:not(:disabled), [role=\"menuitem\"]:not(:disabled), button:not(:disabled), a:not(:disabled)';\n\nconst isEditableTarget = (target: EventTarget | null) =>\n  target instanceof HTMLInputElement ||\n  target instanceof HTMLTextAreaElement ||\n  (target instanceof HTMLElement && target.isContentEditable);\n\ntype DropdownContextValue = {\n  close(): void;\n};\n\nconst DropdownContext = React.createContext<DropdownContextValue>({\n  close: () => null,\n});\n\ntype DropdownContextProviderProps = DropdownContextValue;\n\nconst DropdownContextProvider = ({\n  children,\n  ...props\n}: PropsWithChildren<DropdownContextProviderProps>) => (\n  <DropdownContext.Provider value={props}>{children}</DropdownContext.Provider>\n);\n\nexport const useDropdownContext = () => React.useContext(DropdownContext);\n\nexport type DropdownTriggerProps = Pick<\n  ComponentProps<'button'>,\n  'aria-expanded' | 'onClick'\n> & {\n  children?: ReactNode;\n  referenceRef?: Ref<HTMLElement>;\n};\n\nexport type DropdownProps = PropsWithChildren<{\n  className?: string;\n  matchReferenceWidth?: boolean;\n  onClose?: () => void;\n  onOpen?: () => void;\n  placement?: PopperLikePlacement;\n  TriggerComponent?: ComponentType<DropdownTriggerProps>;\n  triggerProps?: Omit<DropdownTriggerProps, 'aria-expanded' | 'onClick' | 'referenceRef'>;\n  referenceElement?: HTMLElement | null;\n}>;\n\nexport const Dropdown = ({\n  children,\n  className,\n  matchReferenceWidth = false,\n  onClose,\n  onOpen,\n  placement = 'bottom',\n  referenceElement,\n  TriggerComponent,\n  triggerProps,\n}: DropdownProps) => {\n  const [mountedReferenceElement, setMountedReferenceElement] =\n    useState<HTMLElement | null>(null);\n  const resolvedReferenceElement = TriggerComponent\n    ? mountedReferenceElement\n    : (referenceElement ?? null);\n  const [isOpen, setIsOpen] = useState(!TriggerComponent);\n  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null);\n  const { refs, strategy, update, x, y } = usePopoverPosition({\n    placement,\n  });\n\n  useEffect(() => {\n    if (!TriggerComponent) return;\n    setIsOpen(false);\n  }, [TriggerComponent]);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const open = useCallback(() => {\n    setIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const toggle = useCallback(() => {\n    if (isOpen) {\n      close();\n      return;\n    }\n    open();\n  }, [close, isOpen, open]);\n\n  useEffect(() => {\n    refs.setReference(resolvedReferenceElement);\n  }, [refs, resolvedReferenceElement]);\n\n  useEffect(() => {\n    refs.setFloating(floatingElement);\n  }, [floatingElement, refs]);\n\n  useEffect(() => {\n    if (!isOpen || !floatingElement || !resolvedReferenceElement) return;\n    update?.();\n  }, [floatingElement, isOpen, resolvedReferenceElement, update]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!(event.target instanceof Node)) return;\n      if (floatingElement?.contains(event.target)) return;\n      if (resolvedReferenceElement?.contains(event.target)) return;\n      close();\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [close, floatingElement, isOpen, resolvedReferenceElement]);\n\n  const rovingFocusKeyDownHandler = useMemo(\n    () =>\n      createRovingFocusKeyDownHandler<HTMLElement>({\n        getItems: (event) =>\n          Array.from(\n            event.currentTarget.querySelectorAll<HTMLElement>(\n              DEFAULT_DROPDOWN_ITEM_SELECTOR,\n            ),\n          ),\n      }),\n    [],\n  );\n\n  const escapeConsumedRef = useRef(false);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        event.stopPropagation();\n        escapeConsumedRef.current = true;\n        close();\n        return;\n      }\n      if (isEditableTarget(event.target)) {\n        return;\n      }\n      rovingFocusKeyDownHandler(event);\n    },\n    [close, rovingFocusKeyDownHandler],\n  );\n\n  const suppressEscapeKeyUp = useCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === 'Escape' && escapeConsumedRef.current) {\n      escapeConsumedRef.current = false;\n      event.stopPropagation();\n    }\n  }, []);\n\n  const DropdownTriggerComponent = TriggerComponent;\n\n  const trigger = DropdownTriggerComponent ? (\n    <DropdownTriggerComponent\n      aria-expanded={isOpen}\n      onClick={toggle}\n      referenceRef={setMountedReferenceElement}\n      {...triggerProps}\n    />\n  ) : null;\n\n  const content =\n    isOpen && resolvedReferenceElement ? (\n      <FocusScope autoFocus restoreFocus>\n        <DropdownContextProvider close={close}>\n          <div\n            className={clsx('str-chat__dropdown__items', className)}\n            onClick={close}\n            onKeyDown={handleKeyDown}\n            onKeyUpCapture={suppressEscapeKeyUp}\n            ref={setFloatingElement}\n            role='menu'\n            style={{\n              left: x ?? 0,\n              minWidth: matchReferenceWidth\n                ? resolvedReferenceElement.getBoundingClientRect().width\n                : undefined,\n              position: strategy,\n              top: y ?? 0,\n            }}\n          >\n            {children}\n          </div>\n        </DropdownContextProvider>\n      </FocusScope>\n    ) : null;\n\n  return (\n    <div className='str-chat__dropdown'>\n      {trigger}\n      {content}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAM,iCACJ;AAEF,IAAM,oBAAoB,WACxB,kBAAkB,oBAClB,kBAAkB,uBACjB,kBAAkB,eAAe,OAAO;AAM3C,IAAM,kBAAkB,MAAM,cAAoC,EAChE,aAAa,KACf,CAAC;AAID,IAAM,2BAA2B,EAC/B,UACA,GAAG,YAEH,oBAAC,gBAAgB,UAAjB;CAA0B,OAAO;CAAQ;AAAmC,CAAA;AAG9E,IAAa,2BAA2B,MAAM,WAAW,eAAe;AAqBxE,IAAa,YAAY,EACvB,UACA,WACA,sBAAsB,OACtB,SACA,QACA,YAAY,UACZ,kBACA,kBACA,mBACmB;CACnB,MAAM,CAAC,yBAAyB,8BAC9B,SAA6B,IAAI;CACnC,MAAM,2BAA2B,mBAC7B,0BACC,oBAAoB;CACzB,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC,gBAAgB;CACtD,MAAM,CAAC,iBAAiB,sBAAsB,SAAgC,IAAI;CAClF,MAAM,EAAE,MAAM,UAAU,QAAQ,GAAG,MAAM,mBAAmB,EAC1D,UACF,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,kBAAkB;EACvB,UAAU,KAAK;CACjB,GAAG,CAAC,gBAAgB,CAAC;CAErB,MAAM,QAAQ,kBAAkB;EAC9B,UAAU,KAAK;EACf,UAAU;CACZ,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,OAAO,kBAAkB;EAC7B,UAAU,IAAI;EACd,SAAS;CACX,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,SAAS,kBAAkB;EAC/B,IAAI,QAAQ;GACV,MAAM;GACN;EACF;EACA,KAAK;CACP,GAAG;EAAC;EAAO;EAAQ;CAAI,CAAC;CAExB,gBAAgB;EACd,KAAK,aAAa,wBAAwB;CAC5C,GAAG,CAAC,MAAM,wBAAwB,CAAC;CAEnC,gBAAgB;EACd,KAAK,YAAY,eAAe;CAClC,GAAG,CAAC,iBAAiB,IAAI,CAAC;CAE1B,gBAAgB;EACd,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,0BAA0B;EAC9D,SAAS;CACX,GAAG;EAAC;EAAiB;EAAQ;EAA0B;CAAM,CAAC;CAE9D,gBAAgB;EACd,IAAI,CAAC,QAAQ;EAEb,MAAM,sBAAsB,UAAsB;GAChD,IAAI,EAAE,MAAM,kBAAkB,OAAO;GACrC,IAAI,iBAAiB,SAAS,MAAM,MAAM,GAAG;GAC7C,IAAI,0BAA0B,SAAS,MAAM,MAAM,GAAG;GACtD,MAAM;EACR;EAEA,SAAS,iBAAiB,aAAa,kBAAkB;EAEzD,aAAa;GACX,SAAS,oBAAoB,aAAa,kBAAkB;EAC9D;CACF,GAAG;EAAC;EAAO;EAAiB;EAAQ;CAAwB,CAAC;CAE7D,MAAM,4BAA4B,cAE9B,gCAA6C,EAC3C,WAAW,UACT,MAAM,KACJ,MAAM,cAAc,iBAClB,8BACF,CACF,EACJ,CAAC,GACH,CAAC,CACH;CAEA,MAAM,oBAAoB,OAAO,KAAK;CAEtC,MAAM,gBAAgB,aACnB,UAA4C;EAC3C,IAAI,MAAM,QAAQ,UAAU;GAC1B,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,kBAAkB,UAAU;GAC5B,MAAM;GACN;EACF;EACA,IAAI,iBAAiB,MAAM,MAAM,GAC/B;EAEF,0BAA0B,KAAK;CACjC,GACA,CAAC,OAAO,yBAAyB,CACnC;CAEA,MAAM,sBAAsB,aAAa,UAA4C;EACnF,IAAI,MAAM,QAAQ,YAAY,kBAAkB,SAAS;GACvD,kBAAkB,UAAU;GAC5B,MAAM,gBAAgB;EACxB;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,2BAA2B;CAqCjC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CApCc,2BACd,oBAAC,0BAAD;GACE,iBAAe;GACf,SAAS;GACT,cAAc;GACd,GAAI;EACL,CAAA,IACC,MAGF,UAAU,2BACR,oBAAC,YAAD;GAAY,WAAA;GAAU,cAAA;aACpB,oBAAC,yBAAD;IAAgC;cAC9B,oBAAC,OAAD;KACE,WAAW,KAAK,6BAA6B,SAAS;KACtD,SAAS;KACT,WAAW;KACX,gBAAgB;KAChB,KAAK;KACL,MAAK;KACL,OAAO;MACL,MAAM,KAAK;MACX,UAAU,sBACN,yBAAyB,sBAAsB,CAAC,CAAC,QACjD,KAAA;MACJ,UAAU;MACV,KAAK,KAAK;KACZ;KAEC;IACE,CAAA;GACkB,CAAA;EACf,CAAA,IACV,IAMC;;AAET"}
+{"version":3,"file":"Dropdown.mjs","names":[],"sources":["../../../../src/components/Form/Dropdown.tsx"],"sourcesContent":["import { FocusScope } from '@react-aria/focus';\nimport clsx from 'clsx';\nimport type {\n  ComponentProps,\n  ComponentType,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { createRovingFocusKeyDownHandler } from '../../a11y/a11yUtils';\nimport {\n  type PopperLikePlacement,\n  usePopoverPosition,\n} from '../Dialog/hooks/usePopoverPosition';\n\nconst DEFAULT_DROPDOWN_ITEM_SELECTOR =\n  '[role=\"option\"]:not(:disabled), [role=\"menuitem\"]:not(:disabled), button:not(:disabled), a:not(:disabled)';\n\nconst isEditableTarget = (target: EventTarget | null) =>\n  target instanceof HTMLInputElement ||\n  target instanceof HTMLTextAreaElement ||\n  (target instanceof HTMLElement && target.isContentEditable);\n\ntype DropdownContextValue = {\n  close(): void;\n};\n\nconst DropdownContext = React.createContext<DropdownContextValue>({\n  close: () => null,\n});\n\ntype DropdownContextProviderProps = DropdownContextValue;\n\nconst DropdownContextProvider = ({\n  children,\n  ...props\n}: PropsWithChildren<DropdownContextProviderProps>) => (\n  <DropdownContext.Provider value={props}>{children}</DropdownContext.Provider>\n);\n\nexport const useDropdownContext = () => React.useContext(DropdownContext);\n\nexport type DropdownTriggerProps = Pick<\n  ComponentProps<'button'>,\n  'aria-expanded' | 'onClick'\n> & {\n  children?: ReactNode;\n  referenceRef?: Ref<HTMLElement>;\n};\n\nexport type DropdownProps = PropsWithChildren<{\n  className?: string;\n  /** Cap the menu to the space left in the viewport (after flip/shift) so it scrolls within\n   *  the viewport instead of overflowing it. Combine with `overflow: auto` on the menu. */\n  fitAvailableSpace?: boolean;\n  matchReferenceWidth?: boolean;\n  onClose?: () => void;\n  onOpen?: () => void;\n  placement?: PopperLikePlacement;\n  TriggerComponent?: ComponentType<DropdownTriggerProps>;\n  triggerProps?: Omit<DropdownTriggerProps, 'aria-expanded' | 'onClick' | 'referenceRef'>;\n  referenceElement?: HTMLElement | null;\n}>;\n\nexport const Dropdown = ({\n  children,\n  className,\n  fitAvailableSpace = false,\n  matchReferenceWidth = false,\n  onClose,\n  onOpen,\n  placement = 'bottom',\n  referenceElement,\n  TriggerComponent,\n  triggerProps,\n}: DropdownProps) => {\n  const [mountedReferenceElement, setMountedReferenceElement] =\n    useState<HTMLElement | null>(null);\n  const resolvedReferenceElement = TriggerComponent\n    ? mountedReferenceElement\n    : (referenceElement ?? null);\n  const [isOpen, setIsOpen] = useState(!TriggerComponent);\n  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null);\n  const { refs, strategy, update, x, y } = usePopoverPosition({\n    fitAvailableSpace,\n    placement,\n  });\n\n  useEffect(() => {\n    if (!TriggerComponent) return;\n    setIsOpen(false);\n  }, [TriggerComponent]);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const open = useCallback(() => {\n    setIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const toggle = useCallback(() => {\n    if (isOpen) {\n      close();\n      return;\n    }\n    open();\n  }, [close, isOpen, open]);\n\n  useEffect(() => {\n    refs.setReference(resolvedReferenceElement);\n  }, [refs, resolvedReferenceElement]);\n\n  useEffect(() => {\n    refs.setFloating(floatingElement);\n  }, [floatingElement, refs]);\n\n  useEffect(() => {\n    if (!isOpen || !floatingElement || !resolvedReferenceElement) return;\n    update?.();\n  }, [floatingElement, isOpen, resolvedReferenceElement, update]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!(event.target instanceof Node)) return;\n      if (floatingElement?.contains(event.target)) return;\n      if (resolvedReferenceElement?.contains(event.target)) return;\n      close();\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [close, floatingElement, isOpen, resolvedReferenceElement]);\n\n  const rovingFocusKeyDownHandler = useMemo(\n    () =>\n      createRovingFocusKeyDownHandler<HTMLElement>({\n        getItems: (event) =>\n          Array.from(\n            event.currentTarget.querySelectorAll<HTMLElement>(\n              DEFAULT_DROPDOWN_ITEM_SELECTOR,\n            ),\n          ),\n      }),\n    [],\n  );\n\n  const escapeConsumedRef = useRef(false);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        event.stopPropagation();\n        escapeConsumedRef.current = true;\n        close();\n        return;\n      }\n      if (isEditableTarget(event.target)) {\n        return;\n      }\n      rovingFocusKeyDownHandler(event);\n    },\n    [close, rovingFocusKeyDownHandler],\n  );\n\n  const suppressEscapeKeyUp = useCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === 'Escape' && escapeConsumedRef.current) {\n      escapeConsumedRef.current = false;\n      event.stopPropagation();\n    }\n  }, []);\n\n  const DropdownTriggerComponent = TriggerComponent;\n\n  const trigger = DropdownTriggerComponent ? (\n    <DropdownTriggerComponent\n      aria-expanded={isOpen}\n      onClick={toggle}\n      referenceRef={setMountedReferenceElement}\n      {...triggerProps}\n    />\n  ) : null;\n\n  const content =\n    isOpen && resolvedReferenceElement ? (\n      <FocusScope autoFocus restoreFocus>\n        <DropdownContextProvider close={close}>\n          <div\n            className={clsx('str-chat__dropdown__items', className)}\n            onClick={close}\n            onKeyDown={handleKeyDown}\n            onKeyUpCapture={suppressEscapeKeyUp}\n            ref={setFloatingElement}\n            role='menu'\n            style={{\n              left: x ?? 0,\n              minWidth: matchReferenceWidth\n                ? resolvedReferenceElement.getBoundingClientRect().width\n                : undefined,\n              position: strategy,\n              top: y ?? 0,\n            }}\n          >\n            {children}\n          </div>\n        </DropdownContextProvider>\n      </FocusScope>\n    ) : null;\n\n  return (\n    <div className='str-chat__dropdown'>\n      {trigger}\n      {content}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/Form/NumericInput.mjs

@@ -1,7 +1,7 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { useStableId } from "../UtilityComponents/useStableId.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { forwardRef, useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -14,10 +14,10 @@ var parseNumeric = (s) => {
 };
 var clamp = (n, min, max) => Math.min(Math.max(n, min), max);
 var NumericInput = forwardRef(function NumericInput({ className, disabled = false, id: idProp, label, max, min, onChange, step = 1, value, ...inputProps }, ref) {
+	const { IconMinus, IconPlusSmall } = useComponentContextIcons();
 	const generatedId = useStableId();
 	const id = idProp ?? generatedId;
 	const { t } = useTranslationContext();
-	const { IconMinus, IconPlusSmall } = useComponentContextIcons();
 	const num = parseNumeric(value);
 	const minDef = min ?? -Infinity;
 	const maxDef = max ?? Infinity;
@@ -79,7 +79,7 @@ var NumericInput = forwardRef(function NumericInput({ className, disabled = fals
 			children: [
 				/* @__PURE__ */ jsx(Button, {
 					appearance: "outline",
-					"aria-label": t("aria/Decrease value"),
+					"aria-label": t("form.numericInput.decreaseValue.ariaLabel", "Decrease value"),
 					circular: true,
 					className: clsx("str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--decrement"),
 					disabled: disabled || atMin,
@@ -100,13 +100,14 @@ var NumericInput = forwardRef(function NumericInput({ className, disabled = fals
 					onKeyDown: handleKeyDown,
 					ref,
 					role: "spinbutton",
+					size: Math.max(2, value.length),
 					type: "text",
 					value,
 					...inputProps
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					appearance: "outline",
-					"aria-label": t("aria/Increase value"),
+					"aria-label": t("form.numericInput.increaseValue.ariaLabel", "Increase value"),
 					circular: true,
 					className: clsx("str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--increment"),
 					disabled: disabled || atMax,

package/dist/es/components/Form/NumericInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.mjs","names":[],"sources":["../../../../src/components/Form/NumericInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { forwardRef, useCallback } from 'react';\nimport type { ChangeEvent, ComponentProps, KeyboardEvent } from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { Button } from '../Button';\n\nexport type NumericInputProps = Omit<\n  ComponentProps<'input'>,\n  'className' | 'type' | 'value' | 'onChange'\n> & {\n  value: string;\n  onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Optional label above the input */\n  label?: string;\n  /** Minimum value (stepper) */\n  min?: number;\n  /** Maximum value (stepper) */\n  max?: number;\n  /** Step for increment/decrement (default 1) */\n  step?: number;\n  className?: string;\n};\n\nconst parseNumeric = (s: string): number | null => {\n  const trimmed = s.trim();\n  if (trimmed === '') return null;\n  const n = Number(trimmed);\n  return Number.isFinite(n) ? n : null;\n};\n\nconst clamp = (n: number, min: number, max: number): number =>\n  Math.min(Math.max(n, min), max);\n\nexport const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(\n  function NumericInput(\n    {\n      className,\n      disabled = false,\n      id: idProp,\n      label,\n      max,\n      min,\n      onChange,\n      step = 1,\n      value,\n      ...inputProps\n    },\n    ref,\n  ) {\n    const generatedId = useStableId();\n    const id = idProp ?? generatedId;\n    const { t } = useTranslationContext();\n    const { IconMinus, IconPlusSmall } = useComponentContextIcons();\n\n    const num = parseNumeric(value);\n    const minDef = min ?? -Infinity;\n    const maxDef = max ?? Infinity;\n    const atMin = num !== null && num <= minDef;\n    const atMax = num !== null && num >= maxDef;\n\n    const handleInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const next = e.target.value;\n        if (next === '' || /^\\d+$/.test(next)) {\n          onChange(e);\n        }\n      },\n      [onChange],\n    );\n\n    const createChangeEvent = useCallback(\n      (newValue: string): ChangeEvent<HTMLInputElement> =>\n        ({\n          currentTarget: { value: newValue },\n          target: { value: newValue },\n        }) as ChangeEvent<HTMLInputElement>,\n      [],\n    );\n\n    const handleDecrement = useCallback(() => {\n      if (disabled || atMin) return;\n      const next = num !== null ? clamp(num - step, minDef, maxDef) : minDef;\n      onChange(createChangeEvent(String(next)));\n    }, [disabled, atMin, num, step, minDef, maxDef, onChange, createChangeEvent]);\n\n    const handleIncrement = useCallback(() => {\n      if (disabled || atMax) return;\n      const next = num !== null ? clamp(num + step, minDef, maxDef) : minDef;\n      onChange(createChangeEvent(String(next)));\n    }, [disabled, atMax, num, step, minDef, maxDef, onChange, createChangeEvent]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          handleDecrement();\n        } else if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          handleIncrement();\n        }\n      },\n      [handleDecrement, handleIncrement],\n    );\n\n    return (\n      <div\n        className={clsx(\n          'str-chat__form-numeric-input',\n          disabled && 'str-chat__form-numeric-input--disabled',\n          className,\n        )}\n      >\n        {!!label && (\n          <label className='str-chat__form-numeric-input__label' htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <div className={clsx('str-chat__form-numeric-input__wrapper')}>\n          <Button\n            appearance='outline'\n            aria-label={t('aria/Decrease value')}\n            circular\n            className={clsx(\n              'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--decrement',\n            )}\n            disabled={disabled || atMin}\n            onClick={handleDecrement}\n            size='xs'\n            variant='secondary'\n          >\n            <IconMinus className='str-chat__form-numeric-input__stepper-icon' />\n          </Button>\n          <input\n            aria-valuemax={Number.isFinite(maxDef) ? maxDef : undefined}\n            aria-valuemin={Number.isFinite(minDef) ? minDef : undefined}\n            aria-valuenow={num ?? undefined}\n            className='str-chat__form-numeric-input__input'\n            disabled={disabled}\n            id={id}\n            inputMode='numeric'\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            role='spinbutton'\n            type='text'\n            value={value}\n            {...inputProps}\n          />\n          <Button\n            appearance='outline'\n            aria-label={t('aria/Increase value')}\n            circular\n            className={clsx(\n              'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--increment',\n            )}\n            disabled={disabled || atMax}\n            onClick={handleIncrement}\n            size='xs'\n            variant='secondary'\n          >\n            <IconPlusSmall className='str-chat__form-numeric-input__stepper-icon' />\n          </Button>\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"NumericInput.mjs","names":[],"sources":["../../../../src/components/Form/NumericInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { forwardRef, useCallback } from 'react';\nimport type { ChangeEvent, ComponentProps, KeyboardEvent } from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { Button } from '../Button';\n\nexport type NumericInputProps = Omit<\n  ComponentProps<'input'>,\n  'className' | 'type' | 'value' | 'onChange'\n> & {\n  value: string;\n  onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Optional label above the input */\n  label?: string;\n  /** Minimum value (stepper) */\n  min?: number;\n  /** Maximum value (stepper) */\n  max?: number;\n  /** Step for increment/decrement (default 1) */\n  step?: number;\n  className?: string;\n};\n\nconst parseNumeric = (s: string): number | null => {\n  const trimmed = s.trim();\n  if (trimmed === '') return null;\n  const n = Number(trimmed);\n  return Number.isFinite(n) ? n : null;\n};\n\nconst clamp = (n: number, min: number, max: number): number =>\n  Math.min(Math.max(n, min), max);\n\nexport const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(\n  function NumericInput(\n    {\n      className,\n      disabled = false,\n      id: idProp,\n      label,\n      max,\n      min,\n      onChange,\n      step = 1,\n      value,\n      ...inputProps\n    },\n    ref,\n  ) {\n    const { IconMinus, IconPlusSmall } = useComponentContextIcons();\n    const generatedId = useStableId();\n    const id = idProp ?? generatedId;\n    const { t } = useTranslationContext();\n\n    const num = parseNumeric(value);\n    const minDef = min ?? -Infinity;\n    const maxDef = max ?? Infinity;\n    const atMin = num !== null && num <= minDef;\n    const atMax = num !== null && num >= maxDef;\n\n    const handleInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const next = e.target.value;\n        if (next === '' || /^\\d+$/.test(next)) {\n          onChange(e);\n        }\n      },\n      [onChange],\n    );\n\n    const createChangeEvent = useCallback(\n      (newValue: string): ChangeEvent<HTMLInputElement> =>\n        ({\n          currentTarget: { value: newValue },\n          target: { value: newValue },\n        }) as ChangeEvent<HTMLInputElement>,\n      [],\n    );\n\n    const handleDecrement = useCallback(() => {\n      if (disabled || atMin) return;\n      const next = num !== null ? clamp(num - step, minDef, maxDef) : minDef;\n      onChange(createChangeEvent(String(next)));\n    }, [disabled, atMin, num, step, minDef, maxDef, onChange, createChangeEvent]);\n\n    const handleIncrement = useCallback(() => {\n      if (disabled || atMax) return;\n      const next = num !== null ? clamp(num + step, minDef, maxDef) : minDef;\n      onChange(createChangeEvent(String(next)));\n    }, [disabled, atMax, num, step, minDef, maxDef, onChange, createChangeEvent]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          handleDecrement();\n        } else if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          handleIncrement();\n        }\n      },\n      [handleDecrement, handleIncrement],\n    );\n\n    return (\n      <div\n        className={clsx(\n          'str-chat__form-numeric-input',\n          disabled && 'str-chat__form-numeric-input--disabled',\n          className,\n        )}\n      >\n        {!!label && (\n          <label className='str-chat__form-numeric-input__label' htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <div className={clsx('str-chat__form-numeric-input__wrapper')}>\n          <Button\n            appearance='outline'\n            aria-label={t('form.numericInput.decreaseValue.ariaLabel', 'Decrease value')}\n            circular\n            className={clsx(\n              'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--decrement',\n            )}\n            disabled={disabled || atMin}\n            onClick={handleDecrement}\n            size='xs'\n            variant='secondary'\n          >\n            <IconMinus className='str-chat__form-numeric-input__stepper-icon' />\n          </Button>\n          <input\n            aria-valuemax={Number.isFinite(maxDef) ? maxDef : undefined}\n            aria-valuemin={Number.isFinite(minDef) ? minDef : undefined}\n            aria-valuenow={num ?? undefined}\n            className='str-chat__form-numeric-input__input'\n            disabled={disabled}\n            id={id}\n            inputMode='numeric'\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            role='spinbutton'\n            size={Math.max(2, value.length)}\n            type='text'\n            value={value}\n            {...inputProps}\n          />\n          <Button\n            appearance='outline'\n            aria-label={t('form.numericInput.increaseValue.ariaLabel', 'Increase value')}\n            circular\n            className={clsx(\n              'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--increment',\n            )}\n            disabled={disabled || atMax}\n            onClick={handleIncrement}\n            size='xs'\n            variant='secondary'\n          >\n            <IconPlusSmall className='str-chat__form-numeric-input__stepper-icon' />\n          </Button>\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/es/components/Form/SwitchField.mjs

@@ -12,7 +12,7 @@ var SwitchField = ({ children, description, fieldClassName, title, ...props }) =
 	const switchLabelId = `${switchId}-label`;
 	const inputRef = useRef(null);
 	const announce = useContext(AriaLiveAnnouncerContext)?.announce;
-	const { t } = useTranslationContext("SwitchField");
+	const { t } = useTranslationContext();
 	const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
 	const isControlled = checked !== void 0;
 	const isOn = isControlled ? checked : uncontrolledChecked;
@@ -32,7 +32,7 @@ var SwitchField = ({ children, description, fieldClassName, title, ...props }) =
 		onChange?.(event);
 		const setting = resolveAnnouncementName();
 		if (!announce || !setting) return;
-		announce(event.target.checked ? t("aria/{{ setting }} enabled", { setting }) : t("aria/{{ setting }} disabled", { setting }), { priority: "polite" });
+		announce(event.target.checked ? t("form.switchField.enabled.ariaLabel", "{{ setting }} enabled", { setting }) : t("form.switchField.disabled.ariaLabel", "{{ setting }} disabled", { setting }), { priority: "polite" });
 	};
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);

package/dist/es/components/Form/SwitchField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.mjs","names":[],"sources":["../../../../src/components/Form/SwitchField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  PropsWithChildren,\n  ReactNode,\n} from 'react';\nimport React, { isValidElement, useContext, useRef, useState } from 'react';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { AriaLiveAnnouncerContext } from '../Accessibility';\nimport { useTranslationContext } from '../../context';\n\nexport type SwitchFieldProps = Omit<\n  PropsWithChildren<ComponentProps<'input'>>,\n  'children'\n> & {\n  /** Main label content when title/description are not used */\n  children?: ReactNode;\n  /** Optional description line below title */\n  description?: string;\n  /** Class applied to the root div element of the SwitchField component */\n  fieldClassName?: string;\n  /** Optional title line */\n  title?: string;\n};\n\nexport const SwitchField = ({\n  children,\n  description,\n  fieldClassName,\n  title,\n  ...props\n}: SwitchFieldProps) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    checked,\n    defaultChecked,\n    disabled,\n    id,\n    onChange,\n    onKeyDown,\n    ...rest\n  } = props;\n  const generatedSwitchId = useStableId();\n  const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;\n  const switchLabelId = `${switchId}-label`;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  // Read the announcer optionally: a SwitchField may render outside an announcer provider (e.g. in\n  // isolation), where it simply stays silent rather than warning.\n  const announce = useContext(AriaLiveAnnouncerContext)?.announce;\n  const { t } = useTranslationContext('SwitchField');\n\n  const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));\n  const isControlled = checked !== undefined;\n  const isOn = isControlled ? checked : uncontrolledChecked;\n  const isReadOnly = isControlled && onChange === undefined;\n\n  // When no title/aria-label is provided, SwitchField can still be named by a caller-supplied\n  // child element id via aria-labelledby.\n  const childElement = isValidElement<{ id?: string }>(children) ? children : undefined;\n  const childLabelId = childElement?.props.id;\n  // Accessible-name precedence:\n  // 1) explicit aria-labelledby prop\n  // 2) explicit aria-label prop\n  // 3) generated title label id (title path)\n  // 4) caller-supplied child id (children path)\n  const resolvedAriaLabelledBy =\n    ariaLabelledBy ?? (!ariaLabel ? (title ? switchLabelId : childLabelId) : undefined);\n\n  // Name the toggled setting for the announcement: prefer the explicit title/aria-label; otherwise\n  // fall back to the text of the aria-labelledby target (its title row, when present, so the\n  // description is not read out as part of the name).\n  const resolveAnnouncementName = () => {\n    if (title) return title;\n    if (ariaLabel) return ariaLabel;\n    if (resolvedAriaLabelledBy) {\n      const labelEl = document.getElementById(resolvedAriaLabelledBy);\n      const titleEl = labelEl?.querySelector(\n        '.str-chat__form__switch-field__label__text',\n      );\n      return (titleEl?.textContent || labelEl?.textContent || '').trim() || undefined;\n    }\n    return undefined;\n  };\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (!isControlled) {\n      setUncontrolledChecked(event.target.checked);\n    }\n\n    onChange?.(event);\n\n    const setting = resolveAnnouncementName();\n    if (!announce || !setting) return;\n    announce(\n      event.target.checked\n        ? t('aria/{{ setting }} enabled', { setting })\n        : t('aria/{{ setting }} disabled', { setting }),\n      { priority: 'polite' },\n    );\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || event.key !== ' ') return;\n\n    event.preventDefault();\n    event.currentTarget.click();\n  };\n\n  const handleSwitchClick: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (disabled || event.target === inputRef.current) return;\n    inputRef.current?.click();\n  };\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__form__switch-field',\n        fieldClassName,\n        disabled && 'str-chat__form__switch-field--disabled',\n      )}\n    >\n      {title ? (\n        <SwitchFieldLabel\n          description={description}\n          htmlFor={switchId}\n          id={switchLabelId}\n          title={title}\n        />\n      ) : (\n        children\n      )}\n      <Switch\n        {...rest}\n        aria-label={ariaLabel}\n        aria-labelledby={resolvedAriaLabelledBy}\n        checked={isOn}\n        disabled={disabled}\n        id={switchId}\n        on={isOn}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onSwitchClick={handleSwitchClick}\n        readOnly={isReadOnly}\n        switchRef={inputRef}\n      />\n    </div>\n  );\n};\nexport type SwitchProps = Omit<ComponentProps<'input'>, 'type'> & {\n  on?: boolean;\n  onSwitchClick?: MouseEventHandler<HTMLDivElement>;\n  /**\n   * Renders the switch as a visual-only indicator when another element owns interaction.\n   * Example: a button row with a trailing switch indicator must not render an input inside the button.\n   */\n  presentation?: boolean;\n  switchRef?: React.RefObject<HTMLInputElement | null>;\n};\n\nexport const Switch = ({\n  className,\n  on,\n  onSwitchClick,\n  presentation,\n  switchRef,\n  ...props\n}: SwitchProps) => (\n  <div\n    aria-hidden={presentation ? true : undefined}\n    className={clsx('str-chat__form__switch-field__switch', {\n      'str-chat__form__switch-field__switch--on': on,\n    })}\n    onClick={presentation ? undefined : onSwitchClick}\n  >\n    {!presentation && (\n      <input\n        {...props}\n        className={clsx('str-chat__form__switch-field__input', className)}\n        ref={switchRef}\n        role='switch'\n        type='checkbox'\n      />\n    )}\n    <span className='str-chat__form__switch-field__switch-handle' />\n  </div>\n);\n\nexport type SwitchFieldLabelProps = ComponentProps<'label'> & {\n  /** Adds className str-chat__form__switch-field__label--as-error to the root */\n  asError?: boolean;\n  title?: string;\n  description?: string;\n};\n\nexport const SwitchFieldLabel = ({\n  asError,\n  children,\n  className,\n  description,\n  title,\n  ...props\n}: SwitchFieldLabelProps) => (\n  <label\n    className={clsx(\n      'str-chat__form__switch-field__label',\n      { 'str-chat__form__switch-field__label--as-error': asError },\n      className,\n    )}\n    {...props}\n  >\n    <div className='str-chat__form__switch-field__label__content'>\n      {title ? (\n        <>\n          <SwitchFieldTitle>{title}</SwitchFieldTitle>\n          {description != null && description !== '' && (\n            <SwitchFieldDescription>{description}</SwitchFieldDescription>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  </label>\n);\n\nexport type SwitchFieldTitleProps = ComponentProps<'div'> & {\n  title?: string;\n};\n\nexport const SwitchFieldTitle = ({\n  children,\n  className,\n  title,\n  ...props\n}: SwitchFieldTitleProps) => (\n  <div\n    className={clsx('str-chat__form__switch-field__label__text', className)}\n    {...props}\n  >\n    {children ?? title}\n  </div>\n);\n\nexport type SwitchFieldDescriptionProps = ComponentProps<'div'> & {\n  description?: string;\n};\n\nexport const SwitchFieldDescription = ({\n  children,\n  className,\n  description,\n  ...props\n}: SwitchFieldDescriptionProps) => (\n  <div\n    className={clsx('str-chat__form__switch-field__label__description', className)}\n    {...props}\n  >\n    {children ?? description}\n  </div>\n);\n"],"mappings":"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"}
+{"version":3,"file":"SwitchField.mjs","names":[],"sources":["../../../../src/components/Form/SwitchField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  PropsWithChildren,\n  ReactNode,\n} from 'react';\nimport React, { isValidElement, useContext, useRef, useState } from 'react';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { AriaLiveAnnouncerContext } from '../Accessibility';\nimport { useTranslationContext } from '../../context';\n\nexport type SwitchFieldProps = Omit<\n  PropsWithChildren<ComponentProps<'input'>>,\n  'children'\n> & {\n  /** Main label content when title/description are not used */\n  children?: ReactNode;\n  /** Optional description line below title */\n  description?: string;\n  /** Class applied to the root div element of the SwitchField component */\n  fieldClassName?: string;\n  /** Optional title line */\n  title?: string;\n};\n\nexport const SwitchField = ({\n  children,\n  description,\n  fieldClassName,\n  title,\n  ...props\n}: SwitchFieldProps) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    checked,\n    defaultChecked,\n    disabled,\n    id,\n    onChange,\n    onKeyDown,\n    ...rest\n  } = props;\n  const generatedSwitchId = useStableId();\n  const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;\n  const switchLabelId = `${switchId}-label`;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  // Read the announcer optionally: a SwitchField may render outside an announcer provider (e.g. in\n  // isolation), where it simply stays silent rather than warning.\n  const announce = useContext(AriaLiveAnnouncerContext)?.announce;\n  const { t } = useTranslationContext();\n\n  const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));\n  const isControlled = checked !== undefined;\n  const isOn = isControlled ? checked : uncontrolledChecked;\n  const isReadOnly = isControlled && onChange === undefined;\n\n  // When no title/aria-label is provided, SwitchField can still be named by a caller-supplied\n  // child element id via aria-labelledby.\n  const childElement = isValidElement<{ id?: string }>(children) ? children : undefined;\n  const childLabelId = childElement?.props.id;\n  // Accessible-name precedence:\n  // 1) explicit aria-labelledby prop\n  // 2) explicit aria-label prop\n  // 3) generated title label id (title path)\n  // 4) caller-supplied child id (children path)\n  const resolvedAriaLabelledBy =\n    ariaLabelledBy ?? (!ariaLabel ? (title ? switchLabelId : childLabelId) : undefined);\n\n  // Name the toggled setting for the announcement: prefer the explicit title/aria-label; otherwise\n  // fall back to the text of the aria-labelledby target (its title row, when present, so the\n  // description is not read out as part of the name).\n  const resolveAnnouncementName = () => {\n    if (title) return title;\n    if (ariaLabel) return ariaLabel;\n    if (resolvedAriaLabelledBy) {\n      const labelEl = document.getElementById(resolvedAriaLabelledBy);\n      const titleEl = labelEl?.querySelector(\n        '.str-chat__form__switch-field__label__text',\n      );\n      return (titleEl?.textContent || labelEl?.textContent || '').trim() || undefined;\n    }\n    return undefined;\n  };\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (!isControlled) {\n      setUncontrolledChecked(event.target.checked);\n    }\n\n    onChange?.(event);\n\n    const setting = resolveAnnouncementName();\n    if (!announce || !setting) return;\n    announce(\n      event.target.checked\n        ? t('form.switchField.enabled.ariaLabel', '{{ setting }} enabled', { setting })\n        : t('form.switchField.disabled.ariaLabel', '{{ setting }} disabled', { setting }),\n      { priority: 'polite' },\n    );\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || event.key !== ' ') return;\n\n    event.preventDefault();\n    event.currentTarget.click();\n  };\n\n  const handleSwitchClick: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (disabled || event.target === inputRef.current) return;\n    inputRef.current?.click();\n  };\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__form__switch-field',\n        fieldClassName,\n        disabled && 'str-chat__form__switch-field--disabled',\n      )}\n    >\n      {title ? (\n        <SwitchFieldLabel\n          description={description}\n          htmlFor={switchId}\n          id={switchLabelId}\n          title={title}\n        />\n      ) : (\n        children\n      )}\n      <Switch\n        {...rest}\n        aria-label={ariaLabel}\n        aria-labelledby={resolvedAriaLabelledBy}\n        checked={isOn}\n        disabled={disabled}\n        id={switchId}\n        on={isOn}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onSwitchClick={handleSwitchClick}\n        readOnly={isReadOnly}\n        switchRef={inputRef}\n      />\n    </div>\n  );\n};\nexport type SwitchProps = Omit<ComponentProps<'input'>, 'type'> & {\n  on?: boolean;\n  onSwitchClick?: MouseEventHandler<HTMLDivElement>;\n  /**\n   * Renders the switch as a visual-only indicator when another element owns interaction.\n   * Example: a button row with a trailing switch indicator must not render an input inside the button.\n   */\n  presentation?: boolean;\n  switchRef?: React.RefObject<HTMLInputElement | null>;\n};\n\nexport const Switch = ({\n  className,\n  on,\n  onSwitchClick,\n  presentation,\n  switchRef,\n  ...props\n}: SwitchProps) => (\n  <div\n    aria-hidden={presentation ? true : undefined}\n    className={clsx('str-chat__form__switch-field__switch', {\n      'str-chat__form__switch-field__switch--on': on,\n    })}\n    onClick={presentation ? undefined : onSwitchClick}\n  >\n    {!presentation && (\n      <input\n        {...props}\n        className={clsx('str-chat__form__switch-field__input', className)}\n        ref={switchRef}\n        role='switch'\n        type='checkbox'\n      />\n    )}\n    <span className='str-chat__form__switch-field__switch-handle' />\n  </div>\n);\n\nexport type SwitchFieldLabelProps = ComponentProps<'label'> & {\n  /** Adds className str-chat__form__switch-field__label--as-error to the root */\n  asError?: boolean;\n  title?: string;\n  description?: string;\n};\n\nexport const SwitchFieldLabel = ({\n  asError,\n  children,\n  className,\n  description,\n  title,\n  ...props\n}: SwitchFieldLabelProps) => (\n  <label\n    className={clsx(\n      'str-chat__form__switch-field__label',\n      { 'str-chat__form__switch-field__label--as-error': asError },\n      className,\n    )}\n    {...props}\n  >\n    <div className='str-chat__form__switch-field__label__content'>\n      {title ? (\n        <>\n          <SwitchFieldTitle>{title}</SwitchFieldTitle>\n          {description != null && description !== '' && (\n            <SwitchFieldDescription>{description}</SwitchFieldDescription>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  </label>\n);\n\nexport type SwitchFieldTitleProps = ComponentProps<'div'> & {\n  title?: string;\n};\n\nexport const SwitchFieldTitle = ({\n  children,\n  className,\n  title,\n  ...props\n}: SwitchFieldTitleProps) => (\n  <div\n    className={clsx('str-chat__form__switch-field__label__text', className)}\n    {...props}\n  >\n    {children ?? title}\n  </div>\n);\n\nexport type SwitchFieldDescriptionProps = ComponentProps<'div'> & {\n  description?: string;\n};\n\nexport const SwitchFieldDescription = ({\n  children,\n  className,\n  description,\n  ...props\n}: SwitchFieldDescriptionProps) => (\n  <div\n    className={clsx('str-chat__form__switch-field__label__description', className)}\n    {...props}\n  >\n    {children ?? description}\n  </div>\n);\n"],"mappings":"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"}

package/dist/es/components/Form/TextInput.mjs

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";

package/dist/es/components/Gallery/GalleryContext.mjs

@@ -1,3 +1,4 @@
+import { requireContext } from "../../context/requireContext.mjs";
 import { toBaseImageDescriptors } from "../BaseImage/toBaseImageDescriptors.mjs";
 import { createContext, useContext } from "react";
 //#region src/components/Gallery/GalleryContext.tsx
@@ -7,14 +8,7 @@ import { createContext, useContext } from "react";
 */
 var toGalleryItemDescriptors = (...args) => toBaseImageDescriptors(...args);
 var GalleryContext = createContext(void 0);
-var useGalleryContext = () => {
-	const contextValue = useContext(GalleryContext);
-	if (!contextValue) {
-		console.warn(`The useGalleryContext hook was called outside of the GalleryContext provider. Make sure this hook is called within a child of the Gallery component.`);
-		return {};
-	}
-	return contextValue;
-};
+var useGalleryContext = () => requireContext(useContext(GalleryContext), "useGalleryContext", "Gallery");
 //#endregion
 export { GalleryContext, toGalleryItemDescriptors, useGalleryContext };
 

package/dist/es/components/Gallery/GalleryContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryContext.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { toBaseImageDescriptors } from '../BaseImage';\nimport type { BaseImageProps } from '../BaseImage';\nimport type { Dimensions } from '../../types/types';\n\nexport type GalleryItem = Omit<BaseImageProps, 'src'> & {\n  dimensions?: Dimensions;\n  imageUrl?: string;\n  videoThumbnailUrl?: string;\n  videoUrl?: string;\n};\n\n/**\n * Maps an attachment (or link preview) to gallery item fields.\n * Delegates to {@link toBaseImageDescriptors}.\n */\nexport const toGalleryItemDescriptors = (\n  ...args: Parameters<typeof toBaseImageDescriptors>\n):\n  | Pick<\n      GalleryItem,\n      'alt' | 'dimensions' | 'imageUrl' | 'title' | 'videoThumbnailUrl' | 'videoUrl'\n    >\n  | undefined => toBaseImageDescriptors(...args);\n\nexport type GalleryContextValue = {\n  /** Whether clicking the empty gallery background should request close */\n  closeOnBackgroundClick: boolean;\n  /** Currently displayed item index */\n  currentIndex: number;\n  /** Currently displayed item */\n  currentItem: GalleryItem;\n  /** Navigate to a specific index */\n  goToIndex: (index: number) => void;\n  /** Navigate to the next item */\n  goToNext: () => void;\n  /** Navigate to the previous item */\n  goToPrevious: () => void;\n  /** Whether there is a next item */\n  hasNext: boolean;\n  /** Whether there is a previous item */\n  hasPrevious: boolean;\n  /** Total number of items */\n  itemCount: number;\n  /** All items in the gallery */\n  items: GalleryItem[];\n  /** Request closing the gallery viewer */\n  onRequestClose?: () => void;\n};\n\nexport const GalleryContext = createContext<GalleryContextValue | undefined>(undefined);\n\nexport const useGalleryContext = () => {\n  const contextValue = useContext(GalleryContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useGalleryContext hook was called outside of the GalleryContext provider. Make sure this hook is called within a child of the Gallery component.`,\n    );\n\n    return {} as GalleryContextValue;\n  }\n\n  return contextValue;\n};\n"],"mappings":";;;;;;;AAiBA,IAAa,4BACX,GAAG,SAMY,uBAAuB,GAAG,IAAI;AA2B/C,IAAa,iBAAiB,cAA+C,KAAA,CAAS;AAEtF,IAAa,0BAA0B;CACrC,MAAM,eAAe,WAAW,cAAc;CAE9C,IAAI,CAAC,cAAc;EACjB,QAAQ,KACN,sJACF;EAEA,OAAO,CAAC;CACV;CAEA,OAAO;AACT"}
+{"version":3,"file":"GalleryContext.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { UserResponse } from 'stream-chat';\n\nimport { requireContext } from '../../context/requireContext';\nimport { toBaseImageDescriptors } from '../BaseImage';\nimport type { BaseImageProps } from '../BaseImage';\nimport type { Dimensions } from '../../types/types';\n\nexport type GalleryItem = Omit<BaseImageProps, 'src'> & {\n  /** When the media was shared; drives the gallery header timestamp. */\n  createdAt?: string | Date;\n  dimensions?: Dimensions;\n  imageUrl?: string;\n  /** User who shared the media; drives the gallery header title. */\n  user?: UserResponse;\n  videoThumbnailUrl?: string;\n  videoUrl?: string;\n};\n\n/**\n * Maps an attachment (or link preview) to gallery item fields.\n * Delegates to {@link toBaseImageDescriptors}.\n */\nexport const toGalleryItemDescriptors = (\n  ...args: Parameters<typeof toBaseImageDescriptors>\n):\n  | Pick<\n      GalleryItem,\n      'alt' | 'dimensions' | 'imageUrl' | 'title' | 'videoThumbnailUrl' | 'videoUrl'\n    >\n  | undefined => toBaseImageDescriptors(...args);\n\nexport type GalleryContextValue = {\n  /** Whether clicking the empty gallery background should request close */\n  closeOnBackgroundClick: boolean;\n  /** Currently displayed item index */\n  currentIndex: number;\n  /** Currently displayed item */\n  currentItem: GalleryItem;\n  /** Navigate to a specific index */\n  goToIndex: (index: number) => void;\n  /** Navigate to the next item */\n  goToNext: () => void;\n  /** Navigate to the previous item */\n  goToPrevious: () => void;\n  /** Whether there is a next item */\n  hasNext: boolean;\n  /** Whether there is a previous item */\n  hasPrevious: boolean;\n  /** Total number of items */\n  itemCount: number;\n  /** All items in the gallery */\n  items: GalleryItem[];\n  /** Request closing the gallery viewer */\n  onRequestClose?: () => void;\n};\n\nexport const GalleryContext = createContext<GalleryContextValue | undefined>(undefined);\n\nexport const useGalleryContext = () =>\n  requireContext(useContext(GalleryContext), 'useGalleryContext', 'Gallery');\n"],"mappings":";;;;;;;;AAuBA,IAAa,4BACX,GAAG,SAMY,uBAAuB,GAAG,IAAI;AA2B/C,IAAa,iBAAiB,cAA+C,KAAA,CAAS;AAEtF,IAAa,0BACX,eAAe,WAAW,cAAc,GAAG,qBAAqB,SAAS"}

package/dist/es/components/Gallery/GalleryHeader.mjs

@@ -1,28 +1,55 @@
-import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
-import { useMessageContext } from "../../context/MessageContext.mjs";
-import { ModalContext } from "../../context/ModalContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { getDateString, isDate } from "../../i18n/utils.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
-import { MessageTimestamp } from "../Message/MessageTimestamp.mjs";
+import { ModalContext } from "../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { sanitizeUrl } from "@braintree/sanitize-url";
 //#region src/components/Gallery/GalleryHeader.tsx
+var normalizeTimestamp = (timestamp) => {
+	if (!timestamp) return void 0;
+	return isDate(timestamp) ? timestamp.toISOString() : timestamp;
+};
+/**
+* Reads the timestamp off the gallery item: the gallery renders outside any `MessageProvider`, and
+* channel media mixes items from many messages.
+*/
+var GalleryTimestamp = ({ createdAt }) => {
+	const { t, tDateTimeParser } = useTranslationContext();
+	const normalizedTimestamp = normalizeTimestamp(createdAt);
+	const when = useMemo(() => getDateString({
+		messageCreatedAt: normalizedTimestamp,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp.GalleryTimestamp"
+	}), [
+		normalizedTimestamp,
+		t,
+		tDateTimeParser
+	]);
+	if (!when) return null;
+	return /* @__PURE__ */ jsx("time", {
+		className: "str-chat__gallery__timestamp",
+		dateTime: normalizedTimestamp,
+		children: when
+	});
+};
 var GalleryHeader = ({ currentItem }) => {
 	const { IconArrowDownCircle, IconXmark } = useComponentContextIcons();
 	const { t } = useTranslationContext();
-	const { MessageTimestamp: MessageTimestamp$1 = MessageTimestamp } = useComponentContext("GalleryUI");
-	const { isMyMessage, message } = useMessageContext("GalleryUI");
+	const { client } = useChatContext();
 	const modalContext = useContext(ModalContext);
-	const headerTitle = isMyMessage?.() && t("You") || message?.user?.name || message?.user?.id || currentItem.title || t("User uploaded content");
+	const { createdAt, user } = currentItem;
+	const headerTitle = !!user?.id && user.id === client.userID && t("common.you.label", "You") || user?.name || user?.id || currentItem.title || t("common.userUploadedContent.label", "User uploaded content");
 	const downloadUrl = useMemo(() => {
 		const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;
 		if (!rawDownloadUrl) return void 0;
 		const sanitizedUrl = sanitizeUrl(rawDownloadUrl);
 		return sanitizedUrl === "about:blank" ? void 0 : sanitizedUrl;
 	}, [currentItem.imageUrl, currentItem.videoUrl]);
-	const downloadLabel = t("aria/Download attachment");
+	const downloadLabel = t("common.downloadAttachment.ariaLabel", "Download attachment");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__gallery__header",
 		children: [
@@ -35,7 +62,7 @@ var GalleryHeader = ({ currentItem }) => {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "str-chat__gallery__title",
 					children: headerTitle
-				}), message?.created_at ? /* @__PURE__ */ jsx(MessageTimestamp$1, { customClass: "str-chat__gallery__timestamp" }) : null]
+				}), /* @__PURE__ */ jsx(GalleryTimestamp, { createdAt })]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "str-chat__gallery__header-actions",
@@ -49,10 +76,10 @@ var GalleryHeader = ({ currentItem }) => {
 					title: downloadLabel,
 					children: /* @__PURE__ */ jsx(IconArrowDownCircle, {})
 				}) : null, modalContext?.close ? /* @__PURE__ */ jsx(Button, {
-					"aria-label": t("Close"),
+					"aria-label": t("common.close.ariaLabel", "Close"),
 					className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
 					onClick: modalContext.close,
-					title: t("Close"),
+					title: t("common.close.ariaLabel", "Close"),
 					children: /* @__PURE__ */ jsx(IconXmark, {})
 				}) : null]
 			})

package/dist/es/components/Gallery/GalleryHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryHeader.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryHeader.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { type GalleryItem } from './GalleryContext';\nimport { Button } from '../Button';\nimport { MessageTimestamp as DefaultMessageTimestamp } from '../Message/MessageTimestamp';\nimport {\n  ModalContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\ntype GalleryHeaderProps = {\n  currentItem: GalleryItem;\n};\n\nexport const GalleryHeader = ({ currentItem }: GalleryHeaderProps) => {\n  const { IconArrowDownCircle, IconXmark } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const { MessageTimestamp = DefaultMessageTimestamp } = useComponentContext('GalleryUI');\n  const { isMyMessage, message } = useMessageContext('GalleryUI');\n  const modalContext = useContext(ModalContext);\n\n  const headerTitle =\n    (isMyMessage?.() && t('You')) ||\n    message?.user?.name ||\n    message?.user?.id ||\n    currentItem.title ||\n    t('User uploaded content');\n  const downloadUrl = useMemo(() => {\n    const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;\n\n    if (!rawDownloadUrl) return undefined;\n\n    const sanitizedUrl = sanitizeUrl(rawDownloadUrl);\n\n    return sanitizedUrl === 'about:blank' ? undefined : sanitizedUrl;\n  }, [currentItem.imageUrl, currentItem.videoUrl]);\n  const downloadLabel = t('aria/Download attachment');\n\n  return (\n    <div className='str-chat__gallery__header'>\n      <div aria-hidden='true' className='str-chat__gallery__header-spacer' />\n      <div className='str-chat__gallery__header-meta'>\n        <div className='str-chat__gallery__title'>{headerTitle}</div>\n        {message?.created_at ? (\n          <MessageTimestamp customClass='str-chat__gallery__timestamp' />\n        ) : null}\n      </div>\n      <div className='str-chat__gallery__header-actions'>\n        {downloadUrl ? (\n          <a\n            aria-label={downloadLabel}\n            className='str-chat__gallery__action-button str-chat__gallery__action-button--download'\n            download\n            href={downloadUrl}\n            rel='noreferrer'\n            target='_blank'\n            title={downloadLabel}\n          >\n            <IconArrowDownCircle />\n          </a>\n        ) : null}\n        {modalContext?.close ? (\n          <Button\n            aria-label={t('Close')}\n            className='str-chat__gallery__action-button str-chat__gallery__action-button--close'\n            onClick={modalContext.close}\n            title={t('Close')}\n          >\n            <IconXmark />\n          </Button>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,iBAAiB,EAAE,kBAAsC;CACpE,MAAM,EAAE,qBAAqB,cAAc,yBAAyB;CAEpE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,kBAAA,qBAAmB,qBAA4B,oBAAoB,WAAW;CACtF,MAAM,EAAE,aAAa,YAAY,kBAAkB,WAAW;CAC9D,MAAM,eAAe,WAAW,YAAY;CAE5C,MAAM,cACH,cAAc,KAAK,EAAE,KAAK,KAC3B,SAAS,MAAM,QACf,SAAS,MAAM,MACf,YAAY,SACZ,EAAE,uBAAuB;CAC3B,MAAM,cAAc,cAAc;EAChC,MAAM,iBAAiB,YAAY,YAAY,YAAY;EAE3D,IAAI,CAAC,gBAAgB,OAAO,KAAA;EAE5B,MAAM,eAAe,YAAY,cAAc;EAE/C,OAAO,iBAAiB,gBAAgB,KAAA,IAAY;CACtD,GAAG,CAAC,YAAY,UAAU,YAAY,QAAQ,CAAC;CAC/C,MAAM,gBAAgB,EAAE,0BAA0B;CAElD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;GAAoC,CAAA;GACtE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAA4B;IAAiB,CAAA,GAC3D,SAAS,aACR,oBAAC,oBAAD,EAAkB,aAAY,+BAAgC,CAAA,IAC5D,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,cACC,oBAAC,KAAD;KACE,cAAY;KACZ,WAAU;KACV,UAAA;KACA,MAAM;KACN,KAAI;KACJ,QAAO;KACP,OAAO;eAEP,oBAAC,qBAAD,CAAsB,CAAA;IACrB,CAAA,IACD,MACH,cAAc,QACb,oBAAC,QAAD;KACE,cAAY,EAAE,OAAO;KACrB,WAAU;KACV,SAAS,aAAa;KACtB,OAAO,EAAE,OAAO;eAEhB,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA,IACN,IACD;;EACF;;AAET"}
+{"version":3,"file":"GalleryHeader.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryHeader.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { type GalleryItem } from './GalleryContext';\nimport { Button } from '../Button';\nimport {\n  ModalContext,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { getDateString, isDate } from '../../i18n/utils';\n\ntype GalleryHeaderProps = {\n  currentItem: GalleryItem;\n};\n\nconst normalizeTimestamp = (timestamp: GalleryItem['createdAt']) => {\n  if (!timestamp) return undefined;\n  return isDate(timestamp) ? timestamp.toISOString() : timestamp;\n};\n\n/**\n * Reads the timestamp off the gallery item: the gallery renders outside any `MessageProvider`, and\n * channel media mixes items from many messages.\n */\nconst GalleryTimestamp = ({ createdAt }: Pick<GalleryItem, 'createdAt'>) => {\n  const { t, tDateTimeParser } = useTranslationContext();\n  const normalizedTimestamp = normalizeTimestamp(createdAt);\n\n  const when = useMemo(\n    () =>\n      getDateString({\n        messageCreatedAt: normalizedTimestamp,\n        t,\n        tDateTimeParser,\n        timestampTranslationKey: 'timestamp.GalleryTimestamp',\n      }),\n    [normalizedTimestamp, t, tDateTimeParser],\n  );\n\n  if (!when) return null;\n\n  return (\n    <time className='str-chat__gallery__timestamp' dateTime={normalizedTimestamp}>\n      {when}\n    </time>\n  );\n};\n\nexport const GalleryHeader = ({ currentItem }: GalleryHeaderProps) => {\n  const { IconArrowDownCircle, IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const modalContext = useContext(ModalContext);\n  const { createdAt, user } = currentItem;\n\n  const headerTitle =\n    (!!user?.id && user.id === client.userID && t('common.you.label', 'You')) ||\n    user?.name ||\n    user?.id ||\n    currentItem.title ||\n    t('common.userUploadedContent.label', 'User uploaded content');\n  const downloadUrl = useMemo(() => {\n    const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;\n\n    if (!rawDownloadUrl) return undefined;\n\n    const sanitizedUrl = sanitizeUrl(rawDownloadUrl);\n\n    return sanitizedUrl === 'about:blank' ? undefined : sanitizedUrl;\n  }, [currentItem.imageUrl, currentItem.videoUrl]);\n  const downloadLabel = t('common.downloadAttachment.ariaLabel', 'Download attachment');\n\n  return (\n    <div className='str-chat__gallery__header'>\n      <div aria-hidden='true' className='str-chat__gallery__header-spacer' />\n      <div className='str-chat__gallery__header-meta'>\n        <div className='str-chat__gallery__title'>{headerTitle}</div>\n        <GalleryTimestamp createdAt={createdAt} />\n      </div>\n      <div className='str-chat__gallery__header-actions'>\n        {downloadUrl ? (\n          <a\n            aria-label={downloadLabel}\n            className='str-chat__gallery__action-button str-chat__gallery__action-button--download'\n            download\n            href={downloadUrl}\n            rel='noreferrer'\n            target='_blank'\n            title={downloadLabel}\n          >\n            <IconArrowDownCircle />\n          </a>\n        ) : null}\n        {modalContext?.close ? (\n          <Button\n            aria-label={t('common.close.ariaLabel', 'Close')}\n            className='str-chat__gallery__action-button str-chat__gallery__action-button--close'\n            onClick={modalContext.close}\n            title={t('common.close.ariaLabel', 'Close')}\n          >\n            <IconXmark />\n          </Button>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,sBAAsB,cAAwC;CAClE,IAAI,CAAC,WAAW,OAAO,KAAA;CACvB,OAAO,OAAO,SAAS,IAAI,UAAU,YAAY,IAAI;AACvD;;;;;AAMA,IAAM,oBAAoB,EAAE,gBAAgD;CAC1E,MAAM,EAAE,GAAG,oBAAoB,sBAAsB;CACrD,MAAM,sBAAsB,mBAAmB,SAAS;CAExD,MAAM,OAAO,cAET,cAAc;EACZ,kBAAkB;EAClB;EACA;EACA,yBAAyB;CAC3B,CAAC,GACH;EAAC;EAAqB;EAAG;CAAe,CAC1C;CAEA,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,QAAD;EAAM,WAAU;EAA+B,UAAU;YACtD;CACG,CAAA;AAEV;AAEA,IAAa,iBAAiB,EAAE,kBAAsC;CACpE,MAAM,EAAE,qBAAqB,cAAc,yBAAyB;CACpE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,eAAe,WAAW,YAAY;CAC5C,MAAM,EAAE,WAAW,SAAS;CAE5B,MAAM,cACH,CAAC,CAAC,MAAM,MAAM,KAAK,OAAO,OAAO,UAAU,EAAE,oBAAoB,KAAK,KACvE,MAAM,QACN,MAAM,MACN,YAAY,SACZ,EAAE,oCAAoC,uBAAuB;CAC/D,MAAM,cAAc,cAAc;EAChC,MAAM,iBAAiB,YAAY,YAAY,YAAY;EAE3D,IAAI,CAAC,gBAAgB,OAAO,KAAA;EAE5B,MAAM,eAAe,YAAY,cAAc;EAE/C,OAAO,iBAAiB,gBAAgB,KAAA,IAAY;CACtD,GAAG,CAAC,YAAY,UAAU,YAAY,QAAQ,CAAC;CAC/C,MAAM,gBAAgB,EAAE,uCAAuC,qBAAqB;CAEpF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;GAAoC,CAAA;GACtE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAA4B;IAAiB,CAAA,GAC5D,oBAAC,kBAAD,EAA6B,UAAY,CAAA,CACtC;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,cACC,oBAAC,KAAD;KACE,cAAY;KACZ,WAAU;KACV,UAAA;KACA,MAAM;KACN,KAAI;KACJ,QAAO;KACP,OAAO;eAEP,oBAAC,qBAAD,CAAsB,CAAA;IACrB,CAAA,IACD,MACH,cAAc,QACb,oBAAC,QAAD;KACE,cAAY,EAAE,0BAA0B,OAAO;KAC/C,WAAU;KACV,SAAS,aAAa;KACtB,OAAO,EAAE,0BAA0B,OAAO;eAE1C,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA,IACN,IACD;;EACF;;AAET"}

package/dist/es/components/Gallery/GalleryUI.mjs

@@ -1,5 +1,3 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
-import { ModalContext } from "../../context/ModalContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
 import { BaseImage } from "../BaseImage/BaseImage.mjs";
@@ -7,6 +5,8 @@ import { useGalleryContext } from "./GalleryContext.mjs";
 import { GalleryHeader } from "./GalleryHeader.mjs";
 import { VideoPlayer } from "../VideoPlayer/VideoPlayer.mjs";
 import { VideoThumbnail } from "../VideoPlayer/VideoThumbnail.mjs";
+import { ModalContext } from "../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -139,7 +139,7 @@ var GalleryUI = () => {
 			children: [
 				/* @__PURE__ */ jsx(GalleryHeader, { currentItem }),
 				/* @__PURE__ */ jsx(NavButton, {
-					"aria-label": t("Previous image"),
+					"aria-label": t("gallery.ui.previousImage.ariaLabel", "Previous image"),
 					className: clsx("str-chat__gallery__nav-button--prev", !hasPrevious && "str-chat__gallery__nav-button--hidden"),
 					disabled: !hasPrevious,
 					onClick: handleGoToPrevious,
@@ -179,7 +179,7 @@ var GalleryUI = () => {
 					})
 				}),
 				/* @__PURE__ */ jsx(NavButton, {
-					"aria-label": t("Next image"),
+					"aria-label": t("gallery.ui.nextImage.ariaLabel", "Next image"),
 					className: clsx("str-chat__gallery__nav-button--next", !hasNext && "str-chat__gallery__nav-button--hidden"),
 					disabled: !hasNext,
 					onClick: handleGoToNext,

package/dist/es/components/Gallery/GalleryUI.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryUI.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryUI.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { BaseImage } from '../BaseImage';\nimport { GalleryHeader } from './GalleryHeader';\nimport { useGalleryContext } from './GalleryContext';\nimport { Button, type ButtonProps } from '../Button';\nimport {\n  ModalContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { VideoPlayer } from '../VideoPlayer';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\n\nimport clsx from 'clsx';\n\nconst SWIPE_THRESHOLD = 50;\nconst TRANSITION_DURATION = 300;\n\nexport const GalleryUI = () => {\n  const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const {\n    closeOnBackgroundClick,\n    currentIndex,\n    currentItem,\n    goToNext,\n    goToPrevious,\n    hasNext,\n    hasPrevious,\n    itemCount,\n    onRequestClose,\n  } = useGalleryContext();\n  const modalContext = useContext(ModalContext);\n\n  const [showVideo, setShowVideo] = useState(false);\n\n  // Slide transition state\n  const isTransitioningRef = useRef(false);\n  const [slideOffset, setSlideOffset] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const [slideDirection, setSlideDirection] = useState<'forward' | 'backward' | null>(\n    null,\n  );\n\n  // Touch tracking refs\n  // Some touch interactions on the slide container are followed by a click; suppress\n  // that one-shot click so swipe navigation doesn't immediately trigger background close.\n  const ignoreNextClickRef = useRef(false);\n  const touchStartRef = useRef<{ x: number; y: number } | null>(null);\n  const isVerticalSwipeRef = useRef(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Reset video play state when navigating to a new item\n  useEffect(() => {\n    setShowVideo(false);\n  }, [currentIndex]);\n\n  // Slide animation on index change\n  const prevIndexRef = useRef(currentIndex);\n  useEffect(() => {\n    if (prevIndexRef.current === currentIndex) return;\n    const direction = currentIndex > prevIndexRef.current ? 'forward' : 'backward';\n    setSlideDirection(direction);\n    setSlideOffset(0);\n    setIsDragging(false);\n    isTransitioningRef.current = true;\n\n    const timer = setTimeout(() => {\n      setSlideDirection(null);\n      isTransitioningRef.current = false;\n    }, TRANSITION_DURATION);\n\n    prevIndexRef.current = currentIndex;\n    return () => clearTimeout(timer);\n  }, [currentIndex]);\n\n  // Wrapped navigation functions that respect transition lock\n  const handleGoToNext = useCallback(() => {\n    if (isTransitioningRef.current) return;\n    goToNext();\n  }, [goToNext]);\n\n  const handleGoToPrevious = useCallback(() => {\n    if (isTransitioningRef.current) return;\n    goToPrevious();\n  }, [goToPrevious]);\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        handleGoToPrevious();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        handleGoToNext();\n      }\n    },\n    [handleGoToNext, handleGoToPrevious],\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n\n  // Touch event handlers\n  const handleTouchStart = useCallback((event: React.TouchEvent) => {\n    if (isTransitioningRef.current) return;\n    const touch = event.touches[0];\n    ignoreNextClickRef.current = false;\n    touchStartRef.current = { x: touch.clientX, y: touch.clientY };\n    isVerticalSwipeRef.current = false;\n  }, []);\n\n  const handleTouchMove = useCallback(\n    (event: React.TouchEvent) => {\n      if (!touchStartRef.current || isTransitioningRef.current) return;\n\n      const touch = event.touches[0];\n      const deltaX = touch.clientX - touchStartRef.current.x;\n      const deltaY = touch.clientY - touchStartRef.current.y;\n\n      // Determine swipe direction on first significant movement\n      if (!isDragging && !isVerticalSwipeRef.current) {\n        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 10) {\n          ignoreNextClickRef.current = true;\n          isVerticalSwipeRef.current = true;\n          return;\n        }\n        if (Math.abs(deltaX) > 10) {\n          ignoreNextClickRef.current = true;\n          setIsDragging(true);\n        }\n      }\n\n      if (isVerticalSwipeRef.current) return;\n\n      // Constrain drag when at boundaries\n      if ((!hasNext && deltaX < 0) || (!hasPrevious && deltaX > 0)) {\n        setSlideOffset(deltaX * 0.3); // Rubber-band effect\n      } else {\n        setSlideOffset(deltaX);\n      }\n    },\n    [isDragging, hasNext, hasPrevious],\n  );\n\n  const handleTouchEnd = useCallback(() => {\n    if (!touchStartRef.current || isVerticalSwipeRef.current) {\n      if (isVerticalSwipeRef.current) ignoreNextClickRef.current = true;\n      touchStartRef.current = null;\n      return;\n    }\n\n    const offset = slideOffset;\n    if (isDragging || Math.abs(offset) > 10) {\n      ignoreNextClickRef.current = true;\n    }\n    touchStartRef.current = null;\n\n    if (Math.abs(offset) >= SWIPE_THRESHOLD) {\n      if (offset < 0 && hasNext) {\n        goToNext();\n      } else if (offset > 0 && hasPrevious) {\n        goToPrevious();\n      } else {\n        // Snap back — at boundary\n        setSlideOffset(0);\n      }\n    } else {\n      // Snap back — below threshold\n      setSlideOffset(0);\n    }\n\n    setIsDragging(false);\n  }, [slideOffset, hasNext, hasPrevious, goToNext, goToPrevious, isDragging]);\n\n  const requestClose = modalContext?.close ?? onRequestClose;\n  const handleBackgroundClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (event.target !== event.currentTarget) return;\n\n      if (ignoreNextClickRef.current) {\n        ignoreNextClickRef.current = false;\n        return;\n      }\n\n      if (!closeOnBackgroundClick) return;\n\n      requestClose?.();\n    },\n    [closeOnBackgroundClick, requestClose],\n  );\n\n  const mediaStyle: React.CSSProperties =\n    isDragging || (slideOffset !== 0 && slideDirection === null)\n      ? { transform: `translateX(${slideOffset}px)` }\n      : {};\n\n  return (\n    <div className='str-chat__gallery'>\n      <div className='str-chat__gallery__main'>\n        <GalleryHeader currentItem={currentItem} />\n        <NavButton\n          aria-label={t('Previous image')}\n          className={clsx(\n            'str-chat__gallery__nav-button--prev',\n            !hasPrevious && 'str-chat__gallery__nav-button--hidden',\n          )}\n          disabled={!hasPrevious}\n          onClick={handleGoToPrevious}\n        >\n          <IconChevronLeft />\n        </NavButton>\n        <div\n          className='str-chat__gallery__slide-container'\n          onClick={handleBackgroundClick}\n          onTouchEnd={handleTouchEnd}\n          onTouchMove={handleTouchMove}\n          onTouchStart={handleTouchStart}\n          ref={containerRef}\n        >\n          <div\n            className={clsx('str-chat__gallery__media-container', {\n              'str-chat__gallery__media--dragging': isDragging,\n              'str-chat__gallery__media--slide-backward':\n                !isDragging && slideDirection === 'backward',\n              'str-chat__gallery__media--slide-forward':\n                !isDragging && slideDirection === 'forward',\n            })}\n            style={mediaStyle}\n          >\n            {currentItem.videoUrl && currentItem.videoThumbnailUrl ? (\n              <div className='str-chat__gallery__media str-chat__gallery__media--video'>\n                {showVideo ? (\n                  <VideoPlayer isPlaying videoUrl={currentItem.videoUrl} />\n                ) : (\n                  <VideoThumbnail\n                    alt={currentItem.title ?? ''}\n                    onPlay={() => setShowVideo(true)}\n                    src={currentItem.videoThumbnailUrl}\n                  />\n                )}\n              </div>\n            ) : (\n              <div className='str-chat__gallery__media str-chat__gallery__media--image'>\n                <BaseImage alt={currentItem.alt} src={currentItem.imageUrl} />\n              </div>\n            )}\n          </div>\n        </div>\n        <NavButton\n          aria-label={t('Next image')}\n          className={clsx(\n            'str-chat__gallery__nav-button--next',\n            !hasNext && 'str-chat__gallery__nav-button--hidden',\n          )}\n          disabled={!hasNext}\n          onClick={handleGoToNext}\n        >\n          <IconChevronRight />\n        </NavButton>\n      </div>\n      {itemCount > 1 && (\n        <div className='str-chat__gallery__position-indicator'>\n          {currentIndex + 1} of {itemCount}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst NavButton = ({ className, ...props }: ButtonProps) => (\n  <Button {...props} className={clsx('str-chat__gallery__nav-button', className)} />\n);\n"],"mappings":"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"}
+{"version":3,"file":"GalleryUI.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryUI.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { BaseImage } from '../BaseImage';\nimport { GalleryHeader } from './GalleryHeader';\nimport { useGalleryContext } from './GalleryContext';\nimport { Button, type ButtonProps } from '../Button';\nimport {\n  ModalContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { VideoPlayer } from '../VideoPlayer';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\n\nimport clsx from 'clsx';\n\nconst SWIPE_THRESHOLD = 50;\nconst TRANSITION_DURATION = 300;\n\nexport const GalleryUI = () => {\n  const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const {\n    closeOnBackgroundClick,\n    currentIndex,\n    currentItem,\n    goToNext,\n    goToPrevious,\n    hasNext,\n    hasPrevious,\n    itemCount,\n    onRequestClose,\n  } = useGalleryContext();\n  const modalContext = useContext(ModalContext);\n\n  const [showVideo, setShowVideo] = useState(false);\n\n  // Slide transition state\n  const isTransitioningRef = useRef(false);\n  const [slideOffset, setSlideOffset] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const [slideDirection, setSlideDirection] = useState<'forward' | 'backward' | null>(\n    null,\n  );\n\n  // Touch tracking refs\n  // Some touch interactions on the slide container are followed by a click; suppress\n  // that one-shot click so swipe navigation doesn't immediately trigger background close.\n  const ignoreNextClickRef = useRef(false);\n  const touchStartRef = useRef<{ x: number; y: number } | null>(null);\n  const isVerticalSwipeRef = useRef(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Reset video play state when navigating to a new item\n  useEffect(() => {\n    setShowVideo(false);\n  }, [currentIndex]);\n\n  // Slide animation on index change\n  const prevIndexRef = useRef(currentIndex);\n  useEffect(() => {\n    if (prevIndexRef.current === currentIndex) return;\n    const direction = currentIndex > prevIndexRef.current ? 'forward' : 'backward';\n    setSlideDirection(direction);\n    setSlideOffset(0);\n    setIsDragging(false);\n    isTransitioningRef.current = true;\n\n    const timer = setTimeout(() => {\n      setSlideDirection(null);\n      isTransitioningRef.current = false;\n    }, TRANSITION_DURATION);\n\n    prevIndexRef.current = currentIndex;\n    return () => clearTimeout(timer);\n  }, [currentIndex]);\n\n  // Wrapped navigation functions that respect transition lock\n  const handleGoToNext = useCallback(() => {\n    if (isTransitioningRef.current) return;\n    goToNext();\n  }, [goToNext]);\n\n  const handleGoToPrevious = useCallback(() => {\n    if (isTransitioningRef.current) return;\n    goToPrevious();\n  }, [goToPrevious]);\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        handleGoToPrevious();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        handleGoToNext();\n      }\n    },\n    [handleGoToNext, handleGoToPrevious],\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n\n  // Touch event handlers\n  const handleTouchStart = useCallback((event: React.TouchEvent) => {\n    if (isTransitioningRef.current) return;\n    const touch = event.touches[0];\n    ignoreNextClickRef.current = false;\n    touchStartRef.current = { x: touch.clientX, y: touch.clientY };\n    isVerticalSwipeRef.current = false;\n  }, []);\n\n  const handleTouchMove = useCallback(\n    (event: React.TouchEvent) => {\n      if (!touchStartRef.current || isTransitioningRef.current) return;\n\n      const touch = event.touches[0];\n      const deltaX = touch.clientX - touchStartRef.current.x;\n      const deltaY = touch.clientY - touchStartRef.current.y;\n\n      // Determine swipe direction on first significant movement\n      if (!isDragging && !isVerticalSwipeRef.current) {\n        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 10) {\n          ignoreNextClickRef.current = true;\n          isVerticalSwipeRef.current = true;\n          return;\n        }\n        if (Math.abs(deltaX) > 10) {\n          ignoreNextClickRef.current = true;\n          setIsDragging(true);\n        }\n      }\n\n      if (isVerticalSwipeRef.current) return;\n\n      // Constrain drag when at boundaries\n      if ((!hasNext && deltaX < 0) || (!hasPrevious && deltaX > 0)) {\n        setSlideOffset(deltaX * 0.3); // Rubber-band effect\n      } else {\n        setSlideOffset(deltaX);\n      }\n    },\n    [isDragging, hasNext, hasPrevious],\n  );\n\n  const handleTouchEnd = useCallback(() => {\n    if (!touchStartRef.current || isVerticalSwipeRef.current) {\n      if (isVerticalSwipeRef.current) ignoreNextClickRef.current = true;\n      touchStartRef.current = null;\n      return;\n    }\n\n    const offset = slideOffset;\n    if (isDragging || Math.abs(offset) > 10) {\n      ignoreNextClickRef.current = true;\n    }\n    touchStartRef.current = null;\n\n    if (Math.abs(offset) >= SWIPE_THRESHOLD) {\n      if (offset < 0 && hasNext) {\n        goToNext();\n      } else if (offset > 0 && hasPrevious) {\n        goToPrevious();\n      } else {\n        // Snap back — at boundary\n        setSlideOffset(0);\n      }\n    } else {\n      // Snap back — below threshold\n      setSlideOffset(0);\n    }\n\n    setIsDragging(false);\n  }, [slideOffset, hasNext, hasPrevious, goToNext, goToPrevious, isDragging]);\n\n  const requestClose = modalContext?.close ?? onRequestClose;\n  const handleBackgroundClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (event.target !== event.currentTarget) return;\n\n      if (ignoreNextClickRef.current) {\n        ignoreNextClickRef.current = false;\n        return;\n      }\n\n      if (!closeOnBackgroundClick) return;\n\n      requestClose?.();\n    },\n    [closeOnBackgroundClick, requestClose],\n  );\n\n  const mediaStyle: React.CSSProperties =\n    isDragging || (slideOffset !== 0 && slideDirection === null)\n      ? { transform: `translateX(${slideOffset}px)` }\n      : {};\n\n  return (\n    <div className='str-chat__gallery'>\n      <div className='str-chat__gallery__main'>\n        <GalleryHeader currentItem={currentItem} />\n        <NavButton\n          aria-label={t('gallery.ui.previousImage.ariaLabel', 'Previous image')}\n          className={clsx(\n            'str-chat__gallery__nav-button--prev',\n            !hasPrevious && 'str-chat__gallery__nav-button--hidden',\n          )}\n          disabled={!hasPrevious}\n          onClick={handleGoToPrevious}\n        >\n          <IconChevronLeft />\n        </NavButton>\n        <div\n          className='str-chat__gallery__slide-container'\n          onClick={handleBackgroundClick}\n          onTouchEnd={handleTouchEnd}\n          onTouchMove={handleTouchMove}\n          onTouchStart={handleTouchStart}\n          ref={containerRef}\n        >\n          <div\n            className={clsx('str-chat__gallery__media-container', {\n              'str-chat__gallery__media--dragging': isDragging,\n              'str-chat__gallery__media--slide-backward':\n                !isDragging && slideDirection === 'backward',\n              'str-chat__gallery__media--slide-forward':\n                !isDragging && slideDirection === 'forward',\n            })}\n            style={mediaStyle}\n          >\n            {currentItem.videoUrl && currentItem.videoThumbnailUrl ? (\n              <div className='str-chat__gallery__media str-chat__gallery__media--video'>\n                {showVideo ? (\n                  <VideoPlayer isPlaying videoUrl={currentItem.videoUrl} />\n                ) : (\n                  <VideoThumbnail\n                    alt={currentItem.title ?? ''}\n                    onPlay={() => setShowVideo(true)}\n                    src={currentItem.videoThumbnailUrl}\n                  />\n                )}\n              </div>\n            ) : (\n              <div className='str-chat__gallery__media str-chat__gallery__media--image'>\n                <BaseImage alt={currentItem.alt} src={currentItem.imageUrl} />\n              </div>\n            )}\n          </div>\n        </div>\n        <NavButton\n          aria-label={t('gallery.ui.nextImage.ariaLabel', 'Next image')}\n          className={clsx(\n            'str-chat__gallery__nav-button--next',\n            !hasNext && 'str-chat__gallery__nav-button--hidden',\n          )}\n          disabled={!hasNext}\n          onClick={handleGoToNext}\n        >\n          <IconChevronRight />\n        </NavButton>\n      </div>\n      {itemCount > 1 && (\n        <div className='str-chat__gallery__position-indicator'>\n          {currentIndex + 1} of {itemCount}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst NavButton = ({ className, ...props }: ButtonProps) => (\n  <Button {...props} className={clsx('str-chat__gallery__nav-button', className)} />\n);\n"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useMemo, useRef } from "react";
 import clsx from "clsx";
 import debounce from "lodash.debounce";
 //#region src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx
@@ -10,8 +9,9 @@ import debounce from "lodash.debounce";
 var mousewheelListener = (event) => {
 	if (event instanceof WheelEvent && event.deltaY === 1) event.preventDefault();
 };
-var InfiniteScrollPaginator = (props) => {
-	const { children, className, contentProps, listenToScroll, loadNextDebounceMs = 500, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold = 250, useCapture = false, ...componentProps } = props;
+var renderPolymorphic = (Comp, props, children) => React.createElement(Comp, props, children);
+var InfiniteScrollPaginator = forwardRef(function InfiniteScrollPaginator(props, ref) {
+	const { children, className, contentProps, element: Component = "div", listenToScroll, loadNextDebounceMs = 500, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold = 250, useCapture = false, ...componentProps } = props;
 	const { className: contentClassName, ...contentRestProps } = contentProps ?? {};
 	const rootRef = useRef(null);
 	const childRef = useRef(null);
@@ -55,18 +55,20 @@ var InfiniteScrollPaginator = (props) => {
 			if (root) root.removeEventListener("wheel", mousewheelListener, useCapture);
 		};
 	}, [useCapture]);
-	return /* @__PURE__ */ jsx("div", {
+	return renderPolymorphic(Component, {
 		...componentProps,
 		className: clsx("str-chat__infinite-scroll-paginator", className),
-		ref: rootRef,
-		children: /* @__PURE__ */ jsx("div", {
-			...contentRestProps,
-			className: clsx("str-chat__infinite-scroll-paginator__content", contentClassName),
-			ref: childRef,
-			children
-		})
-	});
-};
+		ref: (node) => {
+			if (typeof ref === "function") ref(node);
+			else if (ref && "current" in ref) ref.current = node;
+			rootRef.current = node && node instanceof HTMLElement ? node : null;
+		}
+	}, React.createElement("div", {
+		...contentRestProps,
+		className: clsx("str-chat__infinite-scroll-paginator__content", contentClassName),
+		ref: childRef
+	}, children));
+});
 //#endregion
 export { InfiniteScrollPaginator };