@cuemath/leap 3.5.30-link.4 → 3.5.31-as1

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

@@ -1,7 +1,8 @@
-import e, { keyframes as l, css as d } from "styled-components";
+import r, { keyframes as a, css as p } from "styled-components";
 import o from "../../../ui/layout/flex-view.js";
-import h from "../../../ui/text/text.js";
-const g = l`
+import s from "../../../ui/text/text.js";
+import { ChapterImageWrapper as i, ChapterProgressWrapper as n } from "./chapter-circular-progress/chapter-circular-progress.styled.js";
+const l = a`
   0% {
     transform: translate(100%, -100%) skewX(45deg);
     opacity: 0;
@@ -11,118 +12,44 @@ const g = l`
     transform: translate(-150%, 100%) skewX(45deg);
     opacity: 1;
   }
-`, u = e(o)`
-  transition: scale 0.3s ease-in-out;
-`, b = e(o)`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  overflow: hidden;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-    width: 40%;
-    height: 150%;
-    background: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0.7) 0%,
-      rgba(255, 255, 255, 0.1) 35%,
-      rgba(255, 255, 255, 0.7) 40%,
-      rgba(255, 255, 255, 0.7) 80%,
-      rgba(255, 255, 255, 0) 100%
-    );
-    opacity: 0;
-    transform: translate(100%, -100%) skew(45deg);
-    pointer-events: none;
-  }
-`, w = e.svg(({ theme: t }) => `
-    position: absolute;
-    z-index: ${t.zIndex.CHAPTER_PROGRESS_SVG};
-    inset: 50%;
-    transform: translate(-50%, -50%) rotate(-90deg);
-  `), $ = e.circle(
-  ({ theme: t, $progressCircle: r, $progress: s }) => {
-    const { GREY_2: i, BLACK: p } = t.colors, { gutter: a } = t.layout, n = a * 18.625, c = r ? n - s : s;
-    return `
-      stroke-dasharray: ${n};
-      stroke-dashoffset: ${c};
-      stroke: ${r ? p : i};
-
-      stroke-width: ${a * 0.125}px;
-      fill: none;
-    `;
-  }
-), y = e.img(({ theme: t }) => {
-  const { gutter: r } = t.layout;
-  return `
-    display: block;
-    width: ${r * 6}px;
-    height: ${r * 6}px;
-    border-radius: 50%;
-  `;
-}), C = e.div(({ theme: t }) => {
-  const { layout: r } = t;
-  return `
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 2;
-
-    width: ${r.gutter * 1.25}px;
-    height: ${r.gutter * 1.25}px;
-    border-radius: 50%;
-    background: ${t.colors.WHITE_1};
-    outline: 1px solid ${t.colors.BLACK_1};
-  `;
-}), v = e(h)`
+`, h = r(s)`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   overflow: hidden;
   height: 44px;
-`, x = e(o)`
+`, m = r(o)`
   position: absolute;
   left: 0;
   top: 0;
-`, I = e(o)`
-  cursor: ${({ shouldHideClick: t }) => t ? "not-allowed" : "pointer"};
+`, w = r(o)`
+  cursor: ${({ shouldHideClick: e }) => e ? "not-allowed" : "pointer"};
   position: relative;
-  box-shadow: inset 0px 0px 0px 0.5px ${({ theme: t }) => t.colors.BLACK_T_15};
+  box-shadow: inset 0px 0px 0px 0.5px ${({ theme: e }) => e.colors.BLACK_T_15};
   aspect-ratio: 1;
 
   &:hover {
-    background: ${({ theme: t, $bgColor: r }) => r ? t.colors[r] : "none"};
+    background: ${({ theme: e, $bgColor: t }) => t ? e.colors[t] : "none"};
 
-    ${u} {
+    ${i} {
       scale: 1.05;
     }
 
-    ${b}::after {
-      ${d`
-        animation: ${g} 1.2s ease-out forwards;
+    ${n}::after {
+      ${p`
+        animation: ${l} 1.2s ease-out forwards;
       `}
     }
 
-    ${x} {
+    ${m} {
       background-color: transparent;
     }
   }
 `;
 export {
-  y as ChapterImage,
-  u as ChapterImageWrapper,
-  x as ChapterItemNumberWrapper,
-  I as ChapterItemWrapper,
-  v as ChapterName,
-  w as ChapterProgressSVG,
-  $ as ChapterProgressSVGCircle,
-  b as ChapterProgressWrapper,
-  C as StyledCheckIconWrapper
+  m as ChapterItemNumberWrapper,
+  w as ChapterItemWrapper,
+  h as ChapterName
 };
 //# sourceMappingURL=chapter-item-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chapter-item-styled.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item-styled.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { TColorNames } from '../../../ui/types';\n\nconst shimmerEffect = keyframes`\n  0% {\n    transform: translate(100%, -100%) skewX(45deg);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translate(-150%, 100%) skewX(45deg);\n    opacity: 1;\n  }\n`;\n\nconst ChapterImageWrapper = styled(FlexView)`\n  transition: scale 0.3s ease-in-out;\n`;\n\nconst ChapterProgressWrapper = styled(FlexView)`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  overflow: hidden;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n    width: 40%;\n    height: 150%;\n    background: linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0.7) 0%,\n      rgba(255, 255, 255, 0.1) 35%,\n      rgba(255, 255, 255, 0.7) 40%,\n      rgba(255, 255, 255, 0.7) 80%,\n      rgba(255, 255, 255, 0) 100%\n    );\n    opacity: 0;\n    transform: translate(100%, -100%) skew(45deg);\n    pointer-events: none;\n  }\n`;\n\nconst ChapterProgressSVG = styled.svg(({ theme }) => {\n  return `\n    position: absolute;\n    z-index: ${theme.zIndex.CHAPTER_PROGRESS_SVG};\n    inset: 50%;\n    transform: translate(-50%, -50%) rotate(-90deg);\n  `;\n});\n\ninterface IChapterProgressSVGCircleProps {\n  $progressCircle?: boolean;\n  $progress: number;\n}\n\nconst ChapterProgressSVGCircle = styled.circle<IChapterProgressSVGCircleProps>(\n  ({ theme, $progressCircle, $progress }) => {\n    const { GREY_2, BLACK } = theme.colors;\n    const { gutter } = theme.layout;\n\n    const strokeDashArray = gutter * 18.625;\n    const strokeDashOffset = $progressCircle ? strokeDashArray - $progress : $progress;\n\n    return `\n      stroke-dasharray: ${strokeDashArray};\n      stroke-dashoffset: ${strokeDashOffset};\n      stroke: ${$progressCircle ? BLACK : GREY_2};\n\n      stroke-width: ${gutter * 0.125}px;\n      fill: none;\n    `;\n  },\n);\n\nconst ChapterImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    display: block;\n    width: ${gutter * 6}px;\n    height: ${gutter * 6}px;\n    border-radius: 50%;\n  `;\n});\n\nconst StyledCheckIconWrapper = styled.div(({ theme }) => {\n  const { layout } = theme;\n\n  return `\n    position: absolute;\n    top: 5px;\n    right: 5px;\n    z-index: 2;\n\n    width: ${layout.gutter * 1.25}px;\n    height: ${layout.gutter * 1.25}px;\n    border-radius: 50%;\n    background: ${theme.colors.WHITE_1};\n    outline: 1px solid ${theme.colors.BLACK_1};\n  `;\n});\n\nconst ChapterName = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 44px;\n`;\n\ninterface IChapterItemWrapperProps {\n  $bgColor?: TColorNames;\n  shouldHideClick?: boolean;\n}\n\nconst ChapterItemNumberWrapper = styled(FlexView)`\n  position: absolute;\n  left: 0;\n  top: 0;\n`;\n\nconst ChapterItemWrapper = styled(FlexView)<IChapterItemWrapperProps>`\n  cursor: ${({ shouldHideClick }) => (shouldHideClick ? 'not-allowed' : 'pointer')};\n  position: relative;\n  box-shadow: inset 0px 0px 0px 0.5px ${({ theme }) => theme.colors.BLACK_T_15};\n  aspect-ratio: 1;\n\n  &:hover {\n    background: ${({ theme, $bgColor }) => ($bgColor ? theme.colors[$bgColor] : 'none')};\n\n    ${ChapterImageWrapper} {\n      scale: 1.05;\n    }\n\n    ${ChapterProgressWrapper}::after {\n      ${css`\n        animation: ${shimmerEffect} 1.2s ease-out forwards;\n      `}\n    }\n\n    ${ChapterItemNumberWrapper} {\n      background-color: transparent;\n    }\n  }\n`;\n\nexport {\n  ChapterImageWrapper,\n  ChapterProgressWrapper,\n  ChapterImage,\n  ChapterItemWrapper,\n  ChapterName,\n  ChapterProgressSVG,\n  ChapterProgressSVGCircle,\n  StyledCheckIconWrapper,\n  ChapterItemNumberWrapper,\n};\n"],"names":["shimmerEffect","keyframes","ChapterImageWrapper","styled","FlexView","ChapterProgressWrapper","ChapterProgressSVG","theme","ChapterProgressSVGCircle","$progressCircle","$progress","GREY_2","BLACK","gutter","strokeDashArray","strokeDashOffset","ChapterImage","StyledCheckIconWrapper","layout","ChapterName","Text","ChapterItemNumberWrapper","ChapterItemWrapper","shouldHideClick","$bgColor","css"],"mappings":";;;AAMA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhBC,IAAsBC,EAAOC,CAAQ;AAAA;AAAA,GAIrCC,IAAyBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6BxCE,IAAqBH,EAAO,IAAI,CAAC,EAAE,OAAAI,QAChC;AAAA;AAAA,eAEMA,EAAM,OAAO,oBAAoB;AAAA;AAAA;AAAA,GAI/C,GAOKC,IAA2BL,EAAO;AAAA,EACtC,CAAC,EAAE,OAAAI,GAAO,iBAAAE,GAAiB,WAAAC,QAAgB;AACzC,UAAM,EAAE,QAAAC,GAAQ,OAAAC,MAAUL,EAAM,QAC1B,EAAE,QAAAM,EAAO,IAAIN,EAAM,QAEnBO,IAAkBD,IAAS,QAC3BE,IAAmBN,IAAkBK,IAAkBJ,IAAYA;AAElE,WAAA;AAAA,0BACeI,CAAe;AAAA,2BACdC,CAAgB;AAAA,gBAC3BN,IAAkBG,IAAQD,CAAM;AAAA;AAAA,sBAE1BE,IAAS,KAAK;AAAA;AAAA;AAAA,EAGlC;AACF,GAEMG,IAAeb,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AACvC,QAAA,EAAE,QAAAM,EAAO,IAAIN,EAAM;AAElB,SAAA;AAAA;AAAA,aAEIM,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEKI,IAAyBd,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AACjD,QAAA,EAAE,QAAAW,EAAW,IAAAX;AAEZ,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMIW,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA,kBAEhBX,EAAM,OAAO,OAAO;AAAA,yBACbA,EAAM,OAAO,OAAO;AAAA;AAE7C,CAAC,GAEKY,IAAchB,EAAOiB,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAczBC,IAA2BlB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM1CkB,IAAqBnB,EAAOC,CAAQ;AAAA,YAC9B,CAAC,EAAE,iBAAAmB,EAAA,MAAuBA,IAAkB,gBAAgB,SAAU;AAAA;AAAA,wCAE1C,CAAC,EAAE,OAAAhB,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,kBAI5D,CAAC,EAAE,OAAAA,GAAO,UAAAiB,QAAgBA,IAAWjB,EAAM,OAAOiB,CAAQ,IAAI,MAAO;AAAA;AAAA,MAEjFtB,CAAmB;AAAA;AAAA;AAAA;AAAA,MAInBG,CAAsB;AAAA,QACpBoB;AAAA,qBACazB,CAAa;AAAA,OAC3B;AAAA;AAAA;AAAA,MAGDqB,CAAwB;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"chapter-item-styled.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item-styled.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { TColorNames } from '../../../ui/types';\nimport {\n  ChapterProgressWrapper,\n  ChapterImageWrapper,\n} from './chapter-circular-progress/chapter-circular-progress.styled';\n\nconst shimmerEffect = keyframes`\n  0% {\n    transform: translate(100%, -100%) skewX(45deg);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translate(-150%, 100%) skewX(45deg);\n    opacity: 1;\n  }\n`;\n\nconst ChapterName = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 44px;\n`;\n\ninterface IChapterItemWrapperProps {\n  $bgColor?: TColorNames;\n  shouldHideClick?: boolean;\n}\n\nconst ChapterItemNumberWrapper = styled(FlexView)`\n  position: absolute;\n  left: 0;\n  top: 0;\n`;\n\nconst ChapterItemWrapper = styled(FlexView)<IChapterItemWrapperProps>`\n  cursor: ${({ shouldHideClick }) => (shouldHideClick ? 'not-allowed' : 'pointer')};\n  position: relative;\n  box-shadow: inset 0px 0px 0px 0.5px ${({ theme }) => theme.colors.BLACK_T_15};\n  aspect-ratio: 1;\n\n  &:hover {\n    background: ${({ theme, $bgColor }) => ($bgColor ? theme.colors[$bgColor] : 'none')};\n\n    ${ChapterImageWrapper} {\n      scale: 1.05;\n    }\n\n    ${ChapterProgressWrapper}::after {\n      ${css`\n        animation: ${shimmerEffect} 1.2s ease-out forwards;\n      `}\n    }\n\n    ${ChapterItemNumberWrapper} {\n      background-color: transparent;\n    }\n  }\n`;\n\nexport { ChapterItemWrapper, ChapterName, ChapterItemNumberWrapper };\n"],"names":["shimmerEffect","keyframes","ChapterName","styled","Text","ChapterItemNumberWrapper","FlexView","ChapterItemWrapper","shouldHideClick","theme","$bgColor","ChapterImageWrapper","ChapterProgressWrapper","css"],"mappings":";;;;AAUA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhBC,IAAcC,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAczBC,IAA2BF,EAAOG,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM1CC,IAAqBJ,EAAOG,CAAQ;AAAA,YAC9B,CAAC,EAAE,iBAAAE,EAAA,MAAuBA,IAAkB,gBAAgB,SAAU;AAAA;AAAA,wCAE1C,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,kBAI5D,CAAC,EAAE,OAAAA,GAAO,UAAAC,QAAgBA,IAAWD,EAAM,OAAOC,CAAQ,IAAI,MAAO;AAAA;AAAA,MAEjFC,CAAmB;AAAA;AAAA;AAAA;AAAA,MAInBC,CAAsB;AAAA,QACpBC;AAAA,qBACab,CAAa;AAAA,OAC3B;AAAA;AAAA;AAAA,MAGDK,CAAwB;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,31 +1,31 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { memo as w, useState as W, useRef as _, useCallback as k, useLayoutEffect as A } from "react";
