@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/Jackpots/JackpotItemMobile.jsx

@@ -1,271 +0,0 @@
-'use client';
-import { Progress } from '@ark-ui/react';
-import Image from 'next/image';
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, } from '../../icons';
-import { ArrowNarrowDownIcon } from '../../icons/ArrowNarrowDownIcon';
-import { ArrowNarrowUpIcon } from '../../icons/ArrowNarrowUpIcon';
-import { StarIcon } from '../../icons/StarIcon';
-import closeChest from '../../images/close-chest.png';
-import firstPlace from '../../images/first-place.png';
-import openChest from '../../images/open-chest.png';
-import { Button } from '../../ui';
-import { formatNumber } from '../../utils';
-import { maskName } from '../JackpotCounter/JackpotCounterItem';
-import styles from '../JackpotCounter/JackpotCounterItem.module.css';
-import { JackpotGameProviders } from './JackpotGameProviders';
-import { JackpotRules } from './JackpotRules';
-import { useJackpotItemData } from './useJackpotItemData';
-export function JackpotItemMobile({ jackpot, gameProviders, }) {
-    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, calculatePercentage, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData({ jackpot, gameProviders });
-    const [isDetailsVisible, setIsDetailsVisible] = useState(false);
-    return (<div className="bg-bg-primary border-border-primary rounded-2xl border">
-      <div className={twMerge('bg-bg-tertiary relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5')}>
-        <div className="z-1 relative flex flex-1 flex-col">
-          <div className="flex h-full flex-col justify-between">
-            <div className="flex w-full justify-between">
-              <div className="flex w-full flex-col">
-                <div className="relative flex w-full justify-between">
-                  <div>
-                    {/* Badge */}
-
-                    {isPayingOut ? (<div className="border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
-                        <span className="full bg-utility-success-500 size-1.5 animate-pulse rounded"/>
-                        Paying Out
-                      </div>) : (<div className="border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
-                        <ArrowNarrowUpRightIcon className="text-utility-blue-500 size-3.5"/>
-                        Accumulating
-                      </div>)}
-
-                    <div className="text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl">
-                      {jackpot.name}
-                    </div>
-
-                    <div className="bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl">
-                      {formatNumber(jackpotAmount, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-            maxDecimalPlaces: 2,
-        })}
-                    </div>
-                  </div>
-                  <div className="z-1 bottom-[-60] right-0 block lg:absolute">
-                    <Image width={100} height={100} src={isPayingOut ? openChest : closeChest} alt="closeChest" quality={100} className="size-full h-auto w-[100px]"/>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Progress Bar */}
-
-          <div className="mt-3 lg:mt-4">
-            <div className="mb-1 flex justify-between">
-              <div className="text-text-primary-900 text-xs font-semibold">
-                {formatNumber(0, {
-            currency: localeInfo.currency.code,
-            compact: true,
-        })}
-              </div>
-
-              <div className="relative flex items-center justify-end gap-1.5">
-                {isPayingOut ? (<div className="flex w-6 items-center">
-                    <div className={twMerge('absolute left-0', styles['animate-arrow-red-flash-1'])}>
-                      <ChevronLeftIcon className="size-4.5"/>
-                    </div>
-                    <div className={twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2'])}>
-                      <ChevronLeftIcon className="size-4.5"/>
-                    </div>
-                    <div className={twMerge('absolute left-3', styles['animate-arrow-red-flash-3'])}>
-                      <ChevronLeftIcon className="size-4.5"/>
-                    </div>
-                  </div>) : (<div className="flex w-6 items-center">
-                    <div className={twMerge('absolute left-0', styles['animate-arrow-green-flash-1'])}>
-                      <ChevronRightIcon className="size-4.5"/>
-                    </div>
-                    <div className={twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2'])}>
-                      <ChevronRightIcon className="size-4.5"/>
-                    </div>
-                    <div className={twMerge('absolute left-3', styles['animate-arrow-green-flash-3'])}>
-                      <ChevronRightIcon className="size-4.5"/>
-                    </div>
-                  </div>)}
-
-                <div className="text-text-primary-900 text-xs font-semibold">
-                  {formatNumber(jackpot?.maximumJackpotPoolLimit, {
-            currency: localeInfo.currency.code,
-            compact: true,
-        })}
-                </div>
-              </div>
-            </div>
-
-            <Progress.Root className="bg-bg-primary h-2 w-full rounded-full lg:h-4" max={100} value={calculatePercentage(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit))}>
-              <Progress.Track className="bg-bg-primary h-full overflow-hidden rounded-full">
-                <Progress.Range className="bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5">
-                  <div className="pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5" aria-hidden="true">
-                    {arrowImages}
-                  </div>
-                </Progress.Range>
-              </Progress.Track>
-            </Progress.Root>
-
-            <div className="mt-1 block text-start text-2xs lg:hidden">
-              {isPayingOut
-            ? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
-                currency: localeInfo.currency.code,
-                compact: true,
-            })} Play now for your chance to win big! 🔥`
-            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0)}
-            </div>
-          </div>
-
-          {/* Top Payout */}
-
-          {topJackpotPayout.amount ? (<div>
-              <div className="bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4">
-                <div className="border-yellow-400 relative h-18 w-18 rounded-full border">
-                  <div className="bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold">
-                    1st
-                  </div>
-                </div>
-
-                <div className="flex flex-col gap-1 text-left">
-                  <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
-                    <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
-                    Top Payout
-                  </div>
-
-                  <div className="font-semibold">
-                    {maskName(topJackpotPayout.member.name)}
-                  </div>
-                  <div className="text-brand-400 text-2xl">
-                    {formatNumber(topJackpotPayout.amount, {
-                currency: localeInfo.currency.code,
-                minDecimalPlaces: 2,
-                maxDecimalPlaces: 2,
-            })}
-                  </div>
-                </div>
-              </div>
-            </div>) : (<div className="bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4">
-              <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full h-auto w-[66px] mix-blend-luminosity"/>
-
-              <div className="flex flex-col gap-1 text-left">
-                <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
-                  <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
-                  Top Payout
-                </div>
-
-                <div className="font-semibold">No winners yet</div>
-                <div className="text-text-secondary-700 text-xs">
-                  You could be the first to win the tournament!
-                </div>
-              </div>
-            </div>)}
-
-          <Button variant="outline" className={twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex')} onClick={() => setIsDetailsVisible(!isDetailsVisible)}>
-            <div className="flex gap-1.5">
-              See Details
-              <ArrowNarrowDownIcon className="size-5"/>
-            </div>
-          </Button>
-        </div>
-
-        {/* Paying Out Animation */}
-
-        {isPayingOut && (<div className={twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]')}></div>)}
-      </div>
-
-      {isDetailsVisible && (<div>
-          {/* Leaderboard */}
-
-          <div className="z-1 flex-1">
-            <div className="flex items-center justify-between p-3">
-              <div className="flex gap-2">
-                <div className="text-text-primary-900 text-lg font-semibold">
-                  {jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!'}
-                </div>
-              </div>
-              <JackpotRules jackpotRules={jackpot.description}/>
-            </div>
-
-            <div>
-              <div className="border-gray-200 overflow-hidden">
-                <table className="w-full">
-                  <thead>
-                    <tr className="bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium">
-                      <th className="w-[52px]">#</th>
-                      <th>Player</th>
-                      <th>Multiplier</th>
-                      <th>Prize</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {jackpotPayouts.length ? (<>
-                        {jackpotPayouts.map((jackpotPayout, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-center text-sm">
-                            <td className="border-border-secondary h-12 w-[52px] border-t-2">
-                              {i + 1 < 6 ? (<div className="relative">
-                                  <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
-                                  <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
-                                    {i + 1}
-                                  </span>
-                                </div>) : (i + 1)}
-                            </td>
-                            <td className="border-border-secondary h-12 border-t-2">
-                              {maskName(jackpotPayout.member.name)}
-                            </td>
-                            <td className="border-border-secondary h-12 border-t-2">
-                              {jackpotPayout.multiplier}x
-                            </td>
-                            <td className="border-border-secondary text-brand-400 h-12 border-t-2">
-                              {formatNumber(jackpotPayout.amount, {
-                        currency: localeInfo.currency.code,
-                        minDecimalPlaces: 2,
-                        maxDecimalPlaces: 2,
-                    })}
-                            </td>
-                          </tr>))}
-                      </>) : (<>
-                        {Array.from({ length: 10 }).map((_, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-center text-sm">
-                            <td className="border-border-secondary h-12 w-[52px] border-t-2">
-                              {i + 1 < 6 ? (<div className="relative">
-                                  <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
-                                  <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
-                                    {i + 1}
-                                  </span>
-                                </div>) : (i + 1)}
-                            </td>
-                            <td className="border-border-secondary h-12 border-t-2">
-                              -
-                            </td>
-                            <td className="border-border-secondary h-12 border-t-2">
-                              -
-                            </td>
-                            <td className="border-border-secondary h-12 border-t-2">
-                              -
-                            </td>
-                          </tr>))}
-                      </>)}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-
-          {/* Game Providers */}
-
-          {Boolean(filteredGameProviders.length) && (<JackpotGameProviders gameProviders={gameProviders}/>)}
-
-          <div className="m-3">
-            <Button variant="outline" className={twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex')} onClick={() => setIsDetailsVisible(!isDetailsVisible)}>
-              <div className="flex gap-1.5">
-                Hide
-                <ArrowNarrowUpIcon className="size-5"/>
-              </div>
-            </Button>
-          </div>
-        </div>)}
-    </div>);
-}

package/dist/components/Jackpots/JackpotRules.jsx

@@ -1,43 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../icons';
-import { Flag06Icon } from '../../icons/Flag06Icon';
-import { Dialog } from '../../ui';
-export function JackpotRules(props) {
-    return (<Dialog.Root lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-      <Dialog.Trigger asChild>
-        {props.children ?? (<button type="button" className="text-button-tertiary-fg flex text-sm font-semibold">
-            Jackpot Rules
-          </button>)}
-      </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content className="bg-bg-primary-alt mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl">
-            <div className="p-3xl">
-              <div className="mb-3 flex justify-between">
-                <div className="bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border">
-                  <Flag06Icon className="text-text-tertiary-600 size-full p-3"/>
-                </div>
-
-                <Dialog.CloseTrigger>
-                  <XIcon />
-                </Dialog.CloseTrigger>
-              </div>
-
-              <div className="text-text-primary-900 text-lg font-semibold">
-                Jackpot Rules
-              </div>
-              <div className="text-text-tertiary-600 mt-1 text-sm">
-                Terms and Conditions
-              </div>
-            </div>
-
-            <div className="border-gray-800 border-t-1 pb-3">
-              <div dangerouslySetInnerHTML={{ __html: props.jackpotRules }} className="px-3xl py-3"/>
-            </div>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}

package/dist/components/Jackpots/Jackpots.jsx

@@ -1,37 +0,0 @@
-'use client';
-import { useJackpotsQuery } from '../../client/hooks';
-import { JackpotItemDesktop } from './JackpotItemDesktop';
-import { JackpotItemMobile } from './JackpotItemMobile';
-export function Jackpots(props) {
-    const jackpotsQuery = useJackpotsQuery({
-        first: 100,
-        filter: {
-            status: {
-                equal: 'ACTIVE',
-            },
-            deleted: {
-                equal: false,
-            },
-        },
-        sort: {
-            cursor: 'POOL',
-            order: 'DESC',
-        },
-    });
-    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    if (jackpots.length <= 0)
-        return null;
-    return (<div className={props.className}>
-      <div className="mb-3 text-lg font-semibold lg:mb-4.5">
-        {props.heading ?? 'Jackpots'}
-      </div>
-
-      <div className="hidden flex-col gap-6 lg:flex">
-        {jackpots.map((jackpot) => (<JackpotItemDesktop gameProviders={props.gameProviders} key={jackpot.id} jackpot={jackpot} viewAllUrl={props.viewAllUrl}/>))}
-      </div>
-
-      <div className="flex flex-col gap-6 lg:hidden">
-        {jackpots.map((jackpot) => (<JackpotItemMobile gameProviders={props.gameProviders} key={jackpot.id} jackpot={jackpot} viewAllUrl={props.viewAllUrl}/>))}
-      </div>
-    </div>);
-}

package/dist/components/KYC/KYC.jsx

@@ -1,39 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image from 'next/image';
-import { Dialog } from '../../ui';
-import { KYCContext } from './KYCContext';
-import { Step1 } from './Step1';
-import { Step2 } from './Step2';
-import { Step3 } from './Step3';
-import { StepIndicator } from './StepIndicator';
-import { UploadDocument } from './UploadDocument';
-import { UploadSelfie } from './UploadSelfie';
-import { useKYC } from './useKYC';
-export function KYC(props) {
-    const context = useKYC();
-    return (<KYCContext value={context}>
-      <Dialog.Root open={context.open} onOpenChange={(details) => {
-            context.setOpen(details.open);
-        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-        <Portal>
-          <Dialog.Backdrop />
-          <Dialog.Positioner>
-            <Dialog.Content className="mx-auto w-fit">
-              {context.uploadingSelfie && <UploadSelfie />}
-              {context.uploadingDocument && <UploadDocument />}
-              {!context.uploadingSelfie && !context.uploadingDocument && (<div className="bg-bg-primary-alt flex h-full w-full flex-col p-3xl lg:h-[800px] lg:w-[400px] lg:rounded-xl">
-                  <Image src={props.logo} alt="" width={200} height={100} className="mx-auto h-auto w-[120px]" draggable={false}/>
-
-                  <StepIndicator />
-
-                  {context.step === 1 && <Step1 />}
-                  {context.step === 2 && <Step2 />}
-                  {context.step === 3 && <Step3 />}
-                </div>)}
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </KYCContext>);
-}

package/dist/components/KYC/Step1.jsx

@@ -1,37 +0,0 @@
-import { Button, Field } from '../../ui';
-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';
-import { Button, Field } from '../../ui';
-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';
-import { Button, Checkbox, Field } from '../../ui';
-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';
-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';
-import { Button } from '../../ui';
-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>);
-}