@cuemath/leap 3.2.33-j7 → 3.2.33-j8
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/lottie/lottie.js +1 -0
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/auth/comps/pill-button/pill-button-styled.js +17 -17
- package/dist/features/auth/comps/pill-button/pill-button-styled.js.map +1 -1
- package/dist/features/auth/comps/pill-button/pill-button.js +35 -33
- package/dist/features/auth/comps/pill-button/pill-button.js.map +1 -1
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js +19 -23
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js.map +1 -1
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js +77 -74
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js.map +1 -1
- package/dist/features/auth/signup/custom-input-field/custom-input-field.js +55 -50
- package/dist/features/auth/signup/custom-input-field/custom-input-field.js.map +1 -1
- package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.js +47 -25
- package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.js.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/static/username-responsive.787b5515.json +1 -0
- package/package.json +1 -1
|
@@ -126,6 +126,7 @@ const t = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : "/", s = {
|
|
|
126
126
|
TOURNAMENT_RIPPLE: `${t}static/tournament-ripple.e5c239a5.json`,
|
|
127
127
|
TROPHY: `${t}static/trophy.a8ea85ef.json`,
|
|
128
128
|
USERNAME: `${t}static/username.9e034d51.json`,
|
|
129
|
+
USERNAME_RESPONSIVE: `${t}static/username-responsive.787b5515.json`,
|
|
129
130
|
VICTORY: `${t}static/victory.2ca41d92.json`,
|
|
130
131
|
VIDEO: `${t}static/video.b41451e2.json`
|
|
131
132
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lottie.js","sources":["../../../src/assets/lottie/lottie.ts"],"sourcesContent":["const PREFIX = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : '/';\n\nconst LOTTIE = {\n ACCURACY_METER: `${PREFIX}static/accuracy-meter.99585cba.json`,\n ACCURACY_NEEDLE: `${PREFIX}static/accuracy-needle.cd6e63ac.json`,\n ACTIVITY: `${PREFIX}static/activity.ca6afed5.json`,\n ADVANCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/advance-mode-segment-lottie.51ff6707.json`,\n ALL_DONE: `${PREFIX}static/all-done.98b10ca4.json`,\n ANIMATED_AVATAR: `${PREFIX}static/animated-avatar.c3a0fa98.json`,\n AVATAR_SELECTED: `${PREFIX}static/avatar-selected.860ee923.json`,\n BEGINNER1X: `${PREFIX}static/beginner1x.489908a7.json`,\n BRONZE_1: `${PREFIX}static/bronze-1.da4e4b5f.json`,\n BRONZE_2: `${PREFIX}static/bronze-2.97f9c639.json`,\n BRONZE_3: `${PREFIX}static/bronze-3.6a433ebd.json`,\n CALENDAR_HOUR_GLASS_ORANGE: `${PREFIX}static/calendar-hour-glass-orange.e99f8ffd.json`,\n CENT: `${PREFIX}static/cent.3a07ef13.json`,\n CHAPTER_COMPLETED: `${PREFIX}static/chapter-completed.1241399b.json`,\n CIRCULAR_LOADER: `${PREFIX}static/circular-loader.a5a1a0a6.json`,\n CLAP: `${PREFIX}static/clap.aa0b824b.json`,\n CLOCK_30MIN: `${PREFIX}static/clock-30min.eae818b8.json`,\n CLOCK_45MIN: `${PREFIX}static/clock-45min.df8adf51.json`,\n CLOCK_60MIN: `${PREFIX}static/clock-60min.2b48d875.json`,\n CLOCK_90MIN: `${PREFIX}static/clock-90min.3e557ed7.json`,\n COLOR_1: `${PREFIX}static/color-1.45101b9a.json`,\n COLOR_2: `${PREFIX}static/color-2.ccdc7d0a.json`,\n COLOR_3: `${PREFIX}static/color-3.5e8e1422.json`,\n COMPETITIVE_ARENA: `${PREFIX}static/competitive-arena.b9c40801.json`,\n DART: `${PREFIX}static/dart.60f73d0f.json`,\n DIAMOND: `${PREFIX}static/diamond.8c91431a.json`,\n DICE: `${PREFIX}static/dice.eb192df8.json`,\n DIFFICULT: `${PREFIX}static/difficult.6846c064.json`,\n DOB: `${PREFIX}static/dob.9ce3c15b.json`,\n DOING_GREAT: `${PREFIX}static/doing-great.5844aa66.json`,\n DOWNLOAD: `${PREFIX}static/download.475e7e15.json`,\n EASY: `${PREFIX}static/easy.68242ddd.json`,\n ELITE_CIRCLE: `${PREFIX}static/elite-circle.3df58972.json`,\n ERROR: `${PREFIX}static/error.cbe1ddde.json`,\n ERROR_LOTTIE: `${PREFIX}static/error-lottie.b3507a4b.json`,\n FAMILIAR1X: `${PREFIX}static/familiar1x.7c9c7f15.json`,\n FIFTEEN_MIN_CLOCK: `${PREFIX}static/fifteen-min-clock.0af4e303.json`,\n FIVE_MIN_CLOCK: `${PREFIX}static/five-min-clock.6be5cc41.json`,\n FLYING_DISK: `${PREFIX}static/flying-disk.c7f6ed39.json`,\n GIFT: `${PREFIX}static/gift.1067e0d5.json`,\n GOLD_1: `${PREFIX}static/gold-1.ab2489fe.json`,\n GOLD_2: `${PREFIX}static/gold-2.34045826.json`,\n GOLD_3: `${PREFIX}static/gold-3.d704698b.json`,\n GOLF: `${PREFIX}static/golf.55585049.json`,\n GRADE: `${PREFIX}static/grade.b3730524.json`,\n GRADUATION_CAP: `${PREFIX}static/graduation-cap.3be3340a.json`,\n HIGH_SCORE_CONFETTI: `${PREFIX}static/high-score-confetti.9cc15d0a.json`,\n HIGH_SCORE_TEXT: `${PREFIX}static/high-score-text.b7e35580.json`,\n INFINITE_BUTTON_BG: `${PREFIX}static/infinite-button-bg.5909225e.json`,\n INFINITE_BUTTON_SYMBOL: `${PREFIX}static/infinite-button-symbol.aa31350c.json`,\n KEEP_IT_UP: `${PREFIX}static/keep-it-up.95b07f7e.json`,\n KEY: `${PREFIX}static/key.d6846476.json`,\n LEARN: `${PREFIX}static/learn.71b13323.json`,\n LEVELUP_RINGS: `${PREFIX}static/levelup-rings.b1055283.json`,\n LEVEL_1_ALLSTAR: `${PREFIX}static/level-1-allstar.49d665c0.json`,\n LIGHTNING: `${PREFIX}static/lightning.f311bac7.json`,\n LIGHT_BULB: `${PREFIX}static/light-bulb.c6db0b23.json`,\n MAGICWAND: `${PREFIX}static/magicwand.75ac8f1b.json`,\n MAIL: `${PREFIX}static/mail.c30e8708.json`,\n MECHANICAL_ARM: `${PREFIX}static/mechanical-arm.7561628e.json`,\n MEDAL: `${PREFIX}static/medal.782dab23.json`,\n MEDIUM: `${PREFIX}static/medium.94c3829b.json`,\n MUSCLE: `${PREFIX}static/muscle.9bcfb8a7.json`,\n NUDGE_TAP: `${PREFIX}static/nudge-tap.0591aef4.json`,\n OTP: `${PREFIX}static/otp.a3029760.json`,\n PARENT_AVATAR: `${PREFIX}static/parent-avatar.772d53e0.json`,\n PARTY_BALL: `${PREFIX}static/party-ball.e19caed6.json`,\n PARTY_POPPER: `${PREFIX}static/party-popper.9f7992e8.json`,\n PENCIL: `${PREFIX}static/pencil.23df9da0.json`,\n PHONE_NUMBER: `${PREFIX}static/phone-number.0be312ea.json`,\n PLUS_SIGN: `${PREFIX}static/plus-sign.de6af957.json`,\n POINT100: `${PREFIX}static/point100.1df16f82.json`,\n POINT10: `${PREFIX}static/point10.7b5e536d.json`,\n POINT15: `${PREFIX}static/point15.fea00c32.json`,\n POINT1: `${PREFIX}static/point1.b53831de.json`,\n POINT20: `${PREFIX}static/point20.c88d776d.json`,\n POINT25: `${PREFIX}static/point25.a18c346a.json`,\n POINT2: `${PREFIX}static/point2.7cec6e24.json`,\n POINT30: `${PREFIX}static/point30.c5224b0b.json`,\n POINT35: `${PREFIX}static/point35.fad343dd.json`,\n POINT3: `${PREFIX}static/point3.f96fe7aa.json`,\n POINT40: `${PREFIX}static/point40.10a16f72.json`,\n POINT45: `${PREFIX}static/point45.2ad7561f.json`,\n POINT4: `${PREFIX}static/point4.fe04fb83.json`,\n POINT50: `${PREFIX}static/point50.5718cb3d.json`,\n POINT5: `${PREFIX}static/point5.da40ed1f.json`,\n POINT60: `${PREFIX}static/point60.17380d9f.json`,\n PRACTICE: `${PREFIX}static/practice.158dd488.json`,\n PROFICIENT1X: `${PREFIX}static/proficient1x.fa6e7b80.json`,\n PROJECT: `${PREFIX}static/project.eb665827.json`,\n PUZZLE: `${PREFIX}static/puzzle.b298c7e4.json`,\n PUZZLE_BLUE_LOTTIE: `${PREFIX}static/puzzle-blue-lottie.bf64ebc5.json`,\n PUZZLE_GREEN_LOTTIE: `${PREFIX}static/puzzle-green-lottie.1da90698.json`,\n PUZZLE_ORANGE_LOTTIE: `${PREFIX}static/puzzle-orange-lottie.0a105c42.json`,\n PUZZLE_PURPLE_LOTTIE: `${PREFIX}static/puzzle-purple-lottie.e70de110.json`,\n PUZZLE_YELLOW_LOTTIE: `${PREFIX}static/puzzle-yellow-lottie.275b5cf4.json`,\n RACING_CAR: `${PREFIX}static/racing-car.2cbf864e.json`,\n RANDOM_MODE_SEGMENT_LOTTIE: `${PREFIX}static/random-mode-segment-lottie.79cf1c07.json`,\n RECAP: `${PREFIX}static/recap.0dd2c1e2.json`,\n ROCKET: `${PREFIX}static/rocket.0a3ccab0.json`,\n SEQUENCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/sequence-mode-segment-lottie.11ac49e9.json`,\n SHOVEL: `${PREFIX}static/shovel.abeec04c.json`,\n SILVER_1: `${PREFIX}static/silver-1.0396328a.json`,\n SILVER_2: `${PREFIX}static/silver-2.bf50615f.json`,\n SILVER_3: `${PREFIX}static/silver-3.13d66b84.json`,\n SLEEPY_BOI: `${PREFIX}static/sleepy-boi.031a1165.json`,\n SLOT_MACHINE: `${PREFIX}static/slot-machine.ba8014dd.json`,\n SPINNER_WHITE: `${PREFIX}static/spinner-white.639e0d87.json`,\n SPLASH_SCREEN: `${PREFIX}static/splash-screen.bbf567ce.json`,\n STAR: `${PREFIX}static/star.b22e1309.json`,\n STUDENT_AVATAR: `${PREFIX}static/student-avatar.524226bd.json`,\n SUBJECTIVE: `${PREFIX}static/subjective.bc5f37fb.json`,\n SUPER: `${PREFIX}static/super.7fad19f6.json`,\n TABLE_MODE_REVEAL: `${PREFIX}static/table-mode-reveal.b44a82c3.json`,\n TABLE_MODE_STAR: `${PREFIX}static/table-mode-star.b8a1d762.json`,\n TABLE_SEGMENT_STAR: `${PREFIX}static/table-segment-star.78e851d6.json`,\n TARGET_ACHIEVED_TEXT: `${PREFIX}static/target-achieved-text.10db8475.json`,\n TEACHER_FOUND: `${PREFIX}static/teacher-found.0ba07d4a.json`,\n TEACHER_SEARCH: `${PREFIX}static/teacher-search.552c8ba2.json`,\n TEACHER_VALIDATION: `${PREFIX}static/teacher-validation.7577ecdc.json`,\n TEST: `${PREFIX}static/test.803d6036.json`,\n TOTAL_STREAK: `${PREFIX}static/total-streak.d5ce7669.json`,\n TOTAL_TIME: `${PREFIX}static/total-time.d979cbb9.json`,\n TOTAL_TIME_SPENT: `${PREFIX}static/total-time-spent.434005d3.json`,\n TOURNAMENT_RIPPLE: `${PREFIX}static/tournament-ripple.e5c239a5.json`,\n TROPHY: `${PREFIX}static/trophy.a8ea85ef.json`,\n USERNAME: `${PREFIX}static/username.9e034d51.json`,\n VICTORY: `${PREFIX}static/victory.2ca41d92.json`,\n VIDEO: `${PREFIX}static/video.b41451e2.json`,\n};\n\nexport { LOTTIE };\n"],"names":["PREFIX","LOTTIE"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lottie.js","sources":["../../../src/assets/lottie/lottie.ts"],"sourcesContent":["const PREFIX = window.VITE_PUBLIC_URL ? window.VITE_PUBLIC_URL : '/';\n\nconst LOTTIE = {\n ACCURACY_METER: `${PREFIX}static/accuracy-meter.99585cba.json`,\n ACCURACY_NEEDLE: `${PREFIX}static/accuracy-needle.cd6e63ac.json`,\n ACTIVITY: `${PREFIX}static/activity.ca6afed5.json`,\n ADVANCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/advance-mode-segment-lottie.51ff6707.json`,\n ALL_DONE: `${PREFIX}static/all-done.98b10ca4.json`,\n ANIMATED_AVATAR: `${PREFIX}static/animated-avatar.c3a0fa98.json`,\n AVATAR_SELECTED: `${PREFIX}static/avatar-selected.860ee923.json`,\n BEGINNER1X: `${PREFIX}static/beginner1x.489908a7.json`,\n BRONZE_1: `${PREFIX}static/bronze-1.da4e4b5f.json`,\n BRONZE_2: `${PREFIX}static/bronze-2.97f9c639.json`,\n BRONZE_3: `${PREFIX}static/bronze-3.6a433ebd.json`,\n CALENDAR_HOUR_GLASS_ORANGE: `${PREFIX}static/calendar-hour-glass-orange.e99f8ffd.json`,\n CENT: `${PREFIX}static/cent.3a07ef13.json`,\n CHAPTER_COMPLETED: `${PREFIX}static/chapter-completed.1241399b.json`,\n CIRCULAR_LOADER: `${PREFIX}static/circular-loader.a5a1a0a6.json`,\n CLAP: `${PREFIX}static/clap.aa0b824b.json`,\n CLOCK_30MIN: `${PREFIX}static/clock-30min.eae818b8.json`,\n CLOCK_45MIN: `${PREFIX}static/clock-45min.df8adf51.json`,\n CLOCK_60MIN: `${PREFIX}static/clock-60min.2b48d875.json`,\n CLOCK_90MIN: `${PREFIX}static/clock-90min.3e557ed7.json`,\n COLOR_1: `${PREFIX}static/color-1.45101b9a.json`,\n COLOR_2: `${PREFIX}static/color-2.ccdc7d0a.json`,\n COLOR_3: `${PREFIX}static/color-3.5e8e1422.json`,\n COMPETITIVE_ARENA: `${PREFIX}static/competitive-arena.b9c40801.json`,\n DART: `${PREFIX}static/dart.60f73d0f.json`,\n DIAMOND: `${PREFIX}static/diamond.8c91431a.json`,\n DICE: `${PREFIX}static/dice.eb192df8.json`,\n DIFFICULT: `${PREFIX}static/difficult.6846c064.json`,\n DOB: `${PREFIX}static/dob.9ce3c15b.json`,\n DOING_GREAT: `${PREFIX}static/doing-great.5844aa66.json`,\n DOWNLOAD: `${PREFIX}static/download.475e7e15.json`,\n EASY: `${PREFIX}static/easy.68242ddd.json`,\n ELITE_CIRCLE: `${PREFIX}static/elite-circle.3df58972.json`,\n ERROR: `${PREFIX}static/error.cbe1ddde.json`,\n ERROR_LOTTIE: `${PREFIX}static/error-lottie.b3507a4b.json`,\n FAMILIAR1X: `${PREFIX}static/familiar1x.7c9c7f15.json`,\n FIFTEEN_MIN_CLOCK: `${PREFIX}static/fifteen-min-clock.0af4e303.json`,\n FIVE_MIN_CLOCK: `${PREFIX}static/five-min-clock.6be5cc41.json`,\n FLYING_DISK: `${PREFIX}static/flying-disk.c7f6ed39.json`,\n GIFT: `${PREFIX}static/gift.1067e0d5.json`,\n GOLD_1: `${PREFIX}static/gold-1.ab2489fe.json`,\n GOLD_2: `${PREFIX}static/gold-2.34045826.json`,\n GOLD_3: `${PREFIX}static/gold-3.d704698b.json`,\n GOLF: `${PREFIX}static/golf.55585049.json`,\n GRADE: `${PREFIX}static/grade.b3730524.json`,\n GRADUATION_CAP: `${PREFIX}static/graduation-cap.3be3340a.json`,\n HIGH_SCORE_CONFETTI: `${PREFIX}static/high-score-confetti.9cc15d0a.json`,\n HIGH_SCORE_TEXT: `${PREFIX}static/high-score-text.b7e35580.json`,\n INFINITE_BUTTON_BG: `${PREFIX}static/infinite-button-bg.5909225e.json`,\n INFINITE_BUTTON_SYMBOL: `${PREFIX}static/infinite-button-symbol.aa31350c.json`,\n KEEP_IT_UP: `${PREFIX}static/keep-it-up.95b07f7e.json`,\n KEY: `${PREFIX}static/key.d6846476.json`,\n LEARN: `${PREFIX}static/learn.71b13323.json`,\n LEVELUP_RINGS: `${PREFIX}static/levelup-rings.b1055283.json`,\n LEVEL_1_ALLSTAR: `${PREFIX}static/level-1-allstar.49d665c0.json`,\n LIGHTNING: `${PREFIX}static/lightning.f311bac7.json`,\n LIGHT_BULB: `${PREFIX}static/light-bulb.c6db0b23.json`,\n MAGICWAND: `${PREFIX}static/magicwand.75ac8f1b.json`,\n MAIL: `${PREFIX}static/mail.c30e8708.json`,\n MECHANICAL_ARM: `${PREFIX}static/mechanical-arm.7561628e.json`,\n MEDAL: `${PREFIX}static/medal.782dab23.json`,\n MEDIUM: `${PREFIX}static/medium.94c3829b.json`,\n MUSCLE: `${PREFIX}static/muscle.9bcfb8a7.json`,\n NUDGE_TAP: `${PREFIX}static/nudge-tap.0591aef4.json`,\n OTP: `${PREFIX}static/otp.a3029760.json`,\n PARENT_AVATAR: `${PREFIX}static/parent-avatar.772d53e0.json`,\n PARTY_BALL: `${PREFIX}static/party-ball.e19caed6.json`,\n PARTY_POPPER: `${PREFIX}static/party-popper.9f7992e8.json`,\n PENCIL: `${PREFIX}static/pencil.23df9da0.json`,\n PHONE_NUMBER: `${PREFIX}static/phone-number.0be312ea.json`,\n PLUS_SIGN: `${PREFIX}static/plus-sign.de6af957.json`,\n POINT100: `${PREFIX}static/point100.1df16f82.json`,\n POINT10: `${PREFIX}static/point10.7b5e536d.json`,\n POINT15: `${PREFIX}static/point15.fea00c32.json`,\n POINT1: `${PREFIX}static/point1.b53831de.json`,\n POINT20: `${PREFIX}static/point20.c88d776d.json`,\n POINT25: `${PREFIX}static/point25.a18c346a.json`,\n POINT2: `${PREFIX}static/point2.7cec6e24.json`,\n POINT30: `${PREFIX}static/point30.c5224b0b.json`,\n POINT35: `${PREFIX}static/point35.fad343dd.json`,\n POINT3: `${PREFIX}static/point3.f96fe7aa.json`,\n POINT40: `${PREFIX}static/point40.10a16f72.json`,\n POINT45: `${PREFIX}static/point45.2ad7561f.json`,\n POINT4: `${PREFIX}static/point4.fe04fb83.json`,\n POINT50: `${PREFIX}static/point50.5718cb3d.json`,\n POINT5: `${PREFIX}static/point5.da40ed1f.json`,\n POINT60: `${PREFIX}static/point60.17380d9f.json`,\n PRACTICE: `${PREFIX}static/practice.158dd488.json`,\n PROFICIENT1X: `${PREFIX}static/proficient1x.fa6e7b80.json`,\n PROJECT: `${PREFIX}static/project.eb665827.json`,\n PUZZLE: `${PREFIX}static/puzzle.b298c7e4.json`,\n PUZZLE_BLUE_LOTTIE: `${PREFIX}static/puzzle-blue-lottie.bf64ebc5.json`,\n PUZZLE_GREEN_LOTTIE: `${PREFIX}static/puzzle-green-lottie.1da90698.json`,\n PUZZLE_ORANGE_LOTTIE: `${PREFIX}static/puzzle-orange-lottie.0a105c42.json`,\n PUZZLE_PURPLE_LOTTIE: `${PREFIX}static/puzzle-purple-lottie.e70de110.json`,\n PUZZLE_YELLOW_LOTTIE: `${PREFIX}static/puzzle-yellow-lottie.275b5cf4.json`,\n RACING_CAR: `${PREFIX}static/racing-car.2cbf864e.json`,\n RANDOM_MODE_SEGMENT_LOTTIE: `${PREFIX}static/random-mode-segment-lottie.79cf1c07.json`,\n RECAP: `${PREFIX}static/recap.0dd2c1e2.json`,\n ROCKET: `${PREFIX}static/rocket.0a3ccab0.json`,\n SEQUENCE_MODE_SEGMENT_LOTTIE: `${PREFIX}static/sequence-mode-segment-lottie.11ac49e9.json`,\n SHOVEL: `${PREFIX}static/shovel.abeec04c.json`,\n SILVER_1: `${PREFIX}static/silver-1.0396328a.json`,\n SILVER_2: `${PREFIX}static/silver-2.bf50615f.json`,\n SILVER_3: `${PREFIX}static/silver-3.13d66b84.json`,\n SLEEPY_BOI: `${PREFIX}static/sleepy-boi.031a1165.json`,\n SLOT_MACHINE: `${PREFIX}static/slot-machine.ba8014dd.json`,\n SPINNER_WHITE: `${PREFIX}static/spinner-white.639e0d87.json`,\n SPLASH_SCREEN: `${PREFIX}static/splash-screen.bbf567ce.json`,\n STAR: `${PREFIX}static/star.b22e1309.json`,\n STUDENT_AVATAR: `${PREFIX}static/student-avatar.524226bd.json`,\n SUBJECTIVE: `${PREFIX}static/subjective.bc5f37fb.json`,\n SUPER: `${PREFIX}static/super.7fad19f6.json`,\n TABLE_MODE_REVEAL: `${PREFIX}static/table-mode-reveal.b44a82c3.json`,\n TABLE_MODE_STAR: `${PREFIX}static/table-mode-star.b8a1d762.json`,\n TABLE_SEGMENT_STAR: `${PREFIX}static/table-segment-star.78e851d6.json`,\n TARGET_ACHIEVED_TEXT: `${PREFIX}static/target-achieved-text.10db8475.json`,\n TEACHER_FOUND: `${PREFIX}static/teacher-found.0ba07d4a.json`,\n TEACHER_SEARCH: `${PREFIX}static/teacher-search.552c8ba2.json`,\n TEACHER_VALIDATION: `${PREFIX}static/teacher-validation.7577ecdc.json`,\n TEST: `${PREFIX}static/test.803d6036.json`,\n TOTAL_STREAK: `${PREFIX}static/total-streak.d5ce7669.json`,\n TOTAL_TIME: `${PREFIX}static/total-time.d979cbb9.json`,\n TOTAL_TIME_SPENT: `${PREFIX}static/total-time-spent.434005d3.json`,\n TOURNAMENT_RIPPLE: `${PREFIX}static/tournament-ripple.e5c239a5.json`,\n TROPHY: `${PREFIX}static/trophy.a8ea85ef.json`,\n USERNAME: `${PREFIX}static/username.9e034d51.json`,\n USERNAME_RESPONSIVE: `${PREFIX}static/username-responsive.787b5515.json`,\n VICTORY: `${PREFIX}static/victory.2ca41d92.json`,\n VIDEO: `${PREFIX}static/video.b41451e2.json`,\n};\n\nexport { LOTTIE };\n"],"names":["PREFIX","LOTTIE"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import l, { css as
|
|
2
|
-
import
|
|
1
|
+
import l, { css as a } from "styled-components";
|
|
2
|
+
import u from "../../../ui/layout/flex-view.js";
|
|
3
3
|
import $ from "../../../ui/text/text.js";
|
|
4
|
-
const
|
|
5
|
-
${({ selected: o, disabled: r, width:
|
|
6
|
-
const c = r ?
|
|
7
|
-
return
|
|
4
|
+
const g = l.button`
|
|
5
|
+
${({ selected: o, disabled: r, width: t, height: i, borderColor: s, theme: n, isTransparent: e }) => {
|
|
6
|
+
const c = r ? n.colors.WHITE_T_10 : o ? n.colors.WHITE_1 : e ? n.colors.TRANSPARENT : n.colors.BLACK_1, p = r ? n.colors.WHITE_T_15 : s;
|
|
7
|
+
return a`
|
|
8
8
|
position: relative;
|
|
9
9
|
display: inline-flex;
|
|
10
10
|
align-items: center;
|
|
@@ -13,19 +13,19 @@ const T = l.button`
|
|
|
13
13
|
transition: all 0.3s ease;
|
|
14
14
|
padding: 7.5px 16px;
|
|
15
15
|
border-radius: 40px;
|
|
16
|
-
border: 1px solid ${
|
|
17
|
-
width: ${
|
|
18
|
-
height: ${
|
|
19
|
-
min-height:
|
|
16
|
+
border: 1px solid ${p};
|
|
17
|
+
width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
|
|
18
|
+
height: ${i ? `${i}px` : "auto"};
|
|
19
|
+
min-height: 37px;
|
|
20
20
|
background-color: ${c};
|
|
21
21
|
&:hover {
|
|
22
|
-
background-color: ${!o && !r ?
|
|
22
|
+
background-color: ${!o && !r ? n.colors.WHITE_T_10 : void 0};
|
|
23
23
|
}
|
|
24
24
|
`;
|
|
25
25
|
}}
|
|
26
|
-
`, d = l(
|
|
26
|
+
`, d = l(u)`
|
|
27
27
|
visibility: ${({ $showLottie: o }) => o ? "visible" : "hidden"};
|
|
28
|
-
`,
|
|
28
|
+
`, b = l($)`
|
|
29
29
|
transition: all 0.3s ease-in-out;
|
|
30
30
|
position: relative;
|
|
31
31
|
|
|
@@ -33,13 +33,13 @@ const T = l.button`
|
|
|
33
33
|
left: ${o ? "0" : "-10px"};
|
|
34
34
|
`};
|
|
35
35
|
|
|
36
|
-
${({ selected: o, disabled: r, theme:
|
|
37
|
-
color: ${r ?
|
|
36
|
+
${({ selected: o, disabled: r, theme: t, textColor: i }) => `
|
|
37
|
+
color: ${r ? t.colors.WHITE_T_38 : o ? t.colors.BLACK_1 : i};
|
|
38
38
|
`};
|
|
39
39
|
`;
|
|
40
40
|
export {
|
|
41
41
|
d as IconWrapper,
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
b as Label,
|
|
43
|
+
g as Wrapper
|
|
44
44
|
};
|
|
45
45
|
//# sourceMappingURL=pill-button-styled.js.map
|
|
@@ -1 +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 | string;\n height?: number;\n borderColor?: string;\n}>`\n ${({ selected, disabled, width, height, borderColor, theme }) => {\n const
|
|
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 | string;\n height?: number;\n borderColor?: string;\n isTransparent?: boolean;\n}>`\n ${({ selected, disabled, width, height, borderColor, theme, isTransparent }) => {\n const getDefaultBgColor = () => {\n if (disabled) return theme.colors.WHITE_T_10;\n\n if (selected) return theme.colors.WHITE_1;\n\n if (isTransparent) return theme.colors.TRANSPARENT;\n\n return theme.colors.BLACK_1;\n };\n\n const defaultBgColor = getDefaultBgColor();\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}` : 'auto'}${typeof width === 'number' ? 'px' : ''};\n height: ${height ? `${height}px` : 'auto'};\n min-height: 37px;\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","isTransparent","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","shouldOffsetLabel","textColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAQ1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,GAAO,eAAAC,QAAoB;AAW9E,QAAMC,IATAN,IAAiBI,EAAM,OAAO,aAE9BL,IAAiBK,EAAM,OAAO,UAE9BC,IAAsBD,EAAM,OAAO,cAEhCA,EAAM,OAAO,SAKhBG,IAAiBP,IAAWI,EAAM,OAAO,aAAaD;AAErD,SAAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKR,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BO,CAAc;AAAA,eACzBN,IAAQ,GAAGA,CAAK,KAAK,MAAM,GAAG,OAAOA,KAAU,WAAW,OAAO,EAAE;AAAA,gBAClEC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA;AAAA,0BAErBI,CAAc;AAAA;AAAA,4BAEZ,CAACP,KAAY,CAACC,IAAWI,EAAM,OAAO,aAAa,MAAS;AAAA;AAAA;AAGtF,CAAC;AAAA,GAGUK,IAAcX,EAAOY,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA,IAS5B,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAf,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAW,EAAgB,MAAA;AAAA,aACrCf,IAAWI,EAAM,OAAO,aAAaL,IAAWK,EAAM,OAAO,UAAUW,CAAS;AAAA,GAC1F;AAAA;"}
|
|
@@ -1,65 +1,67 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import { useTheme as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { Wrapper as
|
|
9
|
-
const
|
|
1
|
+
import { jsx as o, jsxs as _ } from "react/jsx-runtime";
|
|
2
|
+
import { memo as j, useState as L, useCallback as l, useEffect as k } from "react";
|
|
3
|
+
import { useTheme as y } from "styled-components";
|
|
4
|
+
import B from "../../../ui/arrow-tooltip/arrow-tooltip.js";
|
|
5
|
+
import O from "../../../ui/hooks/use-click-handler.js";
|
|
6
|
+
import P from "../../../ui/layout/flex-view.js";
|
|
7
|
+
import S from "../../../ui/lottie-animation/lottie-animation.js";
|
|
8
|
+
import { Wrapper as X, IconWrapper as Y, Label as D } from "./pill-button-styled.js";
|
|
9
|
+
const F = {
|
|
10
10
|
autoplay: !0,
|
|
11
11
|
loop: !0,
|
|
12
12
|
renderer: "canvas"
|
|
13
|
-
},
|
|
13
|
+
}, G = ({
|
|
14
14
|
id: i,
|
|
15
|
-
label:
|
|
15
|
+
label: a,
|
|
16
16
|
selected: t = !1,
|
|
17
17
|
disabled: e = !1,
|
|
18
|
-
animatedLabel:
|
|
18
|
+
animatedLabel: u = "",
|
|
19
19
|
icon: r,
|
|
20
20
|
onClick: c,
|
|
21
21
|
tooltip: f,
|
|
22
22
|
width: A,
|
|
23
23
|
analyticsLabel: g,
|
|
24
|
-
analyticsProps: v
|
|
24
|
+
analyticsProps: v,
|
|
25
|
+
isTransparent: C = !1
|
|
25
26
|
}) => {
|
|
26
|
-
const [
|
|
27
|
+
const [$, h] = L(!1), [n, E] = L(!1), { colors: m } = y(), s = !!u, I = l(() => {
|
|
27
28
|
c(i);
|
|
28
|
-
}, [i, c]), { handleClick:
|
|
29
|
-
|
|
29
|
+
}, [i, c]), { handleClick: w } = O({ label: a, analyticsLabel: g, analyticsProps: v }, I);
|
|
30
|
+
k(() => {
|
|
30
31
|
if (!s || e) return;
|
|
31
|
-
const
|
|
32
|
-
|
|
32
|
+
const M = setInterval(() => {
|
|
33
|
+
E((R) => !R);
|
|
33
34
|
}, 1e3);
|
|
34
|
-
return () => clearInterval(
|
|
35
|
+
return () => clearInterval(M);
|
|
35
36
|
}, [e, s]);
|
|
36
|
-
const
|
|
37
|
-
|
|
37
|
+
const H = l(() => h(!0), []), T = l(() => h(!1), []), p = !!r && !e && (s || t || $), W = m[n ? "YELLOW_4" : "WHITE_1"], b = m[n && !t ? "YELLOW_4" : "WHITE_1"], d = n ? u : a, x = /* @__PURE__ */ o(
|
|
38
|
+
X,
|
|
38
39
|
{
|
|
39
40
|
selected: t,
|
|
40
41
|
disabled: e,
|
|
41
|
-
onClick:
|
|
42
|
-
onMouseEnter:
|
|
43
|
-
onMouseLeave:
|
|
42
|
+
onClick: w,
|
|
43
|
+
onMouseEnter: H,
|
|
44
|
+
onMouseLeave: T,
|
|
44
45
|
width: A,
|
|
45
|
-
borderColor:
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
borderColor: W,
|
|
47
|
+
isTransparent: C,
|
|
48
|
+
children: /* @__PURE__ */ _(
|
|
49
|
+
P,
|
|
48
50
|
{
|
|
49
51
|
$flexDirection: "row",
|
|
50
52
|
$alignItems: "center",
|
|
51
53
|
$justifyContent: "center",
|
|
52
54
|
$flexColumnGapX: 0.25,
|
|
53
55
|
children: [
|
|
54
|
-
r && /* @__PURE__ */ o(
|
|
56
|
+
r && /* @__PURE__ */ o(Y, { $widthX: 1, $heightX: 1, $showLottie: p, children: /* @__PURE__ */ o(S, { src: r, settings: F }) }),
|
|
55
57
|
/* @__PURE__ */ o(
|
|
56
|
-
|
|
58
|
+
D,
|
|
57
59
|
{
|
|
58
60
|
shouldOffsetLabel: p || !r,
|
|
59
61
|
selected: t,
|
|
60
62
|
disabled: e,
|
|
61
63
|
$renderAs: n ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2",
|
|
62
|
-
textColor:
|
|
64
|
+
textColor: b,
|
|
63
65
|
children: d
|
|
64
66
|
},
|
|
65
67
|
d
|
|
@@ -69,9 +71,9 @@ const D = {
|
|
|
69
71
|
)
|
|
70
72
|
}
|
|
71
73
|
);
|
|
72
|
-
return e && f ? /* @__PURE__ */ o(
|
|
73
|
-
},
|
|
74
|
+
return e && f ? /* @__PURE__ */ o(B, { renderAs: "primary", tooltipItem: f, position: "top", children: x }) : x;
|
|
75
|
+
}, et = j(G);
|
|
74
76
|
export {
|
|
75
|
-
|
|
77
|
+
et as default
|
|
76
78
|
};
|
|
77
79
|
//# sourceMappingURL=pill-button.js.map
|
|
@@ -1 +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 useClickHandler from '../../../ui/hooks/use-click-handler';\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 analyticsLabel,\n analyticsProps,\n}) => {\n const [isHovered, setHovered] = useState(false);\n const [highlightPhase, setHighlightPhase] = useState(false);\n const { colors } = useTheme();\n const shouldAnimate = !!animatedLabel;\n\n const handleSelect = useCallback(() => {\n onClick(id);\n }, [id, onClick]);\n\n const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, handleSelect);\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 width={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","analyticsLabel","analyticsProps","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","colors","useTheme","shouldAnimate","handleSelect","useCallback","handleClick","useClickHandler","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","currentLabel","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","pillButton","memo"],"mappings":";;;;;;;;AAWA,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;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;
|
|
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 useClickHandler from '../../../ui/hooks/use-click-handler';\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 analyticsLabel,\n analyticsProps,\n isTransparent = false,\n}) => {\n const [isHovered, setHovered] = useState(false);\n const [highlightPhase, setHighlightPhase] = useState(false);\n const { colors } = useTheme();\n const shouldAnimate = !!animatedLabel;\n\n const handleSelect = useCallback(() => {\n onClick(id);\n }, [id, onClick]);\n\n const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, handleSelect);\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 width={width}\n borderColor={borderColor}\n isTransparent={isTransparent}\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","analyticsLabel","analyticsProps","isTransparent","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","colors","useTheme","shouldAnimate","handleSelect","useCallback","handleClick","useClickHandler","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","currentLabel","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","pillButton","memo"],"mappings":";;;;;;;;AAWA,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;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAU,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,EAAE,QAAAG,MAAWC,KACbC,IAAgB,CAAC,CAACf,GAElBgB,IAAeC,EAAY,MAAM;AACrC,IAAAf,EAAQN,CAAE;AAAA,EAAA,GACT,CAACA,GAAIM,CAAO,CAAC,GAEV,EAAE,aAAAgB,EAAgB,IAAAC,EAAgB,EAAE,OAAAtB,GAAO,gBAAAQ,GAAgB,gBAAAC,KAAkBU,CAAY;AAE/F,EAAAI,EAAU,MAAM;AACV,QAAA,CAACL,KAAiBhB,EAAU;AAE1B,UAAAsB,IAAW,YAAY,MAAM;AACf,MAAAT,EAAA,CAAAU,MAAQ,CAACA,CAAI;AAAA,OAC9B,GAAI;AAEA,WAAA,MAAM,cAAcD,CAAQ;AAAA,EAAA,GAClC,CAACtB,GAAUgB,CAAa,CAAC;AAE5B,QAAMQ,IAAmBN,EAAY,MAAMR,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDe,IAAmBP,EAAY,MAAMR,EAAW,EAAK,GAAG,CAAA,CAAE,GAE1DgB,IAAa,CAAC,CAACxB,KAAQ,CAACF,MAAagB,KAAiBjB,KAAYU,IAElEkB,IAAcb,EAAOF,IAAiB,aAAa,SAAS,GAC5DgB,IAAYd,EAAOF,KAAkB,CAACb,IAAW,aAAa,SAAS,GACvE8B,IAAejB,IAAiBX,IAAgBH,GAIhDgC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAAjC;AAAA,MACA,UAAAC;AAAA,MACA,SAASmB;AAAA,MACT,cAAcK;AAAA,MACd,cAAcC;AAAA,MACd,OAAApB;AAAA,MACA,aAAAsB;AAAA,MACA,eAAAnB;AAAA,MAEA,UAAA,gBAAAyB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,iBAAiB;AAAA,UAEhB,UAAA;AAAA,YAAAhC,uBACEiC,GAAA,EAAmB,SAAS,GAAG,UAAU,GAAG,aAAaT,GACxD,4BAACU,GAAgB,EAAA,KAAKlC,GAAM,UAAUP,EAAgB,CAAA,GACxD;AAAA,YAEF,gBAAAoC;AAAA,cAACM;AAAAA,cAAA;AAAA,gBAEC,mBAAmBX,KAAc,CAACxB;AAAA,gBAClC,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,WA7BaY,IAAkBb,IAAW,aAAa,QADnCA,IAAW,aAAa;AAAA,gBA+B5C,WAAA6B;AAAA,gBAEC,UAAAC;AAAA,cAAA;AAAA,cAPIA;AAAA,YAQP;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIG,SAAA7B,KAAYI,IACjB,gBAAA2B,EAACO,GAAa,EAAA,UAAS,WAAU,aAAalC,GAAS,UAAS,OAC7D,UAAA0B,EAAA,CACH,IAEAA;AAEJ,GAEeS,KAAAC,EAAK5C,CAAU;"}
|
|
@@ -2,27 +2,23 @@ import t from "styled-components";
|
|
|
2
2
|
import i from "../../../ui/layout/flex-view.js";
|
|
3
3
|
const n = t(i)`
|
|
4
4
|
position: relative;
|
|
5
|
-
`,
|
|
5
|
+
`, s = t(i)`
|
|
6
6
|
position: absolute;
|
|
7
7
|
border-radius: 100%;
|
|
8
8
|
top: 216px;
|
|
9
9
|
border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
|
|
10
|
-
`,
|
|
11
|
-
|
|
10
|
+
`, a = t(i)(
|
|
11
|
+
({ theme: o, $isVisible: e }) => `
|
|
12
|
+
opacity: ${e ? 1 : 0};
|
|
12
13
|
transition: opacity 0.5s ease-in-out;
|
|
13
|
-
`, a = t.div`
|
|
14
14
|
position: relative;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
top: -12px;
|
|
16
|
+
${o.mediaQueries.minWidthTablet} {
|
|
17
|
+
top: 0;
|
|
18
|
+
}
|
|
19
|
+
`
|
|
20
|
+
), l = t.div`
|
|
17
21
|
position: relative;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
background: ${({ theme: o }) => o.colors.BLACK_2};
|
|
20
|
-
border-radius: 100%;
|
|
21
|
-
flex-shrink: 0;
|
|
22
|
-
display: flex;
|
|
23
|
-
align-items: center;
|
|
24
|
-
justify-content: center;
|
|
25
|
-
color: ${({ theme: o }) => o.colors.WHITE};
|
|
26
22
|
`;
|
|
27
23
|
t.div`
|
|
28
24
|
position: absolute;
|
|
@@ -30,7 +26,7 @@ t.div`
|
|
|
30
26
|
height: 100%;
|
|
31
27
|
z-index: 2;
|
|
32
28
|
`;
|
|
33
|
-
const
|
|
29
|
+
const d = t(i)(
|
|
34
30
|
({ theme: o }) => `
|
|
35
31
|
position: absolute;
|
|
36
32
|
bottom: 40px;
|
|
@@ -40,10 +36,10 @@ const l = t(i)(
|
|
|
40
36
|
right: 24px;
|
|
41
37
|
}
|
|
42
38
|
`
|
|
43
|
-
),
|
|
39
|
+
), u = t(i)`
|
|
44
40
|
position: absolute;
|
|
45
41
|
top: 642px;
|
|
46
|
-
`,
|
|
42
|
+
`, x = t(i)(
|
|
47
43
|
({ theme: o }) => `
|
|
48
44
|
position: absolute;
|
|
49
45
|
left: 16px;
|
|
@@ -55,12 +51,12 @@ const l = t(i)(
|
|
|
55
51
|
`
|
|
56
52
|
);
|
|
57
53
|
export {
|
|
58
|
-
|
|
54
|
+
s as CircularStepContainer,
|
|
59
55
|
n as Container,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
56
|
+
a as ContentWrapper,
|
|
57
|
+
u as FooterWrapper,
|
|
58
|
+
l as InputContainer,
|
|
59
|
+
d as NextButtonWrapper,
|
|
60
|
+
x as PrevButtonWrapper
|
|
65
61
|
};
|
|
66
62
|
//# sourceMappingURL=circular-step-wrapper-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n position: absolute;\n border-radius: 100%;\n top: 216px;\n border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }
|
|
1
|
+
{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n position: absolute;\n border-radius: 100%;\n top: 216px;\n border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>(\n ({ theme, $isVisible }) => `\n opacity: ${$isVisible ? 1 : 0};\n transition: opacity 0.5s ease-in-out;\n position: relative;\n top: -12px;\n ${theme.mediaQueries.minWidthTablet} {\n top: 0;\n }\n`,\n);\n\nconst InputContainer = styled.div`\n position: relative;\n`;\n\nexport const CircularProgress = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)(\n ({ theme }) => `\n position: absolute;\n bottom: 40px;\n right: 16px;\n ${theme.mediaQueries.minWidthTablet} {\n top: 55%;\n right: 24px;\n }\n`,\n);\n\nconst FooterWrapper = styled(FlexView)`\n position: absolute;\n top: 642px;\n`;\n\nconst PrevButtonWrapper = styled(FlexView)(\n ({ theme }) => `\n position: absolute;\n left: 16px;\n top: 40px;\n ${theme.mediaQueries.minWidthTablet} {\n top: 55%;\n left: 24px;\n }\n`,\n);\n\nexport {\n NextButtonWrapper,\n PrevButtonWrapper,\n InputContainer,\n Container,\n CircularStepContainer,\n ContentWrapper,\n FooterWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","FooterWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,EACpC,CAAC,EAAE,OAAAE,GAAO,YAAAE,EAAA,MAAiB;AAAA,aAChBA,IAAa,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3BF,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAIrC,GAEMG,IAAiBN,EAAO;AAAA;AAAA;AAIEA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA,EACvC,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,KAIZA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAKtC,GAEMK,IAAgBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK/BQ,IAAoBT,EAAOC,CAAQ;AAAA,EACvC,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,IAIbA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAKrC;"}
|
|
@@ -1,55 +1,58 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
|
|
1
|
+
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { memo as j, forwardRef as M, useRef as l, useState as g, useCallback as F, useEffect as O, useImperativeHandle as P, useLayoutEffect as z } from "react";
|
|
3
|
+
import { useTheme as D } from "styled-components";
|
|
4
|
+
import V from "../../../../assets/line-icons/icons/back2.js";
|
|
5
|
+
import X from "../../../../assets/line-icons/icons/next2.js";
|
|
6
|
+
import K from "../../../ui/animated-arc/animated-arc.js";
|
|
7
|
+
import y from "../../../ui/buttons/icon-button/icon-button.js";
|
|
8
|
+
import N from "../../../ui/layout/flex-view.js";
|
|
9
|
+
import Y from "../../../ui/lottie-animation/lottie-animation.js";
|
|
10
|
+
import _ from "../../../ui/separator/separator.js";
|
|
11
|
+
import q from "../../../ui/text/text.js";
|
|
12
|
+
import { EDeviceType as G } from "../../../ui/theme/constants.js";
|
|
13
|
+
import { Container as J, CircularStepContainer as Q, ContentWrapper as U, InputContainer as Z, FooterWrapper as ee, PrevButtonWrapper as te, NextButtonWrapper as re } from "./circular-step-wrapper-styled.js";
|
|
14
|
+
const ne = {
|
|
13
15
|
autoplay: !1,
|
|
14
16
|
loop: !1,
|
|
15
17
|
renderer: "canvas",
|
|
16
18
|
rendererSettings: {
|
|
17
19
|
preserveAspectRatio: "xMidYMin slice"
|
|
18
20
|
}
|
|
19
|
-
},
|
|
21
|
+
}, oe = M(
|
|
20
22
|
({
|
|
21
|
-
children:
|
|
22
|
-
onGoBack:
|
|
23
|
-
onNext:
|
|
24
|
-
label:
|
|
23
|
+
children: I,
|
|
24
|
+
onGoBack: b,
|
|
25
|
+
onNext: v,
|
|
26
|
+
label: u,
|
|
25
27
|
showNext: S,
|
|
26
|
-
showPrevious:
|
|
28
|
+
showPrevious: k,
|
|
27
29
|
animation: r,
|
|
28
|
-
introFrames:
|
|
29
|
-
outroFrames:
|
|
30
|
-
isNextLoading:
|
|
31
|
-
progressAngle:
|
|
32
|
-
footerElement:
|
|
33
|
-
isNextDisabled:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
introFrames: w,
|
|
31
|
+
outroFrames: x,
|
|
32
|
+
isNextLoading: i,
|
|
33
|
+
progressAngle: c,
|
|
34
|
+
footerElement: m,
|
|
35
|
+
isNextDisabled: A,
|
|
36
|
+
animationSrcMobile: R
|
|
37
|
+
}, W) => {
|
|
38
|
+
const t = l(null), s = l(null), [d, E] = g(), [L, p] = g(!1), a = l(null), { device: T } = D(), n = T <= G.MOBILE, B = F(() => {
|
|
39
|
+
r && t.current && (t.current.playSegments(w, !0), p(!0));
|
|
37
40
|
}, [r]);
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
}, [r]),
|
|
41
|
-
playOutroAndFadeOut: async () => new Promise((
|
|
42
|
-
var
|
|
43
|
-
const
|
|
44
|
-
var
|
|
45
|
-
|
|
41
|
+
return O(() => () => {
|
|
42
|
+
a.current && clearTimeout(a.current);
|
|
43
|
+
}, [r]), P(W, () => ({
|
|
44
|
+
playOutroAndFadeOut: async () => new Promise((H) => {
|
|
45
|
+
var h, $;
|
|
46
|
+
const f = () => {
|
|
47
|
+
var C;
|
|
48
|
+
H(), (C = t.current) == null || C.removeEventListener("complete", f);
|
|
46
49
|
};
|
|
47
|
-
(
|
|
50
|
+
(h = t.current) == null || h.playSegments(x, !0), a.current = setTimeout(() => p(!1), 400), ($ = t.current) == null || $.addEventListener("complete", f);
|
|
48
51
|
})
|
|
49
|
-
})),
|
|
50
|
-
|
|
51
|
-
}, []), /* @__PURE__ */
|
|
52
|
-
|
|
52
|
+
})), z(() => {
|
|
53
|
+
s.current && E(s.current.offsetHeight);
|
|
54
|
+
}, []), /* @__PURE__ */ o(
|
|
55
|
+
J,
|
|
53
56
|
{
|
|
54
57
|
$flex: 1,
|
|
55
58
|
$flexDirection: "column",
|
|
@@ -57,79 +60,79 @@ const U = {
|
|
|
57
60
|
$justifyContent: "center",
|
|
58
61
|
$width: "100%",
|
|
59
62
|
$height: "100%",
|
|
60
|
-
ref:
|
|
63
|
+
ref: s,
|
|
61
64
|
children: [
|
|
62
|
-
|
|
63
|
-
|
|
65
|
+
d && /* @__PURE__ */ e(
|
|
66
|
+
Y,
|
|
64
67
|
{
|
|
65
68
|
width: 1280,
|
|
66
|
-
height:
|
|
67
|
-
src: r,
|
|
69
|
+
height: d,
|
|
70
|
+
src: n ? R ?? r : r,
|
|
68
71
|
ref: t,
|
|
69
|
-
onRender:
|
|
70
|
-
settings:
|
|
72
|
+
onRender: B,
|
|
73
|
+
settings: ne
|
|
71
74
|
}
|
|
72
75
|
),
|
|
73
|
-
/* @__PURE__ */
|
|
74
|
-
|
|
76
|
+
/* @__PURE__ */ o(
|
|
77
|
+
Q,
|
|
75
78
|
{
|
|
76
|
-
$width: 400,
|
|
77
|
-
$height: 400,
|
|
79
|
+
$width: n ? 290 : 400,
|
|
80
|
+
$height: n ? 290 : 400,
|
|
78
81
|
$background: "REAL_BLACK",
|
|
79
82
|
$alignItems: "center",
|
|
80
83
|
$justifyContent: "center",
|
|
81
84
|
children: [
|
|
82
|
-
|
|
83
|
-
|
|
85
|
+
c && /* @__PURE__ */ e(
|
|
86
|
+
K,
|
|
84
87
|
{
|
|
85
|
-
radius: 200,
|
|
88
|
+
radius: c ? 145 : 200,
|
|
86
89
|
strokeWidth: 2,
|
|
87
90
|
color: "WHITE",
|
|
88
|
-
targetAngle:
|
|
91
|
+
targetAngle: c,
|
|
89
92
|
mode: "fade",
|
|
90
93
|
duration: 1
|
|
91
94
|
}
|
|
92
95
|
),
|
|
93
|
-
/* @__PURE__ */
|
|
94
|
-
|
|
95
|
-
/* @__PURE__ */ e(
|
|
96
|
-
/* @__PURE__ */ e(
|
|
96
|
+
/* @__PURE__ */ o(U, { $isVisible: L, $width: "100%", children: [
|
|
97
|
+
u && /* @__PURE__ */ o(N, { $gutterX: n ? 1.5 : 3.5, children: [
|
|
98
|
+
/* @__PURE__ */ e(q, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: u }),
|
|
99
|
+
/* @__PURE__ */ e(_, { heightX: 1 })
|
|
97
100
|
] }),
|
|
98
|
-
/* @__PURE__ */ e(
|
|
101
|
+
/* @__PURE__ */ e(Z, { children: I })
|
|
99
102
|
] })
|
|
100
103
|
]
|
|
101
104
|
}
|
|
102
105
|
),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
+
m && /* @__PURE__ */ e(ee, { $alignItems: "center", $justifyContent: "center", children: m }),
|
|
107
|
+
k && /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(
|
|
108
|
+
y,
|
|
106
109
|
{
|
|
107
|
-
Icon:
|
|
110
|
+
Icon: V,
|
|
108
111
|
renderAs: "black-dark",
|
|
109
112
|
analyticsLabel: "Prev",
|
|
110
|
-
onClick:
|
|
111
|
-
disabled:
|
|
113
|
+
onClick: b,
|
|
114
|
+
disabled: i,
|
|
112
115
|
size: "small"
|
|
113
116
|
}
|
|
114
117
|
) }),
|
|
115
|
-
S && /* @__PURE__ */ e(
|
|
116
|
-
|
|
118
|
+
S && /* @__PURE__ */ e(re, { children: /* @__PURE__ */ e(
|
|
119
|
+
y,
|
|
117
120
|
{
|
|
118
121
|
size: "small",
|
|
119
|
-
Icon:
|
|
122
|
+
Icon: X,
|
|
120
123
|
renderAs: "secondary-dark",
|
|
121
124
|
analyticsLabel: "Next",
|
|
122
|
-
onClick:
|
|
123
|
-
busy:
|
|
124
|
-
disabled:
|
|
125
|
+
onClick: v,
|
|
126
|
+
busy: i,
|
|
127
|
+
disabled: i || A
|
|
125
128
|
}
|
|
126
129
|
) })
|
|
127
130
|
]
|
|
128
131
|
}
|
|
129
132
|
);
|
|
130
133
|
}
|
|
131
|
-
),
|
|
134
|
+
), ge = j(oe);
|
|
132
135
|
export {
|
|
133
|
-
|
|
136
|
+
ge as default
|
|
134
137
|
};
|
|
135
138
|
//# sourceMappingURL=circular-step-wrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n memo,\n type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n rendererSettings: {\n preserveAspectRatio: 'xMidYMin slice',\n },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n (\n {\n children,\n onGoBack,\n onNext,\n label,\n showNext,\n showPrevious,\n animation,\n introFrames,\n outroFrames,\n isNextLoading,\n progressAngle,\n footerElement,\n isNextDisabled,\n },\n ref: Ref<ICircularStepRef>,\n ) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerHeight, setContainerHeight] = useState<number | undefined>();\n const [showContent, setShowContent] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const onLottieRender = useCallback(() => {\n if (animation && animationRef.current) {\n animationRef.current.playSegments(introFrames, true);\n setShowContent(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [animation]);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [animation]);\n\n useImperativeHandle(ref, () => ({\n playOutroAndFadeOut: async () => {\n return new Promise<void>(resolve => {\n const handleComplete = () => {\n resolve();\n animationRef.current?.removeEventListener('complete', handleComplete);\n };\n\n animationRef.current?.playSegments(outroFrames, true);\n timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n animationRef.current?.addEventListener('complete', handleComplete);\n });\n },\n }));\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setContainerHeight(containerRef.current.offsetHeight);\n }\n }, []);\n\n return (\n <Styled.Container\n $flex={1}\n $flexDirection=\"column\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n ref={containerRef}\n >\n {containerHeight && (\n <LottieAnimation\n width={1280}\n height={containerHeight}\n src={animation}\n ref={animationRef}\n onRender={onLottieRender}\n settings={animationSettings}\n />\n )}\n <Styled.CircularStepContainer\n $width={400}\n $height={400}\n $background=\"REAL_BLACK\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {progressAngle && (\n <AnimatedArc\n radius={200}\n strokeWidth={2}\n color=\"WHITE\"\n targetAngle={progressAngle}\n mode=\"fade\"\n duration={1}\n />\n )}\n <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n {label && (\n <FlexView $gutterX={3.5}>\n <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n {label}\n </Text>\n <Separator heightX={1} />\n </FlexView>\n )}\n <Styled.InputContainer>{children}</Styled.InputContainer>\n </Styled.ContentWrapper>\n </Styled.CircularStepContainer>\n {footerElement && (\n <Styled.FooterWrapper $alignItems=\"center\" $justifyContent=\"center\">\n {footerElement}\n </Styled.FooterWrapper>\n )}\n {showPrevious && (\n <Styled.PrevButtonWrapper>\n <IconButton\n Icon={Back2Icon}\n renderAs=\"black-dark\"\n analyticsLabel=\"Prev\"\n onClick={onGoBack}\n disabled={isNextLoading}\n size=\"small\"\n />\n </Styled.PrevButtonWrapper>\n )}\n {showNext && (\n <Styled.NextButtonWrapper>\n <IconButton\n size=\"small\"\n Icon={Next2Icon}\n renderAs=\"secondary-dark\"\n analyticsLabel=\"Next\"\n onClick={onNext}\n busy={isNextLoading}\n disabled={isNextLoading || isNextDisabled}\n />\n </Styled.NextButtonWrapper>\n )}\n </Styled.Container>\n );\n },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","footerElement","isNextDisabled","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.FooterWrapper","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":"
|
|
1
|
+
{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n memo,\n type Ref,\n} from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n rendererSettings: {\n preserveAspectRatio: 'xMidYMin slice',\n },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n (\n {\n children,\n onGoBack,\n onNext,\n label,\n showNext,\n showPrevious,\n animation,\n introFrames,\n outroFrames,\n isNextLoading,\n progressAngle,\n footerElement,\n isNextDisabled,\n animationSrcMobile,\n },\n ref: Ref<ICircularStepRef>,\n ) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerHeight, setContainerHeight] = useState<number | undefined>();\n const [showContent, setShowContent] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n const { device } = useTheme();\n const isMobile = device <= EDeviceType.MOBILE;\n\n const onLottieRender = useCallback(() => {\n if (animation && animationRef.current) {\n animationRef.current.playSegments(introFrames, true);\n setShowContent(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [animation]);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [animation]);\n\n useImperativeHandle(ref, () => ({\n playOutroAndFadeOut: async () => {\n return new Promise<void>(resolve => {\n const handleComplete = () => {\n resolve();\n animationRef.current?.removeEventListener('complete', handleComplete);\n };\n\n animationRef.current?.playSegments(outroFrames, true);\n timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n animationRef.current?.addEventListener('complete', handleComplete);\n });\n },\n }));\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setContainerHeight(containerRef.current.offsetHeight);\n }\n }, []);\n\n return (\n <Styled.Container\n $flex={1}\n $flexDirection=\"column\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n ref={containerRef}\n >\n {containerHeight && (\n <LottieAnimation\n width={1280}\n height={containerHeight}\n src={isMobile ? animationSrcMobile ?? animation : animation}\n ref={animationRef}\n onRender={onLottieRender}\n settings={animationSettings}\n />\n )}\n <Styled.CircularStepContainer\n $width={isMobile ? 290 : 400}\n $height={isMobile ? 290 : 400}\n $background=\"REAL_BLACK\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {progressAngle && (\n <AnimatedArc\n radius={progressAngle ? 145 : 200}\n strokeWidth={2}\n color=\"WHITE\"\n targetAngle={progressAngle}\n mode=\"fade\"\n duration={1}\n />\n )}\n <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n {label && (\n <FlexView $gutterX={isMobile ? 1.5 : 3.5}>\n <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n {label}\n </Text>\n <Separator heightX={1} />\n </FlexView>\n )}\n <Styled.InputContainer>{children}</Styled.InputContainer>\n </Styled.ContentWrapper>\n </Styled.CircularStepContainer>\n {footerElement && (\n <Styled.FooterWrapper $alignItems=\"center\" $justifyContent=\"center\">\n {footerElement}\n </Styled.FooterWrapper>\n )}\n {showPrevious && (\n <Styled.PrevButtonWrapper>\n <IconButton\n Icon={Back2Icon}\n renderAs=\"black-dark\"\n analyticsLabel=\"Prev\"\n onClick={onGoBack}\n disabled={isNextLoading}\n size=\"small\"\n />\n </Styled.PrevButtonWrapper>\n )}\n {showNext && (\n <Styled.NextButtonWrapper>\n <IconButton\n size=\"small\"\n Icon={Next2Icon}\n renderAs=\"secondary-dark\"\n analyticsLabel=\"Next\"\n onClick={onNext}\n busy={isNextLoading}\n disabled={isNextLoading || isNextDisabled}\n />\n </Styled.NextButtonWrapper>\n )}\n </Styled.Container>\n );\n },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","footerElement","isNextDisabled","animationSrcMobile","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","device","useTheme","isMobile","EDeviceType","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.FooterWrapper","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":"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"}
|
|
@@ -1,91 +1,96 @@
|
|
|
1
|
-
import { jsx as c, jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import { useTheme as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
1
|
+
import { jsx as c, jsxs as K } from "react/jsx-runtime";
|
|
2
|
+
import { memo as L, useState as C, useRef as I, useCallback as p, useMemo as T, useEffect as W } from "react";
|
|
3
|
+
import { useTheme as A } from "styled-components";
|
|
4
|
+
import B from "../../../ui/layout/flex-view.js";
|
|
5
|
+
import { EDeviceType as H } from "../../../ui/theme/constants.js";
|
|
6
|
+
import N from "./country-selector/country-selector.js";
|
|
7
|
+
import { CustomInput as O } from "./custom-input-field-styled.js";
|
|
7
8
|
import X from "./input-wrapper/input-wrapper.js";
|
|
8
9
|
import _ from "./password-toggle/password-toggle.js";
|
|
9
10
|
const q = ({
|
|
10
|
-
value:
|
|
11
|
-
onChange:
|
|
11
|
+
value: r,
|
|
12
|
+
onChange: d,
|
|
12
13
|
error: u,
|
|
13
|
-
helperText:
|
|
14
|
+
helperText: b,
|
|
14
15
|
onEnter: n,
|
|
15
|
-
isLoading:
|
|
16
|
-
isValid:
|
|
17
|
-
type:
|
|
16
|
+
isLoading: D,
|
|
17
|
+
isValid: h,
|
|
18
|
+
type: t = "text",
|
|
18
19
|
placeholder: F,
|
|
19
20
|
actionElement: R,
|
|
20
21
|
maxLength: $,
|
|
21
|
-
width:
|
|
22
|
+
width: E,
|
|
22
23
|
textTransform: P,
|
|
23
|
-
textAlign:
|
|
24
|
-
selectedCountry:
|
|
25
|
-
onCountryChange:
|
|
26
|
-
autoSize:
|
|
24
|
+
textAlign: v = "center",
|
|
25
|
+
selectedCountry: M,
|
|
26
|
+
onCountryChange: S,
|
|
27
|
+
autoSize: x = !1
|
|
27
28
|
}) => {
|
|
28
|
-
const
|
|
29
|
-
(
|
|
30
|
-
|
|
29
|
+
const o = A(), l = o.device <= H.MOBILE, [f, V] = C(!1), [j, m] = C(l ? 24 : 32), a = I(null), s = I(null), k = p(
|
|
30
|
+
(e) => {
|
|
31
|
+
e.key === "Enter" && (n == null || n());
|
|
31
32
|
},
|
|
32
33
|
[n]
|
|
33
|
-
),
|
|
34
|
+
), y = T(() => t === "password" ? f ? "text" : "password" : t === "phone" ? "number" : t, [t, f]), z = T(() => u ? o.colors.RED : h ? o.colors.GREEN_4 : o.colors.WHITE, [u, h, o.colors]), w = p((e, g) => {
|
|
34
35
|
s.current || (s.current = document.createElement("canvas"));
|
|
35
36
|
const i = s.current.getContext("2d");
|
|
36
|
-
return i ? (i.font =
|
|
37
|
+
return i ? (i.font = g, i.measureText(e).width) : 0;
|
|
37
38
|
}, []);
|
|
38
|
-
|
|
39
|
-
if (!
|
|
39
|
+
W(() => {
|
|
40
|
+
if (!a.current || !r || !x)
|
|
40
41
|
return;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
if (l) {
|
|
43
|
+
m(24);
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
const e = a.current.clientWidth;
|
|
47
|
+
w(r, "32px 'Athletics-Light'") > e ? m(24) : m(32);
|
|
48
|
+
}, [r, w, x, l]), W(() => () => {
|
|
44
49
|
s.current = null;
|
|
45
50
|
}, []);
|
|
46
|
-
const
|
|
47
|
-
(
|
|
48
|
-
[
|
|
51
|
+
const G = p(
|
|
52
|
+
(e) => d(e.target.value),
|
|
53
|
+
[d]
|
|
49
54
|
);
|
|
50
55
|
return /* @__PURE__ */ c(
|
|
51
56
|
X,
|
|
52
57
|
{
|
|
53
|
-
helperText: u ||
|
|
54
|
-
isLoading:
|
|
58
|
+
helperText: u || b,
|
|
59
|
+
isLoading: D,
|
|
55
60
|
actionElement: R,
|
|
56
|
-
children: /* @__PURE__ */
|
|
57
|
-
|
|
61
|
+
children: /* @__PURE__ */ K(
|
|
62
|
+
B,
|
|
58
63
|
{
|
|
59
|
-
$width:
|
|
64
|
+
$width: E ?? "100%",
|
|
60
65
|
$flex: 1,
|
|
61
66
|
$alignItems: "center",
|
|
62
67
|
$flexDirection: "row",
|
|
63
68
|
$flexGapX: 0.5,
|
|
64
69
|
children: [
|
|
65
|
-
|
|
70
|
+
t === "phone" && /* @__PURE__ */ c(N, { onChange: S, value: M }),
|
|
66
71
|
/* @__PURE__ */ c(
|
|
67
|
-
|
|
72
|
+
O,
|
|
68
73
|
{
|
|
69
|
-
ref:
|
|
70
|
-
value:
|
|
71
|
-
onChange:
|
|
74
|
+
ref: a,
|
|
75
|
+
value: r,
|
|
76
|
+
onChange: G,
|
|
72
77
|
autoFocus: !0,
|
|
73
78
|
placeholder: F,
|
|
74
|
-
color:
|
|
79
|
+
color: z,
|
|
75
80
|
autoCapitalize: "none",
|
|
76
81
|
textTransform: P,
|
|
77
|
-
type:
|
|
78
|
-
onKeyDown:
|
|
82
|
+
type: y,
|
|
83
|
+
onKeyDown: k,
|
|
79
84
|
maxLength: $,
|
|
80
|
-
align:
|
|
81
|
-
fontSize:
|
|
85
|
+
align: v,
|
|
86
|
+
fontSize: j
|
|
82
87
|
}
|
|
83
88
|
),
|
|
84
|
-
|
|
89
|
+
t === "password" && /* @__PURE__ */ c(
|
|
85
90
|
_,
|
|
86
91
|
{
|
|
87
|
-
isVisible:
|
|
88
|
-
onToggle: () =>
|
|
92
|
+
isVisible: f,
|
|
93
|
+
onToggle: () => V((e) => !e)
|
|
89
94
|
}
|
|
90
95
|
)
|
|
91
96
|
]
|
|
@@ -93,8 +98,8 @@ const q = ({
|
|
|
93
98
|
)
|
|
94
99
|
}
|
|
95
100
|
);
|
|
96
|
-
},
|
|
101
|
+
}, ne = L(q);
|
|
97
102
|
export {
|
|
98
|
-
|
|
103
|
+
ne as default
|
|
99
104
|
};
|
|
100
105
|
//# sourceMappingURL=custom-input-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-input-field.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from './custom-input-field-types';\n\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n memo,\n type FC,\n type KeyboardEvent,\n type ChangeEvent,\n} from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport PhoneCountrySelector from './country-selector/country-selector';\nimport * as Styled from './custom-input-field-styled';\nimport InputWrapper from './input-wrapper/input-wrapper';\nimport PasswordToggleIcon from './password-toggle/password-toggle';\n\nconst CustomInputField: FC<ICustomInputFieldProps> = ({\n value,\n onChange,\n error,\n helperText,\n onEnter,\n isLoading,\n isValid,\n type = 'text',\n placeholder,\n actionElement,\n maxLength,\n width,\n textTransform,\n textAlign = 'center',\n selectedCountry,\n onCountryChange,\n autoSize = false,\n}) => {\n const theme = useTheme();\n const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n const [fontSize, setFontSize] = useState(32);\n const inputRef = useRef<HTMLInputElement>(null);\n const canvasRef = useRef<HTMLCanvasElement | null>(null);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n onEnter?.();\n }\n },\n [onEnter],\n );\n\n const inputType = useMemo(() => {\n if (type === 'password') return isPasswordVisible ? 'text' : 'password';\n\n if (type === 'phone') return 'number';\n\n return type;\n }, [type, isPasswordVisible]);\n\n const inputColor = useMemo(() => {\n if (error) return theme.colors.RED;\n\n if (isValid) return theme.colors.GREEN_4;\n\n return theme.colors.WHITE;\n }, [error, isValid, theme.colors]);\n\n const measureTextWidth = useCallback((text: string, font: string): number => {\n if (!canvasRef.current) {\n canvasRef.current = document.createElement('canvas');\n }\n\n const context = canvasRef.current.getContext('2d');\n\n if (!context) return 0;\n\n context.font = font;\n\n return context.measureText(text).width;\n }, []);\n\n useEffect(() => {\n if (!inputRef.current || !value || !autoSize) {\n return;\n }\n\n const inputWidth = inputRef.current.clientWidth;\n\n const font32 = \"32px 'Athletics-Light'\";\n\n const textWidth32 = measureTextWidth(value, font32);\n\n if (textWidth32 > inputWidth) {\n setFontSize(24);\n } else {\n setFontSize(32);\n }\n }, [value, measureTextWidth, autoSize]);\n\n useEffect(() => {\n return () => {\n canvasRef.current = null;\n };\n }, []);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => onChange(event.target.value),\n [onChange],\n );\n\n return (\n <InputWrapper\n helperText={error || helperText}\n isLoading={isLoading}\n actionElement={actionElement}\n >\n <FlexView\n $width={width ?? '100%'}\n $flex={1}\n $alignItems=\"center\"\n $flexDirection=\"row\"\n $flexGapX={0.5}\n >\n {type === 'phone' && (\n <PhoneCountrySelector onChange={onCountryChange} value={selectedCountry} />\n )}\n <Styled.CustomInput\n ref={inputRef}\n value={value}\n onChange={handleChange}\n autoFocus\n placeholder={placeholder}\n color={inputColor}\n autoCapitalize=\"none\"\n textTransform={textTransform}\n type={inputType}\n onKeyDown={handleKeyDown}\n maxLength={maxLength}\n align={textAlign}\n fontSize={fontSize}\n />\n {type === 'password' && (\n <PasswordToggleIcon\n isVisible={isPasswordVisible}\n onToggle={() => setIsPasswordVisible(prev => !prev)}\n />\n )}\n </FlexView>\n </InputWrapper>\n );\n};\n\nexport default memo(CustomInputField);\n"],"names":["CustomInputField","value","onChange","error","helperText","onEnter","isLoading","isValid","type","placeholder","actionElement","maxLength","width","textTransform","textAlign","selectedCountry","onCountryChange","autoSize","theme","useTheme","isPasswordVisible","setIsPasswordVisible","useState","fontSize","setFontSize","inputRef","useRef","canvasRef","handleKeyDown","useCallback","event","inputType","useMemo","inputColor","measureTextWidth","text","font","context","useEffect","inputWidth","handleChange","jsx","InputWrapper","jsxs","FlexView","PhoneCountrySelector","Styled.CustomInput","PasswordToggleIcon","prev","customInputField","memo"],"mappings":"
|
|
1
|
+
{"version":3,"file":"custom-input-field.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from './custom-input-field-types';\n\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n memo,\n type FC,\n type KeyboardEvent,\n type ChangeEvent,\n} from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport PhoneCountrySelector from './country-selector/country-selector';\nimport * as Styled from './custom-input-field-styled';\nimport InputWrapper from './input-wrapper/input-wrapper';\nimport PasswordToggleIcon from './password-toggle/password-toggle';\n\nconst CustomInputField: FC<ICustomInputFieldProps> = ({\n value,\n onChange,\n error,\n helperText,\n onEnter,\n isLoading,\n isValid,\n type = 'text',\n placeholder,\n actionElement,\n maxLength,\n width,\n textTransform,\n textAlign = 'center',\n selectedCountry,\n onCountryChange,\n autoSize = false,\n}) => {\n const theme = useTheme();\n const isMobile = theme.device <= EDeviceType.MOBILE;\n const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n const [fontSize, setFontSize] = useState(isMobile ? 24 : 32);\n const inputRef = useRef<HTMLInputElement>(null);\n const canvasRef = useRef<HTMLCanvasElement | null>(null);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n onEnter?.();\n }\n },\n [onEnter],\n );\n\n const inputType = useMemo(() => {\n if (type === 'password') return isPasswordVisible ? 'text' : 'password';\n\n if (type === 'phone') return 'number';\n\n return type;\n }, [type, isPasswordVisible]);\n\n const inputColor = useMemo(() => {\n if (error) return theme.colors.RED;\n\n if (isValid) return theme.colors.GREEN_4;\n\n return theme.colors.WHITE;\n }, [error, isValid, theme.colors]);\n\n const measureTextWidth = useCallback((text: string, font: string): number => {\n if (!canvasRef.current) {\n canvasRef.current = document.createElement('canvas');\n }\n\n const context = canvasRef.current.getContext('2d');\n\n if (!context) return 0;\n\n context.font = font;\n\n return context.measureText(text).width;\n }, []);\n\n useEffect(() => {\n if (!inputRef.current || !value || !autoSize) {\n return;\n }\n\n if (isMobile) {\n setFontSize(24);\n\n return;\n }\n\n const inputWidth = inputRef.current.clientWidth;\n\n const font32 = \"32px 'Athletics-Light'\";\n\n const textWidth32 = measureTextWidth(value, font32);\n\n if (textWidth32 > inputWidth) {\n setFontSize(24);\n } else {\n setFontSize(32);\n }\n }, [value, measureTextWidth, autoSize, isMobile]);\n\n useEffect(() => {\n return () => {\n canvasRef.current = null;\n };\n }, []);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => onChange(event.target.value),\n [onChange],\n );\n\n return (\n <InputWrapper\n helperText={error || helperText}\n isLoading={isLoading}\n actionElement={actionElement}\n >\n <FlexView\n $width={width ?? '100%'}\n $flex={1}\n $alignItems=\"center\"\n $flexDirection=\"row\"\n $flexGapX={0.5}\n >\n {type === 'phone' && (\n <PhoneCountrySelector onChange={onCountryChange} value={selectedCountry} />\n )}\n <Styled.CustomInput\n ref={inputRef}\n value={value}\n onChange={handleChange}\n autoFocus\n placeholder={placeholder}\n color={inputColor}\n autoCapitalize=\"none\"\n textTransform={textTransform}\n type={inputType}\n onKeyDown={handleKeyDown}\n maxLength={maxLength}\n align={textAlign}\n fontSize={fontSize}\n />\n {type === 'password' && (\n <PasswordToggleIcon\n isVisible={isPasswordVisible}\n onToggle={() => setIsPasswordVisible(prev => !prev)}\n />\n )}\n </FlexView>\n </InputWrapper>\n );\n};\n\nexport default memo(CustomInputField);\n"],"names":["CustomInputField","value","onChange","error","helperText","onEnter","isLoading","isValid","type","placeholder","actionElement","maxLength","width","textTransform","textAlign","selectedCountry","onCountryChange","autoSize","theme","useTheme","isMobile","EDeviceType","isPasswordVisible","setIsPasswordVisible","useState","fontSize","setFontSize","inputRef","useRef","canvasRef","handleKeyDown","useCallback","event","inputType","useMemo","inputColor","measureTextWidth","text","font","context","useEffect","inputWidth","handleChange","jsx","InputWrapper","jsxs","FlexView","PhoneCountrySelector","Styled.CustomInput","PasswordToggleIcon","prev","customInputField","memo"],"mappings":"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"}
|
|
@@ -1,29 +1,51 @@
|
|
|
1
|
-
import { jsxs as t, jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
1
|
+
import { jsxs as t, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { memo as h } from "react";
|
|
3
|
+
import { useTheme as s } from "styled-components";
|
|
4
|
+
import { LOTTIE as f } from "../../../../../assets/lottie/lottie.js";
|
|
5
|
+
import i from "../../../../ui/layout/flex-view.js";
|
|
5
6
|
import $ from "../../../../ui/lottie-animation/lottie-animation.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
7
|
+
import o from "../../../../ui/separator/separator.js";
|
|
8
|
+
import l from "../../../../ui/text/text.js";
|
|
9
|
+
import { EDeviceType as a } from "../../../../ui/theme/constants.js";
|
|
10
|
+
import { ContentWrapper as d } from "./input-wrapper-styled.js";
|
|
11
|
+
const u = ({ children: p, helperText: n, actionElement: m, isLoading: c }) => {
|
|
12
|
+
const e = s().device <= a.MOBILE;
|
|
13
|
+
return /* @__PURE__ */ t(
|
|
14
|
+
i,
|
|
15
|
+
{
|
|
16
|
+
$flex: 1,
|
|
17
|
+
$gutterX: e ? 1.5 : 2,
|
|
18
|
+
$alignItems: "center",
|
|
19
|
+
$justifyContent: "center",
|
|
20
|
+
$width: "100%",
|
|
21
|
+
children: [
|
|
22
|
+
p,
|
|
23
|
+
/* @__PURE__ */ t(d, { $alignItems: "center", $justifyContent: "center", children: [
|
|
24
|
+
n && /* @__PURE__ */ t(i, { $gutterX: e ? 2.25 : 3.5, children: [
|
|
25
|
+
/* @__PURE__ */ r(l, { $renderAs: "ub2", $color: "WHITE_T_60", $align: "center", $whiteSpace: "pre-line", children: n }),
|
|
26
|
+
/* @__PURE__ */ r(o, { heightX: 0.5 })
|
|
27
|
+
] }),
|
|
28
|
+
m && /* @__PURE__ */ t(i, { $justifyContent: "center", $alignItems: "center", children: [
|
|
29
|
+
m,
|
|
30
|
+
/* @__PURE__ */ r(o, { heightX: 1 })
|
|
31
|
+
] }),
|
|
32
|
+
c && /* @__PURE__ */ t(i, { children: [
|
|
33
|
+
/* @__PURE__ */ r(o, { heightX: e ? 0.5 : 2 }),
|
|
34
|
+
/* @__PURE__ */ r(
|
|
35
|
+
$,
|
|
36
|
+
{
|
|
37
|
+
src: f.SPINNER_WHITE,
|
|
38
|
+
height: e ? 14 : 20,
|
|
39
|
+
width: e ? 14 : 40
|
|
40
|
+
}
|
|
41
|
+
)
|
|
42
|
+
] })
|
|
43
|
+
] })
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}, L = h(u);
|
|
26
48
|
export {
|
|
27
|
-
|
|
49
|
+
L as default
|
|
28
50
|
};
|
|
29
51
|
//# sourceMappingURL=input-wrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import type { IInputWrapperProps } from './input-wrapper-types';\n\nimport { memo } 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 Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './input-wrapper-styled';\n\nconst InputWrapper = ({ children, helperText, actionElement, isLoading }: IInputWrapperProps) => {\n return (\n <FlexView
|
|
1
|
+
{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import type { IInputWrapperProps } from './input-wrapper-types';\n\nimport { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport * as Styled from './input-wrapper-styled';\n\nconst InputWrapper = ({ children, helperText, actionElement, isLoading }: IInputWrapperProps) => {\n const theme = useTheme();\n const isMobile = theme.device <= EDeviceType.MOBILE;\n\n return (\n <FlexView\n $flex={1}\n $gutterX={isMobile ? 1.5 : 2}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n >\n {children}\n <Styled.ContentWrapper $alignItems=\"center\" $justifyContent=\"center\">\n {helperText && (\n <FlexView $gutterX={isMobile ? 2.25 : 3.5}>\n <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\" $align=\"center\" $whiteSpace=\"pre-line\">\n {helperText}\n </Text>\n <Separator heightX={0.5} />\n </FlexView>\n )}\n {actionElement && (\n <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n {actionElement}\n <Separator heightX={1} />\n </FlexView>\n )}\n {isLoading && (\n <FlexView>\n <Separator heightX={isMobile ? 0.5 : 2} />\n <LottieAnimation\n src={LOTTIE.SPINNER_WHITE}\n height={isMobile ? 14 : 20}\n width={isMobile ? 14 : 40}\n />\n </FlexView>\n )}\n </Styled.ContentWrapper>\n </FlexView>\n );\n};\n\nexport default memo(InputWrapper);\n"],"names":["InputWrapper","children","helperText","actionElement","isLoading","isMobile","useTheme","EDeviceType","jsxs","FlexView","Styled.ContentWrapper","jsx","Text","Separator","LottieAnimation","LOTTIE","InputWrapper$1","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,eAAAC,GAAe,WAAAC,QAAoC;AAEzF,QAAAC,IADQC,IACS,UAAUC,EAAY;AAG3C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAUJ,IAAW,MAAM;AAAA,MAC3B,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAO;AAAA,MAEN,UAAA;AAAA,QAAAJ;AAAA,0BACAS,GAAA,EAAsB,aAAY,UAAS,iBAAgB,UACzD,UAAA;AAAA,UAAAR,KACE,gBAAAM,EAAAC,GAAA,EAAS,UAAUJ,IAAW,OAAO,KACpC,UAAA;AAAA,YAAC,gBAAAM,EAAAC,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,aAAY,YACnE,UACHV,EAAA,CAAA;AAAA,YACA,gBAAAS,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,UAAA,GAC3B;AAAA,UAEDV,KACE,gBAAAK,EAAAC,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC5C,UAAA;AAAA,YAAAN;AAAA,YACD,gBAAAQ,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,UAAA,GACzB;AAAA,UAEDT,uBACEK,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAE,EAACE,GAAU,EAAA,SAASR,IAAW,MAAM,GAAG;AAAA,YACxC,gBAAAM;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,KAAKC,EAAO;AAAA,gBACZ,QAAQV,IAAW,KAAK;AAAA,gBACxB,OAAOA,IAAW,KAAK;AAAA,cAAA;AAAA,YACzB;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeW,IAAAC,EAAKjB,CAAY;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1256,6 +1256,7 @@ declare interface ICircularStepWrapperProps {
|
|
|
1256
1256
|
isNextLoading?: boolean;
|
|
1257
1257
|
progressAngle?: number;
|
|
1258
1258
|
footerElement?: ReactElement;
|
|
1259
|
+
animationSrcMobile?: string;
|
|
1259
1260
|
}
|
|
1260
1261
|
|
|
1261
1262
|
declare interface IClaimUserAccountProps {
|
|
@@ -2897,6 +2898,7 @@ declare interface IPillButtonProps extends IClickableAnalyticsProps {
|
|
|
2897
2898
|
onClick: (val: string) => void;
|
|
2898
2899
|
tooltip?: string;
|
|
2899
2900
|
width?: number | string;
|
|
2901
|
+
isTransparent?: boolean;
|
|
2900
2902
|
}
|
|
2901
2903
|
|
|
2902
2904
|
declare interface IPlaceholder {
|
|
@@ -4690,6 +4692,7 @@ export declare const LOTTIE: {
|
|
|
4690
4692
|
TOURNAMENT_RIPPLE: string;
|
|
4691
4693
|
TROPHY: string;
|
|
4692
4694
|
USERNAME: string;
|
|
4695
|
+
USERNAME_RESPONSIVE: string;
|
|
4693
4696
|
VICTORY: string;
|
|
4694
4697
|
VIDEO: string;
|
|
4695
4698
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"v":"5.12.1","fr":30,"ip":0,"op":41,"w":1280,"h":1500,"nm":"SCREEN_04.1final lottie 2","ddd":0,"assets":[{"id":"comp_0","nm":"SCREEN_04.1final lottie","fr":30,"layers":[{"ddd":0,"ind":8,"ty":4,"nm":"Crown","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.092,"y":0},"t":0,"s":[640,597.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.373,"y":1},"o":{"x":0.646,"y":0},"t":10,"s":[640,468.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.373,"y":1},"o":{"x":0.651,"y":0},"t":18,"s":[640,487.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.373,"y":0.373},"o":{"x":0.167,"y":0.167},"t":23,"s":[640,483.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0},"t":25,"s":[640,483.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.646,"y":0},"t":30,"s":[640,468.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":40,"s":[640,597.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,32,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-58,32],[-58,-32],[-29,-10],[0,-32],[29,-10],[58,-32],[58,32]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.729411780834,0.027450980619,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Crown","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Ellipse 3683","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":34,"s":[100]},{"t":40,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[639.5,1090,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[580,580],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.145098039216,0.145098039216,0.145098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 3682","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Ellipse 3682","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":34,"s":[100]},{"t":40,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[639.5,1090,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[580,580],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.145098039216,0.145098039216,0.145098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 3682","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"V line","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":34,"s":[100]},{"t":40,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[640,771.5,0],"ix":2,"l":2},"a":{"a":0,"k":[187.5,427.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.5,1025],[0,-463]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6055","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[158.5,430],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6056055","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.5,1025],[0,-463]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6054","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[216.5,430],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6056054","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.5,1025],[0,-463]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6051","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[245.5,430],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6056051","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.5,1025],[0,-463]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6050","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[129.5,425],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6056050","np":1,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.5,1025],[0,-463]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6049","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[187.5,425],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6046049","np":1,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"H line","parent":8,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[2]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":30,"s":[100]},{"t":40,"s":[2]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0.5,0],"ix":2,"l":2},"a":{"a":0,"k":[187.5,108,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[673.5,0.102],[-763.5,0.102]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6052","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[187.5,140],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6056052","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[673.5,0.102],[-763.5,0.102]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6053","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[187.5,98],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6056053","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[673.5,0.102],[-763.5,0.102]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.180000007153],"ix":3},"o":{"a":0,"k":18,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6041","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[187.5,76],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Vector 6046041","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0}]}],"layers":[{"ddd":0,"ind":2,"ty":0,"nm":"SCREEN_04.1final lottie","cl":"1final","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":640,"ix":3},"y":{"a":0,"k":406,"ix":4}},"a":{"a":0,"k":[640,750,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1280,"h":1500,"ip":0,"op":300,"st":0,"bm":0}],"markers":[],"props":{}}
|