@cuemath/leap 3.2.17-j1 → 3.2.17-mb
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/illustrations/illustrations.js +0 -5
- package/dist/assets/illustrations/illustrations.js.map +1 -1
- package/dist/assets/lottie/lottie.js +1 -11
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/auth/account-selector/account-selector.js +25 -26
- package/dist/features/auth/account-selector/account-selector.js.map +1 -1
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js +14 -20
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js.map +1 -1
- package/dist/features/auth/comps/resend-otp/resend-otp.js +47 -54
- package/dist/features/auth/comps/resend-otp/resend-otp.js.map +1 -1
- package/dist/features/auth/comps/tabs/tab-tem/tab-item.js +17 -29
- package/dist/features/auth/comps/tabs/tab-tem/tab-item.js.map +1 -1
- package/dist/features/auth/comps/tabs/tabs-styled.js +10 -22
- package/dist/features/auth/comps/tabs/tabs-styled.js.map +1 -1
- package/dist/features/auth/comps/tabs/tabs.js +5 -5
- package/dist/features/auth/comps/tabs/tabs.js.map +1 -1
- package/dist/features/auth/comps/user-list/user-item/user-item.js +31 -30
- package/dist/features/auth/comps/user-list/user-item/user-item.js.map +1 -1
- package/dist/features/auth/comps/user-list/user-list.js +34 -35
- package/dist/features/auth/comps/user-list/user-list.js.map +1 -1
- package/dist/features/auth/forgot-password/forgot-password-styled.js +15 -14
- package/dist/features/auth/forgot-password/forgot-password-styled.js.map +1 -1
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js +7 -6
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js.map +1 -1
- package/dist/features/auth/login/login-styled.js +9 -8
- package/dist/features/auth/login/login-styled.js.map +1 -1
- package/dist/features/chapters-v2/utils/node-card-utils.js +7 -7
- package/dist/features/chapters-v2/utils/node-card-utils.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +4 -4
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js.map +1 -1
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +85 -85
- package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js +98 -121
- package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js.map +1 -1
- package/dist/features/circle-games/game-launcher/hooks/use-table-infinite-launcher-journey/use-table-infinite-launcher-journey.js +28 -29
- package/dist/features/circle-games/game-launcher/hooks/use-table-infinite-launcher-journey/use-table-infinite-launcher-journey.js.map +1 -1
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js +42 -43
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +1 -1
- package/dist/features/circle-games/games/tutorial/tutorial.js +35 -43
- package/dist/features/circle-games/games/tutorial/tutorial.js.map +1 -1
- package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js +2 -2
- package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js.map +1 -1
- package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js +1 -1
- package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js.map +1 -1
- package/dist/features/circle-games/sign-up/comp/username-input/username-input.js +24 -26
- package/dist/features/circle-games/sign-up/comp/username-input/username-input.js.map +1 -1
- package/dist/features/circle-games/sign-up/constants.js +1 -3
- package/dist/features/circle-games/sign-up/constants.js.map +1 -1
- package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js +42 -42
- package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map +1 -1
- package/dist/features/hooks/use-viewport/use-viewport.js +22 -0
- package/dist/features/hooks/use-viewport/use-viewport.js.map +1 -0
- package/dist/features/journey/comps/coachmark/coachmark.js +27 -29
- package/dist/features/journey/comps/coachmark/coachmark.js.map +1 -1
- package/dist/features/journey/journey-id/journey-id-student.js +2 -2
- package/dist/features/journey/journey-id/journey-id-student.js.map +1 -1
- package/dist/features/journey/use-journey/journey-context-provider.js +72 -73
- package/dist/features/journey/use-journey/journey-context-provider.js.map +1 -1
- package/dist/features/journey/use-journey/journey-styled.js +4 -6
- package/dist/features/journey/use-journey/journey-styled.js.map +1 -1
- package/dist/features/stickers/sticker-data.js +234 -0
- package/dist/features/stickers/sticker-data.js.map +1 -0
- package/dist/features/{ui/sticker-grid/sticker-grid-styles.js → stickers/sticker-selector/sticker-selector-styles.js} +4 -3
- package/dist/features/stickers/sticker-selector/sticker-selector-styles.js.map +1 -0
- package/dist/features/stickers/sticker-selector/sticker-selector.js +25 -0
- package/dist/features/stickers/sticker-selector/sticker-selector.js.map +1 -0
- package/dist/features/stickers/sticker-selector/sticker.js +57 -0
- package/dist/features/stickers/sticker-selector/sticker.js.map +1 -0
- package/dist/features/{ui/stickers/stickers-effects.js → stickers/stickers-effects/effects.js} +6 -6
- package/dist/features/stickers/stickers-effects/effects.js.map +1 -0
- package/dist/features/{ui/stickers/stickers-styled.js → stickers/stickers-effects/stickers-effects-styled.js} +2 -2
- package/dist/features/stickers/stickers-effects/stickers-effects-styled.js.map +1 -0
- package/dist/features/{ui/stickers/stickers-utils.js → stickers/stickers-effects/stickers-effects-utils.js} +6 -6
- package/dist/features/stickers/stickers-effects/stickers-effects-utils.js.map +1 -0
- package/dist/features/stickers/stickers-effects/stickers-effects.js +39 -0
- package/dist/features/stickers/stickers-effects/stickers-effects.js.map +1 -0
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js +60 -12
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js.map +1 -1
- package/dist/features/ui/arrow-tooltip/arrow-tooltip.js +77 -72
- package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map +1 -1
- package/dist/features/ui/error/error.js +27 -65
- package/dist/features/ui/error/error.js.map +1 -1
- package/dist/features/ui/image/image.js +1 -1
- package/dist/features/ui/image/image.js.map +1 -1
- package/dist/features/ui/lottie-animation/lottie-animation.js +29 -25
- package/dist/features/ui/lottie-animation/lottie-animation.js.map +1 -1
- package/dist/features/ui/modals/modal-styled.js +58 -34
- package/dist/features/ui/modals/modal-styled.js.map +1 -1
- package/dist/features/ui/modals/modal.js +14 -40
- package/dist/features/ui/modals/modal.js.map +1 -1
- package/dist/features/ui/nudge/nudge-styled.js +7 -14
- package/dist/features/ui/nudge/nudge-styled.js.map +1 -1
- package/dist/features/ui/nudge/nudge.js +12 -13
- package/dist/features/ui/nudge/nudge.js.map +1 -1
- package/dist/features/ui/streak-icon/streak-icon-styled.js +13 -13
- package/dist/features/ui/streak-icon/streak-icon-styled.js.map +1 -1
- package/dist/features/ui/streak-icon/streak-icon.js +15 -17
- package/dist/features/ui/streak-icon/streak-icon.js.map +1 -1
- package/dist/features/ui/text/text.js +36 -40
- package/dist/features/ui/text/text.js.map +1 -1
- package/dist/features/ui/theme/button.js +78 -78
- package/dist/features/ui/theme/button.js.map +1 -1
- package/dist/features/ui/theme/constants.js +2 -4
- package/dist/features/ui/theme/constants.js.map +1 -1
- package/dist/features/ui/theme/get-device.js +3 -3
- package/dist/features/ui/theme/get-device.js.map +1 -1
- package/dist/features/worksheet/worksheet/constants.js +13 -12
- package/dist/features/worksheet/worksheet/constants.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-question/learnosity-question.js +24 -24
- package/dist/features/worksheet/worksheet/worksheet-question/learnosity-question.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js +260 -246
- package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-styled.js +28 -37
- package/dist/features/worksheet/worksheet/worksheet-styled.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet.js +164 -166
- package/dist/features/worksheet/worksheet/worksheet.js.map +1 -1
- package/dist/index.d.ts +55 -184
- package/dist/index.js +541 -579
- package/dist/index.js.map +1 -1
- package/dist/node_modules/query-string/base.js +1 -1
- package/dist/node_modules/query-string/node_modules/decode-uri-component/index.js.map +1 -0
- package/dist/node_modules/uuid/dist/esm-browser/regex.js +5 -0
- package/dist/node_modules/uuid/dist/esm-browser/regex.js.map +1 -0
- package/dist/node_modules/uuid/dist/esm-browser/rng.js +2 -3
- package/dist/node_modules/uuid/dist/esm-browser/rng.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/stringify.js +10 -6
- package/dist/node_modules/uuid/dist/esm-browser/stringify.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/v4.js +9 -12
- package/dist/node_modules/uuid/dist/esm-browser/v4.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/validate.js +8 -0
- package/dist/node_modules/uuid/dist/esm-browser/validate.js.map +1 -0
- package/dist/static/nudge-tap.5cb30093.json +1057 -0
- package/package.json +1 -1
- package/dist/assets/line-icons/icons/after-noon.js +0 -34
- package/dist/assets/line-icons/icons/after-noon.js.map +0 -1
- package/dist/assets/line-icons/icons/apple-icon-white.js +0 -42
- package/dist/assets/line-icons/icons/apple-icon-white.js.map +0 -1
- package/dist/assets/line-icons/icons/cue-board-filled.js +0 -33
- package/dist/assets/line-icons/icons/cue-board-filled.js.map +0 -1
- package/dist/assets/line-icons/icons/cue-board.js +0 -23
- package/dist/assets/line-icons/icons/cue-board.js.map +0 -1
- package/dist/assets/line-icons/icons/evening.js +0 -35
- package/dist/assets/line-icons/icons/evening.js.map +0 -1
- package/dist/assets/line-icons/icons/hint-fill.js +0 -35
- package/dist/assets/line-icons/icons/hint-fill.js.map +0 -1
- package/dist/assets/line-icons/icons/morning.js +0 -35
- package/dist/assets/line-icons/icons/morning.js.map +0 -1
- package/dist/assets/line-icons/icons/screen-grab-filled.js +0 -35
- package/dist/assets/line-icons/icons/screen-grab-filled.js.map +0 -1
- package/dist/assets/line-icons/icons/screen-grab.js +0 -23
- package/dist/assets/line-icons/icons/screen-grab.js.map +0 -1
- package/dist/assets/line-icons/icons/sticker-filled.js +0 -64
- package/dist/assets/line-icons/icons/sticker-filled.js.map +0 -1
- package/dist/assets/line-icons/icons/sticker.js +0 -46
- package/dist/assets/line-icons/icons/sticker.js.map +0 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js +0 -9
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js.map +0 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js +0 -52
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map +0 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js +0 -95
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map +0 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js +0 -10
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js.map +0 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js +0 -17
- package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js.map +0 -1
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js +0 -12
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js.map +0 -1
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js +0 -34
- package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js.map +0 -1
- package/dist/features/auth/comps/otp-input/otp-input-styled.js +0 -22
- package/dist/features/auth/comps/otp-input/otp-input-styled.js.map +0 -1
- package/dist/features/auth/comps/otp-input/otp-input.js +0 -51
- package/dist/features/auth/comps/otp-input/otp-input.js.map +0 -1
- package/dist/features/auth/comps/pill-button/pill-button-styled.js +0 -44
- package/dist/features/auth/comps/pill-button/pill-button-styled.js.map +0 -1
- package/dist/features/auth/comps/pill-button/pill-button.js +0 -75
- package/dist/features/auth/comps/pill-button/pill-button.js.map +0 -1
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js +0 -17
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js.map +0 -1
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js +0 -67
- package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js.map +0 -1
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js +0 -19
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js.map +0 -1
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.js +0 -32
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.js.map +0 -1
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js +0 -44
- package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js.map +0 -1
- package/dist/features/auth/pla-signup/signup-header/signup-header.js +0 -54
- package/dist/features/auth/pla-signup/signup-header/signup-header.js.map +0 -1
- package/dist/features/auth/pla-signup/signup-options/signup-options.js +0 -83
- package/dist/features/auth/pla-signup/signup-options/signup-options.js.map +0 -1
- package/dist/features/puzzles/app/puzzle-app-styled.js +0 -81
- package/dist/features/puzzles/app/puzzle-app-styled.js.map +0 -1
- package/dist/features/puzzles/app/puzzle-app-view.js +0 -120
- package/dist/features/puzzles/app/puzzle-app-view.js.map +0 -1
- package/dist/features/puzzles/app/puzzle-app.js +0 -62
- package/dist/features/puzzles/app/puzzle-app.js.map +0 -1
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-constants.js +0 -6
- package/dist/features/ui/arrow-tooltip/arrow-tooltip-constants.js.map +0 -1
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body-styled.js +0 -63
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body-styled.js.map +0 -1
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body.js +0 -21
- package/dist/features/ui/arrow-tooltip/comps/tooltip-body.js.map +0 -1
- package/dist/features/ui/drawer/drawer-styled.js +0 -34
- package/dist/features/ui/drawer/drawer-styled.js.map +0 -1
- package/dist/features/ui/drawer/drawer.js +0 -42
- package/dist/features/ui/drawer/drawer.js.map +0 -1
- package/dist/features/ui/sticker-grid/sticker-grid-styles.js.map +0 -1
- package/dist/features/ui/sticker-grid/sticker-grid.js +0 -24
- package/dist/features/ui/sticker-grid/sticker-grid.js.map +0 -1
- package/dist/features/ui/sticker-grid/sticker.js +0 -57
- package/dist/features/ui/sticker-grid/sticker.js.map +0 -1
- package/dist/features/ui/stickers/constants.js +0 -6
- package/dist/features/ui/stickers/constants.js.map +0 -1
- package/dist/features/ui/stickers/stickers-effects.js.map +0 -1
- package/dist/features/ui/stickers/stickers-styled.js.map +0 -1
- package/dist/features/ui/stickers/stickers-utils.js.map +0 -1
- package/dist/features/ui/stickers/stickers.js +0 -40
- package/dist/features/ui/stickers/stickers.js.map +0 -1
- package/dist/node_modules/decode-uri-component/index.js.map +0 -1
- package/dist/node_modules/uuid/dist/esm-browser/native.js +0 -7
- package/dist/node_modules/uuid/dist/esm-browser/native.js.map +0 -1
- package/dist/static/animated-avatar.1ad58b1d.json +0 -1
- package/dist/static/animated-avatar.69b07505.json +0 -1
- package/dist/static/animated-avatar.9c560b46.json +0 -1
- package/dist/static/calendar-purple.1a840b41.svg +0 -1
- package/dist/static/flying-disk.c7f6ed39.json +0 -1
- package/dist/static/graduation-cap.3be3340a.json +0 -1
- package/dist/static/handshake.287e7dfb.svg +0 -1
- package/dist/static/light-bulb.c6db0b23.json +0 -1
- package/dist/static/money.332aacf1.svg +0 -1
- package/dist/static/muscle.9bcfb8a7.json +0 -1
- package/dist/static/nudge-tap.0591aef4.json +0 -1
- package/dist/static/parent-avatar.822c7b9b.svg +0 -1
- package/dist/static/pencil.23df9da0.json +0 -1
- package/dist/static/plus-sign.de6af957.json +0 -1
- package/dist/static/racing-car.2cbf864e.json +0 -1
- package/dist/static/rocket.0a3ccab0.json +0 -1
- package/dist/static/shovel.abeec04c.json +0 -1
- package/dist/static/trustpilot.bd3d79e1.svg +0 -1
- /package/dist/node_modules/{decode-uri-component → query-string/node_modules/decode-uri-component}/index.js +0 -0
@@ -0,0 +1,57 @@
|
|
1
|
+
import { jsxs as v, jsx as c } from "react/jsx-runtime";
|
2
|
+
import { memo as L, useState as f, useRef as $, useCallback as o, useEffect as g } from "react";
|
3
|
+
import k from "../../ui/lottie-animation/lottie-animation.js";
|
4
|
+
import { StickerContainer as E, StaticEmoji as M, LottieContainer as R } from "./sticker-selector-styles.js";
|
5
|
+
const j = ({
|
6
|
+
emoji: l,
|
7
|
+
lottieUrl: u,
|
8
|
+
size: n = 48,
|
9
|
+
onClick: s,
|
10
|
+
disabled: e = !1
|
11
|
+
}) => {
|
12
|
+
const [i, m] = f(!1), [r, a] = f(!1), t = $(null), p = o(() => {
|
13
|
+
t.current && (t.current.goToAndStop(0, !0), m(!0), r && t.current.play());
|
14
|
+
}, [r]);
|
15
|
+
g(() => {
|
16
|
+
!t.current || !i || (r ? t.current.play() : t.current.goToAndStop(0, !0));
|
17
|
+
}, [r, i]);
|
18
|
+
const d = o(() => {
|
19
|
+
e || a(!0);
|
20
|
+
}, [e]), h = o(() => {
|
21
|
+
e || a(!1);
|
22
|
+
}, [e]), S = o(() => {
|
23
|
+
!e && s && s();
|
24
|
+
}, [e, s]);
|
25
|
+
return /* @__PURE__ */ v(
|
26
|
+
E,
|
27
|
+
{
|
28
|
+
$size: n,
|
29
|
+
$disabled: e,
|
30
|
+
onMouseEnter: d,
|
31
|
+
onMouseLeave: h,
|
32
|
+
onClick: S,
|
33
|
+
children: [
|
34
|
+
!r && /* @__PURE__ */ c(M, { $size: n, children: l }),
|
35
|
+
/* @__PURE__ */ c(R, { $size: n, $visible: i, children: u && r && /* @__PURE__ */ c(
|
36
|
+
k,
|
37
|
+
{
|
38
|
+
ref: t,
|
39
|
+
src: u,
|
40
|
+
width: "100%",
|
41
|
+
height: "100%",
|
42
|
+
settings: {
|
43
|
+
loop: !0,
|
44
|
+
autoplay: !1,
|
45
|
+
renderer: "canvas"
|
46
|
+
},
|
47
|
+
onRender: p
|
48
|
+
}
|
49
|
+
) })
|
50
|
+
]
|
51
|
+
}
|
52
|
+
);
|
53
|
+
}, H = L(j);
|
54
|
+
export {
|
55
|
+
H as default
|
56
|
+
};
|
57
|
+
//# sourceMappingURL=sticker.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"sticker.js","sources":["../../../../src/features/stickers/sticker-selector/sticker.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IStickerProps } from './sticker-selector-types';\n\nimport React, { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport * as S from './sticker-selector-styles';\n\nconst Sticker: React.FC<IStickerProps> = ({\n emoji,\n lottieUrl,\n size = 48,\n onClick,\n disabled = false,\n}) => {\n const [isLoaded, setIsLoaded] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const lottieRef = useRef<ILottieAnimationRef>(null);\n\n const handleRender = useCallback(() => {\n if (!lottieRef.current) return;\n\n lottieRef.current.goToAndStop(0, true);\n setIsLoaded(true);\n\n if (isHovered) lottieRef.current.play();\n }, [isHovered]);\n\n useEffect(() => {\n if (!lottieRef.current || !isLoaded) return;\n\n if (isHovered) {\n lottieRef.current.play();\n } else {\n lottieRef.current.goToAndStop(0, true);\n }\n }, [isHovered, isLoaded]);\n\n const handleMouseEnter = useCallback(() => {\n if (!disabled) setIsHovered(true);\n }, [disabled]);\n\n const handleMouseLeave = useCallback(() => {\n if (!disabled) setIsHovered(false);\n }, [disabled]);\n\n const handleClick = useCallback(() => {\n if (!disabled && onClick) onClick();\n }, [disabled, onClick]);\n\n return (\n <S.StickerContainer\n $size={size}\n $disabled={disabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onClick={handleClick}\n >\n {!isHovered && <S.StaticEmoji $size={size}>{emoji}</S.StaticEmoji>}\n\n <S.LottieContainer $size={size} $visible={isLoaded}>\n {lottieUrl && isHovered && (\n <LottieAnimation\n ref={lottieRef}\n src={lottieUrl}\n width=\"100%\"\n height=\"100%\"\n settings={{\n loop: true,\n autoplay: false,\n renderer: 'canvas',\n }}\n onRender={handleRender}\n />\n )}\n </S.LottieContainer>\n </S.StickerContainer>\n );\n};\n\nexport default memo(Sticker);\n"],"names":["Sticker","emoji","lottieUrl","size","onClick","disabled","isLoaded","setIsLoaded","useState","isHovered","setIsHovered","lottieRef","useRef","handleRender","useCallback","useEffect","handleMouseEnter","handleMouseLeave","handleClick","jsxs","S.StickerContainer","jsx","S.StaticEmoji","S.LottieContainer","LottieAnimation","Sticker$1","memo"],"mappings":";;;;AAQA,MAAMA,IAAmC,CAAC;AAAA,EACxC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1CG,IAAYC,EAA4B,IAAI,GAE5CC,IAAeC,EAAY,MAAM;AACjC,IAACH,EAAU,YAELA,EAAA,QAAQ,YAAY,GAAG,EAAI,GACrCJ,EAAY,EAAI,GAEZE,KAAqBE,EAAA,QAAQ,KAAK;AAAA,EAAA,GACrC,CAACF,CAAS,CAAC;AAEd,EAAAM,EAAU,MAAM;AACd,IAAI,CAACJ,EAAU,WAAW,CAACL,MAEvBG,IACFE,EAAU,QAAQ,SAERA,EAAA,QAAQ,YAAY,GAAG,EAAI;AAAA,EACvC,GACC,CAACF,GAAWH,CAAQ,CAAC;AAElB,QAAAU,IAAmBF,EAAY,MAAM;AACrC,IAACT,KAAUK,EAAa,EAAI;AAAA,EAAA,GAC/B,CAACL,CAAQ,CAAC,GAEPY,IAAmBH,EAAY,MAAM;AACrC,IAACT,KAAUK,EAAa,EAAK;AAAA,EAAA,GAChC,CAACL,CAAQ,CAAC,GAEPa,IAAcJ,EAAY,MAAM;AAChC,IAAA,CAACT,KAAYD,KAAiBA;EAAA,GACjC,CAACC,GAAUD,CAAO,CAAC;AAGpB,SAAA,gBAAAe;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAOjB;AAAA,MACP,WAAWE;AAAA,MACX,cAAcW;AAAA,MACd,cAAcC;AAAA,MACd,SAASC;AAAA,MAER,UAAA;AAAA,QAAA,CAACT,KAAc,gBAAAY,EAAAC,GAAA,EAAc,OAAOnB,GAAO,UAAMF,GAAA;AAAA,QAElD,gBAAAoB,EAACE,GAAA,EAAkB,OAAOpB,GAAM,UAAUG,GACvC,UAAAJ,KAAaO,KACZ,gBAAAY;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,KAAKb;AAAA,YACL,KAAKT;AAAA,YACL,OAAM;AAAA,YACN,QAAO;AAAA,YACP,UAAU;AAAA,cACR,MAAM;AAAA,cACN,UAAU;AAAA,cACV,UAAU;AAAA,YACZ;AAAA,YACA,UAAUW;AAAA,UAAA;AAAA,QAAA,GAGhB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeY,IAAAC,EAAK1B,CAAO;"}
|
package/dist/features/{ui/stickers/stickers-effects.js → stickers/stickers-effects/effects.js}
RENAMED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { keyframes as r, css as t } from "styled-components";
|
2
|
-
import { randomizeDuration as o } from "./stickers-utils.js";
|
2
|
+
import { randomizeDuration as o } from "./stickers-effects-utils.js";
|
3
3
|
const s = r`
|
4
4
|
0% {
|
5
5
|
transform: translateY(0vh);
|
@@ -45,20 +45,20 @@ const s = r`
|
|
45
45
|
opacity: 0;
|
46
46
|
}
|
47
47
|
`, i = {
|
48
|
-
|
48
|
+
"float-up": (a) => t`
|
49
49
|
animation: ${s} ${o(a)}ms ease-out forwards;
|
50
50
|
`,
|
51
|
-
|
51
|
+
"fall-down": (a) => t`
|
52
52
|
animation: ${n} ${o(a)}ms ease-out forwards;
|
53
53
|
`,
|
54
|
-
|
54
|
+
"burst-from-edges": (a) => t`
|
55
55
|
animation: ${e} ${o(a)}ms linear forwards;
|
56
56
|
`,
|
57
|
-
|
57
|
+
"pop-expand": (a) => t`
|
58
58
|
animation: ${m} ${a}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;
|
59
59
|
`
|
60
60
|
};
|
61
61
|
export {
|
62
62
|
i as effectAnimations
|
63
63
|
};
|
64
|
-
//# sourceMappingURL=
|
64
|
+
//# sourceMappingURL=effects.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"effects.js","sources":["../../../../src/features/stickers/stickers-effects/effects.ts"],"sourcesContent":["import type { IStickersProps } from './stickers-effects-types';\n\nimport { keyframes, css } from 'styled-components';\n\nimport { randomizeDuration } from './stickers-effects-utils';\n\nconst floatUp = keyframes`\n 0% {\n transform: translateY(0vh);\n opacity: 1;\n }\n 100% {\n transform: translateY(-100vh);\n opacity: 0;\n }\n`;\n\nconst fallDown = keyframes`\n 0% {\n transform: translateY(0vh);\n opacity: 1;\n }\n 100% {\n transform: translateY(100vh);\n opacity: 0;\n }\n`;\n\nconst burstFromEdges = keyframes`\n 0% {\n transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateX(0vw) translateY(0vh) scale(1.25);\n opacity: 0;\n }\n`;\n\nconst popExpand = keyframes`\n 0% {\n transform: translateX(0) translateY(0vh);\n opacity: 1;\n }\n 35% {\n transform: translateX(0) translateY(-50vh) scale(1.25);\n opacity: 1;\n }\n 60% {\n transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1.25);\n opacity: 0.75;\n }\n 100% {\n transform: translateX(var(--from-x)) translateY(-110vh) scale(1.25);\n opacity: 0;\n }\n`;\n\nexport const effectAnimations: Record<\n IStickersProps['effect'],\n (duration: number) => ReturnType<typeof css>\n> = {\n 'float-up': (duration: number) => css`\n animation: ${floatUp} ${randomizeDuration(duration)}ms ease-out forwards;\n `,\n 'fall-down': (duration: number) => css`\n animation: ${fallDown} ${randomizeDuration(duration)}ms ease-out forwards;\n `,\n 'burst-from-edges': (duration: number) => css`\n animation: ${burstFromEdges} ${randomizeDuration(duration)}ms linear forwards;\n `,\n 'pop-expand': (duration: number) => css`\n animation: ${popExpand} ${duration}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;\n `,\n};\n"],"names":["floatUp","keyframes","fallDown","burstFromEdges","popExpand","effectAnimations","duration","css","randomizeDuration"],"mappings":";;AAMA,MAAMA,IAAUC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWVC,IAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWXE,IAAiBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjBG,IAAYH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBLI,IAGT;AAAA,EACF,YAAY,CAACC,MAAqBC;AAAA,iBACnBP,CAAO,IAAIQ,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAErD,aAAa,CAACA,MAAqBC;AAAA,iBACpBL,CAAQ,IAAIM,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAEtD,oBAAoB,CAACA,MAAqBC;AAAA,iBAC3BJ,CAAc,IAAIK,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAE5D,cAAc,CAACA,MAAqBC;AAAA,iBACrBH,CAAS,IAAIE,CAAQ;AAAA;AAEtC;"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import $, { css as s } from "styled-components";
|
2
|
-
import { effectAnimations as n } from "./
|
2
|
+
import { effectAnimations as n } from "./effects.js";
|
3
3
|
const h = $.div`
|
4
4
|
position: relative;
|
5
5
|
width: 100vw;
|
@@ -26,4 +26,4 @@ export {
|
|
26
26
|
h as Container,
|
27
27
|
a as Sticker
|
28
28
|
};
|
29
|
-
//# sourceMappingURL=stickers-styled.js.map
|
29
|
+
//# sourceMappingURL=stickers-effects-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"stickers-effects-styled.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects-styled.ts"],"sourcesContent":["import type { IStickersProps } from './stickers-effects-types';\n\nimport styled, { css } from 'styled-components';\n\nimport { effectAnimations } from './effects';\n\nexport const Container = styled.div`\n position: relative;\n width: 100vw;\n height: 100vh;\n background: transparent;\n pointer-events: none;\n`;\n\nexport const Sticker = styled.div<{\n effect: IStickersProps['effect'];\n duration: number;\n fromX?: string;\n fromY?: string;\n x: number;\n y: number;\n size: number;\n}>`\n position: absolute;\n z-index: 10;\n\n left: ${({ x }) => `${x}%`};\n top: ${({ y }) => `${y}%`};\n width: ${({ size }) => `${size}px`};\n height: ${({ size }) => `${size}px`};\n font-size: ${({ size }) => `${size}px`};\n\n ${({ effect, duration, fromX, fromY }) =>\n fromX && fromY\n ? css`\n ${effectAnimations[effect](duration)}\n --from-x: ${fromX};\n --from-y: ${fromY};\n `\n : effectAnimations[effect](duration)}\n`;\n"],"names":["Container","styled","Sticker","x","y","size","effect","duration","fromX","fromY","css","effectAnimations"],"mappings":";;AAMO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBC,IAAUD,EAAO;AAAA;AAAA;AAAA;AAAA,UAYpB,CAAC,EAAE,GAAAE,EAAQ,MAAA,GAAGA,CAAC,GAAG;AAAA,SACnB,CAAC,EAAE,GAAAC,EAAQ,MAAA,GAAGA,CAAC,GAAG;AAAA,WAChB,CAAC,EAAE,MAAAC,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA,YACxB,CAAC,EAAE,MAAAA,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA,eACtB,CAAC,EAAE,MAAAA,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA;AAAA,IAEpC,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,OAAAC,GAAO,OAAAC,QAC5BD,KAASC,IACLC;AAAA,YACIC,EAAiBL,CAAM,EAAEC,CAAQ,CAAC;AAAA,sBACxBC,CAAK;AAAA,sBACLC,CAAK;AAAA,YAEnBE,EAAiBL,CAAM,EAAEC,CAAQ,CAAC;AAAA;"}
|
@@ -40,10 +40,10 @@ function x({
|
|
40
40
|
minSize: r,
|
41
41
|
maxSize: d
|
42
42
|
}) {
|
43
|
-
const c = 100 / n * 2, M = () => Math.random() * (d - r) + r, h = [], i = ["
|
43
|
+
const c = 100 / n * 2, M = () => Math.random() * (d - r) + r, h = [], i = ["float-up", "fall-down"].includes(s) ? g(n, c) : [];
|
44
44
|
for (let o = 0; o < n; o++) {
|
45
45
|
const a = t[o % t.length] ?? "", e = M();
|
46
|
-
if (s === "
|
46
|
+
if (s === "float-up")
|
47
47
|
h.push({
|
48
48
|
id: o,
|
49
49
|
sticker: a,
|
@@ -51,7 +51,7 @@ function x({
|
|
51
51
|
y: 110 + (Math.random() - 0.5) * e,
|
52
52
|
size: e
|
53
53
|
});
|
54
|
-
else if (s === "
|
54
|
+
else if (s === "fall-down")
|
55
55
|
h.push({
|
56
56
|
id: o,
|
57
57
|
sticker: a,
|
@@ -59,10 +59,10 @@ function x({
|
|
59
59
|
y: -10 + (Math.random() - 0.5) * e,
|
60
60
|
size: e
|
61
61
|
});
|
62
|
-
else if (s === "
|
62
|
+
else if (s === "burst-from-edges") {
|
63
63
|
const { x: l, y: m, fromX: p, fromY: u } = f(o, n);
|
64
64
|
h.push({ id: o, sticker: a, x: l, y: m, fromX: p, fromY: u, size: e });
|
65
|
-
} else s === "
|
65
|
+
} else s === "pop-expand" ? h.push({
|
66
66
|
id: o,
|
67
67
|
sticker: a,
|
68
68
|
x: 50,
|
@@ -88,4 +88,4 @@ export {
|
|
88
88
|
x as generateStickerData,
|
89
89
|
v as randomizeDuration
|
90
90
|
};
|
91
|
-
//# sourceMappingURL=stickers-utils.js.map
|
91
|
+
//# sourceMappingURL=stickers-effects-utils.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"stickers-effects-utils.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects-utils.ts"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nconst getBurstPosition = (\n index: number,\n total: number,\n): {\n fromX: string;\n fromY: string;\n x: number;\n y: number;\n} => {\n const countPerSide = Math.ceil(total / 4);\n const sideIndex = Math.floor(index / countPerSide);\n const pos = index % countPerSide;\n\n const sides = ['top', 'right', 'bottom', 'left'] as const;\n const side = sides[sideIndex] ?? 'left';\n\n const basePercent = ((pos + 0.5) / countPerSide) * 100;\n const jitter = (Math.random() - 0.5) * 25;\n const edgePercent = Math.min(Math.max(basePercent + jitter, 0), 100);\n\n const centerX = 45 + Math.random() * 10;\n const centerY = 45 + Math.random() * 10;\n\n let fromX = 0;\n let fromY = 0;\n\n switch (side) {\n case 'top':\n fromX = edgePercent - centerX;\n fromY = -centerY + jitter;\n break;\n case 'right':\n fromX = 100 - centerX + jitter;\n fromY = edgePercent - centerY;\n break;\n case 'bottom':\n fromX = edgePercent - centerX;\n fromY = 100 - centerY + jitter;\n break;\n case 'left':\n fromX = -centerX + jitter;\n fromY = edgePercent - centerY;\n break;\n }\n\n return {\n fromX: `${fromX}vw`,\n fromY: `${fromY}vh`,\n x: centerX,\n y: centerY,\n };\n};\n\nconst getRandomNonOverlappingPositions = (count: number, buffer = 10): number[] => {\n const used: number[] = [];\n let attempts = 0;\n const maxAttempts = count;\n\n while (used.length < count && attempts < maxAttempts) {\n const value = Math.floor(Math.random() * (100 - 2 * buffer) + buffer);\n\n if (used.every(v => Math.abs(v - value) >= buffer)) {\n used.push(value);\n }\n attempts++;\n }\n\n while (used.length < count) {\n used.push(Math.floor(Math.random() * (100 - 2 * buffer) + buffer));\n }\n\n return used;\n};\n\nexport function generateStickerData({\n count,\n effect,\n stickers,\n minSize,\n maxSize,\n}: {\n count: number;\n effect: IStickersProps['effect'];\n stickers: string[];\n minSize: number;\n maxSize: number;\n}): TStickerData[] {\n const buffer = (100 / count) * 2;\n const getSize = () => Math.random() * (maxSize - minSize) + minSize;\n const result: TStickerData[] = [];\n const xPositions = ['float-up', 'fall-down'].includes(effect)\n ? getRandomNonOverlappingPositions(count, buffer)\n : [];\n\n for (let i = 0; i < count; i++) {\n const sticker = stickers[i % stickers.length] ?? '';\n const size = getSize();\n\n if (effect === 'float-up') {\n result.push({\n id: i,\n sticker,\n x: xPositions[i]!,\n y: 110 + (Math.random() - 0.5) * size,\n size,\n });\n } else if (effect === 'fall-down') {\n result.push({\n id: i,\n sticker,\n x: xPositions[i]!,\n y: -10 + (Math.random() - 0.5) * size,\n size,\n });\n } else if (effect === 'burst-from-edges') {\n const { x, y, fromX, fromY } = getBurstPosition(i, count);\n\n result.push({ id: i, sticker, x, y, fromX, fromY, size });\n } else if (effect === 'pop-expand') {\n result.push({\n id: i,\n sticker,\n x: 50,\n y: 100,\n fromX: `${(Math.random() - 0.5) * 27.5}vw`,\n fromY: `${-50 - Math.random() * 27.5}vh`,\n size,\n });\n } else {\n result.push({\n id: i,\n sticker,\n x: Math.random() * 100,\n y: Math.random() * 100,\n size,\n });\n }\n }\n\n return result;\n}\n\nexport const randomizeDuration = (base: number, variancePercent = 0.2): number => {\n const delta = base * variancePercent;\n const min = base - delta;\n const max = base + delta;\n\n return Math.floor(Math.random() * (max - min + 1)) + min;\n};\n"],"names":["getBurstPosition","index","total","countPerSide","sideIndex","pos","side","basePercent","jitter","edgePercent","centerX","centerY","fromX","fromY","getRandomNonOverlappingPositions","count","buffer","used","attempts","maxAttempts","value","v","generateStickerData","effect","stickers","minSize","maxSize","getSize","result","xPositions","i","sticker","size","x","y","randomizeDuration","base","variancePercent","delta","min","max"],"mappings":"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"}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
2
|
+
import { memo as l, useState as x, useEffect as D } from "react";
|
3
|
+
import { Container as z, Sticker as E } from "./stickers-effects-styled.js";
|
4
|
+
import { generateStickerData as d } from "./stickers-effects-utils.js";
|
5
|
+
const h = ({ stickers: i, effect: t, count: o, duration: e }) => {
|
6
|
+
const [a, m] = x([]);
|
7
|
+
return D(() => {
|
8
|
+
const r = d({
|
9
|
+
count: o,
|
10
|
+
effect: t,
|
11
|
+
stickers: i,
|
12
|
+
minSize: 32,
|
13
|
+
maxSize: 48
|
14
|
+
});
|
15
|
+
m(r);
|
16
|
+
const s = setTimeout(() => m([]), e);
|
17
|
+
return () => clearTimeout(s);
|
18
|
+
}, [i, t, o, e]), /* @__PURE__ */ c(z, { children: a.map((r) => {
|
19
|
+
const { id: s, sticker: n, x: f, y: k, size: S, fromX: p, fromY: u } = r;
|
20
|
+
return /* @__PURE__ */ c(
|
21
|
+
E,
|
22
|
+
{
|
23
|
+
effect: t,
|
24
|
+
duration: e,
|
25
|
+
fromX: p,
|
26
|
+
fromY: u,
|
27
|
+
x: f,
|
28
|
+
y: k,
|
29
|
+
size: S,
|
30
|
+
children: n
|
31
|
+
},
|
32
|
+
s
|
33
|
+
);
|
34
|
+
}) });
|
35
|
+
}, C = l(h);
|
36
|
+
export {
|
37
|
+
C as default
|
38
|
+
};
|
39
|
+
//# sourceMappingURL=stickers-effects.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nimport React, { memo, useEffect, useState } from 'react';\n\nimport * as S from './stickers-effects-styled';\nimport { generateStickerData } from './stickers-effects-utils';\n\nconst StickersEffects: React.FC<IStickersProps> = ({ stickers, effect, count, duration }) => {\n const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n useEffect(() => {\n const stickerData = generateStickerData({\n count,\n effect,\n stickers,\n minSize: 32,\n maxSize: 48,\n });\n\n setStickersData(stickerData);\n\n const timeout = setTimeout(() => setStickersData([]), duration);\n\n return () => clearTimeout(timeout);\n }, [stickers, effect, count, duration]);\n\n return (\n <S.Container>\n {stickersData.map((data: TStickerData) => {\n const { id, sticker, x, y, size, fromX, fromY } = data;\n\n return (\n <S.Sticker\n key={id}\n effect={effect}\n duration={duration}\n fromX={fromX}\n fromY={fromY}\n x={x}\n y={y}\n size={size}\n >\n {sticker}\n </S.Sticker>\n );\n })}\n </S.Container>\n );\n};\n\nexport default memo(StickersEffects);\n"],"names":["StickersEffects","stickers","effect","count","duration","stickersData","setStickersData","useState","useEffect","stickerData","generateStickerData","timeout","S.Container","data","id","sticker","x","y","size","fromX","fromY","jsx","S.Sticker","stickersEffects","memo"],"mappings":";;;;AAOA,MAAMA,IAA4C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AAC3F,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiD,CAAE,CAAA;AAE3F,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAcC,EAAoB;AAAA,MACtC,OAAAP;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBG,CAAW;AAE3B,UAAME,IAAU,WAAW,MAAML,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaO,CAAO;AAAA,KAChC,CAACV,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,qBAGnCQ,GAAA,EACE,UAAaP,EAAA,IAAI,CAACQ,MAAuB;AAClC,UAAA,EAAE,IAAAC,GAAI,SAAAC,GAAS,GAAAC,GAAG,GAAAC,GAAG,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAU,IAAAP;AAGhD,WAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,QAAApB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAe;AAAA,QACA,OAAAC;AAAA,QACA,GAAAJ;AAAA,QACA,GAAAC;AAAA,QACA,MAAAC;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,MATID;AAAA,IAAA;AAAA,EAYV,CAAA,EACH,CAAA;AAEJ,GAEeS,IAAAC,EAAKxB,CAAe;"}
|
@@ -1,15 +1,63 @@
|
|
1
|
-
import
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
1
|
+
import w from "styled-components";
|
2
|
+
import y from "../layout/flex-view.js";
|
3
|
+
import { arrowPosition as T, tooltipPosition as k, animateToolTip as m } from "./arrow-tooltip-util.js";
|
4
|
+
const P = w(y)(({
|
5
|
+
theme: o,
|
6
|
+
$arrowColor: r,
|
7
|
+
$arrowSize: t,
|
8
|
+
$arrowXCoOrdinates: c,
|
9
|
+
$arrowYCoOrdinates: d,
|
10
|
+
$borderColor: p,
|
11
|
+
$isAnimated: x,
|
12
|
+
$position: n,
|
13
|
+
$renderAs: s,
|
14
|
+
$tooltipCoOrdinates: e,
|
15
|
+
$tooltipOffset: f,
|
16
|
+
$tooltipXCoOrdinates: g,
|
17
|
+
$tooltipYCoOrdinates: u,
|
18
|
+
$zIndex: C,
|
19
|
+
$backgroundColor: O
|
20
|
+
}) => {
|
21
|
+
const { gutter: l } = o.layout, { REAL_BLACK_15: $ } = o.colors, { tooltipVariants: a } = o.arrowTooltip;
|
22
|
+
let { backgroundColorName: i } = a[s];
|
23
|
+
const { textColorName: b } = a[s];
|
24
|
+
return i = O || i, `
|
25
|
+
position: fixed;
|
26
|
+
z-index: ${C || 1};
|
27
|
+
padding: ${l * 0.25}px ${l * 0.5}px;
|
28
|
+
color: ${b};
|
29
|
+
box-shadow: 0px 2px 15px 0px ${$};
|
30
|
+
background-color: ${o.colors[i]};
|
31
|
+
border: 1px solid ${p ? o.colors[p] : "transparent"};
|
32
|
+
|
33
|
+
&::after {
|
34
|
+
content: '';
|
35
|
+
position: absolute;
|
36
|
+
height: ${t}px;
|
37
|
+
width: ${t}px;
|
38
|
+
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
39
|
+
background-color: ${r ? o.colors[r] : o.colors[i]};
|
40
|
+
${T({
|
41
|
+
position: n,
|
42
|
+
arrowXCoOrdinates: c,
|
43
|
+
arrowYCoOrdinates: d,
|
44
|
+
arrowSize: t
|
45
|
+
})};
|
46
|
+
}
|
47
|
+
|
48
|
+
${k({
|
49
|
+
position: n,
|
50
|
+
arrowSize: t,
|
51
|
+
tooltipCoOrdinates: e,
|
52
|
+
tooltipOffset: f,
|
53
|
+
tooltipXCoOrdinates: g,
|
54
|
+
tooltipYCoOrdinates: u
|
55
|
+
})};
|
56
|
+
|
57
|
+
${m(x)};
|
58
|
+
`;
|
59
|
+
});
|
12
60
|
export {
|
13
|
-
|
61
|
+
P as TooltipBody
|
14
62
|
};
|
15
63
|
//# sourceMappingURL=arrow-tooltip-styled.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"arrow-tooltip-styled.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\
|
1
|
+
{"version":3,"file":"arrow-tooltip-styled.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-styled.tsx"],"sourcesContent":["import type { TArrowTooltipVariants, TColorNames } from '../types';\nimport type { TPositionProps, TTooltipCoOrdinatesProps } from './arrow-tooltip-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport { animateToolTip, arrowPosition, tooltipPosition } from './arrow-tooltip-util';\n\ninterface ITooltipBodyProps {\n $arrowSize: number;\n $arrowColor?: TColorNames;\n $arrowXCoOrdinates?: number;\n $arrowYCoOrdinates?: number;\n $backgroundColor?: TColorNames;\n $borderColor?: TColorNames;\n $position: TPositionProps;\n $renderAs: TArrowTooltipVariants;\n $tooltipCoOrdinates: TTooltipCoOrdinatesProps | null;\n $tooltipOffset?: number;\n $tooltipXCoOrdinates?: number | string;\n $tooltipYCoOrdinates?: number | string;\n $zIndex?: number;\n $isAnimated?: boolean;\n}\n\nconst TooltipBody = styled(FlexView)<ITooltipBodyProps>(({\n theme,\n $arrowColor,\n $arrowSize,\n $arrowXCoOrdinates,\n $arrowYCoOrdinates,\n $borderColor,\n $isAnimated,\n $position,\n $renderAs,\n $tooltipCoOrdinates,\n $tooltipOffset,\n $tooltipXCoOrdinates,\n $tooltipYCoOrdinates,\n $zIndex,\n $backgroundColor,\n}) => {\n const { gutter } = theme.layout;\n const { REAL_BLACK_15 } = theme.colors;\n const { tooltipVariants } = theme.arrowTooltip;\n let { backgroundColorName } = tooltipVariants[$renderAs];\n const { textColorName } = tooltipVariants[$renderAs];\n\n backgroundColorName = $backgroundColor || backgroundColorName;\n\n return `\n position: fixed;\n z-index: ${$zIndex || 1};\n padding: ${gutter * 0.25}px ${gutter * 0.5}px;\n color: ${textColorName};\n box-shadow: 0px 2px 15px 0px ${REAL_BLACK_15};\n background-color: ${theme.colors[backgroundColorName]};\n border: 1px solid ${$borderColor ? theme.colors[$borderColor] : 'transparent'};\n\n &::after {\n content: '';\n position: absolute;\n height: ${$arrowSize}px;\n width: ${$arrowSize}px;\n clip-path: polygon(0% 0%, 100% 100%, 0% 100%);\n background-color: ${\n $arrowColor ? theme.colors[$arrowColor] : theme.colors[backgroundColorName]\n };\n ${arrowPosition({\n position: $position,\n arrowXCoOrdinates: $arrowXCoOrdinates,\n arrowYCoOrdinates: $arrowYCoOrdinates,\n arrowSize: $arrowSize,\n })};\n }\n\n ${tooltipPosition({\n position: $position,\n arrowSize: $arrowSize,\n tooltipCoOrdinates: $tooltipCoOrdinates,\n tooltipOffset: $tooltipOffset,\n tooltipXCoOrdinates: $tooltipXCoOrdinates,\n tooltipYCoOrdinates: $tooltipYCoOrdinates,\n })};\n\n ${animateToolTip($isAnimated)};\n `;\n});\n\nexport { TooltipBody };\n"],"names":["TooltipBody","styled","FlexView","theme","$arrowColor","$arrowSize","$arrowXCoOrdinates","$arrowYCoOrdinates","$borderColor","$isAnimated","$position","$renderAs","$tooltipCoOrdinates","$tooltipOffset","$tooltipXCoOrdinates","$tooltipYCoOrdinates","$zIndex","$backgroundColor","gutter","REAL_BLACK_15","tooltipVariants","backgroundColorName","textColorName","arrowPosition","tooltipPosition","animateToolTip"],"mappings":";;;AAyBA,MAAMA,IAAcC,EAAOC,CAAQ,EAAqB,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAO,IAAIf,EAAM,QACnB,EAAE,eAAAgB,EAAc,IAAIhB,EAAM,QAC1B,EAAE,iBAAAiB,EAAgB,IAAIjB,EAAM;AAClC,MAAI,EAAE,qBAAAkB,EAAA,IAAwBD,EAAgBT,CAAS;AACvD,QAAM,EAAE,eAAAW,EAAA,IAAkBF,EAAgBT,CAAS;AAEnD,SAAAU,IAAsBJ,KAAoBI,GAEnC;AAAA;AAAA,eAEML,KAAW,CAAC;AAAA,eACZE,IAAS,IAAI,MAAMA,IAAS,GAAG;AAAA,aACjCI,CAAa;AAAA,mCACSH,CAAa;AAAA,wBACxBhB,EAAM,OAAOkB,CAAmB,CAAC;AAAA,wBACjCb,IAAeL,EAAM,OAAOK,CAAY,IAAI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKjEH,CAAU;AAAA,eACXA,CAAU;AAAA;AAAA,0BAGjBD,IAAcD,EAAM,OAAOC,CAAW,IAAID,EAAM,OAAOkB,CAAmB,CAC5E;AAAA,QACEE,EAAc;AAAA,IACd,UAAUb;AAAA,IACV,mBAAmBJ;AAAA,IACnB,mBAAmBC;AAAA,IACnB,WAAWF;AAAA,EAAA,CACZ,CAAC;AAAA;AAAA;AAAA,MAGFmB,EAAgB;AAAA,IAChB,UAAUd;AAAA,IACV,WAAWL;AAAA,IACX,oBAAoBO;AAAA,IACpB,eAAeC;AAAA,IACf,qBAAqBC;AAAA,IACrB,qBAAqBC;AAAA,EAAA,CACtB,CAAC;AAAA;AAAA,MAEAU,EAAehB,CAAW,CAAC;AAAA;AAEjC,CAAC;"}
|
@@ -1,100 +1,105 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import
|
3
|
-
import {
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
1
|
+
import { jsxs as U, Fragment as W, jsx as e } from "react/jsx-runtime";
|
2
|
+
import Y from "../../../node_modules/lodash.throttle/index.js";
|
3
|
+
import { useRef as H, useState as m, useCallback as $, useEffect as C } from "react";
|
4
|
+
import { useTheme as P } from "styled-components";
|
5
|
+
import w from "../layout/flex-view.js";
|
6
|
+
import Z from "../portal/portal.js";
|
7
|
+
import q from "../text/text.js";
|
8
|
+
import { TooltipBody as G } from "./arrow-tooltip-styled.js";
|
8
9
|
import { computeTooltipNewCoOrdinates as J } from "./arrow-tooltip-util.js";
|
9
|
-
|
10
|
-
|
11
|
-
isAnimated: C,
|
10
|
+
const K = 8, Q = 100, V = ({
|
11
|
+
isAnimated: O,
|
12
12
|
alwaysVisible: o = !1,
|
13
|
-
arrowColor:
|
14
|
-
arrowSize:
|
15
|
-
arrowXCoOrdinates:
|
16
|
-
arrowYCoOrdinates:
|
13
|
+
arrowColor: T,
|
14
|
+
arrowSize: E = K,
|
15
|
+
arrowXCoOrdinates: g,
|
16
|
+
arrowYCoOrdinates: h,
|
17
17
|
backgroundColor: v,
|
18
18
|
borderColor: R,
|
19
|
-
children:
|
19
|
+
children: x,
|
20
20
|
hidden: t,
|
21
21
|
position: l,
|
22
|
-
renderAs:
|
22
|
+
renderAs: s,
|
23
23
|
textVariant: L,
|
24
|
-
tooltipItem:
|
25
|
-
tooltipOffset:
|
26
|
-
tooltipXCoOrdinates:
|
27
|
-
tooltipYCoOrdinates:
|
28
|
-
width:
|
29
|
-
widthX:
|
30
|
-
zIndex:
|
31
|
-
parentWidth:
|
32
|
-
isBlocking: M = !1
|
24
|
+
tooltipItem: c,
|
25
|
+
tooltipOffset: A,
|
26
|
+
tooltipXCoOrdinates: b,
|
27
|
+
tooltipYCoOrdinates: N,
|
28
|
+
width: k,
|
29
|
+
widthX: z,
|
30
|
+
zIndex: F,
|
31
|
+
parentWidth: M
|
33
32
|
}) => {
|
34
|
-
const
|
33
|
+
const { arrowTooltip: S } = P(), { tooltipVariants: a } = S, { backgroundColorName: X } = a[s], d = H(null), [_, f] = m(o), [j, B] = m(
|
35
34
|
null
|
36
|
-
),
|
35
|
+
), u = $(
|
37
36
|
(n, i) => {
|
38
|
-
|
37
|
+
B(n), f(i);
|
39
38
|
},
|
40
39
|
[]
|
41
|
-
),
|
40
|
+
), D = $(() => {
|
42
41
|
if (t || o)
|
43
42
|
return null;
|
44
|
-
|
45
|
-
}, [o,
|
46
|
-
var
|
47
|
-
const { current: n } =
|
43
|
+
u(null, !1);
|
44
|
+
}, [o, u, t]), r = Y(() => {
|
45
|
+
var p;
|
46
|
+
const { current: n } = d;
|
48
47
|
if (t || !n) return null;
|
49
|
-
const i = (
|
50
|
-
return
|
51
|
-
},
|
52
|
-
|
48
|
+
const i = (p = n.children[0]) == null ? void 0 : p.getBoundingClientRect(), I = i ? J(l, i) : null;
|
49
|
+
return u(I, !0), null;
|
50
|
+
}, Q);
|
51
|
+
return C(() => {
|
53
52
|
if (!(!o || t))
|
54
53
|
return window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
|
55
54
|
window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
|
56
55
|
};
|
57
|
-
}, [o, t, l, r]),
|
58
|
-
t &&
|
59
|
-
}, [o, t])
|
60
|
-
const c = /* @__PURE__ */ e(
|
61
|
-
K,
|
62
|
-
{
|
63
|
-
$arrowSize: w,
|
64
|
-
$arrowXCoOrdinates: E,
|
65
|
-
$arrowYCoOrdinates: T,
|
66
|
-
$position: l,
|
67
|
-
$renderAs: A,
|
68
|
-
$tooltipCoOrdinates: S,
|
69
|
-
$tooltipOffset: x,
|
70
|
-
$tooltipXCoOrdinates: z,
|
71
|
-
$tooltipYCoOrdinates: I,
|
72
|
-
$zIndex: B,
|
73
|
-
$backgroundColor: v,
|
74
|
-
$arrowColor: O,
|
75
|
-
$borderColor: R,
|
76
|
-
$isAnimated: C,
|
77
|
-
$width: b,
|
78
|
-
$widthX: k,
|
79
|
-
textVariant: L || "body3",
|
80
|
-
children: g
|
81
|
-
}
|
82
|
-
);
|
83
|
-
return /* @__PURE__ */ D(U, { children: [
|
56
|
+
}, [o, t, l, r]), C(() => {
|
57
|
+
t && f(!1), o && r();
|
58
|
+
}, [o, t]), /* @__PURE__ */ U(W, { children: [
|
84
59
|
/* @__PURE__ */ e(
|
85
|
-
|
60
|
+
w,
|
86
61
|
{
|
87
|
-
$width:
|
88
|
-
ref:
|
62
|
+
$width: M || "fit-content",
|
63
|
+
ref: d,
|
89
64
|
onMouseEnter: r,
|
90
|
-
onMouseLeave:
|
91
|
-
children: /* @__PURE__ */ e(
|
65
|
+
onMouseLeave: D,
|
66
|
+
children: /* @__PURE__ */ e(w, { children: x })
|
92
67
|
}
|
93
68
|
),
|
94
|
-
|
69
|
+
_ && /* @__PURE__ */ e(Z, { portalId: "tooltip-root", children: /* @__PURE__ */ e(
|
70
|
+
G,
|
71
|
+
{
|
72
|
+
$arrowSize: E,
|
73
|
+
$arrowXCoOrdinates: g,
|
74
|
+
$arrowYCoOrdinates: h,
|
75
|
+
$position: l,
|
76
|
+
$renderAs: s,
|
77
|
+
$tooltipCoOrdinates: j,
|
78
|
+
$tooltipOffset: A,
|
79
|
+
$tooltipXCoOrdinates: b,
|
80
|
+
$tooltipYCoOrdinates: N,
|
81
|
+
$width: k,
|
82
|
+
$widthX: z,
|
83
|
+
$zIndex: F,
|
84
|
+
$background: X,
|
85
|
+
$backgroundColor: v,
|
86
|
+
$arrowColor: T,
|
87
|
+
$borderColor: R,
|
88
|
+
$isAnimated: O,
|
89
|
+
children: typeof c == "string" ? /* @__PURE__ */ e(
|
90
|
+
q,
|
91
|
+
{
|
92
|
+
$renderAs: L || "body3",
|
93
|
+
$color: a[s].textColorName,
|
94
|
+
$align: "center",
|
95
|
+
children: c
|
96
|
+
}
|
97
|
+
) : c
|
98
|
+
}
|
99
|
+
) })
|
95
100
|
] });
|
96
|
-
},
|
101
|
+
}, co = V;
|
97
102
|
export {
|
98
|
-
|
103
|
+
co as default
|
99
104
|
};
|
100
105
|
//# sourceMappingURL=arrow-tooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n IArrowTooltipProps,\n THandleVisibleNCoOrdinatesProps,\n TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect
|
1
|
+
{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n IArrowTooltipProps,\n THandleVisibleNCoOrdinatesProps,\n TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n isAnimated,\n alwaysVisible = false,\n arrowColor,\n arrowSize = DEFAULT_ARROW_SIZE,\n arrowXCoOrdinates,\n arrowYCoOrdinates,\n backgroundColor,\n borderColor,\n children,\n hidden,\n position,\n renderAs,\n textVariant,\n tooltipItem,\n tooltipOffset,\n tooltipXCoOrdinates,\n tooltipYCoOrdinates,\n width,\n widthX,\n zIndex,\n parentWidth,\n}) => {\n const { arrowTooltip } = useTheme();\n const { tooltipVariants } = arrowTooltip;\n const { backgroundColorName } = tooltipVariants[renderAs];\n\n const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n const [visible, setVisible] = useState(alwaysVisible);\n const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n null,\n );\n\n const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n (newCoOrdinates, visibility) => {\n setTooltipCoOrdinates(newCoOrdinates);\n setVisible(visibility);\n },\n [],\n );\n\n const handleVisibility = useCallback(() => {\n if (hidden || alwaysVisible) {\n return null;\n }\n\n handleVisibleNCoOrdinates(null, false);\n\n return;\n }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n const handleOnMouseEnter = throttle(() => {\n const { current } = tooltipWrapperRef;\n\n if (hidden || !current) return null;\n\n const boundingClientRect = current.children[0]?.getBoundingClientRect();\n const newCoOrdinates = boundingClientRect\n ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n : null;\n\n handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n return null;\n }, THROTTLE_DURATION);\n\n useEffect(() => {\n if (!alwaysVisible || hidden) return;\n\n window.addEventListener('scroll', handleOnMouseEnter, true);\n window.addEventListener('resize', handleOnMouseEnter);\n\n return () => {\n window.removeEventListener('scroll', handleOnMouseEnter, true);\n window.removeEventListener('resize', handleOnMouseEnter);\n };\n }, [alwaysVisible, hidden, position, handleOnMouseEnter]);\n\n useEffect(() => {\n if (hidden) {\n setVisible(false);\n }\n\n if (alwaysVisible) {\n handleOnMouseEnter();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [alwaysVisible, hidden]);\n\n return (\n <>\n <FlexView\n $width={parentWidth || 'fit-content'}\n ref={tooltipWrapperRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleVisibility}\n >\n <FlexView>{children}</FlexView>\n </FlexView>\n {visible && (\n <Portal portalId=\"tooltip-root\">\n <Styled.TooltipBody\n $arrowSize={arrowSize}\n $arrowXCoOrdinates={arrowXCoOrdinates}\n $arrowYCoOrdinates={arrowYCoOrdinates}\n $position={position}\n $renderAs={renderAs}\n $tooltipCoOrdinates={tooltipCoOrdinates}\n $tooltipOffset={tooltipOffset}\n $tooltipXCoOrdinates={tooltipXCoOrdinates}\n $tooltipYCoOrdinates={tooltipYCoOrdinates}\n $width={width}\n $widthX={widthX}\n $zIndex={zIndex}\n $background={backgroundColorName}\n $backgroundColor={backgroundColor}\n $arrowColor={arrowColor}\n $borderColor={borderColor}\n $isAnimated={isAnimated}\n >\n {typeof tooltipItem === 'string' ? (\n <Text\n $renderAs={textVariant || 'body3'}\n $color={tooltipVariants[renderAs].textColorName}\n $align=\"center\"\n >\n {tooltipItem}\n </Text>\n ) : (\n tooltipItem\n )}\n </Styled.TooltipBody>\n </Portal>\n )}\n </>\n );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":"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"}
|