@cuemath/leap 3.5.29-as6 → 3.5.30-link.0

package/dist/features/chapters/chapters-list/chapter-item/chapter-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapter-item.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState, memo, type FC } from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport ChapterCircularProgress from './chapter-circular-progress/chapter-circular-progress';\nimport * as Styled from './chapter-item-styled';\nimport type { IChapterItemProps } from './chapter-item-types';\n\nconst ChapterItem: FC<IChapterItemProps> = memo(function ChapterItem({\n  milestoneId,\n  chapter,\n  onChapterClick,\n  itemIndex,\n  shouldShowItemIndex,\n}) {\n  const {\n    name,\n    image_url: imageUrl,\n    progress_stat: chapterProgressStat,\n    image_hue: imageHue,\n  } = chapter;\n  const { mandatory, optional } = chapterProgressStat || {};\n  const { completed = 0, total: totalMandatory = 0 } = mandatory || {};\n  const { total: optionalTotal = 0 } = optional || {};\n  const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n  const titleTextRef = useRef<HTMLDivElement>(null);\n  const completionPercentage =\n    completed > 0 ? Math.floor((completed / totalMandatory || 1) * 100) : 0;\n  const totalSheets = totalMandatory + optionalTotal;\n  const handleOnChapterClick = useCallback(() => {\n    if (totalSheets === 0) {\n      return null;\n    }\n\n    onChapterClick(chapter, milestoneId);\n  }, [chapter, milestoneId, onChapterClick, totalSheets]);\n\n  useLayoutEffect(() => {\n    if (\n      titleTextRef.current &&\n      titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n    ) {\n      setShowTitleTooltip(true);\n    }\n  }, [titleTextRef]);\n\n  return (\n    <ArrowTooltip\n      renderAs=\"primary\"\n      position=\"bottom\"\n      tooltipItem=\"Coming soon! We’re building this chapter\"\n      hidden={totalSheets > 0}\n      parentWidth=\"100%\"\n      zIndex={5}\n    >\n      <Styled.ChapterItemWrapper\n        id={`milestone-chapter-${milestoneId || ''}-${itemIndex}`}\n        $alignItems=\"center\"\n        $gapX={1}\n        $gutterX={1}\n        $flexGap={8}\n        $background=\"WHITE_1\"\n        onClick={handleOnChapterClick}\n        className=\"goal-widget-chapter-item\"\n        $bgColor={`${imageHue}_1`}\n        shouldHideClick={totalSheets === 0}\n      >\n        <ChapterCircularProgress\n          completionPercentage={completionPercentage}\n          imageUrl={imageUrl}\n          imageHue={imageHue}\n          imageWidth={96}\n          iconWidth={20}\n        />\n        <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={name}\n            hidden={!showTitleTooltip}\n            widthX={21.75}\n            zIndex={5}\n          >\n            <Styled.ChapterName\n              ref={titleTextRef}\n              $renderAs=\"ab2\"\n              $color=\"BLACK_T_87\"\n              $align=\"center\"\n            >\n              {name}\n            </Styled.ChapterName>\n          </ArrowTooltip>\n        </FlexView>\n        {!!shouldShowItemIndex && (\n          <Styled.ChapterItemNumberWrapper\n            $background=\"WHITE_4\"\n            $widthX={1.75}\n            $heightX={1.75}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n          >\n            <Text $renderAs=\"ab2\" $color=\"BLACK_1\" $align=\"center\">\n              {itemIndex + 1}\n            </Text>\n          </Styled.ChapterItemNumberWrapper>\n        )}\n      </Styled.ChapterItemWrapper>\n    </ArrowTooltip>\n  );\n});\n\nexport default ChapterItem;\n"],"names":["ChapterItem","memo","milestoneId","chapter","onChapterClick","itemIndex","shouldShowItemIndex","name","imageUrl","chapterProgressStat","imageHue","mandatory","optional","completed","totalMandatory","optionalTotal","showTitleTooltip","setShowTitleTooltip","useState","titleTextRef","useRef","completionPercentage","totalSheets","handleOnChapterClick","useCallback","useLayoutEffect","jsx","ArrowTooltip","jsxs","Styled.ChapterItemWrapper","ChapterCircularProgress","FlexView","Styled.ChapterName","Styled.ChapterItemNumberWrapper","Text"],"mappings":";;;;;;;AASM,MAAAA,IAAqCC,EAAK,SAAqB;AAAA,EACnE,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AACF,GAAG;AACK,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,WAAWC;AAAA,IACX,eAAeC;AAAA,IACf,WAAWC;AAAA,EACT,IAAAP,GACE,EAAE,WAAAQ,GAAW,UAAAC,MAAaH,KAAuB,CAAA,GACjD,EAAE,WAAAI,IAAY,GAAG,OAAOC,IAAiB,EAAE,IAAIH,KAAa,IAC5D,EAAE,OAAOI,IAAgB,EAAE,IAAIH,KAAY,CAAA,GAC3C,CAACI,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxDC,IAAeC,EAAuB,IAAI,GAC1CC,IACJR,IAAY,IAAI,KAAK,OAAOA,IAAYC,KAAkB,KAAK,GAAG,IAAI,GAClEQ,IAAcR,IAAiBC,GAC/BQ,IAAuBC,EAAY,MAAM;AAC7C,QAAIF,MAAgB;AACX,aAAA;AAGT,IAAAlB,EAAeD,GAASD,CAAW;AAAA,KAClC,CAACC,GAASD,GAAaE,GAAgBkB,CAAW,CAAC;AAEtD,SAAAG,EAAgB,MAAM;AACpB,IACEN,EAAa,WACbA,EAAa,QAAQ,eAAeA,EAAa,QAAQ,gBAEzDF,EAAoB,EAAI;AAAA,EAC1B,GACC,CAACE,CAAY,CAAC,GAGf,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,aAAY;AAAA,MACZ,QAAQL,IAAc;AAAA,MACtB,aAAY;AAAA,MACZ,QAAQ;AAAA,MAER,UAAA,gBAAAM;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,IAAI,qBAAqB3B,KAAe,EAAE,IAAIG,CAAS;AAAA,UACvD,aAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,aAAY;AAAA,UACZ,SAASkB;AAAA,UACT,WAAU;AAAA,UACV,UAAU,GAAGb,CAAQ;AAAA,UACrB,iBAAiBY,MAAgB;AAAA,UAEjC,UAAA;AAAA,YAAA,gBAAAI;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,sBAAAT;AAAA,gBACA,UAAAb;AAAA,gBACA,UAAAE;AAAA,gBACA,YAAY;AAAA,gBACZ,WAAW;AAAA,cAAA;AAAA,YACb;AAAA,YACC,gBAAAgB,EAAAK,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC7C,UAAA,gBAAAL;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,UAAS;AAAA,gBACT,aAAapB;AAAA,gBACb,QAAQ,CAACS;AAAA,gBACT,QAAQ;AAAA,gBACR,QAAQ;AAAA,gBAER,UAAA,gBAAAU;AAAA,kBAACM;AAAAA,kBAAA;AAAA,oBACC,KAAKb;AAAA,oBACL,WAAU;AAAA,oBACV,QAAO;AAAA,oBACP,QAAO;AAAA,oBAEN,UAAAZ;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,YACC,CAAC,CAACD,KACD,gBAAAoB;AAAA,cAACO;AAAAA,cAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,aAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAEhB,UAAA,gBAAAP,EAACQ,KAAK,WAAU,OAAM,QAAO,WAAU,QAAO,UAC3C,UAAA7B,IAAY,EACf,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"chapter-item.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState, memo, type FC } from 'react';\n\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './chapter-item-styled';\nimport type { IChapterItemProps } from './chapter-item-types';\n\nconst ChapterItem: FC<IChapterItemProps> = memo(function ChapterItem({\n  milestoneId,\n  chapter,\n  onChapterClick,\n  itemIndex,\n  shouldShowItemIndex,\n}) {\n  const {\n    name,\n    image_url: imageUrl,\n    progress_stat: chapterProgressStat,\n    image_hue: imageHue,\n  } = chapter;\n  const { mandatory, optional } = chapterProgressStat || {};\n  const { completed = 0, total: totalMandatory = 0 } = mandatory || {};\n  const { total: optionalTotal = 0 } = optional || {};\n  const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n  const titleTextRef = useRef<HTMLDivElement>(null);\n  const completionPercentage =\n    completed > 0 ? Math.floor((completed / totalMandatory || 1) * 100) : 0;\n  const totalSheets = totalMandatory + optionalTotal;\n  const handleOnChapterClick = useCallback(() => {\n    if (totalSheets === 0) {\n      return null;\n    }\n\n    onChapterClick(chapter, milestoneId);\n  }, [chapter, milestoneId, onChapterClick, totalSheets]);\n\n  useLayoutEffect(() => {\n    if (\n      titleTextRef.current &&\n      titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n    ) {\n      setShowTitleTooltip(true);\n    }\n  }, [titleTextRef]);\n\n  return (\n    <ArrowTooltip\n      renderAs=\"primary\"\n      position=\"bottom\"\n      tooltipItem=\"Coming soon! We’re building this chapter\"\n      hidden={totalSheets > 0}\n      parentWidth=\"100%\"\n      zIndex={5}\n    >\n      <Styled.ChapterItemWrapper\n        id={`milestone-chapter-${milestoneId || ''}-${itemIndex}`}\n        $alignItems=\"center\"\n        $gapX={1}\n        $gutterX={1}\n        $flexGap={8}\n        $background=\"WHITE_1\"\n        onClick={handleOnChapterClick}\n        className=\"goal-widget-chapter-item\"\n        $bgColor={`${imageHue}_1`}\n        shouldHideClick={totalSheets === 0}\n      >\n        <Styled.ChapterImageWrapper\n          $width=\"fit-content\"\n          $position=\"relative\"\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n        >\n          <Styled.ChapterProgressWrapper>\n            <Styled.ChapterProgressSVG width=\"96px\" height=\"96px\">\n              <Styled.ChapterProgressSVGCircle $progress={0} r=\"47\" cx=\"48\" cy=\"48\" />\n              <Styled.ChapterProgressSVGCircle\n                $progressCircle\n                $progress={completionPercentage * 2.98}\n                r=\"47\"\n                cx=\"48\"\n                cy=\"48\"\n              />\n            </Styled.ChapterProgressSVG>\n          </Styled.ChapterProgressWrapper>\n\n          <Styled.ChapterImage src={imageUrl} alt=\"Chapter Image\" />\n\n          {completionPercentage === 100 && (\n            <Styled.StyledCheckIconWrapper>\n              <Check2Icon width={20} height={20} />\n            </Styled.StyledCheckIconWrapper>\n          )}\n        </Styled.ChapterImageWrapper>\n\n        <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={name}\n            hidden={!showTitleTooltip}\n            widthX={21.75}\n            zIndex={5}\n          >\n            <Styled.ChapterName\n              ref={titleTextRef}\n              $renderAs=\"ab2\"\n              $color=\"BLACK_T_87\"\n              $align=\"center\"\n            >\n              {name}\n            </Styled.ChapterName>\n          </ArrowTooltip>\n        </FlexView>\n        {!!shouldShowItemIndex && (\n          <Styled.ChapterItemNumberWrapper\n            $background=\"WHITE_4\"\n            $widthX={1.75}\n            $heightX={1.75}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n          >\n            <Text $renderAs=\"ab2\" $color=\"BLACK_1\" $align=\"center\">\n              {itemIndex + 1}\n            </Text>\n          </Styled.ChapterItemNumberWrapper>\n        )}\n      </Styled.ChapterItemWrapper>\n    </ArrowTooltip>\n  );\n});\n\nexport default ChapterItem;\n"],"names":["ChapterItem","memo","milestoneId","chapter","onChapterClick","itemIndex","shouldShowItemIndex","name","imageUrl","chapterProgressStat","imageHue","mandatory","optional","completed","totalMandatory","optionalTotal","showTitleTooltip","setShowTitleTooltip","useState","titleTextRef","useRef","completionPercentage","totalSheets","handleOnChapterClick","useCallback","useLayoutEffect","jsx","ArrowTooltip","jsxs","Styled.ChapterItemWrapper","Styled.ChapterImageWrapper","Styled.ChapterProgressWrapper","Styled.ChapterProgressSVG","Styled.ChapterProgressSVGCircle","Styled.ChapterImage","Styled.StyledCheckIconWrapper","Check2Icon","FlexView","Styled.ChapterName","Styled.ChapterItemNumberWrapper","Text"],"mappings":";;;;;;;AASM,MAAAA,IAAqCC,EAAK,SAAqB;AAAA,EACnE,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AACF,GAAG;AACK,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,WAAWC;AAAA,IACX,eAAeC;AAAA,IACf,WAAWC;AAAA,EACT,IAAAP,GACE,EAAE,WAAAQ,GAAW,UAAAC,MAAaH,KAAuB,CAAA,GACjD,EAAE,WAAAI,IAAY,GAAG,OAAOC,IAAiB,EAAE,IAAIH,KAAa,IAC5D,EAAE,OAAOI,IAAgB,EAAE,IAAIH,KAAY,CAAA,GAC3C,CAACI,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxDC,IAAeC,EAAuB,IAAI,GAC1CC,IACJR,IAAY,IAAI,KAAK,OAAOA,IAAYC,KAAkB,KAAK,GAAG,IAAI,GAClEQ,IAAcR,IAAiBC,GAC/BQ,IAAuBC,EAAY,MAAM;AAC7C,QAAIF,MAAgB;AACX,aAAA;AAGT,IAAAlB,EAAeD,GAASD,CAAW;AAAA,KAClC,CAACC,GAASD,GAAaE,GAAgBkB,CAAW,CAAC;AAEtD,SAAAG,EAAgB,MAAM;AACpB,IACEN,EAAa,WACbA,EAAa,QAAQ,eAAeA,EAAa,QAAQ,gBAEzDF,EAAoB,EAAI;AAAA,EAC1B,GACC,CAACE,CAAY,CAAC,GAGf,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,aAAY;AAAA,MACZ,QAAQL,IAAc;AAAA,MACtB,aAAY;AAAA,MACZ,QAAQ;AAAA,MAER,UAAA,gBAAAM;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,IAAI,qBAAqB3B,KAAe,EAAE,IAAIG,CAAS;AAAA,UACvD,aAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,aAAY;AAAA,UACZ,SAASkB;AAAA,UACT,WAAU;AAAA,UACV,UAAU,GAAGb,CAAQ;AAAA,UACrB,iBAAiBY,MAAgB;AAAA,UAEjC,UAAA;AAAA,YAAA,gBAAAM;AAAA,cAACE;AAAAA,cAAA;AAAA,gBACC,QAAO;AAAA,gBACP,WAAU;AAAA,gBACV,iBAAgB;AAAA,gBAChB,aAAY;AAAA,gBAEZ,UAAA;AAAA,kBAAC,gBAAAJ,EAAAK,GAAA,EACC,UAAC,gBAAAH,EAAAI,GAAA,EAA0B,OAAM,QAAO,QAAO,QAC7C,UAAA;AAAA,oBAAC,gBAAAN,EAAAO,GAAA,EAAgC,WAAW,GAAG,GAAE,MAAK,IAAG,MAAK,IAAG,KAAK,CAAA;AAAA,oBACtE,gBAAAP;AAAA,sBAACO;AAAAA,sBAAA;AAAA,wBACC,iBAAe;AAAA,wBACf,WAAWZ,IAAuB;AAAA,wBAClC,GAAE;AAAA,wBACF,IAAG;AAAA,wBACH,IAAG;AAAA,sBAAA;AAAA,oBACL;AAAA,kBAAA,EAAA,CACF,EACF,CAAA;AAAA,oCAECa,GAAA,EAAoB,KAAK1B,GAAU,KAAI,iBAAgB;AAAA,kBAEvDa,MAAyB,OACvB,gBAAAK,EAAAS,GAAA,EACC,UAAC,gBAAAT,EAAAU,GAAA,EAAW,OAAO,IAAI,QAAQ,GAAA,CAAI,EACrC,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAEJ;AAAA,YAEC,gBAAAV,EAAAW,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC7C,UAAA,gBAAAX;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,UAAS;AAAA,gBACT,aAAapB;AAAA,gBACb,QAAQ,CAACS;AAAA,gBACT,QAAQ;AAAA,gBACR,QAAQ;AAAA,gBAER,UAAA,gBAAAU;AAAA,kBAACY;AAAAA,kBAAA;AAAA,oBACC,KAAKnB;AAAA,oBACL,WAAU;AAAA,oBACV,QAAO;AAAA,oBACP,QAAO;AAAA,oBAEN,UAAAZ;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,YACC,CAAC,CAACD,KACD,gBAAAoB;AAAA,cAACa;AAAAA,cAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,aAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAEhB,UAAA,gBAAAb,EAACc,KAAK,WAAU,OAAM,QAAO,WAAU,QAAO,UAC3C,UAAAnC,IAAY,EACf,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -1,7 +1,21 @@
-import t, { css as i } from "styled-components";
+import e, { css as i } from "styled-components";
 import o from "../../../../ui/layout/flex-view.js";
 import { GREEN_TICK_LOTTIE_FOR_MOBILE as n, GREEN_TICK_LOTTIE_FOR_DESKTOP as r } from "./constants.js";
-const d = t.div`
+const p = e.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  touch-action: none;
+`, d = e.div`
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  transform: ${({ $translate: t = 0 }) => `translateX(${-t}%)`};
+  transition: ${({ $translateDuration: t }) => `all ${t}ms ease-in`};
+  touch-action: none;
+`, c = e.div`
   width: 100%;
   display: flex;
   align-items: center;
@@ -9,12 +23,12 @@ const d = t.div`
   flex-grow: 1;
   flex-shrink: 0;
   touch-action: none;
-`, l = t(o)`
+`, x = e(o)`
   bottom: -54px;
-  ${({ theme: { mediaQueries: e } }) => e.minWidthDesktop} {
+  ${({ theme: { mediaQueries: t } }) => t.minWidthDesktop} {
     bottom: -64px;
   }
-`, c = t.div`
+`, m = e.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -22,31 +36,33 @@ const d = t.div`
   padding: 2px;
   gap: 2px;
   position: relative;
-  background: ${({ theme: e }) => e.colors.BLACK_5};
+  background: ${({ theme: t }) => t.colors.BLACK_5};
   border-radius: 24px;
   margin-top: 20px;
-  ${({ theme: e }) => i`
-    ${e.mediaQueries.minWidthSmallDesktop} {
+  ${({ theme: t }) => i`
+    ${t.mediaQueries.minWidthSmallDesktop} {
       padding: 8px;
       gap: 8px;
       margin-top: 16px;
-      background: ${e.colors.BLACK_3};
+      background: ${t.colors.BLACK_3};
     }
   `}
-`, m = t.div`
+`, f = e.div`
   position: absolute;
   align-self: center;
   width: ${n}px;
-  ${({ theme: e }) => `
-    ${e.mediaQueries.minWidthSmallDesktop} {
+  ${({ theme: t }) => `
+    ${t.mediaQueries.minWidthSmallDesktop} {
       width: ${r}px;
     }
   `}
 `;
 export {
-  m as AllGreenTickLottieWrapper,
-  c as CarouselIdicatorContainer,
-  d as CarouselItemContainer,
-  l as ExtendedFlexView
+  f as AllGreenTickLottieWrapper,
+  p as Carousel,
+  m as CarouselIdicatorContainer,
+  c as CarouselItemContainer,
+  d as CarouselWrapper,
+  x as ExtendedFlexView
 };
 //# 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, { css } from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport { GREEN_TICK_LOTTIE_FOR_DESKTOP, GREEN_TICK_LOTTIE_FOR_MOBILE } from './constants';\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\nexport const ExtendedFlexView = styled(FlexView)`\n  bottom: -54px;\n  ${({ theme: { mediaQueries } }) => mediaQueries.minWidthDesktop} {\n    bottom: -64px;\n  }\n`;\n\nexport const CarouselIdicatorContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  gap: 2px;\n  position: relative;\n  background: ${({ theme }) => theme.colors.BLACK_5};\n  border-radius: 24px;\n  margin-top: 20px;\n  ${({ theme }) => css`\n    ${theme.mediaQueries.minWidthSmallDesktop} {\n      padding: 8px;\n      gap: 8px;\n      margin-top: 16px;\n      background: ${theme.colors.BLACK_3};\n    }\n  `}\n`;\n\nexport const AllGreenTickLottieWrapper = styled.div`\n  position: absolute;\n  align-self: center;\n  width: ${GREEN_TICK_LOTTIE_FOR_MOBILE}px;\n  ${({ theme }) => `\n    ${theme.mediaQueries.minWidthSmallDesktop} {\n      width: ${GREEN_TICK_LOTTIE_FOR_DESKTOP}px;\n    }\n  `}\n`;\n"],"names":["CarouselItemContainer","styled","ExtendedFlexView","FlexView","mediaQueries","CarouselIdicatorContainer","theme","css","AllGreenTickLottieWrapper","GREEN_TICK_LOTTIE_FOR_MOBILE","GREEN_TICK_LOTTIE_FOR_DESKTOP"],"mappings":";;;AAKO,MAAMA,IAAwBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU/BC,IAAmBD,EAAOE,CAAQ;AAAA;AAAA,IAE3C,CAAC,EAAE,OAAO,EAAE,cAAAC,IAAe,MAAMA,EAAa,eAAe;AAAA;AAAA;AAAA,GAKpDC,IAA4BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQhC,CAAC,EAAE,OAAAK,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,IAG/C,CAAC,EAAE,OAAAA,EAAY,MAAAC;AAAA,MACbD,EAAM,aAAa,oBAAoB;AAAA;AAAA;AAAA;AAAA,oBAIzBA,EAAM,OAAO,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUE,IAA4BP,EAAO;AAAA;AAAA;AAAA,WAGrCQ,CAA4B;AAAA,IACnC,CAAC,EAAE,OAAAH,EAAA,MAAY;AAAA,MACbA,EAAM,aAAa,oBAAoB;AAAA,eAC9BI,CAA6B;AAAA;AAAA,GAEzC;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 { GREEN_TICK_LOTTIE_FOR_DESKTOP, GREEN_TICK_LOTTIE_FOR_MOBILE } from './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\nexport const ExtendedFlexView = styled(FlexView)`\n  bottom: -54px;\n  ${({ theme: { mediaQueries } }) => mediaQueries.minWidthDesktop} {\n    bottom: -64px;\n  }\n`;\n\nexport const CarouselIdicatorContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  gap: 2px;\n  position: relative;\n  background: ${({ theme }) => theme.colors.BLACK_5};\n  border-radius: 24px;\n  margin-top: 20px;\n  ${({ theme }) => css`\n    ${theme.mediaQueries.minWidthSmallDesktop} {\n      padding: 8px;\n      gap: 8px;\n      margin-top: 16px;\n      background: ${theme.colors.BLACK_3};\n    }\n  `}\n`;\n\nexport const AllGreenTickLottieWrapper = styled.div`\n  position: absolute;\n  align-self: center;\n  width: ${GREEN_TICK_LOTTIE_FOR_MOBILE}px;\n  ${({ theme }) => `\n    ${theme.mediaQueries.minWidthSmallDesktop} {\n      width: ${GREEN_TICK_LOTTIE_FOR_DESKTOP}px;\n    }\n  `}\n`;\n"],"names":["Carousel","styled","CarouselWrapper","$translate","$translateDuration","CarouselItemContainer","ExtendedFlexView","FlexView","mediaQueries","CarouselIdicatorContainer","theme","css","AllGreenTickLottieWrapper","GREEN_TICK_LOTTIE_FOR_MOBILE","GREEN_TICK_LOTTIE_FOR_DESKTOP"],"mappings":";;;AAKO,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,GAU/BK,IAAmBL,EAAOM,CAAQ;AAAA;AAAA,IAE3C,CAAC,EAAE,OAAO,EAAE,cAAAC,IAAe,MAAMA,EAAa,eAAe;AAAA;AAAA;AAAA,GAKpDC,IAA4BR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQhC,CAAC,EAAE,OAAAS,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,IAG/C,CAAC,EAAE,OAAAA,EAAY,MAAAC;AAAA,MACbD,EAAM,aAAa,oBAAoB;AAAA;AAAA;AAAA;AAAA,oBAIzBA,EAAM,OAAO,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUE,IAA4BX,EAAO;AAAA;AAAA;AAAA,WAGrCY,CAA4B;AAAA,IACnC,CAAC,EAAE,OAAAH,EAAA,MAAY;AAAA,MACbA,EAAM,aAAa,oBAAoB;AAAA,eAC9BI,CAA6B;AAAA;AAAA,GAEzC;AAAA;"}

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

@@ -1,108 +1,107 @@
-import { jsx as o, jsxs as j } from "react/jsx-runtime";
-import { memo as x, forwardRef as A, useRef as S, useState as E, useCallback as u, useMemo as v, createRef as D, useImperativeHandle as F, useEffect as p } from "react";
-import f from "../../../../ui/hooks/use-click-handler.js";
-import { useCircleSounds as H } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { CarouselItemContainer as K, ExtendedFlexView as V, CarouselIdicatorContainer as W, AllGreenTickLottieWrapper as N } from "./carousel-styled.js";
+import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { memo as R, forwardRef as _, useRef as M, useState as b, useCallback as P, useMemo as S, createRef as j, useImperativeHandle as v, useEffect as c } from "react";
+import u from "../../../../ui/hooks/use-click-handler.js";
+import { useCircleSounds as A } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { Carousel as D, CarouselWrapper as W, CarouselItemContainer as F, ExtendedFlexView as H, CarouselIdicatorContainer as K, AllGreenTickLottieWrapper as V } from "./carousel-styled.js";
+import N from "../swipable-component/swipeable-component.js";
 import { CarouselIndicator as U } from "./carousel-indicator/carousel-indicator.js";
 import Y from "../../../../ui/lottie-animation/lottie-animation.js";
 import { LOTTIE as q } from "../../../../../assets/lottie/lottie.js";
 import { allGreenTickLottienAimationSettings as z } from "./constants.js";
 import { CircleSoundKey as B } from "../../../hooks/use-circle-sounds/use-circle-sounds-enums.js";
-import G from "../../../../ui/swipable-carousel/swipable-carousel.js";
-const J = ({
+const G = ({
   items: t,
-  defaultIndex: n = 0,
-  analyticsSwipeLeft: m,
-  analyticsSwipeRight: C,
+  defaultIndex: i = 0,
+  analyticsSwipeLeft: p,
+  analyticsSwipeRight: m,
   analyticsIndicatorClick: d,
-  playAllGreenTickAnimation: y,
+  playAllGreenTickAnimation: f,
   onAllGreenTickAnimationComplete: a
-}, w) => {
-  var P;
-  const { playSwipeSound: L, play: I } = H(), s = S(!0), c = S(null), [i, l] = E(((P = c.current) == null ? void 0 : P.currentIndex) ?? n), [R, h] = E(!1), { handleClick: O } = f({
-    analyticsLabel: C.analyticsLabel,
-    analyticsProps: C.analyticsProps
-  }), { handleClick: _ } = f({
-    analyticsLabel: m.analyticsLabel,
-    analyticsProps: m.analyticsProps
-  }), { handleClick: T } = f({
+}, E) => {
+  const { playSwipeSound: C, play: y } = A(), l = M(!0), [s, o] = b(i), [g, L] = b(!1), { handleClick: $ } = u(
+    {
+      analyticsLabel: m.analyticsLabel,
+      analyticsProps: m.analyticsProps
+    },
+    () => o((e) => e <= 0 ? 0 : e - 1)
+  ), { handleClick: w } = u(
+    {
+      analyticsLabel: p.analyticsLabel,
+      analyticsProps: p.analyticsProps
+    },
+    () => o((e) => e >= t.length - 1 ? e : e + 1)
+  ), { handleClick: h } = u({
     analyticsLabel: d.analyticsLabel,
     analyticsProps: d.analyticsProps
-  }), k = u(() => {
-    h(!1), a == null || a();
-  }, [a]), M = v(
+  }), I = P(() => {
+    L(!1), a == null || a();
+  }, [a]), x = S(
     () => ({
       name: "complete",
-      callback: k
+      callback: I
     }),
-    [k]
-  ), b = v(() => t.map(() => D()), [t]), g = u(
-    (e) => {
-      var r;
-      e < 0 || e >= t.length || e === i || ((r = c.current) == null || r.goToIndex(e), l(e));
-    },
-    [i, t.length]
-  ), $ = u(
+    [I]
+  ), T = S(() => t.map(() => j()), [t]), O = P(
     (e) => {
-      L(), T(), l(e), g(e);
+      C(), h(), o(e);
     },
-    [T, L]
+    [h, C]
   );
-  return F(w, () => ({
-    indicatorRefs: b,
-    currentIndex: i,
-    goToIndex: g
-  })), p(() => {
-    s.current && (s.current = !1);
-  }, []), p(() => {
-    var e;
-    l(((e = c.current) == null ? void 0 : e.currentIndex) ?? n);
-  }, [n]), p(() => {
-    const e = t.every((r) => r.indicatorType === "green-tick");
-    y && e && (I(B.ALL_ACTIVITIES_COMPLETE), h(!0));
-  }, [y, I, t]), /* @__PURE__ */ o(
-    G,
-    {
-      ref: c,
-      items: t.map((e, r) => /* @__PURE__ */ o(K, { children: e.element }, r)),
-      defaultIndex: n,
-      transitionDuration: s.current ? 0 : 300,
-      onSwipeLeft: _,
-      onSwipeRight: O,
-      children: t.length > 1 && /* @__PURE__ */ o(
-        V,
-        {
-          $flexDirection: "row",
-          $alignItems: "center",
-          $justifyContent: "center",
-          $position: "absolute",
-          children: /* @__PURE__ */ j(W, { children: [
-            R && /* @__PURE__ */ o(N, { children: /* @__PURE__ */ o(
-              Y,
-              {
-                src: q.DAILY_WORK_OUT_COMPLETE,
-                settings: z,
-                eventListener: M
-              }
-            ) }),
-            t.map((e, r) => /* @__PURE__ */ o(
-              U,
-              {
-                ref: b[r],
-                indicatorType: e.indicatorType,
-                isActive: r === i,
-                textToShowInsideIndicator: (r + 1).toString(),
-                onClick: () => $(r)
-              },
-              r
-            ))
-          ] })
-        }
-      )
+  return v(E, () => ({
+    indicatorRefs: T,
+    currentIndex: s,
+    goToIndex: (e) => {
+      o(e);
     }
-  );
-}, se = x(A(J));
+  })), c(() => {
+    l.current && (l.current = !1);
+  }, []), c(() => {
+    o(i);
+  }, [i]), c(() => {
+    const e = t.every((r) => r.indicatorType === "green-tick");
+    f && e && (y(B.ALL_ACTIVITIES_COMPLETE), L(!0));
+  }, [f, y, t]), /* @__PURE__ */ n(N, { onSwipeLeft: w, onSwipeRight: $, children: /* @__PURE__ */ k(D, { children: [
+    /* @__PURE__ */ n(
+      W,
+      {
+        $translate: s * 100,
+        $translateDuration: l.current ? 0 : 300,
+        children: t.map((e, r) => /* @__PURE__ */ n(F, { children: e.element }, r))
+      }
+    ),
+    t.length > 1 && /* @__PURE__ */ n(
+      H,
+      {
+        $flexDirection: "row",
+        $alignItems: "center",
+        $justifyContent: "center",
+        $position: "absolute",
+        children: /* @__PURE__ */ k(K, { children: [
+          g && /* @__PURE__ */ n(V, { children: /* @__PURE__ */ n(
+            Y,
+            {
+              src: q.DAILY_WORK_OUT_COMPLETE,
+              settings: z,
+              eventListener: x
+            }
+          ) }),
+          t.map((e, r) => /* @__PURE__ */ n(
+            U,
+            {
+              ref: T[r],
+              indicatorType: e.indicatorType,
+              isActive: r === s,
+              textToShowInsideIndicator: (r + 1).toString(),
+              onClick: () => O(r)
+            },
+            r
+          ))
+        ] })
+      }
+    )
+  ] }) });
+}, le = R(_(G));
 export {
-  se as Carousel
+  le as Carousel
 };
 //# sourceMappingURL=carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel/carousel.tsx"],"sourcesContent":["import {\n  type ForwardRefRenderFunction,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  createRef,\n} from 'react';\nimport { type AnimationEventName } from 'lottie-web';\n\nimport useClickHandler from '../../../../ui/hooks/use-click-handler';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport * as Styled from './carousel-styled';\nimport type { ICarouselProps, ICarouselRefs } from './carousel-types';\nimport { CarouselIndicator } from './carousel-indicator/carousel-indicator';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport { allGreenTickLottienAimationSettings } from './constants';\nimport { CircleSoundKey } from '../../../hooks/use-circle-sounds/use-circle-sounds-enums';\nimport type { ISwipableCarouselRefs } from '../../../../ui/swipable-carousel/swipable-carousel-types';\nimport SwipableCarousel from '../../../../ui/swipable-carousel/swipable-carousel';\n\nconst CarouselComponent: ForwardRefRenderFunction<ICarouselRefs, ICarouselProps> = (\n  {\n    items,\n    defaultIndex = 0,\n    analyticsSwipeLeft,\n    analyticsSwipeRight,\n    analyticsIndicatorClick,\n    playAllGreenTickAnimation,\n    onAllGreenTickAnimationComplete,\n  },\n  ref,\n) => {\n  const { playSwipeSound, play } = useCircleSounds();\n  const isFirstMount = useRef(true);\n  const carousalRef = useRef<ISwipableCarouselRefs>(null);\n  const [currIndex, setCurrIndex] = useState(carousalRef.current?.currentIndex ?? defaultIndex);\n  const [playAllGreenTickAnimationLottie, setPlayAllGreenTickAnimationLottie] = useState(false);\n\n  const { handleClick: handlePrevClick } = useClickHandler({\n    analyticsLabel: analyticsSwipeRight.analyticsLabel,\n    analyticsProps: analyticsSwipeRight.analyticsProps,\n  });\n\n  const { handleClick: handleNextClick } = useClickHandler({\n    analyticsLabel: analyticsSwipeLeft.analyticsLabel,\n    analyticsProps: analyticsSwipeLeft.analyticsProps,\n  });\n\n  const { handleClick: handleItemClick } = useClickHandler({\n    analyticsLabel: analyticsIndicatorClick.analyticsLabel,\n    analyticsProps: analyticsIndicatorClick.analyticsProps,\n  });\n\n  const onAllGreenTickLottieAnimationComplete = useCallback(() => {\n    setPlayAllGreenTickAnimationLottie(false);\n    onAllGreenTickAnimationComplete?.();\n  }, [onAllGreenTickAnimationComplete]);\n\n  const allGreenTickAnimationEvent = useMemo(\n    () => ({\n      name: 'complete' as AnimationEventName,\n      callback: onAllGreenTickLottieAnimationComplete,\n    }),\n    [onAllGreenTickLottieAnimationComplete],\n  );\n\n  const indicatorRefs = useMemo(() => items.map(() => createRef<HTMLDivElement>()), [items]);\n\n  const goToIndex = useCallback(\n    (index: number) => {\n      if (index < 0 || index >= items.length || index === currIndex) return;\n      carousalRef.current?.goToIndex(index);\n      setCurrIndex(index);\n    },\n    [currIndex, items.length],\n  );\n\n  const handleCarouselIndicatorClick = useCallback(\n    (index: number) => {\n      playSwipeSound();\n      handleItemClick();\n      setCurrIndex(index);\n      goToIndex(index);\n    },\n    [handleItemClick, playSwipeSound],\n  );\n\n  useImperativeHandle(ref, () => ({\n    indicatorRefs,\n    currentIndex: currIndex,\n    goToIndex,\n  }));\n\n  useEffect(() => {\n    if (isFirstMount.current) {\n      isFirstMount.current = false;\n    }\n  }, []);\n\n  useEffect(() => {\n    setCurrIndex(carousalRef.current?.currentIndex ?? defaultIndex);\n  }, [defaultIndex]);\n\n  useEffect(() => {\n    const playAnimation = items.every(item => item.indicatorType === 'green-tick');\n\n    if (playAllGreenTickAnimation && playAnimation) {\n      play(CircleSoundKey.ALL_ACTIVITIES_COMPLETE);\n      setPlayAllGreenTickAnimationLottie(true);\n    }\n  }, [playAllGreenTickAnimation, play, items]);\n\n  return (\n    <SwipableCarousel\n      ref={carousalRef}\n      items={items.map((item, index) => (\n        <Styled.CarouselItemContainer key={index}>{item.element}</Styled.CarouselItemContainer>\n      ))}\n      defaultIndex={defaultIndex}\n      transitionDuration={isFirstMount.current ? 0 : 300}\n      onSwipeLeft={handleNextClick}\n      onSwipeRight={handlePrevClick}\n    >\n      {items.length > 1 && (\n        <Styled.ExtendedFlexView\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          $position=\"absolute\"\n        >\n          <Styled.CarouselIdicatorContainer>\n            {playAllGreenTickAnimationLottie && (\n              <Styled.AllGreenTickLottieWrapper>\n                <LottieAnimation\n                  src={LOTTIE.DAILY_WORK_OUT_COMPLETE}\n                  settings={allGreenTickLottienAimationSettings}\n                  eventListener={allGreenTickAnimationEvent}\n                />\n              </Styled.AllGreenTickLottieWrapper>\n            )}\n            {items.map((item, index) => (\n              <CarouselIndicator\n                ref={indicatorRefs[index]}\n                key={index}\n                indicatorType={item.indicatorType}\n                isActive={index === currIndex}\n                textToShowInsideIndicator={(index + 1).toString()}\n                onClick={() => handleCarouselIndicatorClick(index)}\n              />\n            ))}\n          </Styled.CarouselIdicatorContainer>\n        </Styled.ExtendedFlexView>\n      )}\n    </SwipableCarousel>\n  );\n};\n\nexport const Carousel = memo(forwardRef(CarouselComponent));\n"],"names":["CarouselComponent","items","defaultIndex","analyticsSwipeLeft","analyticsSwipeRight","analyticsIndicatorClick","playAllGreenTickAnimation","onAllGreenTickAnimationComplete","ref","playSwipeSound","play","useCircleSounds","isFirstMount","useRef","carousalRef","currIndex","setCurrIndex","useState","_a","playAllGreenTickAnimationLottie","setPlayAllGreenTickAnimationLottie","handlePrevClick","useClickHandler","handleNextClick","handleItemClick","onAllGreenTickLottieAnimationComplete","useCallback","allGreenTickAnimationEvent","useMemo","indicatorRefs","createRef","goToIndex","index","handleCarouselIndicatorClick","useImperativeHandle","useEffect","playAnimation","item","CircleSoundKey","jsx","SwipableCarousel","Styled.CarouselItemContainer","Styled.ExtendedFlexView","jsxs","Styled.CarouselIdicatorContainer","Styled.AllGreenTickLottieWrapper","LottieAnimation","LOTTIE","allGreenTickLottienAimationSettings","CarouselIndicator","Carousel","memo","forwardRef"],"mappings":"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"}
+{"version":3,"file":"carousel.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/carousel/carousel.tsx"],"sourcesContent":["import {\n  type ForwardRefRenderFunction,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  createRef,\n} from 'react';\nimport { type AnimationEventName } from 'lottie-web';\n\nimport useClickHandler from '../../../../ui/hooks/use-click-handler';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport * as Styled from './carousel-styled';\nimport type { ICarouselProps, ICarouselRefs } from './carousel-types';\nimport SwipeableComponent from '../swipable-component/swipeable-component';\nimport { CarouselIndicator } from './carousel-indicator/carousel-indicator';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport { allGreenTickLottienAimationSettings } from './constants';\nimport { CircleSoundKey } from '../../../hooks/use-circle-sounds/use-circle-sounds-enums';\n\nconst CarouselComponent: ForwardRefRenderFunction<ICarouselRefs, ICarouselProps> = (\n  {\n    items,\n    defaultIndex = 0,\n    analyticsSwipeLeft,\n    analyticsSwipeRight,\n    analyticsIndicatorClick,\n    playAllGreenTickAnimation,\n    onAllGreenTickAnimationComplete,\n  },\n  ref,\n) => {\n  const { playSwipeSound, play } = useCircleSounds();\n  const isFirstMount = useRef(true);\n  const [currIndex, setCurrIndex] = useState(defaultIndex);\n  const [playAllGreenTickAnimationLottie, setPlayAllGreenTickAnimationLottie] = useState(false);\n\n  const { handleClick: handlePrevClick } = useClickHandler(\n    {\n      analyticsLabel: analyticsSwipeRight.analyticsLabel,\n      analyticsProps: analyticsSwipeRight.analyticsProps,\n    },\n    () =>\n      setCurrIndex(prev => {\n        if (prev <= 0) return 0;\n\n        return prev - 1;\n      }),\n  );\n\n  const { handleClick: handleNextClick } = useClickHandler(\n    {\n      analyticsLabel: analyticsSwipeLeft.analyticsLabel,\n      analyticsProps: analyticsSwipeLeft.analyticsProps,\n    },\n    () =>\n      setCurrIndex(prev => {\n        if (prev >= items.length - 1) return prev;\n\n        return prev + 1;\n      }),\n  );\n\n  const { handleClick: handleItemClick } = useClickHandler({\n    analyticsLabel: analyticsIndicatorClick.analyticsLabel,\n    analyticsProps: analyticsIndicatorClick.analyticsProps,\n  });\n\n  const onAllGreenTickLottieAnimationComplete = useCallback(() => {\n    setPlayAllGreenTickAnimationLottie(false);\n    onAllGreenTickAnimationComplete?.();\n  }, [onAllGreenTickAnimationComplete]);\n\n  const allGreenTickAnimationEvent = useMemo(\n    () => ({\n      name: 'complete' as AnimationEventName,\n      callback: onAllGreenTickLottieAnimationComplete,\n    }),\n    [onAllGreenTickLottieAnimationComplete],\n  );\n\n  const indicatorRefs = useMemo(() => items.map(() => createRef<HTMLDivElement>()), [items]);\n\n  const handleCarouselIndicatorClick = useCallback(\n    (index: number) => {\n      playSwipeSound();\n      handleItemClick();\n      setCurrIndex(index);\n    },\n    [handleItemClick, playSwipeSound],\n  );\n\n  useImperativeHandle(ref, () => ({\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(defaultIndex);\n  }, [defaultIndex]);\n\n  useEffect(() => {\n    const playAnimation = items.every(item => item.indicatorType === 'green-tick');\n\n    if (playAllGreenTickAnimation && playAnimation) {\n      play(CircleSoundKey.ALL_ACTIVITIES_COMPLETE);\n      setPlayAllGreenTickAnimationLottie(true);\n    }\n  }, [playAllGreenTickAnimation, play, items]);\n\n  return (\n    <SwipeableComponent onSwipeLeft={handleNextClick} onSwipeRight={handlePrevClick}>\n      <Styled.Carousel>\n        <Styled.CarouselWrapper\n          $translate={currIndex * 100}\n          $translateDuration={isFirstMount.current ? 0 : 300}\n        >\n          {items.map((item, index) => (\n            <Styled.CarouselItemContainer key={index}>{item.element}</Styled.CarouselItemContainer>\n          ))}\n        </Styled.CarouselWrapper>\n        {items.length > 1 && (\n          <Styled.ExtendedFlexView\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            $position=\"absolute\"\n          >\n            <Styled.CarouselIdicatorContainer>\n              {playAllGreenTickAnimationLottie && (\n                <Styled.AllGreenTickLottieWrapper>\n                  <LottieAnimation\n                    src={LOTTIE.DAILY_WORK_OUT_COMPLETE}\n                    settings={allGreenTickLottienAimationSettings}\n                    eventListener={allGreenTickAnimationEvent}\n                  />\n                </Styled.AllGreenTickLottieWrapper>\n              )}\n              {items.map((item, index) => (\n                <CarouselIndicator\n                  ref={indicatorRefs[index]}\n                  key={index}\n                  indicatorType={item.indicatorType}\n                  isActive={index === currIndex}\n                  textToShowInsideIndicator={(index + 1).toString()}\n                  onClick={() => handleCarouselIndicatorClick(index)}\n                />\n              ))}\n            </Styled.CarouselIdicatorContainer>\n          </Styled.ExtendedFlexView>\n        )}\n      </Styled.Carousel>\n    </SwipeableComponent>\n  );\n};\n\nexport const Carousel = memo(forwardRef(CarouselComponent));\n"],"names":["CarouselComponent","items","defaultIndex","analyticsSwipeLeft","analyticsSwipeRight","analyticsIndicatorClick","playAllGreenTickAnimation","onAllGreenTickAnimationComplete","ref","playSwipeSound","play","useCircleSounds","isFirstMount","useRef","currIndex","setCurrIndex","useState","playAllGreenTickAnimationLottie","setPlayAllGreenTickAnimationLottie","handlePrevClick","useClickHandler","prev","handleNextClick","handleItemClick","onAllGreenTickLottieAnimationComplete","useCallback","allGreenTickAnimationEvent","useMemo","indicatorRefs","createRef","handleCarouselIndicatorClick","index","useImperativeHandle","useEffect","playAnimation","item","CircleSoundKey","jsx","SwipeableComponent","jsxs","Styled.Carousel","Styled.CarouselWrapper","Styled.CarouselItemContainer","Styled.ExtendedFlexView","Styled.CarouselIdicatorContainer","Styled.AllGreenTickLottieWrapper","LottieAnimation","LOTTIE","allGreenTickLottienAimationSettings","CarouselIndicator","Carousel","memo","forwardRef"],"mappings":"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"}

package/dist/features/circle-games/game-launcher/comps/swipable-component/swipeable-component-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeable-component-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/swipable-component/swipeable-component-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const SwipeableWrapper = styled.div`\n  display: flex;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n"],"names":["SwipeableWrapper","styled"],"mappings":";AAEO,MAAMA,IAAmBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/swipable-component/swipeable-component.js

@@ -0,0 +1,26 @@
+import { jsx as h } from "react/jsx-runtime";
+import { memo as T, useRef as l, useCallback as o } from "react";
+import { SwipeableWrapper as X } from "./swipeable-component-styled.js";
+const C = T(
+  ({ onSwipeLeft: t, onSwipeRight: a, minSwipeDistance: e = 50, children: m }) => {
+    const s = l(0), n = l(0), u = o(() => {
+      const r = s.current - n.current;
+      Math.abs(r) < e || (r > 0 ? t == null || t() : a == null || a());
+    }, [e, t, a]), d = o((r) => {
+      var c;
+      s.current = ((c = r.changedTouches[0]) == null ? void 0 : c.clientX) || 0;
+    }, []), b = o(
+      (r) => {
+        var c;
+        n.current = ((c = r.changedTouches[0]) == null ? void 0 : c.clientX) || 0, u();
+      },
+      [u]
+    );
+    return /* @__PURE__ */ h(X, { onTouchStart: d, onTouchEnd: b, children: m });
+  }
+);
+C.displayName = "SwipeableComponent";
+export {
+  C as default
+};
+//# sourceMappingURL=swipeable-component.js.map

package/dist/features/circle-games/game-launcher/comps/swipable-component/swipeable-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeable-component.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/swipable-component/swipeable-component.tsx"],"sourcesContent":["import { useRef, useCallback, memo } from 'react';\n\nimport * as Styled from './swipeable-component-styled';\nimport { type ISwipeableComponentProps } from './swipeable-component-types';\n\nconst SwipeableComponent: React.FC<ISwipeableComponentProps> = memo(\n  ({ onSwipeLeft, onSwipeRight, minSwipeDistance = 50, children }) => {\n    const touchStartX = useRef(0);\n    const touchEndX = useRef(0);\n\n    const handleSwipe = useCallback(() => {\n      const distance = touchStartX.current - touchEndX.current;\n\n      if (Math.abs(distance) < minSwipeDistance) return;\n\n      if (distance > 0) {\n        onSwipeLeft?.();\n      } else {\n        onSwipeRight?.();\n      }\n    }, [minSwipeDistance, onSwipeLeft, onSwipeRight]);\n\n    const onTouchStart = useCallback((e: React.TouchEvent) => {\n      touchStartX.current = e.changedTouches[0]?.clientX || 0;\n    }, []);\n\n    const onTouchEnd = useCallback(\n      (e: React.TouchEvent) => {\n        touchEndX.current = e.changedTouches[0]?.clientX || 0;\n        handleSwipe();\n      },\n      [handleSwipe],\n    );\n\n    return (\n      <Styled.SwipeableWrapper onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>\n        {children}\n      </Styled.SwipeableWrapper>\n    );\n  },\n);\n\nSwipeableComponent.displayName = 'SwipeableComponent';\n\nexport default SwipeableComponent;\n"],"names":["SwipeableComponent","memo","onSwipeLeft","onSwipeRight","minSwipeDistance","children","touchStartX","useRef","touchEndX","handleSwipe","useCallback","distance","onTouchStart","e","_a","onTouchEnd","Styled.SwipeableWrapper"],"mappings":";;;AAKA,MAAMA,IAAyDC;AAAA,EAC7D,CAAC,EAAE,aAAAC,GAAa,cAAAC,GAAc,kBAAAC,IAAmB,IAAI,UAAAC,QAAe;AAC5D,UAAAC,IAAcC,EAAO,CAAC,GACtBC,IAAYD,EAAO,CAAC,GAEpBE,IAAcC,EAAY,MAAM;AAC9B,YAAAC,IAAWL,EAAY,UAAUE,EAAU;AAEjD,MAAI,KAAK,IAAIG,CAAQ,IAAIP,MAErBO,IAAW,IACCT,KAAA,QAAAA,MAECC,KAAA,QAAAA;AAAA,IAEhB,GAAA,CAACC,GAAkBF,GAAaC,CAAY,CAAC,GAE1CS,IAAeF,EAAY,CAACG,MAAwB;;AACxD,MAAAP,EAAY,YAAUQ,IAAAD,EAAE,eAAe,CAAC,MAAlB,gBAAAC,EAAqB,YAAW;AAAA,IACxD,GAAG,CAAE,CAAA,GAECC,IAAaL;AAAA,MACjB,CAACG,MAAwB;;AACvB,QAAAL,EAAU,YAAUM,IAAAD,EAAE,eAAe,CAAC,MAAlB,gBAAAC,EAAqB,YAAW,GACxCL;MACd;AAAA,MACA,CAACA,CAAW;AAAA,IAAA;AAGd,6BACGO,GAAA,EAAwB,cAAAJ,GAA4B,YAAAG,GAClD,UAAAV,EACH,CAAA;AAAA,EAEJ;AACF;AAEAL,EAAmB,cAAc;"}

package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js

@@ -1,4 +1,4 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { useRef as N, useCallback as f, useMemo as J, useEffect as X } from "react";
 import { useTheme as $ } from "styled-components";
 import { PLATFORM_EVENTS_STUDENT as B } from "../../../../analytics-events/platform-events-student.js";
@@ -9,35 +9,35 @@ import A from "../../../../ui/text/text.js";
 import { EDeviceType as Q } from "../../../../ui/theme/constants.js";
 import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as S } from "../../../enum/circle-onboarding-steps.js";
 import { CircularGameCard as D } from "../../comps/circular-game-card/circular-game-card.js";
-import j from "../../../../ui/swipeable-component/swipeable-component.js";
+import j from "../../comps/swipable-component/swipeable-component.js";
 import { SHOW_NUDGE_AFTER_MS as V, SLIDE_TO_LESSON_MS as ee } from "./constants.js";
-import { SwipableArea as re } from "./use-game-launcher-journey-style.js";
-import { CarouselIndicator as te } from "../../comps/carousel/carousel-indicator/carousel-indicator.js";
-import { ProjectType as i } from "../../../games/web-view/enums/project-type-enum.js";
+import { SwipableArea as te } from "./use-game-launcher-journey-style.js";
+import { CarouselIndicator as re } from "../../comps/carousel/carousel-indicator/carousel-indicator.js";
+import { ProjectType as n } from "../../../games/web-view/enums/project-type-enum.js";
 const Se = ({
   carouselRefs: o,
   onSegmentClick: d,
   onJourneyComplete: a
 }) => {
   const { device: W } = $(), l = W <= Q.TABLET, L = N([]), c = N(null), C = N(null), { nextCoachmark: u, setJourney: _, endJourney: h } = K(), { onEvent: p } = q(), E = f(
-    (t) => {
+    (r) => {
       p(B.ONBOARDING_STEP_COMPLETED, {
-        step: t
+        step: r
       });
     },
     [p]
   ), O = f(
-    (t, e) => {
-      d(t, i.PUZZLE), E(S.PUZZLE_ACTIVITY), h(e), a(e);
+    (r, e) => {
+      d(r, n.PUZZLE), E(S.PUZZLE_ACTIVITY), h(e), a(e);
     },
     [h, a, d, E]
   ), y = f(
-    (t, e) => {
-      d(t, i.LESSON), E(S.SKILL_ACTIVITY), h(e), a(e);
+    (r, e) => {
+      d(r, n.LESSON), E(S.SKILL_ACTIVITY), h(e), a(e);
     },
     [h, a, d, E]
   ), R = f(
-    (t, e) => {
+    (r, e) => {
       var G, w, x, P, U, Y, Z, k, H, M, z;
       const T = (G = o.current) == null ? void 0 : G.indicatorRefs, s = ((x = (w = c.current) == null ? void 0 : w.circularCardWrapperRef.current) == null ? void 0 : x.getBoundingClientRect()) || {
         height: 0,
@@ -49,56 +49,56 @@ const Se = ({
       (P = e == null ? void 0 : e.games) != null && P.data.length && ((U = e == null ? void 0 : e.puzzles) != null && U.data.length) && g.push(
         {
           projectData: e.games.data[0],
-          type: i.GAME
+          type: n.GAME
         },
         {
           projectData: e.puzzles.data[0],
-          type: i.PUZZLE
+          type: n.PUZZLE
         }
       ), (Y = e == null ? void 0 : e.lessons) != null && Y.data.length && g.push(
-        { projectData: e.lessons.data[0], type: i.LESSON },
-        { projectData: e.lessons.data[1], type: i.LESSON }
+        { projectData: e.lessons.data[0], type: n.LESSON },
+        { projectData: e.lessons.data[1], type: n.LESSON }
       );
-      const r = g[1];
+      const t = g[1];
       p(B.ONBOARDING_STEP_VIEWED, {
-        step: ((Z = g[0]) == null ? void 0 : Z.type) === i.LESSON ? S.SKILL_ACTIVITY : S.GAMES_ACTIVITY
+        step: ((Z = g[0]) == null ? void 0 : Z.type) === n.LESSON ? S.SKILL_ACTIVITY : S.GAMES_ACTIVITY
       });
       const F = [
         l ? {
           originalElementToHighlightRef: c.current.circularCardWrapperRef,
           type: I.NUDGE,
-          elementToHighlight: /* @__PURE__ */ n(
+          elementToHighlight: /* @__PURE__ */ i(
             j,
             {
               onSwipeLeft: () => {
                 var m;
-                (m = o.current) == null || m.goToIndex(1), u(t, !1, V);
+                (m = o.current) == null || m.goToIndex(1), u(r, !1, V);
               },
-              children: /* @__PURE__ */ n(re, {})
+              children: /* @__PURE__ */ i(te, {})
             }
           ),
           indicator: {
             nudge: "swipe",
-            content: /* @__PURE__ */ n(A, { $renderAs: "ab2-bold", children: "Swipe to explore" }),
+            content: /* @__PURE__ */ i(A, { $renderAs: "ab2-bold", children: "Swipe to explore" }),
             nudgePointerX: s.width / 2 - 30,
             nudgePointerY: s.height / 2
           }
         } : {
           originalElementToHighlightRef: T[1],
           type: I.NUDGE,
-          elementToHighlight: /* @__PURE__ */ n(
-            te,
+          elementToHighlight: /* @__PURE__ */ i(
+            re,
             {
               textToShowInsideIndicator: "2",
               onClick: () => {
                 var m;
-                (m = o.current) == null || m.goToIndex(1), u(t, !1, V);
+                (m = o.current) == null || m.goToIndex(1), u(r, !1, V);
               }
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ n(A, { $renderAs: "ab1-bold", children: "Click to proceed" }),
+            content: /* @__PURE__ */ i(A, { $renderAs: "ab1-bold", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           }
@@ -106,32 +106,32 @@ const Se = ({
         {
           originalElementToHighlightRef: C.current.circularCardWrapperRef,
           type: I.NUDGE,
-          elementToHighlight: /* @__PURE__ */ n(
+          elementToHighlight: /* @__PURE__ */ i(
             D,
             {
               label: "",
               data: {
-                card: ((k = r == null ? void 0 : r.projectData) == null ? void 0 : k.cardLottie) ?? "",
-                name: ((H = r == null ? void 0 : r.projectData) == null ? void 0 : H.name) ?? "",
+                card: ((k = t == null ? void 0 : t.projectData) == null ? void 0 : k.cardLottie) ?? "",
+                name: ((H = t == null ? void 0 : t.projectData) == null ? void 0 : H.name) ?? "",
                 isCompleted: !1,
-                displayNameImage: (M = r == null ? void 0 : r.projectData) == null ? void 0 : M.displayNameImage,
+                displayNameImage: (M = t == null ? void 0 : t.projectData) == null ? void 0 : M.displayNameImage,
                 onPress: () => {
-                  (r == null ? void 0 : r.type) === i.LESSON && y(r.projectData, t), (r == null ? void 0 : r.type) === i.PUZZLE && O(r.projectData, t);
+                  (t == null ? void 0 : t.type) === n.LESSON && y(t.projectData, r), (t == null ? void 0 : t.type) === n.PUZZLE && O(t.projectData, r);
                 }
               }
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ n(A, { $renderAs: l ? "ab2-bold" : "ab1-bold", children: l ? "Tap to start" : " Click to start" }),
+            content: /* @__PURE__ */ i(A, { $renderAs: l ? "ab2-bold" : "ab1-bold", children: l ? "Tap to start" : " Click to start" }),
             nudgePointerX: l ? s.width / 2 : s.width / 1.3,
             nudgePointerY: l ? s.height / 2 : s.height / 1.3
           }
         }
       ];
-      _(t, F), (z = o.current) == null || z.goToIndex(0);
+      _(r, F), (z = o.current) == null || z.goToIndex(0);
       const b = setTimeout(() => {
-        clearTimeout(b), u(t);
+        clearTimeout(b), u(r);
       }, ee);
       L.current.push(b);
     },
@@ -153,7 +153,7 @@ const Se = ({
     [R]
   );
   return X(() => () => {
-    L.current.forEach((t) => clearTimeout(t)), L.current = [];
+    L.current.forEach((r) => clearTimeout(r)), L.current = [];
   }, [o]), v;
 };
 export {