stream-chat-react 14.11.0 → 14.12.0

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

@@ -0,0 +1,206 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { ModalContext } from "../../context/ModalContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { BaseImage } from "../BaseImage/BaseImage.mjs";
+import { useGalleryContext } from "./GalleryContext.mjs";
+import { GalleryHeader } from "./GalleryHeader.mjs";
+import { VideoPlayer } from "../VideoPlayer/VideoPlayer.mjs";
+import { VideoThumbnail } from "../VideoPlayer/VideoThumbnail.mjs";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Gallery/GalleryUI.tsx
+var SWIPE_THRESHOLD = 50;
+var TRANSITION_DURATION = 300;
+var GalleryUI = () => {
+	const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { closeOnBackgroundClick, currentIndex, currentItem, goToNext, goToPrevious, hasNext, hasPrevious, itemCount, onRequestClose } = useGalleryContext();
+	const modalContext = useContext(ModalContext);
+	const [showVideo, setShowVideo] = useState(false);
+	const isTransitioningRef = useRef(false);
+	const [slideOffset, setSlideOffset] = useState(0);
+	const [isDragging, setIsDragging] = useState(false);
+	const [slideDirection, setSlideDirection] = useState(null);
+	const ignoreNextClickRef = useRef(false);
+	const touchStartRef = useRef(null);
+	const isVerticalSwipeRef = useRef(false);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		setShowVideo(false);
+	}, [currentIndex]);
+	const prevIndexRef = useRef(currentIndex);
+	useEffect(() => {
+		if (prevIndexRef.current === currentIndex) return;
+		setSlideDirection(currentIndex > prevIndexRef.current ? "forward" : "backward");
+		setSlideOffset(0);
+		setIsDragging(false);
+		isTransitioningRef.current = true;
+		const timer = setTimeout(() => {
+			setSlideDirection(null);
+			isTransitioningRef.current = false;
+		}, TRANSITION_DURATION);
+		prevIndexRef.current = currentIndex;
+		return () => clearTimeout(timer);
+	}, [currentIndex]);
+	const handleGoToNext = useCallback(() => {
+		if (isTransitioningRef.current) return;
+		goToNext();
+	}, [goToNext]);
+	const handleGoToPrevious = useCallback(() => {
+		if (isTransitioningRef.current) return;
+		goToPrevious();
+	}, [goToPrevious]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			handleGoToPrevious();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			handleGoToNext();
+		}
+	}, [handleGoToNext, handleGoToPrevious]);
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [handleKeyDown]);
+	const handleTouchStart = useCallback((event) => {
+		if (isTransitioningRef.current) return;
+		const touch = event.touches[0];
+		ignoreNextClickRef.current = false;
+		touchStartRef.current = {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+		isVerticalSwipeRef.current = false;
+	}, []);
+	const handleTouchMove = useCallback((event) => {
+		if (!touchStartRef.current || isTransitioningRef.current) return;
+		const touch = event.touches[0];
+		const deltaX = touch.clientX - touchStartRef.current.x;
+		const deltaY = touch.clientY - touchStartRef.current.y;
+		if (!isDragging && !isVerticalSwipeRef.current) {
+			if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 10) {
+				ignoreNextClickRef.current = true;
+				isVerticalSwipeRef.current = true;
+				return;
+			}
+			if (Math.abs(deltaX) > 10) {
+				ignoreNextClickRef.current = true;
+				setIsDragging(true);
+			}
+		}
+		if (isVerticalSwipeRef.current) return;
+		if (!hasNext && deltaX < 0 || !hasPrevious && deltaX > 0) setSlideOffset(deltaX * .3);
+		else setSlideOffset(deltaX);
+	}, [
+		isDragging,
+		hasNext,
+		hasPrevious
+	]);
+	const handleTouchEnd = useCallback(() => {
+		if (!touchStartRef.current || isVerticalSwipeRef.current) {
+			if (isVerticalSwipeRef.current) ignoreNextClickRef.current = true;
+			touchStartRef.current = null;
+			return;
+		}
+		const offset = slideOffset;
+		if (isDragging || Math.abs(offset) > 10) ignoreNextClickRef.current = true;
+		touchStartRef.current = null;
+		if (Math.abs(offset) >= SWIPE_THRESHOLD) if (offset < 0 && hasNext) goToNext();
+		else if (offset > 0 && hasPrevious) goToPrevious();
+		else setSlideOffset(0);
+		else setSlideOffset(0);
+		setIsDragging(false);
+	}, [
+		slideOffset,
+		hasNext,
+		hasPrevious,
+		goToNext,
+		goToPrevious,
+		isDragging
+	]);
+	const requestClose = modalContext?.close ?? onRequestClose;
+	const handleBackgroundClick = useCallback((event) => {
+		if (event.target !== event.currentTarget) return;
+		if (ignoreNextClickRef.current) {
+			ignoreNextClickRef.current = false;
+			return;
+		}
+		if (!closeOnBackgroundClick) return;
+		requestClose?.();
+	}, [closeOnBackgroundClick, requestClose]);
+	const mediaStyle = isDragging || slideOffset !== 0 && slideDirection === null ? { transform: `translateX(${slideOffset}px)` } : {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__gallery",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "str-chat__gallery__main",
+			children: [
+				/* @__PURE__ */ jsx(GalleryHeader, { currentItem }),
+				/* @__PURE__ */ jsx(NavButton, {
+					"aria-label": t("Previous image"),
+					className: clsx("str-chat__gallery__nav-button--prev", !hasPrevious && "str-chat__gallery__nav-button--hidden"),
+					disabled: !hasPrevious,
+					onClick: handleGoToPrevious,
+					children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "str-chat__gallery__slide-container",
+					onClick: handleBackgroundClick,
+					onTouchEnd: handleTouchEnd,
+					onTouchMove: handleTouchMove,
+					onTouchStart: handleTouchStart,
+					ref: containerRef,
+					children: /* @__PURE__ */ jsx("div", {
+						className: clsx("str-chat__gallery__media-container", {
+							"str-chat__gallery__media--dragging": isDragging,
+							"str-chat__gallery__media--slide-backward": !isDragging && slideDirection === "backward",
+							"str-chat__gallery__media--slide-forward": !isDragging && slideDirection === "forward"
+						}),
+						style: mediaStyle,
+						children: currentItem.videoUrl && currentItem.videoThumbnailUrl ? /* @__PURE__ */ jsx("div", {
+							className: "str-chat__gallery__media str-chat__gallery__media--video",
+							children: showVideo ? /* @__PURE__ */ jsx(VideoPlayer, {
+								isPlaying: true,
+								videoUrl: currentItem.videoUrl
+							}) : /* @__PURE__ */ jsx(VideoThumbnail, {
+								alt: currentItem.title ?? "",
+								onPlay: () => setShowVideo(true),
+								src: currentItem.videoThumbnailUrl
+							})
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "str-chat__gallery__media str-chat__gallery__media--image",
+							children: /* @__PURE__ */ jsx(BaseImage, {
+								alt: currentItem.alt,
+								src: currentItem.imageUrl
+							})
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx(NavButton, {
+					"aria-label": t("Next image"),
+					className: clsx("str-chat__gallery__nav-button--next", !hasNext && "str-chat__gallery__nav-button--hidden"),
+					disabled: !hasNext,
+					onClick: handleGoToNext,
+					children: /* @__PURE__ */ jsx(IconChevronRight, {})
+				})
+			]
+		}), itemCount > 1 && /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__gallery__position-indicator",
+			children: [
+				currentIndex + 1,
+				" of ",
+				itemCount
+			]
+		})]
+	});
+};
+var NavButton = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	className: clsx("str-chat__gallery__nav-button", className)
+});
+//#endregion
+export { GalleryUI };
+
+//# sourceMappingURL=GalleryUI.mjs.map

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

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

