@opexa/portal-components 0.0.29 → 0.0.30

package/dist/components/KYC/UploadDocument.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Camera01Icon, CheckCircleIcon, XIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function UploadDocument() {
+    const context = useKYCContext();
+    return (_jsxs("div", { className: "bg-bg-primary-alt relative w-[747px] rounded-xl pb-12 pt-4xl", children: [_jsx("button", { type: "button", className: "absolute right-4 top-4", onClick: () => context.setUploadingDocument(false), children: _jsx(XIcon, { className: "text-text-quinary size-5" }) }), _jsx("h2", { className: "text-center text-xl font-semibold", children: "Take a Picture of Your Front ID" }), _jsxs("p", { className: "text-text-tertiary-600 mt-md text-center", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", {}), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { className: "mx-auto mt-10 h-[333px] w-[643px] rounded-xl bg-white/10" }), _jsxs("div", { className: "mx-auto mt-10 flex w-fit gap-3", children: [_jsxs(Button, { variant: "outline", fullWidth: false, children: [_jsx(Camera01Icon, {}), "Retake Photo"] }), _jsxs(Button, { fullWidth: false, children: [_jsx(CheckCircleIcon, {}), "Use Photo"] })] })] }));
+}

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

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

package/dist/components/KYC/UploadSelfie.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Camera01Icon, CheckCircleIcon, XIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function UploadSelfie() {
+    const context = useKYCContext();
+    return (_jsxs("div", { className: "bg-bg-primary-alt relative w-[747px] rounded-xl pb-12 pt-4xl", children: [_jsx("button", { type: "button", className: "absolute right-4 top-4", onClick: () => context.setUploadingSelfie(false), children: _jsx(XIcon, { className: "text-text-quinary size-5" }) }), _jsx("h2", { className: "text-center text-xl font-semibold", children: "Take a Selfie Holding Your ID" }), _jsx("p", { className: "text-text-tertiary-600 mt-md text-center", children: "Make sure your face and ID are clearly visible, with no glare or blur." }), _jsx("div", { className: "mx-auto mt-10 h-[333px] w-[643px] rounded-xl bg-white/10" }), _jsxs("div", { className: "mx-auto mt-10 flex w-fit gap-3", children: [_jsxs(Button, { variant: "outline", fullWidth: false, children: [_jsx(Camera01Icon, {}), "Retake Photo"] }), _jsxs(Button, { fullWidth: false, children: [_jsx(CheckCircleIcon, {}), "Use Photo"] })] })] }));
+}

package/dist/components/KYC/index.js

@@ -1,2 +1,2 @@
-export * from './KYC';
-export * from './KYCTrigger';
+export * from './KYC.js';
+export * from './KYCTrigger.js';

package/dist/components/Marquee/Marquee.d.ts

@@ -2,4 +2,4 @@ export interface MarqueeProps {
     children?: React.ReactNode;
     className?: string;
 }
-export declare function Marquee(props: MarqueeProps): import("react").JSX.Element;
+export declare function Marquee(props: MarqueeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Marquee/Marquee.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+export function Marquee(props) {
+    return (_jsxs("div", { className: twMerge('border-border-primary bg-bg-primary text-text-secondary-700 shadow-xs flex gap-lg rounded-lg border p-1 pr-2.5 text-sm font-medium', props.className), children: [_jsxs("div", { className: "border-border-primary flex shrink-0 items-center gap-sm rounded-sm border px-2 py-0.5", children: [_jsx("span", { className: "bg-utility-success-500 outline-utility-success-100 size-2 rounded-full outline-2" }), _jsx("span", { children: "What's new" })] }), _jsx("div", { className: "flex grow items-center overflow-hidden", children: _jsxs("div", { className: "flex items-center whitespace-nowrap", children: [_jsx("div", { className: "animate-marquee pr-4 [animation-delay:1s]", children: props.children }), _jsx("div", { className: "animate-marquee pr-4 [animation-delay:1s]", children: props.children })] }) })] }));
+}

package/dist/components/Marquee/index.js

@@ -1 +1 @@
-export * from './Marquee';
+export * from './Marquee.js';

package/dist/components/Messages/MessageItem.d.ts

@@ -1,4 +1,4 @@
 import type { Message } from '@opexa/portal-sdk-core';
 export declare function MessageItem({ message }: {
     message: Message;
-}): import("react").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessageItem.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tz } from '@date-fns/tz';
+import { format } from 'date-fns';
+import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useLocaleInfo, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
+import { getMessageIcon } from '../../components/Messages/utils.js';
+export function MessageItem({ message }) {
+    const { id, title, dateTimeCreated, content, markedAsRead, icon, actions } = message;
+    const localeInfo = useLocaleInfo();
+    const { messages: messagesStore } = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const { mutate } = useMarkMessageAsReadMutation();
+    const Icon = getMessageIcon(icon);
+    const handleViewMessage = async () => {
+        mutate(id);
+        messagesStore.setOpen(false);
+        messagesStore.message.setData(message);
+        messagesStore.message.setOpen(true);
+    };
+    const handleActionClick = (e) => {
+        e.stopPropagation();
+        messagesStore.setOpen(false);
+        messagesStore.setTab('ALL');
+    };
+    return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(dateTimeCreated), 'M/d/yyyy - h:mma', {
+                            in: tz(localeInfo.timezone),
+                        }) }), !markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: content } }), actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
+}

