stream-chat-react 11.20.0 → 12.0.0-rc.1

package/dist/components/Emojis/index.cjs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Emojis/index.ts", "../../../src/components/Emojis/EmojiPicker.tsx", "../../../src/context/TranslationContext.tsx", "../../../src/i18n/Streami18n.ts", "../../../src/components/MessageInput/icons.tsx", "../../../src/context/MessageInputContext.tsx"],
+  "sourcesContent": ["export * from './EmojiPicker';\n", "/* eslint-disable typescript-sort-keys/interface */\nimport React, { useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport Picker from '@emoji-mart/react';\n\nimport type { Options } from '@popperjs/core';\n\nimport { useMessageInputContext, useTranslationContext } from '../../context';\nimport { EmojiPickerIcon } from '../MessageInput/icons';\n\nconst isShadowRoot = (node: Node): node is ShadowRoot => !!(node as ShadowRoot).host;\n\nexport type EmojiPickerProps = {\n  ButtonIconComponent?: React.ComponentType;\n  buttonClassName?: string;\n  pickerContainerClassName?: string;\n  wrapperClassName?: string;\n  closeOnEmojiSelect?: boolean;\n  /**\n   * Untyped [properties](https://github.com/missive/emoji-mart/tree/v5.5.2#options--props) to be\n   * passed down to the [emoji-mart `Picker`](https://github.com/missive/emoji-mart/tree/v5.5.2#-picker) component\n   */\n  pickerProps?: Partial<{ theme: 'auto' | 'light' | 'dark' } & Record<string, unknown>>;\n  /**\n   * [React Popper options](https://popper.js.org/docs/v2/constructors/#options) to be\n   * passed down to the [react-popper `usePopper`](https://popper.js.org/react-popper/v2/hook/) hook\n   */\n  popperOptions?: Partial<Options>;\n};\n\nconst classNames: EmojiPickerProps = {\n  buttonClassName: 'str-chat__emoji-picker-button',\n  pickerContainerClassName: 'str-chat__message-textarea-emoji-picker-container',\n  wrapperClassName: 'str-chat__message-textarea-emoji-picker',\n};\n\nexport const EmojiPicker = (props: EmojiPickerProps) => {\n  const { t } = useTranslationContext('EmojiPicker');\n  const { insertText, textareaRef } = useMessageInputContext('EmojiPicker');\n  const [displayPicker, setDisplayPicker] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n  const { attributes, styles } = usePopper(referenceElement, popperElement, {\n    placement: 'top-end',\n    ...props.popperOptions,\n  });\n\n  const { buttonClassName, pickerContainerClassName, wrapperClassName } = classNames;\n\n  const { ButtonIconComponent = EmojiPickerIcon } = props;\n\n  useEffect(() => {\n    if (!popperElement || !referenceElement) return;\n\n    const handlePointerDown = (e: PointerEvent) => {\n      const target = e.target as HTMLElement;\n\n      const rootNode = target.getRootNode();\n\n      if (\n        popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) ||\n        referenceElement.contains(target)\n      ) {\n        return;\n      }\n\n      setDisplayPicker(false);\n    };\n\n    window.addEventListener('pointerdown', handlePointerDown);\n    return () => window.removeEventListener('pointerdown', handlePointerDown);\n  }, [referenceElement, popperElement]);\n\n  return (\n    <div className={props.wrapperClassName ?? wrapperClassName}>\n      {displayPicker && (\n        <div\n          className={props.pickerContainerClassName ?? pickerContainerClassName}\n          style={styles.popper}\n          {...attributes.popper}\n          ref={setPopperElement}\n        >\n          <Picker\n            data={async () => (await import('@emoji-mart/data')).default}\n            onEmojiSelect={(e: { native: string }) => {\n              insertText(e.native);\n              textareaRef.current?.focus();\n              if (props.closeOnEmojiSelect) {\n                setDisplayPicker(false);\n              }\n            }}\n            {...props.pickerProps}\n          />\n        </div>\n      )}\n      <button\n        aria-expanded={displayPicker}\n        aria-label={t('aria/Emoji picker')}\n        className={props.buttonClassName ?? buttonClassName}\n        onClick={() => setDisplayPicker((cv) => !cv)}\n        ref={setReferenceElement}\n        type='button'\n      >\n        {ButtonIconComponent && <ButtonIconComponent />}\n      </button>\n    </div>\n  );\n};\n", "import React, { PropsWithChildren, useContext } from 'react';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport localizedFormat from 'dayjs/plugin/localizedFormat';\n\nimport { getDisplayName } from './utils/getDisplayName';\n\nimport type { TFunction } from 'i18next';\nimport type { Moment } from 'moment-timezone';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { UnknownType } from '../types/types';\nimport { defaultTranslatorFunction } from '../i18n';\n\nDayjs.extend(calendar);\nDayjs.extend(localizedFormat);\n\nexport type SupportedTranslations =\n  | 'de'\n  | 'en'\n  | 'es'\n  | 'fr'\n  | 'hi'\n  | 'it'\n  | 'ja'\n  | 'ko'\n  | 'nl'\n  | 'pt'\n  | 'ru'\n  | 'tr';\n\nexport const isLanguageSupported = (language: string): language is SupportedTranslations => {\n  const translations = ['de', 'en', 'es', 'fr', 'hi', 'it', 'ja', 'ko', 'nl', 'pt', 'ru', 'tr'];\n  return translations.some((translation) => language === translation);\n};\n\nexport const isDayOrMoment = (output: TDateTimeParserOutput): output is Dayjs.Dayjs | Moment =>\n  !!(output as Dayjs.Dayjs | Moment)?.isSame;\n\nexport const isDate = (output: TDateTimeParserOutput): output is Date =>\n  !!(output as Date)?.getMonth;\n\nexport const isNumberOrString = (output: TDateTimeParserOutput): output is number | string =>\n  typeof output === 'string' || typeof output === 'number';\n\nexport type TDateTimeParserInput = string | number | Date;\n\nexport type TDateTimeParserOutput = string | number | Date | Dayjs.Dayjs | Moment;\n\nexport type TDateTimeParser = (input?: TDateTimeParserInput) => TDateTimeParserOutput;\n\nexport type TranslationContextValue = {\n  t: TFunction;\n  tDateTimeParser: TDateTimeParser;\n  userLanguage: TranslationLanguages;\n};\n\nexport const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);\n\nexport const TranslationContext = React.createContext<TranslationContextValue>({\n  t: defaultTranslatorFunction,\n  tDateTimeParser: defaultDateTimeParser,\n  userLanguage: 'en',\n});\n\nexport const TranslationProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{ value: TranslationContextValue }>) => (\n  <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>\n);\n\nexport const useTranslationContext = (componentName?: string) => {\n  const contextValue = useContext(TranslationContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`,\n    );\n\n    return {} as TranslationContextValue;\n  }\n\n  return contextValue;\n};\n\nexport const withTranslationContext = <P extends UnknownType>(\n  Component: React.ComponentType<P>,\n) => {\n  const WithTranslationContextComponent = (props: Omit<P, keyof TranslationContextValue>) => {\n    const translationContext = useTranslationContext();\n\n    return <Component {...(props as P)} {...translationContext} />;\n  };\n\n  WithTranslationContextComponent.displayName = `WithTranslationContext${getDisplayName(\n    Component,\n  )}`;\n\n  return WithTranslationContextComponent;\n};\n", "import i18n, { TFunction } from 'i18next';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport updateLocale from 'dayjs/plugin/updateLocale';\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat';\nimport localeData from 'dayjs/plugin/localeData';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport utc from 'dayjs/plugin/utc';\nimport timezone from 'dayjs/plugin/timezone';\nimport { predefinedFormatters } from './utils';\n\nimport type momentTimezone from 'moment-timezone';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { CustomFormatters, PredefinedFormatters } from './utils';\nimport type { TDateTimeParser } from '../context/TranslationContext';\n\nimport type { UnknownType } from '../types/types';\n\nimport {\n  deTranslations,\n  enTranslations,\n  esTranslations,\n  frTranslations,\n  hiTranslations,\n  itTranslations,\n  jaTranslations,\n  koTranslations,\n  nlTranslations,\n  ptTranslations,\n  ruTranslations,\n  trTranslations,\n} from './translations';\n\nimport 'dayjs/locale/de';\nimport 'dayjs/locale/es';\nimport 'dayjs/locale/fr';\nimport 'dayjs/locale/hi';\nimport 'dayjs/locale/it';\nimport 'dayjs/locale/ja';\nimport 'dayjs/locale/ko';\nimport 'dayjs/locale/nl';\nimport 'dayjs/locale/pt';\nimport 'dayjs/locale/ru';\nimport 'dayjs/locale/tr';\n// These locale imports also set these locale globally.\n// So As a last step I am going to import english locale\n// to make sure I don't mess up language at other places in app.\nimport 'dayjs/locale/en';\n\nconst defaultNS = 'translation';\nconst defaultLng = 'en';\n\ntype CalendarLocaleConfig = {\n  lastDay: string;\n  lastWeek: string;\n  nextDay: string;\n  nextWeek: string;\n  sameDay: string;\n  sameElse: string;\n};\n\nDayjs.extend(updateLocale);\nDayjs.extend(utc);\nDayjs.extend(timezone);\n\nDayjs.updateLocale('de', {\n  calendar: {\n    lastDay: '[gestern um] LT',\n    lastWeek: '[letzten] dddd [um] LT',\n    nextDay: '[morgen um] LT',\n    nextWeek: 'dddd [um] LT',\n    sameDay: '[heute um] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('es', {\n  calendar: {\n    lastDay: '[ayer a las] LT',\n    lastWeek: '[pasado] dddd [a] LT',\n    nextDay: '[ma\u00F1ana a] LT',\n    nextWeek: 'dddd [a] LT',\n    sameDay: '[hoy a las] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('fr', {\n  calendar: {\n    lastDay: '[Hier \u00E0] LT',\n    lastWeek: 'dddd [dernier \u00E0] LT',\n    nextDay: '[Demain \u00E0] LT',\n    nextWeek: 'dddd [\u00E0] LT',\n    sameDay: '[Aujourd\u2019hui \u00E0] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('hi', {\n  calendar: {\n    lastDay: '[\u0915\u0932] LT',\n    lastWeek: '[\u092A\u093F\u091B\u0932\u0947] dddd, LT',\n    nextDay: '[\u0915\u0932] LT',\n    nextWeek: 'dddd, LT',\n    sameDay: '[\u0906\u091C] LT',\n    sameElse: 'L',\n  },\n  // Hindi notation for meridiems are quite fuzzy in practice. While there exists\n  // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.\n  meridiem(hour: number) {\n    if (hour < 4) {\n      return '\u0930\u093E\u0924';\n    } else if (hour < 10) {\n      return '\u0938\u0941\u092C\u0939';\n    } else if (hour < 17) {\n      return '\u0926\u094B\u092A\u0939\u0930';\n    } else if (hour < 20) {\n      return '\u0936\u093E\u092E';\n    } else {\n      return '\u0930\u093E\u0924';\n    }\n  },\n  meridiemHour(hour: number, meridiem: string) {\n    if (hour === 12) {\n      hour = 0;\n    }\n    if (meridiem === '\u0930\u093E\u0924') {\n      return hour < 4 ? hour : hour + 12;\n    } else if (meridiem === '\u0938\u0941\u092C\u0939') {\n      return hour;\n    } else if (meridiem === '\u0926\u094B\u092A\u0939\u0930') {\n      return hour >= 10 ? hour : hour + 12;\n    } else if (meridiem === '\u0936\u093E\u092E') {\n      return hour + 12;\n    }\n    return hour;\n  },\n  meridiemParse: /\u0930\u093E\u0924|\u0938\u0941\u092C\u0939|\u0926\u094B\u092A\u0939\u0930|\u0936\u093E\u092E/,\n});\n\nDayjs.updateLocale('it', {\n  calendar: {\n    lastDay: '[Ieri alle] LT',\n    lastWeek: '[lo scorso] dddd [alle] LT',\n    nextDay: '[Domani alle] LT',\n    nextWeek: 'dddd [alle] LT',\n    sameDay: '[Oggi alle] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('ja', {\n  calendar: {\n    lastDay: '[\u6628\u65E5] LT',\n    lastWeek: 'dddd LT',\n    nextDay: '[\u660E\u65E5] LT',\n    nextWeek: '[\u6B21\u306E] dddd LT',\n    sameDay: '[\u4ECA\u65E5] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('ko', {\n  calendar: {\n    lastDay: '[\uC5B4\uC81C] LT',\n    lastWeek: '[\uC9C0\uB09C] dddd LT',\n    nextDay: '[\uB0B4\uC77C] LT',\n    nextWeek: 'dddd LT',\n    sameDay: '[\uC624\uB298] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('nl', {\n  calendar: {\n    lastDay: '[gisteren om] LT',\n    lastWeek: '[afgelopen] dddd [om] LT',\n    nextDay: '[morgen om] LT',\n    nextWeek: 'dddd [om] LT',\n    sameDay: '[vandaag om] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('pt', {\n  calendar: {\n    lastDay: '[ontem \u00E0s] LT',\n    lastWeek: 'dddd [passada \u00E0s] LT',\n    nextDay: '[amanh\u00E3 \u00E0s] LT',\n    nextWeek: 'dddd [\u00E0s] LT',\n    sameDay: '[hoje \u00E0s] LT',\n    sameElse: 'L',\n  },\n});\n\nDayjs.updateLocale('ru', {\n  calendar: {\n    lastDay: '[\u0412\u0447\u0435\u0440\u0430, \u0432] LT',\n    nextDay: '[\u0417\u0430\u0432\u0442\u0440\u0430, \u0432] LT',\n    sameDay: '[\u0421\u0435\u0433\u043E\u0434\u043D\u044F, \u0432] LT',\n  },\n});\n\nDayjs.updateLocale('tr', {\n  calendar: {\n    lastDay: '[d\u00FCn] LT',\n    lastWeek: '[ge\u00E7en] dddd [saat] LT',\n    nextDay: '[yar\u0131n saat] LT',\n    nextWeek: '[gelecek] dddd [saat] LT',\n    sameDay: '[bug\u00FCn saat] LT',\n    sameElse: 'L',\n  },\n});\n\nconst en_locale = {\n  formats: {},\n  months: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n  relativeTime: {},\n  weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n};\n\ntype DateTimeParserModule = typeof Dayjs | typeof momentTimezone;\n// Type guards to check DayJs\nconst isDayJs = (dateTimeParser: DateTimeParserModule): dateTimeParser is typeof Dayjs =>\n  (dateTimeParser as typeof Dayjs).extend !== undefined;\n\ntype TimezoneParser = {\n  tz: momentTimezone.MomentTimezone | Dayjs.Dayjs;\n};\nconst supportsTz = (dateTimeParser: unknown): dateTimeParser is TimezoneParser =>\n  (dateTimeParser as TimezoneParser).tz !== undefined;\n\nexport type Streami18nOptions = {\n  DateTimeParser?: DateTimeParserModule;\n  dayjsLocaleConfigForLanguage?: Partial<ILocale> & { calendar?: CalendarLocaleConfig };\n  debug?: boolean;\n  disableDateTimeTranslations?: boolean;\n  formatters?: Partial<PredefinedFormatters> & CustomFormatters;\n  language?: TranslationLanguages;\n  logger?: (message?: string) => void;\n  parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;\n  timezone?: string;\n  translationsForLanguage?: Partial<typeof enTranslations>;\n};\n\n/**\n * Wrapper around [i18next](https://www.i18next.com/) class for Stream related translations.\n * Instance of this class should be provided to Chat component to handle translations.\n * Stream provides following list of in-built translations:\n * 1. English (en)\n * 2. Dutch (nl)\n * 3. Russian (ru)\n * 4. Turkish (tr)\n * 5. French (fr)\n * 6. Italian (it)\n * 7. Hindi (hi)\n * 8. Spanish (es)\n * 9. Portuguese (pt)\n * 10. German (de)\n * 11. Japanese (ja)\n * 12. Korean (ko)\n *\n * Simplest way to start using chat components in one of the in-built languages would be following:\n *\n * ```\n * const i18n = new Streami18n({ language 'nl' });\n * <Chat client={chatClient} i18nInstance={i18n}>\n *  ...\n * </Chat>\n * ```\n *\n * If you would like to override certain keys in in-built translation.\n * UI will be automatically updated in this case.\n *\n * ```\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  translationsForLanguage: {\n *    'Nothing yet...': 'Nog Niet ...',\n *    '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n *  }\n * });\n *\n * If you would like to register additional languages, use registerTranslation. You can add as many languages as you want:\n *\n * i18n.registerTranslation('zh', {\n *  'Nothing yet...': 'Nog Niet ...',\n *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n * });\n *\n * <Chat client={chatClient} i18nInstance={i18n}>\n *  ...\n * </Chat>\n * ```\n *\n * You can use the same function to add whole new language as well.\n *\n * ```\n * const i18n = new Streami18n();\n *\n * i18n.registerTranslation('mr', {\n *  'Nothing yet...': '\u0915\u093E\u0939\u0940\u0939\u0940 \u0928\u093E\u0939\u0940  ...',\n *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} \u0906\u0923\u093F {{ secondUser }} \u091F\u0940\u092A\u0940 \u0915\u0930\u0924 \u0906\u0939\u0947\u0924 ',\n * });\n *\n * // Make sure to call setLanguage to reflect new language in UI.\n * i18n.setLanguage('it');\n * <Chat client={chatClient} i18nInstance={i18n}>\n *  ...\n * </Chat>\n * ```\n *\n * ## Datetime translations\n *\n * Stream react chat components uses [dayjs](https://day.js.org/en/) internally by default to format datetime stamp.\n * e.g., in ChannelPreview, MessageContent components.\n * Dayjs has locale support as well - https://day.js.org/docs/en/i18n/i18n\n * Dayjs is a lightweight alternative to Momentjs with the same modern API.\n *\n * Dayjs provides locale config for plenty of languages, you can check the whole list of locale configs at following url\n * https://github.com/iamkun/dayjs/tree/dev/src/locale\n *\n * You can either provide the dayjs locale config while registering\n * language with Streami18n (either via constructor or registerTranslation()) or you can provide your own Dayjs or Moment instance\n * to Streami18n constructor, which will be then used internally (using the language locale) in components.\n *\n * 1. Via language registration\n *\n * e.g.,\n * ```\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  dayjsLocaleConfigForLanguage: {\n *    months: [...],\n *    monthsShort: [...],\n *    calendar: {\n *      sameDay: ...'\n *    }\n *  }\n * });\n * ```\n *\n * Similarly, you can add locale config for moment while registering translation via `registerTranslation` function.\n *\n * e.g.,\n * ```\n * const i18n = new Streami18n();\n *\n * i18n.registerTranslation(\n *  'mr',\n *  {\n *    'Nothing yet...': '\u0915\u093E\u0939\u0940\u0939\u0940 \u0928\u093E\u0939\u0940  ...',\n *    '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} \u0906\u0923\u093F {{ secondUser }} \u091F\u0940\u092A\u0940 \u0915\u0930\u0924 \u0906\u0939\u0947\u0924 ',\n *  },\n *  {\n *    months: [...],\n *    monthsShort: [...],\n *    calendar: {\n *      sameDay: ...'\n *    }\n *  }\n * );\n *```\n * 2. Provide your own Moment object\n *\n * ```js\n * import 'moment/locale/nl';\n * import 'moment/locale/it';\n * // or if you want to include all locales\n * import 'moment/min/locales';\n *\n * import Moment from moment\n *\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  DateTimeParser: Moment\n * })\n * ```\n *\n * 3. Provide your own Dayjs object\n *\n * ```js\n * import Dayjs from 'dayjs'\n *\n * import 'dayjs/locale/nl';\n * import 'dayjs/locale/it';\n * // or if you want to include all locales\n * import 'dayjs/min/locales';\n *\n * const i18n = new Streami18n({\n *  language: 'nl',\n *  DateTimeParser: Dayjs\n * })\n * ```\n * If you would like to stick with english language for datetimes in Stream components, you can set `disableDateTimeTranslations` to true.\n *\n */\nconst defaultStreami18nOptions = {\n  DateTimeParser: Dayjs,\n  dayjsLocaleConfigForLanguage: null,\n  debug: false,\n  disableDateTimeTranslations: false,\n  language: 'en' as TranslationLanguages,\n  logger: (message?: string) => console.warn(message),\n};\n\nexport const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) => key;\n\nexport class Streami18n {\n  i18nInstance = i18n.createInstance();\n  Dayjs = null;\n  setLanguageCallback: (t: TFunction) => void = () => null;\n  initialized = false;\n\n  t: TFunction = defaultTranslatorFunction;\n  tDateTimeParser: TDateTimeParser;\n\n  translations: {\n    [key: string]: {\n      [key: string]: typeof enTranslations | UnknownType;\n    };\n  } = {\n    de: { [defaultNS]: deTranslations },\n    en: { [defaultNS]: enTranslations },\n    es: { [defaultNS]: esTranslations },\n    fr: { [defaultNS]: frTranslations },\n    hi: { [defaultNS]: hiTranslations },\n    it: { [defaultNS]: itTranslations },\n    ja: { [defaultNS]: jaTranslations },\n    ko: { [defaultNS]: koTranslations },\n    nl: { [defaultNS]: nlTranslations },\n    pt: { [defaultNS]: ptTranslations },\n    ru: { [defaultNS]: ruTranslations },\n    tr: { [defaultNS]: trTranslations },\n  };\n\n  /**\n   * dayjs.defineLanguage('nl') also changes the global locale. We don't want to do that\n   * when user calls registerTranslation() function. So instead we will store the locale configs\n   * given to registerTranslation() function in `dayjsLocales` object, and register the required locale\n   * with moment, when setLanguage is called.\n   * */\n  dayjsLocales: { [key: string]: Partial<ILocale> } = {};\n  // dayjsLocales = {};\n\n  /**\n   * Initialize properties used in constructor\n   */\n  logger: (msg?: string) => void;\n  currentLanguage: TranslationLanguages;\n  DateTimeParser: DateTimeParserModule;\n  formatters: PredefinedFormatters & CustomFormatters = predefinedFormatters;\n  isCustomDateTimeParser: boolean;\n  i18nextConfig: {\n    debug: boolean;\n    fallbackLng: false;\n    interpolation: { escapeValue: boolean; formatSeparator: string };\n    keySeparator: false;\n    lng: string;\n    nsSeparator: false;\n    parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;\n  };\n  /**\n   * A valid TZ identifier string (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\n   */\n  timezone?: string;\n  /**\n   * Constructor accepts following options:\n   *  - language (String) default: 'en'\n   *    Language code e.g., en, tr\n   *\n   *  - translationsForLanguage (object)\n   *    Translations object. Please check src/i18n/en.json for example.\n   *\n   *  - disableDateTimeTranslations (boolean) default: false\n   *    Disable translations for date-times\n   *\n   *  - debug (boolean) default: false\n   *    Enable debug mode in internal i18n class\n   *\n   *  - logger (function) default: () => {}\n   *    Logger function to log warnings/errors from this class\n   *\n   *  - dayjsLocaleConfigForLanguage (object) default: 'enConfig'\n   *    [Config object](https://momentjs.com/docs/#/i18n/changing-locale/) for internal moment object,\n   *    corresponding to language (param)\n   *\n   *  - DateTimeParser (function) Moment or Dayjs instance/function.\n   *    Make sure to load all the required locales in this Moment or Dayjs instance that you will be provide to Streami18n\n   *\n   * @param {*} options\n   */\n  constructor(options: Streami18nOptions = {}) {\n    const finalOptions = {\n      ...defaultStreami18nOptions,\n      ...options,\n    };\n    // Prepare the i18next configuration.\n    this.logger = finalOptions.logger;\n    this.currentLanguage = finalOptions.language;\n    this.DateTimeParser = finalOptions.DateTimeParser;\n    this.timezone = finalOptions.timezone;\n    this.formatters = { ...predefinedFormatters, ...options?.formatters };\n\n    try {\n      if (this.DateTimeParser && isDayJs(this.DateTimeParser)) {\n        this.DateTimeParser.extend(LocalizedFormat);\n        this.DateTimeParser.extend(calendar);\n        this.DateTimeParser.extend(localeData);\n        this.DateTimeParser.extend(relativeTime);\n      }\n    } catch (error) {\n      throw Error(\n        `Streami18n: Looks like you wanted to provide Dayjs instance, but something went wrong while adding plugins ${error}`,\n      );\n    }\n\n    this.isCustomDateTimeParser = !!options.DateTimeParser;\n    const translationsForLanguage = finalOptions.translationsForLanguage;\n\n    if (translationsForLanguage) {\n      this.translations[this.currentLanguage] = {\n        [defaultNS]:\n          this.translations[this.currentLanguage] &&\n          this.translations[this.currentLanguage][defaultNS]\n            ? {\n                ...this.translations[this.currentLanguage][defaultNS],\n                ...translationsForLanguage,\n              }\n            : translationsForLanguage,\n      };\n    }\n\n    // If translations don't exist for given language, then set it as empty object.\n    if (!this.translations[this.currentLanguage]) {\n      this.translations[this.currentLanguage] = {\n        [defaultNS]: {},\n      };\n    }\n\n    this.i18nextConfig = {\n      debug: finalOptions.debug,\n      fallbackLng: false,\n      interpolation: { escapeValue: false, formatSeparator: '|' },\n      keySeparator: false,\n      lng: this.currentLanguage,\n      nsSeparator: false,\n    };\n\n    if (finalOptions.parseMissingKeyHandler) {\n      this.i18nextConfig.parseMissingKeyHandler = finalOptions.parseMissingKeyHandler;\n    }\n\n    this.validateCurrentLanguage();\n\n    const dayjsLocaleConfigForLanguage = finalOptions.dayjsLocaleConfigForLanguage;\n\n    if (dayjsLocaleConfigForLanguage) {\n      this.addOrUpdateLocale(this.currentLanguage, {\n        ...dayjsLocaleConfigForLanguage,\n      });\n    } else if (!this.localeExists(this.currentLanguage)) {\n      this.logger(\n        `Streami18n: Streami18n(...) - Locale config for ${this.currentLanguage} does not exist in momentjs.` +\n          `Please import the locale file using \"import 'moment/locale/${this.currentLanguage}';\" in your app or ` +\n          `register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`,\n      );\n    }\n\n    this.tDateTimeParser = (timestamp) => {\n      const language =\n        finalOptions.disableDateTimeTranslations || !this.localeExists(this.currentLanguage)\n          ? defaultLng\n          : this.currentLanguage;\n\n      if (isDayJs(this.DateTimeParser)) {\n        return supportsTz(this.DateTimeParser)\n          ? this.DateTimeParser(timestamp).tz(this.timezone).locale(language)\n          : this.DateTimeParser(timestamp).locale(language);\n      }\n\n      if (supportsTz(this.DateTimeParser) && this.timezone) {\n        return this.DateTimeParser(timestamp).tz(this.timezone).locale(language);\n      }\n      return this.DateTimeParser(timestamp).locale(language);\n    };\n  }\n\n  /**\n   * Initializes the i18next instance with configuration (which enables natural language as default keys)\n   */\n  async init() {\n    this.validateCurrentLanguage();\n\n    try {\n      this.t = await this.i18nInstance.init({\n        ...this.i18nextConfig,\n        lng: this.currentLanguage,\n        resources: this.translations,\n      });\n      this.initialized = true;\n      if (this.formatters) {\n        Object.entries(this.formatters).forEach(([name, formatterFactory]) => {\n          if (!formatterFactory) return;\n          this.i18nInstance.services.formatter?.add(name, formatterFactory(this));\n        });\n      }\n    } catch (error) {\n      this.logger(`Something went wrong with init: ${JSON.stringify(error)}`);\n    }\n\n    return {\n      t: this.t,\n      tDateTimeParser: this.tDateTimeParser,\n    };\n  }\n\n  localeExists = (language: TranslationLanguages) => {\n    if (this.isCustomDateTimeParser) return true;\n\n    return Object.keys(Dayjs.Ls).indexOf(language) > -1;\n  };\n\n  validateCurrentLanguage = () => {\n    const availableLanguages = Object.keys(this.translations);\n    if (availableLanguages.indexOf(this.currentLanguage) === -1) {\n      this.logger(\n        `Streami18n: '${this.currentLanguage}' language is not registered.` +\n          ` Please make sure to call streami18n.registerTranslation('${this.currentLanguage}', {...}) or ` +\n          `use one the built-in supported languages - ${this.getAvailableLanguages()}`,\n      );\n\n      this.currentLanguage = defaultLng;\n    }\n  };\n\n  /** Returns an instance of i18next used within this class instance */\n  geti18Instance = () => this.i18nInstance;\n\n  /** Returns list of available languages. */\n  getAvailableLanguages = () => Object.keys(this.translations);\n\n  /** Returns all the translation dictionary for all inbuilt-languages */\n  getTranslations = () => this.translations;\n\n  /**\n   * Returns current version translator function.\n   */\n  async getTranslators() {\n    if (!this.initialized) {\n      if (this.dayjsLocales[this.currentLanguage]) {\n        this.addOrUpdateLocale(this.currentLanguage, this.dayjsLocales[this.currentLanguage]);\n      }\n\n      return await this.init();\n    } else {\n      return {\n        t: this.t,\n        tDateTimeParser: this.tDateTimeParser,\n      };\n    }\n  }\n\n  registerTranslation(\n    language: TranslationLanguages,\n    translation: typeof enTranslations,\n    customDayjsLocale?: Partial<ILocale>,\n  ) {\n    if (!translation) {\n      this.logger(\n        `Streami18n: registerTranslation(language, translation, customDayjsLocale) called without translation`,\n      );\n      return;\n    }\n\n    if (!this.translations[language]) {\n      this.translations[language] = { [defaultNS]: translation };\n    } else {\n      this.translations[language][defaultNS] = translation;\n    }\n\n    if (customDayjsLocale) {\n      this.dayjsLocales[language] = { ...customDayjsLocale };\n    } else if (!this.localeExists(language)) {\n      this.logger(\n        `Streami18n: registerTranslation(language, translation, customDayjsLocale) - ` +\n          `Locale config for ${language} does not exist in Dayjs.` +\n          `Please import the locale file using \"import 'dayjs/locale/${language}';\" in your app or ` +\n          `register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`,\n      );\n    }\n\n    if (this.initialized) {\n      this.i18nInstance.addResources(language, defaultNS, translation);\n    }\n  }\n\n  addOrUpdateLocale(key: TranslationLanguages, config: Partial<ILocale>) {\n    if (this.localeExists(key)) {\n      Dayjs.updateLocale(key, { ...config });\n    } else {\n      // Merging the custom locale config with en config, so missing keys can default to english.\n      Dayjs.locale({ name: key, ...en_locale, ...config }, undefined, true);\n    }\n  }\n\n  async setLanguage(language: TranslationLanguages) {\n    this.currentLanguage = language;\n\n    if (!this.initialized) return;\n\n    try {\n      const t = await this.i18nInstance.changeLanguage(language);\n      if (this.dayjsLocales[language]) {\n        this.addOrUpdateLocale(this.currentLanguage, this.dayjsLocales[this.currentLanguage]);\n      }\n\n      this.setLanguageCallback(t);\n      return t;\n    } catch (error) {\n      this.logger(`Failed to set language: ${JSON.stringify(error)}`);\n      return this.t;\n    }\n  }\n\n  registerSetLanguageCallback(callback: (t: TFunction) => void) {\n    this.setLanguageCallback = callback;\n  }\n}\n", "import React, { useMemo } from 'react';\nimport { nanoid } from 'nanoid';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport const EmojiPickerIcon = () => (\n  <svg\n    preserveAspectRatio='xMinYMin'\n    viewBox='0 0 28 28'\n    width='100%'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <g clipRule='evenodd' fillRule='evenodd'>\n      <path d='M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z'></path>\n    </g>\n  </svg>\n);\n\nexport const LoadingIndicatorIcon = ({ size = 20 }: { size?: number }) => {\n  const id = useMemo(() => nanoid(), []);\n\n  return (\n    <div className='str-chat__loading-indicator'>\n      <svg\n        data-testid='loading-indicator'\n        height={size}\n        viewBox='0 0 30 30'\n        width={size}\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <defs>\n          <linearGradient id={`${id}-linear-gradient`} x1='50%' x2='50%' y1='0%' y2='100%'>\n            <stop offset='0%' stopColor='#FFF' stopOpacity='0' />\n            <stop data-testid='stop-color' offset='100%' stopOpacity='1' />\n          </linearGradient>\n        </defs>\n        <path\n          d='M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z'\n          fill={`url(#${id}-linear-gradient)`}\n          fillRule='evenodd'\n        />\n      </svg>\n    </div>\n  );\n};\n\nexport const UploadIcon = () => {\n  const { t } = useTranslationContext('UploadIcon');\n  return (\n    <svg\n      data-testid='attach-icon'\n      fill='none'\n      height='24'\n      viewBox='0 0 24 24'\n      width='24'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <title>{t<string>('Attach files')}</title>\n      <g clipPath='url(#clip0_10878_5)'>\n        <path\n          d='M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z'\n          fill='black'\n        />\n      </g>\n      <defs>\n        <clipPath id='clip0_10878_5'>\n          <rect fill='white' height='24' width='24' />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n};\n\nexport const CloseIcon = () => (\n  <svg\n    data-testid='close-no-outline'\n    fill='none'\n    height='24'\n    viewBox='0 0 24 24'\n    width='24'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path\n      d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z'\n      fill='black'\n    ></path>\n  </svg>\n);\n\nexport const RetryIcon = () => (\n  <svg\n    data-testid='retry'\n    fill='none'\n    height='24'\n    viewBox='0 0 24 24'\n    width='24'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path\n      d='M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z'\n      fill='black'\n    />\n  </svg>\n);\n\nexport const DownloadIcon = () => (\n  <svg\n    data-testid='download'\n    fill='none'\n    height='24'\n    viewBox='0 0 24 24'\n    width='24'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path\n      d='M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z'\n      fill='black'\n    ></path>\n  </svg>\n);\n\nexport const LinkIcon = () => (\n  <svg fill='none' height='11' viewBox='0 0 20 11' width='20' xmlns='http://www.w3.org/2000/svg'>\n    <path\n      clipRule='evenodd'\n      d='M1.9 5.5C1.9 3.79 3.29 2.4 5 2.4H8.05C8.57467 2.4 9 1.97467 9 1.45C9 0.925329 8.57467 0.5 8.05 0.5H5C2.24 0.5 0 2.74 0 5.5C0 8.26 2.24 10.5 5 10.5H8.05C8.57467 10.5 9 10.0747 9 9.55C9 9.02533 8.57467 8.6 8.05 8.6H5C3.29 8.6 1.9 7.21 1.9 5.5ZM6 5.5C6 6.05228 6.44772 6.5 7 6.5H13C13.5523 6.5 14 6.05228 14 5.5C14 4.94772 13.5523 4.5 13 4.5H7C6.44772 4.5 6 4.94772 6 5.5ZM15 0.5H11.95C11.4253 0.5 11 0.925329 11 1.45C11 1.97467 11.4253 2.4 11.95 2.4H15C16.71 2.4 18.1 3.79 18.1 5.5C18.1 7.21 16.71 8.6 15 8.6H11.95C11.4253 8.6 11 9.02533 11 9.55C11 10.0747 11.4253 10.5 11.95 10.5H15C17.76 10.5 20 8.26 20 5.5C20 2.74 17.76 0.5 15 0.5Z'\n      fill='#005DFF'\n      fillRule='evenodd'\n    />\n  </svg>\n);\n\nexport const SendIcon = () => {\n  const { t } = useTranslationContext('SendButton');\n  return (\n    <svg\n      data-testid='send'\n      fill='currentColor'\n      height='24'\n      viewBox='0 0 24 24'\n      width='24'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <title>{t<string>('Send')}</title>\n      <path d='M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z'></path>\n    </svg>\n  );\n};\n\nexport const MicIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 14 20' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M7 12.5C8.66 12.5 10 11.16 10 9.5V3.5C10 1.84 8.66 0.5 7 0.5C5.34 0.5 4 1.84 4 3.5V9.5C4 11.16 5.34 12.5 7 12.5Z' />\n    <path d='M12 9.5C12 12.26 9.76 14.5 7 14.5C4.24 14.5 2 12.26 2 9.5H0C0 13.03 2.61 15.93 6 16.42V19.5H8V16.42C11.39 15.93 14 13.03 14 9.5H12Z' />\n  </svg>\n);\n\nexport const BinIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M8.00033 25.3333C8.00033 26.8 9.20033 28 10.667 28H21.3337C22.8003 28 24.0003 26.8 24.0003 25.3333V12C24.0003 10.5333 22.8003 9.33333 21.3337 9.33333H10.667C9.20033 9.33333 8.00033 10.5333 8.00033 12V25.3333ZM24.0003 5.33333H20.667L19.7203 4.38667C19.4803 4.14667 19.1337 4 18.787 4H13.2137C12.867 4 12.5203 4.14667 12.2803 4.38667L11.3337 5.33333H8.00033C7.26699 5.33333 6.66699 5.93333 6.66699 6.66667C6.66699 7.4 7.26699 8 8.00033 8H24.0003C24.7337 8 25.3337 7.4 25.3337 6.66667C25.3337 5.93333 24.7337 5.33333 24.0003 5.33333Z' />\n  </svg>\n);\n\nexport const PauseIcon = () => (\n  <svg\n    data-testid='str-chat__pause-icon'\n    fill='currentColor'\n    viewBox='0 0 16 20'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path d='M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' />\n  </svg>\n);\n\nexport const PlayIcon = () => (\n  <svg\n    data-testid='str-chat__play-icon'\n    fill='currentColor'\n    viewBox='0 0 14 18'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path d='M0.236328 2.09338V15.9067C0.236328 16.9601 1.39633 17.6001 2.28966 17.0267L13.143 10.1201C13.9697 9.60005 13.9697 8.40005 13.143 7.86672L2.28966 0.973385C1.39633 0.400051 0.236328 1.04005 0.236328 2.09338Z' />\n  </svg>\n);\n\nexport const CheckSignIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M5.79457 10.875L2.32457 7.40502C1.93457 7.01502 1.30457 7.01502 0.91457 7.40502C0.52457 7.79502 0.52457 8.42502 0.91457 8.81502L5.09457 12.995C5.48457 13.385 6.11457 13.385 6.50457 12.995L17.0846 2.41502C17.4746 2.02502 17.4746 1.39502 17.0846 1.00502C16.6946 0.615024 16.0646 0.615024 15.6746 1.00502L5.79457 10.875Z' />\n  </svg>\n);\n", "import React, { createContext, PropsWithChildren, useContext } from 'react';\n\nimport type { TriggerSettings } from '../components/MessageInput/DefaultTriggerProvider';\nimport type { CooldownTimerState, MessageInputProps } from '../components/MessageInput';\nimport type {\n  CommandsListState,\n  MentionsListState,\n  MessageInputHookProps,\n  MessageInputState,\n} from '../components/MessageInput/hooks/useMessageInputState';\n\nimport type { CustomTrigger, DefaultStreamChatGenerics } from '../types/types';\n\nexport type MessageInputContextValue<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n  V extends CustomTrigger = CustomTrigger\n> = MessageInputState<StreamChatGenerics> &\n  MessageInputHookProps<StreamChatGenerics> &\n  Omit<MessageInputProps<StreamChatGenerics, V>, 'Input'> &\n  CooldownTimerState & {\n    autocompleteTriggers?: TriggerSettings<StreamChatGenerics, V>;\n  } & CommandsListState &\n  MentionsListState;\n\nexport const MessageInputContext = createContext<\n  (MessageInputState & MessageInputHookProps) | undefined\n>(undefined);\n\nexport const MessageInputContextProvider = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n  V extends CustomTrigger = CustomTrigger\n>({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: MessageInputContextValue<StreamChatGenerics, V>;\n}>) => (\n  <MessageInputContext.Provider value={value as MessageInputContextValue}>\n    {children}\n  </MessageInputContext.Provider>\n);\n\nexport const useMessageInputContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n  V extends CustomTrigger = CustomTrigger\n>(\n  componentName?: string,\n) => {\n  const contextValue = useContext(MessageInputContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`,\n    );\n\n    return {} as MessageInputContextValue<StreamChatGenerics, V>;\n  }\n\n  return contextValue as MessageInputContextValue<StreamChatGenerics, V>;\n};\n"],
+  "mappings": "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",
+  "names": ["import_react", "import_dayjs", "import_calendar", "import_localizedFormat", "Dayjs", "updateLocale", "utc", "timezone", "Dayjs", "calendar", "localizedFormat", "Dayjs", "React", "import_react", "React", "import_react", "React", "Picker"]
+}