package/dist/es/components/Icons/BaseIcon.mjs

@@ -0,0 +1,20 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Icons/BaseIcon.tsx
+var BaseIcon = ({ className, decorative = true, ...props }) => {
+	const ariaHidden = props["aria-hidden"] ?? (decorative ? true : void 0);
+	const focusable = props.focusable ?? (decorative ? false : void 0);
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		"aria-hidden": ariaHidden,
+		className: clsx("str-chat__icon", className),
+		focusable
+	});
+};
+//#endregion
+export { BaseIcon };
+
+//# sourceMappingURL=BaseIcon.mjs.map

package/dist/es/components/Icons/BaseIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseIcon.mjs","names":[],"sources":["../../../../src/components/Icons/BaseIcon.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nexport type BaseIconProps = ComponentProps<'svg'> & {\n  decorative?: boolean;\n};\n\nexport const BaseIcon = ({ className, decorative = true, ...props }: BaseIconProps) => {\n  const ariaHidden = props['aria-hidden'] ?? (decorative ? true : undefined);\n  const focusable = props.focusable ?? (decorative ? false : undefined);\n\n  return (\n    <svg\n      viewBox='0 0 20 20'\n      xmlns='http://www.w3.org/2000/svg'\n      {...props}\n      aria-hidden={ariaHidden}\n      className={clsx('str-chat__icon', className)}\n      focusable={focusable}\n    />\n  );\n};\n"],"mappings":";;;;AAOA,IAAa,YAAY,EAAE,WAAW,aAAa,MAAM,GAAG,YAA2B;CACrF,MAAM,aAAa,MAAM,mBAAmB,aAAa,OAAO,KAAA;CAChE,MAAM,YAAY,MAAM,cAAc,aAAa,QAAQ,KAAA;CAE3D,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,OAAM;EACN,GAAI;EACJ,eAAa;EACb,WAAW,KAAK,kBAAkB,SAAS;EAChC;CACZ,CAAA;AAEL"}