package/dist/components/Messages/MessagePopup.d.ts

@@ -1 +1 @@
-export declare const MessagePopup: () => import("react").JSX.Element;
+export declare const MessagePopup: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessagePopup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/index.js';
+import { XIcon } from '../../icons/index.js';
+import { Dialog } from '../../ui/index.js';
+import { getMessageIcon } from './utils.js';
+export const MessagePopup = () => {
+    const { messages: messagesStore } = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const message = messagesStore.message.data;
+    const Icon = getMessageIcon(message?.icon ?? 'MESSAGE');
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: messagesStore.message.open, onOpenChange: ({ open }) => {
+            messagesStore.message.setOpen(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: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(Icon, { className: "text-text-brand", height: "24", width: "24" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: message?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: { __html: message?.content ?? '' } })] }), message?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: message.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
+                                        messagesStore.message.setOpen(false);
+                                    }, children: action.name }, index))) })) : null] }) })] }) }));
+};

package/dist/components/Messages/Messages.d.ts

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

package/dist/components/Messages/Messages.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useMessagesQuery, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
+import { Bell01Icon, SpinnerIcon, XIcon } from '../../icons/index.js';
+import { Drawer, IconButton, Tabs } from '../../ui/index.js';
+import { InfiniteScroll } from '../InfiniteScroll.js';
+import { MessageItem } from './MessageItem.js';
+import { MessagePopup } from './MessagePopup.js';
+const TABS = ['ALL', 'UNREAD'];
+export function Messages() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    const messagesQuery = useMessagesQuery({
+        first: 10,
+        ...(globalStore.messages.tab === 'UNREAD' && {
+            filter: {
+                markedAsRead: {
+                    equal: true,
+                },
+            },
+        }),
+    }, { refetchInterval: 5000 });
+    const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, children: _jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] }) }), _jsxs(Portal, { children: [_jsx(Drawer.Backdrop, {}), _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: "bg-gray-50 bg-bg-primary flex flex-col", children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary mb-10 w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { id: "messages-scrollable", value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto pb-4 pl-4", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageItem, { message: message }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
+                                                                    await messagesQuery.fetchNextPage();
+                                                                }, className: "mt-4" })] }, tab)))] })] }) }) })] })] }), _jsx(MessagePopup, {})] }));
+}

package/dist/components/Messages/MessagesTrigger.d.ts

@@ -2,5 +2,5 @@ import type { ComponentPropsWithRef } from 'react';
 interface MessagesTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }
-export declare function MessagesTrigger(props: MessagesTriggerProps): import("react").JSX.Element;
+export declare function MessagesTrigger(props: MessagesTriggerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Messages/{MessagesTrigger.jsx → MessagesTrigger.js}

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/index.js';
@@ -6,8 +7,8 @@ export function MessagesTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         messages: ctx.messages,
     })));
-    return (<ark.button type="button" {...props} onClick={(e) => {
+    return (_jsx(ark.button, { type: "button", ...props, onClick: (e) => {
             globalStore.messages.setOpen(!globalStore.messages.open);
             return props.onClick?.(e);
-        }} data-state={globalStore.messages.open ? 'open' : 'closed'}/>);
+        }, "data-state": globalStore.messages.open ? 'open' : 'closed' }));
 }

package/dist/components/Messages/index.js

@@ -1,2 +1,2 @@
-export * from './Messages';
-export * from './MessagesTrigger';
+export * from './Messages.js';
+export * from './MessagesTrigger.js';

