@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/KYC/Step1.jsx

@@ -1,37 +0,0 @@
-import { Button, Field } from '../../ui/index.js';
-import { useKYCContext } from './KYCContext';
-export function Step1() {
-    const context = useKYCContext();
-    return (<form className="mt-3xl flex grow flex-col" onSubmit={(e) => {
-            e.preventDefault();
-            context.setStep(2);
-        }}>
-      <h2 className="text-text-primary-900 text-center text-lg">
-        Basic Information
-      </h2>
-      <p className="text-text-tertiary-600 text-center text-sm">
-        Enter your basic details for identification and communication.
-      </p>
-
-      <div className="mt-9 grow">
-        <Field.Root>
-          <Field.Label>Real name</Field.Label>
-          <Field.Input />
-        </Field.Root>
-        <Field.Root className="mt-xl">
-          <Field.Label>Date of birth</Field.Label>
-          <Field.Input type="date"/>
-        </Field.Root>
-        <Button type="submit" className="mt-xl">
-          Continue
-        </Button>
-      </div>
-
-      <div className="text-text-tertiary-600 mt-3xl w-full text-center text-sm">
-        Use another account.{' '}
-        <button type="button" className="text-button-tertiary-fg font-semibold">
-          Log out
-        </button>
-      </div>
-    </form>);
-}

package/dist/components/KYC/Step2.jsx

@@ -1,86 +0,0 @@
-import { HelpCircleIcon, UploadCloud02Icon } from '../../icons/index.js';
-import { Button, Field } from '../../ui/index.js';
-import { useKYCContext } from './KYCContext';
-export function Step2() {
-    const context = useKYCContext();
-    return (<form className="mt-3xl flex grow flex-col items-start justify-start overflow-y-auto" onSubmit={(e) => {
-            e.preventDefault();
-            context.setStep(3);
-        }}>
-      <h2 className="text-text-primary-900 w-full text-center text-lg">
-        Verify Your Identity
-      </h2>
-      <p className="text-text-tertiary-600 w-full text-center text-sm">
-        Verify your details to confirm your identity and secure your access.
-      </p>
-
-      <div className="border-border-secondary bg-bg-brand-secondary-alt text-text-tertiary-600 mt-xl w-full rounded-xl border p-3 text-2xs leading-tight">
-        <h4 className="font-semibold">Instructions</h4>
-        <ol className="mt-2 list-inside list-decimal">
-          <li>Upload a full photo of your ID.</li>
-          <li>
-            Please ensure that all details in the uploaded image are legible.
-          </li>
-          <li>
-            Please ensure that the ID uploaded is within the validity period.
-          </li>
-        </ol>
-      </div>
-
-      <div className="scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full mt-xl w-full grow overflow-y-auto">
-        <Field.Root>
-          <Field.Label className="flex items-center gap-1.5">
-            Front of your ID{' '}
-            <HelpCircleIcon className="text-text-quinary size-4"/>
-          </Field.Label>
-          <div className="border-border-secondary bg-bg-primary rounded-xl border px-3xl py-xl">
-            <div className="border-border-secondary shadow-xs text-text-secondary-700 mx-auto flex size-8 items-center justify-center rounded-sm border">
-              <UploadCloud02Icon className="size-4"/>
-            </div>
-            <p className="text-text-tertiary-600 mt-lg text-center text-xs">
-              <span className="text-button-tertiary-fg font-semibold">
-                Click to upload
-              </span>{' '}
-              or drag and drop
-            </p>
-            <p className="text-text-tertiary-600 mt-xs text-center text-xs">
-              PNG, JPG or JPEG (max. 10mb)
-            </p>
-            <p className="text-text-tertiary-600 mt-xs text-center text-xs">
-              or
-            </p>
-            <Button size="xs" variant="outline" className="mx-auto mt-xs w-fit" onClick={() => {
-            context.setUploadingDocument(true);
-        }}>
-              Take a photo
-            </Button>
-          </div>
-        </Field.Root>
-
-        <Field.Root className="mt-3">
-          <Field.Label className="flex items-center gap-1.5">
-            Selfie holding your ID{' '}
-            <HelpCircleIcon className="text-text-quinary size-4"/>
-          </Field.Label>
-          <div className="border-border-secondary bg-bg-primary flex h-[180px] items-center justify-center rounded-xl border px-3xl py-xl">
-            <Button size="xs" variant="outline" className="w-fit" onClick={() => {
-            context.setUploadingDocument(true);
-        }}>
-              Take a photo
-            </Button>
-          </div>
-        </Field.Root>
-      </div>
-
-      <div className="mt-xl w-full">
-        <Button type="submit">Continue</Button>
-
-        <div className="text-text-tertiary-600 mt-3xl w-full text-center text-sm">
-          Use another account.{' '}
-          <button type="button" className="text-button-tertiary-fg font-semibold">
-            Log out
-          </button>
-        </div>
-      </div>
-    </form>);
-}

