@volr/react-ui 0.1.97 → 0.1.99

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.js CHANGED
@@ -722,7 +722,7 @@ function useMediaQuery(query) {
722
722
  }
723
723
 
724
724
  // src/generated/volr-sdk-css.ts
725
- 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-100:oklch(93.6% .032 17.717);--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-100:oklch(96.2% .044 156.743);--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-emerald-600:oklch(59.6% .145 163.225);--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-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-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-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-spin:spin 1s linear infinite;--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);--volr-bg:#fff;--volr-bg-secondary:#f8fafc;--volr-bg-tertiary:#f1f5f9;--volr-text:#0f172a;--volr-text-secondary:#475569;--volr-text-muted:#94a3b8;--volr-border:#e2e8f0;--volr-border-strong:#cbd5e1;--volr-hover-bg:#f8fafc;--volr-error-bg:#fef2f2;--volr-error-border:#fecaca;--volr-error-text:#991b1b}:host([data-theme=dark]){--volr-bg:#1c1c1e;--volr-bg-secondary:#2c2c2e;--volr-bg-tertiary:#3a3a3c;--volr-text:#f5f5f7;--volr-text-secondary:#c7c7cc;--volr-text-muted:#8e8e93;--volr-border:#3a3a3c;--volr-border-strong:#48484a;--volr-hover-bg:#2c2c2e;--volr-error-bg:#3c1f1f;--volr-error-border:#7f1d1d;--volr-error-text:#fca5a5}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family);color:var(--volr-text)}button,input,select,textarea{color:var(--volr-text);background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:var(--volr-text-muted)}h1,h2,h3{color:var(--volr-text);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);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);background-color:var(--volr-bg);border-width:1px;border-color:var(--volr-border-strong);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-text-muted);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{background-color:var(--volr-hover-bg);color:var(--volr-text-secondary)}.volr-dialog-close:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{border:1px solid var(--volr-border-strong);background-color:var(--volr-bg);width:100%;color:var(--volr-text);border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:var(--volr-text-muted)}.volr-email-input:focus{border-color:var(--volr-border-strong);box-shadow:0 0 0 2px var(--volr-border-strong)}.volr-option-button{border:1px solid var(--volr-border);background-color:var(--volr-bg);width:100%;color:var(--volr-text);cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;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:var(--volr-hover-bg);border-color:var(--volr-border)}.volr-option-button:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}}@layer utilities{.volr\\:pointer-events-auto{pointer-events:auto}.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-4{right:calc(var(--volr-spacing)*-4)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:-left-4{left:calc(var(--volr-spacing)*-4)}.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\\: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\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1{height:calc(var(--volr-spacing)*1)}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-3{height:calc(var(--volr-spacing)*3)}.volr\\:h-4{height:calc(var(--volr-spacing)*4)}.volr\\:h-5{height:calc(var(--volr-spacing)*5)}.volr\\:h-6{height:calc(var(--volr-spacing)*6)}.volr\\:h-7{height:calc(var(--volr-spacing)*7)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-12{height:calc(var(--volr-spacing)*12)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-16{height:calc(var(--volr-spacing)*16)}.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-\\[0\\.8em\\]{height:.8em}.volr\\:h-\\[200px\\]{height:200px}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-36{max-height:calc(var(--volr-spacing)*36)}.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\\:min-h-\\[500px\\]{min-height:500px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-4{width:calc(var(--volr-spacing)*4)}.volr\\:w-5{width:calc(var(--volr-spacing)*5)}.volr\\:w-6{width:calc(var(--volr-spacing)*6)}.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-16{width:calc(var(--volr-spacing)*16)}.volr\\:w-20{width:calc(var(--volr-spacing)*20)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-32{width:calc(var(--volr-spacing)*32)}.volr\\:w-36{width:calc(var(--volr-spacing)*36)}.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-\\[200px\\]{width:200px}.volr\\:w-auto{width:auto}.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,.volr\\: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\\:animate-spin{animation:var(--volr-animate-spin)}.volr\\:list-inside{list-style-position:inside}.volr\\:list-decimal{list-style-type:decimal}.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-1>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*1)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*1)*calc(1 - var(--volr-tw-space-y-reverse)))}: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)))}:where(.volr\\:space-y-4>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*4)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*4)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-6>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*6)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*6)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-8>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*8)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*8)*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{border-radius:.25rem}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-2xl{border-top-left-radius:var(--volr-radius-2xl);border-top-right-radius:var(--volr-radius-2xl)}.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-t-2{border-top-style:var(--volr-tw-border-style);border-top-width:2px}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.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-green-100{background-color:var(--volr-color-green-100)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-red-100{background-color:var(--volr-color-red-100)}.volr\\:bg-slate-50{background-color:var(--volr-color-slate-50)}.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-300{background-color:var(--volr-color-slate-300)}.volr\\:bg-slate-900{background-color:var(--volr-color-slate-900)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right in oklab}}.volr\\:bg-linear-to-br{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\\:object-cover{object-fit:cover}.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-6{padding:calc(var(--volr-spacing)*6)}.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-2\\.5{padding-block:calc(var(--volr-spacing)*2.5)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-4{padding-block:calc(var(--volr-spacing)*4)}.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-2{padding-top:calc(var(--volr-spacing)*2)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pr-3{padding-right:calc(var(--volr-spacing)*3)}.volr\\:pb-2{padding-bottom:calc(var(--volr-spacing)*2)}.volr\\:pb-4{padding-bottom:calc(var(--volr-spacing)*4)}.volr\\:pl-11{padding-left:calc(var(--volr-spacing)*11)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:text-right{text-align:right}.volr\\:align-baseline{vertical-align:baseline}.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-emerald-600{color:var(--volr-color-emerald-600)}.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-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-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-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-75{opacity:.75}.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-\\[0_-8px_30px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\]{--volr-tw-shadow:0 -8px 30px var(--volr-tw-shadow-color,#0003);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-md{--volr-tw-shadow:0 4px 6px -1px var(--volr-tw-shadow-color,#0000001a),0 2px 4px -2px 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\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:opacity-50:disabled{opacity:.5}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.volr-text-secondary{color:var(--volr-text-secondary)}.volr-text-muted{color:var(--volr-text-muted)}.volr-bg-secondary{background-color:var(--volr-bg-secondary)}.volr-bg-tertiary{background-color:var(--volr-bg-tertiary)}.volr-border{border-color:var(--volr-border)}.volr-border-strong{border-color:var(--volr-border-strong)}.volr-divider-line{background-color:var(--volr-border)}.volr-error{background-color:var(--volr-error-bg);border-color:var(--volr-error-border);color:var(--volr-error-text)}.volr-hover:hover{background-color:var(--volr-hover-bg)}.volr-surface{background-color:var(--volr-bg)}}@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 spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
725
+ 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-50:oklch(98.2% .018 155.826);--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-emerald-600:oklch(59.6% .145 163.225);--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-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-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-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-spin:spin 1s linear infinite;--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);--volr-bg:#fff;--volr-bg-secondary:#f8fafc;--volr-bg-tertiary:#f1f5f9;--volr-text:#0f172a;--volr-text-secondary:#475569;--volr-text-muted:#94a3b8;--volr-border:#e2e8f0;--volr-border-strong:#cbd5e1;--volr-hover-bg:#f8fafc;--volr-error-bg:#fef2f2;--volr-error-border:#fecaca;--volr-error-text:#991b1b}:host([data-theme=dark]){--volr-bg:#1c1c1e;--volr-bg-secondary:#2c2c2e;--volr-bg-tertiary:#3a3a3c;--volr-text:#f5f5f7;--volr-text-secondary:#c7c7cc;--volr-text-muted:#8e8e93;--volr-border:#3a3a3c;--volr-border-strong:#48484a;--volr-hover-bg:#2c2c2e;--volr-error-bg:#3c1f1f;--volr-error-border:#7f1d1d;--volr-error-text:#fca5a5}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family);color:var(--volr-text)}button,input,select,textarea{color:var(--volr-text);background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:var(--volr-text-muted)}h1,h2,h3{color:var(--volr-text);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);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);background-color:var(--volr-bg);border-width:1px;border-color:var(--volr-border-strong);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-text-muted);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{background-color:var(--volr-hover-bg);color:var(--volr-text-secondary)}.volr-dialog-close:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{border:1px solid var(--volr-border-strong);background-color:var(--volr-bg);width:100%;color:var(--volr-text);border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:var(--volr-text-muted)}.volr-email-input:focus{border-color:var(--volr-border-strong);box-shadow:0 0 0 2px var(--volr-border-strong)}.volr-option-button{border:1px solid var(--volr-border);background-color:var(--volr-bg);width:100%;color:var(--volr-text);cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;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:var(--volr-hover-bg);border-color:var(--volr-border)}.volr-option-button:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}}@layer utilities{.volr\\:pointer-events-auto{pointer-events:auto}.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-4{right:calc(var(--volr-spacing)*-4)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:-left-4{left:calc(var(--volr-spacing)*-4)}.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\\: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\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1{height:calc(var(--volr-spacing)*1)}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-3{height:calc(var(--volr-spacing)*3)}.volr\\:h-4{height:calc(var(--volr-spacing)*4)}.volr\\:h-5{height:calc(var(--volr-spacing)*5)}.volr\\:h-6{height:calc(var(--volr-spacing)*6)}.volr\\:h-7{height:calc(var(--volr-spacing)*7)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-12{height:calc(var(--volr-spacing)*12)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-16{height:calc(var(--volr-spacing)*16)}.volr\\:h-20{height:calc(var(--volr-spacing)*20)}.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-\\[0\\.8em\\]{height:.8em}.volr\\:h-\\[200px\\]{height:200px}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-36{max-height:calc(var(--volr-spacing)*36)}.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\\:min-h-\\[500px\\]{min-height:500px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-4{width:calc(var(--volr-spacing)*4)}.volr\\:w-5{width:calc(var(--volr-spacing)*5)}.volr\\:w-6{width:calc(var(--volr-spacing)*6)}.volr\\:w-7{width:calc(var(--volr-spacing)*7)}.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-14{width:calc(var(--volr-spacing)*14)}.volr\\:w-16{width:calc(var(--volr-spacing)*16)}.volr\\:w-20{width:calc(var(--volr-spacing)*20)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-32{width:calc(var(--volr-spacing)*32)}.volr\\:w-36{width:calc(var(--volr-spacing)*36)}.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-\\[200px\\]{width:200px}.volr\\:w-auto{width:auto}.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,.volr\\: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\\:animate-spin{animation:var(--volr-animate-spin)}.volr\\:list-inside{list-style-position:inside}.volr\\:list-decimal{list-style-type:decimal}.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-1>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*1)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*1)*calc(1 - var(--volr-tw-space-y-reverse)))}: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)))}:where(.volr\\:space-y-4>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*4)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*4)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-6>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*6)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*6)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-8>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*8)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*8)*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{border-radius:.25rem}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-2xl{border-top-left-radius:var(--volr-radius-2xl);border-top-right-radius:var(--volr-radius-2xl)}.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-t-2{border-top-style:var(--volr-tw-border-style);border-top-width:2px}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.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-green-50{background-color:var(--volr-color-green-50)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-slate-50{background-color:var(--volr-color-slate-50)}.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-900{background-color:var(--volr-color-slate-900)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right in oklab}}.volr\\:bg-linear-to-br{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\\:object-cover{object-fit:cover}.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-2\\.5{padding-block:calc(var(--volr-spacing)*2.5)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-4{padding-block:calc(var(--volr-spacing)*4)}.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-2{padding-top:calc(var(--volr-spacing)*2)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pr-3{padding-right:calc(var(--volr-spacing)*3)}.volr\\:pb-2{padding-bottom:calc(var(--volr-spacing)*2)}.volr\\:pb-4{padding-bottom:calc(var(--volr-spacing)*4)}.volr\\:pl-11{padding-left:calc(var(--volr-spacing)*11)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:text-right{text-align:right}.volr\\:align-baseline{vertical-align:baseline}.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-emerald-600{color:var(--volr-color-emerald-600)}.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-slate-100{color:var(--volr-color-slate-100)}.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-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-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-75{opacity:.75}.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-\\[0_-8px_30px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\]{--volr-tw-shadow:0 -8px 30px var(--volr-tw-shadow-color,#0003);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-md{--volr-tw-shadow:0 4px 6px -1px var(--volr-tw-shadow-color,#0000001a),0 2px 4px -2px 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\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:opacity-50:disabled{opacity:.5}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.volr-text-secondary{color:var(--volr-text-secondary)}.volr-text-muted{color:var(--volr-text-muted)}.volr-bg-secondary{background-color:var(--volr-bg-secondary)}.volr-bg-tertiary{background-color:var(--volr-bg-tertiary)}.volr-border{border-color:var(--volr-border)}.volr-border-strong{border-color:var(--volr-border-strong)}.volr-divider-line{background-color:var(--volr-border)}.volr-error{background-color:var(--volr-error-bg);border-color:var(--volr-error-border);color:var(--volr-error-text)}.volr-hover:hover{background-color:var(--volr-hover-bg)}.volr-surface{background-color:var(--volr-bg)}}@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 spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
726
726
  function useResolvedTheme(theme = "light") {
727
727
  const [resolvedTheme, setResolvedTheme] = useState(() => {
728
728
  if (theme !== "system") return theme;
@@ -3451,7 +3451,9 @@ var initialState = {
3451
3451
  isBalanceLoading: true,
3452
3452
  isConfigLoading: true,
3453
3453
  isPaying: false,
3454
- currentPayment: null,
3454
+ payOptions: null,
3455
+ tokenInfo: null,
3456
+ createdPayment: null,
3455
3457
  txHash: void 0,
3456
3458
  error: void 0,
3457
3459
  logoUrl: void 0,
@@ -3462,13 +3464,15 @@ function paymentModalReducer(state, action) {
3462
3464
  switch (action.type) {
3463
3465
  case "RESET":
3464
3466
  return { ...initialState };
3465
- case "INIT_PAYMENT":
3467
+ case "INIT":
3466
3468
  return {
3467
3469
  ...initialState,
3468
- currentPayment: action.payment,
3470
+ payOptions: action.options,
3469
3471
  isBalanceLoading: true,
3470
3472
  isConfigLoading: true
3471
3473
  };
3474
+ case "SET_TOKEN_INFO":
3475
+ return { ...state, tokenInfo: action.tokenInfo };
3472
3476
  case "SET_BALANCE":
3473
3477
  return { ...state, balance: action.balance };
3474
3478
  case "SET_BALANCE_LOADING":
@@ -3487,6 +3491,8 @@ function paymentModalReducer(state, action) {
3487
3491
  processingStep: "signing",
3488
3492
  error: void 0
3489
3493
  };
3494
+ case "SET_CREATED_PAYMENT":
3495
+ return { ...state, createdPayment: action.payment };
3490
3496
  case "SET_PROCESSING_STEP":
3491
3497
  return { ...state, processingStep: action.step };
3492
3498
  case "SET_TX_HASH":
@@ -3496,7 +3502,7 @@ function paymentModalReducer(state, action) {
3496
3502
  ...state,
3497
3503
  isPaying: false,
3498
3504
  step: "result",
3499
- currentPayment: action.payment
3505
+ createdPayment: action.payment
3500
3506
  };
3501
3507
  case "PAYMENT_ERROR":
3502
3508
  return {
@@ -3525,33 +3531,32 @@ function usePaymentModalState(open, onOpenChange) {
3525
3531
  const { client } = useInternalAuth();
3526
3532
  const { evm } = useVolr();
3527
3533
  const { paymentOptions } = useVolrModal();
3528
- const { updatePaymentToProcessing, pollPaymentStatus } = useVolrPaymentApi();
3534
+ const { createPayment, updatePaymentToProcessing, pollPaymentStatus, failPendingPayment } = useVolrPaymentApi();
3529
3535
  const [state, dispatch] = useReducer(paymentModalReducer, initialState);
3530
3536
  const fetchBalance = useCallback(
3531
- async (payment) => {
3537
+ async (tokenInfo) => {
3532
3538
  if (!user?.evmAddress) {
3533
3539
  dispatch({ type: "SET_BALANCE_LOADING", loading: false });
3534
3540
  return;
3535
3541
  }
3536
3542
  dispatch({ type: "SET_BALANCE_LOADING", loading: true });
3537
3543
  try {
3538
- const evmClient = evm(payment.token.chainId);
3539
- const tokenAddress = payment.token.id.split("_")[1];
3544
+ const evmClient = evm(tokenInfo.chainId);
3540
3545
  let balanceRaw;
3541
- if (tokenAddress === "native") {
3546
+ if (tokenInfo.address === "native") {
3542
3547
  balanceRaw = await evmClient.getBalance(user.evmAddress);
3543
3548
  } else {
3544
3549
  balanceRaw = await evmClient.readContract({
3545
- address: tokenAddress,
3550
+ address: tokenInfo.address,
3546
3551
  abi: erc20Abi,
3547
3552
  functionName: "balanceOf",
3548
3553
  args: [user.evmAddress]
3549
3554
  });
3550
3555
  }
3551
- const balanceNum = Number(balanceRaw) / Math.pow(10, payment.token.decimals);
3556
+ const balanceNum = Number(balanceRaw) / Math.pow(10, tokenInfo.decimals);
3552
3557
  const formattedBalance = balanceNum.toLocaleString(void 0, {
3553
3558
  minimumFractionDigits: 0,
3554
- maximumFractionDigits: payment.token.decimals > 6 ? 6 : payment.token.decimals
3559
+ maximumFractionDigits: tokenInfo.decimals > 6 ? 6 : tokenInfo.decimals
3555
3560
  });
3556
3561
  dispatch({ type: "SET_BALANCE", balance: formattedBalance });
3557
3562
  } catch (err) {
@@ -3573,69 +3578,74 @@ function usePaymentModalState(open, onOpenChange) {
3573
3578
  const fetchPaymentConfig = useCallback(async () => {
3574
3579
  dispatch({ type: "SET_CONFIG_LOADING", loading: true });
3575
3580
  try {
3576
- const response = await client.get(
3577
- "/payments/config"
3578
- );
3579
- dispatch({
3580
- type: "SET_RECEIVER_ADDRESS",
3581
- receiverAddress: response.receiverAddress
3582
- });
3581
+ const response = await client.get("/payments/config");
3582
+ dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: response.receiverAddress });
3583
+ dispatch({ type: "SET_TOKEN_INFO", tokenInfo: response.token });
3584
+ if (response.token) {
3585
+ fetchBalance(response.token);
3586
+ }
3583
3587
  } catch (err) {
3584
3588
  console.error("Failed to fetch payment config:", err);
3585
3589
  dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: null });
3586
3590
  } finally {
3587
3591
  dispatch({ type: "SET_CONFIG_LOADING", loading: false });
3588
3592
  }
3589
- }, [client]);
3593
+ }, [client, fetchBalance]);
3590
3594
  useEffect(() => {
3591
- if (open && paymentOptions) {
3592
- dispatch({ type: "INIT_PAYMENT", payment: paymentOptions.payment });
3593
- fetchBalance(paymentOptions.payment);
3595
+ if (open && paymentOptions?.options) {
3596
+ if (state.step === "processing" || state.step === "result") {
3597
+ return;
3598
+ }
3599
+ dispatch({ type: "INIT", options: paymentOptions.options });
3594
3600
  fetchBranding();
3595
3601
  fetchPaymentConfig();
3596
3602
  } else if (!open) {
3597
3603
  dispatch({ type: "RESET" });
3598
3604
  }
3599
- }, [open, paymentOptions, fetchBalance, fetchBranding, fetchPaymentConfig]);
3605
+ }, [open, paymentOptions?.options?.amount]);
3600
3606
  const handlePay = useCallback(async () => {
3601
- const { currentPayment, receiverAddress } = state;
3602
- if (!currentPayment || !user?.evmAddress || !paymentOptions || !receiverAddress) {
3607
+ const { payOptions, receiverAddress, tokenInfo } = state;
3608
+ if (!payOptions || !user?.evmAddress || !paymentOptions || !receiverAddress || !tokenInfo) {
3603
3609
  return;
3604
3610
  }
3605
3611
  dispatch({ type: "START_PAYMENT" });
3612
+ let createdPaymentId = null;
3606
3613
  try {
3607
- const evmClient = evm(currentPayment.token.chainId);
3608
- const tokenAddress = currentPayment.token.id.split("_")[1];
3614
+ const payment = await createPayment(payOptions);
3615
+ createdPaymentId = payment.id;
3616
+ dispatch({ type: "SET_CREATED_PAYMENT", payment });
3617
+ paymentOptions.options.handlers?.onCreated?.({ id: payment.id });
3618
+ const evmClient = evm(tokenInfo.chainId);
3609
3619
  dispatch({ type: "SET_PROCESSING_STEP", step: "broadcasting" });
3610
3620
  let result;
3611
- if (tokenAddress === "native") {
3621
+ if (tokenInfo.address === "native") {
3612
3622
  result = await evmClient.sendTransaction({
3613
3623
  to: receiverAddress,
3614
3624
  data: "0x",
3615
- value: BigInt(currentPayment.amount)
3625
+ value: BigInt(payment.amount)
3616
3626
  });
3617
3627
  } else {
3618
3628
  result = await evmClient.sendBatch([
3619
3629
  {
3620
- target: tokenAddress,
3630
+ target: tokenInfo.address,
3621
3631
  abi: erc20Abi,
3622
3632
  functionName: "transfer",
3623
3633
  args: [
3624
3634
  receiverAddress,
3625
- BigInt(currentPayment.amount)
3635
+ BigInt(payment.amount)
3626
3636
  ]
3627
3637
  }
3628
3638
  ]);
3629
3639
  }
3630
3640
  dispatch({ type: "SET_TX_HASH", txHash: result.txHash ?? "" });
3631
3641
  dispatch({ type: "SET_PROCESSING_STEP", step: "confirming" });
3632
- await updatePaymentToProcessing(currentPayment.id, result.txId);
3642
+ await updatePaymentToProcessing(payment.id, result.txId);
3633
3643
  paymentOptions.onProcessing?.({
3634
- ...currentPayment,
3644
+ ...payment,
3635
3645
  txHash: result.txHash ?? "",
3636
3646
  status: "PROCESSING"
3637
3647
  });
3638
- const confirmedPayment = await pollPaymentStatus(currentPayment.id);
3648
+ const confirmedPayment = await pollPaymentStatus(payment.id);
3639
3649
  dispatch({ type: "PAYMENT_SUCCESS", payment: confirmedPayment });
3640
3650
  if (confirmedPayment.status === "CONFIRMED") {
3641
3651
  paymentOptions.onComplete?.(confirmedPayment);
@@ -3649,6 +3659,13 @@ function usePaymentModalState(open, onOpenChange) {
3649
3659
  }
3650
3660
  } catch (err) {
3651
3661
  console.error("Payment failed:", err);
3662
+ if (createdPaymentId) {
3663
+ try {
3664
+ await failPendingPayment(createdPaymentId);
3665
+ } catch (failErr) {
3666
+ console.error("Failed to mark payment as failed:", failErr);
3667
+ }
3668
+ }
3652
3669
  const paymentError = {
3653
3670
  code: err.code || "PAYMENT_FAILED",
3654
3671
  message: err.message || "Payment failed. Please try again."
@@ -3661,8 +3678,10 @@ function usePaymentModalState(open, onOpenChange) {
3661
3678
  user,
3662
3679
  paymentOptions,
3663
3680
  evm,
3681
+ createPayment,
3664
3682
  updatePaymentToProcessing,
3665
- pollPaymentStatus
3683
+ pollPaymentStatus,
3684
+ failPendingPayment
3666
3685
  ]);
3667
3686
  const handleDeposit = useCallback(() => {
3668
3687
  dispatch({ type: "SHOW_DEPOSIT" });
@@ -3671,25 +3690,25 @@ function usePaymentModalState(open, onOpenChange) {
3671
3690
  (depositOpen) => {
3672
3691
  if (!depositOpen) {
3673
3692
  dispatch({ type: "HIDE_DEPOSIT" });
3674
- if (state.currentPayment) {
3675
- fetchBalance(state.currentPayment);
3693
+ if (state.tokenInfo) {
3694
+ fetchBalance(state.tokenInfo);
3676
3695
  }
3677
3696
  }
3678
3697
  },
3679
- [state.currentPayment, fetchBalance]
3698
+ [state.tokenInfo, fetchBalance]
3680
3699
  );
3681
3700
  const handleDone = useCallback(() => {
3682
- if (state.currentPayment?.status === "CONFIRMED") {
3683
- paymentOptions?.onComplete?.(state.currentPayment);
3701
+ if (state.createdPayment?.status === "CONFIRMED") {
3702
+ paymentOptions?.onComplete?.(state.createdPayment);
3684
3703
  }
3685
3704
  onOpenChange(false);
3686
- }, [state.currentPayment, paymentOptions, onOpenChange]);
3705
+ }, [state.createdPayment, paymentOptions, onOpenChange]);
3687
3706
  const handleRetry = useCallback(() => {
3688
3707
  dispatch({ type: "RETRY" });
3689
- if (state.currentPayment) {
3690
- fetchBalance(state.currentPayment);
3708
+ if (state.tokenInfo) {
3709
+ fetchBalance(state.tokenInfo);
3691
3710
  }
3692
- }, [state.currentPayment, fetchBalance]);
3711
+ }, [state.tokenInfo, fetchBalance]);
3693
3712
  const handleClose = useCallback(() => {
3694
3713
  if (state.step === "processing") {
3695
3714
  return;
@@ -3700,19 +3719,19 @@ function usePaymentModalState(open, onOpenChange) {
3700
3719
  onOpenChange(false);
3701
3720
  }, [state.step, paymentOptions, onOpenChange]);
3702
3721
  const handleReport = useCallback(async () => {
3703
- const { currentPayment, error, step, txHash } = state;
3704
- if (!currentPayment || !error) return;
3722
+ const { createdPayment, error, step, txHash, tokenInfo } = state;
3723
+ if (!createdPayment || !error) return;
3705
3724
  try {
3706
- await client.post(`/payments/${currentPayment.id}/report`, {
3725
+ await client.post(`/payments/${createdPayment.id}/report`, {
3707
3726
  errorCode: error.code,
3708
3727
  errorMessage: error.message,
3709
3728
  platform: "web",
3710
3729
  context: {
3711
3730
  step,
3712
3731
  txHash,
3713
- tokenId: currentPayment.token.id,
3714
- chainId: currentPayment.token.chainId,
3715
- amount: currentPayment.amount
3732
+ tokenId: tokenInfo?.id,
3733
+ chainId: tokenInfo?.chainId,
3734
+ amount: createdPayment.amount
3716
3735
  }
3717
3736
  });
3718
3737
  alert("Error report submitted. Thank you for your feedback.");
@@ -3728,7 +3747,8 @@ Please contact support with this information.`
3728
3747
  }
3729
3748
  }, [state, client]);
3730
3749
  const canClose = state.step !== "processing";
3731
- const isConfigured = state.receiverAddress !== null;
3750
+ const isConfigured = state.receiverAddress !== null && state.tokenInfo !== null;
3751
+ const isReady = !state.isConfigLoading && !state.isBalanceLoading && isConfigured;
3732
3752
  return {
3733
3753
  state,
3734
3754
  handlePay,
@@ -3739,7 +3759,8 @@ Please contact support with this information.`
3739
3759
  handleClose,
3740
3760
  handleReport,
3741
3761
  canClose,
3742
- isConfigured
3762
+ isConfigured,
3763
+ isReady
3743
3764
  };
3744
3765
  }
3745
3766
  var PaymentSkeleton = () => {
@@ -3842,7 +3863,12 @@ var ItemDisplay = ({
3842
3863
  ] });
3843
3864
  };
3844
3865
  var PaymentInfoView = ({
3845
- payment,
3866
+ amount,
3867
+ tokenSymbol,
3868
+ tokenDecimals,
3869
+ itemName,
3870
+ itemDescription,
3871
+ itemImage,
3846
3872
  balance,
3847
3873
  isBalanceLoading,
3848
3874
  logoUrl,
@@ -3850,22 +3876,20 @@ var PaymentInfoView = ({
3850
3876
  onDeposit,
3851
3877
  isPaying
3852
3878
  }) => {
3853
- const { token, itemName, itemDescription, itemImage } = payment;
3854
- const amountInUnits = Number(payment.amount) / Math.pow(10, token.decimals);
3855
- const formattedAmount = amountInUnits.toLocaleString(void 0, {
3879
+ const formattedAmount = amount.toLocaleString(void 0, {
3856
3880
  minimumFractionDigits: 0,
3857
- maximumFractionDigits: token.decimals > 6 ? 6 : token.decimals
3881
+ maximumFractionDigits: tokenDecimals > 6 ? 6 : tokenDecimals
3858
3882
  });
3859
3883
  const balanceNum = parseFloat(balance.replace(/,/g, "") || "0");
3860
- const isInsufficient = !isBalanceLoading && balanceNum < amountInUnits;
3884
+ const isInsufficient = !isBalanceLoading && balanceNum < amount;
3861
3885
  return /* @__PURE__ */ jsxs("div", { className: "volr:space-y-6", children: [
3862
3886
  itemName && /* @__PURE__ */ jsxs(Fragment, { children: [
3863
3887
  /* @__PURE__ */ jsx(
3864
3888
  ItemDisplay,
3865
3889
  {
3866
3890
  name: itemName,
3867
- description: itemDescription ?? void 0,
3868
- image: itemImage ?? void 0,
3891
+ description: itemDescription,
3892
+ image: itemImage,
3869
3893
  logoUrl
3870
3894
  }
3871
3895
  ),
@@ -3875,12 +3899,7 @@ var PaymentInfoView = ({
3875
3899
  /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: "Amount to Pay" }),
3876
3900
  /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-baseline volr:gap-2", children: [
3877
3901
  /* @__PURE__ */ jsx("span", { className: "volr:text-2xl volr:font-bold volr:text-slate-900", children: formattedAmount }),
3878
- /* @__PURE__ */ jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: token.symbol })
3879
- ] }),
3880
- payment.totalUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:text-slate-400", children: [
3881
- "\u2248 $",
3882
- parseFloat(payment.totalUsd).toFixed(2),
3883
- " USD"
3902
+ /* @__PURE__ */ jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: tokenSymbol })
3884
3903
  ] })
3885
3904
  ] }),
3886
3905
  isBalanceLoading ? /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:items-center volr:p-3 volr:bg-slate-50 volr:rounded-lg volr:animate-pulse", children: [
@@ -3890,7 +3909,7 @@ var PaymentInfoView = ({
3890
3909
  BalanceDisplay,
3891
3910
  {
3892
3911
  balance,
3893
- symbol: token.symbol,
3912
+ symbol: tokenSymbol,
3894
3913
  required: formattedAmount,
3895
3914
  isInsufficient
3896
3915
  }
@@ -3926,112 +3945,84 @@ var PaymentInfoView = ({
3926
3945
  )
3927
3946
  ] }),
3928
3947
  "Processing..."
3929
- ] }) : isInsufficient ? "Insufficient Balance" : `Pay ${formattedAmount} ${token.symbol}`
3948
+ ] }) : isInsufficient ? "Insufficient Balance" : `Pay ${formattedAmount} ${tokenSymbol}`
3930
3949
  }
3931
3950
  ),
3932
3951
  isInsufficient && /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: onDeposit, className: "volr:w-full", children: [
3933
3952
  "Deposit ",
3934
- token.symbol
3953
+ tokenSymbol
3935
3954
  ] })
3936
3955
  ] }),
3937
3956
  /* @__PURE__ */ jsx(PoweredBy, {})
3938
3957
  ] });