package/dist/components/Messages/utils.d.ts

@@ -1,3 +1,3 @@
 import type { MessageIcon } from '@opexa/portal-sdk-core';
-import { BellRingIcon } from '../../icons';
+import { BellRingIcon } from '~/icons';
 export declare function getMessageIcon(logo: MessageIcon): typeof BellRingIcon;

package/dist/components/PortalProvider/PortalProvider.client.d.ts

@@ -1,2 +1,2 @@
 import type { PortalProviderProps } from './PortalProvider';
-export declare function PortalProvider__client({ googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, facebookPixelId, children, }: PortalProviderProps): import("react").JSX.Element;
+export declare function PortalProvider__client({ googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, facebookPixelId, children, }: PortalProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/PortalProvider/PortalProvider.client.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast, Toaster } from '@ark-ui/react';
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { twMerge } from 'tailwind-merge';
+import { toaster } from '../../client/utils/index.js';
+import { AlertCircleIcon, XIcon } from '../../icons/index.js';
+import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
+import { getQueryClient } from '../../utils/index.js';
+export function PortalProvider__client({ googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, facebookPixelId, children, }) {
+    const queryClient = getQueryClient();
+    return (_jsxs(QueryClientProvider, { client: queryClient, children: [children, _jsx(Toaster, { toaster: toaster, children: (toast) => (_jsxs(Toast.Root, { className: "shadow-xs border-gray-300 group z-[var(--z-index)] flex h-[var(--height)] w-[860px] max-w-full scale-[var(--scale)] items-center gap-lg rounded-xl border bg-white p-xl opacity-[var(--opacity)] transition-all duration-300 [translate:var(--x)_var(--y)_0]", children: [_jsx("div", { className: twMerge('flex size-9.5 items-center justify-center rounded-full border-2', toast.type === 'error'
+                                ? 'border-red-500/15'
+                                : 'border-green-500/15'), children: _jsx("div", { className: twMerge('flex size-7 items-center justify-center rounded-full border-2', toast.type === 'error'
+                                    ? 'border-red-500/35'
+                                    : 'border-green-500/35'), children: _jsx(AlertCircleIcon, { className: twMerge('size-5', toast.type === 'error' ? 'text-red-500' : 'text-green-500') }) }) }), _jsxs("div", { className: "grow text-sm leading-none", children: [_jsx(Toast.Title, { className: "font-semibold", children: toast.title
+                                        ? toast.title
+                                        : toast.type === 'error'
+                                            ? 'Error'
+                                            : 'Success' }), _jsx(Toast.Description, { className: "text-gray-700 mt-1", children: toast.description
+                                        ? toast.description
+                                        : toast.type === 'error'
+                                            ? 'Something went wrong.'
+                                            : 'Operation completed successfully.' })] }), _jsx(Toast.CloseTrigger, { className: "text-gray-400 hover:text-gray-500 self-start", children: _jsx(XIcon, { className: "size-5" }) })] }, toast.id)) }), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
+}

package/dist/components/PortalProvider/PortalProvider.d.ts

@@ -6,4 +6,4 @@ export interface PortalProviderProps {
     facebookPixelId?: string;
     children: ReactNode;
 }
-export declare function PortalProvider({ children, ...props }: PortalProviderProps): Promise<import("react").JSX.Element>;
+export declare function PortalProvider({ children, ...props }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/PortalProvider/{PortalProvider.jsx → PortalProvider.js}

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import {} from 'react';
 import { prefetchAccountQuery, prefetchSessionQuery, prefetchWalletQuery, } from '../../server/utils/index.js';
 import { getQueryClient } from '../../utils/index.js';
-import { PortalProvider__client } from './PortalProvider.client';
+import { PortalProvider__client } from './PortalProvider.client.js';
 export async function PortalProvider({ children, ...props }) {
     const queryClient = getQueryClient();
     await Promise.all([
@@ -10,9 +11,5 @@ export async function PortalProvider({ children, ...props }) {
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    return (<PortalProvider__client {...props}>
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        {children}
-      </HydrationBoundary>
-    </PortalProvider__client>);
+    return (_jsx(PortalProvider__client, { ...props, children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }));
 }

package/dist/components/PortalProvider/index.js

@@ -1 +1 @@
-export * from './PortalProvider';
+export * from './PortalProvider.js';

package/dist/components/Promo/Promo.d.ts

@@ -4,4 +4,4 @@ export interface PromoProps {
     viewAllPromosUrl?: string;
     className?: string;
 }
-export declare function Promo(props: PromoProps): Promise<import("react").JSX.Element>;
+export declare function Promo(props: PromoProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Promo/Promo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromoContent } from './PromoContent.js';
+export async function Promo(props) {
+    /**
+     * await prefetchPromoQuery(props.id);
+     */
+    return _jsx(PromoContent, { id: props.id });
+}

package/dist/components/Promo/PromoContent.d.ts

@@ -1,2 +1,2 @@
 import type { PromoProps } from './Promo';
-export declare function PromoContent(props: PromoProps): import("react").JSX.Element;
+export declare function PromoContent(props: PromoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promo/PromoContent.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon } from '../../icons/index.js';
+import { Button, Prose } from '../../ui/index.js';
+export function PromoContent(props) {
+    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: "https://s3.ap-east-1.amazonaws.com/opexa-assets.opexasystem.com/assets/BSxIXEsa59_zzMAR27-ALLDAYREBATE06-STATIC-WEB-HB-1920x1080.png", alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx(Button, { className: "mt-xl lg:mt-6", children: "Deposit Now" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: "Welcome Bonus 100% up to $500 + 10 Free Spins" }), _jsx("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: "Ends 5/26/2025, 1:59:59 AM" }), _jsxs(Prose, { className: "mt-2xl lg:mt-6", children: [_jsx("p", { children: "Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id." }), _jsx("p", { children: "Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat." }), _jsx("p", { children: "Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci." }), _jsx("p", { children: "Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla." }), _jsx("p", { children: "Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna. Viverra purus et erat auctor aliquam. Risus, volutpat vulputate posuere purus sit congue convallis aliquet. Arcu id augue ut feugiat donec porttitor neque. Mauris, neque ultricies eu vestibulum, bibendum quam lorem id. Dolor lacus, eget nunc lectus in tellus, pharetra, porttitor." }), _jsx("p", { children: "Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci." }), _jsx("h5", { children: "General Conditions:" }), _jsx("p", { children: "Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id." }), _jsx("p", { children: "Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat." })] }), _jsxs(Prose, { className: "bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl", children: [_jsx("h2", { children: "Conclusion" }), _jsx("p", { children: "Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse." }), _jsx("p", { children: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus." }), _jsx("p", { children: "Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor." })] })] }));
+}

