@cuemath/leap 3.3.38-m → 3.4.0

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

@@ -1 +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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"}
+{"version":3,"file":"belts.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/belts.tsx"],"sourcesContent":["import { memo, type FC } 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: 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

@@ -1,9 +1,9 @@
 import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import w, { memo as S, useCallback as f } from "react";
+import { memo as w, useRef 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 D from "../../ui/lottie-animation/lottie-animation.js";
+import R 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 = {
@@ -70,10 +70,10 @@ const H = {
       filter: saturate(0);
       opacity: ${e};
     `}
-`, _ = r.div`
+`, Z = r.div`
   border: 1px solid ${({ theme: t }) => t.colors.GREY_2};
   border-radius: 8px;
-`, Z = r(d)`
+`, v = r(d)`
   width: 62px;
   height: 62px;
   align-items: center;
@@ -82,7 +82,7 @@ const H = {
       filter: saturate(0);
       opacity: ${e};
     `}
-`, v = r(d)`
+`, B = r(d)`
   position: absolute;
   ${({ $isSticker: t, $isCoddingType: e }) => V(t, e)};
   background-color: ${({ theme: t }) => t.colors.GREY_2};
@@ -96,14 +96,14 @@ const H = {
       width: ${e + 6}px;
       height: 22px;
     `}
-`, B = r(C)`
+`, N = r(C)`
   font-size: 9px;
   line-height: 14px;
   ${({ $currentScreenWidth: t }) => t < g.LAPTOP && c`
       font-size: 12px;
       line-height: 14px;
     `}
-`, N = r(C)`
+`, _ = r(C)`
   color: ${({ theme: t }) => t.colors.BLACK};
   opacity: ${({ $disabled: t }) => t ? 1 : 0.5};
 `, k = ({
@@ -115,7 +115,7 @@ const H = {
   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(() => {
+  const h = e >= 100, O = K[i], x = H[i] || 1, { height: E, width: b, lottieSrc: s } = A[i] || {}, p = S(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(() => {
@@ -133,15 +133,15 @@ const H = {
           alt: "reward"
         }
       ),
-      n && s && /* @__PURE__ */ o(_, { $disabled: !t, children: /* @__PURE__ */ o(
-        Z,
+      n && s && /* @__PURE__ */ o(Z, { $disabled: !t, children: /* @__PURE__ */ o(
+        v,
         {
           $disabled: !t,
           $disabledVal: x,
           onMouseEnter: L,
           onMouseLeave: T,
           children: /* @__PURE__ */ o(
-            R,
+            D,
             {
               src: s,
               width: b,
@@ -153,7 +153,7 @@ const H = {
         }
       ) }),
       t && /* @__PURE__ */ o(
-        v,
+        B,
         {
           $isSticker: n,
           $borderColor: y[i] || "#000",
@@ -163,7 +163,7 @@ const H = {
           $currentScreenWidth: $,
           $flexDirection: "row",
           children: /* @__PURE__ */ o(
-            B,
+            N,
             {
               $currentScreenWidth: $,
               $renderAs: "body3",
@@ -174,10 +174,10 @@ const H = {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ o(D, { height: 4 }),
-    /* @__PURE__ */ o(N, { $renderAs: "body3", $disabled: t, children: O })
+    /* @__PURE__ */ o(R, { height: 4 }),
+    /* @__PURE__ */ o(_, { $renderAs: "body3", $disabled: t, children: O })
   ] });
-}, tt = S(k);
+}, tt = w(k);
 export {
   tt as default
 };

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

@@ -1 +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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"}
+{"version":3,"file":"elements.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/elements.tsx"],"sourcesContent":["import { memo, useCallback, useRef, type FC } 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 type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\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: 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 = 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","useRef","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.map

@@ -1 +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;"}
+{"version":3,"file":"progress-bar-horizontal.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/progress-bar-horizontal.tsx"],"sourcesContent":["import { memo, type FC } from 'react';\nimport styled from 'styled-components';\n\nimport type { TColorNames } from '../../ui/types';\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: 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,IAAwD,CAAC;AAAA,EAC7D,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.map

@@ -1 +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;"}
+{"version":3,"file":"reward-elements.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/reward-elements.tsx"],"sourcesContent":["import { memo, type FC } 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: 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,IAA0C,CAAC;AAAA,EAC/C,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.map

@@ -1 +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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"}
+{"version":3,"file":"constants.js","sources":["../../../src/features/wins-dashboard/constants.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport { 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<string, FC<{ color?: string; selected?: boolean }>> = {\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.map

@@ -1 +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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"}
+{"version":3,"file":"wins-header.js","sources":["../../../../src/features/wins-dashboard/header/wins-header.tsx"],"sourcesContent":["import { memo, useCallback, type FC } 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: 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: 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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"}

package/dist/features/wins-dashboard/student-badges/animated-tabbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"animated-tabbar.js","sources":["../../../../src/features/wins-dashboard/student-badges/animated-tabbar.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\n\nconst MIN_SCREEN_WIDTH_FOR_TAB_TEXT = 725;\n\nexport interface TabItem {\n  id: string;\n  ref: React.RefObject<HTMLDivElement | null>;\n  Icon: React.FC<{ selected: boolean }>;\n  title: string;\n}\n\ninterface IndicatorProps {\n  $width: number;\n  $left: number;\n}\n\nconst TabBarContainer = styled(FlexView)`\n  flex: 1;\n  position: relative;\n`;\n\nconst TabBarColumn = styled(FlexView)`\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  padding-top: 16px;\n  padding-bottom: 12px;\n  flex: 1;\n  cursor: pointer;\n`;\n\nconst Indicator = styled.div<IndicatorProps>`\n  width: ${({ $width }) => $width}px;\n  height: 2px;\n  position: absolute;\n  bottom: 0;\n  background: BLACK;\n  transition: transform 300ms linear;\n  transform: translateX(${({ $left }) => $left}px);\n`;\n\nconst TabTitleContainer = styled(FlexView)<{ $hideTabText: boolean }>`\n  ${({ $hideTabText }) =>\n    $hideTabText &&\n    css`\n      display: none;\n    `}\n`;\n\ninterface AnimatedTabBarProps {\n  onTabClick: (tabId: string) => void;\n  selectedTabId: string;\n  tabs: TabItem[];\n  currentScreenWidth: number;\n}\n\nconst AnimatedTabBar = ({\n  onTabClick,\n  selectedTabId,\n  tabs,\n  currentScreenWidth,\n}: AnimatedTabBarProps) => {\n  const selectedTabItemIndex = tabs.findIndex((tab: TabItem) => tab.id === selectedTabId);\n  const { ref } = tabs[selectedTabItemIndex] || {};\n  const { clientWidth = 0 } = ref?.current || {};\n  const indicatorWidth = clientWidth;\n\n  const indicatorTranslateX =\n    selectedTabItemIndex * clientWidth + (clientWidth - indicatorWidth) / 2;\n\n  return (\n    <TabBarContainer $background=\"WHITE\">\n      <FlexView $flexDirection=\"row\" $width={'100%'}>\n        {tabs.map((tab: TabItem) => {\n          const { id, title, Icon } = tab;\n          const selected = id === selectedTabId;\n\n          return (\n            <TabBarColumn\n              $justifyContent=\"center\"\n              key={id}\n              onClick={() => onTabClick(id)}\n              ref={tab.ref}\n            >\n              <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n                <Icon selected={selected} />\n                <TabTitleContainer\n                  $gutter={4}\n                  $hideTabText={currentScreenWidth <= MIN_SCREEN_WIDTH_FOR_TAB_TEXT}\n                >\n                  <Text $renderAs=\"eyebrow2\" $color={selected ? 'BLACK' : 'BLACK_75'}>\n                    {title}\n                  </Text>\n                </TabTitleContainer>\n              </FlexView>\n            </TabBarColumn>\n          );\n        })}\n      </FlexView>\n      <Indicator $left={indicatorTranslateX} $width={indicatorWidth} />\n    </TabBarContainer>\n  );\n};\n\nexport default memo(AnimatedTabBar);\n"],"names":["MIN_SCREEN_WIDTH_FOR_TAB_TEXT","TabBarContainer","styled","FlexView","TabBarColumn","Indicator","$width","$left","TabTitleContainer","$hideTabText","css","AnimatedTabBar","onTabClick","selectedTabId","tabs","currentScreenWidth","selectedTabItemIndex","tab","ref","clientWidth","indicatorWidth","indicatorTranslateX","jsxs","jsx","id","title","Icon","selected","Text","AnimatedTabBar$1","memo"],"mappings":";;;;;AAMA,MAAMA,IAAgC,KAchCC,IAAkBC,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCC,IAAeF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BE,IAAYH,EAAO;AAAA,WACd,CAAC,EAAE,QAAAI,EAAO,MAAMA,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMP,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,GAGxCC,IAAoBN,EAAOC,CAAQ;AAAA,IACrC,CAAC,EAAE,cAAAM,QACHA,KACAC;AAAA;AAAA,KAEC;AAAA,GAUCC,IAAiB,CAAC;AAAA,EACtB,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AACF,MAA2B;AACzB,QAAMC,IAAuBF,EAAK,UAAU,CAACG,MAAiBA,EAAI,OAAOJ,CAAa,GAChF,EAAE,KAAAK,EAAI,IAAIJ,EAAKE,CAAoB,KAAK,CAAA,GACxC,EAAE,aAAAG,IAAc,EAAA,KAAMD,KAAA,gBAAAA,EAAK,YAAW,CAAA,GACtCE,IAAiBD,GAEjBE,IACJL,IAAuBG,KAAeA,IAAcC,KAAkB;AAGtE,SAAA,gBAAAE,EAACrB,GAAgB,EAAA,aAAY,SAC3B,UAAA;AAAA,IAAC,gBAAAsB,EAAApB,GAAA,EAAS,gBAAe,OAAM,QAAQ,QACpC,UAAKW,EAAA,IAAI,CAACG,MAAiB;AAC1B,YAAM,EAAE,IAAAO,GAAI,OAAAC,GAAO,MAAAC,EAAA,IAAST,GACtBU,IAAWH,MAAOX;AAGtB,aAAA,gBAAAU;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,iBAAgB;AAAA,UAEhB,SAAS,MAAMQ,EAAWY,CAAE;AAAA,UAC5B,KAAKP,EAAI;AAAA,UAET,4BAACd,GAAS,EAAA,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,YAAA,gBAAAoB,EAACG,KAAK,UAAAC,GAAoB;AAAA,YAC1B,gBAAAJ;AAAA,cAACf;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,cAAcO,KAAsBf;AAAA,gBAEpC,UAAA,gBAAAuB,EAACK,KAAK,WAAU,YAAW,QAAQD,IAAW,UAAU,YACrD,UACHF,EAAA,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,QAdKD;AAAA,MAAA;AAAA,IAiBV,CAAA,GACH;AAAA,IACC,gBAAAD,EAAAlB,GAAA,EAAU,OAAOgB,GAAqB,QAAQD,GAAgB;AAAA,EACjE,EAAA,CAAA;AAEJ,GAEeS,IAAAC,EAAKnB,CAAc;"}
+{"version":3,"file":"animated-tabbar.js","sources":["../../../../src/features/wins-dashboard/student-badges/animated-tabbar.tsx"],"sourcesContent":["import { memo, type FC, type RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\n\nconst MIN_SCREEN_WIDTH_FOR_TAB_TEXT = 725;\n\nexport interface TabItem {\n  id: string;\n  ref: RefObject<HTMLDivElement | null>;\n  Icon: FC<{ selected: boolean }>;\n  title: string;\n}\n\ninterface IndicatorProps {\n  $width: number;\n  $left: number;\n}\n\nconst TabBarContainer = styled(FlexView)`\n  flex: 1;\n  position: relative;\n`;\n\nconst TabBarColumn = styled(FlexView)`\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  padding-top: 16px;\n  padding-bottom: 12px;\n  flex: 1;\n  cursor: pointer;\n`;\n\nconst Indicator = styled.div<IndicatorProps>`\n  width: ${({ $width }) => $width}px;\n  height: 2px;\n  position: absolute;\n  bottom: 0;\n  background: BLACK;\n  transition: transform 300ms linear;\n  transform: translateX(${({ $left }) => $left}px);\n`;\n\nconst TabTitleContainer = styled(FlexView)<{ $hideTabText: boolean }>`\n  ${({ $hideTabText }) =>\n    $hideTabText &&\n    css`\n      display: none;\n    `}\n`;\n\ninterface AnimatedTabBarProps {\n  onTabClick: (tabId: string) => void;\n  selectedTabId: string;\n  tabs: TabItem[];\n  currentScreenWidth: number;\n}\n\nconst AnimatedTabBar = ({\n  onTabClick,\n  selectedTabId,\n  tabs,\n  currentScreenWidth,\n}: AnimatedTabBarProps) => {\n  const selectedTabItemIndex = tabs.findIndex((tab: TabItem) => tab.id === selectedTabId);\n  const { ref } = tabs[selectedTabItemIndex] || {};\n  const { clientWidth = 0 } = ref?.current || {};\n  const indicatorWidth = clientWidth;\n\n  const indicatorTranslateX =\n    selectedTabItemIndex * clientWidth + (clientWidth - indicatorWidth) / 2;\n\n  return (\n    <TabBarContainer $background=\"WHITE\">\n      <FlexView $flexDirection=\"row\" $width={'100%'}>\n        {tabs.map((tab: TabItem) => {\n          const { id, title, Icon } = tab;\n          const selected = id === selectedTabId;\n\n          return (\n            <TabBarColumn\n              $justifyContent=\"center\"\n              key={id}\n              onClick={() => onTabClick(id)}\n              ref={tab.ref}\n            >\n              <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n                <Icon selected={selected} />\n                <TabTitleContainer\n                  $gutter={4}\n                  $hideTabText={currentScreenWidth <= MIN_SCREEN_WIDTH_FOR_TAB_TEXT}\n                >\n                  <Text $renderAs=\"eyebrow2\" $color={selected ? 'BLACK' : 'BLACK_75'}>\n                    {title}\n                  </Text>\n                </TabTitleContainer>\n              </FlexView>\n            </TabBarColumn>\n          );\n        })}\n      </FlexView>\n      <Indicator $left={indicatorTranslateX} $width={indicatorWidth} />\n    </TabBarContainer>\n  );\n};\n\nexport default memo(AnimatedTabBar);\n"],"names":["MIN_SCREEN_WIDTH_FOR_TAB_TEXT","TabBarContainer","styled","FlexView","TabBarColumn","Indicator","$width","$left","TabTitleContainer","$hideTabText","css","AnimatedTabBar","onTabClick","selectedTabId","tabs","currentScreenWidth","selectedTabItemIndex","tab","ref","clientWidth","indicatorWidth","indicatorTranslateX","jsxs","jsx","id","title","Icon","selected","Text","AnimatedTabBar$1","memo"],"mappings":";;;;;AAMA,MAAMA,IAAgC,KAchCC,IAAkBC,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCC,IAAeF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BE,IAAYH,EAAO;AAAA,WACd,CAAC,EAAE,QAAAI,EAAO,MAAMA,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMP,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,GAGxCC,IAAoBN,EAAOC,CAAQ;AAAA,IACrC,CAAC,EAAE,cAAAM,QACHA,KACAC;AAAA;AAAA,KAEC;AAAA,GAUCC,IAAiB,CAAC;AAAA,EACtB,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AACF,MAA2B;AACzB,QAAMC,IAAuBF,EAAK,UAAU,CAACG,MAAiBA,EAAI,OAAOJ,CAAa,GAChF,EAAE,KAAAK,EAAI,IAAIJ,EAAKE,CAAoB,KAAK,CAAA,GACxC,EAAE,aAAAG,IAAc,EAAA,KAAMD,KAAA,gBAAAA,EAAK,YAAW,CAAA,GACtCE,IAAiBD,GAEjBE,IACJL,IAAuBG,KAAeA,IAAcC,KAAkB;AAGtE,SAAA,gBAAAE,EAACrB,GAAgB,EAAA,aAAY,SAC3B,UAAA;AAAA,IAAC,gBAAAsB,EAAApB,GAAA,EAAS,gBAAe,OAAM,QAAQ,QACpC,UAAKW,EAAA,IAAI,CAACG,MAAiB;AAC1B,YAAM,EAAE,IAAAO,GAAI,OAAAC,GAAO,MAAAC,EAAA,IAAST,GACtBU,IAAWH,MAAOX;AAGtB,aAAA,gBAAAU;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,iBAAgB;AAAA,UAEhB,SAAS,MAAMQ,EAAWY,CAAE;AAAA,UAC5B,KAAKP,EAAI;AAAA,UAET,4BAACd,GAAS,EAAA,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,YAAA,gBAAAoB,EAACG,KAAK,UAAAC,GAAoB;AAAA,YAC1B,gBAAAJ;AAAA,cAACf;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,cAAcO,KAAsBf;AAAA,gBAEpC,UAAA,gBAAAuB,EAACK,KAAK,WAAU,YAAW,QAAQD,IAAW,UAAU,YACrD,UACHF,EAAA,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,QAdKD;AAAA,MAAA;AAAA,IAiBV,CAAA,GACH;AAAA,IACC,gBAAAD,EAAAlB,GAAA,EAAU,OAAOgB,GAAqB,QAAQD,GAAgB;AAAA,EACjE,EAAA,CAAA;AAEJ,GAEeS,IAAAC,EAAKnB,CAAc;"}

package/dist/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-student-badge-list-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.ts"],"sourcesContent":["import type { FC } from 'react';\nimport type React from 'react';\nimport type { RuleSet } from 'styled-components';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { css } from 'styled-components';\n\nimport { BADGE_TYPE_TAB_ICON, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst HEADER_HEIGHT = 64;\nconst TAB_BAR_HEIGHT = 48;\nconst TOTAL_TAB_BAR_HEIGHT = HEADER_HEIGHT + TAB_BAR_HEIGHT;\n\n// Screen sizes constants\nconst SCREEN_SIZES = {\n  TABLET: 768,\n  LAPTOP: 1024,\n  LAPTOPL: 1440,\n};\n\ninterface CategoryConfig {\n  badgeWidth: number;\n  badgeCategoryGap: number;\n  badgeCategoryWidth: number;\n  maxBadgeNameLines: number;\n  containerStyle: RuleSet<object>;\n}\n\nconst getBadgeContainerConfig = (containerWidth: number): CategoryConfig => {\n  if (containerWidth > SCREEN_SIZES.LAPTOPL) {\n    return {\n      badgeWidth: 140,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: 1040,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, 140px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.LAPTOP) {\n    const gutter = 120;\n    const badgeGap = 40;\n    const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n    return {\n      badgeWidth,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: containerWidth - 2 * gutter,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.TABLET) {\n    return {\n      badgeWidth: 104,\n      badgeCategoryGap: 24,\n      badgeCategoryWidth: 784,\n      maxBadgeNameLines: 2,\n      containerStyle: css`\n        grid-column-gap: 32px;\n        grid-template-columns: repeat(auto-fit, 104px);\n        margin-top: 24px;\n      `,\n    };\n  }\n\n  const gutter = 40;\n  const badgeGap = 26;\n  const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n  return {\n    badgeWidth,\n    badgeCategoryGap: 24,\n    badgeCategoryWidth: containerWidth - 2 * gutter,\n    maxBadgeNameLines: 2,\n    containerStyle: css`\n      grid-column-gap: 26px;\n      grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n      margin-top: 24px;\n    `,\n  };\n};\n\nexport default function useStudentBadgeListHook({\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n  userBadges,\n}: {\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n  userBadges: Record<string, unknown[]>;\n}) {\n  // Create refs for all possible badge categories\n  const commonTabRef = useRef<HTMLDivElement | null>(null);\n  const rareTabRef = useRef<HTMLDivElement | null>(null);\n  const epicTabRef = useRef<HTMLDivElement | null>(null);\n  const legendaryTabRef = useRef<HTMLDivElement | null>(null);\n  const mythicTabRef = useRef<HTMLDivElement | null>(null);\n  const mysteryTabRef = useRef<HTMLDivElement | null>(null);\n\n  const commonBadgeRef = useRef<HTMLDivElement | null>(null);\n  const rareBadgeRef = useRef<HTMLDivElement | null>(null);\n  const epicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const legendaryBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mythicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mysteryBadgeRef = useRef<HTMLDivElement | null>(null);\n\n  const tabBarRefs: Record<string, React.RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonTabRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareTabRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicTabRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryTabRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicTabRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryTabRef,\n    }),\n    [],\n  );\n\n  const badgeCategoryRefs: Record<string, React.RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonBadgeRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareBadgeRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicBadgeRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryBadgeRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicBadgeRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryBadgeRef,\n    }),\n    [],\n  );\n\n  const [showTabBar, setShowTabBar] = useState(false);\n  const [currentSelectedBadgeType, setCurrentSelectedBadgeType] = useState(\n    STUDENT_BADGE_TYPE.COMMON,\n  );\n\n  useEffect(() => {\n    const categoryReached = Object.keys(badgeCategoryRefs)\n      .reverse()\n      .find(category => {\n        const categoryRef = badgeCategoryRefs[category];\n        const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n        if (typeof categoryTopOffset !== 'number') return false;\n\n        return (\n          scrollPosition >=\n          categoryTopOffset -\n            (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT)\n        );\n      });\n\n    if (categoryReached && categoryReached !== currentSelectedBadgeType) {\n      setCurrentSelectedBadgeType(categoryReached);\n    }\n\n    if (categoryReached && !showTabBar) {\n      setShowTabBar(true);\n    }\n\n    if (!categoryReached && showTabBar) {\n      setShowTabBar(false);\n    }\n  }, [badgeCategoryRefs, currentSelectedBadgeType, scrollPosition, showTabBar]);\n\n  const onTabClick = useCallback(\n    (category: string) => {\n      const categoryRef = badgeCategoryRefs[category];\n      const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n      if (typeof categoryTopOffset === 'number') {\n        const scrollTopPosition =\n          categoryTopOffset -\n          (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT);\n\n        handleScrollTo(scrollTopPosition);\n      }\n    },\n    [badgeCategoryRefs, handleScrollTo],\n  );\n\n  const scrollToTop = useCallback(() => {\n    const scrollTopPosition = 0;\n\n    handleScrollTo(scrollTopPosition);\n  }, [handleScrollTo]);\n\n  const getTabBarData = (): Array<{\n    id: string;\n    title: string;\n    Icon: FC<{ color?: string; selected?: boolean }>;\n    ref: React.RefObject<HTMLDivElement | null>;\n  }> => {\n    const tabBarData: Array<{\n      id: string;\n      title: string;\n      Icon: FC<{ color?: string; selected?: boolean }>;\n      ref: React.RefObject<HTMLDivElement | null>;\n    }> = [];\n\n    Object.keys(userBadges).forEach(category => {\n      const Icon = BADGE_TYPE_TAB_ICON[category];\n      const ref = tabBarRefs[category];\n\n      if (Icon && ref) {\n        tabBarData.push({\n          id: category,\n          title: category,\n          Icon,\n          ref,\n        });\n      }\n    });\n\n    return tabBarData;\n  };\n\n  return {\n    badgeCategoryRefs,\n    categoryConfig: getBadgeContainerConfig(currentScreenWidth),\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs: getTabBarData(),\n    totalBadgeCategories: Object.keys(userBadges).length,\n  };\n}\n"],"names":["HEADER_HEIGHT","TAB_BAR_HEIGHT","TOTAL_TAB_BAR_HEIGHT","SCREEN_SIZES","getBadgeContainerConfig","containerWidth","css","badgeWidth","gutter","useStudentBadgeListHook","currentScreenWidth","handleScrollTo","scrollPosition","userBadges","commonTabRef","useRef","rareTabRef","epicTabRef","legendaryTabRef","mythicTabRef","mysteryTabRef","commonBadgeRef","rareBadgeRef","epicBadgeRef","legendaryBadgeRef","mythicBadgeRef","mysteryBadgeRef","tabBarRefs","useMemo","STUDENT_BADGE_TYPE","badgeCategoryRefs","showTabBar","setShowTabBar","useState","currentSelectedBadgeType","setCurrentSelectedBadgeType","useEffect","categoryReached","category","categoryRef","categoryTopOffset","_a","onTabClick","useCallback","scrollTopPosition","scrollToTop","getTabBarData","tabBarData","Icon","BADGE_TYPE_TAB_ICON","ref"],"mappings":"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"}
+{"version":3,"file":"use-student-badge-list-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type FC, type RefObject } from 'react';\nimport type { RuleSet } from 'styled-components';\nimport { css } from 'styled-components';\n\nimport { BADGE_TYPE_TAB_ICON, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst HEADER_HEIGHT = 64;\nconst TAB_BAR_HEIGHT = 48;\nconst TOTAL_TAB_BAR_HEIGHT = HEADER_HEIGHT + TAB_BAR_HEIGHT;\n\n// Screen sizes constants\nconst SCREEN_SIZES = {\n  TABLET: 768,\n  LAPTOP: 1024,\n  LAPTOPL: 1440,\n};\n\ninterface CategoryConfig {\n  badgeWidth: number;\n  badgeCategoryGap: number;\n  badgeCategoryWidth: number;\n  maxBadgeNameLines: number;\n  containerStyle: RuleSet<object>;\n}\n\nconst getBadgeContainerConfig = (containerWidth: number): CategoryConfig => {\n  if (containerWidth > SCREEN_SIZES.LAPTOPL) {\n    return {\n      badgeWidth: 140,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: 1040,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, 140px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.LAPTOP) {\n    const gutter = 120;\n    const badgeGap = 40;\n    const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n    return {\n      badgeWidth,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: containerWidth - 2 * gutter,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.TABLET) {\n    return {\n      badgeWidth: 104,\n      badgeCategoryGap: 24,\n      badgeCategoryWidth: 784,\n      maxBadgeNameLines: 2,\n      containerStyle: css`\n        grid-column-gap: 32px;\n        grid-template-columns: repeat(auto-fit, 104px);\n        margin-top: 24px;\n      `,\n    };\n  }\n\n  const gutter = 40;\n  const badgeGap = 26;\n  const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n  return {\n    badgeWidth,\n    badgeCategoryGap: 24,\n    badgeCategoryWidth: containerWidth - 2 * gutter,\n    maxBadgeNameLines: 2,\n    containerStyle: css`\n      grid-column-gap: 26px;\n      grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n      margin-top: 24px;\n    `,\n  };\n};\n\nexport default function useStudentBadgeListHook({\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n  userBadges,\n}: {\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n  userBadges: Record<string, unknown[]>;\n}) {\n  // Create refs for all possible badge categories\n  const commonTabRef = useRef<HTMLDivElement | null>(null);\n  const rareTabRef = useRef<HTMLDivElement | null>(null);\n  const epicTabRef = useRef<HTMLDivElement | null>(null);\n  const legendaryTabRef = useRef<HTMLDivElement | null>(null);\n  const mythicTabRef = useRef<HTMLDivElement | null>(null);\n  const mysteryTabRef = useRef<HTMLDivElement | null>(null);\n\n  const commonBadgeRef = useRef<HTMLDivElement | null>(null);\n  const rareBadgeRef = useRef<HTMLDivElement | null>(null);\n  const epicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const legendaryBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mythicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mysteryBadgeRef = useRef<HTMLDivElement | null>(null);\n\n  const tabBarRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonTabRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareTabRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicTabRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryTabRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicTabRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryTabRef,\n    }),\n    [],\n  );\n\n  const badgeCategoryRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonBadgeRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareBadgeRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicBadgeRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryBadgeRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicBadgeRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryBadgeRef,\n    }),\n    [],\n  );\n\n  const [showTabBar, setShowTabBar] = useState(false);\n  const [currentSelectedBadgeType, setCurrentSelectedBadgeType] = useState(\n    STUDENT_BADGE_TYPE.COMMON,\n  );\n\n  useEffect(() => {\n    const categoryReached = Object.keys(badgeCategoryRefs)\n      .reverse()\n      .find(category => {\n        const categoryRef = badgeCategoryRefs[category];\n        const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n        if (typeof categoryTopOffset !== 'number') return false;\n\n        return (\n          scrollPosition >=\n          categoryTopOffset -\n            (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT)\n        );\n      });\n\n    if (categoryReached && categoryReached !== currentSelectedBadgeType) {\n      setCurrentSelectedBadgeType(categoryReached);\n    }\n\n    if (categoryReached && !showTabBar) {\n      setShowTabBar(true);\n    }\n\n    if (!categoryReached && showTabBar) {\n      setShowTabBar(false);\n    }\n  }, [badgeCategoryRefs, currentSelectedBadgeType, scrollPosition, showTabBar]);\n\n  const onTabClick = useCallback(\n    (category: string) => {\n      const categoryRef = badgeCategoryRefs[category];\n      const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n      if (typeof categoryTopOffset === 'number') {\n        const scrollTopPosition =\n          categoryTopOffset -\n          (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT);\n\n        handleScrollTo(scrollTopPosition);\n      }\n    },\n    [badgeCategoryRefs, handleScrollTo],\n  );\n\n  const scrollToTop = useCallback(() => {\n    const scrollTopPosition = 0;\n\n    handleScrollTo(scrollTopPosition);\n  }, [handleScrollTo]);\n\n  const getTabBarData = (): Array<{\n    id: string;\n    title: string;\n    Icon: FC<{ color?: string; selected?: boolean }>;\n    ref: RefObject<HTMLDivElement | null>;\n  }> => {\n    const tabBarData: Array<{\n      id: string;\n      title: string;\n      Icon: FC<{ color?: string; selected?: boolean }>;\n      ref: RefObject<HTMLDivElement | null>;\n    }> = [];\n\n    Object.keys(userBadges).forEach(category => {\n      const Icon = BADGE_TYPE_TAB_ICON[category];\n      const ref = tabBarRefs[category];\n\n      if (Icon && ref) {\n        tabBarData.push({\n          id: category,\n          title: category,\n          Icon,\n          ref,\n        });\n      }\n    });\n\n    return tabBarData;\n  };\n\n  return {\n    badgeCategoryRefs,\n    categoryConfig: getBadgeContainerConfig(currentScreenWidth),\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs: getTabBarData(),\n    totalBadgeCategories: Object.keys(userBadges).length,\n  };\n}\n"],"names":["HEADER_HEIGHT","TAB_BAR_HEIGHT","TOTAL_TAB_BAR_HEIGHT","SCREEN_SIZES","getBadgeContainerConfig","containerWidth","css","badgeWidth","gutter","useStudentBadgeListHook","currentScreenWidth","handleScrollTo","scrollPosition","userBadges","commonTabRef","useRef","rareTabRef","epicTabRef","legendaryTabRef","mythicTabRef","mysteryTabRef","commonBadgeRef","rareBadgeRef","epicBadgeRef","legendaryBadgeRef","mythicBadgeRef","mysteryBadgeRef","tabBarRefs","useMemo","STUDENT_BADGE_TYPE","badgeCategoryRefs","showTabBar","setShowTabBar","useState","currentSelectedBadgeType","setCurrentSelectedBadgeType","useEffect","categoryReached","category","categoryRef","categoryTopOffset","_a","onTabClick","useCallback","scrollTopPosition","scrollToTop","getTabBarData","tabBarData","Icon","BADGE_TYPE_TAB_ICON","ref"],"mappings":";;;AAMA,MAAMA,IAAgB,IAChBC,IAAiB,IACjBC,IAAuBF,IAAgBC,GAGvCE,IAAe;AAAA,EACnB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX,GAUMC,IAA0B,CAACC,MAA2C;AACtE,MAAAA,IAAiBF,EAAa;AACzB,WAAA;AAAA,MACL,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,gBAAgBG;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQhB,MAAAD,IAAiBF,EAAa,QAAQ;AAGxC,UAAMI,KAAcF,IAAkB,OAA8B;AAE7D,WAAA;AAAA,MACL,YAAAE;AAAAA,MACA,kBAAkB;AAAA,MAClB,oBAAoBF,IAAiB,IAAIG;AAAAA,MACzC,mBAAmB;AAAA,MACnB,gBAAgBF;AAAA,kDAC4BC,CAAU;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAK1D;AAEI,MAAAF,IAAiBF,EAAa;AACzB,WAAA;AAAA,MACL,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,gBAAgBG;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQpB,QAAME,IAAS,IAETD,KAAcF,KAAkB,IAAIG,IAAS,IADlC,OACmD;AAE7D,SAAA;AAAA,IACL,YAAAD;AAAA,IACA,kBAAkB;AAAA,IAClB,oBAAoBF,IAAiB,IAAIG;AAAA,IACzC,mBAAmB;AAAA,IACnB,gBAAgBF;AAAA;AAAA,gDAE4BC,CAAU;AAAA;AAAA;AAAA,EAAA;AAI1D;AAEA,SAAwBE,EAAwB;AAAA,EAC9C,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AACF,GAKG;AAEK,QAAAC,IAAeC,EAA8B,IAAI,GACjDC,IAAaD,EAA8B,IAAI,GAC/CE,IAAaF,EAA8B,IAAI,GAC/CG,IAAkBH,EAA8B,IAAI,GACpDI,IAAeJ,EAA8B,IAAI,GACjDK,IAAgBL,EAA8B,IAAI,GAElDM,IAAiBN,EAA8B,IAAI,GACnDO,IAAeP,EAA8B,IAAI,GACjDQ,IAAeR,EAA8B,IAAI,GACjDS,IAAoBT,EAA8B,IAAI,GACtDU,IAAiBV,EAA8B,IAAI,GACnDW,IAAkBX,EAA8B,IAAI,GAEpDY,IAA+DC;AAAA,IACnE,OAAO;AAAA,MACL,CAACC,EAAmB,MAAM,GAAGf;AAAA,MAC7B,CAACe,EAAmB,IAAI,GAAGb;AAAA,MAC3B,CAACa,EAAmB,IAAI,GAAGZ;AAAA,MAC3B,CAACY,EAAmB,SAAS,GAAGX;AAAA,MAChC,CAACW,EAAmB,MAAM,GAAGV;AAAA,MAC7B,CAACU,EAAmB,OAAO,GAAGT;AAAA,IAAA;AAAA,IAEhC,CAAC;AAAA,EAAA,GAGGU,IAAsEF;AAAA,IAC1E,OAAO;AAAA,MACL,CAACC,EAAmB,MAAM,GAAGR;AAAA,MAC7B,CAACQ,EAAmB,IAAI,GAAGP;AAAA,MAC3B,CAACO,EAAmB,IAAI,GAAGN;AAAA,MAC3B,CAACM,EAAmB,SAAS,GAAGL;AAAA,MAChC,CAACK,EAAmB,MAAM,GAAGJ;AAAA,MAC7B,CAACI,EAAmB,OAAO,GAAGH;AAAA,IAAA;AAAA,IAEhC,CAAC;AAAA,EAAA,GAGG,CAACK,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAA0BC,CAA2B,IAAIF;AAAA,IAC9DJ,EAAmB;AAAA,EAAA;AAGrB,EAAAO,EAAU,MAAM;AACR,UAAAC,IAAkB,OAAO,KAAKP,CAAiB,EAClD,QAAQ,EACR,KAAK,CAAYQ,MAAA;;AACV,YAAAC,IAAcT,EAAkBQ,CAAQ,GACxCE,KAAoBC,IAAAF,KAAA,gBAAAA,EAAa,YAAb,gBAAAE,EAAsB;AAE5C,aAAA,OAAOD,KAAsB,WAAiB,KAGhD5B,KACA4B,KACGF,MAAaT,EAAmB,SAAS7B,IAAgBE;AAAA,IAAA,CAE/D;AAEC,IAAAmC,KAAmBA,MAAoBH,KACzCC,EAA4BE,CAAe,GAGzCA,KAAmB,CAACN,KACtBC,EAAc,EAAI,GAGhB,CAACK,KAAmBN,KACtBC,EAAc,EAAK;AAAA,KAEpB,CAACF,GAAmBI,GAA0BtB,GAAgBmB,CAAU,CAAC;AAE5E,QAAMW,IAAaC;AAAA,IACjB,CAACL,MAAqB;;AACd,YAAAC,IAAcT,EAAkBQ,CAAQ,GACxCE,KAAoBC,IAAAF,KAAA,gBAAAA,EAAa,YAAb,gBAAAE,EAAsB;AAE5C,UAAA,OAAOD,KAAsB,UAAU;AACzC,cAAMI,IACJJ,KACCF,MAAaT,EAAmB,SAAS7B,IAAgBE;AAE5D,QAAAS,EAAeiC,CAAiB;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAACd,GAAmBnB,CAAc;AAAA,EAAA,GAG9BkC,IAAcF,EAAY,MAAM;AAGpC,IAAAhC,EAAe,CAAiB;AAAA,EAAA,GAC/B,CAACA,CAAc,CAAC,GAEbmC,IAAgB,MAKhB;AACJ,UAAMC,IAKD,CAAA;AAEL,kBAAO,KAAKlC,CAAU,EAAE,QAAQ,CAAYyB,MAAA;AACpC,YAAAU,IAAOC,EAAoBX,CAAQ,GACnCY,IAAMvB,EAAWW,CAAQ;AAE/B,MAAIU,KAAQE,KACVH,EAAW,KAAK;AAAA,QACd,IAAIT;AAAA,QACJ,OAAOA;AAAA,QACP,MAAAU;AAAA,QACA,KAAAE;AAAA,MAAA,CACD;AAAA,IACH,CACD,GAEMH;AAAA,EAAA;AAGF,SAAA;AAAA,IACL,mBAAAjB;AAAA,IACA,gBAAgB1B,EAAwBM,CAAkB;AAAA,IAC1D,0BAAAwB;AAAA,IACA,YAAAQ;AAAA,IACA,aAAAG;AAAA,IACA,YAAAd;AAAA,IACA,MAAMe,EAAc;AAAA,IACpB,sBAAsB,OAAO,KAAKjC,CAAU,EAAE;AAAA,EAAA;AAElD;"}

package/dist/features/wins-dashboard/student-badges/student-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"student-badge.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badge.tsx"],"sourcesContent":["import React, { memo, useCallback, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUIContext } from '../../ui/context/context';\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 { getTheme } from '../../ui/theme/get-theme';\nimport { BADGE_TYPE_BADGE_ICON, STUDENT_BADGE_STATUS, STUDENT_BADGE_TYPE } from '../constants';\n\nconst { colors } = getTheme();\n\nconst EXTRA_BADGE_SIZE = 20;\n\nconst NewTag = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: ${colors.ORANGE_3};\n  border-radius: 0px 8px;\n  padding: 2px 8px;\n  z-index: 1;\n`;\n\ninterface StudentBadgeModalData {\n  badges: Array<{\n    animation_url?: string;\n    animationData?: object;\n    category: string;\n    current_count?: number;\n    description?: string;\n    id: string;\n    image_url?: string;\n    name?: string;\n    state?: string;\n    total_count?: number;\n  }>;\n  invalidateRewardsHome?: () => void;\n}\n\nexport interface StudentBadgeProps {\n  animation_url?: string;\n  category: string;\n  current_count?: number;\n  description?: string;\n  id: string;\n  image_url?: string;\n  invalidateRewardsHome?: () => void;\n  is_recent?: boolean;\n  name?: string;\n  openModal?: (modalType: string, data: StudentBadgeModalData) => void;\n  state?: string;\n  total_count?: number;\n  badgeWidth: number;\n  maxBadgeNameLines: number;\n}\n\nconst Wrapper = styled(FlexView)<{ $isEarned: boolean }>`\n  cursor: ${props => (props.$isEarned ? 'pointer' : 'default')};\n`;\nconst StudentBadgeWrapper = styled(FlexView)`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n`;\n\nconst BadgeImageContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeEarned: boolean;\n  $notEarnedMysterBadge: boolean;\n}>`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  background: ${({ $backgroundColor }) => $backgroundColor};\n  opacity: ${({ $badgeEarned }) => ($badgeEarned ? 1 : 0.5)};\n\n  ${({ $notEarnedMysterBadge }) =>\n    $notEarnedMysterBadge &&\n    css`\n      mix-blend-mode: luminosity;\n    `}\n`;\n\nconst BadgeImage = styled.img<{ $mouseEntered?: boolean }>`\n  opacity: ${props => (props.$mouseEntered ? 0 : 1)};\n`;\n\nconst ProgressContainer = styled(FlexView)`\n  position: absolute;\n  bottom: 0;\n`;\n\nconst Background = styled(FlexView)`\n  position: relative;\n  overflow: hidden;\n`;\n\nconst Progress = styled(FlexView)`\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  transition: width 300ms ease-in-out;\n`;\n\nconst BadgeText = styled(Text)<{ $numberOfLines: number }>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ $numberOfLines }) => $numberOfLines};\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nconst StudentBadge: React.FC<StudentBadgeProps> = props => {\n  const {\n    is_recent: isRecent,\n    badgeWidth,\n    animation_url: animationUrl,\n    maxBadgeNameLines = 1,\n    category,\n    current_count: currentCount,\n    description,\n    image_url: imageUrl,\n    id: studentBadgeId,\n    invalidateRewardsHome,\n    name,\n    openModal,\n    state,\n    total_count: totalCount,\n  } = props;\n  const [mouseEntered, setMouseEntered] = useState(false);\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const badgeEarned = state !== STUDENT_BADGE_STATUS.UNASSIGNED;\n  const badgeProgress = currentCount && totalCount ? (currentCount / totalCount) * 100 : 0;\n  const showProgress = category !== STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned && badgeProgress > 0;\n  const badgeImage = badgeEarned\n    ? imageUrl || BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON]\n    : BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON];\n  const notEarnedMysterBadge = category === STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned;\n  const badgeBackgroundColor =\n    category === STUDENT_BADGE_TYPE.MYSTERY ? colors.GREY_1 : colors.WHITE;\n  const { badgeName, badgeDescription } = notEarnedMysterBadge\n    ? { badgeName: '????', badgeDescription: '----------------' }\n    : { badgeName: name || '', badgeDescription: description || '' };\n\n  const onBadgeMouseEnter = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(true);\n  }, [badgeEarned]);\n\n  const onBadgeMouseLeave = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(false);\n  }, [badgeEarned]);\n\n  const onBadgeClick = useCallback(() => {\n    if (!badgeEarned || !openModal) {\n      return;\n    }\n\n    if (badgeEarned && animationUrl) {\n      fetch(animationUrl)\n        .then(response => response.json())\n        .then(data => {\n          openModal('student-badges', {\n            badges: [\n              {\n                ...props,\n                animationData: data || null,\n              },\n            ],\n            invalidateRewardsHome,\n          });\n\n          trackEvent('student_badge_clicked', {\n            studentBadgeId,\n            category,\n            badgeEarned,\n          });\n        })\n        .catch(error => {\n          trackEvent('student_badge_animation_load_failed', {\n            studentBadgeId,\n            animationUrl,\n            error: error.message,\n          });\n        });\n    }\n  }, [\n    badgeEarned,\n    openModal,\n    animationUrl,\n    props,\n    studentBadgeId,\n    category,\n    trackEvent,\n    invalidateRewardsHome,\n  ]);\n\n  return (\n    <Wrapper\n      onClick={onBadgeClick}\n      $width={badgeWidth}\n      $isEarned={badgeEarned}\n      key={studentBadgeId}\n    >\n      <StudentBadgeWrapper>\n        <BadgeImageContainer\n          $backgroundColor={badgeBackgroundColor}\n          $badgeEarned={badgeEarned}\n          $notEarnedMysterBadge={notEarnedMysterBadge}\n          onMouseEnter={onBadgeMouseEnter}\n          onMouseLeave={onBadgeMouseLeave}\n        >\n          {isRecent && (\n            <NewTag>\n              <Text $renderAs=\"cta2\">NEW</Text>\n            </NewTag>\n          )}\n          {badgeEarned ? (\n            <BadgeImage\n              $mouseEntered={mouseEntered}\n              src={imageUrl}\n              alt=\"badge-placeholder\"\n              width={badgeWidth}\n              height={badgeWidth}\n            />\n          ) : (\n            <img src={badgeImage} alt=\"badge-placeholder\" width={badgeWidth} height={badgeWidth} />\n          )}\n          {animationUrl && badgeEarned && (\n            <FlexView\n              $width={badgeWidth + EXTRA_BADGE_SIZE}\n              $height={badgeWidth + EXTRA_BADGE_SIZE}\n              $position=\"absolute\"\n            >\n              <LottieAnimation\n                src={animationUrl}\n                width={badgeWidth}\n                height={badgeWidth}\n                settings={{ autoplay: mouseEntered, loop: true }}\n                animateOnIntersect={false}\n              />\n            </FlexView>\n          )}\n        </BadgeImageContainer>\n        {showProgress && (\n          <ProgressContainer $width={badgeWidth}>\n            <Background $height={4} $borderRadius={2} $width={'100%'} $background=\"WHITE\">\n              <Progress $width={`${badgeProgress}%`} $borderRadius={2} $background=\"BLACK\" />\n            </Background>\n          </ProgressContainer>\n        )}\n      </StudentBadgeWrapper>\n      <Separator height={8} />\n      <BadgeText $renderAs=\"cta2\" $numberOfLines={maxBadgeNameLines}>\n        {badgeName}\n      </BadgeText>\n      <BadgeText $renderAs=\"body3\" $numberOfLines={maxBadgeNameLines + 1}>\n        {badgeDescription}\n      </BadgeText>\n    </Wrapper>\n  );\n};\n\nexport default memo(StudentBadge);\n"],"names":["colors","getTheme","EXTRA_BADGE_SIZE","NewTag","styled","FlexView","Wrapper","props","StudentBadgeWrapper","BadgeImageContainer","$backgroundColor","$badgeEarned","$notEarnedMysterBadge","css","BadgeImage","ProgressContainer","Background","Progress","BadgeText","Text","$numberOfLines","StudentBadge","isRecent","badgeWidth","animationUrl","maxBadgeNameLines","category","currentCount","description","imageUrl","studentBadgeId","invalidateRewardsHome","name","openModal","state","totalCount","mouseEntered","setMouseEntered","useState","trackEvent","useUIContext","badgeEarned","STUDENT_BADGE_STATUS","badgeProgress","showProgress","STUDENT_BADGE_TYPE","badgeImage","BADGE_TYPE_BADGE_ICON","notEarnedMysterBadge","badgeBackgroundColor","badgeName","badgeDescription","onBadgeMouseEnter","useCallback","onBadgeMouseLeave","onBadgeClick","response","data","error","jsxs","jsx","LottieAnimation","Separator","StudentBadge$1","memo"],"mappings":";;;;;;;;;;AAWA,MAAM,EAAE,QAAAA,EAAO,IAAIC,KAEbC,IAAmB,IAEnBC,IAASC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,gBAIdL,EAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,GAuCzBM,IAAUF,EAAOC,CAAQ;AAAA,YACnB,CAAUE,MAAAA,EAAM,YAAY,YAAY,SAAU;AAAA,GAExDC,IAAsBJ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMrCI,IAAsBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,gBAQ3B,CAAC,EAAE,kBAAAK,EAAiB,MAAMA,CAAgB;AAAA,aAC7C,CAAC,EAAE,cAAAC,EAAA,MAAoBA,IAAe,IAAI,GAAI;AAAA;AAAA,IAEvD,CAAC,EAAE,uBAAAC,QACHA,KACAC;AAAA;AAAA,KAEC;AAAA,GAGCC,IAAaV,EAAO;AAAA,aACb,CAAUG,MAAAA,EAAM,gBAAgB,IAAI,CAAE;AAAA,GAG7CQ,KAAoBX,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKnCW,KAAaZ,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK5BY,KAAWb,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ1Ba,IAAYd,EAAOe,CAAI;AAAA;AAAA,wBAEL,CAAC,EAAE,gBAAAC,EAAe,MAAMA,CAAc;AAAA;AAAA;AAAA,GAKxDC,KAA4C,CAASd,MAAA;AACnD,QAAA;AAAA,IACJ,WAAWe;AAAA,IACX,YAAAC;AAAA,IACA,eAAeC;AAAA,IACf,mBAAAC,IAAoB;AAAA,IACpB,UAAAC;AAAA,IACA,eAAeC;AAAA,IACf,aAAAC;AAAA,IACA,WAAWC;AAAA,IACX,IAAIC;AAAA,IACJ,uBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAaC;AAAA,EACX,IAAA5B,GACE,CAAC6B,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhD,EAAE,SAASC,EAAW,IAAIC,EAAa,GAEvCC,IAAcP,MAAUQ,EAAqB,YAC7CC,IAAgBhB,KAAgBQ,IAAcR,IAAeQ,IAAc,MAAM,GACjFS,IAAelB,MAAamB,EAAmB,WAAW,CAACJ,KAAeE,IAAgB,GAC1FG,IAAaL,IACfZ,KAAYkB,EAAsBrB,CAA8C,IAChFqB,EAAsBrB,CAA8C,GAClEsB,IAAuBtB,MAAamB,EAAmB,WAAW,CAACJ,GACnEQ,IACJvB,MAAamB,EAAmB,UAAU7C,EAAO,SAASA,EAAO,OAC7D,EAAE,WAAAkD,GAAW,kBAAAC,EAAqB,IAAAH,IACpC,EAAE,WAAW,QAAQ,kBAAkB,mBAAA,IACvC,EAAE,WAAWhB,KAAQ,IAAI,kBAAkBJ,KAAe,MAExDwB,IAAoBC,EAAY,MAAM;AAC1C,IAAKZ,KAGLJ,EAAgB,EAAI;AAAA,EAAA,GACnB,CAACI,CAAW,CAAC,GAEVa,IAAoBD,EAAY,MAAM;AAC1C,IAAKZ,KAGLJ,EAAgB,EAAK;AAAA,EAAA,GACpB,CAACI,CAAW,CAAC,GAEVc,IAAeF,EAAY,MAAM;AACjC,IAAA,CAACZ,KAAe,CAACR,KAIjBQ,KAAejB,KACX,MAAAA,CAAY,EACf,KAAK,CAAAgC,MAAYA,EAAS,MAAM,EAChC,KAAK,CAAQC,MAAA;AACZ,MAAAxB,EAAU,kBAAkB;AAAA,QAC1B,QAAQ;AAAA,UACN;AAAA,YACE,GAAG1B;AAAA,YACH,eAAekD,KAAQ;AAAA,UACzB;AAAA,QACF;AAAA,QACA,uBAAA1B;AAAA,MAAA,CACD,GAEDQ,EAAW,yBAAyB;AAAA,QAClC,gBAAAT;AAAA,QACA,UAAAJ;AAAA,QACA,aAAAe;AAAA,MAAA,CACD;AAAA,IAAA,CACF,EACA,MAAM,CAASiB,MAAA;AACd,MAAAnB,EAAW,uCAAuC;AAAA,QAChD,gBAAAT;AAAA,QACA,cAAAN;AAAA,QACA,OAAOkC,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,CACF;AAAA,EACL,GACC;AAAA,IACDjB;AAAA,IACAR;AAAA,IACAT;AAAA,IACAjB;AAAA,IACAuB;AAAA,IACAJ;AAAA,IACAa;AAAA,IACAR;AAAA,EAAA,CACD;AAGC,SAAA,gBAAA4B;AAAA,IAACrD;AAAA,IAAA;AAAA,MACC,SAASiD;AAAA,MACT,QAAQhC;AAAA,MACR,WAAWkB;AAAA,MAGX,UAAA;AAAA,QAAA,gBAAAkB,EAACnD,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAmD;AAAA,YAAClD;AAAA,YAAA;AAAA,cACC,kBAAkBwC;AAAA,cAClB,cAAcR;AAAA,cACd,uBAAuBO;AAAA,cACvB,cAAcI;AAAA,cACd,cAAcE;AAAA,cAEb,UAAA;AAAA,gBAAAhC,uBACEnB,GACC,EAAA,UAAA,gBAAAyD,EAACzC,KAAK,WAAU,QAAO,iBAAG,EAC5B,CAAA;AAAA,gBAEDsB,IACC,gBAAAmB;AAAA,kBAAC9C;AAAA,kBAAA;AAAA,oBACC,eAAesB;AAAA,oBACf,KAAKP;AAAA,oBACL,KAAI;AAAA,oBACJ,OAAON;AAAA,oBACP,QAAQA;AAAA,kBAAA;AAAA,gBACV,IAEC,gBAAAqC,EAAA,OAAA,EAAI,KAAKd,GAAY,KAAI,qBAAoB,OAAOvB,GAAY,QAAQA,EAAY,CAAA;AAAA,gBAEtFC,KAAgBiB,KACf,gBAAAmB;AAAA,kBAACvD;AAAA,kBAAA;AAAA,oBACC,QAAQkB,IAAarB;AAAA,oBACrB,SAASqB,IAAarB;AAAA,oBACtB,WAAU;AAAA,oBAEV,UAAA,gBAAA0D;AAAA,sBAACC;AAAA,sBAAA;AAAA,wBACC,KAAKrC;AAAA,wBACL,OAAOD;AAAA,wBACP,QAAQA;AAAA,wBACR,UAAU,EAAE,UAAUa,GAAc,MAAM,GAAK;AAAA,wBAC/C,oBAAoB;AAAA,sBAAA;AAAA,oBACtB;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,UACCQ,KACE,gBAAAgB,EAAA7C,IAAA,EAAkB,QAAQQ,GACzB,UAAC,gBAAAqC,EAAA5C,IAAA,EAAW,SAAS,GAAG,eAAe,GAAG,QAAQ,QAAQ,aAAY,SACpE,UAAA,gBAAA4C,EAAC3C,IAAS,EAAA,QAAQ,GAAG0B,CAAa,KAAK,eAAe,GAAG,aAAY,QAAQ,CAAA,EAC/E,CAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAiB,EAACE,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,0BACrB5C,GAAU,EAAA,WAAU,QAAO,gBAAgBO,GACzC,UACHyB,GAAA;AAAA,0BACChC,GAAU,EAAA,WAAU,SAAQ,gBAAgBO,IAAoB,GAC9D,UACH0B,GAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAxDKrB;AAAA,EAAA;AA2DX,GAEeiC,KAAAC,EAAK3C,EAAY;"}
+{"version":3,"file":"student-badge.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badge.tsx"],"sourcesContent":["import { memo, useCallback, useState, type FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUIContext } from '../../ui/context/context';\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 { getTheme } from '../../ui/theme/get-theme';\nimport { BADGE_TYPE_BADGE_ICON, STUDENT_BADGE_STATUS, STUDENT_BADGE_TYPE } from '../constants';\n\nconst { colors } = getTheme();\n\nconst EXTRA_BADGE_SIZE = 20;\n\nconst NewTag = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: ${colors.ORANGE_3};\n  border-radius: 0px 8px;\n  padding: 2px 8px;\n  z-index: 1;\n`;\n\ninterface StudentBadgeModalData {\n  badges: Array<{\n    animation_url?: string;\n    animationData?: object;\n    category: string;\n    current_count?: number;\n    description?: string;\n    id: string;\n    image_url?: string;\n    name?: string;\n    state?: string;\n    total_count?: number;\n  }>;\n  invalidateRewardsHome?: () => void;\n}\n\nexport interface StudentBadgeProps {\n  animation_url?: string;\n  category: string;\n  current_count?: number;\n  description?: string;\n  id: string;\n  image_url?: string;\n  invalidateRewardsHome?: () => void;\n  is_recent?: boolean;\n  name?: string;\n  openModal?: (modalType: string, data: StudentBadgeModalData) => void;\n  state?: string;\n  total_count?: number;\n  badgeWidth: number;\n  maxBadgeNameLines: number;\n}\n\nconst Wrapper = styled(FlexView)<{ $isEarned: boolean }>`\n  cursor: ${props => (props.$isEarned ? 'pointer' : 'default')};\n`;\nconst StudentBadgeWrapper = styled(FlexView)`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n`;\n\nconst BadgeImageContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeEarned: boolean;\n  $notEarnedMysterBadge: boolean;\n}>`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  background: ${({ $backgroundColor }) => $backgroundColor};\n  opacity: ${({ $badgeEarned }) => ($badgeEarned ? 1 : 0.5)};\n\n  ${({ $notEarnedMysterBadge }) =>\n    $notEarnedMysterBadge &&\n    css`\n      mix-blend-mode: luminosity;\n    `}\n`;\n\nconst BadgeImage = styled.img<{ $mouseEntered?: boolean }>`\n  opacity: ${props => (props.$mouseEntered ? 0 : 1)};\n`;\n\nconst ProgressContainer = styled(FlexView)`\n  position: absolute;\n  bottom: 0;\n`;\n\nconst Background = styled(FlexView)`\n  position: relative;\n  overflow: hidden;\n`;\n\nconst Progress = styled(FlexView)`\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  transition: width 300ms ease-in-out;\n`;\n\nconst BadgeText = styled(Text)<{ $numberOfLines: number }>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ $numberOfLines }) => $numberOfLines};\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nconst StudentBadge: FC<StudentBadgeProps> = props => {\n  const {\n    is_recent: isRecent,\n    badgeWidth,\n    animation_url: animationUrl,\n    maxBadgeNameLines = 1,\n    category,\n    current_count: currentCount,\n    description,\n    image_url: imageUrl,\n    id: studentBadgeId,\n    invalidateRewardsHome,\n    name,\n    openModal,\n    state,\n    total_count: totalCount,\n  } = props;\n  const [mouseEntered, setMouseEntered] = useState(false);\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const badgeEarned = state !== STUDENT_BADGE_STATUS.UNASSIGNED;\n  const badgeProgress = currentCount && totalCount ? (currentCount / totalCount) * 100 : 0;\n  const showProgress = category !== STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned && badgeProgress > 0;\n  const badgeImage = badgeEarned\n    ? imageUrl || BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON]\n    : BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON];\n  const notEarnedMysterBadge = category === STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned;\n  const badgeBackgroundColor =\n    category === STUDENT_BADGE_TYPE.MYSTERY ? colors.GREY_1 : colors.WHITE;\n  const { badgeName, badgeDescription } = notEarnedMysterBadge\n    ? { badgeName: '????', badgeDescription: '----------------' }\n    : { badgeName: name || '', badgeDescription: description || '' };\n\n  const onBadgeMouseEnter = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(true);\n  }, [badgeEarned]);\n\n  const onBadgeMouseLeave = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(false);\n  }, [badgeEarned]);\n\n  const onBadgeClick = useCallback(() => {\n    if (!badgeEarned || !openModal) {\n      return;\n    }\n\n    if (badgeEarned && animationUrl) {\n      fetch(animationUrl)\n        .then(response => response.json())\n        .then(data => {\n          openModal('student-badges', {\n            badges: [\n              {\n                ...props,\n                animationData: data || null,\n              },\n            ],\n            invalidateRewardsHome,\n          });\n\n          trackEvent('student_badge_clicked', {\n            studentBadgeId,\n            category,\n            badgeEarned,\n          });\n        })\n        .catch(error => {\n          trackEvent('student_badge_animation_load_failed', {\n            studentBadgeId,\n            animationUrl,\n            error: error.message,\n          });\n        });\n    }\n  }, [\n    badgeEarned,\n    openModal,\n    animationUrl,\n    props,\n    studentBadgeId,\n    category,\n    trackEvent,\n    invalidateRewardsHome,\n  ]);\n\n  return (\n    <Wrapper\n      onClick={onBadgeClick}\n      $width={badgeWidth}\n      $isEarned={badgeEarned}\n      key={studentBadgeId}\n    >\n      <StudentBadgeWrapper>\n        <BadgeImageContainer\n          $backgroundColor={badgeBackgroundColor}\n          $badgeEarned={badgeEarned}\n          $notEarnedMysterBadge={notEarnedMysterBadge}\n          onMouseEnter={onBadgeMouseEnter}\n          onMouseLeave={onBadgeMouseLeave}\n        >\n          {isRecent && (\n            <NewTag>\n              <Text $renderAs=\"cta2\">NEW</Text>\n            </NewTag>\n          )}\n          {badgeEarned ? (\n            <BadgeImage\n              $mouseEntered={mouseEntered}\n              src={imageUrl}\n              alt=\"badge-placeholder\"\n              width={badgeWidth}\n              height={badgeWidth}\n            />\n          ) : (\n            <img src={badgeImage} alt=\"badge-placeholder\" width={badgeWidth} height={badgeWidth} />\n          )}\n          {animationUrl && badgeEarned && (\n            <FlexView\n              $width={badgeWidth + EXTRA_BADGE_SIZE}\n              $height={badgeWidth + EXTRA_BADGE_SIZE}\n              $position=\"absolute\"\n            >\n              <LottieAnimation\n                src={animationUrl}\n                width={badgeWidth}\n                height={badgeWidth}\n                settings={{ autoplay: mouseEntered, loop: true }}\n                animateOnIntersect={false}\n              />\n            </FlexView>\n          )}\n        </BadgeImageContainer>\n        {showProgress && (\n          <ProgressContainer $width={badgeWidth}>\n            <Background $height={4} $borderRadius={2} $width={'100%'} $background=\"WHITE\">\n              <Progress $width={`${badgeProgress}%`} $borderRadius={2} $background=\"BLACK\" />\n            </Background>\n          </ProgressContainer>\n        )}\n      </StudentBadgeWrapper>\n      <Separator height={8} />\n      <BadgeText $renderAs=\"cta2\" $numberOfLines={maxBadgeNameLines}>\n        {badgeName}\n      </BadgeText>\n      <BadgeText $renderAs=\"body3\" $numberOfLines={maxBadgeNameLines + 1}>\n        {badgeDescription}\n      </BadgeText>\n    </Wrapper>\n  );\n};\n\nexport default memo(StudentBadge);\n"],"names":["colors","getTheme","EXTRA_BADGE_SIZE","NewTag","styled","FlexView","Wrapper","props","StudentBadgeWrapper","BadgeImageContainer","$backgroundColor","$badgeEarned","$notEarnedMysterBadge","css","BadgeImage","ProgressContainer","Background","Progress","BadgeText","Text","$numberOfLines","StudentBadge","isRecent","badgeWidth","animationUrl","maxBadgeNameLines","category","currentCount","description","imageUrl","studentBadgeId","invalidateRewardsHome","name","openModal","state","totalCount","mouseEntered","setMouseEntered","useState","trackEvent","useUIContext","badgeEarned","STUDENT_BADGE_STATUS","badgeProgress","showProgress","STUDENT_BADGE_TYPE","badgeImage","BADGE_TYPE_BADGE_ICON","notEarnedMysterBadge","badgeBackgroundColor","badgeName","badgeDescription","onBadgeMouseEnter","useCallback","onBadgeMouseLeave","onBadgeClick","response","data","error","jsxs","jsx","LottieAnimation","Separator","StudentBadge$1","memo"],"mappings":"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"}

package/dist/features/wins-dashboard/student-badges/student-badges-lists.js.map

@@ -1 +1 @@
-{"version":3,"file":"student-badges-lists.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badges-lists.tsx"],"sourcesContent":["import type { Badge } from './mock/badges-list-mock';\nimport type { RuleSet } from 'styled-components';\n\nimport { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport UpIcon from '../../../assets/line-icons/icons/up';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { BADGE_TYPE_BACKGROUND, BADGE_TYPE_TAB_ICON } from '../constants';\nimport AnimatedTabBar from './animated-tabbar';\nimport useStudentBadgeListHook from './hooks/use-student-badge-list-hook';\nimport StudentBadge from './student-badge';\n\nconst HEADER_HEIGHT = 64;\nconst { innerHeight: windowHeight } = window;\n\nconst StudentBadgesContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeCategoryGap: number;\n  $isLastCategory: boolean;\n}>`\n  width: 100%;\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\n  padding: ${({ $badgeCategoryGap }) => $badgeCategoryGap}px 0;\n  align-items: center;\n  ${({ $isLastCategory }) =>\n    $isLastCategory &&\n    css`\n      min-height: ${windowHeight - HEADER_HEIGHT}px;\n    `}\n`;\n\nconst TabBarContainer = styled(FlexView)<{\n  $topOffset: number;\n  $width: number;\n  $visible: boolean;\n}>`\n  position: fixed;\n  top: ${({ $topOffset }) => $topOffset}px;\n  width: ${({ $width }) => $width}px;\n  z-index: 1;\n  transition: transform 200ms linear;\n  transform: translateY(${({ $visible }) => ($visible ? HEADER_HEIGHT : 0)}px);\n`;\n\nconst ScrollTopButton = styled(FlexView)<{ $showTabBar: boolean }>`\n  position: fixed;\n  top: ${window.innerHeight - 100}px;\n  right: 40px;\n  width: 48px;\n  height: 48px;\n  border: 1px solid black;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 24px;\n  cursor: pointer;\n  opacity: ${({ $showTabBar }) => ($showTabBar ? 1 : 0)};\n  transition: all 100ms linear;\n`;\n\nconst CustomRow = styled.div<{ $containerStyle: RuleSet<object> }>`\n  display: grid;\n  grid-row-gap: 16px;\n  ${({ $containerStyle }) => $containerStyle};\n`;\n\ninterface StudentBadgeListProps {\n  invalidateRewardsHome: () => void;\n  openModal: (modal: string, props?: unknown) => void;\n  topOffset?: number;\n  userBadges: Record<string, Badge[]>;\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n}\n\nconst StudentBadgeList = ({\n  invalidateRewardsHome,\n  openModal,\n  topOffset = 0,\n  userBadges,\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n}: StudentBadgeListProps) => {\n  const {\n    badgeCategoryRefs,\n    categoryConfig,\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs,\n    totalBadgeCategories,\n  } = useStudentBadgeListHook({\n    currentScreenWidth,\n    handleScrollTo,\n    scrollPosition,\n    userBadges,\n  });\n\n  const { badgeCategoryGap, badgeCategoryWidth, containerStyle, badgeWidth, maxBadgeNameLines } =\n    categoryConfig;\n\n  return (\n    <FlexView $alignItems=\"center\">\n      <TabBarContainer\n        $flexDirection=\"row\"\n        $background=\"WHITE\"\n        $visible={showTabBar}\n        $justifyContent=\"center\"\n        $width={currentScreenWidth}\n        $topOffset={topOffset}\n      >\n        <FlexView $width={badgeCategoryWidth}>\n          <AnimatedTabBar\n            tabs={tabs}\n            selectedTabId={currentSelectedBadgeType}\n            onTabClick={onTabClick}\n            currentScreenWidth={currentScreenWidth}\n          />\n        </FlexView>\n      </TabBarContainer>\n      <FlexView $flexDirection=\"row\" $gap={16} $width={badgeCategoryWidth}>\n        <Text $renderAs=\"h5\">BADGES</Text>\n      </FlexView>\n      {Object.keys(userBadges).map((badge, index) => {\n        const BadgeCategoryIcon = BADGE_TYPE_TAB_ICON[badge];\n\n        return (\n          <StudentBadgesContainer\n            key={badge}\n            $backgroundColor={BADGE_TYPE_BACKGROUND[badge] || '#FFFFFF'}\n            $badgeCategoryGap={badgeCategoryGap}\n            $isLastCategory={index === totalBadgeCategories - 1}\n            ref={badgeCategoryRefs[badge]}\n          >\n            <FlexView $width={badgeCategoryWidth}>\n              <FlexView $flexDirection=\"row\" $flexGap={8} $alignItems=\"center\">\n                {typeof BadgeCategoryIcon === 'function' ? <BadgeCategoryIcon /> : null}\n                <Text $renderAs=\"eyebrow1\">{badge}</Text>\n              </FlexView>\n              <CustomRow $containerStyle={containerStyle}>\n                {(userBadges[badge] || []).map(badgeProps => {\n                  const { id: studentBadgeId } = badgeProps || {};\n\n                  return (\n                    <StudentBadge\n                      key={studentBadgeId}\n                      {...badgeProps}\n                      category={badge}\n                      openModal={openModal}\n                      badgeWidth={badgeWidth}\n                      maxBadgeNameLines={maxBadgeNameLines}\n                      invalidateRewardsHome={invalidateRewardsHome}\n                    />\n                  );\n                })}\n              </CustomRow>\n            </FlexView>\n          </StudentBadgesContainer>\n        );\n      })}\n      <ScrollTopButton\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $showTabBar={showTabBar}\n        onClick={scrollToTop}\n      >\n        <UpIcon />\n      </ScrollTopButton>\n    </FlexView>\n  );\n};\n\nexport default memo(StudentBadgeList);\n"],"names":["HEADER_HEIGHT","windowHeight","StudentBadgesContainer","styled","FlexView","$backgroundColor","$badgeCategoryGap","$isLastCategory","css","TabBarContainer","$topOffset","$width","$visible","ScrollTopButton","theme","$showTabBar","CustomRow","$containerStyle","StudentBadgeList","invalidateRewardsHome","openModal","topOffset","userBadges","currentScreenWidth","handleScrollTo","scrollPosition","badgeCategoryRefs","categoryConfig","currentSelectedBadgeType","onTabClick","scrollToTop","showTabBar","tabs","totalBadgeCategories","useStudentBadgeListHook","badgeCategoryGap","badgeCategoryWidth","containerStyle","badgeWidth","maxBadgeNameLines","jsxs","jsx","AnimatedTabBar","Text","badge","index","BadgeCategoryIcon","BADGE_TYPE_TAB_ICON","BADGE_TYPE_BACKGROUND","badgeProps","studentBadgeId","StudentBadge","UpIcon","studentBadgesLists","memo"],"mappings":"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"}
+{"version":3,"file":"student-badges-lists.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badges-lists.tsx"],"sourcesContent":["import { memo } from 'react';\nimport type { RuleSet } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nimport UpIcon from '../../../assets/line-icons/icons/up';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { BADGE_TYPE_BACKGROUND, BADGE_TYPE_TAB_ICON } from '../constants';\nimport AnimatedTabBar from './animated-tabbar';\nimport useStudentBadgeListHook from './hooks/use-student-badge-list-hook';\nimport type { Badge } from './mock/badges-list-mock';\nimport StudentBadge from './student-badge';\n\nconst HEADER_HEIGHT = 64;\nconst { innerHeight: windowHeight } = window;\n\nconst StudentBadgesContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeCategoryGap: number;\n  $isLastCategory: boolean;\n}>`\n  width: 100%;\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\n  padding: ${({ $badgeCategoryGap }) => $badgeCategoryGap}px 0;\n  align-items: center;\n  ${({ $isLastCategory }) =>\n    $isLastCategory &&\n    css`\n      min-height: ${windowHeight - HEADER_HEIGHT}px;\n    `}\n`;\n\nconst TabBarContainer = styled(FlexView)<{\n  $topOffset: number;\n  $width: number;\n  $visible: boolean;\n}>`\n  position: fixed;\n  top: ${({ $topOffset }) => $topOffset}px;\n  width: ${({ $width }) => $width}px;\n  z-index: 1;\n  transition: transform 200ms linear;\n  transform: translateY(${({ $visible }) => ($visible ? HEADER_HEIGHT : 0)}px);\n`;\n\nconst ScrollTopButton = styled(FlexView)<{ $showTabBar: boolean }>`\n  position: fixed;\n  top: ${window.innerHeight - 100}px;\n  right: 40px;\n  width: 48px;\n  height: 48px;\n  border: 1px solid black;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 24px;\n  cursor: pointer;\n  opacity: ${({ $showTabBar }) => ($showTabBar ? 1 : 0)};\n  transition: all 100ms linear;\n`;\n\nconst CustomRow = styled.div<{ $containerStyle: RuleSet<object> }>`\n  display: grid;\n  grid-row-gap: 16px;\n  ${({ $containerStyle }) => $containerStyle};\n`;\n\ninterface StudentBadgeListProps {\n  invalidateRewardsHome: () => void;\n  openModal: (modal: string, props?: unknown) => void;\n  topOffset?: number;\n  userBadges: Record<string, Badge[]>;\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n}\n\nconst StudentBadgeList = ({\n  invalidateRewardsHome,\n  openModal,\n  topOffset = 0,\n  userBadges,\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n}: StudentBadgeListProps) => {\n  const {\n    badgeCategoryRefs,\n    categoryConfig,\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs,\n    totalBadgeCategories,\n  } = useStudentBadgeListHook({\n    currentScreenWidth,\n    handleScrollTo,\n    scrollPosition,\n    userBadges,\n  });\n\n  const { badgeCategoryGap, badgeCategoryWidth, containerStyle, badgeWidth, maxBadgeNameLines } =\n    categoryConfig;\n\n  return (\n    <FlexView $alignItems=\"center\">\n      <TabBarContainer\n        $flexDirection=\"row\"\n        $background=\"WHITE\"\n        $visible={showTabBar}\n        $justifyContent=\"center\"\n        $width={currentScreenWidth}\n        $topOffset={topOffset}\n      >\n        <FlexView $width={badgeCategoryWidth}>\n          <AnimatedTabBar\n            tabs={tabs}\n            selectedTabId={currentSelectedBadgeType}\n            onTabClick={onTabClick}\n            currentScreenWidth={currentScreenWidth}\n          />\n        </FlexView>\n      </TabBarContainer>\n      <FlexView $flexDirection=\"row\" $gap={16} $width={badgeCategoryWidth}>\n        <Text $renderAs=\"h5\">BADGES</Text>\n      </FlexView>\n      {Object.keys(userBadges).map((badge, index) => {\n        const BadgeCategoryIcon = BADGE_TYPE_TAB_ICON[badge];\n\n        return (\n          <StudentBadgesContainer\n            key={badge}\n            $backgroundColor={BADGE_TYPE_BACKGROUND[badge] || '#FFFFFF'}\n            $badgeCategoryGap={badgeCategoryGap}\n            $isLastCategory={index === totalBadgeCategories - 1}\n            ref={badgeCategoryRefs[badge]}\n          >\n            <FlexView $width={badgeCategoryWidth}>\n              <FlexView $flexDirection=\"row\" $flexGap={8} $alignItems=\"center\">\n                {typeof BadgeCategoryIcon === 'function' ? <BadgeCategoryIcon /> : null}\n                <Text $renderAs=\"eyebrow1\">{badge}</Text>\n              </FlexView>\n              <CustomRow $containerStyle={containerStyle}>\n                {(userBadges[badge] || []).map(badgeProps => {\n                  const { id: studentBadgeId } = badgeProps || {};\n\n                  return (\n                    <StudentBadge\n                      key={studentBadgeId}\n                      {...badgeProps}\n                      category={badge}\n                      openModal={openModal}\n                      badgeWidth={badgeWidth}\n                      maxBadgeNameLines={maxBadgeNameLines}\n                      invalidateRewardsHome={invalidateRewardsHome}\n                    />\n                  );\n                })}\n              </CustomRow>\n            </FlexView>\n          </StudentBadgesContainer>\n        );\n      })}\n      <ScrollTopButton\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $showTabBar={showTabBar}\n        onClick={scrollToTop}\n      >\n        <UpIcon />\n      </ScrollTopButton>\n    </FlexView>\n  );\n};\n\nexport default memo(StudentBadgeList);\n"],"names":["HEADER_HEIGHT","windowHeight","StudentBadgesContainer","styled","FlexView","$backgroundColor","$badgeCategoryGap","$isLastCategory","css","TabBarContainer","$topOffset","$width","$visible","ScrollTopButton","theme","$showTabBar","CustomRow","$containerStyle","StudentBadgeList","invalidateRewardsHome","openModal","topOffset","userBadges","currentScreenWidth","handleScrollTo","scrollPosition","badgeCategoryRefs","categoryConfig","currentSelectedBadgeType","onTabClick","scrollToTop","showTabBar","tabs","totalBadgeCategories","useStudentBadgeListHook","badgeCategoryGap","badgeCategoryWidth","containerStyle","badgeWidth","maxBadgeNameLines","jsxs","jsx","AnimatedTabBar","Text","badge","index","BadgeCategoryIcon","BADGE_TYPE_TAB_ICON","BADGE_TYPE_BACKGROUND","badgeProps","studentBadgeId","StudentBadge","UpIcon","studentBadgesLists","memo"],"mappings":"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"}

package/dist/features/worksheet/learnosity-preloader/learnosity-preloader-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"learnosity-preloader-context.js","sources":["../../../../src/features/worksheet/learnosity-preloader/learnosity-preloader-context.ts"],"sourcesContent":["import type { TLearnosityPreloaderContextValue } from './learnosity-preloader-types';\n\nimport { createContext } from 'react';\n\nconst LearnosityPreloaderContext = createContext<TLearnosityPreloaderContextValue>({\n  scriptStatus: 'loading',\n  loadedAPIURL: undefined,\n  defaultAPIURL: '',\n  downloadScript: () => null,\n});\n\nexport default LearnosityPreloaderContext;\n"],"names":["LearnosityPreloaderContext","createContext"],"mappings":";AAIA,MAAMA,IAA6BC,EAAgD;AAAA,EACjF,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB,MAAM;AACxB,CAAC;"}
+{"version":3,"file":"learnosity-preloader-context.js","sources":["../../../../src/features/worksheet/learnosity-preloader/learnosity-preloader-context.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { TLearnosityPreloaderContextValue } from './learnosity-preloader-types';\n\nconst LearnosityPreloaderContext = createContext<TLearnosityPreloaderContextValue>({\n  scriptStatus: 'loading',\n  loadedAPIURL: undefined,\n  defaultAPIURL: '',\n  downloadScript: () => null,\n});\n\nexport default LearnosityPreloaderContext;\n"],"names":["LearnosityPreloaderContext","createContext"],"mappings":";AAIA,MAAMA,IAA6BC,EAAgD;AAAA,EACjF,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB,MAAM;AACxB,CAAC;"}