@cuemath/leap 3.2.34-mb → 3.2.34-mbx

package/dist/assets/line-icons/icons/info.js.map

@@ -1 +1 @@
-{"version":3,"file":"info.js","sources":["../../../../src/assets/line-icons/icons/info.tsx"],"sourcesContent":["const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M12.0003 20.3334C16.6027 20.3334 20.3337 16.6025 20.3337 12.0001C20.3337 7.39771 16.6027 3.66675 12.0003 3.66675C7.39795 3.66675 3.66699 7.39771 3.66699 12.0001C3.66699 16.6025 7.39795 20.3334 12.0003 20.3334Z\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.66667\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n    <path\n      d=\"M12 15.3333V12\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.66667\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"round\"\n    />\n    <path\n      d=\"M12 8.66675H12.0083\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.08\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport default InfoIcon;\n"],"names":["InfoIcon","props","jsxs","jsx","InfoIcon$1"],"mappings":";AAAA,MAAMA,IAAoD,CACxDC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACL,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}
+{"version":3,"file":"info.js","sources":["../../../../src/assets/line-icons/icons/info.tsx"],"sourcesContent":["const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M12.0003 20.3334C16.6027 20.3334 20.3337 16.6025 20.3337 12.0001C20.3337 7.39771 16.6027 3.66675 12.0003 3.66675C7.39795 3.66675 3.66699 7.39771 3.66699 12.0001C3.66699 16.6025 7.39795 20.3334 12.0003 20.3334Z\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.66667\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n    <path\n      d=\"M12 15.3333V12\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.66667\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"round\"\n    />\n    <path\n      d=\"M12 8.66675H12.0083\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.08\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport default InfoIcon;\n"],"names":["InfoIcon","props","jsxs","jsx","StickerIcon"],"mappings":";AAAA,MAAMA,IAAoD,CACxDC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACL,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}

package/dist/features/chapters/lpar-chapter/block-section/sat-sheet-item/sat-sheet-summary/question-overview.js

@@ -1,13 +1,13 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { memo as a } from "react";
 import h from "../../../../../../assets/line-icons/icons/info.js";
-import f from "../../../../../ui/arrow-tooltip/arrow-tooltip.js";
-import y from "../../../../../ui/buttons/text-button/text-button.js";
+import y from "../../../../../ui/arrow-tooltip/arrow-tooltip.js";
+import f from "../../../../../ui/buttons/text-button/text-button.js";
 import { ZINDEX as p } from "../../../../../ui/constants/z-index.js";
 import o from "../../../../../ui/layout/flex-view.js";
 import i from "../../../../../ui/text/text.js";
 import { SAT_TEST_QUESTION_STATUS as $ } from "../../../constants/index.js";
-import { FlexText as A, StyledCheckIcon as I, StyledCrossIcon as T, StyledMinusIcon as b, TableRow as d, StyledTableBody as S } from "./sat-sheet-summary-styled.js";
+import { FlexText as A, StyledCheckIcon as S, StyledCrossIcon as T, StyledMinusIcon as b, TableRow as d, StyledTableBody as I } from "./sat-sheet-summary-styled.js";
 const { CORRECT: g, INCORRECT: C, UNSCORED: x } = $, w = [
   {
     key: "section-column",
@@ -29,35 +29,35 @@ const { CORRECT: g, INCORRECT: C, UNSCORED: x } = $, w = [
     label: "Action",
     centerAlign: !0
   }
-], R = "Unscored questions are those which do not impact your final mark, so it does not matter if you get them right or wrong.", _ = a(({ status: r }) => r === x ? /* @__PURE__ */ c(A, { $renderAs: "body2", $align: "center", $opacity: 0.5, children: [
+], k = "Unscored questions are those which do not impact your final mark, so it does not matter if you get them right or wrong.", R = a(({ status: r }) => r === x ? /* @__PURE__ */ c(A, { $renderAs: "body2", $align: "center", $opacity: 0.5, children: [
   "Unscored",
   " ",
   /* @__PURE__ */ e(
-    f,
+    y,
     {
       renderAs: "primary",
       position: "bottom",
-      tooltipItem: R,
+      tooltipItem: k,
       zIndex: p.SAT_SUMMARY_SCORE,
       widthX: 19.6025,
       children: /* @__PURE__ */ e(h, {})
     }
   )
-] }) : r === g ? /* @__PURE__ */ e(I, {}) : r === C ? /* @__PURE__ */ e(T, {}) : /* @__PURE__ */ e(b, {})), X = ({ questionByQuestionList: r, onReview: m }) => /* @__PURE__ */ c(o, { $flexGapX: 1, children: [
+] }) : r === g ? /* @__PURE__ */ e(S, {}) : r === C ? /* @__PURE__ */ e(T, {}) : /* @__PURE__ */ e(b, {})), X = ({ questionByQuestionList: r, onReview: m }) => /* @__PURE__ */ c(o, { $flexGapX: 1, children: [
   /* @__PURE__ */ e(i, { $renderAs: "eyebrow2", children: "Question by question overview" }),
   /* @__PURE__ */ c("table", { children: [
     /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e(d, { children: w.map((l) => {
-      const { key: n, label: t, centerAlign: s } = l;
-      return /* @__PURE__ */ e("th", { children: /* @__PURE__ */ e(i, { $renderAs: "body2", $opacity: 0.5, $align: s ? "center" : "left", children: t }) }, n);
+      const { key: t, label: n, centerAlign: s } = l;
+      return /* @__PURE__ */ e("th", { children: /* @__PURE__ */ e(i, { $renderAs: "body2", $opacity: 0.5, $align: s ? "center" : "left", children: n }) }, t);
     }) }) }),
-    /* @__PURE__ */ e(S, { children: r.map((l) => {
-      const { question_no: n, section: t, score: s, user_node_id: u } = l;
+    /* @__PURE__ */ e(I, { children: r.map((l) => {
+      const { question_no: t, section: n, score: s, user_node_id: u } = l;
       return /* @__PURE__ */ c(d, { children: [
-        /* @__PURE__ */ e(i, { $renderAs: "body2", children: t }),
-        /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(i, { $renderAs: "cta2", $align: "center", children: n }) }),
-        /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(_, { status: s }) }),
-        /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(y, { label: "Review", onClick: () => m(u, n - 1) }) })
-      ] }, `${n}_${t}`);
+        /* @__PURE__ */ e(i, { $renderAs: "body2", children: n }),
+        /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(i, { $renderAs: "cta2", $align: "center", children: t }) }),
+        /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(R, { status: s }) }),
+        /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(f, { label: "Review", onClick: () => m(u, t - 1) }) })
+      ] }, `${t}_${n}`);
     }) })
   ] })
 ] });

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.js

@@ -3,7 +3,7 @@ import g from "../../../../../assets/line-icons/icons/chevron-down.js";
 import $ from "../../../../../assets/line-icons/icons/info.js";
 import i from "../../../../ui/layout/flex-view.js";
 import s from "../../../../ui/text/text.js";
-const f = x`
+const m = x`
   0% {
     opacity: 0;
   }