3939
3958
  };
3940
3959
  var PaymentProcessingView = ({
3941
- step,
3942
- txHash
3960
+ step
3943
3961
  }) => {
3944
- const steps = [
3945
- { id: "signing", label: "Signing transaction" },
3946
- { id: "broadcasting", label: "Broadcasting" },
3947
- { id: "confirming", label: "Confirming on-chain" }
3948
- ];
3949
- const currentStepIndex = steps.findIndex((s) => s.id === step);
3950
- return /* @__PURE__ */ jsxs("div", { className: "volr:p-6 volr:space-y-8", children: [
3951
- /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:py-4", children: /* @__PURE__ */ jsx("div", { className: "volr:relative volr:w-16 volr:h-16", children: /* @__PURE__ */ jsxs(
3952
- "svg",
3953
- {
3954
- className: "volr:animate-spin volr:w-16 volr:h-16 volr:text-slate-900",
3955
- viewBox: "0 0 24 24",
3956
- children: [
3957
- /* @__PURE__ */ jsx(
3958
- "circle",
3959
- {
3960
- className: "volr:opacity-25",
3961
- cx: "12",
3962
- cy: "12",
3963
- r: "10",
3964
- stroke: "currentColor",
3965
- strokeWidth: "3",
3966
- fill: "none"
3967
- }
3968
- ),
3969
- /* @__PURE__ */ jsx(
3970
- "path",
3971
- {
3972
- className: "volr:opacity-75",
3973
- fill: "currentColor",
3974
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
3962
+ const getStatusMessage = () => {
3963
+ switch (step) {
3964
+ case "signing":
3965
+ return "Waiting for confirmation...";
3966
+ case "broadcasting":
3967
+ return "Sending payment...";
3968
+ case "confirming":
3969
+ return "Almost done...";
3970
+ default:
3971
+ return "Processing...";
3972
+ }
3973
+ };
3974
+ const getProgress = () => {
3975
+ switch (step) {
3976
+ case "signing":
3977
+ return 20;
3978
+ case "broadcasting":
3979
+ return 60;
3980
+ case "confirming":
3981
+ return 90;
3982
+ default:
3983
+ return 0;
3984
+ }
3985
+ };
3986
+ const progress = getProgress();
3987
+ return /* @__PURE__ */ jsxs("div", { className: "volr:space-y-8 volr:py-4", children: [
3988
+ /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "volr:relative volr:w-20 volr:h-20", children: [
3989
+ /* @__PURE__ */ jsxs("svg", { className: "volr:w-20 volr:h-20", viewBox: "0 0 36 36", children: [
3990
+ /* @__PURE__ */ jsx(
3991
+ "circle",
3992
+ {
3993
+ cx: "18",
3994
+ cy: "18",
3995
+ r: "16",
3996
+ fill: "none",
3997
+ stroke: "currentColor",
3998
+ strokeWidth: "2",
3999
+ className: "volr:text-slate-100"
4000
+ }
4001
+ ),
4002
+ /* @__PURE__ */ jsx(
4003
+ "circle",
4004
+ {
4005
+ cx: "18",
4006
+ cy: "18",
4007
+ r: "16",
4008
+ fill: "none",
4009
+ stroke: "currentColor",
4010
+ strokeWidth: "2",
4011
+ strokeLinecap: "round",
4012
+ className: "volr:text-slate-900 volr:transition-all volr:duration-500",
4013
+ strokeDasharray: `${progress}, 100`,
4014
+ style: {
4015
+ transform: "rotate(-90deg)",
4016
+ transformOrigin: "center"
3975
4017
  }
3976
- )
3977
- ]
3978
- }
3979
- ) }) }),
3980
- /* @__PURE__ */ jsxs("div", { className: "volr:text-center", children: [
3981
- /* @__PURE__ */ jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: "Processing Payment" }),
3982
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-1", children: "Please wait while we process your transaction" })
3983
- ] }),
3984
- /* @__PURE__ */ jsx("div", { className: "volr:space-y-3", children: steps.map((s, index) => {
3985
- const isCompleted = index < currentStepIndex;
3986
- const isCurrent = index === currentStepIndex;
3987
- return /* @__PURE__ */ jsxs(
3988
- "div",
3989
- {
3990
- className: "volr:flex volr:items-center volr:gap-3 volr:px-3 volr:py-2",
3991
- children: [
3992
- /* @__PURE__ */ jsx(
3993
- "div",
3994
- {
3995
- className: `volr:w-6 volr:h-6 volr:rounded-full volr:flex volr:items-center volr:justify-center ${isCompleted ? "volr:bg-green-100" : isCurrent ? "volr:bg-slate-900" : "volr:bg-slate-100"}`,
3996
- children: isCompleted ? /* @__PURE__ */ jsx(
3997
- "svg",
3998
- {
3999
- className: "volr:w-4 volr:h-4 volr:text-green-600",
4000
- fill: "none",
4001
- viewBox: "0 0 24 24",
4002
- stroke: "currentColor",
4003
- children: /* @__PURE__ */ jsx(
4004
- "path",
4005
- {
4006
- strokeLinecap: "round",
4007
- strokeLinejoin: "round",
4008
- strokeWidth: 2,
4009
- d: "M5 13l4 4L19 7"
4010
- }
4011
- )
4012
- }
4013
- ) : isCurrent ? /* @__PURE__ */ jsx("div", { className: "volr:w-2 volr:h-2 volr:bg-white volr:rounded-full volr:animate-pulse" }) : /* @__PURE__ */ jsx("div", { className: "volr:w-2 volr:h-2 volr:bg-slate-300 volr:rounded-full" })
4014
- }
4015
- ),
4016
- /* @__PURE__ */ jsx(
4017
- "span",
4018
- {
4019
- className: `volr:text-sm ${isCompleted ? "volr:text-green-600 volr:font-medium" : isCurrent ? "volr:text-slate-900 volr:font-medium" : "volr:text-slate-400"}`,
4020
- children: s.label
4021
- }
4022
- )
4023
- ]
4024
- },
4025
- s.id
4026
- );
4027
- }) }),
4028
- txHash && /* @__PURE__ */ jsxs("div", { className: "volr:text-center volr:pt-2", children: [
4029
- /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400", children: "Transaction Hash" }),
4030
- /* @__PURE__ */ jsxs("code", { className: "volr:text-xs volr:text-slate-500 volr:font-mono", children: [
4031
- txHash.slice(0, 10),
4032
- "...",
4033
- txHash.slice(-8)
4034
- ] })
4018
+ }
4019
+ )
4020
+ ] }),
4021
+ /* @__PURE__ */ jsx("div", { className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx("div", { className: "volr:w-2 volr:h-2 volr:bg-slate-900 volr:rounded-full volr:animate-pulse" }) })
4022
+ ] }) }),
4023
+ /* @__PURE__ */ jsxs("div", { className: "volr:text-center volr:space-y-2", children: [
4024
+ /* @__PURE__ */ jsx("p", { className: "volr:text-lg volr:font-medium volr:text-slate-900", children: getStatusMessage() }),
4025
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-400", children: "Please don't close this window" })
4035
4026
  ] })
