@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.
Files changed (7) hide show
  1. package/dist/index.cjs +218 -241
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +17 -13
  4. package/dist/index.d.ts +17 -13
  5. package/dist/index.js +218 -241
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -727,7 +727,7 @@ function useMediaQuery(query) {
727
727
  }
728
728
 
729
729
  // src/generated/volr-sdk-css.ts
730
- 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}}';
730
+ 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}}';
731
731
  function useResolvedTheme(theme = "light") {
732
732
  const [resolvedTheme, setResolvedTheme] = React10.useState(() => {
733
733
  if (theme !== "system") return theme;
@@ -3456,7 +3456,9 @@ var initialState = {
3456
3456
  isBalanceLoading: true,
3457
3457
  isConfigLoading: true,
3458
3458
  isPaying: false,
3459
- currentPayment: null,
3459
+ payOptions: null,
3460
+ tokenInfo: null,
3461
+ createdPayment: null,
3460
3462
  txHash: void 0,
3461
3463
  error: void 0,
3462
3464
  logoUrl: void 0,
@@ -3467,13 +3469,15 @@ function paymentModalReducer(state, action) {
3467
3469
  switch (action.type) {
3468
3470
  case "RESET":
3469
3471
  return { ...initialState };
3470
- case "INIT_PAYMENT":
3472
+ case "INIT":
3471
3473
  return {
3472
3474
  ...initialState,
3473
- currentPayment: action.payment,
3475
+ payOptions: action.options,
3474
3476
  isBalanceLoading: true,
3475
3477
  isConfigLoading: true
3476
3478
  };
3479
+ case "SET_TOKEN_INFO":
3480
+ return { ...state, tokenInfo: action.tokenInfo };
3477
3481
  case "SET_BALANCE":
3478
3482
  return { ...state, balance: action.balance };
3479
3483
  case "SET_BALANCE_LOADING":
@@ -3492,6 +3496,8 @@ function paymentModalReducer(state, action) {
3492
3496
  processingStep: "signing",
3493
3497
  error: void 0
3494
3498
  };
3499
+ case "SET_CREATED_PAYMENT":
3500
+ return { ...state, createdPayment: action.payment };
3495
3501
  case "SET_PROCESSING_STEP":
3496
3502
  return { ...state, processingStep: action.step };
3497
3503
  case "SET_TX_HASH":
@@ -3501,7 +3507,7 @@ function paymentModalReducer(state, action) {
3501
3507
  ...state,
3502
3508
  isPaying: false,
3503
3509
  step: "result",
3504
- currentPayment: action.payment
3510
+ createdPayment: action.payment
3505
3511
  };
3506
3512
  case "PAYMENT_ERROR":
3507
3513
  return {
@@ -3530,33 +3536,32 @@ function usePaymentModalState(open, onOpenChange) {
3530
3536
  const { client } = react.useInternalAuth();
3531
3537
  const { evm } = react.useVolr();
3532
3538
  const { paymentOptions } = useVolrModal();
3533
- const { updatePaymentToProcessing, pollPaymentStatus } = react.useVolrPaymentApi();
3539
+ const { createPayment, updatePaymentToProcessing, pollPaymentStatus, failPendingPayment } = react.useVolrPaymentApi();
3534
3540
  const [state, dispatch] = React10.useReducer(paymentModalReducer, initialState);
3535
3541
  const fetchBalance = React10.useCallback(
3536
- async (payment) => {
3542
+ async (tokenInfo) => {
3537
3543
  if (!user?.evmAddress) {
3538
3544
  dispatch({ type: "SET_BALANCE_LOADING", loading: false });
3539
3545
  return;
3540
3546
  }
3541
3547
  dispatch({ type: "SET_BALANCE_LOADING", loading: true });
3542
3548
  try {
3543
- const evmClient = evm(payment.token.chainId);
3544
- const tokenAddress = payment.token.id.split("_")[1];
3549
+ const evmClient = evm(tokenInfo.chainId);
3545
3550
  let balanceRaw;
3546
- if (tokenAddress === "native") {
3551
+ if (tokenInfo.address === "native") {
3547
3552
  balanceRaw = await evmClient.getBalance(user.evmAddress);
3548
3553
  } else {
3549
3554
  balanceRaw = await evmClient.readContract({
3550
- address: tokenAddress,
3555
+ address: tokenInfo.address,
3551
3556
  abi: erc20Abi,
3552
3557
  functionName: "balanceOf",
3553
3558
  args: [user.evmAddress]
3554
3559
  });
3555
3560
  }
3556
- const balanceNum = Number(balanceRaw) / Math.pow(10, payment.token.decimals);
3561
+ const balanceNum = Number(balanceRaw) / Math.pow(10, tokenInfo.decimals);
3557
3562
  const formattedBalance = balanceNum.toLocaleString(void 0, {
3558
3563
  minimumFractionDigits: 0,
3559
- maximumFractionDigits: payment.token.decimals > 6 ? 6 : payment.token.decimals
3564
+ maximumFractionDigits: tokenInfo.decimals > 6 ? 6 : tokenInfo.decimals
3560
3565
  });
3561
3566
  dispatch({ type: "SET_BALANCE", balance: formattedBalance });
3562
3567
  } catch (err) {
@@ -3578,69 +3583,74 @@ function usePaymentModalState(open, onOpenChange) {
3578
3583
  const fetchPaymentConfig = React10.useCallback(async () => {
3579
3584
  dispatch({ type: "SET_CONFIG_LOADING", loading: true });
3580
3585
  try {
3581
- const response = await client.get(
3582
- "/payments/config"
3583
- );
3584
- dispatch({
3585
- type: "SET_RECEIVER_ADDRESS",
3586
- receiverAddress: response.receiverAddress
3587
- });
3586
+ const response = await client.get("/payments/config");
3587
+ dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: response.receiverAddress });
3588
+ dispatch({ type: "SET_TOKEN_INFO", tokenInfo: response.token });
3589
+ if (response.token) {
3590
+ fetchBalance(response.token);
3591
+ }
3588
3592
  } catch (err) {
3589
3593
  console.error("Failed to fetch payment config:", err);
3590
3594
  dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: null });
3591
3595
  } finally {
3592
3596
  dispatch({ type: "SET_CONFIG_LOADING", loading: false });
3593
3597
  }
3594
- }, [client]);
3598
+ }, [client, fetchBalance]);
3595
3599
  React10.useEffect(() => {
3596
- if (open && paymentOptions) {
3597
- dispatch({ type: "INIT_PAYMENT", payment: paymentOptions.payment });
3598
- fetchBalance(paymentOptions.payment);
3600
+ if (open && paymentOptions?.options) {
3601
+ if (state.step === "processing" || state.step === "result") {
3602
+ return;
3603
+ }
3604
+ dispatch({ type: "INIT", options: paymentOptions.options });
3599
3605
  fetchBranding();
3600
3606
  fetchPaymentConfig();
3601
3607
  } else if (!open) {
3602
3608
  dispatch({ type: "RESET" });
3603
3609
  }
3604
- }, [open, paymentOptions, fetchBalance, fetchBranding, fetchPaymentConfig]);
3610
+ }, [open, paymentOptions?.options?.amount]);
3605
3611
  const handlePay = React10.useCallback(async () => {
3606
- const { currentPayment, receiverAddress } = state;
3607
- if (!currentPayment || !user?.evmAddress || !paymentOptions || !receiverAddress) {
3612
+ const { payOptions, receiverAddress, tokenInfo } = state;
3613
+ if (!payOptions || !user?.evmAddress || !paymentOptions || !receiverAddress || !tokenInfo) {
3608
3614
  return;
3609
3615
  }
3610
3616
  dispatch({ type: "START_PAYMENT" });
3617
+ let createdPaymentId = null;
3611
3618
  try {
3612
- const evmClient = evm(currentPayment.token.chainId);
3613
- const tokenAddress = currentPayment.token.id.split("_")[1];
3619
+ const payment = await createPayment(payOptions);
3620
+ createdPaymentId = payment.id;
3621
+ dispatch({ type: "SET_CREATED_PAYMENT", payment });
3622
+ paymentOptions.options.handlers?.onCreated?.({ id: payment.id });
3623
+ const evmClient = evm(tokenInfo.chainId);
3614
3624
  dispatch({ type: "SET_PROCESSING_STEP", step: "broadcasting" });
3615
3625
  let result;
3616
- if (tokenAddress === "native") {
3626
+ if (tokenInfo.address === "native") {
3617
3627
  result = await evmClient.sendTransaction({
3618
3628
  to: receiverAddress,
3619
3629
  data: "0x",
3620
- value: BigInt(currentPayment.amount)
3630
+ value: BigInt(payment.amount)
3621
3631
  });
3622
3632
  } else {
3623
3633
  result = await evmClient.sendBatch([
3624
3634
  {
3625
- target: tokenAddress,
3635
+ target: tokenInfo.address,
3626
3636
  abi: erc20Abi,
3627
3637
  functionName: "transfer",
3628
3638
  args: [
3629
3639
  receiverAddress,
3630
- BigInt(currentPayment.amount)
3640
+ BigInt(payment.amount)
3631
3641
  ]
3632
3642
  }
3633
3643
  ]);
3634
3644
  }
3635
3645
  dispatch({ type: "SET_TX_HASH", txHash: result.txHash ?? "" });
3636
3646
  dispatch({ type: "SET_PROCESSING_STEP", step: "confirming" });
3637
- await updatePaymentToProcessing(currentPayment.id, result.txId);
3647
+ await updatePaymentToProcessing(payment.id, result.txId);
3638
3648
  paymentOptions.onProcessing?.({
3639
- ...currentPayment,
3649
+ ...payment,
3640
3650
  txHash: result.txHash ?? "",
3641
3651
  status: "PROCESSING"
3642
3652
  });
3643
- const confirmedPayment = await pollPaymentStatus(currentPayment.id);
3653
+ const confirmedPayment = await pollPaymentStatus(payment.id);
3644
3654
  dispatch({ type: "PAYMENT_SUCCESS", payment: confirmedPayment });
3645
3655
  if (confirmedPayment.status === "CONFIRMED") {
3646
3656
  paymentOptions.onComplete?.(confirmedPayment);
@@ -3654,6 +3664,13 @@ function usePaymentModalState(open, onOpenChange) {
3654
3664
  }
3655
3665
  } catch (err) {
3656
3666
  console.error("Payment failed:", err);
3667
+ if (createdPaymentId) {
3668
+ try {
3669
+ await failPendingPayment(createdPaymentId);
3670
+ } catch (failErr) {
3671
+ console.error("Failed to mark payment as failed:", failErr);
3672
+ }
3673
+ }
3657
3674
  const paymentError = {
3658
3675
  code: err.code || "PAYMENT_FAILED",
3659
3676
  message: err.message || "Payment failed. Please try again."
@@ -3666,8 +3683,10 @@ function usePaymentModalState(open, onOpenChange) {
3666
3683
  user,
3667
3684
  paymentOptions,
3668
3685
  evm,
3686
+ createPayment,
3669
3687
  updatePaymentToProcessing,
3670
- pollPaymentStatus
3688
+ pollPaymentStatus,
3689
+ failPendingPayment
3671
3690
  ]);
3672
3691
  const handleDeposit = React10.useCallback(() => {
3673
3692
  dispatch({ type: "SHOW_DEPOSIT" });
@@ -3676,25 +3695,25 @@ function usePaymentModalState(open, onOpenChange) {
3676
3695
  (depositOpen) => {
3677
3696
  if (!depositOpen) {
3678
3697
  dispatch({ type: "HIDE_DEPOSIT" });
3679
- if (state.currentPayment) {
3680
- fetchBalance(state.currentPayment);
3698
+ if (state.tokenInfo) {
3699
+ fetchBalance(state.tokenInfo);
3681
3700
  }
3682
3701
  }
3683
3702
  },
3684
- [state.currentPayment, fetchBalance]
3703
+ [state.tokenInfo, fetchBalance]
3685
3704
  );
3686
3705
  const handleDone = React10.useCallback(() => {
3687
- if (state.currentPayment?.status === "CONFIRMED") {
3688
- paymentOptions?.onComplete?.(state.currentPayment);
3706
+ if (state.createdPayment?.status === "CONFIRMED") {
3707
+ paymentOptions?.onComplete?.(state.createdPayment);
3689
3708
  }
3690
3709
  onOpenChange(false);
3691
- }, [state.currentPayment, paymentOptions, onOpenChange]);
3710
+ }, [state.createdPayment, paymentOptions, onOpenChange]);
3692
3711
  const handleRetry = React10.useCallback(() => {
3693
3712
  dispatch({ type: "RETRY" });
3694
- if (state.currentPayment) {
3695
- fetchBalance(state.currentPayment);
3713
+ if (state.tokenInfo) {
3714
+ fetchBalance(state.tokenInfo);
3696
3715
  }
3697
- }, [state.currentPayment, fetchBalance]);
3716
+ }, [state.tokenInfo, fetchBalance]);
3698
3717
  const handleClose = React10.useCallback(() => {
3699
3718
  if (state.step === "processing") {
3700
3719
  return;
@@ -3705,19 +3724,19 @@ function usePaymentModalState(open, onOpenChange) {
3705
3724
  onOpenChange(false);
3706
3725
  }, [state.step, paymentOptions, onOpenChange]);
3707
3726
  const handleReport = React10.useCallback(async () => {
3708
- const { currentPayment, error, step, txHash } = state;
3709
- if (!currentPayment || !error) return;
3727
+ const { createdPayment, error, step, txHash, tokenInfo } = state;
3728
+ if (!createdPayment || !error) return;
3710
3729
  try {
3711
- await client.post(`/payments/${currentPayment.id}/report`, {
3730
+ await client.post(`/payments/${createdPayment.id}/report`, {
3712
3731
  errorCode: error.code,
3713
3732
  errorMessage: error.message,
3714
3733
  platform: "web",
3715
3734
  context: {
3716
3735
  step,
3717
3736
  txHash,
3718
- tokenId: currentPayment.token.id,
3719
- chainId: currentPayment.token.chainId,
3720
- amount: currentPayment.amount
3737
+ tokenId: tokenInfo?.id,
3738
+ chainId: tokenInfo?.chainId,
3739
+ amount: createdPayment.amount
3721
3740
  }
3722
3741
  });
3723
3742
  alert("Error report submitted. Thank you for your feedback.");
@@ -3733,7 +3752,8 @@ Please contact support with this information.`
3733
3752
  }
3734
3753
  }, [state, client]);
3735
3754
  const canClose = state.step !== "processing";
3736
- const isConfigured = state.receiverAddress !== null;
3755
+ const isConfigured = state.receiverAddress !== null && state.tokenInfo !== null;
3756
+ const isReady = !state.isConfigLoading && !state.isBalanceLoading && isConfigured;
3737
3757
  return {
3738
3758
  state,
3739
3759
  handlePay,
@@ -3744,7 +3764,8 @@ Please contact support with this information.`
3744
3764
  handleClose,
3745
3765
  handleReport,
3746
3766
  canClose,
3747
- isConfigured
3767
+ isConfigured,
3768
+ isReady
3748
3769
  };
3749
3770
  }
3750
3771
  var PaymentSkeleton = () => {
@@ -3847,7 +3868,12 @@ var ItemDisplay = ({
3847
3868
  ] });
3848
3869
  };
3849
3870
  var PaymentInfoView = ({
3850
- payment,
3871
+ amount,
3872
+ tokenSymbol,
3873
+ tokenDecimals,
3874
+ itemName,
3875
+ itemDescription,
3876
+ itemImage,
3851
3877
  balance,
3852
3878
  isBalanceLoading,
3853
3879
  logoUrl,
@@ -3855,22 +3881,20 @@ var PaymentInfoView = ({
3855
3881
  onDeposit,
3856
3882
  isPaying
3857
3883
  }) => {
3858
- const { token, itemName, itemDescription, itemImage } = payment;
3859
- const amountInUnits = Number(payment.amount) / Math.pow(10, token.decimals);
3860
- const formattedAmount = amountInUnits.toLocaleString(void 0, {
3884
+ const formattedAmount = amount.toLocaleString(void 0, {
3861
3885
  minimumFractionDigits: 0,
3862
- maximumFractionDigits: token.decimals > 6 ? 6 : token.decimals
3886
+ maximumFractionDigits: tokenDecimals > 6 ? 6 : tokenDecimals
3863
3887
  });
3864
3888
  const balanceNum = parseFloat(balance.replace(/,/g, "") || "0");
3865
- const isInsufficient = !isBalanceLoading && balanceNum < amountInUnits;
3889
+ const isInsufficient = !isBalanceLoading && balanceNum < amount;
3866
3890
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-6", children: [
3867
3891
  itemName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3868
3892
  /* @__PURE__ */ jsxRuntime.jsx(
3869
3893
  ItemDisplay,
3870
3894
  {
3871
3895
  name: itemName,
3872
- description: itemDescription ?? void 0,
3873
- image: itemImage ?? void 0,
3896
+ description: itemDescription,
3897
+ image: itemImage,
3874
3898
  logoUrl
3875
3899
  }
3876
3900
  ),
@@ -3880,12 +3904,7 @@ var PaymentInfoView = ({
3880
3904
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: "Amount to Pay" }),
3881
3905
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-baseline volr:gap-2", children: [
3882
3906
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-2xl volr:font-bold volr:text-slate-900", children: formattedAmount }),
3883
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: token.symbol })
3884
- ] }),
3885
- payment.totalUsd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:text-slate-400", children: [
3886
- "\u2248 $",
3887
- parseFloat(payment.totalUsd).toFixed(2),
3888
- " USD"
3907
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: tokenSymbol })
3889
3908
  ] })
3890
3909
  ] }),
3891
3910
  isBalanceLoading ? /* @__PURE__ */ jsxRuntime.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: [
@@ -3895,7 +3914,7 @@ var PaymentInfoView = ({
3895
3914
  BalanceDisplay,
3896
3915
  {
3897
3916
  balance,
3898
- symbol: token.symbol,
3917
+ symbol: tokenSymbol,
3899
3918
  required: formattedAmount,
3900
3919
  isInsufficient
3901
3920
  }
@@ -3931,112 +3950,84 @@ var PaymentInfoView = ({
3931
3950
  )
3932
3951
  ] }),
3933
3952
  "Processing..."
3934
- ] }) : isInsufficient ? "Insufficient Balance" : `Pay ${formattedAmount} ${token.symbol}`
3953
+ ] }) : isInsufficient ? "Insufficient Balance" : `Pay ${formattedAmount} ${tokenSymbol}`
3935
3954
  }
3936
3955
  ),
3937
3956
  isInsufficient && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: onDeposit, className: "volr:w-full", children: [
3938
3957
  "Deposit ",
3939
- token.symbol
3958
+ tokenSymbol
3940
3959
  ] })
3941
3960
  ] }),
