stream-chat-react 12.0.0-rc.2 → 12.0.0-rc.3

package/dist/{components → plugins}/Emojis/EmojiPicker.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import Picker from '@emoji-mart/react';
 import { useMessageInputContext, useTranslationContext } from '../../context';
-import { EmojiPickerIcon } from '../MessageInput/icons';
+import { EmojiPickerIcon } from './icons';
 const isShadowRoot = (node) => !!node.host;
 const classNames = {
     buttonClassName: 'str-chat__emoji-picker-button',

package/dist/plugins/Emojis/icons.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmojiPickerIcon: () => React.JSX.Element;

package/dist/plugins/Emojis/icons.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const EmojiPickerIcon = () => (React.createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+        React.createElement("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' }))));

package/dist/{components → plugins}/Emojis/index.cjs.js

@@ -27,14 +27,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/Emojis/index.ts
+// src/plugins/Emojis/index.ts
 var Emojis_exports = {};
 __export(Emojis_exports, {
-  EmojiPicker: () => EmojiPicker
+  EmojiPicker: () => EmojiPicker,
+  EmojiPickerIcon: () => EmojiPickerIcon
 });
 module.exports = __toCommonJS(Emojis_exports);
 
-// src/components/Emojis/EmojiPicker.tsx
+// src/plugins/Emojis/EmojiPicker.tsx
 var import_react4 = __toESM(require("react"));
 var import_react_popper = require("react-popper");
 var import_react5 = __toESM(require("@emoji-mart/react"));
@@ -230,25 +231,11 @@ var useTranslationContext = (componentName) => {
   return contextValue;
 };
 
-// src/components/MessageInput/icons.tsx
-var import_react2 = __toESM(require("react"));
-var import_nanoid = require("nanoid");
-var EmojiPickerIcon = () => /* @__PURE__ */ import_react2.default.createElement(
-  "svg",
-  {
-    preserveAspectRatio: "xMinYMin",
-    viewBox: "0 0 28 28",
-    width: "100%",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ import_react2.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react2.default.createElement("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" }))
-);
-
 // src/context/MessageInputContext.tsx
-var import_react3 = __toESM(require("react"));
-var MessageInputContext = (0, import_react3.createContext)(void 0);
+var import_react2 = __toESM(require("react"));
+var MessageInputContext = (0, import_react2.createContext)(void 0);
 var useMessageInputContext = (componentName) => {
-  const contextValue = (0, import_react3.useContext)(MessageInputContext);
+  const contextValue = (0, import_react2.useContext)(MessageInputContext);
   if (!contextValue) {
     console.warn(
       `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.`
@@ -258,7 +245,20 @@ var useMessageInputContext = (componentName) => {
   return contextValue;
 };
 
-// src/components/Emojis/EmojiPicker.tsx
+// src/plugins/Emojis/icons.tsx
+var import_react3 = __toESM(require("react"));
+var EmojiPickerIcon = () => /* @__PURE__ */ import_react3.default.createElement(
+  "svg",
+  {
+    preserveAspectRatio: "xMinYMin",
+    viewBox: "0 0 28 28",
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ import_react3.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react3.default.createElement("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" }))
+);
+
+// src/plugins/Emojis/EmojiPicker.tsx
 var isShadowRoot = (node) => !!node.host;
 var classNames = {
   buttonClassName: "str-chat__emoji-picker-button",
@@ -328,6 +328,7 @@ var EmojiPicker = (props) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  EmojiPicker
+  EmojiPicker,
+  EmojiPickerIcon
 });
 //# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/Emojis/index.ts", "../../../src/plugins/Emojis/EmojiPicker.tsx", "../../../src/context/TranslationContext.tsx", "../../../src/i18n/Streami18n.ts", "../../../src/context/MessageInputContext.tsx", "../../../src/plugins/Emojis/icons.tsx"],
+  "sourcesContent": ["export * from './EmojiPicker';\nexport { EmojiPickerIcon } from './icons';\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 './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, { 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", "import React from 'react';\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"],
+  "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", "import_react", "React", "React", "Picker"]
+}

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

@@ -0,0 +1,2 @@
+export * from './EmojiPicker';
+export { EmojiPickerIcon } from './icons';

package/dist/plugins/Emojis/index.js

@@ -0,0 +1,2 @@
+export * from './EmojiPicker';
+export { EmojiPickerIcon } from './icons';

package/dist/plugins/encoders/mp3.cjs.js

@@ -0,0 +1,111 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/encoders/mp3.ts
+var mp3_exports = {};
+__export(mp3_exports, {
+  encodeToMp3: () => encodeToMp3
+});
+module.exports = __toCommonJS(mp3_exports);
+
+// src/components/ReactFileUtilities/utils.ts
+var import_react = require("react");
+var readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
+  const fileReader = new FileReader();
+  fileReader.onload = () => {
+    resolve(fileReader.result);
+  };
+  fileReader.onerror = () => {
+    reject(fileReader.error);
+  };
+  fileReader.readAsArrayBuffer(file);
+});
+
+// src/components/MediaRecorder/transcode/audioProcessing.ts
+var toAudioBuffer = async (file) => {
+  const audioCtx = new AudioContext();
+  const arrayBuffer = await readFileAsArrayBuffer(file);
+  const decodedData = await audioCtx.decodeAudioData(arrayBuffer);
+  if (audioCtx.state !== "closed")
+    await audioCtx.close();
+  return decodedData;
+};
+var renderAudio = async (audioBuffer, sampleRate) => {
+  const offlineAudioCtx = new OfflineAudioContext(
+    audioBuffer.numberOfChannels,
+    audioBuffer.duration * sampleRate,
+    sampleRate
+  );
+  const source = offlineAudioCtx.createBufferSource();
+  source.buffer = audioBuffer;
+  source.connect(offlineAudioCtx.destination);
+  source.start();
+  return await offlineAudioCtx.startRendering();
+};
+
+// src/plugins/encoders/mp3.ts
+var ENCODING_BIT_RATE = 128;
+var COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;
+var float32ArrayToInt16Array = (float32Arr) => {
+  const int16Arr = new Int16Array(float32Arr.length);
+  for (let i = 0; i < float32Arr.length; i++) {
+    const float32Value = float32Arr[i];
+    const clampedValue = Math.max(-1, Math.min(1, float32Value));
+    int16Arr[i] = Math.round(clampedValue * 32767);
+  }
+  return int16Arr;
+};
+var splitDataByChannel = (audioBuffer) => Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(
+  float32ArrayToInt16Array
+);
+async function encodeToMp3(file, sampleRate) {
+  const lameJs = await import("@breezystack/lamejs");
+  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
+  const channelCount = audioBuffer.numberOfChannels;
+  const dataByChannel = splitDataByChannel(audioBuffer);
+  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
+  const dataBuffer = [];
+  let remaining = dataByChannel[0].length;
+  for (let i = 0; remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK; i += COUNT_SAMPLES_PER_ENCODED_BLOCK) {
+    const [leftChannelBlock, rightChannelBlock] = dataByChannel.map(
+      (channel) => channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK)
+    );
+    dataBuffer.push(new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)));
+    remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;
+  }
+  const lastBlock = mp3Encoder.flush();
+  if (lastBlock.length)
+    dataBuffer.push(new Int8Array(lastBlock));
+  return new Blob(dataBuffer, { type: "audio/mp3;sbu_type=voice" });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  encodeToMp3
+});
+//# sourceMappingURL=mp3.cjs.js.map