@@ -12,7 +12,7 @@ const f = x`
   }
 `, v = r(i)`
   position: relative;
-  animation: ${f} 0.3s ease-in-out;
+  animation: ${m} 0.3s ease-in-out;
 `;
 r(g)(({ theme: o, $expanded: t }) => {
   const {
@@ -129,7 +129,7 @@ const A = r.div(({ theme: o }) => {
     position: absolute;
     inset: 50%;
     transform: translate(-50%, -50%) rotate(-90deg);
-  `), W = r.circle(
+  `), S = r.circle(
   ({ theme: o, $progressCircle: t, $progress: e, $progressBackground: n }) => {
     const { colors: p, layout: l } = o, { GREY_2: c } = p, { gutter: a } = l, d = a * 12.5, u = t ? d - e : e;
     return `
@@ -148,7 +148,7 @@ r(s)(({ theme: o, $backgroundColor: t }) => `
   `);
 export {
   G as ChapterProgressSVG,
-  W as ChapterProgressSVGCircle,
+  S as ChapterProgressSVGCircle,
   C as Content,
   k as ContentWrapper,
   v as MainContainer,

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-styled.js

@@ -1,10 +1,10 @@
 import t from "styled-components";
-import n from "../../../../../../assets/line-icons/icons/info.js";
+import p from "../../../../../../assets/line-icons/icons/info.js";
 import e from "../../../../../ui/layout/flex-view.js";
 import r from "../../../../../ui/text/text.js";
 const m = t(e)`
   transform: translateY(2px);
-`, f = t(r)(() => `
+`, c = t(r)(() => `
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -25,7 +25,7 @@ t(e)(({ theme: o }) => {
     grid-row-gap: ${i * 0.625}px;
   `;
 });
-t(n)(
+t(p)(
   () => `
     position: relative;
     cursor: pointer;
@@ -33,6 +33,6 @@ t(n)(
 );
 export {
   m as NumbersWrapper,
-  f as StyledText
+  c as StyledText
 };
 //# sourceMappingURL=outcome-styled.js.map

package/dist/features/sheets/sheets-list/sheet-item/sheet-item-styled.js

@@ -1,7 +1,7 @@
 import e from "styled-components";
-import s from "../../../../assets/line-icons/icons/info.js";
+import i from "../../../../assets/line-icons/icons/info.js";
 import p from "../../../ui/layout/flex-view.js";
-import i from "../../../ui/text/text.js";
+import s from "../../../ui/text/text.js";
 const x = e(p)(({
   theme: t,
   $disabled: o
@@ -29,11 +29,11 @@ const x = e(p)(({
       flex-grow: 1;
       opacity: ${t ? 0.5 : 1};
     `), y = e.img(
-  ({ theme: t, $gutter: o, $gap: r, $width: n, $height: c }) => {
-    const { gutter: a } = t.layout;
+  ({ theme: t, $gutter: o, $gap: r, $width: n, $height: a }) => {
+    const { gutter: c } = t.layout;
     return `
-      width: ${n || a * 3}px;
-      height: ${c || a * 2.75}px;
+      width: ${n || c * 3}px;
+      height: ${a || c * 2.75}px;
       padding: ${r || 0}px ${o || 0}px;
     `;
   }
@@ -43,7 +43,7 @@ const x = e(p)(({
     display: flex;
     gap: ${o * 0.25}px;
   `;
-}), f = e(i)(({ theme: t }) => {
+}), f = e(s)(({ theme: t }) => {
   const { gutter: o } = t.layout, { GREY_1: r } = t.colors;
   return `
     padding: ${o * 0.5}px;
@@ -52,7 +52,7 @@ const x = e(p)(({
     font-weight: 700;
     font-size: ${o * 0.625}px;
   `;
-}), S = e(s)(({ theme: t }) => `
+}), S = e(i)(({ theme: t }) => `
     transform: rotate(180deg);
     
     path {

package/dist/features/stickers/sticker-selector/sticker-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { IStickerSelectorProps, IStickerData } from './sticker-selector-types';\n\nimport React, { memo, useCallback, useMemo } from 'react';\n\nimport useInClassMessageBroker from '../../communication/hooks/use-inclass-message-broker/use-inclass-message-broker';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport { stickerData } from '../sticker-data';\nimport StickerSelectorGrid from './sticker-selector-grid';\n\nconst StickerSelector: React.FC<IStickerSelectorProps> = ({\n  triggerNode,\n  studentClassroomId,\n  gridConfig,\n  tooltipConfig,\n  visible,\n}) => {\n  const { columns = 4, gap = 8, stickerSize = 48 } = gridConfig;\n  const {\n    isAnimated,\n    arrowColor,\n    arrowSize,\n    arrowXCoOrdinates,\n    arrowYCoOrdinates,\n    backgroundColor,\n    borderColor,\n    position = 'bottom',\n    renderAs = 'primary',\n    textVariant,\n    tooltipOffset,\n    tooltipXCoOrdinates,\n    tooltipYCoOrdinates,\n    width,\n    widthX,\n    zIndex,\n    parentWidth,\n    isBlocking = false,\n  } = tooltipConfig;\n  const { publish } = useInClassMessageBroker({ studentClassroomId });\n\n  const handleSend = useCallback(\n    (sticker: IStickerData) =>\n      publish?.({\n        eventName: 'TEACHER_BADGE',\n        eventPayload: {\n          data: {\n            selectedBadge: { id: sticker.id, name: sticker.name },\n            badgeId: sticker.id,\n          },\n        },\n      }),\n    [publish],\n  );\n\n  const tooltipItem = useMemo(\n    () => (\n      <StickerSelectorGrid\n        stickers={stickerData}\n        columns={columns}\n        gap={gap}\n        stickerSize={stickerSize}\n        onStickerClick={handleSend}\n      />\n    ),\n    [columns, gap, handleSend, stickerSize],\n  );\n\n  return (\n    <ArrowTooltip\n      children={triggerNode}\n      alwaysVisible\n      hidden={!visible}\n      tooltipItem={tooltipItem}\n      renderAs={renderAs}\n      position={position}\n      isBlocking={isBlocking}\n      isAnimated={isAnimated}\n      zIndex={zIndex}\n      width={width}\n      widthX={widthX}\n      parentWidth={parentWidth}\n      backgroundColor={backgroundColor}\n      borderColor={borderColor}\n      textVariant={textVariant}\n      tooltipOffset={tooltipOffset}\n      arrowColor={arrowColor}\n      arrowSize={arrowSize}\n      arrowXCoOrdinates={arrowXCoOrdinates}\n      arrowYCoOrdinates={arrowYCoOrdinates}\n      tooltipXCoOrdinates={tooltipXCoOrdinates}\n      tooltipYCoOrdinates={tooltipYCoOrdinates}\n    />\n  );\n};\n\nexport default memo(StickerSelector);\n"],"names":["StickerSelector","triggerNode","studentClassroomId","gridConfig","tooltipConfig","visible","columns","gap","stickerSize","isAnimated","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","position","renderAs","textVariant","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","publish","useInClassMessageBroker","handleSend","useCallback","sticker","tooltipItem","useMemo","jsx","StickerSelectorGrid","stickerData","ArrowTooltip","stickerSelector","memo"],"mappings":";;;;;;AASA,MAAMA,IAAmD,CAAC;AAAA,EACxD,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,IAAU,GAAG,KAAAC,IAAM,GAAG,aAAAC,IAAc,GAAO,IAAAL,GAC7C;AAAA,IACJ,YAAAM;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,EACX,IAAAtB,GACE,EAAE,SAAAuB,EAAQ,IAAIC,EAAwB,EAAE,oBAAA1B,EAAoB,CAAA,GAE5D2B,IAAaC;AAAA,IACjB,CAACC,MACCJ,KAAA,gBAAAA,EAAU;AAAA,MACR,WAAW;AAAA,MACX,cAAc;AAAA,QACZ,MAAM;AAAA,UACJ,eAAe,EAAE,IAAII,EAAQ,IAAI,MAAMA,EAAQ,KAAK;AAAA,UACpD,SAASA,EAAQ;AAAA,QACnB;AAAA,MACF;AAAA,IAAA;AAAA,IAEJ,CAACJ,CAAO;AAAA,EAAA,GAGJK,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUC;AAAA,QACV,SAAA9B;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBqB;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,CAACvB,GAASC,GAAKsB,GAAYrB,CAAW;AAAA,EAAA;AAItC,SAAA,gBAAA0B;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,UAAUpC;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACI;AAAA,MACT,aAAA2B;AAAA,MACA,UAAAf;AAAA,MACA,UAAAD;AAAA,MACA,YAAAU;AAAA,MACA,YAAAjB;AAAA,MACA,QAAAe;AAAA,MACA,OAAAF;AAAA,MACA,QAAAC;AAAA,MACA,aAAAE;AAAA,MACA,iBAAAX;AAAA,MACA,aAAAC;AAAA,MACA,aAAAG;AAAA,MACA,eAAAC;AAAA,MACA,YAAAT;AAAA,MACA,WAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,qBAAAO;AAAA,MACA,qBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeiB,IAAAC,EAAKvC,CAAe;"}
+{"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { IStickerSelectorProps, IStickerData } from './sticker-selector-types';\n\nimport React, { memo, useCallback, useMemo } from 'react';\n\nimport useInClassMessageBroker from '../../communication/hooks/use-inclass-message-broker/use-inclass-message-broker';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport { stickerData } from '../sticker-data';\nimport StickerSelectorGrid from './sticker-selector-grid';\n\nconst StickersSelector: React.FC<IStickerSelectorProps> = ({\n  triggerNode,\n  studentClassroomId,\n  gridConfig,\n  tooltipConfig,\n  visible,\n}) => {\n  const { columns = 4, gap = 8, stickerSize = 48 } = gridConfig;\n  const {\n    isAnimated,\n    arrowColor,\n    arrowSize,\n    arrowXCoOrdinates,\n    arrowYCoOrdinates,\n    backgroundColor,\n    borderColor,\n    position = 'bottom',\n    renderAs = 'primary',\n    textVariant,\n    tooltipOffset,\n    tooltipXCoOrdinates,\n    tooltipYCoOrdinates,\n    width,\n    widthX,\n    zIndex,\n    parentWidth,\n    isBlocking = false,\n  } = tooltipConfig;\n  const { publish } = useInClassMessageBroker({ studentClassroomId });\n\n  const handleSend = useCallback(\n    (sticker: IStickerData) =>\n      publish?.({\n        eventName: 'TEACHER_BADGE',\n        eventPayload: {\n          data: {\n            selectedBadge: { id: sticker.id, name: sticker.name },\n            badgeId: sticker.id,\n          },\n        },\n      }),\n    [publish],\n  );\n\n  const tooltipItem = useMemo(\n    () => (\n      <StickerSelectorGrid\n        stickers={stickerData}\n        columns={columns}\n        gap={gap}\n        stickerSize={stickerSize}\n        onStickerClick={handleSend}\n      />\n    ),\n    [columns, gap, handleSend, stickerSize],\n  );\n\n  return (\n    <ArrowTooltip\n      children={triggerNode}\n      alwaysVisible\n      hidden={!visible}\n      tooltipItem={tooltipItem}\n      renderAs={renderAs}\n      position={position}\n      isBlocking={isBlocking}\n      isAnimated={isAnimated}\n      zIndex={zIndex}\n      width={width}\n      widthX={widthX}\n      parentWidth={parentWidth}\n      backgroundColor={backgroundColor}\n      borderColor={borderColor}\n      textVariant={textVariant}\n      tooltipOffset={tooltipOffset}\n      arrowColor={arrowColor}\n      arrowSize={arrowSize}\n      arrowXCoOrdinates={arrowXCoOrdinates}\n      arrowYCoOrdinates={arrowYCoOrdinates}\n      tooltipXCoOrdinates={tooltipXCoOrdinates}\n      tooltipYCoOrdinates={tooltipYCoOrdinates}\n    />\n  );\n};\n\nexport default memo(StickersSelector);\n"],"names":["StickersSelector","triggerNode","studentClassroomId","gridConfig","tooltipConfig","visible","columns","gap","stickerSize","isAnimated","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","position","renderAs","textVariant","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","publish","useInClassMessageBroker","handleSend","useCallback","sticker","tooltipItem","useMemo","jsx","StickerSelectorGrid","stickerData","ArrowTooltip","StickerSelector","memo"],"mappings":";;;;;;AASA,MAAMA,IAAoD,CAAC;AAAA,EACzD,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,IAAU,GAAG,KAAAC,IAAM,GAAG,aAAAC,IAAc,GAAO,IAAAL,GAC7C;AAAA,IACJ,YAAAM;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,EACX,IAAAtB,GACE,EAAE,SAAAuB,EAAQ,IAAIC,EAAwB,EAAE,oBAAA1B,EAAoB,CAAA,GAE5D2B,IAAaC;AAAA,IACjB,CAACC,MACCJ,KAAA,gBAAAA,EAAU;AAAA,MACR,WAAW;AAAA,MACX,cAAc;AAAA,QACZ,MAAM;AAAA,UACJ,eAAe,EAAE,IAAII,EAAQ,IAAI,MAAMA,EAAQ,KAAK;AAAA,UACpD,SAASA,EAAQ;AAAA,QACnB;AAAA,MACF;AAAA,IAAA;AAAA,IAEJ,CAACJ,CAAO;AAAA,EAAA,GAGJK,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUC;AAAA,QACV,SAAA9B;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBqB;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,CAACvB,GAASC,GAAKsB,GAAYrB,CAAW;AAAA,EAAA;AAItC,SAAA,gBAAA0B;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,UAAUpC;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACI;AAAA,MACT,aAAA2B;AAAA,MACA,UAAAf;AAAA,MACA,UAAAD;AAAA,MACA,YAAAU;AAAA,MACA,YAAAjB;AAAA,MACA,QAAAe;AAAA,MACA,OAAAF;AAAA,MACA,QAAAC;AAAA,MACA,aAAAE;AAAA,MACA,iBAAAX;AAAA,MACA,aAAAC;AAAA,MACA,aAAAG;AAAA,MACA,eAAAC;AAAA,MACA,YAAAT;AAAA,MACA,WAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,qBAAAO;AAAA,MACA,qBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeiB,IAAAC,EAAKvC,CAAgB;"}

package/dist/features/worksheet/worksheet/worksheet-sidebar/question-guide.js

@@ -1,80 +1,119 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { memo as L, useState as T, useCallback as h, useMemo as v, useRef as H, useEffect as X } from "react";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { memo as V, useState as p, useCallback as s, useMemo as m, useRef as w, useEffect as W } from "react";
+import Y from "../../../stickers/sticker-selector/sticker-selector.js";
+import { useTrialSessionContext as M } from "../../../trial-session/context/use-trial-session-context.js";
 import $ from "../../../ui/buttons/clickable/clickable.js";
-import c from "../../../ui/layout/flex-view.js";
-import y from "../../../ui/separator/separator.js";
-import u from "../../../ui/text/text.js";
-import N from "../../constants/events.js";
-import { GuideContainer as P, HintIcon as V, SolIcon as j, Pointer as x, SectionContainer as B, Section as W, CloseIcon as K, Guide as M } from "./worksheet-sidebar-styled.js";
-const Z = L(
-  ({ questionWidth: f, questions: _, activeQuestionIndex: O, learnosity: S, actionbarHeight: p, loggerRef: l }) => {
-    var C;
-    const [t, s] = T(), [k, A] = T({
+import i from "../../../ui/layout/flex-view.js";
+import O from "../../../ui/separator/separator.js";
+import d from "../../../ui/text/text.js";
+import R from "../../constants/events.js";
+import { StickersIcon as q, GuideContainer as z, HintIcon as U, SolIcon as D, Pointer as F, SectionContainer as Q, Section as J, CloseIcon as Z, Guide as ee } from "./worksheet-sidebar-styled.js";
+const he = V(
+  ({ questionWidth: C, questions: A, activeQuestionIndex: G, learnosity: b, actionbarHeight: I, loggerRef: a }) => {
+    var _;
+    const [t, h] = p(), [L, X] = p({
       top: 0,
       left: 0
-    }), { top: g, left: b } = k, R = h(() => {
-      s("HINT"), l.current(N.WORKSHEET_V3_HINT_SEEN);
-    }, [l]), w = h(() => {
-      s("SOL"), l.current(N.WORKSHEET_V3_SOLUTION_SEEN);
-    }, [l]), G = h(() => {
-      s(() => {
+    }), [g, v] = p(!1), { studentId: T } = M(), { top: E, left: k } = L;
+    console.log("id", T);
+    const y = s(() => {
+      h("HINT"), a.current(R.WORKSHEET_V3_HINT_SEEN);
+    }, [a]), x = s(() => {
+      h("SOL"), a.current(R.WORKSHEET_V3_SOLUTION_SEEN);
+    }, [a]), B = s(() => {
+      h(() => {
       });
-    }, []), { hints: n, solution: d } = ((C = _[O]) == null ? void 0 : C.metadata) || {}, o = v(() => t === void 0 ? void 0 : t === "HINT" ? n : d, [t, n, d]), E = H(null), I = H(null), m = h((a) => {
-      if (a.current) {
-        const i = a.current.getBoundingClientRect();
-        A({
-          top: i.top + i.height / 2 - 8,
-          left: i.right - 78
+    }, []), S = s(() => {
+      v((c) => !c);
+    }, []), { hints: n, solution: u } = ((_ = A[G]) == null ? void 0 : _.metadata) || {}, r = m(() => t === void 0 ? void 0 : t === "HINT" ? n : u, [t, n, u]), H = w(null), N = w(null), f = s((c) => {
+      if (c.current) {
+        const l = c.current.getBoundingClientRect();
+        X({
+          top: l.top + l.height / 2 - 8,
+          left: l.right - 78
           // 52px (sidebar width) + 16px (gutter) + 10px
         });
       }
-    }, []);
-    return t && o && S && S.renderMath("mathjax"), X(() => {
-      t === "HINT" ? m(I) : t === "SOL" ? m(E) : o || s(void 0);
-    }, [t, m, o]), /* @__PURE__ */ r(P, { $background: "WHITE", children: [
-      /* @__PURE__ */ e($, { label: "hints", onClick: R, disabled: !n, children: /* @__PURE__ */ r(c, { $alignItems: "center", $justifyContent: "center", ref: I, children: [
-        /* @__PURE__ */ e(V, { width: 32, height: 32, $disabled: !n }),
-        /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "HINT" }),
-        /* @__PURE__ */ e(c, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(y, { width: 24, height: 1, background: "GREY_2" }) })
+    }, []), j = m(
+      () => /* @__PURE__ */ e($, { label: "teacher-badges", onClick: S, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", children: [
+        /* @__PURE__ */ e(q, { width: 32, height: 32, $disabled: !g }),
+        /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: g ? "BLACK" : "GREY_4", children: "STICKERS" }),
+        /* @__PURE__ */ e(i, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(O, { width: 24, height: 1, background: "GREY_2" }) })
       ] }) }),
-      /* @__PURE__ */ e($, { label: "solution", onClick: w, disabled: !d, children: /* @__PURE__ */ r(c, { $alignItems: "center", $justifyContent: "center", ref: E, children: [
-        /* @__PURE__ */ e(j, { width: 32, height: 32, $disabled: !d }),
-        /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "SOL" })
+      [g, S]
+    ), K = m(
+      () => ({
+        stickerSize: 48,
+        columns: 4,
+        gap: 8
+      }),
+      []
+    ), P = m(
+      () => ({
+        position: "bottom",
+        zIndex: 1e3,
+        arrowXCoOrdinates: 87.5,
+        tooltipXCoOrdinates: "-32.5%"
+      }),
+      []
+    );
+    return t && r && b && b.renderMath("mathjax"), W(() => {
+      t === "HINT" ? f(N) : t === "SOL" ? f(H) : r || h(void 0);
+    }, [t, f, r]), /* @__PURE__ */ o(z, { $background: "WHITE", children: [
+      /* @__PURE__ */ e(
+        Y,
+        {
+          triggerNode: j,
+          studentClassroomId: T,
+          gridConfig: K,
+          tooltipConfig: P,
+          visible: g,
+          onToggle: S
+        }
+      ),
+      /* @__PURE__ */ e($, { label: "hints", onClick: y, disabled: !n, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", ref: N, children: [
+        /* @__PURE__ */ e(U, { width: 32, height: 32, $disabled: !n }),
+        /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "HINT" }),
+        /* @__PURE__ */ e(i, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(O, { width: 24, height: 1, background: "GREY_2" }) })
+      ] }) }),
+      /* @__PURE__ */ e($, { label: "solution", onClick: x, disabled: !u, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", ref: H, children: [
+        /* @__PURE__ */ e(D, { width: 32, height: 32, $disabled: !u }),
+        /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "SOL" })
       ] }) }),
-      t && g && b && /* @__PURE__ */ e(x, { topValue: g, leftValue: b }),
+      t && E && k && /* @__PURE__ */ e(F, { topValue: E, leftValue: k }),
       t && /* @__PURE__ */ e(
-        B,
+        Q,
         {
           $background: "WHITE",
-          $questionWidth: f,
-          $actionbarHeight: p,
+          $questionWidth: C,
+          $actionbarHeight: I,
           $borderRadius: 10,
-          children: /* @__PURE__ */ r(
-            W,
+          children: /* @__PURE__ */ o(
+            J,
             {
               $gutterX: 1,
               $gapX: 1,
-              $questionWidth: f,
-              $actionbarHeight: p,
+              $questionWidth: C,
+              $actionbarHeight: I,
               children: [
-                /* @__PURE__ */ e($, { label: "close", onClick: G, children: /* @__PURE__ */ e(K, {}) }),
-                /* @__PURE__ */ e(c, { $gutterX: 0.5, children: /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
-                o && o.map((a, i) => /* @__PURE__ */ r(c, { $gutterX: 0.5, $gapX: 0.5, children: [
-                  o.length > 1 && /* @__PURE__ */ r(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
+                /* @__PURE__ */ e($, { label: "close", onClick: B, children: /* @__PURE__ */ e(Z, {}) }),
+                /* @__PURE__ */ e(i, { $gutterX: 0.5, children: /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
+                r && r.map((c, l) => /* @__PURE__ */ o(i, { $gutterX: 0.5, $gapX: 0.5, children: [
+                  r.length > 1 && /* @__PURE__ */ o(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
                     t,
                     " ",
-                    i + 1,
+                    l + 1,
                     ":"
                   ] }),
                   /* @__PURE__ */ e(
-                    M,
+                    ee,
                     {
                       dangerouslySetInnerHTML: {
-                        __html: a
+                        __html: c
                       }
                     }
                   )
-                ] }, i.toString()))
+                ] }, l.toString()))
               ]
             }
           )
@@ -84,6 +123,6 @@ const Z = L(
   }
 );
 export {
-  Z as default
+  he as default
 };
 //# sourceMappingURL=question-guide.js.map

package/dist/features/worksheet/worksheet/worksheet-sidebar/question-guide.js.map

@@ -1 +1 @@
-{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\n\nimport React, { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport {\n  Section,\n  GuideContainer,\n  CloseIcon,\n  SolIcon,\n  HintIcon,\n  SectionContainer,\n  Guide,\n  Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' | 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n  questionWidth: number;\n  questions: IWorksheetQuestion[];\n  activeQuestionIndex: number;\n  learnosity: ILearnosity;\n  actionbarHeight: number;\n}\n\nconst QuestionGuide: React.FC<IQuestionGuideProps> = memo(\n  ({ questionWidth, questions, activeQuestionIndex, learnosity, actionbarHeight, loggerRef }) => {\n    const [activeSection, setActiveSection] = useState<TSections | undefined>();\n    const [pointerPosition, setPointerPosition] = useState({\n      top: 0,\n      left: 0,\n    });\n    const { top, left } = pointerPosition;\n\n    const handleHintClick = useCallback(() => {\n      setActiveSection('HINT');\n      loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n    }, [loggerRef]);\n    const handleSolClick = useCallback(() => {\n      setActiveSection('SOL');\n      loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n    }, [loggerRef]);\n    const handleClose = useCallback(() => {\n      setActiveSection(() => undefined);\n    }, []);\n\n    const { hints, solution } = questions[activeQuestionIndex]?.metadata || {};\n\n    const activeSectionData = useMemo(() => {\n      return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n    }, [activeSection, hints, solution]);\n\n    const sqlRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n    const hintRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n\n    const updatePointerPosition = useCallback((ref: React.RefObject<HTMLDivElement>) => {\n      if (ref.current) {\n        const rect = ref.current.getBoundingClientRect();\n\n        setPointerPosition({\n          top: rect.top + rect.height / 2 - 8,\n          left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n        });\n      }\n    }, []);\n\n    if (activeSection && activeSectionData && learnosity) {\n      learnosity.renderMath('mathjax');\n    }\n\n    useEffect(() => {\n      if (activeSection === 'HINT') {\n        updatePointerPosition(hintRef);\n      } else if (activeSection === 'SOL') {\n        updatePointerPosition(sqlRef);\n      } else if (!activeSectionData) {\n        setActiveSection(undefined);\n      }\n    }, [activeSection, updatePointerPosition, activeSectionData]);\n\n    return (\n      <GuideContainer $background=\"WHITE\">\n        <Clickable label=\"hints\" onClick={handleHintClick} disabled={!hints}>\n          <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={hintRef}>\n            <HintIcon width={32} height={32} $disabled={!hints} />\n            <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n              HINT\n            </Text>\n            <FlexView $gap={8} $alignItems=\"center\">\n              <Separator width={24} height={1} background=\"GREY_2\" />\n            </FlexView>\n          </FlexView>\n        </Clickable>\n        <Clickable label=\"solution\" onClick={handleSolClick} disabled={!solution}>\n          <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={sqlRef}>\n            <SolIcon width={32} height={32} $disabled={!solution} />\n            <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n              SOL\n            </Text>\n          </FlexView>\n        </Clickable>\n        {activeSection && top && left && <Pointer topValue={top} leftValue={left} />}\n        {activeSection && (\n          <SectionContainer\n            $background=\"WHITE\"\n            $questionWidth={questionWidth}\n            $actionbarHeight={actionbarHeight}\n            $borderRadius={10}\n          >\n            <Section\n              $gutterX={1}\n              $gapX={1}\n              $questionWidth={questionWidth}\n              $actionbarHeight={actionbarHeight}\n            >\n              <Clickable label=\"close\" onClick={handleClose}>\n                <CloseIcon />\n              </Clickable>\n              <FlexView $gutterX={0.5}>\n                <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n                  {activeSection === 'HINT' ? 'HINTS:' : 'SOLUTION:'}\n                </Text>\n              </FlexView>\n              {activeSectionData &&\n                activeSectionData.map((item, index) => (\n                  <FlexView $gutterX={0.5} $gapX={0.5} key={index.toString()}>\n                    {activeSectionData.length > 1 && (\n                      <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n                        {activeSection} {index + 1}:\n                      </Text>\n                    )}\n                    <Guide\n                      dangerouslySetInnerHTML={{\n                        __html: item,\n                      }}\n                    />\n                  </FlexView>\n                ))}\n            </Section>\n          </SectionContainer>\n        )}\n      </GuideContainer>\n    );\n  },\n);\n\nexport default QuestionGuide;\n"],"names":["QuestionGuide","memo","questionWidth","questions","activeQuestionIndex","learnosity","actionbarHeight","loggerRef","activeSection","setActiveSection","useState","pointerPosition","setPointerPosition","top","left","handleHintClick","useCallback","EVENTS","handleSolClick","handleClose","hints","solution","_a","activeSectionData","useMemo","sqlRef","useRef","hintRef","updatePointerPosition","ref","rect","useEffect","jsxs","GuideContainer","jsx","Clickable","FlexView","HintIcon","Text","Separator","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"mappings":"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"}
+{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import type { TPositionProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\n\nimport React, { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react';\n\nimport StickerSelector from '../../../stickers/sticker-selector/sticker-selector';\nimport { useTrialSessionContext } from '../../../trial-session/context/use-trial-session-context';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport {\n  Section,\n  GuideContainer,\n  CloseIcon,\n  SolIcon,\n  HintIcon,\n  StickersIcon,\n  SectionContainer,\n  Guide,\n  Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' | 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n  questionWidth: number;\n  questions: IWorksheetQuestion[];\n  activeQuestionIndex: number;\n  learnosity: ILearnosity;\n  actionbarHeight: number;\n}\n\nconst QuestionGuide: React.FC<IQuestionGuideProps> = memo(\n  ({ questionWidth, questions, activeQuestionIndex, learnosity, actionbarHeight, loggerRef }) => {\n    const [activeSection, setActiveSection] = useState<TSections | undefined>();\n    const [pointerPosition, setPointerPosition] = useState({\n      top: 0,\n      left: 0,\n    });\n    const [showStickers, setShowStickers] = useState(false);\n    const { studentId } = useTrialSessionContext();\n    const { top, left } = pointerPosition;\n\n    console.log('id', studentId);\n\n    const handleHintClick = useCallback(() => {\n      setActiveSection('HINT');\n      loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n    }, [loggerRef]);\n    const handleSolClick = useCallback(() => {\n      setActiveSection('SOL');\n      loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n    }, [loggerRef]);\n    const handleClose = useCallback(() => {\n      setActiveSection(() => undefined);\n    }, []);\n    const handleBadgeToggle = useCallback(() => {\n      setShowStickers(prev => !prev);\n    }, []);\n\n    const { hints, solution } = questions[activeQuestionIndex]?.metadata || {};\n\n    const activeSectionData = useMemo(() => {\n      return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n    }, [activeSection, hints, solution]);\n\n    const sqlRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n    const hintRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n\n    const updatePointerPosition = useCallback((ref: React.RefObject<HTMLDivElement>) => {\n      if (ref.current) {\n        const rect = ref.current.getBoundingClientRect();\n\n        setPointerPosition({\n          top: rect.top + rect.height / 2 - 8,\n          left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n        });\n      }\n    }, []);\n\n    const stickerTrigger = useMemo(\n      () => (\n        <Clickable label=\"teacher-badges\" onClick={handleBadgeToggle}>\n          <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n            <StickersIcon width={32} height={32} $disabled={!showStickers} />\n            <Text $renderAs=\"eyebrow2\" $color={!showStickers ? 'GREY_4' : 'BLACK'}>\n              STICKERS\n            </Text>\n            <FlexView $gap={8} $alignItems=\"center\">\n              <Separator width={24} height={1} background=\"GREY_2\" />\n            </FlexView>\n          </FlexView>\n        </Clickable>\n      ),\n      [showStickers, handleBadgeToggle],\n    );\n\n    const stickerGridConfig = useMemo(\n      () => ({\n        stickerSize: 48,\n        columns: 4,\n        gap: 8,\n      }),\n      [],\n    );\n\n    const stickerTooltipConfig = useMemo(\n      () => ({\n        position: 'bottom' as TPositionProps,\n        zIndex: 1000,\n        arrowXCoOrdinates: 87.5,\n        tooltipXCoOrdinates: '-32.5%',\n      }),\n      [],\n    );\n\n    if (activeSection && activeSectionData && learnosity) {\n      learnosity.renderMath('mathjax');\n    }\n\n    useEffect(() => {\n      if (activeSection === 'HINT') {\n        updatePointerPosition(hintRef);\n      } else if (activeSection === 'SOL') {\n        updatePointerPosition(sqlRef);\n      } else if (!activeSectionData) {\n        setActiveSection(undefined);\n      }\n    }, [activeSection, updatePointerPosition, activeSectionData]);\n\n    return (\n      <GuideContainer $background=\"WHITE\">\n        <StickerSelector\n          triggerNode={stickerTrigger}\n          studentClassroomId={studentId}\n          gridConfig={stickerGridConfig}\n          tooltipConfig={stickerTooltipConfig}\n          visible={showStickers}\n          onToggle={handleBadgeToggle}\n        />\n        <Clickable label=\"hints\" onClick={handleHintClick} disabled={!hints}>\n          <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={hintRef}>\n            <HintIcon width={32} height={32} $disabled={!hints} />\n            <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n              HINT\n            </Text>\n            <FlexView $gap={8} $alignItems=\"center\">\n              <Separator width={24} height={1} background=\"GREY_2\" />\n            </FlexView>\n          </FlexView>\n        </Clickable>\n        <Clickable label=\"solution\" onClick={handleSolClick} disabled={!solution}>\n          <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={sqlRef}>\n            <SolIcon width={32} height={32} $disabled={!solution} />\n            <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n              SOL\n            </Text>\n          </FlexView>\n        </Clickable>\n        {activeSection && top && left && <Pointer topValue={top} leftValue={left} />}\n        {activeSection && (\n          <SectionContainer\n            $background=\"WHITE\"\n            $questionWidth={questionWidth}\n            $actionbarHeight={actionbarHeight}\n            $borderRadius={10}\n          >\n            <Section\n              $gutterX={1}\n              $gapX={1}\n              $questionWidth={questionWidth}\n              $actionbarHeight={actionbarHeight}\n            >\n              <Clickable label=\"close\" onClick={handleClose}>\n                <CloseIcon />\n              </Clickable>\n              <FlexView $gutterX={0.5}>\n                <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n                  {activeSection === 'HINT' ? 'HINTS:' : 'SOLUTION:'}\n                </Text>\n              </FlexView>\n              {activeSectionData &&\n                activeSectionData.map((item, index) => (\n                  <FlexView $gutterX={0.5} $gapX={0.5} key={index.toString()}>\n                    {activeSectionData.length > 1 && (\n                      <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n                        {activeSection} {index + 1}:\n                      </Text>\n                    )}\n                    <Guide\n                      dangerouslySetInnerHTML={{\n                        __html: item,\n                      }}\n                    />\n                  </FlexView>\n                ))}\n            </Section>\n          </SectionContainer>\n        )}\n      </GuideContainer>\n    );\n  },\n);\n\nexport default QuestionGuide;\n"],"names":["QuestionGuide","memo","questionWidth","questions","activeQuestionIndex","learnosity","actionbarHeight","loggerRef","activeSection","setActiveSection","useState","pointerPosition","setPointerPosition","showStickers","setShowStickers","studentId","useTrialSessionContext","top","left","handleHintClick","useCallback","EVENTS","handleSolClick","handleClose","handleBadgeToggle","prev","hints","solution","_a","activeSectionData","useMemo","sqlRef","useRef","hintRef","updatePointerPosition","ref","rect","stickerTrigger","jsx","Clickable","jsxs","FlexView","StickersIcon","Text","Separator","stickerGridConfig","stickerTooltipConfig","useEffect","GuideContainer","StickerSelector","HintIcon","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import r from "styled-components";
-import c from "../../../../assets/line-icons/icons/bulb.js";
+import l from "../../../../assets/line-icons/icons/bulb.js";
 import d from "../../../../assets/line-icons/icons/cross.js";
-import l from "../../../../assets/line-icons/icons/info.js";
+import p from "../../../../assets/line-icons/icons/info.js";
 import e from "../../../ui/layout/flex-view.js";
 import a from "../../../ui/text/text.js";
 import { CustomElement as x } from "../worksheet-question/worksheet-question-styled.js";
 r(e)`
   border: 2px solid #000;
 `;
-const y = r(e)(
+const C = r(e)(
   ({ $questionWidth: t, $actionbarHeight: o, theme: i }) => `
   position: absolute;
   bottom: ${o}px;
@@ -19,14 +19,14 @@ const y = r(e)(
   border: 1px solid ${i.colors.GREY_2};
   overflow: hidden;
 `
-), C = r(e)`
+), y = r(e)`
   cursor: pointer;
-`, I = r(a)`
+`, S = r(a)`
   text-decoration: underline;
   white-space: nowrap;
   writing-mode: vertical-rl;
   text-align: right;
-`, s = (t) => t.startsWith("calc(") ? t.replace(")", " - 0px)") : t, p = (t) => t.trim().split(/\s+(?=[+-])/).map((n) => n.startsWith("-") ? `+${n.slice(1)}` : n.startsWith("+") ? `-${n.slice(1)}` : `-${n}`).join(" "), m = (t) => t.startsWith("calc(") && t.endsWith(")") ? (t = t.slice(5, -1), `calc(${p(t)})`) : p(t), T = r(e)(
+`, s = (t) => t.startsWith("calc(") ? t.replace(")", " - 0px)") : t, c = (t) => t.trim().split(/\s+(?=[+-])/).map((n) => n.startsWith("-") ? `+${n.slice(1)}` : n.startsWith("+") ? `-${n.slice(1)}` : `-${n}`).join(" "), u = (t) => t.startsWith("calc(") && t.endsWith(")") ? (t = t.slice(5, -1), `calc(${c(t)})`) : c(t), k = r(e)(
   ({ $questionWidth: t }) => `
   width: calc(${t}px - 32px); // 32px is the left + right padding
   overflow-y: auto;
@@ -34,7 +34,7 @@ const y = r(e)(
   display: flex;
 `
 ), E = r(e)(({ $questionWidth: t, $height: o }) => `
-  margin-top: ${typeof o == "number" ? `${-o}px` : m(s(o))};
+  margin-top: ${typeof o == "number" ? `${-o}px` : u(s(o))};
   position: sticky;
   left: calc((100% - ${t}px ) *.5 + ${t}px + 12px);
   bottom: 16px;
@@ -50,7 +50,7 @@ const y = r(e)(
   align-items: center;
   padding: 10px;
 `
-), S = r.div`
+), I = r.div`
   position: fixed;
   top: ${({ topValue: t }) => `${t}px`};
   left: ${({ leftValue: t }) => `${t}px`};
@@ -60,32 +60,37 @@ const y = r(e)(
   background: white;
   border-top: 1px solid #e0e0e0;
   border-right: 1px solid #e0e0e0;
-`, W = r(d)`
+`, T = r(d)`
   position: absolute;
   top: 8px;
   right: 16px;
-`, k = r(l)(({ theme: t, $disabled: o }) => `
+`, B = r(p)(({ theme: t, $disabled: o }) => `
     & path {
       stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
     }
-  `), v = r(c)(({ theme: t, $disabled: o }) => `
+  `), R = r(l)(({ theme: t, $disabled: o }) => `
     & path {
       stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
     }
-  `), B = r(x)``;
+  `), W = r(p)(({ theme: t, $disabled: o }) => `
+    & path {
+      stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
+    }
+  `), Y = r(x)``;
 export {
-  W as CloseIcon,
-  B as Guide,
+  T as CloseIcon,
+  Y as Guide,
   G as GuideContainer,
-  k as HintIcon,
-  S as Pointer,
-  T as Section,
-  y as SectionContainer,
+  B as HintIcon,
+  I as Pointer,
+  k as Section,
+  C as SectionContainer,
   E as SideBarContainer,
-  v as SolIcon,
-  I as UnderlinedText,
-  C as UnderlinedTextWrapper,
+  R as SolIcon,
+  W as StickersIcon,
+  S as UnderlinedText,
+  y as UnderlinedTextWrapper,
   s as getMinHeightFromString,
-  m as negateExpression
+  u as negateExpression
 };
 //# sourceMappingURL=worksheet-sidebar-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"worksheet-sidebar-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport BulbIcon from '../../../../assets/line-icons/icons/bulb';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport InfoIcon from '../../../../assets/line-icons/icons/info';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { CustomElement } from '../worksheet-question/worksheet-question-styled';\n\nexport const Circle = styled(FlexView)`\n  border: 2px solid #000;\n`;\nexport const SectionContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth, $actionbarHeight, theme }) => `\n  position: absolute;\n  bottom: ${$actionbarHeight}px;\n  right: 80px; //52px(sidebar(width) +12px(gutter) + (16px)\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  height: 30%;\n  display: flex;\n  border: 1px solid ${theme.colors.GREY_2};\n  overflow: hidden;\n`,\n);\n\nexport const UnderlinedTextWrapper = styled(FlexView)`\n  cursor: pointer;\n`;\n\nexport const UnderlinedText = styled(Text)`\n  text-decoration: underline;\n  white-space: nowrap;\n  writing-mode: vertical-rl;\n  text-align: right;\n`;\n\nexport const getMinHeightFromString = (minHeight: string) => {\n  if (minHeight.startsWith('calc(')) {\n    return minHeight.replace(')', ' - 0px)');\n  }\n\n  return minHeight;\n};\n\nconst negateString = (expression: string) => {\n  const terms = expression.trim().split(/\\s+(?=[+-])/);\n  const negatedTerms = terms.map(term => {\n    if (term.startsWith('-')) {\n      return `+${term.slice(1)}`; // change - to +\n    }\n\n    if (term.startsWith('+')) {\n      return `-${term.slice(1)}`; // change + to -\n    }\n\n    return `-${term}`; // add leading '-'\n  });\n\n  return negatedTerms.join(' ');\n};\n\nexport const negateExpression = (expression: string) => {\n  if (expression.startsWith('calc(') && expression.endsWith(')')) {\n    expression = expression.slice(5, -1); // Remove 'calc(' and ')'\n    const negatedTerms = negateString(expression);\n\n    return `calc(${negatedTerms})`;\n  }\n\n  return negateString(expression);\n};\n\nexport const Section = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth }) => `\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  overflow-y: auto;\n  height: 100%;\n  display: flex;\n`,\n);\nexport const SideBarContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $height: number | string;\n}>(({ $questionWidth, $height }) => {\n  return `\n  margin-top: ${\n    typeof $height === 'number'\n      ? `${-$height}px`\n      : negateExpression(getMinHeightFromString($height))\n  };\n  position: sticky;\n  left: calc((100% - ${$questionWidth}px ) *.5 + ${$questionWidth}px + 12px);\n  bottom: 16px;\n  align-items: center;\n  height: ${typeof $height === 'number' ? `${$height}px` : getMinHeightFromString($height)};\n  z-index: 1;\n`;\n});\n\nexport const GuideContainer = styled(FlexView)(\n  ({ theme }) => `\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid ${theme.colors.GREY_2};\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n`,\n);\n\nexport const Pointer = styled.div<{ topValue: number; leftValue: number }>`\n  position: fixed;\n  top: ${({ topValue }) => `${topValue}px`};\n  left: ${({ leftValue }) => `${leftValue}px`};\n  width: 15px;\n  height: 15px;\n  transform: rotate(45deg);\n  background: white;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n`;\n\nexport const CloseIcon = styled(CrossIcon)`\n  position: absolute;\n  top: 8px;\n  right: 16px;\n`;\n\nexport const HintIcon = styled(InfoIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const SolIcon = styled(BulbIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const Guide = styled(CustomElement)``;\n"],"names":["styled","FlexView","SectionContainer","$questionWidth","$actionbarHeight","theme","UnderlinedTextWrapper","UnderlinedText","Text","getMinHeightFromString","minHeight","negateString","expression","term","negateExpression","Section","SideBarContainer","$height","GuideContainer","Pointer","topValue","leftValue","CloseIcon","CrossIcon","HintIcon","InfoIcon","$disabled","SolIcon","BulbIcon","Guide","CustomElement"],"mappings":";;;;;;;AASsBA,EAAOC,CAAQ;AAAA;AAAA;AAGxB,MAAAC,IAAmBF,EAAOC,CAAQ;AAAA,EAI7C,CAAC,EAAE,gBAAAE,GAAgB,kBAAAC,GAAkB,OAAAC,EAAY,MAAA;AAAA;AAAA,YAEvCD,CAAgB;AAAA;AAAA,gBAEZD,CAAc;AAAA;AAAA;AAAA,sBAGRE,EAAM,OAAO,MAAM;AAAA;AAAA;AAGzC,GAEaC,IAAwBN,EAAOC,CAAQ;AAAA;AAAA,GAIvCM,IAAiBP,EAAOQ,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BC,IAAyB,CAACC,MACjCA,EAAU,WAAW,OAAO,IACvBA,EAAU,QAAQ,KAAK,SAAS,IAGlCA,GAGHC,IAAe,CAACC,MACNA,EAAW,KAAK,EAAE,MAAM,aAAa,EACxB,IAAI,CAAQC,MACjCA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGtBA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGnB,IAAIA,CAAI,EAChB,EAEmB,KAAK,GAAG,GAGjBC,IAAmB,CAACF,MAC3BA,EAAW,WAAW,OAAO,KAAKA,EAAW,SAAS,GAAG,KAC9CA,IAAAA,EAAW,MAAM,GAAG,EAAE,GAG5B,QAFcD,EAAaC,CAAU,CAEjB,OAGtBD,EAAaC,CAAU,GAGnBG,IAAUf,EAAOC,CAAQ;AAAA,EAIpC,CAAC,EAAE,gBAAAE,EAAA,MAAqB;AAAA,gBACVA,CAAc;AAAA;AAAA;AAAA;AAAA;AAK9B,GACaa,IAAmBhB,EAAOC,CAAQ,EAG5C,CAAC,EAAE,gBAAAE,GAAgB,SAAAc,QACb;AAAA,gBAEL,OAAOA,KAAY,WACf,GAAG,CAACA,CAAO,OACXH,EAAiBL,EAAuBQ,CAAO,CAAC,CACtD;AAAA;AAAA,uBAEqBd,CAAc,cAAcA,CAAc;AAAA;AAAA;AAAA,YAGrD,OAAOc,KAAY,WAAW,GAAGA,CAAO,OAAOR,EAAuBQ,CAAO,CAAC;AAAA;AAAA,CAGzF,GAEYC,IAAiBlB,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA;AAAA;AAAA,sBAGKA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKzC,GAEac,IAAUnB,EAAO;AAAA;AAAA,SAErB,CAAC,EAAE,UAAAoB,EAAe,MAAA,GAAGA,CAAQ,IAAI;AAAA,UAChC,CAAC,EAAE,WAAAC,EAAgB,MAAA,GAAGA,CAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAYtB,EAAOuB,CAAS;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAWxB,EAAOyB,CAAQ,EAA0B,CAAC,EAAE,OAAApB,GAAO,WAAAqB,QAClE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYsB,IAAU3B,EAAO4B,CAAQ,EAA0B,CAAC,EAAE,OAAAvB,GAAO,WAAAqB,QACjE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYwB,IAAQ7B,EAAO8B,CAAa;"}
+{"version":3,"file":"worksheet-sidebar-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport BulbIcon from '../../../../assets/line-icons/icons/bulb';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport InfoIcon from '../../../../assets/line-icons/icons/info';\nimport StickerIcon from '../../../../assets/line-icons/icons/info';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { CustomElement } from '../worksheet-question/worksheet-question-styled';\n\nexport const Circle = styled(FlexView)`\n  border: 2px solid #000;\n`;\nexport const SectionContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth, $actionbarHeight, theme }) => `\n  position: absolute;\n  bottom: ${$actionbarHeight}px;\n  right: 80px; //52px(sidebar(width) +12px(gutter) + (16px)\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  height: 30%;\n  display: flex;\n  border: 1px solid ${theme.colors.GREY_2};\n  overflow: hidden;\n`,\n);\n\nexport const UnderlinedTextWrapper = styled(FlexView)`\n  cursor: pointer;\n`;\n\nexport const UnderlinedText = styled(Text)`\n  text-decoration: underline;\n  white-space: nowrap;\n  writing-mode: vertical-rl;\n  text-align: right;\n`;\n\nexport const getMinHeightFromString = (minHeight: string) => {\n  if (minHeight.startsWith('calc(')) {\n    return minHeight.replace(')', ' - 0px)');\n  }\n\n  return minHeight;\n};\n\nconst negateString = (expression: string) => {\n  const terms = expression.trim().split(/\\s+(?=[+-])/);\n  const negatedTerms = terms.map(term => {\n    if (term.startsWith('-')) {\n      return `+${term.slice(1)}`; // change - to +\n    }\n\n    if (term.startsWith('+')) {\n      return `-${term.slice(1)}`; // change + to -\n    }\n\n    return `-${term}`; // add leading '-'\n  });\n\n  return negatedTerms.join(' ');\n};\n\nexport const negateExpression = (expression: string) => {\n  if (expression.startsWith('calc(') && expression.endsWith(')')) {\n    expression = expression.slice(5, -1); // Remove 'calc(' and ')'\n    const negatedTerms = negateString(expression);\n\n    return `calc(${negatedTerms})`;\n  }\n\n  return negateString(expression);\n};\n\nexport const Section = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth }) => `\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  overflow-y: auto;\n  height: 100%;\n  display: flex;\n`,\n);\nexport const SideBarContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $height: number | string;\n}>(({ $questionWidth, $height }) => {\n  return `\n  margin-top: ${\n    typeof $height === 'number'\n      ? `${-$height}px`\n      : negateExpression(getMinHeightFromString($height))\n  };\n  position: sticky;\n  left: calc((100% - ${$questionWidth}px ) *.5 + ${$questionWidth}px + 12px);\n  bottom: 16px;\n  align-items: center;\n  height: ${typeof $height === 'number' ? `${$height}px` : getMinHeightFromString($height)};\n  z-index: 1;\n`;\n});\n\nexport const GuideContainer = styled(FlexView)(\n  ({ theme }) => `\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid ${theme.colors.GREY_2};\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n`,\n);\n\nexport const Pointer = styled.div<{ topValue: number; leftValue: number }>`\n  position: fixed;\n  top: ${({ topValue }) => `${topValue}px`};\n  left: ${({ leftValue }) => `${leftValue}px`};\n  width: 15px;\n  height: 15px;\n  transform: rotate(45deg);\n  background: white;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n`;\n\nexport const CloseIcon = styled(CrossIcon)`\n  position: absolute;\n  top: 8px;\n  right: 16px;\n`;\n\nexport const HintIcon = styled(InfoIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const SolIcon = styled(BulbIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const StickersIcon = styled(StickerIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const Guide = styled(CustomElement)``;\n"],"names":["styled","FlexView","SectionContainer","$questionWidth","$actionbarHeight","theme","UnderlinedTextWrapper","UnderlinedText","Text","getMinHeightFromString","minHeight","negateString","expression","term","negateExpression","Section","SideBarContainer","$height","GuideContainer","Pointer","topValue","leftValue","CloseIcon","CrossIcon","HintIcon","InfoIcon","$disabled","SolIcon","BulbIcon","StickersIcon","StickerIcon","Guide","CustomElement"],"mappings":";;;;;;;AAUsBA,EAAOC,CAAQ;AAAA;AAAA;AAGxB,MAAAC,IAAmBF,EAAOC,CAAQ;AAAA,EAI7C,CAAC,EAAE,gBAAAE,GAAgB,kBAAAC,GAAkB,OAAAC,EAAY,MAAA;AAAA;AAAA,YAEvCD,CAAgB;AAAA;AAAA,gBAEZD,CAAc;AAAA;AAAA;AAAA,sBAGRE,EAAM,OAAO,MAAM;AAAA;AAAA;AAGzC,GAEaC,IAAwBN,EAAOC,CAAQ;AAAA;AAAA,GAIvCM,IAAiBP,EAAOQ,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BC,IAAyB,CAACC,MACjCA,EAAU,WAAW,OAAO,IACvBA,EAAU,QAAQ,KAAK,SAAS,IAGlCA,GAGHC,IAAe,CAACC,MACNA,EAAW,KAAK,EAAE,MAAM,aAAa,EACxB,IAAI,CAAQC,MACjCA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGtBA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGnB,IAAIA,CAAI,EAChB,EAEmB,KAAK,GAAG,GAGjBC,IAAmB,CAACF,MAC3BA,EAAW,WAAW,OAAO,KAAKA,EAAW,SAAS,GAAG,KAC9CA,IAAAA,EAAW,MAAM,GAAG,EAAE,GAG5B,QAFcD,EAAaC,CAAU,CAEjB,OAGtBD,EAAaC,CAAU,GAGnBG,IAAUf,EAAOC,CAAQ;AAAA,EAIpC,CAAC,EAAE,gBAAAE,EAAA,MAAqB;AAAA,gBACVA,CAAc;AAAA;AAAA;AAAA;AAAA;AAK9B,GACaa,IAAmBhB,EAAOC,CAAQ,EAG5C,CAAC,EAAE,gBAAAE,GAAgB,SAAAc,QACb;AAAA,gBAEL,OAAOA,KAAY,WACf,GAAG,CAACA,CAAO,OACXH,EAAiBL,EAAuBQ,CAAO,CAAC,CACtD;AAAA;AAAA,uBAEqBd,CAAc,cAAcA,CAAc;AAAA;AAAA;AAAA,YAGrD,OAAOc,KAAY,WAAW,GAAGA,CAAO,OAAOR,EAAuBQ,CAAO,CAAC;AAAA;AAAA,CAGzF,GAEYC,IAAiBlB,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA;AAAA;AAAA,sBAGKA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKzC,GAEac,IAAUnB,EAAO;AAAA;AAAA,SAErB,CAAC,EAAE,UAAAoB,EAAe,MAAA,GAAGA,CAAQ,IAAI;AAAA,UAChC,CAAC,EAAE,WAAAC,EAAgB,MAAA,GAAGA,CAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAYtB,EAAOuB,CAAS;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAWxB,EAAOyB,CAAQ,EAA0B,CAAC,EAAE,OAAApB,GAAO,WAAAqB,QAClE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYsB,IAAU3B,EAAO4B,CAAQ,EAA0B,CAAC,EAAE,OAAAvB,GAAO,WAAAqB,QACjE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYwB,IAAe7B,EAAO8B,CAAW,EAA0B,CAAC,EAAE,OAAAzB,GAAO,WAAAqB,QACzE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEY0B,IAAQ/B,EAAOgC,CAAa;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.2.34-mb",
+  "version": "3.2.34-mbx",
   "type": "module",
   "files": [
     "dist"