@cuemath/leap 3.2.14-m → 3.2.15-akm-2

package/dist/features/ui/stickers/stickers.js

@@ -0,0 +1,40 @@
+import { jsx as a } from "react/jsx-runtime";
+import { memo as E, useState as I, useLayoutEffect as l } from "react";
+import { STICKER_MIN_SIZE as x, STICKER_MAX_SIZE as D } from "./constants.js";
+import { Container as T, Sticker as _ } from "./stickers-styled.js";
+import { generateStickerData as z } from "./stickers-utils.js";
+const C = ({ stickers: i, effect: t, count: m, duration: r }) => {
+  const [c, s] = I([]);
+  return l(() => {
+    const e = z({
+      count: m,
+      effect: t,
+      stickers: i,
+      minSize: x,
+      maxSize: D
+    });
+    s(e);
+    const o = setTimeout(() => s([]), r);
+    return () => clearTimeout(o);
+  }, [i, t, m, r]), /* @__PURE__ */ a(T, { children: c.map((e) => {
+    const { id: o, sticker: n, x: S, y: k, size: p, fromX: u, fromY: f } = e;
+    return /* @__PURE__ */ a(
+      _,
+      {
+        effect: t,
+        duration: r,
+        fromX: u,
+        fromY: f,
+        x: S,
+        y: k,
+        size: p,
+        children: n
+      },
+      o
+    );
+  }) });
+}, R = E(C);
+export {
+  R as default
+};
+//# sourceMappingURL=stickers.js.map

package/dist/features/ui/stickers/stickers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stickers.js","sources":["../../../../src/features/ui/stickers/stickers.tsx"],"sourcesContent":["import type { StickerDatum, StickersProps } from './stickers-types';\n\nimport React, { memo, useLayoutEffect, useState } from 'react';\n\nimport { STICKER_MAX_SIZE, STICKER_MIN_SIZE } from './constants';\nimport { Container, Sticker } from './stickers-styled';\nimport { generateStickerData } from './stickers-utils';\n\nconst Stickers: React.FC<StickersProps> = ({ stickers, effect, count, duration }) => {\n  const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n  useLayoutEffect(() => {\n    const stickerData = generateStickerData({\n      count,\n      effect,\n      stickers,\n      minSize: STICKER_MIN_SIZE,\n      maxSize: STICKER_MAX_SIZE,\n    });\n\n    setStickersData(stickerData);\n\n    const timeout = setTimeout(() => setStickersData([]), duration);\n\n    return () => clearTimeout(timeout);\n  }, [stickers, effect, count, duration]);\n\n  return (\n    <Container>\n      {stickersData.map((data: StickerDatum) => {\n        const { id, sticker, x, y, size, fromX, fromY } = data;\n\n        return (\n          <Sticker\n            key={id}\n            effect={effect}\n            duration={duration}\n            fromX={fromX}\n            fromY={fromY}\n            x={x}\n            y={y}\n            size={size}\n          >\n            {sticker}\n          </Sticker>\n        );\n      })}\n    </Container>\n  );\n};\n\nexport default memo(Stickers);\n"],"names":["Stickers","stickers","effect","count","duration","stickersData","setStickersData","useState","useLayoutEffect","stickerData","generateStickerData","STICKER_MIN_SIZE","STICKER_MAX_SIZE","timeout","jsx","Container","data","id","sticker","x","y","size","fromX","fromY","Sticker","memo"],"mappings":";;;;;AAQA,MAAMA,IAAoC,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AACnF,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiD,CAAE,CAAA;AAE3F,SAAAC,EAAgB,MAAM;AACpB,UAAMC,IAAcC,EAAoB;AAAA,MACtC,OAAAP;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAASU;AAAA,MACT,SAASC;AAAA,IAAA,CACV;AAED,IAAAN,EAAgBG,CAAW;AAE3B,UAAMI,IAAU,WAAW,MAAMP,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaS,CAAO;AAAA,KAChC,CAACZ,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,GAGnC,gBAAAU,EAAAC,GAAA,EACE,UAAaV,EAAA,IAAI,CAACW,MAAuB;AAClC,UAAA,EAAE,IAAAC,GAAI,SAAAC,GAAS,GAAAC,GAAG,GAAAC,GAAG,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAU,IAAAP;AAGhD,WAAA,gBAAAF;AAAA,MAACU;AAAA,MAAA;AAAA,QAEC,QAAAtB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAkB;AAAA,QACA,OAAAC;AAAA,QACA,GAAAJ;AAAA,QACA,GAAAC;AAAA,QACA,MAAAC;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,MATID;AAAA,IAAA;AAAA,EAYV,CAAA,EACH,CAAA;AAEJ,GAEehB,IAAAwB,EAAKzB,CAAQ;"}

package/dist/features/ui/streak-icon/streak-icon-styled.js

@@ -1,4 +1,4 @@
-import t, { keyframes as o } from "styled-components";
+import i, { keyframes as o } from "styled-components";
 const n = o`
 66%{
   opacity: 0;
@@ -6,29 +6,29 @@ const n = o`
 33%{
   opacity: 1;
 }
-`, a = t.div`
+`, a = i.div`
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  cursor: pointer;
-`, s = t.div`
+  cursor: ${({ isInteractive: t }) => t ? "pointer" : "default"};
+`, s = i.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: i }) => i.colors.BLACK_1};
+  background: ${({ theme: t }) => t.colors.BLACK_1};
   border-radius: 24px;
-`, d = t.div`
+`, d = i.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: i }) => i.colors.RED};
+  background: ${({ theme: t }) => t.colors.RED};
   border-radius: 32px;
   animation: ${n}
-    ${({ $blinkDelay: i, $blinkDuration: e }) => `${e + i}ms linear infinite`};
-`, c = t.div`
+    ${({ $blinkDelay: t, $blinkDuration: e }) => `${e + t}ms linear infinite`};
+`, c = i.div`
   height: 100%;
   width: 100%;
   display: flex;
@@ -38,22 +38,22 @@ const n = o`
   align-self: center;
   padding-top: 6px;
   z-index: 1;
-`, p = t.div`
+`, l = i.div`
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-`, l = t.img`
+`, p = i.img`
   width: 100%;
   height: 100%;
 `;
 export {
   d as StreakBg,
   c as StreakContent,
-  p as StreakImg,
+  l as StreakImg,
   s as StreakStaticBg,
   a as StreakWrapper,
-  l as StyledImg
+  p as StyledImg
 };
 //# sourceMappingURL=streak-icon-styled.js.map

