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

package/dist/es/components/MessageComposer/WithDragAndDropUpload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithDragAndDropUpload.mjs","names":[],"sources":["../../../../src/components/MessageComposer/WithDragAndDropUpload.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, PropsWithChildren } from 'react';\nimport React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport clsx from 'clsx';\nimport type { MessageComposerConfig } from 'stream-chat';\n\nimport {\n  useComponentContextIcons,\n  useIsWithinMessageComposerContext,\n  useTranslationContext,\n} from '../../context';\nimport { useAttachmentManagerState, useMessageComposerController } from './hooks';\nimport { useStateStore } from '../../store';\nimport { useIsCooldownActive } from './hooks/useIsCooldownActive';\n\nconst DragAndDropUploadContext = React.createContext<{\n  subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;\n}>({\n  subscribeToDrop: null,\n});\n\nexport const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);\n\n/**\n * @private This hook should be used only once directly in the `MessageComposerProvider` to\n * register `uploadNewFiles` functions of the rendered message composers. Each `MessageComposer`\n * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`\n * component.\n */\nexport const useRegisterDropHandlers = () => {\n  const { subscribeToDrop } = useDragAndDropUploadContext();\n\n  const messageComposer = useMessageComposerController();\n\n  useEffect(() => {\n    const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);\n\n    return unsubscribe;\n  }, [subscribeToDrop, messageComposer]);\n};\n\nconst attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({\n  acceptedFiles: state.attachments.acceptedFiles,\n  multipleUploads: state.attachments.maxNumberOfFilesPerMessage > 1,\n});\n\n/**\n * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.\n *\n * @example\n * ```tsx\n * <Channel>\n *  <WithDragAndDropUpload component=\"section\" className=\"message-list-dnd-wrapper\">\n *    <MessageList />\n *    <MessageComposer />\n *  </WithDragAndDropUpload>\n * <Channel>\n * ```\n */\nexport const WithDragAndDropUpload = ({\n  children,\n  className,\n  component: Component = 'div',\n  style,\n}: PropsWithChildren<{\n  acceptedFiles?: string[];\n  /**\n   * @description An element to render as a wrapper onto which drag & drop functionality will be applied.\n   * @default 'div'\n   */\n  component?: ElementType;\n  className?: string;\n  style?: CSSProperties;\n}>) => {\n  const dropHandlersRef = useRef<Set<(f: File[]) => void>>(new Set());\n  const dragAndDropUploadContext = useDragAndDropUploadContext();\n  const messageComposer = useMessageComposerController();\n  const { isUploadEnabled } = useAttachmentManagerState();\n  const { acceptedFiles, multipleUploads } = useStateStore(\n    messageComposer.configState,\n    attachmentManagerConfigStateSelector,\n  );\n\n  const isCooldownActive = useIsCooldownActive();\n  // if message composer context is available, there's no need to use the queue\n  const isWithinMessageComposerContext = useIsWithinMessageComposerContext();\n\n  const accept = useMemo(\n    () =>\n      acceptedFiles.reduce<Record<string, Array<string>>>((mediaTypeMap, mediaType) => {\n        mediaTypeMap[mediaType] ??= [];\n        return mediaTypeMap;\n      }, {}),\n    [acceptedFiles],\n  );\n\n  const subscribeToDrop = useCallback((fn: (files: File[]) => void) => {\n    dropHandlersRef.current.add(fn);\n\n    return () => {\n      dropHandlersRef.current.delete(fn);\n    };\n  }, []);\n\n  const handleDrop = useCallback((files: File[]) => {\n    dropHandlersRef.current.forEach((fn) => fn(files));\n  }, []);\n\n  const {\n    getRootProps,\n    isDragActive,\n    isDragReject: isDragRejected,\n  } = useDropzone({\n    accept,\n    // apply `disabled` rules if available, otherwise allow anything and\n    // let the `uploadNewFiles` handle the limitations internally\n    disabled: isWithinMessageComposerContext\n      ? !isUploadEnabled || isCooldownActive\n      : false,\n    multiple: multipleUploads,\n    noClick: true,\n    noKeyboard: true,\n    onDrop: isWithinMessageComposerContext\n      ? messageComposer.attachmentManager.uploadFiles\n      : handleDrop,\n  });\n\n  // nested WithDragAndDropUpload components render wrappers without functionality\n  // (MessageComposerUI has a default WithDragAndDropUpload)\n  if (dragAndDropUploadContext.subscribeToDrop !== null) {\n    return <Component className={className}>{children}</Component>;\n  }\n\n  const rootClassName = clsx('str-chat__dropzone-root', className);\n\n  return (\n    <DragAndDropUploadContext.Provider value={{ subscribeToDrop }}>\n      <Component {...getRootProps({ className: rootClassName, style })}>\n        {isDragActive && (\n          <div\n            className={clsx('str-chat__dropzone-container', {\n              'str-chat__dropzone-container--not-accepted': isDragRejected,\n            })}\n            role='presentation'\n          >\n            <FileDragAndDropContent isDragRejected={isDragRejected} />\n          </div>\n        )}\n        {children}\n      </Component>\n    </DragAndDropUploadContext.Provider>\n  );\n};\n\nexport type FileDragAndDropContentProps = {\n  isDragRejected: boolean;\n};\n\nexport const FileDragAndDropContent = ({\n  isDragRejected,\n}: FileDragAndDropContentProps) => {\n  const { IconUpload } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__dropzone-container__content'>\n      {isDragRejected ? (\n        <p>\n          {t(\n            'messageComposer.dragDropUpload.someFilesNotAccepted.text',\n            'Some of the files will not be accepted',\n          )}\n        </p>\n      ) : (\n        <>\n          <IconUpload />\n          <p>\n            {t('messageComposer.dragDropUpload.dragFiles.text', 'Drag your files here')}\n          </p>\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,2BAA2B,MAAM,cAEpC,EACD,iBAAiB,KACnB,CAAC;AAED,IAAa,oCAAoC,WAAW,wBAAwB;;;;;;;AAQpF,IAAa,gCAAgC;CAC3C,MAAM,EAAE,oBAAoB,4BAA4B;CAExD,MAAM,kBAAkB,6BAA6B;CAErD,gBAAgB;EAGd,OAFoB,kBAAkB,gBAAgB,kBAAkB,WAAW;CAGrF,GAAG,CAAC,iBAAiB,eAAe,CAAC;AACvC;AAEA,IAAM,wCAAwC,WAAkC;CAC9E,eAAe,MAAM,YAAY;CACjC,iBAAiB,MAAM,YAAY,6BAA6B;AAClE;;;;;;;;;;;;;;AAeA,IAAa,yBAAyB,EACpC,UACA,WACA,WAAW,YAAY,OACvB,YAUK;CACL,MAAM,kBAAkB,uBAAiC,IAAI,IAAI,CAAC;CAClE,MAAM,2BAA2B,4BAA4B;CAC7D,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,oBAAoB,0BAA0B;CACtD,MAAM,EAAE,eAAe,oBAAoB,cACzC,gBAAgB,aAChB,oCACF;CAEA,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,iCAAiC,kCAAkC;CAEzE,MAAM,SAAS,cAEX,cAAc,QAAuC,cAAc,cAAc;EAC/E,aAAa,eAAe,CAAC;EAC7B,OAAO;CACT,GAAG,CAAC,CAAC,GACP,CAAC,aAAa,CAChB;CAEA,MAAM,kBAAkB,aAAa,OAAgC;EACnE,gBAAgB,QAAQ,IAAI,EAAE;EAE9B,aAAa;GACX,gBAAgB,QAAQ,OAAO,EAAE;EACnC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,aAAa,UAAkB;EAChD,gBAAgB,QAAQ,SAAS,OAAO,GAAG,KAAK,CAAC;CACnD,GAAG,CAAC,CAAC;CAEL,MAAM,EACJ,cACA,cACA,cAAc,mBACZ,YAAY;EACd;EAGA,UAAU,iCACN,CAAC,mBAAmB,mBACpB;EACJ,UAAU;EACV,SAAS;EACT,YAAY;EACZ,QAAQ,iCACJ,gBAAgB,kBAAkB,cAClC;CACN,CAAC;CAID,IAAI,yBAAyB,oBAAoB,MAC/C,OAAO,oBAAC,WAAD;EAAsB;EAAY;CAAoB,CAAA;CAG/D,MAAM,gBAAgB,KAAK,2BAA2B,SAAS;CAE/D,OACE,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO,EAAE,gBAAgB;YAC1D,qBAAC,WAAD;GAAW,GAAI,aAAa;IAAE,WAAW;IAAe;GAAM,CAAC;aAA/D,CACG,gBACC,oBAAC,OAAD;IACE,WAAW,KAAK,gCAAgC,EAC9C,8CAA8C,eAChD,CAAC;IACD,MAAK;cAEL,oBAAC,wBAAD,EAAwC,eAAiB,CAAA;GACtD,CAAA,GAEN,QACQ;;CACsB,CAAA;AAEvC;AAMA,IAAa,0BAA0B,EACrC,qBACiC;CACjC,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,iBACC,oBAAC,KAAD,EAAA,UACG,EACC,4DACA,wCACF,EACC,CAAA,IAEH,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,KAAD,EAAA,UACG,EAAE,iDAAiD,sBAAsB,EACzE,CAAA,CACH,EAAA,CAAA;CAED,CAAA;AAET"}

package/dist/es/components/MessageComposer/hooks/useAttachmentManagerState.mjs

@@ -0,0 +1,37 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+//#region src/components/MessageComposer/hooks/useAttachmentManagerState.ts
+var stateSelector = (state) => ({ attachments: state.attachments });
+var composerConfigSelector = ({ attachments, location, polls }) => ({
+	attachmentsEnabled: attachments.enabled,
+	customCdn: attachments.customCdn,
+	locationEnabled: location.enabled,
+	maxNumberOfFilesPerMessage: attachments.maxNumberOfFilesPerMessage,
+	pollsEnabled: polls.enabled
+});
+var useAttachmentManagerState = () => {
+	const messageComposer = useMessageComposerController();
+	const { attachmentManager } = messageComposer;
+	const { attachments } = useStateStore(attachmentManager.state, stateSelector);
+	const { attachmentsEnabled, customCdn, locationEnabled, pollsEnabled } = useStateStore(messageComposer.configState, composerConfigSelector);
+	return {
+		attachments,
+		attachmentsEnabled,
+		availableUploadSlots: attachmentManager.availableUploadSlots,
+		blockedUploadsCount: attachmentManager.blockedUploadsCount,
+		customCdn,
+		failedUploadsCount: attachmentManager.failedUploadsCount,
+		hasAvailableUploadSlots: attachmentManager.hasAvailableUploadSlots,
+		isUploadEnabled: attachmentManager.isUploadEnabled,
+		locationEnabled,
+		maxNumberOfFilesPerMessage: attachmentManager.maxNumberOfFilesPerMessage,
+		pendingUploadsCount: attachmentManager.pendingUploadsCount,
+		pollsEnabled,
+		successfulUploadsCount: attachmentManager.successfulUploadsCount,
+		uploadsInProgressCount: attachmentManager.uploadsInProgressCount
+	};
+};
+//#endregion
+export { useAttachmentManagerState };
+
+//# sourceMappingURL=useAttachmentManagerState.mjs.map

package/dist/es/components/MessageComposer/hooks/useAttachmentManagerState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAttachmentManagerState.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useAttachmentManagerState.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { AttachmentManagerState, MessageComposerConfig } from 'stream-chat';\n\nconst stateSelector = (state: AttachmentManagerState) => ({\n  attachments: state.attachments,\n});\n\nconst composerConfigSelector = ({\n  attachments,\n  location,\n  polls,\n}: MessageComposerConfig) => ({\n  attachmentsEnabled: attachments.enabled,\n  customCdn: attachments.customCdn,\n  locationEnabled: location.enabled,\n  maxNumberOfFilesPerMessage: attachments.maxNumberOfFilesPerMessage,\n  pollsEnabled: polls.enabled,\n});\n\nexport const useAttachmentManagerState = () => {\n  const messageComposer = useMessageComposerController();\n  const { attachmentManager } = messageComposer;\n  const { attachments } = useStateStore(attachmentManager.state, stateSelector);\n  const { attachmentsEnabled, customCdn, locationEnabled, pollsEnabled } = useStateStore(\n    messageComposer.configState,\n    composerConfigSelector,\n  );\n\n  return {\n    attachments,\n    attachmentsEnabled,\n    availableUploadSlots: attachmentManager.availableUploadSlots,\n    blockedUploadsCount: attachmentManager.blockedUploadsCount,\n    customCdn,\n    failedUploadsCount: attachmentManager.failedUploadsCount,\n    hasAvailableUploadSlots: attachmentManager.hasAvailableUploadSlots,\n    isUploadEnabled: attachmentManager.isUploadEnabled,\n    locationEnabled,\n    maxNumberOfFilesPerMessage: attachmentManager.maxNumberOfFilesPerMessage,\n    pendingUploadsCount: attachmentManager.pendingUploadsCount,\n    pollsEnabled,\n    successfulUploadsCount: attachmentManager.successfulUploadsCount,\n    uploadsInProgressCount: attachmentManager.uploadsInProgressCount,\n  };\n};\n"],"mappings":";;;AAIA,IAAM,iBAAiB,WAAmC,EACxD,aAAa,MAAM,YACrB;AAEA,IAAM,0BAA0B,EAC9B,aACA,UACA,aAC4B;CAC5B,oBAAoB,YAAY;CAChC,WAAW,YAAY;CACvB,iBAAiB,SAAS;CAC1B,4BAA4B,YAAY;CACxC,cAAc,MAAM;AACtB;AAEA,IAAa,kCAAkC;CAC7C,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,sBAAsB;CAC9B,MAAM,EAAE,gBAAgB,cAAc,kBAAkB,OAAO,aAAa;CAC5E,MAAM,EAAE,oBAAoB,WAAW,iBAAiB,iBAAiB,cACvE,gBAAgB,aAChB,sBACF;CAEA,OAAO;EACL;EACA;EACA,sBAAsB,kBAAkB;EACxC,qBAAqB,kBAAkB;EACvC;EACA,oBAAoB,kBAAkB;EACtC,yBAAyB,kBAAkB;EAC3C,iBAAiB,kBAAkB;EACnC;EACA,4BAA4B,kBAAkB;EAC9C,qBAAqB,kBAAkB;EACvC;EACA,wBAAwB,kBAAkB;EAC1C,wBAAwB,kBAAkB;CAC5C;AACF"}

package/dist/es/components/MessageComposer/hooks/useAttachmentsForPreview.mjs

@@ -0,0 +1,21 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+//#region src/components/MessageComposer/hooks/useAttachmentsForPreview.ts
+var attachmentManagerStateSelector = (state) => ({ attachments: state.attachments });
+var pollComposerStateSelector = (state) => ({ poll: state.data });
+var locationComposerStateSelector = (state) => ({ location: state.location });
+var useAttachmentsForPreview = () => {
+	const { attachmentManager, locationComposer, pollComposer } = useMessageComposerController();
+	const { attachments } = useStateStore(attachmentManager.state, attachmentManagerStateSelector);
+	const { poll } = useStateStore(pollComposer.state, pollComposerStateSelector);
+	const { location } = useStateStore(locationComposer.state, locationComposerStateSelector);
+	return {
+		attachments,
+		location,
+		poll
+	};
+};
+//#endregion
+export { useAttachmentsForPreview };
+
+//# sourceMappingURL=useAttachmentsForPreview.mjs.map

package/dist/es/components/MessageComposer/hooks/useAttachmentsForPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAttachmentsForPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useAttachmentsForPreview.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type {\n  AttachmentManagerState,\n  LocationComposerState,\n  PollComposerState,\n} from 'stream-chat';\n\nconst attachmentManagerStateSelector = (state: AttachmentManagerState) => ({\n  attachments: state.attachments,\n});\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n  poll: state.data,\n});\nconst locationComposerStateSelector = (state: LocationComposerState) => ({\n  location: state.location,\n});\n\nexport const useAttachmentsForPreview = () => {\n  const { attachmentManager, locationComposer, pollComposer } =\n    useMessageComposerController();\n  const { attachments } = useStateStore(\n    attachmentManager.state,\n    attachmentManagerStateSelector,\n  );\n  const { poll } = useStateStore(pollComposer.state, pollComposerStateSelector);\n  const { location } = useStateStore(\n    locationComposer.state,\n    locationComposerStateSelector,\n  );\n\n  return {\n    attachments,\n    location,\n    poll,\n  };\n};\n"],"mappings":";;;AAQA,IAAM,kCAAkC,WAAmC,EACzE,aAAa,MAAM,YACrB;AACA,IAAM,6BAA6B,WAA8B,EAC/D,MAAM,MAAM,KACd;AACA,IAAM,iCAAiC,WAAkC,EACvE,UAAU,MAAM,SAClB;AAEA,IAAa,iCAAiC;CAC5C,MAAM,EAAE,mBAAmB,kBAAkB,iBAC3C,6BAA6B;CAC/B,MAAM,EAAE,gBAAgB,cACtB,kBAAkB,OAClB,8BACF;CACA,MAAM,EAAE,SAAS,cAAc,aAAa,OAAO,yBAAyB;CAC5E,MAAM,EAAE,aAAa,cACnB,iBAAiB,OACjB,6BACF;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF"}

