@cuemath/leap 3.3.13 → 3.3.14-m

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

@@ -0,0 +1 @@
+{"version":3,"file":"belts-elements-stickers.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/belts-elements-stickers.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 { INSTRUCTION_REWARDS, MATH_REWARDS, SCREEN_SIZES, StickerMap } from '../constants';\nimport Belts from './belts';\nimport RewardElements from './reward-elements';\n\ninterface WrapperProps {\n  $containerStyle?: ReturnType<typeof css>;\n  $renderOnTeacher?: boolean;\n}\n\nconst Wrapper = styled(FlexView)<WrapperProps>`\n  justify-content: space-between;\n  margin: 110px 120px;\n  margin-bottom: 48px;\n  ${({ $containerStyle }) => $containerStyle}\n\n  ${({ $renderOnTeacher }) =>\n    $renderOnTeacher &&\n    css`\n      margin: 50px auto;\n      padding: 0 16px;\n    `}\n`;\n\ninterface RewardElement {\n  aggregate_for?: { name?: string };\n  aggregates?: number;\n}\n\ninterface StickerElement {\n  badge_id?: string;\n  name?: string;\n}\n\nconst getRewardElements = (\n  elements: RewardElement[],\n): { elements: Array<{ name: string; count: number }> } => {\n  const isElementsExist = elements && Array.isArray(elements) && elements.length > 0;\n\n  if (!isElementsExist) {\n    return { elements: [] };\n  }\n\n  const elementsData = {\n    elements: [] as Array<{ name: string; count: number }>,\n  };\n\n  elements.forEach(item => {\n    const { aggregate_for: rewardData, aggregates: totalCount } = item || {};\n    const { name } = rewardData || {};\n\n    if (name && [...MATH_REWARDS, ...INSTRUCTION_REWARDS].includes(name)) {\n      elementsData.elements.push({ name, count: totalCount || 0 });\n    }\n  });\n\n  return elementsData;\n};\n\nconst getRewardStickers = (\n  stickers: StickerElement[],\n): { stickers: Array<{ name: string; count: number }> } => {\n  const isStickersExist = stickers && Array.isArray(stickers) && stickers.length > 0;\n\n  if (!isStickersExist) {\n    return { stickers: [] };\n  }\n\n  const stickersCount: Record<string, { name: string; count: number }> = {};\n\n  stickers.forEach(item => {\n    const { badge_id: badgeId, name } = item;\n\n    if (badgeId && name) {\n      if (stickersCount[badgeId] === undefined) {\n        stickersCount[badgeId] = { name, count: 1 };\n      } else {\n        stickersCount[badgeId] = { name, count: stickersCount[badgeId].count + 1 };\n      }\n    }\n  });\n\n  return { stickers: Object.values(stickersCount) };\n};\n\nconst getBadgeContainerConfig = (currentScreenWidth: number) => {\n  if (currentScreenWidth >= SCREEN_SIZES.LAPTOPL) {\n    return {\n      containerStyle: css`\n        margin: 110px auto;\n        margin-bottom: 48px;\n        max-width: 1040px;\n        width: 100%;\n      `,\n    };\n  }\n\n  if (currentScreenWidth < SCREEN_SIZES.TABLET) {\n    return {\n      containerStyle: css`\n        margin: 110px 40px;\n        margin-bottom: 48px;\n        flex-direction: column;\n        width: 100%;\n      `,\n    };\n  }\n\n  if (currentScreenWidth < SCREEN_SIZES.LAPTOP) {\n    return {\n      containerStyle: css`\n        max-width: 784px;\n        width: 100%;\n        margin: 100px auto;\n        flex-direction: column;\n      `,\n    };\n  }\n\n  return {\n    containerStyle: css`\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      margin: 110px 120px;\n      margin-bottom: 48px;\n    `,\n  };\n};\n\n// Types for component props\ninterface CurriculumMap {\n  belts?: {\n    current_belt_type?: string;\n    goals_required?: number;\n  };\n  goals?: {\n    completed_goals: number;\n    total_goals: number;\n  };\n}\n\ninterface CurriculumHomeData {\n  data?: {\n    curriculum_map?: CurriculumMap;\n  };\n}\n\ninterface RewardHomeData {\n  data?: {\n    user_rewards?: RewardElement[];\n    user_stickers?: StickerElement[];\n  };\n}\n\ninterface BeltsElementsStickersProps {\n  curriculumHomeData?: CurriculumHomeData;\n  rewardHomeData?: RewardHomeData;\n  programStream?: string;\n  currentScreenWidth: number;\n  renderOnTeacher?: boolean;\n}\n\nconst BeltsElementsStickers: React.FC<BeltsElementsStickersProps> = ({\n  curriculumHomeData,\n  rewardHomeData,\n  programStream = 'MATH',\n  currentScreenWidth,\n  renderOnTeacher = false,\n}) => {\n  const { data: curriculumData } = curriculumHomeData || {};\n  const { curriculum_map: curriculumMap } = curriculumData || {};\n  const { belts: beltStats, goals: goalStats } = curriculumMap || {};\n  const { data: rewardHome } = rewardHomeData || {};\n  const { user_rewards: rewardElementsData, user_stickers: rewardStickersData } = rewardHome || {};\n  const { elements } = getRewardElements(rewardElementsData || []);\n  const { stickers } = getRewardStickers(rewardStickersData || []);\n  const { containerStyle } = getBadgeContainerConfig(currentScreenWidth) || {};\n\n  return (\n    <Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"space-between\"\n      $containerStyle={containerStyle}\n      $renderOnTeacher={renderOnTeacher}\n    >\n      <Belts beltStats={beltStats} goalStats={goalStats} currentScreenWidth={currentScreenWidth} />\n      <Separator width={60} height={30} />\n      <RewardElements\n        elements={elements}\n        programStream={programStream}\n        currentScreenWidth={currentScreenWidth}\n      />\n      <Separator width={60} height={30} />\n      <RewardElements\n        elements={stickers}\n        isSticker\n        currentScreenWidth={currentScreenWidth}\n        lotties={StickerMap}\n      />\n    </Wrapper>\n  );\n};\n\nexport default memo(BeltsElementsStickers);\n"],"names":["Wrapper","styled","FlexView","$containerStyle","$renderOnTeacher","css","getRewardElements","elements","elementsData","item","rewardData","totalCount","name","MATH_REWARDS","INSTRUCTION_REWARDS","getRewardStickers","stickers","stickersCount","badgeId","getBadgeContainerConfig","currentScreenWidth","SCREEN_SIZES","BeltsElementsStickers","curriculumHomeData","rewardHomeData","programStream","renderOnTeacher","curriculumData","curriculumMap","beltStats","goalStats","rewardHome","rewardElementsData","rewardStickersData","containerStyle","jsxs","jsx","Belts","Separator","RewardElements","StickerMap","beltsElementsStickers","memo"],"mappings":"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"}

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

