@cuemath/leap 3.3.3 → 3.3.4-j1

package/dist/features/trial-session/comps/session-report/report-information/report-information.js

@@ -1,107 +1,179 @@
-import { jsxs as i, Fragment as f, jsx as e } from "react/jsx-runtime";
-import { memo as w, useMemo as T } from "react";
-import { ILLUSTRATIONS as R } from "../../../../../assets/illustrations/illustrations.js";
-import { useUIContext as N } from "../../../../ui/context/context.js";
-import C from "../../../../ui/image/image.js";
-import a from "../../../../ui/layout/flex-view.js";
-import $ from "../../../../ui/separator/separator.js";
-import m from "../../../../ui/text/text.js";
-import k from "../report-404/report-404.js";
-import t from "./report-card.js";
-import { ReportWrapper as E, TopicWrapper as M, TopicImage as O, InlineText as S } from "./report-information-styled.js";
-const g = w((I) => {
-  const { sessionReports: _, studentName: b } = I, {
-    next_steps: v,
-    topic_data: p,
-    solved_with_help: o,
-    problems_attempted: r,
-    new_concepts_learnt: l,
-    solved_independently: n,
+import { jsxs as r, Fragment as _, jsx as t } from "react/jsx-runtime";
+import { memo as C, useMemo as B } from "react";
+import { useTheme as M } from "styled-components";
+import { ILLUSTRATIONS as g } from "../../../../../assets/illustrations/illustrations.js";
+import { useUIContext as E } from "../../../../ui/context/context.js";
+import O from "../../../../ui/image/image.js";
+import n from "../../../../ui/layout/flex-view.js";
+import m from "../../../../ui/separator/separator.js";
+import c from "../../../../ui/text/text.js";
+import { EDeviceType as N } from "../../../../ui/theme/constants.js";
+import R from "../report-404/report-404.js";
+import o from "./report-card.js";
+import { ReportWrapper as W, TopicWrapper as K, TopicImage as S, InlineText as k } from "./report-information-styled.js";
+const b = C((A) => {
+  const e = M().device <= N.MOBILE, { sessionReports: I, studentName: L } = A, {
+    next_steps: T,
+    topic_data: d,
+    solved_with_help: l,
+    problems_attempted: i,
+    new_concepts_learnt: p,
+    solved_independently: a,
     default_topic_image_url: x
-  } = _ || {}, { onEvent: A } = N(), d = T(() => r ? r === n || !o && n ? /* @__PURE__ */ i(f, { children: [
-    /* @__PURE__ */ e(t, { title: "Problems Attempted", value: r }),
-    /* @__PURE__ */ e(t, { title: "Solved without help", value: n }),
-    /* @__PURE__ */ e(
-      t,
+  } = I || {}, { onEvent: w } = E(), s = B(() => i ? i === a || !l && a ? /* @__PURE__ */ r(_, { children: [
+    /* @__PURE__ */ t(o, { title: "Problems Attempted", value: i, widthOnMobile: "50%" }),
+    /* @__PURE__ */ t(o, { title: "Solved without help", value: a, widthOnMobile: "50%" }),
+    /* @__PURE__ */ t(
+      o,
       {
         title: "Performance",
-        value: `${Math.round(n / r * 100)}%`
+        value: `${Math.round(a / i * 100)}%`
       }
     )
-  ] }) : !o && !n ? /* @__PURE__ */ e(t, { title: "Problems Attempted", value: r }) : o && l ? /* @__PURE__ */ i(f, { children: [
-    /* @__PURE__ */ e(t, { title: "Problems Attempted", value: r }),
-    /* @__PURE__ */ e(t, { title: "Needed help in", value: l }),
-    /* @__PURE__ */ e(t, { title: "Improvement shown in", value: o }),
-    /* @__PURE__ */ e(
-      t,
+  ] }) : !l && !a ? /* @__PURE__ */ t(o, { title: "Problems Attempted", value: i }) : l && p ? /* @__PURE__ */ r(_, { children: [
+    /* @__PURE__ */ t(o, { title: "Problems Attempted", value: i, widthOnMobile: "50%" }),
+    /* @__PURE__ */ t(o, { title: "Needed help in", value: p, widthOnMobile: "50%" }),
+    /* @__PURE__ */ t(o, { title: "Improvement shown in", value: l, widthOnMobile: "50%" }),
+    /* @__PURE__ */ t(
+      o,
       {
         title: "Improvement",
-        value: `${Math.round(o / l * 100)}%`
+        value: `${Math.round(l / p * 100)}%`,
+        widthOnMobile: "50%"
       }
     )
-  ] }) : null : null, [l, r, n, o]);
-  return d ? /* @__PURE__ */ i(a, { $borderColor: "BLACK_1", children: [
-    /* @__PURE__ */ e(E, { $flexDirection: "row", $height: 100, $background: "YELLOW_1", children: d }),
-    /* @__PURE__ */ e(M, { $flexDirection: "row", $background: "WHITE_1", children: p && p.length > 0 && p.map((c) => {
-      const {
-        topic_name: s,
-        topic_image: u,
-        summary: L,
-        is_attempted: h
-      } = c;
-      return u || A("TOPIC_THUMBNAIL_NOT_AVAILABLE", c), /* @__PURE__ */ i(
-        a,
-        {
-          $gap: 35,
-          $gutter: 29,
-          $flex: 1,
-          $alignItems: "center",
-          $opacity: h ? 1 : 0.4,
-          children: [
-            /* @__PURE__ */ e(
-              O,
-              {
-                $active: !!h,
-                src: u || x,
-                borderRadius: 96,
-                height: 96,
-                width: 96,
-                alt: "topic",
-                withLoader: !0
-              }
-            ),
-            /* @__PURE__ */ e($, { height: 12 }),
-            /* @__PURE__ */ e(m, { $renderAs: "ab3-black", $align: "center", children: s }),
-            /* @__PURE__ */ e($, { height: 2 }),
-            /* @__PURE__ */ e(m, { $renderAs: "ub3", $align: "center", children: L })
-          ]
-        },
-        s
-      );
-    }) }),
-    /* @__PURE__ */ i(
-      a,
-      {
-        $flexDirection: "row",
-        $background: "YELLOW_3",
-        $flexGap: 4,
-        $alignItems: "center",
-        $gap: 9,
-        $gutter: 8,
-        children: [
-          /* @__PURE__ */ e(C, { src: R.COMMUNITY_BULB, width: 80, height: 80, withLoader: !0, alt: "bulb" }),
-          /* @__PURE__ */ e(a, { $flex: 1, children: /* @__PURE__ */ i(m, { $renderAs: "ab2-black", children: [
-            "Next Steps: ",
-            /* @__PURE__ */ e(S, { $renderAs: "ab2", children: v })
-          ] }) })
-        ]
-      }
-    )
-  ] }) : /* @__PURE__ */ e(k, { studentName: b });
+  ] }) : null : null, [p, i, a, l]);
+  return s ? /* @__PURE__ */ r(
+    n,
+    {
+      $borderColor: e ? "TRANSPARENT" : "BLACK_1",
+      $gapX: e ? 1 : 0,
+      $background: e ? "BLACK_2" : "TRANSPARENT",
+      $gutterX: e ? 1 : 0,
+      children: [
+        /* @__PURE__ */ t(
+          W,
+          {
+            $flexWrap: e,
+            $flexDirection: "row",
+            $height: e ? "auto" : 100,
+            $background: e ? "BLACK_2" : "YELLOW_1",
+            children: s
+          }
+        ),
+        /* @__PURE__ */ t(
+          K,
+          {
+            $flexDirection: e ? "column" : "row",
+            $background: e ? "BLACK_2" : "WHITE_1",
+            $flexRowGapX: e ? 1.25 : 0,
+            $gapX: e ? 1.5 : 0,
+            children: d && d.length > 0 && d.map((h) => {
+              const {
+                topic_name: u,
+                topic_image: $,
+                summary: v,
+                is_attempted: f
+              } = h;
+              return $ || w("TOPIC_THUMBNAIL_NOT_AVAILABLE", h), /* @__PURE__ */ r(
+                n,
+                {
+                  $gap: e ? 0 : 29,
+                  $gutter: e ? 0 : 20,
+                  $flex: 1,
+                  $alignItems: "center",
+                  $opacity: f ? 1 : 0.4,
+                  $flexDirection: e ? "row" : "column",
+                  $flexColumnGapX: e ? 1 : 0,
+                  children: [
+                    /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
+                      S,
+                      {
+                        $active: !!f,
+                        src: $ || x,
+                        borderRadius: 96,
+                        height: e ? 84 : 96,
+                        width: e ? 84 : 96,
+                        alt: "topic",
+                        withLoader: !0
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(n, { $alignItems: e ? "flex-start" : "center", $gapX: 1, $flex: 1, children: [
+                      !e && /* @__PURE__ */ t(m, { height: 12 }),
+                      /* @__PURE__ */ t(
+                        c,
+                        {
+                          $renderAs: "ab2-bold",
+                          $align: e ? "left" : "center",
+                          $color: e ? "WHITE" : "BLACK_1",
+                          children: u
+                        }
+                      ),
+                      /* @__PURE__ */ t(m, { height: 2 }),
+                      /* @__PURE__ */ t(
+                        c,
+                        {
+                          $renderAs: "ub2",
+                          $align: e ? "left" : "center",
+                          $color: e ? "WHITE" : "BLACK_1",
+                          children: v
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                u
+              );
+            })
+          }
+        ),
+        e && /* @__PURE__ */ r(n, { $background: "BLACK_2", children: [
+          /* @__PURE__ */ t(c, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: "Next Steps" }),
+          /* @__PURE__ */ t(m, { height: 4 })
+        ] }),
+        /* @__PURE__ */ r(
+          n,
+          {
+            $flexDirection: "row",
+            $background: e ? "BLACK_2" : "YELLOW_3",
+            $flexGap: 4,
+            $alignItems: "center",
+            $gap: 9,
+            $gutter: 8,
+            children: [
+              /* @__PURE__ */ t(
+                O,
+                {
+                  src: e ? g.COMMUNITY_BULB_YELLOW_2 : g.COMMUNITY_BULB,
+                  width: e ? 56 : 80,
+                  height: e ? 56 : 80,
+                  withLoader: !0,
+                  alt: "bulb"
+                }
+              ),
+              /* @__PURE__ */ t(n, { $flex: 1, children: /* @__PURE__ */ r(c, { $renderAs: "ab2-black", $color: e ? "WHITE_1" : "BLACK_1", children: [
+                !e && "Next Steps: ",
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    $renderAs: "ab2",
+                    $renderOnMobileAs: "ub2",
+                    $color: e ? "WHITE_1" : "BLACK_1",
+                    children: T
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ),
+        e && /* @__PURE__ */ t(m, { heightX: 1 })
+      ]
+    }
+  ) : /* @__PURE__ */ t(R, { studentName: L });
 });
-g.displayName = "ReportInformation";
-const G = g;
+b.displayName = "ReportInformation";
+const Q = b;
 export {
-  G as default
+  Q as default
 };
 //# sourceMappingURL=report-information.js.map

package/dist/features/trial-session/comps/session-report/report-information/report-information.js.map

@@ -1 +1 @@
-{"version":3,"file":"report-information.js","sources":["../../../../../../src/features/trial-session/comps/session-report/report-information/report-information.tsx"],"sourcesContent":["import type { TSessionReportData } from '../session-report-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport { useUIContext } from '../../../../ui/context/context';\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport Report404 from '../report-404/report-404';\nimport ReportCard from './report-card';\nimport * as Styled from './report-information-styled';\n\ninterface IReportInformationProps {\n  sessionReports: TSessionReportData;\n  studentName: string;\n}\n\nconst ReportInformation: FC<IReportInformationProps> = memo(props => {\n  const { sessionReports, studentName } = props;\n  const {\n    next_steps: nextSteps,\n    topic_data: topicData,\n    solved_with_help: solvedWithHelp,\n    problems_attempted: problemsAttempted,\n    new_concepts_learnt: newConceptsLearnt,\n    solved_independently: solvedIndependently,\n    default_topic_image_url: defaultTopicImage,\n  } = sessionReports || {};\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const renderReportsInfoCard = useMemo(() => {\n    if (!problemsAttempted) return null;\n\n    if (problemsAttempted === solvedIndependently || (!solvedWithHelp && solvedIndependently)) {\n      return (\n        <>\n          <ReportCard title=\"Problems Attempted\" value={problemsAttempted} />\n          <ReportCard title=\"Solved without help\" value={solvedIndependently} />\n          <ReportCard\n            title=\"Performance\"\n            value={`${Math.round((solvedIndependently / problemsAttempted) * 100)}%`}\n          />\n        </>\n      );\n    }\n\n    if (!solvedWithHelp && !solvedIndependently) {\n      return <ReportCard title=\"Problems Attempted\" value={problemsAttempted} />;\n    }\n\n    if (solvedWithHelp && newConceptsLearnt) {\n      return (\n        <>\n          <ReportCard title=\"Problems Attempted\" value={problemsAttempted} />\n          <ReportCard title=\"Needed help in\" value={newConceptsLearnt} />\n          <ReportCard title=\"Improvement shown in\" value={solvedWithHelp} />\n          <ReportCard\n            title=\"Improvement\"\n            value={`${Math.round((solvedWithHelp / newConceptsLearnt) * 100)}%`}\n          />\n        </>\n      );\n    }\n\n    return null;\n  }, [newConceptsLearnt, problemsAttempted, solvedIndependently, solvedWithHelp]);\n\n  if (!renderReportsInfoCard) return <Report404 studentName={studentName} />;\n\n  return (\n    <FlexView $borderColor=\"BLACK_1\">\n      <Styled.ReportWrapper $flexDirection=\"row\" $height={100} $background=\"YELLOW_1\">\n        {renderReportsInfoCard}\n      </Styled.ReportWrapper>\n      <Styled.TopicWrapper $flexDirection=\"row\" $background=\"WHITE_1\">\n        {topicData &&\n          topicData.length > 0 &&\n          topicData.map(topic => {\n            const {\n              topic_name: topicName,\n              topic_image: topicImage,\n              summary,\n              is_attempted: isAttempted,\n            } = topic;\n\n            if (!topicImage) {\n              trackEvent('TOPIC_THUMBNAIL_NOT_AVAILABLE', topic);\n            }\n\n            return (\n              <FlexView\n                key={topicName}\n                $gap={35}\n                $gutter={29}\n                $flex={1}\n                $alignItems=\"center\"\n                $opacity={isAttempted ? 1 : 0.4}\n              >\n                <Styled.TopicImage\n                  $active={!!isAttempted}\n                  src={topicImage || defaultTopicImage}\n                  borderRadius={96}\n                  height={96}\n                  width={96}\n                  alt=\"topic\"\n                  withLoader\n                />\n                <Separator height={12} />\n                <Text $renderAs=\"ab3-black\" $align=\"center\">\n                  {topicName}\n                </Text>\n                <Separator height={2} />\n                <Text $renderAs=\"ub3\" $align=\"center\">\n                  {summary}\n                </Text>\n              </FlexView>\n            );\n          })}\n      </Styled.TopicWrapper>\n      <FlexView\n        $flexDirection=\"row\"\n        $background=\"YELLOW_3\"\n        $flexGap={4}\n        $alignItems=\"center\"\n        $gap={9}\n        $gutter={8}\n      >\n        <Image src={ILLUSTRATIONS.COMMUNITY_BULB} width={80} height={80} withLoader alt=\"bulb\" />\n        <FlexView $flex={1}>\n          <Text $renderAs=\"ab2-black\">\n            Next Steps: <Styled.InlineText $renderAs=\"ab2\">{nextSteps}</Styled.InlineText>\n          </Text>\n        </FlexView>\n      </FlexView>\n    </FlexView>\n  );\n});\n\nReportInformation.displayName = 'ReportInformation';\n\nexport default ReportInformation;\n"],"names":["ReportInformation","memo","props","sessionReports","studentName","nextSteps","topicData","solvedWithHelp","problemsAttempted","newConceptsLearnt","solvedIndependently","defaultTopicImage","trackEvent","useUIContext","renderReportsInfoCard","useMemo","jsxs","Fragment","jsx","ReportCard","FlexView","Styled.ReportWrapper","Styled.TopicWrapper","topic","topicName","topicImage","summary","isAttempted","Styled.TopicImage","Separator","Text","Image","ILLUSTRATIONS","Styled.InlineText","Report404","ReportInformation$1"],"mappings":"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"}
+{"version":3,"file":"report-information.js","sources":["../../../../../../src/features/trial-session/comps/session-report/report-information/report-information.tsx"],"sourcesContent":["import type { TSessionReportData } from '../session-report-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport { useUIContext } from '../../../../ui/context/context';\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport Report404 from '../report-404/report-404';\nimport ReportCard from './report-card';\nimport * as Styled from './report-information-styled';\n\ninterface IReportInformationProps {\n  sessionReports: TSessionReportData;\n  studentName: string;\n}\n\nconst ReportInformation: FC<IReportInformationProps> = memo(props => {\n  const theme = useTheme();\n  const isMobile = theme.device <= EDeviceType.MOBILE;\n  const { sessionReports, studentName } = props;\n  const {\n    next_steps: nextSteps,\n    topic_data: topicData,\n    solved_with_help: solvedWithHelp,\n    problems_attempted: problemsAttempted,\n    new_concepts_learnt: newConceptsLearnt,\n    solved_independently: solvedIndependently,\n    default_topic_image_url: defaultTopicImage,\n  } = sessionReports || {};\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const renderReportsInfoCard = useMemo(() => {\n    if (!problemsAttempted) return null;\n\n    if (problemsAttempted === solvedIndependently || (!solvedWithHelp && solvedIndependently)) {\n      return (\n        <>\n          <ReportCard title=\"Problems Attempted\" value={problemsAttempted} widthOnMobile=\"50%\" />\n          <ReportCard title=\"Solved without help\" value={solvedIndependently} widthOnMobile=\"50%\" />\n          <ReportCard\n            title=\"Performance\"\n            value={`${Math.round((solvedIndependently / problemsAttempted) * 100)}%`}\n          />\n        </>\n      );\n    }\n\n    if (!solvedWithHelp && !solvedIndependently) {\n      return <ReportCard title=\"Problems Attempted\" value={problemsAttempted} />;\n    }\n\n    if (solvedWithHelp && newConceptsLearnt) {\n      return (\n        <>\n          <ReportCard title=\"Problems Attempted\" value={problemsAttempted} widthOnMobile=\"50%\" />\n          <ReportCard title=\"Needed help in\" value={newConceptsLearnt} widthOnMobile=\"50%\" />\n          <ReportCard title=\"Improvement shown in\" value={solvedWithHelp} widthOnMobile=\"50%\" />\n          <ReportCard\n            title=\"Improvement\"\n            value={`${Math.round((solvedWithHelp / newConceptsLearnt) * 100)}%`}\n            widthOnMobile=\"50%\"\n          />\n        </>\n      );\n    }\n\n    return null;\n  }, [newConceptsLearnt, problemsAttempted, solvedIndependently, solvedWithHelp]);\n\n  if (!renderReportsInfoCard) return <Report404 studentName={studentName} />;\n\n  return (\n    <FlexView\n      $borderColor={isMobile ? 'TRANSPARENT' : 'BLACK_1'}\n      $gapX={isMobile ? 1 : 0}\n      $background={isMobile ? 'BLACK_2' : 'TRANSPARENT'}\n      $gutterX={isMobile ? 1 : 0}\n    >\n      <Styled.ReportWrapper\n        $flexWrap={isMobile}\n        $flexDirection=\"row\"\n        $height={isMobile ? 'auto' : 100}\n        $background={isMobile ? 'BLACK_2' : 'YELLOW_1'}\n      >\n        {renderReportsInfoCard}\n      </Styled.ReportWrapper>\n      <Styled.TopicWrapper\n        $flexDirection={isMobile ? 'column' : 'row'}\n        $background={isMobile ? 'BLACK_2' : 'WHITE_1'}\n        $flexRowGapX={isMobile ? 1.25 : 0}\n        $gapX={isMobile ? 1.5 : 0}\n      >\n        {topicData &&\n          topicData.length > 0 &&\n          topicData.map(topic => {\n            const {\n              topic_name: topicName,\n              topic_image: topicImage,\n              summary,\n              is_attempted: isAttempted,\n            } = topic;\n\n            if (!topicImage) {\n              trackEvent('TOPIC_THUMBNAIL_NOT_AVAILABLE', topic);\n            }\n\n            return (\n              <FlexView\n                key={topicName}\n                $gap={isMobile ? 0 : 29}\n                $gutter={isMobile ? 0 : 20}\n                $flex={1}\n                $alignItems={isMobile ? 'center' : 'center'}\n                $opacity={isAttempted ? 1 : 0.4}\n                $flexDirection={isMobile ? 'row' : 'column'}\n                $flexColumnGapX={isMobile ? 1 : 0}\n              >\n                <FlexView>\n                  <Styled.TopicImage\n                    $active={!!isAttempted}\n                    src={topicImage || defaultTopicImage}\n                    borderRadius={96}\n                    height={isMobile ? 84 : 96}\n                    width={isMobile ? 84 : 96}\n                    alt=\"topic\"\n                    withLoader\n                  />\n                </FlexView>\n                <FlexView $alignItems={isMobile ? 'flex-start' : 'center'} $gapX={1} $flex={1}>\n                  {!isMobile && <Separator height={12} />}\n                  <Text\n                    $renderAs=\"ab2-bold\"\n                    $align={isMobile ? 'left' : 'center'}\n                    $color={isMobile ? 'WHITE' : 'BLACK_1'}\n                  >\n                    {topicName}\n                  </Text>\n                  <Separator height={2} />\n                  <Text\n                    $renderAs=\"ub2\"\n                    $align={isMobile ? 'left' : 'center'}\n                    $color={isMobile ? 'WHITE' : 'BLACK_1'}\n                  >\n                    {summary}\n                  </Text>\n                </FlexView>\n              </FlexView>\n            );\n          })}\n      </Styled.TopicWrapper>\n      {isMobile && (\n        <FlexView $background=\"BLACK_2\">\n          <Text $renderAs=\"ac4-black\" $color=\"WHITE_T_60\">\n            Next Steps\n          </Text>\n          <Separator height={4} />\n        </FlexView>\n      )}\n      <FlexView\n        $flexDirection=\"row\"\n        $background={isMobile ? 'BLACK_2' : 'YELLOW_3'}\n        $flexGap={4}\n        $alignItems=\"center\"\n        $gap={9}\n        $gutter={8}\n      >\n        <Image\n          src={isMobile ? ILLUSTRATIONS.COMMUNITY_BULB_YELLOW_2 : ILLUSTRATIONS.COMMUNITY_BULB}\n          width={isMobile ? 56 : 80}\n          height={isMobile ? 56 : 80}\n          withLoader\n          alt=\"bulb\"\n        />\n        <FlexView $flex={1}>\n          <Text $renderAs=\"ab2-black\" $color={isMobile ? 'WHITE_1' : 'BLACK_1'}>\n            {!isMobile && `Next Steps: `}\n            <Styled.InlineText\n              $renderAs=\"ab2\"\n              $renderOnMobileAs=\"ub2\"\n              $color={isMobile ? 'WHITE_1' : 'BLACK_1'}\n            >\n              {nextSteps}\n            </Styled.InlineText>\n          </Text>\n        </FlexView>\n      </FlexView>\n      {isMobile && <Separator heightX={1} />}\n    </FlexView>\n  );\n});\n\nReportInformation.displayName = 'ReportInformation';\n\nexport default ReportInformation;\n"],"names":["ReportInformation","memo","props","isMobile","useTheme","EDeviceType","sessionReports","studentName","nextSteps","topicData","solvedWithHelp","problemsAttempted","newConceptsLearnt","solvedIndependently","defaultTopicImage","trackEvent","useUIContext","renderReportsInfoCard","useMemo","jsxs","Fragment","jsx","ReportCard","FlexView","Styled.ReportWrapper","Styled.TopicWrapper","topic","topicName","topicImage","summary","isAttempted","Styled.TopicImage","Separator","Text","Image","ILLUSTRATIONS","Styled.InlineText","Report404","ReportInformation$1"],"mappings":"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"}

package/dist/features/trial-session/comps/student-profile/student-profile-highlights/student-profile-highlights.js

@@ -1,38 +1,53 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
 import { memo as d } from "react";
-import c from "styled-components";
-import a from "../../../../ui/image/image.js";
-import o from "../../../../ui/layout/flex-view.js";
-import n from "../../../../ui/text/text.js";
-const m = c(o)`
+import m, { useTheme as a } from "styled-components";
+import p from "../../../../ui/image/image.js";
+import t from "../../../../ui/layout/flex-view.js";
+import i from "../../../../ui/text/text.js";
+import { EDeviceType as f } from "../../../../ui/theme/constants.js";
+const $ = m(t)`
   &:not(:last-child) {
-    border-bottom: 1px solid ${({ theme: t }) => t.colors.BLACK_1};
+    border-bottom: 1px solid ${({ theme: n }) => n.colors.BLACK_1};
+  }
+`, c = d(
+  ({ profileHighlights: n }) => {
+    const o = a().device <= f.MOBILE;
+    return /* @__PURE__ */ r(t, { $borderColor: "BLACK_1", children: n.map((e) => /* @__PURE__ */ l(
+      $,
+      {
+        $flexDirection: "row",
+        $alignItems: "center",
+        $justifyContent: "flex-start",
+        $gapX: 1,
+        $gutterX: o ? 0.75 : 1,
+        $flexGapX: o ? 0.5 : 1.5,
+        $background: e.background,
+        children: [
+          /* @__PURE__ */ r(
+            p,
+            {
+              src: e.illustration,
+              alt: e.title,
+              height: o ? 64 : 96,
+              width: o ? 64 : 96
+            }
+          ),
+          /* @__PURE__ */ l(t, { $flexDirection: "column", $flex: 1, $flexGap: 2, children: [
+            /* @__PURE__ */ r(i, { $renderAs: "ac3-black", children: e.title }),
+            /* @__PURE__ */ r(i, { $renderAs: "ab2", children: typeof e.description == "string" ? e.description : /* @__PURE__ */ r(t, { children: e.description.map((s) => /* @__PURE__ */ l(t, { $flexDirection: "row", $flexColumnGapX: 0.5, children: [
+              /* @__PURE__ */ r(i, { $renderAs: "ab2", $inline: !0, children: "•" }),
+              /* @__PURE__ */ r(i, { $renderAs: "ab2", as: "span", $inline: !0, children: s })
+            ] }, s)) }) })
+          ] })
+        ]
+      },
+      e.title
+    )) });
   }
-`, s = d(
-  ({ profileHighlights: t }) => /* @__PURE__ */ e(o, { $borderColor: "BLACK_1", children: t.map((r) => /* @__PURE__ */ l(
-    m,
-    {
-      $flexDirection: "row",
-      $alignItems: "center",
-      $justifyContent: "flex-start",
-      $gapX: 1,
-      $gutterX: 1,
-      $flexGapX: 1.5,
-      $background: r.background,
-      children: [
-        /* @__PURE__ */ e(a, { src: r.illustration, alt: r.title, height: 96, width: 96 }),
-        /* @__PURE__ */ l(o, { $flexDirection: "column", $flex: 1, $flexGap: 2, children: [
-          /* @__PURE__ */ e(n, { $renderAs: "ac3-black", children: r.title }),
-          /* @__PURE__ */ e(n, { $renderAs: "ab2", children: typeof r.description == "string" ? r.description : r.description.map((i) => /* @__PURE__ */ e("li", { children: i }, i)) })
-        ] })
-      ]
-    },
-    r.title
-  )) })
 );
-s.displayName = "StudentProfileHighlights";
-const y = s;
+c.displayName = "StudentProfileHighlights";
+const H = c;
 export {
-  y as default
+  H as default
 };
 //# sourceMappingURL=student-profile-highlights.js.map

package/dist/features/trial-session/comps/student-profile/student-profile-highlights/student-profile-highlights.js.map

@@ -1 +1 @@
-{"version":3,"file":"student-profile-highlights.js","sources":["../../../../../../src/features/trial-session/comps/student-profile/student-profile-highlights/student-profile-highlights.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\nimport styled from 'styled-components';\n\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\n\ntype TProfileHighlight = {\n  illustration: string;\n  background: TColorNames;\n  title: string;\n  description: string | string[];\n};\n\nconst HighlightWrapper = styled(FlexView)`\n  &:not(:last-child) {\n    border-bottom: 1px solid ${({ theme }) => theme.colors.BLACK_1};\n  }\n`;\n\ninterface IStudentProfileHighlightsProps {\n  profileHighlights: TProfileHighlight[];\n}\n\nconst StudentProfileHighlights: FC<IStudentProfileHighlightsProps> = memo(\n  ({ profileHighlights }) => {\n    return (\n      <FlexView $borderColor=\"BLACK_1\">\n        {profileHighlights.map(highlight => (\n          <HighlightWrapper\n            key={highlight.title}\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $justifyContent=\"flex-start\"\n            $gapX={1}\n            $gutterX={1}\n            $flexGapX={1.5}\n            $background={highlight.background}\n          >\n            <Image src={highlight.illustration} alt={highlight.title} height={96} width={96} />\n            <FlexView $flexDirection=\"column\" $flex={1} $flexGap={2}>\n              <Text $renderAs=\"ac3-black\">{highlight.title}</Text>\n              <Text $renderAs=\"ab2\">\n                {typeof highlight.description === 'string'\n                  ? highlight.description\n                  : highlight.description.map(desc => <li key={desc}>{desc}</li>)}\n              </Text>\n            </FlexView>\n          </HighlightWrapper>\n        ))}\n      </FlexView>\n    );\n  },\n);\n\nStudentProfileHighlights.displayName = 'StudentProfileHighlights';\n\nexport default StudentProfileHighlights;\n"],"names":["HighlightWrapper","styled","FlexView","theme","StudentProfileHighlights","memo","profileHighlights","highlight","jsxs","jsx","Image","Text","desc","StudentProfileHighlights$1"],"mappings":";;;;;;AAiBA,MAAMA,IAAmBC,EAAOC,CAAQ;AAAA;AAAA,+BAET,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAQ5DC,IAA+DC;AAAA,EACnE,CAAC,EAAE,mBAAAC,EAAA,wBAEEJ,GAAS,EAAA,cAAa,WACpB,UAAAI,EAAkB,IAAI,CACrBC,MAAA,gBAAAC;AAAA,IAACR;AAAA,IAAA;AAAA,MAEC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAaO,EAAU;AAAA,MAEvB,UAAA;AAAA,QAAC,gBAAAE,EAAAC,GAAA,EAAM,KAAKH,EAAU,cAAc,KAAKA,EAAU,OAAO,QAAQ,IAAI,OAAO,GAAI,CAAA;AAAA,0BAChFL,GAAS,EAAA,gBAAe,UAAS,OAAO,GAAG,UAAU,GACpD,UAAA;AAAA,UAAA,gBAAAO,EAACE,GAAK,EAAA,WAAU,aAAa,UAAAJ,EAAU,OAAM;AAAA,4BAC5CI,GAAK,EAAA,WAAU,OACb,UAAO,OAAAJ,EAAU,eAAgB,WAC9BA,EAAU,cACVA,EAAU,YAAY,IAAI,CAAQK,MAAA,gBAAAH,EAAC,QAAe,UAAPG,EAAA,GAAAA,CAAY,CAAK,EAClE,CAAA;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAjBKL,EAAU;AAAA,EAmBlB,CAAA,EACH,CAAA;AAGN;AAEAH,EAAyB,cAAc;AAEvC,MAAAS,IAAeT;"}
+{"version":3,"file":"student-profile-highlights.js","sources":["../../../../../../src/features/trial-session/comps/student-profile/student-profile-highlights/student-profile-highlights.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\nimport styled from 'styled-components';\nimport { useTheme } from 'styled-components';\n\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\n\ntype TProfileHighlight = {\n  illustration: string;\n  background: TColorNames;\n  title: string;\n  description: string | string[];\n};\n\nconst HighlightWrapper = styled(FlexView)`\n  &:not(:last-child) {\n    border-bottom: 1px solid ${({ theme }) => theme.colors.BLACK_1};\n  }\n`;\n\ninterface IStudentProfileHighlightsProps {\n  profileHighlights: TProfileHighlight[];\n}\n\nconst StudentProfileHighlights: FC<IStudentProfileHighlightsProps> = memo(\n  ({ profileHighlights }) => {\n    const theme = useTheme();\n    const isMobile = theme.device <= EDeviceType.MOBILE;\n\n    return (\n      <FlexView $borderColor=\"BLACK_1\">\n        {profileHighlights.map(highlight => (\n          <HighlightWrapper\n            key={highlight.title}\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $justifyContent=\"flex-start\"\n            $gapX={1}\n            $gutterX={isMobile ? 0.75 : 1}\n            $flexGapX={isMobile ? 0.5 : 1.5}\n            $background={highlight.background}\n          >\n            <Image\n              src={highlight.illustration}\n              alt={highlight.title}\n              height={isMobile ? 64 : 96}\n              width={isMobile ? 64 : 96}\n            />\n            <FlexView $flexDirection=\"column\" $flex={1} $flexGap={2}>\n              <Text $renderAs=\"ac3-black\">{highlight.title}</Text>\n              <Text $renderAs=\"ab2\">\n                {typeof highlight.description === 'string' ? (\n                  highlight.description\n                ) : (\n                  <FlexView>\n                    {highlight.description.map(desc => (\n                      <FlexView key={desc} $flexDirection=\"row\" $flexColumnGapX={0.5}>\n                        <Text $renderAs=\"ab2\" $inline>\n                          •\n                        </Text>\n                        <Text $renderAs=\"ab2\" as=\"span\" $inline>\n                          {desc}\n                        </Text>\n                      </FlexView>\n                    ))}\n                  </FlexView>\n                )}\n              </Text>\n            </FlexView>\n          </HighlightWrapper>\n        ))}\n      </FlexView>\n    );\n  },\n);\n\nStudentProfileHighlights.displayName = 'StudentProfileHighlights';\n\nexport default StudentProfileHighlights;\n"],"names":["HighlightWrapper","styled","FlexView","theme","StudentProfileHighlights","memo","profileHighlights","isMobile","useTheme","EDeviceType","highlight","jsxs","jsx","Image","Text","desc","StudentProfileHighlights$1"],"mappings":";;;;;;;AAmBA,MAAMA,IAAmBC,EAAOC,CAAQ;AAAA;AAAA,+BAET,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAQ5DC,IAA+DC;AAAA,EACnE,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAEnB,UAAAC,IADQC,IACS,UAAUC,EAAY;AAE7C,6BACGP,GAAS,EAAA,cAAa,WACpB,UAAAI,EAAkB,IAAI,CACrBI,MAAA,gBAAAC;AAAA,MAACX;AAAA,MAAA;AAAA,QAEC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,UAAUO,IAAW,OAAO;AAAA,QAC5B,WAAWA,IAAW,MAAM;AAAA,QAC5B,aAAaG,EAAU;AAAA,QAEvB,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKH,EAAU;AAAA,cACf,KAAKA,EAAU;AAAA,cACf,QAAQH,IAAW,KAAK;AAAA,cACxB,OAAOA,IAAW,KAAK;AAAA,YAAA;AAAA,UACzB;AAAA,4BACCL,GAAS,EAAA,gBAAe,UAAS,OAAO,GAAG,UAAU,GACpD,UAAA;AAAA,YAAA,gBAAAU,EAACE,GAAK,EAAA,WAAU,aAAa,UAAAJ,EAAU,OAAM;AAAA,YAC7C,gBAAAE,EAACE,KAAK,WAAU,OACb,iBAAOJ,EAAU,eAAgB,WAChCA,EAAU,gCAETR,GACE,EAAA,UAAAQ,EAAU,YAAY,IAAI,CAAAK,wBACxBb,GAAoB,EAAA,gBAAe,OAAM,iBAAiB,KACzD,UAAA;AAAA,cAAA,gBAAAU,EAACE,GAAK,EAAA,WAAU,OAAM,SAAO,IAAC,UAE9B,KAAA;AAAA,cACA,gBAAAF,EAACE,KAAK,WAAU,OAAM,IAAG,QAAO,SAAO,IACpC,UACHC,EAAA,CAAA;AAAA,YANa,EAAA,GAAAA,CAOf,CACD,EACH,CAAA,GAEJ;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAnCKL,EAAU;AAAA,IAqClB,CAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEAN,EAAyB,cAAc;AAEvC,MAAAY,IAAeZ;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-helpers.js

@@ -0,0 +1,12 @@
+import { COUNTRY_FLAGS as g } from "../teacher-intro-constants.js";
+const f = (n) => {
+  const l = Object.values(g);
+  return n.map((r, t) => {
+    const e = l.find((o) => o.name === r), a = (e == null ? void 0 : e.name) || r;
+    return t === n.length - 1 && n.length > 1 ? `and ${a}` : `${a}${t < n.length - 2 ? ", " : t === n.length - 2 ? " " : ""}`;
+  }).join("");
+};
+export {
+  f as formatCountryList
+};
+//# sourceMappingURL=teacher-profile-helpers.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teacher-profile-helpers.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-helpers.ts"],"sourcesContent":["import { COUNTRY_FLAGS } from '../teacher-intro-constants';\n\nexport const formatCountryList = (countries: string[]) => {\n  const countryFlagArray = Object.values(COUNTRY_FLAGS);\n\n  return countries\n    .map((country, i) => {\n      const match = countryFlagArray.find(item => item.name === country);\n      const label = match?.name || country;\n\n      if (i === countries.length - 1 && countries.length > 1) {\n        return `and ${label}`;\n      }\n\n      return `${label}${i < countries.length - 2 ? ', ' : i === countries.length - 2 ? ' ' : ''}`;\n    })\n    .join('');\n};\n"],"names":["formatCountryList","countries","countryFlagArray","COUNTRY_FLAGS","country","i","match","item","label"],"mappings":";AAEa,MAAAA,IAAoB,CAACC,MAAwB;AAClD,QAAAC,IAAmB,OAAO,OAAOC,CAAa;AAEpD,SAAOF,EACJ,IAAI,CAACG,GAASC,MAAM;AACnB,UAAMC,IAAQJ,EAAiB,KAAK,CAAQK,MAAAA,EAAK,SAASH,CAAO,GAC3DI,KAAQF,KAAA,gBAAAA,EAAO,SAAQF;AAE7B,WAAIC,MAAMJ,EAAU,SAAS,KAAKA,EAAU,SAAS,IAC5C,OAAOO,CAAK,KAGd,GAAGA,CAAK,GAAGH,IAAIJ,EAAU,SAAS,IAAI,OAAOI,MAAMJ,EAAU,SAAS,IAAI,MAAM,EAAE;AAAA,EAAA,CAC1F,EACA,KAAK,EAAE;AACZ;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js

@@ -1,49 +1,128 @@
-import r from "styled-components";
-import e from "../../../../ui/image/image.js";
-import t from "../../../../ui/layout/flex-view.js";
-const l = r(e)`
+import o from "styled-components";
+import { ILLUSTRATIONS as e } from "../../../../../assets/illustrations/illustrations.js";
+import r from "../../../../ui/image/image.js";
+import i from "../../../../ui/layout/flex-view.js";
+const l = o(r)`
   object-fit: cover;
-`, c = r.div(
-  ({ theme: o }) => `
-  flex: 1;
-  display: grid;
-  border-left: 1px solid ${o.colors.BLACK_T_87};
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: auto auto auto;
+  border-radius: 50%;
+  border: 1.5px solid ${({ theme: t }) => t.colors.REAL_BLACK};
+`, a = o(i)(
+  ({ theme: t }) => `
+  background-image: url(${e.RADIAL_GRADIENT_BG_2});
+  background-repeat: no-repeat;
+  background-size: auto;
+  background-position: top;
+  position: relative;
+  ${t.mediaQueries.minWidthTablet} {
+    background-image: url(${e.RADIAL_GRADIENT_BG});
+  }
+`
+), h = o.div(
+  ({ theme: t }) => `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  ${t.mediaQueries.minWidthTablet} {
+    flex: 1;
+    display: grid;
+    border-left: 1px solid ${t.colors.BLACK_T_87};
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto auto auto;
+  }
 `
-), h = r(t)(
-  ({ theme: o }) => `
-  border: 0.5px solid ${o.colors.WHITE_5};
-  &:first-child,
-  &:nth-child(2) {
-    grid-column: span 1;
-  }
-  &:nth-child(3),
-  &:nth-child(4) {
-    grid-column: span 2;
-  }
-  &:first-child {
-    border-left: none;
-    border-top: none;
-  }
-  &:nth-child(2) {
-    border-right: none;
-    border-top: none;
-  }
-  &:nth-child(3) {
-    border-left: none;
-    border-right: none;
-  }
-  &:nth-child(4) {
-    border-left: none;
-    border-right: none;
-    border-bottom: none;
+), m = o(i)(
+  ({ theme: t }) => `
+  width: 33.33%;
+  &:nth-child(odd) {
+    padding: 12px 16px;
+  }
+  &:last-child {
+    width: 100%;
+  }
+  ${t.mediaQueries.minWidthTablet} {
+    width: auto;
+    border: 0.5px solid ${t.colors.WHITE_5};
+    &:first-child,
+    &:nth-child(2) {
+      grid-column: span 1;
+    }
+    &:nth-child(3),
+    &:nth-child(4) {
+      grid-column: span 2;
+    }
+    &:first-child {
+      border-left: none;
+      border-top: none;
+    }
+    &:nth-child(2) {
+      border-right: none;
+      border-top: none;
+    }
+    &:nth-child(3) {
+      border-left: none;
+      border-right: none;
+    }
+    &:nth-child(4) {
+      border-left: none;
+      border-right: none;
+      border-bottom: none;
+    }
   }
 `
-);
+), x = o(i)`
+  position: absolute;
+  top: 8px;
+  left: 8px;
+`, b = o.img`
+  position: absolute;
+  top: 32px;
+  right: 32px;
+  width: 14px;
+  ${({ theme: t }) => t.mediaQueries.minWidthTablet} {
+    top: 27px;
+    right: 38px;
+    width: 18px;
+  }
+`, c = o.img`
+  position: absolute;
+  top: 40px;
+  left: 80px;
+  width: 11px;
+  ${({ theme: t }) => t.mediaQueries.minWidthTablet} {
+    top: 28.5px;
+    left: 38px;
+    width: 15px;
+  }
+`, u = o.img`
+  position: absolute;
+  left: 64px;
+  bottom: 86px;
+  width: 12px;
+  ${({ theme: t }) => t.mediaQueries.minWidthTablet} {
+    bottom: 130px;
+    left: 38px;
+    width: 13px;
+  }
+`, g = o.img`
+  position: absolute;
+  right: 48px;
+  bottom: 96px;
+  width: 14px;
+  ${({ theme: t }) => t.mediaQueries.minWidthTablet} {
+    right: 32px;
+    bottom: 130px;
+    width: 19px;
+  }
+`;
 export {
-  c as GridContainer,
-  h as GridItem,
-  l as ProfilePicture
+  x as CueLogoWrapper,
+  h as GridContainer,
+  m as GridItem,
+  b as PositionedAsset1,
+  c as PositionedAsset2,
+  u as PositionedAsset3,
+  g as PositionedAsset4,
+  l as ProfilePicture,
+  a as ProfileWrapper
 };
 //# sourceMappingURL=teacher-profile-styled.js.map