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

package/dist/es/components/Dialog/service/DialogManager.mjs

@@ -0,0 +1,172 @@
+import { StateStore } from "@stream-io/state-store";
+import { nanoid } from "nanoid";
+//#region src/components/Dialog/service/DialogManager.ts
+/**
+* Keeps a map of Dialog objects.
+* Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.
+* The hook returns an object with the following API:
+*
+* - `dialog.open()` - opens the dialog
+* - `dialog.close()` - closes the dialog
+* - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.
+* - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)
+*/
+var DialogManager = class {
+	/** Manager-level outside click policy used by DialogPortal dismiss handlers. */
+	closeOnClickOutside;
+	id;
+	state = new StateStore({
+		dialogsById: {},
+		openedDialogIds: []
+	});
+	constructor({ closeOnClickOutside = true, id } = {}) {
+		this.closeOnClickOutside = closeOnClickOutside;
+		this.id = id ?? nanoid();
+	}
+	get openDialogCount() {
+		return this.state.getLatestValue().openedDialogIds.length;
+	}
+	get(id) {
+		return this.state.getLatestValue().dialogsById[id];
+	}
+	getOrCreate({ closeOnClickOutside, id }) {
+		let dialog = this.get(id);
+		if (!dialog) {
+			dialog = {
+				close: () => {
+					this.close(id);
+				},
+				closeOnClickOutside,
+				id,
+				isOpen: false,
+				open: () => {
+					this.open({ id });
+				},
+				removalTimeout: void 0,
+				remove: () => {
+					this.remove(id);
+				},
+				toggle: (closeAll = false) => {
+					this.toggle({ id }, closeAll);
+				}
+			};
+			this.state.next((current) => ({
+				...current,
+				dialogsById: {
+					...current.dialogsById,
+					[id]: dialog
+				}
+			}));
+		}
+		if (dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout) {
+			if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
+			this.state.next((current) => ({
+				...current,
+				dialogsById: {
+					...current.dialogsById,
+					[id]: {
+						...current.dialogsById[id],
+						closeOnClickOutside,
+						removalTimeout: void 0
+					}
+				},
+				openedDialogIds: current.dialogsById[id]?.isOpen ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id] : current.openedDialogIds
+			}));
+		}
+		return dialog;
+	}
+	open(params, closeRest) {
+		const dialog = this.getOrCreate(params);
+		if (dialog.isOpen) return;
+		if (closeRest) this.closeAll();
+		this.state.next((current) => ({
+			...current,
+			dialogsById: {
+				...current.dialogsById,
+				[dialog.id]: {
+					...dialog,
+					isOpen: true
+				}
+			},
+			openedDialogIds: [...current.openedDialogIds.filter((dialogId) => dialogId !== dialog.id), dialog.id]
+		}));
+	}
+	close(id) {
+		const dialog = this.state.getLatestValue().dialogsById[id];
+		if (!dialog?.isOpen) return;
+		this.state.next((current) => ({
+			...current,
+			dialogsById: {
+				...current.dialogsById,
+				[dialog.id]: {
+					...dialog,
+					isOpen: false
+				}
+			},
+			openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
+		}));
+	}
+	closeAll() {
+		Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) => dialog.close());
+	}
+	toggle(params, closeAll = false) {
+		if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) this.close(params.id);
+		else this.open(params, closeAll);
+	}
+	remove = (id) => {
+		const dialog = this.get(id);
+		if (!dialog) return;
+		if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
+		this.state.next((current) => {
+			const newDialogs = { ...current.dialogsById };
+			delete newDialogs[id];
+			return {
+				...current,
+				dialogsById: newDialogs,
+				openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
+			};
+		});
+	};
+	/**
+	* Marks the dialog state as unused. If the dialog id is referenced again quickly,
+	* the state will not be removed. Otherwise, the state will be removed after
+	* a short timeout.
+	*/
+	markForRemoval(id) {
+		const dialog = this.get(id);
+		if (!dialog) return;
+		this.state.next((current) => ({
+			...current,
+			dialogsById: {
+				...current.dialogsById,
+				[id]: {
+					...dialog,
+					removalTimeout: setTimeout(() => {
+						this.remove(id);
+					}, 16)
+				}
+			},
+			openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
+		}));
+	}
+	cancelPendingRemoval(id) {
+		const dialog = this.get(id);
+		if (!dialog?.removalTimeout) return;
+		clearTimeout(dialog.removalTimeout);
+		this.state.next((current) => ({
+			...current,
+			dialogsById: {
+				...current.dialogsById,
+				[id]: {
+					...current.dialogsById[id],
+					removalTimeout: void 0
+				}
+			},
+			openedDialogIds: current.dialogsById[id]?.isOpen ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id] : current.openedDialogIds
+		}));
+	}
+};
+//#endregion
+export { DialogManager };
+
+//# sourceMappingURL=DialogManager.mjs.map