package/dist/components/Emojis/index.d.ts

@@ -1,2 +1 @@
 export * from './EmojiPicker';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/EmoticonItem/EmoticonItem.d.ts

@@ -15,4 +15,3 @@ export type EmoticonItemProps = {
     };
 };
 export declare const EmoticonItem: (props: EmoticonItemProps) => React.JSX.Element;
-//# sourceMappingURL=EmoticonItem.d.ts.map

package/dist/components/EmoticonItem/EmoticonItem.js

@@ -1,18 +1,16 @@
 import React from 'react';
-var UnMemoizedEmoticonItem = function (props) {
-    var entity = props.entity;
-    var hasEntity = Object.keys(entity).length;
-    var itemParts = entity === null || entity === void 0 ? void 0 : entity.itemNameParts;
-    var renderName = function () {
+const UnMemoizedEmoticonItem = (props) => {
+    const { entity } = props;
+    const hasEntity = Object.keys(entity).length;
+    const itemParts = entity?.itemNameParts;
+    const renderName = () => {
         if (!hasEntity)
             return null;
         return (hasEntity &&
-            itemParts.parts.map(function (part, i) {
-                return part.toLowerCase() === itemParts.match.toLowerCase() ? (React.createElement("span", { className: 'str-chat__emoji-item--highlight', key: "part-".concat(i) }, part)) : (React.createElement("span", { className: 'str-chat__emoji-item--part', key: "part-".concat(i) }, part));
-            }));
+            itemParts.parts.map((part, i) => part.toLowerCase() === itemParts.match.toLowerCase() ? (React.createElement("span", { className: 'str-chat__emoji-item--highlight', key: `part-${i}` }, part)) : (React.createElement("span", { className: 'str-chat__emoji-item--part', key: `part-${i}` }, part))));
     };
     return (React.createElement("div", { className: 'str-chat__emoji-item' },
         React.createElement("span", { className: 'str-chat__emoji-item--entity' }, entity.native),
         React.createElement("span", { className: 'str-chat__emoji-item--name' }, renderName())));
 };
-export var EmoticonItem = React.memo(UnMemoizedEmoticonItem);
+export const EmoticonItem = React.memo(UnMemoizedEmoticonItem);

package/dist/components/EmoticonItem/index.d.ts

@@ -1,2 +1 @@
 export * from './EmoticonItem';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.d.ts

@@ -4,4 +4,3 @@ export type EmptyStateIndicatorProps = {
     listType?: 'channel' | 'message' | 'thread';
 };
 export declare const EmptyStateIndicator: (props: EmptyStateIndicatorProps) => React.JSX.Element | null;
-//# sourceMappingURL=EmptyStateIndicator.d.ts.map

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.js

@@ -1,25 +1,24 @@
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { ChatBubble } from './icons';
-var UnMemoizedEmptyStateIndicator = function (props) {
-    var listType = props.listType;
-    var t = useTranslationContext('EmptyStateIndicator').t;
+const UnMemoizedEmptyStateIndicator = (props) => {
+    const { listType } = props;
+    const { t } = useTranslationContext('EmptyStateIndicator');
     if (listType === 'thread')
         return null;
     if (listType === 'channel') {
-        var text = t('You have no channels currently');
+        const text = t('You have no channels currently');
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'str-chat__channel-list-empty' },
                 React.createElement(ChatBubble, null),
-                React.createElement("p", { role: 'listitem' }, text)),
-            React.createElement("p", { className: 'str-chat__channel-list-empty-v1', role: 'listitem' }, text)));
+                React.createElement("p", { role: 'listitem' }, text))));
     }
     if (listType === 'message') {
-        var text = t('No chats here yet…');
+        const text = t('No chats here yet…');
         return (React.createElement("div", { className: 'str-chat__empty-channel' },
             React.createElement(ChatBubble, null),
             React.createElement("p", { className: 'str-chat__empty-channel-text', role: 'listitem' }, text)));
     }
     return React.createElement("p", null, "No items exist");
 };
