@opexa/portal-components 0.0.106 → 0.0.108

package/dist/client/hooks/useUpdateMemberVerificationMutation.js

@@ -0,0 +1,38 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { updateMemberVerification__next, } from '../../services/account.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getUpdateMemberVerificationQueryKey } from '../../utils/mutationKeys.js';
+import { getMemberVerificationQueryKey } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUpdateMemberVerificationMutation = (config) => {
+    const queryClient = getQueryClient();
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getUpdateMemberVerificationQueryKey(),
+        mutationFn: async ({ id, data }) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await updateMemberVerification__next(id, data, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    ...data,
+                    idFrontImage: data.idFrontImage
+                        ? { id: data.idFrontImage, status: 'UPLOADING' }
+                        : prev.idFrontImage,
+                    selfieImage: data.selfieImage
+                        ? { id: data.selfieImage, status: 'UPLOADING' }
+                        : prev.selfieImage,
+                };
+            });
+        },
+    });
+    return mutation;
+};

package/dist/client/hooks/useUploadImageFileMutation.d.ts

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type UploadPrivateImageFileInput } from '../../services/file';
+import type { Mutation } from '../../types';
+export declare const useUploadImageFileMutation: Mutation<string, SetOptional<UploadPrivateImageFileInput, 'id'>>;

package/dist/client/hooks/useUploadImageFileMutation.js

@@ -0,0 +1,24 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { uploadPrivateImageFile, } from '../../services/file.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { getUploadImageFileMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUploadImageFileMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUploadImageFileMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
+            await uploadPrivateImageFile({ ...input, id }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return id;
+        },
+    });
+};

package/dist/client/utils/createContext.js

@@ -5,7 +5,7 @@ export function createContext(options) {
     const defaultValue = options?.defaultValue ?? null;
     const Context = React.createContext(defaultValue ?? null);
     function useContext() {
-        const context = React.useContext(Context);
+        const context = React.use(Context);
         if (!context && strict)
             invariant(context);
         return context;

package/dist/client/utils/createRecipeContext.js

@@ -4,7 +4,7 @@ import { createSplitProps } from '../../utils/createSplitProps.js';
 export function createRecipeContext(recipe) {
     const RecipeContext = React.createContext(null);
     function useContext() {
-        const context = React.useContext(RecipeContext);
+        const context = React.use(RecipeContext);
         return context;
     }
     function withRootProvider(Component) {

package/dist/components/BetRecords/BetRecords.client.js

@@ -26,7 +26,7 @@ import { Select } from '../../ui/Select/index.js';
 import { Table } from '../../ui/Table/index.js';
 import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 export function BetRecords__client(props) {
     const [tab, setTab] = useState('all');
     const gameTypes = props.gameTypes.map((type) => GAME_TYPE_DATA[type]);

package/dist/components/Bonuses/Bonuses.client.js

@@ -22,7 +22,7 @@ import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 const TABS = ['ALL', 'ACTIVE', 'CASHBACKS'];
 export function Bonuses__client(props) {
     const [tab, setTab] = useState(TABS[0]);

package/dist/components/Disclaimer/DisclaimerV1.js

@@ -11,5 +11,5 @@ import { useDisclaimer } from './useDisclaimer.js';
 export function DisclaimerV1(props) {
     const disclaimer = useDisclaimer();
     const acceptTriggerRef = useRef(null);
-    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirmI am 21 years of age and I agree with the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
+    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirm I am 21 years of age and I agree with the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
 }

package/dist/components/Games/Game.js

@@ -21,7 +21,7 @@ export function Game(props) {
     const favoriteGames = favoriteGamesQuery.data ?? [];
     const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
     const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
-    const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.id);
+    const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.reference);
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});

package/dist/components/Games/GamesCarousel.client.js

@@ -12,7 +12,7 @@ import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
 import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 import { Game } from './Game.js';
 import { GameContext } from './GamesContext.js';
 export function GamesCarousel__client(props) {

package/dist/components/Games/GamesList.client.js

@@ -7,7 +7,7 @@ import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Progress } from '../../ui/Progress/index.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 import { Game } from './Game.js';
 import { GameContext } from './GamesContext.js';
 export function GamesList__client(props) {

package/dist/components/Jackpots/JackpotsList/JackpotsList.d.ts

@@ -19,6 +19,7 @@ export interface JackpotsListProps {
     style?: CSSProperties | StyleEntries;
     gameProviders: GameProvider[];
     gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
+    animate?: boolean;
 }
 export declare function JackpotsList(props: JackpotsListProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Jackpots/JackpotsList/JackpotsList.js

@@ -33,5 +33,5 @@ export function JackpotsList(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
-    return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames.itemRoot }) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames.itemRoot }) }, jackpot.id))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
+    return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames.itemRoot, animate: props.animate }) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames.itemRoot, animate: props.animate }) }, jackpot.id))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
 }

