@opexa/portal-components 0.0.99 → 0.0.100

package/dist/components/Games/GamesList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchGamesQuery } from '../../server/utils/index.js';
+import { prefetchGamesQuery } from '../../server/utils/prefetchGamesQuery.js';
 import { GamesList__client } from './GamesList.client.js';
 export async function GamesList(props) {
     await prefetchGamesQuery({

package/dist/components/GamesSearch/GamesSearch.d.ts

@@ -1,4 +1,4 @@
-import type { GamesInput__Next } from '../../services';
+import type { GamesInput__Next } from '../../services/cmsPortal';
 interface GamesSearchProps {
     first?: number;
     filter?: GamesInput__Next['filter'];

package/dist/components/GamesSearch/GamesSearch.js

@@ -3,9 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { createListCollection, Portal } from '@ark-ui/react';
 import Image from 'next/image';
 import { useState } from 'react';
-import { useGamesQuery } from '../../client/hooks/index.js';
-import { SearchLgIcon } from '../../icons/index.js';
-import { Button, Combobox, Presence } from '../../ui/index.js';
+import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
+import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Combobox } from '../../ui/Combobox/index.js';
+import { Presence } from '../../ui/Presence.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {
     const [search, setSearch] = useState('');
@@ -39,7 +42,10 @@ export function GamesSearch(props) {
                                     }, children: "Clear" }));
                             } })] }), _jsx(Portal, { children: _jsx(Combobox.Positioner, { children: search.trim().length > 0 && (_jsx(Combobox.Content, { className: "max-h-[33.25rem] overflow-y-auto p-0", children: search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && _jsx(Alert, { message: "No results found" }), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: "grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { game: game, onClick: () => {
                                                             api.setOpen(false);
-                                                        }, className: "block w-full shadow-sm", children: [_jsx(Image, { src: game.image, alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: "mx-auto mt-4xl w-fit", onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) }) })] }) }));
+                                                        }, className: "block w-full shadow-sm", children: [_jsx(Image, { src: getGameImageUrl({
+                                                                    reference: game.reference,
+                                                                    provider: game.provider,
+                                                                }), alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: "mx-auto mt-4xl w-fit", onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) }) })] }) }));
 }
 function Alert({ message }) {
     return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "bg-bg-secondary shadow-xs border-border-primary mx-auto flex size-12 items-center justify-center rounded-lg border", children: _jsx(SearchLgIcon, { className: "text-text-secondary-700 size-6" }) }), _jsx("p", { className: "text-text-secondary-700 mt-4 text-center", children: message })] }));