package/dist/components/KYC/Step3.jsx

@@ -1,68 +0,0 @@
-import { CheckIcon } from '../../icons/index.js';
-import { Button, Checkbox, Field } from '../../ui/index.js';
-import { useKYCContext } from './KYCContext';
-export function Step3() {
-    const context = useKYCContext();
-    return (<form className="mt-3xl flex grow flex-col items-start justify-start overflow-y-auto" onSubmit={(e) => {
-            e.preventDefault();
-            context.setOpen(false);
-        }}>
-      <h2 className="text-text-primary-900 w-full text-center text-lg">
-        Personal Information
-      </h2>
-      <p className="text-text-tertiary-600 w-full text-center text-sm">
-        Provide your basic details and work info.
-      </p>
-
-      <div className="scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full mt-4 w-full grow overflow-y-auto">
-        <Field.Root>
-          <Field.Label>Permanent address</Field.Label>
-          <Field.Input />
-        </Field.Root>
-
-        <Checkbox.Root className="mt-lg">
-          <Checkbox.Control>
-            <Checkbox.Indicator asChild>
-              <CheckIcon />
-            </Checkbox.Indicator>
-          </Checkbox.Control>
-          <Checkbox.Label>
-            Use permanent address as current address
-          </Checkbox.Label>
-          <Checkbox.HiddenInput />
-        </Checkbox.Root>
-
-        <Field.Root className="mt-xl">
-          <Field.Label>Current address</Field.Label>
-          <Field.Input />
-        </Field.Root>
-        <Field.Root className="mt-xl">
-          <Field.Label>Source of income</Field.Label>
-          <Field.Input />
-        </Field.Root>
-        <Field.Root className="mt-xl">
-          <Field.Label>Nature of work</Field.Label>
-          <Field.Input />
-        </Field.Root>
-        <Field.Root className="mt-xl">
-          <Field.Label>Place of birth</Field.Label>
-          <Field.Input />
-        </Field.Root>
-        <Field.Root className="mt-xl">
-          <Field.Label>Nationality</Field.Label>
-          <Field.Input />
-        </Field.Root>
-      </div>
-
-      <div className="mt-xl w-full">
-        <Button type="submit">Submit and Play</Button>
-
-        <div className="text-text-tertiary-600 mt-3xl w-full text-center text-sm">
-          Use another account.{' '}
-          <button type="button" className="text-button-tertiary-fg font-semibold">
-            Log out
-          </button>
-        </div>
-      </div>
-    </form>);
-}

package/dist/components/KYC/StepIndicator.jsx

@@ -1,22 +0,0 @@
-import { dataAttr } from '../../utils/index.js';
-import { useKYCContext } from './KYCContext';
-export function StepIndicator() {
-    const context = useKYCContext();
-    return (<div className="mx-auto mt-3xl flex w-fit items-center">
-      <Circle active={context.step >= 1}/>
-      <Line active={context.step >= 2}/>
-      <Circle active={context.step >= 2}/>
-      <Line active={context.step >= 3}/>
-      <Circle active={context.step >= 3}/>
-    </div>);
-}
-function Circle({ active }) {
-    return (<div className="ui-active:bg-bg-brand-solid ui-active:shadow-brand border-border-disabled-subtle bg-bg-disabled-subtle group flex size-6 items-center justify-center rounded-full transition-colors delay-300 duration-300" data-active={dataAttr(active)}>
-      <div className="bg-text-disabled-subtle size-2.5 rounded-full transition-all delay-300 duration-300 ui-group-active:bg-white"/>
-    </div>);
-}
-function Line({ active }) {
-    return (<div className="bg-bg-quaternary group relative h-0.5 w-20" data-active={dataAttr(active)}>
-      <div className="bg-text-brand-primary-600 absolute left-0 top-0 h-full w-0 transition-all duration-300 ui-group-active:w-full"/>
-    </div>);
-}

package/dist/components/KYC/UploadDocument.jsx

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

package/dist/components/KYC/UploadSelfie.jsx

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

package/dist/components/Marquee/Marquee.jsx