package/dist/components/Promo/index.js

@@ -1 +1 @@
-export * from './Promo';
+export * from './Promo.js';

package/dist/components/Promos/PromoCarousel.d.ts

@@ -1,2 +1,2 @@
 import type { PromosProps } from './Promos';
-export declare function PromoCarousel(props: PromosProps): import("react").JSX.Element;
+export declare function PromoCarousel(props: PromosProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromoCarousel.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { usePromosQuery } from '../../client/hooks/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, Gift01Icon, } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { Empty } from '../Empty.js';
+import { PromosItem } from './PromoItem.js';
+export function PromoCarousel(props) {
+    const promosQuery = usePromosQuery({});
+    const promos = promosQuery.data || [];
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 3,
+            },
+        },
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promotions' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/promos', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), promos.length <= 0 && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), promos.length >= 1 && (_jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/1)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/3)] lg:gap-md'), children: promos.map((promo) => (_jsx(PromosItem, { promo: promo, shouldShowDescription: props.shouldShowDescription }, promo.id))) }) }))] }));
+}

package/dist/components/Promos/PromoGrid.d.ts

@@ -1,2 +1,2 @@
 import type { PromosProps } from './Promos';
-export declare function PromoGrid(props: PromosProps): import("react").JSX.Element;
+export declare function PromoGrid(props: PromosProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromoGrid.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { usePromosQuery } from '../../client/hooks/index.js';
+import { Gift01Icon } from '../../icons/index.js';
+import { Empty } from '../Empty.js';
+import { PromosItem } from './PromoItem.js';
+export function PromoGrid(props) {
+    const promosQuery = usePromosQuery({});
+    const promos = promosQuery.data || [];
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), promos.length <= 0 && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-lg" })), promos.length >= 1 && (_jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid grid-cols-1 gap-sm lg:grid-cols-3 lg:gap-md'), children: promos.map((promo) => (_jsx(PromosItem, { promo: promo, shouldShowDescription: props.shouldShowDescription }, promo.id))) }) }))] }));
+}