package/dist/components/Jackpots/Jackpots.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchJackpotsQuery } from '../../server/utils/index.js';
+import { prefetchJackpotsQuery } from '../../server/utils/prefetchJackpotsQuery.js';
 import { JackpotsCarousel, } from './JackpotsCarousel/JackpotsCarousel.js';
 import { JackpotsList, } from './JackpotsList/JackpotsList.js';
 export async function Jackpots(props) {

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.js

@@ -4,10 +4,12 @@ import useEmblaCarousel from 'embla-carousel-react';
 import { isString } from 'lodash-es';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
-import { useJackpotsQuery } from '../../../client/hooks/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, } from '../../../icons/index.js';
-import { Button } from '../../../ui/index.js';
-import { isStyleEntries } from '../../../utils/index.js';
+import { useJackpotsQuery } from '../../../client/hooks/useJackpotsQuery.js';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { isStyleEntries } from '../../../utils/isStyleEntries.js';
 import { JackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 import { JackpotsCarouselItem } from './JackpotsCarouselItem.js';
 export function JackpotsCarousel({ style, className, ...props }) {

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselContext.js

@@ -1,2 +1,2 @@
-import { createContext } from '../../../client/utils/index.js';
+import { createContext } from '../../../client/utils/createContext.js';
 export const [JackpotsCarouselItemContext, useJackpotsCarouselItemContext] = createContext();

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.js

@@ -5,15 +5,21 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../../client/hooks/index.js';
 import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
-import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, User01Icon, } from '../../../icons/index.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
 import { StarIcon } from '../../../icons/StarIcon.js';
+import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
+import { User01Icon } from '../../../icons/User01Icon.js';
 import closeChest from '../../../images/close-chest.png';
 import firstPlace from '../../../images/first-place.png';
 import leaderboard from '../../../images/leaderboard.png';
 import openChest from '../../../images/open-chest.png';
-import { formatNumber, getPercentage, mask } from '../../../utils/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getPercentage } from '../../../utils/getPercentage.js';
+import { mask } from '../../../utils/mask.js';
 import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 import styles from './JackpotsCarouselItem.module.css';
 export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, }) {

package/dist/components/Jackpots/JackpotsList/JackpotsList.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import Image, {} from 'next/image';
-import { useJackpotsQuery } from '../../../client/hooks/index.js';
+import { useJackpotsQuery } from '../../../client/hooks/useJackpotsQuery.js';
 import closeChest from '../../../images/close-chest.png';
-import { isStyleEntries } from '../../../utils/index.js';
+import { isStyleEntries } from '../../../utils/isStyleEntries.js';
 import { JackpotsListItemContext, JackpotsListPropsContext, } from './JackpotsListContext.js';
 import { JackpotsListItemDesktop } from './JackpotsListItemDesktop.js';
 import { JackpotsListItemMobile } from './JackpotsListItemMobile.js';

package/dist/components/Jackpots/JackpotsList/JackpotsListContext.js

@@ -1,3 +1,3 @@
-import { createContext } from '../../../client/utils/index.js';
+import { createContext } from '../../../client/utils/createContext.js';
 export const [JackpotsListPropsContext, useJackpotsListPropsContext] = createContext();
 export const [JackpotsListItemContext, useJackpotsListItemContext] = createContext();

package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.js

@@ -2,13 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Progress } from '@ark-ui/react';
 import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
-import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, User01Icon, } from '../../../icons/index.js';
+import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
 import { StarIcon } from '../../../icons/StarIcon.js';
+import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
+import { User01Icon } from '../../../icons/User01Icon.js';
 import closeChest from '../../../images/close-chest.png';
 import firstPlace from '../../../images/first-place.png';
 import leaderboard from '../../../images/leaderboard.png';
 import openChest from '../../../images/open-chest.png';
-import { formatNumber, getPercentage, mask } from '../../../utils/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getPercentage } from '../../../utils/getPercentage.js';
+import { mask } from '../../../utils/mask.js';
 import { useJackpotsListItemContext } from './JackpotsListContext.js';
 import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';

package/dist/components/Jackpots/JackpotsList/JackpotsListItemGameProviders.js