package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.d.ts

@@ -2,6 +2,7 @@ import type { CSSProperties } from 'react';
 interface JackpotsListItemDesktopProps {
     className?: string;
     style?: CSSProperties;
+    animate?: boolean;
 }
-export declare function JackpotsListItemDesktop(props: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsListItemDesktop({ animate, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.js

@@ -19,7 +19,7 @@ import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
 import { JackpotsListItemRules } from './JackpotsListItemRules.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
-export function JackpotsListItemDesktop(props) {
+export function JackpotsListItemDesktop({ animate = true, ...props }) {
     const jackpot = useJackpotsListItemContext();
     const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
     return (_jsxs("div", { className: twMerge('bg-bg-tertiary border-border-primary rounded-2xl border', props.className), children: [_jsxs("div", { style: props.style, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "z-1 relative flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx("span", { className: "full bg-utility-success-500 size-1.5 animate-pulse rounded" }), "Paying Out"] })) : (_jsxs("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(ArrowNarrowUpRightIcon, { className: "text-utility-blue-500 size-3.5" }), "Accumulating"] })), _jsx("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
@@ -41,9 +41,9 @@ export function JackpotsListItemDesktop(props) {
                                                 currency: localeInfo.currency.code,
                                                 compact: true,
                                             })} Play now for your chance to win big! 🔥`
-                                            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' })] }), _jsx(JackpotsListItemRules, {})] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { children: "Player" }), _jsx("th", { children: "Game" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" }), _jsx("th", { children: "Timestamp" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
+                                            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Recent payouts' : 'Starting soon!' })] }), _jsx(JackpotsListItemRules, {})] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { children: "Player" }), _jsx("th", { children: "Game" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" }), _jsx("th", { children: "Timestamp" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,
-                                                                }) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) : (_jsx(_Fragment, { children: Array.from({ length: 10 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) })] }) }) })] }), isPayingOut && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl') }))] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders }))] }));
+                                                                }) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) : (_jsx(_Fragment, { children: Array.from({ length: 10 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) })] }) }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl') }))] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders }))] }));
 }

package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.d.ts

@@ -2,6 +2,7 @@ import { type CSSProperties } from 'react';
 interface JackpotsListItemMobileProps {
     className?: string;
     style?: CSSProperties;
+    animate?: boolean;
 }
-export declare function JackpotsListItemMobile(props: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsListItemMobile({ animate, ...props }: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.js

@@ -22,7 +22,7 @@ import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
 import { JackpotsListItemRules } from './JackpotsListItemRules.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
-export function JackpotsListItemMobile(props) {
+export function JackpotsListItemMobile({ animate = true, ...props }) {
     const jackpot = useJackpotsListItemContext();
     const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
     const [isDetailsVisible, setIsDetailsVisible] = useState(false);
@@ -45,7 +45,7 @@ export function JackpotsListItemMobile(props) {
                                                         currency: localeInfo.currency.code,
                                                         minDecimalPlaces: 2,
                                                         maxDecimalPlaces: 2,
-                                                    }) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Latest Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' }) }), _jsx(JackpotsListItemRules, {})] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { children: "Player" }), _jsx("th", { children: "Game" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" }), _jsx("th", { children: "Timestamp" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
+                                                    }) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Latest Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Recent payouts' : 'Starting soon!' }) }), _jsx(JackpotsListItemRules, {})] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { children: "Player" }), _jsx("th", { children: "Game" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" }), _jsx("th", { children: "Timestamp" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,

package/dist/components/KYC/BasicInformation.js

@@ -1,12 +1,93 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { differenceInYears, format, isSameDay, isValid, parse } from 'date-fns';
+import { isNil, omitBy, size } from 'lodash-es';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import invariant from 'tiny-invariant';
+import { z } from 'zod';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { useKYCContext } from './KYCContext.js';
+const definition = z.object({
+    realName: z
+        .string()
+        .min(3, 'Name must be 3 or more characters')
+        .max(50, 'Name must not be more than 50 characters')
+        .regex(/^[a-z0-9 ]+$/gi, 'Name must not contain special characters')
+        .trim(),
+    birthDay: z
+        .string()
+        .min(1, 'Date of birth is required')
+        .superRefine((value, ctx) => {
+        const dob = parse(value, 'yyyy-MM-dd', new Date());
+        if (!isValid(dob)) {
+            return ctx.addIssue({
+                code: z.ZodIssueCode.invalid_date,
+            });
+        }
+        const now = new Date();
+        const age = differenceInYears(now, dob);
+        if (age < 21) {
+            return ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'You must be at least 21 years old',
+            });
+        }
+    }),
+    branchCode: z.string().min(4).max(10).optional().or(z.literal('')),
+});
 export function BasicInformation() {
     const kyc = useKYCContext();
-    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Basic Information" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Enter your basic details for identification and communication." }), _jsxs("form", { className: "mt-3", onSubmit: (e) => {
-                    e.preventDefault();
-                    kyc.setStep(2);
-                }, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name" })] }), _jsxs(Field.Root, { className: "mt-3", children: [_jsx(Field.Label, { children: "Date of Birth" }), _jsx(Field.Input, { type: "date" })] }), _jsx(Button, { type: "submit", className: "mt-8", children: "Continue" })] })] }));
+    const form = useForm({
+        resolver: zodResolver(definition),
+        mode: 'all',
+        defaultValues: {
+            birthDay: '',
+            branchCode: '',
+            realName: '',
+        },
+    });
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onError(error) {
+            toaster.error({
+                title: 'Error',
+                description: error.message,
+            });
+        },
+        onSuccess() {
+            kyc.setStep(2);
+        },
+    });
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                realName: account.realName ?? '',
+                birthDay: account.birthDay
+                    ? format(account.birthDay, 'yyyy-MM-dd')
+                    : '',
+            });
+        }
+    }, [account, form, kyc]);
+    if (accountQuery.isLoading)
+        return _jsx(SpinnerIcon, {});
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Basic Information" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Enter your basic details for identification and communication." }), _jsxs("form", { className: "mt-3", onSubmit: form.handleSubmit((data) => {
+                    invariant(account);
+                    const input = omitBy({
+                        realName: account.realName === data.realName ? undefined : data.realName,
+                        birthDay: account.birthDay && isSameDay(data.birthDay, account.birthDay)
+                            ? undefined
+                            : format(data.birthDay, 'yyyy-MM-dd'),
+                    }, isNil);
+                    if (size(input) === 0)
+                        return kyc.setStep(2);
+                    updateAccountMutation.mutate(input);
+                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.birthDay, children: [_jsx(Field.Label, { children: "Date of Birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: updateAccountMutation.isPending, children: "Continue" })] })] }));
 }

package/dist/components/KYC/CaptureIdDocument.d.ts

@@ -0,0 +1 @@
+export declare function CaptureIdDocument(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/CaptureIdDocument.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { Camera01Icon } from '../../icons/Camera01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function CaptureIdDocument() {
+    const kyc = useKYCContext();
+    return (_jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => kyc.setCapturing(null), children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8" }), _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", disabled: true, children: ["Capture", _jsx(Camera01Icon, { className: "size-5" })] })] }));
+}

package/dist/components/KYC/CaptureSelfie.d.ts

@@ -0,0 +1 @@
+export declare function CaptureSelfie(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/CaptureSelfie.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { Camera01Icon } from '../../icons/Camera01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function CaptureSelfie() {
+    const kyc = useKYCContext();
+    return (_jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => kyc.setCapturing(null), children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: "Make sure your face and ID are clearly visible, with no glare or blur." }), _jsx("div", { className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8" }), _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", disabled: true, children: ["Capture", _jsx(Camera01Icon, { className: "size-5" })] })] }));
+}

package/dist/components/KYC/IdentityVerification.js

@@ -1,20 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { HelpCircleIcon } from '../../icons/HelpCircleIcon.js';
 import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
+import { Portal } from '../../ui/Portal/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function IdentityVerification() {
     const kyc = useKYCContext();
-    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "border-border-primary bg-bg-primary text-text-placeholder mt-7 rounded-xl border p-lg text-2xs leading-tight", children: [_jsx("h3", { className: "font-semibold", children: "Instructions" }), _jsxs("ol", { className: "mt-2 list-inside list-decimal", children: [_jsx("li", { children: "Upload a full photo of your ID." }), _jsx("li", { children: "Please ensure that all details in the uploaded image are legible." }), _jsx("li", { children: "Please ensure that the ID uploaded is within the validity period." })] })] }), _jsxs("form", { className: "mt-xl", onSubmit: (e) => {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "border-border-primary bg-bg-primary text-text-placeholder mt-7 rounded-xl border p-lg text-xs leading-tight", children: [_jsx("h3", { className: "font-semibold", children: "Instructions" }), _jsxs("ol", { className: "mt-2 list-inside list-decimal", children: [_jsx("li", { children: "Upload a full photo of your ID." }), _jsx("li", { children: "Please ensure that all details in the uploaded image are legible." }), _jsx("li", { children: "Please ensure that the ID uploaded is within the validity period." })] })] }), _jsxs("form", { className: "mt-xl", onSubmit: (e) => {
                     e.preventDefault();
                     kyc.setStep(3);
-                }, children: [_jsxs(Field.Root, { children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Front of your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadIdDocument, {})] }), _jsxs(Field.Root, { className: "mt-3", children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Selfie holding your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadSelfie, {})] }), _jsx(Button, { type: "submit", className: "mt-6", children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", children: "Skip for now" })] })] }));
+                }, children: [_jsxs(Field.Root, { children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Front of your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadIdDocument, {})] }), _jsxs(Field.Root, { className: "mt-3", children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Selfie holding your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadSelfie, {})] }), _jsx(Button, { type: "submit", className: "mt-6", children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", onClick: () => {
+                            kyc.setStep(3);
+                            kyc.setDone(true);
+                            globalStore.kyc.setOpen(false);
+                        }, children: "Skip for now" })] }), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: "bg-bg-primary-alt mx-auto min-h-full w-full p-3xl lg:h-auto lg:w-[400px]" }) })] }) })] }));
 }
 function UploadIdDocument() {
-    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", children: "Take a photo" })] }));
+    const kyc = useKYCContext();
+    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
+                    kyc.setCapturing('ID_DOCUMENT');
+                }, children: "Take a photo" })] }));
 }
 function UploadSelfie() {
-    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", children: "Take a photo" })] }));
+    const kyc = useKYCContext();
+    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
+                    kyc.setCapturing('SELFIE');
+                }, children: "Take a photo" })] }));
 }

package/dist/components/KYC/Indicator.js

@@ -4,5 +4,5 @@ import { Progress } from '../../ui/Progress/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Indicator() {
     const kyc = useKYCContext();
-    return (_jsxs("div", { className: "flex items-center justify-center gap-1.5 py-3", children: [_jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step <= 1 ? 50 : 100, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step < 2 ? 0 : kyc.step === 2 ? 50 : 100, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.done ? 100 : kyc.step < 3 ? 0 : 50, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) })] }));
+    return (_jsxs("div", { className: "flex items-center justify-center gap-1.5 py-3", children: [_jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 1 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 2 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step === 3 && kyc.done ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) })] }));
 }

package/dist/components/KYC/KYC.lazy.js

@@ -6,6 +6,8 @@ import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { BasicInformation } from './BasicInformation.js';
+import { CaptureIdDocument } from './CaptureIdDocument.js';
+import { CaptureSelfie } from './CaptureSelfie.js';
 import { IdentityVerification } from './IdentityVerification.js';
 import { Indicator } from './Indicator.js';
 import { KYCContext } from './KYCContext.js';
@@ -18,5 +20,9 @@ export function KYC(props) {
     })));
     return (_jsx(KYCContext, { value: kyc, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
                 globalStore.kyc.setOpen(details.open);
-            }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto size-full p-3xl lg:h-auto lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }) })] }) }) }));
+            }, lazyMount: true, unmountOnExit: true, onExitComplete: () => {
+                kyc.setStep(1);
+                kyc.setDone(false);
+                kyc.setCapturing(null);
+            }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "w-full p-3xl lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }));
 }