package/dist/es/components/Dialog/service/DialogManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogManager.mjs","names":[],"sources":["../../../../../src/components/Dialog/service/DialogManager.ts"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport { StateStore } from '@stream-io/state-store';\n\nexport type GetDialogParams = {\n  id: DialogId;\n};\nexport type GetOrCreateDialogParams = GetDialogParams & {\n  /**\n   * Optional per-dialog override.\n   * If undefined, manager-level `closeOnClickOutside` is used.\n   */\n  closeOnClickOutside?: boolean;\n};\n\ntype DialogId = string;\n\nexport type Dialog = {\n  close: () => void;\n  closeOnClickOutside?: boolean;\n  id: DialogId;\n  isOpen: boolean | undefined;\n  open: (zIndex?: number) => void;\n  removalTimeout: NodeJS.Timeout | undefined;\n  remove: () => void;\n  toggle: (closeAll?: boolean) => void;\n};\n\nexport type DialogManagerOptions = {\n  /** Enables closing all dialogs in this manager when clicking overlay/outside area. */\n  closeOnClickOutside?: boolean;\n  id?: string;\n};\n\ntype Dialogs = Record<DialogId, Dialog>;\n\nexport type DialogManagerState = {\n  dialogsById: Dialogs;\n  openedDialogIds: DialogId[];\n};\n\n/**\n * Keeps a map of Dialog objects.\n * Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.\n * The hook returns an object with the following API:\n *\n * - `dialog.open()` - opens the dialog\n * - `dialog.close()` - closes the dialog\n * - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.\n * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)\n */\nexport class DialogManager {\n  /** Manager-level outside click policy used by DialogPortal dismiss handlers. */\n  closeOnClickOutside: boolean;\n  id: string;\n  state = new StateStore<DialogManagerState>({\n    dialogsById: {},\n    openedDialogIds: [],\n  });\n\n  constructor({ closeOnClickOutside = true, id }: DialogManagerOptions = {}) {\n    this.closeOnClickOutside = closeOnClickOutside;\n    this.id = id ?? nanoid();\n  }\n\n  get openDialogCount() {\n    return this.state.getLatestValue().openedDialogIds.length;\n  }\n\n  get(id: DialogId): Dialog | undefined {\n    return this.state.getLatestValue().dialogsById[id];\n  }\n\n  getOrCreate({ closeOnClickOutside, id }: GetOrCreateDialogParams) {\n    let dialog = this.get(id);\n    if (!dialog) {\n      dialog = {\n        close: () => {\n          this.close(id);\n        },\n        closeOnClickOutside,\n        id,\n        isOpen: false,\n        open: () => {\n          this.open({ id });\n        },\n        removalTimeout: undefined,\n        remove: () => {\n          this.remove(id);\n        },\n        toggle: (closeAll = false) => {\n          this.toggle({ id }, closeAll);\n        },\n      };\n      this.state.next((current) => ({\n        ...current,\n        dialogsById: { ...current.dialogsById, [id]: dialog as Dialog },\n      }));\n    }\n\n    const shouldUpdateDialogSettings =\n      dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout;\n\n    if (shouldUpdateDialogSettings) {\n      if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);\n      this.state.next((current) => ({\n        ...current,\n        dialogsById: {\n          ...current.dialogsById,\n          [id]: {\n            ...current.dialogsById[id],\n            closeOnClickOutside,\n            removalTimeout: undefined,\n          },\n        },\n        openedDialogIds: current.dialogsById[id]?.isOpen\n          ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id]\n          : current.openedDialogIds,\n      }));\n    }\n\n    return dialog;\n  }\n\n  open(params: GetOrCreateDialogParams, closeRest?: boolean) {\n    const dialog = this.getOrCreate(params);\n    if (dialog.isOpen) return;\n    if (closeRest) {\n      this.closeAll();\n    }\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: true } },\n      openedDialogIds: [\n        ...current.openedDialogIds.filter((dialogId) => dialogId !== dialog.id),\n        dialog.id,\n      ],\n    }));\n  }\n\n  close(id: DialogId) {\n    const dialog = this.state.getLatestValue().dialogsById[id];\n    if (!dialog?.isOpen) return;\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: false } },\n      openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n    }));\n  }\n\n  closeAll() {\n    Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) =>\n      dialog.close(),\n    );\n  }\n\n  toggle(params: GetOrCreateDialogParams, closeAll = false) {\n    if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) {\n      this.close(params.id);\n    } else {\n      this.open(params, closeAll);\n    }\n  }\n\n  remove = (id: DialogId) => {\n    const dialog = this.get(id);\n    if (!dialog) return;\n\n    if (dialog.removalTimeout) {\n      clearTimeout(dialog.removalTimeout);\n    }\n\n    this.state.next((current) => {\n      const newDialogs = { ...current.dialogsById };\n      delete newDialogs[id];\n      return {\n        ...current,\n        dialogsById: newDialogs,\n        openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n      };\n    });\n  };\n\n  /**\n   * Marks the dialog state as unused. If the dialog id is referenced again quickly,\n   * the state will not be removed. Otherwise, the state will be removed after\n   * a short timeout.\n   */\n  markForRemoval(id: DialogId) {\n    const dialog = this.get(id);\n\n    if (!dialog) {\n      return;\n    }\n\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: {\n        ...current.dialogsById,\n        [id]: {\n          ...dialog,\n          removalTimeout: setTimeout(() => {\n            this.remove(id);\n          }, 16),\n        },\n      },\n      openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n    }));\n  }\n\n  cancelPendingRemoval(id: DialogId) {\n    const dialog = this.get(id);\n\n    if (!dialog?.removalTimeout) {\n      return;\n    }\n\n    clearTimeout(dialog.removalTimeout);\n\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: {\n        ...current.dialogsById,\n        [id]: {\n          ...current.dialogsById[id],\n          removalTimeout: undefined,\n        },\n      },\n      openedDialogIds: current.dialogsById[id]?.isOpen\n        ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id]\n        : current.openedDialogIds,\n    }));\n  }\n}\n"],"mappings":"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"}

