@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.jsx

@@ -1,169 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateGCashWithdrawalMutation, useGlobalStore, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks';
-import { toaster } from '../../../../client/utils';
-import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons';
-import { Button, Field, NumberInput, PasswordInput } from '../../../../ui';
-import { parseDecimal } from '../../../../utils';
-import { AmountChoices } from '../../AmountChoices';
-export function GCashWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const localeInfo = useLocaleInfo();
-    const mobileNumberParser = useMobileNumberParser();
-    const createWithdrawalMutation = useCreateGCashWithdrawalMutation({
-        onSuccess() {
-            form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.gcashWithdrawalGatewaySettings;
-    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const definition = z.object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        password: z
-            .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(64, 'Password must be not be more than 64 characters'),
-        mobileNumber: z
-            .string()
-            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number'),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            password: '',
-            mobileNumber: '',
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                password: '',
-                mobileNumber: '',
-            });
-        }
-    }, [form, minimumAmount]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createWithdrawalMutation.mutate({
-            amount: data.amount,
-            recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),
-            transactionPassword: data.password,
-        });
-    });
-    return (<form onSubmit={handleSubmit} noValidate autoComplete="off">
-      <Field.Root invalid={!!form.formState.errors.mobileNumber}>
-        <Field.Label>Mobile Number</Field.Label>
-        <div className="relative">
-          <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
-          <Field.Input className="pl-10.5" {...form.register('mobileNumber')}/>
-        </div>
-        <Field.ErrorText>
-          {form.formState.errors.mobileNumber?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-3xl">
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to withdraw
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
-        <PasswordInput.Root>
-          <PasswordInput.Label>Password</PasswordInput.Label>
-          <PasswordInput.Control>
-            <PasswordInput.Input {...form.register('password')}/>
-            <PasswordInput.VisibilityTrigger>
-              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                <EyeIcon />
-              </PasswordInput.Indicator>
-            </PasswordInput.VisibilityTrigger>
-          </PasswordInput.Control>
-        </PasswordInput.Root>
-        <Field.ErrorText>
-          {form.formState.errors.password?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-
-      <Button type="submit" className="mt-4.5" disabled={createWithdrawalMutation.isPending}>
-        {createWithdrawalMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-    </form>);
-}

package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.jsx

@@ -1,218 +0,0 @@
-import { createListCollection } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect, useMemo } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateInstapayWithdrawalMutation, useGlobalStore, useInstapayBankListQuery, usePaymentSettingsQuery, } from '../../../../client/hooks';
-import { toaster } from '../../../../client/utils';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons';
-import { Button, Field, NumberInput, PasswordInput, Select } from '../../../../ui';
-import { parseDecimal } from '../../../../utils';
-import { AmountChoices } from '../../AmountChoices';
-export function InstapayWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
-        onSuccess() {
-            form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const instapayBankListQuery = useInstapayBankListQuery();
-    const instapayBankList = instapayBankListQuery.data;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.instapayWithdrawalGatewaySettings;
-    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const definition = z.object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        password: z
-            .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(64, 'Password must be not be more than 64 characters'),
-        accountNumber: z.string().min(1).trim(),
-        bankCode: z.string().min(1, 'Bank is required').trim(),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            password: '',
-            accountNumber: '',
-            bankCode: '',
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                bankCode: form.getValues('bankCode'),
-                password: '',
-                accountNumber: '',
-            });
-        }
-    }, [form, minimumAmount]);
-    useEffect(() => {
-        if (instapayBankList?.length) {
-            form.reset({
-                amount: form.getValues('amount'),
-                bankCode: instapayBankList[0].code,
-                password: '',
-                accountNumber: '',
-            });
-        }
-    }, [form, instapayBankList]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createWithdrawalMutation.mutate({
-            amount: data.amount,
-            transactionPassword: data.password,
-            accountNumber: data.accountNumber,
-            bankCode: data.bankCode,
-        });
-    });
-    const bankCollection = useMemo(() => createListCollection({
-        items: instapayBankList ?? [],
-        itemToValue: (item) => item.code,
-        itemToString: (item) => item.name,
-    }), [instapayBankList]);
-    console.log(bankCollection.items);
-    return (<form onSubmit={handleSubmit} noValidate autoComplete="off">
-      <Controller control={form.control} name="bankCode" render={(o) => (<Field.Root invalid={!!form.formState.errors.bankCode}>
-            <Select.Root collection={bankCollection} positioning={{
-                sameWidth: true,
-            }} value={o.field.value ? [o.field.value] : []} onValueChange={(details) => {
-                o.field.onChange(details.value.at(0) ?? '');
-            }}>
-              <Select.Label>Bank</Select.Label>
-              <Select.Control>
-                <Select.Trigger>
-                  <Select.ValueText />
-                  <Select.Indicator asChild>
-                    <ChevronDownIcon />
-                  </Select.Indicator>
-                </Select.Trigger>
-              </Select.Control>
-              <Select.Positioner>
-                <Select.Content>
-                  <Select.ItemGroup>
-                    {bankCollection.items.map((item) => (<Select.Item key={item.id} item={item}>
-                        <Select.ItemText>{item.name}</Select.ItemText>
-                        <Select.ItemIndicator asChild>
-                          <CheckIcon />
-                        </Select.ItemIndicator>
-                      </Select.Item>))}
-                  </Select.ItemGroup>
-                </Select.Content>
-              </Select.Positioner>
-            </Select.Root>
-            <Field.ErrorText>
-              {form.formState.errors.bankCode?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <Field.Root invalid={!!form.formState.errors.accountNumber} className="mt-3xl">
-        <Field.Label>Bank account number</Field.Label>
-        <Field.Input {...form.register('accountNumber')}/>
-        <Field.ErrorText>
-          {form.formState.errors.accountNumber?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-3xl">
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to withdraw
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
-        <PasswordInput.Root>
-          <PasswordInput.Label>Password</PasswordInput.Label>
-          <PasswordInput.Control>
-            <PasswordInput.Input {...form.register('password')}/>
-            <PasswordInput.VisibilityTrigger>
-              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                <EyeIcon />
-              </PasswordInput.Indicator>
-            </PasswordInput.VisibilityTrigger>
-          </PasswordInput.Control>
-        </PasswordInput.Root>
-        <Field.ErrorText>
-          {form.formState.errors.password?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-
-      <Button type="submit" className="mt-4.5" disabled={createWithdrawalMutation.isPending}>
-        {createWithdrawalMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-    </form>);
-}

package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.jsx

@@ -1,169 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateMayaWithdrawalMutation, useGlobalStore, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks';
-import { toaster } from '../../../../client/utils';
-import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons';
-import { Button, Field, NumberInput, PasswordInput } from '../../../../ui';
-import { parseDecimal } from '../../../../utils';
-import { AmountChoices } from '../../AmountChoices';
-export function MayaWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const localeInfo = useLocaleInfo();
-    const mobileNumberParser = useMobileNumberParser();
-    const createWithdrawalMutation = useCreateMayaWithdrawalMutation({
-        onSuccess() {
-            form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.mayaWithdrawalGatewaySettings;
-    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const definition = z.object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        password: z
-            .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(64, 'Password must be not be more than 64 characters'),
-        mobileNumber: z
-            .string()
-            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number'),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            password: '',
-            mobileNumber: '',
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                password: '',
-                mobileNumber: '',
-            });
-        }
-    }, [form, minimumAmount]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createWithdrawalMutation.mutate({
-            amount: data.amount,
-            recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),
-            transactionPassword: data.password,
-        });
-    });
-    return (<form onSubmit={handleSubmit} noValidate autoComplete="off">
-      <Field.Root invalid={!!form.formState.errors.mobileNumber}>
-        <Field.Label>Mobile Number</Field.Label>
-        <div className="relative">
-          <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
-          <Field.Input className="pl-10.5" {...form.register('mobileNumber')}/>
-        </div>
-        <Field.ErrorText>
-          {form.formState.errors.mobileNumber?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-3xl">
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to withdraw
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
-        <PasswordInput.Root>
-          <PasswordInput.Label>Password</PasswordInput.Label>
-          <PasswordInput.Control>
-            <PasswordInput.Input {...form.register('password')}/>
-            <PasswordInput.VisibilityTrigger>
-              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                <EyeIcon />
-              </PasswordInput.Indicator>
-            </PasswordInput.VisibilityTrigger>
-          </PasswordInput.Control>
-        </PasswordInput.Root>
-        <Field.ErrorText>
-          {form.formState.errors.password?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-
-      <Button type="submit" className="mt-4.5" disabled={createWithdrawalMutation.isPending}>
-        {createWithdrawalMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-    </form>);
-}

package/dist/components/Disclaimer/Disclaimer.jsx

@@ -1,45 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image from 'next/image';
-import { useRef } from 'react';
-import pagcorLogo from '../../images/pagcor.png';
-import responsibleGamingLogo from '../../images/responsible-gaming.png';
-import { Button, Dialog } from '../../ui';
-import { useDisclaimer } from './useDisclaimer';
-export function Disclaimer(props) {
-    const disclaimer = useDisclaimer();
-    const acceptTriggerRef = useRef(null);
-    return (<Dialog.Root open={disclaimer.open} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false} initialFocusEl={() => acceptTriggerRef.current}>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content className="flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl">
-            <Image src={props.logo} alt="" width={200} height={100} className="mx-auto h-auto w-[120px]" draggable={false}/>
-
-            <div className="w-full grow">
-              <Dialog.Title className="mt-3xl text-center text-lg font-semibold">
-                Age Verification
-              </Dialog.Title>
-              <Dialog.Description className="text-text-tertiary-600 mt-xs text-center text-sm">
-                By entering this website I acknowledge and confirmI am 21 years
-                of age and I agree with the{' '}
-                <button type="button" className="text-brand-400 underline underline-offset-2">
-                  Terms and Conditions.
-                </button>
-              </Dialog.Description>
-
-              <div className="mt-5 flex items-center justify-center gap-3xl">
-                <Image src={pagcorLogo} alt="" height={75} width={88} className="h-[88px] w-auto shrink-0" draggable={false}/>
-
-                <Image src={responsibleGamingLogo} alt="" height={62} width={186} className="h-[62px] w-auto shrink-0" draggable={false}/>
-              </div>
-            </div>
-
-            <Button ref={acceptTriggerRef} type="button" className="mt-4xl" onClick={disclaimer.close}>
-              Accept
-            </Button>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}

package/dist/components/Empty.jsx

@@ -1,62 +0,0 @@
-export function Empty(props) {
-    return (<div role="alert" aria-live="polite" className={props.className}>
-      <div className="relative mx-auto w-[9.5rem] pt-4">
-        <div className="bg-utility-gray-200 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full"/>
-        <CloudIcon className="relative h-auto w-full shrink-0"/>
-        <div className="bg-utility-gray-200/40 absolute bottom-2 left-1/2 flex size-12 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm">
-          <props.icon className="size-6 text-white"/>
-        </div>
-
-        <div className="bg-utility-gray-200 absolute left-4 top-3.5 size-2.5 rounded-full"></div>
-        <div className="bg-utility-gray-200 absolute bottom-0.5 left-3 size-3.5 rounded-full"></div>
-        <div className="bg-utility-gray-200 absolute right-3.5 top-1 size-2 rounded-full"></div>
-        <div className="bg-utility-gray-200 absolute right-0 top-6.5 size-3.5 rounded-full"></div>
-      </div>
-      <h2 className="mt-xl text-center font-semibold">{props.title}</h2>
-      <p className="text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm">
-        {props.message}
-      </p>
-    </div>);
-}
-function CloudIcon(props) {
-    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 104" fill="none" {...props}>
-      <g filter="url(#filter0_dd_2719_19242)">
-        <path d="M77.6 0C66.8273 0 57.2978 5.32329 51.4987 13.4829C49.605 13.0363 47.6301 12.8 45.6 12.8C31.4615 12.8 20 24.2615 20 38.4C20 52.5385 31.4615 64 45.6 64L109.6 64C121.971 64 132 53.9712 132 41.6C132 29.2288 121.971 19.2 109.6 19.2C108.721 19.2 107.854 19.2506 107.002 19.349C102.098 7.9677 90.7797 0 77.6 0Z" fill="#F9FAFB"/>
-        <ellipse cx="45.6" cy="38.4008" rx="25.6" ry="25.6" fill="url(#paint0_linear_2719_19242)"/>
-        <circle cx="77.6" cy="32" r="32" fill="url(#paint1_linear_2719_19242)"/>
-        <ellipse cx="109.6" cy="41.5992" rx="22.4" ry="22.4" fill="url(#paint2_linear_2719_19242)"/>
-      </g>
-      <defs>
-        <filter id="filter0_dd_2719_19242" x="0" y="0" width="152" height="104" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-          <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-          <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_2719_19242"/>
-          <feOffset dy="8"/>
-          <feGaussianBlur stdDeviation="4"/>
-          <feComposite in2="hardAlpha" operator="out"/>
-          <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0"/>
-          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2719_19242"/>
-          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-          <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_2719_19242"/>
-          <feOffset dy="20"/>
-          <feGaussianBlur stdDeviation="12"/>
-          <feComposite in2="hardAlpha" operator="out"/>
-          <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0"/>
-          <feBlend mode="normal" in2="effect1_dropShadow_2719_19242" result="effect2_dropShadow_2719_19242"/>
-          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2719_19242" result="shape"/>
-        </filter>
-        <linearGradient id="paint0_linear_2719_19242" x1="25.9429" y1="21.4865" x2="71.2" y2="64.0007" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#D0D5DD"/>
-          <stop offset="0.350715" stopColor="white" stopOpacity="0"/>
-        </linearGradient>
-        <linearGradient id="paint1_linear_2719_19242" x1="53.0286" y1="10.8571" x2="109.6" y2="64" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#D0D5DD"/>
-          <stop offset="0.350715" stopColor="white" stopOpacity="0"/>
-        </linearGradient>
-        <linearGradient id="paint2_linear_2719_19242" x1="92.4" y1="26.7992" x2="132" y2="63.9992" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#D0D5DD"/>
-          <stop offset="0.350715" stopColor="white" stopOpacity="0"/>
-        </linearGradient>
-      </defs>
-    </svg>);
-}