-export var EmptyStateIndicator = React.memo(UnMemoizedEmptyStateIndicator);
+export const EmptyStateIndicator = React.memo(UnMemoizedEmptyStateIndicator);

package/dist/components/EmptyStateIndicator/icons.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const ChatBubble: () => React.JSX.Element;
-//# sourceMappingURL=icons.d.ts.map

package/dist/components/EmptyStateIndicator/icons.js

@@ -1,3 +1,3 @@
 import React from 'react';
-export var ChatBubble = function () { return (React.createElement("svg", { "data-testid": 'chat-bubble', fill: 'none', height: '96', viewBox: '0 0 136 136', width: '96', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("path", { d: 'M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z', fill: '#B4B7BB' }))); };
+export const ChatBubble = () => (React.createElement("svg", { "data-testid": 'chat-bubble', fill: 'none', height: '96', viewBox: '0 0 136 136', width: '96', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z', fill: '#B4B7BB' })));

package/dist/components/EmptyStateIndicator/index.d.ts

@@ -1,2 +1 @@
 export * from './EmptyStateIndicator';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/EventComponent/EventComponent.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { AvatarProps } from '../Avatar';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export type EventComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import { TimestampFormatterOptions } from '../../i18n/utils';
+export type EventComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     /** Message object */
     message: StreamMessage<StreamChatGenerics>;
     /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ComponentType<AvatarProps>;
 };
 export declare const EventComponent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: EventComponentProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=EventComponent.d.ts.map

package/dist/components/EventComponent/EventComponent.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React from 'react';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { useTranslationContext } from '../../context/TranslationContext';
@@ -6,12 +5,11 @@ import { getDateString } from '../../i18n/utils';
 /**
  * Component to display system and channel event messages
  */
-var UnMemoizedEventComponent = function (props) {
-    var _a, _b, _c;
-    var _d = props.Avatar, Avatar = _d === void 0 ? DefaultAvatar : _d, message = props.message;
-    var tDateTimeParser = useTranslationContext('EventComponent').tDateTimeParser;
-    var _e = message.created_at, created_at = _e === void 0 ? '' : _e, event = message.event, text = message.text, type = message.type;
-    var getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser: tDateTimeParser };
+const UnMemoizedEventComponent = (props) => {
+    const { calendar, calendarFormats, format = 'dddd L', Avatar = DefaultAvatar, message } = props;
+    const { t, tDateTimeParser } = useTranslationContext('EventComponent');
+    const { created_at = '', event, text, type } = message;
+    const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };
     if (type === 'system')
         return (React.createElement("div", { className: 'str-chat__message--system', "data-testid": 'message-system' },
             React.createElement("div", { className: 'str-chat__message--system__text' },
@@ -19,20 +17,23 @@ var UnMemoizedEventComponent = function (props) {
                 React.createElement("p", null, text),
                 React.createElement("div", { className: 'str-chat__message--system__line' })),
             React.createElement("div", { className: 'str-chat__message--system__date' },
-                React.createElement("strong", null,
-                    getDateString(__assign(__assign({}, getDateOptions), { format: 'dddd' })),
-                    " "),
-                "at ",
-                getDateString(__assign(__assign({}, getDateOptions), { format: 'hh:mm A' })))));
-    if ((event === null || event === void 0 ? void 0 : event.type) === 'member.removed' || (event === null || event === void 0 ? void 0 : event.type) === 'member.added') {
-        var name_1 = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = event.user) === null || _b === void 0 ? void 0 : _b.id);
-        var sentence = "".concat(name_1, " ").concat(event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat');
+                React.createElement("strong", null, getDateString({
+                    ...getDateOptions,
+                    calendar,
+                    calendarFormats,
+                    format,
+                    t,
+                    timestampTranslationKey: 'timestamp/SystemMessage',
+                })))));
+    if (event?.type === 'member.removed' || event?.type === 'member.added') {
+        const name = event.user?.name || event.user?.id;
+        const sentence = `${name} ${event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat'}`;
         return (React.createElement("div", { className: 'str-chat__event-component__channel-event' },
-            React.createElement(Avatar, { image: (_c = event.user) === null || _c === void 0 ? void 0 : _c.image, name: name_1, user: event.user }),
+            React.createElement(Avatar, { image: event.user?.image, name: name, user: event.user }),
             React.createElement("div", { className: 'str-chat__event-component__channel-event__content' },
                 React.createElement("em", { className: 'str-chat__event-component__channel-event__sentence' }, sentence),
-                React.createElement("div", { className: 'str-chat__event-component__channel-event__date' }, getDateString(__assign(__assign({}, getDateOptions), { format: 'LT' }))))));
+                React.createElement("div", { className: 'str-chat__event-component__channel-event__date' }, getDateString({ ...getDateOptions, format: 'LT' })))));
     }
     return null;
 };
