@cuemath/leap 3.5.30-as15 → 3.5.30-as16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/features/circle-games/game-launcher/comps/carousel/carousel.js +51 -54
  2. package/dist/features/circle-games/game-launcher/comps/carousel/carousel.js.map +1 -1
  3. package/dist/features/timeline/monthly-report/comps/achievements/achievements.js +22 -31
  4. package/dist/features/timeline/monthly-report/comps/achievements/achievements.js.map +1 -1
  5. package/dist/features/timeline/monthly-report/comps/achievements/constant.js +17 -0
  6. package/dist/features/timeline/monthly-report/comps/achievements/constant.js.map +1 -0
  7. package/dist/features/timeline/monthly-report/comps/activities/constants.js +22 -21
  8. package/dist/features/timeline/monthly-report/comps/activities/constants.js.map +1 -1
  9. package/dist/features/timeline/monthly-report/comps/activities/utils.js.map +1 -1
  10. package/dist/features/ui/swipeable-carousel/constants.js +17 -0
  11. package/dist/features/ui/swipeable-carousel/constants.js.map +1 -0
  12. package/dist/features/ui/{swipable-carousel/swipable-carousel-styled.js → swipeable-carousel/swipeable-carousel-styled.js} +2 -2
  13. package/dist/features/ui/swipeable-carousel/swipeable-carousel-styled.js.map +1 -0
  14. package/dist/features/ui/swipeable-carousel/swipeable-carousel.js +145 -0
  15. package/dist/features/ui/swipeable-carousel/swipeable-carousel.js.map +1 -0
  16. package/dist/index.d.ts +6 -6
  17. package/dist/index.js +2 -2
  18. package/package.json +1 -1
  19. package/dist/features/ui/swipable-carousel/swipable-carousel-styled.js.map +0 -1
  20. package/dist/features/ui/swipable-carousel/swipable-carousel.js +0 -132
  21. package/dist/features/ui/swipable-carousel/swipable-carousel.js.map +0 -1
@@ -1,107 +1,104 @@
1
- import { jsx as o, jsxs as j } from "react/jsx-runtime";
2
- 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";
3
- import f from "../../../../ui/hooks/use-click-handler.js";
1
+ import { jsx as o, jsxs as $ } from "react/jsx-runtime";
2
+ import { memo as j, forwardRef as A, useRef as P, useState as S, useCallback as l, useMemo as E, createRef as D, useImperativeHandle as F, useEffect as v } from "react";
3
+ import u from "../../../../ui/hooks/use-click-handler.js";
4
4
  import { useCircleSounds as H } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
5
- import { CarouselItemContainer as K, ExtendedFlexView as V, CarouselIdicatorContainer as W, AllGreenTickLottieWrapper as N } from "./carousel-styled.js";
5
+ import { CarouselItemContainer as K, ExtendedFlexView as N, CarouselIdicatorContainer as V, AllGreenTickLottieWrapper as W } from "./carousel-styled.js";
6
6
  import { CarouselIndicator as U } from "./carousel-indicator/carousel-indicator.js";
7
7
  import Y from "../../../../ui/lottie-animation/lottie-animation.js";
8
8
  import { LOTTIE as q } from "../../../../../assets/lottie/lottie.js";
9
9
  import { allGreenTickLottienAimationSettings as z } from "./constants.js";
10
10
  import { CircleSoundKey as B } from "../../../hooks/use-circle-sounds/use-circle-sounds-enums.js";