@@ -0,0 +1,95 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { memo as w } from "react";
+import s, { css as c } from "styled-components";
+import E from "../../ui/arrow-tooltip/arrow-tooltip.js";
+import g from "../../ui/layout/flex-view.js";
+import h from "../../ui/separator/separator.js";
+import m from "../../ui/text/text.js";
+import { SCREEN_SIZES as p, getBeltIcon as x } from "../constants.js";
+import u from "./progress-bar-horizontal.js";
+const y = "Black", P = s.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      width: 80%;
+      flex-direction: row;
+    `}
+`, _ = s(g)`
+  min-width: 250px;
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      min-width: 180px;
+    `}
+`, A = s(g)`
+  width: 120px;
+  align-items: center;
+  padding-left: 22px;
+`, b = s.img`
+  width: 142px;
+  height: 110px;
+  ${({ $isBeltsExist: e }) => !e && c`
+      filter: grayscale(100%);
+      opacity: 20%;
+    `};
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      width: 104px;
+      height: 80px;
+    `}
+`, Y = s(g)`
+  width: 250px;
+`, C = s(h)`
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      height: 52px;
+    `}
+`, L = s(m)`
+  opacity: ${({ $isBeltsExist: e }) => !e && "50%"};
+`, S = (e, l, o, r) => {
+  let i = `${e}/${l} goal mastered`;
+  const a = l - e;
+  return o ? e === l ? i = "Congrats! You're now a Black Belt" : r ? i = `Next Belt: ${r} ${r > 1 ? "goals" : "goal"} away` : i = e < l ? `Next Belt: ${a} ${a > 1 ? "goals" : "goal"} away` : "Congrats! You're now a Black Belt" : o || (i = "You have no belts earned"), i;
+}, R = () => /* @__PURE__ */ t(m, { $renderAs: "body3", $color: "WHITE", children: "You can't earn belts for the selected program" }), I = ({ beltStats: e, goalStats: l, currentScreenWidth: o }) => {
+  const { current_belt_type: r, goals_required: i } = e || {}, { completed_goals: a = 0, total_goals: $ = 1 } = l || {}, n = !!r, f = n ? `${r && r.toUpperCase()} BELT` : "BELTS", B = Math.floor(a * 100 / $), T = S(a, $, n, i);
+  return /* @__PURE__ */ t(
+    E,
+    {
+      position: "bottom",
+      tooltipItem: R(),
+      renderAs: "primary",
+      hidden: n,
+      children: /* @__PURE__ */ d(P, { $currentScreenWidth: o, children: [
+        /* @__PURE__ */ d(_, { $currentScreenWidth: o, children: [
+          /* @__PURE__ */ t(m, { $renderAs: "h5", children: f }),
+          /* @__PURE__ */ t(h, { height: 24 }),
+          /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(
+            b,
+            {
+              $currentScreenWidth: o,
+              $isBeltsExist: n,
+              src: n ? x(r || "") : x(y),
+              alt: "Belt"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ d(Y, { children: [
+          /* @__PURE__ */ t(C, { $currentScreenWidth: o, height: 38 }),
+          /* @__PURE__ */ t(
+            u,
+            {
+              progress: B,
+              height: 4,
+              backgroundColor: "GREY_1",
+              progressColor: n ? "GREY_4" : "GREY_2"
+            }
+          ),
+          /* @__PURE__ */ t(h, { height: 8 }),
+          /* @__PURE__ */ t(L, { $isBeltsExist: n, $renderAs: "body3", $color: "GREY_4", children: T })
+        ] })
+      ] })
+    }
+  );
+}, F = w(I);
+export {
+  F as default
+};
+//# sourceMappingURL=belts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"belts.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/belts.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getBeltIcon, SCREEN_SIZES } from '../constants';\nimport ProgressBarHorizontal from './progress-bar-horizontal';\n\nconst DEFAULT_BELT_TYPE = 'Black';\n\ninterface ContainerProps {\n  $currentScreenWidth: number;\n}\n\nconst Container = styled.div<ContainerProps>`\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: 80%;\n      flex-direction: row;\n    `}\n`;\n\ninterface HeaderContainerProps {\n  $currentScreenWidth: number;\n}\n\nconst HeaderContainer = styled(FlexView)<HeaderContainerProps>`\n  min-width: 250px;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      min-width: 180px;\n    `}\n`;\n\nconst ProfileWrapper = styled(FlexView)`\n  width: 120px;\n  align-items: center;\n  padding-left: 22px;\n`;\n\ninterface BeltImgProps {\n  $isBeltsExist: boolean;\n  $currentScreenWidth: number;\n}\n\nconst BeltImg = styled.img<BeltImgProps>`\n  width: 142px;\n  height: 110px;\n  ${({ $isBeltsExist }) =>\n    !$isBeltsExist &&\n    css`\n      filter: grayscale(100%);\n      opacity: 20%;\n    `};\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: 104px;\n      height: 80px;\n    `}\n`;\n\nconst ProgressBarWrapper = styled(FlexView)`\n  width: 250px;\n`;\n\ninterface SeparatorDivProps {\n  $currentScreenWidth: number;\n}\n\nconst SeparatorDiv = styled(Separator)<SeparatorDivProps>`\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      height: 52px;\n    `}\n`;\n\ninterface BeltTextProps {\n  $isBeltsExist: boolean;\n}\n\nconst BeltText = styled(Text)<BeltTextProps>`\n  opacity: ${({ $isBeltsExist }) => !$isBeltsExist && '50%'};\n`;\n\nconst getBarTitle = (\n  completedGoals: number,\n  totalGoals: number,\n  isBeltsExist: boolean,\n  nextBeltGoals?: number,\n): string => {\n  let title = `${completedGoals}/${totalGoals} goal mastered`;\n  const goalsReq = totalGoals - completedGoals;\n\n  if (isBeltsExist) {\n    if (completedGoals === totalGoals) {\n      title = \"Congrats! You're now a Black Belt\";\n    } else if (nextBeltGoals) {\n      title = `Next Belt: ${nextBeltGoals} ${nextBeltGoals > 1 ? 'goals' : 'goal'} away`;\n    } else {\n      title =\n        completedGoals < totalGoals\n          ? `Next Belt: ${goalsReq} ${goalsReq > 1 ? 'goals' : 'goal'} away`\n          : \"Congrats! You're now a Black Belt\";\n    }\n  } else if (!isBeltsExist) {\n    title = 'You have no belts earned';\n  }\n\n  return title;\n};\n\nconst getToolTipText = () => {\n  return (\n    <Text $renderAs=\"body3\" $color=\"WHITE\">\n      You can&apos;t earn belts for the selected program\n    </Text>\n  );\n};\n\ninterface BeltStats {\n  current_belt_type?: string;\n  goals_required?: number;\n}\n\ninterface GoalStats {\n  completed_goals: number;\n  total_goals: number;\n}\n\ninterface BeltsProps {\n  beltStats?: BeltStats | null;\n  goalStats?: GoalStats | null;\n  currentScreenWidth: number;\n}\n\nconst Belts: React.FC<BeltsProps> = ({ beltStats, goalStats, currentScreenWidth }) => {\n  const { current_belt_type: currentBeltType, goals_required: nextBeltGoals } = beltStats || {};\n  const { completed_goals: completedGoals = 0, total_goals: totalGoals = 1 } = goalStats || {};\n\n  const isBeltsExist = !!currentBeltType;\n  const beltTitle = isBeltsExist\n    ? `${currentBeltType && currentBeltType.toUpperCase()} BELT`\n    : 'BELTS';\n  const progress = Math.floor((completedGoals * 100) / totalGoals);\n  const barTitle = getBarTitle(completedGoals, totalGoals, isBeltsExist, nextBeltGoals);\n\n  return (\n    <ArrowTooltip\n      position=\"bottom\"\n      tooltipItem={getToolTipText()}\n      renderAs=\"primary\"\n      hidden={isBeltsExist}\n    >\n      <Container $currentScreenWidth={currentScreenWidth}>\n        <HeaderContainer $currentScreenWidth={currentScreenWidth}>\n          <Text $renderAs=\"h5\">{beltTitle}</Text>\n          <Separator height={24} />\n          <ProfileWrapper>\n            <BeltImg\n              $currentScreenWidth={currentScreenWidth}\n              $isBeltsExist={isBeltsExist}\n              src={\n                !isBeltsExist ? getBeltIcon(DEFAULT_BELT_TYPE) : getBeltIcon(currentBeltType || '')\n              }\n              alt=\"Belt\"\n            />\n          </ProfileWrapper>\n        </HeaderContainer>\n        <ProgressBarWrapper>\n          <SeparatorDiv $currentScreenWidth={currentScreenWidth} height={38} />\n          <ProgressBarHorizontal\n            progress={progress}\n            height={4}\n            backgroundColor=\"GREY_1\"\n            progressColor={isBeltsExist ? 'GREY_4' : 'GREY_2'}\n          />\n          <Separator height={8} />\n          <BeltText $isBeltsExist={isBeltsExist} $renderAs=\"body3\" $color=\"GREY_4\">\n            {barTitle}\n          </BeltText>\n        </ProgressBarWrapper>\n      </Container>\n    </ArrowTooltip>\n  );\n};\n\nexport default memo(Belts);\n"],"names":["DEFAULT_BELT_TYPE","Container","styled","$currentScreenWidth","SCREEN_SIZES","css","HeaderContainer","FlexView","ProfileWrapper","BeltImg","$isBeltsExist","ProgressBarWrapper","SeparatorDiv","Separator","BeltText","Text","getBarTitle","completedGoals","totalGoals","isBeltsExist","nextBeltGoals","title","goalsReq","getToolTipText","Belts","beltStats","goalStats","currentScreenWidth","currentBeltType","beltTitle","progress","barTitle","jsx","ArrowTooltip","jsxs","getBeltIcon","ProgressBarHorizontal","Belts$1","memo"],"mappings":"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"}

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