package/dist/plugins/encoders/mp3.cjs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugins/encoders/mp3.ts", "../../../src/components/ReactFileUtilities/utils.ts", "../../../src/components/MediaRecorder/transcode/audioProcessing.ts"],
+  "sourcesContent": ["import {\n  renderAudio,\n  toAudioBuffer,\n} from '../../components/MediaRecorder/transcode/audioProcessing';\n\nconst ENCODING_BIT_RATE = 128; // kbps;\nconst COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;\n\nconst float32ArrayToInt16Array = (float32Arr: Float32Array) => {\n  const int16Arr = new Int16Array(float32Arr.length);\n  for (let i = 0; i < float32Arr.length; i++) {\n    const float32Value = float32Arr[i];\n    // Clamp the float value between -1 and 1\n    const clampedValue = Math.max(-1, Math.min(1, float32Value));\n    // Convert the float value to a signed 16-bit integer\n    int16Arr[i] = Math.round(clampedValue * 32767);\n  }\n  return int16Arr;\n};\n\nconst splitDataByChannel = (audioBuffer: AudioBuffer) =>\n  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(\n    float32ArrayToInt16Array,\n  );\n\nexport async function encodeToMp3(file: File, sampleRate: number) {\n  const lameJs = await import('@breezystack/lamejs');\n  const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);\n  const channelCount = audioBuffer.numberOfChannels;\n  const dataByChannel = splitDataByChannel(audioBuffer);\n  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);\n\n  const dataBuffer: Int8Array[] = [];\n  let remaining = dataByChannel[0].length;\n  for (\n    let i = 0;\n    remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n    i += COUNT_SAMPLES_PER_ENCODED_BLOCK\n  ) {\n    const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) =>\n      channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK),\n    );\n    dataBuffer.push(new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)));\n    remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;\n  }\n\n  const lastBlock = mp3Encoder.flush();\n  if (lastBlock.length) dataBuffer.push(new Int8Array(lastBlock));\n  return new Blob(dataBuffer, { type: 'audio/mp3;sbu_type=voice' });\n}\n", "import { FileLike, RecordedMediaType } from './types';\nimport { ChangeEvent, useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(items?: DataTransferItem[]): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser().parseFromString(s, 'text/html').getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (mimeType: string): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n", "import { readFileAsArrayBuffer } from '../../ReactFileUtilities';\n\n/**\n * In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,\n * which is a fundamental data structure representing audio data.\n * @param file\n */\nexport const toAudioBuffer = async (file: File) => {\n  const audioCtx = new AudioContext();\n\n  const arrayBuffer = await readFileAsArrayBuffer(file);\n  const decodedData = await audioCtx.decodeAudioData(arrayBuffer);\n  if (audioCtx.state !== 'closed') await audioCtx.close();\n  return decodedData;\n};\n\n/**\n * OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.\n * It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.\n * In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.\n * It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.\n * @param audioBuffer\n * @param sampleRate\n */\nexport const renderAudio = async (audioBuffer: AudioBuffer, sampleRate: number) => {\n  const offlineAudioCtx = new OfflineAudioContext(\n    audioBuffer.numberOfChannels,\n    audioBuffer.duration * sampleRate,\n    sampleRate,\n  );\n  const source = offlineAudioCtx.createBufferSource();\n  source.buffer = audioBuffer;\n  source.connect(offlineAudioCtx.destination);\n  source.start();\n\n  return await offlineAudioCtx.startRendering();\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAyC;AA6HlC,IAAM,wBAAwB,CAAC,SACpC,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,QAAM,aAAa,IAAI,WAAW;AAClC,aAAW,SAAS,MAAM;AACxB,YAAQ,WAAW,MAAqB;AAAA,EAC1C;AAEA,aAAW,UAAU,MAAM;AACzB,WAAO,WAAW,KAAK;AAAA,EACzB;AAEA,aAAW,kBAAkB,IAAI;AACnC,CAAC;;;ACnII,IAAM,gBAAgB,OAAO,SAAe;AACjD,QAAM,WAAW,IAAI,aAAa;AAElC,QAAM,cAAc,MAAM,sBAAsB,IAAI;AACpD,QAAM,cAAc,MAAM,SAAS,gBAAgB,WAAW;AAC9D,MAAI,SAAS,UAAU;AAAU,UAAM,SAAS,MAAM;AACtD,SAAO;AACT;AAUO,IAAM,cAAc,OAAO,aAA0B,eAAuB;AACjF,QAAM,kBAAkB,IAAI;AAAA,IAC1B,YAAY;AAAA,IACZ,YAAY,WAAW;AAAA,IACvB;AAAA,EACF;AACA,QAAM,SAAS,gBAAgB,mBAAmB;AAClD,SAAO,SAAS;AAChB,SAAO,QAAQ,gBAAgB,WAAW;AAC1C,SAAO,MAAM;AAEb,SAAO,MAAM,gBAAgB,eAAe;AAC9C;;;AF/BA,IAAM,oBAAoB;AAC1B,IAAM,kCAAkC;AAExC,IAAM,2BAA2B,CAAC,eAA6B;AAC7D,QAAM,WAAW,IAAI,WAAW,WAAW,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,UAAM,eAAe,WAAW,CAAC;AAEjC,UAAM,eAAe,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,YAAY,CAAC;AAE3D,aAAS,CAAC,IAAI,KAAK,MAAM,eAAe,KAAK;AAAA,EAC/C;AACA,SAAO;AACT;AAEA,IAAM,qBAAqB,CAAC,gBAC1B,MAAM,KAAK,EAAE,QAAQ,YAAY,iBAAiB,GAAG,CAAC,GAAG,MAAM,YAAY,eAAe,CAAC,CAAC,EAAE;AAAA,EAC5F;AACF;AAEF,eAAsB,YAAY,MAAY,YAAoB;AAChE,QAAM,SAAS,MAAM,OAAO,qBAAqB;AACjD,QAAM,cAAc,MAAM,YAAY,MAAM,cAAc,IAAI,GAAG,UAAU;AAC3E,QAAM,eAAe,YAAY;AACjC,QAAM,gBAAgB,mBAAmB,WAAW;AACpD,QAAM,aAAa,IAAI,OAAO,WAAW,cAAc,YAAY,iBAAiB;AAEpF,QAAM,aAA0B,CAAC;AACjC,MAAI,YAAY,cAAc,CAAC,EAAE;AACjC,WACM,IAAI,GACR,aAAa,iCACb,KAAK,iCACL;AACA,UAAM,CAAC,kBAAkB,iBAAiB,IAAI,cAAc;AAAA,MAAI,CAAC,YAC/D,QAAQ,SAAS,GAAG,IAAI,+BAA+B;AAAA,IACzD;AACA,eAAW,KAAK,IAAI,UAAU,WAAW,aAAa,kBAAkB,iBAAiB,CAAC,CAAC;AAC3F,iBAAa;AAAA,EACf;AAEA,QAAM,YAAY,WAAW,MAAM;AACnC,MAAI,UAAU;AAAQ,eAAW,KAAK,IAAI,UAAU,SAAS,CAAC;AAC9D,SAAO,IAAI,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAClE;",
+  "names": []
+}