3942
3961
  /* @__PURE__ */ jsxRuntime.jsx(PoweredBy, {})
3943
3962
  ] });
3944
3963
  };
3945
3964
  var PaymentProcessingView = ({
3946
- step,
3947
- txHash
3965
+ step
3948
3966
  }) => {
3949
- const steps = [
3950
- { id: "signing", label: "Signing transaction" },
3951
- { id: "broadcasting", label: "Broadcasting" },
3952
- { id: "confirming", label: "Confirming on-chain" }
3953
- ];
3954
- const currentStepIndex = steps.findIndex((s) => s.id === step);
3955
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:p-6 volr:space-y-8", children: [
3956
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:relative volr:w-16 volr:h-16", children: /* @__PURE__ */ jsxRuntime.jsxs(
3957
- "svg",
3958
- {
3959
- className: "volr:animate-spin volr:w-16 volr:h-16 volr:text-slate-900",
3960
- viewBox: "0 0 24 24",
3961
- children: [
3962
- /* @__PURE__ */ jsxRuntime.jsx(
3963
- "circle",
3964
- {
3965
- className: "volr:opacity-25",
3966
- cx: "12",
3967
- cy: "12",
3968
- r: "10",
3969
- stroke: "currentColor",
3970
- strokeWidth: "3",
3971
- fill: "none"
3972
- }
3973
- ),
3974
- /* @__PURE__ */ jsxRuntime.jsx(
3975
- "path",
3976
- {
3977
- className: "volr:opacity-75",
3978
- fill: "currentColor",
3979
- 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"
3967
+ const getStatusMessage = () => {
3968
+ switch (step) {
3969
+ case "signing":
3970
+ return "Waiting for confirmation...";
3971
+ case "broadcasting":
3972
+ return "Sending payment...";
3973
+ case "confirming":
3974
+ return "Almost done...";
3975
+ default:
3976
+ return "Processing...";
3977
+ }
3978
+ };
3979
+ const getProgress = () => {
3980
+ switch (step) {
3981
+ case "signing":
3982
+ return 20;
3983
+ case "broadcasting":
3984
+ return 60;
3985
+ case "confirming":
3986
+ return 90;
3987
+ default:
3988
+ return 0;
3989
+ }
3990
+ };
3991
+ const progress = getProgress();
3992
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-8 volr:py-4", children: [
3993
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative volr:w-20 volr:h-20", children: [
3994
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "volr:w-20 volr:h-20", viewBox: "0 0 36 36", children: [
3995
+ /* @__PURE__ */ jsxRuntime.jsx(
3996
+ "circle",
3997
+ {
3998
+ cx: "18",
3999
+ cy: "18",
4000
+ r: "16",
4001
+ fill: "none",
4002
+ stroke: "currentColor",
4003
+ strokeWidth: "2",
4004
+ className: "volr:text-slate-100"
4005
+ }
4006
+ ),
4007
+ /* @__PURE__ */ jsxRuntime.jsx(
4008
+ "circle",
4009
+ {
4010
+ cx: "18",
4011
+ cy: "18",
4012
+ r: "16",
4013
+ fill: "none",
4014
+ stroke: "currentColor",
4015
+ strokeWidth: "2",
4016
+ strokeLinecap: "round",
4017
+ className: "volr:text-slate-900 volr:transition-all volr:duration-500",
4018
+ strokeDasharray: `${progress}, 100`,
4019
+ style: {
4020
+ transform: "rotate(-90deg)",
4021
+ transformOrigin: "center"
3980
4022
  }
3981
- )
3982
- ]
3983
- }
3984
- ) }) }),
3985
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center", children: [
3986
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: "Processing Payment" }),
3987
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-1", children: "Please wait while we process your transaction" })
3988
- ] }),
3989
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: steps.map((s, index) => {
3990
- const isCompleted = index < currentStepIndex;
3991
- const isCurrent = index === currentStepIndex;
3992
- return /* @__PURE__ */ jsxRuntime.jsxs(
3993
- "div",
3994
- {
3995
- className: "volr:flex volr:items-center volr:gap-3 volr:px-3 volr:py-2",
3996
- children: [
3997
- /* @__PURE__ */ jsxRuntime.jsx(
3998
- "div",
3999
- {
4000
- 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"}`,
4001
- children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(
4002
- "svg",
4003
- {
4004
- className: "volr:w-4 volr:h-4 volr:text-green-600",
4005
- fill: "none",
4006
- viewBox: "0 0 24 24",
4007
- stroke: "currentColor",
4008
- children: /* @__PURE__ */ jsxRuntime.jsx(
4009
- "path",
4010
- {
4011
- strokeLinecap: "round",
4012
- strokeLinejoin: "round",
4013
- strokeWidth: 2,
4014
- d: "M5 13l4 4L19 7"
4015
- }
4016
- )
4017
- }
4018
- ) : isCurrent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-2 volr:h-2 volr:bg-white volr:rounded-full volr:animate-pulse" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-2 volr:h-2 volr:bg-slate-300 volr:rounded-full" })
4019
- }
4020
- ),
4021
- /* @__PURE__ */ jsxRuntime.jsx(
4022
- "span",
4023
- {
4024
- className: `volr:text-sm ${isCompleted ? "volr:text-green-600 volr:font-medium" : isCurrent ? "volr:text-slate-900 volr:font-medium" : "volr:text-slate-400"}`,
4025
- children: s.label
4026
- }
4027
- )
4028
- ]
4029
- },
4030
- s.id
4031
- );
4032
- }) }),
4033
- txHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center volr:pt-2", children: [
4034
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-400", children: "Transaction Hash" }),
4035
- /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "volr:text-xs volr:text-slate-500 volr:font-mono", children: [
4036
- txHash.slice(0, 10),
4037
- "...",
4038
- txHash.slice(-8)
4039
- ] })
4023
+ }
4024
+ )
4025
+ ] }),
4026
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-2 volr:h-2 volr:bg-slate-900 volr:rounded-full volr:animate-pulse" }) })
4027
+ ] }) }),
4028
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center volr:space-y-2", children: [
4029
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-medium volr:text-slate-900", children: getStatusMessage() }),
4030
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-400", children: "Please don't close this window" })
4040
4031
  ] })