4036
4027
  ] });
4037
4028
  };
@@ -4043,12 +4034,12 @@ var PaymentResultView = ({
4043
4034
  onReport
4044
4035
  }) => {
4045
4036
  const isSuccess = payment.status === "CONFIRMED";
4046
- const isFailed = payment.status === "FAILED" || !!error;
4037
+ payment.status === "FAILED" || !!error;
4047
4038
  return /* @__PURE__ */ jsxs("div", { className: "volr:space-y-6", children: [
4048
- /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:py-4", children: isSuccess ? /* @__PURE__ */ jsx("div", { className: "volr:w-16 volr:h-16 volr:rounded-full volr:bg-green-100 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx(
4039
+ /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:pt-2", children: isSuccess ? /* @__PURE__ */ jsx("div", { className: "volr:w-14 volr:h-14 volr:rounded-full volr:bg-green-50 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx(
4049
4040
  "svg",
4050
4041
  {
4051
- className: "volr:w-8 volr:h-8 volr:text-green-600",
4042
+ className: "volr:w-7 volr:h-7 volr:text-green-600",
4052
4043
  fill: "none",
4053
4044
  viewBox: "0 0 24 24",
4054
4045
  stroke: "currentColor",
@@ -4062,10 +4053,10 @@ var PaymentResultView = ({
4062
4053
  }
4063
4054
  )
4064
4055
  }
4065
- ) }) : /* @__PURE__ */ jsx("div", { className: "volr:w-16 volr:h-16 volr:rounded-full volr:bg-red-100 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx(
4056
+ ) }) : /* @__PURE__ */ jsx("div", { className: "volr:w-14 volr:h-14 volr:rounded-full volr:bg-red-50 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx(
4066
4057
  "svg",
4067
4058
  {
4068
- className: "volr:w-8 volr:h-8 volr:text-red-600",
4059
+ className: "volr:w-7 volr:h-7 volr:text-red-500",
4069
4060
  fill: "none",
4070
4061
  viewBox: "0 0 24 24",
4071
4062
  stroke: "currentColor",
@@ -4080,13 +4071,9 @@ var PaymentResultView = ({
4080
4071
  )
4081
4072
  }
4082
4073
  ) }) }),
