@opexa/portal-components 0.0.729 → 0.0.730

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.
@@ -13,6 +13,7 @@ export interface ClassNameEntries {
13
13
  jackpotTurnoverRoot?: string;
14
14
  jackpotTurnoverIcon?: string;
15
15
  jackpotBadgeRoot?: string;
16
+ jackpotOverallProgressBarRoot?: string;
16
17
  latestPayoutRoot?: string;
17
18
  latestPayoutBadgeRoot?: string;
18
19
  latestPayoutBadgeIcon?: string;
@@ -66,6 +67,10 @@ export interface JackpotsListProps {
66
67
  four: ImageProps['src'];
67
68
  };
68
69
  };
70
+ medalImage?: {
71
+ image: ImageProps['src'];
72
+ wrapper?: string;
73
+ };
69
74
  jackpotProfileShape?: 'oval' | 'star';
70
75
  chestImagesByTier?: {
71
76
  grand?: {
@@ -27,6 +27,10 @@ interface JackpotsListItemDesktopProps {
27
27
  four: ImageProps['src'];
28
28
  };
29
29
  };
30
+ medalImage?: {
31
+ image: ImageProps['src'];
32
+ wrapper?: string;
33
+ };
30
34
  jackpotProfileShape?: 'oval' | 'star';
31
35
  }
32
36
  export declare function JackpotMultiStageDesktop({ animate, customJackpotChestImage, jackpotProfileShape, customJackpotStageChest, className, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element | null;
@@ -59,7 +59,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
59
59
  const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Winner"] }));
60
60
  const ProgressBar = () => (_jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "font-semibold text-sm text-text-primary-900", children: ["Stage ", jackpot.stage, " Progress"] }), currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: currStageProgressPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
61
61
  const OverallProgressBar = () => {
62
- return (_jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-[5px] flex items-center justify-between font-semibold text-sm text-text-primary-900", children: [_jsx("p", { children: "Overall Progress" }), overallPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: overallPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
62
+ return (_jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-[0.3125rem] flex items-center justify-between font-semibold text-sm text-text-primary-900", children: [_jsx("p", { children: "Overall Progress" }), overallPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: overallPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
63
63
  };
64
64
  const RecentPayoutsTable = () => (_jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', styles.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { className: twMerge('h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs', className?.recentPayoutsTableHeadRow), children: ['Stage', 'Player', 'Turnover Target', 'Prize', 'Timestamp'].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpot.stages
65
65
  ? jackpot.stages.map((j, i) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: i + 1 }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: j.member?.name
@@ -96,7 +96,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
96
96
  currency: localeInfo.currency.code,
97
97
  minDecimalPlaces: 2,
98
98
  maxDecimalPlaces: 2,
99
- }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _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 jackpot!" })] })] })) })] }) }) }), _jsx(ProgressBar, {})] }), _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, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', className?.recentPayoutsHeading), children: "Stages" })] }), _jsx(JackpotsListItemRules, { className: {
99
+ }) })] })] })) : (_jsxs("div", { className: twMerge('flex flex-row gap-[8.5px]', props.medalImage?.wrapper), children: [_jsx(Image, { width: 66, height: 87, src: props.medalImage?.image || firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _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 jackpot!" })] })] })) })] }) }) }), _jsx(ProgressBar, {})] }), _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, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', className?.recentPayoutsHeading), children: "Stages" })] }), _jsx(JackpotsListItemRules, { className: {
100
100
  button: className?.recentPayoutsJackpotRulesButton,
101
101
  } })] }), _jsx(OverallProgressBar, {}), _jsx(RecentPayoutsTable, {})] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute top-safe-area-inset-top right-0 rounded-2xl') }))] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders }))] }));
102
102
  }
@@ -50,6 +50,10 @@ interface JackpotsListItemMobileProps {
50
50
  };
51
51
  };
52
52
  jackpotProfileShape?: 'oval' | 'star';
53
+ medalImage?: {
54
+ image: ImageProps['src'];
55
+ wrapper?: string;
56
+ };
53
57
  }
