@cuemath/leap 3.5.8 → 3.5.9-akm-1

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, type FC } from 'react';\nimport { useTheme } from 'styled-components';\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 {\n  getAboutGameActivitiesSteps,\n  getAboutGameActivitiesStepsForKTo1,\n} 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(\n  ({ show = false, isGradeKTo1 = false, onDismiss }) => {\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\n    const isInfoAboutGameActivitiesViewed = trackedViews.includes(\n      TRACKING_ID_STUDENT.INFO_ABOUT_GAME_ACTIVITIES,\n    );\n\n    const [showInfo, setShowInfo] = useState(!isInfoAboutGameActivitiesViewed || show);\n\n    const steps = useMemo(\n      () =>\n        isGradeKTo1\n          ? getAboutGameActivitiesStepsForKTo1(isTouchDevice)\n          : getAboutGameActivitiesSteps(isTouchDevice),\n      [isTouchDevice, isGradeKTo1],\n    );\n    const isFirstStep = currentStep === 0;\n    const isLastStep = currentStep === steps.length - 1;\n\n    const currentStepData = steps[currentStep];\n\n    const handleClose = useCallback(() => {\n      setShowInfo(false);\n      onDismiss?.();\n    }, [onDismiss]);\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        if (!isInfoAboutGameActivitiesViewed) {\n          trackView(TRACKING_ID_STUDENT.INFO_ABOUT_GAME_ACTIVITIES);\n        }\n        handleClose();\n      }\n    }, [\n      currentStep,\n      handleClose,\n      isLastStep,\n      trackView,\n      isInfoAboutGameActivitiesViewed,\n      steps.length,\n    ]);\n\n    useEffect(() => {\n      if (show) {\n        setShowInfo(true);\n        setCurrentStep(0);\n      }\n    }, [show]);\n\n    if (!currentStepData) {\n      return null;\n    }\n\n    return (\n      showInfo && (\n        <ArcContainer\n          onClose={isInfoAboutGameActivitiesViewed || show ? handleClose : undefined}\n          zIndex={10}\n          contentContainerHeight={'calc(100% - 128px)'}\n        >\n          <Styled.Wrapper>\n            <Styled.ContentContainer>\n              <Styled.VideoContainer $isVideoCircular={currentStepData.isVideoCircular}>\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.Header>\n                <Text\n                  $renderAs=\"ah4-bold\"\n                  $renderOnMobileAs=\"ab1-black\"\n                  $color=\"WHITE\"\n                  $align=\"center\"\n                >\n                  {currentStepData.headerText}\n                </Text>\n              </Styled.Header>\n              <Separator height={20} />\n              <Styled.Footer>\n                {currentStepData.footerText && (\n                  <Text $renderAs=\"ub1\" $renderOnMobileAs=\"ub2\" $color=\"WHITE_T_87\" $align=\"center\">\n                    {currentStepData.footerText}\n                  </Text>\n                )}\n              </Styled.Footer>\n            </Styled.ContentContainer>\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.Wrapper>\n        </ArcContainer>\n      )\n    );\n  },\n);\n\nAboutGameActivities.displayName = 'AboutGameActivities';\n\nexport default AboutGameActivities;\n"],"names":["AboutGameActivities","memo","show","isGradeKTo1","onDismiss","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.Wrapper","Styled.ContentContainer","Styled.VideoContainer","Styled.Video","Styled.Header","Text","Separator","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,78 @@
+import { styled as o } from "styled-components";
+import { ARC_HEIGHT as e } from "./constants.js";
+const s = o.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: ${({ $zIndex: i }) => i};
+`, d = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  background: ${({ theme: i }) => i.colors.WHITE_T_05};
+  z-index: ${({ $zIndex: i }) => i};
+  backdrop-filter: blur(4px);
+`, l = o.div`
+  position: absolute;
+  height: inherit;
+  width: inherit;
+  background: ${({ theme: i }) => i.colors.TRANSPARENT};
+  display: flex;
+  align-items: flex-end;
+  z-index: ${({ $zIndex: i }) => i};
+`, a = o.div`
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme: i }) => i.colors.BLACK_2};
+  height: ${({ contentContainerHeight: i }) => typeof i == "string" ? i : `${i}px`};
+  max-height: ${({ contentContainerMaxHeight: i }) => typeof i == "string" ? i : `${i}px`};
+`, c = o.div`
+  position: absolute;
+  z-index: ${({ $zIndex: i }) => i};
+  top: ${({ top: i }) => i}px;
+  display: flex;
+  width: ${({ width: i }) => i};
+  border-top-right-radius: ${({ width: i }) => i};
+  border-top-left-radius: ${({ width: i }) => i};
+  aspect-ratio: 1;
+  transform: scaleX(2);
+  background: ${({ theme: i, showGradient: t }) => t ? `linear-gradient(
+    270deg,
+    rgba(255, 255, 255, 0.15) 0%,
+    #ffffff 50%,
+    rgba(255, 255, 255, 0.15) 100%
+  )` : i.colors.BLACK_2};
+`, p = o.div`
+  position: absolute;
+  top: -${e + 48}px;
+  z-index: 5;
+  cursor: pointer;
+`, f = o.div`
+  position: relative;
+  z-index: ${({ $zIndex: i }) => i};
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`;
+export {
+  c as Arc,
+  l as ArcContainer,
+  d as ArcContainerOverlay,
+  s as ArcContainerWrapper,
+  f as ArcContent,
+  a as ArcContentContainer,
+  p 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_HEIGHT } from './constants';\nimport { type ArcContainerWrapperProps } from './arc-container-types';\n\nexport const ArcContainerWrapper = styled.div<ArcContainerWrapperProps>`\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: ${({ $zIndex }) => $zIndex};\n`;\n\nexport const ArcContainerOverlay = styled.div<ArcContainerWrapperProps>`\n  position: absolute;\n  height: inherit;\n  width: inherit;\n  background: ${({ theme }) => theme.colors.WHITE_T_05};\n  z-index: ${({ $zIndex }) => $zIndex};\n  backdrop-filter: blur(4px);\n`;\n\nexport const ArcContainer = styled.div<ArcContainerWrapperProps>`\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: ${({ $zIndex }) => $zIndex};\n`;\n\nexport const ArcContentContainer = styled.div<{\n  contentContainerHeight?: string | number;\n  contentContainerMaxHeight?: string | number;\n}>`\n  position: relative;\n  height: 100%;\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  height: ${({ contentContainerHeight }) =>\n    typeof contentContainerHeight === 'string'\n      ? contentContainerHeight\n      : `${contentContainerHeight}px`};\n  max-height: ${({ contentContainerMaxHeight }) =>\n    typeof contentContainerMaxHeight === 'string'\n      ? contentContainerMaxHeight\n      : `${contentContainerMaxHeight}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: 5;\n  cursor: pointer;\n`;\n\nexport const ArcContent = styled.div<{ $zIndex: number }>`\n  position: relative;\n  z-index: ${({ $zIndex }) => $zIndex};\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n`;\n"],"names":["ArcContainerWrapper","styled","$zIndex","ArcContainerOverlay","theme","ArcContainer","ArcContentContainer","contentContainerHeight","contentContainerMaxHeight","Arc","top","width","showGradient","CrossIconContainer","ARC_HEIGHT","ArcContent"],"mappings":";;AAKO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAW7B,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA,GAGxBC,IAAsBF,EAAO;AAAA;AAAA;AAAA;AAAA,gBAI1B,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aACzC,CAAC,EAAE,SAAAF,EAAQ,MAAMA,CAAO;AAAA;AAAA,GAIxBG,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA,gBAInB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,WAAW;AAAA;AAAA;AAAA,aAG1C,CAAC,EAAE,SAAAF,EAAQ,MAAMA,CAAO;AAAA,GAGxBI,IAAsBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAW1B,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,YACvC,CAAC,EAAE,wBAAAG,EACX,MAAA,OAAOA,KAA2B,WAC9BA,IACA,GAAGA,CAAsB,IAAI;AAAA,gBACrB,CAAC,EAAE,2BAAAC,EACf,MAAA,OAAOA,KAA8B,WACjCA,IACA,GAAGA,CAAyB,IAAI;AAAA,GAG3BC,IAAMR,EAAO;AAAA;AAAA,aAOb,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA,SAC5B,CAAC,EAAE,KAAAQ,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/Ba,IAAa,EAAE;AAAA;AAAA;AAAA,GAKZC,IAAad,EAAO;AAAA;AAAA,aAEpB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,53 @@
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { memo as C } from "react";
+import p from "../../../../assets/line-icons/icons/cross.js";
+import s from "../../../ui/layout/flex-view.js";
+import { ArcContainerWrapper as $, ArcContainerOverlay as d, ArcContainer as h, ArcContentContainer as l, CrossIconContainer as A, Arc as e, ArcContent as f } from "./arc-container-styled.js";
+import { ARC_HEIGHT as i } from "./constants.js";
+const I = C(
+  ({
+    children: c,
+    onClose: n,
+    zIndex: t = 10,
+    contentContainerHeight: a = "auto",
+    contentContainerMaxHeight: m = 500
+  }) => /* @__PURE__ */ r($, { $zIndex: t, children: /* @__PURE__ */ o(
+    s,
+    {
+      $position: "relative",
+      $height: "100%",
+      $width: "100%",
+      $alignItems: "center",
+      $justifyContent: "center",
+      children: [
+        /* @__PURE__ */ r(d, { $zIndex: t }),
+        /* @__PURE__ */ r(h, { $zIndex: t, children: /* @__PURE__ */ o(
+          l,
+          {
+            contentContainerHeight: a,
+            contentContainerMaxHeight: m,
+            children: [
+              n && /* @__PURE__ */ r(A, { onClick: n, children: /* @__PURE__ */ r(p, { color: "WHITE" }) }),
+              /* @__PURE__ */ r(
+                e,
+                {
+                  top: -(i + 3),
+                  showGradient: !0,
+                  width: "112%",
+                  $zIndex: t
+                }
+              ),
+              /* @__PURE__ */ r(e, { top: -i, $zIndex: t, width: "112%" }),
+              /* @__PURE__ */ r(f, { $zIndex: t, children: c })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) })
+);
+I.displayName = "ArcContainer";
+export {
+  I 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 } from './constants';\n\nexport const ArcContainer = memo(\n  ({\n    children,\n    onClose,\n    zIndex = 10,\n    contentContainerHeight = 'auto',\n    contentContainerMaxHeight = 500,\n  }: IArcContainerProps) => {\n    return (\n      <Styled.ArcContainerWrapper $zIndex={zIndex}>\n        <FlexView\n          $position=\"relative\"\n          $height=\"100%\"\n          $width=\"100%\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          <Styled.ArcContainerOverlay $zIndex={zIndex} />\n          <Styled.ArcContainer $zIndex={zIndex}>\n            <Styled.ArcContentContainer\n              contentContainerHeight={contentContainerHeight}\n              contentContainerMaxHeight={contentContainerMaxHeight}\n            >\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={zIndex}\n              />\n              <Styled.Arc top={-ARC_HEIGHT} $zIndex={zIndex} width=\"112%\" />\n\n              <Styled.ArcContent $zIndex={zIndex}>{children}</Styled.ArcContent>\n            </Styled.ArcContentContainer>\n          </Styled.ArcContainer>\n        </FlexView>\n      </Styled.ArcContainerWrapper>\n    );\n  },\n);\n\nArcContainer.displayName = 'ArcContainer';\n"],"names":["ArcContainer","memo","children","onClose","zIndex","contentContainerHeight","contentContainerMaxHeight","jsx","Styled.ArcContainerWrapper","jsxs","FlexView","Styled.ArcContainerOverlay","Styled.ArcContainer","Styled.ArcContentContainer","Styled.CrossIconContainer","CrossIcon","Styled.Arc","ARC_HEIGHT","Styled.ArcContent"],"mappings":";;;;;;AAQO,MAAMA,IAAeC;AAAA,EAC1B,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,wBAAAC,IAAyB;AAAA,IACzB,2BAAAC,IAA4B;AAAA,EAAA,MAGzB,gBAAAC,EAAAC,GAAA,EAA2B,SAASJ,GACnC,UAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAH,EAACI,GAAA,EAA2B,SAASP,EAAQ,CAAA;AAAA,QAC5C,gBAAAG,EAAAK,GAAA,EAAoB,SAASR,GAC5B,UAAA,gBAAAK;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,wBAAAR;AAAA,YACA,2BAAAC;AAAA,YAEC,UAAA;AAAA,cACCH,KAAA,gBAAAI,EAACO,GAAA,EAA0B,SAASX,GAClC,UAAC,gBAAAI,EAAAQ,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,cAEF,gBAAAR;AAAA,gBAACS;AAAAA,gBAAA;AAAA,kBACC,KAAK,EAAEC,IAAa;AAAA,kBACpB,cAAc;AAAA,kBACd,OAAM;AAAA,kBACN,SAASb;AAAA,gBAAA;AAAA,cACX;AAAA,cACA,gBAAAG,EAACS,GAAA,EAAW,KAAK,CAACC,GAAY,SAASb,GAAQ,OAAM,QAAO;AAAA,gCAE3Dc,GAAA,EAAkB,SAASd,GAAS,UAAAF,EAAS,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAElD;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAGN;AAEAF,EAAa,cAAc;"}

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

@@ -0,0 +1,5 @@
+const o = 48;
+export {
+  o as ARC_HEIGHT
+};
+//# 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 ARC_HEIGHT = 48;\n"],"names":["ARC_HEIGHT"],"mappings":"AAAO,MAAMA,IAAa;"}

package/dist/features/circle-games/game-launcher/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/api/get-content-for-today/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/api/get-content-for-today/constants.ts"],"sourcesContent":["export const BASE_URL = '/api/v1/circle';\n"],"names":["BASE_URL"],"mappings":"AAAO,MAAMA,IAAW;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/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/comps/card-container/card-container-styled.js

@@ -8,7 +8,7 @@ const p = t.div`
   justify-content: center;
 `, d = t(o)`
   position: absolute;
-  top: -28px;
+  top: -35px;
   display: flex;
   justify-content: center;
 `, f = t.div`

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

@@ -1 +1 @@
-{"version":3,"file":"card-container-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/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;"}
+{"version":3,"file":"card-container-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/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: -35px;\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/comps/card-container/card-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-container.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/card-container/card-container.tsx"],"sourcesContent":["import { forwardRef, memo, type ForwardRefRenderFunction } 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":";;;AAKA,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;"}
+{"version":3,"file":"card-container.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/card-container/card-container.tsx"],"sourcesContent":["import { forwardRef, type ForwardRefRenderFunction, 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":";;;AAKA,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/comps/card-container/constants.js

@@ -1,7 +1,11 @@
-const A = 296, _ = 400, E = window.innerWidth >= 600 && window.innerHeight >= 800 ? 400 : 296, L = E;
+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 {
-  L as GAME_LAUNCHER_SIZE,
-  _ as GAME_LAUNCHER_SIZE_LARGE,
-  A as GAME_LAUNCHER_SIZE_SMALL
+  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/comps/card-container/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/card-container/constants.ts"],"sourcesContent":["export const GAME_LAUNCHER_SIZE_SMALL = 296;\nexport const GAME_LAUNCHER_SIZE_LARGE = 400;\n\nconst CARD_CONTAINER_SIZE =\n  window.innerWidth >= 600 && window.innerHeight >= 800\n    ? GAME_LAUNCHER_SIZE_LARGE\n    : GAME_LAUNCHER_SIZE_SMALL;\n\nexport const GAME_LAUNCHER_SIZE = CARD_CONTAINER_SIZE;\n"],"names":["GAME_LAUNCHER_SIZE_SMALL","GAME_LAUNCHER_SIZE_LARGE","CARD_CONTAINER_SIZE","GAME_LAUNCHER_SIZE"],"mappings":"AAAO,MAAMA,IAA2B,KAC3BC,IAA2B,KAElCC,IACJ,OAAO,cAAc,OAAO,OAAO,eAAe,MAC9C,MACA,KAEOC,IAAqBD;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/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/comps/carousel/carousel-styled.js

@@ -1,39 +1,146 @@
-import e from "styled-components";
-import o from "../../../../ui/layout/flex-view.js";
-const s = e.div`
+import e, { css as n } from "styled-components";
+import a from "../../../../ui/layout/flex-view.js";
+import { GAME_LAUNCHER_SIZE as i } from "../card-container/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as r, PILL_SIZE as s } from "../circular-game-card/constants.js";
+const f = e.div`
   width: 100%;
+  height: 100%;
   position: relative;
   display: flex;
   justify-content: center;
-`, l = e.div`
+  touch-action: none;
+`, h = e.div`
   display: flex;
   width: 100%;
   flex-grow: 1;
-  transform: ${({ $translate: t }) => `translateX(${-t}%)`};
+  transform: ${({ $translate: t = 0 }) => `translateX(${-t}%)`};
   transition: ${({ $translateDuration: t }) => `all ${t}ms ease-in`};
-`, a = e.div`
+  touch-action: none;
+`, u = e.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"};
+  touch-action: none;
+`, g = e.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 2px;
+  gap: 2px;
+  background: ${({ theme: t }) => t.colors.BLACK_5 || "#313131"};
+  border-radius: 24px;
+  margin-top: 20px;
+
+  /* Desktop overrides only if NOT touch device */
+  ${({ $isTouchDevice: t }) => !t && n`
+      padding: 8px;
+      gap: 8px;
+      margin-top: 16px;
+    `}
+`, b = e.div`
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`, m = e.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+e.div`
+  position: relative;
+  display: inline-block; /* shrink to fit the carousel */
+`;
+const v = e.div`
+  position: absolute;
+  width: 160%;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 2;
+  display: ${({ $hidden: t }) => t ? "none" : "block"};
+`, $ = e.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;
-`, p = e(o)`
-  bottom: -32px;
+  color: ${({ $isCompleted: t }) => t ? "transparent" : "#0D0D0D"};
+  background: ${({ $isSelected: t, $isCompleted: o }) => o && t ? "#00E573" : o ? "#007038" : t ? "#FFFFFF" : "#313131"};
+
+  /* ------ DESKTOP OVERRIDES ------ */
+  ${({ $isTouchDevice: t, $isCompleted: o, $isSelected: l }) => !t && n`
+      width: 28px;
+      height: 28px;
+      border-radius: 16px;
+      line-height: 50px;
+      border: ${o ? "none" : "1px solid rgba(255, 255, 255, 0.38)"};
+
+      ${!l && !o && n`
+        &:hover {
+          background: rgba(255, 255, 255, 0.38);
+          border: 1px solid #ffffff;
+          color: #ffffff;
+        }
+      `}
+    `}
+`, y = e(a)`
+  position: absolute;
+  top: calc(50% + ${i / 2}px);
+`, w = e(a)`
+  position: absolute;
+  top: calc(50% + ${56 + i / 2}px);
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  ${({ theme: t }) => t.mediaQueries.minWidthTablet} {
+    top: calc(50% + ${66 + i / 2}px);
+  }
+`, E = e.div`
+  visibility: ${({ $hidden: t }) => t ? "hidden" : "visible"};
+  position: absolute;
+  top: -${i / 2}px;
+  left: 50%;
+  height: ${i + r}px;
+  width: ${i + r}px;
+  border-radius: 50%;
+  z-index: 4;
+  transform: translate(-50%, -50%);
+`, C = e.div`
+  position: absolute;
+  top: calc(50% - ${i / 2}px);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${s}px;
+  width: ${2 * s}px;
+  z-index: 6;
 `;
 export {
-  s as Carousel,
-  a as CarouselItemContainer,
-  l as CarouselWrapper,
-  p as ExtendedFlexView,
-  d as Indicator
+  f as Carousel,
+  g as CarouselContainer,
+  $ as CarouselItem,
+  u as CarouselItemContainer,
+  b as CarouselItemWrapper,
+  h as CarouselWrapper,
+  y as ExtendedFlexView,
+  v as OverlappingLottie,
+  C as PillTickContainer,
+  E as ProgressRingLottieContainer,
+  w as StyledCarouselBadgeWrapper,
+  m 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';\nimport type { CarouselContainerProps, CarouselItemProps } from './carousel-types';\nimport { GAME_LAUNCHER_ASSET_PADDING, PILL_SIZE } from '../circular-game-card/constants';\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\ninterface IOverlappingLottieProps {\n  $hidden?: boolean;\n}\n\nexport const OverlappingLottie = styled.div<IOverlappingLottieProps>`\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  display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};\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\nexport const ProgressRingLottieContainer = styled.div<{ $hidden?: boolean }>`\n  visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')};\n  position: absolute;\n  top: -${GAME_LAUNCHER_SIZE / 2}px;\n  left: 50%;\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  z-index: 4;\n  transform: translate(-50%, -50%);\n`;\n\nexport const PillTickContainer = styled.div`\n  position: absolute;\n  top: calc(50% - ${GAME_LAUNCHER_SIZE / 2}px);\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ${PILL_SIZE}px;\n  width: ${2 * PILL_SIZE}px;\n  z-index: 6;\n`;\n"],"names":["Carousel","styled","CarouselWrapper","$translate","$translateDuration","CarouselItemContainer","CarouselContainer","theme","$isTouchDevice","css","CarouselItemWrapper","TickIcon","OverlappingLottie","$hidden","CarouselItem","$isCompleted","$isSelected","ExtendedFlexView","FlexView","GAME_LAUNCHER_SIZE","StyledCarouselBadgeWrapper","ProgressRingLottieContainer","GAME_LAUNCHER_ASSET_PADDING","PillTickContainer","PILL_SIZE"],"mappings":";;;;AAOO,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;AASvC,MAAMW,IAAoBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQ3B,CAAC,EAAE,SAAAY,EAAA,MAAeA,IAAU,SAAS,OAAQ;AAAA,GAG7CC,IAAeb,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWxB,CAAC,EAAE,cAAAc,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,gBAAAR,GAAgB,cAAAO,GAAc,aAAAC,EAAY,MAC7C,CAACR,KACDC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKYM,IAAe,SAAS,qCAAqC;AAAA;AAAA,QAErE,CAACC,KACH,CAACD,KACDN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAMC;AAAA,KACF;AAAA,GAEQQ,IAAmBhB,EAAOiB,CAAQ;AAAA;AAAA,oBAE3BC,IAAqB,CAAC;AAAA,GAG7BC,IAA6BnB,EAAOiB,CAAQ;AAAA;AAAA,oBAErC,KAAKC,IAAqB,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3C,CAAC,EAAE,OAAAZ,EAAA,MAAYA,EAAM,aAAa,cAAc;AAAA,sBAC9B,KAAKY,IAAqB,CAAC;AAAA;AAAA,GAIpCE,IAA8BpB,EAAO;AAAA,gBAClC,CAAC,EAAE,SAAAY,EAAA,MAAeA,IAAU,WAAW,SAAU;AAAA;AAAA,UAEvDM,IAAqB,CAAC;AAAA;AAAA,YAEpBA,IAAqBG,CAA2B;AAAA,WACjDH,IAAqBG,CAA2B;AAAA;AAAA;AAAA;AAAA,GAM9CC,IAAoBtB,EAAO;AAAA;AAAA,oBAEpBkB,IAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9BK,CAAS;AAAA,WACV,IAAIA,CAAS;AAAA;AAAA;"}