@spark-ui/hooks 17.2.3 → 17.2.4-beta.0

package/dist/use-scroll-overflow/index.js

@@ -1,50 +1,53 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
+require("../use-combined-state/index.js");
+let react = require("react");
+//#region src/use-scroll-overflow/useScrollOverflow.tsx
 function useScrollOverflow(scrollRef, { precisionTreshold = 0 } = {}) {
-  const [overflow, setOverflow] = react.useState({
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  });
-  const precisionTresholdRef = react.useRef(precisionTreshold);
-  precisionTresholdRef.current = precisionTreshold;
-  const checkScrollContent = react.useCallback(() => {
-    const scrollElement = scrollRef.current;
-    if (scrollElement) {
-      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement;
-      const applyPrecision = (value) => {
-        return value <= precisionTresholdRef.current ? 0 : value;
-      };
-      const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
-      const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
-      setOverflow({
-        top: applyPrecision(scrollTop),
-        bottom: applyPrecision(bottomOverflow),
-        left: applyPrecision(scrollLeft),
-        right: applyPrecision(rightOverflow)
-      });
-    }
-  }, [scrollRef]);
-  react.useEffect(() => {
-    checkScrollContent();
-    const scrollElement = scrollRef.current;
-    if (scrollElement) {
-      scrollElement.addEventListener("scroll", checkScrollContent);
-      window.addEventListener("resize", checkScrollContent);
-    }
-    return () => {
-      if (scrollElement) {
-        scrollElement.removeEventListener("scroll", checkScrollContent);
-        window.removeEventListener("resize", checkScrollContent);
-      }
-    };
-  }, [scrollRef, checkScrollContent]);
-  return {
-    overflow,
-    refresh: checkScrollContent
-  };
+	const [overflow, setOverflow] = (0, react.useState)({
+		top: 0,
+		bottom: 0,
+		left: 0,
+		right: 0
+	});
+	const precisionTresholdRef = (0, react.useRef)(precisionTreshold);
+	precisionTresholdRef.current = precisionTreshold;
+	const checkScrollContent = (0, react.useCallback)(() => {
+		const scrollElement = scrollRef.current;
+		if (scrollElement) {
+			const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement;
+			const applyPrecision = (value) => {
+				return value <= precisionTresholdRef.current ? 0 : value;
+			};
+			const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
+			const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
+			setOverflow({
+				top: applyPrecision(scrollTop),
+				bottom: applyPrecision(bottomOverflow),
+				left: applyPrecision(scrollLeft),
+				right: applyPrecision(rightOverflow)
+			});
+		}
+	}, [scrollRef]);
+	(0, react.useEffect)(() => {
+		checkScrollContent();
+		const scrollElement = scrollRef.current;
+		if (scrollElement) {
+			scrollElement.addEventListener("scroll", checkScrollContent);
+			window.addEventListener("resize", checkScrollContent);
+		}
+		return () => {
+			if (scrollElement) {
+				scrollElement.removeEventListener("scroll", checkScrollContent);
+				window.removeEventListener("resize", checkScrollContent);
+			}
+		};
+	}, [scrollRef, checkScrollContent]);
+	return {
+		overflow,
+		refresh: checkScrollContent
+	};
 }
+//#endregion
 exports.useScrollOverflow = useScrollOverflow;
