@opexa/portal-components 0.0.2 → 0.0.3

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -0,0 +1,15 @@
+type View = 'FORM' | 'LOADING' | 'SUCCESS' | 'QR_CODE' | 'VERIFYING';
+export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
+export declare function useQRPHDeposit(): {
+    view: View;
+    qrCode: string | null;
+    verify: () => void;
+    generateQrCode: import("@tanstack/react-query").UseMutateFunction<import("@opexa/portal-sdk-core").Deposit, Error, {
+        amount: string;
+        promo?: string | undefined;
+        id?: string | undefined;
+    }, unknown>;
+    regenerateQrCode: () => void;
+    reset: () => void;
+};
+export {};

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.jsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { useCreateQRPHDepositMutation } from '../../../../hooks/useCreateQRPHDepositMutation/useCreateQRPHDepositMutation';
+import { useDepositQuery } from '../../../../hooks/useDepositQuery/useDepositQuery';
+import { toaster } from '../../../../utils/toaster';
+export function useQRPHDeposit() {
+    var _a;
+    var _b = useState('FORM'), view = _b[0], setView = _b[1];
+    var _c = useState(null), id = _c[0], setId = _c[1];
+    var _d = useState(null), promo = _d[0], setPromo = _d[1];
+    var _e = useState(null), amount = _e[0], setAmount = _e[1];
+    var _f = useState(null), qrCode = _f[0], setQrCode = _f[1];
+    var mutation = useCreateQRPHDepositMutation({
+        onSuccess: function (data) {
+            invariant(data.qrCode);
+            setId(data.id);
+            setQrCode(data.qrCode);
+            setView('QR_CODE');
+        },
+        onError: function (error) {
+            setView('FORM');
+            toaster.error({
+                description: error.message,
+            });
+        },
+        onMutate: function (data) {
+            var _a;
+            setId(null);
+            setPromo((_a = data.promo) !== null && _a !== void 0 ? _a : null);
+            setAmount(data.amount);
+            setQrCode(null);
+            setView('LOADING');
+        },
+    });
+    var query = useDepositQuery(id !== null && id !== void 0 ? id : undefined, {
+        enabled: !!id,
+        refetchInterval: view === 'VERIFYING' ? 2500 : 5000,
+    });
+    useEffect(function () {
+        var _a, _b;
+        if (((_a = query.data) === null || _a === void 0 ? void 0 : _a.status) === 'CONFIRMED' ||
+            ((_b = query.data) === null || _b === void 0 ? void 0 : _b.status) === 'APPROVED') {
+            setView('SUCCESS');
+        }
+    }, [(_a = query.data) === null || _a === void 0 ? void 0 : _a.status]);
+    var generateQrCode = mutation.mutate;
+    var regenerateQrCode = function () {
+        invariant(amount);
+        mutation.mutate({
+            amount: amount.toString(),
+            promo: promo !== null && promo !== void 0 ? promo : undefined,
+        });
+    };
+    var verify = function () {
+        setView('VERIFYING');
+    };
+    var reset = function () {
+        setId(null);
+        setPromo(null);
+        setAmount(null);
+        setQrCode(null);
+        setView('FORM');
+    };
+    useEffect(function () {
+        return function () {
+            setId(null);
+            setPromo(null);
+            setAmount(null);
+            setQrCode(null);
+            setView('FORM');
+        };
+    }, []);
+    return {
+        view: view,
+        qrCode: qrCode,
+        verify: verify,
+        generateQrCode: generateQrCode,
+        regenerateQrCode: regenerateQrCode,
+        reset: reset,
+    };
+}

package/dist/components/DepositWithdrawal/DepositWithdrawal.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+interface DepositWithdrawalProps {
+    children?: ReactNode;
+}
+export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react").JSX.Element;
+export {};

package/dist/components/DepositWithdrawal/DepositWithdrawal.jsx