-import S from "../../../../assets/line-icons/icons/check2.js";
-import m from "../../../ui/arrow-tooltip/arrow-tooltip.js";
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import { memo as x, useState as W, useRef as w, useCallback as y, useLayoutEffect as A } from "react";
+import p from "../../../ui/arrow-tooltip/arrow-tooltip.js";
 import H from "../../../ui/layout/flex-view.js";
-import j from "../../../ui/text/text.js";
-import { ChapterItemWrapper as P, ChapterImageWrapper as X, ChapterProgressWrapper as E, ChapterProgressSVG as G, ChapterProgressSVGCircle as d, ChapterImage as L, StyledCheckIconWrapper as N, ChapterName as V, ChapterItemNumberWrapper as z } from "./chapter-item-styled.js";
-const q = w(function({
+import k from "../../../ui/text/text.js";
+import X from "./chapter-circular-progress/chapter-circular-progress.js";
+import { ChapterItemWrapper as j, ChapterName as S, ChapterItemNumberWrapper as E } from "./chapter-item-styled.js";
+const F = x(function({
   milestoneId: o,
   chapter: i,
-  onChapterClick: a,
-  itemIndex: l,
-  shouldShowItemIndex: g
+  onChapterClick: n,
+  itemIndex: a,
+  shouldShowItemIndex: h
 }) {
   const {
-    name: c,
-    image_url: $,
+    name: l,
+    image_url: d,
     progress_stat: u,
-    image_hue: C
-  } = i, { mandatory: f, optional: I } = u || {}, { completed: s = 0, total: p = 0 } = f || {}, { total: x = 0 } = I || {}, [y, T] = W(!1), t = _(null), h = s > 0 ? Math.floor((s / p || 1) * 100) : 0, r = p + x, b = k(() => {
+    image_hue: c
+  } = i, { mandatory: g, optional: $ } = u || {}, { completed: s = 0, total: m = 0 } = g || {}, { total: f = 0 } = $ || {}, [C, T] = W(!1), e = w(null), b = s > 0 ? Math.floor((s / m || 1) * 100) : 0, r = m + f, I = y(() => {
     if (r === 0)
       return null;
-    a(i, o);
-  }, [i, o, a, r]);
+    n(i, o);
+  }, [i, o, n, r]);
   return A(() => {
-    t.current && t.current.scrollHeight > t.current.clientHeight && T(!0);
-  }, [t]), /* @__PURE__ */ e(
-    m,
+    e.current && e.current.scrollHeight > e.current.clientHeight && T(!0);
+  }, [e]), /* @__PURE__ */ t(
+    p,
     {
       renderAs: "primary",
       position: "bottom",
@@ -33,76 +33,60 @@ const q = w(function({
       hidden: r > 0,
       parentWidth: "100%",
       zIndex: 5,
-      children: /* @__PURE__ */ n(
-        P,
+      children: /* @__PURE__ */ _(
+        j,
         {
-          id: `milestone-chapter-${o || ""}-${l}`,
+          id: `milestone-chapter-${o || ""}-${a}`,
           $alignItems: "center",
           $gapX: 1,
           $gutterX: 1,
           $flexGap: 8,
           $background: "WHITE_1",
-          onClick: b,
+          onClick: I,
           className: "goal-widget-chapter-item",
-          $bgColor: `${C}_1`,
+          $bgColor: `${c}_1`,
           shouldHideClick: r === 0,
           children: [
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ t(
               X,
               {
-                $width: "fit-content",
-                $position: "relative",
-                $justifyContent: "center",
-                $alignItems: "center",
-                children: [
-                  /* @__PURE__ */ e(E, { children: /* @__PURE__ */ n(G, { width: "96px", height: "96px", children: [
-                    /* @__PURE__ */ e(d, { $progress: 0, r: "47", cx: "48", cy: "48" }),
-                    /* @__PURE__ */ e(
-                      d,
-                      {
-                        $progressCircle: !0,
-                        $progress: h * 2.98,
-                        r: "47",
-                        cx: "48",
-                        cy: "48"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ e(L, { src: $, alt: "Chapter Image" }),
-                  h === 100 && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(S, { width: 20, height: 20 }) })
-                ]
+                completionPercentage: b,
+                imageUrl: d,
+                imageHue: c,
+                imageWidth: 96,
+                iconWidth: 20
               }
             ),
-            /* @__PURE__ */ e(H, { $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ e(
-              m,
+            /* @__PURE__ */ t(H, { $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ t(
+              p,
               {
                 renderAs: "primary",
                 position: "bottom",
-                tooltipItem: c,
-                hidden: !y,
+                tooltipItem: l,
+                hidden: !C,
                 widthX: 21.75,
                 zIndex: 5,
-                children: /* @__PURE__ */ e(
-                  V,
+                children: /* @__PURE__ */ t(
+                  S,
                   {
-                    ref: t,
+                    ref: e,
                     $renderAs: "ab2",
                     $color: "BLACK_T_87",
                     $align: "center",
-                    children: c
+                    children: l
                   }
                 )
               }
             ) }),
-            !!g && /* @__PURE__ */ e(
-              z,
+            !!h && /* @__PURE__ */ t(
+              E,
               {
                 $background: "WHITE_4",
                 $widthX: 1.75,
                 $heightX: 1.75,
                 $alignItems: "center",
                 $justifyContent: "center",
-                children: /* @__PURE__ */ e(j, { $renderAs: "ab2", $color: "BLACK_1", $align: "center", children: l + 1 })
+                children: /* @__PURE__ */ t(k, { $renderAs: "ab2", $color: "BLACK_1", $align: "center", children: a + 1 })
               }
             )
           ]
@@ -112,6 +96,6 @@ const q = w(function({
   );
 });
 export {
-  q as default
+  F as default
 };
 //# sourceMappingURL=chapter-item.js.map

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 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;"}
+{"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;"}

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

@@ -1,21 +1,7 @@
-import e, { css as i } from "styled-components";
+import t, { 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 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`
+const d = t.div`
   width: 100%;
   display: flex;
   align-items: center;
@@ -23,12 +9,12 @@ const p = e.div`
   flex-grow: 1;
   flex-shrink: 0;
   touch-action: none;
-`, x = e(o)`
+`, l = t(o)`
   bottom: -54px;
-  ${({ theme: { mediaQueries: t } }) => t.minWidthDesktop} {
+  ${({ theme: { mediaQueries: e } }) => e.minWidthDesktop} {
     bottom: -64px;
   }
-`, m = e.div`
+`, c = t.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -36,33 +22,31 @@ const p = e.div`
   padding: 2px;
   gap: 2px;
   position: relative;
-  background: ${({ theme: t }) => t.colors.BLACK_5};
+  background: ${({ theme: e }) => e.colors.BLACK_5};
   border-radius: 24px;
   margin-top: 20px;
-  ${({ theme: t }) => i`
-    ${t.mediaQueries.minWidthSmallDesktop} {
+  ${({ theme: e }) => i`
+    ${e.mediaQueries.minWidthSmallDesktop} {
       padding: 8px;
       gap: 8px;
       margin-top: 16px;
-      background: ${t.colors.BLACK_3};
+      background: ${e.colors.BLACK_3};
     }
   `}
-`, f = e.div`
+`, m = t.div`
   position: absolute;
   align-self: center;
   width: ${n}px;
-  ${({ theme: t }) => `
-    ${t.mediaQueries.minWidthSmallDesktop} {
+  ${({ theme: e }) => `
+    ${e.mediaQueries.minWidthSmallDesktop} {
       width: ${r}px;
     }
   `}
 `;
 export {
-  f as AllGreenTickLottieWrapper,
-  p as Carousel,
-  m as CarouselIdicatorContainer,
-  c as CarouselItemContainer,
-  d as CarouselWrapper,
-  x as ExtendedFlexView
+  m as AllGreenTickLottieWrapper,
+  c as CarouselIdicatorContainer,
+  d as CarouselItemContainer,
+  l 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 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;"}
+{"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;"}