@cuemath/leap 3.4.4 → 3.4.5-akm-2

package/dist/features/circle-games/game-launcher/comps/carousel/carousel-styled.js

@@ -1,39 +1,102 @@
-import e from "styled-components";
-import o from "../../../../ui/layout/flex-view.js";
-const s = e.div`
+import t, { css as o } from "styled-components";
+import n from "../../../../ui/layout/flex-view.js";
+import { GAME_LAUNCHER_SIZE as r } from "../card-container/constants.js";
+const l = t.div`
   width: 100%;
+  height: 100%;
   position: relative;
   display: flex;
   justify-content: center;
-`, l = e.div`
+`, d = t.div`
   display: flex;
   width: 100%;
   flex-grow: 1;
-  transform: ${({ $translate: t }) => `translateX(${-t}%)`};
-  transition: ${({ $translateDuration: t }) => `all ${t}ms ease-in`};
-`, a = e.div`
+  transform: ${({ $translate: e = 0 }) => `translateX(${-e}%)`};
+  transition: ${({ $translateDuration: e }) => `all ${e}ms ease-in`};
+`, c = t.div`
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
   flex-shrink: 0;
-`, d = e.div`
-  border: 1px solid ${({ theme: t }) => t.colors.WHITE};
-  height: 8px;
-  width: 8px;
-  border-radius: 100%;
-  margin: 0 4px;
-  background: ${({ theme: t, $isActive: r }) => r ? t.colors.WHITE : "transparent"};
+`, x = t.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 2px;
+  gap: 4px;
+  background: ${({ theme: e }) => e.colors.BLACK_5 || "#313131"};
+  border-radius: 24px;
+  margin-top: 20px;
+  ${({ theme: e }) => e.mediaQueries.minWidthTablet} {
+    padding: 8px;
+    gap: 8px;
+    margin-top: 16px;
+  }
+`, f = t.div`
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
   cursor: pointer;
-`, p = e(o)`
-  bottom: -32px;
+`, u = t.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`, g = t.div`
+  box-sizing: border-box;
+  position: absolute;
+
+  /* ------ MOBILE FIRST STYLES ------ */
+  width: 20px;
+  height: 20px;
+  border-radius: 13.33px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ $isCompleted: e }) => e ? "transparent" : "#0D0D0D"};
+  background: ${({ $isSelected: e, $isCompleted: i }) => i && e ? "#00E573" : i ? "#007038" : e ? "#FFFFFF" : "#313131"};
+
+  /* ------ DESKTOP OVERRIDES ------ */
+  ${({ theme: e }) => e.mediaQueries.minWidthTablet} {
+    width: 28px;
+    height: 28px;
+    border-radius: 16px;
+    line-height: 50px;
+    border: ${({ $isCompleted: e }) => e ? "none" : "1px solid rgba(255, 255, 255, 0.38)"};
+    ${({ $isCompleted: e, $isSelected: i }) => !i && !e && o`
+        &:hover {
+          background: rgba(255, 255, 255, 0.38);
+          border: 1px solid #ffffff;
+          color: #ffffff;
+        }
+      `}
+  }
+`, h = t(n)`
+  position: absolute;
+  top: calc(50% + ${r / 2}px);
+`, m = t(n)`
+  position: absolute;
+  top: calc(50% + ${56 + r / 2}px);
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  ${({ theme: e }) => e.mediaQueries.minWidthTablet} {
+    top: calc(50% + ${66 + r / 2}px);
+  }
 `;
 export {
-  s as Carousel,
-  a as CarouselItemContainer,
-  l as CarouselWrapper,
-  p as ExtendedFlexView,
-  d as Indicator
+  l as Carousel,
+  x as CarouselContainer,
+  g as CarouselItem,
+  c as CarouselItemContainer,
+  f as CarouselItemWrapper,
+  d as CarouselWrapper,
+  h as ExtendedFlexView,
+  m as StyledCarouselBadgeWrapper,
+  u as TickIcon
 };
 //# sourceMappingURL=carousel-styled.js.map

package/dist/features/circle-games/game-launcher/comps/carousel/carousel-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel/carousel-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const Carousel = styled.div`\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n`;\nexport const CarouselWrapper = styled.div<{ $translate: number; $translateDuration: number }>`\n  display: flex;\n  width: 100%;\n  flex-grow: 1;\n  transform: ${({ $translate }) => `translateX(${-$translate}%)`};\n  transition: ${({ $translateDuration }) => `all ${$translateDuration}ms ease-in`};\n`;\n\nexport const CarouselItemContainer = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n  flex-shrink: 0;\n`;\n\nexport const Indicator = styled.div<{ $isActive?: boolean }>`\n  border: 1px solid ${({ theme }) => theme.colors.WHITE};\n  height: 8px;\n  width: 8px;\n  border-radius: 100%;\n  margin: 0 4px;\n  background: ${({ theme, $isActive }) => ($isActive ? theme.colors.WHITE : 'transparent')};\n  cursor: pointer;\n`;\n\nexport const ExtendedFlexView = styled(FlexView)`\n  bottom: -32px;\n`;\n"],"names":["Carousel","styled","CarouselWrapper","$translate","$translateDuration","CarouselItemContainer","Indicator","theme","$isActive","ExtendedFlexView","FlexView"],"mappings":";;AAIO,MAAMA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAMlBC,IAAkBD,EAAO;AAAA;AAAA;AAAA;AAAA,eAIvB,CAAC,EAAE,YAAAE,QAAiB,cAAc,CAACA,CAAU,IAAI;AAAA,gBAChD,CAAC,EAAE,oBAAAC,EAAyB,MAAA,OAAOA,CAAkB,YAAY;AAAA,GAGpEC,IAAwBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BK,IAAYL,EAAO;AAAA,sBACV,CAAC,EAAE,OAAAM,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKvC,CAAC,EAAE,OAAAA,GAAO,WAAAC,QAAiBA,IAAYD,EAAM,OAAO,QAAQ,aAAc;AAAA;AAAA,GAI7EE,IAAmBR,EAAOS,CAAQ;AAAA;AAAA;"}
+{"version":3,"file":"carousel-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel/carousel-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport { GAME_LAUNCHER_SIZE } from '../card-container/constants';\n\nexport const Carousel = styled.div`\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n`;\nexport const CarouselWrapper = styled.div<{ $translate?: number; $translateDuration?: number }>`\n  display: flex;\n  width: 100%;\n  flex-grow: 1;\n  transform: ${({ $translate = 0 }) => `translateX(${-$translate}%)`};\n  transition: ${({ $translateDuration }) => `all ${$translateDuration}ms ease-in`};\n`;\n\nexport const CarouselItemContainer = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n  flex-shrink: 0;\n`;\n\n// StyledComponents.ts\n\nexport const CarouselContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 2px;\n  gap: 4px;\n  background: ${({ theme }) => theme.colors.BLACK_5 || '#313131'};\n  border-radius: 24px;\n  margin-top: 20px;\n  ${({ theme }) => theme.mediaQueries.minWidthTablet} {\n    padding: 8px;\n    gap: 8px;\n    margin-top: 16px;\n  }\n`;\n\ninterface CarouselItemProps {\n  $isSelected?: boolean;\n  $isCompleted?: boolean;\n  $isHovered?: boolean; // Optional, most hover styling should use :hover pseudo-class\n}\n\nexport const CarouselItemWrapper = styled.div`\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const TickIcon = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n`;\n\nexport const CarouselItem = styled.div<CarouselItemProps>`\n  box-sizing: border-box;\n  position: absolute;\n\n  /* ------ MOBILE FIRST STYLES ------ */\n  width: 20px;\n  height: 20px;\n  border-radius: 13.33px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ $isCompleted }) => ($isCompleted ? 'transparent' : '#0D0D0D')};\n  background: ${({ $isSelected, $isCompleted }) => {\n    if ($isCompleted && $isSelected) return '#00E573';\n\n    if ($isCompleted) return '#007038';\n\n    if ($isSelected) return '#FFFFFF';\n\n    return '#313131';\n  }};\n\n  /* ------ DESKTOP OVERRIDES ------ */\n  ${({ theme }) => theme.mediaQueries.minWidthTablet} {\n    width: 28px;\n    height: 28px;\n    border-radius: 16px;\n    line-height: 50px;\n    border: ${({ $isCompleted }) =>\n      $isCompleted ? 'none' : '1px solid rgba(255, 255, 255, 0.38)'};\n    ${({ $isCompleted, $isSelected }) =>\n      !$isSelected &&\n      !$isCompleted &&\n      css`\n        &:hover {\n          background: rgba(255, 255, 255, 0.38);\n          border: 1px solid #ffffff;\n          color: #ffffff;\n        }\n      `}\n  }\n`;\n\nexport const ExtendedFlexView = styled(FlexView)`\n  position: absolute;\n  top: calc(50% + ${GAME_LAUNCHER_SIZE / 2}px);\n`;\n\nexport const StyledCarouselBadgeWrapper = styled(FlexView)`\n  position: absolute;\n  top: calc(50% + ${56 + GAME_LAUNCHER_SIZE / 2}px);\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  ${({ theme }) => theme.mediaQueries.minWidthTablet} {\n    top: calc(50% + ${66 + GAME_LAUNCHER_SIZE / 2}px);\n  }\n`;\n"],"names":["Carousel","styled","CarouselWrapper","$translate","$translateDuration","CarouselItemContainer","CarouselContainer","theme","CarouselItemWrapper","TickIcon","CarouselItem","$isCompleted","$isSelected","css","ExtendedFlexView","FlexView","GAME_LAUNCHER_SIZE","StyledCarouselBadgeWrapper"],"mappings":";;;AAKO,MAAMA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOlBC,IAAkBD,EAAO;AAAA;AAAA;AAAA;AAAA,eAIvB,CAAC,EAAE,YAAAE,IAAa,QAAQ,cAAc,CAACA,CAAU,IAAI;AAAA,gBACpD,CAAC,EAAE,oBAAAC,EAAyB,MAAA,OAAOA,CAAkB,YAAY;AAAA,GAGpEC,IAAwBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAW/BK,IAAoBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMxB,CAAC,EAAE,OAAAM,QAAYA,EAAM,OAAO,WAAW,SAAS;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,GAavCC,IAAsBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU7BQ,IAAWR,EAAO;AAAA;AAAA;AAAA;AAAA,GAMlBS,IAAeT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWxB,CAAC,EAAE,cAAAU,EAAA,MAAoBA,IAAe,gBAAgB,SAAU;AAAA,gBAC3D,CAAC,EAAE,aAAAC,GAAa,cAAAD,QACxBA,KAAgBC,IAAoB,YAEpCD,IAAqB,YAErBC,IAAoB,YAEjB,SACR;AAAA;AAAA;AAAA,IAGC,CAAC,EAAE,OAAAL,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,cAKtC,CAAC,EAAE,cAAAI,EAAA,MACXA,IAAe,SAAS,qCAAqC;AAAA,MAC7D,CAAC,EAAE,cAAAA,GAAc,aAAAC,EAAA,MACjB,CAACA,KACD,CAACD,KACDE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAMC;AAAA;AAAA,GAIMC,IAAmBb,EAAOc,CAAQ;AAAA;AAAA,oBAE3BC,IAAqB,CAAC;AAAA,GAG7BC,IAA6BhB,EAAOc,CAAQ;AAAA;AAAA,oBAErC,KAAKC,IAAqB,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3C,CAAC,EAAE,OAAAT,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA,sBAC9B,KAAKS,IAAqB,CAAC;AAAA;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/carousel/carousel.js