package/dist/es/components/MessageComposer/hooks/useCanCreatePoll.mjs

@@ -0,0 +1,15 @@
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { useEffect, useState } from "react";
+//#region src/components/MessageComposer/hooks/useCanCreatePoll.ts
+var useCanCreatePoll = () => {
+	const { pollComposer } = useMessageComposerController();
+	const [canCreatePoll, setCanCreatePoll] = useState(pollComposer.canCreatePoll);
+	useEffect(() => pollComposer.state.subscribe(() => {
+		setCanCreatePoll(pollComposer.canCreatePoll);
+	}), [pollComposer]);
+	return canCreatePoll;
+};
+//#endregion
+export { useCanCreatePoll };
+
+//# sourceMappingURL=useCanCreatePoll.mjs.map

package/dist/es/components/MessageComposer/hooks/useCanCreatePoll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanCreatePoll.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCanCreatePoll.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useEffect, useState } from 'react';\n\nexport const useCanCreatePoll = () => {\n  const { pollComposer } = useMessageComposerController();\n  const [canCreatePoll, setCanCreatePoll] = useState(pollComposer.canCreatePoll);\n  useEffect(\n    () =>\n      pollComposer.state.subscribe(() => {\n        setCanCreatePoll(pollComposer.canCreatePoll);\n      }),\n    [pollComposer],\n  );\n  return canCreatePoll;\n};\n"],"mappings":";;;AAGA,IAAa,yBAAyB;CACpC,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa,aAAa;CAC7E,gBAEI,aAAa,MAAM,gBAAgB;EACjC,iBAAiB,aAAa,aAAa;CAC7C,CAAC,GACH,CAAC,YAAY,CACf;CACA,OAAO;AACT"}