@@ -3,8 +3,9 @@ import useEmblaCarousel from 'embla-carousel-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
-import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons/index.js';
-import { Button } from '../../../ui/index.js';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
+import { Button } from '../../../ui/Button/index.js';
 import { useJackpotsListPropsContext } from './JackpotsListContext.js';
 export function JackpotsListItemGameProviders({ gameProviders, }) {
     const [emblaRef, emblaApi] = useEmblaCarousel({

package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.js

@@ -3,12 +3,21 @@ import { Progress } from '@ark-ui/react';
 import Image from 'next/image';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ArrowNarrowDownIcon, ArrowNarrowUpIcon, ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, StarIcon, Trophy01Icon, User01Icon, } from '../../../icons/index.js';
+import { ArrowNarrowDownIcon } from '../../../icons/ArrowNarrowDownIcon.js';
+import { ArrowNarrowUpIcon } from '../../../icons/ArrowNarrowUpIcon.js';
+import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { StarIcon } from '../../../icons/StarIcon.js';
+import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
+import { User01Icon } from '../../../icons/User01Icon.js';
 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/index.js';
-import { formatNumber, getPercentage, mask } from '../../../utils/index.js';
+import { Button } from '../../../ui/Button/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getPercentage } from '../../../utils/getPercentage.js';
+import { mask } from '../../../utils/mask.js';
 import { useJackpotsListItemContext } from './JackpotsListContext.js';
 import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';

package/dist/components/Jackpots/JackpotsList/JackpotsListItemRules.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
 import { Flag06Icon } from '../../../icons/Flag06Icon.js';
-import { Dialog } from '../../../ui/index.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
 import { useJackpotsListItemContext } from './JackpotsListContext.js';
 export function JackpotsListItemRules(props) {
     const jackpot = useJackpotsListItemContext();

package/dist/components/Jackpots/JackpotsList/useJackpotsListItemData.d.ts

@@ -2,7 +2,7 @@ export declare function useJackpotsListItemData(): {
     jackpotPayouts: import("../../../types").JackpotPayout[];
     topJackpotPayout: import("../../../types").JackpotPayout;
     filteredGameProviders: import("../../../types").GameProviderData[];
-    localeInfo: import("../../../utils").LocaleInfo;
+    localeInfo: import("../../../utils/getLocaleInfo").LocaleInfo;
     isPayingOut: boolean;
     jackpotAmount: string;
     arrowImages: import("react/jsx-runtime").JSX.Element[];

package/dist/components/Jackpots/JackpotsList/useJackpotsListItemData.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../../client/hooks/index.js';
 import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
 import { GAME_PROVIDER_DATA } from '../../../constants/index.js';
-import { ChevronLeftIcon, ChevronRightIcon } from '../../../icons/index.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
 import { useJackpotsListItemContext, useJackpotsListPropsContext, } from './JackpotsListContext.js';
 import styles from './JackpotsListItem.module.css';
 export function useJackpotsListItemData() {

package/dist/components/KYC/Header.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronLeftIcon, XIcon } from '../../icons/index.js';
-import { Dialog, IconButton } from '../../ui/index.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
 export function Header() {
     return (_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "bg-bg-primary-alt relative flex items-center gap-xl px-xl py-md lg:justify-center lg:bg-transparent lg:p-0", children: [_jsx(IconButton, { size: "2xs", variant: "outline", colorScheme: "gray", className: "lg:hidden", onClick: () => api.setOpen(false), children: _jsx(ChevronLeftIcon, {}) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "Personal Verification" }), _jsx("button", { type: "button", className: "text-text-quinary absolute right-0 top-1/2 hidden -translate-y-1/2 lg:block", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "size-6" }) })] })) }));
 }

package/dist/components/KYC/Indicator.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { noop } from 'lodash-es';
-import { ArrowLeftIcon } from '../../icons/index.js';
-import { Progress } from '../../ui/index.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { Progress } from '../../ui/Progress/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Indicator() {
     const context = useKYCContext();

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

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

package/dist/components/KYC/KYC.js

@@ -1,26 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { Dialog } from '../../ui/index.js';
-import { Header } from './Header.js';
-import { Indicator } from './Indicator.js';
-import { KYCContext } from './KYCContext.js';
-import { Step1 } from './Step1.js';
-import { Step2 } from './Step2.js';
-import { Step3 } from './Step3.js';
-import { Step4 } from './Step4.js';
-import { useKYC } from './useKYC.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./KYC.lazy.js').then((m) => m.KYC), {
+    ssr: false,
+    loading: () => null,
+});
 export function KYC() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        kyc: ctx.kyc,
-    })));
-    const context = useKYC();
-    return (_jsx(KYCContext, { value: context, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
-                globalStore.kyc.setOpen(details.open);
-            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: twMerge(context.step === 4 && 'flex items-center'), children: _jsxs(Dialog.Content, { className: twMerge(context.step < 4
-                                ? 'bg-bg-primary lg:bg-bg-primary-alt mx-auto h-full w-full lg:h-auto lg:w-[400px] lg:p-3xl'
-                                : 'mx-auto w-[25rem] max-w-[calc(100%-2rem)] p-3xl'), children: [context.step < 4 && _jsx(Header, {}), context.step < 4 && _jsx(Indicator, {}), context.step === 1 && _jsx(Step1, {}), context.step === 2 && _jsx(Step2, {}), context.step === 3 && _jsx(Step3, {}), context.step === 4 && _jsx(Step4, {})] }) })] }) }) }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.kyc['~touched']));
+    if (touched)
+        return _jsx(Component, {});
 }

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

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