package/dist/es/components/Dialog/service/DialogPortal.mjs

@@ -0,0 +1,63 @@
+import { useDialogIsOpen, useOpenedDialogCount } from "../hooks/useDialog.mjs";
+import { Portal } from "../../Portal/Portal.mjs";
+import { modalDialogManagerId, useDialogManager, useNearestDialogManagerContext } from "../../../context/DialogManagerContext.mjs";
+import { useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Dialog/service/DialogPortal.tsx
+var shouldCloseOnOutsideClick = ({ dialog, managerCloseOnClickOutside }) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;
+var DialogPortalDestination = ({ captureOutsideClicks, className }) => {
+	const { dialogManager } = useNearestDialogManagerContext() ?? {};
+	const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
+	const [destinationRoot, setDestinationRoot] = useState(null);
+	useEffect(() => {
+		if (!destinationRoot || !dialogManager) return;
+		const handleDocumentClick = (event) => {
+			const target = event.target;
+			const clickedOverlay = target.closest?.("[data-str-chat__portal-id]");
+			if (clickedOverlay && clickedOverlay !== destinationRoot) return;
+			if (target !== destinationRoot && destinationRoot.contains(target)) return;
+			setTimeout(() => {
+				Object.values(dialogManager.state.getLatestValue().dialogsById).forEach((dialog) => {
+					if (!dialog.isOpen) return;
+					if (!shouldCloseOnOutsideClick({
+						dialog,
+						managerCloseOnClickOutside: dialogManager.closeOnClickOutside
+					})) return;
+					dialogManager.close(dialog.id);
+				});
+			}, 0);
+		};
+		document.addEventListener("click", handleDocumentClick, { capture: true });
+		return () => {
+			document.removeEventListener("click", handleDocumentClick, { capture: true });
+		};
+	}, [destinationRoot, dialogManager]);
+	if (!openedDialogCount) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__dialog-overlay", {
+			"str-chat__dialog-overlay--modal": dialogManager?.id === modalDialogManagerId,
+			"str-chat__dialog-overlay--with-outside-click-capture": captureOutsideClicks
+		}, className),
+		"data-str-chat__portal-id": dialogManager?.id,
+		"data-testid": "str-chat__dialog-overlay",
+		ref: setDestinationRoot,
+		style: { "--str-chat__dialog-overlay-height": openedDialogCount > 0 ? "100%" : "0" }
+	});
+};
+var DialogPortalEntry = ({ children, dialogId, dialogManagerId }) => {
+	const { dialogManager } = useDialogManager({
+		dialogId,
+		dialogManagerId
+	});
+	const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);
+	return /* @__PURE__ */ jsx(Portal, {
+		getPortalDestination: useCallback(() => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`), [dialogManager.id]),
+		isOpen: dialogIsOpen,
+		children
+	});
+};
+//#endregion
+export { DialogPortalDestination, DialogPortalEntry };
+
+//# sourceMappingURL=DialogPortal.mjs.map

package/dist/es/components/Dialog/service/DialogPortal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogPortal.mjs","names":[],"sources":["../../../../../src/components/Dialog/service/DialogPortal.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { PropsWithChildren } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { useDialogIsOpen, useOpenedDialogCount } from '../hooks';\nimport { Portal } from '../../Portal/Portal';\nimport {\n  modalDialogManagerId,\n  useDialogManager,\n  useNearestDialogManagerContext,\n} from '../../../context';\n\nconst shouldCloseOnOutsideClick = ({\n  dialog,\n  managerCloseOnClickOutside,\n}: {\n  dialog: { closeOnClickOutside?: boolean };\n  managerCloseOnClickOutside: boolean;\n}) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;\n\nexport type DialogPortalDestinationProps = {\n  captureOutsideClicks?: boolean;\n  className?: string;\n};\n\nexport const DialogPortalDestination = ({\n  captureOutsideClicks,\n  className,\n}: DialogPortalDestinationProps) => {\n  const { dialogManager } = useNearestDialogManagerContext() ?? {};\n  const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });\n  const [destinationRoot, setDestinationRoot] = useState<HTMLDivElement | null>(null);\n\n  // Handle clicks outside dialog contents.\n  // Clicks on the overlay itself or outside it close open dialogs;\n  // only clicks on dialog contents (descendants) are ignored.\n  useEffect(() => {\n    if (!destinationRoot || !dialogManager) return;\n\n    const handleDocumentClick = (event: MouseEvent) => {\n      const target = event.target as Node;\n      const clickedOverlay = (target as HTMLElement).closest?.(\n        '[data-str-chat__portal-id]',\n      );\n      if (clickedOverlay && clickedOverlay !== destinationRoot) return;\n      if (target !== destinationRoot && destinationRoot.contains(target)) return;\n      // Defer so target onClick handlers (e.g. context-menu toggle buttons) can run first.\n      setTimeout(() => {\n        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(\n          (dialog) => {\n            if (!dialog.isOpen) return;\n            if (\n              !shouldCloseOnOutsideClick({\n                dialog,\n                managerCloseOnClickOutside: dialogManager.closeOnClickOutside,\n              })\n            )\n              return;\n            dialogManager.close(dialog.id);\n          },\n        );\n      }, 0);\n    };\n\n    document.addEventListener('click', handleDocumentClick, { capture: true });\n\n    return () => {\n      document.removeEventListener('click', handleDocumentClick, { capture: true });\n    };\n  }, [destinationRoot, dialogManager]);\n\n  if (!openedDialogCount) return null;\n\n  const isModalDialogManager = dialogManager?.id === modalDialogManagerId;\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__dialog-overlay',\n        {\n          'str-chat__dialog-overlay--modal': isModalDialogManager,\n          'str-chat__dialog-overlay--with-outside-click-capture': captureOutsideClicks,\n        },\n        className,\n      )}\n      data-str-chat__portal-id={dialogManager?.id}\n      data-testid='str-chat__dialog-overlay'\n      ref={setDestinationRoot}\n      style={\n        {\n          '--str-chat__dialog-overlay-height': openedDialogCount > 0 ? '100%' : '0',\n        } as React.CSSProperties\n      }\n    />\n  );\n};\n\ntype DialogPortalEntryProps = {\n  dialogId: string;\n  dialogManagerId?: string;\n};\n\nexport const DialogPortalEntry = ({\n  children,\n  dialogId,\n  dialogManagerId,\n}: PropsWithChildren<DialogPortalEntryProps>) => {\n  const { dialogManager } = useDialogManager({ dialogId, dialogManagerId });\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n\n  const getPortalDestination = useCallback(\n    () => document.querySelector(`div[data-str-chat__portal-id=\"${dialogManager.id}\"]`),\n    [dialogManager.id],\n  );\n\n  return (\n    <Portal getPortalDestination={getPortalDestination} isOpen={dialogIsOpen}>\n      {children}\n    </Portal>\n  );\n};\n"],"mappings":";;;;;;;AAWA,IAAM,6BAA6B,EACjC,QACA,iCAII,OAAO,uBAAuB;AAOpC,IAAa,2BAA2B,EACtC,sBACA,gBACkC;CAClC,MAAM,EAAE,kBAAkB,+BAA+B,KAAK,CAAC;CAC/D,MAAM,oBAAoB,qBAAqB,EAAE,iBAAiB,eAAe,GAAG,CAAC;CACrF,MAAM,CAAC,iBAAiB,sBAAsB,SAAgC,IAAI;CAKlF,gBAAgB;EACd,IAAI,CAAC,mBAAmB,CAAC,eAAe;EAExC,MAAM,uBAAuB,UAAsB;GACjD,MAAM,SAAS,MAAM;GACrB,MAAM,iBAAkB,OAAuB,UAC7C,4BACF;GACA,IAAI,kBAAkB,mBAAmB,iBAAiB;GAC1D,IAAI,WAAW,mBAAmB,gBAAgB,SAAS,MAAM,GAAG;GAEpE,iBAAiB;IACf,OAAO,OAAO,cAAc,MAAM,eAAe,CAAC,CAAC,WAAW,CAAC,CAAC,SAC7D,WAAW;KACV,IAAI,CAAC,OAAO,QAAQ;KACpB,IACE,CAAC,0BAA0B;MACzB;MACA,4BAA4B,cAAc;KAC5C,CAAC,GAED;KACF,cAAc,MAAM,OAAO,EAAE;IAC/B,CACF;GACF,GAAG,CAAC;EACN;EAEA,SAAS,iBAAiB,SAAS,qBAAqB,EAAE,SAAS,KAAK,CAAC;EAEzE,aAAa;GACX,SAAS,oBAAoB,SAAS,qBAAqB,EAAE,SAAS,KAAK,CAAC;EAC9E;CACF,GAAG,CAAC,iBAAiB,aAAa,CAAC;CAEnC,IAAI,CAAC,mBAAmB,OAAO;CAI/B,OACE,oBAAC,OAAD;EACE,WAAW,KACT,4BACA;GACE,mCAPqB,eAAe,OAAO;GAQ3C,wDAAwD;EAC1D,GACA,SACF;EACA,4BAA0B,eAAe;EACzC,eAAY;EACZ,KAAK;EACL,OACE,EACE,qCAAqC,oBAAoB,IAAI,SAAS,IACxE;CAEH,CAAA;AAEL;AAOA,IAAa,qBAAqB,EAChC,UACA,UACA,sBAC+C;CAC/C,MAAM,EAAE,kBAAkB,iBAAiB;EAAE;EAAU;CAAgB,CAAC;CACxE,MAAM,eAAe,gBAAgB,UAAU,eAAe;CAO9D,OACE,oBAAC,QAAD;EAA8B,sBANH,kBACrB,SAAS,cAAc,iCAAiC,cAAc,GAAG,GAAG,GAClF,CAAC,cAAc,EAAE,CAIa;EAAsB,QAAQ;EACzD;CACK,CAAA;AAEZ"}

package/dist/es/components/DragAndDrop/DragAndDropContainer.mjs

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/DragAndDrop/DragAndDropContainer.tsx
+var DragAndDropContainer = ({ children, className, draggable, onSetNewOrder }) => {
+	const [order, setOrder] = useState([]);
+	const [dragStartIndex, setDragStartIndex] = useState(null);
+	const [dragOverIndex, setDragOverIndex] = useState(null);
+	const [container, setContainer] = useState(null);
+	const moveDirection = dragStartIndex === null || dragOverIndex === null ? void 0 : dragStartIndex <= dragOverIndex ? "down" : "up";
+	const childrenArray = React.Children.toArray(children);
+	useEffect(() => {
+		setOrder(React.Children.map(children, (_, index) => index) || []);
+	}, [children]);
+	useEffect(() => {
+		if (!container) return;
+		const handleDragStart = (e) => {
+			const draggableItem = e.target.closest(".str-chat__drag-and-drop-container__item");
+			if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+			if (draggableItem instanceof HTMLElement) {
+				const index = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
+				setDragStartIndex(index);
+				e.dataTransfer?.setData("text/plain", index.toString());
+				draggableItem.style.opacity = "0.3";
+			}
+		};
+		const handleDragOver = (e) => {
+			e.preventDefault();
+			const draggableItem = e.target.closest(".str-chat__drag-and-drop-container__item");
+			if (draggableItem instanceof HTMLElement) setDragOverIndex(Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem));
+		};
+		const handleDragLeave = () => {
+			setDragOverIndex(null);
+		};
+		const handleDrop = (e) => {
+			e.preventDefault();
+			const draggedIndex = parseInt(e.dataTransfer?.getData("text/plain") || "-1", 10);
+			const draggableItem = e.target.closest(".str-chat__drag-and-drop-container__item");
+			if (draggableItem instanceof HTMLElement) {
+				const dropIndex = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
+				if (draggedIndex !== -1 && draggedIndex !== dropIndex) setOrder((prevOrder) => {
+					const newOrder = [...prevOrder];
+					const [removed] = newOrder.splice(draggedIndex, 1);
+					newOrder.splice(dropIndex, 0, removed);
+					onSetNewOrder?.(newOrder);
+					return newOrder;
+				});
+			}
+			setDragStartIndex(null);
+			setDragOverIndex(null);
+		};
+		const handleDragEnd = (e) => {
+			const target = e.target;
+			if (target instanceof HTMLElement) target.style.opacity = "";
+			setDragStartIndex(null);
+			setDragOverIndex(null);
+		};
+		container.addEventListener("dragstart", handleDragStart);
+		container.addEventListener("dragover", handleDragOver);
+		container.addEventListener("dragleave", handleDragLeave);
+		container.addEventListener("drop", handleDrop);
+		container.addEventListener("dragend", handleDragEnd);
+		return () => {
+			container.removeEventListener("dragstart", handleDragStart);
+			container.removeEventListener("dragover", handleDragOver);
+			container.removeEventListener("dragleave", handleDragLeave);
+			container.removeEventListener("drop", handleDrop);
+			container.removeEventListener("dragend", handleDragEnd);
+		};
+	}, [container, onSetNewOrder]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__drag-and-drop-container", className),
+		ref: setContainer,
+		children: order.map((originalIndex, currentIndex) => {
+			const child = childrenArray[originalIndex];
+			return /* @__PURE__ */ jsx("div", {
+				className: clsx("str-chat__drag-and-drop-container__item", {
+					"str-chat__drag-and-drop-container__item--dragged-over-from-bottom": moveDirection === "up" && dragOverIndex === currentIndex,
+					"str-chat__drag-and-drop-container__item--dragged-over-from-top": moveDirection === "down" && dragOverIndex === currentIndex
+				}),
+				draggable,
+				children: child
+			}, React.isValidElement(child) ? child.key : `draggable-item-${originalIndex}`);
+		})
+	});
+};
+//#endregion
+export { DragAndDropContainer };
+
+//# sourceMappingURL=DragAndDropContainer.mjs.map