4041
4032
  ] });
4042
4033
  };
@@ -4048,12 +4039,12 @@ var PaymentResultView = ({
4048
4039
  onReport
4049
4040
  }) => {
4050
4041
  const isSuccess = payment.status === "CONFIRMED";
4051
- const isFailed = payment.status === "FAILED" || !!error;
4042
+ payment.status === "FAILED" || !!error;
4052
4043
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-6", children: [
4053
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:py-4", children: isSuccess ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
4044
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:pt-2", children: isSuccess ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
4054
4045
  "svg",
4055
4046
  {
4056
- className: "volr:w-8 volr:h-8 volr:text-green-600",
4047
+ className: "volr:w-7 volr:h-7 volr:text-green-600",
4057
4048
  fill: "none",
4058
4049
  viewBox: "0 0 24 24",
4059
4050
  stroke: "currentColor",
@@ -4067,10 +4058,10 @@ var PaymentResultView = ({
4067
4058
  }
4068
4059
  )
4069
4060
  }
4070
- ) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
4061
+ ) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
4071
4062
  "svg",
4072
4063
  {
4073
- className: "volr:w-8 volr:h-8 volr:text-red-600",
4064
+ className: "volr:w-7 volr:h-7 volr:text-red-500",
4074
4065
  fill: "none",
4075
4066
  viewBox: "0 0 24 24",
4076
4067
  stroke: "currentColor",
@@ -4085,13 +4076,9 @@ var PaymentResultView = ({
4085
4076
  )
4086
4077
  }
4087
4078
  ) }) }),
