@cuemath/leap 3.2.15-as2 → 3.2.15-link.0
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/assets/illustrations/illustrations.js +6 -0
- package/dist/assets/illustrations/illustrations.js.map +1 -1
- package/dist/assets/line-icons/icons/after-noon.js +34 -0
- package/dist/assets/line-icons/icons/after-noon.js.map +1 -0
- package/dist/assets/line-icons/icons/apple-icon-white.js +42 -0
- package/dist/assets/line-icons/icons/apple-icon-white.js.map +1 -0
- package/dist/assets/line-icons/icons/evening.js +35 -0
- package/dist/assets/line-icons/icons/evening.js.map +1 -0
- package/dist/assets/line-icons/icons/morning.js +35 -0
- package/dist/assets/line-icons/icons/morning.js.map +1 -0
- package/dist/assets/line-icons/icons/star3.js +32 -0
- package/dist/assets/line-icons/icons/star3.js.map +1 -0
- package/dist/assets/lottie/lottie.js +11 -1
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js +9 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js.map +1 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js +65 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map +1 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js +92 -0
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map +1 -0
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js +18 -13
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js.map +1 -1
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js +12 -0
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js.map +1 -0
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js +34 -0
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js.map +1 -0
- package/dist/features/auth/comps/otp-input/otp-input-styled.js +22 -0
- package/dist/features/auth/comps/otp-input/otp-input-styled.js.map +1 -0
- package/dist/features/auth/comps/otp-input/otp-input.js +51 -0
- package/dist/features/auth/comps/otp-input/otp-input.js.map +1 -0
- package/dist/features/auth/comps/pill-button/pill-button-styled.js +44 -0
- package/dist/features/auth/comps/pill-button/pill-button-styled.js.map +1 -0
- package/dist/features/auth/comps/pill-button/pill-button.js +75 -0
- package/dist/features/auth/comps/pill-button/pill-button.js.map +1 -0
- package/dist/features/auth/comps/resend-otp/resend-otp.js +54 -47
- package/dist/features/auth/comps/resend-otp/resend-otp.js.map +1 -1
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js +17 -0
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js.map +1 -0
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js +67 -0
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js.map +1 -0
- package/dist/features/auth/comps/tabs/tab-tem/tab-item.js +29 -17
- package/dist/features/auth/comps/tabs/tab-tem/tab-item.js.map +1 -1
- package/dist/features/auth/comps/tabs/tabs-styled.js +22 -10
- package/dist/features/auth/comps/tabs/tabs-styled.js.map +1 -1
- package/dist/features/auth/comps/tabs/tabs.js +5 -5
- package/dist/features/auth/comps/tabs/tabs.js.map +1 -1
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide-constants.js +19 -0
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide-constants.js.map +1 -0
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide-styled.js +32 -0
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide-styled.js.map +1 -0
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide.js +44 -0
- package/dist/features/auth/signup-v2/onboarding-guide/onboarding-guide.js.map +1 -0
- package/dist/features/auth/signup-v2/signup-header/signup-header.js +54 -0
- package/dist/features/auth/signup-v2/signup-header/signup-header.js.map +1 -0
- package/dist/features/auth/signup-v2/signup-options/signup-options.js +83 -0
- package/dist/features/auth/signup-v2/signup-options/signup-options.js.map +1 -0
- package/dist/features/chapters-v2/utils/node-card-utils.js +7 -7
- package/dist/features/chapters-v2/utils/node-card-utils.js.map +1 -1
- package/dist/features/journey/comps/coachmark/coachmark.js +28 -29
- package/dist/features/journey/comps/coachmark/coachmark.js.map +1 -1
- package/dist/features/journey/journey-id/journey-id-student.js +2 -2
- package/dist/features/journey/journey-id/journey-id-student.js.map +1 -1
- package/dist/features/journey/use-journey/journey-context-provider.js +72 -73
- package/dist/features/journey/use-journey/journey-context-provider.js.map +1 -1
- package/dist/features/journey/use-journey/journey-styled.js +4 -6
- package/dist/features/journey/use-journey/journey-styled.js.map +1 -1
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js +7 -50
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js.map +1 -1
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js +15 -69
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js.map +1 -1
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js +49 -0
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js.map +1 -0
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js +64 -0
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js.map +1 -0
- package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js +28 -0
- package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js.map +1 -0
- package/dist/features/ui/accordion/accordion-items/accordion-items.js +83 -0
- package/dist/features/ui/accordion/accordion-items/accordion-items.js.map +1 -0
- package/dist/features/ui/accordion/accordion.js +62 -0
- package/dist/features/ui/accordion/accordion.js.map +1 -0
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js +60 -12
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js.map +1 -1
- package/dist/features/ui/arrow-tooltip/arrow-tooltip.js +77 -72
- package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map +1 -1
- package/dist/features/ui/image/image.js +1 -1
- package/dist/features/ui/image/image.js.map +1 -1
- package/dist/features/ui/inputs/base-input/base-input.js +11 -11
- package/dist/features/ui/inputs/base-input/base-input.js.map +1 -1
- package/dist/features/ui/inputs/checkbox-input/checkbox-input.js +21 -21
- package/dist/features/ui/inputs/checkbox-input/checkbox-input.js.map +1 -1
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js +5 -5
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js.map +1 -1
- package/dist/features/ui/inputs/text-input/text-input.js +19 -18
- package/dist/features/ui/inputs/text-input/text-input.js.map +1 -1
- package/dist/features/ui/modals/modal-styled.js +43 -8
- package/dist/features/ui/modals/modal-styled.js.map +1 -1
- package/dist/features/ui/modals/modal.js +37 -27
- package/dist/features/ui/modals/modal.js.map +1 -1
- package/dist/features/ui/nudge/nudge-styled.js +7 -14
- package/dist/features/ui/nudge/nudge-styled.js.map +1 -1
- package/dist/features/ui/nudge/nudge.js +12 -13
- package/dist/features/ui/nudge/nudge.js.map +1 -1
- package/dist/features/ui/text/text.js +31 -29
- package/dist/features/ui/text/text.js.map +1 -1
- package/dist/features/ui/theme/button.js +78 -78
- package/dist/features/ui/theme/button.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-helpers.js +31 -32
- package/dist/features/worksheet/worksheet/worksheet-helpers.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-question/learnosity-question.js +24 -24
- package/dist/features/worksheet/worksheet/worksheet-question/learnosity-question.js.map +1 -1
- package/dist/index.d.ts +151 -48
- package/dist/index.js +522 -498
- package/dist/index.js.map +1 -1
- package/dist/static/animated-avatar.1ad58b1d.json +1 -0
- package/dist/static/animated-avatar.69b07505.json +1 -0
- package/dist/static/animated-avatar.9c560b46.json +1 -0
- package/dist/static/calendar-purple.1a840b41.svg +1 -0
- package/dist/static/flying-disk.c7f6ed39.json +1 -0
- package/dist/static/graduation-cap.3be3340a.json +1 -0
- package/dist/static/handshake.287e7dfb.svg +1 -0
- package/dist/static/light-bulb.c6db0b23.json +1 -0
- package/dist/static/money.332aacf1.svg +1 -0
- package/dist/static/muscle.9bcfb8a7.json +1 -0
- package/dist/static/nudge-tap.5cb30093.json +1057 -0
- package/dist/static/parent-avatar.822c7b9b.svg +1 -0
- package/dist/static/pencil.23df9da0.json +1 -0
- package/dist/static/plus-sign.de6af957.json +1 -0
- package/dist/static/racing-car.2cbf864e.json +1 -0
- package/dist/static/rocket.0a3ccab0.json +1 -0
- package/dist/static/shovel.abeec04c.json +1 -0
- package/dist/static/stripe-blurple.6abf422f.svg +1 -0
- package/dist/static/trustpilot.bd3d79e1.svg +1 -0
- package/package.json +2 -3
- package/dist/assets/line-icons/icons/hint-fill.js +0 -35
- package/dist/assets/line-icons/icons/hint-fill.js.map +0 -1
- package/dist/features/puzzles/app/puzzle-app-styled.js +0 -81
- package/dist/features/puzzles/app/puzzle-app-styled.js.map +0 -1
- package/dist/features/puzzles/app/puzzle-app-view.js +0 -120
- package/dist/features/puzzles/app/puzzle-app-view.js.map +0 -1
- package/dist/features/puzzles/app/puzzle-app.js +0 -82
- package/dist/features/puzzles/app/puzzle-app.js.map +0 -1
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-constants.js +0 -6
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-constants.js.map +0 -1
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body-styled.js +0 -63
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body-styled.js.map +0 -1
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body.js +0 -21
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body.js.map +0 -1
- package/dist/features/ui/carousal/carousal-styles.js +0 -45
- package/dist/features/ui/carousal/carousal-styles.js.map +0 -1
- package/dist/features/ui/carousal/carousal.js +0 -76
- package/dist/features/ui/carousal/carousal.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/activity.js +0 -6
- package/dist/features/worksheet/worksheet/mocks/activity.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/assessment.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/assessment.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/chapter_assessment.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/chapter_assessment.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/diagnostic.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/diagnostic.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/dynamic.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/dynamic.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/extra_practice.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/extra_practice.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/index.js +0 -95
- package/dist/features/worksheet/worksheet/mocks/behaviors/index.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning-v3.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning-v3.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/legacy.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/legacy.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/level2.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/level2.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/level3.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/level3.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/mastery.js +0 -41
- package/dist/features/worksheet/worksheet/mocks/behaviors/mastery.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/practice.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/practice.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle-card.js +0 -39
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle-card.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_easy.js +0 -39
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_easy.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_hard.js +0 -39
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_hard.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_medium.js +0 -39
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_medium.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/recap.js +0 -39
- package/dist/features/worksheet/worksheet/mocks/behaviors/recap.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/remedial.js +0 -39
- package/dist/features/worksheet/worksheet/mocks/behaviors/remedial.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/revision.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/revision.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat-math-assessment.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat-math-assessment.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_english_learning.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_english_learning.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_learning.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_learning.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_recap.js +0 -39
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_recap.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/target_practice.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/target_practice.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic-v2.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic-v2.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_assessment.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_assessment.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_practice.js +0 -38
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_practice.js.map +0 -1
- package/dist/features/worksheet/worksheet/mocks/signed-requests.js +0 -5
- package/dist/features/worksheet/worksheet/mocks/signed-requests.js.map +0 -1
- package/dist/features/worksheet/worksheet/stories/use-canvas-sync-broker-story.js +0 -57
- package/dist/features/worksheet/worksheet/stories/use-canvas-sync-broker-story.js.map +0 -1
- package/dist/features/worksheet/worksheet/stories/worksheet-story-container.js +0 -231
- package/dist/features/worksheet/worksheet/stories/worksheet-story-container.js.map +0 -1
- package/dist/features/worksheet/worksheet/stories/worksheet-student.js +0 -174
- package/dist/features/worksheet/worksheet/stories/worksheet-student.js.map +0 -1
- package/dist/features/worksheet/worksheet/stories/worksheet-teacher.js +0 -255
- package/dist/features/worksheet/worksheet/stories/worksheet-teacher.js.map +0 -1
- package/dist/static/nudge-tap.0591aef4.json +0 -1
- package/dist/types/models/worksheet.js +0 -5
- package/dist/types/models/worksheet.js.map +0 -1
@@ -0,0 +1,92 @@
|
|
1
|
+
import { jsxs as v, jsx as l } from "react/jsx-runtime";
|
2
|
+
import { memo as y, useRef as $, useState as g, useEffect as o, useCallback as N, useImperativeHandle as R, useMemo as V } from "react";
|
3
|
+
import { LOTTIE as _ } from "../../../../assets/lottie/lottie.js";
|
4
|
+
import E from "../../../ui/layout/flex-view.js";
|
5
|
+
import O from "../../../ui/lottie-animation/lottie-animation.js";
|
6
|
+
import { ANIMATION_SEGMENTS as x, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
|
7
|
+
import { Wrapper as j, MessageWrapper as C, AnimatedText as D } from "./animated-avatar-message-styled.js";
|
8
|
+
const F = {
|
9
|
+
autoplay: !1,
|
10
|
+
loop: !1,
|
11
|
+
renderer: "canvas"
|
12
|
+
}, S = ({
|
13
|
+
message: u,
|
14
|
+
confirmationMessage: e,
|
15
|
+
onShowContent: t,
|
16
|
+
confirmationFrames: c,
|
17
|
+
isConfirmationVisible: m,
|
18
|
+
ref: M
|
19
|
+
}) => {
|
20
|
+
const r = $(null), n = $(null), [p, i] = g(!1), [f, d] = g(m);
|
21
|
+
o(() => () => {
|
22
|
+
n.current && clearTimeout(n.current);
|
23
|
+
}, []), o(() => {
|
24
|
+
d(m);
|
25
|
+
}, [m]), o(() => {
|
26
|
+
i(!0), t(!0);
|
27
|
+
}, [u, t]);
|
28
|
+
const h = N(() => {
|
29
|
+
var a, A;
|
30
|
+
(a = r.current) == null || a.playSegments(x.INITIAL, !0);
|
31
|
+
const s = () => {
|
32
|
+
var I, T;
|
33
|
+
(I = r.current) == null || I.removeEventListener("complete", s), i(!0), t(!0), (T = r.current) == null || T.playSegments(x.FINAL, !0);
|
34
|
+
};
|
35
|
+
(A = r.current) == null || A.addEventListener("complete", s);
|
36
|
+
}, [t]);
|
37
|
+
R(
|
38
|
+
M,
|
39
|
+
() => ({
|
40
|
+
fadeOutMessage: () => new Promise((s) => {
|
41
|
+
t(!1), n.current = setTimeout(() => {
|
42
|
+
i(!1), s();
|
43
|
+
}, L);
|
44
|
+
}),
|
45
|
+
playConfirmationFrames: () => new Promise((s) => {
|
46
|
+
var a;
|
47
|
+
(a = r.current) == null || a.playSegments(c, !0), e && i(!1), n.current = setTimeout(() => {
|
48
|
+
e && d(!0), i(!0), s();
|
49
|
+
}, L);
|
50
|
+
})
|
51
|
+
}),
|
52
|
+
[c, e, t]
|
53
|
+
);
|
54
|
+
const b = V(() => f && e ? e : u, [f, e, u]);
|
55
|
+
return /* @__PURE__ */ v(
|
56
|
+
j,
|
57
|
+
{
|
58
|
+
$flexDirection: "row",
|
59
|
+
$justifyContent: "flex-start",
|
60
|
+
$alignItems: "center",
|
61
|
+
$flexColumnGapX: 0.5,
|
62
|
+
children: [
|
63
|
+
/* @__PURE__ */ l(E, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
|
64
|
+
O,
|
65
|
+
{
|
66
|
+
width: 80,
|
67
|
+
height: 80,
|
68
|
+
src: _.ANIMATED_AVATAR,
|
69
|
+
ref: r,
|
70
|
+
onRender: h,
|
71
|
+
settings: F
|
72
|
+
}
|
73
|
+
) }),
|
74
|
+
p && /* @__PURE__ */ l(E, { $flex: 1, children: /* @__PURE__ */ l(
|
75
|
+
C,
|
76
|
+
{
|
77
|
+
$gutterX: 1,
|
78
|
+
$gapX: 0.5,
|
79
|
+
$background: "BLACK_3",
|
80
|
+
$borderColor: "BLACK_5",
|
81
|
+
isVisible: p,
|
82
|
+
children: /* @__PURE__ */ l(D, { $renderAs: "ab2", $color: "WHITE", $whiteSpace: "pre-line", children: b })
|
83
|
+
}
|
84
|
+
) })
|
85
|
+
]
|
86
|
+
}
|
87
|
+
);
|
88
|
+
}, K = y(S);
|
89
|
+
export {
|
90
|
+
K as default
|
91
|
+
};
|
92
|
+
//# sourceMappingURL=animated-avatar-message.js.map
|
@@ -0,0 +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 <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\" $whiteSpace=\"pre-line\">\n {displayMessage}\n </Styled.AnimatedText>\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","Styled.AnimatedText","animatedAvatarMessage","memo"],"mappings":";;;;;;;AAoBA,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;AACF,MAAM;AACE,QAAAC,IAAeC,EAAmC,IAAI,GACtDC,IAAaD,EAA6C,IAAI,GAC9D,CAACE,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxD,CAACC,GAA8BC,CAA+B,IAClEF,EAASP,CAAqB;AAEhC,EAAAU,EAAU,MACD,MAAM;AACX,IAAIN,EAAW,WACb,aAAaA,EAAW,OAAO;AAAA,EACjC,GAED,CAAE,CAAA,GAELM,EAAU,MAAM;AACd,IAAAD,EAAgCT,CAAqB;AAAA,EAAA,GACpD,CAACA,CAAqB,CAAC,GAE1BU,EAAU,MAAM;AACd,IAAAJ,EAAoB,EAAI,GACxBR,EAAc,EAAI;AAAA,EAAA,GACjB,CAACF,GAASE,CAAa,CAAC;AAErB,QAAAa,IAAqBC,EAAY,MAAM;;AAC3C,KAAAC,IAAAX,EAAa,YAAb,QAAAW,EAAsB,aAAaC,EAAmB,SAAS;AAC/D,UAAMC,IAAa,MAAM;;AACV,OAAAF,IAAAX,EAAA,YAAA,QAAAW,EAAS,oBAAoB,YAAYE,IACtDT,EAAoB,EAAI,GACxBR,EAAc,EAAI,IAElBkB,IAAAd,EAAa,YAAb,QAAAc,EAAsB,aAAaF,EAAmB,OAAO;AAAA,IAAI;AAGtD,KAAAE,IAAAd,EAAA,YAAA,QAAAc,EAAS,iBAAiB,YAAYD;AAAA,EAAU,GAC5D,CAACjB,CAAa,CAAC;AAElB,EAAAmB;AAAA,IACEhB;AAAA,IACA,OAAO;AAAA,MACL,gBAAgB,MACd,IAAI,QAAc,CAAWiB,MAAA;AAC3B,QAAApB,EAAc,EAAK,GACRM,EAAA,UAAU,WAAW,MAAM;AACpC,UAAAE,EAAoB,EAAK,GACjBY;WACPC,CAAY;AAAA,MAAA,CAChB;AAAA,MAEH,wBAAwB,MACtB,IAAI,QAAc,CAAWD,MAAA;;AACd,SAAAL,IAAAX,EAAA,YAAA,QAAAW,EAAS,aAAad,GAAoB,KACnDF,KACFS,EAAoB,EAAK,GAEhBF,EAAA,UAAU,WAAW,MAAM;AACpC,UAAIP,KACFY,EAAgC,EAAI,GAEtCH,EAAoB,EAAI,GAChBY;WACPC,CAAY;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,IAEL,CAACpB,GAAoBF,GAAqBC,CAAa;AAAA,EAAA;AAGnD,QAAAsB,IAAiBC,EAAQ,MACtBb,KAAgCX,IAAsBA,IAAsBD,GAClF,CAACY,GAA8BX,GAAqBD,CAAO,CAAC;AAG7D,SAAA,gBAAA0B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,iBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAS,EAAA,QAAQ,IAAI,SAAS,IAC7B,UAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,KAAKC,EAAO;AAAA,YACZ,KAAKzB;AAAA,YACL,UAAUS;AAAA,YACV,UAAUjB;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,QACCW,KACC,gBAAAmB,EAACC,GAAS,EAAA,OAAO,GACf,UAAA,gBAAAD;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,cAAa;AAAA,YACb,WAAWvB;AAAA,YAEX,UAAA,gBAAAmB,EAACK,GAAA,EAAoB,WAAU,OAAM,QAAO,SAAQ,aAAY,YAC7D,UACHT,EAAA,CAAA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEeU,IAAAC,EAAKpC,CAAqB;"}
|
@@ -1,24 +1,29 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { memo as
|
3
|
-
import { useTheme as
|
4
|
-
import
|
5
|
-
import { EDeviceType as
|
6
|
-
import { Container as
|
7
|
-
const
|
8
|
-
|
9
|
-
|
1
|
+
import { jsxs as c, jsx as r } from "react/jsx-runtime";
|
2
|
+
import { memo as h } from "react";
|
3
|
+
import { useTheme as a } from "styled-components";
|
4
|
+
import s from "../../../ui/layout/flex-view.js";
|
5
|
+
import { EDeviceType as p } from "../../../ui/theme/constants.js";
|
6
|
+
import { Container as d, ContentWrapper as f } from "./auth-page-layout-styled.js";
|
7
|
+
const u = ({
|
8
|
+
leftBlock: i,
|
9
|
+
rightBlock: o,
|
10
|
+
isFullWidth: t,
|
11
|
+
rightBlockBg: m = "BLACK_2"
|
12
|
+
}) => {
|
13
|
+
const { device: n } = a(), e = n <= p.TABLET;
|
14
|
+
return /* @__PURE__ */ c(d, { $width: "100%", $height: "100%", $flexDirection: "row", children: [
|
10
15
|
/* @__PURE__ */ r(
|
11
|
-
|
16
|
+
f,
|
12
17
|
{
|
13
18
|
$width: t || e ? "100%" : "50%",
|
14
19
|
$background: "BLACK_1",
|
15
20
|
children: i
|
16
21
|
}
|
17
22
|
),
|
18
|
-
!e && o && !t && /* @__PURE__ */ r(
|
23
|
+
!e && o && !t && /* @__PURE__ */ r(s, { $width: "50%", $background: m, children: o })
|
19
24
|
] });
|
20
|
-
},
|
25
|
+
}, A = h(u);
|
21
26
|
export {
|
22
|
-
|
27
|
+
A as default
|
23
28
|
};
|
24
29
|
//# sourceMappingURL=auth-page-layout.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"auth-page-layout.js","sources":["../../../../../src/features/auth/comps/auth-page-layout/auth-page-layout.tsx"],"sourcesContent":["import type { IAuthPageLayoutProps } from './auth-page-layout-types';\n\nimport { memo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport * as Styled from './auth-page-layout-styled';\n\nconst AuthPageLayout: FC<IAuthPageLayoutProps> = ({
|
1
|
+
{"version":3,"file":"auth-page-layout.js","sources":["../../../../../src/features/auth/comps/auth-page-layout/auth-page-layout.tsx"],"sourcesContent":["import type { IAuthPageLayoutProps } from './auth-page-layout-types';\n\nimport { memo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport * as Styled from './auth-page-layout-styled';\n\nconst AuthPageLayout: FC<IAuthPageLayoutProps> = ({\n leftBlock,\n rightBlock,\n isFullWidth,\n rightBlockBg = 'BLACK_2',\n}) => {\n const { device } = useTheme();\n const isCompact = device <= EDeviceType.TABLET;\n const showRightBlock = !isCompact && rightBlock && !isFullWidth;\n\n return (\n <Styled.Container $width=\"100%\" $height=\"100%\" $flexDirection=\"row\">\n <Styled.ContentWrapper\n $width={isFullWidth || isCompact ? '100%' : '50%'}\n $background=\"BLACK_1\"\n >\n {leftBlock}\n </Styled.ContentWrapper>\n {showRightBlock && (\n <FlexView $width=\"50%\" $background={rightBlockBg}>\n {rightBlock}\n </FlexView>\n )}\n </Styled.Container>\n );\n};\n\nexport default memo(AuthPageLayout);\n"],"names":["AuthPageLayout","leftBlock","rightBlock","isFullWidth","rightBlockBg","device","useTheme","isCompact","EDeviceType","jsxs","Styled.Container","jsx","Styled.ContentWrapper","FlexView","authPageLayout","memo"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC;AAAA,EAChD,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY;AAItC,SAAA,gBAAAC,EAACC,GAAA,EAAiB,QAAO,QAAO,SAAQ,QAAO,gBAAe,OAC5D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,QAAQT,KAAeI,IAAY,SAAS;AAAA,QAC5C,aAAY;AAAA,QAEX,UAAAN;AAAA,MAAA;AAAA,IACH;AAAA,IATmB,CAACM,KAAaL,KAAc,CAACC,KAW7C,gBAAAQ,EAAAE,GAAA,EAAS,QAAO,OAAM,aAAaT,GACjC,UACHF,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeY,IAAAC,EAAKf,CAAc;"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import o from "styled-components";
|
2
|
+
import t from "../../../ui/layout/flex-view.js";
|
3
|
+
const r = o(t)`
|
4
|
+
overflow: hidden;
|
5
|
+
`, n = o(t)`
|
6
|
+
transition: width 0.3s ease-in-out;
|
7
|
+
`;
|
8
|
+
export {
|
9
|
+
r as Container,
|
10
|
+
n as Filler
|
11
|
+
};
|
12
|
+
//# sourceMappingURL=linear-progress-bar-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"linear-progress-bar-styled.js","sources":["../../../../../src/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Container = styled(FlexView)`\n overflow: hidden;\n`;\n\nexport const Filler = styled(FlexView)`\n transition: width 0.3s ease-in-out;\n`;\n"],"names":["Container","styled","FlexView","Filler"],"mappings":";;AAIa,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAASF,EAAOC,CAAQ;AAAA;AAAA;"}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
2
|
+
import { memo as s } from "react";
|
3
|
+
import { Container as m, Filler as h } from "./linear-progress-bar-styled.js";
|
4
|
+
const $ = ({
|
5
|
+
percentage: o,
|
6
|
+
height: t = 8,
|
7
|
+
backgroundColor: a = "WHITE_T_10",
|
8
|
+
fillColor: i = "YELLOW_4",
|
9
|
+
borderRadius: r = 0
|
10
|
+
}) => {
|
11
|
+
const n = Math.min(Math.max(o, 0), 100);
|
12
|
+
return /* @__PURE__ */ e(
|
13
|
+
m,
|
14
|
+
{
|
15
|
+
$width: "100%",
|
16
|
+
$height: t,
|
17
|
+
$borderRadius: r,
|
18
|
+
$background: a,
|
19
|
+
children: /* @__PURE__ */ e(
|
20
|
+
h,
|
21
|
+
{
|
22
|
+
$width: `${n}%`,
|
23
|
+
$background: i,
|
24
|
+
$height: "100%",
|
25
|
+
$borderRadius: r
|
26
|
+
}
|
27
|
+
)
|
28
|
+
}
|
29
|
+
);
|
30
|
+
}, f = s($);
|
31
|
+
export {
|
32
|
+
f as default
|
33
|
+
};
|
34
|
+
//# sourceMappingURL=linear-progress-bar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"linear-progress-bar.js","sources":["../../../../../src/features/auth/comps/linear-progress-bar/linear-progress-bar.tsx"],"sourcesContent":["import type { ILinearProgressBarProps } from './linear-progress-bar-props';\n\nimport { memo, type FC } from 'react';\n\nimport * as Styled from './linear-progress-bar-styled';\n\nconst LinearProgressBar: FC<ILinearProgressBarProps> = ({\n percentage,\n height = 8,\n backgroundColor = 'WHITE_T_10',\n fillColor = 'YELLOW_4',\n borderRadius = 0,\n}) => {\n const safePercentage = Math.min(Math.max(percentage, 0), 100);\n\n return (\n <Styled.Container\n $width=\"100%\"\n $height={height}\n $borderRadius={borderRadius}\n $background={backgroundColor}\n >\n <Styled.Filler\n $width={`${safePercentage}%`}\n $background={fillColor}\n $height=\"100%\"\n $borderRadius={borderRadius}\n />\n </Styled.Container>\n );\n};\n\nexport default memo(LinearProgressBar);\n"],"names":["LinearProgressBar","percentage","height","backgroundColor","fillColor","borderRadius","safePercentage","jsx","Styled.Container","Styled.Filler","linearProgressBar","memo"],"mappings":";;;AAMA,MAAMA,IAAiD,CAAC;AAAA,EACtD,YAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,iBAAAC,IAAkB;AAAA,EAClB,WAAAC,IAAY;AAAA,EACZ,cAAAC,IAAe;AACjB,MAAM;AACE,QAAAC,IAAiB,KAAK,IAAI,KAAK,IAAIL,GAAY,CAAC,GAAG,GAAG;AAG1D,SAAA,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,SAASN;AAAA,MACT,eAAeG;AAAA,MACf,aAAaF;AAAA,MAEb,UAAA,gBAAAI;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,QAAQ,GAAGH,CAAc;AAAA,UACzB,aAAaF;AAAA,UACb,SAAQ;AAAA,UACR,eAAeC;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeK,IAAAC,EAAKX,CAAiB;"}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import r, { css as e } from "styled-components";
|
2
|
+
import l from "../../../ui/layout/flex-view.js";
|
3
|
+
const n = r(l)``, c = r.input`
|
4
|
+
width: 56px;
|
5
|
+
height: 56px;
|
6
|
+
font-size: 24px;
|
7
|
+
text-align: center;
|
8
|
+
font-family: 'Athletics-Light';
|
9
|
+
border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
|
10
|
+
color: ${({ theme: o }) => o.colors.WHITE};
|
11
|
+
background-color: ${({ theme: o }) => o.colors.BLACK_3};
|
12
|
+
outline: none;
|
13
|
+
transition: all 0.3s ease;
|
14
|
+
${({ $hasError: o }) => o && e`
|
15
|
+
border-color: ${({ theme: t }) => t.colors.ORANGE_4};
|
16
|
+
`}
|
17
|
+
`;
|
18
|
+
export {
|
19
|
+
c as InputBox,
|
20
|
+
n as Wrapper
|
21
|
+
};
|
22
|
+
//# sourceMappingURL=otp-input-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"otp-input-styled.js","sources":["../../../../../src/features/auth/comps/otp-input/otp-input-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)``;\n\nexport const InputBox = styled.input<{ $hasError: boolean }>`\n width: 56px;\n height: 56px;\n font-size: 24px;\n text-align: center;\n font-family: 'Athletics-Light';\n border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n color: ${({ theme }) => theme.colors.WHITE};\n background-color: ${({ theme }) => theme.colors.BLACK_3};\n outline: none;\n transition: all 0.3s ease;\n ${({ $hasError }) =>\n $hasError &&\n css`\n border-color: ${({ theme }) => theme.colors.ORANGE_4};\n `}\n`;\n"],"names":["Wrapper","styled","FlexView","InputBox","theme","$hasError","css"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ,KAEzBC,IAAWF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMnB,CAAC,EAAE,OAAAG,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,WACnD,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,sBACtB,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,WAAAC,QACHA,KACAC;AAAA,sBACkB,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA,KACrD;AAAA;"}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import { jsxs as l, jsx as m } from "react/jsx-runtime";
|
2
|
+
import { memo as I, useRef as w, useCallback as p } from "react";
|
3
|
+
import { LOTTIE as y } from "../../../../assets/lottie/lottie.js";
|
4
|
+
import $ from "../../../ui/lottie-animation/lottie-animation.js";
|
5
|
+
import { Wrapper as g, InputBox as E } from "./otp-input-styled.js";
|
6
|
+
const T = ({
|
7
|
+
length: s = 4,
|
8
|
+
value: e,
|
9
|
+
onChange: c,
|
10
|
+
error: a,
|
11
|
+
isBusy: u = !1
|
12
|
+
}) => {
|
13
|
+
const n = w([]), i = p(
|
14
|
+
(o, r) => {
|
15
|
+
var f;
|
16
|
+
if (!/^\d?$/.test(r)) return;
|
17
|
+
const t = e.split("");
|
18
|
+
t[o] = r, c(t.join("")), r && o < s - 1 && ((f = n.current[o + 1]) == null || f.focus());
|
19
|
+
},
|
20
|
+
[s, c, e]
|
21
|
+
), h = p(
|
22
|
+
(o, r) => {
|
23
|
+
var t;
|
24
|
+
o.key === "Backspace" && !e[r] && r > 0 && ((t = n.current[r - 1]) == null || t.focus());
|
25
|
+
},
|
26
|
+
[e]
|
27
|
+
);
|
28
|
+
return /* @__PURE__ */ l(g, { $flexDirection: "row", $flexColumnGapX: 1, $alignItems: "center", children: [
|
29
|
+
Array.from({ length: s }).map((o, r) => /* @__PURE__ */ m(
|
30
|
+
E,
|
31
|
+
{
|
32
|
+
type: "text",
|
33
|
+
maxLength: 1,
|
34
|
+
value: e[r] || "",
|
35
|
+
onChange: (t) => i(r, t.target.value),
|
36
|
+
onFocus: (t) => t.target.select(),
|
37
|
+
onKeyDown: (t) => h(t, r),
|
38
|
+
$hasError: !!a,
|
39
|
+
ref: (t) => {
|
40
|
+
t && (n.current[r] = t);
|
41
|
+
}
|
42
|
+
},
|
43
|
+
r
|
44
|
+
)),
|
45
|
+
u && /* @__PURE__ */ m($, { src: y.SPINNER_WHITE, height: 24, width: 24 })
|
46
|
+
] });
|
47
|
+
}, R = I(T);
|
48
|
+
export {
|
49
|
+
R as default
|
50
|
+
};
|
51
|
+
//# sourceMappingURL=otp-input.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"otp-input.js","sources":["../../../../../src/features/auth/comps/otp-input/otp-input.tsx"],"sourcesContent":["import type { IOTPInputProps } from './otp-input-types';\n\nimport { useCallback, useRef, memo } from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as styled from './otp-input-styled';\n\nconst OTPInput: React.FC<IOTPInputProps> = ({\n length = 4,\n value,\n onChange,\n error,\n isBusy = false,\n}) => {\n const inputsRef = useRef<HTMLInputElement[]>([]);\n\n const handleChange = useCallback(\n (index: number, val: string) => {\n if (!/^\\d?$/.test(val)) return;\n\n const newValue = value.split('');\n\n newValue[index] = val;\n onChange(newValue.join(''));\n\n if (val && index < length - 1) {\n inputsRef.current[index + 1]?.focus();\n }\n },\n [length, onChange, value],\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n if (e.key === 'Backspace' && !value[index] && index > 0) {\n inputsRef.current[index - 1]?.focus();\n }\n },\n [value],\n );\n\n return (\n <styled.Wrapper $flexDirection=\"row\" $flexColumnGapX={1} $alignItems=\"center\">\n {Array.from({ length }).map((_, index) => (\n <styled.InputBox\n key={index}\n type=\"text\"\n maxLength={1}\n value={value[index] || ''}\n onChange={e => handleChange(index, e.target.value)}\n onFocus={e => e.target.select()}\n onKeyDown={e => handleKeyDown(e, index)}\n $hasError={!!error}\n ref={el => {\n if (el) inputsRef.current[index] = el;\n }}\n />\n ))}\n {isBusy && <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={24} width={24} />}\n </styled.Wrapper>\n );\n};\n\nexport default memo(OTPInput);\n"],"names":["OTPInput","length","value","onChange","error","isBusy","inputsRef","useRef","handleChange","useCallback","index","val","newValue","_a","handleKeyDown","e","jsxs","styled.Wrapper","_","jsx","styled.InputBox","el","LottieAnimation","LOTTIE","otpInput","memo"],"mappings":";;;;;AAQA,MAAMA,IAAqC,CAAC;AAAA,EAC1C,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AACX,MAAM;AACE,QAAAC,IAAYC,EAA2B,CAAA,CAAE,GAEzCC,IAAeC;AAAA,IACnB,CAACC,GAAeC,MAAgB;;AAC9B,UAAI,CAAC,QAAQ,KAAKA,CAAG,EAAG;AAElB,YAAAC,IAAWV,EAAM,MAAM,EAAE;AAE/B,MAAAU,EAASF,CAAK,IAAIC,GACTR,EAAAS,EAAS,KAAK,EAAE,CAAC,GAEtBD,KAAOD,IAAQT,IAAS,OAC1BY,IAAAP,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAG,EAA8B;AAAA,IAElC;AAAA,IACA,CAACZ,GAAQE,GAAUD,CAAK;AAAA,EAAA,GAGpBY,IAAgBL;AAAA,IACpB,CAACM,GAA0CL,MAAkB;;AACvD,MAAAK,EAAE,QAAQ,eAAe,CAACb,EAAMQ,CAAK,KAAKA,IAAQ,OACpDG,IAAAP,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAG,EAA8B;AAAA,IAElC;AAAA,IACA,CAACX,CAAK;AAAA,EAAA;AAIN,SAAA,gBAAAc,EAACC,GAAA,EAAe,gBAAe,OAAM,iBAAiB,GAAG,aAAY,UAClE,UAAA;AAAA,IAAM,MAAA,KAAK,EAAE,QAAAhB,EAAQ,CAAA,EAAE,IAAI,CAACiB,GAAGR,MAC9B,gBAAAS;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAOlB,EAAMQ,CAAK,KAAK;AAAA,QACvB,UAAU,CAAKK,MAAAP,EAAaE,GAAOK,EAAE,OAAO,KAAK;AAAA,QACjD,SAAS,CAAAA,MAAKA,EAAE,OAAO,OAAO;AAAA,QAC9B,WAAW,CAAAA,MAAKD,EAAcC,GAAGL,CAAK;AAAA,QACtC,WAAW,CAAC,CAACN;AAAA,QACb,KAAK,CAAMiB,MAAA;AACT,UAAIA,MAAIf,EAAU,QAAQI,CAAK,IAAIW;AAAA,QACrC;AAAA,MAAA;AAAA,MAVKX;AAAA,IAAA,CAYR;AAAA,IACAL,uBAAWiB,GAAgB,EAAA,KAAKC,EAAO,eAAe,QAAQ,IAAI,OAAO,GAAI,CAAA;AAAA,EAChF,EAAA,CAAA;AAEJ,GAEeC,IAAAC,EAAKzB,CAAQ;"}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import n, { css as a } from "styled-components";
|
2
|
+
import e from "../../../ui/layout/flex-view.js";
|
3
|
+
import $ from "../../../ui/text/text.js";
|
4
|
+
const T = n.button`
|
5
|
+
${({ selected: o, disabled: r, width: i, height: l, borderColor: s, theme: t }) => {
|
6
|
+
const c = r ? t.colors.WHITE_T_10 : o ? t.colors.WHITE_1 : t.colors.BLACK_1, p = r ? t.colors.WHITE_T_15 : s;
|
7
|
+
return a`
|
8
|
+
position: relative;
|
9
|
+
display: inline-flex;
|
10
|
+
align-items: center;
|
11
|
+
justify-content: center;
|
12
|
+
cursor: ${r ? "not-allowed" : "pointer"};
|
13
|
+
transition: all 0.3s ease;
|
14
|
+
padding: 7.5px 16px;
|
15
|
+
border-radius: 40px;
|
16
|
+
border: 1px solid ${p};
|
17
|
+
width: ${i ? `${i}px` : "auto"};
|
18
|
+
height: ${l ? `${l}px` : "auto"};
|
19
|
+
background-color: ${c};
|
20
|
+
&:hover {
|
21
|
+
background-color: ${!o && !r ? t.colors.WHITE_T_10 : void 0};
|
22
|
+
}
|
23
|
+
`;
|
24
|
+
}}
|
25
|
+
`, d = n(e)`
|
26
|
+
visibility: ${({ $showLottie: o }) => o ? "visible" : "hidden"};
|
27
|
+
`, f = n($)`
|
28
|
+
transition: all 0.3s ease-in-out;
|
29
|
+
position: relative;
|
30
|
+
|
31
|
+
${({ shouldOffsetLabel: o }) => `
|
32
|
+
left: ${o ? "0" : "-10px"};
|
33
|
+
`};
|
34
|
+
|
35
|
+
${({ selected: o, disabled: r, theme: i, textColor: l }) => `
|
36
|
+
color: ${r ? i.colors.WHITE_T_38 : o ? i.colors.BLACK_1 : l};
|
37
|
+
`};
|
38
|
+
`;
|
39
|
+
export {
|
40
|
+
d as IconWrapper,
|
41
|
+
f as Label,
|
42
|
+
T as Wrapper
|
43
|
+
};
|
44
|
+
//# sourceMappingURL=pill-button-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n selected: boolean;\n disabled: boolean;\n width?: number;\n height?: number;\n borderColor?: string;\n}>`\n ${({ selected, disabled, width, height, borderColor, theme }) => {\n const defaultBgColor = disabled\n ? theme.colors.WHITE_T_10\n : selected\n ? theme.colors.WHITE_1\n : theme.colors.BLACK_1;\n\n const borderColorVal = disabled ? theme.colors.WHITE_T_15 : borderColor;\n\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n transition: all 0.3s ease;\n padding: 7.5px 16px;\n border-radius: 40px;\n border: 1px solid ${borderColorVal};\n width: ${width ? `${width}px` : 'auto'};\n height: ${height ? `${height}px` : 'auto'};\n background-color: ${defaultBgColor};\n &:hover {\n background-color: ${!selected && !disabled ? theme.colors.WHITE_T_10 : undefined};\n }\n `;\n }}\n`;\n\nexport const IconWrapper = styled(FlexView)<{\n $showLottie: boolean;\n}>`\n visibility: ${({ $showLottie }) => ($showLottie ? 'visible' : 'hidden')};\n`;\n\nexport const Label = styled(Text)<{\n selected: boolean;\n disabled: boolean;\n shouldOffsetLabel: boolean;\n textColor: string;\n}>`\n transition: all 0.3s ease-in-out;\n position: relative;\n\n ${({ shouldOffsetLabel }) => `\n left: ${shouldOffsetLabel ? '0' : '-10px'};\n `};\n\n ${({ selected, disabled, theme, textColor }) => `\n color: ${disabled ? theme.colors.WHITE_T_38 : selected ? theme.colors.BLACK_1 : textColor};\n `};\n`;\n"],"names":["Wrapper","styled","selected","disabled","width","height","borderColor","theme","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","shouldOffsetLabel","textColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAO1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,QAAY;AACzD,QAAAC,IAAiBL,IACnBI,EAAM,OAAO,aACbL,IACEK,EAAM,OAAO,UACbA,EAAM,OAAO,SAEbE,IAAiBN,IAAWI,EAAM,OAAO,aAAaD;AAErD,SAAAI;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKP,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BM,CAAc;AAAA,eACzBL,IAAQ,GAAGA,CAAK,OAAO,MAAM;AAAA,gBAC5BC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA,0BACrBG,CAAc;AAAA;AAAA,4BAEZ,CAACN,KAAY,CAACC,IAAWI,EAAM,OAAO,aAAa,MAAS;AAAA;AAAA;AAGtF,CAAC;AAAA,GAGUI,IAAcV,EAAOW,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQb,EAAOc,CAAI;AAAA;AAAA;AAAA;AAAA,IAS5B,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAd,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAU,EAAgB,MAAA;AAAA,aACrCd,IAAWI,EAAM,OAAO,aAAaL,IAAWK,EAAM,OAAO,UAAUU,CAAS;AAAA,GAC1F;AAAA;"}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import { jsx as o, jsxs as H } from "react/jsx-runtime";
|
2
|
+
import { memo as M, useState as x, useCallback as l, useEffect as _ } from "react";
|
3
|
+
import { useTheme as j } from "styled-components";
|
4
|
+
import y from "../../../ui/arrow-tooltip/arrow-tooltip.js";
|
5
|
+
import B from "../../../ui/layout/flex-view.js";
|
6
|
+
import O from "../../../ui/lottie-animation/lottie-animation.js";
|
7
|
+
import { Wrapper as P, IconWrapper as R, Label as X } from "./pill-button-styled.js";
|
8
|
+
const k = {
|
9
|
+
autoplay: !0,
|
10
|
+
loop: !0,
|
11
|
+
renderer: "canvas"
|
12
|
+
}, S = ({
|
13
|
+
id: i,
|
14
|
+
label: d,
|
15
|
+
selected: t = !1,
|
16
|
+
disabled: e = !1,
|
17
|
+
animatedLabel: u = "",
|
18
|
+
icon: r,
|
19
|
+
onClick: a,
|
20
|
+
tooltip: c,
|
21
|
+
width: g
|
22
|
+
}) => {
|
23
|
+
const [v, h] = x(!1), [n, A] = x(!1), { colors: f } = j(), s = !!u, $ = l(() => {
|
24
|
+
a(i);
|
25
|
+
}, [i, a]);
|
26
|
+
_(() => {
|
27
|
+
if (!s || e) return;
|
28
|
+
const T = setInterval(() => {
|
29
|
+
A((W) => !W);
|
30
|
+
}, 1e3);
|
31
|
+
return () => clearInterval(T);
|
32
|
+
}, [e, s]);
|
33
|
+
const w = l(() => h(!0), []), C = l(() => h(!1), []), m = !!r && !e && (s || t || v), E = f[n ? "YELLOW_4" : "WHITE_1"], I = f[n && !t ? "YELLOW_4" : "WHITE_1"], p = n ? u : d, b = n ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2", L = /* @__PURE__ */ o(
|
34
|
+
P,
|
35
|
+
{
|
36
|
+
selected: t,
|
37
|
+
disabled: e,
|
38
|
+
onClick: $,
|
39
|
+
onMouseEnter: w,
|
40
|
+
onMouseLeave: C,
|
41
|
+
height: 36,
|
42
|
+
width: Number(g),
|
43
|
+
borderColor: E,
|
44
|
+
children: /* @__PURE__ */ H(
|
45
|
+
B,
|
46
|
+
{
|
47
|
+
$flexDirection: "row",
|
48
|
+
$alignItems: "center",
|
49
|
+
$justifyContent: "center",
|
50
|
+
$flexColumnGapX: 0.25,
|
51
|
+
children: [
|
52
|
+
r && /* @__PURE__ */ o(R, { $widthX: 1, $heightX: 1, $showLottie: m, children: /* @__PURE__ */ o(O, { src: r, settings: k }) }),
|
53
|
+
/* @__PURE__ */ o(
|
54
|
+
X,
|
55
|
+
{
|
56
|
+
shouldOffsetLabel: m || !r,
|
57
|
+
selected: t,
|
58
|
+
disabled: e,
|
59
|
+
$renderAs: b,
|
60
|
+
textColor: I,
|
61
|
+
children: p
|
62
|
+
},
|
63
|
+
p
|
64
|
+
)
|
65
|
+
]
|
66
|
+
}
|
67
|
+
)
|
68
|
+
}
|
69
|
+
);
|
70
|
+
return e && c ? /* @__PURE__ */ o(y, { renderAs: "primary", tooltipItem: c, position: "top", children: L }) : L;
|
71
|
+
}, J = M(S);
|
72
|
+
export {
|
73
|
+
J as default
|
74
|
+
};
|
75
|
+
//# sourceMappingURL=pill-button.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"pill-button.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button.tsx"],"sourcesContent":["import type { IPillButtonProps } from './pill-button-types';\n\nimport { useCallback, useEffect, useState, type FC, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './pill-button-styled';\n\nconst lottieSettings = {\n autoplay: true,\n loop: true,\n renderer: 'canvas',\n};\n\nconst PillButton: FC<IPillButtonProps> = ({\n id,\n label,\n selected = false,\n disabled = false,\n animatedLabel = '',\n icon,\n onClick,\n tooltip,\n width,\n}) => {\n const [isHovered, setHovered] = useState(false);\n const [highlightPhase, setHighlightPhase] = useState(false);\n const { colors } = useTheme();\n const shouldAnimate = !!animatedLabel;\n\n const handleClick = useCallback(() => {\n onClick(id);\n }, [id, onClick]);\n\n useEffect(() => {\n if (!shouldAnimate || disabled) return;\n\n const interval = setInterval(() => {\n setHighlightPhase(prev => !prev);\n }, 1000);\n\n return () => clearInterval(interval);\n }, [disabled, shouldAnimate]);\n\n const handleMouseEnter = useCallback(() => setHovered(true), []);\n const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n const showLottie = !!icon && !disabled && (shouldAnimate || selected || isHovered);\n\n const borderColor = colors[highlightPhase ? 'YELLOW_4' : 'WHITE_1'];\n const textColor = colors[highlightPhase && !selected ? 'YELLOW_4' : 'WHITE_1'];\n const currentLabel = highlightPhase ? animatedLabel : label;\n const defaultTextRenderAs = selected ? 'ub2-bold' : 'ub2';\n const textRenderAs = highlightPhase ? (selected ? 'ub3-bold' : 'ub3') : defaultTextRenderAs;\n\n const ButtonContent = (\n <Styled.Wrapper\n selected={selected}\n disabled={disabled}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n height={36}\n width={Number(width)}\n borderColor={borderColor}\n >\n <FlexView\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $flexColumnGapX={0.25}\n >\n {icon && (\n <Styled.IconWrapper $widthX={1} $heightX={1} $showLottie={showLottie}>\n <LottieAnimation src={icon} settings={lottieSettings} />\n </Styled.IconWrapper>\n )}\n <Styled.Label\n key={currentLabel}\n shouldOffsetLabel={showLottie || !icon}\n selected={selected}\n disabled={disabled}\n $renderAs={textRenderAs}\n textColor={textColor}\n >\n {currentLabel}\n </Styled.Label>\n </FlexView>\n </Styled.Wrapper>\n );\n\n return disabled && tooltip ? (\n <ArrowTooltip renderAs=\"primary\" tooltipItem={tooltip} position=\"top\">\n {ButtonContent}\n </ArrowTooltip>\n ) : (\n ButtonContent\n );\n};\n\nexport default memo(PillButton);\n"],"names":["lottieSettings","PillButton","id","label","selected","disabled","animatedLabel","icon","onClick","tooltip","width","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","colors","useTheme","shouldAnimate","handleClick","useCallback","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","currentLabel","textRenderAs","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","pillButton","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAiB;AAAA,EACrB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmC,CAAC;AAAA,EACxC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAU,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,EAAE,QAAAG,MAAWC,KACbC,IAAgB,CAAC,CAACZ,GAElBa,IAAcC,EAAY,MAAM;AACpC,IAAAZ,EAAQN,CAAE;AAAA,EAAA,GACT,CAACA,GAAIM,CAAO,CAAC;AAEhB,EAAAa,EAAU,MAAM;AACV,QAAA,CAACH,KAAiBb,EAAU;AAE1B,UAAAiB,IAAW,YAAY,MAAM;AACf,MAAAP,EAAA,CAAAQ,MAAQ,CAACA,CAAI;AAAA,OAC9B,GAAI;AAEA,WAAA,MAAM,cAAcD,CAAQ;AAAA,EAAA,GAClC,CAACjB,GAAUa,CAAa,CAAC;AAE5B,QAAMM,IAAmBJ,EAAY,MAAMR,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDa,IAAmBL,EAAY,MAAMR,EAAW,EAAK,GAAG,CAAA,CAAE,GAE1Dc,IAAa,CAAC,CAACnB,KAAQ,CAACF,MAAaa,KAAiBd,KAAYO,IAElEgB,IAAcX,EAAOF,IAAiB,aAAa,SAAS,GAC5Dc,IAAYZ,EAAOF,KAAkB,CAACV,IAAW,aAAa,SAAS,GACvEyB,IAAef,IAAiBR,IAAgBH,GAEhD2B,IAAehB,IAAkBV,IAAW,aAAa,QADnCA,IAAW,aAAa,OAG9C2B,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAA7B;AAAA,MACA,UAAAC;AAAA,MACA,SAASc;AAAA,MACT,cAAcK;AAAA,MACd,cAAcC;AAAA,MACd,QAAQ;AAAA,MACR,OAAO,OAAOf,CAAK;AAAA,MACnB,aAAAiB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,iBAAiB;AAAA,UAEhB,UAAA;AAAA,YAAA5B,uBACE6B,GAAA,EAAmB,SAAS,GAAG,UAAU,GAAG,aAAaV,GACxD,4BAACW,GAAgB,EAAA,KAAK9B,GAAM,UAAUP,EAAgB,CAAA,GACxD;AAAA,YAEF,gBAAAgC;AAAA,cAACM;AAAAA,cAAA;AAAA,gBAEC,mBAAmBZ,KAAc,CAACnB;AAAA,gBAClC,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,WAAWyB;AAAA,gBACX,WAAAF;AAAA,gBAEC,UAAAC;AAAA,cAAA;AAAA,cAPIA;AAAA,YAQP;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIG,SAAAxB,KAAYI,IACjB,gBAAAuB,EAACO,GAAa,EAAA,UAAS,WAAU,aAAa9B,GAAS,UAAS,OAC7D,UAAAsB,EAAA,CACH,IAEAA;AAEJ,GAEeS,IAAAC,EAAKxC,CAAU;"}
|
@@ -1,65 +1,72 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import { memo as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import { useResendTimer as
|
1
|
+
import { jsx as r, jsxs as n, Fragment as C } from "react/jsx-runtime";
|
2
|
+
import { memo as g, useCallback as f } from "react";
|
3
|
+
import w from "../../../ui/buttons/button/button.js";
|
4
|
+
import $ from "../../../ui/buttons/text-button/text-button.js";
|
5
|
+
import m from "../../../ui/layout/flex-view.js";
|
6
|
+
import a from "../../../ui/text/text.js";
|
7
|
+
import { useResendTimer as A } from "./hooks/use-resend-timer.js";
|
8
8
|
const I = ({
|
9
|
-
onResendOTP:
|
10
|
-
onResendVoiceOTP:
|
11
|
-
timerSeconds:
|
12
|
-
showVoiceOTP:
|
13
|
-
disabled:
|
14
|
-
renderAs:
|
15
|
-
width:
|
9
|
+
onResendOTP: l,
|
10
|
+
onResendVoiceOTP: i,
|
11
|
+
timerSeconds: h = 15,
|
12
|
+
showVoiceOTP: p = !1,
|
13
|
+
disabled: o,
|
14
|
+
renderAs: x = "text",
|
15
|
+
width: k,
|
16
|
+
textButtonColor: s = "WHITE_T_60",
|
17
|
+
size: d = "small"
|
16
18
|
}) => {
|
17
|
-
const { canResend:
|
18
|
-
initialSeconds:
|
19
|
-
}),
|
20
|
-
r == null || r(), t();
|
21
|
-
}, [r, t]), b = a(() => {
|
19
|
+
const { canResend: c, resetTimer: t, timeLeft: u } = A({
|
20
|
+
initialSeconds: h
|
21
|
+
}), b = f(() => {
|
22
22
|
l == null || l(), t();
|
23
|
-
}, [l, t])
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
type: "submit",
|
30
|
-
label: o ? "Resend" : `Resend in ${s}`,
|
31
|
-
width: p,
|
32
|
-
onClick: d,
|
33
|
-
disabled: !o || m
|
34
|
-
}
|
35
|
-
) : /* @__PURE__ */ e(i, { children: o ? /* @__PURE__ */ n(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
|
36
|
-
/* @__PURE__ */ e(
|
37
|
-
u,
|
23
|
+
}, [l, t]), _ = f(() => {
|
24
|
+
i == null || i(), t();
|
25
|
+
}, [i, t]);
|
26
|
+
if (x === "submit")
|
27
|
+
return /* @__PURE__ */ r(
|
28
|
+
w,
|
38
29
|
{
|
39
|
-
|
30
|
+
size: d,
|
31
|
+
renderAs: "secondary-dark",
|
32
|
+
type: "submit",
|
33
|
+
label: c ? "Resend" : `Resend in ${u}`,
|
34
|
+
width: k,
|
35
|
+
onClick: b,
|
36
|
+
disabled: !c || o
|
37
|
+
}
|
38
|
+
);
|
39
|
+
const e = d === "xsmall";
|
40
|
+
return /* @__PURE__ */ r(m, { children: c ? /* @__PURE__ */ n(m, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
|
41
|
+
/* @__PURE__ */ r(
|
42
|
+
$,
|
43
|
+
{
|
44
|
+
disabled: o,
|
40
45
|
label: "Resend",
|
41
|
-
|
42
|
-
|
46
|
+
size: e ? "small" : "regular",
|
47
|
+
color: s,
|
48
|
+
onClick: b
|
43
49
|
}
|
44
50
|
),
|
45
|
-
|
46
|
-
/* @__PURE__ */
|
47
|
-
/* @__PURE__ */
|
48
|
-
|
51
|
+
p && /* @__PURE__ */ n(C, { children: [
|
52
|
+
/* @__PURE__ */ r(a, { $renderAs: e ? "ub3" : "ub2", $color: s, children: "or" }),
|
53
|
+
/* @__PURE__ */ r(m, { $width: 116, children: /* @__PURE__ */ r(
|
54
|
+
$,
|
49
55
|
{
|
50
56
|
label: "Get code via call",
|
51
|
-
|
52
|
-
|
57
|
+
size: e ? "small" : "regular",
|
58
|
+
color: s,
|
59
|
+
onClick: _
|
53
60
|
}
|
54
61
|
) })
|
55
62
|
] })
|
56
|
-
] }) : /* @__PURE__ */
|
63
|
+
] }) : /* @__PURE__ */ r(m, { $width: 105, children: /* @__PURE__ */ n(a, { $renderAs: e ? "ub3" : "ub2", $color: "WHITE_T_60", children: [
|
57
64
|
"Resend in",
|
58
65
|
" ",
|
59
|
-
/* @__PURE__ */
|
66
|
+
/* @__PURE__ */ r(a, { $renderAs: e ? "ub3-bold" : "ub2-bold", $inline: !0, $color: "WHITE_T_60", children: u })
|
60
67
|
] }) }) });
|
61
|
-
},
|
68
|
+
}, F = g(I);
|
62
69
|
export {
|
63
|
-
|
70
|
+
F as default
|
64
71
|
};
|
65
72
|
//# sourceMappingURL=resend-otp.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"resend-otp.js","sources":["../../../../../src/features/auth/comps/resend-otp/resend-otp.tsx"],"sourcesContent":["import type { IOTPResendProps } from './resend-otp-types';\n\nimport { useCallback, memo } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useResendTimer } from './hooks/use-resend-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n onResendOTP,\n onResendVoiceOTP,\n timerSeconds = 15,\n showVoiceOTP = false,\n disabled,\n renderAs = 'text',\n width,\n}) => {\n const { canResend, resetTimer, timeLeft } = useResendTimer({\n initialSeconds: timerSeconds,\n });\n\n const handleResendClick = useCallback(() => {\n onResendOTP?.();\n resetTimer();\n }, [onResendOTP, resetTimer]);\n\n const handleVoiceResendClick = useCallback(() => {\n onResendVoiceOTP?.();\n resetTimer();\n }, [onResendVoiceOTP, resetTimer]);\n\n if (renderAs === 'submit') {\n return (\n <Button\n size
|
1
|
+
{"version":3,"file":"resend-otp.js","sources":["../../../../../src/features/auth/comps/resend-otp/resend-otp.tsx"],"sourcesContent":["import type { IOTPResendProps } from './resend-otp-types';\n\nimport { useCallback, memo } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useResendTimer } from './hooks/use-resend-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n onResendOTP,\n onResendVoiceOTP,\n timerSeconds = 15,\n showVoiceOTP = false,\n disabled,\n renderAs = 'text',\n width,\n textButtonColor = 'WHITE_T_60',\n size = 'small',\n}) => {\n const { canResend, resetTimer, timeLeft } = useResendTimer({\n initialSeconds: timerSeconds,\n });\n\n const handleResendClick = useCallback(() => {\n onResendOTP?.();\n resetTimer();\n }, [onResendOTP, resetTimer]);\n\n const handleVoiceResendClick = useCallback(() => {\n onResendVoiceOTP?.();\n resetTimer();\n }, [onResendVoiceOTP, resetTimer]);\n\n if (renderAs === 'submit') {\n return (\n <Button\n size={size}\n renderAs=\"secondary-dark\"\n type=\"submit\"\n label={canResend ? 'Resend' : `Resend in ${timeLeft}`}\n width={width}\n onClick={handleResendClick}\n disabled={!canResend || disabled}\n />\n );\n }\n\n const isXSmallSize = size === 'xsmall';\n\n return (\n <FlexView>\n {!canResend ? (\n <FlexView $width={105}>\n <Text $renderAs={isXSmallSize ? 'ub3' : 'ub2'} $color=\"WHITE_T_60\">\n Resend in{' '}\n <Text $renderAs={isXSmallSize ? 'ub3-bold' : 'ub2-bold'} $inline $color=\"WHITE_T_60\">\n {timeLeft}\n </Text>\n </Text>\n </FlexView>\n ) : (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n <TextButton\n disabled={disabled}\n label=\"Resend\"\n size={isXSmallSize ? 'small' : 'regular'}\n color={textButtonColor}\n onClick={handleResendClick}\n />\n {showVoiceOTP && (\n <>\n <Text $renderAs={isXSmallSize ? 'ub3' : 'ub2'} $color={textButtonColor}>\n or\n </Text>\n <FlexView $width={116}>\n <TextButton\n label=\"Get code via call\"\n size={isXSmallSize ? 'small' : 'regular'}\n color={textButtonColor}\n onClick={handleVoiceResendClick}\n />\n </FlexView>\n </>\n )}\n </FlexView>\n )}\n </FlexView>\n );\n};\n\nexport default memo(ResendOTP);\n"],"names":["ResendOTP","onResendOTP","onResendVoiceOTP","timerSeconds","showVoiceOTP","disabled","renderAs","width","textButtonColor","size","canResend","resetTimer","timeLeft","useResendTimer","handleResendClick","useCallback","handleVoiceResendClick","jsx","Button","isXSmallSize","FlexView","jsxs","TextButton","Fragment","Text","ResendOtp","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC,IAAO;AACT,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,UAAAC,EAAA,IAAaC,EAAe;AAAA,IACzD,gBAAgBV;AAAA,EAAA,CACjB,GAEKW,IAAoBC,EAAY,MAAM;AAC5B,IAAAd,KAAA,QAAAA,KACHU;EAAA,GACV,CAACV,GAAaU,CAAU,CAAC,GAEtBK,IAAyBD,EAAY,MAAM;AAC5B,IAAAb,KAAA,QAAAA,KACRS;EAAA,GACV,CAACT,GAAkBS,CAAU,CAAC;AAEjC,MAAIL,MAAa;AAEb,WAAA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAT;AAAA,QACA,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAOC,IAAY,WAAW,aAAaE,CAAQ;AAAA,QACnD,OAAAL;AAAA,QACA,SAASO;AAAA,QACT,UAAU,CAACJ,KAAaL;AAAA,MAAA;AAAA,IAAA;AAK9B,QAAMc,IAAeV,MAAS;AAE9B,SACG,gBAAAQ,EAAAG,GAAA,EACE,UAACV,IAUC,gBAAAW,EAAAD,GAAA,EAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,UAAAjB;AAAA,QACA,OAAM;AAAA,QACN,MAAMc,IAAe,UAAU;AAAA,QAC/B,OAAOX;AAAA,QACP,SAASM;AAAA,MAAA;AAAA,IACX;AAAA,IACCV,KAEG,gBAAAiB,EAAAE,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAN,EAACO,KAAK,WAAWL,IAAe,QAAQ,OAAO,QAAQX,GAAiB,UAExE,KAAA,CAAA;AAAA,MACA,gBAAAS,EAACG,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAMH,IAAe,UAAU;AAAA,UAC/B,OAAOX;AAAA,UACP,SAASQ;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,sBAhCCI,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAC,EAACG,KAAK,WAAWL,IAAe,QAAQ,OAAO,QAAO,cAAa,UAAA;AAAA,IAAA;AAAA,IACvD;AAAA,IACV,gBAAAF,EAACO,GAAK,EAAA,WAAWL,IAAe,aAAa,YAAY,SAAO,IAAC,QAAO,cACrE,UACHP,EAAA,CAAA;AAAA,EACF,EAAA,CAAA,EACF,CAAA,EA2BJ,CAAA;AAEJ,GAEea,IAAAC,EAAK1B,CAAS;"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import e from "styled-components";
|
2
|
+
import t from "../../../ui/layout/flex-view.js";
|
3
|
+
const s = e(t)`
|
4
|
+
${({ selected: r, theme: o }) => `
|
5
|
+
cursor: pointer;
|
6
|
+
transition: all 0.3s ease;
|
7
|
+
border-width: 2px;
|
8
|
+
|
9
|
+
&:hover {
|
10
|
+
background-color: ${r ? void 0 : o.colors.BLACK_5};
|
11
|
+
}
|
12
|
+
`}
|
13
|
+
`;
|
14
|
+
export {
|
15
|
+
s as Wrapper
|
16
|
+
};
|
17
|
+
//# sourceMappingURL=selectable-info-card-styled.js.map
|