package/dist/es/components/MessageComposer/hooks/useCooldownRemaining.mjs

@@ -0,0 +1,18 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import "stream-chat";
+//#region src/components/MessageComposer/hooks/useCooldownRemaining.tsx
+var cooldownTimerStateSelector = (state) => ({ cooldownRemaining: state.cooldownRemaining });
+/**
+* Provides and initial value of cooldown, from which the countdown should start, e.g.:
+*
+* The value of channel.data.cooldown is 100s but 30s has already elapsed, user reloads the page,
+* the initial value is now 70s from which the countdown will continue using useTimer() hook.
+*/
+var useCooldownRemaining = () => {
+	return useStateStore(useChannel().cooldownTimer.state, cooldownTimerStateSelector).cooldownRemaining ?? 0;
+};
+//#endregion
+export { useCooldownRemaining };
+
+//# sourceMappingURL=useCooldownRemaining.mjs.map

package/dist/es/components/MessageComposer/hooks/useCooldownRemaining.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCooldownRemaining.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCooldownRemaining.tsx"],"sourcesContent":["import { type CooldownTimerState } from 'stream-chat';\n\nimport { useChannel } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  cooldownRemaining: state.cooldownRemaining,\n});\n\n/**\n * Provides and initial value of cooldown, from which the countdown should start, e.g.:\n *\n * The value of channel.data.cooldown is 100s but 30s has already elapsed, user reloads the page,\n * the initial value is now 70s from which the countdown will continue using useTimer() hook.\n */\nexport const useCooldownRemaining = (): number => {\n  const channel = useChannel();\n  return (\n    useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n      .cooldownRemaining ?? 0\n  );\n};\n"],"mappings":";;;;AAKA,IAAM,8BAA8B,WAA+B,EACjE,mBAAmB,MAAM,kBAC3B;;;;;;;AAQA,IAAa,6BAAqC;CAEhD,OACE,cAFc,WAEA,CAAA,CAAQ,cAAc,OAAO,0BAA0B,CAAC,CACnE,qBAAqB;AAE5B"}

