@cuemath/leap 3.4.12-m → 3.5.0-gg1

package/dist/features/av/av-preview/hooks/use-media-devices.js

@@ -1,140 +1,140 @@
 import { useState as v, useRef as b, useCallback as P, useEffect as D } from "react";
 import G from "../../../hooks/use-cancellable-promise.js";
-import { removeTracksFromStream as k, openMediaDevices as L, getTrack as C, getConnectedDevices as p } from "../helper.js";
-const x = (_, r) => {
-  const [l, f] = v("PROCESSING"), [w, m] = v("PROCESSING"), [I, R] = v(), [Y, g] = v(), [M, T] = v(), a = b(void 0), [u, h] = v({
+import { removeTracksFromStream as k, openMediaDevices as L, getTrack as C, getConnectedDevices as E } from "../helper.js";
+const x = (_, a) => {
+  const [y, f] = v("PROCESSING"), [l, m] = v("PROCESSING"), [I, p] = v(), [Y, R] = v(), [M, T] = v(), r = b(void 0), [u, h] = v({
     audio: [],
     video: [],
     audioOutput: []
-  }), [S, O] = v(), [y, A] = v(), d = G(), s = P(
-    async (e, o) => {
-      var n;
-      a.current && k(a.current, o);
-      const i = o === "audio" ? { audio: e ? { deviceId: e } : !0 } : { video: e ? { deviceId: e } : !0 };
-      o === "audio" ? (O(e), f("PROCESSING"), R(void 0)) : o === "video" && (A(e), m("PROCESSING"), g(void 0));
+  }), [g, w] = v(), [S, O] = v(), d = G(), o = P(
+    async (e, n) => {
+      var s;
+      r.current && k(r.current, n);
+      const i = n === "audio" ? { audio: e ? { deviceId: e } : !0 } : { video: e ? { deviceId: e } : !0 };
+      n === "audio" ? (w(e), f("PROCESSING"), p(void 0)) : n === "video" && (O(e), m("PROCESSING"), R(void 0));
       try {
-        const t = await d(L(i, r)), c = C(t, o);
-        c && (a.current ? (n = a.current) == null || n.addTrack(c) : a.current = t, c.addEventListener("ended", () => {
-          o === "audio" ? s(void 0, "audio") : o === "video" && s(void 0, "video");
-        }), o === "audio" ? (O(c.getSettings().deviceId), f("READY")) : o === "video" && (A(c.getSettings().deviceId), m("READY")));
+        const t = await d(L(i, a)), c = C(t, n);
+        c && (r.current ? (s = r.current) == null || s.addTrack(c) : r.current = t, c.addEventListener("ended", () => {
+          n === "audio" ? o(void 0, "audio") : n === "video" && o(void 0, "video");
+        }), n === "audio" ? (w(c.getSettings().deviceId), f("READY")) : n === "video" && (O(c.getSettings().deviceId), m("READY")));
       } catch (t) {
         const c = t instanceof Error ? t.message : "other";
-        o === "audio" ? (f("ERROR"), R(c)) : o === "video" && (m("ERROR"), g(c));
+        n === "audio" ? (f("ERROR"), p(c)) : n === "video" && (m("ERROR"), R(c));
       }
     },
-    [d, r]
+    [d, a]
   ), V = P(
     (e) => {
       T(e);
-      const o = _.current;
-      o && "setSinkId" in o && o.setSinkId(e).catch((i) => {
-        r("av_preview_set_audio_output_device_error", {
+      const n = _.current;
+      n && "setSinkId" in n && n.setSinkId(e).catch((i) => {
+        a("av_preview_set_audio_output_device_error", {
           deviceId: e,
           error_name: i == null ? void 0 : i.name,
           error_message: i == null ? void 0 : i.message
         });
       });
     },
-    [_, r]
+    [_, a]
   );
   return D(() => {
     let e;
     return (async () => {
       try {
         const i = await d(
-          L({ video: !0, audio: !0 }, r)
+          L({ video: !0, audio: !0 }, a)
         );
-        a.current = i, f("READY"), m("READY");
-        const n = C(i, "audio"), t = C(i, "video");
-        n && (n.addEventListener("ended", () => {
-          const c = n.getSettings().deviceId;
-          c && s(c, "audio");
-        }), O(n.getSettings().deviceId)), t && (t.addEventListener("ended", () => {
+        r.current = i, f("READY"), m("READY");
+        const s = C(i, "audio"), t = C(i, "video");
+        s && (s.addEventListener("ended", () => {
+          const c = s.getSettings().deviceId;
+          c && o(c, "audio");
+        }), w(s.getSettings().deviceId)), t && (t.addEventListener("ended", () => {
           const c = t.getSettings().deviceId;
-          c && s(c, "video");
-        }), A(t.getSettings().deviceId));
+          c && o(c, "video");
+        }), O(t.getSettings().deviceId));
         try {
-          const c = await d(p());
+          const c = await d(E());
           h(c);
         } catch {
-          r("av_preview_get_connected_devices_error");
+          a("av_preview_get_connected_devices_error");
         }
       } catch (i) {
-        const n = i instanceof Error ? i.message : "other";
+        const s = i instanceof Error ? i.message : "other";
         try {
-          const t = await d(p());
-          t.audio.length + t.video.length === 0 ? (f("ERROR"), m("ERROR"), R(n), g(n)) : t.video.length === 0 ? (m("ERROR"), g(n)) : t.audio.length === 0 && (f("ERROR"), R(n)), t.audio.length > 0 && s(void 0, "audio"), t.video.length > 0 && s(void 0, "video"), h(t);
+          const t = await d(E());
+          t.audio.length + t.video.length === 0 ? (f("ERROR"), m("ERROR"), p(s), R(s)) : t.video.length === 0 ? (m("ERROR"), R(s)) : t.audio.length === 0 && (f("ERROR"), p(s)), t.audio.length > 0 && o(void 0, "audio"), t.video.length > 0 && o(void 0, "video"), h(t);
         } catch {
-          r("av_preview_get_connected_devices_error");
+          a("av_preview_get_connected_devices_error");
         }
       }
       try {
         const i = await navigator.permissions.query({
           name: "camera"
-        }), n = await navigator.permissions.query({
+        }), s = await navigator.permissions.query({
           name: "microphone"
         }), t = async () => {
           try {
-            const E = await d(p());
-            h(E);
+            const A = await d(E());
+            h(A);
           } catch {
-            r("av_preview_get_connected_devices_error");
+            a("av_preview_get_connected_devices_error");
           }
-          i.state === "granted" && s(void 0, "video");
+          i.state === "granted" && o(void 0, "video");
         }, c = async () => {
           try {
-            const E = await d(p());
-            h(E);
+            const A = await d(E());
+            h(A);
           } catch {
-            r("av_preview_get_connected_devices_error");
+            a("av_preview_get_connected_devices_error");
           }
-          n.state === "granted" && s(void 0, "audio");
+          s.state === "granted" && o(void 0, "audio");
         };
-        i.addEventListener("change", t), n.addEventListener("change", c), e = () => {
-          i.removeEventListener("change", t), n.removeEventListener("change", c);
+        i.addEventListener("change", t), s.addEventListener("change", c), e = () => {
+          i.removeEventListener("change", t), s.removeEventListener("change", c);
         };
       } catch {
-        r("av_preview_permissions_query_error");
+        a("av_preview_permissions_query_error");
       }
     })(), () => {
       e && e();
     };
-  }, [d, s, r]), D(() => {
+  }, [d, o, a]), D(() => {
     const e = async () => {
       try {
-        const o = await p();
-        h(o);
+        const n = await E();
+        h(n);
       } catch {
-        r("av_preview_get_connected_devices_error");
+        a("av_preview_get_connected_devices_error");
       }
     };
     return navigator.mediaDevices.addEventListener("devicechange", e), () => {
       navigator.mediaDevices.removeEventListener("devicechange", e);
     };
-  }, [r]), D(() => {
-    if (l === "READY" && S && !u.audio.find((e) => e.id === S)) {
+  }, [a]), D(() => {
+    if (y === "READY" && g && !u.audio.find((e) => e.id === g)) {
       const e = u.audio[0];
-      e && s(e.id, "audio");
+      e && o(e.id, "audio");
     }
-  }, [l, s, u.audio, S]), D(() => {
-    if (w === "READY" && y && !u.video.find((e) => e.id === y)) {
+  }, [y, o, u.audio, g]), D(() => {
+    if (l === "READY" && S && !u.video.find((e) => e.id === S)) {
       const e = u.video[0];
-      e && s(e.id, "video");
+      e && o(e.id, "video");
     }
-  }, [w, s, u.video, y]), D(() => {
-    a.current && _.current && (_.current.srcObject = a.current);
-  }, [a.current, _]), D(() => () => {
-    a.current && k(a.current);
+  }, [l, o, u.video, S]), D(() => {
+    r.current && _.current && (_.current.srcObject = r.current);
+  }, [r.current, _]), D(() => () => {
+    r.current && k(r.current);
   }, []), {
-    audioDeviceStatus: l,
+    audioDeviceStatus: y,
     audioDeviceError: I,
-    videoDeviceStatus: w,
+    videoDeviceStatus: l,
     videoDeviceError: Y,
     devices: u,
-    selectedVideoDevice: y,
-    selectedAudioDevice: S,
+    selectedVideoDevice: S,
+    selectedAudioDevice: g,
     selectedAudioOutputDevice: M,
-    changeDevice: s,
+    changeDevice: o,
     changeAudioOutputDevice: V
   };
 };

package/dist/features/av/av-preview/hooks/use-media-devices.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-devices.js","sources":["../../../../../src/features/av/av-preview/hooks/use-media-devices.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport useCancellablePromise from '../../../hooks/use-cancellable-promise';\nimport type {\n  IDevicesMap,\n  ILogger,\n  TDeviceError,\n  TDeviceStatus,\n  TMediaKind,\n} from '../av-preview-types';\nimport { getConnectedDevices, getTrack, openMediaDevices, removeTracksFromStream } from '../helper';\n\ninterface IChangeDevice {\n  (deviceId: string | undefined, kind: TMediaKind): void;\n}\n\ninterface IUseMediaDevices {\n  (\n    videoElRef: RefObject<HTMLVideoElement | null>,\n    logger: ILogger,\n  ): {\n    audioDeviceStatus: TDeviceStatus;\n    audioDeviceError?: TDeviceError;\n    videoDeviceStatus: TDeviceStatus;\n    videoDeviceError?: TDeviceError;\n    devices: IDevicesMap;\n    selectedAudioDevice?: string;\n    selectedVideoDevice?: string;\n    selectedAudioOutputDevice?: string;\n    changeDevice: IChangeDevice;\n    changeAudioOutputDevice: (deviceId: string) => void;\n  };\n}\n\nconst useMediaDevices: IUseMediaDevices = (videoElRef, logger) => {\n  const [audioDeviceStatus, setAudioDeviceStatus] = useState<TDeviceStatus>('PROCESSING');\n  const [videoDeviceStatus, setVideoDeviceStatus] = useState<TDeviceStatus>('PROCESSING');\n  const [audioDeviceError, setAudioDeviceError] = useState<TDeviceError>();\n  const [videoDeviceError, setVideoDeviceError] = useState<TDeviceError>();\n  const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] = useState<string>();\n\n  const avStreamRef = useRef<MediaStream>(undefined);\n  const [devices, setDevices] = useState<IDevicesMap>({\n    audio: [],\n    video: [],\n    audioOutput: [],\n  });\n  const [selectedAudioDevice, setAudioDevice] = useState<string>();\n  const [selectedVideoDevice, setVideoDevice] = useState<string>();\n  const cancellablePromise = useCancellablePromise();\n\n  const changeDevice = useCallback<IChangeDevice>(\n    async (deviceId, deviceKind) => {\n      if (avStreamRef.current) {\n        removeTracksFromStream(avStreamRef.current, deviceKind);\n      }\n\n      const constraints: MediaStreamConstraints =\n        deviceKind === 'audio'\n          ? { audio: deviceId ? { deviceId } : true }\n          : { video: deviceId ? { deviceId } : true };\n\n      if (deviceKind === 'audio') {\n        setAudioDevice(deviceId);\n        setAudioDeviceStatus('PROCESSING');\n        setAudioDeviceError(undefined);\n      } else if (deviceKind === 'video') {\n        setVideoDevice(deviceId);\n        setVideoDeviceStatus('PROCESSING');\n        setVideoDeviceError(undefined);\n      }\n\n      try {\n        const stream = await cancellablePromise(openMediaDevices(constraints, logger));\n        const track = getTrack(stream, deviceKind);\n\n        if (track) {\n          if (avStreamRef.current) {\n            avStreamRef.current?.addTrack(track);\n          } else {\n            avStreamRef.current = stream;\n          }\n\n          track.addEventListener('ended', () => {\n            if (deviceKind === 'audio') {\n              changeDevice(undefined, 'audio');\n            } else if (deviceKind === 'video') {\n              changeDevice(undefined, 'video');\n            }\n          });\n\n          if (deviceKind === 'audio') {\n            setAudioDevice(track.getSettings().deviceId);\n            setAudioDeviceStatus('READY');\n          } else if (deviceKind === 'video') {\n            setVideoDevice(track.getSettings().deviceId);\n            setVideoDeviceStatus('READY');\n          }\n        }\n      } catch (error) {\n        const errorMessage: TDeviceError =\n          error instanceof Error ? (error.message as TDeviceError) : 'other';\n\n        if (deviceKind === 'audio') {\n          setAudioDeviceStatus('ERROR');\n          setAudioDeviceError(errorMessage);\n        } else if (deviceKind === 'video') {\n          setVideoDeviceStatus('ERROR');\n          setVideoDeviceError(errorMessage);\n        }\n      }\n    },\n    [cancellablePromise, logger],\n  );\n\n  const changeAudioOutputDevice = useCallback(\n    (deviceId: string) => {\n      setSelectedAudioOutputDevice(deviceId);\n      const videoEl = videoElRef.current;\n\n      if (videoEl && 'setSinkId' in videoEl) {\n        videoEl.setSinkId(deviceId).catch(error => {\n          logger('av_preview_set_audio_output_device_error', {\n            deviceId,\n            error_name: error?.name,\n            error_message: error?.message,\n          });\n        });\n      }\n    },\n    [videoElRef, logger],\n  );\n\n  useEffect(() => {\n    let permissionCleanup: (() => void) | undefined;\n    const asyncEffect = async () => {\n      try {\n        const stream = await cancellablePromise(\n          openMediaDevices({ video: true, audio: true }, logger),\n        );\n\n        avStreamRef.current = stream;\n        setAudioDeviceStatus('READY');\n        setVideoDeviceStatus('READY');\n        const audioTrack = getTrack(stream, 'audio');\n        const videoTrack = getTrack(stream, 'video');\n\n        if (audioTrack) {\n          audioTrack.addEventListener('ended', () => {\n            const audioDeviceId = audioTrack.getSettings().deviceId;\n\n            if (audioDeviceId) {\n              changeDevice(audioDeviceId, 'audio');\n            }\n          });\n          setAudioDevice(audioTrack.getSettings().deviceId);\n        }\n\n        if (videoTrack) {\n          videoTrack.addEventListener('ended', () => {\n            const videoDeviceId = videoTrack.getSettings().deviceId;\n\n            if (videoDeviceId) {\n              changeDevice(videoDeviceId, 'video');\n            }\n          });\n          setVideoDevice(videoTrack.getSettings().deviceId);\n        }\n\n        try {\n          const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n          setDevices(connectedDevices);\n        } catch (error) {\n          logger('av_preview_get_connected_devices_error');\n        }\n      } catch (error) {\n        const errorMessage: TDeviceError =\n          error instanceof Error ? (error.message as TDeviceError) : 'other';\n\n        try {\n          const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n          // Permission denied for\n          if (connectedDevices.audio.length + connectedDevices.video.length === 0) {\n            setAudioDeviceStatus('ERROR');\n            setVideoDeviceStatus('ERROR');\n            setAudioDeviceError(errorMessage);\n            setVideoDeviceError(errorMessage);\n          } else if (connectedDevices.video.length === 0) {\n            setVideoDeviceStatus('ERROR');\n            setVideoDeviceError(errorMessage);\n          } else if (connectedDevices.audio.length === 0) {\n            setAudioDeviceStatus('ERROR');\n            setAudioDeviceError(errorMessage);\n          }\n\n          if (connectedDevices.audio.length > 0) {\n            changeDevice(undefined, 'audio');\n          }\n\n          if (connectedDevices.video.length > 0) {\n            changeDevice(undefined, 'video');\n          }\n\n          setDevices(connectedDevices);\n        } catch (err) {\n          logger('av_preview_get_connected_devices_error');\n        }\n      }\n\n      try {\n        const cameraPermission = await navigator.permissions.query({\n          name: 'camera' as PermissionName,\n        });\n        const microphonePermission = await navigator.permissions.query({\n          name: 'microphone' as PermissionName,\n        });\n        const handleCameraPermissionChange = async () => {\n          try {\n            const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n            setDevices(connectedDevices);\n          } catch (error) {\n            logger('av_preview_get_connected_devices_error');\n          }\n\n          if (cameraPermission.state === 'granted') {\n            changeDevice(undefined, 'video'); // Reset video device on permission change\n          }\n        };\n        const handleMicrophonePermissionChange = async () => {\n          try {\n            const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n            setDevices(connectedDevices);\n          } catch (error) {\n            logger('av_preview_get_connected_devices_error');\n          }\n\n          if (microphonePermission.state === 'granted') {\n            changeDevice(undefined, 'audio'); // Reset audio device on permission change\n          }\n        };\n\n        cameraPermission.addEventListener('change', handleCameraPermissionChange);\n        microphonePermission.addEventListener('change', handleMicrophonePermissionChange);\n\n        permissionCleanup = () => {\n          cameraPermission.removeEventListener('change', handleCameraPermissionChange);\n          microphonePermission.removeEventListener('change', handleMicrophonePermissionChange);\n        };\n      } catch (error) {\n        logger('av_preview_permissions_query_error');\n      }\n    };\n\n    asyncEffect();\n\n    return () => {\n      if (permissionCleanup) {\n        permissionCleanup();\n      }\n    };\n  }, [cancellablePromise, changeDevice, logger]);\n\n  /**\n   * Effect to handle media device changes\n   * It listens for device changes and updates the list of connected devices.\n   */\n  useEffect(() => {\n    const handleDeviceChange = async () => {\n      try {\n        const updatedDevices = await getConnectedDevices();\n\n        setDevices(updatedDevices);\n      } catch (error) {\n        logger('av_preview_get_connected_devices_error');\n      }\n    };\n\n    navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange);\n\n    return () => {\n      navigator.mediaDevices.removeEventListener('devicechange', handleDeviceChange);\n    };\n  }, [logger]);\n\n  /**\n   * If the audio device is ready and the selected audio device is not in the list of available devices,\n   * switch to the first available audio device.\n   */\n  useEffect(() => {\n    if (\n      audioDeviceStatus === 'READY' &&\n      selectedAudioDevice &&\n      !devices.audio.find(d => d.id === selectedAudioDevice)\n    ) {\n      const firstAudioDevice = devices.audio[0];\n\n      if (firstAudioDevice) {\n        changeDevice(firstAudioDevice.id, 'audio');\n      }\n    }\n  }, [audioDeviceStatus, changeDevice, devices.audio, selectedAudioDevice]);\n\n  /**\n   * If the video device is ready and the selected video device is not in the list of available devices,\n   * switch to the first available video device.\n   */\n  useEffect(() => {\n    if (\n      videoDeviceStatus === 'READY' &&\n      selectedVideoDevice &&\n      !devices.video.find(d => d.id === selectedVideoDevice)\n    ) {\n      const firstVideoDevice = devices.video[0];\n\n      if (firstVideoDevice) {\n        changeDevice(firstVideoDevice.id, 'video');\n      }\n    }\n  }, [videoDeviceStatus, changeDevice, devices.video, selectedVideoDevice]);\n\n  // Set the video element's srcObject to the MediaStream when available\n  useEffect(() => {\n    if (avStreamRef.current && videoElRef.current) {\n      videoElRef.current.srcObject = avStreamRef.current;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [avStreamRef.current, videoElRef]);\n\n  useEffect(() => {\n    return () => {\n      if (avStreamRef.current) {\n        removeTracksFromStream(avStreamRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    audioDeviceStatus,\n    audioDeviceError,\n    videoDeviceStatus,\n    videoDeviceError,\n    devices,\n    selectedVideoDevice,\n    selectedAudioDevice,\n    selectedAudioOutputDevice,\n    changeDevice,\n    changeAudioOutputDevice,\n  };\n};\n\nexport default useMediaDevices;\n"],"names":["useMediaDevices","videoElRef","logger","audioDeviceStatus","setAudioDeviceStatus","useState","videoDeviceStatus","setVideoDeviceStatus","audioDeviceError","setAudioDeviceError","videoDeviceError","setVideoDeviceError","selectedAudioOutputDevice","setSelectedAudioOutputDevice","avStreamRef","useRef","devices","setDevices","selectedAudioDevice","setAudioDevice","selectedVideoDevice","setVideoDevice","cancellablePromise","useCancellablePromise","changeDevice","useCallback","deviceId","deviceKind","removeTracksFromStream","constraints","stream","openMediaDevices","track","getTrack","_a","error","errorMessage","changeAudioOutputDevice","videoEl","useEffect","permissionCleanup","audioTrack","videoTrack","audioDeviceId","videoDeviceId","connectedDevices","getConnectedDevices","cameraPermission","microphonePermission","handleCameraPermissionChange","handleMicrophonePermissionChange","handleDeviceChange","updatedDevices","d","firstAudioDevice","firstVideoDevice"],"mappings":"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"}
+{"version":3,"file":"use-media-devices.js","sources":["../../../../../src/features/av/av-preview/hooks/use-media-devices.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport useCancellablePromise from '../../../hooks/use-cancellable-promise';\nimport type {\n  IDevicesMap,\n  ILogger,\n  TDeviceError,\n  TDeviceStatus,\n  TMediaKind,\n} from '../av-preview-types';\nimport { getConnectedDevices, getTrack, openMediaDevices, removeTracksFromStream } from '../helper';\n\ninterface IChangeDevice {\n  (deviceId: string | undefined, kind: TMediaKind): void;\n}\n\ninterface IUseMediaDevices {\n  (\n    videoElRef: RefObject<HTMLVideoElement | null>,\n    logger: ILogger,\n  ): {\n    audioDeviceStatus: TDeviceStatus;\n    audioDeviceError?: TDeviceError;\n    videoDeviceStatus: TDeviceStatus;\n    videoDeviceError?: TDeviceError;\n    devices: IDevicesMap;\n    selectedAudioDevice?: string;\n    selectedVideoDevice?: string;\n    selectedAudioOutputDevice?: string;\n    changeDevice: IChangeDevice;\n    changeAudioOutputDevice: (deviceId: string) => void;\n  };\n}\n\nconst useMediaDevices: IUseMediaDevices = (videoElRef, logger) => {\n  const [audioDeviceStatus, setAudioDeviceStatus] = useState<TDeviceStatus>('PROCESSING');\n  const [videoDeviceStatus, setVideoDeviceStatus] = useState<TDeviceStatus>('PROCESSING');\n  const [audioDeviceError, setAudioDeviceError] = useState<TDeviceError>();\n  const [videoDeviceError, setVideoDeviceError] = useState<TDeviceError>();\n  const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] = useState<string>();\n\n  const avStreamRef = useRef<MediaStream>(undefined);\n  const [devices, setDevices] = useState<IDevicesMap>({\n    audio: [],\n    video: [],\n    audioOutput: [],\n  });\n  const [selectedAudioDevice, setAudioDevice] = useState<string>();\n  const [selectedVideoDevice, setVideoDevice] = useState<string>();\n  const cancellablePromise = useCancellablePromise();\n\n  const changeDevice = useCallback<IChangeDevice>(\n    async (deviceId, deviceKind) => {\n      if (avStreamRef.current) {\n        removeTracksFromStream(avStreamRef.current, deviceKind);\n      }\n\n      const constraints: MediaStreamConstraints =\n        deviceKind === 'audio'\n          ? { audio: deviceId ? { deviceId } : true }\n          : { video: deviceId ? { deviceId } : true };\n\n      if (deviceKind === 'audio') {\n        setAudioDevice(deviceId);\n        setAudioDeviceStatus('PROCESSING');\n        setAudioDeviceError(undefined);\n      } else if (deviceKind === 'video') {\n        setVideoDevice(deviceId);\n        setVideoDeviceStatus('PROCESSING');\n        setVideoDeviceError(undefined);\n      }\n\n      try {\n        const stream = await cancellablePromise(openMediaDevices(constraints, logger));\n        const track = getTrack(stream, deviceKind);\n\n        if (track) {\n          if (avStreamRef.current) {\n            avStreamRef.current?.addTrack(track);\n          } else {\n            avStreamRef.current = stream;\n          }\n\n          track.addEventListener('ended', () => {\n            if (deviceKind === 'audio') {\n              changeDevice(undefined, 'audio');\n            } else if (deviceKind === 'video') {\n              changeDevice(undefined, 'video');\n            }\n          });\n\n          if (deviceKind === 'audio') {\n            setAudioDevice(track.getSettings().deviceId);\n            setAudioDeviceStatus('READY');\n          } else if (deviceKind === 'video') {\n            setVideoDevice(track.getSettings().deviceId);\n            setVideoDeviceStatus('READY');\n          }\n        }\n      } catch (error) {\n        const errorMessage: TDeviceError =\n          error instanceof Error ? (error.message as TDeviceError) : 'other';\n\n        if (deviceKind === 'audio') {\n          setAudioDeviceStatus('ERROR');\n          setAudioDeviceError(errorMessage);\n        } else if (deviceKind === 'video') {\n          setVideoDeviceStatus('ERROR');\n          setVideoDeviceError(errorMessage);\n        }\n      }\n    },\n    [cancellablePromise, logger],\n  );\n\n  const changeAudioOutputDevice = useCallback(\n    (deviceId: string) => {\n      setSelectedAudioOutputDevice(deviceId);\n      const videoEl = videoElRef.current;\n\n      if (videoEl && 'setSinkId' in videoEl) {\n        videoEl.setSinkId(deviceId).catch(error => {\n          logger('av_preview_set_audio_output_device_error', {\n            deviceId,\n            error_name: error?.name,\n            error_message: error?.message,\n          });\n        });\n      }\n    },\n    [videoElRef, logger],\n  );\n\n  useEffect(() => {\n    let permissionCleanup: (() => void) | undefined;\n    const asyncEffect = async () => {\n      try {\n        const stream = await cancellablePromise(\n          openMediaDevices({ video: true, audio: true }, logger),\n        );\n\n        avStreamRef.current = stream;\n        setAudioDeviceStatus('READY');\n        setVideoDeviceStatus('READY');\n        const audioTrack = getTrack(stream, 'audio');\n        const videoTrack = getTrack(stream, 'video');\n\n        if (audioTrack) {\n          audioTrack.addEventListener('ended', () => {\n            const audioDeviceId = audioTrack.getSettings().deviceId;\n\n            if (audioDeviceId) {\n              changeDevice(audioDeviceId, 'audio');\n            }\n          });\n          setAudioDevice(audioTrack.getSettings().deviceId);\n        }\n\n        if (videoTrack) {\n          videoTrack.addEventListener('ended', () => {\n            const videoDeviceId = videoTrack.getSettings().deviceId;\n\n            if (videoDeviceId) {\n              changeDevice(videoDeviceId, 'video');\n            }\n          });\n          setVideoDevice(videoTrack.getSettings().deviceId);\n        }\n\n        try {\n          const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n          setDevices(connectedDevices);\n        } catch {\n          logger('av_preview_get_connected_devices_error');\n        }\n      } catch (error) {\n        const errorMessage: TDeviceError =\n          error instanceof Error ? (error.message as TDeviceError) : 'other';\n\n        try {\n          const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n          // Permission denied for\n          if (connectedDevices.audio.length + connectedDevices.video.length === 0) {\n            setAudioDeviceStatus('ERROR');\n            setVideoDeviceStatus('ERROR');\n            setAudioDeviceError(errorMessage);\n            setVideoDeviceError(errorMessage);\n          } else if (connectedDevices.video.length === 0) {\n            setVideoDeviceStatus('ERROR');\n            setVideoDeviceError(errorMessage);\n          } else if (connectedDevices.audio.length === 0) {\n            setAudioDeviceStatus('ERROR');\n            setAudioDeviceError(errorMessage);\n          }\n\n          if (connectedDevices.audio.length > 0) {\n            changeDevice(undefined, 'audio');\n          }\n\n          if (connectedDevices.video.length > 0) {\n            changeDevice(undefined, 'video');\n          }\n\n          setDevices(connectedDevices);\n        } catch {\n          logger('av_preview_get_connected_devices_error');\n        }\n      }\n\n      try {\n        const cameraPermission = await navigator.permissions.query({\n          name: 'camera' as PermissionName,\n        });\n        const microphonePermission = await navigator.permissions.query({\n          name: 'microphone' as PermissionName,\n        });\n        const handleCameraPermissionChange = async () => {\n          try {\n            const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n            setDevices(connectedDevices);\n          } catch {\n            logger('av_preview_get_connected_devices_error');\n          }\n\n          if (cameraPermission.state === 'granted') {\n            changeDevice(undefined, 'video'); // Reset video device on permission change\n          }\n        };\n        const handleMicrophonePermissionChange = async () => {\n          try {\n            const connectedDevices = await cancellablePromise(getConnectedDevices());\n\n            setDevices(connectedDevices);\n          } catch {\n            logger('av_preview_get_connected_devices_error');\n          }\n\n          if (microphonePermission.state === 'granted') {\n            changeDevice(undefined, 'audio'); // Reset audio device on permission change\n          }\n        };\n\n        cameraPermission.addEventListener('change', handleCameraPermissionChange);\n        microphonePermission.addEventListener('change', handleMicrophonePermissionChange);\n\n        permissionCleanup = () => {\n          cameraPermission.removeEventListener('change', handleCameraPermissionChange);\n          microphonePermission.removeEventListener('change', handleMicrophonePermissionChange);\n        };\n      } catch {\n        logger('av_preview_permissions_query_error');\n      }\n    };\n\n    asyncEffect();\n\n    return () => {\n      if (permissionCleanup) {\n        permissionCleanup();\n      }\n    };\n  }, [cancellablePromise, changeDevice, logger]);\n\n  /**\n   * Effect to handle media device changes\n   * It listens for device changes and updates the list of connected devices.\n   */\n  useEffect(() => {\n    const handleDeviceChange = async () => {\n      try {\n        const updatedDevices = await getConnectedDevices();\n\n        setDevices(updatedDevices);\n      } catch {\n        logger('av_preview_get_connected_devices_error');\n      }\n    };\n\n    navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange);\n\n    return () => {\n      navigator.mediaDevices.removeEventListener('devicechange', handleDeviceChange);\n    };\n  }, [logger]);\n\n  /**\n   * If the audio device is ready and the selected audio device is not in the list of available devices,\n   * switch to the first available audio device.\n   */\n  useEffect(() => {\n    if (\n      audioDeviceStatus === 'READY' &&\n      selectedAudioDevice &&\n      !devices.audio.find(d => d.id === selectedAudioDevice)\n    ) {\n      const firstAudioDevice = devices.audio[0];\n\n      if (firstAudioDevice) {\n        changeDevice(firstAudioDevice.id, 'audio');\n      }\n    }\n  }, [audioDeviceStatus, changeDevice, devices.audio, selectedAudioDevice]);\n\n  /**\n   * If the video device is ready and the selected video device is not in the list of available devices,\n   * switch to the first available video device.\n   */\n  useEffect(() => {\n    if (\n      videoDeviceStatus === 'READY' &&\n      selectedVideoDevice &&\n      !devices.video.find(d => d.id === selectedVideoDevice)\n    ) {\n      const firstVideoDevice = devices.video[0];\n\n      if (firstVideoDevice) {\n        changeDevice(firstVideoDevice.id, 'video');\n      }\n    }\n  }, [videoDeviceStatus, changeDevice, devices.video, selectedVideoDevice]);\n\n  // Set the video element's srcObject to the MediaStream when available\n  useEffect(() => {\n    if (avStreamRef.current && videoElRef.current) {\n      videoElRef.current.srcObject = avStreamRef.current;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [avStreamRef.current, videoElRef]);\n\n  useEffect(() => {\n    return () => {\n      if (avStreamRef.current) {\n        removeTracksFromStream(avStreamRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    audioDeviceStatus,\n    audioDeviceError,\n    videoDeviceStatus,\n    videoDeviceError,\n    devices,\n    selectedVideoDevice,\n    selectedAudioDevice,\n    selectedAudioOutputDevice,\n    changeDevice,\n    changeAudioOutputDevice,\n  };\n};\n\nexport default useMediaDevices;\n"],"names":["useMediaDevices","videoElRef","logger","audioDeviceStatus","setAudioDeviceStatus","useState","videoDeviceStatus","setVideoDeviceStatus","audioDeviceError","setAudioDeviceError","videoDeviceError","setVideoDeviceError","selectedAudioOutputDevice","setSelectedAudioOutputDevice","avStreamRef","useRef","devices","setDevices","selectedAudioDevice","setAudioDevice","selectedVideoDevice","setVideoDevice","cancellablePromise","useCancellablePromise","changeDevice","useCallback","deviceId","deviceKind","removeTracksFromStream","constraints","stream","openMediaDevices","track","getTrack","_a","error","errorMessage","changeAudioOutputDevice","videoEl","useEffect","permissionCleanup","audioTrack","videoTrack","audioDeviceId","videoDeviceId","connectedDevices","getConnectedDevices","cameraPermission","microphonePermission","handleCameraPermissionChange","handleMicrophonePermissionChange","handleDeviceChange","updatedDevices","d","firstAudioDevice","firstVideoDevice"],"mappings":"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"}

package/dist/features/chapters/chapter/comps/supplementary-resources/supplementary-resources.js.map

@@ -1 +1 @@
-{"version":3,"file":"supplementary-resources.js","sources":["../../../../../../src/features/chapters/chapter/comps/supplementary-resources/supplementary-resources.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { memo, useCallback, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ResourcesList from '../../../../sheets/resources-list/resources-list';\nimport UIContext, { useUIContext } from '../../../../ui/context/context';\nimport useTrackingContext from '../../../../ui/context/use-tracking-context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport type { IChapterDataProps } from '../../chapter-types';\nimport * as Styled from './supplementary-resources-styled';\nimport type { ISupplementaryResourcesProps } from './supplementary-resources-types';\nimport { getResourceTabName } from './utils';\n\nconst getDefaultSelectedTab = (\n  groupedSheets: IChapterDataProps['sheets_data']['supplementary_sheets_grouped'],\n  groupedSheetsSortOrder: IChapterDataProps['sheets_data']['supplementary_sheets_group_sort_order'],\n): string => {\n  const sheetCategory = groupedSheetsSortOrder.find(category => {\n    const categoryData = groupedSheets[category];\n\n    return categoryData ? categoryData.length > 0 : undefined;\n  });\n\n  return sheetCategory ?? 'assigned';\n};\n\nconst SupplementaryResources: FC<ISupplementaryResourcesProps> = memo(\n  ({ groupedSupplementarySheets, userType, isDefocused, ...restSupplementaryResourcesProps }) => {\n    const {\n      handleOnCreateExtraPractice,\n      teacherId,\n      groupedSupplementarySheetsSortOrder,\n      ...sheetListCallbacks\n    } = restSupplementaryResourcesProps;\n\n    const theme = useTheme();\n    const totalResourcesCount = useRef(0);\n\n    const [selectedTab, setSelectedTab] = useState(() => {\n      return getDefaultSelectedTab(groupedSupplementarySheets, groupedSupplementarySheetsSortOrder);\n    });\n\n    const analyticProps = useTrackingContext({ tab: selectedTab });\n    const { onEvent: trackEvent } = useUIContext();\n\n    const isTeacher = userType === 'TEACHER';\n\n    const { keys: supplementarySheetCounts, newAssignedSheetsCount } = useMemo(() => {\n      const assignedSheets = groupedSupplementarySheets.assigned ?? [];\n\n      const newAssignedCount = assignedSheets.reduce((acc, assignedSheetData) => {\n        if (assignedSheetData.state === 'NOT_STARTED') {\n          return acc + 1;\n        }\n\n        return acc;\n      }, 0);\n\n      const keys: Partial<Record<string, number>> = {};\n\n      if (newAssignedCount > 0) {\n        keys.assigned = newAssignedCount;\n      }\n\n      totalResourcesCount.current = isTeacher ? 0 : assignedSheets.length;\n\n      groupedSupplementarySheets &&\n        groupedSupplementarySheetsSortOrder.forEach(suppSheetType => {\n          const sheetData =\n            groupedSupplementarySheets[suppSheetType as keyof typeof groupedSupplementarySheets] ||\n            [];\n          const sheetCount = sheetData.length;\n\n          if (suppSheetType !== 'assigned' && isTeacher) {\n            totalResourcesCount.current += sheetCount;\n          }\n\n          if (sheetCount) {\n            keys[suppSheetType] = sheetCount;\n          }\n        });\n\n      return { keys, newAssignedSheetsCount: newAssignedCount };\n    }, [groupedSupplementarySheets, groupedSupplementarySheetsSortOrder, isTeacher]);\n\n    const handleOnTabSwitch = useCallback(\n      (suppSheetKey: string) => {\n        setSelectedTab(suppSheetKey);\n        trackEvent('clicked', {\n          cta: suppSheetKey,\n        });\n      },\n      [trackEvent],\n    );\n\n    if (totalResourcesCount.current === 0) return null;\n\n    return (\n      <UIContext.Provider value={analyticProps}>\n        <Styled.SupplementaryResourcesContainer\n          $flexGap={theme.layout.gutter * 1.5}\n          $widthX={47.5}\n          $flexGapX={2}\n        >\n          <FlexView $flexGap={8}>\n            <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n              resources ({totalResourcesCount.current})\n            </Text>\n\n            {isTeacher && (\n              <Text $renderAs=\"ub3\" $color=\"BLACK_T_60\">\n                Only assigned sheets are visible to the student\n              </Text>\n            )}\n          </FlexView>\n\n          <Styled.ScrollFlexView $flexDirection=\"row\">\n            {Object.entries(supplementarySheetCounts).map(entry => {\n              const [suppSheetKey, sheetCount] = entry;\n\n              const tabLabel = getResourceTabName(suppSheetKey, sheetCount ?? 0);\n\n              return (\n                <Styled.Tab\n                  key={suppSheetKey}\n                  $selected={selectedTab === suppSheetKey}\n                  onClick={() => handleOnTabSwitch(suppSheetKey)}\n                >\n                  <FlexView $flexDirection=\"row\" $flexGapX={0.375}>\n                    <Text $renderAs={selectedTab === suppSheetKey ? 'cta2' : 'body2'}>\n                      {tabLabel}\n                    </Text>\n                    {suppSheetKey === 'assigned' && !!newAssignedSheetsCount && (\n                      <FlexView\n                        $background=\"GREEN_4\"\n                        $borderRadiusX={0.25}\n                        $gapX={0.125}\n                        $gutterX={0.25}\n                        $alignItems=\"center\"\n                      >\n                        <Styled.WrappedText $renderAs=\"eyebrow2\">\n                          {newAssignedSheetsCount} New\n                        </Styled.WrappedText>\n                      </FlexView>\n                    )}\n                  </FlexView>\n                </Styled.Tab>\n              );\n            })}\n          </Styled.ScrollFlexView>\n\n          <ResourcesList\n            userType={userType}\n            sheets={groupedSupplementarySheets[selectedTab] ?? []}\n            {...sheetListCallbacks}\n          />\n        </Styled.SupplementaryResourcesContainer>\n      </UIContext.Provider>\n    );\n  },\n);\n\nexport default SupplementaryResources;\n"],"names":["getDefaultSelectedTab","groupedSheets","groupedSheetsSortOrder","category","categoryData","SupplementaryResources","memo","groupedSupplementarySheets","userType","isDefocused","restSupplementaryResourcesProps","handleOnCreateExtraPractice","teacherId","groupedSupplementarySheetsSortOrder","sheetListCallbacks","theme","useTheme","totalResourcesCount","useRef","selectedTab","setSelectedTab","useState","analyticProps","useTrackingContext","trackEvent","useUIContext","isTeacher","supplementarySheetCounts","newAssignedSheetsCount","useMemo","assignedSheets","newAssignedCount","acc","assignedSheetData","keys","suppSheetType","sheetCount","handleOnTabSwitch","useCallback","suppSheetKey","jsx","UIContext","jsxs","Styled.SupplementaryResourcesContainer","FlexView","Text","Styled.ScrollFlexView","entry","tabLabel","getResourceTabName","Styled.Tab","Styled.WrappedText","ResourcesList"],"mappings":"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"}
+{"version":3,"file":"supplementary-resources.js","sources":["../../../../../../src/features/chapters/chapter/comps/supplementary-resources/supplementary-resources.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { memo, useCallback, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ResourcesList from '../../../../sheets/resources-list/resources-list';\nimport UIContext, { useUIContext } from '../../../../ui/context/context';\nimport useTrackingContext from '../../../../ui/context/use-tracking-context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport type { IChapterDataProps } from '../../chapter-types';\nimport * as Styled from './supplementary-resources-styled';\nimport type { ISupplementaryResourcesProps } from './supplementary-resources-types';\nimport { getResourceTabName } from './utils';\n\nconst getDefaultSelectedTab = (\n  groupedSheets: IChapterDataProps['sheets_data']['supplementary_sheets_grouped'],\n  groupedSheetsSortOrder: IChapterDataProps['sheets_data']['supplementary_sheets_group_sort_order'],\n): string => {\n  const sheetCategory = groupedSheetsSortOrder.find(category => {\n    const categoryData = groupedSheets[category];\n\n    return categoryData ? categoryData.length > 0 : undefined;\n  });\n\n  return sheetCategory ?? 'assigned';\n};\n\nconst SupplementaryResources: FC<ISupplementaryResourcesProps> = memo(\n  ({ groupedSupplementarySheets, userType, isDefocused, ...restSupplementaryResourcesProps }) => {\n    const {\n      handleOnCreateExtraPractice,\n      teacherId,\n      groupedSupplementarySheetsSortOrder,\n      ...sheetListCallbacks\n    } = restSupplementaryResourcesProps;\n\n    const theme = useTheme();\n    const totalResourcesCount = useRef(0);\n\n    const [selectedTab, setSelectedTab] = useState(() => {\n      return getDefaultSelectedTab(groupedSupplementarySheets, groupedSupplementarySheetsSortOrder);\n    });\n\n    const analyticProps = useTrackingContext({ tab: selectedTab });\n    const { onEvent: trackEvent } = useUIContext();\n\n    const isTeacher = userType === 'TEACHER';\n\n    const { keys: supplementarySheetCounts, newAssignedSheetsCount } = useMemo(() => {\n      const assignedSheets = groupedSupplementarySheets.assigned ?? [];\n\n      const newAssignedCount = assignedSheets.reduce((acc, assignedSheetData) => {\n        if (assignedSheetData.state === 'NOT_STARTED') {\n          return acc + 1;\n        }\n\n        return acc;\n      }, 0);\n\n      const keys: Partial<Record<string, number>> = {};\n\n      if (newAssignedCount > 0) {\n        keys.assigned = newAssignedCount;\n      }\n\n      totalResourcesCount.current = isTeacher ? 0 : assignedSheets.length;\n\n      if (groupedSupplementarySheets) {\n        groupedSupplementarySheetsSortOrder.forEach(suppSheetType => {\n          const sheetData =\n            groupedSupplementarySheets[suppSheetType as keyof typeof groupedSupplementarySheets] ||\n            [];\n          const sheetCount = sheetData.length;\n\n          if (suppSheetType !== 'assigned' && isTeacher) {\n            totalResourcesCount.current += sheetCount;\n          }\n\n          if (sheetCount) {\n            keys[suppSheetType] = sheetCount;\n          }\n        });\n      }\n\n      return { keys, newAssignedSheetsCount: newAssignedCount };\n    }, [groupedSupplementarySheets, groupedSupplementarySheetsSortOrder, isTeacher]);\n\n    const handleOnTabSwitch = useCallback(\n      (suppSheetKey: string) => {\n        setSelectedTab(suppSheetKey);\n        trackEvent('clicked', {\n          cta: suppSheetKey,\n        });\n      },\n      [trackEvent],\n    );\n\n    if (totalResourcesCount.current === 0) return null;\n\n    return (\n      <UIContext.Provider value={analyticProps}>\n        <Styled.SupplementaryResourcesContainer\n          $flexGap={theme.layout.gutter * 1.5}\n          $widthX={47.5}\n          $flexGapX={2}\n        >\n          <FlexView $flexGap={8}>\n            <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n              resources ({totalResourcesCount.current})\n            </Text>\n\n            {isTeacher && (\n              <Text $renderAs=\"ub3\" $color=\"BLACK_T_60\">\n                Only assigned sheets are visible to the student\n              </Text>\n            )}\n          </FlexView>\n\n          <Styled.ScrollFlexView $flexDirection=\"row\">\n            {Object.entries(supplementarySheetCounts).map(entry => {\n              const [suppSheetKey, sheetCount] = entry;\n\n              const tabLabel = getResourceTabName(suppSheetKey, sheetCount ?? 0);\n\n              return (\n                <Styled.Tab\n                  key={suppSheetKey}\n                  $selected={selectedTab === suppSheetKey}\n                  onClick={() => handleOnTabSwitch(suppSheetKey)}\n                >\n                  <FlexView $flexDirection=\"row\" $flexGapX={0.375}>\n                    <Text $renderAs={selectedTab === suppSheetKey ? 'cta2' : 'body2'}>\n                      {tabLabel}\n                    </Text>\n                    {suppSheetKey === 'assigned' && !!newAssignedSheetsCount && (\n                      <FlexView\n                        $background=\"GREEN_4\"\n                        $borderRadiusX={0.25}\n                        $gapX={0.125}\n                        $gutterX={0.25}\n                        $alignItems=\"center\"\n                      >\n                        <Styled.WrappedText $renderAs=\"eyebrow2\">\n                          {newAssignedSheetsCount} New\n                        </Styled.WrappedText>\n                      </FlexView>\n                    )}\n                  </FlexView>\n                </Styled.Tab>\n              );\n            })}\n          </Styled.ScrollFlexView>\n\n          <ResourcesList\n            userType={userType}\n            sheets={groupedSupplementarySheets[selectedTab] ?? []}\n            {...sheetListCallbacks}\n          />\n        </Styled.SupplementaryResourcesContainer>\n      </UIContext.Provider>\n    );\n  },\n);\n\nexport default SupplementaryResources;\n"],"names":["getDefaultSelectedTab","groupedSheets","groupedSheetsSortOrder","category","categoryData","SupplementaryResources","memo","groupedSupplementarySheets","userType","isDefocused","restSupplementaryResourcesProps","handleOnCreateExtraPractice","teacherId","groupedSupplementarySheetsSortOrder","sheetListCallbacks","theme","useTheme","totalResourcesCount","useRef","selectedTab","setSelectedTab","useState","analyticProps","useTrackingContext","trackEvent","useUIContext","isTeacher","supplementarySheetCounts","newAssignedSheetsCount","useMemo","assignedSheets","newAssignedCount","acc","assignedSheetData","keys","suppSheetType","sheetCount","handleOnTabSwitch","useCallback","suppSheetKey","jsx","UIContext","jsxs","Styled.SupplementaryResourcesContainer","FlexView","Text","Styled.ScrollFlexView","entry","tabLabel","getResourceTabName","Styled.Tab","Styled.WrappedText","ResourcesList"],"mappings":"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"}

package/dist/features/chapters-v2/comps/node-card/node-card-styled.js

@@ -60,10 +60,10 @@ const h = t(e)(({
   right: ${r ?? 0}px;
   z-index: 3;
 `);
-t(d)(({}) => `
-    width: 28px;
-    height: 28px;
-  `);
+t(d)`
+  width: 28px;
+  height: 28px;
+`;
 const W = t(e)(({
   theme: o,
   $paddingRight: r,

package/dist/features/chapters-v2/comps/node-card/node-card-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n  $disabled: boolean;\n  $isSheetLocked?: boolean;\n  $minWidth?: number;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({\n  theme,\n  $disabled,\n  $minWidth,\n}) => {\n  const { BLACK, BLACK_T_15, WHITE_5 } = theme.colors;\n\n  return `\n    ${$minWidth ? `min-width: ${$minWidth}px;` : ''}\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    position: relative;\n    border-image: linear-gradient(to right, ${BLACK_T_15} 0%, ${BLACK_T_15} 100%);\n    outline: 1px solid ${WHITE_5};\n\n    .node-card-border {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      background: transparent;\n    }\n\n    &:hover {\n      ${\n        !$disabled &&\n        `\n          outline: 1px solid ${BLACK};\n        `\n      }    \n    }\n  `;\n});\n\nconst StyledImportantIcon = styled(ImportantIcon)(({ theme }) => {\n  const { layout } = theme;\n\n  return `\n    width: ${layout.gutter * 0.75}px;\n    height: ${layout.gutter * 0.75}px;\n    position: absolute;\n    top: -2.5px;\n    right: -2.5px;\n  `;\n});\n\ninterface INodeCardInfoWrapper {\n  $bgImage: string;\n}\n\nconst NodeCardInfoWrapper = styled(FlexView)<INodeCardInfoWrapper>(({ $bgImage }) => {\n  return `\n    background-image: url(${$bgImage});\n\n    & .context-menu {\n      justify-self: flex-end;\n      margin-left: auto;\n    }\n  `;\n});\n\nconst IconWrapper = styled(FlexView)`\n  border-radius: 50%;\n`;\n\nconst NodeCardContentWrapper = styled(FlexView)(() => {\n  return `\n    position: relative;\n    padding: 12px 8px 12px 12px;\n  `;\n});\n\ninterface ISheetTagWrapper {\n  $top?: number;\n  $right?: number;\n}\n\nconst SheetTagWrapper = styled(FlexView)<ISheetTagWrapper>(({ $top, $right }) => {\n  return `\n  position: absolute;\n  top: ${$top ?? 0}px;\n  right: ${$right ?? 0}px;\n  z-index: 3;\n`;\n});\n\nconst StyledLockIcon = styled(Lock2Icon)(({}) => {\n  return `\n    width: 28px;\n    height: 28px;\n  `;\n});\n\nconst InProgressIconWrapper = styled(FlexView)<{ $paddingRight: number; $paddingLeft: number }>(({\n  theme,\n  $paddingRight,\n  $paddingLeft,\n}) => {\n  const { BLACK_1, WHITE_1 } = theme.colors;\n\n  return `\n    position: absolute;\n    top: -10px;\n    right: -10px;\n    padding: 0px;\n    padding-left: ${$paddingLeft}px;\n    padding-right: ${$paddingRight}px;\n    background: ${BLACK_1};\n\n    path {\n      fill: ${WHITE_1};\n    }\n  `;\n});\n\nconst NodeCardTitle = styled(Text)(() => {\n  return `\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  `;\n});\n\nconst NodeKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    padding: 4px;\n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\ninterface INodeOptionsMenuWrapper {\n  $visible: boolean;\n}\n\nconst NodeMenuOptionsWrapper = styled(FlexView)<INodeOptionsMenuWrapper>(({ theme, $visible }) => {\n  return `\n    cursor: pointer;\n\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    left: 0;\n\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport {\n  NodeCardContainer,\n  StyledImportantIcon,\n  NodeCardInfoWrapper,\n  IconWrapper,\n  NodeCardContentWrapper,\n  SheetTagWrapper,\n  StyledLockIcon,\n  InProgressIconWrapper,\n  NodeCardTitle,\n  NodeKebabMenuWrapper,\n  NodeMenuOptionsWrapper,\n};\n"],"names":["NodeCardContainer","styled","FlexView","theme","$disabled","$minWidth","BLACK","BLACK_T_15","WHITE_5","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","BLACK_1","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAaA,MAAMA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC;AAAA,EAC9D,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAM,EAAE,OAAAC,GAAO,YAAAC,GAAY,SAAAC,EAAA,IAAYL,EAAM;AAEtC,SAAA;AAAA,MACHE,IAAY,cAAcA,CAAS,QAAQ,EAAE;AAAA,cACrCD,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELG,CAAU,QAAQA,CAAU;AAAA,yBACjDC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAexB,CAACJ,KACD;AAAA,+BACuBE,CAAK;AAAA,SAE9B;AAAA;AAAA;AAGN,CAAC,GAEKG,IAAsBR,EAAOS,CAAa,EAAE,CAAC,EAAE,OAAAP,QAAY;AACzD,QAAA,EAAE,QAAAQ,EAAW,IAAAR;AAEZ,SAAA;AAAA,aACIQ,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBX,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAW,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcb,EAAOC,CAAQ;AAAA;AAAA,GAI7Ba,IAAyBd,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKc,IAAkBf,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAe,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBjB,EAAOkB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBnB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAkB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYrB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWmB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBxB,EAAOyB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuB1B,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKyB,IAAyB3B,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,GAAO,UAAA0B,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKX1B,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}
+{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n  $disabled: boolean;\n  $isSheetLocked?: boolean;\n  $minWidth?: number;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({\n  theme,\n  $disabled,\n  $minWidth,\n}) => {\n  const { BLACK, BLACK_T_15, WHITE_5 } = theme.colors;\n\n  return `\n    ${$minWidth ? `min-width: ${$minWidth}px;` : ''}\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    position: relative;\n    border-image: linear-gradient(to right, ${BLACK_T_15} 0%, ${BLACK_T_15} 100%);\n    outline: 1px solid ${WHITE_5};\n\n    .node-card-border {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      background: transparent;\n    }\n\n    &:hover {\n      ${\n        !$disabled &&\n        `\n          outline: 1px solid ${BLACK};\n        `\n      }    \n    }\n  `;\n});\n\nconst StyledImportantIcon = styled(ImportantIcon)(({ theme }) => {\n  const { layout } = theme;\n\n  return `\n    width: ${layout.gutter * 0.75}px;\n    height: ${layout.gutter * 0.75}px;\n    position: absolute;\n    top: -2.5px;\n    right: -2.5px;\n  `;\n});\n\ninterface INodeCardInfoWrapper {\n  $bgImage: string;\n}\n\nconst NodeCardInfoWrapper = styled(FlexView)<INodeCardInfoWrapper>(({ $bgImage }) => {\n  return `\n    background-image: url(${$bgImage});\n\n    & .context-menu {\n      justify-self: flex-end;\n      margin-left: auto;\n    }\n  `;\n});\n\nconst IconWrapper = styled(FlexView)`\n  border-radius: 50%;\n`;\n\nconst NodeCardContentWrapper = styled(FlexView)(() => {\n  return `\n    position: relative;\n    padding: 12px 8px 12px 12px;\n  `;\n});\n\ninterface ISheetTagWrapper {\n  $top?: number;\n  $right?: number;\n}\n\nconst SheetTagWrapper = styled(FlexView)<ISheetTagWrapper>(({ $top, $right }) => {\n  return `\n  position: absolute;\n  top: ${$top ?? 0}px;\n  right: ${$right ?? 0}px;\n  z-index: 3;\n`;\n});\n\nconst StyledLockIcon = styled(Lock2Icon)`\n  width: 28px;\n  height: 28px;\n`;\n\nconst InProgressIconWrapper = styled(FlexView)<{ $paddingRight: number; $paddingLeft: number }>(({\n  theme,\n  $paddingRight,\n  $paddingLeft,\n}) => {\n  const { BLACK_1, WHITE_1 } = theme.colors;\n\n  return `\n    position: absolute;\n    top: -10px;\n    right: -10px;\n    padding: 0px;\n    padding-left: ${$paddingLeft}px;\n    padding-right: ${$paddingRight}px;\n    background: ${BLACK_1};\n\n    path {\n      fill: ${WHITE_1};\n    }\n  `;\n});\n\nconst NodeCardTitle = styled(Text)(() => {\n  return `\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  `;\n});\n\nconst NodeKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    padding: 4px;\n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\ninterface INodeOptionsMenuWrapper {\n  $visible: boolean;\n}\n\nconst NodeMenuOptionsWrapper = styled(FlexView)<INodeOptionsMenuWrapper>(({ theme, $visible }) => {\n  return `\n    cursor: pointer;\n\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    left: 0;\n\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport {\n  NodeCardContainer,\n  StyledImportantIcon,\n  NodeCardInfoWrapper,\n  IconWrapper,\n  NodeCardContentWrapper,\n  SheetTagWrapper,\n  StyledLockIcon,\n  InProgressIconWrapper,\n  NodeCardTitle,\n  NodeKebabMenuWrapper,\n  NodeMenuOptionsWrapper,\n};\n"],"names":["NodeCardContainer","styled","FlexView","theme","$disabled","$minWidth","BLACK","BLACK_T_15","WHITE_5","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","BLACK_1","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAaA,MAAMA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC;AAAA,EAC9D,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAM,EAAE,OAAAC,GAAO,YAAAC,GAAY,SAAAC,EAAA,IAAYL,EAAM;AAEtC,SAAA;AAAA,MACHE,IAAY,cAAcA,CAAS,QAAQ,EAAE;AAAA,cACrCD,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELG,CAAU,QAAQA,CAAU;AAAA,yBACjDC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAexB,CAACJ,KACD;AAAA,+BACuBE,CAAK;AAAA,SAE9B;AAAA;AAAA;AAGN,CAAC,GAEKG,IAAsBR,EAAOS,CAAa,EAAE,CAAC,EAAE,OAAAP,QAAY;AACzD,QAAA,EAAE,QAAAQ,EAAW,IAAAR;AAEZ,SAAA;AAAA,aACIQ,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBX,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAW,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcb,EAAOC,CAAQ;AAAA;AAAA,GAI7Ba,IAAyBd,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKc,IAAkBf,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAe,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBjB,EAAOkB,CAAS;AAAA;AAAA;AAAA;AAKvC,MAAMC,IAAwBnB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAkB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYrB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWmB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBxB,EAAOyB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuB1B,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKyB,IAAyB3B,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,GAAO,UAAA0B,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKX1B,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}

package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.js

@@ -1,13 +1,13 @@
 import o from "styled-components";
 import t from "../../../../ui/layout/flex-view.js";
 import i from "../../../../ui/text/text.js";
-const s = o(t)(({}) => `
-      box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.40);
-      width: 180px;
-      position: relative;
-      left: 0;
-      top: 0;
-    `), x = o(t)(({ theme: r, $disabled: e }) => `
+const s = o(t)`
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);
+  width: 180px;
+  position: relative;
+  left: 0;
+  top: 0;
+`, x = o(t)(({ theme: r, $disabled: e }) => `
         cursor: ${e ? "not-allowed" : "pointer"};
 
         &:hover {

package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-menu-options-styled.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\n\nconst NodeOptions = styled(FlexView)(({}) => {\n  return `\n      box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.40);\n      width: 180px;\n      position: relative;\n      left: 0;\n      top: 0;\n    `;\n});\n\ninterface INodeOptionWrapper {\n  $disabled?: boolean;\n}\n\nconst NodeOptionWrapper = styled(FlexView)<INodeOptionWrapper>(({ theme, $disabled }) => {\n  return `\n        cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n\n        &:hover {\n            background: ${theme.colors.BLACK};\n        };\n\n        path {\n            fill: ${theme.colors.WHITE_1};\n        }\n    `;\n});\n\nconst NodeOptionText = styled(Text)(() => {\n  return `\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    `;\n});\n\nexport { NodeOptions, NodeOptionWrapper, NodeOptionText };\n"],"names":["NodeOptions","styled","FlexView","NodeOptionWrapper","theme","$disabled","Text"],"mappings":";;;AAKA,MAAMA,IAAcC,EAAOC,CAAQ,EAAE,CAAC,CAAA,MAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOR,GAMKC,IAAoBF,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAE,GAAO,WAAAC,QAChE;AAAA,kBACSA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,0BAG7BD,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIxBA,EAAM,OAAO,OAAO;AAAA;AAAA,KAGvC;AAEsBH,EAAOK,CAAI,EAAE,MAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOR;"}
+{"version":3,"file":"node-menu-options-styled.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\n\nconst NodeOptions = styled(FlexView)`\n  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);\n  width: 180px;\n  position: relative;\n  left: 0;\n  top: 0;\n`;\n\ninterface INodeOptionWrapper {\n  $disabled?: boolean;\n}\n\nconst NodeOptionWrapper = styled(FlexView)<INodeOptionWrapper>(({ theme, $disabled }) => {\n  return `\n        cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n\n        &:hover {\n            background: ${theme.colors.BLACK};\n        };\n\n        path {\n            fill: ${theme.colors.WHITE_1};\n        }\n    `;\n});\n\nconst NodeOptionText = styled(Text)(() => {\n  return `\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    `;\n});\n\nexport { NodeOptions, NodeOptionWrapper, NodeOptionText };\n"],"names":["NodeOptions","styled","FlexView","NodeOptionWrapper","theme","$disabled","Text"],"mappings":";;;AAKM,MAAAA,IAAcC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY7BC,IAAoBF,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAE,GAAO,WAAAC,QAChE;AAAA,kBACSA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,0BAG7BD,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIxBA,EAAM,OAAO,OAAO;AAAA;AAAA,KAGvC;AAEsBH,EAAOK,CAAI,EAAE,MAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOR;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js

@@ -8,10 +8,10 @@ const x = {
   loop: !1,
   renderer: "canvas"
 }, v = L(({ isStarAchieved: t, rewardStar: o }) => {
-  const [n, i] = a(!1), [s, c] = a(t && !o), f = T(() => ({
+  const [n, i] = a(!1), [s, f] = a(t && !o), c = T(() => ({
     name: "complete",
     callback: () => {
-      c(!0), i(!1);
+      f(!0), i(!1);
     }
   }), []);
   return u(() => {
@@ -27,7 +27,7 @@ const x = {
       {
         src: E.TABLE_MODE_STAR,
         settings: x,
-        eventListener: f
+        eventListener: c
       }
     ) }),
     !n && /* @__PURE__ */ m(

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-mode-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.tsx"],"sourcesContent":["import type { AnimationEventName } from 'lottie-web';\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport { STAR_SIZE } from './constants';\nimport * as Styled from './table-mode-star-styled';\nimport type { ITableModeStarProps } from './table-mode-star-types';\n\nconst settings = {\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst TableModeStar: React.FC<ITableModeStarProps> = memo(({ isStarAchieved, rewardStar }) => {\n  const [animateStar, setAnimateStar] = useState(false);\n  const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n  const onAnimationFinish = useMemo(() => {\n    return {\n      name: 'complete' as AnimationEventName,\n      callback: () => {\n        setStarRewarded(true);\n        setAnimateStar(false);\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>;\n\n    if (isStarAchieved && rewardStar) {\n      timer = setTimeout(() => {\n        setAnimateStar(true);\n      }, 1000);\n    }\n\n    return () => {\n      timer && clearTimeout(timer);\n    };\n  }, [isStarAchieved, rewardStar]);\n\n  return (\n    <Styled.StarContainer>\n      {animateStar && (\n        <Styled.LottieContainer>\n          <LottieAnimation\n            src={LOTTIE.TABLE_MODE_STAR}\n            settings={settings}\n            eventListener={onAnimationFinish}\n          />\n        </Styled.LottieContainer>\n      )}\n      {!animateStar && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={STAR_SIZE}\n          height={STAR_SIZE}\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n        >\n          <Styled.Circle cx=\"8\" cy=\"8\" r=\"8\" $fill={starRewarded ? 'GREEN_6' : 'WHITE_T_15'} />\n          <Styled.Path\n            d=\"M8 2L6.23664 5.57295L2.29366 6.1459L5.14683 8.92705L4.47329 12.8541L8 11L11.5267 12.8541L10.8532 8.92705L13.7063 6.1459L9.76336 5.57295L8 2Z\"\n            $fill={starRewarded ? 'GREEN_4' : 'WHITE_T_15'}\n          />\n        </svg>\n      )}\n    </Styled.StarContainer>\n  );\n});\n\nexport default TableModeStar;\n"],"names":["settings","TableModeStar","memo","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","STAR_SIZE","Styled.Circle","Styled.Path"],"mappings":";;;;;;AASA,MAAMA,IAAW;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAA+CC,EAAK,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,QAAiB;AAC5F,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASJ,KAAkB,CAACC,CAAU,GAExEM,IAAoBC,EAAQ,OACzB;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAM;AACd,MAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,IACtB;AAAA,EAAA,IAED,CAAE,CAAA;AAEL,SAAAM,EAAU,MAAM;AACV,QAAAC;AAEJ,WAAIV,KAAkBC,MACpBS,IAAQ,WAAW,MAAM;AACvB,MAAAP,EAAe,EAAI;AAAA,OAClB,GAAI,IAGF,MAAM;AACX,MAAAO,KAAS,aAAaA,CAAK;AAAA,IAAA;AAAA,EAC7B,GACC,CAACV,GAAgBC,CAAU,CAAC,GAG7B,gBAAAU,EAACC,GAAA,EACE,UAAA;AAAA,IACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAKC,EAAO;AAAA,QACZ,UAAAnB;AAAA,QACA,eAAeU;AAAA,MAAA;AAAA,IAAA,GAEnB;AAAA,IAED,CAACL,KACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAOM;AAAA,QACP,QAAQA;AAAA,QACR,SAAQ;AAAA,QACR,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAc,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,OAAOb,IAAe,YAAY,aAAc,CAAA;AAAA,UACnF,gBAAAQ;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,OAAOd,IAAe,YAAY;AAAA,YAAA;AAAA,UACpC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"table-mode-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode-star/table-mode-star.tsx"],"sourcesContent":["import type { AnimationEventName } from 'lottie-web';\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport { STAR_SIZE } from './constants';\nimport * as Styled from './table-mode-star-styled';\nimport type { ITableModeStarProps } from './table-mode-star-types';\n\nconst settings = {\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst TableModeStar: React.FC<ITableModeStarProps> = memo(({ isStarAchieved, rewardStar }) => {\n  const [animateStar, setAnimateStar] = useState(false);\n  const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n  const onAnimationFinish = useMemo(() => {\n    return {\n      name: 'complete' as AnimationEventName,\n      callback: () => {\n        setStarRewarded(true);\n        setAnimateStar(false);\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>;\n\n    if (isStarAchieved && rewardStar) {\n      timer = setTimeout(() => {\n        setAnimateStar(true);\n      }, 1000);\n    }\n\n    return () => {\n      if (timer) {\n        clearTimeout(timer);\n      }\n    };\n  }, [isStarAchieved, rewardStar]);\n\n  return (\n    <Styled.StarContainer>\n      {animateStar && (\n        <Styled.LottieContainer>\n          <LottieAnimation\n            src={LOTTIE.TABLE_MODE_STAR}\n            settings={settings}\n            eventListener={onAnimationFinish}\n          />\n        </Styled.LottieContainer>\n      )}\n      {!animateStar && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={STAR_SIZE}\n          height={STAR_SIZE}\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n        >\n          <Styled.Circle cx=\"8\" cy=\"8\" r=\"8\" $fill={starRewarded ? 'GREEN_6' : 'WHITE_T_15'} />\n          <Styled.Path\n            d=\"M8 2L6.23664 5.57295L2.29366 6.1459L5.14683 8.92705L4.47329 12.8541L8 11L11.5267 12.8541L10.8532 8.92705L13.7063 6.1459L9.76336 5.57295L8 2Z\"\n            $fill={starRewarded ? 'GREEN_4' : 'WHITE_T_15'}\n          />\n        </svg>\n      )}\n    </Styled.StarContainer>\n  );\n});\n\nexport default TableModeStar;\n"],"names":["settings","TableModeStar","memo","isStarAchieved","rewardStar","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","STAR_SIZE","Styled.Circle","Styled.Path"],"mappings":";;;;;;AASA,MAAMA,IAAW;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAA+CC,EAAK,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,QAAiB;AAC5F,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASJ,KAAkB,CAACC,CAAU,GAExEM,IAAoBC,EAAQ,OACzB;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAM;AACd,MAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,IACtB;AAAA,EAAA,IAED,CAAE,CAAA;AAEL,SAAAM,EAAU,MAAM;AACV,QAAAC;AAEJ,WAAIV,KAAkBC,MACpBS,IAAQ,WAAW,MAAM;AACvB,MAAAP,EAAe,EAAI;AAAA,OAClB,GAAI,IAGF,MAAM;AACX,MAAIO,KACF,aAAaA,CAAK;AAAA,IACpB;AAAA,EACF,GACC,CAACV,GAAgBC,CAAU,CAAC,GAG7B,gBAAAU,EAACC,GAAA,EACE,UAAA;AAAA,IACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAKC,EAAO;AAAA,QACZ,UAAAnB;AAAA,QACA,eAAeU;AAAA,MAAA;AAAA,IAAA,GAEnB;AAAA,IAED,CAACL,KACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAOM;AAAA,QACP,QAAQA;AAAA,QACR,SAAQ;AAAA,QACR,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAc,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,OAAOb,IAAe,YAAY,aAAc,CAAA;AAAA,UACnF,gBAAAQ;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,OAAOd,IAAe,YAAY;AAAA,YAAA;AAAA,UACpC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js

@@ -1,5 +1,5 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { memo as u, useState as i, useMemo as T, useEffect as p } from "react";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { memo as u, useState as s, useMemo as T, useEffect as p } from "react";
 import { LOTTIE as S } from "../../../../../../assets/lottie/lottie.js";
 import E from "../../../../../ui/lottie-animation/lottie-animation.js";
 import { StarContainer as L, LottieContainer as d, TableStar as A } from "./table-segment-star-styled.js";
@@ -8,26 +8,26 @@ const b = {
   render: "canvas"
 }, C = u(
   ({ isStarAchieved: e, rewardStar: t, delay: n = 0 }) => {
-    const [a, s] = i(!1), [m, c] = i(e && !t), l = T(() => ({
+    const [a, i] = s(!1), [m, c] = s(e && !t), f = T(() => ({
       name: "complete",
       callback: () => {
-        c(!0), s(!1);
+        c(!0), i(!1);
       }
     }), []);
     return p(() => {
       let r;
       return e && t && (r = setTimeout(() => {
-        s(!0);
+        i(!0);
       }, 1e3 + n)), () => {
         r && clearTimeout(r);
       };
-    }, [n, e, t]), /* @__PURE__ */ f(L, { children: [
+    }, [n, e, t]), /* @__PURE__ */ l(L, { children: [
       a && /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(
         E,
         {
           src: S.TABLE_SEGMENT_STAR,
           settings: b,
-          eventListener: l
+          eventListener: f
         }
       ) }),
       !a && /* @__PURE__ */ o(A, { $isStarAchieved: m })

package/dist/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-segment-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.tsx"],"sourcesContent":["import type { AnimationEventName } from 'lottie-web';\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './table-segment-star-styled';\nimport type { ITableSegmentStarProps } from './table-segment-star-types';\n\nconst settings = {\n  loop: false,\n  render: 'canvas',\n};\n\nconst TableSegmentStar: React.FC<ITableSegmentStarProps> = memo(\n  ({ isStarAchieved, rewardStar, delay = 0 }) => {\n    const [animateStar, setAnimateStar] = useState(false);\n    const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n    const onAnimationFinish = useMemo(() => {\n      return {\n        name: 'complete' as AnimationEventName,\n        callback: () => {\n          setStarRewarded(true);\n          setAnimateStar(false);\n        },\n      };\n    }, []);\n\n    useEffect(() => {\n      let timer: ReturnType<typeof setTimeout>;\n\n      if (isStarAchieved && rewardStar) {\n        timer = setTimeout(() => {\n          setAnimateStar(true);\n        }, 1000 + delay);\n      }\n\n      return () => {\n        timer && clearTimeout(timer);\n      };\n    }, [delay, isStarAchieved, rewardStar]);\n\n    return (\n      <Styled.StarContainer>\n        {animateStar && (\n          <Styled.LottieContainer>\n            <LottieAnimation\n              src={LOTTIE.TABLE_SEGMENT_STAR}\n              settings={settings}\n              eventListener={onAnimationFinish}\n            />\n          </Styled.LottieContainer>\n        )}\n        {!animateStar && <Styled.TableStar $isStarAchieved={starRewarded} />}\n      </Styled.StarContainer>\n    );\n  },\n);\n\nexport default TableSegmentStar;\n"],"names":["settings","TableSegmentStar","memo","isStarAchieved","rewardStar","delay","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","Styled.TableStar"],"mappings":";;;;;AAQA,MAAMA,IAAW;AAAA,EACf,MAAM;AAAA,EACN,QAAQ;AACV,GAEMC,IAAqDC;AAAA,EACzD,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,GAAY,OAAAC,IAAQ,QAAQ;AAC7C,UAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASL,KAAkB,CAACC,CAAU,GAExEO,IAAoBC,EAAQ,OACzB;AAAA,MACL,MAAM;AAAA,MACN,UAAU,MAAM;AACd,QAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,MACtB;AAAA,IAAA,IAED,CAAE,CAAA;AAEL,WAAAM,EAAU,MAAM;AACV,UAAAC;AAEJ,aAAIX,KAAkBC,MACpBU,IAAQ,WAAW,MAAM;AACvB,QAAAP,EAAe,EAAI;AAAA,MAAA,GAClB,MAAOF,CAAK,IAGV,MAAM;AACX,QAAAS,KAAS,aAAaA,CAAK;AAAA,MAAA;AAAA,IAE5B,GAAA,CAACT,GAAOF,GAAgBC,CAAU,CAAC,GAGpC,gBAAAW,EAACC,GAAA,EACE,UAAA;AAAA,MACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKC,EAAO;AAAA,UACZ,UAAApB;AAAA,UACA,eAAeW;AAAA,QAAA;AAAA,MAAA,GAEnB;AAAA,MAED,CAACL,KAAe,gBAAAW,EAACI,GAAA,EAAiB,iBAAiBZ,EAAc,CAAA;AAAA,IACpE,EAAA,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"table-segment-star.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-segment-star/table-segment-star.tsx"],"sourcesContent":["import type { AnimationEventName } from 'lottie-web';\nimport React, { memo, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './table-segment-star-styled';\nimport type { ITableSegmentStarProps } from './table-segment-star-types';\n\nconst settings = {\n  loop: false,\n  render: 'canvas',\n};\n\nconst TableSegmentStar: React.FC<ITableSegmentStarProps> = memo(\n  ({ isStarAchieved, rewardStar, delay = 0 }) => {\n    const [animateStar, setAnimateStar] = useState(false);\n    const [starRewarded, setStarRewarded] = useState(isStarAchieved && !rewardStar);\n\n    const onAnimationFinish = useMemo(() => {\n      return {\n        name: 'complete' as AnimationEventName,\n        callback: () => {\n          setStarRewarded(true);\n          setAnimateStar(false);\n        },\n      };\n    }, []);\n\n    useEffect(() => {\n      let timer: ReturnType<typeof setTimeout>;\n\n      if (isStarAchieved && rewardStar) {\n        timer = setTimeout(() => {\n          setAnimateStar(true);\n        }, 1000 + delay);\n      }\n\n      return () => {\n        if (timer) {\n          clearTimeout(timer);\n        }\n      };\n    }, [delay, isStarAchieved, rewardStar]);\n\n    return (\n      <Styled.StarContainer>\n        {animateStar && (\n          <Styled.LottieContainer>\n            <LottieAnimation\n              src={LOTTIE.TABLE_SEGMENT_STAR}\n              settings={settings}\n              eventListener={onAnimationFinish}\n            />\n          </Styled.LottieContainer>\n        )}\n        {!animateStar && <Styled.TableStar $isStarAchieved={starRewarded} />}\n      </Styled.StarContainer>\n    );\n  },\n);\n\nexport default TableSegmentStar;\n"],"names":["settings","TableSegmentStar","memo","isStarAchieved","rewardStar","delay","animateStar","setAnimateStar","useState","starRewarded","setStarRewarded","onAnimationFinish","useMemo","useEffect","timer","jsxs","Styled.StarContainer","jsx","Styled.LottieContainer","LottieAnimation","LOTTIE","Styled.TableStar"],"mappings":";;;;;AAQA,MAAMA,IAAW;AAAA,EACf,MAAM;AAAA,EACN,QAAQ;AACV,GAEMC,IAAqDC;AAAA,EACzD,CAAC,EAAE,gBAAAC,GAAgB,YAAAC,GAAY,OAAAC,IAAQ,QAAQ;AAC7C,UAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAASL,KAAkB,CAACC,CAAU,GAExEO,IAAoBC,EAAQ,OACzB;AAAA,MACL,MAAM;AAAA,MACN,UAAU,MAAM;AACd,QAAAF,EAAgB,EAAI,GACpBH,EAAe,EAAK;AAAA,MACtB;AAAA,IAAA,IAED,CAAE,CAAA;AAEL,WAAAM,EAAU,MAAM;AACV,UAAAC;AAEJ,aAAIX,KAAkBC,MACpBU,IAAQ,WAAW,MAAM;AACvB,QAAAP,EAAe,EAAI;AAAA,MAAA,GAClB,MAAOF,CAAK,IAGV,MAAM;AACX,QAAIS,KACF,aAAaA,CAAK;AAAA,MACpB;AAAA,IAED,GAAA,CAACT,GAAOF,GAAgBC,CAAU,CAAC,GAGpC,gBAAAW,EAACC,GAAA,EACE,UAAA;AAAA,MACCV,KAAA,gBAAAW,EAACC,GAAA,EACC,UAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKC,EAAO;AAAA,UACZ,UAAApB;AAAA,UACA,eAAeW;AAAA,QAAA;AAAA,MAAA,GAEnB;AAAA,MAED,CAACL,KAAe,gBAAAW,EAACI,GAAA,EAAiB,iBAAiBZ,EAAc,CAAA;AAAA,IACpE,EAAA,CAAA;AAAA,EAEJ;AACF;"}