4088
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center", children: [
4079
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center volr:space-y-1", children: [
4089
4080
  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: isSuccess ? "Payment Complete" : "Payment Failed" }),
4090
- /* @__PURE__ */ jsxRuntime.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" }),
4091
- isFailed && error?.code && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400 volr:mt-1 volr:font-mono", children: [
4092
- "Error code: ",
4093
- error.code
4094
- ] })
4081
+ /* @__PURE__ */ jsxRuntime.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." })
4095
4082
  ] }),
4096
4083
  isSuccess && payment.txHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:bg-slate-50 volr:rounded-lg volr:p-4 volr:space-y-2", children: [
4097
4084
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
@@ -4118,13 +4105,18 @@ var PaymentResultView = ({
4118
4105
  ] })
4119
4106
  ] })
4120
4107
  ] }),
4121
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: isSuccess ? /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onDone, className: "volr:w-full", children: "Done" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4108
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-4", children: isSuccess ? /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onDone, className: "volr:w-full", children: "Done" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4122
4109
  /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onRetry, className: "volr:w-full", children: "Try Again" }),
4123
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:gap-3", children: [
4124
- /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: onReport, className: "volr:flex-1", children: "Report Issue" }),
4125
- /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: onDone, className: "volr:flex-1", children: "Cancel" })
4126
- ] })
4127
- ] }) })
4110
+ /* @__PURE__ */ jsxRuntime.jsx(
4111
+ "button",
4112
+ {
4113
+ onClick: onReport,
4114
+ className: "volr:w-full volr:text-sm volr:text-slate-400 hover:volr:text-slate-600 volr:transition-colors volr:py-2",
4115
+ children: "Report an issue"
4116
+ }
4117
+ )
4118
+ ] }) }),
4119
+ isSuccess && /* @__PURE__ */ jsxRuntime.jsx(PoweredBy, {})
4128
4120
  ] });