package/dist/es/components/Icons/createIcon.mjs

@@ -0,0 +1,23 @@
+import { BaseIcon } from "./BaseIcon.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Icons/createIcon.tsx
+function toIconClass(name) {
+	return "str-chat__icon--" + name.replace(/^Icon/, "").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Za-z])(\d)/g, "$1-$2").replace(/(\d)([A-Za-z])/g, "$1-$2").replace(/_/g, "-").toLowerCase();
+}
+function createIcon(name, content, defaultProps) {
+	const iconClass = toIconClass(name);
+	const Icon = ({ className, ...props }) => /* @__PURE__ */ jsx(BaseIcon, {
+		...defaultProps,
+		...props,
+		className: clsx(iconClass, className),
+		children: content
+	});
+	Icon.displayName = name;
+	return Icon;
+}
+//#endregion
+export { createIcon };
+
+//# sourceMappingURL=createIcon.mjs.map

package/dist/es/components/Icons/createIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createIcon.mjs","names":[],"sources":["../../../../src/components/Icons/createIcon.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { BaseIcon, type BaseIconProps } from './BaseIcon';\n\nfunction toIconClass(name: string) {\n  return (\n    'str-chat__icon--' +\n    name\n      .replace(/^Icon/, '')\n      .replace(/([a-z])([A-Z])/g, '$1-$2')\n      .replace(/([A-Za-z])(\\d)/g, '$1-$2')\n      .replace(/(\\d)([A-Za-z])/g, '$1-$2')\n      .replace(/_/g, '-')\n      .toLowerCase()\n  );\n}\n\ntype IconProps = BaseIconProps & Record<`data-${string}`, string>;\n\nexport function createIcon(name: string, content: ReactNode, defaultProps?: IconProps) {\n  const iconClass = toIconClass(name);\n  const Icon = ({ className, ...props }: BaseIconProps) => (\n    <BaseIcon {...defaultProps} {...props} className={clsx(iconClass, className)}>\n      {content}\n    </BaseIcon>\n  );\n  Icon.displayName = name;\n  return Icon;\n}\n"],"mappings":";;;;;AAIA,SAAS,YAAY,MAAc;CACjC,OACE,qBACA,KACG,QAAQ,SAAS,EAAE,CAAC,CACpB,QAAQ,mBAAmB,OAAO,CAAC,CACnC,QAAQ,mBAAmB,OAAO,CAAC,CACnC,QAAQ,mBAAmB,OAAO,CAAC,CACnC,QAAQ,MAAM,GAAG,CAAC,CAClB,YAAY;AAEnB;AAIA,SAAgB,WAAW,MAAc,SAAoB,cAA0B;CACrF,MAAM,YAAY,YAAY,IAAI;CAClC,MAAM,QAAQ,EAAE,WAAW,GAAG,YAC5B,oBAAC,UAAD;EAAU,GAAI;EAAc,GAAI;EAAO,WAAW,KAAK,WAAW,SAAS;YACxE;CACO,CAAA;CAEZ,KAAK,cAAc;CACnB,OAAO;AACT"}