@cuemath/leap 3.2.22 → 3.2.23-as1

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-student-badge-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-hook.ts"],"sourcesContent":["import lottie from 'lottie-web';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\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\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\ninterface UseStudentBadgeHookProps {\n  animation_url?: string;\n  category: string;\n  current_count?: number;\n  description?: string;\n  image_url?: string;\n  id: 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}\n\nexport default function useStudentBadgeHook(props: UseStudentBadgeHookProps) {\n  const {\n    animation_url: animationUrl,\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\n  const { onEvent: trackEvent } = useUIContext();\n  const imageRef = useRef<HTMLImageElement | null>(null);\n  const studentBadgeRef = useRef<HTMLDivElement | null>(null);\n  const [lottieAnimationData, setLottieAnimationData] = useState<string | null>(null);\n  const [lottieLoadingError, setLottieLoadingError] = useState(false);\n  const [mouseEntered, setMouseEntered] = useState(false);\n\n  const badgeEarned = state !== STUDENT_BADGE_STATUS.UNASSIGNED;\n  const [showLoader, setShowLoader] = useState(badgeEarned);\n  const badgeProgress = currentCount && totalCount ? (currentCount / totalCount) * 100 : 0;\n  const showProgress = category !== STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned && badgeProgress > 0;\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const [studentBadgeEntry, setStudentBadgeEntry] = useState<\n    IntersectionObserverEntry | undefined\n  >();\n\n  useEffect(() => {\n    if (!studentBadgeRef.current) return;\n\n    observerRef.current = new window.IntersectionObserver(\n      ([entry]) => {\n        setStudentBadgeEntry(entry);\n      },\n      {\n        threshold: 0.5,\n      },\n    );\n\n    observerRef.current.observe(studentBadgeRef.current);\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n      }\n    };\n  }, [studentBadgeRef]);\n\n  const studentBadgeVisible = studentBadgeEntry?.isIntersecting ?? false;\n\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\n  const notEarnedMysterBadge = category === STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned;\n  const badgeBackgroundColor =\n    category === STUDENT_BADGE_TYPE.MYSTERY ? colors.GREY_1 : colors.WHITE;\n\n  const { badgeName, badgeDescription } = notEarnedMysterBadge\n    ? { badgeName: '????', badgeDescription: '----------------' }\n    : { badgeName: name || '', badgeDescription: description || '' };\n\n  const showAnimation = badgeEarned && lottieAnimationData;\n  const loadAnimationData =\n    !lottieLoadingError &&\n    badgeEarned &&\n    studentBadgeVisible &&\n    !lottieAnimationData &&\n    animationUrl;\n  const loadBadgeImage = badgeEarned && imageUrl;\n\n  const loadBadgeAnimation = useCallback(() => {\n    if (!lottieAnimationData || !studentBadgeId) return null;\n\n    const container = document.getElementById(studentBadgeId);\n\n    if (!container) return null;\n\n    const anim = lottie.loadAnimation({\n      name: studentBadgeId,\n      container,\n      renderer: 'svg',\n      loop: true,\n      autoplay: true,\n      animationData: JSON.parse(lottieAnimationData),\n    });\n\n    return anim;\n  }, [studentBadgeId, lottieAnimationData]);\n\n  useEffect(() => {\n    if (loadBadgeImage) {\n      imageRef.current = new Image();\n      imageRef.current.src = imageUrl;\n      setShowLoader(false);\n    }\n\n    if (loadAnimationData) {\n      fetch(animationUrl)\n        .then(response => response.json())\n        .then(data => {\n          setLottieAnimationData(JSON.stringify(data));\n          setShowLoader(false);\n        })\n        .catch(error => {\n          setLottieLoadingError(true);\n          setShowLoader(false);\n          trackEvent('student_badge_animation_load_failed', {\n            studentBadgeId,\n            animationUrl,\n            error: error.message,\n          });\n        });\n    }\n  }, [animationUrl, loadAnimationData, loadBadgeImage, imageUrl, studentBadgeId, trackEvent]);\n\n  const onBadgeClick = useCallback(() => {\n    if (!showAnimation || !openModal) {\n      return;\n    }\n\n    openModal('student-badges', {\n      badges: [\n        {\n          ...props,\n          animationData: lottieAnimationData ? JSON.parse(lottieAnimationData) : null,\n        },\n      ],\n      invalidateRewardsHome,\n    });\n\n    trackEvent('student_badge_clicked', {\n      studentBadgeId,\n      category,\n      badgeEarned,\n    });\n  }, [\n    showAnimation,\n    openModal,\n    props,\n    lottieAnimationData,\n    invalidateRewardsHome,\n    trackEvent,\n    studentBadgeId,\n    category,\n    badgeEarned,\n  ]);\n\n  const onBadgeMouseEnter = useCallback(() => {\n    if (!showAnimation) {\n      return;\n    }\n\n    loadBadgeAnimation();\n    setMouseEntered(true);\n  }, [loadBadgeAnimation, showAnimation]);\n\n  const onBadgeMouseLeave = useCallback(() => {\n    if (!showAnimation) {\n      return;\n    }\n\n    setMouseEntered(false);\n    lottie.destroy(studentBadgeId);\n  }, [showAnimation, studentBadgeId]);\n\n  return {\n    badgeBackgroundColor,\n    badgeDescription,\n    badgeEarned,\n    badgeImage,\n    badgeName,\n    badgeProgress,\n    mouseEntered,\n    notEarnedMysterBadge,\n    onBadgeClick,\n    onBadgeMouseEnter,\n    onBadgeMouseLeave,\n    showLoader,\n    showProgress,\n    studentBadgeId,\n    studentBadgeRef,\n  };\n}\n"],"names":["colors","getTheme","useStudentBadgeHook","props","animationUrl","category","currentCount","description","imageUrl","studentBadgeId","invalidateRewardsHome","name","openModal","state","totalCount","trackEvent","useUIContext","imageRef","useRef","studentBadgeRef","lottieAnimationData","setLottieAnimationData","useState","lottieLoadingError","setLottieLoadingError","mouseEntered","setMouseEntered","badgeEarned","STUDENT_BADGE_STATUS","showLoader","setShowLoader","badgeProgress","showProgress","STUDENT_BADGE_TYPE","observerRef","studentBadgeEntry","setStudentBadgeEntry","useEffect","entry","studentBadgeVisible","badgeImage","BADGE_TYPE_BADGE_ICON","notEarnedMysterBadge","badgeBackgroundColor","badgeName","badgeDescription","showAnimation","loadAnimationData","loadBadgeImage","loadBadgeAnimation","useCallback","container","lottie","response","data","error","onBadgeClick","onBadgeMouseEnter","onBadgeMouseLeave"],"mappings":"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"}

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