@@ -0,0 +1,101 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../hooks/useGlobalStore';
+import { useLocaleInfo } from '../../hooks/useLocaleInfo';
+import { useWalletQuery } from '../../hooks/useWalletQuery/useWalletQuery';
+import { Wallet02Icon } from '../../icons/Wallet02Icon';
+import { XIcon } from '../../icons/XIcon';
+import { Dialog, Tabs } from '../../ui';
+import { formatNumber } from '../../utils/formatNumber';
+import { Deposit } from './Deposit/Deposit';
+import { Withdrawal } from './Withdrawal/Withdrawal';
+export function DepositWithdrawal(props) {
+    var _a, _b;
+    var globalStore = useGlobalStore(useShallow(function (ctx) { return ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    }); }));
+    var localeInfo = useLocaleInfo();
+    var walletQuery = useWalletQuery({
+        refetchInterval: 5000,
+    });
+    return (<Dialog.Root lazyMount unmountOnExit open={globalStore.depositWithdrawal.open} onOpenChange={function (details) {
+            globalStore.depositWithdrawal.setOpen(details.open);
+        }} closeOnEscape={false} closeOnInteractOutside={false}>
+      <Dialog.Trigger asChild>
+        {(_a = props.children) !== null && _a !== void 0 ? _a : <DefaulTrigger />}
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop className="!z-[calc(var(--z-dialog)+1)]"/>
+        <Dialog.Positioner className="!z-[calc(var(--z-dialog)+2)]">
+          <Dialog.Content className="lg:min-h-auto mx-auto min-h-full w-full bg-white p-2xl shadow-xl lg:w-[640px] lg:rounded-xl lg:p-3xl">
+            <Dialog.CloseTrigger>
+              <XIcon />
+            </Dialog.CloseTrigger>
+            <Dialog.Header className="flex items-center gap-xl">
+              <div className="border-gray-200 shadow-xs text-gray-700 flex size-12 items-center justify-center rounded-lg border">
+                <Wallet02Icon />
+              </div>
+              <Dialog.Title className="grow text-lg font-semibold">
+                Wallet
+              </Dialog.Title>
+            </Dialog.Header>
+
+            <Dialog.Body className="mt-5">
+              <p className="text-gray-500 text-center text-sm font-medium leading-tight">
+                Available Balance
+              </p>
+              <p className="mt-lg text-center text-4xl font-semibold leading-tight tracking-tight">
+                {formatNumber((_b = walletQuery.data) === null || _b === void 0 ? void 0 : _b.balance, {
+            currency: localeInfo.currency.code,
+            minDecimalPlaces: 2,
+        })}
+              </p>
+
+              <Tabs.Root value={globalStore.depositWithdrawal.tab} onValueChange={function (details) {
+            globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
+        }} lazyMount unmountOnExit className="mt-4xl space-y-4xl">
+                <Tabs.List className="w-full">
+                  <Tabs.Trigger value="DEPOSIT" className="grow">
+                    Deposit
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="WITHDRAWAL" className="grow">
+                    Withdrawal
+                  </Tabs.Trigger>
+                  <Tabs.Indicator />
+                </Tabs.List>
+
+                <Tabs.Content value="DEPOSIT" className="space-y-4xl">
+                  <Deposit />
+                </Tabs.Content>
+                <Tabs.Content value="WITHDRAWAL" className="space-y-4xl">
+                  <Withdrawal />
+                </Tabs.Content>
+              </Tabs.Root>
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>);
+}
+function DefaulTrigger(props) {
+    var _a;
+    var localeInfo = useLocaleInfo();
+    var walletQuery = useWalletQuery({
+        refetchInterval: 5000,
+    });
+    return (<button type="button" {...props} className={twMerge('flex', props.className)}>
+      <div className="border-gray-200 flex h-11 items-center rounded-l-md border border-r-0 px-3.5 font-medium">
+        {formatNumber((_a = walletQuery.data) === null || _a === void 0 ? void 0 : _a.balance, {
+            currency: localeInfo.currency.code,
+            minDecimalPlaces: 2,
+        })}
+      </div>
+      <div className="bg-gray-900 flex h-11 items-center gap-1.5 rounded-r-md px-3.5 font-semibold text-white">
+        <Wallet02Icon className="size-5"/>
+        Wallet
+      </div>
+    </button>);
+}

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLArkProps } from '@ark-ui/react';
+export interface DepositWithdrawalTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare function DepositWithdrawalTrigger(props: DepositWithdrawalTriggerProps): import("react").JSX.Element;

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.jsx

@@ -0,0 +1,63 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { ark } from '@ark-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../hooks/useGlobalStore';
+import { useSessionQuery } from '../../hooks/useSessionQuery/useSessionQuery';
+import { dataAttr } from '../../utils/dataAttr';
+export function DepositWithdrawalTrigger(props) {
+    var _this = this;
+    var _a;
+    var sessionQuery = useSessionQuery();
+    var globalStore = useGlobalStore(useShallow(function (ctx) { return ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    }); }));
+    var disabled = ((_a = sessionQuery.data) === null || _a === void 0 ? void 0 : _a.status) === 'unauthenticated'
+        ? true
+        : globalStore.depositWithdrawal.open
+            ? true
+            : props.disabled;
+    return (<ark.button type="button" {...props} onClick={function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                globalStore.depositWithdrawal.setOpen(true);
+                return [2 /*return*/];
+            });
+        }); }} disabled={disabled} data-disabled={dataAttr(disabled)} data-state={globalStore.depositWithdrawal.open ? 'open' : 'closed'}/>);
+}

package/dist/components/DepositWithdrawal/PaymentMethods.d.ts