@@ -1,85 +1,58 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { memo as j, forwardRef as x, useMemo as u, useRef as b, useState as z, createRef as B, useCallback as d, useImperativeHandle as D, useEffect as $ } from "react";
-import E from "../../../../../assets/line-icons/icons/carat-left.js";
-import F from "../../../../../assets/line-icons/icons/carat-right.js";
-import R from "../../../../ui/buttons/icon-button/icon-button.js";
-import g from "../../../../ui/separator/separator.js";
-import { Carousel as M, CarouselWrapper as S, CarouselItemContainer as H, ExtendedFlexView as T, Indicator as V } from "./carousel-styled.js";
-const W = ({ items: t, defaultIndex: l = 0, onNext: s, onPrev: c, analyticsPrev: m, analyticsNext: p }, k) => {
-  const f = u(() => m, [m]), C = u(() => p, [p]), h = b(null), i = b(!0), [o, n] = z(l), I = u(() => t.map(() => B()), [t]), w = d(() => {
-    c == null || c(), n((r) => r - 1);
-  }, [c]), A = d(() => {
-    s == null || s(), n((r) => r + 1);
-  }, [s]), L = d((r) => {
-    n(r);
+import { jsxs as I, jsx as o } from "react/jsx-runtime";
+import { memo as T, forwardRef as g, useRef as u, useState as $, useMemo as B, createRef as E, useCallback as R, useImperativeHandle as k, useEffect as i } from "react";
+import { useTheme as S } from "styled-components";
+import { ILLUSTRATIONS as x } from "../../../../../assets/illustrations/illustrations.js";
+import A from "../../../../ui/text/text.js";
+import { EDeviceType as L } from "../../../../ui/theme/constants.js";
+import { Carousel as W, CarouselWrapper as b, CarouselItemContainer as j, ExtendedFlexView as v, CarouselContainer as w, CarouselItemWrapper as y, CarouselItem as D, TickIcon as F, StyledCarouselBadgeWrapper as _ } from "./carousel-styled.js";
+const H = ({ items: e, defaultIndex: l = 0 }, m) => {
+  var s;
+  const { device: p } = S(), C = p <= L.TABLET, d = u(null), a = u(!0), [n, c] = $(l), f = B(() => e.map(() => E()), [e]), h = R((r) => {
+    c(r);
   }, []);
-  return D(k, () => ({
-    nextBtnRef: h,
-    indicatorRefs: I,
-    currentIndex: o,
+  return k(m, () => ({
+    nextBtnRef: d,
+    indicatorRefs: f,
+    currentIndex: n,
     goToIndex: (r) => {
-      n(r);
+      c(r);
     }
-  })), $(() => {
-    i.current && (i.current = !1);
-  }, []), $(() => {
-    n(l);
-  }, [l]), /* @__PURE__ */ y(M, { children: [
-    /* @__PURE__ */ e(
-      S,
+  })), i(() => {
+    a.current && (a.current = !1);
+  }, []), i(() => {
+    c((r) => e.length <= 1 || r >= e.length ? 0 : l);
+  }, [l, e.length]), /* @__PURE__ */ I(W, { children: [
+    /* @__PURE__ */ o(
+      b,
       {
-        $translate: o * 100,
-        $translateDuration: i.current ? 0 : 300,
-        children: t.map((r, a) => /* @__PURE__ */ e(H, { children: r }, a))
+        ...e.length > 1 && {
+          $translate: n * 100,
+          $translateDuration: a.current ? 0 : 300
+        },
+        children: e.map((r, t) => /* @__PURE__ */ o(j, { children: r.element }, t))
       }
     ),
-    t.length > 1 && /* @__PURE__ */ y(
-      T,
+    e.length > 1 && /* @__PURE__ */ o(v, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ o(w, { children: e.map((r, t) => /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(
+      D,
       {
-        $flexDirection: "row",
-        $alignItems: "center",
-        $justifyContent: "center",
-        $position: "absolute",
-        children: [
-          /* @__PURE__ */ e(
-            R,
-            {
-              renderAs: "secondary",
-              Icon: E,
-              onClick: w,
-              analyticsLabel: f.analyticsLabel,
-              analyticsProps: f.analyticsProps,
-              disabled: o === 0
-            }
-          ),
-          /* @__PURE__ */ e(g, { width: 48 }),
-          t.map((r, a) => /* @__PURE__ */ e(
-            V,
-            {
-              ref: I[a],
-              $isActive: a === o,
-              onClick: () => L(a)
-            },
-            a
-          )),
-          /* @__PURE__ */ e(g, { width: 48 }),
-          /* @__PURE__ */ e("div", { ref: h, children: /* @__PURE__ */ e(
-            R,
-            {
-              renderAs: "secondary",
-              Icon: F,
-              onClick: A,
-              analyticsLabel: C.analyticsLabel,
-              analyticsProps: C.analyticsProps,
-              disabled: o === t.length - 1
-            }
-          ) })
-        ]
+        $isSelected: t === n,
+        $isCompleted: r.isCompleted,
+        onClick: () => h(t),
+        children: r.isCompleted && t !== n ? /* @__PURE__ */ o(F, { src: x.GREEN_TICK, alt: "completed" }) : /* @__PURE__ */ o(
+          A,
+          {
+            $renderAs: C ? "ac4-black" : "ac3-black",
+            $color: t === n ? "BLACK" : "WHITE_T_60",
+            $marginBottom: 0,
+            children: t + 1
+          }
+        )
       }
-    )
+    ) }, t)) }) }),
+    ((s = e[n]) == null ? void 0 : s.carouselBadge) && /* @__PURE__ */ o(_, { children: e[n].carouselBadge })
   ] });
-}, Q = j(x(W));
+}, q = T(g(H));
 export {
-  Q as Carousel
+  q as Carousel
 };
 //# sourceMappingURL=carousel.js.map

package/dist/features/circle-games/game-launcher/comps/carousel/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel/carousel.tsx"],"sourcesContent":["import type { ForwardRefRenderFunction } from 'react';\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  createRef,\n} from 'react';\n\nimport CaratLeftIcon from '../../../../../assets/line-icons/icons/carat-left';\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport Separator from '../../../../ui/separator/separator';\nimport * as Styled from './carousel-styled';\nimport type { ICarouselProps, ICarouselRefs } from './carousel-types';\n\nconst CarouselComponent: ForwardRefRenderFunction<ICarouselRefs, ICarouselProps> = (\n  { items, defaultIndex = 0, onNext, onPrev, analyticsPrev, analyticsNext },\n  ref,\n) => {\n  const memoizedAnalyticsPrev = useMemo(() => analyticsPrev, [analyticsPrev]);\n  const memoizedAnalyticsNext = useMemo(() => analyticsNext, [analyticsNext]);\n\n  const nextBtnRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const isFirstMount = useRef(true);\n  const [currIndex, setCurrIndex] = useState(defaultIndex);\n\n  // Create a stable array of refs for indicators\n  const indicatorRefs = useMemo(() => items.map(() => createRef<HTMLDivElement>()), [items]);\n\n  const handleCarouselPrev = useCallback(() => {\n    onPrev?.();\n    setCurrIndex(prev => prev - 1);\n  }, [onPrev]);\n\n  const handleCarouselNext = useCallback(() => {\n    onNext?.();\n    setCurrIndex(prev => prev + 1);\n  }, [onNext]);\n\n  const handleCarouselIndicatorClick = useCallback((index: number) => {\n    setCurrIndex(index);\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    nextBtnRef,\n    indicatorRefs,\n    currentIndex: currIndex,\n    goToIndex: (index: number) => {\n      setCurrIndex(index);\n    },\n  }));\n\n  useEffect(() => {\n    if (isFirstMount.current) {\n      isFirstMount.current = false;\n    }\n  }, []);\n\n  // Change index from parent\n  useEffect(() => {\n    setCurrIndex(defaultIndex);\n  }, [defaultIndex]);\n\n  return (\n    <Styled.Carousel>\n      <Styled.CarouselWrapper\n        $translate={currIndex * 100}\n        $translateDuration={isFirstMount.current ? 0 : 300}\n      >\n        {items.map((item, index) => (\n          <Styled.CarouselItemContainer key={index}>{item}</Styled.CarouselItemContainer>\n        ))}\n      </Styled.CarouselWrapper>\n\n      {items.length > 1 && (\n        <Styled.ExtendedFlexView\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          $position=\"absolute\"\n        >\n          <IconButton\n            renderAs=\"secondary\"\n            Icon={CaratLeftIcon}\n            onClick={handleCarouselPrev}\n            analyticsLabel={memoizedAnalyticsPrev.analyticsLabel}\n            analyticsProps={memoizedAnalyticsPrev.analyticsProps}\n            disabled={currIndex === 0}\n          />\n          <Separator width={48} />\n          {items.map((_, index) => (\n            <Styled.Indicator\n              ref={indicatorRefs[index]}\n              $isActive={index === currIndex}\n              key={index}\n              onClick={() => handleCarouselIndicatorClick(index)}\n            />\n          ))}\n          <Separator width={48} />\n          <div ref={nextBtnRef}>\n            <IconButton\n              renderAs=\"secondary\"\n              Icon={CaratRightIcon}\n              onClick={handleCarouselNext}\n              analyticsLabel={memoizedAnalyticsNext.analyticsLabel}\n              analyticsProps={memoizedAnalyticsNext.analyticsProps}\n              disabled={currIndex === items.length - 1}\n            />\n          </div>\n        </Styled.ExtendedFlexView>\n      )}\n    </Styled.Carousel>\n  );\n};\n\nexport const Carousel = memo(forwardRef(CarouselComponent));\n"],"names":["CarouselComponent","items","defaultIndex","onNext","onPrev","analyticsPrev","analyticsNext","ref","memoizedAnalyticsPrev","useMemo","memoizedAnalyticsNext","nextBtnRef","useRef","isFirstMount","currIndex","setCurrIndex","useState","indicatorRefs","createRef","handleCarouselPrev","useCallback","prev","handleCarouselNext","handleCarouselIndicatorClick","index","useImperativeHandle","useEffect","jsxs","Styled.Carousel","jsx","Styled.CarouselWrapper","item","Styled.CarouselItemContainer","Styled.ExtendedFlexView","IconButton","CaratLeftIcon","Separator","_","Styled.Indicator","CaratRightIcon","Carousel","memo","forwardRef"],"mappings":"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"}
+{"version":3,"file":"carousel.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel/carousel.tsx"],"sourcesContent":["import type { ForwardRefRenderFunction } from 'react';\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  createRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport * as Styled from './carousel-styled';\nimport {\n  CarouselItem,\n  CarouselItemWrapper,\n  TickIcon,\n  StyledCarouselBadgeWrapper,\n} from './carousel-styled';\nimport type { ICarouselProps, ICarouselRefs } from './carousel-types';\n\nconst CarouselComponent: ForwardRefRenderFunction<ICarouselRefs, ICarouselProps> = (\n  { items, defaultIndex = 0 },\n  ref,\n) => {\n  const { device } = useTheme();\n  const useSmallFont = device <= EDeviceType.TABLET;\n  // const memoizedAnalyticsPrev = useMemo(() => analyticsPrev, [analyticsPrev]);\n  // const memoizedAnalyticsNext = useMemo(() => analyticsNext, [analyticsNext]);\n\n  const nextBtnRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const isFirstMount = useRef(true);\n  const [currIndex, setCurrIndex] = useState(defaultIndex);\n\n  // Create a stable array of refs for indicators\n  const indicatorRefs = useMemo(() => items.map(() => createRef<HTMLDivElement>()), [items]);\n\n  // const handleCarouselPrev = useCallback(() => {\n  //   onPrev?.();\n  //   setCurrIndex(prev => prev - 1);\n  // }, [onPrev]);\n\n  // const handleCarouselNext = useCallback(() => {\n  //   onNext?.();\n  //   setCurrIndex(prev => prev + 1);\n  // }, [onNext]);\n\n  const handleCarouselIndicatorClick = useCallback((index: number) => {\n    setCurrIndex(index);\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    nextBtnRef,\n    indicatorRefs,\n    currentIndex: currIndex,\n    goToIndex: (index: number) => {\n      setCurrIndex(index);\n    },\n  }));\n\n  useEffect(() => {\n    if (isFirstMount.current) {\n      isFirstMount.current = false;\n    }\n  }, []);\n\n  // Change index from parent\n  useEffect(() => {\n    setCurrIndex(prev => {\n      if (items.length <= 1) return 0;\n\n      if (prev >= items.length) return 0;\n\n      return defaultIndex;\n    });\n  }, [defaultIndex, items.length]);\n\n  return (\n    <Styled.Carousel>\n      <Styled.CarouselWrapper\n        {...(items.length > 1 && {\n          $translate: currIndex * 100,\n          $translateDuration: isFirstMount.current ? 0 : 300,\n        })}\n      >\n        {items.map((item, index) => (\n          <Styled.CarouselItemContainer key={index}>{item.element}</Styled.CarouselItemContainer>\n        ))}\n      </Styled.CarouselWrapper>\n\n      {/* 👇 Will come below the carousel content */}\n      {items.length > 1 && (\n        <Styled.ExtendedFlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\">\n          <Styled.CarouselContainer>\n            {items.map((item, index) => (\n              <CarouselItemWrapper key={index}>\n                <CarouselItem\n                  $isSelected={index === currIndex}\n                  $isCompleted={item.isCompleted}\n                  onClick={() => handleCarouselIndicatorClick(index)}\n                >\n                  {item.isCompleted && index !== currIndex ? (\n                    <TickIcon src={ILLUSTRATIONS.GREEN_TICK} alt=\"completed\" />\n                  ) : (\n                    <Text\n                      $renderAs={useSmallFont ? 'ac4-black' : 'ac3-black'}\n                      $color={index === currIndex ? 'BLACK' : 'WHITE_T_60'}\n                      $marginBottom={0}\n                    >\n                      {index + 1}\n                    </Text>\n                  )}\n                </CarouselItem>\n              </CarouselItemWrapper>\n            ))}\n          </Styled.CarouselContainer>\n        </Styled.ExtendedFlexView>\n      )}\n\n      {/* 👇 Will come below indicators */}\n      {items[currIndex]?.carouselBadge && (\n        <StyledCarouselBadgeWrapper>{items[currIndex].carouselBadge}</StyledCarouselBadgeWrapper>\n      )}\n    </Styled.Carousel>\n  );\n};\n\nexport const Carousel = memo(forwardRef(CarouselComponent));\n"],"names":["CarouselComponent","items","defaultIndex","ref","device","useTheme","useSmallFont","EDeviceType","nextBtnRef","useRef","isFirstMount","currIndex","setCurrIndex","useState","indicatorRefs","useMemo","createRef","handleCarouselIndicatorClick","useCallback","index","useImperativeHandle","useEffect","prev","jsxs","Styled.Carousel","jsx","Styled.CarouselWrapper","item","Styled.CarouselItemContainer","Styled.ExtendedFlexView","Styled.CarouselContainer","CarouselItemWrapper","CarouselItem","TickIcon","ILLUSTRATIONS","Text","_a","StyledCarouselBadgeWrapper","Carousel","memo","forwardRef"],"mappings":";;;;;;;AA0BA,MAAMA,IAA6E,CACjF,EAAE,OAAAC,GAAO,cAAAC,IAAe,EAAA,GACxBC,MACG;;AACG,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAeF,KAAUG,EAAY,QAIrCC,IAAaC,EAAuB,IAAI,GACxCC,IAAeD,EAAO,EAAI,GAC1B,CAACE,GAAWC,CAAY,IAAIC,EAASX,CAAY,GAGjDY,IAAgBC,EAAQ,MAAMd,EAAM,IAAI,MAAMe,GAA2B,GAAG,CAACf,CAAK,CAAC,GAYnFgB,IAA+BC,EAAY,CAACC,MAAkB;AAClE,IAAAP,EAAaO,CAAK;AAAA,EACpB,GAAG,CAAE,CAAA;AAEL,SAAAC,EAAoBjB,GAAK,OAAO;AAAA,IAC9B,YAAAK;AAAA,IACA,eAAAM;AAAA,IACA,cAAcH;AAAA,IACd,WAAW,CAACQ,MAAkB;AAC5B,MAAAP,EAAaO,CAAK;AAAA,IACpB;AAAA,EACA,EAAA,GAEFE,EAAU,MAAM;AACd,IAAIX,EAAa,YACfA,EAAa,UAAU;AAAA,EAE3B,GAAG,CAAE,CAAA,GAGLW,EAAU,MAAM;AACd,IAAAT,EAAa,CAAQU,MACfrB,EAAM,UAAU,KAEhBqB,KAAQrB,EAAM,SAAe,IAE1BC,CACR;AAAA,EACA,GAAA,CAACA,GAAcD,EAAM,MAAM,CAAC,GAG7B,gBAAAsB,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACE,GAAIzB,EAAM,SAAS,KAAK;AAAA,UACvB,YAAYU,IAAY;AAAA,UACxB,oBAAoBD,EAAa,UAAU,IAAI;AAAA,QACjD;AAAA,QAEC,UAAMT,EAAA,IAAI,CAAC0B,GAAMR,MAChB,gBAAAM,EAACG,GAAA,EAA0C,UAAAD,EAAK,QAAb,GAAAR,CAAqB,CACzD;AAAA,MAAA;AAAA,IACH;AAAA,IAGClB,EAAM,SAAS,KACd,gBAAAwB,EAACI,GAAA,EAAwB,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UACjF,UAAA,gBAAAJ,EAACK,GAAA,EACE,UAAA7B,EAAM,IAAI,CAAC0B,GAAMR,MAChB,gBAAAM,EAACM,GACC,EAAA,UAAA,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,aAAab,MAAUR;AAAA,QACvB,cAAcgB,EAAK;AAAA,QACnB,SAAS,MAAMV,EAA6BE,CAAK;AAAA,QAEhD,UAAAQ,EAAK,eAAeR,MAAUR,IAC7B,gBAAAc,EAACQ,GAAS,EAAA,KAAKC,EAAc,YAAY,KAAI,YAAA,CAAY,IAEzD,gBAAAT;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,WAAW7B,IAAe,cAAc;AAAA,YACxC,QAAQa,MAAUR,IAAY,UAAU;AAAA,YACxC,eAAe;AAAA,YAEd,UAAQQ,IAAA;AAAA,UAAA;AAAA,QACX;AAAA,MAAA;AAAA,IAfoB,EAAA,GAAAA,CAkB1B,CACD,EACH,CAAA,GACF;AAAA,MAIDiB,IAAAnC,EAAMU,CAAS,MAAf,gBAAAyB,EAAkB,oCAChBC,GAA4B,EAAA,UAAApC,EAAMU,CAAS,EAAE,cAAc,CAAA;AAAA,EAEhE,EAAA,CAAA;AAEJ,GAEa2B,IAAWC,EAAKC,EAAWxC,CAAiB,CAAC;"}

package/dist/features/circle-games/game-launcher/comps/carousel-badge/carousel-badge-style.js

@@ -0,0 +1,20 @@
+import e from "styled-components";
+const t = e.div`
+  display: flex;
+  gap: 16px;
+  height: 24px;
+`, p = e.div`
+  display: flex;
+  align-items: center;
+  height: 24px;
+`, d = e.img`
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+`;
+export {
+  p as Badge,
+  t as BadgeContainer,
+  d as StyledIcon
+};
+//# sourceMappingURL=carousel-badge-style.js.map

package/dist/features/circle-games/game-launcher/comps/carousel-badge/carousel-badge-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-badge-style.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel-badge/carousel-badge-style.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const BadgeContainer = styled.div`\n  display: flex;\n  gap: 16px;\n  height: 24px;\n`;\n\nexport const Badge = styled.div`\n  display: flex;\n  align-items: center;\n  height: 24px;\n`;\n\nexport const StyledIcon = styled.img`\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n`;\n"],"names":["BadgeContainer","styled","Badge","StyledIcon"],"mappings":";AAEO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMxBC,IAAQD,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfE,IAAaF,EAAO;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/carousel-badge/carousel-badge.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { BadgeContainer as e } from "./carousel-badge-style.js";
+import { SingleBadge as a } from "./carousel-single-badge.js";
+const u = ({ badges: l, style: t }) => /* @__PURE__ */ r(e, { style: t, children: l.map((o, i) => /* @__PURE__ */ r(
+  a,
+  {
+    illustration: o.illustration,
+    value: o.value,
+    color: o.color,
+    label: o.label
+  },
+  i
+)) });
+export {
+  u as BadgesGroup
+};
+//# sourceMappingURL=carousel-badge.js.map

package/dist/features/circle-games/game-launcher/comps/carousel-badge/carousel-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-badge.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel-badge/carousel-badge.tsx"],"sourcesContent":["import { BadgeContainer } from './carousel-badge-style';\nimport type { IBadgeData } from './carousel-badge-type';\nimport { SingleBadge } from './carousel-single-badge';\n\ninterface BadgesGroupProps {\n  badges: IBadgeData[];\n  style?: React.CSSProperties;\n}\n\nexport const BadgesGroup: React.FC<BadgesGroupProps> = ({ badges, style }) => {\n  return (\n    <BadgeContainer style={style}>\n      {badges.map((badge, index) => (\n        <SingleBadge\n          key={index}\n          illustration={badge.illustration}\n          value={badge.value}\n          color={badge.color}\n          label={badge.label}\n        />\n      ))}\n    </BadgeContainer>\n  );\n};\n"],"names":["BadgesGroup","badges","style","BadgeContainer","badge","index","jsx","SingleBadge"],"mappings":";;;AASO,MAAMA,IAA0C,CAAC,EAAE,QAAAC,GAAQ,OAAAC,0BAE7DC,GAAe,EAAA,OAAAD,GACb,YAAO,IAAI,CAACE,GAAOC,MAClB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IAEC,cAAcH,EAAM;AAAA,IACpB,OAAOA,EAAM;AAAA,IACb,OAAOA,EAAM;AAAA,IACb,OAAOA,EAAM;AAAA,EAAA;AAAA,EAJRC;AAMR,CAAA,EACH,CAAA;"}

package/dist/features/circle-games/game-launcher/comps/carousel-badge/carousel-single-badge.js

@@ -0,0 +1,20 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { useTheme as s } from "styled-components";
+import d from "../../../../ui/text/text.js";
+import { EDeviceType as p } from "../../../../ui/theme/constants.js";
+import { Badge as l, StyledIcon as f } from "./carousel-badge-style.js";
+const h = ({ illustration: o, value: t, color: m, label: e }) => {
+  const { device: c } = s(), i = c <= p.TABLET;
+  return /* @__PURE__ */ r(l, { children: [
+    /* @__PURE__ */ n(f, { src: o, alt: e || "badge" }),
+    /* @__PURE__ */ r(d, { $renderAs: i ? "ub3" : "ub2", $color: m, children: [
+      t,
+      " ",
+      e
+    ] })
+  ] });
+};
+export {
+  h as SingleBadge
+};
+//# sourceMappingURL=carousel-single-badge.js.map

package/dist/features/circle-games/game-launcher/comps/carousel-badge/carousel-single-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-single-badge.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel-badge/carousel-single-badge.tsx"],"sourcesContent":["import { useTheme } from 'styled-components';\n\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport type { TColorNames } from '../../../../ui/types';\nimport { Badge, StyledIcon } from './carousel-badge-style';\n\nexport interface SingleBadgeProps {\n  illustration: string;\n  value: number | string;\n  color: TColorNames;\n  label?: string;\n}\n\nexport const SingleBadge: React.FC<SingleBadgeProps> = ({ illustration, value, color, label }) => {\n  const { device } = useTheme();\n  const useSmallFont = device <= EDeviceType.TABLET;\n\n  return (\n    <Badge>\n      <StyledIcon src={illustration} alt={label || 'badge'} />\n      <Text $renderAs={useSmallFont ? 'ub3' : 'ub2'} $color={color}>\n        {value} {label}\n      </Text>\n    </Badge>\n  );\n};\n"],"names":["SingleBadge","illustration","value","color","label","device","useTheme","useSmallFont","EDeviceType","Badge","jsx","StyledIcon","Text"],"mappings":";;;;;AAcO,MAAMA,IAA0C,CAAC,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,OAAAC,QAAY;AAC1F,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAeF,KAAUG,EAAY;AAE3C,2BACGC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAW,EAAA,KAAKV,GAAc,KAAKG,KAAS,SAAS;AAAA,sBACrDQ,GAAK,EAAA,WAAWL,IAAe,QAAQ,OAAO,QAAQJ,GACpD,UAAA;AAAA,MAAAD;AAAA,MAAM;AAAA,MAAEE;AAAA,IAAA,GACX;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/features/circle-games/game-launcher/comps/circular-game-card/circular-game-card-styled.js

@@ -0,0 +1,68 @@
+import t from "styled-components";
+import r from "../../../../ui/layout/flex-view.js";
+import { GAME_LAUNCHER_SIZE as e } from "../card-container/constants.js";
+import { BORDER_WIDTH as o, GAME_LAUNCHER_ASSET_PADDING as i } from "./constants.js";
+const a = t.div`
+  position: absolute;
+  z-index: 5;
+  height: ${e}px;
+  width: ${e}px;
+  border-radius: 50%;
+  border: ${o}px solid #fff;
+  cursor: pointer;
+`, l = t.div`
+  position: absolute;
+  height: ${e + i}px;
+  width: ${e + i}px;
+  border-radius: 50%;
+  top: ${-i / 2 - o}px;
+  left: ${-i / 2 - o}px;
+  z-index: 4;
+`, x = t.div`
+  height: ${52}px;
+  width: ${60}px;
+  top: ${-30}px;
+  left: ${e / 2 - 30}px;
+  z-index: 6;
+  overflow: visible;
+`;
+t.div`
+  position: absolute;
+  width: ${e}px;
+  height: ${e}px;
+  border-radius: 50%;
+  background: transparent;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+
+  transform-origin: center;
+  transform: rotate(0deg); // change dynamically if needed
+`;
+const c = t.img`
+  position: absolute;
+  width: 100%;
+  object-fit: contain;
+  pointer-events: none;
+`, f = t.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+`, h = t(r)`
+  position: absolute;
+  top: -28px;
+  display: flex;
+  justify-content: center;
+`;
+export {
+  f as CardWithTickWrapper,
+  a as CircularGameCardWrapper,
+  c as DisplayNameImage,
+  h as ExtendedFlexView,
+  x as PillTickContainer,
+  l as ProgressRingLottieContainer
+};
+//# sourceMappingURL=circular-game-card-styled.js.map

package/dist/features/circle-games/game-launcher/comps/circular-game-card/circular-game-card-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-game-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/circular-game-card/circular-game-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport { GAME_LAUNCHER_SIZE } from '../card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING, BORDER_WIDTH } from './constants';\n\nexport const CircularGameCardWrapper = styled.div`\n  position: absolute;\n  z-index: 5;\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  border-radius: 50%;\n  border: ${BORDER_WIDTH}px solid #fff;\n  cursor: pointer;\n`;\n\nexport const ProgressRingLottieContainer = styled.div`\n  position: absolute;\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  border-radius: 50%;\n  top: ${-GAME_LAUNCHER_ASSET_PADDING / 2 - BORDER_WIDTH}px;\n  left: ${-GAME_LAUNCHER_ASSET_PADDING / 2 - BORDER_WIDTH}px;\n  z-index: 4;\n`;\n\nexport const PillTickContainer = styled.div`\n  height: ${52}px;\n  width: ${60}px;\n  top: ${-30}px;\n  left: ${GAME_LAUNCHER_SIZE / 2 - 30}px;\n  z-index: 6;\n  overflow: visible;\n`;\n\nexport const GameCardSegmentWrapper = styled.div`\n  position: absolute;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  height: ${GAME_LAUNCHER_SIZE}px;\n  border-radius: 50%;\n  background: transparent;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n\n  transform-origin: center;\n  transform: rotate(0deg); // change dynamically if needed\n`;\n\nexport const DisplayNameImage = styled.img`\n  position: absolute;\n  width: 100%;\n  object-fit: contain;\n  pointer-events: none;\n`;\n\nexport const CardWithTickWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n`;\n\nexport const ExtendedFlexView = styled(FlexView)`\n  position: absolute;\n  top: -28px;\n  display: flex;\n  justify-content: center;\n`;\n"],"names":["CircularGameCardWrapper","styled","GAME_LAUNCHER_SIZE","BORDER_WIDTH","ProgressRingLottieContainer","GAME_LAUNCHER_ASSET_PADDING","PillTickContainer","DisplayNameImage","CardWithTickWrapper","ExtendedFlexView","FlexView"],"mappings":";;;;AAMO,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA,YAGlCC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA,YAEjBC,CAAY;AAAA;AAAA,GAIXC,IAA8BH,EAAO;AAAA;AAAA,YAEtCC,IAAqBG,CAA2B;AAAA,WACjDH,IAAqBG,CAA2B;AAAA;AAAA,SAElD,CAACA,IAA8B,IAAIF,CAAY;AAAA,UAC9C,CAACE,IAA8B,IAAIF,CAAY;AAAA;AAAA,GAI5CG,IAAoBL,EAAO;AAAA,YAC5B,EAAE;AAAA,WACH,EAAE;AAAA,SACJ,GAAG;AAAA,UACFC,IAAqB,IAAI,EAAE;AAAA;AAAA;AAAA;AAKCD,EAAO;AAAA;AAAA,WAElCC,CAAkB;AAAA,YACjBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcvB,MAAMK,IAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1BO,IAAsBP,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BQ,IAAmBR,EAAOS,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/circular-game-card/circular-game-card.js

@@ -0,0 +1,87 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { memo as _, forwardRef as G, useRef as i, useState as d, useCallback as u, useImperativeHandle as v, useMemo as T } from "react";
+import { LOTTIE as g } from "../../../../../assets/lottie/lottie.js";
+import I from "../../../../ui/lottie-animation/lottie-animation.js";
+import { CardContainer as F } from "../card-container/card-container.js";
+import { GameCardContent as x } from "../game-card-content/game-card-content.js";
+import { CardWithTickWrapper as H, CircularGameCardWrapper as M, ProgressRingLottieContainer as N, DisplayNameImage as j, ExtendedFlexView as w, PillTickContainer as O } from "./circular-game-card-styled.js";
+const U = ({ data: r, label: L, initialValue: l = 0, value: t, maxValue: o = 1 }, h) => {
+  const s = i(null), a = i(null), m = i(null), [c, b] = d(!1), [k, P] = d("WHITE_T_87"), R = u(() => {
+    var e;
+    (e = r == null ? void 0 : r.onPress) == null || e.call(r);
+  }, [r]), y = u((e) => {
+    b(!0), P(e);
+  }, []);
+  v(h, () => ({
+    labelRef: s,
+    circularCardWrapperRef: a,
+    startLabelAnimation: y
+  }));
+  const p = T(() => {
+    if (o <= 0)
+      return;
+    const e = 92, C = e / o, E = Math.min(C * l, e), S = Math.min(C * t + 1, e);
+    return [E, S];
+  }, [l, o, t]), A = T(
+    () => ({
+      renderer: "canvas",
+      autoplay: !0,
+      loop: !1,
+      initialSegment: p
+    }),
+    [p]
+  ), W = {
+    autoplay: !1,
+    loop: !1,
+    renderer: "canvas"
+  };
+  return /* @__PURE__ */ f(H, { children: [
+    /* @__PURE__ */ n(
+      F,
+      {
+        ref: a,
+        labelRef: s,
+        label: L,
+        isAnimated: c,
+        labelColor: c ? k : "WHITE_T_60",
+        children: /* @__PURE__ */ f(M, { onClick: R, children: [
+          t && /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(
+            I,
+            {
+              src: g.LEVELUP_RINGS,
+              settings: A,
+              animateOnIntersect: !0,
+              eventListener: {
+                name: "complete",
+                callback: () => {
+                  var e;
+                  (e = m.current) == null || e.play();
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ n(x, { card: r.card, isCompleted: r.isCompleted }),
+          /* @__PURE__ */ n(
+            j,
+            {
+              src: r.displayNameImage || void 0,
+              alt: `${r.name} label`
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ n(w, { children: /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(
+      I,
+      {
+        ref: m,
+        src: g.PILL_TICK,
+        settings: W
+      }
+    ) }) })
+  ] });
+}, Q = _(G(U));
+export {
+  Q as CircularGameCard
+};
+//# sourceMappingURL=circular-game-card.js.map

package/dist/features/circle-games/game-launcher/comps/circular-game-card/circular-game-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/circular-game-card/circular-game-card.tsx"],"sourcesContent":["import type { ForwardRefRenderFunction } from 'react';\nimport React, {\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { type ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { TColorNames } from '../../../../ui/types';\nimport { CardContainer } from '../card-container/card-container';\nimport { GameCardContent } from '../game-card-content/game-card-content';\nimport * as Styled from './circular-game-card-styled';\nimport type { ICircularGameCardProps, ICircularGameCardRefs } from './circular-game-card-types';\n\nconst CircularGameCardComponent: ForwardRefRenderFunction<\n  ICircularGameCardRefs,\n  ICircularGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n  const labelRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const cardWrapperRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const greenTickLottieRef = useRef<ILottieAnimationRef>(null);\n  const [isAnimated, setIsAnimated] = useState(false);\n  const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n  const onCardClick = useCallback(() => {\n    data?.onPress?.();\n  }, [data]);\n\n  const startLabelAnimation = useCallback((color: TColorNames) => {\n    setIsAnimated(true);\n    setAnimatedColor(color);\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    labelRef,\n    circularCardWrapperRef: cardWrapperRef,\n    startLabelAnimation,\n  }));\n\n  const animationSegments: [number, number] | undefined = useMemo(() => {\n    if (maxValue <= 0) {\n      return;\n    }\n\n    const totalFrames = 92;\n    const framesPerValue = totalFrames / maxValue;\n\n    const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n    const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n    return [initialFrameToPlay, finalFrameToPlay];\n  }, [initialValue, maxValue, value]);\n\n  const levelUpAnimationSettings = useMemo(\n    () => ({\n      renderer: 'canvas',\n      autoplay: true,\n      loop: false,\n      initialSegment: animationSegments,\n    }),\n    [animationSegments],\n  );\n\n  const greenTickAnimationSettings = {\n    autoplay: false,\n    loop: false,\n    renderer: 'canvas',\n  };\n\n  return (\n    <Styled.CardWithTickWrapper>\n      <CardContainer\n        ref={cardWrapperRef}\n        labelRef={labelRef}\n        label={gameCategoryLabel}\n        isAnimated={isAnimated}\n        labelColor={isAnimated ? animatedColor : 'WHITE_T_60'}\n      >\n        <Styled.CircularGameCardWrapper onClick={onCardClick}>\n          {value && (\n            <Styled.ProgressRingLottieContainer>\n              <LottieAnimation\n                src={LOTTIE.LEVELUP_RINGS}\n                settings={levelUpAnimationSettings}\n                animateOnIntersect\n                eventListener={{\n                  name: 'complete',\n                  callback: () => {\n                    greenTickLottieRef.current?.play();\n                  },\n                }}\n              />\n            </Styled.ProgressRingLottieContainer>\n          )}\n          <GameCardContent card={data.card} isCompleted={data.isCompleted} />\n\n          <Styled.DisplayNameImage\n            src={data.displayNameImage || undefined}\n            alt={`${data.name} label`}\n          />\n        </Styled.CircularGameCardWrapper>\n      </CardContainer>\n      <Styled.ExtendedFlexView>\n        <Styled.PillTickContainer>\n          <LottieAnimation\n            ref={greenTickLottieRef}\n            src={LOTTIE.PILL_TICK}\n            settings={greenTickAnimationSettings}\n          />\n        </Styled.PillTickContainer>\n      </Styled.ExtendedFlexView>\n    </Styled.CardWithTickWrapper>\n  );\n};\n\nexport const CircularGameCard = memo(forwardRef(CircularGameCardComponent));\n"],"names":["CircularGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","useRef","cardWrapperRef","greenTickLottieRef","isAnimated","setIsAnimated","useState","animatedColor","setAnimatedColor","onCardClick","useCallback","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","greenTickAnimationSettings","jsxs","Styled.CardWithTickWrapper","jsx","CardContainer","Styled.CircularGameCardWrapper","Styled.ProgressRingLottieContainer","LottieAnimation","LOTTIE","GameCardContent","Styled.DisplayNameImage","Styled.ExtendedFlexView","Styled.PillTickContainer","CircularGameCard","memo","forwardRef"],"mappings":";;;;;;;AAoBA,MAAMA,IAGF,CAAC,EAAE,MAAAC,GAAM,OAAOC,GAAmB,cAAAC,IAAe,GAAG,OAAAC,GAAO,UAAAC,IAAW,EAAE,GAAGC,MAAQ;AAChF,QAAAC,IAAWC,EAAuB,IAAI,GACtCC,IAAiBD,EAAuB,IAAI,GAC5CE,IAAqBF,EAA4B,IAAI,GACrD,CAACG,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAeC,CAAgB,IAAIF,EAAsB,YAAY,GAEtEG,IAAcC,EAAY,MAAM;;AACpC,KAAAC,IAAAjB,KAAA,gBAAAA,EAAM,YAAN,QAAAiB,EAAA,KAAAjB;AAAA,EAAgB,GACf,CAACA,CAAI,CAAC,GAEHkB,IAAsBF,EAAY,CAACG,MAAuB;AAC9D,IAAAR,EAAc,EAAI,GAClBG,EAAiBK,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,EAAAC,EAAoBf,GAAK,OAAO;AAAA,IAC9B,UAAAC;AAAA,IACA,wBAAwBE;AAAA,IACxB,qBAAAU;AAAA,EACA,EAAA;AAEI,QAAAG,IAAkDC,EAAQ,MAAM;AACpE,QAAIlB,KAAY;AACd;AAGF,UAAMmB,IAAc,IACdC,IAAiBD,IAAcnB,GAE/BqB,IAAqB,KAAK,IAAID,IAAiBtB,GAAcqB,CAAW,GACxEG,IAAmB,KAAK,IAAIF,IAAiBrB,IAAQ,GAAGoB,CAAW;AAElE,WAAA,CAACE,GAAoBC,CAAgB;AAAA,EAC3C,GAAA,CAACxB,GAAcE,GAAUD,CAAK,CAAC,GAE5BwB,IAA2BL;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,gBAAgBD;AAAA,IAAA;AAAA,IAElB,CAACA,CAAiB;AAAA,EAAA,GAGdO,IAA6B;AAAA,IACjC,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAIV,SAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKxB;AAAA,QACL,UAAAF;AAAA,QACA,OAAOL;AAAA,QACP,YAAAS;AAAA,QACA,YAAYA,IAAaG,IAAgB;AAAA,QAEzC,UAAC,gBAAAgB,EAAAI,GAAA,EAA+B,SAASlB,GACtC,UAAA;AAAA,UACCZ,KAAA,gBAAA4B,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,KAAKC,EAAO;AAAA,cACZ,UAAUT;AAAA,cACV,oBAAkB;AAAA,cAClB,eAAe;AAAA,gBACb,MAAM;AAAA,gBACN,UAAU,MAAM;;AACd,mBAAAV,IAAAR,EAAmB,YAAnB,QAAAQ,EAA4B;AAAA,gBAC9B;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,4BAEDoB,GAAgB,EAAA,MAAMrC,EAAK,MAAM,aAAaA,EAAK,aAAa;AAAA,UAEjE,gBAAA+B;AAAA,YAACO;AAAAA,YAAA;AAAA,cACC,KAAKtC,EAAK,oBAAoB;AAAA,cAC9B,KAAK,GAAGA,EAAK,IAAI;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IACF;AAAA,sBACCuC,GAAA,EACC,UAAC,gBAAAR,EAAAS,GAAA,EACC,UAAA,gBAAAT;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAK1B;AAAA,QACL,KAAK2B,EAAO;AAAA,QACZ,UAAUR;AAAA,MAAA;AAAA,OAEd,EACF,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ,GAEaa,IAAmBC,EAAKC,EAAW5C,CAAyB,CAAC;"}

package/dist/features/circle-games/game-launcher/comps/circular-game-card/constants.js

@@ -0,0 +1,7 @@
+import { GAME_LAUNCHER_SIZE as E } from "../card-container/constants.js";
+const _ = E * 17.5 / 100, o = 2;
+export {
+  o as BORDER_WIDTH,
+  _ as GAME_LAUNCHER_ASSET_PADDING
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/circle-games/game-launcher/comps/circular-game-card/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/circular-game-card/constants.ts"],"sourcesContent":["import { GAME_LAUNCHER_SIZE } from '../card-container/constants';\n\nexport const GAME_LAUNCHER_ASSET_PADDING = (GAME_LAUNCHER_SIZE * 17.5) / 100;\n\nexport const BORDER_WIDTH = 2;\n"],"names":["GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_SIZE","BORDER_WIDTH"],"mappings":";AAEa,MAAAA,IAA+BC,IAAqB,OAAQ,KAE5DC,IAAe;"}

package/dist/features/circle-games/game-launcher/comps/game-card-content/constants.js

@@ -0,0 +1,6 @@
+import { GAME_LAUNCHER_SIZE as E } from "../card-container/constants.js";
+const t = Math.ceil(E * 120 / 100);
+export {
+  t as ASSET_CONTAINER_SIZE
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/circle-games/game-launcher/comps/game-card-content/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/game-card-content/constants.ts"],"sourcesContent":["import { GAME_LAUNCHER_SIZE } from '../card-container/constants';\n\nexport const ASSET_CONTAINER_SIZE = Math.ceil((GAME_LAUNCHER_SIZE * 120) / 100);\n"],"names":["ASSET_CONTAINER_SIZE","GAME_LAUNCHER_SIZE"],"mappings":";AAEO,MAAMA,IAAuB,KAAK,KAAMC,IAAqB,MAAO,GAAG;"}