package/dist/components/KYC/KYC.lazy.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Header } from './Header.js';
+import { Indicator } from './Indicator.js';
+import { KYCContext } from './KYCContext.js';
+import { Step1 } from './Step1.js';
+import { Step2 } from './Step2.js';
+import { Step3 } from './Step3.js';
+import { Step4 } from './Step4.js';
+import { useKYC } from './useKYC.js';
+export function KYC() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    const context = useKYC();
+    return (_jsx(KYCContext, { value: context, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
+                globalStore.kyc.setOpen(details.open);
+            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: twMerge(context.step === 4 && 'flex items-center'), children: _jsxs(Dialog.Content, { className: twMerge(context.step < 4
+                                ? 'bg-bg-primary lg:bg-bg-primary-alt mx-auto h-full w-full lg:h-auto lg:w-[400px] lg:p-3xl'
+                                : 'mx-auto w-[25rem] max-w-[calc(100%-2rem)] p-3xl'), children: [context.step < 4 && _jsx(Header, {}), context.step < 4 && _jsx(Indicator, {}), context.step === 1 && _jsx(Step1, {}), context.step === 2 && _jsx(Step2, {}), context.step === 3 && _jsx(Step3, {}), context.step === 4 && _jsx(Step4, {})] }) })] }) }) }));
+}

package/dist/components/KYC/KYCContext.js

@@ -1,2 +1,2 @@
-import { createContext } from '../../client/utils/index.js';
+import { createContext } from '../../client/utils/createContext.js';
 export const [KYCContext, useKYCContext] = createContext();

package/dist/components/KYC/KYCTrigger.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 export function KYCTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,

package/dist/components/KYC/Step1.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { CheckIcon, XIcon } from '../../icons/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
 import uploadId from '../../images/capture-id-banner.png';
-import { Button } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Step1() {
     const context = useKYCContext();

package/dist/components/KYC/Step2.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { CheckIcon, XIcon } from '../../icons/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
 import selfie from '../../images/capture-selfie-banner.png';
-import { Button } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Step2() {
     const context = useKYCContext();

package/dist/components/KYC/Step3.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon } from '../../icons/index.js';
-import { Button, Checkbox, Field } from '../../ui/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Field } from '../../ui/Field/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Step3() {
     const context = useKYCContext();

package/dist/components/KYC/Step4.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircleIcon } from '../../icons/index.js';
-import { Button, Dialog } from '../../ui/index.js';
+import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 export function Step4() {
     return (_jsxs("div", { children: [_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(CheckCircleIcon, {}) }), _jsx("h2", { className: "mt-3 text-center", children: "Submission Successful" }), _jsx("p", { className: "text-text-tertiary-600 text-center", children: "Your documents have been submitted successfully. They\u2019re now under review, and you\u2019ll receive a notification as soon as your account is verified." }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { className: "mt-3xl", onClick: () => api.setOpen(false), children: "Ok" })) })] }));
 }

package/dist/components/Messages/Message.js