4083
- /* @__PURE__ */ jsxs("div", { className: "volr:text-center", children: [
4074
+ /* @__PURE__ */ jsxs("div", { className: "volr:text-center volr:space-y-1", children: [
4084
4075
  /* @__PURE__ */ jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: isSuccess ? "Payment Complete" : "Payment Failed" }),
4085
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-1", children: isSuccess ? "Your transaction has been confirmed" : error?.message || "The transaction could not be completed" }),
4086
- isFailed && error?.code && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400 volr:mt-1 volr:font-mono", children: [
4087
- "Error code: ",
4088
- error.code
4089
- ] })
4076
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: isSuccess ? "Your payment has been processed successfully" : error?.message || "Something went wrong. Please try again." })
4090
4077
  ] }),
4091
4078
  isSuccess && payment.txHash && /* @__PURE__ */ jsxs("div", { className: "volr:bg-slate-50 volr:rounded-lg volr:p-4 volr:space-y-2", children: [
4092
4079
  /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
@@ -4113,13 +4100,18 @@ var PaymentResultView = ({
4113
4100
  ] })
4114
4101
  ] })
4115
4102
  ] }),
4116
- /* @__PURE__ */ jsx("div", { className: "volr:space-y-3", children: isSuccess ? /* @__PURE__ */ jsx(Button, { onClick: onDone, className: "volr:w-full", children: "Done" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4103
+ /* @__PURE__ */ jsx("div", { className: "volr:space-y-4", children: isSuccess ? /* @__PURE__ */ jsx(Button, { onClick: onDone, className: "volr:w-full", children: "Done" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4117
4104
  /* @__PURE__ */ jsx(Button, { onClick: onRetry, className: "volr:w-full", children: "Try Again" }),
4118
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:gap-3", children: [
4119
- /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onReport, className: "volr:flex-1", children: "Report Issue" }),
4120
- /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onDone, className: "volr:flex-1", children: "Cancel" })
4121
- ] })
4122
- ] }) })
4105
+ /* @__PURE__ */ jsx(
4106
+ "button",
4107
+ {
4108
+ onClick: onReport,
4109
+ className: "volr:w-full volr:text-sm volr:text-slate-400 hover:volr:text-slate-600 volr:transition-colors volr:py-2",
4110
+ children: "Report an issue"
4111
+ }
4112
+ )
4113
+ ] }) }),
4114
+ isSuccess && /* @__PURE__ */ jsx(PoweredBy, {})
4123
4115
  ] });
