@cuemath/leap 3.3.0 → 3.3.2-2.beta-guru-01

package/dist/features/wins-dashboard/belts-elements-stickers/elements.js

@@ -0,0 +1,184 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import w, { memo as S, useCallback as f } from "react";
+import r, { css as c } from "styled-components";
+import d from "../../ui/layout/flex-view.js";
+import R from "../../ui/lottie-animation/lottie-animation.js";
+import D from "../../ui/separator/separator.js";
+import C from "../../ui/text/text.js";
+import { SCREEN_SIZES as g, getRewardElement as W, elementColors as y } from "../constants.js";
+const H = {
+  TETRA: 0.5,
+  COSA: 0.3,
+  DODA: 0.3,
+  HEXO: 0.5,
+  OCTO: 0.5,
+  EKA: 0.5,
+  DVI: 0.3,
+  CHATVA: 0.3,
+  ASHTA: 0.5,
+  ZODASA: 0.4,
+  CLAP: 0.6,
+  COOL: 0.6,
+  LIKE: 0.6,
+  WOW: 0.6,
+  CHEER: 0.6,
+  "ROCK-ON": 0.6
+}, K = {
+  ASHTA: "Ashta",
+  CHATVA: "Chatva",
+  COSA: "Cosa",
+  DODA: "Doca",
+  DVI: "Dvi",
+  EKA: "Eka",
+  HEXO: "Hexo",
+  OCTO: "Octo",
+  TETRA: "T'tro",
+  ZODASA: "Zodasa",
+  CONGRATS: "Congrats",
+  COOL: "Cool",
+  KUDOS: "Kudos",
+  GREAT: "Great",
+  WOW: "Wow",
+  AWESOME: "Awesome"
+}, V = (t, e) => {
+  let i = null, a = "-4px", n = null;
+  return t ? n = "-4px" : (i = `${e ? "-2px" : "2px"}`, a = `${e ? "-4px" : "2px"}`), `
+    bottom: ${i};
+    top: ${n};
+    right: ${a};
+  `;
+}, P = r(d)`
+  align-items: center;
+  gap: 4px;
+`, G = r(d)`
+  position: absolute;
+  top: -3px;
+  align-items: center;
+  justify-content: center;
+  width: 62px;
+  height: 62px;
+`, j = r.div`
+  position: relative;
+  width: 62px;
+  height: 62px;
+`, I = r.div`
+  position: relative;
+`, M = r.img`
+  width: 56px;
+  height: 56px;
+  ${({ $disabled: t, $disabledVal: e }) => t && c`
+      filter: saturate(0);
+      opacity: ${e};
+    `}
+`, _ = r.div`
+  border: 1px solid ${({ theme: t }) => t.colors.GREY_2};
+  border-radius: 8px;
+`, Z = r(d)`
+  width: 62px;
+  height: 62px;
+  align-items: center;
+  justify-content: center;
+  ${({ $disabled: t, $disabledVal: e }) => t && c`
+      filter: saturate(0);
+      opacity: ${e};
+    `}
+`, v = r(d)`
+  position: absolute;
+  ${({ $isSticker: t, $isCoddingType: e }) => V(t, e)};
+  background-color: ${({ theme: t }) => t.colors.GREY_2};
+  border-radius: ${({ $borderRadius: t }) => t};
+  border: ${({ $borderColor: t }) => `1px solid ${t}`};
+  width: ${({ $width: t }) => t}px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  ${({ $currentScreenWidth: t, $width: e }) => t < g.LAPTOP && c`
+      width: ${e + 6}px;
+      height: 22px;
+    `}
+`, B = r(C)`
+  font-size: 9px;
+  line-height: 14px;
+  ${({ $currentScreenWidth: t }) => t < g.LAPTOP && c`
+      font-size: 12px;
+      line-height: 14px;
+    `}
+`, N = r(C)`
+  color: ${({ theme: t }) => t.colors.BLACK};
+  opacity: ${({ $disabled: t }) => t ? 1 : 0.5};
+`, k = ({
+  isAchieved: t = !1,
+  count: e = 0,
+  elementType: i,
+  isCoddingType: a = !1,
+  isSticker: n = !1,
+  lotties: A = {},
+  currentScreenWidth: $
+}) => {
+  const h = e >= 100, O = K[i], x = H[i] || 1, { height: E, width: b, lottieSrc: s } = A[i] || {}, p = w.useRef(null), L = f(() => {
+    var l, m;
+    t && s && ((l = p.current) == null || l.play(), (m = p.current) == null || m.setLoop(!0));
+  }, [t, s]), T = f(() => {
+    var l;
+    s && ((l = p.current) == null || l.setLoop(!1));
+  }, [s]);
+  return /* @__PURE__ */ u(P, { children: [
+    /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(G, { $flexDirection: "row", children: /* @__PURE__ */ u(I, { children: [
+      !n && /* @__PURE__ */ o(
+        M,
+        {
+          $disabled: !t,
+          $disabledVal: x,
+          src: W(i),
+          alt: "reward"
+        }
+      ),
+      n && s && /* @__PURE__ */ o(_, { $disabled: !t, children: /* @__PURE__ */ o(
+        Z,
+        {
+          $disabled: !t,
+          $disabledVal: x,
+          onMouseEnter: L,
+          onMouseLeave: T,
+          children: /* @__PURE__ */ o(
+            R,
+            {
+              src: s,
+              width: b,
+              height: E,
+              ref: p,
+              settings: { autoplay: !1, loop: !1 }
+            }
+          )
+        }
+      ) }),
+      t && /* @__PURE__ */ o(
+        v,
+        {
+          $isSticker: n,
+          $borderColor: y[i] || "#000",
+          $width: h ? 28 : 16,
+          $borderRadius: h ? "26px" : "50%",
+          $isCoddingType: a,
+          $currentScreenWidth: $,
+          $flexDirection: "row",
+          children: /* @__PURE__ */ o(
+            B,
+            {
+              $currentScreenWidth: $,
+              $renderAs: "body3",
+              $color: "BLACK",
+              children: e
+            }
+          )
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ o(D, { height: 4 }),
+    /* @__PURE__ */ o(N, { $renderAs: "body3", $disabled: t, children: O })
+  ] });
+}, tt = S(k);
+export {
+  tt as default
+};
+//# sourceMappingURL=elements.js.map

package/dist/features/wins-dashboard/belts-elements-stickers/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/elements.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\n\nimport React, { memo, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { elementColors, getRewardElement, SCREEN_SIZES } from '../constants';\n\nconst disablePercentages: Record<string, number> = {\n  'TETRA': 0.5,\n  'COSA': 0.3,\n  'DODA': 0.3,\n  'HEXO': 0.5,\n  'OCTO': 0.5,\n  'EKA': 0.5,\n  'DVI': 0.3,\n  'CHATVA': 0.3,\n  'ASHTA': 0.5,\n  'ZODASA': 0.4,\n  'CLAP': 0.6,\n  'COOL': 0.6,\n  'LIKE': 0.6,\n  'WOW': 0.6,\n  'CHEER': 0.6,\n  'ROCK-ON': 0.6,\n};\n\nconst elementTitles: Record<string, string> = {\n  ASHTA: 'Ashta',\n  CHATVA: 'Chatva',\n  COSA: 'Cosa',\n  DODA: 'Doca',\n  DVI: 'Dvi',\n  EKA: 'Eka',\n  HEXO: 'Hexo',\n  OCTO: 'Octo',\n  TETRA: `T'tro`,\n  ZODASA: 'Zodasa',\n  CONGRATS: 'Congrats',\n  COOL: 'Cool',\n  KUDOS: 'Kudos',\n  GREAT: 'Great',\n  WOW: 'Wow',\n  AWESOME: 'Awesome',\n};\n\nconst getPositionStyles = (isSticker: boolean, isCoddingType: boolean): string => {\n  let bottom: string | null = null;\n  let right = '-4px';\n  let top: string | null = null;\n\n  if (!isSticker) {\n    bottom = `${isCoddingType ? '-2px' : '2px'}`;\n    right = `${isCoddingType ? '-4px' : '2px'}`;\n  } else {\n    top = '-4px';\n  }\n\n  return `\n    bottom: ${bottom};\n    top: ${top};\n    right: ${right};\n  `;\n};\n\nconst ElementContainer = styled(FlexView)`\n  align-items: center;\n  gap: 4px;\n`;\n\nconst Wrapper = styled(FlexView)`\n  position: absolute;\n  top: -3px;\n  align-items: center;\n  justify-content: center;\n  width: 62px;\n  height: 62px;\n`;\n\nconst BgWrapper = styled.div`\n  position: relative;\n  width: 62px;\n  height: 62px;\n`;\n\nconst GemContainer = styled.div`\n  position: relative;\n`;\n\ninterface ImageWrapperProps {\n  $disabled: boolean;\n  $disabledVal: number;\n}\n\nconst ImageWrapper = styled.img<ImageWrapperProps>`\n  width: 56px;\n  height: 56px;\n  ${({ $disabled, $disabledVal }) =>\n    $disabled &&\n    css`\n      filter: saturate(0);\n      opacity: ${$disabledVal};\n    `}\n`;\n\ninterface LottieContainerProps {\n  $disabled: boolean;\n}\n\nconst LottieContainer = styled.div<LottieContainerProps>`\n  border: 1px solid ${({ theme }) => theme.colors.GREY_2};\n  border-radius: 8px;\n`;\n\ninterface LottieWrapperProps {\n  $disabled: boolean;\n  $disabledVal: number;\n}\n\nconst LottieWrapper = styled(FlexView)<LottieWrapperProps>`\n  width: 62px;\n  height: 62px;\n  align-items: center;\n  justify-content: center;\n  ${({ $disabled, $disabledVal }) =>\n    $disabled &&\n    css`\n      filter: saturate(0);\n      opacity: ${$disabledVal};\n    `}\n`;\n\ninterface CountWrapperProps {\n  $isSticker: boolean;\n  $isCoddingType: boolean;\n  $borderColor: string;\n  $width: number;\n  $borderRadius: string;\n  $currentScreenWidth: number;\n}\n\nconst CountWrapper = styled(FlexView)<CountWrapperProps>`\n  position: absolute;\n  ${({ $isSticker, $isCoddingType }) => getPositionStyles($isSticker, $isCoddingType)};\n  background-color: ${({ theme }) => theme.colors.GREY_2};\n  border-radius: ${({ $borderRadius }) => $borderRadius};\n  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};\n  width: ${({ $width }) => $width}px;\n  height: 16px;\n  align-items: center;\n  justify-content: center;\n  ${({ $currentScreenWidth, $width }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: ${$width + 6}px;\n      height: 22px;\n    `}\n`;\n\ninterface CountTextProps {\n  $currentScreenWidth: number;\n}\n\nconst CountText = styled(Text)<CountTextProps>`\n  font-size: 9px;\n  line-height: 14px;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      font-size: 12px;\n      line-height: 14px;\n    `}\n`;\n\ninterface ElementTextProps {\n  $disabled: boolean;\n}\n\nconst ElementText = styled(Text)<ElementTextProps>`\n  color: ${({ theme }) => theme.colors.BLACK};\n  opacity: ${({ $disabled }) => ($disabled ? 1 : 0.5)};\n`;\n\ninterface LottieData {\n  height: number;\n  width: number;\n  lottieSrc: string;\n}\n\ninterface ElementProps {\n  isAchieved?: boolean;\n  count?: number;\n  elementType: string;\n  isCoddingType?: boolean;\n  isSticker?: boolean;\n  lotties?: Record<string, LottieData>;\n  currentScreenWidth: number;\n}\n\nconst Element: React.FC<ElementProps> = ({\n  isAchieved = false,\n  count = 0,\n  elementType,\n  isCoddingType = false,\n  isSticker = false,\n  lotties = {},\n  currentScreenWidth,\n}) => {\n  const isLargeCount = count >= 100;\n  const elementTitle = elementTitles[elementType];\n  const disabledVal = disablePercentages[elementType] || 1;\n  const { height, width, lottieSrc } = lotties[elementType] || {};\n  const lottieRef = React.useRef<ILottieAnimationRef | null>(null);\n\n  const handleMouseEnter = useCallback(() => {\n    if (isAchieved && lottieSrc) {\n      lottieRef.current?.play();\n      lottieRef.current?.setLoop(true);\n    }\n  }, [isAchieved, lottieSrc]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (lottieSrc) {\n      lottieRef.current?.setLoop(false);\n    }\n  }, [lottieSrc]);\n\n  return (\n    <ElementContainer>\n      <BgWrapper>\n        <Wrapper $flexDirection=\"row\">\n          <GemContainer>\n            {!isSticker && (\n              <ImageWrapper\n                $disabled={!isAchieved}\n                $disabledVal={disabledVal}\n                src={getRewardElement(elementType)}\n                alt=\"reward\"\n              />\n            )}\n            {isSticker && lottieSrc && (\n              <LottieContainer $disabled={!isAchieved}>\n                <LottieWrapper\n                  $disabled={!isAchieved}\n                  $disabledVal={disabledVal}\n                  onMouseEnter={handleMouseEnter}\n                  onMouseLeave={handleMouseLeave}\n                >\n                  <LottieAnimation\n                    src={lottieSrc}\n                    width={width}\n                    height={height}\n                    ref={lottieRef}\n                    settings={{ autoplay: false, loop: false }}\n                  />\n                </LottieWrapper>\n              </LottieContainer>\n            )}\n\n            {isAchieved && (\n              <CountWrapper\n                $isSticker={isSticker}\n                $borderColor={elementColors[elementType as keyof typeof elementColors] || '#000'}\n                $width={isLargeCount ? 28 : 16}\n                $borderRadius={isLargeCount ? '26px' : '50%'}\n                $isCoddingType={isCoddingType}\n                $currentScreenWidth={currentScreenWidth}\n                $flexDirection=\"row\"\n              >\n                <CountText\n                  $currentScreenWidth={currentScreenWidth}\n                  $renderAs=\"body3\"\n                  $color=\"BLACK\"\n                >\n                  {count}\n                </CountText>\n              </CountWrapper>\n            )}\n          </GemContainer>\n        </Wrapper>\n      </BgWrapper>\n      <Separator height={4} />\n      <ElementText $renderAs=\"body3\" $disabled={isAchieved}>\n        {elementTitle}\n      </ElementText>\n    </ElementContainer>\n  );\n};\n\nexport default memo(Element);\n"],"names":["disablePercentages","elementTitles","getPositionStyles","isSticker","isCoddingType","bottom","right","top","ElementContainer","styled","FlexView","Wrapper","BgWrapper","GemContainer","ImageWrapper","$disabled","$disabledVal","css","LottieContainer","theme","LottieWrapper","CountWrapper","$isSticker","$isCoddingType","$borderRadius","$borderColor","$width","$currentScreenWidth","SCREEN_SIZES","CountText","Text","ElementText","Element","isAchieved","count","elementType","lotties","currentScreenWidth","isLargeCount","elementTitle","disabledVal","height","width","lottieSrc","lottieRef","React","handleMouseEnter","useCallback","_a","_b","handleMouseLeave","jsx","getRewardElement","LottieAnimation","elementColors","Separator","Element$1","memo"],"mappings":"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"}

package/dist/features/wins-dashboard/belts-elements-stickers/progress-bar-horizontal.js

@@ -0,0 +1,36 @@
+import { jsx as s } from "react/jsx-runtime";
+import { memo as a } from "react";
+import t from "styled-components";
+const $ = t.div`
+  position: relative;
+  overflow: hidden;
+  background: ${({ $backgroundColor: r, theme: o }) => o.colors[r] || r};
+  width: 100%;
+  height: ${({ $height: r }) => `${r}px`};
+  border-radius: ${({ $height: r, $corners: o }) => o ? `${r / 2}px` : 0};
+`, c = t.div`
+  position: absolute;
+  background: ${({ $backgroundColor: r, theme: o }) => o.colors[r] || r};
+  transition: width 300ms ease-in-out;
+  width: ${({ $progress: r }) => `${r}%`};
+  height: 100%;
+  border-radius: ${({ $borderRadius: r }) => r || 0}px;
+`, h = ({
+  borderRadius: r = 0,
+  height: o = 8,
+  progress: i,
+  corners: e = !0,
+  backgroundColor: d = "GREY_1",
+  progressColor: n = "GREY_4"
+}) => /* @__PURE__ */ s($, { $height: o, $corners: e, $backgroundColor: d, children: /* @__PURE__ */ s(
+  c,
+  {
+    $progress: i,
+    $backgroundColor: n,
+    $borderRadius: r
+  }
+) }), p = a(h);
+export {
+  p as default
+};
+//# sourceMappingURL=progress-bar-horizontal.js.map

package/dist/features/wins-dashboard/belts-elements-stickers/progress-bar-horizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar-horizontal.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/progress-bar-horizontal.tsx"],"sourcesContent":["import type { TColorNames } from '../../ui/types';\n\nimport React, { memo } from 'react';\nimport styled from 'styled-components';\n\nconst Background = styled.div<{\n  $backgroundColor: TColorNames | string;\n  $height: number;\n  $corners: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ $backgroundColor, theme }) =>\n    theme.colors[$backgroundColor as TColorNames] || $backgroundColor};\n  width: 100%;\n  height: ${({ $height }) => `${$height}px`};\n  border-radius: ${({ $height, $corners }) => ($corners ? `${$height / 2}px` : 0)};\n`;\n\nconst Progress = styled.div<{\n  $backgroundColor: TColorNames | string;\n  $progress: number;\n  $borderRadius: number;\n}>`\n  position: absolute;\n  background: ${({ $backgroundColor, theme }) =>\n    theme.colors[$backgroundColor as TColorNames] || $backgroundColor};\n  transition: width 300ms ease-in-out;\n  width: ${({ $progress }) => `${$progress}%`};\n  height: 100%;\n  border-radius: ${({ $borderRadius }) => $borderRadius || 0}px;\n`;\n\ninterface ProgressBarHorizontalProps {\n  borderRadius?: number;\n  progress: number;\n  height?: number;\n  backgroundColor?: TColorNames | string;\n  progressColor?: TColorNames | string;\n  corners?: boolean;\n}\n\nconst ProgressBarHorizontal: React.FC<ProgressBarHorizontalProps> = ({\n  borderRadius = 0,\n  height = 8,\n  progress,\n  corners = true,\n  backgroundColor = 'GREY_1',\n  progressColor = 'GREY_4',\n}) => {\n  return (\n    <Background $height={height} $corners={corners} $backgroundColor={backgroundColor}>\n      <Progress\n        $progress={progress}\n        $backgroundColor={progressColor}\n        $borderRadius={borderRadius}\n      />\n    </Background>\n  );\n};\n\nexport default memo(ProgressBarHorizontal);\n"],"names":["Background","styled","$backgroundColor","theme","$height","$corners","Progress","$progress","$borderRadius","ProgressBarHorizontal","borderRadius","height","progress","corners","backgroundColor","progressColor","jsx","ProgressBarHorizontal$1","memo"],"mappings":";;;AAKA,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA,gBAOV,CAAC,EAAE,kBAAAC,GAAkB,OAAAC,QACjCA,EAAM,OAAOD,CAA+B,KAAKA,CAAgB;AAAA;AAAA,YAEzD,CAAC,EAAE,SAAAE,EAAc,MAAA,GAAGA,CAAO,IAAI;AAAA,mBACxB,CAAC,EAAE,SAAAA,GAAS,UAAAC,EAAS,MAAOA,IAAW,GAAGD,IAAU,CAAC,OAAO,CAAE;AAAA,GAG3EE,IAAWL,EAAO;AAAA;AAAA,gBAMR,CAAC,EAAE,kBAAAC,GAAkB,OAAAC,QACjCA,EAAM,OAAOD,CAA+B,KAAKA,CAAgB;AAAA;AAAA,WAE1D,CAAC,EAAE,WAAAK,EAAgB,MAAA,GAAGA,CAAS,GAAG;AAAA;AAAA,mBAE1B,CAAC,EAAE,eAAAC,QAAoBA,KAAiB,CAAC;AAAA,GAYtDC,IAA8D,CAAC;AAAA,EACnE,cAAAC,IAAe;AAAA,EACf,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,iBAAAC,IAAkB;AAAA,EAClB,eAAAC,IAAgB;AAClB,wBAEKf,GAAW,EAAA,SAASW,GAAQ,UAAUE,GAAS,kBAAkBC,GAChE,UAAA,gBAAAE;AAAA,EAACV;AAAA,EAAA;AAAA,IACC,WAAWM;AAAA,IACX,kBAAkBG;AAAA,IAClB,eAAeL;AAAA,EAAA;AAEnB,EAAA,CAAA,GAIWO,IAAAC,EAAKT,CAAqB;"}

package/dist/features/wins-dashboard/belts-elements-stickers/reward-elements.js

@@ -0,0 +1,83 @@
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
+import { memo as $ } from "react";
+import c, { css as p } from "styled-components";
+import f from "../../ui/layout/flex-view.js";
+import R from "../../ui/separator/separator.js";
+import S from "../../ui/text/text.js";
+import { SCREEN_SIZES as a, INSTRUCTION_REWARDS as w, MATH_REWARDS as N, STICKERS as A } from "../constants.js";
+import g from "./elements.js";
+const E = {
+  STICKER: "STICKERS",
+  CODING: "CODING",
+  CHIP: "CHIPS",
+  ELEMENT: "ELEMENTS"
+}, L = c(f)`
+  background-color: ${({ theme: t }) => t.colors.WHITE};
+`, P = c(f)`
+  max-width: 280px;
+  width: 100%;
+  ${({ $currentScreenWidth: t }) => t < a.LAPTOP && p`
+      max-width: 764px;
+      width: 100%;
+    `}
+`, O = c.div`
+  width: 33%;
+  padding-bottom: 16px;
+  ${({ $currentScreenWidth: t }) => t < a.LAPTOP && p`
+      width: 15%;
+      height: 33%;
+    `}
+`, u = c.div`
+  padding-left: ${({ $isSticker: t }) => t ? "13px" : "19px"};
+  color: ${({ theme: t }) => t.colors.BLACK};
+  font-size: 20px;
+  font-weight: 800;
+  ${({ $currentScreenWidth: t }) => t < a.LAPTOP && p`
+      padding-left: 0;
+    `}
+`, D = (t, o) => {
+  let e = E.STICKER;
+  return t || (e = o ? E.CHIP : E.ELEMENT), e;
+}, T = (t, o, e, n, s = {}, m) => /* @__PURE__ */ r(O, { $currentScreenWidth: m, children: /* @__PURE__ */ r(
+  g,
+  {
+    isAchieved: t in o,
+    count: o[t],
+    elementType: t,
+    isCoddingType: e,
+    isSticker: n,
+    lotties: s,
+    currentScreenWidth: m
+  }
+) }, t), K = ({
+  elements: t,
+  isSticker: o = !1,
+  lotties: e = {},
+  currentScreenWidth: n,
+  programStream: s
+}) => {
+  const m = s === E.CODING ? [...w] : [...N], l = s === E.CODING, h = A, d = {};
+  return t && t.forEach((i) => {
+    const { name: x, count: C } = i;
+    d[x] = C;
+  }), /* @__PURE__ */ I(L, { children: [
+    /* @__PURE__ */ r(u, { $currentScreenWidth: n, $isSticker: o, children: /* @__PURE__ */ r(S, { $renderAs: "h5", $color: "BLACK", children: D(o, l) }) }),
+    /* @__PURE__ */ r(R, { height: 18 }),
+    /* @__PURE__ */ r(P, { $flexWrap: !0, $flexDirection: "row", $currentScreenWidth: n, children: o ? h.map(
+      (i) => T(
+        i,
+        d,
+        l,
+        o,
+        e,
+        n
+      )
+    ) : m.map(
+      (i) => T(i, d, l, !1, {}, n)
+    ) })
+  ] });
+}, j = $(K);
+export {
+  j as default
+};
+//# sourceMappingURL=reward-elements.js.map

package/dist/features/wins-dashboard/belts-elements-stickers/reward-elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reward-elements.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/reward-elements.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { INSTRUCTION_REWARDS, MATH_REWARDS, SCREEN_SIZES, STICKERS } from '../constants';\nimport Element from './elements';\n\nconst ELEMENT_TEXT = {\n  STICKER: 'STICKERS',\n  CODING: 'CODING',\n  CHIP: 'CHIPS',\n  ELEMENT: 'ELEMENTS',\n};\n\nconst InfoWrapper = styled(FlexView)`\n  background-color: ${({ theme }) => theme.colors.WHITE};\n`;\n\ninterface ElementContainerProps {\n  $currentScreenWidth: number;\n}\n\nconst ElementContainer = styled(FlexView)<ElementContainerProps>`\n  max-width: 280px;\n  width: 100%;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      max-width: 764px;\n      width: 100%;\n    `}\n`;\n\ninterface ElementWrapperProps {\n  $currentScreenWidth: number;\n}\n\nconst ElementWrapper = styled.div<ElementWrapperProps>`\n  width: 33%;\n  padding-bottom: 16px;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: 15%;\n      height: 33%;\n    `}\n`;\n\ninterface ElementTextProps {\n  $isSticker: boolean;\n  $currentScreenWidth: number;\n}\n\nconst ElementText = styled.div<ElementTextProps>`\n  padding-left: ${({ $isSticker }) => ($isSticker ? '13px' : '19px')};\n  color: ${({ theme }) => theme.colors.BLACK};\n  font-size: 20px;\n  font-weight: 800;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      padding-left: 0;\n    `}\n`;\n\nconst getElementText = (isSticker: boolean, isCoddingType: boolean): string => {\n  let name = ELEMENT_TEXT.STICKER;\n\n  if (!isSticker) {\n    name = isCoddingType ? ELEMENT_TEXT.CHIP : ELEMENT_TEXT.ELEMENT;\n  }\n\n  return name;\n};\n\ninterface ElementData {\n  name: string;\n  count: number;\n}\n\ninterface LottieProps {\n  height: number;\n  width: number;\n  lottieSrc: string;\n}\n\nconst getElements = (\n  element: string,\n  elementsCount: Record<string, number>,\n  isCoddingType: boolean,\n  isSticker: boolean,\n  lotties: Record<string, LottieProps> = {},\n  currentScreenWidth: number,\n) => {\n  return (\n    <ElementWrapper $currentScreenWidth={currentScreenWidth} key={element}>\n      <Element\n        isAchieved={element in elementsCount}\n        count={elementsCount[element]}\n        elementType={element}\n        isCoddingType={isCoddingType}\n        isSticker={isSticker}\n        lotties={lotties}\n        currentScreenWidth={currentScreenWidth}\n      />\n    </ElementWrapper>\n  );\n};\n\ninterface RewardElementsProps {\n  elements?: ElementData[];\n  isSticker?: boolean;\n  lotties?: Record<string, LottieProps>;\n  currentScreenWidth: number;\n  programStream?: string;\n}\n\nconst RewardElements: React.FC<RewardElementsProps> = ({\n  elements,\n  isSticker = false,\n  lotties = {},\n  currentScreenWidth,\n  programStream,\n}) => {\n  const totalElements =\n    programStream === ELEMENT_TEXT.CODING ? [...INSTRUCTION_REWARDS] : [...MATH_REWARDS];\n  const isCoddingType = programStream === ELEMENT_TEXT.CODING;\n  const totalStickers = STICKERS;\n  const elementsCount: Record<string, number> = {};\n\n  if (elements) {\n    elements.forEach(element => {\n      const { name, count } = element;\n\n      elementsCount[name] = count;\n    });\n  }\n\n  return (\n    <InfoWrapper>\n      <ElementText $currentScreenWidth={currentScreenWidth} $isSticker={isSticker}>\n        <Text $renderAs=\"h5\" $color=\"BLACK\">\n          {getElementText(isSticker, isCoddingType)}\n        </Text>\n      </ElementText>\n      <Separator height={18} />\n      <ElementContainer $flexWrap $flexDirection=\"row\" $currentScreenWidth={currentScreenWidth}>\n        {!isSticker\n          ? totalElements.map(element =>\n              getElements(element, elementsCount, isCoddingType, false, {}, currentScreenWidth),\n            )\n          : totalStickers.map(sticker =>\n              getElements(\n                sticker,\n                elementsCount,\n                isCoddingType,\n                isSticker,\n                lotties,\n                currentScreenWidth,\n              ),\n            )}\n      </ElementContainer>\n    </InfoWrapper>\n  );\n};\n\nexport default memo(RewardElements);\n"],"names":["ELEMENT_TEXT","InfoWrapper","styled","FlexView","theme","ElementContainer","$currentScreenWidth","SCREEN_SIZES","css","ElementWrapper","ElementText","$isSticker","getElementText","isSticker","isCoddingType","name","getElements","element","elementsCount","lotties","currentScreenWidth","jsx","Element","RewardElements","elements","programStream","totalElements","INSTRUCTION_REWARDS","MATH_REWARDS","totalStickers","STICKERS","count","Text","Separator","sticker","RewardElements$1","memo"],"mappings":";;;;;;;;AASA,MAAMA,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AACX,GAEMC,IAAcC,EAAOC,CAAQ;AAAA,sBACb,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,GAOjDC,IAAmBH,EAAOC,CAAQ;AAAA;AAAA;AAAA,IAGpC,CAAC,EAAE,qBAAAG,EACH,MAAAA,IAAsBC,EAAa,UACnCC;AAAA;AAAA;AAAA,KAGC;AAAA,GAOCC,IAAiBP,EAAO;AAAA;AAAA;AAAA,IAG1B,CAAC,EAAE,qBAAAI,EACH,MAAAA,IAAsBC,EAAa,UACnCC;AAAA;AAAA;AAAA,KAGC;AAAA,GAQCE,IAAcR,EAAO;AAAA,kBACT,CAAC,EAAE,YAAAS,EAAA,MAAkBA,IAAa,SAAS,MAAO;AAAA,WACzD,CAAC,EAAE,OAAAP,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,IAGxC,CAAC,EAAE,qBAAAE,EACH,MAAAA,IAAsBC,EAAa,UACnCC;AAAA;AAAA,KAEC;AAAA,GAGCI,IAAiB,CAACC,GAAoBC,MAAmC;AAC7E,MAAIC,IAAOf,EAAa;AAExB,SAAKa,MACIE,IAAAD,IAAgBd,EAAa,OAAOA,EAAa,UAGnDe;AACT,GAaMC,IAAc,CAClBC,GACAC,GACAJ,GACAD,GACAM,IAAuC,CAAC,GACxCC,MAGE,gBAAAC,EAACZ,GAAe,EAAA,qBAAqBW,GACnC,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,YAAYL,KAAWC;AAAA,IACvB,OAAOA,EAAcD,CAAO;AAAA,IAC5B,aAAaA;AAAA,IACb,eAAAH;AAAA,IACA,WAAAD;AAAA,IACA,SAAAM;AAAA,IACA,oBAAAC;AAAA,EAAA;AAAA,KAR0DH,CAU9D,GAYEM,IAAgD,CAAC;AAAA,EACrD,UAAAC;AAAA,EACA,WAAAX,IAAY;AAAA,EACZ,SAAAM,IAAU,CAAC;AAAA,EACX,oBAAAC;AAAA,EACA,eAAAK;AACF,MAAM;AACE,QAAAC,IACJD,MAAkBzB,EAAa,SAAS,CAAC,GAAG2B,CAAmB,IAAI,CAAC,GAAGC,CAAY,GAC/Ed,IAAgBW,MAAkBzB,EAAa,QAC/C6B,IAAgBC,GAChBZ,IAAwC,CAAA;AAE9C,SAAIM,KACFA,EAAS,QAAQ,CAAWP,MAAA;AACpB,UAAA,EAAE,MAAAF,GAAM,OAAAgB,EAAU,IAAAd;AAExB,IAAAC,EAAcH,CAAI,IAAIgB;AAAA,EAAA,CACvB,qBAIA9B,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAoB,EAACX,GAAY,EAAA,qBAAqBU,GAAoB,YAAYP,GAChE,UAAC,gBAAAQ,EAAAW,GAAA,EAAK,WAAU,MAAK,QAAO,SACzB,UAAApB,EAAeC,GAAWC,CAAa,EAC1C,CAAA,GACF;AAAA,IACA,gBAAAO,EAACY,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,IACvB,gBAAAZ,EAAChB,GAAiB,EAAA,WAAS,IAAC,gBAAe,OAAM,qBAAqBe,GACnE,UAACP,IAIEgB,EAAc;AAAA,MAAI,CAChBK,MAAAlB;AAAA,QACEkB;AAAA,QACAhB;AAAA,QACAJ;AAAA,QACAD;AAAA,QACAM;AAAA,QACAC;AAAA,MACF;AAAA,IAAA,IAXFM,EAAc;AAAA,MAAI,CAAAT,MAChBD,EAAYC,GAASC,GAAeJ,GAAe,IAAO,IAAIM,CAAkB;AAAA,OAYxF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEee,IAAAC,EAAKb,CAAc;"}

package/dist/features/wins-dashboard/constants.js

@@ -0,0 +1,161 @@
+import { ILLUSTRATIONS as T } from "../../assets/illustrations/illustrations.js";
+import { IMAGES as E } from "../../assets/images/images.js";
+import R from "../../assets/line-icons/icons/wins-common-icon.js";
+import o from "../../assets/line-icons/icons/wins-epic-icon.js";
+import C from "../../assets/line-icons/icons/wins-legendary-icon.js";
+import D from "../../assets/line-icons/icons/wins-mystery-icon.js";
+import n from "../../assets/line-icons/icons/wins-mythic-icon.js";
+import c from "../../assets/line-icons/icons/wins-rare-icon.js";
+import { LOTTIE as t } from "../../assets/lottie/lottie.js";
+import { getTheme as s } from "../ui/theme/get-theme.js";
+const m = {
+  TABLET: 864,
+  LAPTOP: 1024,
+  LAPTOPL: 1280
+}, { colors: O } = s(), a = {
+  ASHTA: "#FF7E3B",
+  CHATVA: "#DA5107",
+  COSA: "#0A47C2",
+  DODA: "#850F85",
+  DVI: "#0A47C2",
+  EKA: "#3DD771",
+  HEXO: "#3DD771",
+  OCTO: "#FF7E3B",
+  TETRA: "#FFBA07",
+  ZODASA: "#1EB5F0",
+  CONGRATS: O.GREY_2,
+  COOL: O.GREY_2,
+  KUDOS: O.GREY_2,
+  GREAT: O.GREY_2,
+  WOW: O.GREY_2,
+  AWESOME: O.GREY_2
+}, A = {
+  COMMON: "COMMON",
+  RARE: "RARE",
+  EPIC: "EPIC",
+  LEGENDARY: "LEGENDARY",
+  MYTHIC: "MYTHIC",
+  MYSTERY: "MYSTERY"
+}, H = {
+  ACKNOWLEDGED: "ACKNOWLEDGED",
+  ASSIGNED: "ASSIGNED",
+  UNASSIGNED: "UNASSIGNED"
+}, h = {
+  [A.COMMON]: "#1EB5F0",
+  [A.RARE]: "#3DD771",
+  [A.EPIC]: "#ED6CEF",
+  [A.LEGENDARY]: "#FF7E3B",
+  [A.MYTHIC]: "#FFBA07",
+  [A.MYSTERY]: O.WHITE
+}, u = {
+  [A.COMMON]: R,
+  [A.RARE]: c,
+  [A.EPIC]: o,
+  [A.LEGENDARY]: C,
+  [A.MYTHIC]: n,
+  [A.MYSTERY]: D
+}, P = {
+  [A.COMMON]: T.COMMON,
+  [A.RARE]: T.RARE,
+  [A.EPIC]: T.EPIC,
+  [A.LEGENDARY]: T.LEGENDARY,
+  [A.MYTHIC]: T.MYTHIC,
+  [A.MYSTERY]: T.MYSTERY
+}, S = {
+  black: E.BLACK_BELT,
+  blue: E.BLUE_BELT,
+  brown: E.BROWN_BELT,
+  green: E.GREEN_BELT,
+  orange: E.ORANGE_BELT,
+  purple: E.PURPLE_BELT,
+  red: E.RED_BELT,
+  white: E.WHITE_BELT,
+  yellow: E.YELLOW_BELT
+}, l = (r) => {
+  const e = r == null ? void 0 : r.toLowerCase();
+  return e && e in S ? S[e] : E.MASTERED_BADGE;
+}, K = ["TETRA", "COSA", "DODA", "HEXO", "OCTO"], U = ["EKA", "DVI", "CHATVA", "ASHTA", "ZODASA"], F = ["CONGRATS", "COOL", "KUDOS", "GREAT", "WOW", "AWESOME"], f = (r) => {
+  switch (r) {
+    case "COSA":
+      return E.COSA;
+    case "OCTO":
+      return E.OCTO;
+    case "DODA":
+      return E.DODA;
+    case "HEXO":
+      return E.HEXO;
+    case "TETRA":
+      return E.TETRA;
+    case "EKA":
+      return E.EKA;
+    case "DVI":
+      return E.DVI;
+    case "CHATVA":
+      return E.CHATVA;
+    case "ASHTA":
+      return E.ASHTA;
+    case "ZODASA":
+      return E.ZODASA;
+    case "CONGRATS":
+      return E.CONGRATS;
+    case "COOL":
+      return E.COOL;
+    case "KUDOS":
+      return E.KUDOS;
+    case "GREAT":
+      return E.GREAT;
+    case "WOW":
+      return E.WOW;
+    case "AWESOME":
+      return E.AWESOME;
+    default:
+      return E.TETRA;
+  }
+}, g = {
+  CONGRATS: {
+    height: 50,
+    width: 50,
+    lottieSrc: t.TROPHY
+  },
+  COOL: {
+    height: 50,
+    width: 50,
+    lottieSrc: t.COOL
+  },
+  KUDOS: {
+    height: 50,
+    width: 50,
+    lottieSrc: t.CLAPPING_HANDS
+  },
+  GREAT: {
+    height: 63,
+    width: 50,
+    lottieSrc: t.LIKE_BUTTON
+  },
+  WOW: {
+    height: 55,
+    width: 55,
+    lottieSrc: t.STAR_STRIKE_EMOJI
+  },
+  AWESOME: {
+    height: 50,
+    width: 50,
+    lottieSrc: t.AWESOME
+  }
+};
+export {
+  h as BADGE_TYPE_BACKGROUND,
+  P as BADGE_TYPE_BADGE_ICON,
+  u as BADGE_TYPE_TAB_ICON,
+  U as INSTRUCTION_REWARDS,
+  K as MATH_REWARDS,
+  m as SCREEN_SIZES,
+  F as STICKERS,
+  H as STUDENT_BADGE_STATUS,
+  A as STUDENT_BADGE_TYPE,
+  g as StickerMap,
+  a as elementColors,
+  l as getBeltIcon,
+  f as getRewardElement
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/wins-dashboard/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/features/wins-dashboard/constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../assets/illustrations/illustrations';\nimport { IMAGES } from '../../assets/images/images';\nimport WinsCommonIcon from '../../assets/line-icons/icons/wins-common-icon';\nimport WinsEpicIcon from '../../assets/line-icons/icons/wins-epic-icon';\nimport WinsLegendaryIcon from '../../assets/line-icons/icons/wins-legendary-icon';\nimport WinsMysteryIcon from '../../assets/line-icons/icons/wins-mystery-icon';\nimport WinsMythicIcon from '../../assets/line-icons/icons/wins-mythic-icon';\nimport WinsRareIcon from '../../assets/line-icons/icons/wins-rare-icon';\nimport { LOTTIE } from '../../assets/lottie/lottie';\nimport { getTheme } from '../ui/theme/get-theme';\n\nexport const SCREEN_SIZES = {\n  TABLET: 864,\n  LAPTOP: 1024,\n  LAPTOPL: 1280,\n};\n\nexport const DEVICES = {\n  TABLET: `(max-width: ${SCREEN_SIZES.TABLET}px)`,\n  LAPTOP: `(max-width: ${SCREEN_SIZES.LAPTOP}px)`,\n  LAPTOPL: `(max-width: ${SCREEN_SIZES.LAPTOPL}px)`,\n};\n\nconst { colors } = getTheme();\n\nexport const elementColors = {\n  ASHTA: '#FF7E3B',\n  CHATVA: '#DA5107',\n  COSA: '#0A47C2',\n  DODA: '#850F85',\n  DVI: '#0A47C2',\n  EKA: '#3DD771',\n  HEXO: '#3DD771',\n  OCTO: '#FF7E3B',\n  TETRA: '#FFBA07',\n  ZODASA: '#1EB5F0',\n  CONGRATS: colors.GREY_2,\n  COOL: colors.GREY_2,\n  KUDOS: colors.GREY_2,\n  GREAT: colors.GREY_2,\n  WOW: colors.GREY_2,\n  AWESOME: colors.GREY_2,\n};\n\nexport const STUDENT_BADGE_TYPE = {\n  COMMON: 'COMMON',\n  RARE: 'RARE',\n  EPIC: 'EPIC',\n  LEGENDARY: 'LEGENDARY',\n  MYTHIC: 'MYTHIC',\n  MYSTERY: 'MYSTERY',\n};\n\nexport const STUDENT_BADGE_STATUS = {\n  ACKNOWLEDGED: 'ACKNOWLEDGED',\n  ASSIGNED: 'ASSIGNED',\n  UNASSIGNED: 'UNASSIGNED',\n};\n\nexport const BADGE_TYPE_BACKGROUND = {\n  [STUDENT_BADGE_TYPE.COMMON]: '#1EB5F0',\n  [STUDENT_BADGE_TYPE.RARE]: '#3DD771',\n  [STUDENT_BADGE_TYPE.EPIC]: '#ED6CEF',\n  [STUDENT_BADGE_TYPE.LEGENDARY]: '#FF7E3B',\n  [STUDENT_BADGE_TYPE.MYTHIC]: '#FFBA07',\n  [STUDENT_BADGE_TYPE.MYSTERY]: colors.WHITE,\n};\n\nexport const BADGE_TYPE_TAB_ICON: Record<\n  string,\n  React.FC<{ color?: string; selected?: boolean }>\n> = {\n  [STUDENT_BADGE_TYPE.COMMON]: WinsCommonIcon,\n  [STUDENT_BADGE_TYPE.RARE]: WinsRareIcon,\n  [STUDENT_BADGE_TYPE.EPIC]: WinsEpicIcon,\n  [STUDENT_BADGE_TYPE.LEGENDARY]: WinsLegendaryIcon,\n  [STUDENT_BADGE_TYPE.MYTHIC]: WinsMythicIcon,\n  [STUDENT_BADGE_TYPE.MYSTERY]: WinsMysteryIcon,\n};\n\nexport const BADGE_TYPE_BADGE_ICON = {\n  [STUDENT_BADGE_TYPE.COMMON]: ILLUSTRATIONS.COMMON,\n  [STUDENT_BADGE_TYPE.RARE]: ILLUSTRATIONS.RARE,\n  [STUDENT_BADGE_TYPE.EPIC]: ILLUSTRATIONS.EPIC,\n  [STUDENT_BADGE_TYPE.LEGENDARY]: ILLUSTRATIONS.LEGENDARY,\n  [STUDENT_BADGE_TYPE.MYTHIC]: ILLUSTRATIONS.MYTHIC,\n  [STUDENT_BADGE_TYPE.MYSTERY]: ILLUSTRATIONS.MYSTERY,\n};\n\n// Audio URLs for badge sounds (commented out for now until MP3 files are available)\n// export const BADGE_TYPE_BADGE_SOUND = {\n//   [STUDENT_BADGE_TYPE.COMMON]: '/static/sounds/common-badge.mp3',\n//   [STUDENT_BADGE_TYPE.RARE]: '/static/sounds/rare-badge.mp3',\n//   [STUDENT_BADGE_TYPE.EPIC]: '/static/sounds/epic-badge.mp3',\n//   [STUDENT_BADGE_TYPE.LEGENDARY]: '/static/sounds/legendary-badge.mp3',\n//   [STUDENT_BADGE_TYPE.MYTHIC]: '/static/sounds/mythic-badge.mp3',\n//   [STUDENT_BADGE_TYPE.MYSTERY]: '/static/sounds/mystery-badge.mp3',\n// };\n\nconst BELT_COLORS = [\n  'black',\n  'blue',\n  'brown',\n  'green',\n  'orange',\n  'purple',\n  'red',\n  'white',\n  'yellow',\n] as const;\n\ntype BeltColor = (typeof BELT_COLORS)[number];\n\nconst COLOR_TO_BELT_MAP: Record<BeltColor, string> = {\n  black: IMAGES.BLACK_BELT,\n  blue: IMAGES.BLUE_BELT,\n  brown: IMAGES.BROWN_BELT,\n  green: IMAGES.GREEN_BELT,\n  orange: IMAGES.ORANGE_BELT,\n  purple: IMAGES.PURPLE_BELT,\n  red: IMAGES.RED_BELT,\n  white: IMAGES.WHITE_BELT,\n  yellow: IMAGES.YELLOW_BELT,\n};\n\nexport const getBeltIcon = (type: string) => {\n  const key = type?.toLowerCase() as BeltColor;\n\n  if (key && key in COLOR_TO_BELT_MAP) return COLOR_TO_BELT_MAP[key];\n\n  return IMAGES.MASTERED_BADGE;\n};\n\nexport const MATH_REWARDS = ['TETRA', 'COSA', 'DODA', 'HEXO', 'OCTO'];\n\nexport const INSTRUCTION_REWARDS = ['EKA', 'DVI', 'CHATVA', 'ASHTA', 'ZODASA'];\n\nexport const STICKERS = ['CONGRATS', 'COOL', 'KUDOS', 'GREAT', 'WOW', 'AWESOME'];\n\nexport const getRewardElement = (rewardType: string): string => {\n  switch (rewardType) {\n    case 'COSA':\n      return IMAGES.COSA;\n    case 'OCTO':\n      return IMAGES.OCTO;\n    case 'DODA':\n      return IMAGES.DODA;\n    case 'HEXO':\n      return IMAGES.HEXO;\n    case 'TETRA':\n      return IMAGES.TETRA;\n    case 'EKA':\n      return IMAGES.EKA;\n    case 'DVI':\n      return IMAGES.DVI;\n    case 'CHATVA':\n      return IMAGES.CHATVA;\n    case 'ASHTA':\n      return IMAGES.ASHTA;\n    case 'ZODASA':\n      return IMAGES.ZODASA;\n    case 'CONGRATS':\n      return IMAGES.CONGRATS;\n    case 'COOL':\n      return IMAGES.COOL;\n    case 'KUDOS':\n      return IMAGES.KUDOS;\n    case 'GREAT':\n      return IMAGES.GREAT;\n    case 'WOW':\n      return IMAGES.WOW;\n    case 'AWESOME':\n      return IMAGES.AWESOME;\n    default:\n      return IMAGES.TETRA;\n  }\n};\n\nexport const StickerMap = {\n  CONGRATS: {\n    height: 50,\n    width: 50,\n    lottieSrc: LOTTIE.TROPHY,\n  },\n  COOL: {\n    height: 50,\n    width: 50,\n    lottieSrc: LOTTIE.COOL,\n  },\n  KUDOS: {\n    height: 50,\n    width: 50,\n    lottieSrc: LOTTIE.CLAPPING_HANDS,\n  },\n  GREAT: {\n    height: 63,\n    width: 50,\n    lottieSrc: LOTTIE.LIKE_BUTTON,\n  },\n  WOW: {\n    height: 55,\n    width: 55,\n    lottieSrc: LOTTIE.STAR_STRIKE_EMOJI,\n  },\n  AWESOME: {\n    height: 50,\n    width: 50,\n    lottieSrc: LOTTIE.AWESOME,\n  },\n};\n\nexport const TYPES = {\n  SENT_BADGES: 'SENT_BADGES',\n  PENDING_BADGES: 'PENDING_BADGES',\n};\n\nexport const ACTION = {\n  ACKNOWLEDGE: 'ACKNOWLEDGE',\n};\n"],"names":["SCREEN_SIZES","colors","getTheme","elementColors","STUDENT_BADGE_TYPE","STUDENT_BADGE_STATUS","BADGE_TYPE_BACKGROUND","BADGE_TYPE_TAB_ICON","WinsCommonIcon","WinsRareIcon","WinsEpicIcon","WinsLegendaryIcon","WinsMythicIcon","WinsMysteryIcon","BADGE_TYPE_BADGE_ICON","ILLUSTRATIONS","COLOR_TO_BELT_MAP","IMAGES","getBeltIcon","type","key","MATH_REWARDS","INSTRUCTION_REWARDS","STICKERS","getRewardElement","rewardType","StickerMap","LOTTIE"],"mappings":"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"}

package/dist/features/wins-dashboard/header/wins-header.js

@@ -0,0 +1,95 @@
+import { jsxs as r, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { memo as u, useCallback as C } from "react";
+import h, { css as y } from "styled-components";
+import H from "../../../assets/line-icons/icons/back2.js";
+import W from "../../../assets/line-icons/icons/cue-coin.js";
+import j from "../../ui/buttons/clickable/clickable.js";
+import v from "../../ui/inputs/select-input/select-input.js";
+import n from "../../ui/layout/flex-view.js";
+import f from "../../ui/separator/separator.js";
+import m from "../../ui/text/text.js";
+const A = h(n)`
+  background: ${({ theme: i }) => i.colors.WHITE};
+  border-bottom: 1px solid ${({ theme: i }) => i.colors.GREY_2};
+  height: 64px;
+  left: ${({ widthOffset: i }) => i}px;
+  padding-left: 32px;
+  padding-right: 20px;
+  position: fixed;
+  right: 0;
+  top: ${({ topOffset: i }) => i}px;
+  width: calc(100% - ${({ widthOffset: i }) => i}px);
+  ${({ showLeftBorder: i }) => i && y`
+      position: sticky;
+      left: 0;
+      top: 0;
+      width: 100%;
+      border-left: 1px solid ${({ theme: t }) => t.colors.GREY_2};
+    `}
+  z-index: ${({
+  theme: {
+    zIndex: { WINS_HEADER: i }
+  }
+}) => i};
+`, D = h(n)`
+  flex: 1;
+`, p = ({ variant: i, coin: t }) => /* @__PURE__ */ r(k, { children: [
+  /* @__PURE__ */ e(W, { variant: i, width: 32, height: 32 }),
+  /* @__PURE__ */ e(f, { width: 8 }),
+  /* @__PURE__ */ e(m, { $renderAs: "h5", children: t })
+] }), E = ({
+  currentSelectedProgram: i,
+  goldCoins: t = 0,
+  onBackClick: x,
+  onProgramChange: l,
+  programOptions: d = [],
+  silverCoins: c = 0,
+  showLeftBorder: $ = !1,
+  topOffset: w = 0,
+  widthOffset: b = 0
+}) => {
+  const g = C(
+    (o) => {
+      const a = d.find((I) => I.id === o);
+      l && a && l(a);
+    },
+    [l, d]
+  ), s = d.map((o) => ({
+    id: o.id,
+    label: o.name
+    // Use 'name' from API data for display
+  }));
+  return /* @__PURE__ */ r(
+    A,
+    {
+      $flexDirection: "row",
+      topOffset: w,
+      widthOffset: b,
+      showLeftBorder: $,
+      children: [
+        /* @__PURE__ */ r(n, { $flexDirection: "row", $alignItems: "center", $flexGapX: 0.5, children: [
+          /* @__PURE__ */ e(j, { label: "Back", onClick: x, children: /* @__PURE__ */ e(H, { width: 24, height: 24 }) }),
+          /* @__PURE__ */ e(m, { $renderAs: "h6", children: "Wins" })
+        ] }),
+        /* @__PURE__ */ e(D, { $justifyContent: "center", $alignItems: "center", children: s.length > 1 && /* @__PURE__ */ e(
+          v,
+          {
+            options: s,
+            value: (i == null ? void 0 : i.id) || "",
+            onChange: g,
+            renderAs: "primary"
+          }
+        ) }),
+        /* @__PURE__ */ r(n, { $flexDirection: "row", $alignItems: "center", children: [
+          t > 0 && /* @__PURE__ */ e(p, { variant: "gold", coin: t }),
+          /* @__PURE__ */ e(f, { width: 8 }),
+          c > 0 && /* @__PURE__ */ e(p, { variant: "silver", coin: c })
+        ] })
+      ]
+    }
+  );
+}, q = u(E);
+export {
+  q as default
+};
+//# sourceMappingURL=wins-header.js.map

package/dist/features/wins-dashboard/header/wins-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wins-header.js","sources":["../../../../src/features/wins-dashboard/header/wins-header.tsx"],"sourcesContent":["import React, { memo, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Back2Icon from '../../../assets/line-icons/icons/back2';\nimport CueCoinIcon from '../../../assets/line-icons/icons/cue-coin';\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport SelectInput from '../../ui/inputs/select-input/select-input';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\n\ninterface HeaderProps {\n  topOffset: number;\n  widthOffset: number;\n  showLeftBorder: boolean;\n}\n\nconst Header = styled(FlexView)<HeaderProps>`\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.GREY_2};\n  height: 64px;\n  left: ${({ widthOffset }) => widthOffset}px;\n  padding-left: 32px;\n  padding-right: 20px;\n  position: fixed;\n  right: 0;\n  top: ${({ topOffset }) => topOffset}px;\n  width: calc(100% - ${({ widthOffset }) => widthOffset}px);\n  ${({ showLeftBorder }) =>\n    showLeftBorder &&\n    css`\n      position: sticky;\n      left: 0;\n      top: 0;\n      width: 100%;\n      border-left: 1px solid ${({ theme }) => theme.colors.GREY_2};\n    `}\n  z-index: ${({\n    theme: {\n      zIndex: { WINS_HEADER },\n    },\n  }) => WINS_HEADER};\n`;\n\nconst ProgramSwitcherWrapper = styled(FlexView)`\n  flex: 1;\n`;\n\ninterface CoinViewProps {\n  variant: 'gold' | 'silver';\n  coin: number;\n}\n\nconst CoinView: React.FC<CoinViewProps> = ({ variant, coin }) => {\n  return (\n    <>\n      <CueCoinIcon variant={variant} width={32} height={32} />\n      <Separator width={8} />\n      <Text $renderAs=\"h5\">{coin}</Text>\n    </>\n  );\n};\n\ninterface IProgramOption {\n  badges_enabled: boolean;\n  board: string;\n  board_id: string;\n  code: string;\n  cue_program_type: string;\n  description: string;\n  grade: string;\n  grades: string[];\n  id: string;\n  is_active: boolean;\n  is_current: boolean;\n  is_current_stream_program: boolean;\n  is_demo: boolean;\n  is_live: boolean;\n  name: string;\n  program_type: string;\n  rewards_enabled: boolean;\n  stream: string;\n  sub_stream: string | null;\n  [key: string]: unknown;\n}\n\ninterface WinsTabHeaderProps {\n  currentSelectedProgram?: IProgramOption;\n  goldCoins?: number;\n  onBackClick?: () => void;\n  onProgramChange?: (p: IProgramOption) => void;\n  programOptions?: IProgramOption[];\n  silverCoins?: number;\n  showLeftBorder?: boolean;\n  topOffset?: number;\n  widthOffset?: number;\n}\n\nconst WinsTabHeader: React.FC<WinsTabHeaderProps> = ({\n  currentSelectedProgram,\n  goldCoins = 0,\n  onBackClick,\n  onProgramChange,\n  programOptions = [],\n  silverCoins = 0,\n  showLeftBorder = false,\n  topOffset = 0,\n  widthOffset = 0,\n}) => {\n  const handleProgramChange = useCallback(\n    (selectedId: string) => {\n      // Find the original program option from programOptions\n      const originalOption = programOptions.find(op => op.id === selectedId);\n\n      if (onProgramChange && originalOption) {\n        onProgramChange(originalOption);\n      }\n    },\n    [onProgramChange, programOptions],\n  );\n\n  // Transform program options to SelectInput format\n  const selectOptions = programOptions.map(option => ({\n    id: option.id,\n    label: option.name, // Use 'name' from API data for display\n  }));\n\n  return (\n    <Header\n      $flexDirection=\"row\"\n      topOffset={topOffset}\n      widthOffset={widthOffset}\n      showLeftBorder={showLeftBorder}\n    >\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.5}>\n        <Clickable label=\"Back\" onClick={onBackClick}>\n          <Back2Icon width={24} height={24} />\n        </Clickable>\n        <Text $renderAs=\"h6\">Wins</Text>\n      </FlexView>\n      <ProgramSwitcherWrapper $justifyContent=\"center\" $alignItems=\"center\">\n        {selectOptions.length > 1 && (\n          <SelectInput\n            options={selectOptions}\n            value={currentSelectedProgram?.id || ''}\n            onChange={handleProgramChange}\n            renderAs=\"primary\"\n          />\n        )}\n      </ProgramSwitcherWrapper>\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n        {goldCoins > 0 && <CoinView variant=\"gold\" coin={goldCoins} />}\n        <Separator width={8} />\n        {silverCoins > 0 && <CoinView variant=\"silver\" coin={silverCoins} />}\n      </FlexView>\n    </Header>\n  );\n};\n\nexport default memo(WinsTabHeader);\n"],"names":["Header","styled","FlexView","theme","widthOffset","topOffset","showLeftBorder","css","WINS_HEADER","ProgramSwitcherWrapper","CoinView","variant","coin","jsxs","Fragment","jsx","CueCoinIcon","Separator","Text","WinsTabHeader","currentSelectedProgram","goldCoins","onBackClick","onProgramChange","programOptions","silverCoins","handleProgramChange","useCallback","selectedId","originalOption","op","selectOptions","option","Clickable","Back2Icon","SelectInput","winsHeader","memo"],"mappings":"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"}