@cuemath/leap 3.5.0 → 3.5.1-akm-6

package/dist/features/circle-games/about-game-activities/about-game-activities.js

@@ -0,0 +1,69 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { memo as $, useState as h, useMemo as x, useCallback as u, useEffect as v } from "react";
+import { useTheme as C } from "styled-components";
+import V from "../../../assets/line-icons/icons/back2.js";
+import { useGetTrackedViews as y } from "../../journey/hooks/use-get-tracked-views.js";
+import { TRACKING_ID_STUDENT as k } from "../../journey/tracking-id/tracking-id-student.js";
+import { useJourney as g } from "../../journey/use-journey/use-journey.js";
+import N from "../../ui/buttons/button/button.js";
+import B from "../../ui/buttons/icon-button/icon-button.js";
+import p from "../../ui/separator/separator.js";
+import I from "../../ui/text/text.js";
+import { ArcContainer as F } from "../comps/arc-container/arc-container.js";
+import { getAboutGameActivitiesStepsForKTo1 as O, getAboutGameActivitiesSteps as D } from "./about-game-activities-constants.js";
+import { Container as M, ContentArea as L, VideoContainer as U, Video as H, Header as j, Footer as z, NavigationContainer as K } from "./about-game-activities-styled.js";
+import { EDeviceType as P } from "../../ui/theme/constants.js";
+const W = $(({ show: s = !1, isGradeKTo1: E = !1, onShowInfoChange: o }) => {
+  const { device: G } = C(), n = G <= P.TABLET, [t, c] = h(0), { trackView: f } = g(), A = y().includes(
+    k.INFO_ABOUT_GAME_ACTIVITIES
+  ), [a, T] = h(!A || s), l = x(() => E ? O(n) : D(n), [n]), b = t === 0, r = t === l.length - 1, i = l[t], d = u(() => {
+    T(!1);
+  }, []), S = u(() => {
+    t > 0 && c(t - 1);
+  }, [t]), _ = u(() => {
+    t < l.length - 1 && c(t + 1), r && (f(k.INFO_ABOUT_GAME_ACTIVITIES), d());
+  }, [t, d, r, f]);
+  return v(() => {
+    s && (T(!0), c(0));
+  }, [s]), v(() => {
+    o == null || o(a);
+  }, [a, o]), i ? a && /* @__PURE__ */ e(F, { onClose: A ? d : void 0, children: /* @__PURE__ */ m(M, { children: [
+    /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ m(H, { playsInline: !0, autoPlay: !0, loop: !0, muted: !0, children: [
+      /* @__PURE__ */ e("source", { src: i.videoUrl, type: "video/mp4" }),
+      "Your browser does not support the video tag."
+    ] }, t) }) }),
+    /* @__PURE__ */ e(p, { height: 40 }),
+    /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(I, { $renderAs: "ah4-bold", $renderOnMobileAs: "ab1-black", $color: "WHITE", $align: "center", children: i.headerText }) }),
+    /* @__PURE__ */ e(p, { height: 32 }),
+    /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(I, { $renderAs: "ub1", $renderOnMobileAs: "ub2", $color: "WHITE_T_87", $align: "center", children: i.footerText }) }),
+    /* @__PURE__ */ e(p, { height: 40 }),
+    /* @__PURE__ */ m(K, { $isFirstStep: b, children: [
+      !b && /* @__PURE__ */ e(
+        B,
+        {
+          Icon: V,
+          onClick: S,
+          disabled: !1,
+          size: "small",
+          analyticsLabel: "previous-step",
+          renderAs: "black-dark"
+        }
+      ),
+      /* @__PURE__ */ e(
+        N,
+        {
+          label: r ? "Get Started" : "Next",
+          onClick: _,
+          disabled: !1,
+          size: "small",
+          analyticsLabel: r ? "get-started" : "next-step",
+          renderAs: r ? "secondary-dark" : "black-dark"
+        }
+      )
+    ] })
+  ] }) }) : null;
+}), ae = W;
+export {
+  ae as default
+};
+//# sourceMappingURL=about-game-activities.js.map