@@ -0,0 +1,10 @@
+import { type PaymentMethod } from './utils';
+interface PaymentMethodsProps {
+    value?: PaymentMethod;
+    onChange?: (value: PaymentMethod) => void;
+    defaultValue?: PaymentMethod;
+    options?: PaymentMethod[];
+    className?: string;
+}
+export declare function PaymentMethods(props: PaymentMethodsProps): import("react").JSX.Element;
+export {};

package/dist/components/DepositWithdrawal/PaymentMethods.jsx

@@ -0,0 +1,70 @@
+import Image from 'next/image';
+import { useControllableState } from '../../hooks/useControllableState';
+import { CheckIcon } from '../../icons/CheckIcon';
+import qrph from '../../images/QRPh.png';
+import gcash from '../../images/gcash.png';
+import maya from '../../images/maya.png';
+import onlineBank from '../../images/online-bank.png';
+import { Checkbox, Field } from '../../ui';
+import { PaymentMethodDefinition } from './utils';
+var OPTIONS = [
+    {
+        value: 'GCASH',
+        label: 'GCash',
+        image: gcash,
+    },
+    {
+        value: 'MAYA_APP',
+        label: 'Maya App',
+        image: maya,
+    },
+    {
+        value: 'MAYA',
+        label: 'Maya',
+        image: maya,
+    },
+    {
+        value: 'QRPH',
+        label: 'QRPH',
+        image: qrph,
+    },
+    {
+        value: 'ONLINE_BANK',
+        label: 'Online Bank',
+        image: onlineBank,
+    },
+];
+export function PaymentMethods(props) {
+    var _a, _b;
+    var options = ((_a = props.options) === null || _a === void 0 ? void 0 : _a.length)
+        ? OPTIONS.filter(function (option) { var _a; return (_a = props.options) === null || _a === void 0 ? void 0 : _a.includes(option.value); })
+        : OPTIONS;
+    var _c = useControllableState({
+        value: props.value,
+        defaultValue: (_b = props.defaultValue) !== null && _b !== void 0 ? _b : options[0].value,
+        onChange: props.onChange,
+    }), value = _c[0], setValue = _c[1];
+    return (<div className={props.className}>
+      <Field.Label asChild>
+        <div>Select your payment method</div>
+      </Field.Label>
+      <Checkbox.Group value={[value]} onValueChange={function (newValue) {
+            var lastValue = newValue.at(-1);
+            if (!lastValue)
+                return;
+            setValue(PaymentMethodDefinition.parse(lastValue));
+        }} className="grid grid-cols-2 gap-x-4 gap-y-3">
+        {options.map(function (option) { return (<Checkbox.Root key={option.value} value={option.value} className="border-gray-200 ui-checked:border-gray-900 ui-checked:outline-solid ui-checked:outline-gray-900 flex cursor-pointer rounded-xl border p-xl ui-checked:outline">
+            <div className="grow">
+              <Image src={option.image} alt="" width={200} height={40} className="h-5 w-auto lg:h-8" draggable={false}/>
+            </div>
+            <Checkbox.Control className="shrink-0">
+              <Checkbox.Indicator asChild>
+                <CheckIcon />
+              </Checkbox.Indicator>
+            </Checkbox.Control>
+            <Checkbox.HiddenInput />
+          </Checkbox.Root>); })}
+      </Checkbox.Group>
+    </div>);
+}

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.d.ts

@@ -0,0 +1 @@
+export declare function Withdrawal(): null;

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

@@ -0,0 +1,3 @@
+export function Withdrawal() {
+    return null;
+}

package/dist/components/DepositWithdrawal/index.d.ts

@@ -0,0 +1 @@
+export * from './DepositWithdrawal';

package/dist/components/DepositWithdrawal/index.js

@@ -0,0 +1 @@
+export * from './DepositWithdrawal';

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

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH"]>;
+export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;

package/dist/components/DepositWithdrawal/utils.js

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+export var PaymentMethodDefinition = z.enum([
+    'GCASH',
+    'MAYA_APP',
+    'MAYA',
+    'ONLINE_BANK',
+    'QRPH',
+]);

package/dist/components/Disclaimer/Disclaimer.d.ts

@@ -0,0 +1,5 @@
+import type { ImageProps } from 'next/image';
+export interface DisclaimerProps {
+    logo: ImageProps['src'];
+}
+export declare function Disclaimer(props: DisclaimerProps): import("react").JSX.Element;

package/dist/components/Disclaimer/Disclaimer.jsx