@@ -0,0 +1,135 @@
+import { useRef as a, useMemo as R, useState as y, useEffect as j, useCallback as O } from "react";
+import { css as l } from "styled-components";
+import { STUDENT_BADGE_TYPE as e, BADGE_TYPE_TAB_ICON as W } from "../../constants.js";
+const b = 64, w = 48, A = b + w, m = {
+  TABLET: 768,
+  LAPTOP: 1024,
+  LAPTOPL: 1440
+}, $ = (n) => {
+  if (n > m.LAPTOPL)
+    return {
+      badgeWidth: 140,
+      badgeCategoryGap: 40,
+      badgeCategoryWidth: 1040,
+      maxBadgeNameLines: 1,
+      containerStyle: l`
+        grid-template-columns: repeat(auto-fit, 140px);
+        grid-column-gap: 40px;
+        margin-top: 32px;
+      `
+    };
+  if (n > m.LAPTOP) {
+    const u = (n - 440) / 6;
+    return {
+      badgeWidth: u,
+      badgeCategoryGap: 40,
+      badgeCategoryWidth: n - 2 * 120,
+      maxBadgeNameLines: 1,
+      containerStyle: l`
+        grid-template-columns: repeat(auto-fit, ${u}px);
+        grid-column-gap: 40px;
+        margin-top: 32px;
+      `
+    };
+  }
+  if (n > m.TABLET)
+    return {
+      badgeWidth: 104,
+      badgeCategoryGap: 24,
+      badgeCategoryWidth: 784,
+      maxBadgeNameLines: 2,
+      containerStyle: l`
+        grid-column-gap: 32px;
+        grid-template-columns: repeat(auto-fit, 104px);
+        margin-top: 24px;
+      `
+    };
+  const g = 40, p = (n - (2 * g + 5 * 26)) / 6;
+  return {
+    badgeWidth: p,
+    badgeCategoryGap: 24,
+    badgeCategoryWidth: n - 2 * g,
+    maxBadgeNameLines: 2,
+    containerStyle: l`
+      grid-column-gap: 26px;
+      grid-template-columns: repeat(auto-fit, ${p}px);
+      margin-top: 24px;
+    `
+  };
+};
+function q({
+  currentScreenWidth: n,
+  handleScrollTo: g,
+  scrollPosition: d,
+  userBadges: p
+}) {
+  const B = a(null), C = a(null), u = a(null), x = a(null), L = a(null), G = a(null), M = a(null), N = a(null), P = a(null), S = a(null), _ = a(null), H = a(null), I = R(
+    () => ({
+      [e.COMMON]: B,
+      [e.RARE]: C,
+      [e.EPIC]: u,
+      [e.LEGENDARY]: x,
+      [e.MYTHIC]: L,
+      [e.MYSTERY]: G
+    }),
+    []
+  ), c = R(
+    () => ({
+      [e.COMMON]: M,
+      [e.RARE]: N,
+      [e.EPIC]: P,
+      [e.LEGENDARY]: S,
+      [e.MYTHIC]: _,
+      [e.MYSTERY]: H
+    }),
+    []
+  ), [f, E] = y(!1), [T, Y] = y(
+    e.COMMON
+  );
+  j(() => {
+    const t = Object.keys(c).reverse().find((o) => {
+      var i;
+      const s = c[o], r = (i = s == null ? void 0 : s.current) == null ? void 0 : i.offsetTop;
+      return typeof r != "number" ? !1 : d >= r - (o === e.COMMON ? b : A);
+    });
+    t && t !== T && Y(t), t && !f && E(!0), !t && f && E(!1);
+  }, [c, T, d, f]);
+  const h = O(
+    (t) => {
+      var r;
+      const o = c[t], s = (r = o == null ? void 0 : o.current) == null ? void 0 : r.offsetTop;
+      if (typeof s == "number") {
+        const i = s - (t === e.COMMON ? b : A);
+        g(i);
+      }
+    },
+    [c, g]
+  ), D = O(() => {
+    g(0);
+  }, [g]), k = () => {
+    const t = [];
+    return Object.keys(p).forEach((o) => {
+      const s = W[o], r = I[o];
+      s && r && t.push({
+        id: o,
+        title: o,
+        Icon: s,
+        ref: r
+      });
+    }), t;
+  };
+  return {
+    badgeCategoryRefs: c,
+    categoryConfig: $(n),
+    currentSelectedBadgeType: T,
+    onTabClick: h,
+    scrollToTop: D,
+    showTabBar: f,
+    tabs: k(),
+    totalBadgeCategories: Object.keys(p).length
+  };
+}
+export {
+  q as default
+};
+//# sourceMappingURL=use-student-badge-list-hook.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,161 @@
+import { jsxs as s, jsx as o, Fragment as C } from "react/jsx-runtime";
+import t, { css as _, keyframes as I } from "styled-components";
+import i from "../../ui/layout/flex-view.js";
+import L from "../../ui/separator/separator.js";
+import u from "../../ui/text/text.js";
+import { getTheme as T } from "../../ui/theme/get-theme.js";
+import M from "./hooks/use-student-badge-hook.js";
+const { colors: n } = T(), d = 20, S = (e) => I`
+  0% {
+    background-position: -${e}px 0;
+  }
+  80%, 100% {
+    background-position: ${e}px 0;
+  }
+`, W = t.div`
+  display: flex;
+  width: ${({ $badgeWidth: e }) => e}px;
+  height: ${({ $badgeWidth: e }) => e}px;
+  background: linear-gradient(
+    92.42deg,
+    ${n.GREY_1}40 1.94%,
+    ${n.GREY_1} 48.8%,
+    ${n.GREY_1}40 97.88%
+  );
+  background-size: 200% 100%;
+  animation-name: ${({ $badgeWidth: e }) => S(e)};
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  background-repeat: no-repeat;
+  background-color: ${n.WHITE};
+  opacity: 0.5;
+`, G = t(i)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: ${n.ORANGE_3};
+  border-radius: 0px 8px;
+  padding: 2px 8px;
+  z-index: 1;
+`, N = t(i)`
+  cursor: ${(e) => e.$isEarned ? "pointer" : "default"};
+`, P = t(i)`
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+`, z = t(i)`
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: ${({ $backgroundColor: e }) => e};
+  opacity: ${({ $badgeEarned: e }) => e ? 1 : 0.5};
+
+  ${({ $notEarnedMysterBadge: e }) => e && _`
+      mix-blend-mode: luminosity;
+    `}
+`, H = t.img`
+  opacity: ${(e) => e.$mouseEntered ? 0 : 1};
+`, O = t(i)`
+  position: absolute;
+  bottom: 0;
+`, Y = t(i)`
+  position: relative;
+  overflow: hidden;
+`, j = t(i)`
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  transition: width 300ms ease-in-out;
+`, p = t(u)`
+  display: -webkit-box;
+  -webkit-line-clamp: ${({ $numberOfLines: e }) => e};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`, D = t(i)`
+  height: ${({ $badgeSize: e }) => e + d}px;
+  left: ${-d / 2}px;
+  opacity: ${({ $mouseEntered: e }) => e ? 1 : 0};
+  position: absolute;
+  top: ${-d / 2}px;
+  width: ${({ $badgeSize: e }) => e + d}px;
+`, J = (e) => {
+  const { is_recent: h, badgeWidth: r, maxBadgeNameLines: g = 1, image_url: m } = e, {
+    badgeBackgroundColor: $,
+    badgeDescription: b,
+    badgeEarned: a,
+    badgeImage: x,
+    badgeName: f,
+    badgeProgress: E,
+    mouseEntered: c,
+    notEarnedMysterBadge: k,
+    onBadgeClick: w,
+    onBadgeMouseEnter: B,
+    onBadgeMouseLeave: y,
+    showLoader: v,
+    showProgress: R,
+    studentBadgeId: l,
+    studentBadgeRef: A
+  } = M(e);
+  return /* @__PURE__ */ s(
+    N,
+    {
+      onClick: w,
+      ref: A,
+      $width: r,
+      $isEarned: a,
+      children: [
+        /* @__PURE__ */ o(P, { children: v ? /* @__PURE__ */ o(W, { $badgeWidth: r }) : /* @__PURE__ */ s(C, { children: [
+          /* @__PURE__ */ s(
+            z,
+            {
+              $backgroundColor: $,
+              $badgeEarned: a,
+              $notEarnedMysterBadge: k,
+              onMouseEnter: B,
+              onMouseLeave: y,
+              children: [
+                h && /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(u, { $renderAs: "cta2", children: "NEW" }) }),
+                a ? /* @__PURE__ */ o(
+                  H,
+                  {
+                    $mouseEntered: c,
+                    src: m,
+                    alt: "badge-placeholder",
+                    width: r,
+                    height: r
+                  }
+                ) : /* @__PURE__ */ o(
+                  "img",
+                  {
+                    src: x,
+                    alt: "badge-placeholder",
+                    width: r,
+                    height: r
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  D,
+                  {
+                    id: l,
+                    $mouseEntered: c,
+                    $badgeSize: r
+                  }
+                )
+              ]
+            }
+          ),
+          R && /* @__PURE__ */ o(O, { $width: r, children: /* @__PURE__ */ o(Y, { $height: 4, $borderRadius: 2, $width: "100%", $background: "WHITE", children: /* @__PURE__ */ o(j, { $width: `${E}%`, $borderRadius: 2, $background: "BLACK" }) }) })
+        ] }) }),
+        /* @__PURE__ */ o(L, { height: 8 }),
+        /* @__PURE__ */ o(p, { $renderAs: "cta2", $numberOfLines: g, children: f }),
+        /* @__PURE__ */ o(p, { $renderAs: "body3", $numberOfLines: g + 1, children: b })
+      ]
+    },
+    l
+  );
+};
+export {
+  J as default
+};
+//# sourceMappingURL=student-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"student-badge.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badge.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport useStudentBadgeHook from './hooks/use-student-badge-hook';\n\nconst { colors } = getTheme();\n\nconst EXTRA_BADGE_SIZE = 20;\n\nconst shimmer = (badgeWidth: number) => keyframes`\n  0% {\n    background-position: -${badgeWidth}px 0;\n  }\n  80%, 100% {\n    background-position: ${badgeWidth}px 0;\n  }\n`;\n\nconst BadgePlaceholder = styled.div<{ $badgeWidth: number }>`\n  display: flex;\n  width: ${({ $badgeWidth }) => $badgeWidth}px;\n  height: ${({ $badgeWidth }) => $badgeWidth}px;\n  background: linear-gradient(\n    92.42deg,\n    ${colors.GREY_1}40 1.94%,\n    ${colors.GREY_1} 48.8%,\n    ${colors.GREY_1}40 97.88%\n  );\n  background-size: 200% 100%;\n  animation-name: ${({ $badgeWidth }) => shimmer($badgeWidth)};\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  background-repeat: no-repeat;\n  background-color: ${colors.WHITE};\n  opacity: 0.5;\n`;\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 AnimationContainer = styled(FlexView)<{ $badgeSize: number; $mouseEntered: boolean }>`\n  height: ${({ $badgeSize }) => $badgeSize + EXTRA_BADGE_SIZE}px;\n  left: ${-EXTRA_BADGE_SIZE / 2}px;\n  opacity: ${({ $mouseEntered }) => ($mouseEntered ? 1 : 0)};\n  position: absolute;\n  top: ${-EXTRA_BADGE_SIZE / 2}px;\n  width: ${({ $badgeSize }) => $badgeSize + EXTRA_BADGE_SIZE}px;\n`;\n\nconst StudentBadge: React.FC<StudentBadgeProps> = props => {\n  const { is_recent: isRecent, badgeWidth, maxBadgeNameLines = 1, image_url: imageUrl } = props;\n\n  const {\n    badgeBackgroundColor,\n    badgeDescription,\n    badgeEarned,\n    badgeImage,\n    badgeName,\n    badgeProgress,\n    mouseEntered,\n    notEarnedMysterBadge,\n    onBadgeClick,\n    onBadgeMouseEnter,\n    onBadgeMouseLeave,\n    showLoader,\n    showProgress,\n    studentBadgeId,\n    studentBadgeRef,\n  } = useStudentBadgeHook(props);\n\n  return (\n    <Wrapper\n      onClick={onBadgeClick}\n      ref={studentBadgeRef}\n      $width={badgeWidth}\n      $isEarned={badgeEarned}\n      key={studentBadgeId}\n    >\n      <StudentBadgeWrapper>\n        {showLoader ? (\n          <BadgePlaceholder $badgeWidth={badgeWidth} />\n        ) : (\n          <>\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\n                  src={badgeImage}\n                  alt=\"badge-placeholder\"\n                  width={badgeWidth}\n                  height={badgeWidth}\n                />\n              )}\n              <AnimationContainer\n                id={studentBadgeId}\n                $mouseEntered={mouseEntered}\n                $badgeSize={badgeWidth}\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          </>\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 StudentBadge;\n"],"names":["colors","getTheme","EXTRA_BADGE_SIZE","shimmer","badgeWidth","keyframes","BadgePlaceholder","styled","$badgeWidth","NewTag","FlexView","Wrapper","props","StudentBadgeWrapper","BadgeImageContainer","$backgroundColor","$badgeEarned","$notEarnedMysterBadge","css","BadgeImage","ProgressContainer","Background","Progress","BadgeText","Text","$numberOfLines","AnimationContainer","$badgeSize","$mouseEntered","StudentBadge","isRecent","maxBadgeNameLines","imageUrl","badgeBackgroundColor","badgeDescription","badgeEarned","badgeImage","badgeName","badgeProgress","mouseEntered","notEarnedMysterBadge","onBadgeClick","onBadgeMouseEnter","onBadgeMouseLeave","showLoader","showProgress","studentBadgeId","studentBadgeRef","useStudentBadgeHook","jsxs","jsx","Fragment","Separator"],"mappings":"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"}

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

@@ -0,0 +1,136 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import i, { css as G } from "styled-components";
+import S from "../../../assets/line-icons/icons/up.js";
+import o from "../../ui/layout/flex-view.js";
+import $ from "../../ui/text/text.js";
+import { BADGE_TYPE_BACKGROUND as F, BADGE_TYPE_TAB_ICON as _ } from "../constants.js";
+import j from "./animated-tabbar.js";
+import L from "./hooks/use-student-badge-list-hook.js";
+import O from "./student-badge.js";
+const g = 64, { innerHeight: R } = window, N = i(o)`
+  width: 100%;
+  background-color: ${({ $backgroundColor: t }) => t};
+  padding: ${({ $badgeCategoryGap: t }) => t}px 0;
+  align-items: center;
+  ${({ $isLastCategory: t }) => t && G`
+      min-height: ${R - g}px;
+    `}
+`, Y = i(o)`
+  position: fixed;
+  top: ${({ $topOffset: t }) => t}px;
+  width: ${({ $width: t }) => t}px;
+  z-index: 1;
+  transition: transform 200ms linear;
+  transform: translateY(${({ $visible: t }) => t ? g : 0}px);
+`, v = i(o)`
+  position: fixed;
+  top: ${window.innerHeight - 100}px;
+  right: 40px;
+  width: 48px;
+  height: 48px;
+  border: 1px solid black;
+  background: ${({ theme: t }) => t.colors.WHITE};
+  border-radius: 24px;
+  cursor: pointer;
+  opacity: ${({ $showTabBar: t }) => t ? 1 : 0};
+  transition: all 100ms linear;
+`, U = i.div`
+  display: grid;
+  grid-row-gap: 16px;
+  ${({ $containerStyle: t }) => t};
+`, W = ({
+  invalidateRewardsHome: t,
+  openModal: m,
+  topOffset: h = 0,
+  userBadges: n,
+  currentScreenWidth: a,
+  handleScrollTo: f,
+  scrollPosition: x
+}) => {
+  const {
+    badgeCategoryRefs: w,
+    categoryConfig: u,
+    currentSelectedBadgeType: y,
+    onTabClick: B,
+    scrollToTop: C,
+    showTabBar: c,
+    tabs: T,
+    totalBadgeCategories: b
+  } = L({
+    currentScreenWidth: a,
+    handleScrollTo: f,
+    scrollPosition: x,
+    userBadges: n
+  }), { badgeCategoryGap: I, badgeCategoryWidth: d, containerStyle: E, badgeWidth: k, maxBadgeNameLines: A } = u;
+  return /* @__PURE__ */ s(o, { $alignItems: "center", children: [
+    /* @__PURE__ */ e(
+      Y,
+      {
+        $flexDirection: "row",
+        $background: "WHITE",
+        $visible: c,
+        $justifyContent: "center",
+        $width: a,
+        $topOffset: h,
+        children: /* @__PURE__ */ e(o, { $width: d, children: /* @__PURE__ */ e(
+          j,
+          {
+            tabs: T,
+            selectedTabId: y,
+            onTabClick: B,
+            currentScreenWidth: a
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(o, { $flexDirection: "row", $gap: 16, $width: d, children: /* @__PURE__ */ e($, { $renderAs: "h5", children: "BADGES" }) }),
+    Object.keys(n).map((r, H) => {
+      const l = _[r];
+      return /* @__PURE__ */ e(
+        N,
+        {
+          $backgroundColor: F[r] || "#FFFFFF",
+          $badgeCategoryGap: I,
+          $isLastCategory: H === b - 1,
+          ref: w[r],
+          children: /* @__PURE__ */ s(o, { $width: d, children: [
+            /* @__PURE__ */ s(o, { $flexDirection: "row", $flexGap: 8, $alignItems: "center", children: [
+              typeof l == "function" ? /* @__PURE__ */ e(l, {}) : null,
+              /* @__PURE__ */ e($, { $renderAs: "eyebrow1", children: r })
+            ] }),
+            /* @__PURE__ */ e(U, { $containerStyle: E, children: (n[r] || []).map((p) => {
+              const { id: D } = p || {};
+              return /* @__PURE__ */ e(
+                O,
+                {
+                  ...p,
+                  category: r,
+                  openModal: m,
+                  badgeWidth: k,
+                  maxBadgeNameLines: A,
+                  invalidateRewardsHome: t
+                },
+                D
+              );
+            }) })
+          ] })
+        },
+        r
+      );
+    }),
+    /* @__PURE__ */ e(
+      v,
+      {
+        $justifyContent: "center",
+        $alignItems: "center",
+        $showTabBar: c,
+        onClick: C,
+        children: /* @__PURE__ */ e(S, {})
+      }
+    )
+  ] });
+}, Z = W;
+export {
+  Z as default
+};
+//# sourceMappingURL=student-badges-lists.js.map

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

@@ -0,0 +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 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 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","StudentBadgeList$1"],"mappings":"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"}