@cuemath/leap 3.2.15-link.1 → 3.2.16-pzd-beta-0.1

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

@@ -1,21 +1,23 @@
-import { jsx as v } from "react/jsx-runtime";
-import { memo as R, useRef as E, useCallback as A, 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 { jsx as L } from "react/jsx-runtime";
+import { memo as O, useRef as y, useCallback as R, useEffect as m } from "react";
+import $ from "../hooks/use-learnosity-append.js";
+import { LearnosityQuestionContainer as Q } from "./worksheet-question-styled.js";
+const b = ["numberline", "imageclozeassociationV2"], z = O(
   ({
-    signedRequest: S,
+    signedRequest: g,
     appended: o,
     canRender: I,
     canForceAppend: a,
     question: t,
     response: s,
-    learnosity: w,
-    isConceptIntro: M,
+    learnosity: _,
+    isConceptIntro: v,
     simState: c,
-    onMediaStateChange: _
+    onMediaStateChange: w,
+    imageHue: A,
+    isPuzzle: M
   }) => {
-    const l = E(null), n = E(s), { forceAppend: p } = g(S), d = A(
+    const l = y(null), n = y(s), { forceAppend: p } = $(g), d = R(
       (e) => {
         const { source: r, data: i } = e, { type: u } = i ?? {};
         u === "SIM_IS_READY" ? r.postMessage(
@@ -27,10 +29,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 +42,20 @@ const N = R(
           }), (T = l.current) == null || T.append(r), p({
             question: t,
             response: e,
-            removeOldElements: t.type === "numberline" ? "before" : "after",
+            removeOldElements: b.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 +69,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 +87,21 @@ 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(
+      Q,
       {
         ref: l,
-        $isConceptIntro: M,
+        $isConceptIntro: v,
         $isTeacher: a,
-        children: /* @__PURE__ */ v("div", { className: `learnosity-response question-${t.response_id}` })
+        $imageHue: A,
+        $isPuzzle: M,
+        children: /* @__PURE__ */ L("div", { className: `learnosity-response question-${t.response_id}` })
       }
     );
   }
 );
 export {
-  N as default
+  z 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    imageHue,\n    isPuzzle,\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        $imageHue={imageHue}\n        $isPuzzle={isPuzzle}\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","imageHue","isPuzzle","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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"}

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

@@ -1,10 +1,11 @@
-import n from "styled-components";
-import { ILLUSTRATIONS as l } from "../../../../assets/illustrations/illustrations.js";
-import e from "../../../ui/layout/flex-view.js";
-import { TOP_NAVIGATION_HEIGHT as d, QUESTIONS_GAP as a } from "../constants.js";
-import { getQuestionBackgroundImage as _, getQuestionBorderColor as m } from "../worksheet-helpers.js";
-const h = n.div(
-  ({ $isConceptIntro: t, $isTeacher: r }) => `
+import i from "styled-components";
+import { ILLUSTRATIONS as _ } from "../../../../assets/illustrations/illustrations.js";
+import { getPuzzleCardPattern as m } from "../../../puzzles/utils/puzzle-pattern.js";
+import o from "../../../ui/layout/flex-view.js";
+import { TOP_NAVIGATION_HEIGHT as g, QUESTIONS_GAP as d } from "../constants.js";
+import { getQuestionBackgroundImage as c, getQuestionBorderColor as s, getPuzzleWorksheetBackgroundColor as l } from "../worksheet-helpers.js";
+const w = i.div(
+  ({ $isConceptIntro: t, $isTeacher: r, theme: n, $imageHue: a = "BLUE", $isPuzzle: e }) => `
   position: relative;
   z-index: 1;
   & > div:not(:first-child) {
@@ -17,25 +18,78 @@ const h = n.div(
         right: 0;
         bottom: ${r ? 140 : 180}px;
       ` : ""}
+  ${e ? `
+      width: 420px;
+      min-height: 504px;
+      padding: 20px 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      margin: 40px auto 0;
+      box-shadow: inset 0px 0px 0px 4px ${n.colors[`${a}_4`]};
+      background: ${n.colors.WHITE_1};
+      
+      & * {
+        font-family: Athletics-Regular !important;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: ${`url(${m(a)})`};
+        background-size: cover;
+        opacity: 0.1;
+      }
+
+      .lrn_stimulus_content {
+        display: flex;
+        justify-content: center;
+      }
+
+      .lrn_stimulus_content img {
+        width: 270px;
+        height: 270px;
+        margin-bottom: 0;
+      }
+      
+      .lrn_response_wrapper  .lrn_response_math.lrn_response_input, 
+      .lrn_response_wrapper  .lrn_response_math.lrn_response_input p {
+        line-height: 1.5 !important;
+      }
+    ` : ""}
 `
-), E = n(e)(
+), k = i(o)(
   ({ $topOffset: t }) => `
-  scroll-margin-top: ${(t ?? 0) + d + a}px;
+  scroll-margin-top: ${(t ?? 0) + g + d}px;
 `
-), g = (t) => t.startsWith("calc(") ? t.replace(")", " - 32px)") : t, $ = n(e)(
-  ({ theme: t, $minHeight: r, $paperColor: i, $isActive: p }) => `
+), x = (t) => t.startsWith("calc(") ? t.replace(")", " - 32px)") : t, R = i(o)(
+  ({ theme: t, $minHeight: r, $paperColor: n, $isActive: a, $imageHue: e }) => `
     position: relative;
     padding: 15px 15px 55px 15px;
-    background-image: ${i && i !== "white" ? `url(${_(i)})` : "none"};
-    background-repeat: repeat;
-    min-height: ${typeof r == "number" ? `${r}px` : g(r)};
+
+    
+    min-height: ${typeof r == "number" ? `${r}px` : x(r)};
     transition: opacity 0.15s;
-    border-radius: 12px;
-    border: 1px solid ${i ? t.colors[m(i, p)] : "transparent"};
-    ${i ? "" : "padding-right: 0;"}
+    ${e ? `
+          border: 1px solid ${t.colors[l(e)]};
+          border-top: none;
+          border-bottom: none;
+          background-color: ${t.colors[l(e)]};
+        ` : `
+          border-radius: 12px;
+          background-image: ${n && n !== "white" ? `url(${c(n)})` : "none"};
+          background-repeat: repeat;
+          border: 1px solid ${n ? t.colors[s(n, a)] : "transparent"};
+      `}
+    ${n ? "" : "padding-right: 0;"}
 `
-), f = n.div(
-  ({ theme: { colors: t }, $dropzoneMinWidth: r, $dropzoneMinHeight: i }) => `
+), y = i.div(
+  ({ theme: { colors: t }, $dropzoneMinWidth: r, $dropzoneMinHeight: n }) => `
   height: 100%;
   min-height: inherit;
 
@@ -104,9 +158,9 @@ const h = n.div(
               width: ${r}px !important;
               max-width: ${r}px !important;
             ` : ""}
-      ${i > 0 ? `
-              min-height: ${i}px !important;
-              height: ${i}px !important;
+      ${n > 0 ? `
+              min-height: ${n}px !important;
+              height: ${n}px !important;
             ` : ""}
 
       &:not(.lrn_disabled):hover {
@@ -951,7 +1005,7 @@ const h = n.div(
                 height: 24px;
                 margin-right: 12px;
                 color: transparent;
-                background-image: url(${l.BULLET_YELLOW});
+                background-image: url(${_.BULLET_YELLOW});
               }
             }
           }
@@ -985,11 +1039,11 @@ const h = n.div(
     display: none;
   }
 `
-), w = n(e)`
+), G = i(o)`
   position: relative;
   z-index: 2;
   padding-right: 8px;
-`, R = n(e)(
+`, L = i(o)(
   ({
     theme: {
       layout: { gutter: t },
@@ -1012,25 +1066,25 @@ const h = n.div(
     border-right: 24px solid transparent;
   }
 `
-), k = n(e)(
+), N = i(o)(
   ({ $topOffset: t }) => `
   position: sticky;
-  top: ${t + a / 2}px;
+  top: ${t + d / 2}px;
   z-index: 2;
 `
-), G = n.div`
+), B = i.div`
   position: absolute;
   top: -16px;
   right: -16px;
   width: 40px;
   height: 40px;
-`, L = n.img`
+`, A = i.img`
   display: block;
   transform: translate(-15px, -15px);
   width: calc(100% + 30px);
   border-radius: 12px 12px 0 0;
   margin-bottom: 18px;
-`, o = n.div(
+`, p = i.div(
   ({ theme: { colors: t } }) => `
   color: ${t.BLACK};
   font-size: 16px;
@@ -1080,9 +1134,9 @@ const h = n.div(
     }
   }
 `
-), y = n(o)`
+), U = i(p)`
   margin: 8px 0;
-`, N = o, A = n(o)(
+`, v = p, z = i(p)(
   ({ theme: { colors: t } }) => `
   width: 50%;
   padding-right: 16px;
@@ -1091,7 +1145,7 @@ const h = n.div(
   min-height: 100%;
   align-self: stretch;
 `
-), B = n(e)(
+), O = i(o)(
   ({ $canScribble: t, theme: r }) => `
   position: absolute;
   top: 0;
@@ -1103,19 +1157,19 @@ const h = n.div(
 `
 );
 export {
-  B as CueCanvasWrapper,
-  o as CustomElement,
-  y as Hint,
-  w as ItemHeader,
-  R as ItemHeaderTag,
-  h as LearnosityQuestionContainer,
-  L as LessonOverviewBanner,
-  $ as QuestionContainer,
-  E as QuestionContainerWrapper,
-  k as QuestionHeaderWrapper,
-  G as QuestionValidationAnimationWrapper,
-  f as QuestionWrapper,
-  N as Solution,
-  A as StimulusReview
+  O as CueCanvasWrapper,
+  p as CustomElement,
+  U as Hint,
+  G as ItemHeader,
+  L as ItemHeaderTag,
+  w as LearnosityQuestionContainer,
+  A as LessonOverviewBanner,
+  R as QuestionContainer,
+  k as QuestionContainerWrapper,
+  N as QuestionHeaderWrapper,
+  B as QuestionValidationAnimationWrapper,
+  y as QuestionWrapper,
+  v as Solution,
+  z as StimulusReview
 };
 //# sourceMappingURL=worksheet-question-styled.js.map

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    \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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"}
+{"version":3,"file":"worksheet-question-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-question/worksheet-question-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../../ui/types';\nimport type { TWorksheetQuestionPaperColor } from './worksheet-question-types';\n\nimport styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport { getPuzzleCardPattern } from '../../../puzzles/utils/puzzle-pattern';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { QUESTIONS_GAP, TOP_NAVIGATION_HEIGHT } from '../constants';\nimport {\n  getPuzzleWorksheetBackgroundColor,\n  getQuestionBackgroundImage,\n  getQuestionBorderColor,\n} from '../worksheet-helpers';\n\nconst LearnosityQuestionContainer = styled.div<{\n  $isConceptIntro: boolean;\n  $isTeacher: boolean;\n  $imageHue?: THueNames;\n  $isPuzzle?: boolean;\n}>(\n  ({ $isConceptIntro, $isTeacher, theme, $imageHue = 'BLUE', $isPuzzle }) => `\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    $isPuzzle\n      ? `\n      width: 420px;\n      min-height: 504px;\n      padding: 20px 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      margin: 40px auto 0;\n      box-shadow: inset 0px 0px 0px 4px ${theme.colors[`${$imageHue}_4`]};\n      background: ${theme.colors.WHITE_1};\n      \n      & * {\n        font-family: Athletics-Regular !important;\n      }\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-image: ${`url(${getPuzzleCardPattern($imageHue)})`};\n        background-size: cover;\n        opacity: 0.1;\n      }\n\n      .lrn_stimulus_content {\n        display: flex;\n        justify-content: center;\n      }\n\n      .lrn_stimulus_content img {\n        width: 270px;\n        height: 270px;\n        margin-bottom: 0;\n      }\n      \n      .lrn_response_wrapper  .lrn_response_math.lrn_response_input, \n      .lrn_response_wrapper  .lrn_response_math.lrn_response_input p {\n        line-height: 1.5 !important;\n      }\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  $imageHue?: THueNames;\n}\n\nconst QuestionContainer = styled(FlexView)<IQuestionContainerProps>(\n  ({ theme, $minHeight, $paperColor, $isActive, $imageHue }) => `\n    position: relative;\n    padding: 15px 15px 55px 15px;\n\n    \n    min-height: ${\n      typeof $minHeight === 'number' ? `${$minHeight}px` : getMinHeightFromString($minHeight)\n    };\n    transition: opacity 0.15s;\n    ${\n      !$imageHue\n        ? `\n          border-radius: 12px;\n          background-image: ${\n            $paperColor && $paperColor !== 'white'\n              ? `url(${getQuestionBackgroundImage($paperColor)})`\n              : 'none'\n          };\n          background-repeat: repeat;\n          border: 1px solid ${\n            $paperColor\n              ? theme.colors[getQuestionBorderColor($paperColor, $isActive)]\n              : 'transparent'\n          };\n      `\n        : `\n          border: 1px solid ${theme.colors[getPuzzleWorksheetBackgroundColor($imageHue)]};\n          border-top: none;\n          border-bottom: none;\n          background-color: ${theme.colors[getPuzzleWorksheetBackgroundColor($imageHue)]};\n        `\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","theme","$imageHue","$isPuzzle","getPuzzleCardPattern","QuestionContainerWrapper","FlexView","$topOffset","TOP_NAVIGATION_HEIGHT","QUESTIONS_GAP","getMinHeightFromString","minHeight","QuestionContainer","$minHeight","$paperColor","$isActive","getPuzzleWorksheetBackgroundColor","getQuestionBackgroundImage","getQuestionBorderColor","QuestionWrapper","colors","$dropzoneMinWidth","$dropzoneMinHeight","ILLUSTRATIONS","ItemHeader","ItemHeaderTag","gutter","QuestionHeaderWrapper","QuestionValidationAnimationWrapper","LessonOverviewBanner","CustomElement","Hint","Solution","StimulusReview","CueCanvasWrapper","$canScribble"],"mappings":"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"}