4129
4121
  };
4130
4122
  var PaymentModal = ({
@@ -4142,8 +4134,7 @@ var PaymentModal = ({
4142
4134
  handleClose,
4143
4135
  handleReport,
4144
4136
  canClose,
4145
- isConfigured
4146
- } = usePaymentModalState(open, onOpenChange);
4137
+ isConfigured} = usePaymentModalState(open, onOpenChange);
4147
4138
  const {
4148
4139
  step,
4149
4140
  processingStep,
@@ -4151,26 +4142,28 @@ var PaymentModal = ({
4151
4142
  isBalanceLoading,
4152
4143
  isConfigLoading,
4153
4144
  isPaying,
4154
- currentPayment,
4145
+ payOptions,
4146
+ tokenInfo,
4147
+ createdPayment,
4155
4148
  txHash,
4156
4149
  error,
4157
4150
  logoUrl,
4158
4151
  showDeposit
4159
4152
  } = state;
4160
- if (showDeposit && currentPayment) {
4153
+ if (showDeposit && tokenInfo) {
4161
4154
  return /* @__PURE__ */ jsxRuntime.jsx(
4162
4155
  DepositModal,
4163
4156
  {
4164
4157
  open: true,
4165
4158
  onOpenChange: handleDepositClose,
4166
4159
  asset: {
4167
- chainId: currentPayment.token.chainId,
4168
- symbol: currentPayment.token.symbol
4160
+ chainId: tokenInfo.chainId,
4161
+ symbol: tokenInfo.symbol
4169
4162
  }
4170
4163
  }
4171
4164
  );
4172
4165
  }
4173
- if (!paymentOptions || !currentPayment || isConfigLoading) {
4166
+ if (!paymentOptions || !payOptions || isConfigLoading) {
4174
4167
  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange, children: [
4175
4168
  /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
4176
4169
  /* @__PURE__ */ jsxRuntime.jsx(PaymentSkeleton, {})
@@ -4190,10 +4183,15 @@ var PaymentModal = ({
4190
4183
  title: step === "info" ? "Confirm Payment" : void 0
4191
4184
  }
4192
4185
  ),
4193
- step === "info" && /* @__PURE__ */ jsxRuntime.jsx(
4186
+ step === "info" && tokenInfo && /* @__PURE__ */ jsxRuntime.jsx(
4194
4187
  PaymentInfoView,
4195
4188
  {
4196
- payment: currentPayment,
4189
+ amount: payOptions.amount,
4190
+ tokenSymbol: tokenInfo.symbol,
4191
+ tokenDecimals: tokenInfo.decimals,
4192
+ itemName: payOptions.item?.name,
4193
+ itemDescription: payOptions.item?.description,
4194
+ itemImage: payOptions.item?.image,
4197
4195
  balance,
4198
4196
  isBalanceLoading,
4199
4197
  logoUrl,
@@ -4203,10 +4201,10 @@ var PaymentModal = ({
4203
4201
  }
4204
4202
  ),
4205
4203
  step === "processing" && /* @__PURE__ */ jsxRuntime.jsx(PaymentProcessingView, { step: processingStep, txHash }),
4206
- step === "result" && /* @__PURE__ */ jsxRuntime.jsx(
4204
+ step === "result" && createdPayment && /* @__PURE__ */ jsxRuntime.jsx(
4207
4205
  PaymentResultView,
4208
4206
  {
4209
- payment: currentPayment,
4207
+ payment: createdPayment,
4210
4208
  error,
4211
4209
  onDone: handleDone,
4212
4210
  onRetry: handleRetry,
@@ -4652,42 +4650,32 @@ async function getCurrentChainId() {
4652
4650
  });
4653
4651
  return parseInt(chainIdHex, 16);
4654
4652
  }
4655
- var paymentPromiseResolvers = /* @__PURE__ */ new Map();
4653
+ var paymentPromiseResolver = null;
4656
4654
  function useVolrPay() {
4657
- const { open: openModal } = useVolrModal();
4658
- const { createPayment, checkPayment, getPaymentHistory, cancelPayment } = react.useVolrPaymentApi();
4659
- const currentPaymentIdRef = React10.useRef(null);
4655
+ const { open: openModal, close: closeModal } = useVolrModal();
4656
+ const { checkPayment, getPaymentHistory } = react.useVolrPaymentApi();
4657
+ const isInProgressRef = React10.useRef(false);
4660
4658
  const pay = React10.useCallback(
4661
- async (options) => {
4662
- const payment = await createPayment({
4663
- amount: options.amount,
4664
- item: options.item,
4665
- referenceId: options.referenceId,
4666
- metadata: options.metadata,
4667
- idempotencyKey: options.idempotencyKey,
4668
- expiresInSec: options.expiresInSec
4669
- });
4670
- currentPaymentIdRef.current = payment.id;
4671
- options.handlers?.onCreated?.({ id: payment.id });
4659
+ (options) => {
4660
+ isInProgressRef.current = true;
4672
4661
  const waitPromise = new Promise((resolve, reject) => {
4673
- paymentPromiseResolvers.set(payment.id, { resolve, reject });
4662
+ paymentPromiseResolver = { resolve, reject };
4674
4663
  });
4675
4664
  const modalOptions = {
4676
- payment,
4677
4665
  options: {
4678
4666
  amount: options.amount,
4679
4667
  item: options.item,
4680
4668
  referenceId: options.referenceId,
4681
4669
  metadata: options.metadata,
4682
4670
  idempotencyKey: options.idempotencyKey,
4683
- expiresInSec: options.expiresInSec
4671
+ expiresInSec: options.expiresInSec,
4672
+ handlers: options.handlers
4684
4673
  },
4685
4674
  onComplete: (result) => {
4686
- currentPaymentIdRef.current = null;
4687
- const resolver = paymentPromiseResolvers.get(payment.id);
4688
- if (resolver) {
4689
- resolver.resolve(result);
4690
- paymentPromiseResolvers.delete(payment.id);
4675
+ isInProgressRef.current = false;
4676
+ if (paymentPromiseResolver) {
4677
+ paymentPromiseResolver.resolve(result);
4678
+ paymentPromiseResolver = null;
4691
4679
  }
4692
4680
  if (result.status === "CONFIRMED") {
4693
4681
  options.handlers?.onSuccess?.(result);
@@ -4700,54 +4688,43 @@ function useVolrPay() {
4700
4688
  });
4701
4689
  },
4702
4690
  onError: (error) => {
4703
- currentPaymentIdRef.current = null;
4704
- const resolver = paymentPromiseResolvers.get(payment.id);
4705
- if (resolver) {
4706
- resolver.reject(new Error(error.message));
4707
- paymentPromiseResolvers.delete(payment.id);
4691
+ isInProgressRef.current = false;
4692
+ if (paymentPromiseResolver) {
4693
+ paymentPromiseResolver.reject(new Error(error.message));
4694
+ paymentPromiseResolver = null;
4708
4695
  }
4709
4696
  options.handlers?.onError?.(error);
4710
4697
  },
4711
4698
  onCancel: () => {
4712
- currentPaymentIdRef.current = null;
4713
- const resolver = paymentPromiseResolvers.get(payment.id);
4714
- if (resolver) {
4715
- resolver.resolve({
4716
- ...payment,
4717
- status: "CANCELLED"
4718
- });
4719
- paymentPromiseResolvers.delete(payment.id);
4699
+ isInProgressRef.current = false;
4700
+ if (paymentPromiseResolver) {
4701
+ paymentPromiseResolver.reject(new Error("Payment cancelled by user"));
4702
+ paymentPromiseResolver = null;
4720
4703
  }
4721
4704
  options.handlers?.onCancel?.();
4722
4705
  }
4723
4706
  };
4724
4707
  openModal({ mode: "payment", payment: modalOptions });
4725
4708
  return {
4726
- id: payment.id,
4727
- status: payment.status,
4728
4709
  wait: () => waitPromise,
4729
- cancel: async () => {
4730
- await cancelPayment(payment.id);
4731
- currentPaymentIdRef.current = null;
4732
- const resolver = paymentPromiseResolvers.get(payment.id);
4733
- if (resolver) {
4734
- resolver.resolve({
4735
- ...payment,
4736
- status: "CANCELLED"
4737
- });
4738
- paymentPromiseResolvers.delete(payment.id);
4710
+ cancel: () => {
4711
+ closeModal();
4712
+ isInProgressRef.current = false;
4713
+ if (paymentPromiseResolver) {
4714
+ paymentPromiseResolver.reject(new Error("Payment cancelled by user"));
4715
+ paymentPromiseResolver = null;
4739
4716
  }
4740
4717
  options.handlers?.onCancel?.();
4741
4718
  }
4742
4719
  };
4743
4720
  },
4744
- [createPayment, cancelPayment, openModal]
4721
+ [openModal, closeModal]
4745
4722
  );
4746
4723
  return {
4747
4724
  pay,
4748
4725
  checkPayment,
4749
4726
  getPaymentHistory,
4750
- isPaymentInProgress: currentPaymentIdRef.current !== null
4727
+ isPaymentInProgress: isInProgressRef.current
4751
4728
  };
4752
4729
  }
4753
4730