package/dist/es/components/MessageComposer/hooks/useCreateMessageComposerContext.mjs

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+//#region src/components/MessageComposer/hooks/useCreateMessageComposerContext.ts
+var useCreateMessageComposerContext = (value) => {
+	const { additionalTextareaProps, asyncMessagesMultiSendEnabled, audioRecordingEnabled, emojiSearchIndex, focus, hideSendButton, maxRows, minRows, onPaste, parent, recordingController, shouldSubmit, textareaRef } = value;
+	const parentId = parent?.id;
+	return useMemo(() => ({
+		additionalTextareaProps,
+		asyncMessagesMultiSendEnabled,
+		audioRecordingEnabled,
+		emojiSearchIndex,
+		focus,
+		hideSendButton,
+		maxRows,
+		minRows,
+		onPaste,
+		parent,
+		recordingController,
+		shouldSubmit,
+		textareaRef
+	}), [
+		asyncMessagesMultiSendEnabled,
+		audioRecordingEnabled,
+		emojiSearchIndex,
+		hideSendButton,
+		minRows,
+		parentId,
+		recordingController
+	]);
+};
+//#endregion
+export { useCreateMessageComposerContext };
+
+//# sourceMappingURL=useCreateMessageComposerContext.mjs.map

package/dist/es/components/MessageComposer/hooks/useCreateMessageComposerContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateMessageComposerContext.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCreateMessageComposerContext.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { MessageComposerContextValue } from '../../../context/MessageComposerContext';\n\nexport const useCreateMessageComposerContext = (value: MessageComposerContextValue) => {\n  const {\n    additionalTextareaProps,\n    asyncMessagesMultiSendEnabled,\n    audioRecordingEnabled,\n    emojiSearchIndex,\n    focus,\n    hideSendButton,\n    maxRows,\n    minRows,\n    onPaste,\n    parent,\n    recordingController,\n    shouldSubmit,\n    textareaRef,\n  } = value;\n\n  const parentId = parent?.id;\n\n  const messageComposerContext: MessageComposerContextValue = useMemo(\n    () => ({\n      additionalTextareaProps,\n      asyncMessagesMultiSendEnabled,\n      audioRecordingEnabled,\n      emojiSearchIndex,\n      focus,\n      hideSendButton,\n      maxRows,\n      minRows,\n      onPaste,\n      parent,\n      recordingController,\n      shouldSubmit,\n      textareaRef,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      asyncMessagesMultiSendEnabled,\n      audioRecordingEnabled,\n      emojiSearchIndex,\n      hideSendButton,\n      minRows,\n      parentId,\n      recordingController,\n    ],\n  );\n\n  return messageComposerContext;\n};\n"],"mappings":";;AAIA,IAAa,mCAAmC,UAAuC;CACrF,MAAM,EACJ,yBACA,+BACA,uBACA,kBACA,OACA,gBACA,SACA,SACA,SACA,QACA,qBACA,cACA,gBACE;CAEJ,MAAM,WAAW,QAAQ;CA8BzB,OA5B4D,eACnD;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAGK;AACT"}

package/dist/es/components/MessageComposer/hooks/useIsCooldownActive.mjs

@@ -0,0 +1,11 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+//#region src/components/MessageComposer/hooks/useIsCooldownActive.ts
+var cooldownTimerStateSelector = (state) => ({ isCooldownActive: !!state.cooldownRemaining });
+var useIsCooldownActive = () => {
+	return useStateStore(useChannel().cooldownTimer.state, cooldownTimerStateSelector).isCooldownActive;
+};
+//#endregion
+export { useIsCooldownActive };
+
+//# sourceMappingURL=useIsCooldownActive.mjs.map

package/dist/es/components/MessageComposer/hooks/useIsCooldownActive.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsCooldownActive.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useIsCooldownActive.ts"],"sourcesContent":["import { useChannel } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { CooldownTimerState } from 'stream-chat';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  isCooldownActive: !!state.cooldownRemaining,\n});\n\nexport const useIsCooldownActive = () => {\n  const channel = useChannel();\n  return useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n    .isCooldownActive;\n};\n"],"mappings":";;;AAIA,IAAM,8BAA8B,WAA+B,EACjE,kBAAkB,CAAC,CAAC,MAAM,kBAC5B;AAEA,IAAa,4BAA4B;CAEvC,OAAO,cADS,WACK,CAAA,CAAQ,cAAc,OAAO,0BAA0B,CAAC,CAC1E;AACL"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerBindings.mjs

@@ -0,0 +1,23 @@
+import { useTextareaRef } from "./useTextareaRef.mjs";
+import { usePasteHandler } from "./usePasteHandler.mjs";
+import { useMediaRecorder } from "../../MediaRecorder/hooks/useMediaRecorder.mjs";
+//#region src/components/MessageComposer/hooks/useMessageComposerBindings.ts
+var useMessageComposerBindings = (props) => {
+	const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } = props;
+	const { textareaRef } = useTextareaRef(props);
+	const recordingController = useMediaRecorder({
+		asyncMessagesMultiSendEnabled,
+		enabled: !!audioRecordingEnabled,
+		recordingConfig: audioRecordingConfig
+	});
+	const { onPaste } = usePasteHandler();
+	return {
+		onPaste,
+		recordingController,
+		textareaRef
+	};
+};
+//#endregion
+export { useMessageComposerBindings };
+
+//# sourceMappingURL=useMessageComposerBindings.mjs.map

