@opexa/portal-components 0.1.74 → 0.1.79

package/dist/components/SignIn/CrazyWin/MobileNumberSignIn.js

@@ -45,6 +45,7 @@ export function MobileNumberSignIn() {
         disclaimer: ctx.disclaimer,
     })));
     const signInMutation = useSignInMutation({
+        authApiBaseUrl: signInProps.authApiBaseUrl,
         versionSession: signInProps.versionSession,
         version: signInProps.version,
         onSuccess: async () => {

package/dist/components/SignIn/CrazyWin/NameAndPasswordSignIn.js

@@ -45,6 +45,7 @@ export function NameAndPasswordSignIn() {
         disclaimer: ctx.disclaimer,
     })));
     const signInMutation = useSignInMutation({
+        authApiBaseUrl: signInProps.authApiBaseUrl,
         versionSession: signInProps.versionSession,
         version: signInProps.version,
         onSuccess: async (authenticator) => {

package/dist/components/SignIn/HappyBingo/MobileNumberSignIn.js

@@ -46,6 +46,7 @@ export function MobileNumberSignIn() {
         disclaimer: ctx.disclaimer,
     })));
     const signInMutation = useSignInMutation({
+        authApiBaseUrl: signInProps.authApiBaseUrl,
         versionSession: signInProps.versionSession,
         version: signInProps.version,
         onSuccess: async () => {

package/dist/components/SignIn/HappyBingo/NameAndPasswordSignIn.js

@@ -42,6 +42,7 @@ export function NameAndPasswordSignIn() {
         disclaimer: ctx.disclaimer,
     })));
     const signInMutation = useSignInMutation({
+        authApiBaseUrl: signInProps.authApiBaseUrl,
         versionSession: signInProps.versionSession,
         version: signInProps.version,
         onSuccess: async (authenticator) => {

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -53,7 +53,7 @@ export function MobileNumberSignIn() {
         termsOfUse: ctx.termsOfUse,
     })));
     const signInMutation = useSignInMutation({
-        versionSession: signInProps.versionSession,
+        authApiBaseUrl: signInProps.authApiBaseUrl,
         version: signInProps.version,
         onSuccess: async () => {
             step1Form.reset();
@@ -183,7 +183,7 @@ export function MobileNumberSignIn() {
     const step1Form = useForm({
         resolver: zodResolver(Step1Definition),
         defaultValues: {
-            mobileNumber: globalStore.signIn.prefillMobileNumber ?? '',
+            mobileNumber: '',
             termsAccepted: globalStore.responsibleGaming.accepted &&
                 globalStore.termsAndConditions.accepted
                 ? true
@@ -201,9 +201,6 @@ export function MobileNumberSignIn() {
         globalStore.responsibleGaming.accepted,
         step1Form,
     ]);
-    useEffect(() => {
-        globalStore.signIn.setPrefillMobileNumber(null);
-    }, [globalStore.signIn.setPrefillMobileNumber]);
     const step2Form = useForm({
         resolver: zodResolver(Step2Definition),
         defaultValues: {

package/dist/components/SignIn/SignIn.js

@@ -3,12 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 const Component = dynamic(() => import('./SignIn.lazy.js').then((m) => m.SignIn), {
     ssr: false,
     loading: () => null,
 });
 export function SignIn(props) {
     const touched = useGlobalStore(useShallow((ctx) => ctx.signIn['~touched']));
-    if (touched)
+    const sessionQuery = useSessionQuery();
+    const invalidSession = sessionQuery.data?.status === 'unauthenticated' &&
+        sessionQuery.data.reason === 'INVALID_SESSION';
+    if (touched || invalidSession)
         return _jsx(Component, { ...props });
 }

package/dist/components/SignIn/SignIn.lazy.d.ts

@@ -1,5 +1,5 @@
 import { type ImageProps } from 'next/image';
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { ApiVersion, VersionSession } from '../../services/auth';
 import type { CountryCode } from '../../utils/countries/types';
 import { type UseSignInProps } from './useSignIn';

package/dist/components/SignIn/SignIn.lazy.js

@@ -2,11 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useIsMutating } from '@tanstack/react-query';
 import Image, {} from 'next/image';
-import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
 import { XIcon } from '../../icons/XIcon.js';
+import { AlertDialog } from '../../ui/AlertDialog/index.js';
+import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { getSignInMutationKey } from '../../utils/mutationKeys.js';
@@ -17,7 +21,10 @@ import { SignInPropsProvider, SignInProvider } from './SignInContext.js';
 import { SignInForm } from './SignInForm.js';
 import { useSignIn } from './useSignIn.js';
 export function SignIn(props) {
+    const router = useRouter();
     const signIn = useSignIn(props);
+    const sessionQuery = useSessionQuery();
+    const signOutMutation = useSignOutMutation();
     const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         termsAndConditions: ctx.termsAndConditions,
@@ -27,17 +34,14 @@ export function SignIn(props) {
     const showLoader = mutating &&
         props.versionSession === 'Inplay' &&
         (signIn.type === 'NAME_AND_PASSWORD' || signIn.type === 'MOBILE_NUMBER');
-    useEffect(() => {
-        if (signInStore.open && signInStore.pendingType) {
-            signIn.setType(signInStore.pendingType);
-            signInStore.setPendingType(null);
-        }
-    }, [
-        signInStore.open,
-        signInStore.pendingType,
-        signInStore.setPendingType,
-        signIn,
-    ]);
+    if (sessionQuery.data?.status === 'unauthenticated' &&
+        sessionQuery.data.reason === 'INVALID_SESSION') {
+        return (_jsx(AlertDialog.Root, { role: "alertdialog", open: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, {}), _jsx(AlertDialog.Positioner, { children: _jsxs(AlertDialog.Content, { children: [_jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Invalid Session" }), _jsx(AlertDialog.Description, { children: "Your session is no longer valid. Please login again." })] }), _jsx(AlertDialog.Footer, { children: _jsx(Button, { disabled: signOutMutation.isPending, onClick: async () => {
+                                            await signOutMutation.mutateAsync();
+                                            router.refresh();
+                                            router.push('/');
+                                        }, children: "OK" }) })] }) })] }) }));
+    }
     return (_jsx(SignInPropsProvider, { value: props, children: _jsx(SignInProvider, { value: signIn, children: _jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
                     signInStore.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {

package/dist/components/SignUp/SignUpDefault/SignUpDefaultForm.js

@@ -64,8 +64,6 @@ export function SignUpDefaultForm() {
         kyc: ctx.kyc,
         termsOfUse: ctx.termsOfUse,
         setFirstTimeSignUp: ctx.setFirstTimeSignUp,
-        setPrefillMobileNumber: ctx.signIn.setPrefillMobileNumber,
-        setPendingType: ctx.signIn.setPendingType,
     })));
     const search = useSearchParams();
     const signUpMutation = useSignUpMutation();
@@ -350,6 +348,12 @@ export function SignUpDefaultForm() {
                                     featureFlag.enabled) {
                                     await inplaySignUpMutation.mutateAsync({
                                         ...signUpInput,
+                                        ...(step1Form.getValues('firstName') && {
+                                            firstName: step1Form.getValues('firstName'),
+                                        }),
+                                        ...(step1Form.getValues('lastName') && {
+                                            lastName: step1Form.getValues('lastName'),
+                                        }),
                                         mobileNumberVerificationCode: verificationCode.join(''),
                                     });
                                     const name = mobileNumberParser.format(mobileNumber);
@@ -362,12 +366,9 @@ export function SignUpDefaultForm() {
                                         });
                                     }
                                     catch {
-                                        globalStore.setPrefillMobileNumber(name);
-                                        globalStore.setPendingType('MOBILE_NUMBER');
-                                        globalStore.signUp.setOpen(false);
-                                        globalStore.signIn.setOpen(true);
-                                        step1Form.reset();
-                                        step2Form.reset();
+                                        toaster.error({
+                                            description: 'Account created successfully, but automatic sign in failed. Please use Log In below to continue.',
+                                        });
                                         setStep(1);
                                         return;
                                     }
@@ -405,7 +406,10 @@ export function SignUpDefaultForm() {
                                 });
                                 const ok = await pollLogin();
                                 if (!ok) {
-                                    globalStore.signIn.setOpen(true);
+                                    toaster.error({
+                                        description: 'Account created successfully, but automatic sign in failed. Please use Log In below to continue.',
+                                    });
+                                    setStep(1);
                                     return;
                                 }
                                 globalStore.signUp.setOpen(false);
@@ -415,23 +419,6 @@ export function SignUpDefaultForm() {
                                 setStep(1);
                             }
                             catch (error) {
-                                if (error instanceof Error &&
-                                    (error.name === 'MemberAccountAlreadyExistsError' ||
-                                        (signUpProps.versionSession === 'Inplay' &&
-                                            featureFlag.enabled &&
-                                            error.name === 'MobileNumberNotAvailableError'))) {
-                                    toaster.warning({
-                                        description: 'This mobile number is already registered. Please try to log in.',
-                                    });
-                                    globalStore.setPrefillMobileNumber(mobileNumber);
-                                    globalStore.setPendingType('MOBILE_NUMBER');
-                                    globalStore.signUp.setOpen(false);
-                                    globalStore.signIn.setOpen(true);
-                                    step1Form.reset();
-                                    step2Form.reset();
-                                    setStep(1);
-                                    return;
-                                }
                                 toaster.error({
                                     description: error instanceof Error
                                         ? error.message

package/dist/components/SignUp/SignUpDefault/SignUpDefaultFormInternational.js

@@ -25,8 +25,8 @@ import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
 import { HelpCircleIcon } from '../../../icons/HelpCircleIcon.js';
 import pagcorLogo from '../../../images/pagcor-round-icon.png';
 import responsibleGamingLogo from '../../../images/responsible-gaming-gold.png';
-import { ObjectType } from '../../../services/ObjectType.js';
 import { checkInplayMemberExists } from '../../../services/auth.js';
+import { ObjectType } from '../../../services/ObjectType.js';
 import { Button } from '../../../ui/Button/index.js';
 import { Checkbox } from '../../../ui/Checkbox/index.js';
 import { Field } from '../../../ui/Field/index.js';
@@ -63,8 +63,6 @@ export function SignUpDefaultFormInternational() {
         termsAndConditions: ctx.termsAndConditions,
         responsibleGaming: ctx.responsibleGaming,
         kyc: ctx.kyc,
-        setPrefillMobileNumber: ctx.signIn.setPrefillMobileNumber,
-        setPendingType: ctx.signIn.setPendingType,
     })));
     const search = useSearchParams();
     const signUpMutation = useSignUpMutation();
@@ -187,11 +185,6 @@ export function SignUpDefaultFormInternational() {
                                         toaster.warning({
                                             description: 'This mobile number is already registered. Please try to log in.',
                                         });
-                                        globalStore.setPrefillMobileNumber(countryCodeParser(areaCode, data.mobileNumber));
-                                        globalStore.setPendingType('MOBILE_NUMBER');
-                                        globalStore.signUp.setOpen(false);
-                                        globalStore.signIn.setOpen(true);
-                                        step1Form.reset();
                                         return;
                                     }
                                 }
@@ -302,10 +295,10 @@ export function SignUpDefaultFormInternational() {
                                 });
                                 const ok = await pollLogin();
                                 if (!ok) {
-                                    toaster.success({
-                                        description: 'Account created successfully. Please log in to continue.',
+                                    toaster.error({
+                                        description: 'Account created successfully, but automatic sign in failed. Please use Log In below to continue.',
                                     });
-                                    globalStore.signIn.setOpen(true);
+                                    setStep(1);
                                     return;
                                 }
                                 globalStore.signUp.setOpen(false);

package/dist/components/TermsOfUse/TermsOfUseV2.lazy.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { TERMS_OF_USE_PENDING_STORAGE_KEY } from '../../constants/index.js';
 import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
 import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
@@ -13,6 +14,7 @@ import { Portal } from '../../ui/Portal/index.js';
 import { openDisclaimerIfAllowed } from '../../utils/disclaimer-cooldown.js';
 export function TermsOfUseV2({ logo, content }) {
     const scrollableContentRef = useRef(null);
+    const sessionQuery = useSessionQuery();
     const [hasReachedBottom, setHasReachedBottom] = useState(false);
     const [isAtBottom, setIsAtBottom] = useState(false);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -40,7 +42,8 @@ export function TermsOfUseV2({ logo, content }) {
             setHasReachedBottom(false);
         }
     }, [isOpen]);
-    return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: (details) => {
+    return (_jsx(Dialog.Root, { open: isOpen &&
+            sessionQuery.data?.status !== 'unauthenticated', onOpenChange: (details) => {
             globalStore.termsOfUse.setOpen(details.open);
             if (!details.open) {
                 globalStore.termsOfUse.setAccepted(true);

package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css

@@ -1,184 +1,184 @@
-@keyframes arrow-green-flash {
-  0% {
-    color: #abefc6;
-  }
-  100% {
-    color: #079455;
-  }
-}
-
-.animate-arrow-green-flash-1 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-.animate-arrow-green-flash-2 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-green-flash-3 {
-  animation: arrow-green-flash 0.4s infinite;
-}
-
-@keyframes arrow-red-flash {
-  0%,
-  100% {
-    color: #f97066;
-  }
-  50% {
-    color: #fecdca;
-  }
-}
-
-.animate-arrow-red-flash-1 {
-  animation: arrow-red-flash 0.4s infinite;
-}
-
-.animate-arrow-red-flash-2 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-red-flash-3 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-/* Animated BG */
-@keyframes rotate {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.light-rays {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-
-  --first: var(--color-bg-tertiary);
-  --second: var(--color-bg-quaternary);
-}
-
-.light-rays::before,
-.light-rays::after {
-  content: '';
-  position: absolute;
-  top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
-  margin: -100vmax;
-  width: 200vmax;
-  height: 200vmax;
-  opacity: 0.6;
-  transform-origin: center;
-}
-
-.light-rays::before {
-  background: conic-gradient(
-    var(--first) 0deg 7.2deg,
-    var(--second) 7.2deg 14.4deg,
-    var(--first) 14.4deg 21.6deg,
-    var(--second) 21.6deg 28.8deg,
-    var(--first) 28.8deg 36deg,
-    var(--second) 36deg 43.2deg,
-    var(--first) 43.2deg 50.4deg,
-    var(--second) 50.4deg 57.6deg,
-    var(--first) 57.6deg 64.8deg,
-    var(--second) 64.8deg 72deg,
-    var(--first) 72deg 79.2deg,
-    var(--second) 79.2deg 86.4deg,
-    var(--first) 86.4deg 93.6deg,
-    var(--second) 93.6deg 100.8deg,
-    var(--first) 100.8deg 108deg,
-    var(--second) 108deg 115.2deg,
-    var(--first) 115.2deg 122.4deg,
-    var(--second) 122.4deg 129.6deg,
-    var(--first) 129.6deg 136.8deg,
-    var(--second) 136.8deg 144deg,
-    var(--first) 144deg 151.2deg,
-    var(--second) 151.2deg 158.4deg,
-    var(--first) 158.4deg 165.6deg,
-    var(--second) 165.6deg 172.8deg,
-    var(--first) 172.8deg 180deg,
-    var(--second) 180deg 187.2deg,
-    var(--first) 187.2deg 194.4deg,
-    var(--second) 194.4deg 201.6deg,
-    var(--first) 201.6deg 208.8deg,
-    var(--second) 208.8deg 216deg,
-    var(--first) 216deg 223.2deg,
-    var(--second) 223.2deg 230.4deg,
-    var(--first) 230.4deg 237.6deg,
-    var(--second) 237.6deg 244.8deg,
-    var(--first) 244.8deg 252deg,
-    var(--second) 252deg 259.2deg,
-    var(--first) 259.2deg 266.4deg,
-    var(--second) 266.4deg 273.6deg,
-    var(--first) 273.6deg 280.8deg,
-    var(--second) 280.8deg 288deg,
-    var(--first) 288deg 295.2deg,
-    var(--second) 295.2deg 302.4deg,
-    var(--first) 302.4deg 309.6deg,
-    var(--second) 309.6deg 316.8deg,
-    var(--first) 316.8deg 324deg,
-    var(--second) 324deg 331.2deg,
-    var(--first) 331.2deg 338.4deg,
-    var(--second) 338.4deg 345.6deg,
-    var(--first) 345.6deg 352.8deg,
-    var(--second) 352.8deg 360deg
-  );
-  animation: rotate 20s linear infinite;
-}
-
-@media (max-width: 1024px) {
-  .light-rays::before,
-  .light-rays::after {
-    left: auto;
-    right: 11%;
-  }
-}
-
-/* ScrollArea.module.css */
-.scrollArea {
-  overflow-y: scroll;
-  padding-right: 4px;
-}
-
-/* WebKit-based browsers */
-.scrollArea::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollArea::-webkit-scrollbar-track {
-  background: var(--color-bg-primary-alt);
-  border-radius: 9999px;
-}
-
-.scrollArea::-webkit-scrollbar-thumb {
-  background-color: var(--color-bg-quaternary);
-  border-radius: 9999px;
-}
-
-@keyframes waveColor {
-  0%,
-  2.5% {
-    color: var(--wave-highlight-color);
-  }
-  2.51%,
-  100% {
-    color: var(--color-brand-300);
-  }
-}
-
-.animate-wave-color-success {
-  --wave-highlight-color: var(--color-success-800);
-  animation: waveColor 4s ease-in-out infinite;
-}
-
-.animate-wave-color-error {
-  --wave-highlight-color: var(--color-error-600);
-  animation: waveColor 4s ease-in-out infinite;
-}
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}