@cuemath/leap 3.2.11-j1 → 3.2.11-j3
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-styled.js +14 -27
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map +1 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js +25 -24
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map +1 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js +10 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js.map +1 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js +17 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js.map +1 -0
- package/dist/features/auth/signup-v2/signup-header/signup-header.js +18 -18
- package/dist/features/auth/signup-v2/signup-header/signup-header.js.map +1 -1
- package/dist/features/auth/signup-v2/signup-options/signup-options.js +74 -64
- package/dist/features/auth/signup-v2/signup-options/signup-options.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import r, { keyframes as a, css as t } from "styled-components";
|
|
2
2
|
import s from "../../../ui/layout/flex-view.js";
|
|
3
|
-
|
|
4
|
-
const m = o(s)``, i = r`
|
|
3
|
+
const c = r(s)``, e = a`
|
|
5
4
|
from {
|
|
6
5
|
opacity: 0;
|
|
7
6
|
transform: scale(0.95);
|
|
@@ -10,7 +9,7 @@ const m = o(s)``, i = r`
|
|
|
10
9
|
opacity: 1;
|
|
11
10
|
transform: scale(1);
|
|
12
11
|
}
|
|
13
|
-
`,
|
|
12
|
+
`, i = a`
|
|
14
13
|
from {
|
|
15
14
|
opacity: 1;
|
|
16
15
|
transform: scale(1);
|
|
@@ -19,47 +18,35 @@ const m = o(s)``, i = r`
|
|
|
19
18
|
opacity: 0;
|
|
20
19
|
transform: scale(0.95);
|
|
21
20
|
}
|
|
22
|
-
`,
|
|
21
|
+
`, l = r(s)`
|
|
23
22
|
position: relative;
|
|
24
23
|
top: -8px;
|
|
25
24
|
width: fit-content;
|
|
26
25
|
max-width: 90%;
|
|
27
|
-
border: 1px solid ${({ theme:
|
|
28
|
-
opacity: ${({ isVisible:
|
|
29
|
-
transform: ${({ isVisible:
|
|
30
|
-
animation: ${({ isVisible:
|
|
26
|
+
border: 1px solid ${({ theme: o }) => o.colors.WHITE_T_15}
|
|
27
|
+
opacity: ${({ isVisible: o }) => o ? 1 : 0};
|
|
28
|
+
transform: ${({ isVisible: o }) => o ? "scale(1)" : "scale(0.95)"};
|
|
29
|
+
animation: ${({ isVisible: o }) => o ? t`
|
|
30
|
+
${e} 0.4s ease forwards
|
|
31
|
+
` : t`
|
|
31
32
|
${i} 0.4s ease forwards
|
|
32
|
-
` : e`
|
|
33
|
-
${n} 0.4s ease forwards
|
|
34
33
|
`};
|
|
35
34
|
transition: all 0.4s ease;
|
|
36
35
|
&::before {
|
|
37
36
|
content: '';
|
|
38
37
|
position: absolute;
|
|
39
|
-
left: -
|
|
38
|
+
left: -8px;
|
|
40
39
|
top: 50%;
|
|
41
40
|
transform: translateY(-50%);
|
|
42
41
|
width: 0;
|
|
43
42
|
height: 0;
|
|
44
43
|
border-top: 8px solid transparent;
|
|
45
44
|
border-bottom: 8px solid transparent;
|
|
46
|
-
border-right: 8px solid ${({ theme:
|
|
45
|
+
border-right: 8px solid ${({ theme: o }) => o.colors.BLACK_5};
|
|
47
46
|
}
|
|
48
|
-
`, p = r`
|
|
49
|
-
from {
|
|
50
|
-
width: 0;
|
|
51
|
-
}
|
|
52
|
-
to {
|
|
53
|
-
width: 100%;
|
|
54
|
-
}
|
|
55
|
-
`, w = o(a)`
|
|
56
|
-
animation: ${p} 500ms steps(30, end);
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
white-space: nowrap;
|
|
59
47
|
`;
|
|
60
48
|
export {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
m as Wrapper
|
|
49
|
+
l as MessageWrapper,
|
|
50
|
+
c as Wrapper
|
|
64
51
|
};
|
|
65
52
|
//# sourceMappingURL=animated-avatar-message-styled.js.map
|
package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-avatar-message-styled.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\
|
|
1
|
+
{"version":3,"file":"animated-avatar-message-styled.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)``;\n\nconst fadeInScale = keyframes`\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n`;\n\nconst fadeOutScale = keyframes`\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n`;\n\nexport const MessageWrapper = styled(FlexView)<{ isVisible: boolean }>`\n position: relative;\n top: -8px;\n width: fit-content;\n max-width: 90%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE_T_15}\n opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n transform: ${({ isVisible }) => (isVisible ? 'scale(1)' : 'scale(0.95)')};\n animation: ${({ isVisible }) =>\n isVisible\n ? css`\n ${fadeInScale} 0.4s ease forwards\n `\n : css`\n ${fadeOutScale} 0.4s ease forwards\n `};\n transition: all 0.4s ease;\n &::before {\n content: '';\n position: absolute;\n left: -8px;\n top: 50%;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid ${({ theme }) => theme.colors.BLACK_5};\n }\n`;\n"],"names":["Wrapper","styled","FlexView","fadeInScale","keyframes","fadeOutScale","MessageWrapper","theme","isVisible","css"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ,KAEhCC,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWRE,IAAiBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,CAAC,EAAE,OAAAK,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aAC/C,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,aAAa,aAAc;AAAA,eAC3D,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAW;AAAA,YAEfM;AAAA,YACIJ,CAAY;AAAA,SACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYqB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;"}
|
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
1
|
+
import { jsxs as b, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { memo as h, useRef as T, useState as $, useEffect as o, useCallback as N, useImperativeHandle as R, useMemo as V } from "react";
|
|
3
3
|
import { LOTTIE as _ } from "../../../../assets/lottie/lottie.js";
|
|
4
|
-
import
|
|
4
|
+
import x from "../../../ui/layout/flex-view.js";
|
|
5
5
|
import O from "../../../ui/lottie-animation/lottie-animation.js";
|
|
6
|
-
import { ANIMATION_SEGMENTS as
|
|
7
|
-
import { Wrapper as j, MessageWrapper as C
|
|
6
|
+
import { ANIMATION_SEGMENTS as E, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
|
|
7
|
+
import { Wrapper as j, MessageWrapper as C } from "./animated-avatar-message-styled.js";
|
|
8
|
+
import D from "./animated-text/animated-text.js";
|
|
8
9
|
const F = {
|
|
9
10
|
autoplay: !1,
|
|
10
11
|
loop: !1,
|
|
11
12
|
renderer: "canvas"
|
|
12
|
-
},
|
|
13
|
-
message:
|
|
13
|
+
}, X = ({
|
|
14
|
+
message: n,
|
|
14
15
|
confirmationMessage: e,
|
|
15
16
|
onShowContent: t,
|
|
16
17
|
confirmationFrames: c,
|
|
17
18
|
isConfirmationVisible: m,
|
|
18
19
|
ref: M
|
|
19
20
|
}) => {
|
|
20
|
-
const r =
|
|
21
|
+
const r = T(null), u = T(null), [p, i] = $(!1), [f, d] = $(m);
|
|
21
22
|
o(() => () => {
|
|
22
|
-
|
|
23
|
+
u.current && clearTimeout(u.current);
|
|
23
24
|
}, []), o(() => {
|
|
24
25
|
d(m);
|
|
25
26
|
}, [m]), o(() => {
|
|
26
27
|
i(!0), t(!0);
|
|
27
|
-
}, [
|
|
28
|
-
const
|
|
28
|
+
}, [n, t]);
|
|
29
|
+
const v = N(() => {
|
|
29
30
|
var a, A;
|
|
30
|
-
(a = r.current) == null || a.playSegments(
|
|
31
|
+
(a = r.current) == null || a.playSegments(E.INITIAL, !0);
|
|
31
32
|
const s = () => {
|
|
32
|
-
var
|
|
33
|
-
(
|
|
33
|
+
var g, I;
|
|
34
|
+
(g = r.current) == null || g.removeEventListener("complete", s), i(!0), t(!0), (I = r.current) == null || I.playSegments(E.FINAL, !0);
|
|
34
35
|
};
|
|
35
36
|
(A = r.current) == null || A.addEventListener("complete", s);
|
|
36
37
|
}, [t]);
|
|
@@ -38,21 +39,21 @@ const F = {
|
|
|
38
39
|
M,
|
|
39
40
|
() => ({
|
|
40
41
|
fadeOutMessage: () => new Promise((s) => {
|
|
41
|
-
t(!1),
|
|
42
|
+
t(!1), u.current = setTimeout(() => {
|
|
42
43
|
i(!1), s();
|
|
43
44
|
}, L);
|
|
44
45
|
}),
|
|
45
46
|
playConfirmationFrames: () => new Promise((s) => {
|
|
46
47
|
var a;
|
|
47
|
-
(a = r.current) == null || a.playSegments(c, !0), e && i(!1),
|
|
48
|
+
(a = r.current) == null || a.playSegments(c, !0), e && i(!1), u.current = setTimeout(() => {
|
|
48
49
|
e && d(!0), i(!0), s();
|
|
49
50
|
}, L);
|
|
50
51
|
})
|
|
51
52
|
}),
|
|
52
53
|
[c, e, t]
|
|
53
54
|
);
|
|
54
|
-
const
|
|
55
|
-
return /* @__PURE__ */
|
|
55
|
+
const y = V(() => f && e ? e : n, [f, e, n]);
|
|
56
|
+
return /* @__PURE__ */ b(
|
|
56
57
|
j,
|
|
57
58
|
{
|
|
58
59
|
$flexDirection: "row",
|
|
@@ -60,18 +61,18 @@ const F = {
|
|
|
60
61
|
$alignItems: "center",
|
|
61
62
|
$flexColumnGapX: 0.5,
|
|
62
63
|
children: [
|
|
63
|
-
/* @__PURE__ */ l(
|
|
64
|
+
/* @__PURE__ */ l(x, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
|
|
64
65
|
O,
|
|
65
66
|
{
|
|
66
67
|
width: 80,
|
|
67
68
|
height: 80,
|
|
68
69
|
src: _.ANIMATED_AVATAR,
|
|
69
70
|
ref: r,
|
|
70
|
-
onRender:
|
|
71
|
+
onRender: v,
|
|
71
72
|
settings: F
|
|
72
73
|
}
|
|
73
74
|
) }),
|
|
74
|
-
p && /* @__PURE__ */ l(
|
|
75
|
+
p && /* @__PURE__ */ l(x, { $flex: 1, children: /* @__PURE__ */ l(
|
|
75
76
|
C,
|
|
76
77
|
{
|
|
77
78
|
$gutterX: 1,
|
|
@@ -79,14 +80,14 @@ const F = {
|
|
|
79
80
|
$background: "BLACK_3",
|
|
80
81
|
$borderColor: "BLACK_5",
|
|
81
82
|
isVisible: p,
|
|
82
|
-
children: /* @__PURE__ */ l(D, {
|
|
83
|
+
children: /* @__PURE__ */ l(D, { text: y, speed: 20 })
|
|
83
84
|
}
|
|
84
85
|
) })
|
|
85
86
|
]
|
|
86
87
|
}
|
|
87
88
|
);
|
|
88
|
-
},
|
|
89
|
+
}, H = h(X);
|
|
89
90
|
export {
|
|
90
|
-
|
|
91
|
+
H as default
|
|
91
92
|
};
|
|
92
93
|
//# 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';\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 <
|
|
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":"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"}
|
package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"animated-text-styled.js","sources":["../../../../../../src/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Text from '../../../../ui/text/text';\n\nexport const AnimatedText = styled(Text)`\n white-space: pre-wrap;\n word-break: break-word;\n`;\n"],"names":["AnimatedText","styled","Text"],"mappings":";;AAIa,MAAAA,IAAeC,EAAOC,CAAI;AAAA;AAAA;AAAA;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { memo as o, useState as l, useEffect as m } from "react";
|
|
3
|
+
import { AnimatedText as c } from "./animated-text-styled.js";
|
|
4
|
+
const f = ({ text: e, speed: r = 30 }) => {
|
|
5
|
+
const [s, n] = l(0);
|
|
6
|
+
return m(() => {
|
|
7
|
+
n(0);
|
|
8
|
+
const a = setInterval(() => {
|
|
9
|
+
n((t) => t >= e.length ? (clearInterval(a), t) : t + 1);
|
|
10
|
+
}, r);
|
|
11
|
+
return () => clearInterval(a);
|
|
12
|
+
}, [e, r]), /* @__PURE__ */ i(c, { $renderAs: "ab2", $color: "WHITE", children: e.slice(0, s) });
|
|
13
|
+
}, T = o(f);
|
|
14
|
+
export {
|
|
15
|
+
T as default
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=animated-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"animated-text.js","sources":["../../../../../../src/features/auth/comps/animated-avatar-message/animated-text/animated-text.tsx"],"sourcesContent":["import type { IAnimatedTextProps } from './animated-text-types';\n\nimport React, { useEffect, useState, memo } from 'react';\n\nimport * as Styled from './animated-text-styled';\n\nconst AnimatedText: React.FC<IAnimatedTextProps> = ({ text, speed = 30 }) => {\n const [visibleChars, setVisibleChars] = useState(0);\n\n useEffect(() => {\n setVisibleChars(0);\n\n const interval = setInterval(() => {\n setVisibleChars(prev => {\n if (prev >= text.length) {\n clearInterval(interval);\n\n return prev;\n }\n\n return prev + 1;\n });\n }, speed);\n\n return () => clearInterval(interval);\n }, [text, speed]);\n\n return (\n <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\">\n {text.slice(0, visibleChars)}\n </Styled.AnimatedText>\n );\n};\n\nexport default memo(AnimatedText);\n"],"names":["AnimatedText","text","speed","visibleChars","setVisibleChars","useState","useEffect","interval","prev","jsx","Styled.AnimatedText","AnimatedText$1","memo"],"mappings":";;;AAMA,MAAMA,IAA6C,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,SAAS;AAC3E,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,CAAC;AAElD,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAgB,CAAC;AAEX,UAAAG,IAAW,YAAY,MAAM;AACjC,MAAAH,EAAgB,CAAQI,MAClBA,KAAQP,EAAK,UACf,cAAcM,CAAQ,GAEfC,KAGFA,IAAO,CACf;AAAA,OACAN,CAAK;AAED,WAAA,MAAM,cAAcK,CAAQ;AAAA,EAAA,GAClC,CAACN,GAAMC,CAAK,CAAC,GAGb,gBAAAO,EAAAC,GAAA,EAAoB,WAAU,OAAM,QAAO,SACzC,UAAKT,EAAA,MAAM,GAAGE,CAAY,EAC7B,CAAA;AAEJ,GAEeQ,IAAAC,EAAKZ,CAAY;"}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useTheme as
|
|
3
|
-
import { ILLUSTRATIONS as
|
|
1
|
+
import { jsxs as t, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme as s } from "styled-components";
|
|
3
|
+
import { ILLUSTRATIONS as o } from "../../../../assets/illustrations/illustrations.js";
|
|
4
4
|
import i from "../../../ui/image/image.js";
|
|
5
5
|
import n from "../../../ui/layout/flex-view.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { EDeviceType as
|
|
9
|
-
const
|
|
10
|
-
const { device:
|
|
11
|
-
return /* @__PURE__ */
|
|
6
|
+
import c from "../../../ui/separator/separator.js";
|
|
7
|
+
import l from "../../../ui/text/text.js";
|
|
8
|
+
import { EDeviceType as a } from "../../../ui/theme/constants.js";
|
|
9
|
+
const d = () => {
|
|
10
|
+
const { device: m } = s(), e = m <= a.TABLET;
|
|
11
|
+
return /* @__PURE__ */ t(
|
|
12
12
|
n,
|
|
13
13
|
{
|
|
14
14
|
$flexDirection: e ? "row" : "column",
|
|
15
|
-
$alignItems: "center",
|
|
15
|
+
$alignItems: e ? "center" : "flex-start",
|
|
16
16
|
$width: "100%",
|
|
17
|
-
$flex: 1,
|
|
18
17
|
$flexColumnGapX: 1,
|
|
18
|
+
$justifyContent: e ? "space-between" : "flex-start",
|
|
19
19
|
children: [
|
|
20
20
|
/* @__PURE__ */ r(
|
|
21
21
|
i,
|
|
22
22
|
{
|
|
23
23
|
width: e ? 80 : 107,
|
|
24
|
-
src:
|
|
24
|
+
src: o.CIRCLE_CUEMATH_LOGO_WHITE,
|
|
25
25
|
height: e ? 12 : 16
|
|
26
26
|
}
|
|
27
27
|
),
|
|
28
|
-
!e && /* @__PURE__ */ r(
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
28
|
+
!e && /* @__PURE__ */ r(c, { heightX: 1 }),
|
|
29
|
+
/* @__PURE__ */ t(n, { $flexDirection: "row", $alignItems: "flex-end", children: [
|
|
30
|
+
/* @__PURE__ */ t(l, { $renderAs: "ab2", $renderOnTabletAs: "ub3", $color: "WHITE", children: [
|
|
31
31
|
"Rated",
|
|
32
32
|
" ",
|
|
33
|
-
/* @__PURE__ */ r(
|
|
33
|
+
/* @__PURE__ */ r(l, { $inline: !0, $renderAs: "ab2-bold", $renderOnTabletAs: "ub3-bold", $color: "WHITE", children: "4.8+" }),
|
|
34
34
|
" ",
|
|
35
35
|
"on"
|
|
36
36
|
] }),
|
|
@@ -38,7 +38,7 @@ const a = () => {
|
|
|
38
38
|
/* @__PURE__ */ r(
|
|
39
39
|
i,
|
|
40
40
|
{
|
|
41
|
-
src:
|
|
41
|
+
src: o.TRUSTPILOT,
|
|
42
42
|
width: e ? 80 : 99,
|
|
43
43
|
height: e ? 20 : 25
|
|
44
44
|
}
|
|
@@ -47,7 +47,7 @@ const a = () => {
|
|
|
47
47
|
]
|
|
48
48
|
}
|
|
49
49
|
);
|
|
50
|
-
}, b =
|
|
50
|
+
}, b = d;
|
|
51
51
|
export {
|
|
52
52
|
b as default
|
|
53
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signup-header.js","sources":["../../../../../src/features/auth/signup-v2/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
|
|
1
|
+
{"version":3,"file":"signup-header.js","sources":["../../../../../src/features/auth/signup-v2/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;"}
|
|
@@ -1,72 +1,82 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import { useTheme as
|
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { memo as b } from "react";
|
|
3
|
+
import { useTheme as u } from "styled-components";
|
|
4
4
|
import $ from "../../../../assets/line-icons/icons/apple-icon-white.js";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { EDeviceType as
|
|
12
|
-
const
|
|
13
|
-
onEmailSignup:
|
|
14
|
-
onAppleSignup:
|
|
15
|
-
onGoogleSignup:
|
|
16
|
-
loadingProvider:
|
|
17
|
-
onGoToLogin:
|
|
18
|
-
title:
|
|
5
|
+
import x from "../../../../assets/line-icons/icons/google-icon.js";
|
|
6
|
+
import r from "../../../ui/buttons/button/button.js";
|
|
7
|
+
import A from "../../../ui/buttons/text-button/text-button.js";
|
|
8
|
+
import t from "../../../ui/layout/flex-view.js";
|
|
9
|
+
import a from "../../../ui/separator/separator.js";
|
|
10
|
+
import c from "../../../ui/text/text.js";
|
|
11
|
+
import { EDeviceType as I } from "../../../ui/theme/constants.js";
|
|
12
|
+
const k = ({
|
|
13
|
+
onEmailSignup: m,
|
|
14
|
+
onAppleSignup: p,
|
|
15
|
+
onGoogleSignup: d,
|
|
16
|
+
loadingProvider: l,
|
|
17
|
+
onGoToLogin: h,
|
|
18
|
+
title: f
|
|
19
19
|
}) => {
|
|
20
|
-
const { device:
|
|
21
|
-
return /* @__PURE__ */
|
|
22
|
-
/* @__PURE__ */ e(
|
|
23
|
-
/* @__PURE__ */ e(
|
|
24
|
-
/* @__PURE__ */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
20
|
+
const { device: g } = u(), o = g <= I.TABLET, n = l === "google", s = l === "apple";
|
|
21
|
+
return /* @__PURE__ */ i(t, { $alignItems: "flex-start", children: [
|
|
22
|
+
/* @__PURE__ */ e(c, { $renderAs: "ah3-bold", $renderOnMobileAs: "ah4-bold", $color: "WHITE", $whiteSpace: "pre", children: f }),
|
|
23
|
+
/* @__PURE__ */ e(a, { heightX: o ? 1.5 : 2.5 }),
|
|
24
|
+
/* @__PURE__ */ i(
|
|
25
|
+
t,
|
|
26
|
+
{
|
|
27
|
+
$flexGapX: 1,
|
|
28
|
+
$flex: 1,
|
|
29
|
+
$justifyContent: "center",
|
|
30
|
+
$alignItems: "flex-start",
|
|
31
|
+
$width: "100%",
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ e(
|
|
34
|
+
r,
|
|
35
|
+
{
|
|
36
|
+
renderAs: "black-dark",
|
|
37
|
+
Icon: x,
|
|
38
|
+
width: o ? "100%" : 320,
|
|
39
|
+
label: "Signup with Google",
|
|
40
|
+
onClick: d,
|
|
41
|
+
size: "small",
|
|
42
|
+
busy: n,
|
|
43
|
+
disabled: n
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
/* @__PURE__ */ e(
|
|
47
|
+
r,
|
|
48
|
+
{
|
|
49
|
+
renderAs: "black-dark",
|
|
50
|
+
size: "small",
|
|
51
|
+
width: o ? "100%" : 320,
|
|
52
|
+
Icon: $,
|
|
53
|
+
label: "Signup with Apple",
|
|
54
|
+
onClick: p,
|
|
55
|
+
busy: s,
|
|
56
|
+
disabled: s
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ e(
|
|
60
|
+
r,
|
|
61
|
+
{
|
|
62
|
+
renderAs: "black-dark",
|
|
63
|
+
size: "small",
|
|
64
|
+
width: o ? "100%" : 320,
|
|
65
|
+
label: "Continue with Email",
|
|
66
|
+
onClick: m
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
/* @__PURE__ */ e(a, { heightX: 1.5 }),
|
|
73
|
+
/* @__PURE__ */ i(t, { $flexDirection: "row", $alignItems: "center", children: [
|
|
74
|
+
/* @__PURE__ */ e(c, { $renderAs: "ub3", $color: "WHITE", children: "Already have an account?" }),
|
|
65
75
|
" ",
|
|
66
|
-
/* @__PURE__ */ e(
|
|
76
|
+
/* @__PURE__ */ e(A, { size: "small", label: "Log In", color: "WHITE", onClick: h })
|
|
67
77
|
] })
|
|
68
78
|
] });
|
|
69
|
-
}, B =
|
|
79
|
+
}, B = b(k);
|
|
70
80
|
export {
|
|
71
81
|
B as default
|
|
72
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signup-options.js","sources":["../../../../../src/features/auth/signup-v2/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\" $
|
|
1
|
+
{"version":3,"file":"signup-options.js","sources":["../../../../../src/features/auth/signup-v2/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;"}
|