@cuemath/leap 3.3.5-aa1 → 3.3.6

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

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

@@ -1 +1 @@
-{"version":3,"file":"teacher-profile-styled.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\n\nconst ProfilePicture = styled(Image)`\n  object-fit: cover;\n`;\n\nconst GridContainer = styled.div(\n  ({ theme }) => `\n  flex: 1;\n  display: grid;\n  border-left: 1px solid ${theme.colors.BLACK_T_87};\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto auto auto;\n`,\n);\n\nconst GridItem = styled(FlexView)(\n  ({ theme }) => `\n  border: 0.5px solid ${theme.colors.WHITE_5};\n  &:first-child,\n  &:nth-child(2) {\n    grid-column: span 1;\n  }\n  &:nth-child(3),\n  &:nth-child(4) {\n    grid-column: span 2;\n  }\n  &:first-child {\n    border-left: none;\n    border-top: none;\n  }\n  &:nth-child(2) {\n    border-right: none;\n    border-top: none;\n  }\n  &:nth-child(3) {\n    border-left: none;\n    border-right: none;\n  }\n  &:nth-child(4) {\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n  }\n`,\n);\n\nexport { ProfilePicture, GridContainer, GridItem };\n"],"names":["ProfilePicture","styled","Image","GridContainer","theme","GridItem","FlexView"],"mappings":";;;AAKM,MAAAA,IAAiBC,EAAOC,CAAK;AAAA;AAAA,GAI7BC,IAAgBF,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAG,EAAA,MAAY;AAAA;AAAA;AAAA,2BAGUA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAIlD,GAEMC,IAAWJ,EAAOK,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAF,EAAA,MAAY;AAAA,wBACOA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2B5C;"}
+{"version":3,"file":"teacher-profile-styled.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\n\nconst ProfilePicture = styled(Image)`\n  object-fit: cover;\n  border-radius: 50%;\n  border: 1.5px solid ${({ theme }) => theme.colors.REAL_BLACK};\n`;\n\nconst ProfileWrapper = styled(FlexView)(\n  ({ theme }) => `\n  background-image: url(${ILLUSTRATIONS.RADIAL_GRADIENT_BG_2});\n  background-repeat: no-repeat;\n  background-size: auto;\n  background-position: top;\n  position: relative;\n  ${theme.mediaQueries.minWidthTablet} {\n    background-image: url(${ILLUSTRATIONS.RADIAL_GRADIENT_BG});\n  }\n`,\n);\n\nconst GridContainer = styled.div(\n  ({ theme }) => `\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  ${theme.mediaQueries.minWidthTablet} {\n    flex: 1;\n    display: grid;\n    border-left: 1px solid ${theme.colors.BLACK_T_87};\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: auto auto auto;\n  }\n`,\n);\n\nconst GridItem = styled(FlexView)(\n  ({ theme }) => `\n  width: 33.33%;\n  &:nth-child(odd) {\n    padding: 12px 16px;\n  }\n  &:last-child {\n    width: 100%;\n  }\n  ${theme.mediaQueries.minWidthTablet} {\n    width: auto;\n    border: 0.5px solid ${theme.colors.WHITE_5};\n    &:first-child,\n    &:nth-child(2) {\n      grid-column: span 1;\n    }\n    &:nth-child(3),\n    &:nth-child(4) {\n      grid-column: span 2;\n    }\n    &:first-child {\n      border-left: none;\n      border-top: none;\n    }\n    &:nth-child(2) {\n      border-right: none;\n      border-top: none;\n    }\n    &:nth-child(3) {\n      border-left: none;\n      border-right: none;\n    }\n    &:nth-child(4) {\n      border-left: none;\n      border-right: none;\n      border-bottom: none;\n    }\n  }\n`,\n);\n\nconst CueLogoWrapper = styled(FlexView)`\n  position: absolute;\n  top: 8px;\n  left: 8px;\n`;\n\nconst PositionedAsset1 = styled.img`\n  position: absolute;\n  top: 32px;\n  right: 32px;\n  width: 14px;\n  ${({ theme }) => theme.mediaQueries.minWidthTablet} {\n    top: 27px;\n    right: 38px;\n    width: 18px;\n  }\n`;\nconst PositionedAsset2 = styled.img`\n  position: absolute;\n  top: 40px;\n  left: 80px;\n  width: 11px;\n  ${({ theme }) => theme.mediaQueries.minWidthTablet} {\n    top: 28.5px;\n    left: 38px;\n    width: 15px;\n  }\n`;\nconst PositionedAsset3 = styled.img`\n  position: absolute;\n  left: 64px;\n  bottom: 86px;\n  width: 12px;\n  ${({ theme }) => theme.mediaQueries.minWidthTablet} {\n    bottom: 130px;\n    left: 38px;\n    width: 13px;\n  }\n`;\nconst PositionedAsset4 = styled.img`\n  position: absolute;\n  right: 48px;\n  bottom: 96px;\n  width: 14px;\n  ${({ theme }) => theme.mediaQueries.minWidthTablet} {\n    right: 32px;\n    bottom: 130px;\n    width: 19px;\n  }\n`;\n\nexport {\n  PositionedAsset1,\n  PositionedAsset2,\n  PositionedAsset3,\n  PositionedAsset4,\n  CueLogoWrapper,\n  ProfilePicture,\n  GridContainer,\n  GridItem,\n  ProfileWrapper,\n};\n"],"names":["ProfilePicture","styled","Image","theme","ProfileWrapper","FlexView","ILLUSTRATIONS","GridContainer","GridItem","CueLogoWrapper","PositionedAsset1","PositionedAsset2","PositionedAsset3","PositionedAsset4"],"mappings":";;;;AAMM,MAAAA,IAAiBC,EAAOC,CAAK;AAAA;AAAA;AAAA,wBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,GAGxDC,IAAiBH,EAAOI,CAAQ;AAAA,EACpC,CAAC,EAAE,OAAAF,EAAA,MAAY;AAAA,0BACSG,EAAc,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxDH,EAAM,aAAa,cAAc;AAAA,4BACTG,EAAc,kBAAkB;AAAA;AAAA;AAG5D,GAEMC,IAAgBN,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,IAIbA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA,6BAGRA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAKpD,GAEMK,IAAWP,EAAOI,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAF,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQbA,EAAM,aAAa,cAAc;AAAA;AAAA,0BAEXA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4B9C,GAEMM,IAAiBR,EAAOI,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMhCK,IAAmBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,GAM9CQ,IAAmBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,GAM9CS,IAAmBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,GAM9CU,IAAmBZ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,64 +1,182 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { memo as G, useMemo as T } from "react";
-import C from "../../../../ui/image/image.js";
-import a from "../../../../ui/layout/flex-view.js";
-import j from "../../../../ui/separator/separator.js";
-import t from "../../../../ui/text/text.js";
-import { COUNTRY_FLAGS as k } from "../teacher-intro-constants.js";
-import { ProfilePicture as I, GridContainer as S, GridItem as i } from "./teacher-profile-styled.js";
-const O = G(({ teacherProfile: s }) => {
+import { jsxs as t, Fragment as P, jsx as r } from "react/jsx-runtime";
+import { memo as Y, useMemo as l, useCallback as m } from "react";
+import { useTheme as j } from "styled-components";
+import { ILLUSTRATIONS as u } from "../../../../../assets/illustrations/illustrations.js";
+import B from "../../../../../assets/line-icons/icons/cuemath-logo.js";
+import H from "../../../../ui/buttons/button/button.js";
+import V from "../../../../ui/image/image.js";
+import s from "../../../../ui/layout/flex-view.js";
+import x from "../../../../ui/separator/separator.js";
+import c from "../../../../ui/text/text.js";
+import { EDeviceType as F } from "../../../../ui/theme/constants.js";
+import { COUNTRY_FLAGS as K } from "../teacher-intro-constants.js";
+import { formatCountryList as q } from "./teacher-profile-helpers.js";
+import { GridItem as N, ProfileWrapper as z, CueLogoWrapper as Q, PositionedAsset1 as J, PositionedAsset2 as Z, PositionedAsset3 as ee, PositionedAsset4 as re, ProfilePicture as te, GridContainer as ne } from "./teacher-profile-styled.js";
+const oe = Object.values(K), y = Y(({ teacherProfile: S }) => {
   const {
-    degree: f,
+    degree: D,
     countries: o,
-    lower_grade: c,
-    higher_grade: n,
-    header_image: u,
-    years_of_experience: g,
-    number_of_students_taught: m
-  } = s || {}, { degree_name: d, field_of_study: l } = f || {}, $ = Object.values(k), h = n && parseInt(n, 10) > 8, p = T(() => h ? "High School" : ` ${c === "K" ? "" : "G"}${c} - G${n}`, [h, n, c]);
-  return /* @__PURE__ */ e(a, { $flexDirection: "row", $borderColor: "BLACK_T_87", $background: "WHITE_3", children: [
-    /* @__PURE__ */ r(I, { withLoader: !0, src: u, width: 350, height: 350 }),
-    /* @__PURE__ */ e(S, { children: [
-      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: [
-          g,
-          "+"
-        ] }),
-        /* @__PURE__ */ r(t, { $renderAs: "ub3", children: "Yrs of Teaching Experience" })
-      ] }),
-      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: [
-          m,
-          "+"
-        ] }),
-        /* @__PURE__ */ r(t, { $renderAs: "ub3", children: "Students Taught" })
-      ] }),
-      d && l && /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ r(t, { $renderAs: "ab1-black", children: d }),
-        /* @__PURE__ */ e(t, { $renderAs: "ub3", children: [
-          "In ",
-          l
-        ] })
-      ] }),
-      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ e(t, { $renderAs: "ab1-black", children: [
+    lower_grade: d,
+    higher_grade: i,
+    header_image: G,
+    years_of_experience: R,
+    number_of_students_taught: v,
+    first_name: g,
+    last_name: O,
+    teacher_profile_url: n
+  } = S || {}, {
+    degree_name: $,
+    field_of_study: h,
+    degree_code: C
+  } = D || {}, b = j(), e = l(() => b.device <= F.MOBILE, [b.device]), I = l(() => i && parseInt(i, 10) > 8, [i]), w = l(
+    () => g ? `${g} ${O}`.trim() : "",
+    [g, O]
+  ), p = l(() => I ? "High School" : !d || !i ? "" : ` ${d === "K" ? "" : "G"}${d} - G${i}`, [I, i, d]), E = l(() => o && o.length > 0, [o]), U = l(() => $ && h, [$, h]), k = m(() => {
+    n && window.open(n, "_blank");
+  }, [n]), _ = m(() => n ? /* @__PURE__ */ t(P, { children: [
+    /* @__PURE__ */ r(x, { heightX: 1.5 }),
+    /* @__PURE__ */ r(
+      H,
+      {
+        label: "View profile",
+        renderAs: "secondary",
+        shape: "square",
+        onClick: k,
+        size: "small"
+      }
+    )
+  ] }) : null, [k, n]), A = m(
+    ({
+      value: a,
+      label: T,
+      mobileLabel: f,
+      valueRenderAs: L = "ah3-black"
+    }) => /* @__PURE__ */ t(
+      N,
+      {
+        $flex: e ? 1 : 0,
+        $justifyContent: e ? "flex-start" : "center",
+        $gutter: e ? 8 : 24,
+        $gapX: e ? 0.75 : 0,
+        $alignItems: e ? "center" : "flex-start",
+        $background: e ? "YELLOW_3" : "TRANSPARENT",
+        children: [
+          /* @__PURE__ */ r(c, { $renderAs: L, $renderOnMobileAs: "ab2-black", children: a }),
+          /* @__PURE__ */ r(c, { $renderAs: "ub2", $renderOnMobileAs: "ub3", $align: e ? "center" : "left", children: e && f ? f : T })
+        ]
+      }
+    ),
+    [e]
+  ), M = m(() => {
+    if (!E) return null;
+    if (e) {
+      const a = q(o);
+      return /* @__PURE__ */ t(s, { $gapX: 0.75, children: [
+        /* @__PURE__ */ t(c, { $renderOnMobileAs: "ub3-bold", $renderAs: "ab3-black", children: [
           "Teaching ",
           p,
-          " kids in"
+          " kids in ",
+          a,
+          "."
         ] }),
-        /* @__PURE__ */ r(j, { height: 12 }),
-        /* @__PURE__ */ r(a, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: o && o.length > 0 && o.map((b) => {
-          const _ = $.find((w) => w.name === b), { flag_icon: x = "", label: y, name: A } = _ || {};
-          return /* @__PURE__ */ e(a, { $flexDirection: "row", $flexGap: 4, children: [
-            /* @__PURE__ */ r(C, { src: x, width: 30, height: 20, withLoader: !1 }),
-            /* @__PURE__ */ r(t, { $renderAs: "ab3-black", children: y })
-          ] }, A);
-        }) })
-      ] })
-    ] })
-  ] });
-}), W = O;
+        _(),
+        n && /* @__PURE__ */ r(x, { heightX: 0.75 })
+      ] });
+    }
+    return /* @__PURE__ */ t(s, { $flexDirection: "column", $flexGap: 12, children: [
+      /* @__PURE__ */ t(c, { $renderAs: "ab1-black", $renderOnMobileAs: "ub3-bold", children: [
+        "Teaching ",
+        p,
+        " kids in"
+      ] }),
+      /* @__PURE__ */ r(s, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: o.map((a) => {
+        const T = oe.find((X) => X.name === a), { flag_icon: f = "", label: L = "", name: W } = T || {};
+        return /* @__PURE__ */ t(s, { $flexDirection: "row", $flexGap: 4, children: [
+          /* @__PURE__ */ r(V, { src: f, width: 30, height: 20, withLoader: !1 }),
+          /* @__PURE__ */ r(c, { $renderAs: "ab3-black", children: L })
+        ] }, W || a);
+      }) })
+    ] });
+  }, [
+    E,
+    e,
+    p,
+    o,
+    _,
+    n
+  ]);
+  return /* @__PURE__ */ t(
+    s,
+    {
+      $flexDirection: e ? "column" : "row",
+      $borderColor: "BLACK_T_87",
+      $background: "WHITE_3",
+      children: [
+        /* @__PURE__ */ t(
+          z,
+          {
+            $gapX: e ? 1 : 1.5,
+            $gutterX: 1,
+            $background: "YELLOW_4",
+            $alignItems: "center",
+            $justifyContent: "center",
+            children: [
+              e && /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(B, { width: 54, height: 8, color: b.colors.REAL_BLACK }) }),
+              /* @__PURE__ */ r(J, { src: u.STAR_OUTLINED }),
+              /* @__PURE__ */ r(Z, { src: u.HEART_OUTLINED }),
+              /* @__PURE__ */ r(ee, { src: u.EQUAL_OUTLINED }),
+              /* @__PURE__ */ r(re, { src: u.TROPHY_OUTLINED }),
+              /* @__PURE__ */ r(
+                te,
+                {
+                  withLoader: !0,
+                  src: G,
+                  width: e ? 154 : 238,
+                  height: e ? 154 : 238
+                }
+              ),
+              w && /* @__PURE__ */ t(P, { children: [
+                /* @__PURE__ */ r(x, { heightX: e ? 0.75 : 1.5 }),
+                /* @__PURE__ */ r(c, { $renderAs: "ac2-black", $color: "BLACK_1", $align: "center", children: w })
+              ] }),
+              !e && _()
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(ne, { children: [
+          A({
+            value: `${R}+`,
+            label: "Yrs of Teaching Experience",
+            mobileLabel: "Years of Teaching"
+          }),
+          A({
+            value: `${v}+`,
+            label: "Students Taught"
+          }),
+          U && A({
+            value: e && C ? C : $,
+            label: `In ${h}`,
+            mobileLabel: h,
+            valueRenderAs: "ab1-black"
+          }),
+          /* @__PURE__ */ r(
+            N,
+            {
+              $justifyContent: "center",
+              $gutter: 24,
+              $flexDirection: e ? "row" : "column",
+              $background: e ? "YELLOW_4" : "TRANSPARENT",
+              children: M()
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+y.displayName = "TeacherProfile";
+const _e = y;
 export {
-  W as default
+  _e as default
 };
 //# sourceMappingURL=teacher-profile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"teacher-profile.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.tsx"],"sourcesContent":["import type { ITeacherProfileDetails } from '../../../trial-session-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\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 { COUNTRY_FLAGS } from '../teacher-intro-constants';\nimport * as Styled from './teacher-profile-styled';\n\ninterface ITeacherProfileProps {\n  teacherProfile?: ITeacherProfileDetails;\n}\n\nconst TeacherProfile: FC<ITeacherProfileProps> = memo(({ teacherProfile }) => {\n  const {\n    degree,\n    countries,\n    lower_grade: lowerGrade,\n    higher_grade: higherGrade,\n    header_image: headerImage,\n    years_of_experience: yearsOfExperience,\n    number_of_students_taught: numberOfStudentsTaught,\n  } = teacherProfile || {};\n  const { degree_name: degreeName, field_of_study: fieldOfStudy } = degree || {};\n\n  const countryFlagArray = Object.values(COUNTRY_FLAGS);\n  const isHighSchool = higherGrade && parseInt(higherGrade, 10) > 8;\n\n  const displayGrade = useMemo(() => {\n    return isHighSchool\n      ? 'High School'\n      : ` ${lowerGrade === 'K' ? '' : 'G'}${lowerGrade} - G${higherGrade}`;\n  }, [isHighSchool, higherGrade, lowerGrade]);\n\n  return (\n    <FlexView $flexDirection=\"row\" $borderColor=\"BLACK_T_87\" $background=\"WHITE_3\">\n      <Styled.ProfilePicture withLoader src={headerImage} width={350} height={350} />\n      <Styled.GridContainer>\n        <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n          <Text $renderAs=\"ah3-black\">{yearsOfExperience}+</Text>\n          <Text $renderAs=\"ub3\">Yrs of Teaching Experience</Text>\n        </Styled.GridItem>\n        <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n          <Text $renderAs=\"ah3-black\">{numberOfStudentsTaught}+</Text>\n          <Text $renderAs=\"ub3\">Students Taught</Text>\n        </Styled.GridItem>\n        {degreeName && fieldOfStudy && (\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ab1-black\">{degreeName}</Text>\n            <Text $renderAs=\"ub3\">In {fieldOfStudy}</Text>\n          </Styled.GridItem>\n        )}\n        <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n          <Text $renderAs=\"ab1-black\">Teaching {displayGrade} kids in</Text>\n          <Separator height={12} />\n          <FlexView $flexDirection=\"row\" $flexGap={16} $flexWrap>\n            {countries &&\n              countries.length > 0 &&\n              countries.map(country => {\n                const countryFlag = countryFlagArray.find(item => item.name === country);\n                const { flag_icon: flagIcon = '', label, name } = countryFlag || {};\n\n                return (\n                  <FlexView key={name} $flexDirection=\"row\" $flexGap={4}>\n                    <Image src={flagIcon} width={30} height={20} withLoader={false} />\n                    <Text $renderAs=\"ab3-black\">{label}</Text>\n                  </FlexView>\n                );\n              })}\n          </FlexView>\n        </Styled.GridItem>\n      </Styled.GridContainer>\n    </FlexView>\n  );\n});\n\nexport default TeacherProfile;\n"],"names":["TeacherProfile","memo","teacherProfile","degree","countries","lowerGrade","higherGrade","headerImage","yearsOfExperience","numberOfStudentsTaught","degreeName","fieldOfStudy","countryFlagArray","COUNTRY_FLAGS","isHighSchool","displayGrade","useMemo","FlexView","jsx","Styled.ProfilePicture","jsxs","Styled.GridContainer","Styled.GridItem","Text","Separator","country","countryFlag","item","flagIcon","label","name","Image","TeacherProfile$1"],"mappings":"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"}
+{"version":3,"file":"teacher-profile.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.tsx"],"sourcesContent":["import type { TTextVariants } from '../../../../ui/types';\nimport type { ITeacherProfileProps } from './teacher-profile-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport CuemathLogo from '../../../../../assets/line-icons/icons/cuemath-logo';\nimport Button from '../../../../ui/buttons/button/button';\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 { COUNTRY_FLAGS } from '../teacher-intro-constants';\nimport { formatCountryList } from './teacher-profile-helpers';\nimport * as Styled from './teacher-profile-styled';\n\nconst countryFlagArray = Object.values(COUNTRY_FLAGS);\n\nconst TeacherProfile: FC<ITeacherProfileProps> = memo(({ teacherProfile }) => {\n  const {\n    degree,\n    countries,\n    lower_grade: lowerGrade,\n    higher_grade: higherGrade,\n    header_image: headerImage,\n    years_of_experience: yearsOfExperience,\n    number_of_students_taught: numberOfStudentsTaught,\n    first_name: firstName,\n    last_name: lastName,\n    teacher_profile_url: teacherProfileUrl,\n  } = teacherProfile || {};\n\n  const {\n    degree_name: degreeName,\n    field_of_study: fieldOfStudy,\n    degree_code: degreeCode,\n  } = degree || {};\n\n  const theme = useTheme();\n  const isMobile = useMemo(() => theme.device <= EDeviceType.MOBILE, [theme.device]);\n  const isHighSchool = useMemo(() => higherGrade && parseInt(higherGrade, 10) > 8, [higherGrade]);\n  const teacherName = useMemo(\n    () => (firstName ? `${firstName} ${lastName}`.trim() : ''),\n    [firstName, lastName],\n  );\n\n  const displayGrade = useMemo(() => {\n    if (isHighSchool) return 'High School';\n\n    if (!lowerGrade || !higherGrade) return '';\n\n    return ` ${lowerGrade === 'K' ? '' : 'G'}${lowerGrade} - G${higherGrade}`;\n  }, [isHighSchool, higherGrade, lowerGrade]);\n\n  const hasValidCountries = useMemo(() => countries && countries.length > 0, [countries]);\n\n  const hasDegreeInfo = useMemo(() => degreeName && fieldOfStudy, [degreeName, fieldOfStudy]);\n\n  const handleViewProfile = useCallback(() => {\n    if (teacherProfileUrl) {\n      window.open(teacherProfileUrl, '_blank');\n    }\n  }, [teacherProfileUrl]);\n\n  const renderViewProfileButton = useCallback(() => {\n    if (!teacherProfileUrl) return null;\n\n    return (\n      <>\n        <Separator heightX={1.5} />\n        <Button\n          label=\"View profile\"\n          renderAs=\"secondary\"\n          shape=\"square\"\n          onClick={handleViewProfile}\n          size=\"small\"\n        />\n      </>\n    );\n  }, [handleViewProfile, teacherProfileUrl]);\n\n  const renderStatItem = useCallback(\n    ({\n      value,\n      label,\n      mobileLabel,\n      valueRenderAs = 'ah3-black',\n    }: {\n      value?: string | number;\n      label: string;\n      mobileLabel?: string;\n      valueRenderAs?: TTextVariants;\n    }) => (\n      <Styled.GridItem\n        $flex={isMobile ? 1 : 0}\n        $justifyContent={isMobile ? 'flex-start' : 'center'}\n        $gutter={isMobile ? 8 : 24}\n        $gapX={isMobile ? 0.75 : 0}\n        $alignItems={isMobile ? 'center' : 'flex-start'}\n        $background={isMobile ? 'YELLOW_3' : 'TRANSPARENT'}\n      >\n        <Text $renderAs={valueRenderAs} $renderOnMobileAs=\"ab2-black\">\n          {value}\n        </Text>\n        <Text $renderAs=\"ub2\" $renderOnMobileAs=\"ub3\" $align={isMobile ? 'center' : 'left'}>\n          {isMobile && mobileLabel ? mobileLabel : label}\n        </Text>\n      </Styled.GridItem>\n    ),\n    [isMobile],\n  );\n\n  const renderCountries = useCallback(() => {\n    if (!hasValidCountries) return null;\n\n    if (isMobile) {\n      const formattedCountries = formatCountryList(countries!);\n\n      return (\n        <FlexView $gapX={0.75}>\n          <Text $renderOnMobileAs=\"ub3-bold\" $renderAs=\"ab3-black\">\n            Teaching {displayGrade} kids in {formattedCountries}.\n          </Text>\n          {renderViewProfileButton()}\n          {teacherProfileUrl && <Separator heightX={0.75} />}\n        </FlexView>\n      );\n    }\n\n    return (\n      <FlexView $flexDirection=\"column\" $flexGap={12}>\n        <Text $renderAs=\"ab1-black\" $renderOnMobileAs=\"ub3-bold\">\n          Teaching {displayGrade} kids in\n        </Text>\n        <FlexView $flexDirection=\"row\" $flexGap={16} $flexWrap>\n          {countries!.map(country => {\n            const match = countryFlagArray.find(item => item.name === country);\n            const { flag_icon: flagIcon = '', label = '', name } = match || {};\n\n            return (\n              <FlexView key={name || country} $flexDirection=\"row\" $flexGap={4}>\n                <Image src={flagIcon} width={30} height={20} withLoader={false} />\n                <Text $renderAs=\"ab3-black\">{label}</Text>\n              </FlexView>\n            );\n          })}\n        </FlexView>\n      </FlexView>\n    );\n  }, [\n    hasValidCountries,\n    isMobile,\n    displayGrade,\n    countries,\n    renderViewProfileButton,\n    teacherProfileUrl,\n  ]);\n\n  return (\n    <FlexView\n      $flexDirection={isMobile ? 'column' : 'row'}\n      $borderColor=\"BLACK_T_87\"\n      $background=\"WHITE_3\"\n    >\n      <Styled.ProfileWrapper\n        $gapX={isMobile ? 1 : 1.5}\n        $gutterX={1}\n        $background=\"YELLOW_4\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n      >\n        {isMobile && (\n          <Styled.CueLogoWrapper>\n            <CuemathLogo width={54} height={8} color={theme.colors.REAL_BLACK} />\n          </Styled.CueLogoWrapper>\n        )}\n        <Styled.PositionedAsset1 src={ILLUSTRATIONS.STAR_OUTLINED} />\n        <Styled.PositionedAsset2 src={ILLUSTRATIONS.HEART_OUTLINED} />\n        <Styled.PositionedAsset3 src={ILLUSTRATIONS.EQUAL_OUTLINED} />\n        <Styled.PositionedAsset4 src={ILLUSTRATIONS.TROPHY_OUTLINED} />\n        <Styled.ProfilePicture\n          withLoader\n          src={headerImage}\n          width={isMobile ? 154 : 238}\n          height={isMobile ? 154 : 238}\n        />\n        {teacherName && (\n          <>\n            <Separator heightX={isMobile ? 0.75 : 1.5} />\n            <Text $renderAs=\"ac2-black\" $color=\"BLACK_1\" $align=\"center\">\n              {teacherName}\n            </Text>\n          </>\n        )}\n        {!isMobile && renderViewProfileButton()}\n      </Styled.ProfileWrapper>\n\n      <Styled.GridContainer>\n        {renderStatItem({\n          value: `${yearsOfExperience}+`,\n          label: 'Yrs of Teaching Experience',\n          mobileLabel: 'Years of Teaching',\n        })}\n        {renderStatItem({\n          value: `${numberOfStudentsTaught}+`,\n          label: 'Students Taught',\n        })}\n        {hasDegreeInfo &&\n          renderStatItem({\n            value: isMobile && degreeCode ? degreeCode : degreeName,\n            label: `In ${fieldOfStudy}`,\n            mobileLabel: fieldOfStudy,\n            valueRenderAs: 'ab1-black',\n          })}\n        <Styled.GridItem\n          $justifyContent=\"center\"\n          $gutter={24}\n          $flexDirection={isMobile ? 'row' : 'column'}\n          $background={isMobile ? 'YELLOW_4' : 'TRANSPARENT'}\n        >\n          {renderCountries()}\n        </Styled.GridItem>\n      </Styled.GridContainer>\n    </FlexView>\n  );\n});\n\nTeacherProfile.displayName = 'TeacherProfile';\n\nexport default TeacherProfile;\n"],"names":["countryFlagArray","COUNTRY_FLAGS","TeacherProfile","memo","teacherProfile","degree","countries","lowerGrade","higherGrade","headerImage","yearsOfExperience","numberOfStudentsTaught","firstName","lastName","teacherProfileUrl","degreeName","fieldOfStudy","degreeCode","theme","useTheme","isMobile","useMemo","EDeviceType","isHighSchool","teacherName","displayGrade","hasValidCountries","hasDegreeInfo","handleViewProfile","useCallback","renderViewProfileButton","jsxs","Fragment","jsx","Separator","Button","renderStatItem","value","label","mobileLabel","valueRenderAs","Styled.GridItem","Text","renderCountries","formattedCountries","formatCountryList","FlexView","country","match","item","flagIcon","name","Image","Styled.ProfileWrapper","Styled.CueLogoWrapper","CuemathLogo","Styled.PositionedAsset1","ILLUSTRATIONS","Styled.PositionedAsset2","Styled.PositionedAsset3","Styled.PositionedAsset4","Styled.ProfilePicture","Styled.GridContainer","TeacherProfile$1"],"mappings":"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"}