-export var EventComponent = React.memo(UnMemoizedEventComponent);
+export const EventComponent = React.memo(UnMemoizedEventComponent);

package/dist/components/EventComponent/index.d.ts

@@ -1,2 +1 @@
 export * from './EventComponent';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Gallery/BaseImage.d.ts

@@ -3,4 +3,3 @@ export type BaseImageProps = React.ComponentPropsWithRef<'img'>;
 export declare const BaseImage: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
     ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
 }, "ref"> & React.RefAttributes<HTMLImageElement>>;
-//# sourceMappingURL=BaseImage.d.ts.map

package/dist/components/Gallery/BaseImage.js

@@ -1,20 +1,18 @@
-import { __assign, __rest } from "tslib";
 import React, { forwardRef, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { DownloadButton } from '../Attachment';
-export var BaseImage = forwardRef(function BaseImage(_a, ref) {
-    var props = __rest(_a, []);
-    var propsClassName = props.className, propsOnError = props.onError;
-    var _b = useState(false), error = _b[0], setError = _b[1];
-    useEffect(function () { return function () {
+export const BaseImage = forwardRef(function BaseImage({ ...props }, ref) {
+    const { className: propsClassName, onError: propsOnError } = props;
+    const [error, setError] = useState(false);
+    useEffect(() => () => {
         setError(false);
-    }; }, [props.src]);
+    }, [props.src]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", __assign({ "data-testid": 'str-chat__base-image' }, props, { className: clsx(propsClassName, 'str-chat__base-image', {
+        React.createElement("img", { "data-testid": 'str-chat__base-image', ...props, className: clsx(propsClassName, 'str-chat__base-image', {
                 'str-chat__base-image--load-failed': error,
-            }), onError: function (e) {
+            }), onError: (e) => {
                 setError(true);
-                propsOnError === null || propsOnError === void 0 ? void 0 : propsOnError(e);
-            }, ref: ref })),
+                propsOnError?.(e);
+            }, ref: ref }),
         error && React.createElement(DownloadButton, { assetUrl: props.src })));
 });