package/dist/features/ui/streak-icon/streak-icon-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAEA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUvBC,IAAiBD,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCL,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAO,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBO,IAAYP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import type { IStreakWrapperProps } from './streak-icon-types';\n\nimport styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div<IStreakWrapperProps>`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')};\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","isInteractive","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAIA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxB,CAAC,EAAE,eAAAC,EAAA,MAAqBA,IAAgB,YAAY,SAAU;AAAA,GAG7DC,IAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCN,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAQ,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBS,IAAYT,EAAO;AAAA;AAAA;AAAA;"}

package/dist/features/ui/streak-icon/streak-icon.js

@@ -1,20 +1,22 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { memo as n } from "react";
-import i from "../../../assets/illustrations/streak-green.svg.js";
-import S from "../../../assets/illustrations/streak-white.svg.js";
-import l from "../text/text.js";
-import { BLINK_DURATION as c, BLINK_DELAY as k } from "./constants.js";
-import { StreakWrapper as p, StreakStaticBg as s, StreakBg as f, StreakContent as d, StreakImg as I, StyledImg as o } from "./streak-icon-styled.js";
-const $ = n(({ value: a, blink: t = !1, ...m }) => /* @__PURE__ */ e(p, { ...m, children: [
-  /* @__PURE__ */ r(s, {}),
-  t && /* @__PURE__ */ r(f, { $blinkDuration: c, $blinkDelay: k }),
-  /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ r(I, { children: t ? /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: i, alt: "Streak" }) }),
-    /* @__PURE__ */ r(l, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
+import { memo as i } from "react";
+import S from "../../../assets/illustrations/streak-green.svg.js";
+import l from "../../../assets/illustrations/streak-white.svg.js";
+import c from "../text/text.js";
+import { BLINK_DURATION as k, BLINK_DELAY as p } from "./constants.js";
+import { StreakWrapper as s, StreakStaticBg as f, StreakBg as d, StreakContent as I, StreakImg as $, StyledImg as o } from "./streak-icon-styled.js";
+const g = i(
+  ({ value: a, blink: t = !1, isInteractive: m = !0, ...n }) => /* @__PURE__ */ e(s, { isInteractive: m, ...n, children: [
+    /* @__PURE__ */ r(f, {}),
+    t && /* @__PURE__ */ r(d, { $blinkDuration: k, $blinkDelay: p }),
+    /* @__PURE__ */ e(I, { children: [
+      /* @__PURE__ */ r($, { children: t ? /* @__PURE__ */ r(o, { src: l, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) }),
+      /* @__PURE__ */ r(c, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
+    ] })
   ] })
-] })), A = $;
+), G = g;
 export {
-  $ as StreakIcon,
-  A as default
+  g as StreakIcon,
+  G as default
 };
 //# sourceMappingURL=streak-icon.js.map

package/dist/features/ui/streak-icon/streak-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(({ value, blink = false, ...rest }) => {\n  return (\n    <S.StreakWrapper {...rest}>\n      <S.StreakStaticBg />\n      {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n      <S.StreakContent>\n        <S.StreakImg>\n          {blink ? (\n            <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n          ) : (\n            <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n          )}\n        </S.StreakImg>\n        <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n          {value}\n        </Text>\n      </S.StreakContent>\n    </S.StreakWrapper>\n  );\n});\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","rest","jsxs","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUa,MAAAA,IAAyCC,EAAK,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,GAAGC,QAElF,gBAAAC,EAAAC,GAAA,EAAiB,GAAGF,GACnB,UAAA;AAAA,EAAC,gBAAAG,EAAAC,GAAA,EAAiB;AAAA,EACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,EAChF,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAL,EAAAM,GAAA,EACE,UAAAV,sBACEW,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,IACA,gBAAAT,EAACU,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHf,EAAA,CAAA;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH,GAEDgB,IAAelB;"}
+{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(\n  ({ value, blink = false, isInteractive = true, ...rest }) => {\n    return (\n      <S.StreakWrapper isInteractive={isInteractive} {...rest}>\n        <S.StreakStaticBg />\n        {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n        <S.StreakContent>\n          <S.StreakImg>\n            {blink ? (\n              <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n            ) : (\n              <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n            )}\n          </S.StreakImg>\n          <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n            {value}\n          </Text>\n        </S.StreakContent>\n      </S.StreakWrapper>\n    );\n  },\n);\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","isInteractive","rest","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","jsxs","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUO,MAAMA,IAAyCC;AAAA,EACpD,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,eAAAC,IAAgB,IAAM,GAAGC,0BAE7CC,GAAA,EAAgB,eAAAF,GAA+B,GAAGC,GACjD,UAAA;AAAA,IAAC,gBAAAE,EAAAC,GAAA,EAAiB;AAAA,IACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,IAChF,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EACE,UAAAX,sBACEY,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,MACA,gBAAAV,EAACW,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHhB,EAAA,CAAA;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAGN,GAEAiB,IAAenB;"}

package/dist/features/ui/text/text.js

@@ -1,50 +1,54 @@
-import k from "styled-components";
-const x = k.div(
+import { useMemo as C } from "react";
+import F from "styled-components";
+import { EDeviceType as y } from "../theme/constants.js";
+const $ = F.div(
   ({
-    theme: f,
-    $renderAs: c,
+    theme: g,
+    $renderAs: t,
     $color: n,
-    $align: y = "left",
-    $width: t,
-    $widthX: o,
-    $marginBottom: e,
-    $marginBottomX: i,
+    $align: T = "left",
+    $width: e,
+    $widthX: f,
+    $marginBottom: o,
+    $marginBottomX: r,
     $alignSelf: l,
-    $opacity: u = 1,
-    $inline: m,
-    $textDecoration: p,
-    $whiteSpace: $
+    $opacity: b = 1,
+    $inline: v,
+    $textDecoration: x,
+    $whiteSpace: a,
+    $renderOnMobileAs: c,
+    $renderOnTabletAs: i
   }) => {
-    const { text: b, colors: r, layout: a } = f, {
-      fontFamily: g,
-      fontSize: d,
-      lineHeight: T,
+    const { text: E, colors: m, layout: u, device: p } = g, L = C(() => p <= y.MOBILE ? c || i || t : p <= y.TABLET && i || t, [p, t, c, i]), {
+      fontFamily: h,
+      fontSize: k,
+      lineHeight: z,
       letterSpacing: s,
-      textTransform: h = "none"
-    } = b[c];
+      textTransform: d = "none"
+    } = E[L];
     return `