@@ -0,0 +1,45 @@
+'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) {
+    var disclaimer = useDisclaimer();
+    var acceptTriggerRef = useRef(null);
+    return (<Dialog.Root open={disclaimer.open} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false} initialFocusEl={function () { return acceptTriggerRef.current; }}>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content className="flex h-full w-full flex-col items-start bg-white 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-gray-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-accent-700 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="" className="h-[88px] w-auto shrink-0" draggable={false}/>
+
+                <Image src={responsibleGamingLogo} alt="" 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/Disclaimer/index.d.ts

@@ -0,0 +1 @@
+export * from './Disclaimer';

package/dist/components/Disclaimer/index.js

@@ -0,0 +1 @@
+export * from './Disclaimer';

package/dist/components/Disclaimer/useDisclaimer.d.ts

@@ -0,0 +1,4 @@
+export declare function useDisclaimer(): {
+    open: boolean;
+    close: () => void;
+};

package/dist/components/Disclaimer/useDisclaimer.jsx

@@ -0,0 +1,39 @@
+import { addMinutes } from 'date-fns';
+import { clamp } from 'lodash-es';
+import { useLocalStorage, useTimeout } from 'usehooks-ts';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../hooks/useGlobalStore';
+import { useSessionQuery } from '../../hooks/useSessionQuery/useSessionQuery';
+export function useDisclaimer() {
+    'use no memo';
+    var _a;
+    var sessionQuery = useSessionQuery();
+    var disclaimerStore = useGlobalStore(useShallow(function (state) { return state.disclaimer; }));
+    var _b = useLocalStorage('WebPortalDisclaimerRefreshPausedUntil', null, {
+        serializer: function (v) {
+            var _a;
+            return (_a = v === null || v === void 0 ? void 0 : v.toISOString()) !== null && _a !== void 0 ? _a : '';
+        },
+        deserializer: function (v) {
+            return v ? new Date(v) : null;
+        },
+    }), refreshPausedUntil = _b[0], setRefreshPausedUntil = _b[1];
+    var now = new Date();
+    var refetchPausedUntilInMs = refreshPausedUntil
+        ? clamp(refreshPausedUntil.getTime() - now.getTime(), 0, Infinity)
+        : /* set to zero to trigger timeout function */ 0;
+    useTimeout(function () {
+        disclaimerStore.setOpen(true);
+    }, refetchPausedUntilInMs);
+    return {
+        open: sessionQuery.isLoading
+            ? false
+            : ((_a = sessionQuery.data) === null || _a === void 0 ? void 0 : _a.status) === 'authenticated'
+                ? false
+                : disclaimerStore.open,
+        close: function () {
+            disclaimerStore.setOpen(false);
+            setRefreshPausedUntil(addMinutes(new Date(), 30));
+        },
+    };
+}

package/dist/components/Empty/CloudIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function CloudIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;

package/dist/components/Empty/CloudIcon.jsx

@@ -0,0 +1,42 @@
+export 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>);
+}

package/dist/components/Empty/Empty.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ComponentType } from 'react';
+interface EmptyProps {
+    icon: ComponentType<ComponentProps<'svg'>>;
+    title: string;
+    message: string;
+    className?: string;
+}
+export declare function Empty(props: EmptyProps): import("react").JSX.Element;
+export {};

package/dist/components/Empty/Empty.jsx

@@ -0,0 +1,16 @@
+import { CloudIcon } from './CloudIcon';
+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-gray-100 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-gray-600/25 absolute bottom-2 left-1/2 flex size-9 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm">
+          <props.icon className="size-6 text-white"/>
+        </div>
+      </div>
+      <h2 className="mt-xl text-center font-semibold">{props.title}</h2>
+      <p className="text-gray-500 mx-auto mt-xs max-w-[25rem] text-center text-sm">
+        {props.message}
+      </p>
+    </div>);
+}

package/dist/components/Empty/index.d.ts

@@ -0,0 +1 @@
+export * from './Empty';

package/dist/components/Empty/index.js

@@ -0,0 +1 @@
+export * from './Empty';

package/dist/components/FeatureFlagProvider/FeatureFlagContext.d.ts

@@ -0,0 +1,3 @@
+import type { UseFeatureFlagReturn } from './useFeatureFlag';
+export declare const FeatureFlagContext: import("react").Context<UseFeatureFlagReturn | null>;
+export declare const useFeatureFlagContext: () => UseFeatureFlagReturn;

package/dist/components/FeatureFlagProvider/FeatureFlagContext.jsx

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+export var FeatureFlagContext = createContext(null);
+export var useFeatureFlagContext = function () {
+    var context = useContext(FeatureFlagContext);
+    invariant(context);
+    return context;
+};

package/dist/components/FeatureFlagProvider/FeatureFlagProvider.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+interface FeatureFlagProviderProps {
+    children: ReactNode;
+}
+export declare function FeatureFlagProvider(props: FeatureFlagProviderProps): import("react").JSX.Element;
+export {};