@cuemath/leap 2.8.33-hg2 → 2.8.33

package/dist/features/circle-games/games/web-view/web-view-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-view-types.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-types.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { TUserTypes } from '../../../ui/types';\nimport type {\n  GameId,\n  PuzzleId,\n  LessonId,\n  MiniGameId,\n  WebViewEvent,\n  ProjectOutcome,\n  ProjectType,\n} from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport type TProject = GameId | PuzzleId | LessonId;\n\nexport interface IPlayer {\n  id: string;\n  username: string;\n  grade?: string;\n  avatar?: IAvatarLayer[] | null;\n  playerType: TUserTypes;\n}\n\ninterface IBaseWebGameProps<T> {\n  projectId: T;\n  variant: string;\n  projectType: ProjectType;\n  joinByRoomId?: string;\n  enableSync?: boolean; // applicable for all except multiplayer games\n  enablePlayerTurnIndicators?: boolean;\n  enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps<GameId> {}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps<PuzzleId> {\n  question: string;\n  askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps<LessonId> {\n  miniGameIdentifier: MiniGameId;\n  sessionId: string;\n  targetQuestions: number;\n}\n\nexport interface IVibrationPattern {\n  pattern: number[] | number;\n}\n\nexport enum IStatsToAwardErrorCode {\n  DEFAULT = 'default',\n  SUCCESS = 'success',\n  FAIL = 'fail',\n}\n\nexport interface IPlayerStats {\n  points: number;\n  accuracy: number;\n  timeSpent: number;\n  streakDays: number;\n  streakStatusToday: 'pending' | 'completed';\n  errorCode: IStatsToAwardErrorCode;\n  outcome: ProjectOutcome;\n  value: string;\n}\n\nexport interface IInfoMessage {\n  message: string;\n  position: 'top' | 'bottom';\n}\n\nexport interface ITrackEvent {\n  eventName: typeof WEBVIEW_ANALYTICS_EVENTS;\n  properties: Record<string, unknown>;\n}\n\nexport interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {\n  baseUrl: string;\n  parentDomain: string;\n  projectDetails: IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n  playerDetails: IPlayer;\n  onBack?: () => void;\n  onGameLoad?: () => void;\n  onGamePlayFinish?: (playerStats: IPlayerStats) => void;\n  handleInfoMessage?: (infoMessage: IInfoMessage) => void;\n}\n\nexport interface IMessageProps {\n  event: `${WebViewEvent}`;\n  payload: IVibrationPattern | IPlayerStats | IInfoMessage | null;\n}\n"],"names":["IStatsToAwardErrorCode"],"mappings":"AAmDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"web-view-types.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view-types.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { TUserTypes } from '../../../ui/types';\nimport type {\n  GameId,\n  PuzzleId,\n  LessonId,\n  MiniGameId,\n  WebViewEvent,\n  ProjectOutcome,\n  ProjectType,\n} from './enums';\nimport type { WEBVIEW_ANALYTICS_EVENTS } from './web-view-analytics-events';\nimport type { IframeHTMLAttributes } from 'react';\n\nexport type TProject = GameId | PuzzleId | LessonId;\n\nexport interface IPlayer {\n  id: string;\n  username: string;\n  grade?: string;\n  avatar?: IAvatarLayer[] | null;\n  playerType: TUserTypes;\n}\n\ninterface IBaseWebGameProps<T> {\n  projectId: T;\n  variant: string;\n  projectType: ProjectType;\n  joinByRoomId?: string;\n  enableSync?: boolean; // applicable for all except multiplayer games\n  enablePlayerTurnIndicators?: boolean;\n  enableCloseButton?: boolean;\n}\n\nexport interface IMultiplayerWebGameProps extends IBaseWebGameProps<GameId> {}\n\nexport interface IPuzzleWebGameProps extends IBaseWebGameProps<PuzzleId> {\n  question: string;\n  askHintPermission?: boolean;\n}\n\nexport interface ILessonWebGameProps extends IBaseWebGameProps<LessonId> {\n  miniGameIdentifier: MiniGameId;\n  sessionId: string;\n  targetQuestions: number;\n}\n\nexport interface IVibrationPattern {\n  pattern: number[] | number;\n}\n\nexport enum IStatsToAwardErrorCode {\n  DEFAULT = 'default',\n  SUCCESS = 'success',\n  FAIL = 'fail',\n}\n\nexport interface IPlayerStats {\n  points: number;\n  accuracy: number;\n  timeSpent: number;\n  streakDays: number;\n  streakStatusToday: 'pending' | 'completed';\n  errorCode: IStatsToAwardErrorCode;\n  outcome: ProjectOutcome;\n  value: string;\n}\n\nexport interface IInfoMessage {\n  message: string;\n  position: 'top' | 'bottom';\n}\n\nexport interface ITrackEvent {\n  eventName: typeof WEBVIEW_ANALYTICS_EVENTS;\n  properties: Record<string, unknown>;\n}\n\nexport interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {\n  baseUrl: string;\n  projectDetails: IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n  playerDetails: IPlayer;\n  onBack?: () => void;\n  onGameLoad?: () => void;\n  onGamePlayFinish?: (playerStats: IPlayerStats) => void;\n  handleInfoMessage?: (infoMessage: IInfoMessage) => void;\n}\n\nexport interface IMessageProps {\n  event: `${WebViewEvent}`;\n  payload: IVibrationPattern | IPlayerStats | IInfoMessage | null;\n}\n"],"names":["IStatsToAwardErrorCode"],"mappings":"AAmDY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/circle-games/games/web-view/web-view.js

@@ -1,10 +1,10 @@
-import { jsx as G } from "react/jsx-runtime";
-import { forwardRef as M, useRef as W, useMemo as _, useCallback as A, useImperativeHandle as H, useEffect as V } from "react";
-import { useUIContext as $ } from "../../../ui/context/context.js";
+import { jsx as L } from "react/jsx-runtime";
+import { forwardRef as G, useRef as M, useMemo as _, useCallback as A, useImperativeHandle as W, useEffect as H } from "react";
+import { useUIContext as V } from "../../../ui/context/context.js";
 import { ALLOWED_ORIGIN as j } from "./constants.js";
 import { ProjectType as I } from "./enums/project-type-enum.js";
 import { WebViewEvent as i } from "./enums/web-view-events-enum.js";
-const q = M((N, C) => {
+const K = G((N, C) => {
   const {
     baseUrl: P,
     projectDetails: v,
@@ -12,12 +12,11 @@ const q = M((N, C) => {
     onGameLoad: a,
     onGamePlayFinish: c,
     handleInfoMessage: f,
-    onBack: p,
-    parentDomain: R,
-    ...b
-  } = N, l = W(null), g = _(() => T, [T]), o = _(() => v, [v]);
+    onBack: l,
+    ...R
+  } = N, p = M(null), g = _(() => T, [T]), o = _(() => v, [v]);
   let u = "";
-  const { onEvent: w } = $();
+  const { onEvent: w } = V();
   o.projectType === I.LESSON && (u = o.miniGameIdentifier);
   const m = A(() => {
     const {
@@ -53,39 +52,38 @@ const q = M((N, C) => {
   }, [o]), d = A(() => {
     var s, t;
     const r = m();
-    (t = (s = l.current) == null ? void 0 : s.contentWindow) == null || t.postMessage(
+    (t = (s = p.current) == null ? void 0 : s.contentWindow) == null || t.postMessage(
       JSON.stringify({
         event: i.GAME_DATA,
         payload: r
       }),
       j
     );
-  }, [m]), D = A(() => {
+  }, [m]), O = A(() => {
     var s, t;
     const r = m();
-    (t = (s = l.current) == null ? void 0 : s.contentWindow) == null || t.postMessage(
+    (t = (s = p.current) == null ? void 0 : s.contentWindow) == null || t.postMessage(
       JSON.stringify({
         event: i.SET_CONFIG,
         payload: {
           user: g,
-          projectConfig: r,
-          parentDomain: R
+          projectConfig: r
         }
       }),
       j
     );
   }, [g, m]);
-  return H(C, () => l.current, []), V(() => {
+  return W(C, () => p.current, []), H(() => {
     const r = (s) => {
-      var O, S;
+      var S, D;
       const t = s.data, E = typeof t == "string" ? JSON.parse(t) : t, { event: e, payload: n = null } = E;
       if (e === i.VIBRATE) {
         const { pattern: y } = n;
-        (S = (O = window.navigator).vibrate) == null || S.call(O, y);
+        (D = (S = window.navigator).vibrate) == null || D.call(S, y);
       }
-      if (e === i.GAME_BACK && (p == null || p()), e === i.HIDE_LOADER && (a == null || a()), e === i.LOAD_DATA_FROM_APP && (d == null || d()), e === i.GET_CONFIG && D(), e === i.UPDATE_STATS && (c == null || c(n)), e === i.SHOW_SNACKBAR && (f == null || f(n)), e === i.TRACK_EVENT) {
-        const { eventName: y, properties: L } = n;
-        w(y, L);
+      if (e === i.GAME_BACK && (l == null || l()), e === i.HIDE_LOADER && (a == null || a()), e === i.LOAD_DATA_FROM_APP && (d == null || d()), e === i.GET_CONFIG && O(), e === i.UPDATE_STATS && (c == null || c(n)), e === i.SHOW_SNACKBAR && (f == null || f(n)), e === i.TRACK_EVENT) {
+        const { eventName: y, properties: b } = n;
+        w(y, b);
       }
     };
     return window.addEventListener("message", r), () => {
@@ -93,23 +91,23 @@ const q = M((N, C) => {
     };
   }, [
     f,
-    p,
+    l,
     c,
     a,
-    D,
+    O,
     d,
     w
-  ]), /* @__PURE__ */ G(
+  ]), /* @__PURE__ */ L(
     "iframe",
     {
-      ...b,
-      ref: l,
+      ...R,
+      ref: p,
       src: `${P}/play-game/${o.projectId}/${o.variant}${u ? `/${u}` : ""}?version=2`,
       allow: "autoplay"
     }
   );
 });
 export {
-  q as WebView
+  K as WebView
 };
 //# sourceMappingURL=web-view.js.map

package/dist/features/circle-games/games/web-view/web-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-view.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view.tsx"],"sourcesContent":["import type {\n  IInfoMessage,\n  ILessonWebGameProps,\n  IMessageProps,\n  IMultiplayerWebGameProps,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n  IVibrationPattern,\n  IWebViewProps,\n} from './web-view-types';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\nimport { ALLOWED_ORIGIN } from './constants';\nimport { ProjectType, WebViewEvent } from './enums';\n\nexport const WebView = forwardRef((props: IWebViewProps, ref: ForwardedRef<HTMLIFrameElement>) => {\n  const {\n    baseUrl,\n    projectDetails,\n    playerDetails,\n    onGameLoad,\n    onGamePlayFinish,\n    handleInfoMessage,\n    onBack,\n    parentDomain,\n    ...rest\n  } = props;\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const memoizedPlayerDetails = useMemo(() => playerDetails, [playerDetails]);\n  const memoizedProjectDetails = useMemo(() => projectDetails, [projectDetails]);\n\n  let miniGameIdentifier = '';\n  const { onEvent: trackEvent } = useUIContext();\n\n  if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n    miniGameIdentifier = (memoizedProjectDetails as ILessonWebGameProps).miniGameIdentifier;\n  }\n\n  const getProjectDetails = useCallback(() => {\n    const {\n      enableCloseButton = true,\n      enablePlayerTurnIndicators = false,\n      enableSync = false,\n      joinByRoomId = '',\n    } = memoizedProjectDetails;\n\n    let payload = {\n      joinByRoomId,\n      enableCloseButton,\n      enablePlayerTurnIndicators,\n      enableSync,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      const details = memoizedProjectDetails as IPuzzleWebGameProps;\n\n      payload = {\n        ...payload,\n        question: details.question,\n        askHintPermission: details.askHintPermission,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      const details = memoizedProjectDetails as ILessonWebGameProps;\n\n      payload = {\n        ...payload,\n        miniGameIdentifier: details.miniGameIdentifier,\n        sessionId: details.sessionId,\n        targetQuestions: details.targetQuestions,\n      } as ILessonWebGameProps;\n    }\n\n    return payload;\n  }, [memoizedProjectDetails]);\n\n  const sendGamesData = useCallback(() => {\n    const payload = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.GAME_DATA,\n        payload,\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [getProjectDetails]);\n\n  const setConfig = useCallback(() => {\n    const projectConfig = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.SET_CONFIG,\n        payload: {\n          user: memoizedPlayerDetails,\n          projectConfig,\n          parentDomain,\n        },\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [memoizedPlayerDetails, getProjectDetails]);\n\n  useImperativeHandle(ref, () => webViewRef.current as HTMLIFrameElement, []);\n\n  useEffect(() => {\n    const handleMessage = (e: MessageEvent) => {\n      const data: string = e.data;\n      const parsedData = typeof data === 'string' ? JSON.parse(data) : (data as IMessageProps);\n\n      const { event, payload = null } = parsedData;\n\n      if (event === WebViewEvent.VIBRATE) {\n        const { pattern } = payload as IVibrationPattern;\n\n        window.navigator.vibrate?.(pattern);\n      }\n\n      if (event === WebViewEvent.GAME_BACK) {\n        onBack?.();\n      }\n\n      if (event === WebViewEvent.HIDE_LOADER) {\n        onGameLoad?.();\n      }\n\n      if (event === WebViewEvent.LOAD_DATA_FROM_APP) {\n        sendGamesData?.();\n      }\n\n      if (event === WebViewEvent.GET_CONFIG) {\n        setConfig();\n      }\n\n      if (event === WebViewEvent.UPDATE_STATS) {\n        onGamePlayFinish?.(payload as IPlayerStats);\n      }\n\n      if (event === WebViewEvent.SHOW_SNACKBAR) {\n        handleInfoMessage?.(payload as IInfoMessage);\n      }\n\n      if (event === WebViewEvent.TRACK_EVENT) {\n        const { eventName, properties } = payload;\n\n        trackEvent(eventName, properties);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    return () => {\n      window.removeEventListener('message', handleMessage);\n    };\n  }, [\n    handleInfoMessage,\n    onBack,\n    onGamePlayFinish,\n    onGameLoad,\n    setConfig,\n    sendGamesData,\n    trackEvent,\n  ]);\n\n  return (\n    <iframe\n      {...rest}\n      ref={webViewRef}\n      src={`${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${\n        memoizedProjectDetails.variant\n      }${miniGameIdentifier ? `/${miniGameIdentifier}` : ''}?version=2`}\n      allow=\"autoplay\"\n    />\n  );\n});\n"],"names":["WebView","forwardRef","props","ref","baseUrl","projectDetails","playerDetails","onGameLoad","onGamePlayFinish","handleInfoMessage","onBack","parentDomain","rest","webViewRef","useRef","memoizedPlayerDetails","useMemo","memoizedProjectDetails","miniGameIdentifier","trackEvent","useUIContext","ProjectType","getProjectDetails","useCallback","enableCloseButton","enablePlayerTurnIndicators","enableSync","joinByRoomId","payload","details","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","e","data","parsedData","event","pattern","eventName","properties","jsx"],"mappings":";;;;;;AAkBO,MAAMA,IAAUC,EAAW,CAACC,GAAsBC,MAAyC;AAC1F,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAV,GACEW,IAAaC,EAA0B,IAAI,GAC3CC,IAAwBC,EAAQ,MAAMV,GAAe,CAACA,CAAa,CAAC,GACpEW,IAAyBD,EAAQ,MAAMX,GAAgB,CAACA,CAAc,CAAC;AAE7E,MAAIa,IAAqB;AACzB,QAAM,EAAE,SAASC,EAAW,IAAIC,EAAa;AAEzC,EAAAH,EAAuB,gBAAgBI,EAAY,WACrDH,IAAsBD,EAA+C;AAGjE,QAAAK,IAAoBC,EAAY,MAAM;AACpC,UAAA;AAAA,MACJ,mBAAAC,IAAoB;AAAA,MACpB,4BAAAC,IAA6B;AAAA,MAC7B,YAAAC,IAAa;AAAA,MACb,cAAAC,IAAe;AAAA,IACb,IAAAV;AAEJ,QAAIW,IAAU;AAAA,MACZ,cAAAD;AAAA,MACA,mBAAAH;AAAA,MACA,4BAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAGE,QAAAT,EAAuB,gBAAgBI,EAAY,QAAQ;AAC7D,YAAMQ,IAAUZ;AAEN,MAAAW,IAAA;AAAA,QACR,GAAGA;AAAA,QACH,UAAUC,EAAQ;AAAA,QAClB,mBAAmBA,EAAQ;AAAA,MAAA;AAAA,IAE/B;AAEI,QAAAZ,EAAuB,gBAAgBI,EAAY,QAAQ;AAC7D,YAAMQ,IAAUZ;AAEN,MAAAW,IAAA;AAAA,QACR,GAAGA;AAAA,QACH,oBAAoBC,EAAQ;AAAA,QAC5B,WAAWA,EAAQ;AAAA,QACnB,iBAAiBA,EAAQ;AAAA,MAAA;AAAA,IAE7B;AAEO,WAAAD;AAAA,EAAA,GACN,CAACX,CAAsB,CAAC,GAErBa,IAAgBP,EAAY,MAAM;;AACtC,UAAMK,IAAUN;AAEhB,KAAAS,KAAAC,IAAAnB,EAAW,YAAX,gBAAAmB,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAAL;AAAA,MAAA,CACD;AAAA,MACDM;AAAA;AAAA,EACF,GACC,CAACZ,CAAiB,CAAC,GAEhBa,IAAYZ,EAAY,MAAM;;AAClC,UAAMa,IAAgBd;AAEtB,KAAAS,KAAAC,IAAAnB,EAAW,YAAX,gBAAAmB,EAAoB,kBAApB,QAAAD,EAAmC;AAAA,MACjC,KAAK,UAAU;AAAA,QACb,OAAOE,EAAa;AAAA,QACpB,SAAS;AAAA,UACP,MAAMlB;AAAA,UACN,eAAAqB;AAAA,UACA,cAAAzB;AAAA,QACF;AAAA,MAAA,CACD;AAAA,MACDuB;AAAA;AAAA,EACF,GACC,CAACnB,GAAuBO,CAAiB,CAAC;AAE7C,SAAAe,EAAoBlC,GAAK,MAAMU,EAAW,SAA8B,CAAE,CAAA,GAE1EyB,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACC,MAAoB;;AACzC,YAAMC,IAAeD,EAAE,MACjBE,IAAa,OAAOD,KAAS,WAAW,KAAK,MAAMA,CAAI,IAAKA,GAE5D,EAAE,OAAAE,GAAO,SAAAf,IAAU,KAAA,IAASc;AAE9B,UAAAC,MAAUV,EAAa,SAAS;AAC5B,cAAA,EAAE,SAAAW,EAAY,IAAAhB;AAEb,SAAAG,KAAAC,IAAA,OAAA,WAAU,YAAV,QAAAD,EAAA,KAAAC,GAAoBY;AAAA,MAC7B;AA0BI,UAxBAD,MAAUV,EAAa,cAChBvB,KAAA,QAAAA,MAGPiC,MAAUV,EAAa,gBACZ1B,KAAA,QAAAA,MAGXoC,MAAUV,EAAa,uBACTH,KAAA,QAAAA,MAGda,MAAUV,EAAa,cACfE,KAGRQ,MAAUV,EAAa,iBACzBzB,KAAA,QAAAA,EAAmBoB,KAGjBe,MAAUV,EAAa,kBACzBxB,KAAA,QAAAA,EAAoBmB,KAGlBe,MAAUV,EAAa,aAAa;AAChC,cAAA,EAAE,WAAAY,GAAW,YAAAC,EAAe,IAAAlB;AAElC,QAAAT,EAAW0B,GAAWC,CAAU;AAAA,MAClC;AAAA,IAAA;AAGK,kBAAA,iBAAiB,WAAWP,CAAa,GAEzC,MAAM;AACJ,aAAA,oBAAoB,WAAWA,CAAa;AAAA,IAAA;AAAA,EACrD,GACC;AAAA,IACD9B;AAAA,IACAC;AAAA,IACAF;AAAA,IACAD;AAAA,IACA4B;AAAA,IACAL;AAAA,IACAX;AAAA,EAAA,CACD,GAGC,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGnC;AAAA,MACJ,KAAKC;AAAA,MACL,KAAK,GAAGT,CAAO,cAAca,EAAuB,SAAS,IAC3DA,EAAuB,OACzB,GAAGC,IAAqB,IAAIA,CAAkB,KAAK,EAAE;AAAA,MACrD,OAAM;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;"}
+{"version":3,"file":"web-view.js","sources":["../../../../../src/features/circle-games/games/web-view/web-view.tsx"],"sourcesContent":["import type {\n  IInfoMessage,\n  ILessonWebGameProps,\n  IMessageProps,\n  IMultiplayerWebGameProps,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n  IVibrationPattern,\n  IWebViewProps,\n} from './web-view-types';\nimport type { ForwardedRef } from 'react';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\nimport { ALLOWED_ORIGIN } from './constants';\nimport { ProjectType, WebViewEvent } from './enums';\n\nexport const WebView = forwardRef((props: IWebViewProps, ref: ForwardedRef<HTMLIFrameElement>) => {\n  const {\n    baseUrl,\n    projectDetails,\n    playerDetails,\n    onGameLoad,\n    onGamePlayFinish,\n    handleInfoMessage,\n    onBack,\n    ...rest\n  } = props;\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const memoizedPlayerDetails = useMemo(() => playerDetails, [playerDetails]);\n  const memoizedProjectDetails = useMemo(() => projectDetails, [projectDetails]);\n\n  let miniGameIdentifier = '';\n  const { onEvent: trackEvent } = useUIContext();\n\n  if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n    miniGameIdentifier = (memoizedProjectDetails as ILessonWebGameProps).miniGameIdentifier;\n  }\n\n  const getProjectDetails = useCallback(() => {\n    const {\n      enableCloseButton = true,\n      enablePlayerTurnIndicators = false,\n      enableSync = false,\n      joinByRoomId = '',\n    } = memoizedProjectDetails;\n\n    let payload = {\n      joinByRoomId,\n      enableCloseButton,\n      enablePlayerTurnIndicators,\n      enableSync,\n    } as IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;\n\n    if (memoizedProjectDetails.projectType === ProjectType.PUZZLE) {\n      const details = memoizedProjectDetails as IPuzzleWebGameProps;\n\n      payload = {\n        ...payload,\n        question: details.question,\n        askHintPermission: details.askHintPermission,\n      } as IPuzzleWebGameProps;\n    }\n\n    if (memoizedProjectDetails.projectType === ProjectType.LESSON) {\n      const details = memoizedProjectDetails as ILessonWebGameProps;\n\n      payload = {\n        ...payload,\n        miniGameIdentifier: details.miniGameIdentifier,\n        sessionId: details.sessionId,\n        targetQuestions: details.targetQuestions,\n      } as ILessonWebGameProps;\n    }\n\n    return payload;\n  }, [memoizedProjectDetails]);\n\n  const sendGamesData = useCallback(() => {\n    const payload = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.GAME_DATA,\n        payload,\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [getProjectDetails]);\n\n  const setConfig = useCallback(() => {\n    const projectConfig = getProjectDetails();\n\n    webViewRef.current?.contentWindow?.postMessage(\n      JSON.stringify({\n        event: WebViewEvent.SET_CONFIG,\n        payload: {\n          user: memoizedPlayerDetails,\n          projectConfig,\n        },\n      }),\n      ALLOWED_ORIGIN,\n    );\n  }, [memoizedPlayerDetails, getProjectDetails]);\n\n  useImperativeHandle(ref, () => webViewRef.current as HTMLIFrameElement, []);\n\n  useEffect(() => {\n    const handleMessage = (e: MessageEvent) => {\n      const data: string = e.data;\n      const parsedData = typeof data === 'string' ? JSON.parse(data) : (data as IMessageProps);\n\n      const { event, payload = null } = parsedData;\n\n      if (event === WebViewEvent.VIBRATE) {\n        const { pattern } = payload as IVibrationPattern;\n\n        window.navigator.vibrate?.(pattern);\n      }\n\n      if (event === WebViewEvent.GAME_BACK) {\n        onBack?.();\n      }\n\n      if (event === WebViewEvent.HIDE_LOADER) {\n        onGameLoad?.();\n      }\n\n      if (event === WebViewEvent.LOAD_DATA_FROM_APP) {\n        sendGamesData?.();\n      }\n\n      if (event === WebViewEvent.GET_CONFIG) {\n        setConfig();\n      }\n\n      if (event === WebViewEvent.UPDATE_STATS) {\n        onGamePlayFinish?.(payload as IPlayerStats);\n      }\n\n      if (event === WebViewEvent.SHOW_SNACKBAR) {\n        handleInfoMessage?.(payload as IInfoMessage);\n      }\n\n      if (event === WebViewEvent.TRACK_EVENT) {\n        const { eventName, properties } = payload;\n\n        trackEvent(eventName, properties);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    return () => {\n      window.removeEventListener('message', handleMessage);\n    };\n  }, [\n    handleInfoMessage,\n    onBack,\n    onGamePlayFinish,\n    onGameLoad,\n    setConfig,\n    sendGamesData,\n    trackEvent,\n  ]);\n\n  return (\n    <iframe\n      {...rest}\n      ref={webViewRef}\n      src={`${baseUrl}/play-game/${memoizedProjectDetails.projectId}/${\n        memoizedProjectDetails.variant\n      }${miniGameIdentifier ? `/${miniGameIdentifier}` : ''}?version=2`}\n      allow=\"autoplay\"\n    />\n  );\n});\n"],"names":["WebView","forwardRef","props","ref","baseUrl","projectDetails","playerDetails","onGameLoad","onGamePlayFinish","handleInfoMessage","onBack","rest","webViewRef","useRef","memoizedPlayerDetails","useMemo","memoizedProjectDetails","miniGameIdentifier","trackEvent","useUIContext","ProjectType","getProjectDetails","useCallback","enableCloseButton","enablePlayerTurnIndicators","enableSync","joinByRoomId","payload","details","sendGamesData","_b","_a","WebViewEvent","ALLOWED_ORIGIN","setConfig","projectConfig","useImperativeHandle","useEffect","handleMessage","e","data","parsedData","event","pattern","eventName","properties","jsx"],"mappings":"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"}

package/dist/features/trial-session/comps/trial-circle-game/trial-circle-game.js

@@ -3,7 +3,7 @@ import { memo as Q, useRef as X, useState as ee, useMemo as h, useCallback as m,
 import { getTimeStrInFormatHMS as te } from "../../../../helpers/date-time.js";
 import { useWebViewGames as ae } from "../../../circle-games/games/web-view/hooks/use-webview-games.js";
 import { WebView as ie } from "../../../circle-games/games/web-view/web-view.js";
-import v from "../../../ui/layout/flex-view.js";
+import b from "../../../ui/layout/flex-view.js";
 import E from "../../../ui/separator/separator.js";
 import d from "../../../ui/text/text.js";
 import { useTrialSessionContext as oe } from "../../context/use-trial-session-context.js";
@@ -17,7 +17,7 @@ const me = {
   [y.CIRCLE_PUZZLE]: e.PUZZLE,
   [y.CIRCLE_SKILL]: e.LESSON
 }, Pe = Q(() => {
-  const { slideConfig: b, trialGameUrl: j, circleGames: A, formData: k, handleInfoMessage: $, updateSlideConfig: o } = oe(), {
+  const { slideConfig: w, trialGameUrl: j, circleGames: A, formData: k, handleInfoMessage: $, updateSlideConfig: o } = oe(), {
     showCircleGameScreen: g = !0,
     isCircleGamePlayed: u = !1,
     isCirclePuzzleSolved: c = !1,
@@ -25,11 +25,11 @@ const me = {
     accuracyStr: C = "",
     totalTimeTaken: G = 0,
     matchmakingId: f
-  } = k || {}, I = X(null), { playGame: P } = ae({ webViewRef: I }), [T, L] = ee(!0), { header: U, id: M } = b, r = me[M], { circleConfig: O, playerDetails: W } = A, { games: l, puzzles: n, lessons: a } = O ?? {}, _ = h(() => ({
+  } = k || {}, I = X(null), { playGame: P } = ae({ webViewRef: I }), [T, L] = ee(!0), { header: U, id: M } = w, r = me[M], { circleConfig: O, playerDetails: W } = A, { games: l, puzzles: n, lessons: a } = O ?? {}, _ = h(() => ({
     [e.GAME]: u,
     [e.PUZZLE]: c,
     [e.LESSON]: p
-  }), [u, c, p]), w = h(() => {
+  }), [u, c, p]), Z = h(() => {
     const i = {
       [e.GAME]: u ? l.game_card : l.tutorial,
       [e.PUZZLE]: c ? n.game_card : n.tutorial,
@@ -47,12 +47,12 @@ const me = {
     u,
     c,
     p
-  ]), x = h(() => r === e.PUZZLE && c ? "You've solved it!" : "", [r, c]), { circle_username: D, userId: H, grade: N, user_avatar: R, playerType: Z } = W ?? {}, z = {
+  ]), x = h(() => r === e.PUZZLE && c ? "You've solved it!" : "", [r, c]), { circle_username: D, userId: H, grade: N, user_avatar: R, playerType: v } = W ?? {}, z = {
     id: H,
     username: D,
     grade: N,
     avatar: R,
-    playerType: Z
+    playerType: v
   }, F = h(() => {
     const i = {
       joinByRoomId: f,
@@ -107,13 +107,13 @@ const me = {
     },
     [o, r]
   ), J = m(() => C && G ? /* @__PURE__ */ s(K, { children: [
-    /* @__PURE__ */ s(v, { $flexDirection: "row", children: [
+    /* @__PURE__ */ s(b, { $flexDirection: "row", children: [
       /* @__PURE__ */ t(d, { $renderAs: "ab2", $color: "WHITE", children: "Finished in" }),
       /* @__PURE__ */ t(E, { width: 5 }),
       /* @__PURE__ */ t(d, { $renderAs: "ab2-bold", $color: "WHITE", children: te(G) })
     ] }),
     /* @__PURE__ */ t(E, { height: 20 }),
-    /* @__PURE__ */ s(v, { $flexDirection: "row", children: [
+    /* @__PURE__ */ s(b, { $flexDirection: "row", children: [
       /* @__PURE__ */ t(d, { $renderAs: "ab2", $color: "WHITE", children: "Accuracy:" }),
       /* @__PURE__ */ t(E, { width: 5 }),
       /* @__PURE__ */ t(d, { $renderAs: "ab2-bold", $color: "WHITE", children: C })
@@ -128,10 +128,10 @@ const me = {
       g && /* @__PURE__ */ t(se, { children: /* @__PURE__ */ t(
         ne,
         {
-          assetUrl: w,
-          assetUrlType: w.endsWith("mp4") ? "video" : "lottie",
+          assetUrl: Z,
+          assetUrlType: Z.endsWith("mp4") ? "video" : "lottie",
           descriptionHeader: x,
-          playerType: Z,
+          playerType: v,
           isLoading: T,
           isGamePlayed: (r && _[r]) ?? !1,
           onPlay: q,
@@ -151,8 +151,7 @@ const me = {
           onGameLoad: B,
           onBack: V,
           handleInfoMessage: $,
-          onGamePlayFinish: Y,
-          parentDomain: window.location.origin
+          onGamePlayFinish: Y
         },
         f
       )

package/dist/features/trial-session/comps/trial-circle-game/trial-circle-game.js.map

@@ -1 +1 @@
-{"version":3,"file":"trial-circle-game.js","sources":["../../../../../src/features/trial-session/comps/trial-circle-game/trial-circle-game.tsx"],"sourcesContent":["import type { GameId, LessonId, PuzzleId } from '../../../circle-games/games/web-view/enums';\nimport type {\n  ILessonWebGameProps,\n  IMultiplayerWebGameProps,\n  IPlayer,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n} from '../../../circle-games/games/web-view/web-view-types';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { getTimeStrInFormatHMS } from '../../../../helpers/date-time';\nimport { ProjectType } from '../../../circle-games/games/web-view/enums';\nimport { useWebViewGames } from '../../../circle-games/games/web-view/hooks/use-webview-games';\nimport { WebView } from '../../../circle-games/games/web-view/web-view';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { TrialPageId } from '../../trial-session-constants';\nimport { TrialCircleGameLaunchScreen } from './trial-circle-game-launch-screen/trial-circle-game-launch-screen';\nimport * as Styled from './trial-circle-game-styled';\n\nconst PROJECT_TYPE_MAP: Partial<Record<TrialPageId, ProjectType>> = {\n  [TrialPageId.CIRCLE_GAME]: ProjectType.GAME,\n  [TrialPageId.CIRCLE_PUZZLE]: ProjectType.PUZZLE,\n  [TrialPageId.CIRCLE_SKILL]: ProjectType.LESSON,\n};\n\nconst TrialCircleGame = memo(() => {\n  const { slideConfig, trialGameUrl, circleGames, formData, handleInfoMessage, updateSlideConfig } =\n    useTrialSessionContext();\n  const {\n    showCircleGameScreen = true,\n    isCircleGamePlayed = false,\n    isCirclePuzzleSolved = false,\n    isCircleSkillCompleted = false,\n    accuracyStr = '',\n    totalTimeTaken = 0,\n    matchmakingId,\n  } = formData || {};\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const { playGame } = useWebViewGames({ webViewRef });\n  const [isLoading, setIsLoading] = useState(true);\n\n  const { header, id } = slideConfig;\n  const projectType = PROJECT_TYPE_MAP[id];\n  const { circleConfig, playerDetails } = circleGames;\n  const { games, puzzles, lessons } = circleConfig ?? {};\n\n  const isPlayed = useMemo(() => {\n    const playedStats: Record<ProjectType, boolean> = {\n      [ProjectType.GAME]: isCircleGamePlayed,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved,\n      [ProjectType.LESSON]: isCircleSkillCompleted,\n    };\n\n    return playedStats;\n  }, [isCircleGamePlayed, isCirclePuzzleSolved, isCircleSkillCompleted]);\n\n  const assetUrl = useMemo(() => {\n    const url: Record<ProjectType, string> = {\n      [ProjectType.GAME]: isCircleGamePlayed ? games.game_card : games.tutorial,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved ? puzzles.game_card : puzzles.tutorial,\n      [ProjectType.LESSON]: isCircleSkillCompleted ? lessons.game_card : lessons.tutorial,\n    };\n\n    return projectType ? url[projectType] : '';\n  }, [\n    projectType,\n    games.game_card,\n    games.tutorial,\n    puzzles.game_card,\n    puzzles.tutorial,\n    lessons.game_card,\n    lessons.tutorial,\n    isCircleGamePlayed,\n    isCirclePuzzleSolved,\n    isCircleSkillCompleted,\n  ]);\n\n  const descriptionHeader = useMemo(() => {\n    if (projectType === ProjectType.PUZZLE && isCirclePuzzleSolved) {\n      return \"You've solved it!\";\n    }\n\n    return '';\n  }, [projectType, isCirclePuzzleSolved]);\n\n  const { circle_username, userId, grade, user_avatar, playerType } = playerDetails ?? {};\n\n  const playerData: IPlayer = {\n    id: userId,\n    username: circle_username,\n    grade: grade,\n    avatar: user_avatar,\n    playerType,\n  };\n\n  const projectDetails = useMemo(() => {\n    const commonConfig = {\n      joinByRoomId: matchmakingId,\n      enableCloseButton: false,\n      enablePlayerTurnIndicators: true,\n      enableSync: true,\n    };\n\n    if (projectType === ProjectType.GAME) {\n      return {\n        ...commonConfig,\n        projectId: games.project_id as GameId,\n        variant: games.variant,\n        projectType: ProjectType.GAME,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (projectType === ProjectType.PUZZLE) {\n      return {\n        ...commonConfig,\n        projectId: puzzles.project_id as PuzzleId,\n        variant: puzzles.variant,\n        question: puzzles.question,\n        askHintPermission: false,\n        projectType: ProjectType.PUZZLE,\n      } as IPuzzleWebGameProps;\n    }\n\n    return {\n      ...commonConfig,\n      projectId: lessons.project_id as LessonId,\n      variant: lessons.variant,\n      miniGameIdentifier: lessons.mini_game_identifier,\n      sessionId: lessons.session_id,\n      targetQuestions: lessons.target_questions,\n      projectType: ProjectType.LESSON,\n    } as ILessonWebGameProps;\n\n    // return commonConfig;\n  }, [games, puzzles, lessons, projectType, matchmakingId]);\n\n  const onGameLoad = useCallback(() => {\n    setIsLoading(false);\n  }, []);\n\n  const handleBack = useCallback(() => {\n    setIsLoading(true);\n    if (\n      projectType === ProjectType.GAME ||\n      projectType === ProjectType.PUZZLE ||\n      projectType === ProjectType.LESSON\n    ) {\n      updateSlideConfig({ showCircleGameScreen: true, matchmakingId: uuidv4() });\n    }\n  }, [projectType, updateSlideConfig]);\n\n  const onPlay = useCallback(() => {\n    updateSlideConfig({ showCircleGameScreen: false, accuracyStr: '', totalTimeTaken: 0 });\n  }, [updateSlideConfig]);\n\n  const handleGameFinish = useCallback(\n    (playerStats: IPlayerStats) => {\n      setIsLoading(true);\n      if (projectType === ProjectType.LESSON) {\n        updateSlideConfig({\n          accuracyStr: playerStats.value,\n          totalTimeTaken: playerStats.timeSpent,\n          isCircleSkillCompleted: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.GAME) {\n        updateSlideConfig({\n          isCircleGamePlayed: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.PUZZLE) {\n        updateSlideConfig({\n          isCirclePuzzleSolved: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      }\n    },\n    [updateSlideConfig, projectType],\n  );\n\n  const getCustEle = useCallback(() => {\n    if (accuracyStr && totalTimeTaken) {\n      return (\n        <>\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Finished in\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {getTimeStrInFormatHMS(totalTimeTaken)}\n            </Text>\n          </FlexView>\n          <Separator height={20} />\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Accuracy:\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {accuracyStr}\n            </Text>\n          </FlexView>\n        </>\n      );\n    }\n\n    return null;\n  }, [accuracyStr, totalTimeTaken]);\n\n  useEffect(() => {\n    if (!isLoading && !showCircleGameScreen) {\n      playGame();\n    }\n  }, [showCircleGameScreen, playGame, isLoading]);\n\n  return (\n    <Styled.GameContainer>\n      <Separator height={16} />\n      <Text $renderAs=\"ah3-bold\" $color=\"WHITE_T_87\" $align=\"center\" $marginBottom={16}>\n        {header}\n      </Text>\n      <Styled.GameWrapper>\n        {showCircleGameScreen && (\n          <Styled.GameLaunchOverlay>\n            <TrialCircleGameLaunchScreen\n              assetUrl={assetUrl}\n              assetUrlType={assetUrl.endsWith('mp4') ? 'video' : 'lottie'}\n              descriptionHeader={descriptionHeader}\n              playerType={playerType}\n              isLoading={isLoading}\n              isGamePlayed={(projectType && isPlayed[projectType]) ?? false}\n              onPlay={onPlay}\n              custEle={projectType === ProjectType.LESSON ? getCustEle() : undefined}\n              celebrationText={projectType && isPlayed[projectType] ? 'WELL DONE!' : ''}\n            />\n          </Styled.GameLaunchOverlay>\n        )}\n        {matchmakingId && (\n          <WebView\n            key={matchmakingId}\n            ref={webViewRef}\n            height=\"100%\"\n            width=\"100%\"\n            baseUrl={trialGameUrl}\n            playerDetails={playerData}\n            projectDetails={projectDetails}\n            onGameLoad={onGameLoad}\n            onBack={handleBack}\n            handleInfoMessage={handleInfoMessage}\n            onGamePlayFinish={handleGameFinish}\n            parentDomain={window.location.origin}\n          />\n        )}\n      </Styled.GameWrapper>\n    </Styled.GameContainer>\n  );\n});\n\nexport default TrialCircleGame;\n"],"names":["PROJECT_TYPE_MAP","TrialPageId","ProjectType","TrialCircleGame","memo","slideConfig","trialGameUrl","circleGames","formData","handleInfoMessage","updateSlideConfig","useTrialSessionContext","showCircleGameScreen","isCircleGamePlayed","isCirclePuzzleSolved","isCircleSkillCompleted","accuracyStr","totalTimeTaken","matchmakingId","webViewRef","useRef","playGame","useWebViewGames","isLoading","setIsLoading","useState","header","id","projectType","circleConfig","playerDetails","games","puzzles","lessons","isPlayed","useMemo","assetUrl","url","descriptionHeader","circle_username","userId","grade","user_avatar","playerType","playerData","projectDetails","commonConfig","onGameLoad","useCallback","handleBack","uuidv4","onPlay","handleGameFinish","playerStats","getCustEle","jsxs","Fragment","FlexView","jsx","Text","Separator","getTimeStrInFormatHMS","useEffect","Styled.GameContainer","Styled.GameWrapper","Styled.GameLaunchOverlay","TrialCircleGameLaunchScreen","WebView"],"mappings":"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"}
+{"version":3,"file":"trial-circle-game.js","sources":["../../../../../src/features/trial-session/comps/trial-circle-game/trial-circle-game.tsx"],"sourcesContent":["import type { GameId, LessonId, PuzzleId } from '../../../circle-games/games/web-view/enums';\nimport type {\n  ILessonWebGameProps,\n  IMultiplayerWebGameProps,\n  IPlayer,\n  IPlayerStats,\n  IPuzzleWebGameProps,\n} from '../../../circle-games/games/web-view/web-view-types';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { getTimeStrInFormatHMS } from '../../../../helpers/date-time';\nimport { ProjectType } from '../../../circle-games/games/web-view/enums';\nimport { useWebViewGames } from '../../../circle-games/games/web-view/hooks/use-webview-games';\nimport { WebView } from '../../../circle-games/games/web-view/web-view';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { TrialPageId } from '../../trial-session-constants';\nimport { TrialCircleGameLaunchScreen } from './trial-circle-game-launch-screen/trial-circle-game-launch-screen';\nimport * as Styled from './trial-circle-game-styled';\n\nconst PROJECT_TYPE_MAP: Partial<Record<TrialPageId, ProjectType>> = {\n  [TrialPageId.CIRCLE_GAME]: ProjectType.GAME,\n  [TrialPageId.CIRCLE_PUZZLE]: ProjectType.PUZZLE,\n  [TrialPageId.CIRCLE_SKILL]: ProjectType.LESSON,\n};\n\nconst TrialCircleGame = memo(() => {\n  const { slideConfig, trialGameUrl, circleGames, formData, handleInfoMessage, updateSlideConfig } =\n    useTrialSessionContext();\n  const {\n    showCircleGameScreen = true,\n    isCircleGamePlayed = false,\n    isCirclePuzzleSolved = false,\n    isCircleSkillCompleted = false,\n    accuracyStr = '',\n    totalTimeTaken = 0,\n    matchmakingId,\n  } = formData || {};\n  const webViewRef = useRef<HTMLIFrameElement>(null);\n  const { playGame } = useWebViewGames({ webViewRef });\n  const [isLoading, setIsLoading] = useState(true);\n\n  const { header, id } = slideConfig;\n  const projectType = PROJECT_TYPE_MAP[id];\n  const { circleConfig, playerDetails } = circleGames;\n  const { games, puzzles, lessons } = circleConfig ?? {};\n\n  const isPlayed = useMemo(() => {\n    const playedStats: Record<ProjectType, boolean> = {\n      [ProjectType.GAME]: isCircleGamePlayed,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved,\n      [ProjectType.LESSON]: isCircleSkillCompleted,\n    };\n\n    return playedStats;\n  }, [isCircleGamePlayed, isCirclePuzzleSolved, isCircleSkillCompleted]);\n\n  const assetUrl = useMemo(() => {\n    const url: Record<ProjectType, string> = {\n      [ProjectType.GAME]: isCircleGamePlayed ? games.game_card : games.tutorial,\n      [ProjectType.PUZZLE]: isCirclePuzzleSolved ? puzzles.game_card : puzzles.tutorial,\n      [ProjectType.LESSON]: isCircleSkillCompleted ? lessons.game_card : lessons.tutorial,\n    };\n\n    return projectType ? url[projectType] : '';\n  }, [\n    projectType,\n    games.game_card,\n    games.tutorial,\n    puzzles.game_card,\n    puzzles.tutorial,\n    lessons.game_card,\n    lessons.tutorial,\n    isCircleGamePlayed,\n    isCirclePuzzleSolved,\n    isCircleSkillCompleted,\n  ]);\n\n  const descriptionHeader = useMemo(() => {\n    if (projectType === ProjectType.PUZZLE && isCirclePuzzleSolved) {\n      return \"You've solved it!\";\n    }\n\n    return '';\n  }, [projectType, isCirclePuzzleSolved]);\n\n  const { circle_username, userId, grade, user_avatar, playerType } = playerDetails ?? {};\n\n  const playerData: IPlayer = {\n    id: userId,\n    username: circle_username,\n    grade: grade,\n    avatar: user_avatar,\n    playerType,\n  };\n\n  const projectDetails = useMemo(() => {\n    const commonConfig = {\n      joinByRoomId: matchmakingId,\n      enableCloseButton: false,\n      enablePlayerTurnIndicators: true,\n      enableSync: true,\n    };\n\n    if (projectType === ProjectType.GAME) {\n      return {\n        ...commonConfig,\n        projectId: games.project_id as GameId,\n        variant: games.variant,\n        projectType: ProjectType.GAME,\n      } as IMultiplayerWebGameProps;\n    }\n\n    if (projectType === ProjectType.PUZZLE) {\n      return {\n        ...commonConfig,\n        projectId: puzzles.project_id as PuzzleId,\n        variant: puzzles.variant,\n        question: puzzles.question,\n        askHintPermission: false,\n        projectType: ProjectType.PUZZLE,\n      } as IPuzzleWebGameProps;\n    }\n\n    return {\n      ...commonConfig,\n      projectId: lessons.project_id as LessonId,\n      variant: lessons.variant,\n      miniGameIdentifier: lessons.mini_game_identifier,\n      sessionId: lessons.session_id,\n      targetQuestions: lessons.target_questions,\n      projectType: ProjectType.LESSON,\n    } as ILessonWebGameProps;\n\n    // return commonConfig;\n  }, [games, puzzles, lessons, projectType, matchmakingId]);\n\n  const onGameLoad = useCallback(() => {\n    setIsLoading(false);\n  }, []);\n\n  const handleBack = useCallback(() => {\n    setIsLoading(true);\n    if (\n      projectType === ProjectType.GAME ||\n      projectType === ProjectType.PUZZLE ||\n      projectType === ProjectType.LESSON\n    ) {\n      updateSlideConfig({ showCircleGameScreen: true, matchmakingId: uuidv4() });\n    }\n  }, [projectType, updateSlideConfig]);\n\n  const onPlay = useCallback(() => {\n    updateSlideConfig({ showCircleGameScreen: false, accuracyStr: '', totalTimeTaken: 0 });\n  }, [updateSlideConfig]);\n\n  const handleGameFinish = useCallback(\n    (playerStats: IPlayerStats) => {\n      setIsLoading(true);\n      if (projectType === ProjectType.LESSON) {\n        updateSlideConfig({\n          accuracyStr: playerStats.value,\n          totalTimeTaken: playerStats.timeSpent,\n          isCircleSkillCompleted: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.GAME) {\n        updateSlideConfig({\n          isCircleGamePlayed: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      } else if (projectType === ProjectType.PUZZLE) {\n        updateSlideConfig({\n          isCirclePuzzleSolved: true,\n          showCircleGameScreen: true,\n          matchmakingId: uuidv4(),\n        });\n      }\n    },\n    [updateSlideConfig, projectType],\n  );\n\n  const getCustEle = useCallback(() => {\n    if (accuracyStr && totalTimeTaken) {\n      return (\n        <>\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Finished in\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {getTimeStrInFormatHMS(totalTimeTaken)}\n            </Text>\n          </FlexView>\n          <Separator height={20} />\n          <FlexView $flexDirection=\"row\">\n            <Text $renderAs=\"ab2\" $color=\"WHITE\">\n              Accuracy:\n            </Text>\n            <Separator width={5} />\n            <Text $renderAs=\"ab2-bold\" $color=\"WHITE\">\n              {accuracyStr}\n            </Text>\n          </FlexView>\n        </>\n      );\n    }\n\n    return null;\n  }, [accuracyStr, totalTimeTaken]);\n\n  useEffect(() => {\n    if (!isLoading && !showCircleGameScreen) {\n      playGame();\n    }\n  }, [showCircleGameScreen, playGame, isLoading]);\n\n  return (\n    <Styled.GameContainer>\n      <Separator height={16} />\n      <Text $renderAs=\"ah3-bold\" $color=\"WHITE_T_87\" $align=\"center\" $marginBottom={16}>\n        {header}\n      </Text>\n      <Styled.GameWrapper>\n        {showCircleGameScreen && (\n          <Styled.GameLaunchOverlay>\n            <TrialCircleGameLaunchScreen\n              assetUrl={assetUrl}\n              assetUrlType={assetUrl.endsWith('mp4') ? 'video' : 'lottie'}\n              descriptionHeader={descriptionHeader}\n              playerType={playerType}\n              isLoading={isLoading}\n              isGamePlayed={(projectType && isPlayed[projectType]) ?? false}\n              onPlay={onPlay}\n              custEle={projectType === ProjectType.LESSON ? getCustEle() : undefined}\n              celebrationText={projectType && isPlayed[projectType] ? 'WELL DONE!' : ''}\n            />\n          </Styled.GameLaunchOverlay>\n        )}\n        {matchmakingId && (\n          <WebView\n            key={matchmakingId}\n            ref={webViewRef}\n            height=\"100%\"\n            width=\"100%\"\n            baseUrl={trialGameUrl}\n            playerDetails={playerData}\n            projectDetails={projectDetails}\n            onGameLoad={onGameLoad}\n            onBack={handleBack}\n            handleInfoMessage={handleInfoMessage}\n            onGamePlayFinish={handleGameFinish}\n          />\n        )}\n      </Styled.GameWrapper>\n    </Styled.GameContainer>\n  );\n});\n\nexport default TrialCircleGame;\n"],"names":["PROJECT_TYPE_MAP","TrialPageId","ProjectType","TrialCircleGame","memo","slideConfig","trialGameUrl","circleGames","formData","handleInfoMessage","updateSlideConfig","useTrialSessionContext","showCircleGameScreen","isCircleGamePlayed","isCirclePuzzleSolved","isCircleSkillCompleted","accuracyStr","totalTimeTaken","matchmakingId","webViewRef","useRef","playGame","useWebViewGames","isLoading","setIsLoading","useState","header","id","projectType","circleConfig","playerDetails","games","puzzles","lessons","isPlayed","useMemo","assetUrl","url","descriptionHeader","circle_username","userId","grade","user_avatar","playerType","playerData","projectDetails","commonConfig","onGameLoad","useCallback","handleBack","uuidv4","onPlay","handleGameFinish","playerStats","getCustEle","jsxs","Fragment","FlexView","jsx","Text","Separator","getTimeStrInFormatHMS","useEffect","Styled.GameContainer","Styled.GameWrapper","Styled.GameLaunchOverlay","TrialCircleGameLaunchScreen","WebView"],"mappings":"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"}

package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question-styled.js

@@ -900,6 +900,15 @@ const h = n.div(
         display: none !important;
       }
     }
+    
+    :first-child {
+      font-family: 'UntitledSans-Regular';
+      font-size: 16px !important;
+      line-height: 24px !important;
+      text-align: center;
+      text-wrap: balance;
+    }
+      
     .lrn_correctAnswers {
       display: none;
     }

package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"worksheet-question-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-question/worksheet-question-styled.tsx"],"sourcesContent":["import type { TWorksheetQuestionPaperColor } from './worksheet-question-types';\n\nimport styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { QUESTIONS_GAP, TOP_NAVIGATION_HEIGHT } from '../constants';\nimport { getQuestionBackgroundImage, getQuestionBorderColor } from '../worksheet-helpers';\n\nconst LearnosityQuestionContainer = styled.div<{\n  $isConceptIntro: boolean;\n  $isTeacher: boolean;\n}>(\n  ({ $isConceptIntro, $isTeacher }) => `\n  position: relative;\n  z-index: 1;\n  & > div:not(:first-child) {\n    display: none;\n  }\n\n  ${\n    $isConceptIntro\n      ? `\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: ${$isTeacher ? 140 : 180}px;\n      `\n      : ''\n  }\n`,\n);\n\ninterface IQuestionContainerWrapper {\n  $topOffset?: number;\n}\n\nconst QuestionContainerWrapper = styled(FlexView)<IQuestionContainerWrapper>(\n  ({ $topOffset }) => `\n  scroll-margin-top: ${($topOffset ?? 0) + TOP_NAVIGATION_HEIGHT + QUESTIONS_GAP}px;\n`,\n);\n\nconst getMinHeightFromString = (minHeight: string) => {\n  if (minHeight.startsWith('calc(')) {\n    return minHeight.replace(')', ' - 32px)');\n  }\n\n  return minHeight;\n};\n\ninterface IQuestionContainerProps {\n  $minHeight: string | number;\n  $paperColor?: TWorksheetQuestionPaperColor;\n  $isActive?: boolean;\n}\n\nconst QuestionContainer = styled(FlexView)<IQuestionContainerProps>(\n  ({ theme, $minHeight, $paperColor, $isActive }) => `\n    position: relative;\n    padding: 15px 15px 55px 15px;\n    background-image: ${\n      $paperColor && $paperColor !== 'white'\n        ? `url(${getQuestionBackgroundImage($paperColor)})`\n        : 'none'\n    };\n    background-repeat: repeat;\n    min-height: ${\n      typeof $minHeight === 'number' ? `${$minHeight}px` : getMinHeightFromString($minHeight)\n    };\n    transition: opacity 0.15s;\n    border-radius: 12px;\n    border: 1px solid ${\n      $paperColor ? theme.colors[getQuestionBorderColor($paperColor, $isActive)] : 'transparent'\n    };\n    ${!$paperColor ? 'padding-right: 0;' : ''}\n`,\n);\n\ninterface IQuestionWrapperProps {\n  $dropzoneMinWidth: number;\n  $dropzoneMinHeight: number;\n}\n\nconst QuestionWrapper = styled.div<IQuestionWrapperProps>(\n  ({ theme: { colors }, $dropzoneMinWidth, $dropzoneMinHeight }) => `\n  height: 100%;\n  min-height: inherit;\n\n  em {\n    font-style: italic;\n  }    \n        \n  & .lrn_widget {\n    font-size: 16px;\n    line-height: 1.6em;\n    color: ${colors.BLACK};\n    font-family: \"Noto Serif\", serif;\n    margin-top: 6px;\n    padding-top: 0;\n    margin-bottom: 16px;\n\n    iframe {\n      max-width: 100%;\n    }\n\n    ul, ol {\n      list-style-type: initial;\n      padding-left: 32px;\n    }\n\n    ol {\n      list-style-type: decimal;\n    }\n\n    .lrn_response_wrapper {\n      margin-top: 0 !important;\n    }\n\n    .lrn_question {\n      margin-bottom: 16px;\n\n      .lrn_stimulus {\n        line-height: 1.6em;\n\n        .lrn_stimulus_content {\n          line-height: 1.6em;\n        }\n      }\n\n      & ~ .lrn_response_wrapper {\n        margin-top: 16px !important;\n      }\n    }\n\n    .lrn_response_input_wrapper {\n      border-color: ${colors.GREY_3};\n    }\n\n    .lrn_possibilityList {\n      background-color: ${colors.REAL_BLACK_10};\n    }\n\n    .lrn_dropzone {\n      margin: 0 !important;\n      margin: 0 !important;\n      border: 0 !important;\n      outline: 1px dashed ${colors.BLACK};\n      height: inherit !important;\n      ${\n        $dropzoneMinWidth > 0\n          ? `\n              min-width: ${$dropzoneMinWidth}px !important;\n              width: ${$dropzoneMinWidth}px !important;\n              max-width: ${$dropzoneMinWidth}px !important;\n            `\n          : ''\n      }\n      ${\n        $dropzoneMinHeight > 0\n          ? `\n              min-height: ${$dropzoneMinHeight}px !important;\n              height: ${$dropzoneMinHeight}px !important;\n            `\n          : ''\n      }\n\n      &:not(.lrn_disabled):hover {\n        outline: 1px dashed ${colors.BLUE_4};\n      }\n\n      &.lrn_highlight {\n        outline: 1px dashed ${colors.BLUE_4};\n\n        &.lrn_over {\n          background-color: ${colors.BLUE_1};\n\n          & .lrn_draggable {\n            opacity: 0.5;\n          }\n        }\n      }\n\n      & .lrn_draggable {\n        box-shadow: none;\n        margin: 0 !important;\n        border: 0 !important;\n        background-color: ${colors.WHITE} !important;\n\n        &:after {\n          padding: 0 !important;\n          right: 10px !important;\n        }\n\n        &.lrn_correct:after {\n          color: ${colors.GREEN_5} !important;\n        }\n\n        &.lrn_incorrect:after {\n          color: ${colors.ORANGE_5} !important;\n        }\n      }\n\n      &.lrn_correct_marker {\n        outline: 2px solid ${colors.GREEN_5} !important;\n      }\n\n      &.lrn_incorrect_marker {\n        outline: 2px solid ${colors.ORANGE_5} !important;\n      }\n    }\n\n    .lrn_draggable {\n      margin: 4px !important;\n      padding: 8px !important;\n      box-shadow: inset 0 0 0 1px ${colors.BLUE_4};\n      background-color: ${colors.WHITE} !important;\n      cursor: grab;\n      color: ${colors.BLACK} !important;\n\n      & .lrn_icon {\n        display: none;\n      }\n\n      & .lrn_item {\n        margin: 0 !important;\n        width: 100%;\n        text-align: left !important;\n      }\n\n      &.lrn_active,\n      &:not([disabled]):focus,\n      &:not([disabled]):hover {\n        box-shadow: inset 0 0 0 2px ${colors.BLUE_4} !important;\n      }\n\n      &[disabled] {\n        inset 0 0 0 1px ${colors.WHITE};\n      }\n\n      &.gu-mirror {\n        font-size: 99%;\n        transform: rotate(-6deg);\n      }\n    }\n\n    .lrn-response-validate-wrapper,\n    .lrn-response-validation-wrapper {\n      margin: 0 !important;\n      \n      &.lrn_correct {\n        border: 2px solid ${colors.GREEN_5} !important;\n        border-radius: 4px;\n    \n        &::after {\n          background-color: ${colors.GREEN_5} !important;\n        }\n      }\n\n      &.lrn_incorrect {\n        border: 2px solid ${colors.ORANGE_5} !important;\n        border-radius: 4px;\n    \n        &::after {\n          background-color: ${colors.ORANGE_5} !important;\n        }\n      }\n    }\n\n    .lrn_responseIndex {\n      position: absolute !important;\n      top: -12px !important;\n      left: -9px !important;\n      width: 18px !important;\n      height: 18px !important;\n      border-radius: 9px !important;\n      background-color: ${colors.GREY_3} !important;\n      font-size: 11px !important;\n      font-weight: bold !important;\n      line-height: 16px !important;\n      padding: 0 !important;\n      text-align: center;\n    }\n\n    .lrn_correctAnswers {\n      margin-top: 24px;\n      padding: 16px 24px;\n      border: 1px solid ${colors.GREY_3};\n      border-radius: 12px;\n      background-color: transparent;\n\n      & > :first-child {\n        color: ${colors.BLACK};\n        text-transform: capitalize;\n        font-family: \"UntitledSans-Medium\";\n        font-size: 14px;\n        line-height: 20px;\n      }\n      \n      & .lrn_correctAnswerList {\n        margin-top: 24px;\n        li {\n          background-color: ${colors.WHITE};\n          padding-left: 8px;\n          margin-right: 24px;\n          margin-bottom: 24px;\n          outline: 1px solid ${colors.GREY_3};\n          cursor: auto;\n        }\n      }\n    }\n\n    .lrn_classification_table .lrn_dropzone {\n      overflow-x: visible !important;\n    }\n  }\n\n  &.attempting .lrn_widget {\n    .lrn-response-validate-wrapper,\n    .lrn-response-validation-wrapper {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        border-color: transparent !important;\n\n        &::after {\n          background-color: transparent !important;\n          color: transparent !important;\n        }\n      }\n    }\n\n    .lrn_dropzone {\n      &.lrn_correct_marker,\n      &.lrn_incorrect_marker {\n        outline-color: ${colors.BLUE_4};\n      }\n\n      & .lrn_draggable {\n        &.lrn_correct:after,\n        &.lrn_incorrect:after {\n          color: ${colors.BLUE_4} !important;\n        }\n      }\n    }\n  }\n  \n  & .lrn_widget .lrn_textinput {\n    display: inline-flex;\n    vertical-align: middle;\n    padding: 0 !important;\n    margin: 0 !important;\n    border: none !important;\n\n    &::after {\n      right: 4px !important;\n      padding-right: 0px !important;\n    }\n    \n    & .lrn_math_editable {\n      padding-right: 32px;\n    \n      &.lrn_bordered_mathinput {\n        border: none !important;\n        outline: 1px solid ${colors.BLACK};\n        padding: 3px 24px 3px 8px;\n        text-align: left;\n        background-color: ${colors.WHITE} !important;\n      }\n\n      & .lrn_bordered_mathinput {\n        min-height: 20px;\n        border: 1px solid ${colors.BLACK};\n        border-radius: 2px !important;\n        background-color: ${colors.WHITE} !important;\n      }\n\n      &.lrn_bordered_mathinput {\n        &.lrn_focused,\n        &:not(.lrn_hide_cursor):hover {\n          outline: 1px solid ${colors.BLUE_4};\n        }\n\n        &.lrn_hide_cursor {\n          cursor: auto;\n        }\n      }\n      \n      &:not(.lrn_hide_cursor) .lrn_bordered_mathinput {\n        &.lrn_focused,\n        &:hover {\n          border: 1px solid ${colors.BLUE_4};\n        }\n\n      }\n      \n      &.lrn_hide_cursor .lrn_bordered_mathinput {\n        cursor: auto;\n      }\n    }\n    \n    & input {\n      min-height: 40px;\n      padding: 0 32px 0 8px;\n      border: none !important;\n      background-color: ${colors.WHITE} !important;\n      outline: 1px solid ${colors.BLACK};\n      border-radius: 4px !important;\n\n      &:focus,\n      &:not(:disabled):hover {\n        outline: 1px solid ${colors.BLUE_4};\n      }\n    }\n\n    &.lrn_correct {\n      background-color: ${colors.GREEN_1} !important;\n      &::after {\n        color: ${colors.GREEN_5};\n      }\n      & input {\n        outline: 2px solid ${colors.GREEN_5};\n      }\n      & .lrn_bordered_mathinput {\n        &:not(.mq-inner-editable) {\n          outline: 2px solid ${colors.GREEN_5};\n        }\n        &.mq-inner-editable {\n          border: 1px solid ${colors.GREEN_5};\n        }\n      }\n    }\n    \n    &.lrn_incorrect {\n      background-color: ${colors.ORANGE_1} !important;\n      &::after {\n        color: ${colors.ORANGE_5};\n      }\n      & input {\n        outline: 2px solid ${colors.ORANGE_5};\n      }\n      & .lrn_bordered_mathinput {\n        &:not(.mq-inner-editable) {\n          outline: 2px solid ${colors.ORANGE_5};\n        }\n        &.mq-inner-editable {\n          border: 1px solid ${colors.ORANGE_5};\n        }\n      }\n    }\n  }\n\n  &.attempting .lrn_widget .lrn_textinput {\n    &.lrn_correct,\n    &.lrn_incorrect {\n      background-color: ${colors.WHITE} !important;\n\n      &::after {\n        color: ${colors.BLUE_4} !important;\n      }\n\n      & input {\n        outline: 1px solid ${colors.BLUE_4} !important;\n      }\n\n      & .lrn_bordered_mathinput {\n        &:not(.mq-inner-editable) {\n          outline: 2px solid ${colors.BLUE_4} !important;\n        }\n        &.mq-inner-editable {\n          border: 1px solid ${colors.BLUE_4} !important;\n        }\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_mcq .lrn_response {\n    & .lrn_mcqgroup {\n      overflow-x: visible;\n      margin: 0 -8px !important;\n\n      & .lrn-mcq-option {\n        border: none !important;\n        margin-bottom: 12px;\n        padding: 0 6px !important;\n        background-color: transparent !important;\n\n        &:last-child {\n          margin-bottom: 0;\n        }\n\n        & .lrn-label {\n          padding: 0;\n          background-color: ${colors.GREY_1};\n          border-radius: 12px;\n          border: 0;\n          outline: 1px solid ${colors.GREY_2};\n\n          &::before {\n            border: 0;\n            right: 10px;\n            padding: 0;\n            font-size: 14px;\n          }\n\n          & .lrn_choiceLabel {\n            border-radius: 12px 0 0 12px;\n            border-right: 1px solid ${colors.GREY_2};\n          }\n\n          & .lrn_contentWrapper {\n            padding: 16px 32px 16px 16px;\n          }\n        }\n\n        & input {\n          visibility: hidden;\n\n          &:not(:disabled) + .lrn-label:hover {\n            outline: 1px solid ${colors.BLUE_4};\n          }\n\n          &:disabled + .lrn-label {\n            cursor: not-allowed;\n          }\n        }\n\n        &.lrn_selected .lrn-label {\n          outline: 1px solid ${colors.BLUE_4};\n          background-color: ${colors.GREY_1};\n        }\n\n        &.lrn_correct .lrn-label {\n          outline: 2px solid ${colors.GREEN_5};\n          background-color: ${colors.GREEN_1};\n\n          &::before {\n            color: ${colors.GREEN_5};\n          }\n        }\n        \n        &.lrn_incorrect .lrn-label {\n          outline: 2px solid ${colors.ORANGE_5};\n          background-color: ${colors.ORANGE_1};\n\n          &::before {\n            color: ${colors.ORANGE_5};\n          }\n        }\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_mcq .lrn_response .lrn_mcqgroup .lrn-mcq-option {\n    &.lrn_incorrect .lrn-label,\n    &.lrn_correct .lrn-label {\n      outline: 1px solid ${colors.BLUE_4};\n      background-color: ${colors.GREY_1};\n\n      &::before {\n        color: ${colors.BLUE_4};\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_tokenhighlight .lrn_response .lrn_token {\n    border: 0 !important;\n    border-radius: 0px;\n    padding: 0 2px !important;\n    outline: none !important;\n    margin: 0;\n    background-color: transparent !important;\n\n    &::after {\n      position: absolute !important;\n      font-size: 12px;\n      line-height: 16px;\n      top: -16px !important;\n      left: calc(50% - 6px);\n      margin: 0 !important;\n    }\n\n    &.lrn_tokenhighlight_hover,\n    &.lrn_tokenhighlight_highlight {\n      background-color: ${colors.BLUE_1} !important;\n    }\n\n    &.lrn_correct {\n      background-color: ${colors.GREEN_1} !important;;\n\n      &::after {\n        color: ${colors.GREEN_5} !important;\n      }\n    }\n\n    &.lrn_incorrect {\n      background-color: ${colors.ORANGE_1} !important;;\n\n      &::after {\n        color: ${colors.ORANGE_5} !important;\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_tokenhighlight .lrn_response .lrn_token {\n    &.lrn_correct,\n    &.lrn_incorrect {\n      background-color: ${colors.BLUE_1} !important;\n\n      &::after {\n        color: ${colors.BLUE_4} !important;\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_numberline {\n    .lrn_incorrect.lrn_btn_arrow {\n      background-color: ${colors.ORANGE_1};\n      border: 1px solid ${colors.ORANGE_5};\n\n      &::before {\n        color: ${colors.ORANGE_5};\n      }\n      &::after {\n        border-color: ${colors.ORANGE_5} transparent transparent;\n      }\n    }\n\n    .lrn_correct.lrn_btn_arrow {\n      background-color: ${colors.GREEN_1};\n      border: 1px solid ${colors.GREEN_5};\n\n      &::before {\n        color: ${colors.GREEN_5};\n      }\n      &::after {\n        border-color: ${colors.GREEN_5} transparent transparent;\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_numberline {\n    .lrn_correct.lrn_btn_arrow,\n    .lrn_incorrect.lrn_btn_arrow {\n      background-color: ${colors.BLUE_1} !important;\n      border: 1px solid ${colors.BLUE_4} !important;\n\n      &::before {\n        color: ${colors.BLUE_4} !important;\n      }\n      &::after {\n        border-color: ${colors.BLUE_4} transparent transparent !important;\n      }\n    }\n  }\n\n  & .lrn_widget .lrn_combobox {\n    margin: 0 3px !important;\n\n    & .lrn_clozedropdown_answer {\n      position: relative !important;\n      display: inline-flex !important;\n      line-height: 28px !important;\n    }\n\n    &.lrn_not_attempted .lrn_clozedropdown_answer {\n      position: relative !important;\n      border: none !important;\n      background: transparent !important;\n      width: 100px;\n\n      &:after {\n        content: '';\n        position: absolute !important;\n        top: -5px;\n        left: 0;\n        width: 100%;\n        height: 28px;\n        background-color: ${colors.WHITE};\n        outline: 1px solid ${colors.BLACK};\n        border-radius: 4px;\n        margin: 0 !important;\n      }\n    }\n    \n    & .lrn-cloze-select, &:not(.lrn_not_attempted) .lrn_clozedropdown_answer {\n      background-color: ${colors.WHITE} !important;\n      border: 0 !important;\n      padding: 0 32px 0 8px !important;\n      outline: 1px solid ${colors.BLACK};\n      border-radius: 4px !important;\n      min-height: 28px;\n      min-width: 100px;\n      height: 28px !important;\n\n      &:after {\n        position: absolute !important;\n        right: 10px !important;\n        padding: 0px !important;\n        margin: 0px !important;\n      }\n    }\n  \n    &.lrn_correct .lrn_clozedropdown_answer {\n      outline: 2px solid ${colors.GREEN_5};\n      &:after {\n        color: ${colors.GREEN_5} !important;\n      }\n    }\n    &.lrn_incorrect .lrn_clozedropdown_answer {\n      outline: 2px solid ${colors.ORANGE_5};\n      &:after {\n        color: ${colors.ORANGE_5} !important;\n      }\n    }\n    \n  }\n\n  &.attempting .lrn_widget .lrn_combobox {\n    &.lrn_correct .lrn_clozedropdown_answer,\n    &.lrn_incorrect .lrn_clozedropdown_answer {\n      outline: 2px solid ${colors.BLUE_4} !important;\n      &::after {\n        color: ${colors.BLUE_4} !important;\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_hotspot .lrn-polygons {\n    .lrn-focused polygon {\n      outline-color: ${colors.BLUE_4};\n    }\n\n    .lrn-selected polygon {\n      stroke: ${colors.BLUE_4} !important;\n    }\n\n    .lrn_correct polygon {\n      stroke: ${colors.GREEN_5} !important;\n    }\n    \n    .lrn_incorrect polygon {\n      stroke: ${colors.ORANGE_5} !important;\n    }\n\n    .lrn-polygons-labels li {\n      &.lrn_valid {\n        background: ${colors.GREY_3};\n      }\n      &.lrn_correct {\n        background: ${colors.GREEN_5};\n      }\n      &.lrn_incorrect {\n        background: ${colors.ORANGE_5};\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_hotspot .lrn-polygons {\n    .lrn_correct polygon,\n    .lrn_incorrect polygon {\n      stroke: ${colors.BLUE_4} !important;\n    }\n\n    .lrn-polygons-labels li {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        background: ${colors.BLUE_4};\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_choicematrix {\n    .lrn_option {\n      &:: before {\n        display: none;\n      }\n      &::after {\n        position: absolute !important;\n        top: calc(50% - 9px) !important;\n        right: 7px !important;\n      }\n      &.lrn_correct {\n        background-color: ${colors.GREEN_1};\n\n        &::after {\n          color: ${colors.GREEN_5} !important;\n        }\n      }\n\n      &.lrn_incorrect {\n        background-color: ${colors.ORANGE_1};\n\n        &::after {\n          color: ${colors.ORANGE_5} !important;\n        }\n      }\n    }\n\n    .lrn_response_input {\n      border-width: 2px !important;\n      margin: 0 !important;\n\n      &.lrn_correct {\n        border-color: ${colors.GREEN_5};\n\n        &::after {\n          background-color: ${colors.GREEN_5};\n        }\n      }\n\n      &.lrn_incorrect {\n        border-color: ${colors.ORANGE_5};\n\n        &::after {\n          background-color: ${colors.ORANGE_5};\n        }\n      }\n    } \n  }\n\n  &.attempting .lrn_widget.lrn_choicematrix {\n    .lrn_option {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        background-color: ${colors.BLUE_1};\n\n        &::after {\n          color: ${colors.BLUE_4} !important;\n        }\n      }\n    }\n    \n    .lrn_response_input {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        border-color: ${colors.BLUE_4};\n\n        &::after {\n          background-color: ${colors.BLUE_4};\n        }\n      }\n    }\n  }\n\n  .lrn_widget.lrn_classification {\n    .lrn_response_container {\n      border: 0 !important;\n      vertical-align: bottom !important;\n    }\n\n    .lrn_dropzone {\n      display: flex;\n      flex-wrap: wrap;\n      column-gap: 8px;\n      height: unset !important;\n    }\n\n    .lrn_dropzone .lrn_draggable {\n      display: inline-flex;\n      align-items: center;\n      padding: 8px 30px 8px 8px !important;\n      margin-bottom: 4px !important;\n      outline: 1px solid ${colors.BLUE_4} !important;\n      background-color: transparent !important;\n\n      &.lrn_incorrect {\n        outline: 1px solid ${colors.ORANGE_5} !important;\n      }\n\n      &.lrn_correct {\n        outline: 1px solid ${colors.GREEN_5} !important;\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_classification {\n    .lrn_dropzone .lrn_draggable {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        outline: 1px solid ${colors.BLUE_4} !important;\n      }\n    }\n  }\n\n  .lrn_widget.lrn_association {\n    .lrn_dropzone .lrn_draggable {\n      display: flex;\n      align-items: center;\n      background-color: transparent !important;\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_association {\n    .lrn_dropzone .lrn_draggable {\n      background-color: ${colors.WHITE} !important;\n    }\n  }\n\n  .lrn_widget.lrn_clozeassociation {\n    .lrn_dropzone .lrn_draggable {\n      display: flex;\n      align-items: center;\n      background-color: transparent !important;\n    }\n\n    .lrn_response_input {\n      padding-bottom: 2px !important;\n    }\n  }\n  \n  &.attempting .lrn_widget.lrn_clozeassociation {\n    .lrn_dropzone .lrn_draggable {\n      background-color: ${colors.WHITE} !important;\n    }\n  }\n\n  .lrn_widget.lrn_drawing {\n    .lrn-label span,\n    .lrn_toolbar_small_label {\n      display: none !important;\n    }\n  }\n\n  &.hidden {\n    visibility: hidden;\n  }\n\n  &.correct-answers-hidden {\n    .lrn_correctAnswers {\n      display: none !important;\n    }\n  }\n  \n\n  &.response-hidden .lrn_response_wrapper {\n    display: none;\n  }\n  \n  &.response-code-hidden .lrn_response_wrapper {\n    width: 75%;\n    margin: 0 auto;\n    .lrn_display_correct_answer_enabled {\n      >:not(:first-child) {\n        display: none;\n      }\n        \n      :first-child {\n        font-family: 'UntitledSans-Regular';\n        font-size: 16px !important;\n        line-height: 24px !important;\n        text-align: center;\n        text-wrap: balance;\n      }\n\n      .lrn_textinput {\n        display: none !important;\n      }\n    }\n    .lrn_correctAnswers {\n      display: none;\n    }\n  }\n\n  &.lesson-overview {\n    .lrn_widget .lrn_question {\n      table {\n        width: calc(100% - 48px) !important;\n        margin-left: 24px !important;\n        border: 0px !important;\n        \n        td {\n          border: 0px !important;\n          width: 100% !important;\n          background-color: transparent !important;\n\n          p {\n            display: flex !important;\n            justify-content: center !important;\n            font-family: \"Athletics-Medium\" !important;\n            font-size: 28px !important;\n            margin-bottom: 32px !important;\n          }\n\n          ul {\n            list-style-type: none;\n            padding-left: 0;\n\n            li {\n              position: relative !important;\n              font-family: \"UntitledSans-Regular\" !important;\n              font-size: 16px !important;\n              margin: 12px 0 !important;\n\n              &::before {\n                content: \"A\";\n                display: inline-block;\n                width: 24px;\n                height: 24px;\n                margin-right: 12px;\n                color: transparent;\n                background-image: url(${ILLUSTRATIONS.BULLET_YELLOW});\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  &.concept-intro {\n    .lrn_widget .lrn_question {\n      .lrn_stimulus {\n        display: flex !important;\n        justify-content: center !important;\n      }\n      .lrn_stimulus_content {\n        width: 75% !important;\n        font-family: \"Athletics-Light\" !important;\n        font-size: 48px !important;\n        line-height: 52px !important;\n        text-align: center;\n        text-wrap: balance;\n\n        * {\n          font-size: 48px !important;\n        }\n      }\n    }\n  }\n\n  &.system-intro .lrn_widget {\n    display: none;\n  }\n`,\n);\n\nconst ItemHeader = styled(FlexView)`\n  position: relative;\n  z-index: 2;\n  padding-right: 8px;\n`;\n\nconst ItemHeaderTag = styled(FlexView)(\n  ({\n    theme: {\n      layout: { gutter },\n      colors,\n    },\n  }) => `\n  position: relative;\n  padding: ${gutter * 1}px ${gutter * 1}px ${gutter * 0.75}px;\n  border-top-left-radius: ${gutter * 0.375}px;\n  border-top-right-radius: ${gutter * 0.5}px;\n  background-color: ${colors.YELLOW_2};\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: calc(100% - 1px);\n    border-bottom: 44px solid ${colors.YELLOW_2};\n    border-right: 24px solid transparent;\n  }\n`,\n);\n\ninterface IQuestionHeaderWrapperProps {\n  $actionbarHeight: number;\n  $topOffset: number;\n}\n\ninterface ICueCanvasWrappperProps {\n  $canScribble: boolean;\n}\n\nconst QuestionHeaderWrapper = styled(FlexView)<IQuestionHeaderWrapperProps>(\n  ({ $topOffset }) => `\n  position: sticky;\n  top: ${$topOffset + QUESTIONS_GAP / 2}px;\n  z-index: 2;\n`,\n);\n\nconst QuestionValidationAnimationWrapper = styled.div`\n  position: absolute;\n  top: -16px;\n  right: -16px;\n  width: 40px;\n  height: 40px;\n`;\n\nconst LessonOverviewBanner = styled.img`\n  display: block;\n  transform: translate(-15px, -15px);\n  width: calc(100% + 30px);\n  border-radius: 12px 12px 0 0;\n  margin-bottom: 18px;\n`;\n\nconst CustomElement = styled.div(\n  ({ theme: { colors } }) => `\n  color: ${colors.BLACK};\n  font-size: 16px;\n  line-height: 1.6em;\n  font-family: 'Noto Serif', serif;\n\n  & > *:not(:last-child) {\n    margin-bottom: 1em;\n  }\n\n  & strong {\n    font-weight: bold;\n  }\n\n  & i {\n    font-style: italic;\n  }\n\n  & ul, ol {\n    list-style-type: initial;\n    padding-left: 1.5em;\n\n    & li:not(:last-child) {\n      margin-bottom: 8px;\n    }\n  }\n\n  & ol {\n    list-style-type: decimal;\n  }\n\n  & ul ul {\n    list-style-type: circle;\n  }\n\n  & img {\n    max-width: 100%;\n    height: inherit;\n  }\n\n  & table {\n    td {\n      padding: 8px;\n    }\n    &:not(.table-no-border) td {\n      border: 1px solid ${colors.REAL_BLACK};\n    }\n  }\n`,\n);\n\nconst Hint = styled(CustomElement)`\n  margin: 8px 0;\n`;\n\nconst Solution = CustomElement;\n\nconst StimulusReview = styled(CustomElement)(\n  ({ theme: { colors } }) => `\n  width: 50%;\n  padding-right: 16px;\n  margin-top: 16px;\n  border-right: 1px solid ${colors.GREY_2};\n  min-height: 100%;\n  align-self: stretch;\n`,\n);\n\nconst CueCanvasWrapper = styled(FlexView)<ICueCanvasWrappperProps>(\n  ({ $canScribble, theme }) => `\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${$canScribble ? theme.zIndex.CANVAS_SCRIBBLING : 1};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n`,\n);\n\nexport {\n  CueCanvasWrapper,\n  CustomElement,\n  Hint,\n  ItemHeader,\n  ItemHeaderTag,\n  LearnosityQuestionContainer,\n  LessonOverviewBanner,\n  QuestionContainer,\n  QuestionContainerWrapper,\n  QuestionHeaderWrapper,\n  QuestionValidationAnimationWrapper,\n  QuestionWrapper,\n  Solution,\n  StimulusReview,\n};\n"],"names":["LearnosityQuestionContainer","styled","$isConceptIntro","$isTeacher","QuestionContainerWrapper","FlexView","$topOffset","TOP_NAVIGATION_HEIGHT","QUESTIONS_GAP","getMinHeightFromString","minHeight","QuestionContainer","theme","$minHeight","$paperColor","$isActive","getQuestionBackgroundImage","getQuestionBorderColor","QuestionWrapper","colors","$dropzoneMinWidth","$dropzoneMinHeight","ILLUSTRATIONS","ItemHeader","ItemHeaderTag","gutter","QuestionHeaderWrapper","QuestionValidationAnimationWrapper","LessonOverviewBanner","CustomElement","Hint","Solution","StimulusReview","CueCanvasWrapper","$canScribble"],"mappings":"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"}
+{"version":3,"file":"worksheet-question-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-question/worksheet-question-styled.tsx"],"sourcesContent":["import type { TWorksheetQuestionPaperColor } from './worksheet-question-types';\n\nimport styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { QUESTIONS_GAP, TOP_NAVIGATION_HEIGHT } from '../constants';\nimport { getQuestionBackgroundImage, getQuestionBorderColor } from '../worksheet-helpers';\n\nconst LearnosityQuestionContainer = styled.div<{\n  $isConceptIntro: boolean;\n  $isTeacher: boolean;\n}>(\n  ({ $isConceptIntro, $isTeacher }) => `\n  position: relative;\n  z-index: 1;\n  & > div:not(:first-child) {\n    display: none;\n  }\n\n  ${\n    $isConceptIntro\n      ? `\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: ${$isTeacher ? 140 : 180}px;\n      `\n      : ''\n  }\n`,\n);\n\ninterface IQuestionContainerWrapper {\n  $topOffset?: number;\n}\n\nconst QuestionContainerWrapper = styled(FlexView)<IQuestionContainerWrapper>(\n  ({ $topOffset }) => `\n  scroll-margin-top: ${($topOffset ?? 0) + TOP_NAVIGATION_HEIGHT + QUESTIONS_GAP}px;\n`,\n);\n\nconst getMinHeightFromString = (minHeight: string) => {\n  if (minHeight.startsWith('calc(')) {\n    return minHeight.replace(')', ' - 32px)');\n  }\n\n  return minHeight;\n};\n\ninterface IQuestionContainerProps {\n  $minHeight: string | number;\n  $paperColor?: TWorksheetQuestionPaperColor;\n  $isActive?: boolean;\n}\n\nconst QuestionContainer = styled(FlexView)<IQuestionContainerProps>(\n  ({ theme, $minHeight, $paperColor, $isActive }) => `\n    position: relative;\n    padding: 15px 15px 55px 15px;\n    background-image: ${\n      $paperColor && $paperColor !== 'white'\n        ? `url(${getQuestionBackgroundImage($paperColor)})`\n        : 'none'\n    };\n    background-repeat: repeat;\n    min-height: ${\n      typeof $minHeight === 'number' ? `${$minHeight}px` : getMinHeightFromString($minHeight)\n    };\n    transition: opacity 0.15s;\n    border-radius: 12px;\n    border: 1px solid ${\n      $paperColor ? theme.colors[getQuestionBorderColor($paperColor, $isActive)] : 'transparent'\n    };\n    ${!$paperColor ? 'padding-right: 0;' : ''}\n`,\n);\n\ninterface IQuestionWrapperProps {\n  $dropzoneMinWidth: number;\n  $dropzoneMinHeight: number;\n}\n\nconst QuestionWrapper = styled.div<IQuestionWrapperProps>(\n  ({ theme: { colors }, $dropzoneMinWidth, $dropzoneMinHeight }) => `\n  height: 100%;\n  min-height: inherit;\n\n  em {\n    font-style: italic;\n  }    \n        \n  & .lrn_widget {\n    font-size: 16px;\n    line-height: 1.6em;\n    color: ${colors.BLACK};\n    font-family: \"Noto Serif\", serif;\n    margin-top: 6px;\n    padding-top: 0;\n    margin-bottom: 16px;\n\n    iframe {\n      max-width: 100%;\n    }\n\n    ul, ol {\n      list-style-type: initial;\n      padding-left: 32px;\n    }\n\n    ol {\n      list-style-type: decimal;\n    }\n\n    .lrn_response_wrapper {\n      margin-top: 0 !important;\n    }\n\n    .lrn_question {\n      margin-bottom: 16px;\n\n      .lrn_stimulus {\n        line-height: 1.6em;\n\n        .lrn_stimulus_content {\n          line-height: 1.6em;\n        }\n      }\n\n      & ~ .lrn_response_wrapper {\n        margin-top: 16px !important;\n      }\n    }\n\n    .lrn_response_input_wrapper {\n      border-color: ${colors.GREY_3};\n    }\n\n    .lrn_possibilityList {\n      background-color: ${colors.REAL_BLACK_10};\n    }\n\n    .lrn_dropzone {\n      margin: 0 !important;\n      margin: 0 !important;\n      border: 0 !important;\n      outline: 1px dashed ${colors.BLACK};\n      height: inherit !important;\n      ${\n        $dropzoneMinWidth > 0\n          ? `\n              min-width: ${$dropzoneMinWidth}px !important;\n              width: ${$dropzoneMinWidth}px !important;\n              max-width: ${$dropzoneMinWidth}px !important;\n            `\n          : ''\n      }\n      ${\n        $dropzoneMinHeight > 0\n          ? `\n              min-height: ${$dropzoneMinHeight}px !important;\n              height: ${$dropzoneMinHeight}px !important;\n            `\n          : ''\n      }\n\n      &:not(.lrn_disabled):hover {\n        outline: 1px dashed ${colors.BLUE_4};\n      }\n\n      &.lrn_highlight {\n        outline: 1px dashed ${colors.BLUE_4};\n\n        &.lrn_over {\n          background-color: ${colors.BLUE_1};\n\n          & .lrn_draggable {\n            opacity: 0.5;\n          }\n        }\n      }\n\n      & .lrn_draggable {\n        box-shadow: none;\n        margin: 0 !important;\n        border: 0 !important;\n        background-color: ${colors.WHITE} !important;\n\n        &:after {\n          padding: 0 !important;\n          right: 10px !important;\n        }\n\n        &.lrn_correct:after {\n          color: ${colors.GREEN_5} !important;\n        }\n\n        &.lrn_incorrect:after {\n          color: ${colors.ORANGE_5} !important;\n        }\n      }\n\n      &.lrn_correct_marker {\n        outline: 2px solid ${colors.GREEN_5} !important;\n      }\n\n      &.lrn_incorrect_marker {\n        outline: 2px solid ${colors.ORANGE_5} !important;\n      }\n    }\n\n    .lrn_draggable {\n      margin: 4px !important;\n      padding: 8px !important;\n      box-shadow: inset 0 0 0 1px ${colors.BLUE_4};\n      background-color: ${colors.WHITE} !important;\n      cursor: grab;\n      color: ${colors.BLACK} !important;\n\n      & .lrn_icon {\n        display: none;\n      }\n\n      & .lrn_item {\n        margin: 0 !important;\n        width: 100%;\n        text-align: left !important;\n      }\n\n      &.lrn_active,\n      &:not([disabled]):focus,\n      &:not([disabled]):hover {\n        box-shadow: inset 0 0 0 2px ${colors.BLUE_4} !important;\n      }\n\n      &[disabled] {\n        inset 0 0 0 1px ${colors.WHITE};\n      }\n\n      &.gu-mirror {\n        font-size: 99%;\n        transform: rotate(-6deg);\n      }\n    }\n\n    .lrn-response-validate-wrapper,\n    .lrn-response-validation-wrapper {\n      margin: 0 !important;\n      \n      &.lrn_correct {\n        border: 2px solid ${colors.GREEN_5} !important;\n        border-radius: 4px;\n    \n        &::after {\n          background-color: ${colors.GREEN_5} !important;\n        }\n      }\n\n      &.lrn_incorrect {\n        border: 2px solid ${colors.ORANGE_5} !important;\n        border-radius: 4px;\n    \n        &::after {\n          background-color: ${colors.ORANGE_5} !important;\n        }\n      }\n    }\n\n    .lrn_responseIndex {\n      position: absolute !important;\n      top: -12px !important;\n      left: -9px !important;\n      width: 18px !important;\n      height: 18px !important;\n      border-radius: 9px !important;\n      background-color: ${colors.GREY_3} !important;\n      font-size: 11px !important;\n      font-weight: bold !important;\n      line-height: 16px !important;\n      padding: 0 !important;\n      text-align: center;\n    }\n\n    .lrn_correctAnswers {\n      margin-top: 24px;\n      padding: 16px 24px;\n      border: 1px solid ${colors.GREY_3};\n      border-radius: 12px;\n      background-color: transparent;\n\n      & > :first-child {\n        color: ${colors.BLACK};\n        text-transform: capitalize;\n        font-family: \"UntitledSans-Medium\";\n        font-size: 14px;\n        line-height: 20px;\n      }\n      \n      & .lrn_correctAnswerList {\n        margin-top: 24px;\n        li {\n          background-color: ${colors.WHITE};\n          padding-left: 8px;\n          margin-right: 24px;\n          margin-bottom: 24px;\n          outline: 1px solid ${colors.GREY_3};\n          cursor: auto;\n        }\n      }\n    }\n\n    .lrn_classification_table .lrn_dropzone {\n      overflow-x: visible !important;\n    }\n  }\n\n  &.attempting .lrn_widget {\n    .lrn-response-validate-wrapper,\n    .lrn-response-validation-wrapper {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        border-color: transparent !important;\n\n        &::after {\n          background-color: transparent !important;\n          color: transparent !important;\n        }\n      }\n    }\n\n    .lrn_dropzone {\n      &.lrn_correct_marker,\n      &.lrn_incorrect_marker {\n        outline-color: ${colors.BLUE_4};\n      }\n\n      & .lrn_draggable {\n        &.lrn_correct:after,\n        &.lrn_incorrect:after {\n          color: ${colors.BLUE_4} !important;\n        }\n      }\n    }\n  }\n  \n  & .lrn_widget .lrn_textinput {\n    display: inline-flex;\n    vertical-align: middle;\n    padding: 0 !important;\n    margin: 0 !important;\n    border: none !important;\n\n    &::after {\n      right: 4px !important;\n      padding-right: 0px !important;\n    }\n    \n    & .lrn_math_editable {\n      padding-right: 32px;\n    \n      &.lrn_bordered_mathinput {\n        border: none !important;\n        outline: 1px solid ${colors.BLACK};\n        padding: 3px 24px 3px 8px;\n        text-align: left;\n        background-color: ${colors.WHITE} !important;\n      }\n\n      & .lrn_bordered_mathinput {\n        min-height: 20px;\n        border: 1px solid ${colors.BLACK};\n        border-radius: 2px !important;\n        background-color: ${colors.WHITE} !important;\n      }\n\n      &.lrn_bordered_mathinput {\n        &.lrn_focused,\n        &:not(.lrn_hide_cursor):hover {\n          outline: 1px solid ${colors.BLUE_4};\n        }\n\n        &.lrn_hide_cursor {\n          cursor: auto;\n        }\n      }\n      \n      &:not(.lrn_hide_cursor) .lrn_bordered_mathinput {\n        &.lrn_focused,\n        &:hover {\n          border: 1px solid ${colors.BLUE_4};\n        }\n\n      }\n      \n      &.lrn_hide_cursor .lrn_bordered_mathinput {\n        cursor: auto;\n      }\n    }\n    \n    & input {\n      min-height: 40px;\n      padding: 0 32px 0 8px;\n      border: none !important;\n      background-color: ${colors.WHITE} !important;\n      outline: 1px solid ${colors.BLACK};\n      border-radius: 4px !important;\n\n      &:focus,\n      &:not(:disabled):hover {\n        outline: 1px solid ${colors.BLUE_4};\n      }\n    }\n\n    &.lrn_correct {\n      background-color: ${colors.GREEN_1} !important;\n      &::after {\n        color: ${colors.GREEN_5};\n      }\n      & input {\n        outline: 2px solid ${colors.GREEN_5};\n      }\n      & .lrn_bordered_mathinput {\n        &:not(.mq-inner-editable) {\n          outline: 2px solid ${colors.GREEN_5};\n        }\n        &.mq-inner-editable {\n          border: 1px solid ${colors.GREEN_5};\n        }\n      }\n    }\n    \n    &.lrn_incorrect {\n      background-color: ${colors.ORANGE_1} !important;\n      &::after {\n        color: ${colors.ORANGE_5};\n      }\n      & input {\n        outline: 2px solid ${colors.ORANGE_5};\n      }\n      & .lrn_bordered_mathinput {\n        &:not(.mq-inner-editable) {\n          outline: 2px solid ${colors.ORANGE_5};\n        }\n        &.mq-inner-editable {\n          border: 1px solid ${colors.ORANGE_5};\n        }\n      }\n    }\n  }\n\n  &.attempting .lrn_widget .lrn_textinput {\n    &.lrn_correct,\n    &.lrn_incorrect {\n      background-color: ${colors.WHITE} !important;\n\n      &::after {\n        color: ${colors.BLUE_4} !important;\n      }\n\n      & input {\n        outline: 1px solid ${colors.BLUE_4} !important;\n      }\n\n      & .lrn_bordered_mathinput {\n        &:not(.mq-inner-editable) {\n          outline: 2px solid ${colors.BLUE_4} !important;\n        }\n        &.mq-inner-editable {\n          border: 1px solid ${colors.BLUE_4} !important;\n        }\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_mcq .lrn_response {\n    & .lrn_mcqgroup {\n      overflow-x: visible;\n      margin: 0 -8px !important;\n\n      & .lrn-mcq-option {\n        border: none !important;\n        margin-bottom: 12px;\n        padding: 0 6px !important;\n        background-color: transparent !important;\n\n        &:last-child {\n          margin-bottom: 0;\n        }\n\n        & .lrn-label {\n          padding: 0;\n          background-color: ${colors.GREY_1};\n          border-radius: 12px;\n          border: 0;\n          outline: 1px solid ${colors.GREY_2};\n\n          &::before {\n            border: 0;\n            right: 10px;\n            padding: 0;\n            font-size: 14px;\n          }\n\n          & .lrn_choiceLabel {\n            border-radius: 12px 0 0 12px;\n            border-right: 1px solid ${colors.GREY_2};\n          }\n\n          & .lrn_contentWrapper {\n            padding: 16px 32px 16px 16px;\n          }\n        }\n\n        & input {\n          visibility: hidden;\n\n          &:not(:disabled) + .lrn-label:hover {\n            outline: 1px solid ${colors.BLUE_4};\n          }\n\n          &:disabled + .lrn-label {\n            cursor: not-allowed;\n          }\n        }\n\n        &.lrn_selected .lrn-label {\n          outline: 1px solid ${colors.BLUE_4};\n          background-color: ${colors.GREY_1};\n        }\n\n        &.lrn_correct .lrn-label {\n          outline: 2px solid ${colors.GREEN_5};\n          background-color: ${colors.GREEN_1};\n\n          &::before {\n            color: ${colors.GREEN_5};\n          }\n        }\n        \n        &.lrn_incorrect .lrn-label {\n          outline: 2px solid ${colors.ORANGE_5};\n          background-color: ${colors.ORANGE_1};\n\n          &::before {\n            color: ${colors.ORANGE_5};\n          }\n        }\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_mcq .lrn_response .lrn_mcqgroup .lrn-mcq-option {\n    &.lrn_incorrect .lrn-label,\n    &.lrn_correct .lrn-label {\n      outline: 1px solid ${colors.BLUE_4};\n      background-color: ${colors.GREY_1};\n\n      &::before {\n        color: ${colors.BLUE_4};\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_tokenhighlight .lrn_response .lrn_token {\n    border: 0 !important;\n    border-radius: 0px;\n    padding: 0 2px !important;\n    outline: none !important;\n    margin: 0;\n    background-color: transparent !important;\n\n    &::after {\n      position: absolute !important;\n      font-size: 12px;\n      line-height: 16px;\n      top: -16px !important;\n      left: calc(50% - 6px);\n      margin: 0 !important;\n    }\n\n    &.lrn_tokenhighlight_hover,\n    &.lrn_tokenhighlight_highlight {\n      background-color: ${colors.BLUE_1} !important;\n    }\n\n    &.lrn_correct {\n      background-color: ${colors.GREEN_1} !important;;\n\n      &::after {\n        color: ${colors.GREEN_5} !important;\n      }\n    }\n\n    &.lrn_incorrect {\n      background-color: ${colors.ORANGE_1} !important;;\n\n      &::after {\n        color: ${colors.ORANGE_5} !important;\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_tokenhighlight .lrn_response .lrn_token {\n    &.lrn_correct,\n    &.lrn_incorrect {\n      background-color: ${colors.BLUE_1} !important;\n\n      &::after {\n        color: ${colors.BLUE_4} !important;\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_numberline {\n    .lrn_incorrect.lrn_btn_arrow {\n      background-color: ${colors.ORANGE_1};\n      border: 1px solid ${colors.ORANGE_5};\n\n      &::before {\n        color: ${colors.ORANGE_5};\n      }\n      &::after {\n        border-color: ${colors.ORANGE_5} transparent transparent;\n      }\n    }\n\n    .lrn_correct.lrn_btn_arrow {\n      background-color: ${colors.GREEN_1};\n      border: 1px solid ${colors.GREEN_5};\n\n      &::before {\n        color: ${colors.GREEN_5};\n      }\n      &::after {\n        border-color: ${colors.GREEN_5} transparent transparent;\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_numberline {\n    .lrn_correct.lrn_btn_arrow,\n    .lrn_incorrect.lrn_btn_arrow {\n      background-color: ${colors.BLUE_1} !important;\n      border: 1px solid ${colors.BLUE_4} !important;\n\n      &::before {\n        color: ${colors.BLUE_4} !important;\n      }\n      &::after {\n        border-color: ${colors.BLUE_4} transparent transparent !important;\n      }\n    }\n  }\n\n  & .lrn_widget .lrn_combobox {\n    margin: 0 3px !important;\n\n    & .lrn_clozedropdown_answer {\n      position: relative !important;\n      display: inline-flex !important;\n      line-height: 28px !important;\n    }\n\n    &.lrn_not_attempted .lrn_clozedropdown_answer {\n      position: relative !important;\n      border: none !important;\n      background: transparent !important;\n      width: 100px;\n\n      &:after {\n        content: '';\n        position: absolute !important;\n        top: -5px;\n        left: 0;\n        width: 100%;\n        height: 28px;\n        background-color: ${colors.WHITE};\n        outline: 1px solid ${colors.BLACK};\n        border-radius: 4px;\n        margin: 0 !important;\n      }\n    }\n    \n    & .lrn-cloze-select, &:not(.lrn_not_attempted) .lrn_clozedropdown_answer {\n      background-color: ${colors.WHITE} !important;\n      border: 0 !important;\n      padding: 0 32px 0 8px !important;\n      outline: 1px solid ${colors.BLACK};\n      border-radius: 4px !important;\n      min-height: 28px;\n      min-width: 100px;\n      height: 28px !important;\n\n      &:after {\n        position: absolute !important;\n        right: 10px !important;\n        padding: 0px !important;\n        margin: 0px !important;\n      }\n    }\n  \n    &.lrn_correct .lrn_clozedropdown_answer {\n      outline: 2px solid ${colors.GREEN_5};\n      &:after {\n        color: ${colors.GREEN_5} !important;\n      }\n    }\n    &.lrn_incorrect .lrn_clozedropdown_answer {\n      outline: 2px solid ${colors.ORANGE_5};\n      &:after {\n        color: ${colors.ORANGE_5} !important;\n      }\n    }\n    \n  }\n\n  &.attempting .lrn_widget .lrn_combobox {\n    &.lrn_correct .lrn_clozedropdown_answer,\n    &.lrn_incorrect .lrn_clozedropdown_answer {\n      outline: 2px solid ${colors.BLUE_4} !important;\n      &::after {\n        color: ${colors.BLUE_4} !important;\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_hotspot .lrn-polygons {\n    .lrn-focused polygon {\n      outline-color: ${colors.BLUE_4};\n    }\n\n    .lrn-selected polygon {\n      stroke: ${colors.BLUE_4} !important;\n    }\n\n    .lrn_correct polygon {\n      stroke: ${colors.GREEN_5} !important;\n    }\n    \n    .lrn_incorrect polygon {\n      stroke: ${colors.ORANGE_5} !important;\n    }\n\n    .lrn-polygons-labels li {\n      &.lrn_valid {\n        background: ${colors.GREY_3};\n      }\n      &.lrn_correct {\n        background: ${colors.GREEN_5};\n      }\n      &.lrn_incorrect {\n        background: ${colors.ORANGE_5};\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_hotspot .lrn-polygons {\n    .lrn_correct polygon,\n    .lrn_incorrect polygon {\n      stroke: ${colors.BLUE_4} !important;\n    }\n\n    .lrn-polygons-labels li {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        background: ${colors.BLUE_4};\n      }\n    }\n  }\n\n  & .lrn_widget.lrn_choicematrix {\n    .lrn_option {\n      &:: before {\n        display: none;\n      }\n      &::after {\n        position: absolute !important;\n        top: calc(50% - 9px) !important;\n        right: 7px !important;\n      }\n      &.lrn_correct {\n        background-color: ${colors.GREEN_1};\n\n        &::after {\n          color: ${colors.GREEN_5} !important;\n        }\n      }\n\n      &.lrn_incorrect {\n        background-color: ${colors.ORANGE_1};\n\n        &::after {\n          color: ${colors.ORANGE_5} !important;\n        }\n      }\n    }\n\n    .lrn_response_input {\n      border-width: 2px !important;\n      margin: 0 !important;\n\n      &.lrn_correct {\n        border-color: ${colors.GREEN_5};\n\n        &::after {\n          background-color: ${colors.GREEN_5};\n        }\n      }\n\n      &.lrn_incorrect {\n        border-color: ${colors.ORANGE_5};\n\n        &::after {\n          background-color: ${colors.ORANGE_5};\n        }\n      }\n    } \n  }\n\n  &.attempting .lrn_widget.lrn_choicematrix {\n    .lrn_option {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        background-color: ${colors.BLUE_1};\n\n        &::after {\n          color: ${colors.BLUE_4} !important;\n        }\n      }\n    }\n    \n    .lrn_response_input {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        border-color: ${colors.BLUE_4};\n\n        &::after {\n          background-color: ${colors.BLUE_4};\n        }\n      }\n    }\n  }\n\n  .lrn_widget.lrn_classification {\n    .lrn_response_container {\n      border: 0 !important;\n      vertical-align: bottom !important;\n    }\n\n    .lrn_dropzone {\n      display: flex;\n      flex-wrap: wrap;\n      column-gap: 8px;\n      height: unset !important;\n    }\n\n    .lrn_dropzone .lrn_draggable {\n      display: inline-flex;\n      align-items: center;\n      padding: 8px 30px 8px 8px !important;\n      margin-bottom: 4px !important;\n      outline: 1px solid ${colors.BLUE_4} !important;\n      background-color: transparent !important;\n\n      &.lrn_incorrect {\n        outline: 1px solid ${colors.ORANGE_5} !important;\n      }\n\n      &.lrn_correct {\n        outline: 1px solid ${colors.GREEN_5} !important;\n      }\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_classification {\n    .lrn_dropzone .lrn_draggable {\n      &.lrn_correct,\n      &.lrn_incorrect {\n        outline: 1px solid ${colors.BLUE_4} !important;\n      }\n    }\n  }\n\n  .lrn_widget.lrn_association {\n    .lrn_dropzone .lrn_draggable {\n      display: flex;\n      align-items: center;\n      background-color: transparent !important;\n    }\n  }\n\n  &.attempting .lrn_widget.lrn_association {\n    .lrn_dropzone .lrn_draggable {\n      background-color: ${colors.WHITE} !important;\n    }\n  }\n\n  .lrn_widget.lrn_clozeassociation {\n    .lrn_dropzone .lrn_draggable {\n      display: flex;\n      align-items: center;\n      background-color: transparent !important;\n    }\n\n    .lrn_response_input {\n      padding-bottom: 2px !important;\n    }\n  }\n  \n  &.attempting .lrn_widget.lrn_clozeassociation {\n    .lrn_dropzone .lrn_draggable {\n      background-color: ${colors.WHITE} !important;\n    }\n  }\n\n  .lrn_widget.lrn_drawing {\n    .lrn-label span,\n    .lrn_toolbar_small_label {\n      display: none !important;\n    }\n  }\n\n  &.hidden {\n    visibility: hidden;\n  }\n\n  &.correct-answers-hidden {\n    .lrn_correctAnswers {\n      display: none !important;\n    }\n  }\n  \n\n  &.response-hidden .lrn_response_wrapper {\n    display: none;\n  }\n  \n  &.response-code-hidden .lrn_response_wrapper {\n    width: 75%;\n    margin: 0 auto;\n    .lrn_display_correct_answer_enabled {\n      >:not(:first-child) {\n        display: none;\n      }\n        \n      :first-child {\n        font-family: 'UntitledSans-Regular';\n        font-size: 16px !important;\n        line-height: 24px !important;\n        text-align: center;\n        text-wrap: balance;\n      }\n\n      .lrn_textinput {\n        display: none !important;\n      }\n    }\n    \n    :first-child {\n      font-family: 'UntitledSans-Regular';\n      font-size: 16px !important;\n      line-height: 24px !important;\n      text-align: center;\n      text-wrap: balance;\n    }\n      \n    .lrn_correctAnswers {\n      display: none;\n    }\n  }\n\n  &.lesson-overview {\n    .lrn_widget .lrn_question {\n      table {\n        width: calc(100% - 48px) !important;\n        margin-left: 24px !important;\n        border: 0px !important;\n        \n        td {\n          border: 0px !important;\n          width: 100% !important;\n          background-color: transparent !important;\n\n          p {\n            display: flex !important;\n            justify-content: center !important;\n            font-family: \"Athletics-Medium\" !important;\n            font-size: 28px !important;\n            margin-bottom: 32px !important;\n          }\n\n          ul {\n            list-style-type: none;\n            padding-left: 0;\n\n            li {\n              position: relative !important;\n              font-family: \"UntitledSans-Regular\" !important;\n              font-size: 16px !important;\n              margin: 12px 0 !important;\n\n              &::before {\n                content: \"A\";\n                display: inline-block;\n                width: 24px;\n                height: 24px;\n                margin-right: 12px;\n                color: transparent;\n                background-image: url(${ILLUSTRATIONS.BULLET_YELLOW});\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  &.concept-intro {\n    .lrn_widget .lrn_question {\n      .lrn_stimulus {\n        display: flex !important;\n        justify-content: center !important;\n      }\n      .lrn_stimulus_content {\n        width: 75% !important;\n        font-family: \"Athletics-Light\" !important;\n        font-size: 48px !important;\n        line-height: 52px !important;\n        text-align: center;\n        text-wrap: balance;\n\n        * {\n          font-size: 48px !important;\n        }\n      }\n    }\n  }\n\n  &.system-intro .lrn_widget {\n    display: none;\n  }\n`,\n);\n\nconst ItemHeader = styled(FlexView)`\n  position: relative;\n  z-index: 2;\n  padding-right: 8px;\n`;\n\nconst ItemHeaderTag = styled(FlexView)(\n  ({\n    theme: {\n      layout: { gutter },\n      colors,\n    },\n  }) => `\n  position: relative;\n  padding: ${gutter * 1}px ${gutter * 1}px ${gutter * 0.75}px;\n  border-top-left-radius: ${gutter * 0.375}px;\n  border-top-right-radius: ${gutter * 0.5}px;\n  background-color: ${colors.YELLOW_2};\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: calc(100% - 1px);\n    border-bottom: 44px solid ${colors.YELLOW_2};\n    border-right: 24px solid transparent;\n  }\n`,\n);\n\ninterface IQuestionHeaderWrapperProps {\n  $actionbarHeight: number;\n  $topOffset: number;\n}\n\ninterface ICueCanvasWrappperProps {\n  $canScribble: boolean;\n}\n\nconst QuestionHeaderWrapper = styled(FlexView)<IQuestionHeaderWrapperProps>(\n  ({ $topOffset }) => `\n  position: sticky;\n  top: ${$topOffset + QUESTIONS_GAP / 2}px;\n  z-index: 2;\n`,\n);\n\nconst QuestionValidationAnimationWrapper = styled.div`\n  position: absolute;\n  top: -16px;\n  right: -16px;\n  width: 40px;\n  height: 40px;\n`;\n\nconst LessonOverviewBanner = styled.img`\n  display: block;\n  transform: translate(-15px, -15px);\n  width: calc(100% + 30px);\n  border-radius: 12px 12px 0 0;\n  margin-bottom: 18px;\n`;\n\nconst CustomElement = styled.div(\n  ({ theme: { colors } }) => `\n  color: ${colors.BLACK};\n  font-size: 16px;\n  line-height: 1.6em;\n  font-family: 'Noto Serif', serif;\n\n  & > *:not(:last-child) {\n    margin-bottom: 1em;\n  }\n\n  & strong {\n    font-weight: bold;\n  }\n\n  & i {\n    font-style: italic;\n  }\n\n  & ul, ol {\n    list-style-type: initial;\n    padding-left: 1.5em;\n\n    & li:not(:last-child) {\n      margin-bottom: 8px;\n    }\n  }\n\n  & ol {\n    list-style-type: decimal;\n  }\n\n  & ul ul {\n    list-style-type: circle;\n  }\n\n  & img {\n    max-width: 100%;\n    height: inherit;\n  }\n\n  & table {\n    td {\n      padding: 8px;\n    }\n    &:not(.table-no-border) td {\n      border: 1px solid ${colors.REAL_BLACK};\n    }\n  }\n`,\n);\n\nconst Hint = styled(CustomElement)`\n  margin: 8px 0;\n`;\n\nconst Solution = CustomElement;\n\nconst StimulusReview = styled(CustomElement)(\n  ({ theme: { colors } }) => `\n  width: 50%;\n  padding-right: 16px;\n  margin-top: 16px;\n  border-right: 1px solid ${colors.GREY_2};\n  min-height: 100%;\n  align-self: stretch;\n`,\n);\n\nconst CueCanvasWrapper = styled(FlexView)<ICueCanvasWrappperProps>(\n  ({ $canScribble, theme }) => `\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${$canScribble ? theme.zIndex.CANVAS_SCRIBBLING : 1};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n`,\n);\n\nexport {\n  CueCanvasWrapper,\n  CustomElement,\n  Hint,\n  ItemHeader,\n  ItemHeaderTag,\n  LearnosityQuestionContainer,\n  LessonOverviewBanner,\n  QuestionContainer,\n  QuestionContainerWrapper,\n  QuestionHeaderWrapper,\n  QuestionValidationAnimationWrapper,\n  QuestionWrapper,\n  Solution,\n  StimulusReview,\n};\n"],"names":["LearnosityQuestionContainer","styled","$isConceptIntro","$isTeacher","QuestionContainerWrapper","FlexView","$topOffset","TOP_NAVIGATION_HEIGHT","QUESTIONS_GAP","getMinHeightFromString","minHeight","QuestionContainer","theme","$minHeight","$paperColor","$isActive","getQuestionBackgroundImage","getQuestionBorderColor","QuestionWrapper","colors","$dropzoneMinWidth","$dropzoneMinHeight","ILLUSTRATIONS","ItemHeader","ItemHeaderTag","gutter","QuestionHeaderWrapper","QuestionValidationAnimationWrapper","LessonOverviewBanner","CustomElement","Hint","Solution","StimulusReview","CueCanvasWrapper","$canScribble"],"mappings":"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"}

package/dist/index.d.ts

@@ -2957,7 +2957,6 @@ export declare interface IVibrationPattern {
 
 export declare interface IWebViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {
     baseUrl: string;
-    parentDomain: string;
     projectDetails: IMultiplayerWebGameProps | IPuzzleWebGameProps | ILessonWebGameProps;
     playerDetails: IPlayer;
     onBack?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "2.8.33-hg2",
+  "version": "2.8.33",
   "type": "module",
   "files": [
     "dist"