package/dist/es/components/MessageComposer/hooks/useMessageComposerBindings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageComposerBindings.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerBindings.ts"],"sourcesContent":["import type React from 'react';\nimport { useTextareaRef } from './useTextareaRef';\nimport { usePasteHandler } from './usePasteHandler';\nimport type { RecordingController } from '../../MediaRecorder/hooks/useMediaRecorder';\nimport { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';\nimport type { MessageComposerProps } from '../MessageComposer';\n\nexport type UseMessageComposerBindingsParams = {\n  onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;\n  recordingController: RecordingController;\n  textareaRef: React.RefObject<HTMLTextAreaElement | null | undefined>;\n};\n\nexport const useMessageComposerBindings = (\n  props: MessageComposerProps,\n): UseMessageComposerBindingsParams => {\n  const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } =\n    props;\n\n  const { textareaRef } = useTextareaRef(props);\n\n  const recordingController = useMediaRecorder({\n    asyncMessagesMultiSendEnabled,\n    enabled: !!audioRecordingEnabled,\n    recordingConfig: audioRecordingConfig,\n  });\n\n  const { onPaste } = usePasteHandler();\n\n  return {\n    onPaste,\n    recordingController,\n    textareaRef,\n  };\n};\n"],"mappings":";;;;AAaA,IAAa,8BACX,UACqC;CACrC,MAAM,EAAE,+BAA+B,sBAAsB,0BAC3D;CAEF,MAAM,EAAE,gBAAgB,eAAe,KAAK;CAE5C,MAAM,sBAAsB,iBAAiB;EAC3C;EACA,SAAS,CAAC,CAAC;EACX,iBAAiB;CACnB,CAAC;CAED,MAAM,EAAE,YAAY,gBAAgB;CAEpC,OAAO;EACL;EACA;EACA;CACF;AACF"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerCommands.mjs

@@ -0,0 +1,27 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageComposer/hooks/useMessageComposerCommands.ts
+var messageComposerStateSelector = ({ editedMessage, quotedMessage }) => ({
+	editedMessage,
+	quotedMessage
+});
+var channelConfigStateSelector = ({ availableCommands }) => ({ availableCommands });
+var useMessageComposerCommands = () => {
+	const messageComposer = useMessageComposerController();
+	const { availableCommands } = useStateStore(messageComposer.channel.configState, channelConfigStateSelector);
+	const { editedMessage, quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
+	return useMemo(() => (availableCommands ?? []).filter((command) => !!command.name).map((command) => ({
+		command,
+		enabled: !messageComposer.isCommandDisabled(command)
+	})), [
+		availableCommands,
+		editedMessage,
+		messageComposer,
+		quotedMessage
+	]);
+};
+//#endregion
+export { useMessageComposerCommands };
+
+//# sourceMappingURL=useMessageComposerCommands.mjs.map

package/dist/es/components/MessageComposer/hooks/useMessageComposerCommands.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageComposerCommands.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerCommands.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { ChannelConfig, Command, MessageComposerState } from 'stream-chat';\n\nimport { useStateStore } from '../../../store';\nimport { useMessageComposerController } from './useMessageComposerController';\n\nconst messageComposerStateSelector = ({\n  editedMessage,\n  quotedMessage,\n}: MessageComposerState) => ({\n  editedMessage,\n  quotedMessage,\n});\n\nconst channelConfigStateSelector = ({ availableCommands }: ChannelConfig) => ({\n  availableCommands,\n});\n\nexport type MessageComposerCommand = {\n  command: Command & { name: string };\n  enabled: boolean;\n};\n\nexport const useMessageComposerCommands = () => {\n  const messageComposer = useMessageComposerController();\n  const { availableCommands } = useStateStore(\n    messageComposer.channel.configState,\n    channelConfigStateSelector,\n  );\n  const { editedMessage, quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateSelector,\n  );\n\n  return useMemo<MessageComposerCommand[]>(\n    () =>\n      (availableCommands ?? [])\n        .filter((command): command is Command & { name: string } => !!command.name)\n        .map((command) => ({\n          command,\n          enabled: !messageComposer.isCommandDisabled(command),\n        })),\n    // editedMessage and quotedMessage are necessary in deps for reactivity\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [availableCommands, editedMessage, messageComposer, quotedMessage],\n  );\n};\n"],"mappings":";;;;AAMA,IAAM,gCAAgC,EACpC,eACA,qBAC2B;CAC3B;CACA;AACF;AAEA,IAAM,8BAA8B,EAAE,yBAAwC,EAC5E,kBACF;AAOA,IAAa,mCAAmC;CAC9C,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,sBAAsB,cAC5B,gBAAgB,QAAQ,aACxB,0BACF;CACA,MAAM,EAAE,eAAe,kBAAkB,cACvC,gBAAgB,OAChB,4BACF;CAEA,OAAO,eAEF,qBAAqB,CAAC,EAAA,CACpB,QAAQ,YAAmD,CAAC,CAAC,QAAQ,IAAI,CAAC,CAC1E,KAAK,aAAa;EACjB;EACA,SAAS,CAAC,gBAAgB,kBAAkB,OAAO;CACrD,EAAE,GAGN;EAAC;EAAmB;EAAe;EAAiB;CAAa,CACnE;AACF"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerController.mjs

@@ -0,0 +1,30 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useThreadContext } from "../../Threads/ThreadContext.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import { useMessageComposerControllerContext } from "../../../context/MessageComposerControllerContext.mjs";
+import { useEffect, useMemo } from "react";
+//#region src/components/MessageComposer/hooks/useMessageComposerController.ts
+var useMessageComposerController = () => {
+	const { client } = useChatContext();
+	const { messageComposerCache: queueCache } = client;
+	const channel = useChannel();
+	const threadInstance = useThreadContext();
+	const suppliedComposer = useMessageComposerControllerContext();
+	const messageComposer = useMemo(() => suppliedComposer ?? threadInstance?.messageComposer ?? channel.messageComposer, [
+		channel,
+		suppliedComposer,
+		threadInstance
+	]);
+	if (["message"].includes(messageComposer.contextType) && !queueCache.peek(messageComposer.tag)) queueCache.add(messageComposer.tag, messageComposer);
+	useEffect(() => {
+		const unsubscribe = messageComposer.registerSubscriptions();
+		return () => {
+			unsubscribe();
+		};
+	}, [messageComposer]);
+	return messageComposer;
+};
+//#endregion
+export { useMessageComposerController };
+
+//# sourceMappingURL=useMessageComposerController.mjs.map

package/dist/es/components/MessageComposer/hooks/useMessageComposerController.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageComposerController.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerController.ts"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport type { MessageComposer as MessageComposerController } from 'stream-chat';\nimport { useThreadContext } from '../../Threads';\nimport {\n  useChannel,\n  useChatContext,\n  useMessageComposerControllerContext,\n} from '../../../context';\n\nexport const useMessageComposerController = () => {\n  const { client } = useChatContext();\n  const { messageComposerCache: queueCache } = client;\n  const channel = useChannel();\n  const threadInstance = useThreadContext();\n  const suppliedComposer = useMessageComposerControllerContext();\n\n  // composer hierarchy: supplied by the integrator -> thread instance (own) -> channel (own)\n  const messageComposer = useMemo(\n    () => suppliedComposer ?? threadInstance?.messageComposer ?? channel.messageComposer,\n    [channel, suppliedComposer, threadInstance],\n  );\n\n  // Only a supplied composer can carry a message context (an edit); the thread's and channel's own\n  // never do.\n  if (\n    (['message'] as MessageComposerController['contextType'][]).includes(\n      messageComposer.contextType,\n    ) &&\n    !queueCache.peek(messageComposer.tag)\n  ) {\n    queueCache.add(messageComposer.tag, messageComposer);\n  }\n\n  useEffect(() => {\n    const unsubscribe = messageComposer.registerSubscriptions();\n    return () => {\n      unsubscribe();\n    };\n  }, [messageComposer]);\n\n  return messageComposer;\n};\n"],"mappings":";;;;;;AASA,IAAa,qCAAqC;CAChD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,sBAAsB,eAAe;CAC7C,MAAM,UAAU,WAAW;CAC3B,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,mBAAmB,oCAAoC;CAG7D,MAAM,kBAAkB,cAChB,oBAAoB,gBAAgB,mBAAmB,QAAQ,iBACrE;EAAC;EAAS;EAAkB;CAAc,CAC5C;CAIA,IACG,CAAC,SAAS,CAAC,CAAgD,SAC1D,gBAAgB,WAClB,KACA,CAAC,WAAW,KAAK,gBAAgB,GAAG,GAEpC,WAAW,IAAI,gBAAgB,KAAK,eAAe;CAGrD,gBAAgB;EACd,MAAM,cAAc,gBAAgB,sBAAsB;EAC1D,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,OAAO;AACT"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerHasSendableData.mjs

@@ -0,0 +1,13 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+//#region src/components/MessageComposer/hooks/useMessageComposerHasSendableData.ts
+var editingAuditStateStateSelector = (state) => state;
+var useMessageComposerHasSendableData = () => {
+	const messageComposer = useMessageComposerController();
+	useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);
+	return messageComposer.hasSendableData;
+};
+//#endregion
+export { useMessageComposerHasSendableData };
+
+//# sourceMappingURL=useMessageComposerHasSendableData.mjs.map

package/dist/es/components/MessageComposer/hooks/useMessageComposerHasSendableData.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageComposerHasSendableData.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerHasSendableData.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { EditingAuditState } from 'stream-chat';\n\nconst editingAuditStateStateSelector = (state: EditingAuditState) => state;\n\nexport const useMessageComposerHasSendableData = () => {\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);\n  return messageComposer.hasSendableData;\n};\n"],"mappings":";;;AAIA,IAAM,kCAAkC,UAA6B;AAErE,IAAa,0CAA0C;CACrD,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,mBAAmB,8BAA8B;CAC/E,OAAO,gBAAgB;AACzB"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerSubmitFn.mjs