package/dist/features/circle-games/about-game-activities/about-game-activities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"about-game-activities.js","sources":["../../../../src/features/circle-games/about-game-activities/about-game-activities.tsx"],"sourcesContent":["import { useState, useCallback, memo, useMemo, useEffect } from 'react';\nimport type { FC } from 'react';\nimport { useTheme } from 'styled-components';\n\n\nimport BackIcon from '../../../assets/line-icons/icons/back2';\nimport { useGetTrackedViews } from '../../journey/hooks/use-get-tracked-views';\nimport { TRACKING_ID_STUDENT } from '../../journey/tracking-id/tracking-id-student';\nimport { useJourney } from '../../journey/use-journey/use-journey';\nimport Button from '../../ui/buttons/button/button';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { ArcContainer } from '../comps/arc-container/arc-container';\nimport { getAboutGameActivitiesSteps, getAboutGameActivitiesStepsForKTo1 } from './about-game-activities-constants';\nimport * as Styled from './about-game-activities-styled';\nimport type { IAboutGameActivitiesProps } from './about-game-activities-types';\nimport { EDeviceType } from '../../ui/theme/constants';\n\nconst AboutGameActivities: FC<IAboutGameActivitiesProps> = memo(({ show = false, isGradeKTo1 = false, onShowInfoChange }) => {\n  const { device } = useTheme();\n  const isTouchDevice = device <= EDeviceType.TABLET;\n  const [currentStep, setCurrentStep] = useState(0);\n  const { trackView } = useJourney();\n  const trackedViews = useGetTrackedViews();\n  const isInfoAboutGameActivitiesViewed = trackedViews.includes(\n    TRACKING_ID_STUDENT.INFO_ABOUT_GAME_ACTIVITIES,\n  );\n  const [showInfo, setShowInfo] = useState(!isInfoAboutGameActivitiesViewed || show);\n  \n\n  const steps = useMemo(() => isGradeKTo1 ? getAboutGameActivitiesStepsForKTo1(isTouchDevice):getAboutGameActivitiesSteps(isTouchDevice), [isTouchDevice]);\n  const isFirstStep = currentStep === 0;\n  const isLastStep = currentStep === steps.length - 1;\n\n  const currentStepData = steps[currentStep];\n\n\n  const handleClose = useCallback(() => {\n    setShowInfo(false);\n  }, []);\n\n  const handlePrevious = useCallback(() => {\n    if (currentStep > 0) {\n      setCurrentStep(currentStep - 1);\n    }\n  }, [currentStep]);\n\n  const handleNext = useCallback(() => {\n    if (currentStep < steps.length - 1) {\n      setCurrentStep(currentStep + 1);\n    }\n\n    if (isLastStep) {\n      trackView(TRACKING_ID_STUDENT.INFO_ABOUT_GAME_ACTIVITIES);\n      handleClose();\n    }\n  }, [currentStep, handleClose, isLastStep, trackView]);\n\n  useEffect(() => {\n    if (show) {\n      setShowInfo(true);\n      setCurrentStep(0);\n    }\n  }, [show]);\n\n  useEffect(() => {\n    onShowInfoChange?.(showInfo);\n  }, [showInfo, onShowInfoChange]);\n\n\n  if (!currentStepData) {\n    return null;\n  }\n\n  return (\n    showInfo && (\n      <ArcContainer onClose={isInfoAboutGameActivitiesViewed ? handleClose : undefined}>\n        <Styled.Container>\n\n          <Styled.ContentArea>\n            <Styled.VideoContainer>\n              <Styled.Video key={currentStep} playsInline autoPlay loop muted>\n                <source src={currentStepData.videoUrl} type=\"video/mp4\" />\n                Your browser does not support the video tag.\n              </Styled.Video>\n            </Styled.VideoContainer>\n          </Styled.ContentArea>\n\n          <Separator height={40} />\n                    <Styled.Header>\n            <Text $renderAs=\"ah4-bold\" $renderOnMobileAs=\"ab1-black\" $color=\"WHITE\" $align=\"center\">\n              {currentStepData.headerText}\n            </Text>\n          </Styled.Header>\n\n          <Separator height={32} />\n\n          <Styled.Footer>\n            <Text $renderAs=\"ub1\" $renderOnMobileAs=\"ub2\" $color=\"WHITE_T_87\" $align=\"center\">\n              {currentStepData.footerText}\n            </Text>\n          </Styled.Footer>\n\n          <Separator height={40} />\n\n          <Styled.NavigationContainer $isFirstStep={isFirstStep}>\n            {!isFirstStep && (\n              <IconButton\n                Icon={BackIcon}\n                onClick={handlePrevious}\n                disabled={false}\n                size=\"small\"\n                analyticsLabel=\"previous-step\"\n                renderAs=\"black-dark\"\n              />\n            )}\n            <Button\n              label={isLastStep ? 'Get Started' : 'Next'}\n              onClick={handleNext}\n              disabled={false}\n              size=\"small\"\n              analyticsLabel={isLastStep ? 'get-started' : 'next-step'}\n              renderAs={isLastStep ? 'secondary-dark' : 'black-dark'}\n            />\n          </Styled.NavigationContainer>\n        </Styled.Container>\n      </ArcContainer>\n    )\n  );\n});\n\nexport default AboutGameActivities;\n"],"names":["AboutGameActivities","memo","show","isGradeKTo1","onShowInfoChange","device","useTheme","isTouchDevice","EDeviceType","currentStep","setCurrentStep","useState","trackView","useJourney","isInfoAboutGameActivitiesViewed","useGetTrackedViews","TRACKING_ID_STUDENT","showInfo","setShowInfo","steps","useMemo","getAboutGameActivitiesStepsForKTo1","getAboutGameActivitiesSteps","isFirstStep","isLastStep","currentStepData","handleClose","useCallback","handlePrevious","handleNext","useEffect","jsx","ArcContainer","jsxs","Styled.Container","Styled.ContentArea","Styled.VideoContainer","Styled.Video","Separator","Styled.Header","Text","Styled.Footer","Styled.NavigationContainer","IconButton","BackIcon","Button","AboutGameActivities$1"],"mappings":"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"}

package/dist/features/circle-games/comps/arc-container/arc-container-styled.js