package/dist/es/components/DragAndDrop/DragAndDropContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropContainer.mjs","names":[],"sources":["../../../../src/components/DragAndDrop/DragAndDropContainer.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nexport type DragAndDropContainerProps = PropsWithChildren<{\n  className?: string;\n  draggable?: boolean;\n  onSetNewOrder?: (newOrder: number[]) => void;\n}>;\n\nexport const DragAndDropContainer = ({\n  children,\n  className,\n  draggable,\n  onSetNewOrder,\n}: DragAndDropContainerProps) => {\n  const [order, setOrder] = useState<number[]>([]);\n  const [dragStartIndex, setDragStartIndex] = useState<number | null>(null);\n  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  const moveDirection =\n    dragStartIndex === null || dragOverIndex === null\n      ? undefined\n      : dragStartIndex <= dragOverIndex\n        ? 'down'\n        : 'up';\n\n  const childrenArray = React.Children.toArray(children);\n\n  useEffect(() => {\n    setOrder(React.Children.map(children, (_, index) => index) || []);\n  }, [children]);\n\n  useEffect(() => {\n    if (!container) return;\n\n    const handleDragStart = (e: DragEvent) => {\n      const target = e.target as HTMLElement;\n      const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');\n      if (e.dataTransfer) {\n        e.dataTransfer.effectAllowed = 'move';\n      }\n\n      if (draggableItem instanceof HTMLElement) {\n        const index = Array.from(draggableItem.parentElement?.children || []).indexOf(\n          draggableItem,\n        );\n        setDragStartIndex(index);\n        e.dataTransfer?.setData('text/plain', index.toString());\n        draggableItem.style.opacity = '0.3';\n      }\n    };\n\n    const handleDragOver = (e: DragEvent) => {\n      e.preventDefault();\n      const target = e.target as HTMLElement;\n      const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');\n      if (draggableItem instanceof HTMLElement) {\n        const index = Array.from(draggableItem.parentElement?.children || []).indexOf(\n          draggableItem,\n        );\n        setDragOverIndex(index);\n      }\n    };\n\n    const handleDragLeave = () => {\n      setDragOverIndex(null);\n    };\n\n    const handleDrop = (e: DragEvent) => {\n      e.preventDefault();\n      const draggedIndex = parseInt(e.dataTransfer?.getData('text/plain') || '-1', 10);\n      const target = e.target as HTMLElement;\n      const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');\n      if (draggableItem instanceof HTMLElement) {\n        const dropIndex = Array.from(draggableItem.parentElement?.children || []).indexOf(\n          draggableItem,\n        );\n        if (draggedIndex !== -1 && draggedIndex !== dropIndex) {\n          setOrder((prevOrder) => {\n            const newOrder = [...prevOrder];\n            const [removed] = newOrder.splice(draggedIndex, 1);\n            newOrder.splice(dropIndex, 0, removed);\n            onSetNewOrder?.(newOrder);\n            return newOrder;\n          });\n        }\n      }\n      setDragStartIndex(null);\n      setDragOverIndex(null);\n    };\n\n    const handleDragEnd = (e: DragEvent) => {\n      const target = e.target as HTMLElement;\n      if (target instanceof HTMLElement) {\n        target.style.opacity = '';\n      }\n      setDragStartIndex(null);\n      setDragOverIndex(null);\n    };\n\n    container.addEventListener('dragstart', handleDragStart);\n    container.addEventListener('dragover', handleDragOver);\n    container.addEventListener('dragleave', handleDragLeave);\n    container.addEventListener('drop', handleDrop);\n    container.addEventListener('dragend', handleDragEnd);\n\n    return () => {\n      container.removeEventListener('dragstart', handleDragStart);\n      container.removeEventListener('dragover', handleDragOver);\n      container.removeEventListener('dragleave', handleDragLeave);\n      container.removeEventListener('drop', handleDrop);\n      container.removeEventListener('dragend', handleDragEnd);\n    };\n  }, [container, onSetNewOrder]);\n\n  return (\n    <div\n      className={clsx('str-chat__drag-and-drop-container', className)}\n      ref={setContainer}\n    >\n      {order.map((originalIndex, currentIndex) => {\n        const child = childrenArray[originalIndex];\n        return (\n          <div\n            className={clsx('str-chat__drag-and-drop-container__item', {\n              'str-chat__drag-and-drop-container__item--dragged-over-from-bottom':\n                moveDirection === 'up' && dragOverIndex === currentIndex,\n              'str-chat__drag-and-drop-container__item--dragged-over-from-top':\n                moveDirection === 'down' && dragOverIndex === currentIndex,\n            })}\n            draggable={draggable}\n            key={\n              React.isValidElement(child) ? child.key : `draggable-item-${originalIndex}`\n            }\n          >\n            {child}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import { asDynamicKey } from "../../i18n/utils.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
+var UnMemoizedEmptyStateIndicator = (props) => {
+	const { listType, messageText } = props;
+	const { t } = useTranslationContext();
+	const { IconMessageBubble, IconMessageBubbles } = useComponentContextIcons();
+	if (listType === "thread") return null;
+	if (listType === "channel") {
+		const text = t("emptyState.indicator.noConversationsYet.label", "No conversations yet");
+		return /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-list-empty",
+			children: [/* @__PURE__ */ jsx(IconMessageBubbles, {}), /* @__PURE__ */ jsx("p", {
+				role: "listitem",
+				children: text
+			})]
+		});
+	}
+	if (listType === "message") {
+		const text = messageText ? t(asDynamicKey(messageText)) : t("emptyState.indicator.startConversation.label", "Send a message to start the conversation");
+		return /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__empty-channel",
+			children: [/* @__PURE__ */ jsx(IconMessageBubble, {}), /* @__PURE__ */ jsx("p", {
+				className: "str-chat__empty-channel-text",
+				role: "listitem",
+				children: text
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx("p", { children: t("emptyState.indicator.noItemsExist.text", "No items exist") });
+};
+var EmptyStateIndicator = React.memo(UnMemoizedEmptyStateIndicator);
+//#endregion
+export { EmptyStateIndicator };
+
+//# sourceMappingURL=EmptyStateIndicator.mjs.map

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

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

package/dist/es/components/EventComponent/EventComponent.mjs

@@ -0,0 +1,27 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/EventComponent/EventComponent.tsx
+/**
+* Component to display system and channel event messages
+*/
+var UnMemoizedEventComponent = (props) => {
+	const { message, unsafeHTML = false } = props;
+	const { type } = message;
+	if (type !== "system") return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message--system",
+		"data-testid": "message-system",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__message--system__text",
+			children: unsafeHTML ? /* @__PURE__ */ jsx("div", {
+				dangerouslySetInnerHTML: { __html: message.html || "" },
+				"data-unsafe-inner-html": true
+			}) : /* @__PURE__ */ jsx("span", { children: message.text })
+		})
+	});
+};
+var EventComponent = React.memo(UnMemoizedEventComponent);
+//#endregion
+export { EventComponent };
+
+//# sourceMappingURL=EventComponent.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EventComponent.mjs","names":[],"sources":["../../../../src/components/EventComponent/EventComponent.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Event, LocalMessage } from 'stream-chat';\nimport type { TimestampFormatterOptions } from '../../i18n/types';\n\nexport type EventComponentProps = TimestampFormatterOptions & {\n  message: LocalMessage & {\n    event?: Event;\n  };\n  unsafeHTML?: boolean;\n};\n\n/**\n * Component to display system and channel event messages\n */\nconst UnMemoizedEventComponent = (props: EventComponentProps) => {\n  const { message, unsafeHTML = false } = props;\n  const { type } = message;\n\n  if (type !== 'system') return null;\n\n  return (\n    <div className='str-chat__message--system' data-testid='message-system'>\n      <div className='str-chat__message--system__text'>\n        {unsafeHTML ? (\n          <div\n            dangerouslySetInnerHTML={{ __html: message.html || '' }}\n            data-unsafe-inner-html\n          />\n        ) : (\n          <span>{message.text}</span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const EventComponent = React.memo(\n  UnMemoizedEventComponent,\n) as typeof UnMemoizedEventComponent;\n"],"mappings":";;;;;;AAeA,IAAM,4BAA4B,UAA+B;CAC/D,MAAM,EAAE,SAAS,aAAa,UAAU;CACxC,MAAM,EAAE,SAAS;CAEjB,IAAI,SAAS,UAAU,OAAO;CAE9B,OACE,oBAAC,OAAD;EAAK,WAAU;EAA4B,eAAY;YACrD,oBAAC,OAAD;GAAK,WAAU;aACZ,aACC,oBAAC,OAAD;IACE,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,GAAG;IACtD,0BAAA;GACD,CAAA,IAED,oBAAC,QAAD,EAAA,UAAO,QAAQ,KAAW,CAAA;EAEzB,CAAA;CACF,CAAA;AAET;AAEA,IAAa,iBAAiB,MAAM,KAClC,wBACF"}

package/dist/es/components/FileIcon/FileIcon.mjs

@@ -0,0 +1,43 @@
+import { mergeFileIconSizeConfig } from "./FileIconSet.mjs";
+import { mimeTypeToExtensionMap } from "./mimeTypes.mjs";
+import { iconMap } from "./iconMap.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/FileIcon/FileIcon.tsx
+function mimeTypeToIcon(mimeType) {
+	const theMap = iconMap["standard"];
+	if (!mimeType) return theMap.fallback;
+	const icon = theMap[mimeType];
+	if (icon) return icon;
+	if (mimeType.startsWith("audio/")) return theMap["audio/"] ?? theMap.fallback;
+	if (mimeType.startsWith("video/")) return theMap["video/"] ?? theMap.fallback;
+	if (mimeType.startsWith("image/")) return theMap["image/"] ?? theMap.fallback;
+	if (mimeType.startsWith("text/")) return theMap["text/"] ?? theMap.fallback;
+	return theMap.fallback;
+}
+var labelFromMimeType = ({ fileName, mimeType }) => {
+	let label;
+	if (mimeType) label = mimeTypeToExtensionMap[mimeType];
+	if (!label && fileName) label = fileName.split(".").slice(-1)[0];
+	return label;
+};
+var FileIcon = (props) => {
+	const { className, fileName, mimeType, size = "md", sizeConfig: sizeConfigOverride, ...rest } = props;
+	const sizeConfig = useMemo(() => mergeFileIconSizeConfig(sizeConfigOverride), [sizeConfigOverride]);
+	const Icon = mimeTypeToIcon(mimeType);
+	const label = fileName ? labelFromMimeType({
+		fileName,
+		mimeType
+	}) : void 0;
+	return /* @__PURE__ */ jsx(Icon, {
+		...rest,
+		className,
+		label,
+		size,
+		sizeConfig
+	});
+};
+//#endregion
+export { FileIcon, mimeTypeToIcon };
+
+//# sourceMappingURL=FileIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.mjs","names":[],"sources":["../../../../src/components/FileIcon/FileIcon.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { iconMap } from './iconMap';\nimport { mergeFileIconSizeConfig } from './FileIconSet';\nimport { mimeTypeToExtensionMap } from './mimeTypes';\nimport type { FileIconSize } from './FileIconSet';\n\nexport type FileIconSizeConfigOverride = Partial<\n  Record<\n    FileIconSize,\n    Partial<{ width: number; height: number; labelX: number; labelY: number }>\n  >\n>;\n\nexport type FileIconProps = {\n  className?: string;\n  fileName?: string;\n  mimeType?: string;\n  /** Override dimensions/label position per size (sm, md, lg, xl). */\n  sizeConfig?: FileIconSizeConfigOverride;\n  size?: FileIconSize;\n};\n\nexport function mimeTypeToIcon(mimeType?: string) {\n  const theMap = iconMap['standard'];\n\n  if (!mimeType) return theMap.fallback;\n\n  const icon = theMap[mimeType];\n  if (icon) return icon;\n\n  if (mimeType.startsWith('audio/')) return theMap['audio/'] ?? theMap.fallback;\n  if (mimeType.startsWith('video/')) return theMap['video/'] ?? theMap.fallback;\n  if (mimeType.startsWith('image/')) return theMap['image/'] ?? theMap.fallback;\n  if (mimeType.startsWith('text/')) return theMap['text/'] ?? theMap.fallback;\n\n  return theMap.fallback;\n}\n\nconst labelFromMimeType = ({\n  fileName,\n  mimeType,\n}: Pick<FileIconProps, 'fileName' | 'mimeType'>) => {\n  let label;\n\n  if (mimeType) {\n    label = mimeTypeToExtensionMap[mimeType];\n  }\n\n  if (!label && fileName) {\n    label = fileName.split('.').slice(-1)[0];\n  }\n  return label;\n};\n\nexport const FileIcon = (props: FileIconProps) => {\n  const {\n    className,\n    fileName,\n    mimeType,\n    size = 'md',\n    sizeConfig: sizeConfigOverride,\n    ...rest\n  } = props;\n  const sizeConfig = useMemo(\n    () => mergeFileIconSizeConfig(sizeConfigOverride),\n    [sizeConfigOverride],\n  );\n  const Icon = mimeTypeToIcon(mimeType);\n  const label = fileName ? labelFromMimeType({ fileName, mimeType }) : undefined;\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      label={label}\n      size={size}\n      sizeConfig={sizeConfig}\n    />\n  );\n};\n"],"mappings":";;;;;;AAsBA,SAAgB,eAAe,UAAmB;CAChD,MAAM,SAAS,QAAQ;CAEvB,IAAI,CAAC,UAAU,OAAO,OAAO;CAE7B,MAAM,OAAO,OAAO;CACpB,IAAI,MAAM,OAAO;CAEjB,IAAI,SAAS,WAAW,QAAQ,GAAG,OAAO,OAAO,aAAa,OAAO;CACrE,IAAI,SAAS,WAAW,QAAQ,GAAG,OAAO,OAAO,aAAa,OAAO;CACrE,IAAI,SAAS,WAAW,QAAQ,GAAG,OAAO,OAAO,aAAa,OAAO;CACrE,IAAI,SAAS,WAAW,OAAO,GAAG,OAAO,OAAO,YAAY,OAAO;CAEnE,OAAO,OAAO;AAChB;AAEA,IAAM,qBAAqB,EACzB,UACA,eACkD;CAClD,IAAI;CAEJ,IAAI,UACF,QAAQ,uBAAuB;CAGjC,IAAI,CAAC,SAAS,UACZ,QAAQ,SAAS,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;CAExC,OAAO;AACT;AAEA,IAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,WACA,UACA,UACA,OAAO,MACP,YAAY,oBACZ,GAAG,SACD;CACJ,MAAM,aAAa,cACX,wBAAwB,kBAAkB,GAChD,CAAC,kBAAkB,CACrB;CACA,MAAM,OAAO,eAAe,QAAQ;CACpC,MAAM,QAAQ,WAAW,kBAAkB;EAAE;EAAU;CAAS,CAAC,IAAI,KAAA;CACrE,OACE,oBAAC,MAAD;EACE,GAAI;EACO;EACJ;EACD;EACM;CACb,CAAA;AAEL"}