package/dist/components/Promos/PromoItem.d.ts

@@ -3,5 +3,5 @@ interface PromosItemProps {
     promo: Promo;
     shouldShowDescription?: boolean;
 }
-export declare function PromosItem(props: PromosItemProps): import("react").JSX.Element;
+export declare function PromosItem(props: PromosItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Promos/PromoItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { twJoin } from 'tailwind-merge';
+import { Button } from '../../ui/index.js';
+export function PromosItem(props) {
+    const { promo } = props;
+    const router = useRouter();
+    return (_jsxs("div", { className: "border-gray-50 bg-accent-50 relative flex h-full flex-col rounded-md border", children: [promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: promo.name, width: 1200, height: 500, priority: true, className: "aspect-[1200/500] w-full rounded-t-md object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col p-4", children: [_jsx("p", { className: twJoin('w-full text-xl font-bold', props.shouldShowDescription ? 'text-start' : 'text-center'), children: promo.name }), props.shouldShowDescription && promo.description && (_jsx("p", { className: "text-gray-600 mb-2 line-clamp-2 w-full overflow-hidden text-start text-sm", dangerouslySetInnerHTML: { __html: promo.description } })), _jsx("div", { className: "mt-auto pt-4", children: _jsx(Button, { className: "w-full", variant: "outline", onClick: () => router.push(`/promos/${promo.id}`), children: "Read More" }) })] })] }, promo.id));
+}

package/dist/components/Promos/Promos.d.ts

@@ -10,4 +10,4 @@ export interface PromosProps {
     /** @default 'carousel' */
     layout?: 'carousel' | 'grid';
 }
-export declare function Promos(props: PromosProps): import("react").JSX.Element;
+export declare function Promos(props: PromosProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/Promos.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromoCarousel } from './PromoCarousel.js';
+import { PromoGrid } from './PromoGrid.js';
+export function Promos(props) {
+    if (props.layout === 'grid') {
+        return _jsx(PromoGrid, { ...props });
+    }
+    else {
+        return _jsx(PromoCarousel, { ...props });
+    }
+}

package/dist/components/Promos/index.js

@@ -1 +1 @@
-export * from './Promos';
+export * from './Promos.js';

package/dist/components/Protected/index.js

@@ -1 +1 @@
-export * from './Protected';
+export * from './Protected.js';

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts

