@opexa/portal-components 0.0.271 → 0.0.274

package/dist/client/hooks/useCamera.d.ts

@@ -12,7 +12,7 @@ export interface CameraData {
 export interface UseCameraReturn<T extends string = never> {
     open(): Promise<void>;
     close(): Promise<void>;
-    snap(): Promise<void>;
+    snap(): Promise<CameraData | null>;
     reopen(): Promise<void>;
     reset(): Promise<void>;
     data: CameraData | null;

package/dist/client/hooks/useCamera.js

@@ -115,52 +115,60 @@ export function useCamera(options = {}) {
             context.scale(-1, 1);
         }
         context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
-        canvas.toBlob(async (blob) => {
-            if (!blob) {
-                setSnapping(false);
-                return setError({
-                    name: 'CameraError',
-                    message: "'canvas.toBlob' failed to create blob",
+        return new Promise((resolve) => {
+            canvas.toBlob(async (blob) => {
+                if (!blob) {
+                    setSnapping(false);
+                    resolve(null);
+                    return setError({
+                        name: 'CameraError',
+                        message: "'canvas.toBlob' failed to create blob",
+                    });
+                }
+                const url = canvas.toDataURL('image/jpeg', 1);
+                const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
+                    type: 'image/jpeg',
+                    endings: 'native',
+                    lastModified: Date.now(),
                 });
-            }
-            const url = canvas.toDataURL('image/jpeg', 1);
-            const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
-                type: 'image/jpeg',
-                endings: 'native',
-                lastModified: Date.now(),
-            });
-            const image = new Image();
-            image.src = url;
-            image.alt = '';
-            image.width = canvas.width;
-            image.height = canvas.height;
-            if (!image.complete || image.naturalWidth === 0) {
-                await new Promise((resolve, reject) => {
-                    image.onload = () => resolve();
-                    image.onerror = () => reject();
+                const image = new Image();
+                image.src = url;
+                image.alt = '';
+                image.width = canvas.width;
+                image.height = canvas.height;
+                if (!image.complete || image.naturalWidth === 0) {
+                    await new Promise((resolve, reject) => {
+                        image.onload = () => resolve();
+                        image.onerror = () => reject();
+                    });
+                }
+                const data = {
+                    url,
+                    file,
+                    image,
+                };
+                if (!options.transform) {
+                    setData(data);
+                    setSnapping(false);
+                    resolve(data);
+                    return;
+                }
+                const transformResult = await options.transform({
+                    ...data,
+                    video,
+                    canvas,
                 });
-            }
-            const data = {
-                url,
-                file,
-                image,
-            };
-            if (!options.transform) {
-                setData(data);
+                if (transformResult.ok) {
+                    setData(transformResult.data);
+                    resolve(transformResult.data);
+                }
+                else {
+                    setError(transformResult.error);
+                    resolve(null);
+                }
                 setSnapping(false);
-                return;
-            }
-            const transformResult = await options.transform({
-                ...data,
-                video,
-                canvas,
-            });
-            if (transformResult.ok)
-                setData(transformResult.data);
-            else
-                setError(transformResult.error);
-            setSnapping(false);
-        }, 'image/jpeg', 1);
+            }, 'image/jpeg', 1);
+        });
     }, [mirror, options]);
     const reset = useCallback(() => {
         setData(null);

package/dist/client/hooks/usePxToRemConverter.d.ts

@@ -0,0 +1,2 @@
+export type PxToRemConverter = (px: number) => number;
+export declare function usePxToRemConverter(): PxToRemConverter;

package/dist/client/hooks/usePxToRemConverter.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+export function usePxToRemConverter() {
+    const [rootFontSize, setRootFontSize] = useState(16);
+    useEffect(() => {
+        const updateRootFontSize = () => {
+            const root = document.documentElement;
+            setRootFontSize(parseFloat(getComputedStyle(root).fontSize));
+        };
+        updateRootFontSize();
+        window.addEventListener('resize', updateRootFontSize);
+        return () => {
+            window.removeEventListener('resize', updateRootFontSize);
+        };
+    }, []);
+    return function convert(px) {
+        return px / rootFontSize;
+    };
+}

package/dist/client/hooks/useRect.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+export interface UseRectOptions {
+    enabled?: boolean;
+}
+export declare function useRect<T extends HTMLElement>(ref: RefObject<T | null>, options?: UseRectOptions): DOMRect;

package/dist/client/hooks/useRect.js

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+const FALLBACK_RECT = {
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+    toJSON() {
+        return {
+            x: 0,
+            y: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: 0,
+            height: 0,
+        };
+    },
+};
+export function useRect(ref, options) {
+    const [rect, setRect] = useState(FALLBACK_RECT);
+    useEffect(() => {
+        if (options?.enabled === false)
+            return;
+        function updateRect() {
+            if (!ref.current)
+                return;
+            setRect(ref.current.getBoundingClientRect());
+        }
+        const observer = new ResizeObserver(updateRect);
+        if (ref.current)
+            observer.observe(ref.current);
+        requestAnimationFrame(updateRect);
+        window.addEventListener('resize', updateRect);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', updateRect);
+        };
+    }, [options?.enabled, ref]);
+    return rect;
+}

package/dist/components/Bonus/Bonus.client.js

@@ -13,7 +13,7 @@ import piggyBank from '../../images/piggy-bank.png';
 import { Badge } from '../../ui/Badge/index.js';
 import { Collapsible } from '../../ui/Collapsible/index.js';
 import { Progress } from '../../ui/Progress/index.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';

package/dist/components/Cashback/Cashback.client.js

@@ -11,7 +11,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { Button } from '../../ui/Button/index.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 export function Cashback__client(props) {
     const availablePromosQuery = useAvailablePromosQuery();
     const cashbackQuery = useCashbackQuery(props.id);

package/dist/components/CustomPromo/CustomPromo.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Image from 'next/image';
 import Link from 'next/link';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 import { stripTags } from '../../utils/stripTags.js';
 export function CustomPromo(props) {
     return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:title", content: props.promo.name }), _jsx("meta", { name: "og:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:title", content: props.promo.name }), _jsx("meta", { name: "twitter:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "twitter:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: props.promo.banner, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: props.promo.name }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {

package/dist/components/GameLaunch/GameLaunch.lazy.js

@@ -22,7 +22,7 @@ import { AlertDialog } from '../../ui/AlertDialog/index.js';
 import { Button } from '../../ui/Button/index.js';
 import { IconButton } from '../../ui/IconButton/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence.js';
+import { Presence } from '../../ui/Presence/index.js';
 export function GameLaunch() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         gameLaunch: ctx.gameLaunch,

package/dist/components/GamesSearch/GamesSearch.js

@@ -10,7 +10,7 @@ import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Combobox } from '../../ui/Combobox/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence.js';
+import { Presence } from '../../ui/Presence/index.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css

@@ -1,184 +1,184 @@
-@keyframes arrow-green-flash {
-  0% {
-    color: #abefc6;
-  }
-  100% {
-    color: #079455;
-  }
-}
-
-.animate-arrow-green-flash-1 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-.animate-arrow-green-flash-2 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-green-flash-3 {
-  animation: arrow-green-flash 0.4s infinite;
-}
-
-@keyframes arrow-red-flash {
-  0%,
-  100% {
-    color: #f97066;
-  }
-  50% {
-    color: #fecdca;
-  }
-}
-
-.animate-arrow-red-flash-1 {
-  animation: arrow-red-flash 0.4s infinite;
-}
-
-.animate-arrow-red-flash-2 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-red-flash-3 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-/* Animated BG */
-@keyframes rotate {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.light-rays {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-
-  --first: var(--color-bg-tertiary);
-  --second: var(--color-bg-quaternary);
-}
-
-.light-rays::before,
-.light-rays::after {
-  content: '';
-  position: absolute;
-  top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
-  margin: -100vmax;
-  width: 200vmax;
-  height: 200vmax;
-  opacity: 0.6;
-  transform-origin: center;
-}
-
-.light-rays::before {
-  background: conic-gradient(
-    var(--first) 0deg 7.2deg,
-    var(--second) 7.2deg 14.4deg,
-    var(--first) 14.4deg 21.6deg,
-    var(--second) 21.6deg 28.8deg,
-    var(--first) 28.8deg 36deg,
-    var(--second) 36deg 43.2deg,
-    var(--first) 43.2deg 50.4deg,
-    var(--second) 50.4deg 57.6deg,
-    var(--first) 57.6deg 64.8deg,
-    var(--second) 64.8deg 72deg,
-    var(--first) 72deg 79.2deg,
-    var(--second) 79.2deg 86.4deg,
-    var(--first) 86.4deg 93.6deg,
-    var(--second) 93.6deg 100.8deg,
-    var(--first) 100.8deg 108deg,
-    var(--second) 108deg 115.2deg,
-    var(--first) 115.2deg 122.4deg,
-    var(--second) 122.4deg 129.6deg,
-    var(--first) 129.6deg 136.8deg,
-    var(--second) 136.8deg 144deg,
-    var(--first) 144deg 151.2deg,
-    var(--second) 151.2deg 158.4deg,
-    var(--first) 158.4deg 165.6deg,
-    var(--second) 165.6deg 172.8deg,
-    var(--first) 172.8deg 180deg,
-    var(--second) 180deg 187.2deg,
-    var(--first) 187.2deg 194.4deg,
-    var(--second) 194.4deg 201.6deg,
-    var(--first) 201.6deg 208.8deg,
-    var(--second) 208.8deg 216deg,
-    var(--first) 216deg 223.2deg,
-    var(--second) 223.2deg 230.4deg,
-    var(--first) 230.4deg 237.6deg,
-    var(--second) 237.6deg 244.8deg,
-    var(--first) 244.8deg 252deg,
-    var(--second) 252deg 259.2deg,
-    var(--first) 259.2deg 266.4deg,
-    var(--second) 266.4deg 273.6deg,
-    var(--first) 273.6deg 280.8deg,
-    var(--second) 280.8deg 288deg,
-    var(--first) 288deg 295.2deg,
-    var(--second) 295.2deg 302.4deg,
-    var(--first) 302.4deg 309.6deg,
-    var(--second) 309.6deg 316.8deg,
-    var(--first) 316.8deg 324deg,
-    var(--second) 324deg 331.2deg,
-    var(--first) 331.2deg 338.4deg,
-    var(--second) 338.4deg 345.6deg,
-    var(--first) 345.6deg 352.8deg,
-    var(--second) 352.8deg 360deg
-  );
-  animation: rotate 20s linear infinite;
-}
-
-@media (max-width: 1024px) {
-  .light-rays::before,
-  .light-rays::after {
-    left: auto;
-    right: 11%;
-  }
-}
-
-/* ScrollArea.module.css */
-.scrollArea {
-  overflow-y: scroll;
-  padding-right: 4px;
-}
-
-/* WebKit-based browsers */
-.scrollArea::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollArea::-webkit-scrollbar-track {
-  background: var(--color-bg-primary-alt);
-  border-radius: 9999px;
-}
-
-.scrollArea::-webkit-scrollbar-thumb {
-  background-color: var(--color-bg-quaternary);
-  border-radius: 9999px;
-}
-
-@keyframes waveColor {
-  0%,
-  2.5% {
-    color: var(--wave-highlight-color);
-  }
-  2.51%,
-  100% {
-    color: var(--color-brand-300);
-  }
-}
-
-.animate-wave-color-success {
-  --wave-highlight-color: var(--color-success-800);
-  animation: waveColor 4s ease-in-out infinite;
-}
-
-.animate-wave-color-error {
-  --wave-highlight-color: var(--color-error-600);
-  animation: waveColor 4s ease-in-out infinite;
-}
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}