-//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/use-scroll-overflow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface ScrollOverflow {\n  top: number\n  bottom: number\n  left: number\n  right: number\n}\n\nexport interface UseScrollOverflowReturn {\n  overflow: ScrollOverflow\n  refresh: () => void\n}\n\nexport function useScrollOverflow(\n  scrollRef: RefObject<HTMLElement | null>,\n  /**\n   * Tolerance threshold for floating-point precision issues.\n   * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n   */\n  { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n): UseScrollOverflowReturn {\n  const [overflow, setOverflow] = useState<ScrollOverflow>({\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  })\n\n  const precisionTresholdRef = useRef(precisionTreshold)\n  precisionTresholdRef.current = precisionTreshold\n\n  const checkScrollContent = useCallback(() => {\n    const scrollElement = scrollRef.current\n\n    if (scrollElement) {\n      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n        scrollElement\n\n      const applyPrecision = (value: number): number => {\n        return value <= precisionTresholdRef.current ? 0 : value\n      }\n\n      const rightOverflow = scrollWidth - (scrollLeft + clientWidth)\n      const bottomOverflow = scrollHeight - (scrollTop + clientHeight)\n\n      setOverflow({\n        top: applyPrecision(scrollTop),\n        bottom: applyPrecision(bottomOverflow),\n        left: applyPrecision(scrollLeft),\n        right: applyPrecision(rightOverflow),\n      })\n    }\n  }, [scrollRef])\n\n  useEffect(() => {\n    checkScrollContent()\n\n    const scrollElement = scrollRef.current\n    if (scrollElement) {\n      scrollElement.addEventListener('scroll', checkScrollContent)\n      window.addEventListener('resize', checkScrollContent)\n    }\n\n    return () => {\n      if (scrollElement) {\n        scrollElement.removeEventListener('scroll', checkScrollContent)\n        window.removeEventListener('resize', checkScrollContent)\n      }\n    }\n  }, [scrollRef, checkScrollContent])\n\n  return {\n    overflow,\n    refresh: checkScrollContent,\n  }\n}\n"],"names":["useState","useRef","useCallback","useEffect"],"mappings":";;;AAcO,SAAS,kBACd,WAKA,EAAE,oBAAoB,EAAA,IAAsC,CAAA,GACnC;AACzB,QAAM,CAAC,UAAU,WAAW,IAAIA,eAAyB;AAAA,IACvD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EAAA,CACR;AAED,QAAM,uBAAuBC,MAAAA,OAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,qBAAqBC,MAAAA,YAAY,MAAM;AAC3C,UAAM,gBAAgB,UAAU;AAEhC,QAAI,eAAe;AACjB,YAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,gBACtE;AAEF,YAAM,iBAAiB,CAAC,UAA0B;AAChD,eAAO,SAAS,qBAAqB,UAAU,IAAI;AAAA,MACrD;AAEA,YAAM,gBAAgB,eAAe,aAAa;AAClD,YAAM,iBAAiB,gBAAgB,YAAY;AAEnD,kBAAY;AAAA,QACV,KAAK,eAAe,SAAS;AAAA,QAC7B,QAAQ,eAAe,cAAc;AAAA,QACrC,MAAM,eAAe,UAAU;AAAA,QAC/B,OAAO,eAAe,aAAa;AAAA,MAAA,CACpC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEdC,QAAAA,UAAU,MAAM;AACd,uBAAA;AAEA,UAAM,gBAAgB,UAAU;AAChC,QAAI,eAAe;AACjB,oBAAc,iBAAiB,UAAU,kBAAkB;AAC3D,aAAO,iBAAiB,UAAU,kBAAkB;AAAA,IACtD;AAEA,WAAO,MAAM;AACX,UAAI,eAAe;AACjB,sBAAc,oBAAoB,UAAU,kBAAkB;AAC9D,eAAO,oBAAoB,UAAU,kBAAkB;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,kBAAkB,CAAC;AAElC,SAAO;AAAA,IACL;AAAA,IACA,SAAS;AAAA,EAAA;AAEb;;"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface ScrollOverflow {\n  top: number\n  bottom: number\n  left: number\n  right: number\n}\n\nexport interface UseScrollOverflowReturn {\n  overflow: ScrollOverflow\n  refresh: () => void\n}\n\nexport function useScrollOverflow(\n  scrollRef: RefObject<HTMLElement | null>,\n  /**\n   * Tolerance threshold for floating-point precision issues.\n   * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n   */\n  { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n): UseScrollOverflowReturn {\n  const [overflow, setOverflow] = useState<ScrollOverflow>({\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  })\n\n  const precisionTresholdRef = useRef(precisionTreshold)\n  precisionTresholdRef.current = precisionTreshold\n\n  const checkScrollContent = useCallback(() => {\n    const scrollElement = scrollRef.current\n\n    if (scrollElement) {\n      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n        scrollElement\n\n      const applyPrecision = (value: number): number => {\n        return value <= precisionTresholdRef.current ? 0 : value\n      }\n\n      const rightOverflow = scrollWidth - (scrollLeft + clientWidth)\n      const bottomOverflow = scrollHeight - (scrollTop + clientHeight)\n\n      setOverflow({\n        top: applyPrecision(scrollTop),\n        bottom: applyPrecision(bottomOverflow),\n        left: applyPrecision(scrollLeft),\n        right: applyPrecision(rightOverflow),\n      })\n    }\n  }, [scrollRef])\n\n  useEffect(() => {\n    checkScrollContent()\n\n    const scrollElement = scrollRef.current\n    if (scrollElement) {\n      scrollElement.addEventListener('scroll', checkScrollContent)\n      window.addEventListener('resize', checkScrollContent)\n    }\n\n    return () => {\n      if (scrollElement) {\n        scrollElement.removeEventListener('scroll', checkScrollContent)\n        window.removeEventListener('resize', checkScrollContent)\n      }\n    }\n  }, [scrollRef, checkScrollContent])\n\n  return {\n    overflow,\n    refresh: checkScrollContent,\n  }\n}\n"],"mappings":";;;;AAcA,SAAgB,kBACd,WAKA,EAAE,oBAAoB,MAAsC,EAAE,EACrC;CACzB,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwC;EACvD,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;EACR,CAAC;CAEF,MAAM,wBAAA,GAAA,MAAA,QAA8B,kBAAkB;AACtD,sBAAqB,UAAU;CAE/B,MAAM,sBAAA,GAAA,MAAA,mBAAuC;EAC3C,MAAM,gBAAgB,UAAU;AAEhC,MAAI,eAAe;GACjB,MAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,gBACtE;GAEF,MAAM,kBAAkB,UAA0B;AAChD,WAAO,SAAS,qBAAqB,UAAU,IAAI;;GAGrD,MAAM,gBAAgB,eAAe,aAAa;GAClD,MAAM,iBAAiB,gBAAgB,YAAY;AAEnD,eAAY;IACV,KAAK,eAAe,UAAU;IAC9B,QAAQ,eAAe,eAAe;IACtC,MAAM,eAAe,WAAW;IAChC,OAAO,eAAe,cAAc;IACrC,CAAC;;IAEH,CAAC,UAAU,CAAC;AAEf,EAAA,GAAA,MAAA,iBAAgB;AACd,sBAAoB;EAEpB,MAAM,gBAAgB,UAAU;AAChC,MAAI,eAAe;AACjB,iBAAc,iBAAiB,UAAU,mBAAmB;AAC5D,UAAO,iBAAiB,UAAU,mBAAmB;;AAGvD,eAAa;AACX,OAAI,eAAe;AACjB,kBAAc,oBAAoB,UAAU,mBAAmB;AAC/D,WAAO,oBAAoB,UAAU,mBAAmB;;;IAG3D,CAAC,WAAW,mBAAmB,CAAC;AAEnC,QAAO;EACL;EACA,SAAS;EACV"}