@@ -1 +1 @@
-export default function DailyCheckInQuest(): import("react").JSX.Element;
+export default function DailyCheckInQuest(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CalendarIcon, ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
+import { twMerge } from 'tailwind-merge';
+import { Button } from '../../../ui/index.js';
+import { useState } from 'react';
+import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
+export default function DailyCheckInQuest() {
+    const [showRules, setShowRules] = useState(false);
+    // dummy data
+    const dailyCheckedInData = [
+        {
+            day: 1,
+            reward: 0,
+        },
+        {
+            day: 2,
+            reward: 0,
+        },
+        {
+            day: 3,
+            reward: 5,
+        },
+        {
+            day: 4,
+            reward: 0,
+        },
+        {
+            day: 5,
+            reward: 10,
+        },
+        {
+            day: 6,
+            reward: 0,
+        },
+        {
+            day: 7,
+            reward: 20,
+        },
+    ];
+    const checkedInDays = 4;
+    const totalDays = 7;
+    const progressPercent = (checkedInDays / totalDays) * 100;
+    return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
+                    isOpen: showRules,
+                    setIsOpen: setShowRules,
+                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full min-w-[343px] flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 rounded-xs flex items-center space-x-1 border py-1 pl-2 pr-2.5", children: [_jsx(ClockStopWatchIcon, { className: "text-brand-400" }), _jsx("p", { className: "text-utility-brand-700 text-sm font-medium", children: "6d:10h:11m:10s" })] }), _jsx("div", { role: "button", className: "rounded-xs bg-bg-primary border-border-secondary cursor-pointer border p-2", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: "Daily Check-In" }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", children: "Check in for 7 days in a row to earn a bonus, don\u2019t miss a day to keep your streak!" })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
+                                    const reward = item.reward ? `+₱${item.reward}` : '-';
+                                    return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= checkedInDays
+                                            ? 'text-brand-400'
+                                            : 'text-text-secondary-700'), children: _jsx("p", { children: reward }) }, item.day));
+                                }) }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercent}%` } }) }), _jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => (_jsx("div", { className: "flex items-center justify-center", children: _jsx(CalendarWithDayNumber, { day: item.day, currentCheckedInDays: checkedInDays }, item.day) }, item.day))) })] }), _jsx(Button, { children: "Check-In" })] })] }));
+}
+function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
+    return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
+            ? 'text-brand-400'
+            : 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-[4px] flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
+}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts

@@ -4,5 +4,5 @@ interface Props {
         setIsOpen: (isOpen: boolean) => void;
     };
 }
-export declare function DailyCheckInQuestModal(props: Props): import("react").JSX.Element;
+export declare function DailyCheckInQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog } from '../../../ui/index.js';
+import { Portal } from '@ark-ui/react';
+import { XIcon } from '../../../icons/index.js';
+export function DailyCheckInQuestModal(props) {
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-[18px] font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/dist/components/Quests/Quests.d.ts

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

package/dist/components/Quests/Quests.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DailyCheckInQuest from './DailyCheckInQuest/DailyCheckInQuest.js';
+import WageringQuest from './WageringQuest/WageringQuest.js';
+export function Quests() {
+    return (_jsxs("div", { className: "mt-6 flex w-full flex-col px-4 lg:px-0", children: [_jsx("h3", { className: "mb-3 text-lg", children: "Quests" }), _jsxs("div", { className: "grid grid-cols-1 gap-3xl lg:grid-cols-3", children: [_jsx(DailyCheckInQuest, {}), _jsx(WageringQuest, {})] })] }));
+}

package/dist/components/Quests/WageringQuest/WageringQuest.d.ts

@@ -1 +1 @@
-export default function WageringQuest(): import("react").JSX.Element;
+export default function WageringQuest(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/WageringQuest/WageringQuest.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
+import { Button } from '../../../ui/index.js';
+import { useState } from 'react';
+import { WageringQuestModal } from './WageringQuestModal.js';
+export default function WageringQuest() {
+    const [showRules, setShowRules] = useState(false);
+    const totalBet = 200;
+    const targetBet = 500;
+    const progressPercent = (totalBet / targetBet) * 100;
+    return (_jsxs(_Fragment, { children: [_jsx(WageringQuestModal, { modalState: {
+                    isOpen: showRules,
+                    setIsOpen: setShowRules,
+                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full min-w-[343px] flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 rounded-xs flex items-center space-x-1 border py-1 pl-2 pr-2.5", children: [_jsx(ClockStopWatchIcon, { className: "text-brand-400" }), _jsx("p", { className: "text-utility-brand-700 text-sm font-medium", children: "6d:10h:11m:10s" })] }), _jsx("div", { role: "button", className: "rounded-xs bg-bg-primary border-border-secondary cursor-pointer border p-2", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: "Slots - total bet of \u20B1500" }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", children: "Play any slot game and place a total of \u20B1500 in bets to claim your reward!" })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "text-text-primary-brand group flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", progressPercent, "%"] }), _jsxs("p", { children: [totalBet, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetBet] })] })] }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercent}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { variant: "solid", className: "bg-button-secondary-bg border-bg-primary-hover border text-white", children: _jsxs("p", { children: ["Complete to get ", _jsx("span", { className: "text-brand-400", children: "\u20B150" }), " bonus!"] }) }) })] })] }));
+}

package/dist/components/Quests/WageringQuest/WageringQuestModal.d.ts

@@ -4,5 +4,5 @@ interface Props {
         setIsOpen: (isOpen: boolean) => void;
     };
 }
-export declare function WageringQuestModal(props: Props): import("react").JSX.Element;
+export declare function WageringQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Quests/WageringQuest/WageringQuestModal.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog } from '../../../ui/index.js';
+import { Portal } from '@ark-ui/react';
+import { XIcon } from '../../../icons/index.js';
+export function WageringQuestModal(props) {
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-[18px] font-semibold", children: "Slots - total bet Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/dist/components/Quests/index.js

@@ -1 +1 @@
-export * from './Quests';
+export * from './Quests.js';

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

@@ -4,4 +4,4 @@ export interface SignInProps {
     logo: ImageProps['src'];
     children?: ReactNode;
 }
-export declare function SignIn(props: SignInProps): import("react").JSX.Element;
+export declare function SignIn(props: SignInProps): import("react/jsx-runtime").JSX.Element;