@@ -0,0 +1,16 @@
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { useCallback } from "react";
+//#region src/components/MessageComposer/hooks/useMessageComposerSubmitFn.ts
+/**
+* Submits what the composer holds: saves the edit while a message is being edited, sends a new
+* message otherwise. Checked when submitting rather than when rendering, and shared by every submit
+* control, so the send button and the Enter key cannot disagree about it.
+*/
+var useMessageComposerSubmitFn = () => {
+	const messageComposer = useMessageComposerController();
+	return useCallback(() => messageComposer.editedMessage ? messageComposer.update() : messageComposer.send(), [messageComposer]);
+};
+//#endregion
+export { useMessageComposerSubmitFn };
+
+//# sourceMappingURL=useMessageComposerSubmitFn.mjs.map

package/dist/es/components/MessageComposer/hooks/useMessageComposerSubmitFn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageComposerSubmitFn.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerSubmitFn.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { useMessageComposerController } from './useMessageComposerController';\n\n/**\n * Submits what the composer holds: saves the edit while a message is being edited, sends a new\n * message otherwise. Checked when submitting rather than when rendering, and shared by every submit\n * control, so the send button and the Enter key cannot disagree about it.\n */\nexport const useMessageComposerSubmitFn = () => {\n  const messageComposer = useMessageComposerController();\n\n  return useCallback(\n    () =>\n      messageComposer.editedMessage ? messageComposer.update() : messageComposer.send(),\n    [messageComposer],\n  );\n};\n"],"mappings":";;;;;;;;AASA,IAAa,mCAAmC;CAC9C,MAAM,kBAAkB,6BAA6B;CAErD,OAAO,kBAEH,gBAAgB,gBAAgB,gBAAgB,OAAO,IAAI,gBAAgB,KAAK,GAClF,CAAC,eAAe,CAClB;AACF"}

package/dist/es/components/MessageComposer/hooks/useMessageContentIsEmpty.mjs

@@ -0,0 +1,13 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+//#region src/components/MessageComposer/hooks/useMessageContentIsEmpty.ts
+var editingAuditStateStateSelector = (state) => state;
+var useMessageContentIsEmpty = () => {
+	const messageComposer = useMessageComposerController();
+	useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);
+	return messageComposer.contentIsEmpty;
+};
+//#endregion
+export { useMessageContentIsEmpty };
+
+//# sourceMappingURL=useMessageContentIsEmpty.mjs.map

package/dist/es/components/MessageComposer/hooks/useMessageContentIsEmpty.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageContentIsEmpty.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageContentIsEmpty.ts"],"sourcesContent":["import type { EditingAuditState } from 'stream-chat';\nimport { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\n\nconst editingAuditStateStateSelector = (state: EditingAuditState) => state;\n\nexport const useMessageContentIsEmpty = () => {\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);\n  return messageComposer.contentIsEmpty;\n};\n"],"mappings":";;;AAIA,IAAM,kCAAkC,UAA6B;AAErE,IAAa,iCAAiC;CAC5C,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,mBAAmB,8BAA8B;CAC/E,OAAO,gBAAgB;AACzB"}

package/dist/es/components/MessageComposer/hooks/usePasteHandler.mjs

@@ -0,0 +1,34 @@
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { dataTransferItemsToFiles } from "../../ReactFileUtilities/utils.mjs";
+import { useCallback } from "react";
+//#region src/components/MessageComposer/hooks/usePasteHandler.ts
+var usePasteHandler = () => {
+	const { attachmentManager, textComposer } = useMessageComposerController();
+	return { onPaste: useCallback((clipboardEvent) => {
+		(async (event) => {
+			const { items } = event.clipboardData;
+			event.preventDefault();
+			let plainTextPromise = void 0;
+			for (let i = 0; i < items.length; i++) {
+				const item = items[i];
+				if (item.kind === "string" && item.type === "text/plain") {
+					plainTextPromise = new Promise((resolve) => {
+						item.getAsString((string) => {
+							resolve(string);
+						});
+					});
+					break;
+				}
+			}
+			const fileLikes = await dataTransferItemsToFiles(Array.from(items));
+			if (plainTextPromise) {
+				const pastedText = await plainTextPromise;
+				textComposer.insertText({ text: pastedText });
+			} else attachmentManager.uploadFiles(fileLikes);
+		})(clipboardEvent);
+	}, [attachmentManager, textComposer]) };
+};
+//#endregion
+export { usePasteHandler };
+
+//# sourceMappingURL=usePasteHandler.mjs.map