@@ -1,20 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-export function Marquee(props) {
-    return (<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)}>
-      <div className="border-border-primary flex shrink-0 items-center gap-sm rounded-sm border px-2 py-0.5">
-        <span className="bg-utility-success-500 outline-utility-success-100 size-2 rounded-full outline-2"/>
-        <span>What&apos;s new</span>
-      </div>
-
-      <div className="flex grow items-center overflow-hidden">
-        <div className="flex items-center whitespace-nowrap">
-          <div className="animate-marquee pr-4 [animation-delay:1s]">
-            {props.children}
-          </div>
-          <div className="animate-marquee pr-4 [animation-delay:1s]">
-            {props.children}
-          </div>
-        </div>
-      </div>
-    </div>);
-}

package/dist/components/Messages/MessageItem.jsx

@@ -1,47 +0,0 @@
-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 (<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">
-      <div className="flex items-center space-x-2">
-        <p className="text-text-tertiary-600 text-xs font-normal">
-          {format(new Date(dateTimeCreated), 'M/d/yyyy - h:mma', {
-            in: tz(localeInfo.timezone),
-        })}
-        </p>
-        {!markedAsRead && (<div className="bg-utility-success-500 h-2.5 w-2.5 rounded-full"/>)}
-      </div>
-
-      <div className="mb-2 flex items-center space-x-2">
-        <Icon className="text-brand-400"/>
-        <p className="text-text-primary-brand text-sm font-semibold">{title}</p>
-      </div>
-
-      <p className="line-clamp-3 text-wrap text-sm font-normal" dangerouslySetInnerHTML={{ __html: content }}/>
-
-      {actions.length > 0 && (<div className="mt-2 flex flex-wrap items-center justify-end gap-2">
-          {actions.map((action, index) => (<Link key={index} className="border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm" href={action.url} onClick={handleActionClick}>
-              {action.name}
-            </Link>))}
-        </div>)}
-    </div>);
-}

package/dist/components/Messages/MessagePopup.jsx

@@ -1,43 +0,0 @@
-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 (<Dialog.Root lazyMount unmountOnExit open={messagesStore.message.open} onOpenChange={({ open }) => {
-            messagesStore.message.setOpen(open);
-        }} closeOnEscape={false} closeOnInteractOutside={false}>
-      <Portal>
-        <Dialog.Backdrop className="!z-[calc(var(--z-dialog)+1)]"/>
-        <Dialog.Positioner className="!z-[calc(var(--z-dialog)+2)] flex items-center justify-center">
-          <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">
-            <Dialog.CloseTrigger>
-              <XIcon />
-            </Dialog.CloseTrigger>
-            <div className="pb-6">
-              <div className="bg-bg-brand-secondary mx-auto w-fit rounded-full p-3">
-                <Icon className="text-text-brand" height="24" width="24"/>
-              </div>
-              <p className="text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight">
-                {message?.title}
-              </p>
-              <div className="text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight" dangerouslySetInnerHTML={{ __html: message?.content ?? '' }}/>
-            </div>
-
-            {message?.actions.length ? (<div className="flex flex-col space-y-2 px-4 pb-8 pt-6 text-center">
-                {message.actions.map((action, index) => (<Link className="bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold" key={index} href={action.url} onClick={() => {
-                    messagesStore.message.setOpen(false);
-                }}>
-                    {action.name}
-                  </Link>))}
-              </div>) : null}
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-};

package/dist/components/Messages/Messages.jsx

