@opexa/portal-components 0.0.461 → 0.0.463

package/dist/components/Maya/Maya.d.ts

@@ -1 +1,26 @@
-export declare function Maya(): import("react/jsx-runtime").JSX.Element;
+import { type ImageProps } from 'next/image';
+export interface ClassNameEntries {
+    root?: string;
+    banner?: string;
+    logo?: string;
+    progressRoot?: string;
+    progressTrack?: string;
+    progressTrackCompleteBG?: string;
+    progressTrackIncompleteBG?: string;
+    progressTrackOuter?: string;
+    progressTrackInner?: string;
+    progressBar?: string;
+    progressLabel?: string;
+    licensedBy?: string;
+    pagcorLogo?: string;
+    responsibleGamingLogo?: string;
+}
+interface MayaProps {
+    logo: ImageProps['src'];
+    responsibleGamingLogo?: ImageProps['src'];
+    pagcorLogo?: ImageProps['src'];
+    banner?: ImageProps['src'];
+    className?: string | ClassNameEntries;
+}
+export declare function Maya({ logo, responsibleGamingLogo, pagcorLogo, banner, className, }: MayaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Maya/Maya.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
+import { isString } from 'lodash-es';
+import Image, {} from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -9,8 +10,9 @@ import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
 import { signOut } from '../../client/services/signOut.js';
 import { toaster } from '../../client/utils/toaster.js';
-import pagcorLogo from '../../images/pagcor.png';
-export function Maya() {
+import pagcorLogoDefault from '../../images/pagcor2.png';
+import responsibleGamingLogoDefault from '../../images/responsible-gaming.png';
+export function Maya({ logo, responsibleGamingLogo, pagcorLogo, banner, className, }) {
     const signIn = useSignInMutation();
     const router = useRouter();
     const searchParams = useSearchParams();
@@ -20,24 +22,22 @@ export function Maya() {
     const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
     const session = useSessionQuery();
     const mayaSessionId = searchParams.get('sessionId');
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
     const init = async () => {
         setProgress(25);
-        /* Decide when a session already exists */
         if (session.data) {
-            /* Is there a maya session id? */
             if (mayaSessionId) {
-                /* Is the maya session id new? */
                 if (localStorage.getItem(mayaSessIdKey) === mayaSessionId) {
                     setProgress(100);
                     return;
                 }
                 setProgress(50);
-                /* Need to remove existing session and create a new one */
                 await signOut();
                 await sleep(1000);
             }
             else {
-                /* No new maya session ID? use existing session */
                 setProgress(100);
                 return;
             }
@@ -47,10 +47,7 @@ export function Maya() {
             throw new Error('Maya session ID is required');
         }
         await new Promise((resolve, reject) => {
-            signIn.mutate({
-                type: 'MAYA',
-                session: mayaSessionId,
-            }, {
+            signIn.mutate({ type: 'MAYA', session: mayaSessionId }, {
                 onSuccess: () => {
                     setProgress(100);
                     setComplete(true);
@@ -86,6 +83,5 @@ export function Maya() {
         };
         runInit();
     }, []);
-    return (_jsx("div", { className: "relative flex min-h-screen flex-col border dark:bg-[#1F242F]", children: _jsxs("div", { className: "absolute bottom-0 w-full shrink-0 bg-[#F9FAFB] p-6 dark:bg-[#161B26]", children: [_jsxs("div", { className: "mt-4", children: [_jsx("div", { className: twMerge('overflow-hidden rounded-full p-px', !complete && 'bg-[#D0D5DD] dark:bg-[#333741]', complete &&
-                                'bg-gradient-to-r from-[#FFDE21] via-[#FFD012] to-[#FFBF00]'), id: "progress:root", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, "aria-labelledby": "progress:label", children: _jsx("div", { className: "rounded-full bg-[#F2F4F7] p-px dark:bg-[#1F242F]", children: _jsx("div", { className: "relative h-4 w-full overflow-hidden rounded-full bg-white", children: _jsx("div", { className: twMerge('absolute left-0 h-full rounded-full bg-gradient-to-r from-[#FFDE21] via-[#FFBF00] to-[#FF9442] transition-all duration-150'), style: { width: `${progress}%` } }) }) }) }), _jsxs("span", { id: "progress:label", className: "mt-3 block text-center text-[#344054] text-sm dark:text-[#CECFD2]", children: [progress, "% Loading..."] })] }), _jsxs("div", { className: "mt-7 flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-[#475467] text-xs dark:text-[#94969C]", children: "Officially Licensed by" }), _jsx(Image, { src: pagcorLogo, alt: "Pagcor Logo", height: 30, width: 30, className: "w-auto shrink-0" })] })] }) }));
+    return (_jsxs("div", { className: twMerge('relative flex min-h-screen flex-col', classNames.root), children: [banner && (_jsx(Image, { src: banner, alt: "brand logo", height: 50, width: 120, className: twMerge('w-full grow object-cover object-top', classNames.banner) })), _jsxs("div", { className: twMerge('absolute bottom-0 w-full shrink-0 bg-[#1F1F1F] p-6', classNames.progressRoot), children: [_jsxs("div", { children: [_jsx(Image, { src: logo, alt: "brand logo", height: 50, width: 120, className: twMerge('mx-auto mb-5 h-12.5 w-auto', classNames.logo) }), _jsx("div", { className: twMerge('overflow-hidden rounded-full p-px', !complete && (classNames.progressTrackIncompleteBG ?? 'bg-[#373A41]'), complete && (classNames.progressTrackCompleteBG ?? 'bg-[#ffb300]'), classNames.progressTrack), id: "progress:root", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, "aria-labelledby": "progress:label", children: _jsx("div", { className: twMerge('rounded-full bg-[#1F1F1F] p-px', classNames.progressTrackOuter), children: _jsx("div", { className: twMerge('relative h-4 w-full overflow-hidden rounded-full bg-[#22262e]', classNames.progressTrackInner), children: _jsx("div", { className: twMerge('absolute left-0 h-full rounded-full bg-[#ffb300] transition-all duration-150', classNames.progressBar), style: { width: `${progress}%` } }) }) }) }), _jsxs("span", { id: "progress:label", className: twMerge('mt-3 block text-center text-[#CECFD2] text-sm', classNames.progressLabel), children: [progress, "% Loading..."] })] }), _jsxs("div", { className: twMerge('mt-7 flex items-center justify-center gap-2 text-[#94969C] text-xs', classNames.licensedBy), children: [_jsx("span", { children: "Officially Licensed by" }), _jsx(Image, { src: pagcorLogo ?? pagcorLogoDefault, alt: "PAGCOR logo", height: 43, width: 88, className: twMerge('h-[43px] w-auto shrink-0', classNames.pagcorLogo), draggable: false, unoptimized: true }), _jsx(Image, { src: responsibleGamingLogo ?? responsibleGamingLogoDefault, alt: "Responsible Gaming logo", height: 50, width: 186, className: twMerge('h-[50px] w-auto shrink-0', classNames.responsibleGamingLogo), draggable: false, unoptimized: true })] })] })] }));
 }

package/dist/components/Quests/MultiWageringQuest.js

@@ -84,7 +84,7 @@ function Stages(props) {
         const stage = props?.stages?.findLastIndex((stage) => stage.cleared) ?? 0;
         return stage !== -1 ? stage + 1 : 1;
     }, [props.stages]);
-    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { className: "font-normal text-[#94969C] text-sm", dangerouslySetInnerHTML: {
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl border border-border-wagering-popup px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { className: "font-normal text-[#94969C] text-sm", dangerouslySetInnerHTML: {
                                             __html: props.quest?.description ||
                                                 'Ready for a challenge? Complete them all and get amazing rewards!',
                                         } }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: props.stages.map((stage, idx) => {
@@ -98,10 +98,10 @@ function Stages(props) {
 }
 function QuestWageringStageUnlocked({ bonus, stage, progressValue, data, isCompleted = false, }) {
     const localeInfo = useLocaleInfo();
-    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", progressValue, "%"] }), _jsx(Badge.Root, { size: "md", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge", children: ["+", formatNumber(bonus, {
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl border border-border-wagering-stage-popup bg-bg-wagering-stage-popup p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", progressValue, "%"] }), _jsx(Badge.Root, { size: "md", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge", children: ["+", formatNumber(bonus, {
                                     currency: localeInfo.currency.code,
                                 }), ' ', "Bonus"] }) })] }), _jsx(Progress.Root, { max: 100, className: "mt-2 h-2 rounded-full bg-bg-primary", value: progressValue ?? 0, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) })] }));
 }
 function QuestWageringStageLocked({ stage }) {
-    return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-border-lock bg-bg-lock p-1", children: _jsx(Lock01Icon, { className: "size-3 stroke-3 font-medium text-text-lock" }) })] }));
+    return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl border border-border-wagering-stage-popup bg-bg-wagering-stage-popup p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-border-lock bg-bg-lock p-1", children: _jsx(Lock01Icon, { className: "size-3 stroke-3 font-medium text-text-lock" }) })] }));
 }

package/dist/styles/theme.css

@@ -283,6 +283,10 @@
   --color-bg-badge: #13161B;
   --color-text-badge: #CECFD2;
 
+  --color-border-wagering-popup: transparent;
+  --color-bg-wagering-stage-popup: #13161b;
+  --color-border-wagering-stage-popup: transparent;
+
 
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);

package/dist/ui/Badge/Badge.d.ts

@@ -37,7 +37,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -72,7 +72,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -107,7 +107,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeLabelProps extends ComponentPropsWithRef<'span'> {
     asChild?: boolean;
 }
@@ -146,7 +146,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -181,7 +181,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -216,7 +216,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeIndicatorProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
@@ -255,7 +255,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -290,7 +290,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -325,7 +325,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeIconProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
@@ -364,7 +364,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -399,7 +399,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -434,5 +434,5 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export {};

package/dist/ui/Badge/badge.anatomy.d.ts

@@ -1 +1 @@
-export declare const badgeAnatomy: import("@ark-ui/react/anatomy").AnatomyInstance<"label" | "root" | "indicator" | "icon">;
+export declare const badgeAnatomy: import("@ark-ui/react/anatomy").AnatomyInstance<"label" | "root" | "icon" | "indicator">;

package/dist/ui/Badge/badge.recipe.d.ts

@@ -33,7 +33,7 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -68,7 +68,7 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -103,4 +103,4 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>;