package/dist/es/components/MessageComposer/hooks/usePasteHandler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePasteHandler.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/usePasteHandler.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useMessageComposerController } from './useMessageComposerController';\nimport { dataTransferItemsToFiles } from '../../ReactFileUtilities';\n\nexport const usePasteHandler = () => {\n  const { attachmentManager, textComposer } = useMessageComposerController();\n  const onPaste = useCallback(\n    (clipboardEvent: React.ClipboardEvent<HTMLTextAreaElement>) => {\n      (async (event) => {\n        const { items } = event.clipboardData;\n        event.preventDefault();\n        // Get a promise for the plain text in case no files are\n        // found. This needs to be done here because chrome cleans\n        // up the DataTransferItems after resolving of a promise.\n        let plainTextPromise: Promise<string> | undefined = undefined;\n        for (let i = 0; i < items.length; i++) {\n          const item = items[i];\n          if (item.kind === 'string' && item.type === 'text/plain') {\n            plainTextPromise = new Promise((resolve) => {\n              item.getAsString((string) => {\n                resolve(string);\n              });\n            });\n            break;\n          }\n        }\n\n        const fileLikes = await dataTransferItemsToFiles(Array.from(items));\n\n        if (plainTextPromise) {\n          const pastedText = await plainTextPromise;\n          textComposer.insertText({ text: pastedText });\n        } else {\n          attachmentManager.uploadFiles(fileLikes);\n        }\n      })(clipboardEvent);\n    },\n    [attachmentManager, textComposer],\n  );\n\n  return { onPaste };\n};\n"],"mappings":";;;;AAIA,IAAa,wBAAwB;CACnC,MAAM,EAAE,mBAAmB,iBAAiB,6BAA6B;CAmCzE,OAAO,EAAE,SAlCO,aACb,mBAA8D;EAC7D,CAAC,OAAO,UAAU;GAChB,MAAM,EAAE,UAAU,MAAM;GACxB,MAAM,eAAe;GAIrB,IAAI,mBAAgD,KAAA;GACpD,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;IACrC,MAAM,OAAO,MAAM;IACnB,IAAI,KAAK,SAAS,YAAY,KAAK,SAAS,cAAc;KACxD,mBAAmB,IAAI,SAAS,YAAY;MAC1C,KAAK,aAAa,WAAW;OAC3B,QAAQ,MAAM;MAChB,CAAC;KACH,CAAC;KACD;IACF;GACF;GAEA,MAAM,YAAY,MAAM,yBAAyB,MAAM,KAAK,KAAK,CAAC;GAElE,IAAI,kBAAkB;IACpB,MAAM,aAAa,MAAM;IACzB,aAAa,WAAW,EAAE,MAAM,WAAW,CAAC;GAC9C,OACE,kBAAkB,YAAY,SAAS;EAE3C,EAAA,CAAG,cAAc;CACnB,GACA,CAAC,mBAAmB,YAAY,CAGzB,EAAQ;AACnB"}

package/dist/es/components/MessageComposer/hooks/useTextareaRef.mjs

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+//#region src/components/MessageComposer/hooks/useTextareaRef.ts
+var useTextareaRef = (props) => {
+	const { focus } = props;
+	const textareaRef = useRef(void 0);
+	useEffect(() => {
+		if (focus && textareaRef.current) textareaRef.current.focus();
+	}, [focus]);
+	return { textareaRef };
+};
+//#endregion
+export { useTextareaRef };
+
+//# sourceMappingURL=useTextareaRef.mjs.map

package/dist/es/components/MessageComposer/hooks/useTextareaRef.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextareaRef.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useTextareaRef.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MessageComposerProps } from '../MessageComposer';\n\nexport const useTextareaRef = (props: MessageComposerProps) => {\n  const { focus } = props;\n  const textareaRef = useRef<HTMLTextAreaElement>(undefined);\n  // Focus\n  useEffect(() => {\n    if (focus && textareaRef.current) {\n      textareaRef.current.focus();\n    }\n  }, [focus]);\n\n  return {\n    textareaRef,\n  };\n};\n"],"mappings":";;AAGA,IAAa,kBAAkB,UAAgC;CAC7D,MAAM,EAAE,UAAU;CAClB,MAAM,cAAc,OAA4B,KAAA,CAAS;CAEzD,gBAAgB;EACd,IAAI,SAAS,YAAY,SACvB,YAAY,QAAQ,MAAM;CAE9B,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO,EACL,YACF;AACF"}

package/dist/es/components/MessageComposer/hooks/utils.mjs

@@ -0,0 +1,16 @@
+//#region src/components/MessageComposer/hooks/utils.ts
+function prettifyFileSize(bytes, precision = 3) {
+	const units = [
+		"B",
+		"kB",
+		"MB",
+		"GB"
+	];
+	const exponent = bytes === 0 ? 0 : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+	const mantissa = bytes / 1024 ** exponent;
+	return `${precision === 0 || mantissa >= 10 ** precision ? Math.round(mantissa).toString() : mantissa.toPrecision(precision)} ${units[exponent]}`;
+}
+//#endregion
+export { prettifyFileSize };
+
+//# sourceMappingURL=utils.mjs.map

package/dist/es/components/MessageComposer/hooks/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/utils.ts"],"sourcesContent":["export function prettifyFileSize(bytes: number, precision = 3) {\n  const units = ['B', 'kB', 'MB', 'GB'];\n  const exponent =\n    bytes === 0\n      ? 0\n      : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);\n  const mantissa = bytes / 1024 ** exponent;\n  const formattedMantissa =\n    // `toPrecision` switches to exponential notation as soon as the value needs more integer\n    // digits than the requested significant digits, so any size just below the next unit boundary\n    // came out as `1.00e+3 B` (1000-1023 B, and the same range in kB/MB/GB). Such a mantissa has\n    // no fraction worth showing at this precision, so round it to an integer instead.\n    precision === 0 || mantissa >= 10 ** precision\n      ? Math.round(mantissa).toString()\n      : mantissa.toPrecision(precision);\n  return `${formattedMantissa} ${units[exponent]}`;\n}\n"],"mappings":";AAAA,SAAgB,iBAAiB,OAAe,YAAY,GAAG;CAC7D,MAAM,QAAQ;EAAC;EAAK;EAAM;EAAM;CAAI;CACpC,MAAM,WACJ,UAAU,IACN,IACA,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,GAAG,MAAM,SAAS,CAAC;CAC7E,MAAM,WAAW,QAAQ,QAAQ;CASjC,OAAO,GAHL,cAAc,KAAK,YAAY,MAAM,YACjC,KAAK,MAAM,QAAQ,CAAC,CAAC,SAAS,IAC9B,SAAS,YAAY,SAAS,EACR,GAAG,MAAM;AACvC"}

package/dist/es/components/MessageComposer/icons.mjs

@@ -0,0 +1,62 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageComposer/icons.tsx
+var UploadIcon = () => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-testid": "attach-icon",
+		fill: "none",
+		height: "24",
+		viewBox: "0 0 24 24",
+		width: "24",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("title", { children: t("messageComposer.icons.attachFiles.text", "Attach files") }),
+			/* @__PURE__ */ jsx("g", {
+				clipPath: "url(#clip0_10878_5)",
+				children: /* @__PURE__ */ jsx("path", {
+					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",
+					fill: "black"
+				})
+			}),
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: "clip0_10878_5",
+				children: /* @__PURE__ */ jsx("rect", {
+					fill: "white",
+					height: "24",
+					width: "24"
+				})
+			}) })
+		]
+	});
+};
+var BinIcon = () => /* @__PURE__ */ jsx("svg", {
+	fill: "currentColor",
+	viewBox: "0 0 32 32",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("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" })
+});
+var PauseIcon = () => /* @__PURE__ */ jsx("svg", {
+	"data-testid": "str-chat__pause-icon",
+	fill: "currentColor",
+	viewBox: "0 0 16 20",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", { d: "M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z" })
+});
+var PlayIcon = () => /* @__PURE__ */ jsx("svg", {
+	"data-testid": "str-chat__play-icon",
+	fill: "currentColor",
+	viewBox: "0 0 14 18",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("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" })
+});
+var CheckSignIcon = () => /* @__PURE__ */ jsx("svg", {
+	fill: "currentColor",
+	viewBox: "0 0 18 14",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("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" })
+});
+//#endregion
+export { BinIcon, CheckSignIcon, PauseIcon, PlayIcon, UploadIcon };
+
+//# sourceMappingURL=icons.mjs.map