package/dist/use-scroll-overflow/index.mjs

@@ -1,50 +1,51 @@
-import { useState, useRef, useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/use-scroll-overflow/useScrollOverflow.tsx
 function useScrollOverflow(scrollRef, { precisionTreshold = 0 } = {}) {
-  const [overflow, setOverflow] = useState({
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  });
-  const precisionTresholdRef = useRef(precisionTreshold);
-  precisionTresholdRef.current = precisionTreshold;
-  const checkScrollContent = useCallback(() => {
-    const scrollElement = scrollRef.current;
-    if (scrollElement) {
-      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement;
-      const applyPrecision = (value) => {
-        return value <= precisionTresholdRef.current ? 0 : value;
-      };
-      const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
-      const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
-      setOverflow({
-        top: applyPrecision(scrollTop),
-        bottom: applyPrecision(bottomOverflow),
-        left: applyPrecision(scrollLeft),
-        right: applyPrecision(rightOverflow)
-      });
-    }
-  }, [scrollRef]);
-  useEffect(() => {
-    checkScrollContent();
-    const scrollElement = scrollRef.current;
-    if (scrollElement) {
-      scrollElement.addEventListener("scroll", checkScrollContent);
-      window.addEventListener("resize", checkScrollContent);
-    }
-    return () => {
-      if (scrollElement) {
-        scrollElement.removeEventListener("scroll", checkScrollContent);
-        window.removeEventListener("resize", checkScrollContent);
-      }
-    };
-  }, [scrollRef, checkScrollContent]);
-  return {
-    overflow,
-    refresh: checkScrollContent
-  };
+	const [overflow, setOverflow] = useState({
+		top: 0,
+		bottom: 0,
+		left: 0,
+		right: 0
+	});
+	const precisionTresholdRef = useRef(precisionTreshold);
+	precisionTresholdRef.current = precisionTreshold;
+	const checkScrollContent = useCallback(() => {
+		const scrollElement = scrollRef.current;
+		if (scrollElement) {
+			const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement;
+			const applyPrecision = (value) => {
+				return value <= precisionTresholdRef.current ? 0 : value;
+			};
+			const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
+			const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
+			setOverflow({
+				top: applyPrecision(scrollTop),
+				bottom: applyPrecision(bottomOverflow),
+				left: applyPrecision(scrollLeft),
+				right: applyPrecision(rightOverflow)
+			});
+		}
+	}, [scrollRef]);
+	useEffect(() => {
+		checkScrollContent();
+		const scrollElement = scrollRef.current;
+		if (scrollElement) {
+			scrollElement.addEventListener("scroll", checkScrollContent);
+			window.addEventListener("resize", checkScrollContent);
+		}
+		return () => {
+			if (scrollElement) {
+				scrollElement.removeEventListener("scroll", checkScrollContent);
+				window.removeEventListener("resize", checkScrollContent);
+			}
+		};
+	}, [scrollRef, checkScrollContent]);
+	return {
+		overflow,
+		refresh: checkScrollContent
+	};
 }
-export {
-  useScrollOverflow
-};
-//# sourceMappingURL=index.mjs.map
+//#endregion
+export { useScrollOverflow };
+
+//# sourceMappingURL=index.mjs.map

package/dist/use-scroll-overflow/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface ScrollOverflow {\n  top: number\n  bottom: number\n  left: number\n  right: number\n}\n\nexport interface UseScrollOverflowReturn {\n  overflow: ScrollOverflow\n  refresh: () => void\n}\n\nexport function useScrollOverflow(\n  scrollRef: RefObject<HTMLElement | null>,\n  /**\n   * Tolerance threshold for floating-point precision issues.\n   * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n   */\n  { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n): UseScrollOverflowReturn {\n  const [overflow, setOverflow] = useState<ScrollOverflow>({\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  })\n\n  const precisionTresholdRef = useRef(precisionTreshold)\n  precisionTresholdRef.current = precisionTreshold\n\n  const checkScrollContent = useCallback(() => {\n    const scrollElement = scrollRef.current\n\n    if (scrollElement) {\n      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n        scrollElement\n\n      const applyPrecision = (value: number): number => {\n        return value <= precisionTresholdRef.current ? 0 : value\n      }\n\n      const rightOverflow = scrollWidth - (scrollLeft + clientWidth)\n      const bottomOverflow = scrollHeight - (scrollTop + clientHeight)\n\n      setOverflow({\n        top: applyPrecision(scrollTop),\n        bottom: applyPrecision(bottomOverflow),\n        left: applyPrecision(scrollLeft),\n        right: applyPrecision(rightOverflow),\n      })\n    }\n  }, [scrollRef])\n\n  useEffect(() => {\n    checkScrollContent()\n\n    const scrollElement = scrollRef.current\n    if (scrollElement) {\n      scrollElement.addEventListener('scroll', checkScrollContent)\n      window.addEventListener('resize', checkScrollContent)\n    }\n\n    return () => {\n      if (scrollElement) {\n        scrollElement.removeEventListener('scroll', checkScrollContent)\n        window.removeEventListener('resize', checkScrollContent)\n      }\n    }\n  }, [scrollRef, checkScrollContent])\n\n  return {\n    overflow,\n    refresh: checkScrollContent,\n  }\n}\n"],"names":[],"mappings":";AAcO,SAAS,kBACd,WAKA,EAAE,oBAAoB,EAAA,IAAsC,CAAA,GACnC;AACzB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAyB;AAAA,IACvD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EAAA,CACR;AAED,QAAM,uBAAuB,OAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,gBAAgB,UAAU;AAEhC,QAAI,eAAe;AACjB,YAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,gBACtE;AAEF,YAAM,iBAAiB,CAAC,UAA0B;AAChD,eAAO,SAAS,qBAAqB,UAAU,IAAI;AAAA,MACrD;AAEA,YAAM,gBAAgB,eAAe,aAAa;AAClD,YAAM,iBAAiB,gBAAgB,YAAY;AAEnD,kBAAY;AAAA,QACV,KAAK,eAAe,SAAS;AAAA,QAC7B,QAAQ,eAAe,cAAc;AAAA,QACrC,MAAM,eAAe,UAAU;AAAA,QAC/B,OAAO,eAAe,aAAa;AAAA,MAAA,CACpC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,uBAAA;AAEA,UAAM,gBAAgB,UAAU;AAChC,QAAI,eAAe;AACjB,oBAAc,iBAAiB,UAAU,kBAAkB;AAC3D,aAAO,iBAAiB,UAAU,kBAAkB;AAAA,IACtD;AAEA,WAAO,MAAM;AACX,UAAI,eAAe;AACjB,sBAAc,oBAAoB,UAAU,kBAAkB;AAC9D,eAAO,oBAAoB,UAAU,kBAAkB;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,kBAAkB,CAAC;AAElC,SAAO;AAAA,IACL;AAAA,IACA,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface ScrollOverflow {\n  top: number\n  bottom: number\n  left: number\n  right: number\n}\n\nexport interface UseScrollOverflowReturn {\n  overflow: ScrollOverflow\n  refresh: () => void\n}\n\nexport function useScrollOverflow(\n  scrollRef: RefObject<HTMLElement | null>,\n  /**\n   * Tolerance threshold for floating-point precision issues.\n   * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n   */\n  { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n): UseScrollOverflowReturn {\n  const [overflow, setOverflow] = useState<ScrollOverflow>({\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  })\n\n  const precisionTresholdRef = useRef(precisionTreshold)\n  precisionTresholdRef.current = precisionTreshold\n\n  const checkScrollContent = useCallback(() => {\n    const scrollElement = scrollRef.current\n\n    if (scrollElement) {\n      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n        scrollElement\n\n      const applyPrecision = (value: number): number => {\n        return value <= precisionTresholdRef.current ? 0 : value\n      }\n\n      const rightOverflow = scrollWidth - (scrollLeft + clientWidth)\n      const bottomOverflow = scrollHeight - (scrollTop + clientHeight)\n\n      setOverflow({\n        top: applyPrecision(scrollTop),\n        bottom: applyPrecision(bottomOverflow),\n        left: applyPrecision(scrollLeft),\n        right: applyPrecision(rightOverflow),\n      })\n    }\n  }, [scrollRef])\n\n  useEffect(() => {\n    checkScrollContent()\n\n    const scrollElement = scrollRef.current\n    if (scrollElement) {\n      scrollElement.addEventListener('scroll', checkScrollContent)\n      window.addEventListener('resize', checkScrollContent)\n    }\n\n    return () => {\n      if (scrollElement) {\n        scrollElement.removeEventListener('scroll', checkScrollContent)\n        window.removeEventListener('resize', checkScrollContent)\n      }\n    }\n  }, [scrollRef, checkScrollContent])\n\n  return {\n    overflow,\n    refresh: checkScrollContent,\n  }\n}\n"],"mappings":";;AAcA,SAAgB,kBACd,WAKA,EAAE,oBAAoB,MAAsC,EAAE,EACrC;CACzB,MAAM,CAAC,UAAU,eAAe,SAAyB;EACvD,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;EACR,CAAC;CAEF,MAAM,uBAAuB,OAAO,kBAAkB;AACtD,sBAAqB,UAAU;CAE/B,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,gBAAgB,UAAU;AAEhC,MAAI,eAAe;GACjB,MAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,gBACtE;GAEF,MAAM,kBAAkB,UAA0B;AAChD,WAAO,SAAS,qBAAqB,UAAU,IAAI;;GAGrD,MAAM,gBAAgB,eAAe,aAAa;GAClD,MAAM,iBAAiB,gBAAgB,YAAY;AAEnD,eAAY;IACV,KAAK,eAAe,UAAU;IAC9B,QAAQ,eAAe,eAAe;IACtC,MAAM,eAAe,WAAW;IAChC,OAAO,eAAe,cAAc;IACrC,CAAC;;IAEH,CAAC,UAAU,CAAC;AAEf,iBAAgB;AACd,sBAAoB;EAEpB,MAAM,gBAAgB,UAAU;AAChC,MAAI,eAAe;AACjB,iBAAc,iBAAiB,UAAU,mBAAmB;AAC5D,UAAO,iBAAiB,UAAU,mBAAmB;;AAGvD,eAAa;AACX,OAAI,eAAe;AACjB,kBAAc,oBAAoB,UAAU,mBAAmB;AAC/D,WAAO,oBAAoB,UAAU,mBAAmB;;;IAG3D,CAAC,WAAW,mBAAmB,CAAC;AAEnC,QAAO;EACL;EACA,SAAS;EACV"}

package/dist/use-sortable-list/index.js

@@ -1,98 +1,110 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-function useSortableList({
-  items,
-  onReorder,
-  getItemKey
-}) {
-  const itemRefs = react.useRef(/* @__PURE__ */ new Map());
-  const handleDragStart = (e, index) => {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", index.toString());
-    e.currentTarget.style.opacity = "var(--opacity-dim-3)";
-  };
-  const handleDragEnter = (e) => {
-    e.preventDefault();
-    e.currentTarget.setAttribute("data-drag-over", "true");
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-  };
-  const handleDragLeave = (e) => {
-    const relatedTarget = e.relatedTarget;
-    const currentTarget = e.currentTarget;
-    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-      e.currentTarget.removeAttribute("data-drag-over");
-    }
-  };
-  const handleDragEnd = (e) => {
-    e.currentTarget.style.opacity = "";
-    e.currentTarget.removeAttribute("data-drag-over");
-  };
-  const handleDrop = (e, dropIndex) => {
-    e.preventDefault();
-    e.currentTarget.removeAttribute("data-drag-over");
-    const dragIndex = parseInt(e.dataTransfer.getData("text/plain"), 10);
-    if (!isNaN(dragIndex) && dragIndex !== dropIndex && dragIndex >= 0 && dragIndex < items.length) {
-      const newItems = [...items];
-      const [removed] = newItems.splice(dragIndex, 1);
-      if (removed) {
-        newItems.splice(dropIndex, 0, removed);
-        onReorder(newItems);
-      }
-    }
-  };
-  const handleKeyDown = (e, _item, index) => {
-    let direction = 0;
-    if (e.key === "ArrowUp") {
-      direction = -1;
-    } else if (e.key === "ArrowDown") {
-      direction = 1;
-    } else {
-      return;
-    }
-    const targetIndex = index + direction;
-    if (targetIndex < 0 || targetIndex >= items.length) return;
-    e.preventDefault();
-    const newItems = [...items];
-    const currentItem = newItems[index];
-    const targetItem = newItems[targetIndex];
-    if (currentItem && targetItem) {
-      [newItems[index], newItems[targetIndex]] = [targetItem, currentItem];
-      onReorder(newItems);
-      requestAnimationFrame(() => {
-        const itemKey = getItemKey(currentItem);
-        const element = itemRefs.current.get(itemKey);
-        element == null ? void 0 : element.focus();
-      });
-    }
-  };
-  const getItemProps = (item, index) => {
-    const itemKey = getItemKey(item);
-    return {
-      draggable: true,
-      onDragStart: (e) => handleDragStart(e, index),
-      onDragEnter: handleDragEnter,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDragEnd: handleDragEnd,
-      onDrop: (e) => handleDrop(e, index),
-      onKeyDown: (e) => handleKeyDown(e, item, index),
-      tabIndex: 0,
-      ref: (node) => {
-        if (node) {
-          itemRefs.current.set(itemKey, node);
-        } else {
-          itemRefs.current.delete(itemKey);
-        }
-      }
-    };
-  };
-  return {
-    getItemProps
-  };
+require("../use-combined-state/index.js");
+let react = require("react");
+//#region src/use-sortable-list/useSortableList.tsx
+/**
+* Hook to make a list of items sortable via drag and drop and keyboard navigation
+*
+* @example
+* ```tsx
+* const { getItemProps } = useSortableList({
+*   items: myItems,
+*   onReorder: setMyItems,
+*   getItemKey: (item) => item.id
+* })
+*
+* return (
+*   <ul>
+*     {myItems.map((item, index) => (
+*       <li
+*         key={getItemKey(item)}
+*         {...getItemProps(item, index)}
+*       >
+*         {item.name}
+*       </li>
+*     ))}
+*   </ul>
+* )
+* ```
+*/
+function useSortableList({ items, onReorder, getItemKey }) {
+	const itemRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const handleDragStart = (e, index) => {
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", index.toString());
+		e.currentTarget.style.opacity = "var(--opacity-dim-3)";
+	};
+	const handleDragEnter = (e) => {
+		e.preventDefault();
+		e.currentTarget.setAttribute("data-drag-over", "true");
+	};
+	const handleDragOver = (e) => {
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "move";
+	};
+	const handleDragLeave = (e) => {
+		const relatedTarget = e.relatedTarget;
+		const currentTarget = e.currentTarget;
+		if (!relatedTarget || !currentTarget.contains(relatedTarget)) e.currentTarget.removeAttribute("data-drag-over");
+	};
+	const handleDragEnd = (e) => {
+		e.currentTarget.style.opacity = "";
+		e.currentTarget.removeAttribute("data-drag-over");
+	};
+	const handleDrop = (e, dropIndex) => {
+		e.preventDefault();
+		e.currentTarget.removeAttribute("data-drag-over");
+		const dragIndex = parseInt(e.dataTransfer.getData("text/plain"), 10);
+		if (!isNaN(dragIndex) && dragIndex !== dropIndex && dragIndex >= 0 && dragIndex < items.length) {
+			const newItems = [...items];
+			const [removed] = newItems.splice(dragIndex, 1);
+			if (removed) {
+				newItems.splice(dropIndex, 0, removed);
+				onReorder(newItems);
+			}
+		}
+	};
+	const handleKeyDown = (e, _item, index) => {
+		let direction = 0;
+		if (e.key === "ArrowUp") direction = -1;
+		else if (e.key === "ArrowDown") direction = 1;
+		else return;
+		const targetIndex = index + direction;
+		if (targetIndex < 0 || targetIndex >= items.length) return;
+		e.preventDefault();
+		const newItems = [...items];
+		const currentItem = newItems[index];
+		const targetItem = newItems[targetIndex];
+		if (currentItem && targetItem) {
+			[newItems[index], newItems[targetIndex]] = [targetItem, currentItem];
+			onReorder(newItems);
+			requestAnimationFrame(() => {
+				const itemKey = getItemKey(currentItem);
+				itemRefs.current.get(itemKey)?.focus();
+			});
+		}
+	};
+	const getItemProps = (item, index) => {
+		const itemKey = getItemKey(item);
+		return {
+			draggable: true,
+			onDragStart: (e) => handleDragStart(e, index),
+			onDragEnter: handleDragEnter,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDragEnd: handleDragEnd,
+			onDrop: (e) => handleDrop(e, index),
+			onKeyDown: (e) => handleKeyDown(e, item, index),
+			tabIndex: 0,
+			ref: (node) => {
+				if (node) itemRefs.current.set(itemKey, node);
+				else itemRefs.current.delete(itemKey);
+			}
+		};
+	};
+	return { getItemProps };
 }
+//#endregion
 exports.useSortableList = useSortableList;
-//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/use-sortable-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"names":["useRef"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,SAAgB,gBAAmB,EACjC,OACA,WACA,cACsD;CAGtD,MAAM,YAAA,GAAA,MAAA,wBAA4C,IAAI,KAAK,CAAC;CAE5D,MAAM,mBAAmB,GAAoB,UAAkB;AAC7D,IAAE,aAAa,gBAAgB;AAC/B,IAAE,aAAa,QAAQ,cAAc,MAAM,UAAU,CAAC;AAEpD,IAAE,cAA8B,MAAM,UAAU;;CAGpD,MAAM,mBAAmB,MAAuB;AAC9C,IAAE,gBAAgB;AAClB,IAAE,cAAc,aAAa,kBAAkB,OAAO;;CAGxD,MAAM,kBAAkB,MAAuB;AAC7C,IAAE,gBAAgB;AAClB,IAAE,aAAa,aAAa;;CAG9B,MAAM,mBAAmB,MAAuB;EAG9C,MAAM,gBAAgB,EAAE;EACxB,MAAM,gBAAgB,EAAE;AAExB,MAAI,CAAC,iBAAiB,CAAC,cAAc,SAAS,cAAc,CAC1D,GAAE,cAAc,gBAAgB,iBAAiB;;CAIrD,MAAM,iBAAiB,MAAuB;AAE1C,IAAE,cAA8B,MAAM,UAAU;AAClD,IAAE,cAAc,gBAAgB,iBAAiB;;CAGnD,MAAM,cAAc,GAAoB,cAAsB;AAC5D,IAAE,gBAAgB;AAClB,IAAE,cAAc,gBAAgB,iBAAiB;EAEjD,MAAM,YAAY,SAAS,EAAE,aAAa,QAAQ,aAAa,EAAE,GAAG;AAEpE,MACE,CAAC,MAAM,UAAU,IACjB,cAAc,aACd,aAAa,KACb,YAAY,MAAM,QAClB;GACA,MAAM,WAAW,CAAC,GAAG,MAAM;GAC3B,MAAM,CAAC,WAAW,SAAS,OAAO,WAAW,EAAE;AAC/C,OAAI,SAAS;AACX,aAAS,OAAO,WAAW,GAAG,QAAQ;AACtC,cAAU,SAAS;;;;CAKzB,MAAM,iBAAiB,GAAwB,OAAU,UAAkB;EAEzE,IAAI,YAAY;AAChB,MAAI,EAAE,QAAQ,UACZ,aAAY;WACH,EAAE,QAAQ,YACnB,aAAY;MAEZ;EAGF,MAAM,cAAc,QAAQ;AAG5B,MAAI,cAAc,KAAK,eAAe,MAAM,OAAQ;AAEpD,IAAE,gBAAgB;EAGlB,MAAM,WAAW,CAAC,GAAG,MAAM;EAC3B,MAAM,cAAc,SAAS;EAC7B,MAAM,aAAa,SAAS;AAE5B,MAAI,eAAe,YAAY;AAC5B,IAAC,SAAS,QAAQ,SAAS,gBAAgB,CAAC,YAAY,YAAY;AACrE,aAAU,SAAS;AAGnB,+BAA4B;IAC1B,MAAM,UAAU,WAAW,YAAY;AACvB,aAAS,QAAQ,IAAI,QAAQ,EACpC,OAAO;KAChB;;;CAIN,MAAM,gBACJ,MACA,UACgC;EAChC,MAAM,UAAU,WAAW,KAAK;AAEhC,SAAO;GACL,WAAW;GACX,cAAa,MAAK,gBAAgB,GAAG,MAAM;GAC3C,aAAa;GACb,YAAY;GACZ,aAAa;GACb,WAAW;GACX,SAAQ,MAAK,WAAW,GAAG,MAAM;GACjC,YAAW,MAAK,cAAc,GAAG,MAAM,MAAM;GAC7C,UAAU;GACV,MAAM,SAA0B;AAC9B,QAAI,KACF,UAAS,QAAQ,IAAI,SAAS,KAAoB;QAElD,UAAS,QAAQ,OAAO,QAAQ;;GAGrC;;AAGH,QAAO,EACL,cACD"}