@@ -1,87 +0,0 @@
-'use client';
-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';
-import { MessageItem } from './MessageItem';
-import { MessagePopup } from './MessagePopup';
-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 (<>
-      <Drawer.Root open={globalStore.messages.open} onOpenChange={({ open }) => globalStore.messages.setOpen(open)} lazyMount unmountOnExit>
-        <Drawer.Trigger asChild>
-          <IconButton size="sm" colorScheme="gray" className="relative">
-            {!!unreadMessagesCount && (<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">
-                {unreadMessagesCount}
-              </div>)}
-            <Bell01Icon />
-          </IconButton>
-        </Drawer.Trigger>
-
-        <Portal>
-          <Drawer.Backdrop />
-          <Drawer.Positioner>
-            <Drawer.Content className="bg-gray-50 bg-bg-primary flex flex-col">
-              <div className="flex flex-col space-y-6">
-                <div className="flex items-end justify-between px-4 pt-6">
-                  <p className="text-text-primary-brand text-xl font-semibold">
-                    Notifications
-                  </p>
-                  <Drawer.CloseTrigger className="p-2">
-                    <XIcon />
-                  </Drawer.CloseTrigger>
-                </div>
-
-                <Tabs.Root value={globalStore.messages.tab} onValueChange={(details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value))} lazyMount unmountOnExit>
-                  <div className="mb-4 w-full px-4">
-                    <Tabs.List className="border-border-secondary w-full border">
-                      <Tabs.Trigger value="ALL" className="flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600">
-                        All
-                      </Tabs.Trigger>
-                      <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">
-                        <div>Unread</div>
-                        {!!unreadMessagesCount && (<div className="border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5">
-                            {unreadMessagesCount}
-                          </div>)}
-                      </Tabs.Trigger>
-                      <Tabs.Indicator className="bg-bg-active"/>
-                    </Tabs.List>
-                  </div>
-
-                  <div className="border-border-secondary mb-10 w-full border-t"/>
-
-                  {TABS.map((tab) => (<Tabs.Content key={tab} 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' }}>
-                      {messages.length > 0 && (<div className="flex flex-col space-y-4">
-                          {messages.map((message) => (<MessageItem key={message.id} message={message}/>))}
-                        </div>)}
-
-                      <InfiniteScroll loader={<SpinnerIcon className="mx-auto size-5"/>} hasMore={!!messagesQuery.hasNextPage} loadMore={async () => {
-                await messagesQuery.fetchNextPage();
-            }} className="mt-4"/>
-                    </Tabs.Content>))}
-                </Tabs.Root>
-              </div>
-            </Drawer.Content>
-          </Drawer.Positioner>
-        </Portal>
-      </Drawer.Root>
-      <MessagePopup />
-    </>);
-}

package/dist/components/PortalProvider/PortalProvider.client.jsx

@@ -1,54 +0,0 @@
-'use client';
-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 (<QueryClientProvider client={queryClient}>
-      {children}
-
-      <Toaster toaster={toaster}>
-        {(toast) => (<Toast.Root key={toast.id} 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]">
-            <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')}>
-              <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')}>
-                <AlertCircleIcon className={twMerge('size-5', toast.type === 'error' ? 'text-red-500' : 'text-green-500')}/>
-              </div>
-            </div>
-
-            <div className="grow text-sm leading-none">
-              <Toast.Title className="font-semibold">
-                {toast.title
-                ? toast.title
-                : toast.type === 'error'
-                    ? 'Error'
-                    : 'Success'}
-              </Toast.Title>
-              <Toast.Description className="text-gray-700 mt-1">
-                {toast.description
-                ? toast.description
-                : toast.type === 'error'
-                    ? 'Something went wrong.'
-                    : 'Operation completed successfully.'}
-              </Toast.Description>
-            </div>
-            <Toast.CloseTrigger className="text-gray-400 hover:text-gray-500 self-start">
-              <XIcon className="size-5"/>
-            </Toast.CloseTrigger>
-          </Toast.Root>)}
-      </Toaster>
-
-      {facebookPixelId && <FacebookPixel fbId={facebookPixelId}/>}
-      {googleAnalyticsId && <GoogleAnalytics gaId={googleAnalyticsId}/>}
-      {googleTagManagerId && <GoogleTagManager gtmId={googleTagManagerId}/>}
-      {googleRecaptchaSiteKey && (<GoogleRecaptcha siteKey={googleRecaptchaSiteKey}/>)}
-    </QueryClientProvider>);
-}

package/dist/components/Promo/Promo.jsx

@@ -1,7 +0,0 @@
-import { PromoContent } from './PromoContent';
-export async function Promo(props) {
-    /**
-     * await prefetchPromoQuery(props.id);
-     */
-    return <PromoContent id={props.id}/>;
-}

package/dist/components/Promo/PromoContent.jsx

@@ -1,104 +0,0 @@
-'use client';
-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 (<div className={props.className}>
-      <Link href={props.viewAllPromosUrl ?? '/promos'} className="text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold">
-        <ChevronLeftIcon className="size-6"/>
-        Back to all Promotions
-      </Link>
-      <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"/>
-      <Button className="mt-xl lg:mt-6">Deposit Now</Button>
-
-      <h1 className="mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl">
-        Welcome Bonus 100% up to $500 + 10 Free Spins
-      </h1>
-
-      <p className="text-text-secondary-700 mt-xl lg:mt-6">
-        Ends 5/26/2025, 1:59:59 AM
-      </p>
-
-      <Prose className="mt-2xl lg:mt-6">
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-        <h5>General Conditions:</h5>
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-      </Prose>
-      <Prose className="bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl">
-        <h2>Conclusion</h2>
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-        <p>
-          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.
-        </p>
-      </Prose>
-    </div>);
-}