package/dist/components/Gallery/Gallery.d.ts

@@ -15,4 +15,3 @@ export type GalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics =
  * Displays images in a simple responsive grid with a light box to view the images.
  */
 export declare const Gallery: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: GalleryProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=Gallery.d.ts.map

package/dist/components/Gallery/Gallery.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React, { useState } from 'react';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import clsx from 'clsx';
@@ -7,16 +6,16 @@ import { Modal } from '../Modal';
 import { ModalGallery as DefaultModalGallery } from './ModalGallery';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-var UnMemoizedGallery = function (props) {
-    var images = props.images, innerRefs = props.innerRefs;
-    var _a = useState(0), index = _a[0], setIndex = _a[1];
-    var _b = useState(false), modalOpen = _b[0], setModalOpen = _b[1];
-    var _c = useComponentContext('Gallery'), _d = _c.BaseImage, BaseImage = _d === void 0 ? DefaultBaseImage : _d, _e = _c.ModalGallery, ModalGallery = _e === void 0 ? DefaultModalGallery : _e;
-    var t = useTranslationContext('Gallery').t;
-    var imageFallbackTitle = t('User uploaded content');
-    var countImagesDisplayedInPreview = 4;
-    var lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
-    var toggleModal = function (selectedIndex) {
+const UnMemoizedGallery = (props) => {
+    const { images, innerRefs } = props;
+    const [index, setIndex] = useState(0);
+    const [modalOpen, setModalOpen] = useState(false);
+    const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } = useComponentContext('Gallery');
+    const { t } = useTranslationContext('Gallery');
+    const imageFallbackTitle = t('User uploaded content');
+    const countImagesDisplayedInPreview = 4;
+    const lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
+    const toggleModal = (selectedIndex) => {
         if (modalOpen) {
             setModalOpen(false);
         }
@@ -25,25 +24,26 @@ var UnMemoizedGallery = function (props) {
             setModalOpen(true);
         }
     };
-    var renderImages = images.slice(0, countImagesDisplayedInPreview).map(function (image, i) {
-        return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React.createElement("button", __assign({ className: 'str-chat__gallery-placeholder', "data-testid": 'gallery-image-last', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); }, style: __assign({ backgroundImage: "url(".concat(images[lastImageIndexInPreview].previewUrl ||
-                    images[lastImageIndexInPreview].image_url ||
-                    images[lastImageIndexInPreview].thumb_url, ")") }, image.style) }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })),
-            React.createElement("p", null, t('{{ imageCount }} more', {
-                imageCount: images.length - countImagesDisplayedInPreview,
-            })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); } },
-            React.createElement(BaseImage, __assign({ alt: (image === null || image === void 0 ? void 0 : image.fallback) || imageFallbackTitle, src: sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: (image === null || image === void 0 ? void 0 : image.fallback) || imageFallbackTitle }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
-    });
-    var className = clsx('str-chat__gallery', {
+    const renderImages = images.slice(0, countImagesDisplayedInPreview).map((image, i) => i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React.createElement("button", { className: 'str-chat__gallery-placeholder', "data-testid": 'gallery-image-last', key: `gallery-image-${i}`, onClick: () => toggleModal(i), style: {
+            backgroundImage: `url(${images[lastImageIndexInPreview].previewUrl ||
+                images[lastImageIndexInPreview].image_url ||
+                images[lastImageIndexInPreview].thumb_url})`,
+            ...image.style,
+        }, ...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) }) },
+        React.createElement("p", null, t('{{ imageCount }} more', {
+            imageCount: images.length - countImagesDisplayedInPreview,
+        })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: `gallery-image-${i}`, onClick: () => toggleModal(i) },
+        React.createElement(BaseImage, { alt: image?.fallback || imageFallbackTitle, src: sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: image?.fallback || imageFallbackTitle, ...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) }) }))));
+    const className = clsx('str-chat__gallery', {
         'str-chat__gallery--square': images.length > lastImageIndexInPreview,
         'str-chat__gallery-two-rows': images.length > 2,
     });
     return (React.createElement("div", { className: className },
         renderImages,
-        React.createElement(Modal, { className: 'str-chat__gallery-modal', onClose: function () { return setModalOpen(function (modalOpen) { return !modalOpen; }); }, open: modalOpen },
+        React.createElement(Modal, { className: 'str-chat__gallery-modal', onClose: () => setModalOpen((modalOpen) => !modalOpen), open: modalOpen },
             React.createElement(ModalGallery, { images: images, index: index }))));
 };
 /**
  * Displays images in a simple responsive grid with a light box to view the images.
  */