4124
4116
  };
4125
4117
  var PaymentModal = ({
@@ -4137,8 +4129,7 @@ var PaymentModal = ({
4137
4129
  handleClose,
4138
4130
  handleReport,
4139
4131
  canClose,
4140
- isConfigured
4141
- } = usePaymentModalState(open, onOpenChange);
4132
+ isConfigured} = usePaymentModalState(open, onOpenChange);
4142
4133
  const {
4143
4134
  step,
4144
4135
  processingStep,
@@ -4146,26 +4137,28 @@ var PaymentModal = ({
4146
4137
  isBalanceLoading,
4147
4138
  isConfigLoading,
4148
4139
  isPaying,
4149
- currentPayment,
4140
+ payOptions,
4141
+ tokenInfo,
4142
+ createdPayment,
4150
4143
  txHash,
4151
4144
  error,
4152
4145
  logoUrl,
4153
4146
  showDeposit
4154
4147
  } = state;
4155
- if (showDeposit && currentPayment) {
4148
+ if (showDeposit && tokenInfo) {
4156
4149
  return /* @__PURE__ */ jsx(
4157
4150
  DepositModal,
4158
4151
  {
4159
4152
  open: true,
4160
4153
  onOpenChange: handleDepositClose,
4161
4154
  asset: {
4162
- chainId: currentPayment.token.chainId,
4163
- symbol: currentPayment.token.symbol
4155
+ chainId: tokenInfo.chainId,
4156
+ symbol: tokenInfo.symbol
4164
4157
  }
4165
4158
  }
4166
4159
  );
4167
4160
  }
4168
- if (!paymentOptions || !currentPayment || isConfigLoading) {
4161
+ if (!paymentOptions || !payOptions || isConfigLoading) {
4169
4162
  return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange, children: [
4170
4163
  /* @__PURE__ */ jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
4171
4164
  /* @__PURE__ */ jsx(PaymentSkeleton, {})
@@ -4185,10 +4178,15 @@ var PaymentModal = ({
4185
4178
  title: step === "info" ? "Confirm Payment" : void 0
4186
4179
  }
4187
4180
  ),
4188
- step === "info" && /* @__PURE__ */ jsx(
4181
+ step === "info" && tokenInfo && /* @__PURE__ */ jsx(
4189
4182
  PaymentInfoView,
4190
4183
  {
4191
- payment: currentPayment,
4184
+ amount: payOptions.amount,
4185
+ tokenSymbol: tokenInfo.symbol,
4186
+ tokenDecimals: tokenInfo.decimals,
4187
+ itemName: payOptions.item?.name,
4188
+ itemDescription: payOptions.item?.description,
4189
+ itemImage: payOptions.item?.image,
4192
4190
  balance,
4193
4191
  isBalanceLoading,
4194
4192
  logoUrl,
@@ -4198,10 +4196,10 @@ var PaymentModal = ({
4198
4196
  }
4199
4197
  ),
4200
4198
  step === "processing" && /* @__PURE__ */ jsx(PaymentProcessingView, { step: processingStep, txHash }),
4201
- step === "result" && /* @__PURE__ */ jsx(
4199
+ step === "result" && createdPayment && /* @__PURE__ */ jsx(
4202
4200
  PaymentResultView,
4203
4201
  {
4204
- payment: currentPayment,
4202
+ payment: createdPayment,
4205
4203
  error,
4206
4204
  onDone: handleDone,
4207
4205
  onRetry: handleRetry,
@@ -4647,42 +4645,32 @@ async function getCurrentChainId() {
4647
4645
  });
4648
4646
  return parseInt(chainIdHex, 16);
4649
4647
  }
4650
- var paymentPromiseResolvers = /* @__PURE__ */ new Map();
4648
+ var paymentPromiseResolver = null;
4651
4649
  function useVolrPay() {
4652
- const { open: openModal } = useVolrModal();
4653
- const { createPayment, checkPayment, getPaymentHistory, cancelPayment } = useVolrPaymentApi();
4654
- const currentPaymentIdRef = useRef(null);
4650
+ const { open: openModal, close: closeModal } = useVolrModal();
4651
+ const { checkPayment, getPaymentHistory } = useVolrPaymentApi();
4652
+ const isInProgressRef = useRef(false);
4655
4653
  const pay = useCallback(
4656
- async (options) => {
4657
- const payment = await createPayment({
4658
- amount: options.amount,
4659
- item: options.item,
4660
- referenceId: options.referenceId,
4661
- metadata: options.metadata,
4662
- idempotencyKey: options.idempotencyKey,
4663
- expiresInSec: options.expiresInSec
4664
- });
4665
- currentPaymentIdRef.current = payment.id;
4666
- options.handlers?.onCreated?.({ id: payment.id });
4654
+ (options) => {
4655
+ isInProgressRef.current = true;
4667
4656
  const waitPromise = new Promise((resolve, reject) => {
4668
- paymentPromiseResolvers.set(payment.id, { resolve, reject });
4657
+ paymentPromiseResolver = { resolve, reject };
4669
4658
  });
4670
4659
  const modalOptions = {
4671
- payment,
4672
4660
  options: {
4673
4661
  amount: options.amount,
4674
4662
  item: options.item,
4675
4663
  referenceId: options.referenceId,
4676
4664
  metadata: options.metadata,
4677
4665
  idempotencyKey: options.idempotencyKey,
4678
- expiresInSec: options.expiresInSec
4666
+ expiresInSec: options.expiresInSec,
4667
+ handlers: options.handlers
4679
4668
  },
4680
4669
  onComplete: (result) => {
4681
- currentPaymentIdRef.current = null;
4682
- const resolver = paymentPromiseResolvers.get(payment.id);
4683
- if (resolver) {
4684
- resolver.resolve(result);
4685
- paymentPromiseResolvers.delete(payment.id);
4670
+ isInProgressRef.current = false;
4671
+ if (paymentPromiseResolver) {
4672
+ paymentPromiseResolver.resolve(result);
4673
+ paymentPromiseResolver = null;
4686
4674
  }
4687
4675
  if (result.status === "CONFIRMED") {
4688
4676
  options.handlers?.onSuccess?.(result);
@@ -4695,54 +4683,43 @@ function useVolrPay() {
4695
4683
  });
4696
4684
  },
4697
4685
  onError: (error) => {
4698
- currentPaymentIdRef.current = null;
4699
- const resolver = paymentPromiseResolvers.get(payment.id);
4700
- if (resolver) {
4701
- resolver.reject(new Error(error.message));
4702
- paymentPromiseResolvers.delete(payment.id);
4686
+ isInProgressRef.current = false;
4687
+ if (paymentPromiseResolver) {
4688
+ paymentPromiseResolver.reject(new Error(error.message));
4689
+ paymentPromiseResolver = null;
4703
4690
  }
4704
4691
  options.handlers?.onError?.(error);
4705
4692
  },
4706
4693
  onCancel: () => {
4707
- currentPaymentIdRef.current = null;
4708
- const resolver = paymentPromiseResolvers.get(payment.id);
4709
- if (resolver) {
4710
- resolver.resolve({
4711
- ...payment,
4712
- status: "CANCELLED"
4713
- });
4714
- paymentPromiseResolvers.delete(payment.id);
4694
+ isInProgressRef.current = false;
4695
+ if (paymentPromiseResolver) {
4696
+ paymentPromiseResolver.reject(new Error("Payment cancelled by user"));
4697
+ paymentPromiseResolver = null;
4715
4698
  }
4716
4699
  options.handlers?.onCancel?.();
4717
4700
  }
4718
4701
  };
4719
4702
  openModal({ mode: "payment", payment: modalOptions });
4720
4703
  return {
4721
- id: payment.id,
4722
- status: payment.status,
4723
4704
  wait: () => waitPromise,
4724
- cancel: async () => {
4725
- await cancelPayment(payment.id);
4726
- currentPaymentIdRef.current = null;
4727
- const resolver = paymentPromiseResolvers.get(payment.id);
4728
- if (resolver) {
4729
- resolver.resolve({
4730
- ...payment,
4731
- status: "CANCELLED"
4732
- });
4733
- paymentPromiseResolvers.delete(payment.id);
4705
+ cancel: () => {
4706
+ closeModal();
4707
+ isInProgressRef.current = false;
4708
+ if (paymentPromiseResolver) {
4709
+ paymentPromiseResolver.reject(new Error("Payment cancelled by user"));
4710
+ paymentPromiseResolver = null;
4734
4711
  }
4735
4712
  options.handlers?.onCancel?.();
4736
4713
  }
4737
4714
  };
4738
4715
  },
4739
- [createPayment, cancelPayment, openModal]
4716
+ [openModal, closeModal]
4740
4717
  );
4741
4718
  return {
4742
4719
  pay,
4743
4720
  checkPayment,
4744
4721
  getPaymentHistory,
4745
- isPaymentInProgress: currentPaymentIdRef.current !== null
4722
+ isPaymentInProgress: isInProgressRef.current
4746
4723
  };
4747
4724
  }
4748
4725