-      display: ${m ? "inline-block" : "block"};
-      font-family: ${g};
-      font-size: ${d}px;
-      text-align: ${y};
-      line-height: ${T}px;
-      text-transform: ${h};
+      display: ${v ? "inline-block" : "block"};
+      font-family: ${h};
+      font-size: ${k}px;
+      text-align: ${T};
+      line-height: ${z}px;
+      text-transform: ${d};
       ${typeof s == "number" ? `letter-spacing: ${s}px;` : ""}
-      color: ${n ? r[n] : r.BLACK};
-      opacity: ${u};
-      width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
-      ${o ? `width: ${o * a.gutter}px;` : ""}
-      margin-bottom: ${e ? `${e}` : "initial"}${typeof e == "number" ? "px" : ""};
-      ${i ? `margin-bottom: ${i * a.gutter}px;` : ""}
+      color: ${n ? m[n] : m.BLACK};
+      opacity: ${b};
+      width: ${e ? `${e}` : "auto"}${typeof e == "number" ? "px" : ""};
+      ${f ? `width: ${f * u.gutter}px;` : ""}
+      margin-bottom: ${o ? `${o}` : "initial"}${typeof o == "number" ? "px" : ""};
+      ${r ? `margin-bottom: ${r * u.gutter}px;` : ""}
       ${l ? `align-self: ${l};` : ""}