-export var Gallery = React.memo(UnMemoizedGallery);
+export const Gallery = React.memo(UnMemoizedGallery);

package/dist/components/Gallery/Image.d.ts

@@ -18,4 +18,3 @@ export type ImageProps<StreamChatGenerics extends DefaultStreamChatGenerics = De
  * A simple component that displays an image.
  */
 export declare const ImageComponent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ImageProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=Image.d.ts.map

package/dist/components/Gallery/Image.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React, { useState } from 'react';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { BaseImage as DefaultBaseImage } from './BaseImage';
@@ -8,14 +7,14 @@ import { useComponentContext } from '../../context';
 /**
  * A simple component that displays an image.
  */
-export var ImageComponent = function (props) {
-    var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url, innerRef = props.innerRef, previewUrl = props.previewUrl, style = props.style;
-    var _b = useState(false), modalIsOpen = _b[0], setModalIsOpen = _b[1];
-    var _c = useComponentContext('ImageComponent'), _d = _c.BaseImage, BaseImage = _d === void 0 ? DefaultBaseImage : _d, _e = _c.ModalGallery, ModalGallery = _e === void 0 ? DefaultModalGallery : _e;
-    var imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);
-    var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
+export const ImageComponent = (props) => {
+    const { dimensions = {}, fallback, image_url, thumb_url, innerRef, previewUrl, style } = props;
+    const [modalIsOpen, setModalIsOpen] = useState(false);
+    const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } = useComponentContext('ImageComponent');
+    const imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);
+    const toggleModal = () => setModalIsOpen((modalIsOpen) => !modalIsOpen);
     return (React.createElement(React.Fragment, null,
-        React.createElement(BaseImage, __assign({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0, title: fallback }, dimensions, (innerRef && { ref: innerRef }))),
+        React.createElement(BaseImage, { alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0, title: fallback, ...dimensions, ...(innerRef && { ref: innerRef }) }),
         React.createElement(Modal, { className: 'str-chat__image-modal', onClose: toggleModal, open: modalIsOpen },
             React.createElement(ModalGallery, { images: [props], index: 0 }))));
 };