54
58
  export declare function JackpotMultiStageMobile({ animate, customJackpotChestImage, jackpotProfileShape, customJackpotStageChest, chestImagesByTier, className, ...props }: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element | null;
55
59
  export {};
@@ -93,7 +93,7 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
93
93
  const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Winner"] }));
94
94
  const ProgressBar = () => (_jsxs("div", { className: "flex w-full flex-col items-center justify-between", children: [_jsxs("div", { className: "mb-[5px] flex w-full items-center justify-between", children: [_jsxs("div", { className: "font-semibold text-text-primary-900 text-xs", children: ["Stage ", jackpot.stage, " Progress"] }), currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary", max: 100, value: currStageProgressPercentage, "aria-valuemax": 100, "aria-label": "Stage progress", children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
95
95
  const OverallProgressBar = () => {
96
- return (_jsxs("div", { className: "mt-3 mb-[1rem] px-[0.75rem] lg:mt-4", children: [_jsxs("div", { className: "mb-[5px] flex items-center justify-between font-semibold text-text-primary-900 text-xs", children: [_jsx("p", { children: "Overall Progress" }), overallPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: overallPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
96
+ return (_jsxs("div", { className: twMerge('mt-3 mb-[1rem] px-[0.75rem] lg:mt-4', className?.jackpotOverallProgressBarRoot), children: [_jsxs("div", { className: "mb-[5px] flex items-center justify-between font-semibold text-text-primary-900 text-xs", children: [_jsx("p", { children: "Overall Progress" }), overallPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: overallPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
97
97
  };
98
98
  const RecentPayoutsTable = () => (_jsx("div", { className: "overflow-x-auto border-gray-200", children: _jsxs("table", { className: "w-full min-w-[37.5rem]", children: [_jsx("thead", { children: _jsx("tr", { className: twMerge('h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs', className?.recentPayoutsTableHeadRow), children: ['Stage', 'Player', 'Target Turnover', 'Prize', 'Timestamp'].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpot.stages
99
99
  ? jackpot.stages.map((j, i) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: i + 1 }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: j.member?.name
@@ -130,7 +130,7 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
130
130
  currency: localeInfo.currency.code,
131
131
  minDecimalPlaces: 2,
132
132
  maxDecimalPlaces: 2,
133
- }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _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 jackpot!" })] })] })) }), _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 top-safe-area-inset-top right-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:9.375rem]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', className?.recentPayoutsHeading), children: "Stages" })] }), _jsx(JackpotsListItemRules, { className: {
133
+ }) })] })] })) : (_jsxs("div", { className: twMerge('flex flex-row gap-[8.5px]', props.medalImage?.wrapper), children: [_jsx(Image, { width: 66, height: 87, src: props.medalImage?.image || firstPlace, alt: "closeChest", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _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 jackpot!" })] })] })) }), _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 top-safe-area-inset-top right-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:9.375rem]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', className?.recentPayoutsHeading), children: "Stages" })] }), _jsx(JackpotsListItemRules, { className: {
134
134
  button: className?.recentPayoutsJackpotRulesButton,
135
135
  } })] }), _jsx(OverallProgressBar, {}), _jsx(RecentPayoutsTable, {})] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders })), _jsx("div", { className: "m-3", children: _jsx(Button, { variant: "outline", className: twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["Hide", _jsx(ArrowNarrowUpIcon, { className: "size-5" })] }) }) })] }))] }));
136
136
  }
@@ -13,6 +13,7 @@ export interface ClassNameEntries {
13
13
  jackpotTurnoverRoot?: string;
14
14
  jackpotTurnoverIcon?: string;
15
15
  jackpotBadgeRoot?: string;
16
+ jackpotOverallProgressBarRoot?: string;
16
17
  latestPayoutRoot?: string;
17
18
  latestPayoutBadgeRoot?: string;
18
19
  latestPayoutBadgeIcon?: string;
@@ -78,6 +79,10 @@ export interface JackpotsListProps {
78
79
  four: ImageProps['src'];
79
80
  };
80
81
  };
82
+ medalImage?: {
83
+ image: ImageProps['src'];
84
+ wrapper?: string;
85
+ };
81
86
  jackpotProfileShape?: 'oval' | 'star';
82
87
  chestImagesByTier?: {
83
88
  grand?: {
@@ -39,12 +39,12 @@ export function JackpotsListNext(props) {
39
39
  : (props.className ?? {});
40
40
  return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg 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, index) => {
41
41
  if (jackpot?.stages?.length) {
42
- return (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotMultiStageDesktop, { style: styles.itemRoot, className: classNames, animate: true, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, customJackpotStageChest: props.customJackpotStageChest }) }, index));
42
+ return (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotMultiStageDesktop, { style: styles.itemRoot, className: classNames, animate: true, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, customJackpotStageChest: props.customJackpotStageChest, medalImage: props.medalImage }) }, index));
43
43
  }
44
44
  return (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames, animate: true, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index));
45
45
  }) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot, index) => {
46
46
  if (jackpot?.stages?.length) {
47
- return (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotMultiStageMobile, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier, customJackpotStageChest: props.customJackpotStageChest }) }, index));
47
+ return (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotMultiStageMobile, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier, customJackpotStageChest: props.customJackpotStageChest, medalImage: props.medalImage }) }, index));
48
48
  }