11
- import G from "../../../../ui/swipable-carousel/swipable-carousel.js";
11
+ import G from "../../../../ui/swipeable-carousel/swipeable-carousel.js";
12
12
  const J = ({
13
- items: t,
14
- defaultIndex: n = 0,
15
- analyticsSwipeLeft: m,
16
- analyticsSwipeRight: C,
13
+ items: r,
14
+ defaultIndex: p = 0,
15
+ analyticsSwipeLeft: f,
16
+ analyticsSwipeRight: m,
17
17
  analyticsIndicatorClick: d,
18
- playAllGreenTickAnimation: y,
19
- onAllGreenTickAnimationComplete: a
18
+ playAllGreenTickAnimation: C,
19
+ onAllGreenTickAnimationComplete: n
20
20
  }, w) => {
21
- var P;
22
- 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({
23
- analyticsLabel: C.analyticsLabel,
24
- analyticsProps: C.analyticsProps
25
- }), { handleClick: _ } = f({
21
+ var g;
22
+ const { playSwipeSound: y, play: L } = H(), c = P(!0), i = P(null), [a, I] = S(((g = i.current) == null ? void 0 : g.currentIndex) ?? p), [R, h] = S(!1), { handleClick: O } = u({
26
23
  analyticsLabel: m.analyticsLabel,
27
24
  analyticsProps: m.analyticsProps
28
- }), { handleClick: T } = f({
25
+ }), { handleClick: _ } = u({
26
+ analyticsLabel: f.analyticsLabel,
27
+ analyticsProps: f.analyticsProps
28
+ }), { handleClick: T } = u({
29
29
  analyticsLabel: d.analyticsLabel,
30
30
  analyticsProps: d.analyticsProps
31
- }), k = u(() => {
32
- h(!1), a == null || a();
33
- }, [a]), M = v(
31
+ }), k = l(() => {
32
+ h(!1), n == null || n();
33
+ }, [n]), x = E(
34
34
  () => ({
35
35
  name: "complete",
36
36
  callback: k
37
37
  }),
38
38
  [k]
39
- ), b = v(() => t.map(() => D()), [t]), g = u(
39
+ ), b = E(() => r.map(() => D()), [r]), s = l(
40
40
  (e) => {
41
- var r;
42
- e < 0 || e >= t.length || e === i || ((r = c.current) == null || r.goToIndex(e), l(e));
41
+ var t;
42
+ e < 0 || e >= r.length || e === a || ((t = i.current) == null || t.goToIndex(e), I(e));
43
43
  },
44
- [i, t.length]
45
- ), $ = u(
44
+ [a, r.length]
45
+ ), M = l(
46
46
  (e) => {
47
- L(), T(), l(e), g(e);
47
+ y(), T(), I(e), s(e);
48
48
  },
49
- [T, L]
49
+ [T, y, s]
50
50
  );
51
51
  return F(w, () => ({
52
52
  indicatorRefs: b,
53
- currentIndex: i,
54
- goToIndex: g
55
- })), p(() => {
56
- s.current && (s.current = !1);
57
- }, []), p(() => {
58
- var e;
59
- l(((e = c.current) == null ? void 0 : e.currentIndex) ?? n);
60
- }, [n]), p(() => {
61
- const e = t.every((r) => r.indicatorType === "green-tick");
62
- y && e && (I(B.ALL_ACTIVITIES_COMPLETE), h(!0));
63
- }, [y, I, t]), /* @__PURE__ */ o(
53
+ currentIndex: a,
54
+ goToIndex: s
55
+ })), v(() => {
56
+ c.current && (c.current = !1);
57
+ }, []), v(() => {
58
+ const e = r.every((t) => t.indicatorType === "green-tick");
59
+ C && e && (L(B.ALL_ACTIVITIES_COMPLETE), h(!0));
60
+ }, [C, L, r]), /* @__PURE__ */ o(
64
61
  G,
65
62
  {
66
- ref: c,
67
- items: t.map((e, r) => /* @__PURE__ */ o(K, { children: e.element }, r)),
68
- defaultIndex: n,
69
- transitionDuration: s.current ? 0 : 300,
63
+ ref: i,
64
+ items: r.map((e, t) => /* @__PURE__ */ o(K, { children: e.element }, t)),
65
+ defaultIndex: p,
66
+ transitionDuration: c.current ? 0 : 300,
70
67
  onSwipeLeft: _,
71
68
  onSwipeRight: O,
72
- children: t.length > 1 && /* @__PURE__ */ o(
73
- V,
69
+ customNavigation: /* @__PURE__ */ o(
70
+ N,
74
71
  {
75
72
  $flexDirection: "row",
76
73
  $alignItems: "center",
77
74
  $justifyContent: "center",
78
75
  $position: "absolute",
79
- children: /* @__PURE__ */ j(W, { children: [
80
- R && /* @__PURE__ */ o(N, { children: /* @__PURE__ */ o(
76
+ children: /* @__PURE__ */ $(V, { children: [
77
+ R && /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o(
81
78
  Y,
82
79
  {
83
80
  src: q.DAILY_WORK_OUT_COMPLETE,
84
81
  settings: z,
85
- eventListener: M
82
+ eventListener: x
86
83
  }
87
84
  ) }),
88
- t.map((e, r) => /* @__PURE__ */ o(
85
+ r.map((e, t) => /* @__PURE__ */ o(
89
86
  U,
90
87
  {
91
- ref: b[r],
88
+ ref: b[t],
92
89
  indicatorType: e.indicatorType,
93
- isActive: r === i,
94
- textToShowInsideIndicator: (r + 1).toString(),
95
- onClick: () => $(r)
90
+ isActive: t === a,
91
+ textToShowInsideIndicator: (t + 1).toString(),
92
+ onClick: () => M(t)
96
93
  },
97
- r
94
+ t
98
95
  ))
99
96
  ] })
100
97
  }
101
98
  )
102
99
  }
103
100
  );
104
- }, se = x(A(J));
101
+ }, se = j(A(J));
105
102
  export {
106
103
  se as Carousel
107
104
  };
@@ -1 +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":";;;;;;;;;;;AA0BA,MAAMA,IAA6E,CACjF;AAAA,EACE,OAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,iCAAAC;AACF,GACAC,MACG;;AACH,QAAM,EAAE,gBAAAC,GAAgB,MAAAC,EAAK,IAAIC,EAAgB,GAC3CC,IAAeC,EAAO,EAAI,GAC1BC,IAAcD,EAA8B,IAAI,GAChD,CAACE,GAAWC,CAAY,IAAIC,IAASC,IAAAJ,EAAY,YAAZ,gBAAAI,EAAqB,iBAAgBhB,CAAY,GACtF,CAACiB,GAAiCC,CAAkC,IAAIH,EAAS,EAAK,GAEtF,EAAE,aAAaI,EAAgB,IAAIC,EAAgB;AAAA,IACvD,gBAAgBlB,EAAoB;AAAA,IACpC,gBAAgBA,EAAoB;AAAA,EAAA,CACrC,GAEK,EAAE,aAAamB,EAAgB,IAAID,EAAgB;AAAA,IACvD,gBAAgBnB,EAAmB;AAAA,IACnC,gBAAgBA,EAAmB;AAAA,EAAA,CACpC,GAEK,EAAE,aAAaqB,EAAgB,IAAIF,EAAgB;AAAA,IACvD,gBAAgBjB,EAAwB;AAAA,IACxC,gBAAgBA,EAAwB;AAAA,EAAA,CACzC,GAEKoB,IAAwCC,EAAY,MAAM;AAC9D,IAAAN,EAAmC,EAAK,GACNb,KAAA,QAAAA;AAAA,EAAA,GACjC,CAACA,CAA+B,CAAC,GAE9BoB,IAA6BC;AAAA,IACjC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAUH;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAqC;AAAA,EAAA,GAGlCI,IAAgBD,EAAQ,MAAM3B,EAAM,IAAI,MAAM6B,GAA2B,GAAG,CAAC7B,CAAK,CAAC,GAEnF8B,IAAYL;AAAA,IAChB,CAACM,MAAkB;;AACjB,MAAIA,IAAQ,KAAKA,KAAS/B,EAAM,UAAU+B,MAAUjB,OACxCG,IAAAJ,EAAA,YAAA,QAAAI,EAAS,UAAUc,IAC/BhB,EAAagB,CAAK;AAAA,IACpB;AAAA,IACA,CAACjB,GAAWd,EAAM,MAAM;AAAA,EAAA,GAGpBgC,IAA+BP;AAAA,IACnC,CAACM,MAAkB;AACF,MAAAvB,KACCe,KAChBR,EAAagB,CAAK,GAClBD,EAAUC,CAAK;AAAA,IACjB;AAAA,IACA,CAACR,GAAiBf,CAAc;AAAA,EAAA;AAGlC,SAAAyB,EAAoB1B,GAAK,OAAO;AAAA,IAC9B,eAAAqB;AAAA,IACA,cAAcd;AAAA,IACd,WAAAgB;AAAA,EACA,EAAA,GAEFI,EAAU,MAAM;AACd,IAAIvB,EAAa,YACfA,EAAa,UAAU;AAAA,EAE3B,GAAG,CAAE,CAAA,GAELuB,EAAU,MAAM;;AACD,IAAAnB,IAAAE,IAAAJ,EAAY,YAAZ,gBAAAI,EAAqB,iBAAgBhB,CAAY;AAAA,EAAA,GAC7D,CAACA,CAAY,CAAC,GAEjBiC,EAAU,MAAM;AACd,UAAMC,IAAgBnC,EAAM,MAAM,CAAQoC,MAAAA,EAAK,kBAAkB,YAAY;AAE7E,IAAI/B,KAA6B8B,MAC/B1B,EAAK4B,EAAe,uBAAuB,GAC3ClB,EAAmC,EAAI;AAAA,EAExC,GAAA,CAACd,GAA2BI,GAAMT,CAAK,CAAC,GAGzC,gBAAAsC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAK1B;AAAA,MACL,OAAOb,EAAM,IAAI,CAACoC,GAAML,MACrB,gBAAAO,EAAAE,GAAA,EAA0C,UAAKJ,EAAA,QAAA,GAAbL,CAAqB,CACzD;AAAA,MACD,cAAA9B;AAAA,MACA,oBAAoBU,EAAa,UAAU,IAAI;AAAA,MAC/C,aAAaW;AAAA,MACb,cAAcF;AAAA,MAEb,UAAApB,EAAM,SAAS,KACd,gBAAAsC;AAAA,QAACG;AAAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,WAAU;AAAA,UAEV,UAAA,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,YACCzB,KAAA,gBAAAoB,EAACM,GAAA,EACC,UAAA,gBAAAN;AAAA,cAACO;AAAA,cAAA;AAAA,gBACC,KAAKC,EAAO;AAAA,gBACZ,UAAUC;AAAA,gBACV,eAAerB;AAAA,cAAA;AAAA,YAAA,GAEnB;AAAA,YAED1B,EAAM,IAAI,CAACoC,GAAML,MAChB,gBAAAO;AAAA,cAACU;AAAA,cAAA;AAAA,gBACC,KAAKpB,EAAcG,CAAK;AAAA,gBAExB,eAAeK,EAAK;AAAA,gBACpB,UAAUL,MAAUjB;AAAA,gBACpB,4BAA4BiB,IAAQ,GAAG,SAAS;AAAA,gBAChD,SAAS,MAAMC,EAA6BD,CAAK;AAAA,cAAA;AAAA,cAJ5CA;AAAA,YAAA,CAMR;AAAA,UAAA,GACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR,GAEakB,KAAWC,EAAKC,EAAWpD,CAAiB,CAAC;"}
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 { ISwipeableCarouselRefs } from '../../../../ui/swipeable-carousel/swipeable-carousel-types';\nimport SwipeableCarousel from '../../../../ui/swipeable-carousel/swipeable-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<ISwipeableCarouselRefs>(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, goToIndex],\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 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 <SwipeableCarousel\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 customNavigation={\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 />\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","SwipeableCarousel","Styled.CarouselItemContainer","Styled.ExtendedFlexView","jsxs","Styled.CarouselIdicatorContainer","Styled.AllGreenTickLottieWrapper","LottieAnimation","LOTTIE","allGreenTickLottienAimationSettings","CarouselIndicator","Carousel","memo","forwardRef"],"mappings":"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"}
@@ -1,13 +1,14 @@
1
- import { jsx as r, jsxs as m } from "react/jsx-runtime";
2
- import { useRef as c, useMemo as a } from "react";
3
- import { CarousalItem as u, CarouselWrapper as f } from "./achievements.styled.js";
4
- import l from "../../../../ui/text/text.js";
1
+ import { jsx as r, jsxs as g } from "react/jsx-runtime";
2
+ import { useRef as f, useMemo as l } from "react";
3
+ import { CarousalItem as u, CarouselWrapper as x } from "./achievements.styled.js";
4
+ import a from "../../../../ui/text/text.js";
5
5
  import n from "../../../../ui/separator/separator.js";
6
- import p from "../../../../ui/layout/flex-view.js";
7
- import x from "../../../../ui/swipable-carousel/swipable-carousel.js";
6
+ import h from "../../../../ui/layout/flex-view.js";
7
+ import c from "../../../../ui/swipeable-carousel/swipeable-carousel.js";
8
8
  import { IS_APP_RUNNING_IN_RN as t } from "../../../../../constants/app-config.js";
9
- const S = ({ achievements: o, studentName: e }) => {
10
- const h = c(null), s = a(
9
+ import { dotsConfig as w, navigationConfig as _ } from "./constant.js";
10
+ const L = ({ achievements: o, studentName: e }) => {
11
+ const m = f(null), s = l(
11
12
  () => o.map((i) => /* @__PURE__ */ r(
12
13
  u,
13
14
  {
@@ -20,41 +21,31 @@ const S = ({ achievements: o, studentName: e }) => {
20
21
  i.asset_id
21
22
  )),
22
23
  [o]
23
- ), d = a(
24
+ ), p = l(
24
25
  () => o.length >= 2 ? `Outstanding month! ${e} earned several achievements showing excellent progress across different areas.` : `Great work! ${e} earned new achievements this month, demonstrating growth in their skills.`,
25
26
  [o.length, e]
26
- ), g = !t && s.length > 1;
27
- return o != null && o.length ? /* @__PURE__ */ m(p, { children: [
28
- /* @__PURE__ */ r(l, { $renderAs: "ab1-bold", color: "BLACK_1", children: "Achievements" }),
27
+ ), d = !t && s.length > 1;
28
+ return o != null && o.length ? /* @__PURE__ */ g(h, { children: [
29
+ /* @__PURE__ */ r(a, { $renderAs: "ab1-bold", color: "BLACK_1", children: "Achievements" }),
29
30
  /* @__PURE__ */ r(n, { heightX: 0.125 }),
30
- /* @__PURE__ */ r(p, { $marginBottom: -24, children: /* @__PURE__ */ r(l, { $renderAs: "ub2", color: "BLUE_6", children: d }) }),
31
+ /* @__PURE__ */ r(h, { $marginBottom: -24, children: /* @__PURE__ */ r(a, { $renderAs: "ub2", color: "BLUE_6", children: p }) }),
31
32
  t && /* @__PURE__ */ r(n, { heightX: 1 }),
32
33
  /* @__PURE__ */ r(
33
- f,
34
+ x,
34
35
  {
35
36
  $height: t ? "380px" : "580px",
36
37
  $marginBottomX: t ? -0.5 : -1,
37
38
  children: /* @__PURE__ */ r(
38
- x,
39
+ c,
39
40
  {
40
- ref: h,
41
+ ref: m,
41
42
  items: s,
42
43
  defaultIndex: 0,
43
44
  transitionDuration: 300,
44
- showDots: !0,
45
- dotsConfig: {
46
- dotColor: "BLACK_1",
47
- inactiveDotColor: "WHITE_1",
48
- activeIndicatorSize: "8px",
49
- inactiveIndicatorSize: "8px",
50
- spacing: "8px"
51
- },
52
- showNavigationButtons: g,
53
- navigationConfig: {
54
- buttonVariant: "secondary",
55
- buttonSize: "xsmall",
56
- spacing: 8
57
- }
45
+ showIndicators: !0,
46
+ dotsConfig: w,
47
+ showNavigationButtons: d,
48
+ navigationConfig: _
58
49
  }
59
50
  )
60
51
  }
@@ -63,6 +54,6 @@ const S = ({ achievements: o, studentName: e }) => {
63
54
  ] }) : null;
64
55
  };
65
56
  export {
66
- S as default
57
+ L as default
67
58
  };
68
59
  //# sourceMappingURL=achievements.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"achievements.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/achievements/achievements.tsx"],"sourcesContent":["import { useMemo, useRef, type FC } from 'react';\n\nimport { type IAchievementsProps } from './achievements-types';\nimport type { ISwipableCarouselRefs } from '../../../../ui/swipable-carousel/swipable-carousel-types';\nimport * as Styled from './achievements.styled';\nimport Text from '../../../../ui/text/text';\nimport Separator from '../../../../ui/separator/separator';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport SwipableCarousel from '../../../../ui/swipable-carousel/swipable-carousel';\nimport { IS_APP_RUNNING_IN_RN } from '../../../../../constants/app-config';\n\nconst Achievements: FC<IAchievementsProps> = ({ achievements, studentName }) => {\n const carouselRef = useRef<ISwipableCarouselRefs>(null);\n\n const carouselItems = useMemo(\n () =>\n achievements.map(achievement => (\n <Styled.CarousalItem\n key={achievement.asset_id}\n src={achievement.url}\n alt={`Achievement ${achievement.asset_id}`}\n withLoader\n height={IS_APP_RUNNING_IN_RN ? '343px' : '480px'}\n width={IS_APP_RUNNING_IN_RN ? '343px' : '480px'}\n />\n )),\n [achievements],\n );\n\n const tipText = useMemo(\n () =>\n achievements.length >= 2\n ? `Outstanding month! ${studentName} earned several achievements showing excellent progress across different areas.`\n : `Great work! ${studentName} earned new achievements this month, demonstrating growth in their skills.`,\n [achievements.length, studentName],\n );\n\n const showNavigationButtons = !IS_APP_RUNNING_IN_RN && carouselItems.length > 1;\n\n if (!achievements?.length) {\n return null;\n }\n\n return (\n <FlexView>\n <Text $renderAs=\"ab1-bold\" color=\"BLACK_1\">\n Achievements\n </Text>\n <Separator heightX={0.125} />\n <FlexView $marginBottom={-24}>\n <Text $renderAs=\"ub2\" color=\"BLUE_6\">\n {tipText}\n </Text>\n </FlexView>\n {IS_APP_RUNNING_IN_RN && <Separator heightX={1} />}\n <Styled.CarouselWrapper\n $height={IS_APP_RUNNING_IN_RN ? '380px' : '580px'}\n $marginBottomX={IS_APP_RUNNING_IN_RN ? -0.5 : -1}\n >\n <SwipableCarousel\n ref={carouselRef}\n items={carouselItems}\n defaultIndex={0}\n transitionDuration={300}\n showDots={true}\n dotsConfig={{\n dotColor: 'BLACK_1',\n inactiveDotColor: 'WHITE_1',\n activeIndicatorSize: '8px',\n inactiveIndicatorSize: '8px',\n spacing: '8px',\n }}\n showNavigationButtons={showNavigationButtons}\n navigationConfig={{\n buttonVariant: 'secondary',\n buttonSize: 'xsmall',\n spacing: 8,\n }}\n />\n </Styled.CarouselWrapper>\n <Separator heightX={0.75} />\n </FlexView>\n );\n};\n\nexport default Achievements;\n"],"names":["Achievements","achievements","studentName","carouselRef","useRef","carouselItems","useMemo","achievement","jsx","Styled.CarousalItem","IS_APP_RUNNING_IN_RN","tipText","showNavigationButtons","FlexView","Text","Separator","Styled.CarouselWrapper","SwipableCarousel"],"mappings":";;;;;;;;AAWA,MAAMA,IAAuC,CAAC,EAAE,cAAAC,GAAc,aAAAC,QAAkB;AACxE,QAAAC,IAAcC,EAA8B,IAAI,GAEhDC,IAAgBC;AAAA,IACpB,MACEL,EAAa,IAAI,CACfM,MAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,KAAKF,EAAY;AAAA,QACjB,KAAK,eAAeA,EAAY,QAAQ;AAAA,QACxC,YAAU;AAAA,QACV,QAAQG,IAAuB,UAAU;AAAA,QACzC,OAAOA,IAAuB,UAAU;AAAA,MAAA;AAAA,MALnCH,EAAY;AAAA,IAAA,CAOpB;AAAA,IACH,CAACN,CAAY;AAAA,EAAA,GAGTU,IAAUL;AAAA,IACd,MACEL,EAAa,UAAU,IACnB,sBAAsBC,CAAW,oFACjC,eAAeA,CAAW;AAAA,IAChC,CAACD,EAAa,QAAQC,CAAW;AAAA,EAAA,GAG7BU,IAAwB,CAACF,KAAwBL,EAAc,SAAS;AAE1E,SAACJ,KAAA,QAAAA,EAAc,2BAKhBY,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,YAAW,OAAM,WAAU,UAE3C,gBAAA;AAAA,IACA,gBAAAN,EAACO,GAAU,EAAA,SAAS,MAAO,CAAA;AAAA,IAC3B,gBAAAP,EAACK,GAAS,EAAA,eAAe,KACvB,UAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,OAAM,OAAM,UACzB,UAAAH,EACH,CAAA,GACF;AAAA,IACCD,KAAwB,gBAAAF,EAACO,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IAChD,gBAAAP;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,SAASN,IAAuB,UAAU;AAAA,QAC1C,gBAAgBA,IAAuB,OAAO;AAAA,QAE9C,UAAA,gBAAAF;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,KAAKd;AAAA,YACL,OAAOE;AAAA,YACP,cAAc;AAAA,YACd,oBAAoB;AAAA,YACpB,UAAU;AAAA,YACV,YAAY;AAAA,cACV,UAAU;AAAA,cACV,kBAAkB;AAAA,cAClB,qBAAqB;AAAA,cACrB,uBAAuB;AAAA,cACvB,SAAS;AAAA,YACX;AAAA,YACA,uBAAAO;AAAA,YACA,kBAAkB;AAAA,cAChB,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,SAAS;AAAA,YACX;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAJ,EAACO,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,EAC5B,EAAA,CAAA,IAzCO;AA2CX;"}
1
+ {"version":3,"file":"achievements.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/achievements/achievements.tsx"],"sourcesContent":["import { useMemo, useRef, type FC } from 'react';\n\nimport { type IAchievementsProps } from './achievements-types';\nimport * as Styled from './achievements.styled';\nimport Text from '../../../../ui/text/text';\nimport Separator from '../../../../ui/separator/separator';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport SwipeableCarousel from '../../../../ui/swipeable-carousel/swipeable-carousel';\nimport { IS_APP_RUNNING_IN_RN } from '../../../../../constants/app-config';\nimport type { ISwipeableCarouselRefs } from '../../../../ui/swipeable-carousel/swipeable-carousel-types';\nimport { dotsConfig, navigationConfig } from './constant';\n\nconst Achievements: FC<IAchievementsProps> = ({ achievements, studentName }) => {\n const carouselRef = useRef<ISwipeableCarouselRefs>(null);\n\n const carouselItems = useMemo(\n () =>\n achievements.map(achievement => (\n <Styled.CarousalItem\n key={achievement.asset_id}\n src={achievement.url}\n alt={`Achievement ${achievement.asset_id}`}\n withLoader\n height={IS_APP_RUNNING_IN_RN ? '343px' : '480px'}\n width={IS_APP_RUNNING_IN_RN ? '343px' : '480px'}\n />\n )),\n [achievements],\n );\n\n const tipText = useMemo(\n () =>\n achievements.length >= 2\n ? `Outstanding month! ${studentName} earned several achievements showing excellent progress across different areas.`\n : `Great work! ${studentName} earned new achievements this month, demonstrating growth in their skills.`,\n [achievements.length, studentName],\n );\n\n const showNavigationButtons = !IS_APP_RUNNING_IN_RN && carouselItems.length > 1;\n\n if (!achievements?.length) {\n return null;\n }\n\n return (\n <FlexView>\n <Text $renderAs=\"ab1-bold\" color=\"BLACK_1\">\n Achievements\n </Text>\n <Separator heightX={0.125} />\n <FlexView $marginBottom={-24}>\n <Text $renderAs=\"ub2\" color=\"BLUE_6\">\n {tipText}\n </Text>\n </FlexView>\n {IS_APP_RUNNING_IN_RN && <Separator heightX={1} />}\n <Styled.CarouselWrapper\n $height={IS_APP_RUNNING_IN_RN ? '380px' : '580px'}\n $marginBottomX={IS_APP_RUNNING_IN_RN ? -0.5 : -1}\n >\n <SwipeableCarousel\n ref={carouselRef}\n items={carouselItems}\n defaultIndex={0}\n transitionDuration={300}\n showIndicators={true}\n dotsConfig={dotsConfig}\n showNavigationButtons={showNavigationButtons}\n navigationConfig={navigationConfig}\n />\n </Styled.CarouselWrapper>\n <Separator heightX={0.75} />\n </FlexView>\n );\n};\n\nexport default Achievements;\n"],"names":["Achievements","achievements","studentName","carouselRef","useRef","carouselItems","useMemo","achievement","jsx","Styled.CarousalItem","IS_APP_RUNNING_IN_RN","tipText","showNavigationButtons","FlexView","Text","Separator","Styled.CarouselWrapper","SwipeableCarousel","dotsConfig","navigationConfig"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAuC,CAAC,EAAE,cAAAC,GAAc,aAAAC,QAAkB;AACxE,QAAAC,IAAcC,EAA+B,IAAI,GAEjDC,IAAgBC;AAAA,IACpB,MACEL,EAAa,IAAI,CACfM,MAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,KAAKF,EAAY;AAAA,QACjB,KAAK,eAAeA,EAAY,QAAQ;AAAA,QACxC,YAAU;AAAA,QACV,QAAQG,IAAuB,UAAU;AAAA,QACzC,OAAOA,IAAuB,UAAU;AAAA,MAAA;AAAA,MALnCH,EAAY;AAAA,IAAA,CAOpB;AAAA,IACH,CAACN,CAAY;AAAA,EAAA,GAGTU,IAAUL;AAAA,IACd,MACEL,EAAa,UAAU,IACnB,sBAAsBC,CAAW,oFACjC,eAAeA,CAAW;AAAA,IAChC,CAACD,EAAa,QAAQC,CAAW;AAAA,EAAA,GAG7BU,IAAwB,CAACF,KAAwBL,EAAc,SAAS;AAE1E,SAACJ,KAAA,QAAAA,EAAc,2BAKhBY,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,YAAW,OAAM,WAAU,UAE3C,gBAAA;AAAA,IACA,gBAAAN,EAACO,GAAU,EAAA,SAAS,MAAO,CAAA;AAAA,IAC3B,gBAAAP,EAACK,GAAS,EAAA,eAAe,KACvB,UAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,OAAM,OAAM,UACzB,UAAAH,EACH,CAAA,GACF;AAAA,IACCD,KAAwB,gBAAAF,EAACO,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IAChD,gBAAAP;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,SAASN,IAAuB,UAAU;AAAA,QAC1C,gBAAgBA,IAAuB,OAAO;AAAA,QAE9C,UAAA,gBAAAF;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,KAAKd;AAAA,YACL,OAAOE;AAAA,YACP,cAAc;AAAA,YACd,oBAAoB;AAAA,YACpB,gBAAgB;AAAA,YAChB,YAAAa;AAAA,YACA,uBAAAN;AAAA,YACA,kBAAAO;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAX,EAACO,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,EAC5B,EAAA,CAAA,IA/BO;AAiCX;"}
@@ -0,0 +1,17 @@
1
+ const i = {
2
+ dotColor: "BLACK_1",
3
+ inactiveDotColor: "WHITE_1",
4
+ activeIndicatorSize: "8px",
5
+ inactiveIndicatorSize: "8px",
6
+ spacing: "8px"
7
+ }, o = {
8
+ buttonVariant: "secondary",
9
+ buttonSize: "xsmall",
10
+ spacing: 8,
11
+ hideOnMobile: !0
12
+ };
13
+ export {
14
+ i as dotsConfig,
15
+ o as navigationConfig
16
+ };
17
+ //# sourceMappingURL=constant.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constant.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/achievements/constant.ts"],"sourcesContent":["const dotsConfig = {\n dotColor: 'BLACK_1',\n inactiveDotColor: 'WHITE_1',\n activeIndicatorSize: '8px',\n inactiveIndicatorSize: '8px',\n spacing: '8px',\n} as const;\n\nconst navigationConfig = {\n buttonVariant: 'secondary',\n buttonSize: 'xsmall',\n spacing: 8,\n hideOnMobile: true,\n} as const;\n\nexport { dotsConfig, navigationConfig };\n"],"names":["dotsConfig","navigationConfig"],"mappings":"AAAA,MAAMA,IAAa;AAAA,EACjB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,SAAS;AACX,GAEMC,IAAmB;AAAA,EACvB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAChB;"}
@@ -1,18 +1,18 @@
1
- import { jsx as E } from "react/jsx-runtime";
1
+ import { jsx as t } from "react/jsx-runtime";
2
2
  import { LOTTIE as r } from "../../../../../assets/lottie/lottie.js";
3
- import _ from "../../../../../assets/line-icons/icons/check2.js";
3
+ import e from "../../../../../assets/line-icons/icons/check2.js";
4
4
  import T from "../../../../../assets/line-icons/icons/status.js";
5
- import e from "../../../../../assets/line-icons/icons/exclamation.js";
5
+ import a from "../../../../../assets/line-icons/icons/exclamation.js";
6
6
  import { NODE_STATE as c } from "../../../daily-timeline-types.js";
7
- import { ILLUSTRATIONS as t } from "../../../../../assets/illustrations/illustrations.js";
7
+ import { ILLUSTRATIONS as E } from "../../../../../assets/illustrations/illustrations.js";
8
8
  import { CARD_TYPE as o } from "../../monthly-report-types.js";
9
- function R(a) {
10
- switch (a) {
9
+ function R(_) {
10
+ switch (_) {
11
11
  case o.learn:
12
12
  return {
13
13
  lottie: r.LEARN,
14
14
  color: "YELLOW_2",
15
- background: t.NODE_LEARN_BG
15
+ background: E.NODE_LEARN_BG
16
16
  };
17
17
  case o.practice:
18
18
  case o.smart_practice:
@@ -20,38 +20,38 @@ function R(a) {
20
20
  return {
21
21
  lottie: r.PRACTICE,
22
22
  color: "PURPLE_2",
23
- background: t.NODE_PRACTICE_BG
23
+ background: E.NODE_PRACTICE_BG
24
24
  };
25
25
  case o.puzzle:
26
26
  return {
27
27
  lottie: r.PUZZLE,
28
28
  color: "PURPLE_2",
29
- background: t.NODE_PUZZLE_BG
29
+ background: E.NODE_PUZZLE_BG
30
30
  };
31
31
  case o.test:
32
32
  case o.diagnostic:
33
33
  return {
34
34
  lottie: r.TEST,
35
35
  color: "ORANGE_2",
36
- background: t.NODE_CUSTOM_TEST_BG
36
+ background: E.NODE_CUSTOM_TEST_BG
37
37
  };
38
38
  case o.challenge:
39
39
  return {
40
40
  lottie: r.COMPETITIVE_ARENA,
41
41
  color: "ORANGE_2",
42
- background: t.NODE_TEST_PREP_BG
42
+ background: E.NODE_TEST_PREP_BG
43
43
  };
44
44
  case o.advanced:
45
45
  return {
46
46
  lottie: r.TEST,
47
47
  color: "GREEN_2",
48
- background: t.NODE_TEST_PREP_BG
48
+ background: E.NODE_TEST_PREP_BG
49
49
  };
50
50
  case o.subjective:
51
51
  return {
52
52
  lottie: r.SUBJECTIVE,
53
53
  color: "BLUE_2",
54
- background: t.NODE_SUBJECTIVE_BG
54
+ background: E.NODE_SUBJECTIVE_BG
55
55
  };
56
56
  case o.recap:
57
57
  case o.remedial:
@@ -59,34 +59,35 @@ function R(a) {
59
59
  return {
60
60
  lottie: r.RECAP,
61
61
  color: "BLUE_2",
62
- background: t.NODE_RECAP_BG
62
+ background: E.NODE_RECAP_BG
63
63
  };
64
64
  case o.activity:
65
65
  case o.wb_activity:
66
66
  return {
67
67
  lottie: r.ACTIVITY,
68
68
  color: "ORANGE_2",
69
- background: t.NODE_ACTIVITY_BG
69
+ background: E.NODE_ACTIVITY_BG
70
70
  };
71
71
  case o.video:
72
72
  return {
73
73
  lottie: r.VIDEO,
74
74
  color: "GREEN_2",
75
- background: t.NODE_VIDEO_BG
75
+ background: E.NODE_VIDEO_BG
76
76
  };
77
77
  default:
78
78
  return {
79
79
  lottie: r.PROJECT,
80
80
  color: "GREEN_2",
81
- background: t.NODE_PROJECT_BG
81
+ background: E.NODE_PROJECT_BG
82
82
  };
83
83
  }
84
84
  }
85
85
  const P = {
86
- [c.COMPLETED]: /* @__PURE__ */ E(_, { color: "WHITE" }),
87
- [c.IN_PROGRESS]: /* @__PURE__ */ E(T, { color: "WHITE" }),
88
- [c.PENDING]: /* @__PURE__ */ E(e, { color: "WHITE" }),
89
- [c.NOT_STARTED]: /* @__PURE__ */ E(e, { color: "WHITE" })
86
+ [c.COMPLETED]: /* @__PURE__ */ t(e, { color: "WHITE" }),
87
+ [c.IN_PROGRESS]: /* @__PURE__ */ t(T, { color: "WHITE" }),
88
+ [c.PENDING]: /* @__PURE__ */ t(a, { color: "WHITE" }),
89
+ [c.NOT_STARTED]: /* @__PURE__ */ t(a, { color: "WHITE" }),
90
+ [c.WAIT_FOR_REVIEW]: /* @__PURE__ */ t(e, { color: "WHITE" })
90
91
  };
91
92
  export {
92
93
  R as getCardTypeIconMap,
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/activities/constants.tsx"],"sourcesContent":["import { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport StatusIcon from '../../../../../assets/line-icons/icons/status';\nimport ExclamationIcon from '../../../../../assets/line-icons/icons/exclamation';\nimport { NODE_STATE } from '../../../daily-timeline-types';\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport { CARD_TYPE } from '../../monthly-report-types';\n\nexport function getCardTypeIconMap(cardType: CARD_TYPE) {\n switch (cardType) {\n case CARD_TYPE.learn:\n return {\n lottie: LOTTIE.LEARN,\n color: 'YELLOW_2',\n background: ILLUSTRATIONS.NODE_LEARN_BG,\n };\n case CARD_TYPE.practice:\n case CARD_TYPE.smart_practice:\n case CARD_TYPE.sat_mock_test:\n return {\n lottie: LOTTIE.PRACTICE,\n color: 'PURPLE_2',\n background: ILLUSTRATIONS.NODE_PRACTICE_BG,\n };\n case CARD_TYPE.puzzle:\n return {\n lottie: LOTTIE.PUZZLE,\n color: 'PURPLE_2',\n background: ILLUSTRATIONS.NODE_PUZZLE_BG,\n };\n case CARD_TYPE.test:\n case CARD_TYPE.diagnostic:\n return {\n lottie: LOTTIE.TEST,\n color: 'ORANGE_2',\n background: ILLUSTRATIONS.NODE_CUSTOM_TEST_BG,\n };\n case CARD_TYPE.challenge:\n return {\n lottie: LOTTIE.COMPETITIVE_ARENA,\n color: 'ORANGE_2',\n background: ILLUSTRATIONS.NODE_TEST_PREP_BG,\n };\n case CARD_TYPE.advanced:\n return {\n lottie: LOTTIE.TEST,\n color: 'GREEN_2',\n background: ILLUSTRATIONS.NODE_TEST_PREP_BG,\n };\n case CARD_TYPE.subjective:\n return {\n lottie: LOTTIE.SUBJECTIVE,\n color: 'BLUE_2',\n background: ILLUSTRATIONS.NODE_SUBJECTIVE_BG,\n };\n case CARD_TYPE.recap:\n case CARD_TYPE.remedial:\n case CARD_TYPE.revision:\n return {\n lottie: LOTTIE.RECAP,\n color: 'BLUE_2',\n background: ILLUSTRATIONS.NODE_RECAP_BG,\n };\n\n case CARD_TYPE.activity:\n case CARD_TYPE.wb_activity:\n return {\n lottie: LOTTIE.ACTIVITY,\n color: 'ORANGE_2',\n background: ILLUSTRATIONS.NODE_ACTIVITY_BG,\n };\n\n case CARD_TYPE.video:\n return {\n lottie: LOTTIE.VIDEO,\n color: 'GREEN_2',\n background: ILLUSTRATIONS.NODE_VIDEO_BG,\n };\n\n default:\n return {\n lottie: LOTTIE.PROJECT,\n color: 'GREEN_2',\n background: ILLUSTRATIONS.NODE_PROJECT_BG,\n };\n }\n}\n\nexport const stateIcon = {\n [NODE_STATE.COMPLETED]: <Check2Icon color=\"WHITE\" />,\n [NODE_STATE.IN_PROGRESS]: <StatusIcon color=\"WHITE\" />,\n [NODE_STATE.PENDING]: <ExclamationIcon color=\"WHITE\" />,\n [NODE_STATE.NOT_STARTED]: <ExclamationIcon color=\"WHITE\" />,\n};\n"],"names":["getCardTypeIconMap","cardType","CARD_TYPE","LOTTIE","ILLUSTRATIONS","stateIcon","NODE_STATE","jsx","Check2Icon","StatusIcon","ExclamationIcon"],"mappings":";;;;;;;;AAQO,SAASA,EAAmBC,GAAqB;AACtD,UAAQA,GAAU;AAAA,IAChB,KAAKC,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAG9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAG9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAG9B;AACS,aAAA;AAAA,QACL,QAAQD,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,EAEhC;AACF;AAEO,MAAMC,IAAY;AAAA,EACvB,CAACC,EAAW,SAAS,GAAI,gBAAAC,EAAAC,GAAA,EAAW,OAAM,SAAQ;AAAA,EAClD,CAACF,EAAW,WAAW,GAAI,gBAAAC,EAAAE,GAAA,EAAW,OAAM,SAAQ;AAAA,EACpD,CAACH,EAAW,OAAO,GAAI,gBAAAC,EAAAG,GAAA,EAAgB,OAAM,SAAQ;AAAA,EACrD,CAACJ,EAAW,WAAW,GAAI,gBAAAC,EAAAG,GAAA,EAAgB,OAAM,SAAQ;AAC3D;"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/activities/constants.tsx"],"sourcesContent":["import { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport StatusIcon from '../../../../../assets/line-icons/icons/status';\nimport ExclamationIcon from '../../../../../assets/line-icons/icons/exclamation';\nimport { NODE_STATE } from '../../../daily-timeline-types';\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport { CARD_TYPE } from '../../monthly-report-types';\n\nexport function getCardTypeIconMap(cardType: CARD_TYPE) {\n switch (cardType) {\n case CARD_TYPE.learn:\n return {\n lottie: LOTTIE.LEARN,\n color: 'YELLOW_2',\n background: ILLUSTRATIONS.NODE_LEARN_BG,\n };\n case CARD_TYPE.practice:\n case CARD_TYPE.smart_practice:\n case CARD_TYPE.sat_mock_test:\n return {\n lottie: LOTTIE.PRACTICE,\n color: 'PURPLE_2',\n background: ILLUSTRATIONS.NODE_PRACTICE_BG,\n };\n case CARD_TYPE.puzzle:\n return {\n lottie: LOTTIE.PUZZLE,\n color: 'PURPLE_2',\n background: ILLUSTRATIONS.NODE_PUZZLE_BG,\n };\n case CARD_TYPE.test:\n case CARD_TYPE.diagnostic:\n return {\n lottie: LOTTIE.TEST,\n color: 'ORANGE_2',\n background: ILLUSTRATIONS.NODE_CUSTOM_TEST_BG,\n };\n case CARD_TYPE.challenge:\n return {\n lottie: LOTTIE.COMPETITIVE_ARENA,\n color: 'ORANGE_2',\n background: ILLUSTRATIONS.NODE_TEST_PREP_BG,\n };\n case CARD_TYPE.advanced:\n return {\n lottie: LOTTIE.TEST,\n color: 'GREEN_2',\n background: ILLUSTRATIONS.NODE_TEST_PREP_BG,\n };\n case CARD_TYPE.subjective:\n return {\n lottie: LOTTIE.SUBJECTIVE,\n color: 'BLUE_2',\n background: ILLUSTRATIONS.NODE_SUBJECTIVE_BG,\n };\n case CARD_TYPE.recap:\n case CARD_TYPE.remedial:\n case CARD_TYPE.revision:\n return {\n lottie: LOTTIE.RECAP,\n color: 'BLUE_2',\n background: ILLUSTRATIONS.NODE_RECAP_BG,\n };\n\n case CARD_TYPE.activity:\n case CARD_TYPE.wb_activity:\n return {\n lottie: LOTTIE.ACTIVITY,\n color: 'ORANGE_2',\n background: ILLUSTRATIONS.NODE_ACTIVITY_BG,\n };\n\n case CARD_TYPE.video:\n return {\n lottie: LOTTIE.VIDEO,\n color: 'GREEN_2',\n background: ILLUSTRATIONS.NODE_VIDEO_BG,\n };\n\n default:\n return {\n lottie: LOTTIE.PROJECT,\n color: 'GREEN_2',\n background: ILLUSTRATIONS.NODE_PROJECT_BG,\n };\n }\n}\n\nexport const stateIcon = {\n [NODE_STATE.COMPLETED]: <Check2Icon color=\"WHITE\" />,\n [NODE_STATE.IN_PROGRESS]: <StatusIcon color=\"WHITE\" />,\n [NODE_STATE.PENDING]: <ExclamationIcon color=\"WHITE\" />,\n [NODE_STATE.NOT_STARTED]: <ExclamationIcon color=\"WHITE\" />,\n [NODE_STATE.WAIT_FOR_REVIEW]: <Check2Icon color=\"WHITE\" />,\n};\n"],"names":["getCardTypeIconMap","cardType","CARD_TYPE","LOTTIE","ILLUSTRATIONS","stateIcon","NODE_STATE","jsx","Check2Icon","StatusIcon","ExclamationIcon"],"mappings":";;;;;;;;AAQO,SAASA,EAAmBC,GAAqB;AACtD,UAAQA,GAAU;AAAA,IAChB,KAAKC,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAE9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAG9B,KAAKF,EAAU;AAAA,IACf,KAAKA,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAG9B,KAAKF,EAAU;AACN,aAAA;AAAA,QACL,QAAQC,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,IAG9B;AACS,aAAA;AAAA,QACL,QAAQD,EAAO;AAAA,QACf,OAAO;AAAA,QACP,YAAYC,EAAc;AAAA,MAAA;AAAA,EAEhC;AACF;AAEO,MAAMC,IAAY;AAAA,EACvB,CAACC,EAAW,SAAS,GAAI,gBAAAC,EAAAC,GAAA,EAAW,OAAM,SAAQ;AAAA,EAClD,CAACF,EAAW,WAAW,GAAI,gBAAAC,EAAAE,GAAA,EAAW,OAAM,SAAQ;AAAA,EACpD,CAACH,EAAW,OAAO,GAAI,gBAAAC,EAAAG,GAAA,EAAgB,OAAM,SAAQ;AAAA,EACrD,CAACJ,EAAW,WAAW,GAAI,gBAAAC,EAAAG,GAAA,EAAgB,OAAM,SAAQ;AAAA,EACzD,CAACJ,EAAW,eAAe,GAAI,gBAAAC,EAAAC,GAAA,EAAW,OAAM,SAAQ;AAC1D;"}
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/activities/utils.ts"],"sourcesContent":["import { type IMonthlyActivity } from '../../monthly-report-types';\nimport { NODE_STATE } from '../../../daily-timeline-types';\n\nexport const countActivitiesByState = (activitiesList: IMonthlyActivity[]) => {\n const totalDone = activitiesList.filter(\n activity => activity.state === NODE_STATE.COMPLETED || activity.state === NODE_STATE.WAIT_FOR_REVIEW,\n ).length;\n const totalPending = activitiesList.filter(\n activity => activity.state === NODE_STATE.IN_PROGRESS,\n ).length;\n const totalOverdue = activitiesList.filter(\n activity => activity.state === NODE_STATE.PENDING || activity.state === NODE_STATE.NOT_STARTED,\n ).length;\n\n return { totalDone, totalPending, totalOverdue };\n};\n"],"names":["countActivitiesByState","activitiesList","totalDone","activity","NODE_STATE","totalPending","totalOverdue"],"mappings":";AAGa,MAAAA,IAAyB,CAACC,MAAuC;AAC5E,QAAMC,IAAYD,EAAe;AAAA,IAC/B,OAAYE,EAAS,UAAUC,EAAW,aAAaD,EAAS,UAAUC,EAAW;AAAA,EACrF,EAAA,QACIC,IAAeJ,EAAe;AAAA,IAClC,CAAAE,MAAYA,EAAS,UAAUC,EAAW;AAAA,EAC1C,EAAA,QACIE,IAAeL,EAAe;AAAA,IAClC,OAAYE,EAAS,UAAUC,EAAW,WAAWD,EAAS,UAAUC,EAAW;AAAA,EACnF,EAAA;AAEK,SAAA,EAAE,WAAAF,GAAW,cAAAG,GAAc,cAAAC;AACpC;"}
1
+ {"version":3,"file":"utils.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/activities/utils.ts"],"sourcesContent":["import { type IMonthlyActivity } from '../../monthly-report-types';\nimport { NODE_STATE } from '../../../daily-timeline-types';\n\nexport const countActivitiesByState = (activitiesList: IMonthlyActivity[]) => {\n const totalDone = activitiesList.filter(\n activity =>\n activity.state === NODE_STATE.COMPLETED || activity.state === NODE_STATE.WAIT_FOR_REVIEW,\n ).length;\n const totalPending = activitiesList.filter(\n activity => activity.state === NODE_STATE.IN_PROGRESS,\n ).length;\n const totalOverdue = activitiesList.filter(\n activity => activity.state === NODE_STATE.PENDING || activity.state === NODE_STATE.NOT_STARTED,\n ).length;\n\n return { totalDone, totalPending, totalOverdue };\n};\n"],"names":["countActivitiesByState","activitiesList","totalDone","activity","NODE_STATE","totalPending","totalOverdue"],"mappings":";AAGa,MAAAA,IAAyB,CAACC,MAAuC;AAC5E,QAAMC,IAAYD,EAAe;AAAA,IAC/B,OACEE,EAAS,UAAUC,EAAW,aAAaD,EAAS,UAAUC,EAAW;AAAA,EAC3E,EAAA,QACIC,IAAeJ,EAAe;AAAA,IAClC,CAAAE,MAAYA,EAAS,UAAUC,EAAW;AAAA,EAC1C,EAAA,QACIE,IAAeL,EAAe;AAAA,IAClC,OAAYE,EAAS,UAAUC,EAAW,WAAWD,EAAS,UAAUC,EAAW;AAAA,EACnF,EAAA;AAEK,SAAA,EAAE,WAAAF,GAAW,cAAAG,GAAc,cAAAC;AACpC;"}
@@ -0,0 +1,17 @@
1
+ const t = {
2
+ dotColor: "BLACK_1",
3
+ inactiveDotColor: "WHITE_1",
4
+ activeIndicatorSize: "8px",
5
+ inactiveIndicatorSize: "8px",
6
+ spacing: "8px"
7
+ }, i = {
8
+ buttonVariant: "secondary",
9
+ buttonSize: "xsmall",
10
+ spacing: 8,
11
+ hideOnMobile: !0
12
+ };
13
+ export {
14
+ t as defaultDotConfig,
15
+ i as defaultNavigationConfig
16
+ };
17
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/features/ui/swipeable-carousel/constants.ts"],"sourcesContent":["const defaultDotConfig = {\n dotColor: 'BLACK_1' as const,\n inactiveDotColor: 'WHITE_1' as const,\n activeIndicatorSize: '8px',\n inactiveIndicatorSize: '8px',\n spacing: '8px',\n};\n\nconst defaultNavigationConfig = {\n buttonVariant: 'secondary' as const,\n buttonSize: 'xsmall' as const,\n spacing: 8,\n hideOnMobile: true,\n};\n\nexport { defaultDotConfig, defaultNavigationConfig };\n"],"names":["defaultDotConfig","defaultNavigationConfig"],"mappings":"AAAA,MAAMA,IAAmB;AAAA,EACvB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,SAAS;AACX,GAEMC,IAA0B;AAAA,EAC9B,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAChB;"}
@@ -52,6 +52,6 @@ export {
52
52
  l as CarouselItemContainer,
53
53
  a as CarouselWrapper,
54
54
  c as Dot,
55
- d as NavigationConatainer
55
+ d as NavigationContainer
56
56
  };
57
- //# sourceMappingURL=swipable-carousel-styled.js.map
57
+ //# sourceMappingURL=swipeable-carousel-styled.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"swipeable-carousel-styled.js","sources":["../../../../src/features/ui/swipeable-carousel/swipeable-carousel-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport type { TColorNames } from '../types';\n\nexport const Carousel = styled.div`\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n touch-action: none;\n`;\n\nexport const CarouselContent = styled.div`\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n touch-action: none;\n`;\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\ninterface IDotProps {\n $isCurrent: boolean;\n $dotColor: TColorNames;\n $inactiveDotColor: TColorNames;\n $activeIndicatorSize: string;\n $inactiveIndicatorSize: string;\n}\n\nexport const Dot = styled.span<IDotProps>`\n background: ${({ theme, $isCurrent, $dotColor, $inactiveDotColor }) =>\n $isCurrent ? theme.colors[$dotColor] : theme.colors[$inactiveDotColor]};\n border: 1px solid ${({ theme, $dotColor }) => theme.colors[$dotColor]};\n width: ${({ $isCurrent, $activeIndicatorSize, $inactiveIndicatorSize }) =>\n $isCurrent ? $activeIndicatorSize : $inactiveIndicatorSize};\n height: ${({ $isCurrent, $activeIndicatorSize, $inactiveIndicatorSize }) =>\n $isCurrent ? $activeIndicatorSize : $inactiveIndicatorSize};\n border-radius: 50%;\n display: inline-block;\n transition: all 0.3s ease;\n cursor: pointer;\n\n &:hover {\n opacity: 0.8;\n }\n`;\n\nexport const NavigationContainer = styled.div<{ $bottom?: string }>`\n position: absolute;\n bottom: ${({ $bottom }) => $bottom || '-48px'};\n`;\n"],"names":["Carousel","styled","CarouselWrapper","$translate","$translateDuration","CarouselItemContainer","Dot","theme","$isCurrent","$dotColor","$inactiveDotColor","$activeIndicatorSize","$inactiveIndicatorSize","NavigationContainer","$bottom"],"mappings":";AAIO,MAAMA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASAA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,MAAMC,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,GAkB/BK,IAAML,EAAO;AAAA,gBACV,CAAC,EAAE,OAAAM,GAAO,YAAAC,GAAY,WAAAC,GAAW,mBAAAC,EAAkB,MAC/DF,IAAaD,EAAM,OAAOE,CAAS,IAAIF,EAAM,OAAOG,CAAiB,CAAC;AAAA,sBACpD,CAAC,EAAE,OAAAH,GAAO,WAAAE,EAAA,MAAgBF,EAAM,OAAOE,CAAS,CAAC;AAAA,WAC5D,CAAC,EAAE,YAAAD,GAAY,sBAAAG,GAAsB,wBAAAC,QAC5CJ,IAAaG,IAAuBC,CAAsB;AAAA,YAClD,CAAC,EAAE,YAAAJ,GAAY,sBAAAG,GAAsB,wBAAAC,QAC7CJ,IAAaG,IAAuBC,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjDC,IAAsBZ,EAAO;AAAA;AAAA,YAE9B,CAAC,EAAE,SAAAa,QAAcA,KAAW,OAAO;AAAA;"}
@@ -0,0 +1,145 @@
1
+ import { jsx as o, jsxs as j } from "react/jsx-runtime";
2
+ import { memo as k, forwardRef as q, useState as C, useMemo as z, useCallback as n, useImperativeHandle as J, useEffect as K } from "react";
3
+ import L from "../swipeable-component/swipeable-component.js";
4
+ import M from "../buttons/icon-button/icon-button.js";
5
+ import { Dot as O, NavigationContainer as A, Carousel as Q, CarouselWrapper as U, CarouselItemContainer as Y } from "./swipeable-carousel-styled.js";
6
+ import Z from "../../../assets/line-icons/icons/chevron-left.js";
7
+ import R from "../../../assets/line-icons/icons/chevron-right.js";
8
+ import h from "../layout/flex-view.js";
9
+ import x from "../separator/separator.js";
10
+ import { defaultDotConfig as B, defaultNavigationConfig as g } from "./constants.js";
11
+ const w = ({
12
+ items: l,
13
+ customNavigation: E,
14
+ defaultIndex: S = 0,
15
+ transitionDuration: F = 300,
16
+ onSwipeLeft: s,
17
+ onSwipeRight: m,
18
+ onIndexChange: e,
19
+ showIndicators: p = !1,
20
+ dotsConfig: y,
21
+ showNavigationButtons: f = !1,
22
+ navigationConfig: G,
23
+ onCarouselIndicatorClick: $
24
+ }, H) => {
25
+ const T = Math.max(0, Math.min(S, l.length - 1)), [r, b] = C(T), v = r > 0, D = r < l.length - 1, i = z(() => ({ ...B, ...y }), [y]), a = z(
26
+ () => ({ ...g, ...G }),
27
+ [G]
28
+ ), c = n(
29
+ (t) => {
30
+ t < 0 || t >= l.length || t === r || (b(t), e == null || e(t));
31
+ },
32
+ [r, l.length, e]
33
+ );
34
+ J(H, () => ({
35
+ currentIndex: r,
36
+ goToIndex: c
37
+ }));
38
+ const W = n(() => {
39
+ if (!D) return;
40
+ const t = r + 1;
41
+ b(t), e == null || e(t), s == null || s();
42
+ }, [D, r, s, e]), X = n(() => {
43
+ if (!v) return;
44
+ const t = r - 1;
45
+ b(t), e == null || e(t), m == null || m();
46
+ }, [v, r, m, e]), N = n(
47
+ (t) => {
48
+ c(t), $ == null || $(t);
49
+ },
50
+ [c, $]
51
+ ), P = n(() => {
52
+ c(r - 1);
53
+ }, [c, r]), V = n(() => {
54
+ c(r + 1);
55
+ }, [c, r]), d = z(() => !p || l.length <= 1 ? null : /* @__PURE__ */ o(h, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGap: 8, children: l.map((t, u) => /* @__PURE__ */ o(
56
+ O,
57
+ {
58
+ onClick: () => N(u),
59
+ $isCurrent: u === r,
60
+ $dotColor: i.dotColor,
61
+ $inactiveDotColor: i.inactiveDotColor,
62
+ $activeIndicatorSize: i.activeIndicatorSize,
63
+ $inactiveIndicatorSize: i.inactiveIndicatorSize
64
+ },
65
+ u
66
+ )) }), [
67
+ r,
68
+ i.activeIndicatorSize,
69
+ i.dotColor,
70
+ i.inactiveDotColor,
71
+ i.inactiveIndicatorSize,
72
+ N,
73
+ l,
74
+ p
75
+ ]), _ = z(() => !f || l.length <= 1 ? null : /* @__PURE__ */ j(A, { $bottom: "-48px", children: [
76
+ /* @__PURE__ */ o(x, { heightX: 1 }),
77
+ /* @__PURE__ */ j(
78
+ h,
79
+ {
80
+ $flexDirection: "row",
81
+ $alignItems: "center",
82
+ $justifyContent: "center",
83
+ $flex: 1,
84
+ $flexGap: a.spacing || 8,
85
+ children: [
86
+ /* @__PURE__ */ o(
87
+ M,
88
+ {
89
+ Icon: Z,
90
+ renderAs: a.buttonVariant,
91
+ analyticsLabel: "Previous",
92
+ size: a.buttonSize,
93
+ onClick: P,
94
+ disabled: !v,
95
+ "aria-label": "Previous item"
96
+ }
97
+ ),
98
+ d,
99
+ /* @__PURE__ */ o(
100
+ M,
101
+ {
102
+ Icon: R,
103
+ renderAs: a.buttonVariant,
104
+ analyticsLabel: "Next",
105
+ size: a.buttonSize,
106
+ onClick: V,
107
+ disabled: !D,
108
+ "aria-label": "Next item"
109
+ }
110
+ )
111
+ ]
112
+ }
113
+ )
114
+ ] }), [
115
+ D,
116
+ v,
117
+ a.buttonSize,
118
+ a.buttonVariant,
119
+ a.spacing,
120
+ V,
121
+ P,
122
+ l.length,
123
+ d,
124
+ f
125
+ ]);
126
+ return K(() => {
127
+ b(S);
128
+ }, [S]), /* @__PURE__ */ o(L, { onSwipeLeft: W, onSwipeRight: X, children: /* @__PURE__ */ j(Q, { children: [
129
+ /* @__PURE__ */ o(
130
+ U,
131
+ {
132
+ $translate: r * 100,
133
+ $translateDuration: F,
134
+ children: l.map((t, u) => /* @__PURE__ */ o(Y, { children: t }, u))
135
+ }
136
+ ),
137
+ !p && !f && l.length > 1 && E,
138
+ p && !f && /* @__PURE__ */ o(A, { $bottom: "-8px", children: d }),
139
+ f && _
140
+ ] }) });
141
+ }, ft = k(q(w));
142
+ export {
143
+ ft as default
144
+ };
145
+ //# sourceMappingURL=swipeable-carousel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"swipeable-carousel.js","sources":["../../../../src/features/ui/swipeable-carousel/swipeable-carousel.tsx"],"sourcesContent":["import {\n type ForwardRefRenderFunction,\n memo,\n useCallback,\n useEffect,\n useState,\n forwardRef,\n useImperativeHandle,\n useMemo,\n} from 'react';\n\nimport SwipeableComponent from '../swipeable-component/swipeable-component';\nimport IconButton from '../buttons/icon-button/icon-button';\nimport * as Styled from './swipeable-carousel-styled';\nimport type { ISwipeableCarousel, ISwipeableCarouselRefs } from './swipeable-carousel-types';\nimport ChevronLeft from '../../../assets/line-icons/icons/chevron-left';\nimport ChevronRight from '../../../assets/line-icons/icons/chevron-right';\nimport FlexView from '../layout/flex-view';\nimport Separator from '../separator/separator';\nimport { defaultDotConfig, defaultNavigationConfig } from './constants';\n\nconst SwipeableCarousel: ForwardRefRenderFunction<ISwipeableCarouselRefs, ISwipeableCarousel> = (\n {\n items,\n customNavigation,\n defaultIndex = 0,\n transitionDuration = 300,\n onSwipeLeft,\n onSwipeRight,\n onIndexChange,\n showIndicators = false,\n dotsConfig,\n showNavigationButtons = false,\n navigationConfig,\n onCarouselIndicatorClick,\n },\n ref,\n) => {\n const validDefaultIndex = Math.max(0, Math.min(defaultIndex, items.length - 1));\n const [currIndex, setCurrIndex] = useState(validDefaultIndex);\n const canGoPrevious = currIndex > 0;\n const canGoNext = currIndex < items.length - 1;\n const finalDotConfig = useMemo(() => ({ ...defaultDotConfig, ...dotsConfig }), [dotsConfig]);\n const finalNavigationConfig = useMemo(\n () => ({ ...defaultNavigationConfig, ...navigationConfig }),\n [navigationConfig],\n );\n\n const goToIndex = useCallback(\n (index: number) => {\n if (index < 0 || index >= items.length || index === currIndex) return;\n setCurrIndex(index);\n onIndexChange?.(index);\n },\n [currIndex, items.length, onIndexChange],\n );\n\n useImperativeHandle(ref, () => ({\n currentIndex: currIndex,\n goToIndex,\n }));\n\n const handleSwipeLeft = useCallback(() => {\n if (!canGoNext) return;\n\n const newIndex = currIndex + 1;\n\n setCurrIndex(newIndex);\n onIndexChange?.(newIndex);\n onSwipeLeft?.();\n }, [canGoNext, currIndex, onSwipeLeft, onIndexChange]);\n\n const handleSwipeRight = useCallback(() => {\n if (!canGoPrevious) return;\n\n const newIndex = currIndex - 1;\n\n setCurrIndex(newIndex);\n onIndexChange?.(newIndex);\n onSwipeRight?.();\n }, [canGoPrevious, currIndex, onSwipeRight, onIndexChange]);\n\n const handleDotClick = useCallback(\n (index: number) => {\n goToIndex(index);\n onCarouselIndicatorClick?.(index);\n },\n [goToIndex, onCarouselIndicatorClick],\n );\n\n const handlePrevious = useCallback(() => {\n goToIndex(currIndex - 1);\n }, [goToIndex, currIndex]);\n\n const handleNext = useCallback(() => {\n goToIndex(currIndex + 1);\n }, [goToIndex, currIndex]);\n\n const renderDots = useMemo(() => {\n if (!showIndicators || items.length <= 1) return null;\n\n return (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGap={8}>\n {items.map((_, index) => (\n <Styled.Dot\n key={index}\n onClick={() => handleDotClick(index)}\n $isCurrent={index === currIndex}\n $dotColor={finalDotConfig.dotColor}\n $inactiveDotColor={finalDotConfig.inactiveDotColor}\n $activeIndicatorSize={finalDotConfig.activeIndicatorSize}\n $inactiveIndicatorSize={finalDotConfig.inactiveIndicatorSize}\n />\n ))}\n </FlexView>\n );\n }, [\n currIndex,\n finalDotConfig.activeIndicatorSize,\n finalDotConfig.dotColor,\n finalDotConfig.inactiveDotColor,\n finalDotConfig.inactiveIndicatorSize,\n handleDotClick,\n items,\n showIndicators,\n ]);\n\n const renderNavigation = useMemo(() => {\n if (!showNavigationButtons || items.length <= 1) return null;\n\n return (\n <Styled.NavigationContainer $bottom=\"-48px\">\n <Separator heightX={1} />\n <FlexView\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $flex={1}\n $flexGap={finalNavigationConfig.spacing || 8}\n >\n <IconButton\n Icon={ChevronLeft}\n renderAs={finalNavigationConfig.buttonVariant}\n analyticsLabel=\"Previous\"\n size={finalNavigationConfig.buttonSize}\n onClick={handlePrevious}\n disabled={!canGoPrevious}\n aria-label=\"Previous item\"\n />\n {renderDots}\n <IconButton\n Icon={ChevronRight}\n renderAs={finalNavigationConfig.buttonVariant}\n analyticsLabel=\"Next\"\n size={finalNavigationConfig.buttonSize}\n onClick={handleNext}\n disabled={!canGoNext}\n aria-label=\"Next item\"\n />\n </FlexView>\n </Styled.NavigationContainer>\n );\n }, [\n canGoNext,\n canGoPrevious,\n finalNavigationConfig.buttonSize,\n finalNavigationConfig.buttonVariant,\n finalNavigationConfig.spacing,\n handleNext,\n handlePrevious,\n items.length,\n renderDots,\n showNavigationButtons,\n ]);\n\n useEffect(() => {\n setCurrIndex(defaultIndex);\n }, [defaultIndex]);\n\n return (\n <SwipeableComponent onSwipeLeft={handleSwipeLeft} onSwipeRight={handleSwipeRight}>\n <Styled.Carousel>\n <Styled.CarouselWrapper\n $translate={currIndex * 100}\n $translateDuration={transitionDuration}\n >\n {items.map((item, index) => (\n <Styled.CarouselItemContainer key={index}>{item}</Styled.CarouselItemContainer>\n ))}\n </Styled.CarouselWrapper>\n {!showIndicators && !showNavigationButtons && items.length > 1 && customNavigation}\n {showIndicators && !showNavigationButtons && (\n <Styled.NavigationContainer $bottom=\"-8px\">{renderDots}</Styled.NavigationContainer>\n )}\n {showNavigationButtons && renderNavigation}\n </Styled.Carousel>\n </SwipeableComponent>\n );\n};\n\nexport default memo(forwardRef(SwipeableCarousel));\n"],"names":["SwipeableCarousel","items","customNavigation","defaultIndex","transitionDuration","onSwipeLeft","onSwipeRight","onIndexChange","showIndicators","dotsConfig","showNavigationButtons","navigationConfig","onCarouselIndicatorClick","ref","validDefaultIndex","currIndex","setCurrIndex","useState","canGoPrevious","canGoNext","finalDotConfig","useMemo","defaultDotConfig","finalNavigationConfig","defaultNavigationConfig","goToIndex","useCallback","index","useImperativeHandle","handleSwipeLeft","newIndex","handleSwipeRight","handleDotClick","handlePrevious","handleNext","renderDots","jsx","FlexView","_","Styled.Dot","renderNavigation","jsxs","Styled.NavigationContainer","Separator","IconButton","ChevronLeft","ChevronRight","useEffect","SwipeableComponent","Styled.Carousel","Styled.CarouselWrapper","item","Styled.CarouselItemContainer","SwipeableCarousel$1","memo","forwardRef"],"mappings":";;;;;;;;;;AAqBA,MAAMA,IAA0F,CAC9F;AAAA,EACE,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC,IAAqB;AAAA,EACrB,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,YAAAC;AAAA,EACA,uBAAAC,IAAwB;AAAA,EACxB,kBAAAC;AAAA,EACA,0BAAAC;AACF,GACAC,MACG;AACG,QAAAC,IAAoB,KAAK,IAAI,GAAG,KAAK,IAAIX,GAAcF,EAAM,SAAS,CAAC,CAAC,GACxE,CAACc,GAAWC,CAAY,IAAIC,EAASH,CAAiB,GACtDI,IAAgBH,IAAY,GAC5BI,IAAYJ,IAAYd,EAAM,SAAS,GACvCmB,IAAiBC,EAAQ,OAAO,EAAE,GAAGC,GAAkB,GAAGb,MAAe,CAACA,CAAU,CAAC,GACrFc,IAAwBF;AAAA,IAC5B,OAAO,EAAE,GAAGG,GAAyB,GAAGb;IACxC,CAACA,CAAgB;AAAA,EAAA,GAGbc,IAAYC;AAAA,IAChB,CAACC,MAAkB;AACjB,MAAIA,IAAQ,KAAKA,KAAS1B,EAAM,UAAU0B,MAAUZ,MACpDC,EAAaW,CAAK,GAClBpB,KAAA,QAAAA,EAAgBoB;AAAA,IAClB;AAAA,IACA,CAACZ,GAAWd,EAAM,QAAQM,CAAa;AAAA,EAAA;AAGzC,EAAAqB,EAAoBf,GAAK,OAAO;AAAA,IAC9B,cAAcE;AAAA,IACd,WAAAU;AAAA,EACA,EAAA;AAEI,QAAAI,IAAkBH,EAAY,MAAM;AACxC,QAAI,CAACP,EAAW;AAEhB,UAAMW,IAAWf,IAAY;AAE7B,IAAAC,EAAac,CAAQ,GACrBvB,KAAA,QAAAA,EAAgBuB,IACFzB,KAAA,QAAAA;AAAA,KACb,CAACc,GAAWJ,GAAWV,GAAaE,CAAa,CAAC,GAE/CwB,IAAmBL,EAAY,MAAM;AACzC,QAAI,CAACR,EAAe;AAEpB,UAAMY,IAAWf,IAAY;AAE7B,IAAAC,EAAac,CAAQ,GACrBvB,KAAA,QAAAA,EAAgBuB,IACDxB,KAAA,QAAAA;AAAA,KACd,CAACY,GAAeH,GAAWT,GAAcC,CAAa,CAAC,GAEpDyB,IAAiBN;AAAA,IACrB,CAACC,MAAkB;AACjB,MAAAF,EAAUE,CAAK,GACff,KAAA,QAAAA,EAA2Be;AAAA,IAC7B;AAAA,IACA,CAACF,GAAWb,CAAwB;AAAA,EAAA,GAGhCqB,IAAiBP,EAAY,MAAM;AACvC,IAAAD,EAAUV,IAAY,CAAC;AAAA,EAAA,GACtB,CAACU,GAAWV,CAAS,CAAC,GAEnBmB,IAAaR,EAAY,MAAM;AACnC,IAAAD,EAAUV,IAAY,CAAC;AAAA,EAAA,GACtB,CAACU,GAAWV,CAAS,CAAC,GAEnBoB,IAAad,EAAQ,MACrB,CAACb,KAAkBP,EAAM,UAAU,IAAU,OAG9C,gBAAAmC,EAAAC,GAAA,EAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,UAAU,GACpF,UAAApC,EAAM,IAAI,CAACqC,GAAGX,MACb,gBAAAS;AAAA,IAACG;AAAAA,IAAA;AAAA,MAEC,SAAS,MAAMP,EAAeL,CAAK;AAAA,MACnC,YAAYA,MAAUZ;AAAA,MACtB,WAAWK,EAAe;AAAA,MAC1B,mBAAmBA,EAAe;AAAA,MAClC,sBAAsBA,EAAe;AAAA,MACrC,wBAAwBA,EAAe;AAAA,IAAA;AAAA,IANlCO;AAAA,EAQR,CAAA,EACH,CAAA,GAED;AAAA,IACDZ;AAAA,IACAK,EAAe;AAAA,IACfA,EAAe;AAAA,IACfA,EAAe;AAAA,IACfA,EAAe;AAAA,IACfY;AAAA,IACA/B;AAAA,IACAO;AAAA,EAAA,CACD,GAEKgC,IAAmBnB,EAAQ,MAC3B,CAACX,KAAyBT,EAAM,UAAU,IAAU,OAGrD,gBAAAwC,EAAAC,GAAA,EAA2B,SAAQ,SAClC,UAAA;AAAA,IAAC,gBAAAN,EAAAO,GAAA,EAAU,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAF;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,UAAUd,EAAsB,WAAW;AAAA,QAE3C,UAAA;AAAA,UAAA,gBAAAa;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,MAAMC;AAAAA,cACN,UAAUtB,EAAsB;AAAA,cAChC,gBAAe;AAAA,cACf,MAAMA,EAAsB;AAAA,cAC5B,SAASU;AAAA,cACT,UAAU,CAACf;AAAA,cACX,cAAW;AAAA,YAAA;AAAA,UACb;AAAA,UACCiB;AAAA,UACD,gBAAAC;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,MAAME;AAAAA,cACN,UAAUvB,EAAsB;AAAA,cAChC,gBAAe;AAAA,cACf,MAAMA,EAAsB;AAAA,cAC5B,SAASW;AAAA,cACT,UAAU,CAACf;AAAA,cACX,cAAW;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA,GAED;AAAA,IACDA;AAAA,IACAD;AAAA,IACAK,EAAsB;AAAA,IACtBA,EAAsB;AAAA,IACtBA,EAAsB;AAAA,IACtBW;AAAA,IACAD;AAAA,IACAhC,EAAM;AAAA,IACNkC;AAAA,IACAzB;AAAA,EAAA,CACD;AAED,SAAAqC,EAAU,MAAM;AACd,IAAA/B,EAAab,CAAY;AAAA,EAAA,GACxB,CAACA,CAAY,CAAC,GAGf,gBAAAiC,EAACY,KAAmB,aAAanB,GAAiB,cAAcE,GAC9D,UAAA,gBAAAU,EAACQ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAb;AAAA,MAACc;AAAAA,MAAA;AAAA,QACC,YAAYnC,IAAY;AAAA,QACxB,oBAAoBX;AAAA,QAEnB,UAAAH,EAAM,IAAI,CAACkD,GAAMxB,MACf,gBAAAS,EAAAgB,GAAA,EAA0C,UAARD,EAAA,GAAAxB,CAAa,CACjD;AAAA,MAAA;AAAA,IACH;AAAA,IACC,CAACnB,KAAkB,CAACE,KAAyBT,EAAM,SAAS,KAAKC;AAAA,IACjEM,KAAkB,CAACE,KAClB,gBAAA0B,EAACM,GAAA,EAA2B,SAAQ,QAAQ,UAAWP,GAAA;AAAA,IAExDzB,KAAyB8B;AAAA,EAAA,EAC5B,CAAA,EACF,CAAA;AAEJ,GAEAa,KAAeC,EAAKC,EAAWvD,CAAiB,CAAC;"}
package/dist/index.d.ts CHANGED
@@ -4091,22 +4091,22 @@ declare interface ISubmitModalProps_2 {
4091
4091
  courseStream: TCourseStream;
4092
4092
  }
4093
4093
 
4094
- export declare interface ISwipableCarousel {
4094
+ export declare interface ISwipeableCarousel {
4095
4095
  items: ReactNode[];
4096
- children?: ReactNode;
4096
+ customNavigation?: ReactNode;
4097
4097
  defaultIndex?: number;
4098
4098
  transitionDuration?: number;
4099
4099
  onSwipeLeft?: () => void;
4100
4100
  onSwipeRight?: () => void;
4101
4101
  onIndexChange?: (index: number) => void;
4102
- showDots?: boolean;
4102
+ showIndicators?: boolean;
4103
4103
  dotsConfig?: IDotConfig;
4104
4104
  showNavigationButtons?: boolean;
4105
4105
  navigationConfig?: INavigationConfig;
4106
- onDotClick?: (index: number) => void;
4106
+ onCarouselIndicatorClick?: (index: number) => void;
4107
4107
  }
4108
4108
 
4109
- export declare interface ISwipableCarouselRefs {
4109
+ export declare interface ISwipeableCarouselRefs {
4110
4110
  currentIndex: number;
4111
4111
  goToIndex: (index: number) => void;
4112
4112
  }
@@ -6036,7 +6036,7 @@ export declare const StudentTrialReportModal: MemoExoticComponent<() => JSX.Elem
6036
6036
 
6037
6037
  export declare const SubmitMilestoneModal: FC<ISubmitModalProps>;
6038
6038
 
6039
- export declare const SwipableCarousel: NamedExoticComponent<ISwipableCarousel & RefAttributes<ISwipableCarouselRefs>>;
6039
+ export declare const SwipeableCarousel: NamedExoticComponent<ISwipeableCarousel & RefAttributes<ISwipeableCarouselRefs>>;
6040
6040
 
6041
6041
  export declare const SwipeableComponent: React.FC<ISwipeableComponentProps>;
6042
6042
 
package/dist/index.js CHANGED
@@ -174,7 +174,7 @@ import { default as Rf } from "./features/ui/dot-lottie-animations/dot-lottie-an
174
174
  import { default as Df } from "./features/ui/tabs/tabs.js";
175
175
  import { default as Nf } from "./features/ui/linear-progress-bar/linear-progress-bar.js";
176
176
  import { default as Of } from "./features/ui/swipeable-component/swipeable-component.js";
177
- import { default as yf } from "./features/ui/swipable-carousel/swipable-carousel.js";
177
+ import { default as yf } from "./features/ui/swipeable-carousel/swipeable-carousel.js";
178
178
  import { PLATFORM_EVENTS_STUDENT as Uf } from "./features/analytics-events/platform-events-student.js";
179
179
  import { PLATFORM_EVENTS_TEACHER as vf } from "./features/analytics-events/platform-events-teacher.js";
180
180
  import { WHITELIST_EVENTS as zf } from "./features/analytics-events/whitelist-events.js";
@@ -684,7 +684,7 @@ export {
684
684
  xn as StudentProfileSummaryModal,
685
685
  cn as StudentTrialReportModal,
686
686
  sm as SubmitMilestoneModal,
687
- yf as SwipableCarousel,
687
+ yf as SwipeableCarousel,
688
688
  Of as SwipeableComponent,
689
689
  pr as SwitchIcon,
690
690
  Rp as TRACKING_ID_STUDENT,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "3.5.30-as15",
3
+ "version": "3.5.30-as16",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"
@@ -1 +0,0 @@
1
- {"version":3,"file":"swipable-carousel-styled.js","sources":["../../../../src/features/ui/swipable-carousel/swipable-carousel-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport type { TColorNames } from '../types';\n\nexport const Carousel = styled.div`\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n touch-action: none;\n`;\n\nexport const CarouselContent = styled.div`\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n touch-action: none;\n`;\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\ninterface IDotProps {\n $isCurrent: boolean;\n $dotColor: TColorNames;\n $inactiveDotColor: TColorNames;\n $activeIndicatorSize: string;\n $inactiveIndicatorSize: string;\n}\n\nexport const Dot = styled.span<IDotProps>`\n background: ${({ theme, $isCurrent, $dotColor, $inactiveDotColor }) =>\n $isCurrent ? theme.colors[$dotColor] : theme.colors[$inactiveDotColor]};\n border: 1px solid ${({ theme, $dotColor }) => theme.colors[$dotColor]};\n width: ${({ $isCurrent, $activeIndicatorSize, $inactiveIndicatorSize }) =>\n $isCurrent ? $activeIndicatorSize : $inactiveIndicatorSize};\n height: ${({ $isCurrent, $activeIndicatorSize, $inactiveIndicatorSize }) =>\n $isCurrent ? $activeIndicatorSize : $inactiveIndicatorSize};\n border-radius: 50%;\n display: inline-block;\n transition: all 0.3s ease;\n cursor: pointer;\n\n &:hover {\n opacity: 0.8;\n }\n`;\n\nexport const NavigationConatainer = styled.div<{ $bottom?: string }>`\n position: absolute;\n bottom: ${({ $bottom }) => $bottom || '-48px'};\n`;\n"],"names":["Carousel","styled","CarouselWrapper","$translate","$translateDuration","CarouselItemContainer","Dot","theme","$isCurrent","$dotColor","$inactiveDotColor","$activeIndicatorSize","$inactiveIndicatorSize","NavigationConatainer","$bottom"],"mappings":";AAIO,MAAMA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASAA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,MAAMC,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,GAkB/BK,IAAML,EAAO;AAAA,gBACV,CAAC,EAAE,OAAAM,GAAO,YAAAC,GAAY,WAAAC,GAAW,mBAAAC,EAAkB,MAC/DF,IAAaD,EAAM,OAAOE,CAAS,IAAIF,EAAM,OAAOG,CAAiB,CAAC;AAAA,sBACpD,CAAC,EAAE,OAAAH,GAAO,WAAAE,EAAA,MAAgBF,EAAM,OAAOE,CAAS,CAAC;AAAA,WAC5D,CAAC,EAAE,YAAAD,GAAY,sBAAAG,GAAsB,wBAAAC,QAC5CJ,IAAaG,IAAuBC,CAAsB;AAAA,YAClD,CAAC,EAAE,YAAAJ,GAAY,sBAAAG,GAAsB,wBAAAC,QAC7CJ,IAAaG,IAAuBC,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjDC,IAAuBZ,EAAO;AAAA;AAAA,YAE/B,CAAC,EAAE,SAAAa,QAAcA,KAAW,OAAO;AAAA;"}
@@ -1,132 +0,0 @@
1
- import { jsx as i, jsxs as z } from "react/jsx-runtime";
2
- import { memo as W, forwardRef as x, useState as F, useCallback as l, useImperativeHandle as K, useEffect as L } from "react";
3
- import O from "../swipeable-component/swipeable-component.js";
4
- import D from "../buttons/icon-button/icon-button.js";
5
- import { Carousel as X, CarouselWrapper as g, CarouselItemContainer as k, NavigationConatainer as N, Dot as q } from "./swipable-carousel-styled.js";
6
- import w from "../../../assets/line-icons/icons/chevron-left.js";
7
- import B from "../../../assets/line-icons/icons/chevron-right.js";
8
- import y from "../layout/flex-view.js";
9
- import J from "../separator/separator.js";
10
- const Q = {
11
- dotColor: "BLACK_1",
12
- inactiveDotColor: "WHITE_1",
13
- activeIndicatorSize: "8px",
14
- inactiveIndicatorSize: "8px",
15
- spacing: "8px"
16
- }, U = {
17
- buttonVariant: "secondary",
18
- buttonSize: "xsmall",
19
- spacing: 8,
20
- hideOnMobile: !0
21
- }, Y = ({
22
- items: o,
23
- children: h,
24
- defaultIndex: b = 0,
25
- transitionDuration: j = 300,
26
- onSwipeLeft: s,
27
- onSwipeRight: u,
28
- onIndexChange: e,
29
- showDots: C = !1,
30
- dotsConfig: G,
31
- showNavigationButtons: v = !1,
32
- navigationConfig: I,
33
- onDotClick: f
34
- }, P) => {
35
- const V = Math.max(0, Math.min(b, o.length - 1)), [r, m] = F(V), $ = r > 0, d = r < o.length - 1, p = { ...Q, ...G }, c = { ...U, ...I }, a = l(
36
- (t) => {
37
- t < 0 || t >= o.length || t === r || (m(t), e == null || e(t));
38
- },
39
- [r, o.length, e]
40
- ), A = l(() => {
41
- if (!d) return;
42
- const t = r + 1;
43
- m(t), e == null || e(t), s == null || s();
44
- }, [d, r, s, e]), M = l(() => {
45
- if (!$) return;
46
- const t = r - 1;
47
- m(t), e == null || e(t), u == null || u();
48
- }, [$, r, u, e]), _ = l(
49
- (t) => {
50
- a(t), f == null || f(t);
51
- },
52
- [a, f]
53
- ), E = l(() => {
54
- a(r - 1);
55
- }, [a, r]), H = l(() => {
56
- a(r + 1);
57
- }, [a, r]);
58
- K(P, () => ({
59
- currentIndex: r,
60
- goToIndex: a
61
- })), L(() => {
62
- m(b);
63
- }, [b]);
64
- const S = () => !C || o.length <= 1 ? null : /* @__PURE__ */ i(y, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGap: 8, children: o.map((t, n) => /* @__PURE__ */ i(
65
- q,
66
- {
67
- onClick: () => _(n),
68
- $isCurrent: n === r,
69
- $dotColor: p.dotColor,
70
- $inactiveDotColor: p.inactiveDotColor,
71
- $activeIndicatorSize: p.activeIndicatorSize,
72
- $inactiveIndicatorSize: p.inactiveIndicatorSize
73
- },
74
- n
75
- )) }), T = () => !v || o.length <= 1 ? null : /* @__PURE__ */ z(N, { $bottom: "-48px", children: [
76
- /* @__PURE__ */ i(J, { heightX: 1 }),
77
- /* @__PURE__ */ z(
78
- y,
79
- {
80
- $flexDirection: "row",
81
- $alignItems: "center",
82
- $justifyContent: "center",
83
- $flex: 1,
84
- $flexGap: c.spacing || 8,
85
- children: [
86
- /* @__PURE__ */ i(
87
- D,
88
- {
89
- Icon: w,
90
- renderAs: c.buttonVariant,
91
- analyticsLabel: "Previous",
92
- size: c.buttonSize,
93
- onClick: E,
94
- disabled: !$,
95
- "aria-label": "Previous item"
96
- }
97
- ),
98
- S(),
99
- /* @__PURE__ */ i(
100
- D,
101
- {
102
- Icon: B,
103
- renderAs: c.buttonVariant,
104
- analyticsLabel: "Next",
105
- size: c.buttonSize,
106
- onClick: H,
107
- disabled: !d,
108
- "aria-label": "Next item"
109
- }
110
- )
111
- ]
112
- }
113
- )
114
- ] });
115
- return /* @__PURE__ */ i(O, { onSwipeLeft: A, onSwipeRight: M, children: /* @__PURE__ */ z(X, { children: [
116
- /* @__PURE__ */ i(
117
- g,
118
- {
119
- $translate: r * 100,
120
- $translateDuration: j,
121
- children: o.map((t, n) => /* @__PURE__ */ i(k, { children: t }, n))
122
- }
123
- ),
124
- h,
125
- C && !v && /* @__PURE__ */ i(N, { $bottom: "-18px", children: S() }),
126
- v && T()
127
- ] }) });
128
- }, ct = W(x(Y));
129
- export {
130
- ct as default
131
- };
132
- //# sourceMappingURL=swipable-carousel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"swipable-carousel.js","sources":["../../../../src/features/ui/swipable-carousel/swipable-carousel.tsx"],"sourcesContent":["import {\n type ForwardRefRenderFunction,\n memo,\n useCallback,\n useEffect,\n useState,\n forwardRef,\n useImperativeHandle,\n} from 'react';\n\nimport SwipeableComponent from '../swipeable-component/swipeable-component';\nimport IconButton from '../buttons/icon-button/icon-button';\nimport * as Styled from './swipable-carousel-styled';\nimport type { ISwipableCarouselRefs, ISwipableCarousel } from './swipable-carousel-types';\nimport ChevronLeft from '../../../assets/line-icons/icons/chevron-left';\nimport ChevronRight from '../../../assets/line-icons/icons/chevron-right';\nimport FlexView from '../layout/flex-view';\nimport Separator from '../separator/separator';\n\n// Default dot configuration\nconst defaultDotConfig = {\n dotColor: 'BLACK_1' as const,\n inactiveDotColor: 'WHITE_1' as const,\n activeIndicatorSize: '8px',\n inactiveIndicatorSize: '8px',\n spacing: '8px',\n};\n\n// Default navigation configuration\nconst defaultNavigationConfig = {\n buttonVariant: 'secondary' as const,\n buttonSize: 'xsmall' as const,\n spacing: 8,\n hideOnMobile: true,\n};\n\nconst SwipableCarousel: ForwardRefRenderFunction<ISwipableCarouselRefs, ISwipableCarousel> = (\n {\n items,\n children,\n defaultIndex = 0,\n transitionDuration = 300,\n onSwipeLeft,\n onSwipeRight,\n onIndexChange,\n showDots = false,\n dotsConfig,\n showNavigationButtons = false,\n navigationConfig,\n onDotClick,\n },\n ref,\n) => {\n const validDefaultIndex = Math.max(0, Math.min(defaultIndex, items.length - 1));\n const [currIndex, setCurrIndex] = useState(validDefaultIndex);\n const canGoPrevious = currIndex > 0;\n const canGoNext = currIndex < items.length - 1;\n const finalDotConfig = { ...defaultDotConfig, ...dotsConfig };\n const finalNavigationConfig = { ...defaultNavigationConfig, ...navigationConfig };\n\n const goToIndex = useCallback(\n (index: number) => {\n if (index < 0 || index >= items.length || index === currIndex) return;\n setCurrIndex(index);\n onIndexChange?.(index);\n },\n [currIndex, items.length, onIndexChange],\n );\n\n const handleSwipeLeft = useCallback(() => {\n if (!canGoNext) return;\n\n const newIndex = currIndex + 1;\n\n setCurrIndex(newIndex);\n onIndexChange?.(newIndex);\n onSwipeLeft?.();\n }, [canGoNext, currIndex, onSwipeLeft, onIndexChange]);\n\n const handleSwipeRight = useCallback(() => {\n if (!canGoPrevious) return;\n\n const newIndex = currIndex - 1;\n\n setCurrIndex(newIndex);\n onIndexChange?.(newIndex);\n onSwipeRight?.();\n }, [canGoPrevious, currIndex, onSwipeRight, onIndexChange]);\n\n const handleDotClick = useCallback(\n (index: number) => {\n goToIndex(index);\n onDotClick?.(index);\n },\n [goToIndex, onDotClick],\n );\n\n const handlePrevious = useCallback(() => {\n goToIndex(currIndex - 1);\n }, [goToIndex, currIndex]);\n\n const handleNext = useCallback(() => {\n goToIndex(currIndex + 1);\n }, [goToIndex, currIndex]);\n\n useImperativeHandle(ref, () => ({\n currentIndex: currIndex,\n goToIndex,\n }));\n\n useEffect(() => {\n setCurrIndex(defaultIndex);\n }, [defaultIndex]);\n\n const renderDots = () => {\n if (!showDots || items.length <= 1) return null;\n\n return (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGap={8}>\n {items.map((_, index) => (\n <Styled.Dot\n key={index}\n onClick={() => handleDotClick(index)}\n $isCurrent={index === currIndex}\n $dotColor={finalDotConfig.dotColor}\n $inactiveDotColor={finalDotConfig.inactiveDotColor}\n $activeIndicatorSize={finalDotConfig.activeIndicatorSize}\n $inactiveIndicatorSize={finalDotConfig.inactiveIndicatorSize}\n />\n ))}\n </FlexView>\n );\n };\n\n const renderNavigation = () => {\n if (!showNavigationButtons || items.length <= 1) return null;\n\n return (\n <Styled.NavigationConatainer $bottom=\"-48px\">\n <Separator heightX={1} />\n <FlexView\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $flex={1}\n $flexGap={finalNavigationConfig.spacing || 8}\n >\n <IconButton\n Icon={ChevronLeft}\n renderAs={finalNavigationConfig.buttonVariant}\n analyticsLabel=\"Previous\"\n size={finalNavigationConfig.buttonSize}\n onClick={handlePrevious}\n disabled={!canGoPrevious}\n aria-label=\"Previous item\"\n />\n {renderDots()}\n <IconButton\n Icon={ChevronRight}\n renderAs={finalNavigationConfig.buttonVariant}\n analyticsLabel=\"Next\"\n size={finalNavigationConfig.buttonSize}\n onClick={handleNext}\n disabled={!canGoNext}\n aria-label=\"Next item\"\n />\n </FlexView>\n </Styled.NavigationConatainer>\n );\n };\n\n return (\n <SwipeableComponent onSwipeLeft={handleSwipeLeft} onSwipeRight={handleSwipeRight}>\n <Styled.Carousel>\n <Styled.CarouselWrapper\n $translate={currIndex * 100}\n $translateDuration={transitionDuration}\n >\n {items.map((item, index) => (\n <Styled.CarouselItemContainer key={index}>{item}</Styled.CarouselItemContainer>\n ))}\n </Styled.CarouselWrapper>\n {children}\n {showDots && !showNavigationButtons && (\n <Styled.NavigationConatainer $bottom=\"-18px\">{renderDots()}</Styled.NavigationConatainer>\n )}\n {showNavigationButtons && renderNavigation()}\n </Styled.Carousel>\n </SwipeableComponent>\n );\n};\n\nexport default memo(forwardRef(SwipableCarousel));\n"],"names":["defaultDotConfig","defaultNavigationConfig","SwipableCarousel","items","children","defaultIndex","transitionDuration","onSwipeLeft","onSwipeRight","onIndexChange","showDots","dotsConfig","showNavigationButtons","navigationConfig","onDotClick","ref","validDefaultIndex","currIndex","setCurrIndex","useState","canGoPrevious","canGoNext","finalDotConfig","finalNavigationConfig","goToIndex","useCallback","index","handleSwipeLeft","newIndex","handleSwipeRight","handleDotClick","handlePrevious","handleNext","useImperativeHandle","useEffect","renderDots","jsx","FlexView","_","Styled.Dot","renderNavigation","jsxs","Styled.NavigationConatainer","Separator","IconButton","ChevronLeft","ChevronRight","SwipeableComponent","Styled.Carousel","Styled.CarouselWrapper","item","Styled.CarouselItemContainer","SwipableCarousel$1","memo","forwardRef"],"mappings":"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"}