@@ -0,0 +1,77 @@
+import { styled as i } from "styled-components";
+import { BLUR_VIEW_Z_INDEX as o, ARC_HEIGHT as e, CROSS_Z_INDEX as r, ARC_CONTENT_Z_INDEX as s } from "./constants.js";
+const c = i.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  z-index: ${o};
+`, d = i.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  background: ${({ theme: t }) => t.colors.WHITE_T_05};
+  z-index: ${o};
+  backdrop-filter: blur(4px);
+`, p = i.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  background: ${({ theme: t }) => t.colors.TRANSPARENT};
+  display: flex;
+  align-items: flex-end;
+  z-index: ${o};
+`, f = i.div`
+  position: relative;
+  height: auto;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme: t }) => t.colors.BLACK_2};
+  max-height: calc(100% - ${e + 80}px);
+`, h = i.div`
+  position: absolute;
+  z-index: ${({ $zIndex: t }) => t};
+  top: ${({ top: t }) => t}px;
+  display: flex;
+  width: ${({ width: t }) => t};
+  border-top-right-radius: ${({ width: t }) => t};
+  border-top-left-radius: ${({ width: t }) => t};
+  aspect-ratio: 1;
+  transform: scaleX(2);
+  background: ${({ theme: t, showGradient: n }) => n ? `linear-gradient(
+    270deg,
+    rgba(255, 255, 255, 0.15) 0%,
+    #ffffff 50%,
+    rgba(255, 255, 255, 0.15) 100%
+  )` : t.colors.BLACK_2};
+`, u = i.div`
+  position: absolute;
+  top: -${e + 48}px;
+  z-index: ${r};
+  cursor: pointer;
+`, x = i.div`
+  position: relative;
+  z-index: ${s};
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`;
+export {
+  h as Arc,
+  p as ArcContainer,
+  d as ArcContainerOverlay,
+  c as ArcContainerWrapper,
+  x as ArcContent,
+  f as ArcContentContainer,
+  u as CrossIconContainer
+};
+//# sourceMappingURL=arc-container-styled.js.map

package/dist/features/circle-games/comps/arc-container/arc-container-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc-container-styled.js","sources":["../../../../../src/features/circle-games/comps/arc-container/arc-container-styled.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { ARC_CONTENT_Z_INDEX, ARC_HEIGHT, BLUR_VIEW_Z_INDEX, CROSS_Z_INDEX } from './constants';\n\nexport const ArcContainerWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  user-select: none;\n  z-index: ${BLUR_VIEW_Z_INDEX};\n`;\n\nexport const ArcContainerOverlay = styled.div`\n  position: absolute;\n  height: inherit;\n  width: inherit;\n  background: ${({ theme }) => theme.colors.WHITE_T_05};\n  z-index: ${BLUR_VIEW_Z_INDEX};\n  backdrop-filter: blur(4px);\n`;\n\nexport const ArcContainer = styled.div`\n  position: absolute;\n  height: inherit;\n  width: inherit;\n  background: ${({ theme }) => theme.colors.TRANSPARENT};\n  display: flex;\n  align-items: flex-end;\n  z-index: ${BLUR_VIEW_Z_INDEX};\n`;\n\nexport const ArcContentContainer = styled.div`\n  position: relative;\n  height: auto;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  max-height: calc(100% - ${ARC_HEIGHT + 80}px);\n`;\n\nexport const Arc = styled.div<{\n  width?: string;\n  top: number;\n  showGradient?: boolean;\n  $zIndex?: number;\n}>`\n  position: absolute;\n  z-index: ${({ $zIndex }) => $zIndex};\n  top: ${({ top }) => top}px;\n  display: flex;\n  width: ${({ width }) => width};\n  border-top-right-radius: ${({ width }) => width};\n  border-top-left-radius: ${({ width }) => width};\n  aspect-ratio: 1;\n  transform: scaleX(2);\n  background: ${({ theme, showGradient }) =>\n    showGradient\n      ? `linear-gradient(\n    270deg,\n    rgba(255, 255, 255, 0.15) 0%,\n    #ffffff 50%,\n    rgba(255, 255, 255, 0.15) 100%\n  )`\n      : theme.colors.BLACK_2};\n`;\n\nexport const CrossIconContainer = styled.div`\n  position: absolute;\n  top: -${ARC_HEIGHT + 48}px;\n  z-index: ${CROSS_Z_INDEX};\n  cursor: pointer;\n`;\n\nexport const ArcContent = styled.div`\n  position: relative;\n  z-index: ${ARC_CONTENT_Z_INDEX};\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n`;\n"],"names":["ArcContainerWrapper","styled","BLUR_VIEW_Z_INDEX","ArcContainerOverlay","theme","ArcContainer","ArcContentContainer","ARC_HEIGHT","Arc","$zIndex","top","width","showGradient","CrossIconContainer","CROSS_Z_INDEX","ArcContent","ARC_CONTENT_Z_INDEX"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAW7BC,CAAiB;AAAA,GAGjBC,IAAsBF,EAAO;AAAA;AAAA;AAAA;AAAA,gBAI1B,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aACzCF,CAAiB;AAAA;AAAA,GAIjBG,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA,gBAInB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,WAAW;AAAA;AAAA;AAAA,aAG1CF,CAAiB;AAAA,GAGjBI,IAAsBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQ1B,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,4BACvBG,IAAa,EAAE;AAAA,GAG9BC,IAAMP,EAAO;AAAA;AAAA,aAOb,CAAC,EAAE,SAAAQ,EAAQ,MAAMA,CAAO;AAAA,SAC5B,CAAC,EAAE,KAAAC,EAAI,MAAMA,CAAG;AAAA;AAAA,WAEd,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,6BACF,CAAC,EAAE,OAAAA,EAAM,MAAMA,CAAK;AAAA,4BACrB,CAAC,EAAE,OAAAA,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA,gBAGhC,CAAC,EAAE,OAAAP,GAAO,cAAAQ,QACtBA,IACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMAR,EAAM,OAAO,OAAO;AAAA,GAGfS,IAAqBZ,EAAO;AAAA;AAAA,UAE/BM,IAAa,EAAE;AAAA,aACZO,CAAa;AAAA;AAAA,GAIbC,IAAad,EAAO;AAAA;AAAA,aAEpBe,CAAmB;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/comps/arc-container/arc-container.js

@@ -0,0 +1,37 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { memo as c } from "react";
+import C from "../../../../assets/line-icons/icons/cross.js";
+import m from "../../../ui/layout/flex-view.js";
+import { ArcContainerWrapper as a, ArcContainerOverlay as p, ArcContainer as s, ArcContentContainer as A, CrossIconContainer as d, Arc as o, ArcContent as h } from "./arc-container-styled.js";
+import { ARC_HEIGHT as e, WHITE_ARC_Z_INDEX as l, BLACK_ARC_Z_INDEX as I } from "./constants.js";
+const H = c(({ children: i, onClose: n }) => /* @__PURE__ */ r(a, { children: /* @__PURE__ */ t(
+  m,
+  {
+    $position: "relative",
+    $height: "100%",
+    $width: "100%",
+    $alignItems: "center",
+    $justifyContent: "center",
+    children: [
+      /* @__PURE__ */ r(p, {}),
+      /* @__PURE__ */ r(s, { children: /* @__PURE__ */ t(A, { children: [
+        n && /* @__PURE__ */ r(d, { onClick: n, children: /* @__PURE__ */ r(C, { color: "WHITE" }) }),
+        /* @__PURE__ */ r(
+          o,
+          {
+            top: -(e + 3),
+            showGradient: !0,
+            width: "112%",
+            $zIndex: l
+          }
+        ),
+        /* @__PURE__ */ r(o, { top: -e, $zIndex: I, width: "112%" }),
+        /* @__PURE__ */ r(h, { children: i })
+      ] }) })
+    ]
+  }
+) }));
+export {
+  H as ArcContainer
+};
+//# sourceMappingURL=arc-container.js.map

package/dist/features/circle-games/comps/arc-container/arc-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc-container.js","sources":["../../../../../src/features/circle-games/comps/arc-container/arc-container.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport FlexView from '../../../ui/layout/flex-view';\nimport * as Styled from './arc-container-styled';\nimport type { IArcContainerProps } from './arc-container-types';\nimport { ARC_HEIGHT, BLACK_ARC_Z_INDEX, WHITE_ARC_Z_INDEX } from './constants';\n\nexport const ArcContainer = memo(({ children, onClose }: IArcContainerProps) => {\n  return (\n    <Styled.ArcContainerWrapper>\n      <FlexView\n        $position=\"relative\"\n        $height=\"100%\"\n        $width=\"100%\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n      >\n        <Styled.ArcContainerOverlay />\n        <Styled.ArcContainer>\n          <Styled.ArcContentContainer>\n            {onClose && (\n              <Styled.CrossIconContainer onClick={onClose}>\n                <CrossIcon color=\"WHITE\" />\n              </Styled.CrossIconContainer>\n            )}\n            <Styled.Arc\n              top={-(ARC_HEIGHT + 3)}\n              showGradient={true}\n              width=\"112%\"\n              $zIndex={WHITE_ARC_Z_INDEX}\n            />\n            <Styled.Arc top={-ARC_HEIGHT} $zIndex={BLACK_ARC_Z_INDEX} width=\"112%\" />\n\n            <Styled.ArcContent>{children}</Styled.ArcContent>\n          </Styled.ArcContentContainer>\n        </Styled.ArcContainer>\n      </FlexView>\n    </Styled.ArcContainerWrapper>\n  );\n});\n"],"names":["ArcContainer","memo","children","onClose","jsx","Styled.ArcContainerWrapper","jsxs","FlexView","Styled.ArcContainerOverlay","Styled.ArcContainer","Styled.ArcContentContainer","Styled.CrossIconContainer","CrossIcon","Styled.Arc","ARC_HEIGHT","WHITE_ARC_Z_INDEX","BLACK_ARC_Z_INDEX","Styled.ArcContent"],"mappings":";;;;;;AAQO,MAAMA,IAAeC,EAAK,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAE1C,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAEhB,UAAA;AAAA,MAAC,gBAAAH,EAAAI,GAAA,EAA2B;AAAA,wBAC3BC,GAAA,EACC,UAAC,gBAAAH,EAAAI,GAAA,EACE,UAAA;AAAA,QACCP,KAAA,gBAAAC,EAACO,GAAA,EAA0B,SAASR,GAClC,UAAC,gBAAAC,EAAAQ,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,QAEF,gBAAAR;AAAA,UAACS;AAAAA,UAAA;AAAA,YACC,KAAK,EAAEC,IAAa;AAAA,YACpB,cAAc;AAAA,YACd,OAAM;AAAA,YACN,SAASC;AAAA,UAAA;AAAA,QACX;AAAA,QACA,gBAAAX,EAACS,GAAA,EAAW,KAAK,CAACC,GAAY,SAASE,GAAmB,OAAM,QAAO;AAAA,QAEtE,gBAAAZ,EAAAa,GAAA,EAAmB,UAAAf,GAAS;AAAA,MAAA,EAAA,CAC/B,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AAEJ,EAAA,CAAA,CAEH;"}

package/dist/features/circle-games/comps/arc-container/constants.js

@@ -0,0 +1,10 @@
+const _ = 100, E = 101, I = 102, N = 103, C = 104, R = 48;
+export {
+  N as ARC_CONTENT_Z_INDEX,
+  R as ARC_HEIGHT,
+  I as BLACK_ARC_Z_INDEX,
+  _ as BLUR_VIEW_Z_INDEX,
+  C as CROSS_Z_INDEX,
+  E as WHITE_ARC_Z_INDEX
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/circle-games/comps/arc-container/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/features/circle-games/comps/arc-container/constants.ts"],"sourcesContent":["export const BLUR_VIEW_Z_INDEX = 100;\nexport const WHITE_ARC_Z_INDEX = BLUR_VIEW_Z_INDEX + 1;\nexport const BLACK_ARC_Z_INDEX = WHITE_ARC_Z_INDEX + 1;\nexport const ARC_CONTENT_Z_INDEX = BLACK_ARC_Z_INDEX + 1;\nexport const CROSS_Z_INDEX = ARC_CONTENT_Z_INDEX + 1;\nexport const ARC_HEIGHT = 48;\n"],"names":["BLUR_VIEW_Z_INDEX","WHITE_ARC_Z_INDEX","BLACK_ARC_Z_INDEX","ARC_CONTENT_Z_INDEX","CROSS_Z_INDEX","ARC_HEIGHT"],"mappings":"AAAO,MAAMA,IAAoB,KACpBC,IAAoB,KACpBC,IAAoB,KACpBC,IAAsB,KACtBC,IAAgB,KAChBC,IAAa;"}

package/dist/features/circle-games/comps/info-bar/info-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-bar.js","sources":["../../../../../src/features/circle-games/comps/info-bar/info-bar.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { TColorNames, THueNames } from '../../../ui/types';\nimport * as Styled from './info-bar-styled';\nimport type { IInfoBarProps } from './info-bar-types';\n\nconst computeColorsFromHue = (\n  hue: THueNames,\n): { backgroundColor: TColorNames; borderColor: TColorNames } => {\n  return { backgroundColor: `${hue}_6`, borderColor: `${hue}_4` };\n};\n\nexport const InfoBar: React.FC<IInfoBarProps> = ({ children, hue }) => {\n  const { backgroundColor, borderColor } = useMemo(() => computeColorsFromHue(hue), [hue]);\n\n  return (\n    <Styled.InfoBarWrapper $background={backgroundColor} $borderColor={borderColor}>\n      {children}\n    </Styled.InfoBarWrapper>\n  );\n};\n"],"names":["computeColorsFromHue","hue","InfoBar","children","backgroundColor","borderColor","useMemo","jsx","Styled.InfoBarWrapper"],"mappings":";;;AAMA,MAAMA,IAAuB,CAC3BC,OAEO,EAAE,iBAAiB,GAAGA,CAAG,MAAM,aAAa,GAAGA,CAAG,SAG9CC,IAAmC,CAAC,EAAE,UAAAC,GAAU,KAAAF,QAAU;AAC/D,QAAA,EAAE,iBAAAG,GAAiB,aAAAC,EAAA,IAAgBC,EAAQ,MAAMN,EAAqBC,CAAG,GAAG,CAACA,CAAG,CAAC;AAGrF,SAAA,gBAAAM,EAACC,GAAA,EAAsB,aAAaJ,GAAiB,cAAcC,GAChE,UAAAF,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"info-bar.js","sources":["../../../../../src/features/circle-games/comps/info-bar/info-bar.tsx"],"sourcesContent":["import { useMemo, type FC } from 'react';\n\nimport type { TColorNames, THueNames } from '../../../ui/types';\nimport * as Styled from './info-bar-styled';\nimport type { IInfoBarProps } from './info-bar-types';\n\nconst computeColorsFromHue = (\n  hue: THueNames,\n): { backgroundColor: TColorNames; borderColor: TColorNames } => {\n  return { backgroundColor: `${hue}_6`, borderColor: `${hue}_4` };\n};\n\nexport const InfoBar: FC<IInfoBarProps> = ({ children, hue }) => {\n  const { backgroundColor, borderColor } = useMemo(() => computeColorsFromHue(hue), [hue]);\n\n  return (\n    <Styled.InfoBarWrapper $background={backgroundColor} $borderColor={borderColor}>\n      {children}\n    </Styled.InfoBarWrapper>\n  );\n};\n"],"names":["computeColorsFromHue","hue","InfoBar","children","backgroundColor","borderColor","useMemo","jsx","Styled.InfoBarWrapper"],"mappings":";;;AAMA,MAAMA,IAAuB,CAC3BC,OAEO,EAAE,iBAAiB,GAAGA,CAAG,MAAM,aAAa,GAAGA,CAAG,SAG9CC,IAA6B,CAAC,EAAE,UAAAC,GAAU,KAAAF,QAAU;AACzD,QAAA,EAAE,iBAAAG,GAAiB,aAAAC,EAAA,IAAgBC,EAAQ,MAAMN,EAAqBC,CAAG,GAAG,CAACA,CAAG,CAAC;AAGrF,SAAA,gBAAAM,EAACC,GAAA,EAAsB,aAAaJ,GAAiB,cAAcC,GAChE,UAAAF,EACH,CAAA;AAEJ;"}

package/dist/features/circle-games/{game-launcher → game-launcher-v2}/api/get-content-for-today/constants.js

@@ -1,4 +1,4 @@
-const c = "/api/v1/circle";
+const c = "/api/v2/circle";
 export {
   c as BASE_URL
 };

package/dist/features/circle-games/game-launcher-v2/api/get-content-for-today/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/api/get-content-for-today/constants.ts"],"sourcesContent":["export const BASE_URL = '/api/v2/circle';\n"],"names":["BASE_URL"],"mappings":"AAAO,MAAMA,IAAW;"}

package/dist/features/circle-games/game-launcher-v2/api/get-content-for-today/get-circle-home-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-circle-home-api.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/api/get-content-for-today/get-circle-home-api.ts"],"sourcesContent":["import { createGetAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL } from './constants';\nimport type {\n  IGetCircleHomeResponseModel,\n  IGetCircleHomePayloadModel,\n} from './get-circle-home-api-types';\n\nexport const { useGet: useGetCircleHomeAPI, invalidate: invalidateCircleHomeAPI } = createGetAPI<\n  IGetCircleHomeResponseModel,\n  IGetCircleHomePayloadModel\n>({\n  getURL: (_, { user_id, grade }) =>\n    `${BASE_URL}/circle-home/?intelenrollment_id=${user_id}&grade=${grade}`,\n});\n"],"names":["useGetCircleHomeAPI","invalidateCircleHomeAPI","createGetAPI","_","user_id","grade","BASE_URL"],"mappings":";;AAQO,MAAM,EAAE,QAAQA,GAAqB,YAAYC,EAAA,IAA4BC,EAGlF;AAAA,EACA,QAAQ,CAACC,GAAG,EAAE,SAAAC,GAAS,OAAAC,EACrB,MAAA,GAAGC,CAAQ,oCAAoCF,CAAO,UAAUC,CAAK;AACzE,CAAC;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-container-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/comps/card-container/card-container-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport type { TColorNames } from '../../../../ui/types';\nimport { GAME_LAUNCHER_SIZE } from './constants';\n\nexport const CardWrapper = 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\nexport const CardContainer = styled.div<{ $strokeColor?: TColorNames }>`\n  position: relative;\n  border-radius: ${GAME_LAUNCHER_SIZE}px;\n  border: ${({ $strokeColor }) =>\n    $strokeColor ? `2px solid ${$strokeColor}` : '0 solid transparent'};\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  align-self: center;\n  backdrop-filter: blur(0px);\n  flex-shrink: 0;\n`;\n\nexport const AnimatedLabel = styled(Text)<{ $isAnimated: boolean }>`\n  transition: color 0.5s ease-in-out;\n\n  ${({ $isAnimated }) =>\n    $isAnimated &&\n    `\n      animation: zoomInOut 1s ease-in-out infinite;\n    `}\n\n  @keyframes zoomInOut {\n    0% {\n      transform: scale(1);\n    }\n    50% {\n      transform: scale(1.05);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n`;\n"],"names":["CardWrapper","styled","ExtendedFlexView","FlexView","CardContainer","GAME_LAUNCHER_SIZE","$strokeColor","AnimatedLabel","Text","$isAnimated"],"mappings":";;;;AAOO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMrBC,IAAmBD,EAAOE,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOlCC,IAAgBH,EAAO;AAAA;AAAA,mBAEjBI,CAAkB;AAAA,YACzB,CAAC,EAAE,cAAAC,EAAa,MACxBA,IAAe,aAAaA,CAAY,KAAK,qBAAqB;AAAA,YAC1DD,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWhBE,IAAgBN,EAAOO,CAAI;AAAA;AAAA;AAAA,IAGpC,CAAC,EAAE,aAAAC,QACHA,KACA;AAAA;AAAA,KAEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-container.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/comps/card-container/card-container.tsx"],"sourcesContent":["import type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, memo } from 'react';\n\nimport * as Styled from './card-container-styled';\nimport type { ICardContainerProps } from './card-container-types';\n\nconst Container: ForwardRefRenderFunction<HTMLDivElement, ICardContainerProps> = (props, ref) => {\n  const {\n    children,\n    strokeColor,\n    label,\n    isAnimated,\n    labelRef,\n    showLabel = true,\n    labelColor,\n    ...rest\n  } = props;\n\n  return (\n    <Styled.CardWrapper {...rest}>\n      <Styled.ExtendedFlexView>\n        <Styled.AnimatedLabel\n          ref={labelRef}\n          $renderAs=\"ac4-black\"\n          $align=\"center\"\n          $color={labelColor}\n          $isAnimated={isAnimated}\n        >\n          {showLabel ? label : ''}\n        </Styled.AnimatedLabel>\n      </Styled.ExtendedFlexView>\n      <Styled.CardContainer ref={ref} $strokeColor={strokeColor}>\n        {children}\n      </Styled.CardContainer>\n    </Styled.CardWrapper>\n  );\n};\n\nexport const CardContainer = memo(forwardRef(Container));\n"],"names":["Container","props","ref","children","strokeColor","label","isAnimated","labelRef","showLabel","labelColor","rest","jsxs","Styled.CardWrapper","jsx","Styled.ExtendedFlexView","Styled.AnimatedLabel","Styled.CardContainer","CardContainer","memo","forwardRef"],"mappings":";;;AAMA,MAAMA,IAA2E,CAACC,GAAOC,MAAQ;AACzF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT;AAEJ,SACG,gBAAAU,EAAAC,GAAA,EAAoB,GAAGF,GACtB,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAQE;AAAA,QACR,aAAaH;AAAA,QAEZ,cAAYD,IAAQ;AAAA,MAAA;AAAA,IAAA,GAEzB;AAAA,sBACCW,GAAA,EAAqB,KAAAd,GAAU,cAAcE,GAC3C,UAAAD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEac,IAAgBC,EAAKC,EAAWnB,CAAS,CAAC;"}

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

@@ -0,0 +1,11 @@
+const _ = 180, A = 296, n = 400;
+let E;
+window.innerWidth >= 600 && window.innerHeight >= 800 ? E = 400 : window.innerWidth >= 350 && window.innerHeight >= 650 ? E = 296 : E = 180;
+const i = E;
+export {
+  i as GAME_LAUNCHER_SIZE,
+  n as GAME_LAUNCHER_SIZE_LARGE,
+  A as GAME_LAUNCHER_SIZE_MEDIUM,
+  _ as GAME_LAUNCHER_SIZE_SMALL
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/comps/card-container/constants.ts"],"sourcesContent":["export const GAME_LAUNCHER_SIZE_SMALL = 180;\nexport const GAME_LAUNCHER_SIZE_MEDIUM = 296;\nexport const GAME_LAUNCHER_SIZE_LARGE = 400;\n\nlet CARD_CONTAINER_SIZE;\n\nif (window.innerWidth >= 600 && window.innerHeight >= 800) {\n  CARD_CONTAINER_SIZE = GAME_LAUNCHER_SIZE_LARGE;\n} else if (window.innerWidth >= 350 && window.innerHeight >= 650) {\n  CARD_CONTAINER_SIZE = GAME_LAUNCHER_SIZE_MEDIUM;\n} else {\n  CARD_CONTAINER_SIZE = GAME_LAUNCHER_SIZE_SMALL;\n}\n\nexport const GAME_LAUNCHER_SIZE = CARD_CONTAINER_SIZE;\n"],"names":["GAME_LAUNCHER_SIZE_SMALL","GAME_LAUNCHER_SIZE_MEDIUM","GAME_LAUNCHER_SIZE_LARGE","CARD_CONTAINER_SIZE","GAME_LAUNCHER_SIZE"],"mappings":"AAAO,MAAMA,IAA2B,KAC3BC,IAA4B,KAC5BC,IAA2B;AAExC,IAAIC;AAEA,OAAO,cAAc,OAAO,OAAO,eAAe,MAC9BA,IAAA,MACb,OAAO,cAAc,OAAO,OAAO,eAAe,MACrCA,IAAA,MAEAA,IAAA;AAGjB,MAAMC,IAAqBD;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/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';\nimport type { CarouselContainerProps, CarouselItemProps } from './carousel-types';\n\nexport const Carousel = styled.div`\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  touch-action: none;\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  touch-action: none;\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  touch-action: none;\n`;\n\n// StyledComponents.ts\n\nexport const CarouselContainer = styled.div<CarouselContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 2px;\n  gap: 2px;\n  background: ${({ theme }) => theme.colors.BLACK_5 || '#313131'};\n  border-radius: 24px;\n  margin-top: 20px;\n\n  /* Desktop overrides only if NOT touch device */\n  ${({ $isTouchDevice }) =>\n    !$isTouchDevice &&\n    css`\n      padding: 8px;\n      gap: 8px;\n      margin-top: 16px;\n    `}\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`;\n\nexport const TickIcon = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n`;\n\nexport const CarouselWrapperRelative = styled.div`\n  position: relative;\n  display: inline-block; /* shrink to fit the carousel */\n`;\n\nexport const OverlappingLottie = styled.div`\n  position: absolute;\n  width: 160%;\n  top: 60%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  z-index: 2;\n`;\n\nexport const CarouselItem = styled.div<CarouselItemProps>`\n  box-sizing: border-box;\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  cursor: pointer;\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  ${({ $isTouchDevice, $isCompleted, $isSelected }) =>\n    !$isTouchDevice &&\n    css`\n      width: 28px;\n      height: 28px;\n      border-radius: 16px;\n      line-height: 50px;\n      border: ${$isCompleted ? 'none' : '1px solid rgba(255, 255, 255, 0.38)'};\n\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`;\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","$isTouchDevice","css","CarouselItemWrapper","TickIcon","OverlappingLottie","CarouselItem","$isCompleted","$isSelected","ExtendedFlexView","FlexView","GAME_LAUNCHER_SIZE","StyledCarouselBadgeWrapper"],"mappings":";;;AAMO,MAAMA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQlBC,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;AAAA,GAIpEC,IAAwBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY/BK,IAAoBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMxB,CAAC,EAAE,OAAAM,QAAYA,EAAM,OAAO,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5D,CAAC,EAAE,gBAAAC,EAAe,MAClB,CAACA,KACDC;AAAA;AAAA;AAAA;AAAA,KAIC;AAAA,GAGQC,IAAsBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS7BU,IAAWV,EAAO;AAAA;AAAA;AAAA;AAAA;AAMQA,EAAO;AAAA;AAAA;AAAA;AAKvC,MAAMW,IAAoBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU3BY,IAAeZ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWxB,CAAC,EAAE,cAAAa,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,gBAAAP,GAAgB,cAAAM,GAAc,aAAAC,EAAY,MAC7C,CAACP,KACDC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKYK,IAAe,SAAS,qCAAqC;AAAA;AAAA,QAErE,CAACC,KACH,CAACD,KACDL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAMC;AAAA,KACF;AAAA,GAEQO,IAAmBf,EAAOgB,CAAQ;AAAA;AAAA,oBAE3BC,IAAqB,CAAC;AAAA,GAG7BC,IAA6BlB,EAAOgB,CAAQ;AAAA;AAAA,oBAErC,KAAKC,IAAqB,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3C,CAAC,EAAE,OAAAX,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA,sBAC9B,KAAKW,IAAqB,CAAC;AAAA;AAAA;"}

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

@@ -0,0 +1,110 @@
+import { jsxs as E, jsx as n } from "react/jsx-runtime";
+import { memo as W, forwardRef as X, useRef as u, useState as x, useMemo as k, createRef as K, useCallback as M, useImperativeHandle as j, useEffect as S } from "react";
+import { useTheme as H } from "styled-components";
+import { ILLUSTRATIONS as N } from "../../../../../assets/illustrations/illustrations.js";
+import { LOTTIE as w } from "../../../../../assets/lottie/lottie.js";
+import d from "../../../../ui/hooks/use-click-handler.js";
+import F from "../../../../ui/lottie-animation/lottie-animation.js";
+import U from "../../../../ui/text/text.js";
+import { EDeviceType as G } from "../../../../ui/theme/constants.js";
+import { useCircleSounds as V } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircleSoundKey as Y } from "../../../hooks/use-circle-sounds/use-circle-sounds-enums.js";
+import { Carousel as q, CarouselWrapper as z, CarouselItemContainer as J, ExtendedFlexView as Q, CarouselContainer as Z, CarouselItemWrapper as ee, CarouselItem as re, TickIcon as oe, OverlappingLottie as ne, StyledCarouselBadgeWrapper as te } from "./carousel-styled.js";
+import { allWorkOutsCompletedAnimationSetting as le } from "./constants.js";
+const ce = ({ items: r, defaultIndex: a = 0, analyticsSwipeLeft: p, analyticsSwipeRight: m, analyticsCardClick: C }, $) => {
+  var y;
+  const { device: b } = H(), { playSwipeSound: h, play: v } = V(), s = b <= G.TABLET, A = u(null), i = u(!0), [t, l] = x(a), { handleClick: P } = d(
+    {
+      analyticsLabel: m.analyticsLabel,
+      analyticsProps: m.analyticsProps
+    },
+    () => l((e) => e - 1)
+  ), { handleClick: D } = d(
+    {
+      analyticsLabel: p.analyticsLabel,
+      analyticsProps: p.analyticsProps
+    },
+    () => l((e) => e + 1)
+  ), { handleClick: f } = d(
+    {
+      analyticsLabel: C.analyticsLabel,
+      analyticsProps: C.analyticsProps
+    },
+    () => {
+    }
+    // we'll replace this inline
+  ), T = u(0), O = (e) => {
+    var o, c;
+    T.current = ((c = (o = e.touches) == null ? void 0 : o[0]) == null ? void 0 : c.clientX) ?? 0;
+  }, R = (e) => {
+    var g, I;
+    const c = (((I = (g = e.changedTouches) == null ? void 0 : g[0]) == null ? void 0 : I.clientX) ?? 0) - T.current;
+    c > 50 && t > 0 ? P() : c < -50 && t < r.length - 1 && D();
+  }, L = k(() => r.map(() => K()), [r]), _ = k(() => r.every((e) => e.isCompleted), [r]), B = M(
+    (e) => {
+      h(), f(), l(e);
+    },
+    [f, h]
+  );
+  return j($, () => ({
+    nextBtnRef: A,
+    indicatorRefs: L,
+    currentIndex: t,
+    goToIndex: (e) => {
+      l(e);
+    }
+  })), S(() => {
+    i.current && (i.current = !1);
+  }, []), S(() => {
+    l((e) => r.length <= 1 || e >= r.length ? 0 : a);
+  }, [a, r.length]), /* @__PURE__ */ E(q, { children: [
+    /* @__PURE__ */ n(
+      z,
+      {
+        onTouchStart: O,
+        onTouchEnd: R,
+        ...r.length > 1 && {
+          $translate: t * 100,
+          $translateDuration: i.current ? 0 : 300
+        },
+        children: r.map((e, o) => /* @__PURE__ */ n(J, { children: e.element }, o))
+      }
+    ),
+    r.length > 1 && /* @__PURE__ */ n(Q, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ E(Z, { $isTouchDevice: s, children: [
+      r.map((e, o) => /* @__PURE__ */ n(ee, { children: /* @__PURE__ */ n(
+        re,
+        {
+          ref: L[o],
+          $isSelected: o === t,
+          $isCompleted: e.isCompleted,
+          $isTouchDevice: s,
+          onClick: () => B(o),
+          children: e.isCompleted && o !== t ? /* @__PURE__ */ n(oe, { src: N.GREEN_TICK, alt: "completed" }) : /* @__PURE__ */ n(
+            U,
+            {
+              $renderAs: s ? "ac4-black" : "ac3-black",
+              $color: o === t ? "BLACK" : "WHITE_T_60",
+              $marginBottom: 0,
+              children: o + 1
+            }
+          )
+        }
+      ) }, o)),
+      _ && /* @__PURE__ */ n(ne, { children: /* @__PURE__ */ n(
+        F,
+        {
+          src: w.DAILY_WORK_OUT_COMPLETE,
+          settings: le,
+          onRender: () => {
+            v(Y.ALL_TASKS_COMPLETED);
+          }
+        }
+      ) })
+    ] }) }),
+    ((y = r[t]) == null ? void 0 : y.carouselBadge) && /* @__PURE__ */ n(te, { children: r[t].carouselBadge })
+  ] });
+}, ge = W(X(ce));
+export {
+  ge as Carousel
+};
+//# sourceMappingURL=carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/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 { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport useClickHandler from '../../../../ui/hooks/use-click-handler';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../../hooks/use-circle-sounds/use-circle-sounds-enums';\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';\nimport { allWorkOutsCompletedAnimationSetting } from './constants';\n\nconst CarouselComponent: ForwardRefRenderFunction<ICarouselRefs, ICarouselProps> = (\n  { items, defaultIndex = 0, analyticsSwipeLeft, analyticsSwipeRight, analyticsCardClick },\n  ref,\n) => {\n  const { device } = useTheme();\n\n  const { playSwipeSound, play } = useCircleSounds();\n  const isTouchDevice = device <= EDeviceType.TABLET;\n\n  const nextBtnRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const isFirstMount = useRef(true);\n  const [currIndex, setCurrIndex] = useState(defaultIndex);\n\n  const { handleClick: handlePrevClick } = useClickHandler(\n    {\n      analyticsLabel: analyticsSwipeRight.analyticsLabel,\n      analyticsProps: analyticsSwipeRight.analyticsProps,\n    },\n    () => setCurrIndex(prev => prev - 1),\n  );\n\n  const { handleClick: handleNextClick } = useClickHandler(\n    {\n      analyticsLabel: analyticsSwipeLeft.analyticsLabel,\n      analyticsProps: analyticsSwipeLeft.analyticsProps,\n    },\n    () => setCurrIndex(prev => prev + 1),\n  );\n\n  const { handleClick: handleCardClick } = useClickHandler(\n    {\n      analyticsLabel: analyticsCardClick.analyticsLabel,\n      analyticsProps: analyticsCardClick.analyticsProps,\n    },\n    () => {}, // we'll replace this inline\n  );\n  // swipe tracking\n  const touchStartX = useRef(0);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    touchStartX.current = e.touches?.[0]?.clientX ?? 0;\n  };\n\n  const handleTouchEnd = (e: React.TouchEvent) => {\n    const endX = e.changedTouches?.[0]?.clientX ?? 0;\n    const deltaX = endX - touchStartX.current;\n\n    if (deltaX > 50 && currIndex > 0) {\n      // swipe right → previous\n      handlePrevClick();\n    } else if (deltaX < -50 && currIndex < items.length - 1) {\n      // swipe left → next\n      handleNextClick();\n    }\n  };\n\n  const indicatorRefs = useMemo(() => items.map(() => createRef<HTMLDivElement>()), [items]);\n  const allCompleted = useMemo(() => items.every(item => item.isCompleted), [items]);\n\n  const handleCarouselIndicatorClick = useCallback(\n    (index: number) => {\n      playSwipeSound();\n      handleCardClick();\n      setCurrIndex(index);\n    },\n    [handleCardClick, playSwipeSound],\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  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        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\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      {items.length > 1 && (\n        <Styled.ExtendedFlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\">\n          <Styled.CarouselContainer $isTouchDevice={isTouchDevice}>\n            {items.map((item, index) => (\n              <CarouselItemWrapper key={index}>\n                <CarouselItem\n                  ref={indicatorRefs[index]}\n                  $isSelected={index === currIndex}\n                  $isCompleted={item.isCompleted}\n                  $isTouchDevice={isTouchDevice}\n                  onClick={() => handleCarouselIndicatorClick(index)}\n                >\n                  {item.isCompleted && index !== currIndex ? (\n                    <TickIcon src={ILLUSTRATIONS.GREEN_TICK} alt=\"completed\" />\n                  ) : (\n                    <Text\n                      $renderAs={isTouchDevice ? '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            {allCompleted && (\n              <Styled.OverlappingLottie>\n                <LottieAnimation\n                  src={LOTTIE.DAILY_WORK_OUT_COMPLETE}\n                  settings={allWorkOutsCompletedAnimationSetting}\n                  onRender={() => {\n                    play(CircleSoundKey.ALL_TASKS_COMPLETED);\n                  }}\n                />\n              </Styled.OverlappingLottie>\n            )}\n          </Styled.CarouselContainer>\n        </Styled.ExtendedFlexView>\n      )}\n\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","analyticsSwipeLeft","analyticsSwipeRight","analyticsCardClick","ref","device","useTheme","playSwipeSound","play","useCircleSounds","isTouchDevice","EDeviceType","nextBtnRef","useRef","isFirstMount","currIndex","setCurrIndex","useState","handlePrevClick","useClickHandler","prev","handleNextClick","handleCardClick","touchStartX","handleTouchStart","_b","_a","handleTouchEnd","deltaX","indicatorRefs","useMemo","createRef","allCompleted","item","handleCarouselIndicatorClick","useCallback","index","useImperativeHandle","useEffect","jsxs","Styled.Carousel","jsx","Styled.CarouselWrapper","Styled.CarouselItemContainer","Styled.ExtendedFlexView","Styled.CarouselContainer","CarouselItemWrapper","CarouselItem","TickIcon","ILLUSTRATIONS","Text","Styled.OverlappingLottie","LottieAnimation","LOTTIE","allWorkOutsCompletedAnimationSetting","CircleSoundKey","StyledCarouselBadgeWrapper","Carousel","memo","forwardRef"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+const e = {
+  autoplay: !0,
+  loop: !1,
+  renderer: "canvas"
+};
+export {
+  e as allWorkOutsCompletedAnimationSetting
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher-v2/comps/carousel/constants.ts"],"sourcesContent":["export const allWorkOutsCompletedAnimationSetting = {\n  autoplay: true,\n  loop: false,\n  renderer: 'canvas',\n};\n"],"names":["allWorkOutsCompletedAnimationSetting"],"mappings":"AAAO,MAAMA,IAAuC;AAAA,EAClD,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ;"}

package/dist/features/circle-games/game-launcher-v2/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-v2/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-v2/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-v2/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