-      ${p ? `text-decoration: ${p};` : ""}
-      ${$ ? `white-space: ${$};` : ""}
+      ${x ? `text-decoration: ${x};` : ""}
+      ${a ? `white-space: ${a};` : ""}
     `;
   }
 );
-x.displayName = "Text";
-const v = x;
+$.displayName = "Text";
+const M = $;
 export {
-  v as default
+  M as default
 };
 //# sourceMappingURL=text.js.map

package/dist/features/ui/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport styled from 'styled-components';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n  $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n}\n\n/**\n * @param $renderAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n    $whiteSpace,\n  }) => {\n    const { text, colors, layout } = theme;\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[$renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n      ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","text","colors","layout","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";AAsBA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,EAAA,IAAWf,GAC3B;AAAA,MACJ,YAAAgB;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdP,EAAKZ,CAAS;AAEX,WAAA;AAAA,iBACMS,IAAU,iBAAiB,OAAO;AAAA,qBAC9BM,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPd,CAAM;AAAA,qBACLe,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEjB,IAASY,EAAOZ,CAAM,IAAIY,EAAO,KAAK;AAAA,iBACpCL,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUU,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCT,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBQ,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3EP,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAAuB,IAAevB;"}
+{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport { useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport { EDeviceType } from '../theme/constants';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n  $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n  $renderOnMobileAs?: TTextVariants;\n  $renderOnTabletAs?: TTextVariants;\n}\n\n/**\n * @param $renderAs (fallback for any device), @param $renderOnMobileAs, @param $renderOnTabletAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n    $whiteSpace,\n    $renderOnMobileAs,\n    $renderOnTabletAs,\n  }) => {\n    const { text, colors, layout, device } = theme;\n    const renderAs = useMemo(() => {\n      if (device <= EDeviceType.MOBILE) {\n        return $renderOnMobileAs || $renderOnTabletAs || $renderAs;\n      }\n\n      if (device <= EDeviceType.TABLET) {\n        return $renderOnTabletAs || $renderAs;\n      }\n\n      return $renderAs;\n    }, [device, $renderAs, $renderOnMobileAs, $renderOnTabletAs]);\n\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n      ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","$renderOnMobileAs","$renderOnTabletAs","text","colors","layout","device","renderAs","useMemo","EDeviceType","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";;;AA2BA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,QAAAC,MAAWlB,GACnCmB,IAAWC,EAAQ,MACnBF,KAAUG,EAAY,SACjBR,KAAqBC,KAAqBb,IAG/CiB,KAAUG,EAAY,UACjBP,KAAqBb,GAI7B,CAACiB,GAAQjB,GAAWY,GAAmBC,CAAiB,CAAC,GAEtD;AAAA,MACJ,YAAAQ;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdX,EAAKI,CAAQ;AAEV,WAAA;AAAA,iBACMT,IAAU,iBAAiB,OAAO;AAAA,qBAC9BY,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPpB,CAAM;AAAA,qBACLqB,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEvB,IAASc,EAAOd,CAAM,IAAIc,EAAO,KAAK;AAAA,iBACpCP,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUY,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCX,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBU,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3ET,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAA6B,IAAe7B;"}

package/dist/features/ui/theme/constants.js

@@ -1,11 +1,13 @@
-const e = {
+const A = {
   tablet: 760,
   smallDesktop: 920,
   desktop: 1072,
   largeDevice: 1232,
   xlargeDevice: 1424
 };
+var E = /* @__PURE__ */ ((L) => (L[L.MOBILE = 0] = "MOBILE", L[L.TABLET = 1] = "TABLET", L[L.SMALL_DESKTOP = 2] = "SMALL_DESKTOP", L[L.DESKTOP = 3] = "DESKTOP", L[L.LARGE_DEVICE = 4] = "LARGE_DEVICE", L[L.XLARGE_DEVICE = 5] = "XLARGE_DEVICE", L))(E || {});
 export {
-  e as BREAKPOINTS
+  A as BREAKPOINTS,
+  E as EDeviceType
 };
 //# sourceMappingURL=constants.js.map

package/dist/features/ui/theme/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/theme/constants.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  tablet: 760,\n  smallDesktop: 920,\n  desktop: 1072,\n  largeDevice: 1232,\n  xlargeDevice: 1424,\n};\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAChB;"}
+{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/theme/constants.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  tablet: 760,\n  smallDesktop: 920,\n  desktop: 1072,\n  largeDevice: 1232,\n  xlargeDevice: 1424,\n};\n\nexport enum EDeviceType {\n  MOBILE = 0,\n  TABLET = 1,\n  SMALL_DESKTOP = 2,\n  DESKTOP = 3,\n  LARGE_DEVICE = 4,\n  XLARGE_DEVICE = 5,\n}\n"],"names":["BREAKPOINTS","EDeviceType"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAChB;AAEY,IAAAC,sBAAAA,OACVA,EAAAA,EAAA,SAAS,CAAT,IAAA,UACAA,EAAAA,EAAA,SAAS,CAAT,IAAA,UACAA,EAAAA,EAAA,gBAAgB,CAAhB,IAAA,iBACAA,EAAAA,EAAA,UAAU,CAAV,IAAA,WACAA,EAAAA,EAAA,eAAe,CAAf,IAAA,gBACAA,EAAAA,EAAA,gBAAgB,CAAhB,IAAA,iBANUA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/ui/theme/get-device.js

@@ -1,6 +1,6 @@
-import { BREAKPOINTS as r } from "./constants.js";
-const l = (e) => e >= r.xlargeDevice ? "xlarge-device" : e >= r.largeDevice ? "large-device" : e >= r.smallDesktop ? "small-desktop" : e >= r.desktop ? "desktop" : e >= r.tablet ? "tablet" : "mobile";
+import { BREAKPOINTS as E, EDeviceType as e } from "./constants.js";
+const D = (r) => r >= E.xlargeDevice ? e.XLARGE_DEVICE : r >= E.largeDevice ? e.LARGE_DEVICE : r >= E.smallDesktop ? e.SMALL_DESKTOP : r >= E.desktop ? e.DESKTOP : r >= E.tablet ? e.TABLET : e.MOBILE;
 export {
-  l as getDevice
+  D as getDevice
 };
 //# sourceMappingURL=get-device.js.map

package/dist/features/ui/theme/get-device.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-device.js","sources":["../../../../src/features/ui/theme/get-device.ts"],"sourcesContent":["import type { TDeviceType } from '../types';\n\nimport { BREAKPOINTS } from './constants';\n\nexport const getDevice = (width: number): TDeviceType => {\n  if (width >= BREAKPOINTS.xlargeDevice) return 'xlarge-device';\n\n  if (width >= BREAKPOINTS.largeDevice) return 'large-device';\n\n  if (width >= BREAKPOINTS.smallDesktop) return 'small-desktop';\n\n  if (width >= BREAKPOINTS.desktop) return 'desktop';\n\n  if (width >= BREAKPOINTS.tablet) return 'tablet';\n\n  return 'mobile';\n};\n"],"names":["getDevice","width","BREAKPOINTS"],"mappings":";AAIa,MAAAA,IAAY,CAACC,MACpBA,KAASC,EAAY,eAAqB,kBAE1CD,KAASC,EAAY,cAAoB,iBAEzCD,KAASC,EAAY,eAAqB,kBAE1CD,KAASC,EAAY,UAAgB,YAErCD,KAASC,EAAY,SAAe,WAEjC;"}
+{"version":3,"file":"get-device.js","sources":["../../../../src/features/ui/theme/get-device.ts"],"sourcesContent":["import { BREAKPOINTS, EDeviceType } from './constants';\n\nexport const getDevice = (width: number): EDeviceType => {\n  if (width >= BREAKPOINTS.xlargeDevice) return EDeviceType.XLARGE_DEVICE;\n\n  if (width >= BREAKPOINTS.largeDevice) return EDeviceType.LARGE_DEVICE;\n\n  if (width >= BREAKPOINTS.smallDesktop) return EDeviceType.SMALL_DESKTOP;\n\n  if (width >= BREAKPOINTS.desktop) return EDeviceType.DESKTOP;\n\n  if (width >= BREAKPOINTS.tablet) return EDeviceType.TABLET;\n\n  return EDeviceType.MOBILE;\n};\n"],"names":["getDevice","width","BREAKPOINTS","EDeviceType"],"mappings":";AAEa,MAAAA,IAAY,CAACC,MACpBA,KAASC,EAAY,eAAqBC,EAAY,gBAEtDF,KAASC,EAAY,cAAoBC,EAAY,eAErDF,KAASC,EAAY,eAAqBC,EAAY,gBAEtDF,KAASC,EAAY,UAAgBC,EAAY,UAEjDF,KAASC,EAAY,SAAeC,EAAY,SAE7CA,EAAY;"}

package/dist/features/worksheet/worksheet/constants.js

@@ -1,22 +1,22 @@
-const t = 792, e = 1008, s = 30, T = 32, n = 28, I = 48, E = 42, c = 16, a = 56, _ = 0, o = 360, O = 52, N = { left: 0, top: 56 }, R = [
+const t = 792, e = 1008, s = 30, T = 32, n = 28, I = 48, a = 42, c = 16, E = 56, _ = 0, o = 52, O = { left: 0, top: 56 }, N = [
   "practice-basic-optional",
   "practice-regular-optional",
   "advanced-we-do",
   "advanced-your-turn",
   "advanced-explore",
   "advanced-practice"
-], A = 2e3, S = [
+], R = 2e3, S = [
   { name: "CORRECT", url: "https://static.qumath.in/static/intel-student/cmpress/correct-zap.mp3" },
   {
     name: "INCORRECT",
     url: "https://static.qumath.in/static/intel-student/cmpress/incorrect-zap.mp3"
   }
-], i = [
+], A = [
   {
     name: "VALIDATE",
     url: "https://wmznlejcfq.s3.ap-southeast-1.amazonaws.com/static/intel-student/cmpress/validate-zap.mp3"
   }
-], l = [
+], i = [
   {
     label: "Answered all the questions independently.",
     id: "E"
@@ -31,21 +31,20 @@ const t = 792, e = 1008, s = 30, T = 32, n = 28, I = 48, E = 42, c = 16, a = 56,
   }
 ];
 export {
-  a as ACTION_BAR_HEIGHT,
-  A as CLOZE_FORMULA_RESPONSE_LIMIT,
-  N as DESMOS_CALC_POSITION,
-  l as EXIT_TICKET_RATING_OPTIONS,
+  E as ACTION_BAR_HEIGHT,
+  R as CLOZE_FORMULA_RESPONSE_LIMIT,
+  O as DESMOS_CALC_POSITION,
+  i as EXIT_TICKET_RATING_OPTIONS,
   s as INTERSECTION_OBSERVER_THRESHOLD_POINTS,
   T as INTERSECTION_OBSERVER_THROTTLE_TIME,
-  o as LEARNOSITY_KEYBOARD_HEIGHT,
-  R as OPTIONAL_ITEM_TYPES,
+  N as OPTIONAL_ITEM_TYPES,
   c as QUESTIONS_GAP,
   t as QUESTION_WIDTH,
-  O as SIDEBAR_WIDTH,
+  o as SIDEBAR_WIDTH,
   e as SPLIT_QUESTION_WIDTH,
   S as SYSTEM_VALIDATION_AUDIO_LIST,
-  i as TEACHER_VALIDATION_AUDIO_LIST,
-  E as TOP_NAVIGATION_ARROW_WIDTH,
+  A as TEACHER_VALIDATION_AUDIO_LIST,
+  a as TOP_NAVIGATION_ARROW_WIDTH,
   I as TOP_NAVIGATION_HEIGHT,
   _ as WORKSHEET_CONTAINER_BORDER_RADIUS,
   n as WORKSHEET_NUDGE_BANNER_HEIGHT

package/dist/features/worksheet/worksheet/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/features/worksheet/worksheet/constants.ts"],"sourcesContent":["import type { QUESTIONS_RATING, TItemType } from './worksheet-types';\n\nexport const QUESTION_WIDTH = 792;\nexport const SPLIT_QUESTION_WIDTH = 1008; // 1024 - 16\nexport const INTERSECTION_OBSERVER_THRESHOLD_POINTS = 30;\nexport const INTERSECTION_OBSERVER_THROTTLE_TIME = 32; // in ms, 2 frames\nexport const WORKSHEET_NUDGE_BANNER_HEIGHT = 28;\n\nexport const TOP_NAVIGATION_HEIGHT = 48;\nexport const TOP_NAVIGATION_ARROW_WIDTH = 42;\n\nexport const QUESTIONS_GAP = 16;\nexport const ACTION_BAR_HEIGHT = 56;\nexport const WORKSHEET_CONTAINER_BORDER_RADIUS = 0;\nexport const LEARNOSITY_KEYBOARD_HEIGHT = 360;\nexport const SIDEBAR_WIDTH = 52;\n\nexport const DESMOS_CALC_POSITION = { left: 0, top: 56 };\n\nexport const OPTIONAL_ITEM_TYPES: TItemType[] = [\n  'practice-basic-optional',\n  'practice-regular-optional',\n  'advanced-we-do',\n  'advanced-your-turn',\n  'advanced-explore',\n  'advanced-practice',\n];\nexport const CLOZE_FORMULA_RESPONSE_LIMIT = 2000;\n\nexport const SYSTEM_VALIDATION_AUDIO_LIST = [\n  { name: 'CORRECT', url: 'https://static.qumath.in/static/intel-student/cmpress/correct-zap.mp3' },\n  {\n    name: 'INCORRECT',\n    url: 'https://static.qumath.in/static/intel-student/cmpress/incorrect-zap.mp3',\n  },\n];\nexport const TEACHER_VALIDATION_AUDIO_LIST = [\n  {\n    name: 'VALIDATE',\n    url: 'https://wmznlejcfq.s3.ap-southeast-1.amazonaws.com/static/intel-student/cmpress/validate-zap.mp3',\n  },\n];\n\nexport const EXIT_TICKET_RATING_OPTIONS: Array<{\n  label: string;\n  id: keyof typeof QUESTIONS_RATING;\n}> = [\n  {\n    label: 'Answered all the questions independently.',\n    id: 'E',\n  },\n  {\n    label: 'Needed some help to answer the questions.',\n    id: 'S',\n  },\n  {\n    label: 'Needed a lot of help to answer the questions.',\n    id: 'H',\n  },\n];\n"],"names":["QUESTION_WIDTH","SPLIT_QUESTION_WIDTH","INTERSECTION_OBSERVER_THRESHOLD_POINTS","INTERSECTION_OBSERVER_THROTTLE_TIME","WORKSHEET_NUDGE_BANNER_HEIGHT","TOP_NAVIGATION_HEIGHT","TOP_NAVIGATION_ARROW_WIDTH","QUESTIONS_GAP","ACTION_BAR_HEIGHT","WORKSHEET_CONTAINER_BORDER_RADIUS","LEARNOSITY_KEYBOARD_HEIGHT","SIDEBAR_WIDTH","DESMOS_CALC_POSITION","OPTIONAL_ITEM_TYPES","CLOZE_FORMULA_RESPONSE_LIMIT","SYSTEM_VALIDATION_AUDIO_LIST","TEACHER_VALIDATION_AUDIO_LIST","EXIT_TICKET_RATING_OPTIONS"],"mappings":"AAEO,MAAMA,IAAiB,KACjBC,IAAuB,MACvBC,IAAyC,IACzCC,IAAsC,IACtCC,IAAgC,IAEhCC,IAAwB,IACxBC,IAA6B,IAE7BC,IAAgB,IAChBC,IAAoB,IACpBC,IAAoC,GACpCC,IAA6B,KAC7BC,IAAgB,IAEhBC,IAAuB,EAAE,MAAM,GAAG,KAAK,GAAG,GAE1CC,IAAmC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACaC,IAA+B,KAE/BC,IAA+B;AAAA,EAC1C,EAAE,MAAM,WAAW,KAAK,wEAAwE;AAAA,EAChG;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF,GACaC,IAAgC;AAAA,EAC3C;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF,GAEaC,IAGR;AAAA,EACH;AAAA,IACE,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AACF;"}
+{"version":3,"file":"constants.js","sources":["../../../../src/features/worksheet/worksheet/constants.ts"],"sourcesContent":["import type { QUESTIONS_RATING, TItemType } from './worksheet-types';\n\nexport const QUESTION_WIDTH = 792;\nexport const SPLIT_QUESTION_WIDTH = 1008; // 1024 - 16\nexport const INTERSECTION_OBSERVER_THRESHOLD_POINTS = 30;\nexport const INTERSECTION_OBSERVER_THROTTLE_TIME = 32; // in ms, 2 frames\nexport const WORKSHEET_NUDGE_BANNER_HEIGHT = 28;\n\nexport const TOP_NAVIGATION_HEIGHT = 48;\nexport const TOP_NAVIGATION_ARROW_WIDTH = 42;\n\nexport const QUESTIONS_GAP = 16;\nexport const ACTION_BAR_HEIGHT = 56;\nexport const WORKSHEET_CONTAINER_BORDER_RADIUS = 0;\nexport const SIDEBAR_WIDTH = 52;\n\nexport const DESMOS_CALC_POSITION = { left: 0, top: 56 };\n\nexport const OPTIONAL_ITEM_TYPES: TItemType[] = [\n  'practice-basic-optional',\n  'practice-regular-optional',\n  'advanced-we-do',\n  'advanced-your-turn',\n  'advanced-explore',\n  'advanced-practice',\n];\nexport const CLOZE_FORMULA_RESPONSE_LIMIT = 2000;\n\nexport const SYSTEM_VALIDATION_AUDIO_LIST = [\n  { name: 'CORRECT', url: 'https://static.qumath.in/static/intel-student/cmpress/correct-zap.mp3' },\n  {\n    name: 'INCORRECT',\n    url: 'https://static.qumath.in/static/intel-student/cmpress/incorrect-zap.mp3',\n  },\n];\nexport const TEACHER_VALIDATION_AUDIO_LIST = [\n  {\n    name: 'VALIDATE',\n    url: 'https://wmznlejcfq.s3.ap-southeast-1.amazonaws.com/static/intel-student/cmpress/validate-zap.mp3',\n  },\n];\n\nexport const EXIT_TICKET_RATING_OPTIONS: Array<{\n  label: string;\n  id: keyof typeof QUESTIONS_RATING;\n}> = [\n  {\n    label: 'Answered all the questions independently.',\n    id: 'E',\n  },\n  {\n    label: 'Needed some help to answer the questions.',\n    id: 'S',\n  },\n  {\n    label: 'Needed a lot of help to answer the questions.',\n    id: 'H',\n  },\n];\n"],"names":["QUESTION_WIDTH","SPLIT_QUESTION_WIDTH","INTERSECTION_OBSERVER_THRESHOLD_POINTS","INTERSECTION_OBSERVER_THROTTLE_TIME","WORKSHEET_NUDGE_BANNER_HEIGHT","TOP_NAVIGATION_HEIGHT","TOP_NAVIGATION_ARROW_WIDTH","QUESTIONS_GAP","ACTION_BAR_HEIGHT","WORKSHEET_CONTAINER_BORDER_RADIUS","SIDEBAR_WIDTH","DESMOS_CALC_POSITION","OPTIONAL_ITEM_TYPES","CLOZE_FORMULA_RESPONSE_LIMIT","SYSTEM_VALIDATION_AUDIO_LIST","TEACHER_VALIDATION_AUDIO_LIST","EXIT_TICKET_RATING_OPTIONS"],"mappings":"AAEO,MAAMA,IAAiB,KACjBC,IAAuB,MACvBC,IAAyC,IACzCC,IAAsC,IACtCC,IAAgC,IAEhCC,IAAwB,IACxBC,IAA6B,IAE7BC,IAAgB,IAChBC,IAAoB,IACpBC,IAAoC,GACpCC,IAAgB,IAEhBC,IAAuB,EAAE,MAAM,GAAG,KAAK,GAAG,GAE1CC,IAAmC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACaC,IAA+B,KAE/BC,IAA+B;AAAA,EAC1C,EAAE,MAAM,WAAW,KAAK,wEAAwE;AAAA,EAChG;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF,GACaC,IAAgC;AAAA,EAC3C;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF,GAEaC,IAGR;AAAA,EACH;AAAA,IACE,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AACF;"}

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

@@ -1,21 +1,21 @@
-import { jsx as v } from "react/jsx-runtime";
-import { memo as R, useRef as E, useCallback as A, useEffect as m } from "react";
+import { jsx as L } from "react/jsx-runtime";
+import { memo as M, useRef as y, useCallback as R, useEffect as m } from "react";
 import g from "../hooks/use-learnosity-append.js";
-import { LearnosityQuestionContainer as b } from "./worksheet-question-styled.js";
-const N = R(
+import { LearnosityQuestionContainer as O } from "./worksheet-question-styled.js";
+const Q = ["numberline", "imageclozeassociationV2"], $ = M(
   ({
-    signedRequest: S,
+    signedRequest: v,
     appended: o,
     canRender: I,
     canForceAppend: a,
     question: t,
     response: s,
-    learnosity: w,
-    isConceptIntro: M,
+    learnosity: _,
+    isConceptIntro: A,
     simState: c,
-    onMediaStateChange: _
+    onMediaStateChange: w
   }) => {
-    const l = E(null), n = E(s), { forceAppend: p } = g(S), d = A(
+    const l = y(null), n = y(s), { forceAppend: p } = g(v), d = R(
       (e) => {
         const { source: r, data: i } = e, { type: u } = i ?? {};
         u === "SIM_IS_READY" ? r.postMessage(
@@ -27,10 +27,10 @@ const N = R(
             }
           },
           "*"
-        ) : u === "SIM_STATE_UPDATE" && _(t, "SIMULATION", e.data.payload);
+        ) : u === "SIM_STATE_UPDATE" && w(t, "SIMULATION", e.data.payload);
       },
-      [a, c, _, t]
-    ), y = A(
+      [a, c, w, t]
+    ), E = R(
       (e) => {
         window.requestAnimationFrame(() => {
           var i, u, T;
@@ -40,20 +40,20 @@ const N = R(
           }), (T = l.current) == null || T.append(r), p({
             question: t,
             response: e,
-            removeOldElements: t.type === "numberline" ? "before" : "after",
+            removeOldElements: Q.includes(t.type) ? "before" : "after",
             callback: (f) => {
-              f || (n.current && n.current !== e ? y(n.current) : n.current = void 0);
+              f || (n.current && n.current !== e ? E(n.current) : n.current = void 0);
             }
           });
         });
       },
       [p, t]
-    ), L = E(!1);
+    ), S = y(!1);
     return m(() => {
       let e;
-      return I && (L.current || (e = window.requestAnimationFrame(() => {
+      return I && (S.current || (e = window.requestAnimationFrame(() => {
         const r = n.current ?? s;
-        L.current = !0, w.appendQuestion({
+        S.current = !0, _.appendQuestion({
           questions: [t],
           ...r ? {
             responses: {
@@ -67,7 +67,7 @@ const N = R(
       }))), () => {
         e && window.cancelAnimationFrame(e);
       };
-    }, [I, w, t, s]), m(() => {
+    }, [I, _, t, s]), m(() => {
       var e;
       return o && (n.current = void 0, (e = l.current) != null && e.querySelector("iframe") && window.addEventListener("message", d)), () => {
         window.removeEventListener("message", d);
@@ -85,19 +85,19 @@ const N = R(
         ));
       }
     }, [o, a, c]), m(() => {
-      o && s && a && s !== n.current && (n.current ? n.current = s : (n.current = s, y(s)));
-    }, [o, a, s, y]), /* @__PURE__ */ v(
-      b,
+      o && s && a && s !== n.current && (n.current ? n.current = s : (n.current = s, E(s)));
+    }, [o, a, s, E]), /* @__PURE__ */ L(
+      O,
       {
         ref: l,
-        $isConceptIntro: M,
+        $isConceptIntro: A,
         $isTeacher: a,
-        children: /* @__PURE__ */ v("div", { className: `learnosity-response question-${t.response_id}` })
+        children: /* @__PURE__ */ L("div", { className: `learnosity-response question-${t.response_id}` })
       }
     );
   }
 );
 export {
-  N as default
+  $ as default
 };
 //# sourceMappingURL=learnosity-question.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"learnosity-question.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-question/learnosity-question.tsx"],"sourcesContent":["import type { ILearnosityQuestionResponse } from '../worksheet-types';\nimport type { ILearnosityQuestionProps } from './worksheet-question-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport useLearnosityAppend from '../hooks/use-learnosity-append';\nimport * as Styled from './worksheet-question-styled';\n\nconst LearnosityQuestion: FC<ILearnosityQuestionProps> = memo(\n  ({\n    signedRequest,\n    appended,\n    canRender,\n    canForceAppend,\n    question,\n    response,\n    learnosity,\n    isConceptIntro,\n    simState,\n    onMediaStateChange,\n  }) => {\n    const containerElementRef = useRef<HTMLDivElement>(null);\n    const latestQuestionResponseRef = useRef<ILearnosityQuestionResponse | undefined>(response);\n    const { forceAppend } = useLearnosityAppend(signedRequest);\n\n    const handleSimIframeMessage = useCallback(\n      (event: MessageEvent) => {\n        const { source, data } = event;\n        const { type } = data ?? ({} as { type: string });\n\n        if (type === 'SIM_IS_READY') {\n          (source as Window).postMessage(\n            {\n              type: 'SIMULATION_CONFIG',\n              payload: {\n                userRole: canForceAppend ? 'teacher' : 'student',\n                simulationState: simState,\n              },\n            },\n            '*',\n          );\n        } else if (type === 'SIM_STATE_UPDATE') {\n          onMediaStateChange(question, 'SIMULATION', event.data.payload);\n        }\n      },\n      [canForceAppend, simState, onMediaStateChange, question],\n    );\n\n    const updateResponse = useCallback(\n      (newResponse: ILearnosityQuestionResponse) => {\n        window.requestAnimationFrame(() => {\n          const questionElement = document.createElement('div');\n\n          questionElement.classList.add('learnosity-response');\n          questionElement.classList.add(`question-${question.response_id}`);\n          // Drawing questions looks for already appended path elements with id, if present it will not append the path, to overcome this issue we are adding temp to the id\n          containerElementRef.current?.children[0]\n            ?.querySelectorAll('.lrn_drawing svg path')\n            .forEach(path => {\n              path.id = `${path.id} + temp`;\n            });\n\n          containerElementRef.current?.append(questionElement);\n          forceAppend({\n            question,\n            response: newResponse,\n            removeOldElements: question.type === 'numberline' ? 'before' : 'after',\n            callback: error => {\n              if (error) return;\n\n              if (\n                latestQuestionResponseRef.current &&\n                latestQuestionResponseRef.current !== newResponse\n              )\n                updateResponse(latestQuestionResponseRef.current);\n              else latestQuestionResponseRef.current = undefined;\n            },\n          });\n        });\n      },\n      [forceAppend, question],\n    );\n\n    const appendQuestionCalledRef = useRef(false);\n\n    useEffect(() => {\n      let requestId: number;\n\n      if (canRender) {\n        if (!appendQuestionCalledRef.current) {\n          requestId = window.requestAnimationFrame(() => {\n            const appenndableResponse = latestQuestionResponseRef.current ?? response;\n\n            appendQuestionCalledRef.current = true;\n            learnosity.appendQuestion({\n              questions: [question],\n              ...(appenndableResponse\n                ? {\n                    responses: {\n                      [question.response_id]: {\n                        // Learnosity is mutating the response object, so we need to clone it\n                        ...appenndableResponse,\n                      },\n                    },\n                  }\n                : {}),\n            });\n          });\n        }\n      }\n\n      return () => {\n        if (requestId) window.cancelAnimationFrame(requestId);\n      };\n    }, [canRender, learnosity, question, response]);\n\n    useEffect(() => {\n      if (appended) {\n        latestQuestionResponseRef.current = undefined;\n\n        if (containerElementRef.current?.querySelector('iframe')) {\n          window.addEventListener('message', handleSimIframeMessage);\n        }\n      }\n\n      return () => {\n        window.removeEventListener('message', handleSimIframeMessage);\n      };\n    }, [appended, handleSimIframeMessage]);\n\n    useEffect(() => {\n      if (simState && appended) {\n        const simIframe = containerElementRef.current?.querySelector('iframe');\n\n        if (simIframe) {\n          simIframe.contentWindow?.postMessage(\n            {\n              type: 'SIM_STATE_UPDATE',\n              payload: simState,\n            },\n            '*',\n          );\n        }\n      }\n    }, [appended, canForceAppend, simState]);\n\n    useEffect(() => {\n      if (appended && response && canForceAppend) {\n        if (response !== latestQuestionResponseRef.current) {\n          if (!latestQuestionResponseRef.current) {\n            latestQuestionResponseRef.current = response;\n            updateResponse(response);\n          } else {\n            latestQuestionResponseRef.current = response;\n          }\n        }\n      }\n    }, [appended, canForceAppend, response, updateResponse]);\n\n    return (\n      <Styled.LearnosityQuestionContainer\n        ref={containerElementRef}\n        $isConceptIntro={isConceptIntro}\n        $isTeacher={canForceAppend}\n      >\n        <div className={`learnosity-response question-${question.response_id}`} />\n      </Styled.LearnosityQuestionContainer>\n    );\n  },\n);\n\nexport default LearnosityQuestion;\n"],"names":["LearnosityQuestion","memo","signedRequest","appended","canRender","canForceAppend","question","response","learnosity","isConceptIntro","simState","onMediaStateChange","containerElementRef","useRef","latestQuestionResponseRef","forceAppend","useLearnosityAppend","handleSimIframeMessage","useCallback","event","source","data","type","updateResponse","newResponse","questionElement","_b","_a","path","_c","error","appendQuestionCalledRef","useEffect","requestId","appenndableResponse","simIframe","jsx","Styled.LearnosityQuestionContainer"],"mappings":"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"}
+{"version":3,"file":"learnosity-question.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-question/learnosity-question.tsx"],"sourcesContent":["import type { ILearnosityQuestionResponse } from '../worksheet-types';\nimport type { ILearnosityQuestionProps } from './worksheet-question-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport useLearnosityAppend from '../hooks/use-learnosity-append';\nimport * as Styled from './worksheet-question-styled';\n\nconst REMOVE_BEFORE_QUESTIONS = ['numberline', 'imageclozeassociationV2'];\n\nconst LearnosityQuestion: FC<ILearnosityQuestionProps> = memo(\n  ({\n    signedRequest,\n    appended,\n    canRender,\n    canForceAppend,\n    question,\n    response,\n    learnosity,\n    isConceptIntro,\n    simState,\n    onMediaStateChange,\n  }) => {\n    const containerElementRef = useRef<HTMLDivElement>(null);\n    const latestQuestionResponseRef = useRef<ILearnosityQuestionResponse | undefined>(response);\n    const { forceAppend } = useLearnosityAppend(signedRequest);\n\n    const handleSimIframeMessage = useCallback(\n      (event: MessageEvent) => {\n        const { source, data } = event;\n        const { type } = data ?? ({} as { type: string });\n\n        if (type === 'SIM_IS_READY') {\n          (source as Window).postMessage(\n            {\n              type: 'SIMULATION_CONFIG',\n              payload: {\n                userRole: canForceAppend ? 'teacher' : 'student',\n                simulationState: simState,\n              },\n            },\n            '*',\n          );\n        } else if (type === 'SIM_STATE_UPDATE') {\n          onMediaStateChange(question, 'SIMULATION', event.data.payload);\n        }\n      },\n      [canForceAppend, simState, onMediaStateChange, question],\n    );\n\n    const updateResponse = useCallback(\n      (newResponse: ILearnosityQuestionResponse) => {\n        window.requestAnimationFrame(() => {\n          const questionElement = document.createElement('div');\n\n          questionElement.classList.add('learnosity-response');\n          questionElement.classList.add(`question-${question.response_id}`);\n          // Drawing questions looks for already appended path elements with id, if present it will not append the path, to overcome this issue we are adding temp to the id\n          containerElementRef.current?.children[0]\n            ?.querySelectorAll('.lrn_drawing svg path')\n            .forEach(path => {\n              path.id = `${path.id} + temp`;\n            });\n\n          containerElementRef.current?.append(questionElement);\n          forceAppend({\n            question,\n            response: newResponse,\n            removeOldElements: REMOVE_BEFORE_QUESTIONS.includes(question.type) ? 'before' : 'after',\n            callback: error => {\n              if (error) return;\n\n              if (\n                latestQuestionResponseRef.current &&\n                latestQuestionResponseRef.current !== newResponse\n              )\n                updateResponse(latestQuestionResponseRef.current);\n              else latestQuestionResponseRef.current = undefined;\n            },\n          });\n        });\n      },\n      [forceAppend, question],\n    );\n\n    const appendQuestionCalledRef = useRef(false);\n\n    useEffect(() => {\n      let requestId: number;\n\n      if (canRender) {\n        if (!appendQuestionCalledRef.current) {\n          requestId = window.requestAnimationFrame(() => {\n            const appenndableResponse = latestQuestionResponseRef.current ?? response;\n\n            appendQuestionCalledRef.current = true;\n            learnosity.appendQuestion({\n              questions: [question],\n              ...(appenndableResponse\n                ? {\n                    responses: {\n                      [question.response_id]: {\n                        // Learnosity is mutating the response object, so we need to clone it\n                        ...appenndableResponse,\n                      },\n                    },\n                  }\n                : {}),\n            });\n          });\n        }\n      }\n\n      return () => {\n        if (requestId) window.cancelAnimationFrame(requestId);\n      };\n    }, [canRender, learnosity, question, response]);\n\n    useEffect(() => {\n      if (appended) {\n        latestQuestionResponseRef.current = undefined;\n\n        if (containerElementRef.current?.querySelector('iframe')) {\n          window.addEventListener('message', handleSimIframeMessage);\n        }\n      }\n\n      return () => {\n        window.removeEventListener('message', handleSimIframeMessage);\n      };\n    }, [appended, handleSimIframeMessage]);\n\n    useEffect(() => {\n      if (simState && appended) {\n        const simIframe = containerElementRef.current?.querySelector('iframe');\n\n        if (simIframe) {\n          simIframe.contentWindow?.postMessage(\n            {\n              type: 'SIM_STATE_UPDATE',\n              payload: simState,\n            },\n            '*',\n          );\n        }\n      }\n    }, [appended, canForceAppend, simState]);\n\n    useEffect(() => {\n      if (appended && response && canForceAppend) {\n        if (response !== latestQuestionResponseRef.current) {\n          if (!latestQuestionResponseRef.current) {\n            latestQuestionResponseRef.current = response;\n            updateResponse(response);\n          } else {\n            latestQuestionResponseRef.current = response;\n          }\n        }\n      }\n    }, [appended, canForceAppend, response, updateResponse]);\n\n    return (\n      <Styled.LearnosityQuestionContainer\n        ref={containerElementRef}\n        $isConceptIntro={isConceptIntro}\n        $isTeacher={canForceAppend}\n      >\n        <div className={`learnosity-response question-${question.response_id}`} />\n      </Styled.LearnosityQuestionContainer>\n    );\n  },\n);\n\nexport default LearnosityQuestion;\n"],"names":["REMOVE_BEFORE_QUESTIONS","LearnosityQuestion","memo","signedRequest","appended","canRender","canForceAppend","question","response","learnosity","isConceptIntro","simState","onMediaStateChange","containerElementRef","useRef","latestQuestionResponseRef","forceAppend","useLearnosityAppend","handleSimIframeMessage","useCallback","event","source","data","type","updateResponse","newResponse","questionElement","_b","_a","path","_c","error","appendQuestionCalledRef","useEffect","requestId","appenndableResponse","simIframe","jsx","Styled.LearnosityQuestionContainer"],"mappings":"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"}