package/dist/{components/MediaRecorder/transcode → plugins/encoders}/mp3.js

@@ -1,5 +1,4 @@
-import { Mp3Encoder } from '@breezystack/lamejs';
-import { renderAudio, toAudioBuffer } from './audioProcessing';
+import { renderAudio, toAudioBuffer, } from '../../components/MediaRecorder/transcode/audioProcessing';
 const ENCODING_BIT_RATE = 128; // kbps;
 const COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;
 const float32ArrayToInt16Array = (float32Arr) => {
@@ -15,10 +14,11 @@ const float32ArrayToInt16Array = (float32Arr) => {
 };
 const splitDataByChannel = (audioBuffer) => Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(float32ArrayToInt16Array);
 export async function encodeToMp3(file, sampleRate) {
+    const lameJs = await import('@breezystack/lamejs');
     const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
     const channelCount = audioBuffer.numberOfChannels;
     const dataByChannel = splitDataByChannel(audioBuffer);
-    const mp3Encoder = new Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
+    const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
     const dataBuffer = [];
     let remaining = dataByChannel[0].length;
     for (let i = 0; remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK; i += COUNT_SAMPLES_PER_ENCODED_BLOCK) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "12.0.0-rc.2",
+  "version": "12.0.0-rc.3",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -21,10 +21,16 @@
       "default": "./dist/index.js"
     },
     "./emojis": {
-      "types": "./dist/components/Emojis/index.d.ts",
-      "require": "./dist/components/Emojis/index.cjs.js",
-      "import": "./dist/components/Emojis/index.js",
-      "default": "./dist/components/Emojis/index.js"
+      "types": "./dist/plugins/Emojis/index.d.ts",
+      "require": "./dist/plugins/Emojis/index.cjs.js",
+      "import": "./dist/plugins/Emojis/index.js",
+      "default": "./dist/plugins/Emojis/index.js"
+    },
+    "./mp3-encoder": {
+      "types": "./dist/plugins/encoders/mp3.d.ts",
+      "require": "./dist/plugins/encoders/mp3.cjs.js",
+      "import": "./dist/plugins/encoders/mp3.js",
+      "default": "./dist/plugins/encoders/mp3.js"
     },
     "./dist/css/*": {
       "default": "./dist/css/*"
@@ -60,7 +66,6 @@
   ],
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.4",
-    "@breezystack/lamejs": "^1.2.7",
     "@popperjs/core": "^2.11.5",
     "@react-aria/focus": "^3",
     "clsx": "^2.0.0",
@@ -98,6 +103,7 @@
     "mml-react": "^0.4.7"
   },
   "peerDependencies": {
+    "@breezystack/lamejs": "^1.2.7",
     "@emoji-mart/data": "^1.1.0",
     "@emoji-mart/react": "^1.1.0",
     "emoji-mart": "^5.4.0",
@@ -106,6 +112,9 @@
     "stream-chat": "^8.33.1"
   },
   "peerDependenciesMeta": {
+    "@breezystack/lamejs": {
+      "optional": true
+    },
     "emoji-mart": {
       "optional": true
     },
@@ -131,6 +140,7 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.12.7",
+    "@breezystack/lamejs": "^1.2.7",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@emoji-mart/data": "^1.1.2",

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

@@ -1,7 +0,0 @@
-{
-  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAA2C;AAC3C,0BAA0B;AAC1B,IAAAA,gBAAmB;;;ACHnB,mBAAqD;AACrD,IAAAC,gBAAkB;AAClB,IAAAC,mBAAqB;AACrB,IAAAC,0BAA4B;;;ACH5B,qBAAgC;AAChC,mBAAkB;AAClB,sBAAqB;AACrB,0BAAyB;AACzB,6BAA4B;AAC5B,wBAAuB;AACvB,0BAAyB;AACzB,iBAAgB;AAChB,sBAAqB;AA0BrB,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AACP,gBAAO;AAIP,gBAAO;AAcP,aAAAC,QAAM,OAAO,oBAAAC,OAAY;AACzB,aAAAD,QAAM,OAAO,WAAAE,OAAG;AAChB,aAAAF,QAAM,OAAO,gBAAAG,OAAQ;AAErB,aAAAH,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA,EAGA,SAAS,MAAc;AACrB,QAAI,OAAO,GAAG;AACZ,aAAO;AAAA,IACT,WAAW,OAAO,IAAI;AACpB,aAAO;AAAA,IACT,WAAW,OAAO,IAAI;AACpB,aAAO;AAAA,IACT,WAAW,OAAO,IAAI;AACpB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,aAAa,MAAc,UAAkB;AAC3C,QAAI,SAAS,IAAI;AACf,aAAO;AAAA,IACT;AACA,QAAI,aAAa,sBAAO;AACtB,aAAO,OAAO,IAAI,OAAO,OAAO;AAAA,IAClC,WAAW,aAAa,4BAAQ;AAC9B,aAAO;AAAA,IACT,WAAW,aAAa,kCAAS;AAC/B,aAAO,QAAQ,KAAK,OAAO,OAAO;AAAA,IACpC,WAAW,aAAa,sBAAO;AAC7B,aAAO,OAAO;AAAA,IAChB;AACA,WAAO;AAAA,EACT;AAAA,EACA,eAAe;AACjB,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAED,aAAAA,QAAM,aAAa,MAAM;AAAA,EACvB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF,CAAC;AA+MM,IAAM,4BAAuC,CAAmB,QAAiB;;;ADtZxF,cAAAI,QAAM,OAAO,iBAAAC,OAAQ;AACrB,cAAAD,QAAM,OAAO,wBAAAE,OAAe;AA0CrB,IAAM,wBAAwB,CAAC,cAAiC,cAAAC,SAAM,KAAK;AAE3E,IAAM,qBAAqB,aAAAC,QAAM,cAAuC;AAAA,EAC7E,GAAG;AAAA,EACH,iBAAiB;AAAA,EACjB,cAAc;AAChB,CAAC;AASM,IAAM,wBAAwB,CAAC,kBAA2B;AAC/D,QAAM,mBAAe,yBAAW,kBAAkB;AAElD,MAAI,CAAC,cAAc;AACjB,YAAQ;AAAA,MACN,gMAAgM,aAAa;AAAA,IAC/M;AAEA,WAAO,CAAC;AAAA,EACV;AAEA,SAAO;AACT;;;AEpFA,IAAAC,gBAA+B;AAC/B,oBAAuB;AAIhB,IAAM,kBAAkB,MAC7B,8BAAAC,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,qBAAoB;AAAA,IACpB,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,OAAM;AAAA;AAAA,EAEN,8BAAAA,QAAA,cAAC,OAAE,UAAS,WAAU,UAAS,aAC7B,8BAAAA,QAAA,cAAC,UAAK,GAAE,0dAAyd,CACne;AACF;;;ACfF,IAAAC,gBAAoE;AAwB7D,IAAM,0BAAsB,6BAEjC,MAAS;AAgBJ,IAAM,yBAAyB,CAIpC,kBACG;AACH,QAAM,mBAAe,0BAAW,mBAAmB;AAEnD,MAAI,CAAC,cAAc;AACjB,YAAQ;AAAA,MACN,oMAAoM,aAAa;AAAA,IACnN;AAEA,WAAO,CAAC;AAAA,EACV;AAEA,SAAO;AACT;;;AJjDA,IAAM,eAAe,CAAC,SAAmC,CAAC,CAAE,KAAoB;AAoBhF,IAAM,aAA+B;AAAA,EACnC,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,EAC1B,kBAAkB;AACpB;AAEO,IAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,EAAE,IAAI,sBAAsB,aAAa;AACjD,QAAM,EAAE,YAAY,YAAY,IAAI,uBAAuB,aAAa;AACxE,QAAM,CAAC,eAAe,gBAAgB,QAAI,wBAAS,KAAK;AACxD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,wBAAmC,IAAI;AACvF,QAAM,CAAC,eAAe,gBAAgB,QAAI,wBAAgC,IAAI;AAC9E,QAAM,EAAE,YAAY,OAAO,QAAI,+BAAU,kBAAkB,eAAe;AAAA,IACxE,WAAW;AAAA,IACX,GAAG,MAAM;AAAA,EACX,CAAC;AAED,QAAM,EAAE,iBAAiB,0BAA0B,iBAAiB,IAAI;AAExE,QAAM,EAAE,sBAAsB,gBAAgB,IAAI;AAElD,+BAAU,MAAM;AACd,QAAI,CAAC,iBAAiB,CAAC;AAAkB;AAEzC,UAAM,oBAAoB,CAAC,MAAoB;AAC7C,YAAM,SAAS,EAAE;AAEjB,YAAM,WAAW,OAAO,YAAY;AAEpC,UACE,cAAc,SAAS,aAAa,QAAQ,IAAI,SAAS,OAAO,MAAM,KACtE,iBAAiB,SAAS,MAAM,GAChC;AACA;AAAA,MACF;AAEA,uBAAiB,KAAK;AAAA,IACxB;AAEA,WAAO,iBAAiB,eAAe,iBAAiB;AACxD,WAAO,MAAM,OAAO,oBAAoB,eAAe,iBAAiB;AAAA,EAC1E,GAAG,CAAC,kBAAkB,aAAa,CAAC;AAEpC,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,MAAM,oBAAoB,oBACvC,iBACC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM,4BAA4B;AAAA,MAC7C,OAAO,OAAO;AAAA,MACb,GAAG,WAAW;AAAA,MACf,KAAK;AAAA;AAAA,IAEL,8BAAAA,QAAA;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,MAAM,aAAa,MAAM,OAAO,kBAAkB,GAAG;AAAA,QACrD,eAAe,CAAC,MAA0B;AACxC,qBAAW,EAAE,MAAM;AACnB,sBAAY,SAAS,MAAM;AAC3B,cAAI,MAAM,oBAAoB;AAC5B,6BAAiB,KAAK;AAAA,UACxB;AAAA,QACF;AAAA,QACC,GAAG,MAAM;AAAA;AAAA,IACZ;AAAA,EACF,GAEF,8BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,cAAY,EAAE,mBAAmB;AAAA,MACjC,WAAW,MAAM,mBAAmB;AAAA,MACpC,SAAS,MAAM,iBAAiB,CAAC,OAAO,CAAC,EAAE;AAAA,MAC3C,KAAK;AAAA,MACL,MAAK;AAAA;AAAA,IAEJ,uBAAuB,8BAAAA,QAAA,cAAC,yBAAoB;AAAA,EAC/C,CACF;AAEJ;",
-  "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 +0,0 @@
-export * from './EmojiPicker';

package/dist/components/Emojis/index.js

@@ -1 +0,0 @@
-export * from './EmojiPicker';

package/dist/components/MessageInput/AttachmentPreviewList/UploadPreviewItem.d.ts

@@ -1,11 +0,0 @@
-import React, { ComponentType } from 'react';
-import { FileAttachmentPreviewProps } from './FileAttachmentPreview';
-import { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
-import type { DefaultStreamChatGenerics } from '../../../types';
-type PreviewAdapterProps<P> = {
-    id: string;
-    Preview?: ComponentType<P>;
-};
-export declare const ImageUploadPreviewAdapter: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ id, Preview, }: PreviewAdapterProps<ImageAttachmentPreviewProps<StreamChatGenerics>>) => React.JSX.Element | null;
-export declare const FileUploadPreviewAdapter: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ id, Preview, }: PreviewAdapterProps<FileAttachmentPreviewProps>) => React.JSX.Element | null;
-export {};