package/dist/es/components/MessageComposer/icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.mjs","names":[],"sources":["../../../../src/components/MessageComposer/icons.tsx"],"sourcesContent":["import { useTranslationContext } from '../../context/TranslationContext';\n\nexport const UploadIcon = () => {\n  const { t } = useTranslationContext();\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('messageComposer.icons.attachFiles.text', '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 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"],"mappings":";;;AAEA,IAAa,mBAAmB;CAC9B,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,OAAM;YANR;GAQE,oBAAC,SAAD,EAAA,UAAQ,EAAE,0CAA0C,cAAc,EAAS,CAAA;GAC3E,oBAAC,KAAD;IAAG,UAAS;cACV,oBAAC,QAAD;KACE,GAAE;KACF,MAAK;IACN,CAAA;GACA,CAAA;GACH,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD;IAAU,IAAG;cACX,oBAAC,QAAD;KAAM,MAAK;KAAQ,QAAO;KAAK,OAAM;IAAM,CAAA;GACnC,CAAA,EACN,CAAA;EACH;;AAET;AAEA,IAAa,gBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,qhBAAshB,CAAA;AAC3hB,CAAA;AAGP,IAAa,kBACX,oBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,SAAQ;CACR,OAAM;WAEN,oBAAC,QAAD,EAAM,GAAE,uFAAwF,CAAA;AAC7F,CAAA;AAGP,IAAa,iBACX,oBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,SAAQ;CACR,OAAM;WAEN,oBAAC,QAAD,EAAM,GAAE,gNAAiN,CAAA;AACtN,CAAA;AAGP,IAAa,sBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,gUAAiU,CAAA;AACtU,CAAA"}

package/dist/es/components/MessageComposer/preEditSnapshot.mjs

@@ -0,0 +1,39 @@
+//#region src/components/MessageComposer/preEditSnapshot.ts
+var snapshots = /* @__PURE__ */ new WeakMap();
+/**
+* Captures a full state snapshot of the composer before entering edit mode.
+* Does nothing if a snapshot already exists (e.g. switching between edits).
+*/
+var savePreEditSnapshot = (messageComposer) => {
+	if (snapshots.has(messageComposer)) return;
+	const composerState = messageComposer.state.getLatestValue();
+	const textState = messageComposer.textComposer.state.getLatestValue();
+	const attachmentState = messageComposer.attachmentManager.state.getLatestValue();
+	const linkPreviewState = messageComposer.linkPreviewsManager.state.getLatestValue();
+	const locationState = messageComposer.locationComposer.state.getLatestValue();
+	const pollState = messageComposer.pollComposer.state.getLatestValue();
+	const customDataState = messageComposer.customDataManager.state.getLatestValue();
+	snapshots.set(messageComposer, () => {
+		messageComposer.state.next(composerState);
+		messageComposer.textComposer.state.next(textState);
+		messageComposer.attachmentManager.state.next(attachmentState);
+		messageComposer.linkPreviewsManager.state.next(linkPreviewState);
+		messageComposer.locationComposer.state.next(locationState);
+		messageComposer.pollComposer.state.next(pollState);
+		messageComposer.customDataManager.state.next(customDataState);
+	});
+};
+/**
+* Restores the composer to the state captured before editing began.
+* Falls back to `clear()` if no snapshot exists.
+*/
+var restorePreEditSnapshot = (messageComposer) => {
+	const restore = snapshots.get(messageComposer);
+	snapshots.delete(messageComposer);
+	if (restore) restore();
+	else messageComposer.clear();
+};
+//#endregion
+export { restorePreEditSnapshot, savePreEditSnapshot };
+
+//# sourceMappingURL=preEditSnapshot.mjs.map

package/dist/es/components/MessageComposer/preEditSnapshot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preEditSnapshot.mjs","names":[],"sources":["../../../../src/components/MessageComposer/preEditSnapshot.ts"],"sourcesContent":["import type { MessageComposer } from 'stream-chat';\n\ntype RestoreFunction = () => void;\n\nconst snapshots = new WeakMap<MessageComposer, RestoreFunction>();\n\n/**\n * Captures a full state snapshot of the composer before entering edit mode.\n * Does nothing if a snapshot already exists (e.g. switching between edits).\n */\nexport const savePreEditSnapshot = (messageComposer: MessageComposer) => {\n  if (snapshots.has(messageComposer)) return;\n\n  const composerState = messageComposer.state.getLatestValue();\n  const textState = messageComposer.textComposer.state.getLatestValue();\n  const attachmentState = messageComposer.attachmentManager.state.getLatestValue();\n  const linkPreviewState = messageComposer.linkPreviewsManager.state.getLatestValue();\n  const locationState = messageComposer.locationComposer.state.getLatestValue();\n  const pollState = messageComposer.pollComposer.state.getLatestValue();\n  const customDataState = messageComposer.customDataManager.state.getLatestValue();\n\n  snapshots.set(messageComposer, () => {\n    messageComposer.state.next(composerState);\n    messageComposer.textComposer.state.next(textState);\n    messageComposer.attachmentManager.state.next(attachmentState);\n    messageComposer.linkPreviewsManager.state.next(linkPreviewState);\n    messageComposer.locationComposer.state.next(locationState);\n    messageComposer.pollComposer.state.next(pollState);\n    messageComposer.customDataManager.state.next(customDataState);\n  });\n};\n\n/**\n * Restores the composer to the state captured before editing began.\n * Falls back to `clear()` if no snapshot exists.\n */\nexport const restorePreEditSnapshot = (messageComposer: MessageComposer) => {\n  const restore = snapshots.get(messageComposer);\n  snapshots.delete(messageComposer);\n  if (restore) {\n    restore();\n  } else {\n    messageComposer.clear();\n  }\n};\n\n/**\n * Discards the snapshot without restoring (e.g. after a successful edit save).\n */\nexport const discardPreEditSnapshot = (messageComposer: MessageComposer) => {\n  snapshots.delete(messageComposer);\n};\n"],"mappings":";AAIA,IAAM,4BAAY,IAAI,QAA0C;;;;;AAMhE,IAAa,uBAAuB,oBAAqC;CACvE,IAAI,UAAU,IAAI,eAAe,GAAG;CAEpC,MAAM,gBAAgB,gBAAgB,MAAM,eAAe;CAC3D,MAAM,YAAY,gBAAgB,aAAa,MAAM,eAAe;CACpE,MAAM,kBAAkB,gBAAgB,kBAAkB,MAAM,eAAe;CAC/E,MAAM,mBAAmB,gBAAgB,oBAAoB,MAAM,eAAe;CAClF,MAAM,gBAAgB,gBAAgB,iBAAiB,MAAM,eAAe;CAC5E,MAAM,YAAY,gBAAgB,aAAa,MAAM,eAAe;CACpE,MAAM,kBAAkB,gBAAgB,kBAAkB,MAAM,eAAe;CAE/E,UAAU,IAAI,uBAAuB;EACnC,gBAAgB,MAAM,KAAK,aAAa;EACxC,gBAAgB,aAAa,MAAM,KAAK,SAAS;EACjD,gBAAgB,kBAAkB,MAAM,KAAK,eAAe;EAC5D,gBAAgB,oBAAoB,MAAM,KAAK,gBAAgB;EAC/D,gBAAgB,iBAAiB,MAAM,KAAK,aAAa;EACzD,gBAAgB,aAAa,MAAM,KAAK,SAAS;EACjD,gBAAgB,kBAAkB,MAAM,KAAK,eAAe;CAC9D,CAAC;AACH;;;;;AAMA,IAAa,0BAA0B,oBAAqC;CAC1E,MAAM,UAAU,UAAU,IAAI,eAAe;CAC7C,UAAU,OAAO,eAAe;CAChC,IAAI,SACF,QAAQ;MAER,gBAAgB,MAAM;AAE1B"}