@@ -3,7 +3,9 @@ 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 { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 import { useMessageContext } from './MessageContext.js';
 import { getMessageIcon } from './utils.js';
 export function Message() {

package/dist/components/Messages/MessageContext.js

@@ -1,2 +1,2 @@
-import { createContext } from '../../client/utils/index.js';
+import { createContext } from '../../client/utils/createContext.js';
 export const [MessageContext, useMessageContext] = createContext();

package/dist/components/Messages/MessagePopup.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { XIcon } from '../../icons/index.js';
-import { Dialog } from '../../ui/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 import { getMessageIcon } from './utils.js';
 export const MessagePopup = () => {
     const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));

package/dist/components/Messages/MessageTrigger.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 export function MessageTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         message: ctx.message,

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

@@ -1,13 +1,3 @@
-export interface MessagesProps {
-    /**
-     * @default '0px'
-     * @example
-     * ```tsx
-     * offsetTop="1em"
-     * offsetTop="1rem"
-     * offsetTop="16px"
-     * ```
-     */
-    offsetTop?: string | [mobile: string, desktop: string];
-}
-export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;
+import type { MessagesProps } from './Messages.lazy';
+export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { MessagesProps };

package/dist/components/Messages/Messages.js

@@ -1,39 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
-import { z } from 'zod';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useMessagesQuery, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
-import { SpinnerIcon, XIcon } from '../../icons/index.js';
-import { Drawer, Tabs } from '../../ui/index.js';
-import { InfiniteScroll } from '../InfiniteScroll.js';
-import { Message } from './Message.js';
-import { MessageContext } from './MessageContext.js';
-import { MessagePopup } from './MessagePopup.js';
-const TABS = ['ALL', 'UNREAD'];
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./Messages.lazy.js').then((mod) => mod.Messages), {
+    ssr: false,
+    loading: () => null,
+});
 export function Messages(props) {
-    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: false,
-                },
-            },
-        }),
-    }, { refetchInterval: 5000 });
-    const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
-    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
-        ? props.offsetTop
-        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
-    return (_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
-                                ['--offset-top-mobile']: mobileOffsetTop,
-                                ['--offset-top-desktop']: desktopOffsetTop,
-                            }, children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { 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 p-xl", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageContext, { value: message, children: _jsx(Message, {}) }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
-                                                            await messagesQuery.fetchNextPage();
-                                                        }, className: "mt-4" })] }, tab)))] })] }) }) }) }) }), _jsx(MessagePopup, {})] }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.messages['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
 }

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

@@ -0,0 +1,13 @@
+export interface MessagesProps {
+    /**
+     * @default '0px'
+     * @example
+     * ```tsx
+     * offsetTop="1em"
+     * offsetTop="1rem"
+     * offsetTop="16px"
+     * ```
+     */
+    offsetTop?: string | [mobile: string, desktop: string];
+}
+export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/Messages.lazy.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMessagesQuery } from '../../client/hooks/useMessagesQuery.js';
+import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Drawer } from '../../ui/Drawer/index.js';
+import { Tabs } from '../../ui/Tabs/index.js';
+import { InfiniteScroll } from '../InfiniteScroll.js';
+import { Message } from './Message.js';
+import { MessageContext } from './MessageContext.js';
+import { MessagePopup } from './MessagePopup.js';
+const TABS = ['ALL', 'UNREAD'];
+export function Messages(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, {
+        refetchInterval: globalStore.messages.open ? 5000 : 10000,
+    });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    const messagesQuery = useMessagesQuery({
+        first: 10,
+        ...(globalStore.messages.tab === 'UNREAD' && {
+            filter: {
+                markedAsRead: {
+                    equal: false,
+                },
+            },
+        }),
+    }, {
+        enabled: globalStore.messages.open,
+        refetchInterval: 5000,
+    });
+    const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+                                ['--offset-top-mobile']: mobileOffsetTop,
+                                ['--offset-top-desktop']: desktopOffsetTop,
+                            }, children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { 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 p-xl", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageContext, { value: message, children: _jsx(Message, {}) }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
+                                                            await messagesQuery.fetchNextPage();
+                                                        }, className: "mt-4" })] }, tab)))] })] }) }) }) }) }), _jsx(MessagePopup, {})] }));
+}

package/dist/components/Messages/MessagesTrigger.js

@@ -2,14 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
-import { Bell01Icon } from '../../icons/index.js';
-import { IconButton } from '../../ui/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
+import { Bell01Icon } from '../../icons/Bell01Icon.js';
+import { IconButton } from '../../ui/IconButton/index.js';
 export function MessagesTrigger({ asChild, children, ...props }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         messages: ctx.messages,
     })));
-    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, {
+        refetchInterval: globalStore.messages.open ? 5000 : 10000,
+    });
     const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
     return (_jsx(ark.button, { type: "button", "aria-label": "Toggle messages panel", "data-state": globalStore.messages.open ? 'open' : 'closed', ...props, onClick: (e) => {
             globalStore.messages.setOpen(!globalStore.messages.open);