@volr/react-ui 0.1.58 → 0.1.60
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/dist/index.cjs +158 -194
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +73 -109
- 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 React5 = 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 React5__default = /*#__PURE__*/_interopDefault(React5);
|
|
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 = React5.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 = React5.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] = React5.useState(detectLocale());
|
|
266
|
+
const translations2 = React5.useMemo(() => getTranslations(locale), [locale]);
|
|
267
|
+
const t = React5.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 = React5.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 = React5.createContext(null);
|
|
297
297
|
var useVolrModal = () => {
|
|
298
|
-
const context =
|
|
298
|
+
const context = React5.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] = React5.useState(false);
|
|
308
|
+
const [mode, setMode] = React5.useState("account");
|
|
309
|
+
const [asset, setAsset] = React5.useState(null);
|
|
310
|
+
const open = React5.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 = React5.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] = React5.useState(() => {
|
|
329
329
|
if (typeof window === "undefined") return false;
|
|
330
330
|
return window.matchMedia(query).matches;
|
|
331
331
|
});
|
|
332
|
-
|
|
332
|
+
React5.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,10 @@ 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-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-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-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-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-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-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-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\\: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-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-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 [
|
|
347
|
-
|
|
348
|
-
React9.useEffect(() => {
|
|
346
|
+
const [mountNode, setMountNode] = React5.useState(null);
|
|
347
|
+
React5.useEffect(() => {
|
|
349
348
|
const host = document.createElement("div");
|
|
350
349
|
host.id = "volr-shadow-portal";
|
|
351
350
|
host.style.position = "fixed";
|
|
@@ -355,7 +354,6 @@ function ShadowPortal({ children }) {
|
|
|
355
354
|
host.style.height = "0";
|
|
356
355
|
host.style.zIndex = "9999";
|
|
357
356
|
document.body.appendChild(host);
|
|
358
|
-
setShadowHost(host);
|
|
359
357
|
const shadowRoot = host.attachShadow({ mode: "open" });
|
|
360
358
|
const styleEl = document.createElement("style");
|
|
361
359
|
styleEl.textContent = VOLR_SDK_CSS;
|
|
@@ -372,7 +370,7 @@ function ShadowPortal({ children }) {
|
|
|
372
370
|
return reactDom.createPortal(children, mountNode);
|
|
373
371
|
}
|
|
374
372
|
function useFocusTrap(isActive, containerRef) {
|
|
375
|
-
const previousActiveElement =
|
|
373
|
+
const previousActiveElement = React5.useRef(null);
|
|
376
374
|
const focusableSelector = [
|
|
377
375
|
"button:not([disabled])",
|
|
378
376
|
"input:not([disabled])",
|
|
@@ -381,7 +379,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
381
379
|
"a[href]",
|
|
382
380
|
'[tabindex]:not([tabindex="-1"])'
|
|
383
381
|
].join(", ");
|
|
384
|
-
const getFocusableElements =
|
|
382
|
+
const getFocusableElements = React5.useCallback(() => {
|
|
385
383
|
if (!containerRef.current) return [];
|
|
386
384
|
return Array.from(
|
|
387
385
|
containerRef.current.querySelectorAll(focusableSelector)
|
|
@@ -389,7 +387,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
389
387
|
return el.offsetParent !== null;
|
|
390
388
|
});
|
|
391
389
|
}, [containerRef, focusableSelector]);
|
|
392
|
-
const handleKeyDown =
|
|
390
|
+
const handleKeyDown = React5.useCallback(
|
|
393
391
|
(event) => {
|
|
394
392
|
if (event.key !== "Tab") return;
|
|
395
393
|
const focusableElements = getFocusableElements();
|
|
@@ -410,7 +408,7 @@ function useFocusTrap(isActive, containerRef) {
|
|
|
410
408
|
},
|
|
411
409
|
[getFocusableElements]
|
|
412
410
|
);
|
|
413
|
-
|
|
411
|
+
React5.useEffect(() => {
|
|
414
412
|
if (!isActive) return;
|
|
415
413
|
previousActiveElement.current = document.activeElement;
|
|
416
414
|
const focusableElements = getFocusableElements();
|
|
@@ -441,10 +439,10 @@ var Modal = ({
|
|
|
441
439
|
}) => {
|
|
442
440
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
443
441
|
const variant = explicitVariant ?? (isMobile ? "bottom-sheet" : "centered");
|
|
444
|
-
const dialogRef =
|
|
445
|
-
const dialogId =
|
|
442
|
+
const dialogRef = React5.useRef(null);
|
|
443
|
+
const dialogId = React5.useId();
|
|
446
444
|
useFocusTrap(open, dialogRef);
|
|
447
|
-
|
|
445
|
+
React5.useEffect(() => {
|
|
448
446
|
const handleEscape = (e) => {
|
|
449
447
|
if (e.key === "Escape" && open) {
|
|
450
448
|
if (onEscapeKeyDown) {
|
|
@@ -842,11 +840,59 @@ function BiometricIcon({ type, size = 80, animate = false }) {
|
|
|
842
840
|
type === "fingerprint" && /* @__PURE__ */ jsxRuntime.jsx(FingerprintIcon, { size })
|
|
843
841
|
] });
|
|
844
842
|
}
|
|
843
|
+
var sizeMap = {
|
|
844
|
+
sm: { px: "0.75rem", py: "0.5rem", fontSize: "0.875rem" },
|
|
845
|
+
md: { px: "1rem", py: "0.75rem", fontSize: "1rem" },
|
|
846
|
+
lg: { px: "1.5rem", py: "1rem", fontSize: "1.125rem" }
|
|
847
|
+
};
|
|
848
|
+
var variantMap = {
|
|
849
|
+
primary: { backgroundColor: void 0, color: "#fff", border: "none" },
|
|
850
|
+
secondary: { backgroundColor: "#f1f5f9", color: "#0f172a", border: "none" },
|
|
851
|
+
ghost: { backgroundColor: "transparent", color: "#475569", border: "none" },
|
|
852
|
+
outline: { backgroundColor: "transparent", color: "#475569", border: "1px solid #e2e8f0" }
|
|
853
|
+
};
|
|
854
|
+
var Button = React5__default.default.forwardRef(
|
|
855
|
+
({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
|
|
856
|
+
const { accentColor } = useVolrUI();
|
|
857
|
+
const sizeStyle = sizeMap[size];
|
|
858
|
+
const variantStyle = variantMap[variant];
|
|
859
|
+
const isPrimary = variant === "primary";
|
|
860
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
861
|
+
"button",
|
|
862
|
+
{
|
|
863
|
+
ref,
|
|
864
|
+
disabled,
|
|
865
|
+
className: cn(
|
|
866
|
+
"volr:inline-flex volr:items-center volr:justify-center volr:gap-2",
|
|
867
|
+
"volr:font-semibold volr:transition-all",
|
|
868
|
+
fullWidth && "volr:w-full",
|
|
869
|
+
className
|
|
870
|
+
),
|
|
871
|
+
style: {
|
|
872
|
+
paddingLeft: sizeStyle.px,
|
|
873
|
+
paddingRight: sizeStyle.px,
|
|
874
|
+
paddingTop: sizeStyle.py,
|
|
875
|
+
paddingBottom: sizeStyle.py,
|
|
876
|
+
fontSize: sizeStyle.fontSize,
|
|
877
|
+
borderRadius: "0.75rem",
|
|
878
|
+
border: variantStyle.border,
|
|
879
|
+
backgroundColor: isPrimary ? accentColor : variantStyle.backgroundColor,
|
|
880
|
+
color: variantStyle.color,
|
|
881
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
882
|
+
opacity: disabled ? 0.5 : 1,
|
|
883
|
+
...style
|
|
884
|
+
},
|
|
885
|
+
...props,
|
|
886
|
+
children
|
|
887
|
+
}
|
|
888
|
+
);
|
|
889
|
+
}
|
|
890
|
+
);
|
|
891
|
+
Button.displayName = "Button";
|
|
845
892
|
function PasskeyEnrollForm({
|
|
846
893
|
biometricType,
|
|
847
894
|
biometricMessage,
|
|
848
895
|
errorMessage,
|
|
849
|
-
accentColor,
|
|
850
896
|
onEnroll,
|
|
851
897
|
onLogout,
|
|
852
898
|
buttonText,
|
|
@@ -860,23 +906,8 @@ function PasskeyEnrollForm({
|
|
|
860
906
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage })
|
|
861
907
|
] }),
|
|
862
908
|
/* @__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
|
-
)
|
|
909
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", fullWidth: true, onClick: onEnroll, children: buttonText }),
|
|
910
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", fullWidth: true, onClick: onLogout, children: logoutText })
|
|
880
911
|
] })
|
|
881
912
|
] });
|
|
882
913
|
}
|
|
@@ -905,23 +936,8 @@ function PasskeyEnrollLoading({
|
|
|
905
936
|
}
|
|
906
937
|
) }) }),
|
|
907
938
|
!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
|
-
)
|
|
939
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", fullWidth: true, onClick: onRetry, children: buttonText }),
|
|
940
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", fullWidth: true, onClick: onLogout, children: logoutText })
|
|
925
941
|
] })
|
|
926
942
|
] });
|
|
927
943
|
}
|
|
@@ -943,12 +959,12 @@ function PasskeyEnrollView({
|
|
|
943
959
|
isEnrolling,
|
|
944
960
|
error: enrollmentError
|
|
945
961
|
} = react.usePasskeyEnrollment();
|
|
946
|
-
const [hasStarted, setHasStarted] =
|
|
947
|
-
const [errorMessage, setErrorMessage] =
|
|
948
|
-
const [isRefreshing, setIsRefreshing] =
|
|
962
|
+
const [hasStarted, setHasStarted] = React5.useState(false);
|
|
963
|
+
const [errorMessage, setErrorMessage] = React5.useState(null);
|
|
964
|
+
const [isRefreshing, setIsRefreshing] = React5.useState(false);
|
|
949
965
|
const biometricType = getBiometricType();
|
|
950
966
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
951
|
-
|
|
967
|
+
React5.useEffect(() => {
|
|
952
968
|
console.log("[PasskeyEnrollView] User state:", {
|
|
953
969
|
user,
|
|
954
970
|
keyStorageType: user?.keyStorageType,
|
|
@@ -956,7 +972,7 @@ function PasskeyEnrollView({
|
|
|
956
972
|
hasPasskey
|
|
957
973
|
});
|
|
958
974
|
}, [user, hasPasskey]);
|
|
959
|
-
|
|
975
|
+
React5.useEffect(() => {
|
|
960
976
|
if (hasPasskey && !user?.evmAddress && !isRefreshing) {
|
|
961
977
|
const refreshUserData = async () => {
|
|
962
978
|
try {
|
|
@@ -987,7 +1003,7 @@ function PasskeyEnrollView({
|
|
|
987
1003
|
refreshUserData();
|
|
988
1004
|
}
|
|
989
1005
|
}, [hasPasskey, user?.evmAddress, isRefreshing, client, setUser, user]);
|
|
990
|
-
|
|
1006
|
+
React5.useEffect(() => {
|
|
991
1007
|
if (!user?.id) {
|
|
992
1008
|
const error = new Error("User ID is required for passkey enrollment");
|
|
993
1009
|
setErrorMessage(getUserFriendlyError(error, t));
|
|
@@ -1003,7 +1019,7 @@ function PasskeyEnrollView({
|
|
|
1003
1019
|
}
|
|
1004
1020
|
}
|
|
1005
1021
|
}, [user, onError, t]);
|
|
1006
|
-
|
|
1022
|
+
React5.useEffect(() => {
|
|
1007
1023
|
if (enrollmentError) {
|
|
1008
1024
|
const friendlyMessage = getUserFriendlyError(enrollmentError, t);
|
|
1009
1025
|
setErrorMessage(friendlyMessage);
|
|
@@ -1117,7 +1133,6 @@ function PasskeyEnrollView({
|
|
|
1117
1133
|
biometricType,
|
|
1118
1134
|
biometricMessage: getBiometricMessage(),
|
|
1119
1135
|
errorMessage,
|
|
1120
|
-
accentColor,
|
|
1121
1136
|
onEnroll: () => {
|
|
1122
1137
|
setHasStarted(true);
|
|
1123
1138
|
handleEnroll();
|
|
@@ -1158,8 +1173,8 @@ function MpcConnectView({
|
|
|
1158
1173
|
isConnecting,
|
|
1159
1174
|
error: connectionError
|
|
1160
1175
|
} = react.useMpcConnection();
|
|
1161
|
-
const [errorMessage, setErrorMessage] =
|
|
1162
|
-
|
|
1176
|
+
const [errorMessage, setErrorMessage] = React5.useState(null);
|
|
1177
|
+
React5.useEffect(() => {
|
|
1163
1178
|
if (connectionError) {
|
|
1164
1179
|
setErrorMessage(connectionError.message);
|
|
1165
1180
|
if (onError) {
|
|
@@ -1167,7 +1182,7 @@ function MpcConnectView({
|
|
|
1167
1182
|
}
|
|
1168
1183
|
}
|
|
1169
1184
|
}, [connectionError, onError]);
|
|
1170
|
-
|
|
1185
|
+
React5.useEffect(() => {
|
|
1171
1186
|
handleConnect();
|
|
1172
1187
|
}, []);
|
|
1173
1188
|
const handleConnect = async () => {
|
|
@@ -1228,7 +1243,7 @@ function MpcConnectView({
|
|
|
1228
1243
|
);
|
|
1229
1244
|
}
|
|
1230
1245
|
var CopyButton = ({ text, className, onCopy }) => {
|
|
1231
|
-
const [copied, setCopied] =
|
|
1246
|
+
const [copied, setCopied] = React5.useState(false);
|
|
1232
1247
|
const handleCopy = async () => {
|
|
1233
1248
|
try {
|
|
1234
1249
|
await navigator.clipboard.writeText(text);
|
|
@@ -1424,55 +1439,6 @@ function PoweredBy() {
|
|
|
1424
1439
|
)
|
|
1425
1440
|
] });
|
|
1426
1441
|
}
|
|
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 = React.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
1442
|
var EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1477
1443
|
"svg",
|
|
1478
1444
|
{
|
|
@@ -1509,9 +1475,9 @@ var EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
|
1509
1475
|
);
|
|
1510
1476
|
function EmailInlineInput({ onSubmit, accentColor }) {
|
|
1511
1477
|
const { t } = useI18n();
|
|
1512
|
-
const [email, setEmail] =
|
|
1513
|
-
const [error, setError] =
|
|
1514
|
-
const [isLoading, setIsLoading] =
|
|
1478
|
+
const [email, setEmail] = React5.useState("");
|
|
1479
|
+
const [error, setError] = React5.useState(null);
|
|
1480
|
+
const [isLoading, setIsLoading] = React5.useState(false);
|
|
1515
1481
|
const handleSubmit = async (e) => {
|
|
1516
1482
|
e.preventDefault();
|
|
1517
1483
|
setError(null);
|
|
@@ -1634,14 +1600,14 @@ function SigninSelectScreen({
|
|
|
1634
1600
|
function CodeInputScreen({ email, onSubmit, onResend }) {
|
|
1635
1601
|
const { t } = useI18n();
|
|
1636
1602
|
const { accentColor } = useVolrUI();
|
|
1637
|
-
const [digits, setDigits] =
|
|
1638
|
-
const [error, setError] =
|
|
1639
|
-
const [isLoading, setIsLoading] =
|
|
1640
|
-
const inputRefs =
|
|
1641
|
-
|
|
1603
|
+
const [digits, setDigits] = React5.useState(Array(6).fill(""));
|
|
1604
|
+
const [error, setError] = React5.useState(null);
|
|
1605
|
+
const [isLoading, setIsLoading] = React5.useState(false);
|
|
1606
|
+
const inputRefs = React5.useRef([]);
|
|
1607
|
+
React5.useEffect(() => {
|
|
1642
1608
|
inputRefs.current[0]?.focus();
|
|
1643
1609
|
}, []);
|
|
1644
|
-
|
|
1610
|
+
React5.useEffect(() => {
|
|
1645
1611
|
const code = digits.join("");
|
|
1646
1612
|
if (code.length === 6 && !isLoading) {
|
|
1647
1613
|
handleSubmit(code);
|
|
@@ -2062,13 +2028,12 @@ function SiweLoginScreen({
|
|
|
2062
2028
|
onClose
|
|
2063
2029
|
}) {
|
|
2064
2030
|
const { t } = useI18n();
|
|
2065
|
-
const { accentColor } = useVolrUI();
|
|
2066
2031
|
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] =
|
|
2032
|
+
const [isLoading, setIsLoading] = React5.useState(false);
|
|
2033
|
+
const [step, setStep] = React5.useState("connect");
|
|
2034
|
+
const [account, setAccount] = React5.useState(null);
|
|
2035
|
+
const [error, setError] = React5.useState(null);
|
|
2036
|
+
const [walletConnector, setWalletConnector] = React5.useState(
|
|
2072
2037
|
void 0
|
|
2073
2038
|
);
|
|
2074
2039
|
const detectWalletConnector = () => {
|
|
@@ -2087,7 +2052,7 @@ function SiweLoginScreen({
|
|
|
2087
2052
|
if (provider.isBraveWallet) return "com.brave.wallet";
|
|
2088
2053
|
return "unknown";
|
|
2089
2054
|
};
|
|
2090
|
-
|
|
2055
|
+
React5.useEffect(() => {
|
|
2091
2056
|
if (typeof window !== "undefined" && window.ethereum) {
|
|
2092
2057
|
window.ethereum.request({ method: "eth_accounts" }).then((accounts) => {
|
|
2093
2058
|
if (accounts.length > 0) {
|
|
@@ -2174,10 +2139,12 @@ Issued At: ${issuedAt}`;
|
|
|
2174
2139
|
};
|
|
2175
2140
|
const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:max-w-md volr:mx-auto", children: [
|
|
2176
2141
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2177
|
-
|
|
2142
|
+
Button,
|
|
2178
2143
|
{
|
|
2144
|
+
variant: "ghost",
|
|
2145
|
+
size: "sm",
|
|
2179
2146
|
onClick: onBack,
|
|
2180
|
-
className: "volr:
|
|
2147
|
+
className: "volr:mb-4 volr:-ml-2",
|
|
2181
2148
|
children: [
|
|
2182
2149
|
"\u2190 ",
|
|
2183
2150
|
t("common.back")
|
|
@@ -2185,10 +2152,10 @@ Issued At: ${issuedAt}`;
|
|
|
2185
2152
|
}
|
|
2186
2153
|
),
|
|
2187
2154
|
/* @__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-
|
|
2155
|
+
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
2156
|
/* @__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-
|
|
2157
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-slate-500 volr:mb-1", children: t("login.wallet.connected") }),
|
|
2158
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-sm volr:font-medium volr:text-slate-900 volr:font-mono", children: [
|
|
2192
2159
|
account.slice(0, 6),
|
|
2193
2160
|
"...",
|
|
2194
2161
|
account.slice(-4)
|
|
@@ -2198,25 +2165,21 @@ Issued At: ${issuedAt}`;
|
|
|
2198
2165
|
] }),
|
|
2199
2166
|
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 }),
|
|
2200
2167
|
step === "connect" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2201
|
-
|
|
2168
|
+
Button,
|
|
2202
2169
|
{
|
|
2170
|
+
variant: "primary",
|
|
2171
|
+
fullWidth: true,
|
|
2203
2172
|
onClick: handleConnectWallet,
|
|
2204
2173
|
disabled: isLoading,
|
|
2205
|
-
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"}`,
|
|
2206
|
-
style: {
|
|
2207
|
-
backgroundColor: isLoading ? void 0 : accentColor
|
|
2208
|
-
},
|
|
2209
2174
|
children: isLoading ? t("common.loading") : t("login.wallet.connect")
|
|
2210
2175
|
}
|
|
2211
2176
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
2212
|
-
|
|
2177
|
+
Button,
|
|
2213
2178
|
{
|
|
2179
|
+
variant: "primary",
|
|
2180
|
+
fullWidth: true,
|
|
2214
2181
|
onClick: handleSign,
|
|
2215
2182
|
disabled: isLoading,
|
|
2216
|
-
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"}`,
|
|
2217
|
-
style: {
|
|
2218
|
-
backgroundColor: isLoading ? void 0 : accentColor
|
|
2219
|
-
},
|
|
2220
2183
|
children: isLoading ? t("common.loading") : t("login.wallet.sign")
|
|
2221
2184
|
}
|
|
2222
2185
|
)
|
|
@@ -2240,13 +2203,13 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2240
2203
|
const { logout, user } = react.useVolrContext();
|
|
2241
2204
|
const { appName, branding } = useVolrUI();
|
|
2242
2205
|
const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
|
|
2243
|
-
const [currentScreen, setCurrentScreen] =
|
|
2244
|
-
const [email, setEmail] =
|
|
2206
|
+
const [currentScreen, setCurrentScreen] = React5.useState("method-select");
|
|
2207
|
+
const [email, setEmail] = React5.useState("");
|
|
2245
2208
|
const hasPasskey = user?.keyStorageType === "passkey";
|
|
2246
2209
|
const isMobile = useMediaQuery("(max-width: 500px)");
|
|
2247
2210
|
const isWideViewport = useMediaQuery("(min-width: 864px)");
|
|
2248
2211
|
const shouldUseWideLayout = !isMobile && isWideViewport && Boolean(branding) && currentScreen === "method-select";
|
|
2249
|
-
|
|
2212
|
+
React5.useEffect(() => {
|
|
2250
2213
|
if (!isOpen) {
|
|
2251
2214
|
setCurrentScreen("method-select");
|
|
2252
2215
|
setEmail("");
|
|
@@ -2407,7 +2370,7 @@ function SigninModal({ isOpen, onClose, onError }) {
|
|
|
2407
2370
|
function AccountModal({ isOpen, onClose, onError }) {
|
|
2408
2371
|
const { user, logout } = react.useVolrContext();
|
|
2409
2372
|
const { t } = useI18n();
|
|
2410
|
-
const [isLoggingOut, setIsLoggingOut] =
|
|
2373
|
+
const [isLoggingOut, setIsLoggingOut] = React5.useState(false);
|
|
2411
2374
|
if (!user) {
|
|
2412
2375
|
return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
|
|
2413
2376
|
}
|
|
@@ -2449,11 +2412,12 @@ function AccountModal({ isOpen, onClose, onError }) {
|
|
|
2449
2412
|
] })
|
|
2450
2413
|
] }),
|
|
2451
2414
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2452
|
-
|
|
2415
|
+
Button,
|
|
2453
2416
|
{
|
|
2417
|
+
variant: "outline",
|
|
2418
|
+
fullWidth: true,
|
|
2454
2419
|
onClick: handleLogout,
|
|
2455
2420
|
disabled: isLoggingOut,
|
|
2456
|
-
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",
|
|
2457
2421
|
children: isLoggingOut ? t("common.loading") : t("account.logout")
|
|
2458
2422
|
}
|
|
2459
2423
|
)
|
|
@@ -2510,7 +2474,7 @@ function AssetSelectView({
|
|
|
2510
2474
|
}) })
|
|
2511
2475
|
] });
|
|
2512
2476
|
}
|
|
2513
|
-
var TextLinkButton =
|
|
2477
|
+
var TextLinkButton = React5__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
|
|
2514
2478
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2515
2479
|
"button",
|
|
2516
2480
|
{
|
|
@@ -2769,7 +2733,7 @@ var DepositCompletedToast = ({
|
|
|
2769
2733
|
symbol
|
|
2770
2734
|
}) => {
|
|
2771
2735
|
const { t } = useI18n();
|
|
2772
|
-
const [expanded, setExpanded] =
|
|
2736
|
+
const [expanded, setExpanded] = React5.useState(false);
|
|
2773
2737
|
const formatAmount = (amount) => {
|
|
2774
2738
|
const divisor = BigInt(10 ** decimals);
|
|
2775
2739
|
const whole = amount / divisor;
|
|
@@ -2898,10 +2862,10 @@ function DepositQRView(props) {
|
|
|
2898
2862
|
const { t } = useI18n();
|
|
2899
2863
|
const { config } = react.useVolrContext();
|
|
2900
2864
|
const { client } = react.useInternalAuth();
|
|
2901
|
-
const [chainName, setChainName] =
|
|
2902
|
-
const [showOtherTokenModal, setShowOtherTokenModal] =
|
|
2903
|
-
const [showToast, setShowToast] =
|
|
2904
|
-
const eip681 =
|
|
2865
|
+
const [chainName, setChainName] = React5.useState(null);
|
|
2866
|
+
const [showOtherTokenModal, setShowOtherTokenModal] = React5.useState(false);
|
|
2867
|
+
const [showToast, setShowToast] = React5.useState(false);
|
|
2868
|
+
const eip681 = React5.useMemo(() => {
|
|
2905
2869
|
return `ethereum:${props.address}`;
|
|
2906
2870
|
}, [props.address]);
|
|
2907
2871
|
const status = react.useDepositListener({
|
|
@@ -2915,17 +2879,17 @@ function DepositQRView(props) {
|
|
|
2915
2879
|
},
|
|
2916
2880
|
address: props.address
|
|
2917
2881
|
});
|
|
2918
|
-
|
|
2882
|
+
React5.useEffect(() => {
|
|
2919
2883
|
console.log("[DepositQRView] Status changed:", status);
|
|
2920
2884
|
if (status.state === "detected") {
|
|
2921
2885
|
setShowToast(true);
|
|
2922
2886
|
}
|
|
2923
2887
|
}, [status.state]);
|
|
2924
|
-
const getNetworkInfo =
|
|
2888
|
+
const getNetworkInfo = React5.useCallback(
|
|
2925
2889
|
react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
|
|
2926
2890
|
[client, config.rpcOverrides]
|
|
2927
2891
|
);
|
|
2928
|
-
|
|
2892
|
+
React5.useEffect(() => {
|
|
2929
2893
|
let cancelled = false;
|
|
2930
2894
|
const loadChainName = async () => {
|
|
2931
2895
|
try {
|
|
@@ -3032,10 +2996,10 @@ var DepositModal = ({
|
|
|
3032
2996
|
}) => {
|
|
3033
2997
|
const { user } = react.useVolrContext();
|
|
3034
2998
|
const { client } = react.useInternalAuth();
|
|
3035
|
-
const [depositAssets, setDepositAssets] =
|
|
3036
|
-
const [isLoading, setIsLoading] =
|
|
3037
|
-
const [error, setError] =
|
|
3038
|
-
|
|
2999
|
+
const [depositAssets, setDepositAssets] = React5.useState([]);
|
|
3000
|
+
const [isLoading, setIsLoading] = React5.useState(true);
|
|
3001
|
+
const [error, setError] = React5.useState(null);
|
|
3002
|
+
React5.useEffect(() => {
|
|
3039
3003
|
if (!open) return;
|
|
3040
3004
|
setIsLoading(true);
|
|
3041
3005
|
setError(null);
|
|
@@ -3063,24 +3027,24 @@ var DepositModal = ({
|
|
|
3063
3027
|
if (depositAssets.length === 1) return 0;
|
|
3064
3028
|
return -1;
|
|
3065
3029
|
};
|
|
3066
|
-
const [selectedIdx, setSelectedIdx] =
|
|
3067
|
-
|
|
3030
|
+
const [selectedIdx, setSelectedIdx] = React5.useState(-1);
|
|
3031
|
+
React5.useEffect(() => {
|
|
3068
3032
|
if (open && !isLoading && depositAssets.length > 0) {
|
|
3069
3033
|
setSelectedIdx(getInitialIndex());
|
|
3070
3034
|
}
|
|
3071
3035
|
}, [open, isLoading, depositAssets.length, asset]);
|
|
3072
|
-
|
|
3036
|
+
React5.useEffect(() => {
|
|
3073
3037
|
if (!open) {
|
|
3074
3038
|
setSelectedIdx(-1);
|
|
3075
3039
|
}
|
|
3076
3040
|
}, [open]);
|
|
3077
|
-
const selected =
|
|
3041
|
+
const selected = React5.useMemo(
|
|
3078
3042
|
() => depositAssets[selectedIdx],
|
|
3079
3043
|
[depositAssets, selectedIdx]
|
|
3080
3044
|
);
|
|
3081
3045
|
const showSelector = hasAssets && depositAssets.length > 1 && selectedIdx === -1;
|
|
3082
3046
|
const showQR = hasAssets && user?.evmAddress && selectedIdx >= 0;
|
|
3083
|
-
const body =
|
|
3047
|
+
const body = React5.useMemo(() => {
|
|
3084
3048
|
if (isLoading) {
|
|
3085
3049
|
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..." }) });
|
|
3086
3050
|
}
|
|
@@ -3144,9 +3108,9 @@ var DepositModal = ({
|
|
|
3144
3108
|
body
|
|
3145
3109
|
] });
|
|
3146
3110
|
};
|
|
3147
|
-
var VolrUIContext =
|
|
3111
|
+
var VolrUIContext = React5__default.default.createContext(null);
|
|
3148
3112
|
var useVolrUI = () => {
|
|
3149
|
-
const context =
|
|
3113
|
+
const context = React5.useContext(VolrUIContext);
|
|
3150
3114
|
if (!context) {
|
|
3151
3115
|
throw new Error("useVolrUI must be used within VolrUIProvider");
|
|
3152
3116
|
}
|
|
@@ -3205,11 +3169,11 @@ var VolrUIProvider = ({
|
|
|
3205
3169
|
const providerPolicy = config.providerPolicy ?? {
|
|
3206
3170
|
enforceOnFirstLogin: true
|
|
3207
3171
|
};
|
|
3208
|
-
const [showOnboarding, setShowOnboarding] =
|
|
3209
|
-
const [keyStorageTypeError, setKeyStorageTypeError] =
|
|
3172
|
+
const [showOnboarding, setShowOnboarding] = React5.useState(false);
|
|
3173
|
+
const [keyStorageTypeError, setKeyStorageTypeError] = React5.useState(
|
|
3210
3174
|
null
|
|
3211
3175
|
);
|
|
3212
|
-
|
|
3176
|
+
React5.useEffect(() => {
|
|
3213
3177
|
if (providerPolicy.enforceOnFirstLogin !== false && !keyStorageType) {
|
|
3214
3178
|
const errorMessage = "keyStorageType must be specified in VolrUIProvider props. Please set keyStorageType prop in VolrUIProvider.";
|
|
3215
3179
|
console.error(errorMessage);
|
|
@@ -3273,9 +3237,9 @@ var VolrUIProvider = ({
|
|
|
3273
3237
|
};
|
|
3274
3238
|
function AccountModalPortal() {
|
|
3275
3239
|
const { isOpen, mode, close } = useVolrModal();
|
|
3276
|
-
const [portalRoot, setPortalRoot] =
|
|
3277
|
-
const [error, setError] =
|
|
3278
|
-
|
|
3240
|
+
const [portalRoot, setPortalRoot] = React5.useState(null);
|
|
3241
|
+
const [error, setError] = React5.useState(null);
|
|
3242
|
+
React5.useEffect(() => {
|
|
3279
3243
|
if (typeof window === "undefined") return;
|
|
3280
3244
|
let root = document.getElementById("volr-modal-root");
|
|
3281
3245
|
if (!root) {
|
|
@@ -3334,9 +3298,9 @@ function AccountModalPortal() {
|
|
|
3334
3298
|
function DepositModalPortal() {
|
|
3335
3299
|
const { isOpen, mode, asset, close } = useVolrModal();
|
|
3336
3300
|
const { user } = react.useVolrContext();
|
|
3337
|
-
const [portalRoot, setPortalRoot] =
|
|
3338
|
-
const [showLogin, setShowLogin] =
|
|
3339
|
-
|
|
3301
|
+
const [portalRoot, setPortalRoot] = React5.useState(null);
|
|
3302
|
+
const [showLogin, setShowLogin] = React5.useState(false);
|
|
3303
|
+
React5.useEffect(() => {
|
|
3340
3304
|
if (typeof window === "undefined") return;
|
|
3341
3305
|
let root = document.getElementById("volr-modal-root");
|
|
3342
3306
|
if (!root) {
|
|
@@ -3351,7 +3315,7 @@ function DepositModalPortal() {
|
|
|
3351
3315
|
}
|
|
3352
3316
|
};
|
|
3353
3317
|
}, []);
|
|
3354
|
-
|
|
3318
|
+
React5.useEffect(() => {
|
|
3355
3319
|
if (isOpen && mode === "deposit" && !user) {
|
|
3356
3320
|
setShowLogin(true);
|
|
3357
3321
|
} else {
|
|
@@ -3391,7 +3355,7 @@ function OnboardingChecker({
|
|
|
3391
3355
|
}) {
|
|
3392
3356
|
const { user, provider, isLoading } = react.useVolrContext();
|
|
3393
3357
|
const { isOpen: isModalOpen } = useVolrModal();
|
|
3394
|
-
|
|
3358
|
+
React5.useEffect(() => {
|
|
3395
3359
|
if (isLoading) {
|
|
3396
3360
|
return;
|
|
3397
3361
|
}
|
|
@@ -3430,7 +3394,7 @@ function OnboardingChecker({
|
|
|
3430
3394
|
}
|
|
3431
3395
|
function useSwitchNetwork() {
|
|
3432
3396
|
const { client } = react.useInternalAuth();
|
|
3433
|
-
return
|
|
3397
|
+
return React5.useCallback(
|
|
3434
3398
|
async (chainId) => {
|
|
3435
3399
|
if (typeof window === "undefined" || !window.ethereum) {
|
|
3436
3400
|
throw new Error("No wallet found");
|