package/dist/components/Gallery/ModalGallery.d.ts

@@ -8,4 +8,3 @@ export type ModalGalleryProps<StreamChatGenerics extends DefaultStreamChatGeneri
     index?: number;
 };
 export declare const ModalGallery: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ModalGalleryProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=ModalGallery.d.ts.map

package/dist/components/Gallery/ModalGallery.js

@@ -2,28 +2,23 @@ import React, { useMemo } from 'react';
 import ImageGallery from 'react-image-gallery';
 import { BaseImage } from './BaseImage';
 import { useTranslationContext } from '../../context';
-var onError = function (e) {
+const onError = (e) => {
     // Prevent having alt attribute on img as the img takes the height of the alt text
     // instead of the CSS / element width & height when the CSS mask (fallback) is applied.
     e.target.alt = '';
 };
-var renderItem = function (_a) {
-    var original = _a.original, originalAlt = _a.originalAlt;
-    return (React.createElement(BaseImage, { alt: originalAlt, className: 'image-gallery-image', onError: onError, src: original }));
-};
-export var ModalGallery = function (props) {
-    var images = props.images, index = props.index;
-    var t = useTranslationContext('ModalGallery').t;
-    var formattedArray = useMemo(function () {
-        return images.map(function (image) {
-            var imageSrc = image.image_url || image.thumb_url || '';
-            return {
-                original: imageSrc,
-                originalAlt: t('User uploaded content'),
-                source: imageSrc,
-            };
-        });
-    }, 
+const renderItem = ({ original, originalAlt }) => (React.createElement(BaseImage, { alt: originalAlt, className: 'image-gallery-image', onError: onError, src: original }));
+export const ModalGallery = (props) => {
+    const { images, index } = props;
+    const { t } = useTranslationContext('ModalGallery');
+    const formattedArray = useMemo(() => images.map((image) => {
+        const imageSrc = image.image_url || image.thumb_url || '';
+        return {
+            original: imageSrc,
+            originalAlt: t('User uploaded content'),
+            source: imageSrc,
+        };
+    }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [images]);
     return (React.createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));

package/dist/components/Gallery/index.d.ts

@@ -2,4 +2,3 @@ export * from './BaseImage';
 export * from './Gallery';
 export * from './Image';
 export * from './ModalGallery';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts

@@ -32,4 +32,3 @@ export type InfiniteScrollProps = PaginatorProps & {
     useCapture?: boolean;
 };
 export declare const InfiniteScroll: (props: PropsWithChildren<InfiniteScrollProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-//# sourceMappingURL=InfiniteScroll.d.ts.map