@volr/react-ui 0.1.57 → 0.1.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +122 -124
- package/dist/index.cjs +188 -366
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +102 -280
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React9 = require('react');
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
5
|
var react = require('@volr/react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -9,7 +9,7 @@ var tailwindMerge = require('tailwind-merge');
|
|
|
9
9
|
|
|
10
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var React9__default = /*#__PURE__*/_interopDefault(React9);
|
|
13
13
|
|
|
14
14
|
var __defProp = Object.defineProperty;
|
|
15
15
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -221,13 +221,13 @@ var translations = {
|
|
|
221
221
|
function getTranslations(locale = "en") {
|
|
222
222
|
return translations[locale] || translations.en;
|
|
223
223
|
}
|
|
224
|
-
var I18nContext =
|
|
224
|
+
var I18nContext = React9.createContext(null);
|
|
225
225
|
function interpolate(text, params) {
|
|
226
226
|
if (!params) return text;
|
|
227
227
|
return text.replace(/\{\{(\w+)\}\}/g, (_, key) => params[key] ?? `{{${key}}}`);
|
|
228
228
|
}
|
|
229
229
|
function useI18n() {
|
|
230
|
-
const context =
|
|
230
|
+
const context = React9.useContext(I18nContext);
|
|
231
231
|
if (!context) {
|
|
232
232
|
return {
|
|
233
233
|
locale: "en",
|
|
@@ -262,9 +262,9 @@ function detectLocale() {
|
|
|
262
262
|
return lang.startsWith("ko") ? "ko" : "en";
|
|
263
263
|
}
|
|
264
264
|
function I18nProvider({ children }) {
|
|
265
|
-
const [locale, setLocale] =
|
|
266
|
-
const translations2 =
|
|
267
|
-
const t =
|
|
265
|
+
const [locale, setLocale] = React9.useState(detectLocale());
|
|
266
|
+
const translations2 = React9.useMemo(() => getTranslations(locale), [locale]);
|
|
267
|
+
const t = React9.useMemo(() => {
|
|
268
268
|
return (key, params) => {
|
|
269
269
|
const keys = key.split(".");
|
|
270
270
|
let value2 = translations2;
|
|
@@ -281,7 +281,7 @@ function I18nProvider({ children }) {
|
|
|
281
281
|
return typeof value2 === "string" ? interpolate(value2, params) : key;
|
|
282
282
|
};
|
|
283
283
|
}, [translations2]);
|
|
284
|
-
const value =
|
|
284
|
+
const value = React9.useMemo(
|
|
285
285
|
() => ({
|
|
286
286
|
locale,
|
|
287
287
|
translations: translations2,
|
|
@@ -293,9 +293,9 @@ function I18nProvider({ children }) {
|
|
|
293
293
|
return /* @__PURE__ */ jsxRuntime.jsx(I18nContext.Provider, { value, children });
|
|
294
294
|
}
|
|
295
295
|
var useTranslation = useI18n;
|
|
296
|
-
var VolrModalContext =
|
|
296
|
+
var VolrModalContext = React9.createContext(null);
|
|
297
297
|
var useVolrModal = () => {
|
|
298
|
-
const context =
|
|
298
|
+
const context = React9.useContext(VolrModalContext);
|
|
299
299
|
if (!context) {
|
|
300
300
|
throw new Error("useVolrModal must be used within VolrUIProvider");
|
|
301
301
|
}
|
|
@@ -304,15 +304,15 @@ var useVolrModal = () => {
|
|
|
304
304
|
var VolrModalProvider = ({
|
|
305
305
|
children
|
|
306
306
|
}) => {
|
|
307
|
-
const [isOpen, setIsOpen] =
|
|
308
|
-
const [mode, setMode] =
|
|
309
|
-
const [asset, setAsset] =
|
|
310
|
-
const open =
|
|
307
|
+
const [isOpen, setIsOpen] = React9.useState(false);
|
|
308
|
+
const [mode, setMode] = React9.useState("account");
|
|
309
|
+
const [asset, setAsset] = React9.useState(null);
|
|
310
|
+
const open = React9.useCallback((options) => {
|
|
311
311
|
setMode(options?.mode ?? "account");
|
|
312
312
|
setAsset(options?.asset ?? null);
|
|
313
313
|
setIsOpen(true);
|
|
314
314
|
}, []);
|
|
315
|
-
const close =
|
|
315
|
+
const close = React9.useCallback(() => {
|
|
316
316
|
setIsOpen(false);
|
|
317
317
|
setAsset(null);
|
|
318
318
|
}, []);
|
|
@@ -325,11 +325,11 @@ function cn(...inputs) {
|
|
|
325
325
|
return twMerge(clsx.clsx(inputs));
|
|
326
326
|
}
|
|
327
327
|
function useMediaQuery(query) {
|
|
328
|
-
const [matches, setMatches] =
|
|
328
|
+
const [matches, setMatches] = React9.useState(() => {
|
|
329
329
|
if (typeof window === "undefined") return false;
|
|
330
330
|
return window.matchMedia(query).matches;
|
|
331
331
|
});
|
|
332
|
-
|
|
332
|
+
React9.useEffect(() => {
|
|
333
333
|
if (typeof window === "undefined") return;
|
|
334
334
|
const mql = window.matchMedia(query);
|
|
335
335
|
const handler = (event) => setMatches(event.matches);
|
|
@@ -341,11 +341,11 @@ function useMediaQuery(query) {
|
|
|
341
341
|
}
|
|
342
342
|
|
|
343
343
|
// src/generated/volr-sdk-css.ts
|
|
344
|
-
var VOLR_SDK_CSS = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-teal-400:oklch(77.7% .152 181.912);--volr-color-teal-500:oklch(70.4% .14 182.503);--volr-color-cyan-400:oklch(78.9% .154 211.53);--volr-color-blue-500:oklch(62.3% .214 259.815);--volr-color-purple-600:oklch(55.8% .288 302.321);--volr-color-rose-50:oklch(96.9% .015 12.422);--volr-color-rose-200:oklch(89.2% .058 10.001);--volr-color-rose-700:oklch(51.4% .222 16.935);--volr-color-rose-800:oklch(45.5% .188 13.697);--volr-color-slate-50:oklch(98.4% .003 247.858);--volr-color-slate-100:oklch(96.8% .007 247.896);--volr-color-slate-200:oklch(92.9% .013 255.508);--volr-color-slate-300:oklch(86.9% .022 252.894);--volr-color-slate-400:oklch(70.4% .04 256.788);--volr-color-slate-500:oklch(55.4% .046 257.417);--volr-color-slate-600:oklch(44.6% .043 257.281);--volr-color-slate-700:oklch(37.2% .044 257.287);--volr-color-slate-900:oklch(20.8% .042 265.755);--volr-color-gray-100:oklch(96.7% .003 264.542);--volr-color-gray-400:oklch(70.7% .022 261.325);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-gray-900:oklch(21% .034 264.665);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-leading-relaxed:1.625;--volr-radius-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--volr-blur-2xl:40px;--volr-default-transition-duration:.15s;--volr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--volr-default-font-family:var(--volr-font-sans);--volr-default-mono-font-family:var(--volr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--volr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--volr-default-font-feature-settings,normal);font-variation-settings:var(--volr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--volr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--volr-default-mono-font-feature-settings,normal);font-variation-settings:var(--volr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{--volr-primary-color:var(--volr-accent-color,#303030);--volr-font-family:var(--volr-custom-font,inherit)}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family)}button,input,select,textarea{color:inherit;background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:#94a3b8}h1,h2,h3{color:#0f172a;margin:0;font-weight:700}h1{font-size:1.875rem;line-height:2.25rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem;line-height:1.75rem}p{margin:0}}@layer components{.volr-dialog-overlay{inset:calc(var(--volr-spacing)*0);z-index:40;background-color:var(--volr-color-black);position:fixed}@supports (color:color-mix(in lab, red, red)){.volr-dialog-overlay{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr-dialog-content{z-index:50;border-radius:var(--volr-radius-2xl);border-style:var(--volr-tw-border-style);border-width:1px;border-color:var(--volr-color-slate-300);background-color:var(--volr-color-white);padding:calc(var(--volr-spacing)*7);--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow);width:calc(100% - 2rem);max-width:28rem;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}@media (max-width:640px){.volr-dialog-content{top:auto;right:calc(var(--volr-spacing)*0);bottom:calc(var(--volr-spacing)*0);left:calc(var(--volr-spacing)*0);border-radius:1.25rem 1.25rem 0 0;width:100%;max-width:100%;margin:0 auto;transform:translateY(0)}}.volr-dialog-close{top:calc(var(--volr-spacing)*4);right:calc(var(--volr-spacing)*4);height:calc(var(--volr-spacing)*8);width:calc(var(--volr-spacing)*8);color:var(--volr-color-slate-400);cursor:pointer;background-color:#0000;border:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.volr-dialog-close:hover{color:#475569;background-color:#f1f5f9}.volr-dialog-close:focus-visible{outline:none;box-shadow:0 0 0 2px #94a3b8b3}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{width:100%;color:inherit;background-color:#fff;border:1px solid #cbd5e1;border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:#94a3b8}.volr-email-input:focus{border-color:#cbd5e1;box-shadow:0 0 0 2px #94a3b8b3}.volr-option-button{cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.75rem;width:100%;padding:.75rem;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;display:flex}.volr-option-button:hover{background-color:#f8fafc;border-color:#e2e8f0}.volr-option-button:focus-visible{outline:none;box-shadow:0 0 0 2px #94a3b8b3}}@layer utilities{.volr\\:pointer-events-none{pointer-events:none}.volr\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.volr\\:absolute{position:absolute}.volr\\:fixed{position:fixed}.volr\\:relative{position:relative}.volr\\:inset-0{inset:calc(var(--volr-spacing)*0)}.volr\\:-top-3{top:calc(var(--volr-spacing)*-3)}.volr\\:top-1\\/2{top:50%}.volr\\:-right-3{right:calc(var(--volr-spacing)*-3)}.volr\\:right-0{right:calc(var(--volr-spacing)*0)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:left-0{left:calc(var(--volr-spacing)*0)}.volr\\:left-3{left:calc(var(--volr-spacing)*3)}.volr\\:-z-10{z-index:calc(10*-1)}.volr\\:z-10{z-index:10}.volr\\:z-20{z-index:20}.volr\\:z-40{z-index:40}.volr\\:z-50{z-index:50}.volr\\:mx-auto{margin-inline:auto}.volr\\:my-6{margin-block:calc(var(--volr-spacing)*6)}.volr\\:my-8{margin-block:calc(var(--volr-spacing)*8)}.volr\\:mt-0\\.5{margin-top:calc(var(--volr-spacing)*.5)}.volr\\:mt-1{margin-top:calc(var(--volr-spacing)*1)}.volr\\:mt-2{margin-top:calc(var(--volr-spacing)*2)}.volr\\:mt-3{margin-top:calc(var(--volr-spacing)*3)}.volr\\:mt-4{margin-top:calc(var(--volr-spacing)*4)}.volr\\:mt-6{margin-top:calc(var(--volr-spacing)*6)}.volr\\:mt-8{margin-top:calc(var(--volr-spacing)*8)}.volr\\:mb-1{margin-bottom:calc(var(--volr-spacing)*1)}.volr\\:mb-2{margin-bottom:calc(var(--volr-spacing)*2)}.volr\\:mb-3{margin-bottom:calc(var(--volr-spacing)*3)}.volr\\:mb-4{margin-bottom:calc(var(--volr-spacing)*4)}.volr\\:mb-5{margin-bottom:calc(var(--volr-spacing)*5)}.volr\\:mb-6{margin-bottom:calc(var(--volr-spacing)*6)}.volr\\:mb-8{margin-bottom:calc(var(--volr-spacing)*8)}.volr\\:-ml-2{margin-left:calc(var(--volr-spacing)*-2)}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-24{height:calc(var(--volr-spacing)*24)}.volr\\:h-40{height:calc(var(--volr-spacing)*40)}.volr\\:h-44{height:calc(var(--volr-spacing)*44)}.volr\\:h-48{height:calc(var(--volr-spacing)*48)}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-24{max-height:calc(var(--volr-spacing)*24)}.volr\\:max-h-96{max-height:calc(var(--volr-spacing)*96)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-8{width:calc(var(--volr-spacing)*8)}.volr\\:w-10{width:calc(var(--volr-spacing)*10)}.volr\\:w-12{width:calc(var(--volr-spacing)*12)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-40{width:calc(var(--volr-spacing)*40)}.volr\\:w-44{width:calc(var(--volr-spacing)*44)}.volr\\:w-48{width:calc(var(--volr-spacing)*48)}.volr\\:w-full{width:100%}.volr\\:max-w-4xl{max-width:var(--volr-container-4xl)}.volr\\:max-w-full{max-width:100%}.volr\\:max-w-md{max-width:var(--volr-container-md)}.volr\\:max-w-none{max-width:none}.volr\\:min-w-0{min-width:calc(var(--volr-spacing)*0)}.volr\\:flex-1{flex:1}.volr\\:flex-shrink-0{flex-shrink:0}.volr\\:-translate-y-1\\/2{--volr-tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--volr-tw-translate-x)var(--volr-tw-translate-y)}.volr\\:animate-\\[volrFadeIn_0\\.2s_ease-out\\]{animation:.2s ease-out volrFadeIn}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.volr\\:cursor-not-allowed{cursor:not-allowed}.volr\\:cursor-pointer{cursor:pointer}.volr\\:grid-cols-\\[minmax\\(0\\,1\\.1fr\\)_minmax\\(0\\,1fr\\)\\]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.volr\\:flex-col{flex-direction:column}.volr\\:items-baseline{align-items:baseline}.volr\\:items-center{align-items:center}.volr\\:items-end{align-items:flex-end}.volr\\:items-start{align-items:flex-start}.volr\\:justify-between{justify-content:space-between}.volr\\:justify-center{justify-content:center}.volr\\:gap-1{gap:calc(var(--volr-spacing)*1)}.volr\\:gap-2{gap:calc(var(--volr-spacing)*2)}.volr\\:gap-3{gap:calc(var(--volr-spacing)*3)}.volr\\:gap-4{gap:calc(var(--volr-spacing)*4)}:where(.volr\\:space-y-2>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*2)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*2)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-3>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*3)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*3)*calc(1 - var(--volr-tw-space-y-reverse)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-none{--volr-tw-border-style:none;border-style:none}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-rose-200{border-color:var(--volr-color-rose-200)}.volr\\:border-slate-100{border-color:var(--volr-color-slate-100)}.volr\\:border-slate-200,.volr\\:border-slate-200\\/50{border-color:var(--volr-color-slate-200)}@supports (color:color-mix(in lab, red, red)){.volr\\:border-slate-200\\/50{border-color:color-mix(in oklab,var(--volr-color-slate-200)50%,transparent)}}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-blue-500{background-color:var(--volr-color-blue-500)}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-gray-100{background-color:var(--volr-color-gray-100)}.volr\\:bg-gray-400{background-color:var(--volr-color-gray-400)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-rose-50{background-color:var(--volr-color-rose-50)}.volr\\:bg-slate-50,.volr\\:bg-slate-50\\/50{background-color:var(--volr-color-slate-50)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-slate-50\\/50{background-color:color-mix(in oklab,var(--volr-color-slate-50)50%,transparent)}}.volr\\:bg-slate-100{background-color:var(--volr-color-slate-100)}.volr\\:bg-slate-200{background-color:var(--volr-color-slate-200)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-transparent{background-color:#0000}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-gradient-to-br{--volr-tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-blue-500{--volr-tw-gradient-from:var(--volr-color-blue-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-500{--volr-tw-gradient-from:var(--volr-color-emerald-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-purple-600{--volr-tw-gradient-to:var(--volr-color-purple-600);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-1\\.5{padding:calc(var(--volr-spacing)*1.5)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:px-5{padding-inline:calc(var(--volr-spacing)*5)}.volr\\:px-6{padding-inline:calc(var(--volr-spacing)*6)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pb-5{padding-bottom:calc(var(--volr-spacing)*5)}.volr\\:pb-6{padding-bottom:calc(var(--volr-spacing)*6)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:break-all{word-break:break-all}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-gray-900{color:var(--volr-color-gray-900)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-rose-700{color:var(--volr-color-rose-700)}.volr\\:text-rose-800{color:var(--volr-color-rose-800)}.volr\\:text-slate-400{color:var(--volr-color-slate-400)}.volr\\:text-slate-500{color:var(--volr-color-slate-500)}.volr\\:text-slate-600{color:var(--volr-color-slate-600)}.volr\\:text-slate-700{color:var(--volr-color-slate-700)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:capitalize{text-transform:capitalize}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-30{opacity:.3}.volr\\:shadow-2xl{--volr-tw-shadow:0 25px 50px -12px var(--volr-tw-shadow-color,#00000040);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-lg{--volr-tw-shadow:0 10px 15px -3px var(--volr-tw-shadow-color,#0000001a),0 4px 6px -4px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-sm{--volr-tw-shadow:0 1px 3px 0 var(--volr-tw-shadow-color,#0000001a),0 1px 2px -1px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-xl{--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:var(--volr-color-emerald-500)}@supports (color:color-mix(in lab, red, red)){.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--volr-color-emerald-500)50%,transparent)var(--volr-tw-shadow-alpha),transparent)}}.volr\\:blur-2xl{--volr-tw-blur:blur(var(--volr-blur-2xl));filter:var(--volr-tw-blur,)var(--volr-tw-brightness,)var(--volr-tw-contrast,)var(--volr-tw-grayscale,)var(--volr-tw-hue-rotate,)var(--volr-tw-invert,)var(--volr-tw-saturate,)var(--volr-tw-sepia,)var(--volr-tw-drop-shadow,)}.volr\\:transition-all{transition-property:all;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--volr-tw-gradient-from,--volr-tw-gradient-via,--volr-tw-gradient-to;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:duration-200{--volr-tw-duration:.2s;transition-duration:.2s}.volr\\:duration-300{--volr-tw-duration:.3s;transition-duration:.3s}.volr\\:duration-500{--volr-tw-duration:.5s;transition-duration:.5s}.volr\\:ease-out{--volr-tw-ease:var(--volr-ease-out);transition-timing-function:var(--volr-ease-out)}.volr\\:outline-none{--volr-tw-outline-style:none;outline-style:none}@media (hover:hover){.volr\\:hover\\:border-slate-200:hover{border-color:var(--volr-color-slate-200)}.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:bg-slate-50:disabled{background-color:var(--volr-color-slate-50)}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}';
|
|
344
|
+
var VOLR_SDK_CSS = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-teal-400:oklch(77.7% .152 181.912);--volr-color-teal-500:oklch(70.4% .14 182.503);--volr-color-cyan-400:oklch(78.9% .154 211.53);--volr-color-rose-50:oklch(96.9% .015 12.422);--volr-color-rose-200:oklch(89.2% .058 10.001);--volr-color-rose-700:oklch(51.4% .222 16.935);--volr-color-rose-800:oklch(45.5% .188 13.697);--volr-color-slate-50:oklch(98.4% .003 247.858);--volr-color-slate-100:oklch(96.8% .007 247.896);--volr-color-slate-200:oklch(92.9% .013 255.508);--volr-color-slate-300:oklch(86.9% .022 252.894);--volr-color-slate-400:oklch(70.4% .04 256.788);--volr-color-slate-500:oklch(55.4% .046 257.417);--volr-color-slate-600:oklch(44.6% .043 257.281);--volr-color-slate-700:oklch(37.2% .044 257.287);--volr-color-slate-900:oklch(20.8% .042 265.755);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-leading-relaxed:1.625;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--volr-blur-2xl:40px;--volr-default-transition-duration:.15s;--volr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--volr-default-font-family:var(--volr-font-sans);--volr-default-mono-font-family:var(--volr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--volr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--volr-default-font-feature-settings,normal);font-variation-settings:var(--volr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--volr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--volr-default-mono-font-feature-settings,normal);font-variation-settings:var(--volr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{--volr-primary-color:var(--volr-accent-color,#303030);--volr-font-family:var(--volr-custom-font,inherit)}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family)}button,input,select,textarea{color:inherit;background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:#94a3b8}h1,h2,h3{color:#0f172a;margin:0;font-weight:700}h1{font-size:1.875rem;line-height:2.25rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem;line-height:1.75rem}p{margin:0}}@layer components{.volr-dialog-overlay{inset:calc(var(--volr-spacing)*0);z-index:40;background-color:var(--volr-color-black);position:fixed}@supports (color:color-mix(in lab, red, red)){.volr-dialog-overlay{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr-dialog-content{z-index:50;border-radius:var(--volr-radius-2xl);border-style:var(--volr-tw-border-style);border-width:1px;border-color:var(--volr-color-slate-300);background-color:var(--volr-color-white);padding:calc(var(--volr-spacing)*7);--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow);width:calc(100% - 2rem);max-width:28rem;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}@media (max-width:640px){.volr-dialog-content{top:auto;right:calc(var(--volr-spacing)*0);bottom:calc(var(--volr-spacing)*0);left:calc(var(--volr-spacing)*0);border-radius:1.25rem 1.25rem 0 0;width:100%;max-width:100%;margin:0 auto;transform:translateY(0)}}.volr-dialog-close{top:calc(var(--volr-spacing)*4);right:calc(var(--volr-spacing)*4);height:calc(var(--volr-spacing)*8);width:calc(var(--volr-spacing)*8);color:var(--volr-color-slate-400);cursor:pointer;background-color:#0000;border:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.volr-dialog-close:hover{color:#475569;background-color:#f1f5f9}.volr-dialog-close:focus-visible{outline:none;box-shadow:0 0 0 2px #94a3b8b3}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{width:100%;color:inherit;background-color:#fff;border:1px solid #cbd5e1;border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:#94a3b8}.volr-email-input:focus{border-color:#cbd5e1;box-shadow:0 0 0 2px #94a3b8b3}.volr-option-button{cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.75rem;width:100%;padding:.75rem;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;display:flex}.volr-option-button:hover{background-color:#f8fafc;border-color:#e2e8f0}.volr-option-button:focus-visible{outline:none;box-shadow:0 0 0 2px #94a3b8b3}}@layer utilities{.volr\\:pointer-events-none{pointer-events:none}.volr\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.volr\\:absolute{position:absolute}.volr\\:fixed{position:fixed}.volr\\:relative{position:relative}.volr\\:inset-0{inset:calc(var(--volr-spacing)*0)}.volr\\:-top-3{top:calc(var(--volr-spacing)*-3)}.volr\\:top-1\\/2{top:50%}.volr\\:-right-3{right:calc(var(--volr-spacing)*-3)}.volr\\:right-0{right:calc(var(--volr-spacing)*0)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:left-0{left:calc(var(--volr-spacing)*0)}.volr\\:left-3{left:calc(var(--volr-spacing)*3)}.volr\\:-z-10{z-index:calc(10*-1)}.volr\\:z-10{z-index:10}.volr\\:z-20{z-index:20}.volr\\:z-40{z-index:40}.volr\\:z-50{z-index:50}.volr\\:mx-auto{margin-inline:auto}.volr\\:my-6{margin-block:calc(var(--volr-spacing)*6)}.volr\\:my-8{margin-block:calc(var(--volr-spacing)*8)}.volr\\:mt-0\\.5{margin-top:calc(var(--volr-spacing)*.5)}.volr\\:mt-1{margin-top:calc(var(--volr-spacing)*1)}.volr\\:mt-2{margin-top:calc(var(--volr-spacing)*2)}.volr\\:mt-3{margin-top:calc(var(--volr-spacing)*3)}.volr\\:mt-4{margin-top:calc(var(--volr-spacing)*4)}.volr\\:mt-6{margin-top:calc(var(--volr-spacing)*6)}.volr\\:mt-8{margin-top:calc(var(--volr-spacing)*8)}.volr\\:mb-1{margin-bottom:calc(var(--volr-spacing)*1)}.volr\\:mb-2{margin-bottom:calc(var(--volr-spacing)*2)}.volr\\:mb-3{margin-bottom:calc(var(--volr-spacing)*3)}.volr\\:mb-4{margin-bottom:calc(var(--volr-spacing)*4)}.volr\\:mb-5{margin-bottom:calc(var(--volr-spacing)*5)}.volr\\:mb-6{margin-bottom:calc(var(--volr-spacing)*6)}.volr\\:mb-8{margin-bottom:calc(var(--volr-spacing)*8)}.volr\\:-ml-2{margin-left:calc(var(--volr-spacing)*-2)}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-24{height:calc(var(--volr-spacing)*24)}.volr\\:h-40{height:calc(var(--volr-spacing)*40)}.volr\\:h-44{height:calc(var(--volr-spacing)*44)}.volr\\:h-48{height:calc(var(--volr-spacing)*48)}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-24{max-height:calc(var(--volr-spacing)*24)}.volr\\:max-h-96{max-height:calc(var(--volr-spacing)*96)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-8{width:calc(var(--volr-spacing)*8)}.volr\\:w-10{width:calc(var(--volr-spacing)*10)}.volr\\:w-12{width:calc(var(--volr-spacing)*12)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-40{width:calc(var(--volr-spacing)*40)}.volr\\:w-44{width:calc(var(--volr-spacing)*44)}.volr\\:w-48{width:calc(var(--volr-spacing)*48)}.volr\\:w-full{width:100%}.volr\\:max-w-4xl{max-width:var(--volr-container-4xl)}.volr\\:max-w-full{max-width:100%}.volr\\:max-w-md{max-width:var(--volr-container-md)}.volr\\:max-w-none{max-width:none}.volr\\:min-w-0{min-width:calc(var(--volr-spacing)*0)}.volr\\:flex-1{flex:1}.volr\\:flex-shrink-0{flex-shrink:0}.volr\\:-translate-y-1\\/2{--volr-tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--volr-tw-translate-x)var(--volr-tw-translate-y)}.volr\\:animate-\\[volrFadeIn_0\\.2s_ease-out\\]{animation:.2s ease-out volrFadeIn}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.volr\\:grid-cols-\\[minmax\\(0\\,1\\.1fr\\)_minmax\\(0\\,1fr\\)\\]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.volr\\:flex-col{flex-direction:column}.volr\\:items-baseline{align-items:baseline}.volr\\:items-center{align-items:center}.volr\\:items-end{align-items:flex-end}.volr\\:items-start{align-items:flex-start}.volr\\:justify-between{justify-content:space-between}.volr\\:justify-center{justify-content:center}.volr\\:gap-1{gap:calc(var(--volr-spacing)*1)}.volr\\:gap-2{gap:calc(var(--volr-spacing)*2)}.volr\\:gap-3{gap:calc(var(--volr-spacing)*3)}.volr\\:gap-4{gap:calc(var(--volr-spacing)*4)}:where(.volr\\:space-y-2>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*2)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*2)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-3>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*3)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*3)*calc(1 - var(--volr-tw-space-y-reverse)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-rose-200{border-color:var(--volr-color-rose-200)}.volr\\:border-slate-100{border-color:var(--volr-color-slate-100)}.volr\\:border-slate-200,.volr\\:border-slate-200\\/50{border-color:var(--volr-color-slate-200)}@supports (color:color-mix(in lab, red, red)){.volr\\:border-slate-200\\/50{border-color:color-mix(in oklab,var(--volr-color-slate-200)50%,transparent)}}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-rose-50{background-color:var(--volr-color-rose-50)}.volr\\:bg-slate-50,.volr\\:bg-slate-50\\/50{background-color:var(--volr-color-slate-50)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-slate-50\\/50{background-color:color-mix(in oklab,var(--volr-color-slate-50)50%,transparent)}}.volr\\:bg-slate-100{background-color:var(--volr-color-slate-100)}.volr\\:bg-slate-200{background-color:var(--volr-color-slate-200)}.volr\\:bg-slate-500{background-color:var(--volr-color-slate-500)}.volr\\:bg-slate-700{background-color:var(--volr-color-slate-700)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-gradient-to-br{--volr-tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-500{--volr-tw-gradient-from:var(--volr-color-emerald-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:fill-slate-500{fill:var(--volr-color-slate-500)}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:break-all{word-break:break-all}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-rose-700{color:var(--volr-color-rose-700)}.volr\\:text-rose-800{color:var(--volr-color-rose-800)}.volr\\:text-slate-400{color:var(--volr-color-slate-400)}.volr\\:text-slate-500{color:var(--volr-color-slate-500)}.volr\\:text-slate-600{color:var(--volr-color-slate-600)}.volr\\:text-slate-700{color:var(--volr-color-slate-700)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:capitalize{text-transform:capitalize}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-30{opacity:.3}.volr\\:shadow-2xl{--volr-tw-shadow:0 25px 50px -12px var(--volr-tw-shadow-color,#00000040);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-lg{--volr-tw-shadow:0 10px 15px -3px var(--volr-tw-shadow-color,#0000001a),0 4px 6px -4px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-sm{--volr-tw-shadow:0 1px 3px 0 var(--volr-tw-shadow-color,#0000001a),0 1px 2px -1px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-xl{--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:var(--volr-color-emerald-500)}@supports (color:color-mix(in lab, red, red)){.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--volr-color-emerald-500)50%,transparent)var(--volr-tw-shadow-alpha),transparent)}}.volr\\:blur-2xl{--volr-tw-blur:blur(var(--volr-blur-2xl));filter:var(--volr-tw-blur,)var(--volr-tw-brightness,)var(--volr-tw-contrast,)var(--volr-tw-grayscale,)var(--volr-tw-hue-rotate,)var(--volr-tw-invert,)var(--volr-tw-saturate,)var(--volr-tw-sepia,)var(--volr-tw-drop-shadow,)}.volr\\:transition-all{transition-property:all;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--volr-tw-gradient-from,--volr-tw-gradient-via,--volr-tw-gradient-to;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:duration-300{--volr-tw-duration:.3s;transition-duration:.3s}.volr\\:duration-500{--volr-tw-duration:.5s;transition-duration:.5s}.volr\\:ease-out{--volr-tw-ease:var(--volr-ease-out);transition-timing-function:var(--volr-ease-out)}.volr\\:outline-none{--volr-tw-outline-style:none;outline-style:none}@media (hover:hover){.volr\\:hover\\:border-slate-200:hover{border-color:var(--volr-color-slate-200)}.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:bg-slate-50:disabled{background-color:var(--volr-color-slate-50)}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}';
|
|
345
345
|
function ShadowPortal({ children }) {
|
|
346
|
-
const [shadowHost, setShadowHost] =
|
|
347
|
-
const [mountNode, setMountNode] =
|
|
348
|
-
|
|
346
|
+
const [shadowHost, setShadowHost] = React9.useState(null);
|
|
347
|
+
const [mountNode, setMountNode] = React9.useState(null);
|
|
348
|
+
React9.useEffect(() => {
|
|
349
349
|
const host = document.createElement("div");
|
|
350
350
|
host.id = "volr-shadow-portal";
|
|
351
351
|
host.style.position = "fixed";
|
|
@@ -372,7 +372,7 @@ function ShadowPortal({ children }) {
|
|
|
372
372
|
return reactDom.createPortal(children, mountNode);
|
|
373
373
|
}
|
|
374
374
|
function useFocusTrap(isActive, containerRef) {
|
|
375
|
-
const previousActiveElement =
|
|
375
|
+
const previousActiveElement = React9.useRef(null);
|
|
376
376
|
const focusableSelector = [
|
|
377
377
|
"button:not([disabled])",
|
|
378
378
|
"input:not([disabled])",
|
|
@@ -381,7 +381,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
381
381
|
"a[href]",
|
|
382
382
|
'[tabindex]:not([tabindex="-1"])'
|
|
383
383
|
].join(", ");
|
|
384
|
-
const getFocusableElements =
|
|
384
|
+
const getFocusableElements = React9.useCallback(() => {
|
|
385
385
|
if (!containerRef.current) return [];
|
|
386
386
|
return Array.from(
|
|
387
387
|
containerRef.current.querySelectorAll(focusableSelector)
|
|
@@ -389,7 +389,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
389
389
|
return el.offsetParent !== null;
|
|
390
390
|
});
|
|
391
391
|
}, [containerRef, focusableSelector]);
|
|
392
|
-
const handleKeyDown =
|
|
392
|
+
const handleKeyDown = React9.useCallback(
|
|
393
393
|
(event) => {
|
|
394
394
|
if (event.key !== "Tab") return;
|
|
395
395
|
const focusableElements = getFocusableElements();
|
|
@@ -410,7 +410,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
410
410
|
},
|
|
411
411
|
[getFocusableElements]
|
|
412
412
|
);
|
|
413
|
-
|
|
413
|
+
React9.useEffect(() => {
|
|
414
414
|
if (!isActive) return;
|
|
415
415
|
previousActiveElement.current = document.activeElement;
|
|
416
416
|
const focusableElements = getFocusableElements();
|
|
@@ -441,10 +441,10 @@ var Modal = ({
|
|
|
441
441
|
}) => {
|
|
442
442
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
443
443
|
const variant = explicitVariant ?? (isMobile ? "bottom-sheet" : "centered");
|
|
444
|
-
const dialogRef =
|
|
445
|
-
const dialogId =
|
|
444
|
+
const dialogRef = React9.useRef(null);
|
|
445
|
+
const dialogId = React9.useId();
|
|
446
446
|
useFocusTrap(open, dialogRef);
|
|
447
|
-
|
|
447
|
+
React9.useEffect(() => {
|
|
448
448
|
const handleEscape = (e) => {
|
|
449
449
|
if (e.key === "Escape" && open) {
|
|
450
450
|
if (onEscapeKeyDown) {
|
|
@@ -842,11 +842,59 @@ function BiometricIcon({ type, size = 80, animate = false }) {
|
|
|
842
842
|
type === "fingerprint" && /* @__PURE__ */ jsxRuntime.jsx(FingerprintIcon, { size })
|
|
843
843
|
] });
|
|
844
844
|
}
|
|
845
|
+
var sizeMap = {
|
|
846
|
+
sm: { px: "0.75rem", py: "0.5rem", fontSize: "0.875rem" },
|
|
847
|
+
md: { px: "1rem", py: "0.75rem", fontSize: "1rem" },
|
|
848
|
+
lg: { px: "1.5rem", py: "1rem", fontSize: "1.125rem" }
|
|
849
|
+
};
|
|
850
|
+
var variantMap = {
|
|
851
|
+
primary: { color: "#fff", border: "none" },
|
|
852
|
+
secondary: { backgroundColor: "#f1f5f9", color: "#0f172a", border: "none" },
|
|
853
|
+
ghost: { backgroundColor: "transparent", color: "#475569", border: "none" },
|
|
854
|
+
outline: { backgroundColor: "transparent", color: "#475569", border: "1px solid #e2e8f0" }
|
|
855
|
+
};
|
|
856
|
+
var Button = React.forwardRef(
|
|
857
|
+
({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
|
|
858
|
+
const { accentColor } = useVolrUI();
|
|
859
|
+
const sizeStyle = sizeMap[size];
|
|
860
|
+
const variantStyle = variantMap[variant];
|
|
861
|
+
const isPrimary = variant === "primary";
|
|
862
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
863
|
+
"button",
|
|
864
|
+
{
|
|
865
|
+
ref,
|
|
866
|
+
disabled,
|
|
867
|
+
className: cn(
|
|
868
|
+
"volr:inline-flex volr:items-center volr:justify-center volr:gap-2",
|
|
869
|
+
"volr:font-semibold volr:transition-all",
|
|
870
|
+
fullWidth && "volr:w-full",
|
|
871
|
+
className
|
|
872
|
+
),
|
|
873
|
+
style: {
|
|
874
|
+
paddingLeft: sizeStyle.px,
|
|
875
|
+
paddingRight: sizeStyle.px,
|
|
876
|
+
paddingTop: sizeStyle.py,
|
|
877
|
+
paddingBottom: sizeStyle.py,
|
|
878
|
+
fontSize: sizeStyle.fontSize,
|
|
879
|
+
borderRadius: "0.75rem",
|
|
880
|
+
border: variantStyle.border,
|
|
881
|
+
backgroundColor: isPrimary ? accentColor : variantStyle.backgroundColor,
|
|
882
|
+
color: variantStyle.color,
|
|
883
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
884
|
+
opacity: disabled ? 0.5 : 1,
|
|
885
|
+
...style
|
|
886
|
+
},
|
|
887
|
+
...props,
|
|
888
|
+
children
|
|
889
|
+
}
|
|
890
|
+
);
|
|
891
|
+
}
|
|
892
|
+
);
|
|
893
|
+
Button.displayName = "Button";
|
|
845
894
|
function PasskeyEnrollForm({
|
|
846
895
|
biometricType,
|
|
847
896
|
biometricMessage,
|
|
848
897
|
errorMessage,
|
|
849
|
-
accentColor,
|
|
850
898
|
onEnroll,
|
|
851
899
|
onLogout,
|
|
852
900
|
buttonText,
|
|
@@ -860,23 +908,8 @@ function PasskeyEnrollForm({
|
|
|
860
908
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage })
|
|
861
909
|
] }),
|
|
862
910
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:flex-col volr:gap-3", children: [
|
|
863
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
864
|
-
|
|
865
|
-
{
|
|
866
|
-
onClick: onEnroll,
|
|
867
|
-
className: "volr:w-full volr:py-3 volr:px-6 volr:rounded-lg volr:text-white volr:text-base volr:font-medium volr:transition-colors",
|
|
868
|
-
style: { backgroundColor: accentColor },
|
|
869
|
-
children: buttonText
|
|
870
|
-
}
|
|
871
|
-
),
|
|
872
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
873
|
-
"button",
|
|
874
|
-
{
|
|
875
|
-
onClick: onLogout,
|
|
876
|
-
className: "volr:w-full volr:py-3 volr:text-sm volr:font-medium volr:text-slate-600 volr:rounded-lg volr:transition-colors hover:volr:bg-slate-50",
|
|
877
|
-
children: logoutText
|
|
878
|
-
}
|
|
879
|
-
)
|
|
911
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", fullWidth: true, onClick: onEnroll, children: buttonText }),
|
|
912
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", fullWidth: true, onClick: onLogout, children: logoutText })
|
|
880
913
|
] })
|
|
881
914
|
] });
|
|
882
915
|
}
|
|
@@ -905,23 +938,8 @@ function PasskeyEnrollLoading({
|
|
|
905
938
|
}
|
|
906
939
|
) }) }),
|
|
907
940
|
!isEnrolling && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:flex-col volr:gap-3 volr:mt-6", children: [
|
|
908
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
909
|
-
|
|
910
|
-
{
|
|
911
|
-
onClick: onRetry,
|
|
912
|
-
className: "volr:w-full volr:py-3 volr:px-6 volr:rounded-lg volr:text-white volr:text-base volr:font-medium volr:transition-colors",
|
|
913
|
-
style: { backgroundColor: accentColor },
|
|
914
|
-
children: buttonText
|
|
915
|
-
}
|
|
916
|
-
),
|
|
917
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
918
|
-
"button",
|
|
919
|
-
{
|
|
920
|
-
onClick: onLogout,
|
|
921
|
-
className: "volr:w-full volr:py-3 volr:text-sm volr:font-medium volr:text-slate-600 volr:rounded-lg volr:transition-colors hover:volr:bg-slate-50",
|
|
922
|
-
children: logoutText
|
|
923
|
-
}
|
|
924
|
-
)
|
|
941
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", fullWidth: true, onClick: onRetry, children: buttonText }),
|
|
942
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", fullWidth: true, onClick: onLogout, children: logoutText })
|
|
925
943
|
] })
|
|
926
944
|
] });
|
|
927
945
|
}
|
|
@@ -943,12 +961,12 @@ function PasskeyEnrollView({
|
|
|
943
961
|
isEnrolling,
|
|
944
962
|
error: enrollmentError
|
|
945
963
|
} = react.usePasskeyEnrollment();
|
|
946
|
-
const [hasStarted, setHasStarted] =
|
|
947
|
-
const [errorMessage, setErrorMessage] =
|
|
948
|
-
const [isRefreshing, setIsRefreshing] =
|
|
964
|
+
const [hasStarted, setHasStarted] = React9.useState(false);
|
|
965
|
+
const [errorMessage, setErrorMessage] = React9.useState(null);
|
|
966
|
+
const [isRefreshing, setIsRefreshing] = React9.useState(false);
|
|
949
967
|
const biometricType = getBiometricType();
|
|
950
968
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
951
|
-
|
|
969
|
+
React9.useEffect(() => {
|
|
952
970
|
console.log("[PasskeyEnrollView] User state:", {
|
|
953
971
|
user,
|
|
954
972
|
keyStorageType: user?.keyStorageType,
|
|
@@ -956,7 +974,7 @@ function PasskeyEnrollView({
|
|
|
956
974
|
hasPasskey
|
|
957
975
|
});
|
|
958
976
|
}, [user, hasPasskey]);
|
|
959
|
-
|
|
977
|
+
React9.useEffect(() => {
|
|
960
978
|
if (hasPasskey && !user?.evmAddress && !isRefreshing) {
|
|
961
979
|
const refreshUserData = async () => {
|
|
962
980
|
try {
|
|
@@ -987,7 +1005,7 @@ function PasskeyEnrollView({
|
|
|
987
1005
|
refreshUserData();
|
|
988
1006
|
}
|
|
989
1007
|
}, [hasPasskey, user?.evmAddress, isRefreshing, client, setUser, user]);
|
|
990
|
-
|
|
1008
|
+
React9.useEffect(() => {
|
|
991
1009
|
if (!user?.id) {
|
|
992
1010
|
const error = new Error("User ID is required for passkey enrollment");
|
|
993
1011
|
setErrorMessage(getUserFriendlyError(error, t));
|
|
@@ -1003,7 +1021,7 @@ function PasskeyEnrollView({
|
|
|
1003
1021
|
}
|
|
1004
1022
|
}
|
|
1005
1023
|
}, [user, onError, t]);
|
|
1006
|
-
|
|
1024
|
+
React9.useEffect(() => {
|
|
1007
1025
|
if (enrollmentError) {
|
|
1008
1026
|
const friendlyMessage = getUserFriendlyError(enrollmentError, t);
|
|
1009
1027
|
setErrorMessage(friendlyMessage);
|
|
@@ -1117,7 +1135,6 @@ function PasskeyEnrollView({
|
|
|
1117
1135
|
biometricType,
|
|
1118
1136
|
biometricMessage: getBiometricMessage(),
|
|
1119
1137
|
errorMessage,
|
|
1120
|
-
accentColor,
|
|
1121
1138
|
onEnroll: () => {
|
|
1122
1139
|
setHasStarted(true);
|
|
1123
1140
|
handleEnroll();
|
|
@@ -1158,8 +1175,8 @@ function MpcConnectView({
|
|
|
1158
1175
|
isConnecting,
|
|
1159
1176
|
error: connectionError
|
|
1160
1177
|
} = react.useMpcConnection();
|
|
1161
|
-
const [errorMessage, setErrorMessage] =
|
|
1162
|
-
|
|
1178
|
+
const [errorMessage, setErrorMessage] = React9.useState(null);
|
|
1179
|
+
React9.useEffect(() => {
|
|
1163
1180
|
if (connectionError) {
|
|
1164
1181
|
setErrorMessage(connectionError.message);
|
|
1165
1182
|
if (onError) {
|
|
@@ -1167,7 +1184,7 @@ function MpcConnectView({
|
|
|
1167
1184
|
}
|
|
1168
1185
|
}
|
|
1169
1186
|
}, [connectionError, onError]);
|
|
1170
|
-
|
|
1187
|
+
React9.useEffect(() => {
|
|
1171
1188
|
handleConnect();
|
|
1172
1189
|
}, []);
|
|
1173
1190
|
const handleConnect = async () => {
|
|
@@ -1228,7 +1245,7 @@ function MpcConnectView({
|
|
|
1228
1245
|
);
|
|
1229
1246
|
}
|
|
1230
1247
|
var CopyButton = ({ text, className, onCopy }) => {
|
|
1231
|
-
const [copied, setCopied] =
|
|
1248
|
+
const [copied, setCopied] = React9.useState(false);
|
|
1232
1249
|
const handleCopy = async () => {
|
|
1233
1250
|
try {
|
|
1234
1251
|
await navigator.clipboard.writeText(text);
|
|
@@ -1417,62 +1434,13 @@ function PoweredBy() {
|
|
|
1417
1434
|
"path",
|
|
1418
1435
|
{
|
|
1419
1436
|
d: "M138.4 284L-0.00019535 0H87.1998L184.4 208L281.2 0H363.6L225.2 284H138.4ZM471.931 288.8C453.531 288.8 435.931 286.533 419.131 282C402.331 277.2 387.264 270.267 373.931 261.2C360.864 252.133 350.464 240.933 342.731 227.6C335.264 214.267 331.531 198.8 331.531 181.2C331.531 157.733 337.664 138 349.931 122C362.464 106 379.398 94 400.731 86C422.064 77.7333 445.798 73.6 471.931 73.6C498.064 73.6 521.664 77.7333 542.731 86C564.064 94 580.864 106 593.131 122C605.664 138 611.931 157.733 611.931 181.2C611.931 198.8 608.064 214.267 600.331 227.6C592.864 240.933 582.464 252.133 569.131 261.2C556.064 270.267 541.131 277.2 524.331 282C507.531 286.533 490.064 288.8 471.931 288.8ZM471.931 236C490.598 236 505.531 231.2 516.731 221.6C528.198 211.733 533.931 198.933 533.931 183.2V179.2C533.931 163.2 528.198 150.4 516.731 140.8C505.531 131.2 490.598 126.4 471.931 126.4C453.264 126.4 438.198 131.2 426.731 140.8C415.264 150.4 409.531 163.2 409.531 179.2V183.2C409.531 198.933 415.264 211.733 426.731 221.6C438.198 231.2 453.264 236 471.931 236ZM643.865 284V0H721.465V284H643.865ZM763.006 284V78.4H839.406V106.8C848.739 95.3333 860.473 86.9333 874.606 81.6C888.739 76.2667 903.406 73.6 918.606 73.6C921.539 73.6 925.006 73.7333 929.006 74C933.006 74.2667 937.406 74.8 942.206 75.6V135.2C935.006 134.4 926.873 133.733 917.806 133.2C909.006 132.667 900.073 132.8 891.006 133.6C881.939 134.4 873.539 136.4 865.806 139.6C858.339 142.533 852.206 147.333 847.406 154C842.873 160.667 840.606 169.733 840.606 181.2V284H763.006Z",
|
|
1420
|
-
|
|
1437
|
+
className: "volr:fill-slate-500"
|
|
1421
1438
|
}
|
|
1422
1439
|
)
|
|
1423
1440
|
}
|
|
1424
1441
|
)
|
|
1425
1442
|
] });
|
|
1426
1443
|
}
|
|
1427
|
-
var sizeMap = {
|
|
1428
|
-
sm: { px: "0.75rem", py: "0.5rem", fontSize: "0.875rem" },
|
|
1429
|
-
md: { px: "1rem", py: "0.75rem", fontSize: "1rem" },
|
|
1430
|
-
lg: { px: "1.5rem", py: "1rem", fontSize: "1.125rem" }
|
|
1431
|
-
};
|
|
1432
|
-
var variantMap = {
|
|
1433
|
-
primary: { color: "#fff", border: "none" },
|
|
1434
|
-
secondary: { backgroundColor: "#f1f5f9", color: "#0f172a", border: "none" },
|
|
1435
|
-
ghost: { backgroundColor: "transparent", color: "#475569", border: "none" },
|
|
1436
|
-
outline: { backgroundColor: "transparent", color: "#475569", border: "1px solid #e2e8f0" }
|
|
1437
|
-
};
|
|
1438
|
-
var Button = React6__default.default.forwardRef(
|
|
1439
|
-
({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
|
|
1440
|
-
const { accentColor } = useVolrUI();
|
|
1441
|
-
const sizeStyle = sizeMap[size];
|
|
1442
|
-
const variantStyle = variantMap[variant];
|
|
1443
|
-
const isPrimary = variant === "primary";
|
|
1444
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1445
|
-
"button",
|
|
1446
|
-
{
|
|
1447
|
-
ref,
|
|
1448
|
-
disabled,
|
|
1449
|
-
className: cn(
|
|
1450
|
-
"volr:inline-flex volr:items-center volr:justify-center volr:gap-2",
|
|
1451
|
-
"volr:font-semibold volr:transition-all",
|
|
1452
|
-
fullWidth && "volr:w-full",
|
|
1453
|
-
className
|
|
1454
|
-
),
|
|
1455
|
-
style: {
|
|
1456
|
-
paddingLeft: sizeStyle.px,
|
|
1457
|
-
paddingRight: sizeStyle.px,
|
|
1458
|
-
paddingTop: sizeStyle.py,
|
|
1459
|
-
paddingBottom: sizeStyle.py,
|
|
1460
|
-
fontSize: sizeStyle.fontSize,
|
|
1461
|
-
borderRadius: "0.75rem",
|
|
1462
|
-
border: variantStyle.border,
|
|
1463
|
-
backgroundColor: isPrimary ? accentColor : variantStyle.backgroundColor,
|
|
1464
|
-
color: variantStyle.color,
|
|
1465
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
1466
|
-
opacity: disabled ? 0.5 : 1,
|
|
1467
|
-
...style
|
|
1468
|
-
},
|
|
1469
|
-
...props,
|
|
1470
|
-
children
|
|
1471
|
-
}
|
|
1472
|
-
);
|
|
1473
|
-
}
|
|
1474
|
-
);
|
|
1475
|
-
Button.displayName = "Button";
|
|
1476
1444
|
var EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1477
1445
|
"svg",
|
|
1478
1446
|
{
|
|
@@ -1509,9 +1477,9 @@ var EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
|
1509
1477
|
);
|
|
1510
1478
|
function EmailInlineInput({ onSubmit, accentColor }) {
|
|
1511
1479
|
const { t } = useI18n();
|
|
1512
|
-
const [email, setEmail] =
|
|
1513
|
-
const [error, setError] =
|
|
1514
|
-
const [isLoading, setIsLoading] =
|
|
1480
|
+
const [email, setEmail] = React9.useState("");
|
|
1481
|
+
const [error, setError] = React9.useState(null);
|
|
1482
|
+
const [isLoading, setIsLoading] = React9.useState(false);
|
|
1515
1483
|
const handleSubmit = async (e) => {
|
|
1516
1484
|
e.preventDefault();
|
|
1517
1485
|
setError(null);
|
|
@@ -1634,14 +1602,14 @@ function SigninSelectScreen({
|
|
|
1634
1602
|
function CodeInputScreen({ email, onSubmit, onResend }) {
|
|
1635
1603
|
const { t } = useI18n();
|
|
1636
1604
|
const { accentColor } = useVolrUI();
|
|
1637
|
-
const [digits, setDigits] =
|
|
1638
|
-
const [error, setError] =
|
|
1639
|
-
const [isLoading, setIsLoading] =
|
|
1640
|
-
const inputRefs =
|
|
1641
|
-
|
|
1605
|
+
const [digits, setDigits] = React9.useState(Array(6).fill(""));
|
|
1606
|
+
const [error, setError] = React9.useState(null);
|
|
1607
|
+
const [isLoading, setIsLoading] = React9.useState(false);
|
|
1608
|
+
const inputRefs = React9.useRef([]);
|
|
1609
|
+
React9.useEffect(() => {
|
|
1642
1610
|
inputRefs.current[0]?.focus();
|
|
1643
1611
|
}, []);
|
|
1644
|
-
|
|
1612
|
+
React9.useEffect(() => {
|
|
1645
1613
|
const code = digits.join("");
|
|
1646
1614
|
if (code.length === 6 && !isLoading) {
|
|
1647
1615
|
handleSubmit(code);
|
|
@@ -2064,11 +2032,11 @@ function SiweLoginScreen({
|
|
|
2064
2032
|
const { t } = useI18n();
|
|
2065
2033
|
const { accentColor } = useVolrUI();
|
|
2066
2034
|
const { requestSiweNonce, verifySiweSignature } = react.useVolrLogin();
|
|
2067
|
-
const [isLoading, setIsLoading] =
|
|
2068
|
-
const [step, setStep] =
|
|
2069
|
-
const [account, setAccount] =
|
|
2070
|
-
const [error, setError] =
|
|
2071
|
-
const [walletConnector, setWalletConnector] =
|
|
2035
|
+
const [isLoading, setIsLoading] = React9.useState(false);
|
|
2036
|
+
const [step, setStep] = React9.useState("connect");
|
|
2037
|
+
const [account, setAccount] = React9.useState(null);
|
|
2038
|
+
const [error, setError] = React9.useState(null);
|
|
2039
|
+
const [walletConnector, setWalletConnector] = React9.useState(
|
|
2072
2040
|
void 0
|
|
2073
2041
|
);
|
|
2074
2042
|
const detectWalletConnector = () => {
|
|
@@ -2087,7 +2055,7 @@ function SiweLoginScreen({
|
|
|
2087
2055
|
if (provider.isBraveWallet) return "com.brave.wallet";
|
|
2088
2056
|
return "unknown";
|
|
2089
2057
|
};
|
|
2090
|
-
|
|
2058
|
+
React9.useEffect(() => {
|
|
2091
2059
|
if (typeof window !== "undefined" && window.ethereum) {
|
|
2092
2060
|
window.ethereum.request({ method: "eth_accounts" }).then((accounts) => {
|
|
2093
2061
|
if (accounts.length > 0) {
|
|
@@ -2174,10 +2142,12 @@ Issued At: ${issuedAt}`;
|
|
|
2174
2142
|
};
|
|
2175
2143
|
const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:max-w-md volr:mx-auto", children: [
|
|
2176
2144
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2177
|
-
|
|
2145
|
+
Button,
|
|
2178
2146
|
{
|
|
2147
|
+
variant: "ghost",
|
|
2148
|
+
size: "sm",
|
|
2179
2149
|
onClick: onBack,
|
|
2180
|
-
className: "volr:
|
|
2150
|
+
className: "volr:mb-4 volr:-ml-2",
|
|
2181
2151
|
children: [
|
|
2182
2152
|
"\u2190 ",
|
|
2183
2153
|
t("common.back")
|
|
@@ -2185,44 +2155,34 @@ Issued At: ${issuedAt}`;
|
|
|
2185
2155
|
}
|
|
2186
2156
|
),
|
|
2187
2157
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900 volr:mb-5", children: t("login.wallet.title") }),
|
|
2188
|
-
account && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:p-3 volr:bg-
|
|
2158
|
+
account && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:p-3 volr:bg-slate-100 volr:rounded-lg volr:mb-6 volr:flex volr:items-center volr:justify-between", children: [
|
|
2189
2159
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2190
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-
|
|
2191
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-sm volr:font-medium volr:text-
|
|
2160
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-slate-500 volr:mb-1", children: t("login.wallet.connected") }),
|
|
2161
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-sm volr:font-medium volr:text-slate-900 volr:font-mono", children: [
|
|
2192
2162
|
account.slice(0, 6),
|
|
2193
2163
|
"...",
|
|
2194
2164
|
account.slice(-4)
|
|
2195
2165
|
] })
|
|
2196
2166
|
] }),
|
|
2197
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2198
|
-
CopyButton,
|
|
2199
|
-
{
|
|
2200
|
-
text: account,
|
|
2201
|
-
className: "volr:p-1.5 volr:bg-white volr:rounded-md volr:shadow-sm"
|
|
2202
|
-
}
|
|
2203
|
-
)
|
|
2167
|
+
/* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: account })
|
|
2204
2168
|
] }),
|
|
2205
2169
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mb-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg volr:text-red-700 volr:text-sm", children: error }),
|
|
2206
2170
|
step === "connect" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2207
|
-
|
|
2171
|
+
Button,
|
|
2208
2172
|
{
|
|
2173
|
+
variant: "primary",
|
|
2174
|
+
fullWidth: true,
|
|
2209
2175
|
onClick: handleConnectWallet,
|
|
2210
2176
|
disabled: isLoading,
|
|
2211
|
-
className: `volr:w-full volr:py-3 volr:px-6 volr:text-white volr:border-none volr:rounded-lg volr:text-base volr:font-medium volr:transition-all volr:duration-200 ${isLoading ? "volr:bg-gray-400 volr:cursor-not-allowed" : "volr:cursor-pointer"}`,
|
|
2212
|
-
style: {
|
|
2213
|
-
backgroundColor: isLoading ? void 0 : accentColor
|
|
2214
|
-
},
|
|
2215
2177
|
children: isLoading ? t("common.loading") : t("login.wallet.connect")
|
|
2216
2178
|
}
|
|
2217
2179
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
2218
|
-
|
|
2180
|
+
Button,
|
|
2219
2181
|
{
|
|
2182
|
+
variant: "primary",
|
|
2183
|
+
fullWidth: true,
|
|
2220
2184
|
onClick: handleSign,
|
|
2221
2185
|
disabled: isLoading,
|
|
2222
|
-
className: `volr:w-full volr:py-3 volr:px-6 volr:text-white volr:border-none volr:rounded-lg volr:text-base volr:font-medium volr:transition-all volr:duration-200 ${isLoading ? "volr:bg-gray-400 volr:cursor-not-allowed" : "volr:cursor-pointer"}`,
|
|
2223
|
-
style: {
|
|
2224
|
-
backgroundColor: isLoading ? void 0 : accentColor
|
|
2225
|
-
},
|
|
2226
2186
|
children: isLoading ? t("common.loading") : t("login.wallet.sign")
|
|
2227
2187
|
}
|
|
2228
2188
|
)
|
|
@@ -2242,149 +2202,17 @@ Issued At: ${issuedAt}`;
|
|
|
2242
2202
|
}
|
|
2243
2203
|
);
|
|
2244
2204
|
}
|
|
2245
|
-
function LoginSuccessScreen({
|
|
2246
|
-
onClose,
|
|
2247
|
-
delay = 1500
|
|
2248
|
-
}) {
|
|
2249
|
-
const { t } = useI18n();
|
|
2250
|
-
const { accentColor } = useVolrUI();
|
|
2251
|
-
React6.useEffect(() => {
|
|
2252
|
-
const timer = setTimeout(() => {
|
|
2253
|
-
onClose();
|
|
2254
|
-
}, delay);
|
|
2255
|
-
return () => {
|
|
2256
|
-
clearTimeout(timer);
|
|
2257
|
-
};
|
|
2258
|
-
}, [onClose, delay]);
|
|
2259
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:flex-col volr:items-center volr:justify-center volr:py-12 volr:px-4", children: [
|
|
2260
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative volr:mb-8", children: [
|
|
2261
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2262
|
-
"div",
|
|
2263
|
-
{
|
|
2264
|
-
className: "volr:absolute volr:inset-0 volr:rounded-full volr:blur-2xl volr:opacity-30",
|
|
2265
|
-
style: {
|
|
2266
|
-
backgroundColor: accentColor,
|
|
2267
|
-
animation: "volr-pulse 2s ease-in-out infinite"
|
|
2268
|
-
}
|
|
2269
|
-
}
|
|
2270
|
-
),
|
|
2271
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2272
|
-
"div",
|
|
2273
|
-
{
|
|
2274
|
-
className: "volr:relative volr:w-24 volr:h-24 volr:rounded-full volr:flex volr:items-center volr:justify-center volr:shadow-lg",
|
|
2275
|
-
style: {
|
|
2276
|
-
backgroundColor: accentColor + "c0",
|
|
2277
|
-
animation: "volr-scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards"
|
|
2278
|
-
},
|
|
2279
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2280
|
-
"svg",
|
|
2281
|
-
{
|
|
2282
|
-
width: "48",
|
|
2283
|
-
height: "48",
|
|
2284
|
-
viewBox: "0 0 24 24",
|
|
2285
|
-
fill: "none",
|
|
2286
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2287
|
-
style: {
|
|
2288
|
-
animation: "volr-fade-in 0.3s ease-out 0.3s both"
|
|
2289
|
-
},
|
|
2290
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2291
|
-
"path",
|
|
2292
|
-
{
|
|
2293
|
-
d: "M5 13L9 17L19 7",
|
|
2294
|
-
stroke: "white",
|
|
2295
|
-
strokeWidth: "2.5",
|
|
2296
|
-
strokeLinecap: "round",
|
|
2297
|
-
strokeLinejoin: "round",
|
|
2298
|
-
style: {
|
|
2299
|
-
strokeDasharray: "24",
|
|
2300
|
-
strokeDashoffset: "24",
|
|
2301
|
-
animation: "volr-check-draw 0.4s ease-out 0.3s forwards"
|
|
2302
|
-
}
|
|
2303
|
-
}
|
|
2304
|
-
)
|
|
2305
|
-
}
|
|
2306
|
-
)
|
|
2307
|
-
}
|
|
2308
|
-
)
|
|
2309
|
-
] }),
|
|
2310
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2311
|
-
"div",
|
|
2312
|
-
{
|
|
2313
|
-
className: "volr:text-center volr:space-y-2",
|
|
2314
|
-
style: {
|
|
2315
|
-
animation: "volr-fade-in-up 0.5s ease-out 0.5s both"
|
|
2316
|
-
},
|
|
2317
|
-
children: [
|
|
2318
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900 volr:mb-3", children: t("success.title") }),
|
|
2319
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-base volr:text-slate-600", children: t("success.message") || "You're all set. Redirecting..." })
|
|
2320
|
-
]
|
|
2321
|
-
}
|
|
2322
|
-
),
|
|
2323
|
-
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
2324
|
-
@keyframes volr-scale-in {
|
|
2325
|
-
0% {
|
|
2326
|
-
transform: scale(0);
|
|
2327
|
-
opacity: 0;
|
|
2328
|
-
}
|
|
2329
|
-
100% {
|
|
2330
|
-
transform: scale(1);
|
|
2331
|
-
opacity: 1;
|
|
2332
|
-
}
|
|
2333
|
-
}
|
|
2334
|
-
|
|
2335
|
-
@keyframes volr-check-draw {
|
|
2336
|
-
0% {
|
|
2337
|
-
stroke-dashoffset: 24;
|
|
2338
|
-
}
|
|
2339
|
-
100% {
|
|
2340
|
-
stroke-dashoffset: 0;
|
|
2341
|
-
}
|
|
2342
|
-
}
|
|
2343
|
-
|
|
2344
|
-
@keyframes volr-fade-in {
|
|
2345
|
-
0% {
|
|
2346
|
-
opacity: 0;
|
|
2347
|
-
}
|
|
2348
|
-
100% {
|
|
2349
|
-
opacity: 1;
|
|
2350
|
-
}
|
|
2351
|
-
}
|
|
2352
|
-
|
|
2353
|
-
@keyframes volr-fade-in-up {
|
|
2354
|
-
0% {
|
|
2355
|
-
opacity: 0;
|
|
2356
|
-
transform: translateY(10px);
|
|
2357
|
-
}
|
|
2358
|
-
100% {
|
|
2359
|
-
opacity: 1;
|
|
2360
|
-
transform: translateY(0);
|
|
2361
|
-
}
|
|
2362
|
-
}
|
|
2363
|
-
|
|
2364
|
-
@keyframes volr-pulse {
|
|
2365
|
-
0%, 100% {
|
|
2366
|
-
transform: scale(1);
|
|
2367
|
-
opacity: 0.3;
|
|
2368
|
-
}
|
|
2369
|
-
50% {
|
|
2370
|
-
transform: scale(1.1);
|
|
2371
|
-
opacity: 0.2;
|
|
2372
|
-
}
|
|
2373
|
-
}
|
|
2374
|
-
` })
|
|
2375
|
-
] });
|
|
2376
|
-
}
|
|
2377
2205
|
function SigninModal({ isOpen, onClose, onError }) {
|
|
2378
2206
|
const { logout, user } = react.useVolrContext();
|
|
2379
2207
|
const { appName, branding } = useVolrUI();
|
|
2380
2208
|
const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
|
|
2381
|
-
const [currentScreen, setCurrentScreen] =
|
|
2382
|
-
const [email, setEmail] =
|
|
2209
|
+
const [currentScreen, setCurrentScreen] = React9.useState("method-select");
|
|
2210
|
+
const [email, setEmail] = React9.useState("");
|
|
2383
2211
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
2384
2212
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
2385
2213
|
const isWideViewport = useMediaQuery("(min-width: 864px)");
|
|
2386
2214
|
const shouldUseWideLayout = !isMobile && isWideViewport && Boolean(branding) && currentScreen === "method-select";
|
|
2387
|
-
|
|
2215
|
+
React9.useEffect(() => {
|
|
2388
2216
|
if (!isOpen) {
|
|
2389
2217
|
setCurrentScreen("method-select");
|
|
2390
2218
|
setEmail("");
|
|
@@ -2408,20 +2236,20 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2408
2236
|
const handleCodeSubmit = async (code) => {
|
|
2409
2237
|
const result = await verifyEmailCode(email, code);
|
|
2410
2238
|
if (result.keyStorageType) {
|
|
2411
|
-
|
|
2239
|
+
onClose();
|
|
2412
2240
|
return;
|
|
2413
2241
|
}
|
|
2414
2242
|
setCurrentScreen("passkey-setup");
|
|
2415
2243
|
};
|
|
2416
2244
|
const handleSiweSuccess = (data) => {
|
|
2417
2245
|
if (data.keyStorageType) {
|
|
2418
|
-
|
|
2246
|
+
onClose();
|
|
2419
2247
|
return;
|
|
2420
2248
|
}
|
|
2421
2249
|
setCurrentScreen("passkey-setup");
|
|
2422
2250
|
};
|
|
2423
2251
|
const handlePasskeyComplete = () => {
|
|
2424
|
-
|
|
2252
|
+
onClose();
|
|
2425
2253
|
};
|
|
2426
2254
|
const handlePasskeyError = (error) => {
|
|
2427
2255
|
if (onError) {
|
|
@@ -2440,11 +2268,6 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2440
2268
|
}
|
|
2441
2269
|
}
|
|
2442
2270
|
};
|
|
2443
|
-
const handleSuccessClose = () => {
|
|
2444
|
-
setCurrentScreen("method-select");
|
|
2445
|
-
setEmail("");
|
|
2446
|
-
onClose();
|
|
2447
|
-
};
|
|
2448
2271
|
const handleBackdropClick = (_e) => {
|
|
2449
2272
|
if (currentScreen !== "passkey-setup" || hasPasskey) {
|
|
2450
2273
|
setCurrentScreen("method-select");
|
|
@@ -2509,12 +2332,10 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2509
2332
|
onComplete: handlePasskeyComplete,
|
|
2510
2333
|
onError: handlePasskeyError,
|
|
2511
2334
|
onLogout: handleLogout,
|
|
2512
|
-
onClose
|
|
2335
|
+
onClose
|
|
2513
2336
|
},
|
|
2514
2337
|
"passkey-setup"
|
|
2515
2338
|
);
|
|
2516
|
-
case "success":
|
|
2517
|
-
return /* @__PURE__ */ jsxRuntime.jsx(LoginSuccessScreen, { onClose: handleSuccessClose }, "success");
|
|
2518
2339
|
default:
|
|
2519
2340
|
return null;
|
|
2520
2341
|
}
|
|
@@ -2552,7 +2373,7 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2552
2373
|
function AccountModal({ isOpen, onClose, onError }) {
|
|
2553
2374
|
const { user, logout } = react.useVolrContext();
|
|
2554
2375
|
const { t } = useI18n();
|
|
2555
|
-
const [isLoggingOut, setIsLoggingOut] =
|
|
2376
|
+
const [isLoggingOut, setIsLoggingOut] = React9.useState(false);
|
|
2556
2377
|
if (!user) {
|
|
2557
2378
|
return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
|
|
2558
2379
|
}
|
|
@@ -2572,9 +2393,9 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
2572
2393
|
const displayAddress = user.evmAddress ? `${user.evmAddress.slice(0, 6)}...${user.evmAddress.slice(-4)}` : null;
|
|
2573
2394
|
return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: [
|
|
2574
2395
|
/* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose }),
|
|
2575
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
2576
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-
|
|
2577
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:bg-slate-50 volr:rounded-xl volr:p-4 volr:mb-
|
|
2396
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2397
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-4 volr:text-center", children: t("account.title") }),
|
|
2398
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:bg-slate-50 volr:rounded-xl volr:p-4 volr:mb-4", children: [
|
|
2578
2399
|
user.evmAddress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-3", children: [
|
|
2579
2400
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
|
|
2580
2401
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-500 volr:mb-1", children: t("account.walletAddress") }),
|
|
@@ -2594,11 +2415,12 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
2594
2415
|
] })
|
|
2595
2416
|
] }),
|
|
2596
2417
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2597
|
-
|
|
2418
|
+
Button,
|
|
2598
2419
|
{
|
|
2420
|
+
variant: "outline",
|
|
2421
|
+
fullWidth: true,
|
|
2599
2422
|
onClick: handleLogout,
|
|
2600
2423
|
disabled: isLoggingOut,
|
|
2601
|
-
className: "volr:w-full volr:py-3 volr:px-4 volr:rounded-lg volr:border volr:border-slate-200 volr:text-slate-700 volr:font-medium volr:text-sm volr:transition-colors hover:volr:bg-slate-50 hover:volr:border-slate-300 disabled:volr:opacity-50 disabled:volr:cursor-not-allowed",
|
|
2602
2424
|
children: isLoggingOut ? t("common.loading") : t("account.logout")
|
|
2603
2425
|
}
|
|
2604
2426
|
)
|
|
@@ -2610,9 +2432,9 @@ function AssetSelectView({
|
|
|
2610
2432
|
onSelect
|
|
2611
2433
|
}) {
|
|
2612
2434
|
const { t } = useI18n();
|
|
2613
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
2614
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-
|
|
2615
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-
|
|
2435
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2436
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-1 volr:text-center", children: t("deposit.selectTitle") }),
|
|
2437
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-4 volr:text-center", children: "Supported token" }),
|
|
2616
2438
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: assets.map((a, idx) => {
|
|
2617
2439
|
const isNative = a.token === "native";
|
|
2618
2440
|
const tokenSymbol = isNative ? "ETH" : a.token.symbol;
|
|
@@ -2635,7 +2457,7 @@ function AssetSelectView({
|
|
|
2635
2457
|
src: a.token.iconUrl,
|
|
2636
2458
|
className: "volr:w-10 volr:h-10 volr:rounded-full volr:border volr:border-slate-200"
|
|
2637
2459
|
}
|
|
2638
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-10 volr:h-10 volr:rounded-full volr:bg-
|
|
2460
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-10 volr:h-10 volr:rounded-full volr:bg-slate-700 volr:flex volr:items-center volr:justify-center volr:text-white volr:font-bold volr:text-sm", children: tokenSymbol.slice(0, 2) }) }),
|
|
2639
2461
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
|
|
2640
2462
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
|
|
2641
2463
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-base volr:font-semibold volr:text-slate-900", children: tokenSymbol }),
|
|
@@ -2655,7 +2477,7 @@ function AssetSelectView({
|
|
|
2655
2477
|
}) })
|
|
2656
2478
|
] });
|
|
2657
2479
|
}
|
|
2658
|
-
var TextLinkButton =
|
|
2480
|
+
var TextLinkButton = React.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
|
|
2659
2481
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2660
2482
|
"button",
|
|
2661
2483
|
{
|
|
@@ -2680,8 +2502,8 @@ var OtherTokenModal = ({
|
|
|
2680
2502
|
}) => {
|
|
2681
2503
|
return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange, children: [
|
|
2682
2504
|
/* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
|
|
2683
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:
|
|
2684
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-
|
|
2505
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center", children: [
|
|
2506
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: "Coming Soon" }),
|
|
2685
2507
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-600", children: "Swap and bridge recommendations will be available here soon." })
|
|
2686
2508
|
] })
|
|
2687
2509
|
] });
|
|
@@ -2914,7 +2736,7 @@ var DepositCompletedToast = ({
|
|
|
2914
2736
|
symbol
|
|
2915
2737
|
}) => {
|
|
2916
2738
|
const { t } = useI18n();
|
|
2917
|
-
const [expanded, setExpanded] =
|
|
2739
|
+
const [expanded, setExpanded] = React9.useState(false);
|
|
2918
2740
|
const formatAmount = (amount) => {
|
|
2919
2741
|
const divisor = BigInt(10 ** decimals);
|
|
2920
2742
|
const whole = amount / divisor;
|
|
@@ -3043,10 +2865,10 @@ function DepositQRView(props) {
|
|
|
3043
2865
|
const { t } = useI18n();
|
|
3044
2866
|
const { config } = react.useVolrContext();
|
|
3045
2867
|
const { client } = react.useInternalAuth();
|
|
3046
|
-
const [chainName, setChainName] =
|
|
3047
|
-
const [showOtherTokenModal, setShowOtherTokenModal] =
|
|
3048
|
-
const [showToast, setShowToast] =
|
|
3049
|
-
const eip681 =
|
|
2868
|
+
const [chainName, setChainName] = React9.useState(null);
|
|
2869
|
+
const [showOtherTokenModal, setShowOtherTokenModal] = React9.useState(false);
|
|
2870
|
+
const [showToast, setShowToast] = React9.useState(false);
|
|
2871
|
+
const eip681 = React9.useMemo(() => {
|
|
3050
2872
|
return `ethereum:${props.address}`;
|
|
3051
2873
|
}, [props.address]);
|
|
3052
2874
|
const status = react.useDepositListener({
|
|
@@ -3060,17 +2882,17 @@ function DepositQRView(props) {
|
|
|
3060
2882
|
},
|
|
3061
2883
|
address: props.address
|
|
3062
2884
|
});
|
|
3063
|
-
|
|
2885
|
+
React9.useEffect(() => {
|
|
3064
2886
|
console.log("[DepositQRView] Status changed:", status);
|
|
3065
2887
|
if (status.state === "detected") {
|
|
3066
2888
|
setShowToast(true);
|
|
3067
2889
|
}
|
|
3068
2890
|
}, [status.state]);
|
|
3069
|
-
const getNetworkInfo =
|
|
2891
|
+
const getNetworkInfo = React9.useCallback(
|
|
3070
2892
|
react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
|
|
3071
2893
|
[client, config.rpcOverrides]
|
|
3072
2894
|
);
|
|
3073
|
-
|
|
2895
|
+
React9.useEffect(() => {
|
|
3074
2896
|
let cancelled = false;
|
|
3075
2897
|
const loadChainName = async () => {
|
|
3076
2898
|
try {
|
|
@@ -3092,23 +2914,23 @@ function DepositQRView(props) {
|
|
|
3092
2914
|
const tokenSymbol = props.asset === "native" ? "ETH" : props.asset.symbol;
|
|
3093
2915
|
const displayChainName = chainName || `Chain ${props.chainId}`;
|
|
3094
2916
|
const decimals = props.asset === "native" ? 18 : props.asset.decimals;
|
|
3095
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative
|
|
3096
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-
|
|
3097
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-
|
|
2917
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
|
|
2918
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
|
|
2919
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("deposit.qrTitle") }),
|
|
3098
2920
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:inline-flex volr:items-center volr:gap-2 volr:px-3 volr:py-1.5 volr:rounded-lg volr:bg-slate-100", children: [
|
|
3099
2921
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-700", children: tokenSymbol }),
|
|
3100
2922
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-slate-400", children: "\u2022" }),
|
|
3101
2923
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:text-slate-500", children: displayChainName })
|
|
3102
2924
|
] })
|
|
3103
2925
|
] }),
|
|
3104
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:mb-
|
|
3105
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:relative volr:rounded-
|
|
2926
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
|
|
2927
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:relative volr:rounded-xl volr:bg-white volr:p-3 volr:shadow-sm volr:border volr:border-slate-200/50 volr:z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3106
2928
|
"img",
|
|
3107
2929
|
{
|
|
3108
2930
|
alt: "Deposit QR",
|
|
3109
|
-
width:
|
|
3110
|
-
height:
|
|
3111
|
-
src: `https://api.qrserver.com/v1/create-qr-code/?size=
|
|
2931
|
+
width: 200,
|
|
2932
|
+
height: 200,
|
|
2933
|
+
src: `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
|
|
3112
2934
|
eip681
|
|
3113
2935
|
)}`,
|
|
3114
2936
|
className: "volr:rounded-lg volr:relative volr:z-10"
|
|
@@ -3116,12 +2938,12 @@ function DepositQRView(props) {
|
|
|
3116
2938
|
) }),
|
|
3117
2939
|
/* @__PURE__ */ jsxRuntime.jsx(DepositQRStatusOverlay, { status: status.state })
|
|
3118
2940
|
] }) }),
|
|
3119
|
-
status.state === "listening" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-
|
|
3120
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:bg-
|
|
3121
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:text-slate-
|
|
2941
|
+
status.state === "listening" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
|
|
2942
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:bg-slate-500 volr:rounded-full volr:animate-pulse" }),
|
|
2943
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:text-slate-500", children: t("deposit.listening") })
|
|
3122
2944
|
] }),
|
|
3123
|
-
status.state === "idle" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-slate-500 volr:text-center volr:mb-
|
|
3124
|
-
status.state === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-xs volr:text-red-500 volr:text-center volr:mb-
|
|
2945
|
+
status.state === "idle" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-slate-500 volr:text-center volr:mb-3", children: "Initializing..." }),
|
|
2946
|
+
status.state === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-xs volr:text-red-500 volr:text-center volr:mb-3", children: [
|
|
3125
2947
|
"Error: ",
|
|
3126
2948
|
status.message
|
|
3127
2949
|
] }),
|
|
@@ -3138,7 +2960,7 @@ function DepositQRView(props) {
|
|
|
3138
2960
|
] }) }) }),
|
|
3139
2961
|
status.state === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-red-500 volr:text-center volr:mb-4", children: status.message })
|
|
3140
2962
|
] }),
|
|
3141
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:pt-
|
|
2963
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:pt-3 volr:border-t volr:border-slate-100", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-xs volr:text-slate-500", children: [
|
|
3142
2964
|
t("deposit.noToken"),
|
|
3143
2965
|
" ",
|
|
3144
2966
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3177,10 +2999,10 @@ var DepositModal = ({
|
|
|
3177
2999
|
}) => {
|
|
3178
3000
|
const { user } = react.useVolrContext();
|
|
3179
3001
|
const { client } = react.useInternalAuth();
|
|
3180
|
-
const [depositAssets, setDepositAssets] =
|
|
3181
|
-
const [isLoading, setIsLoading] =
|
|
3182
|
-
const [error, setError] =
|
|
3183
|
-
|
|
3002
|
+
const [depositAssets, setDepositAssets] = React9.useState([]);
|
|
3003
|
+
const [isLoading, setIsLoading] = React9.useState(true);
|
|
3004
|
+
const [error, setError] = React9.useState(null);
|
|
3005
|
+
React9.useEffect(() => {
|
|
3184
3006
|
if (!open) return;
|
|
3185
3007
|
setIsLoading(true);
|
|
3186
3008
|
setError(null);
|
|
@@ -3208,24 +3030,24 @@ var DepositModal = ({
|
|
|
3208
3030
|
if (depositAssets.length === 1) return 0;
|
|
3209
3031
|
return -1;
|
|
3210
3032
|
};
|
|
3211
|
-
const [selectedIdx, setSelectedIdx] =
|
|
3212
|
-
|
|
3033
|
+
const [selectedIdx, setSelectedIdx] = React9.useState(-1);
|
|
3034
|
+
React9.useEffect(() => {
|
|
3213
3035
|
if (open && !isLoading && depositAssets.length > 0) {
|
|
3214
3036
|
setSelectedIdx(getInitialIndex());
|
|
3215
3037
|
}
|
|
3216
3038
|
}, [open, isLoading, depositAssets.length, asset]);
|
|
3217
|
-
|
|
3039
|
+
React9.useEffect(() => {
|
|
3218
3040
|
if (!open) {
|
|
3219
3041
|
setSelectedIdx(-1);
|
|
3220
3042
|
}
|
|
3221
3043
|
}, [open]);
|
|
3222
|
-
const selected =
|
|
3044
|
+
const selected = React9.useMemo(
|
|
3223
3045
|
() => depositAssets[selectedIdx],
|
|
3224
3046
|
[depositAssets, selectedIdx]
|
|
3225
3047
|
);
|
|
3226
3048
|
const showSelector = hasAssets && depositAssets.length > 1 && selectedIdx === -1;
|
|
3227
3049
|
const showQR = hasAssets && user?.evmAddress && selectedIdx >= 0;
|
|
3228
|
-
const body =
|
|
3050
|
+
const body = React9.useMemo(() => {
|
|
3229
3051
|
if (isLoading) {
|
|
3230
3052
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: "Loading..." }) });
|
|
3231
3053
|
}
|
|
@@ -3289,9 +3111,9 @@ var DepositModal = ({
|
|
|
3289
3111
|
body
|
|
3290
3112
|
] });
|
|
3291
3113
|
};
|
|
3292
|
-
var VolrUIContext =
|
|
3114
|
+
var VolrUIContext = React9__default.default.createContext(null);
|
|
3293
3115
|
var useVolrUI = () => {
|
|
3294
|
-
const context =
|
|
3116
|
+
const context = React9.useContext(VolrUIContext);
|
|
3295
3117
|
if (!context) {
|
|
3296
3118
|
throw new Error("useVolrUI must be used within VolrUIProvider");
|
|
3297
3119
|
}
|
|
@@ -3350,11 +3172,11 @@ var VolrUIProvider = ({
|
|
|
3350
3172
|
const providerPolicy = config.providerPolicy ?? {
|
|
3351
3173
|
enforceOnFirstLogin: true
|
|
3352
3174
|
};
|
|
3353
|
-
const [showOnboarding, setShowOnboarding] =
|
|
3354
|
-
const [keyStorageTypeError, setKeyStorageTypeError] =
|
|
3175
|
+
const [showOnboarding, setShowOnboarding] = React9.useState(false);
|
|
3176
|
+
const [keyStorageTypeError, setKeyStorageTypeError] = React9.useState(
|
|
3355
3177
|
null
|
|
3356
3178
|
);
|
|
3357
|
-
|
|
3179
|
+
React9.useEffect(() => {
|
|
3358
3180
|
if (providerPolicy.enforceOnFirstLogin !== false && !keyStorageType) {
|
|
3359
3181
|
const errorMessage = "keyStorageType must be specified in VolrUIProvider props. Please set keyStorageType prop in VolrUIProvider.";
|
|
3360
3182
|
console.error(errorMessage);
|
|
@@ -3418,9 +3240,9 @@ var VolrUIProvider = ({
|
|
|
3418
3240
|
};
|
|
3419
3241
|
function AccountModalPortal() {
|
|
3420
3242
|
const { isOpen, mode, close } = useVolrModal();
|
|
3421
|
-
const [portalRoot, setPortalRoot] =
|
|
3422
|
-
const [error, setError] =
|
|
3423
|
-
|
|
3243
|
+
const [portalRoot, setPortalRoot] = React9.useState(null);
|
|
3244
|
+
const [error, setError] = React9.useState(null);
|
|
3245
|
+
React9.useEffect(() => {
|
|
3424
3246
|
if (typeof window === "undefined") return;
|
|
3425
3247
|
let root = document.getElementById("volr-modal-root");
|
|
3426
3248
|
if (!root) {
|
|
@@ -3479,9 +3301,9 @@ function AccountModalPortal() {
|
|
|
3479
3301
|
function DepositModalPortal() {
|
|
3480
3302
|
const { isOpen, mode, asset, close } = useVolrModal();
|
|
3481
3303
|
const { user } = react.useVolrContext();
|
|
3482
|
-
const [portalRoot, setPortalRoot] =
|
|
3483
|
-
const [showLogin, setShowLogin] =
|
|
3484
|
-
|
|
3304
|
+
const [portalRoot, setPortalRoot] = React9.useState(null);
|
|
3305
|
+
const [showLogin, setShowLogin] = React9.useState(false);
|
|
3306
|
+
React9.useEffect(() => {
|
|
3485
3307
|
if (typeof window === "undefined") return;
|
|
3486
3308
|
let root = document.getElementById("volr-modal-root");
|
|
3487
3309
|
if (!root) {
|
|
@@ -3496,7 +3318,7 @@ function DepositModalPortal() {
|
|
|
3496
3318
|
}
|
|
3497
3319
|
};
|
|
3498
3320
|
}, []);
|
|
3499
|
-
|
|
3321
|
+
React9.useEffect(() => {
|
|
3500
3322
|
if (isOpen && mode === "deposit" && !user) {
|
|
3501
3323
|
setShowLogin(true);
|
|
3502
3324
|
} else {
|
|
@@ -3536,7 +3358,7 @@ function OnboardingChecker({
|
|
|
3536
3358
|
}) {
|
|
3537
3359
|
const { user, provider, isLoading } = react.useVolrContext();
|
|
3538
3360
|
const { isOpen: isModalOpen } = useVolrModal();
|
|
3539
|
-
|
|
3361
|
+
React9.useEffect(() => {
|
|
3540
3362
|
if (isLoading) {
|
|
3541
3363
|
return;
|
|
3542
3364
|
}
|
|
@@ -3575,7 +3397,7 @@ function OnboardingChecker({
|
|
|
3575
3397
|
}
|
|
3576
3398
|
function useSwitchNetwork() {
|
|
3577
3399
|
const { client } = react.useInternalAuth();
|
|
3578
|
-
return
|
|
3400
|
+
return React9.useCallback(
|
|
3579
3401
|
async (chainId) => {
|
|
3580
3402
|
if (typeof window === "undefined" || !window.ethereum) {
|
|
3581
3403
|
throw new Error("No wallet found");
|