49
49
  return (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index));
50
50
  }) })] })) : (_jsxs("div", { className: "mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsx("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: "No Jackpots" }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No jackpots are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
@@ -22,5 +22,5 @@ export function KYCDefault(props) {
22
22
  const isDialogOpen = !globalStore.kycReminder.open && globalStore.kyc.open && !sessionLoading;
23
23
  return (_jsxs(_Fragment, { children: [_jsx(KYCDefaultContext, { value: kyc, children: _jsx(Dialog.Root, { open: isDialogOpen && !globalStore.responsibleGamingReminder.open, onOpenChange: (details) => {
24
24
  globalStore.kyc.setOpen(details.open);
25
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "fixed top-[57px] overflow-hidden", children: _jsx(Dialog.Content, { className: "mx-auto max-h-[95vh] w-full overflow-y-auto bg-bg-primary-alt lg:w-fit", children: _jsxs("div", { className: "mt-[calc(var(--safe-area-inset-top)*3)] flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit lg:w-[400px]", children: [_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(IdentityVerification, {}), kyc.step === 2 && _jsx(PersonalInformation, {})] }) }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
25
+ }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "fixed top-[57px] overflow-hidden", children: _jsx(Dialog.Content, { className: "mx-auto h-full w-full overflow-y-auto bg-bg-primary-alt md:max-h-[95vh] lg:w-fit", children: _jsxs("div", { className: "mt-[calc(var(--safe-area-inset-top)*3)] flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit lg:w-[400px]", children: [_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(IdentityVerification, {}), kyc.step === 2 && _jsx(PersonalInformation, {})] }) }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
26
26
  }
@@ -76,7 +76,8 @@ export function MessagesPopup() {
76
76
  !globalStore.message.open &&
77
77
  !globalStore.account.open &&
78
78
  !globalStore.account__mobile.open &&
79
- !globalStore.kyc.open,
79
+ !globalStore.kyc.open &&
80
+ !globalStore.kycReminder.open,
80
81
  refetchInterval: disclosure.open ? undefined : 1000 * 10,
81
82
  });
82
83
  const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
@@ -111,10 +112,8 @@ export function MessagesPopup() {
111
112
  };
112
113
  const sessionQuery = useSessionQuery();
113
114
  const session = sessionQuery.data;
114
- return (_jsx(Dialog.Root, { open: disclosure.open &&
115
- !paused &&
116
- !globalStore.kyc.open &&
117
- !globalStore.kycReminder.open, onOpenChange: (details) => {
115
+ const isKycOpened = !globalStore.kyc.open || !globalStore.kycReminder.open;
116
+ return (_jsx(Dialog.Root, { open: disclosure.open && !paused && isKycOpened, onOpenChange: (details) => {
118
117
  disclosure.setOpen(details.open);
119
118
  }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto max-h-[80vh] min-w-[21.438rem] max-w-[21.438rem] overflow-y-auto rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: index, onPageChange: (details) => {
120
119
  setIndex(details.page);
@@ -47,7 +47,7 @@ export function useSelfieImageField(props) {
47
47
  const [validatingFace, setValidatingFace] = useState(false);
48
48
  const camera = useCamera({
49
49
  video: {
50
- facingMode: desktop ? 'environment' : 'user',
50
+ facingMode: 'user',
51
51
  },
52
52
  async transform(data) {
53
53
  if (validatingFace)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.729",
3
+ "version": "0.0.730",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",