@cuemath/leap 3.2.16-link.0 → 3.2.16-link.2
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.
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js +21 -19
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map +1 -1
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js.map +1 -0
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.js.map +1 -0
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js.map +1 -0
- package/dist/features/auth/pla-signup/signup-header/signup-header.js.map +1 -0
- package/dist/features/auth/pla-signup/signup-options/signup-options.js.map +1 -0
- package/dist/features/trial-session/comps/student-profile/student-profile.js +1 -1
- package/dist/features/ui/accordion/accordion.js +35 -35
- package/dist/features/ui/accordion/accordion.js.map +1 -1
- package/dist/index.d.ts +26 -0
- package/dist/index.js +635 -633
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide-constants.js.map +0 -1
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide-styled.js.map +0 -1
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide.js.map +0 -1
- package/dist/features/auth/signup-v2/signup-header/signup-header.js.map +0 -1
- package/dist/features/auth/signup-v2/signup-options/signup-options.js.map +0 -1
- /package/dist/features/auth/{signup-v2 → pla-signup}/onboarding-guide/onboarding-guide-constants.js +0 -0
- /package/dist/features/auth/{signup-v2 → pla-signup}/onboarding-guide/onboarding-guide-styled.js +0 -0
- /package/dist/features/auth/{signup-v2 → pla-signup}/onboarding-guide/onboarding-guide.js +0 -0
- /package/dist/features/auth/{signup-v2 → pla-signup}/signup-header/signup-header.js +0 -0
- /package/dist/features/auth/{signup-v2 → pla-signup}/signup-options/signup-options.js +0 -0
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsxs as b, jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { memo as
|
|
3
|
-
import { LOTTIE as
|
|
2
|
+
import { memo as N, useRef as T, useState as $, useEffect as o, useCallback as R, useImperativeHandle as V, useMemo as _ } from "react";
|
|
3
|
+
import { LOTTIE as O } from "../../../../assets/lottie/lottie.js";
|
|
4
4
|
import x from "../../../ui/layout/flex-view.js";
|
|
5
|
-
import
|
|
5
|
+
import j from "../../../ui/lottie-animation/lottie-animation.js";
|
|
6
6
|
import { ANIMATION_SEGMENTS as E, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
|
|
7
|
-
import { Wrapper as
|
|
8
|
-
import
|
|
9
|
-
const
|
|
7
|
+
import { Wrapper as C, MessageWrapper as D } from "./animated-avatar-message-styled.js";
|
|
8
|
+
import F from "./animated-text/animated-text.js";
|
|
9
|
+
const X = {
|
|
10
10
|
autoplay: !1,
|
|
11
11
|
loop: !1,
|
|
12
12
|
renderer: "canvas"
|
|
13
|
-
},
|
|
13
|
+
}, k = ({
|
|
14
14
|
message: n,
|
|
15
15
|
confirmationMessage: e,
|
|
16
16
|
onShowContent: t,
|
|
17
17
|
confirmationFrames: c,
|
|
18
18
|
isConfirmationVisible: m,
|
|
19
|
-
ref: M
|
|
19
|
+
ref: M,
|
|
20
|
+
height: h = "auto"
|
|
20
21
|
}) => {
|
|
21
22
|
const r = T(null), u = T(null), [p, i] = $(!1), [f, d] = $(m);
|
|
22
23
|
o(() => () => {
|
|
@@ -26,7 +27,7 @@ const F = {
|
|
|
26
27
|
}, [m]), o(() => {
|
|
27
28
|
i(!0), t(!0);
|
|
28
29
|
}, [n, t]);
|
|
29
|
-
const v =
|
|
30
|
+
const v = R(() => {
|
|
30
31
|
var a, A;
|
|
31
32
|
(a = r.current) == null || a.playSegments(E.INITIAL, !0);
|
|
32
33
|
const s = () => {
|
|
@@ -35,7 +36,7 @@ const F = {
|
|
|
35
36
|
};
|
|
36
37
|
(A = r.current) == null || A.addEventListener("complete", s);
|
|
37
38
|
}, [t]);
|
|
38
|
-
|
|
39
|
+
V(
|
|
39
40
|
M,
|
|
40
41
|
() => ({
|
|
41
42
|
fadeOutMessage: () => new Promise((s) => {
|
|
@@ -52,42 +53,43 @@ const F = {
|
|
|
52
53
|
}),
|
|
53
54
|
[c, e, t]
|
|
54
55
|
);
|
|
55
|
-
const y =
|
|
56
|
+
const y = _(() => f && e ? e : n, [f, e, n]);
|
|
56
57
|
return /* @__PURE__ */ b(
|
|
57
|
-
|
|
58
|
+
C,
|
|
58
59
|
{
|
|
59
60
|
$flexDirection: "row",
|
|
60
61
|
$justifyContent: "flex-start",
|
|
61
62
|
$alignItems: "center",
|
|
62
63
|
$flexColumnGapX: 0.5,
|
|
64
|
+
$height: h,
|
|
63
65
|
children: [
|
|
64
66
|
/* @__PURE__ */ l(x, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
|
|
65
|
-
|
|
67
|
+
j,
|
|
66
68
|
{
|
|
67
69
|
width: 80,
|
|
68
70
|
height: 80,
|
|
69
|
-
src:
|
|
71
|
+
src: O.ANIMATED_AVATAR,
|
|
70
72
|
ref: r,
|
|
71
73
|
onRender: v,
|
|
72
|
-
settings:
|
|
74
|
+
settings: X
|
|
73
75
|
}
|
|
74
76
|
) }),
|
|
75
77
|
p && /* @__PURE__ */ l(x, { $flex: 1, children: /* @__PURE__ */ l(
|
|
76
|
-
|
|
78
|
+
D,
|
|
77
79
|
{
|
|
78
80
|
$gutterX: 1,
|
|
79
81
|
$gapX: 0.5,
|
|
80
82
|
$background: "BLACK_3",
|
|
81
83
|
$borderColor: "BLACK_5",
|
|
82
84
|
isVisible: p,
|
|
83
|
-
children: /* @__PURE__ */ l(
|
|
85
|
+
children: /* @__PURE__ */ l(F, { text: y, speed: 20 })
|
|
84
86
|
}
|
|
85
87
|
) })
|
|
86
88
|
]
|
|
87
89
|
}
|
|
88
90
|
);
|
|
89
|
-
},
|
|
91
|
+
}, U = N(k);
|
|
90
92
|
export {
|
|
91
|
-
|
|
93
|
+
U as default
|
|
92
94
|
};
|
|
93
95
|
//# sourceMappingURL=animated-avatar-message.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n useEffect,\n type FC,\n useMemo,\n memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport AnimatedText from './animated-text/animated-text';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n message,\n confirmationMessage,\n onShowContent,\n confirmationFrames,\n isConfirmationVisible,\n ref,\n}) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [isMessageVisible, setIsMessageVisible] = useState(false);\n const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n useState(isConfirmationVisible);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n setIsConfirmationMessageVisible(isConfirmationVisible);\n }, [isConfirmationVisible]);\n\n useEffect(() => {\n setIsMessageVisible(true);\n onShowContent(true);\n }, [message, onShowContent]);\n\n const handleLottieRender = useCallback(() => {\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n const onComplete = () => {\n animationRef.current?.removeEventListener('complete', onComplete);\n setIsMessageVisible(true);\n onShowContent(true);\n\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n };\n\n animationRef.current?.addEventListener('complete', onComplete);\n }, [onShowContent]);\n\n useImperativeHandle(\n ref,\n () => ({\n fadeOutMessage: () =>\n new Promise<void>(resolve => {\n onShowContent(false);\n timeoutRef.current = setTimeout(() => {\n setIsMessageVisible(false);\n resolve();\n }, FADE_TIMEOUT);\n }),\n\n playConfirmationFrames: () =>\n new Promise<void>(resolve => {\n animationRef.current?.playSegments(confirmationFrames, true);\n if (confirmationMessage) {\n setIsMessageVisible(false);\n }\n timeoutRef.current = setTimeout(() => {\n if (confirmationMessage) {\n setIsConfirmationMessageVisible(true);\n }\n setIsMessageVisible(true);\n resolve();\n }, FADE_TIMEOUT);\n }),\n }),\n [confirmationFrames, confirmationMessage, onShowContent],\n );\n\n const displayMessage = useMemo(() => {\n return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n return (\n <Styled.Wrapper\n $flexDirection=\"row\"\n $justifyContent=\"flex-start\"\n $alignItems=\"center\"\n $flexColumnGapX={0.5}\n >\n <FlexView $width={80} $height={80}>\n <LottieAnimation\n width={80}\n height={80}\n src={LOTTIE.ANIMATED_AVATAR}\n ref={animationRef}\n onRender={handleLottieRender}\n settings={animationSettings}\n />\n </FlexView>\n {isMessageVisible && (\n <FlexView $flex={1}>\n <Styled.MessageWrapper\n $gutterX={1}\n $gapX={0.5}\n $background=\"BLACK_3\"\n $borderColor=\"BLACK_5\"\n isVisible={isMessageVisible}\n >\n <AnimatedText text={displayMessage} speed={20} />\n </Styled.MessageWrapper>\n </FlexView>\n )}\n </Styled.Wrapper>\n );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","isConfirmationVisible","ref","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","useEffect","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","AnimatedText","animatedAvatarMessage","memo"],"mappings":";;;;;;;;AAqBA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAyD,CAAC;AAAA,EAC9D,SAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,KAAAC;
|
|
1
|
+
{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n useEffect,\n type FC,\n useMemo,\n memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport AnimatedText from './animated-text/animated-text';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n message,\n confirmationMessage,\n onShowContent,\n confirmationFrames,\n isConfirmationVisible,\n ref,\n height = 'auto',\n}) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [isMessageVisible, setIsMessageVisible] = useState(false);\n const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n useState(isConfirmationVisible);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n setIsConfirmationMessageVisible(isConfirmationVisible);\n }, [isConfirmationVisible]);\n\n useEffect(() => {\n setIsMessageVisible(true);\n onShowContent(true);\n }, [message, onShowContent]);\n\n const handleLottieRender = useCallback(() => {\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n const onComplete = () => {\n animationRef.current?.removeEventListener('complete', onComplete);\n setIsMessageVisible(true);\n onShowContent(true);\n\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n };\n\n animationRef.current?.addEventListener('complete', onComplete);\n }, [onShowContent]);\n\n useImperativeHandle(\n ref,\n () => ({\n fadeOutMessage: () =>\n new Promise<void>(resolve => {\n onShowContent(false);\n timeoutRef.current = setTimeout(() => {\n setIsMessageVisible(false);\n resolve();\n }, FADE_TIMEOUT);\n }),\n\n playConfirmationFrames: () =>\n new Promise<void>(resolve => {\n animationRef.current?.playSegments(confirmationFrames, true);\n if (confirmationMessage) {\n setIsMessageVisible(false);\n }\n timeoutRef.current = setTimeout(() => {\n if (confirmationMessage) {\n setIsConfirmationMessageVisible(true);\n }\n setIsMessageVisible(true);\n resolve();\n }, FADE_TIMEOUT);\n }),\n }),\n [confirmationFrames, confirmationMessage, onShowContent],\n );\n\n const displayMessage = useMemo(() => {\n return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n return (\n <Styled.Wrapper\n $flexDirection=\"row\"\n $justifyContent=\"flex-start\"\n $alignItems=\"center\"\n $flexColumnGapX={0.5}\n $height={height}\n >\n <FlexView $width={80} $height={80}>\n <LottieAnimation\n width={80}\n height={80}\n src={LOTTIE.ANIMATED_AVATAR}\n ref={animationRef}\n onRender={handleLottieRender}\n settings={animationSettings}\n />\n </FlexView>\n {isMessageVisible && (\n <FlexView $flex={1}>\n <Styled.MessageWrapper\n $gutterX={1}\n $gapX={0.5}\n $background=\"BLACK_3\"\n $borderColor=\"BLACK_5\"\n isVisible={isMessageVisible}\n >\n <AnimatedText text={displayMessage} speed={20} />\n </Styled.MessageWrapper>\n </FlexView>\n )}\n </Styled.Wrapper>\n );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","isConfirmationVisible","ref","height","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","useEffect","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onboarding-guide-constants.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\n\nexport const onboardingGuideSteps = [\n {\n icon: ILLUSTRATIONS.HANDSHAKE,\n title: `Help us find the right tutor for your child`,\n },\n {\n icon: ILLUSTRATIONS.CALENDAR_PURPLE,\n title: `Schedule your FREE class with the tutor`,\n },\n {\n icon: ILLUSTRATIONS.MONEY,\n title: `Pay & continue with our flexible classes`,\n },\n];\n"],"names":["onboardingGuideSteps","ILLUSTRATIONS"],"mappings":";AAEO,MAAMA,IAAuB;AAAA,EAClC;AAAA,IACE,MAAMC,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AACF;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onboarding-guide-styled.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const StepItem = styled(FlexView)(({ theme: { colors, mediaQueries } }) => {\n return `\n position: relative;\n &:not(:last-child)::after {\n content: '';\n width: 37px;\n height: 2px;\n right: -32px;\n top: 25px;\n position: absolute;\n background-color: ${colors.WHITE_T_15};\n }\n &:last-child {\n margin-bottom: 0;\n }\n ${mediaQueries.minWidthSmallDesktop} {\n margin-bottom: 48px;\n &:not(:last-child)::after {\n left: 28px;\n bottom: -36px;\n right: unset;\n top: unset;\n width: 2px;\n height: 24px;\n }\n }\n`;\n});\n"],"names":["StepItem","styled","FlexView","colors","mediaQueries"],"mappings":";;AAIa,MAAAA,IAAWC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,cAAAC,EAAa,QACjE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeD,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrCC,EAAa,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAYpC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onboarding-guide.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide.tsx"],"sourcesContent":["import { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { onboardingGuideSteps } from './onboarding-guide-constants';\nimport * as Styled from './onboarding-guide-styled';\n\nconst OnboardingGuide = () => {\n const { device } = useTheme();\n const isCompact = device <= EDeviceType.TABLET;\n\n return (\n <FlexView $flex={1} $alignItems=\"center\" $justifyContent=\"center\">\n <Text $whiteSpace=\"pre-line\" $renderAs=\"ah4\" $color=\"WHITE\" $renderOnTabletAs=\"ab1\">\n Get started in 3 easy steps!\n </Text>\n <Separator heightX={isCompact ? 1 : 2.75} />\n <FlexView $flexDirection={isCompact ? 'row' : 'column'} $flexColumnGapX={1.5}>\n {onboardingGuideSteps.map((step, index) => (\n <Styled.StepItem\n key={index}\n $flex={1}\n $flexDirection={isCompact ? 'column' : 'row'}\n $flexColumnGapX={1.5}\n $flexRowGapX={0.5}\n $alignItems={'center'}\n >\n <img src={step.icon} alt={`Step ${index + 1}`} width={56} height={56} />\n <FlexView $width={isCompact ? 101 : 210}>\n <Text\n $whiteSpace=\"pre-line\"\n $renderAs=\"ab2\"\n $renderOnTabletAs=\"ab3\"\n $color=\"WHITE\"\n $align={isCompact ? 'center' : 'left'}\n >\n {step.title}\n </Text>\n </FlexView>\n </Styled.StepItem>\n ))}\n </FlexView>\n </FlexView>\n );\n};\n\nexport default OnboardingGuide;\n"],"names":["OnboardingGuide","device","useTheme","isCompact","EDeviceType","FlexView","jsx","Text","Separator","onboardingGuideSteps","step","index","jsxs","Styled.StepItem","OnboardingGuide$1"],"mappings":";;;;;;;;AASA,MAAMA,IAAkB,MAAM;AACtB,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY;AAExC,2BACGC,GAAS,EAAA,OAAO,GAAG,aAAY,UAAS,iBAAgB,UACvD,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAK,aAAY,YAAW,WAAU,OAAM,QAAO,SAAQ,mBAAkB,OAAM,UAEpF,+BAAA,CAAA;AAAA,IACC,gBAAAD,EAAAE,GAAA,EAAU,SAASL,IAAY,IAAI,MAAM;AAAA,IACzC,gBAAAG,EAAAD,GAAA,EAAS,gBAAgBF,IAAY,QAAQ,UAAU,iBAAiB,KACtE,UAAqBM,EAAA,IAAI,CAACC,GAAMC,MAC/B,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,OAAO;AAAA,QACP,gBAAgBV,IAAY,WAAW;AAAA,QACvC,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,aAAa;AAAA,QAEb,UAAA;AAAA,UAAA,gBAAAG,EAAC,OAAI,EAAA,KAAKI,EAAK,MAAM,KAAK,QAAQC,IAAQ,CAAC,IAAI,OAAO,IAAI,QAAQ,IAAI;AAAA,UACrE,gBAAAL,EAAAD,GAAA,EAAS,QAAQF,IAAY,MAAM,KAClC,UAAA,gBAAAG;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,aAAY;AAAA,cACZ,WAAU;AAAA,cACV,mBAAkB;AAAA,cAClB,QAAO;AAAA,cACP,QAAQJ,IAAY,WAAW;AAAA,cAE9B,UAAKO,EAAA;AAAA,YAAA;AAAA,UAAA,GAEV;AAAA,QAAA;AAAA,MAAA;AAAA,MAlBKC;AAAA,IAoBR,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAG,IAAed;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"signup-header.js","sources":["../../../../../src/features/auth/pla-signup/signup-header/signup-header.tsx"],"sourcesContent":["import { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\n\nconst SignupHeader = () => {\n const { device } = useTheme();\n const isCompact = device <= EDeviceType.TABLET;\n\n return (\n <FlexView\n $flexDirection={isCompact ? 'row' : 'column'}\n $alignItems={isCompact ? 'center' : 'flex-start'}\n $width=\"100%\"\n $flexColumnGapX={1}\n $justifyContent={isCompact ? 'space-between' : 'flex-start'}\n >\n <Image\n width={isCompact ? 80 : 107}\n src={ILLUSTRATIONS.CIRCLE_CUEMATH_LOGO_WHITE}\n height={isCompact ? 12 : 16}\n />\n {!isCompact && <Separator heightX={1} />}\n <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n <Text $renderAs=\"ab2\" $renderOnTabletAs=\"ub3\" $color=\"WHITE\">\n Rated{' '}\n <Text $inline $renderAs=\"ab2-bold\" $renderOnTabletAs=\"ub3-bold\" $color=\"WHITE\">\n 4.8+\n </Text>{' '}\n on\n </Text>\n \n <Image\n src={ILLUSTRATIONS.TRUSTPILOT}\n width={isCompact ? 80 : 99}\n height={isCompact ? 20 : 25}\n />\n </FlexView>\n </FlexView>\n );\n};\n\nexport default SignupHeader;\n"],"names":["SignupHeader","device","useTheme","isCompact","EDeviceType","jsxs","FlexView","jsx","Image","ILLUSTRATIONS","Separator","Text","SignupHeader$1"],"mappings":";;;;;;;;AASA,MAAMA,IAAe,MAAM;AACnB,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY;AAGtC,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgBH,IAAY,QAAQ;AAAA,MACpC,aAAaA,IAAY,WAAW;AAAA,MACpC,QAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,iBAAiBA,IAAY,kBAAkB;AAAA,MAE/C,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOL,IAAY,KAAK;AAAA,YACxB,KAAKM,EAAc;AAAA,YACnB,QAAQN,IAAY,KAAK;AAAA,UAAA;AAAA,QAC3B;AAAA,QACC,CAACA,KAAc,gBAAAI,EAAAG,GAAA,EAAU,SAAS,EAAG,CAAA;AAAA,QACrC,gBAAAL,EAAAC,GAAA,EAAS,gBAAe,OAAM,aAAY,YACzC,UAAA;AAAA,UAAA,gBAAAD,EAACM,KAAK,WAAU,OAAM,mBAAkB,OAAM,QAAO,SAAQ,UAAA;AAAA,YAAA;AAAA,YACrD;AAAA,YACN,gBAAAJ,EAACI,GAAK,EAAA,SAAO,IAAC,WAAU,YAAW,mBAAkB,YAAW,QAAO,SAAQ,UAE/E,OAAA,CAAA;AAAA,YAAQ;AAAA,YAAI;AAAA,UAAA,GAEd;AAAA,UAAO;AAAA,UAEP,gBAAAJ;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKC,EAAc;AAAA,cACnB,OAAON,IAAY,KAAK;AAAA,cACxB,QAAQA,IAAY,KAAK;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAS,IAAeZ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"signup-options.js","sources":["../../../../../src/features/auth/pla-signup/signup-options/signup-options.tsx"],"sourcesContent":["import type { ISignupOptionsProps } from './signup-options-types';\n\nimport { memo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport AppleIcon from '../../../../assets/line-icons/icons/apple-icon-white';\nimport GoogleIcon from '../../../../assets/line-icons/icons/google-icon';\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\n\nconst SignupOptions: FC<ISignupOptionsProps> = ({\n onEmailSignup,\n onAppleSignup,\n onGoogleSignup,\n loadingProvider,\n onGoToLogin,\n title,\n}) => {\n const { device } = useTheme();\n const isCompact = device <= EDeviceType.TABLET;\n const isLoadingGoogle = loadingProvider === 'google';\n const isLoadingApple = loadingProvider === 'apple';\n\n return (\n <FlexView $alignItems=\"flex-start\">\n <Text $renderAs=\"ah3-bold\" $renderOnMobileAs=\"ah4-bold\" $color=\"WHITE\" $whiteSpace=\"pre\">\n {title}\n </Text>\n <Separator heightX={isCompact ? 1.5 : 2.5} />\n <FlexView\n $flexGapX={1}\n $flex={1}\n $justifyContent=\"center\"\n $alignItems=\"flex-start\"\n $width=\"100%\"\n >\n <Button\n renderAs=\"black-dark\"\n Icon={GoogleIcon}\n width={isCompact ? '100%' : 320}\n label=\"Signup with Google\"\n onClick={onGoogleSignup}\n size=\"small\"\n busy={isLoadingGoogle}\n disabled={isLoadingGoogle}\n />\n <Button\n renderAs=\"black-dark\"\n size=\"small\"\n width={isCompact ? '100%' : 320}\n Icon={AppleIcon}\n label=\"Signup with Apple\"\n onClick={onAppleSignup}\n busy={isLoadingApple}\n disabled={isLoadingApple}\n />\n <Button\n renderAs=\"black-dark\"\n size=\"small\"\n width={isCompact ? '100%' : 320}\n label=\"Continue with Email\"\n onClick={onEmailSignup}\n />\n </FlexView>\n <Separator heightX={1.5} />\n <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n <Text $renderAs=\"ub3\" $color=\"WHITE\">\n Already have an account?\n </Text>\n \n <TextButton size=\"small\" label=\"Log In\" color=\"WHITE\" onClick={onGoToLogin} />\n </FlexView>\n </FlexView>\n );\n};\n\nexport default memo(SignupOptions);\n"],"names":["SignupOptions","onEmailSignup","onAppleSignup","onGoogleSignup","loadingProvider","onGoToLogin","title","device","useTheme","isCompact","EDeviceType","isLoadingGoogle","isLoadingApple","jsxs","FlexView","jsx","Text","Separator","Button","GoogleIcon","AppleIcon","TextButton","signupOptions","memo"],"mappings":";;;;;;;;;;;AAcA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY,QAClCC,IAAkBP,MAAoB,UACtCQ,IAAiBR,MAAoB;AAGzC,SAAA,gBAAAS,EAACC,GAAS,EAAA,aAAY,cACpB,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,YAAW,mBAAkB,YAAW,QAAO,SAAQ,aAAY,OAChF,UACHV,EAAA,CAAA;AAAA,IACC,gBAAAS,EAAAE,GAAA,EAAU,SAASR,IAAY,MAAM,KAAK;AAAA,IAC3C,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,QACP,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,QAAO;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAMC;AAAA,cACN,OAAOV,IAAY,SAAS;AAAA,cAC5B,OAAM;AAAA,cACN,SAASN;AAAA,cACT,MAAK;AAAA,cACL,MAAMQ;AAAA,cACN,UAAUA;AAAA,YAAA;AAAA,UACZ;AAAA,UACA,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAOT,IAAY,SAAS;AAAA,cAC5B,MAAMW;AAAAA,cACN,OAAM;AAAA,cACN,SAASlB;AAAA,cACT,MAAMU;AAAA,cACN,UAAUA;AAAA,YAAA;AAAA,UACZ;AAAA,UACA,gBAAAG;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAOT,IAAY,SAAS;AAAA,cAC5B,OAAM;AAAA,cACN,SAASR;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAc,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IACxB,gBAAAJ,EAAAC,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAErC,4BAAA;AAAA,MAAO;AAAA,MAEP,gBAAAD,EAACM,KAAW,MAAK,SAAQ,OAAM,UAAS,OAAM,SAAQ,SAAShB,EAAa,CAAA;AAAA,IAAA,GAC9E;AAAA,EACF,EAAA,CAAA;AAEJ,GAEeiB,IAAAC,EAAKvB,CAAa;"}
|
|
@@ -11,7 +11,7 @@ import { useGetStudentProfileSummary as X } from "../../api/student-profile-summ
|
|
|
11
11
|
import { useTrialSessionContext as M } from "../../context/use-trial-session-context.js";
|
|
12
12
|
import O from "../slide-header/index.js";
|
|
13
13
|
import { Container as k, ContentWrapper as B, AbsoluteImage as H, ImageWrapper as R } from "./student-profile-styled.js";
|
|
14
|
-
import {
|
|
14
|
+
import { getDummyProfileImage as W, getMilestoneGoalName as P } from "./student-profile-utils.js";
|
|
15
15
|
const re = b(() => {
|
|
16
16
|
const { isTeacher: t, studentId: l, formData: $, updateSlideConfig: d, updateButtonState: f } = M(), { name: y, goals: r, studentProfile: o } = $ || {}, { dummyProfileImageIndex: I, profileSummary: x } = o || {}, C = W(I), m = A(() => r && r.length > 0 ? {
|
|
17
17
|
school_success_goal: P(r, g.SCHOOL_SUCCESS),
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
const
|
|
8
|
-
const [l,
|
|
9
|
-
|
|
10
|
-
}, [
|
|
1
|
+
import { jsxs as k, jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import { memo as C, useState as $, useMemo as b, useCallback as m, useEffect as x } from "react";
|
|
3
|
+
import H from "../layout/flex-view.js";
|
|
4
|
+
import R from "../separator/separator.js";
|
|
5
|
+
import V from "../text/text.js";
|
|
6
|
+
import w from "./accordion-items/accordion-items.js";
|
|
7
|
+
const y = C((S) => {
|
|
8
|
+
const { theme: p = "light", visibleBuffer: i, accordionData: c, defaultOpenElement: v = -1 } = S, [l, g] = $(i), [o, E] = $(v), r = b(() => [], []), s = b(() => [], []), T = p === "dark", A = m(() => {
|
|
9
|
+
g((e) => e < c.length ? c.length : i);
|
|
10
|
+
}, [c.length, i]), n = m((e, t) => {
|
|
11
11
|
e instanceof HTMLDivElement ? e.style.maxHeight = t ? `${e.scrollHeight}px` : "0px" : e instanceof SVGSVGElement && (e.style.transform = t ? "rotateZ(45deg)" : "rotateZ(0deg)");
|
|
12
|
-
}, []),
|
|
12
|
+
}, []), D = m(
|
|
13
13
|
(e) => {
|
|
14
|
-
const t =
|
|
14
|
+
const t = r[e], h = s[e];
|
|
15
15
|
if (!t || !h) return;
|
|
16
|
-
const
|
|
16
|
+
const a = o === e, L = a ? -1 : e;
|
|
17
17
|
if (o !== -1 && o !== e) {
|
|
18
|
-
const
|
|
19
|
-
|
|
18
|
+
const u = r[o], d = s[o];
|
|
19
|
+
u && d && (n(u, !1), n(d, !1));
|
|
20
20
|
}
|
|
21
|
-
n(t, !
|
|
21
|
+
n(t, !a), n(h, !a), E(L);
|
|
22
22
|
},
|
|
23
|
-
[
|
|
23
|
+
[r, s, o, n]
|
|
24
24
|
);
|
|
25
|
-
return
|
|
26
|
-
|
|
27
|
-
}, [
|
|
28
|
-
o !== -1 &&
|
|
29
|
-
}, [l, o,
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
return x(() => {
|
|
26
|
+
g(i);
|
|
27
|
+
}, [i]), x(() => {
|
|
28
|
+
o !== -1 && r[o] && s[o] && (n(r[o], !0), n(s[o], !0));
|
|
29
|
+
}, [l, o, r, s, n]), /* @__PURE__ */ k(H, { $flexDirection: "column", children: [
|
|
30
|
+
c.map((e, t) => /* @__PURE__ */ f(
|
|
31
|
+
w,
|
|
32
32
|
{
|
|
33
33
|
item: e,
|
|
34
34
|
index: t,
|
|
35
|
-
handleToggle:
|
|
36
|
-
refList:
|
|
37
|
-
iconRef:
|
|
35
|
+
handleToggle: D,
|
|
36
|
+
refList: r,
|
|
37
|
+
iconRef: s,
|
|
38
38
|
visible: t < l,
|
|
39
|
-
theme:
|
|
39
|
+
theme: p
|
|
40
40
|
},
|
|
41
41
|
`${e.accordionQuestion}-${t}`
|
|
42
42
|
)),
|
|
43
|
-
/* @__PURE__ */ f(
|
|
43
|
+
/* @__PURE__ */ f(R, { height: 24 }),
|
|
44
44
|
/* @__PURE__ */ f(
|
|
45
|
-
|
|
45
|
+
V,
|
|
46
46
|
{
|
|
47
47
|
$renderAs: "ub3-bold",
|
|
48
48
|
$align: "center",
|
|
49
49
|
$textDecoration: "underline",
|
|
50
50
|
$marginBottom: 24,
|
|
51
|
-
onClick:
|
|
52
|
-
$color:
|
|
51
|
+
onClick: A,
|
|
52
|
+
$color: T ? "WHITE" : "BLACK",
|
|
53
53
|
$cursor: "pointer",
|
|
54
|
-
children: l <
|
|
54
|
+
children: l < c.length ? "See More" : "See Less"
|
|
55
55
|
}
|
|
56
56
|
)
|
|
57
57
|
] });
|
|
58
|
-
}),
|
|
58
|
+
}), Z = y;
|
|
59
59
|
export {
|
|
60
|
-
|
|
60
|
+
Z as default
|
|
61
61
|
};
|
|
62
62
|
//# sourceMappingURL=accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sources":["../../../../src/features/ui/accordion/accordion.tsx"],"sourcesContent":["import type { AccordionProps } from './accordion-types';\n\nimport { useCallback, useEffect, useMemo, useState, memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport Separator from '../separator/separator';\nimport Text from '../text/text';\nimport AccordionItem from './accordion-items/accordion-items';\n\nconst Accordion = memo<AccordionProps>(
|
|
1
|
+
{"version":3,"file":"accordion.js","sources":["../../../../src/features/ui/accordion/accordion.tsx"],"sourcesContent":["import type { AccordionProps } from './accordion-types';\n\nimport { useCallback, useEffect, useMemo, useState, memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport Separator from '../separator/separator';\nimport Text from '../text/text';\nimport AccordionItem from './accordion-items/accordion-items';\n\nconst Accordion = memo<AccordionProps>(props => {\n const { theme = 'light', visibleBuffer, accordionData, defaultOpenElement = -1 } = props;\n const [visible, setVisible] = useState(visibleBuffer);\n const [openIndex, setOpenIndex] = useState<number>(defaultOpenElement);\n const refList = useMemo<(HTMLDivElement | null)[]>(() => [], []);\n const iconRef = useMemo<(SVGSVGElement | null)[]>(() => [], []);\n const isDarkTheme = theme === 'dark';\n\n const handleShowToggle = useCallback(() => {\n setVisible(prev => (prev < accordionData.length ? accordionData.length : visibleBuffer));\n }, [accordionData.length, visibleBuffer]);\n\n const animateElement = useCallback((element: HTMLElement | SVGElement, isOpen: boolean) => {\n if (element instanceof HTMLDivElement) {\n element.style.maxHeight = isOpen ? `${element.scrollHeight}px` : '0px';\n } else if (element instanceof SVGSVGElement) {\n element.style.transform = isOpen ? 'rotateZ(45deg)' : 'rotateZ(0deg)';\n }\n }, []);\n\n const handleToggle = useCallback(\n (currentIndex: number) => {\n const currentRefList = refList[currentIndex];\n const currentIconRef = iconRef[currentIndex];\n\n if (!currentRefList || !currentIconRef) return;\n\n const isCurrentlyOpen = openIndex === currentIndex;\n const newOpenIndex = isCurrentlyOpen ? -1 : currentIndex;\n\n // Close previously open item\n if (openIndex !== -1 && openIndex !== currentIndex) {\n const prevRef = refList[openIndex];\n const prevIcon = iconRef[openIndex];\n\n if (prevRef && prevIcon) {\n animateElement(prevRef, false);\n animateElement(prevIcon, false);\n }\n }\n\n // Toggle current item\n animateElement(currentRefList, !isCurrentlyOpen);\n animateElement(currentIconRef, !isCurrentlyOpen);\n\n setOpenIndex(newOpenIndex);\n },\n [refList, iconRef, openIndex, animateElement],\n );\n\n useEffect(() => {\n setVisible(visibleBuffer);\n }, [visibleBuffer]);\n\n useEffect(() => {\n if (openIndex !== -1 && refList[openIndex] && iconRef[openIndex]) {\n animateElement(refList[openIndex]!, true);\n animateElement(iconRef[openIndex]!, true);\n }\n }, [visible, openIndex, refList, iconRef, animateElement]);\n\n return (\n <FlexView $flexDirection=\"column\">\n {accordionData.map((item, index) => (\n <AccordionItem\n key={`${item.accordionQuestion}-${index}`}\n item={item}\n index={index}\n handleToggle={handleToggle}\n refList={refList}\n iconRef={iconRef}\n visible={index < visible}\n theme={theme}\n />\n ))}\n <Separator height={24} />\n <Text\n $renderAs=\"ub3-bold\"\n $align=\"center\"\n $textDecoration=\"underline\"\n $marginBottom={24}\n onClick={handleShowToggle}\n $color={isDarkTheme ? 'WHITE' : 'BLACK'}\n $cursor=\"pointer\"\n >\n {visible < accordionData.length ? 'See More' : 'See Less'}\n </Text>\n </FlexView>\n );\n});\n\nexport default Accordion;\n"],"names":["Accordion","memo","props","theme","visibleBuffer","accordionData","defaultOpenElement","visible","setVisible","useState","openIndex","setOpenIndex","refList","useMemo","iconRef","isDarkTheme","handleShowToggle","useCallback","prev","animateElement","element","isOpen","handleToggle","currentIndex","currentRefList","currentIconRef","isCurrentlyOpen","newOpenIndex","prevRef","prevIcon","useEffect","jsxs","FlexView","item","index","jsx","AccordionItem","Separator","Text","Accordion$1"],"mappings":";;;;;;AASA,MAAMA,IAAYC,EAAqB,CAASC,MAAA;AAC9C,QAAM,EAAE,OAAAC,IAAQ,SAAS,eAAAC,GAAe,eAAAC,GAAe,oBAAAC,IAAqB,GAAO,IAAAJ,GAC7E,CAACK,GAASC,CAAU,IAAIC,EAASL,CAAa,GAC9C,CAACM,GAAWC,CAAY,IAAIF,EAAiBH,CAAkB,GAC/DM,IAAUC,EAAmC,MAAM,CAAC,GAAG,CAAE,CAAA,GACzDC,IAAUD,EAAkC,MAAM,CAAC,GAAG,CAAE,CAAA,GACxDE,IAAcZ,MAAU,QAExBa,IAAmBC,EAAY,MAAM;AACzC,IAAAT,EAAW,OAASU,IAAOb,EAAc,SAASA,EAAc,SAASD,CAAc;AAAA,EACtF,GAAA,CAACC,EAAc,QAAQD,CAAa,CAAC,GAElCe,IAAiBF,EAAY,CAACG,GAAmCC,MAAoB;AACzF,IAAID,aAAmB,iBACrBA,EAAQ,MAAM,YAAYC,IAAS,GAAGD,EAAQ,YAAY,OAAO,QACxDA,aAAmB,kBACpBA,EAAA,MAAM,YAAYC,IAAS,mBAAmB;AAAA,EAE1D,GAAG,CAAE,CAAA,GAECC,IAAeL;AAAA,IACnB,CAACM,MAAyB;AAClB,YAAAC,IAAiBZ,EAAQW,CAAY,GACrCE,IAAiBX,EAAQS,CAAY;AAEvC,UAAA,CAACC,KAAkB,CAACC,EAAgB;AAExC,YAAMC,IAAkBhB,MAAca,GAChCI,IAAeD,IAAkB,KAAKH;AAGxC,UAAAb,MAAc,MAAMA,MAAca,GAAc;AAC5C,cAAAK,IAAUhB,EAAQF,CAAS,GAC3BmB,IAAWf,EAAQJ,CAAS;AAElC,QAAIkB,KAAWC,MACbV,EAAeS,GAAS,EAAK,GAC7BT,EAAeU,GAAU,EAAK;AAAA,MAElC;AAGe,MAAAV,EAAAK,GAAgB,CAACE,CAAe,GAChCP,EAAAM,GAAgB,CAACC,CAAe,GAE/Cf,EAAagB,CAAY;AAAA,IAC3B;AAAA,IACA,CAACf,GAASE,GAASJ,GAAWS,CAAc;AAAA,EAAA;AAG9C,SAAAW,EAAU,MAAM;AACd,IAAAtB,EAAWJ,CAAa;AAAA,EAAA,GACvB,CAACA,CAAa,CAAC,GAElB0B,EAAU,MAAM;AACd,IAAIpB,MAAc,MAAME,EAAQF,CAAS,KAAKI,EAAQJ,CAAS,MAC9CS,EAAAP,EAAQF,CAAS,GAAI,EAAI,GACzBS,EAAAL,EAAQJ,CAAS,GAAI,EAAI;AAAA,EAC1C,GACC,CAACH,GAASG,GAAWE,GAASE,GAASK,CAAc,CAAC,GAGvD,gBAAAY,EAACC,GAAS,EAAA,gBAAe,UACtB,UAAA;AAAA,IAAc3B,EAAA,IAAI,CAAC4B,GAAMC,MACxB,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,MAAAH;AAAA,QACA,OAAAC;AAAA,QACA,cAAAZ;AAAA,QACA,SAAAV;AAAA,QACA,SAAAE;AAAA,QACA,SAASoB,IAAQ3B;AAAA,QACjB,OAAAJ;AAAA,MAAA;AAAA,MAPK,GAAG8B,EAAK,iBAAiB,IAAIC,CAAK;AAAA,IAAA,CAS1C;AAAA,IACD,gBAAAC,EAACE,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,IACvB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,QAAO;AAAA,QACP,iBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,SAAStB;AAAA,QACT,QAAQD,IAAc,UAAU;AAAA,QAChC,SAAQ;AAAA,QAEP,UAAAR,IAAUF,EAAc,SAAS,aAAa;AAAA,MAAA;AAAA,IACjD;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC,GAEDkC,IAAevC;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export declare const Accordion: NamedExoticComponent<AccordionProps>;
|
|
|
38
38
|
declare interface AccordionProps {
|
|
39
39
|
theme?: AccordionTheme;
|
|
40
40
|
visibleBuffer: number;
|
|
41
|
+
defaultOpenElement?: number;
|
|
41
42
|
accordionData: Array<{
|
|
42
43
|
accordionQuestion: string;
|
|
43
44
|
accordionAnswer: React.ReactNode | string;
|
|
@@ -576,6 +577,30 @@ export declare const getTheme: () => DefaultTheme;
|
|
|
576
577
|
|
|
577
578
|
declare function getZIndexConfig(): TZIndexMap;
|
|
578
579
|
|
|
580
|
+
export declare const GIF: {
|
|
581
|
+
BOBWAVE: string;
|
|
582
|
+
EASY_RESCHEDULING: string;
|
|
583
|
+
ENRICHMENT: string;
|
|
584
|
+
ENRICHMENT_MINI: string;
|
|
585
|
+
GAMES: string;
|
|
586
|
+
JIGII_WAVE: string;
|
|
587
|
+
LEARNING_SESSION: string;
|
|
588
|
+
MAX_WAVE: string;
|
|
589
|
+
PUZZLES: string;
|
|
590
|
+
SCHOOL_SUCCESS: string;
|
|
591
|
+
SCHOOL_SUCCESS_MINI: string;
|
|
592
|
+
SKILLS: string;
|
|
593
|
+
SPECKIE_WAVE: string;
|
|
594
|
+
STAY_CONNECTED: string;
|
|
595
|
+
TERA_WAVE: string;
|
|
596
|
+
TEST_PREP: string;
|
|
597
|
+
TEST_PREP_MINI: string;
|
|
598
|
+
TRACK_PROGRESS: string;
|
|
599
|
+
VINNIE_WAVE: string;
|
|
600
|
+
WAY_FORWARD: string;
|
|
601
|
+
YOUR_GOALS: string;
|
|
602
|
+
};
|
|
603
|
+
|
|
579
604
|
declare const GOAL_CATEGORY: {
|
|
580
605
|
readonly SCHOOL_SUCCESS: "SCHOOL_SUCCESS";
|
|
581
606
|
readonly TEST_PREP: "TEST_PREP";
|
|
@@ -674,6 +699,7 @@ declare interface IAnimatedAvatarMessageProps {
|
|
|
674
699
|
confirmationMessage?: string;
|
|
675
700
|
isConfirmationVisible?: boolean;
|
|
676
701
|
ref: React.Ref<IAnimatedAvatarMessageRef>;
|
|
702
|
+
height?: string | number;
|
|
677
703
|
}
|
|
678
704
|
|
|
679
705
|
export declare type IAnimatedAvatarMessageRef = {
|