// ==UserScript==
// @name chou-xiang-style
// @namespace npm/chou-xiang-style
// @version 1.0.0
// @icon
// @match http://175.178.29.106/chouxiang.html
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/react.production.min.js
// @require data:application/javascript,window.react%3DReact
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/react-dom.production.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/flv.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/clsx.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/lucide-react.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/umd/vanilla/internals.production.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/umd/vanilla.production.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/umd/index.production.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/umd/vanilla/utils.production.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/cos-js-sdk-v5.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js
// @connect live.kuaishou.com
// @connect weibo.com
// @connect live.bilibili.com
// @grant GM.cookie
// @grant GM.xmlHttpRequest
// @grant GM_addStyle
// @description new page
// ==/UserScript==
(function (React, ReactDOM$1, jotai, utils, flv_js, COS, clsx, lucideReact, reactHookForm) {
'use strict';
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
if (e) {
for (const k in e) {
if (k !== 'default') {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const React__namespace = _interopNamespaceDefault(React);
const d=new Set;const importCSS = async e=>{d.has(e)||(d.add(e),(t=>{typeof GM_addStyle=="function"?GM_addStyle(t):document.head.appendChild(document.createElement("style")).append(t);})(e));};
function getDefaultExportFromCjs(x2) {
return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
}
var jsxRuntime = { exports: {} };
var reactJsxRuntime_production = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactJsxRuntime_production;
function requireReactJsxRuntime_production() {
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
hasRequiredReactJsxRuntime_production = 1;
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
function jsxProd(type, config2, maybeKey) {
var key = null;
void 0 !== maybeKey && (key = "" + maybeKey);
void 0 !== config2.key && (key = "" + config2.key);
if ("key" in config2) {
maybeKey = {};
for (var propName in config2)
"key" !== propName && (maybeKey[propName] = config2[propName]);
} else maybeKey = config2;
config2 = maybeKey.ref;
return {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
ref: void 0 !== config2 ? config2 : null,
props: maybeKey
};
}
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
reactJsxRuntime_production.jsx = jsxProd;
reactJsxRuntime_production.jsxs = jsxProd;
return reactJsxRuntime_production;
}
var hasRequiredJsxRuntime;
function requireJsxRuntime() {
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
hasRequiredJsxRuntime = 1;
{
jsxRuntime.exports = requireReactJsxRuntime_production();
}
return jsxRuntime.exports;
}
var jsxRuntimeExports = requireJsxRuntime();
const indexCss = `/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@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{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-amber-500:oklch(76.9% .188 70.08);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-emerald-400:oklch(76.5% .177 163.223);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-rose-400:oklch(71.2% .194 13.428);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-600:oklch(44.6% .03 256.802);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-2xs:18rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background)}}@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(--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(--default-font-feature-settings,normal);font-variation-settings:var(--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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--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}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--ring)50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}button:not(:disabled),[role=button]:not(:disabled){cursor:pointer}}@layer components;@layer utilities{.\\@container\\/card-header{container:card-header/inline-size}.\\@container\\/field-group{container:field-group/inline-size}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-1\\/2{top:50%}.top-4{top:calc(var(--spacing)*4)}.top-8{top:calc(var(--spacing)*8)}.top-18{top:calc(var(--spacing)*18)}.top-\\[20px\\]{top:20px}.top-\\[50\\%\\]{top:50%}.-right-0,.right-0{right:calc(var(--spacing)*0)}.right-2\\.5{right:calc(var(--spacing)*2.5)}.right-3{right:calc(var(--spacing)*3)}.right-4{right:calc(var(--spacing)*4)}.-bottom-0\\.5{bottom:calc(var(--spacing)*-.5)}.bottom-2{bottom:calc(var(--spacing)*2)}.left-0{left:calc(var(--spacing)*0)}.left-1\\/2{left:50%}.left-2{left:calc(var(--spacing)*2)}.left-4{left:calc(var(--spacing)*4)}.left-\\[20px\\]{left:20px}.left-\\[50\\%\\]{left:50%}.isolate{isolation:isolate}.z-10{z-index:10}.z-50{z-index:50}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.\\!m-0{margin:calc(var(--spacing)*0)!important}.-mx-1{margin-inline:calc(var(--spacing)*-1)}.mx-4{margin-inline:calc(var(--spacing)*4)}.mx-6{margin-inline:calc(var(--spacing)*6)}.mx-auto{margin-inline:auto}.-my-2{margin-block:calc(var(--spacing)*-2)}.my-1{margin-block:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.field-sizing-content{field-sizing:content}.size-2{width:calc(var(--spacing)*2);height:calc(var(--spacing)*2)}.size-2\\.5{width:calc(var(--spacing)*2.5);height:calc(var(--spacing)*2.5)}.size-3\\.5{width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-4\\.5{width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-7{width:calc(var(--spacing)*7);height:calc(var(--spacing)*7)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.size-13{width:calc(var(--spacing)*13);height:calc(var(--spacing)*13)}.size-\\[1\\.2rem\\]{width:1.2rem;height:1.2rem}.size-full{width:100%;height:100%}.h-2\\.5{height:calc(var(--spacing)*2.5)}.h-4\\.5{height:calc(var(--spacing)*4.5)}.h-5{height:calc(var(--spacing)*5)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-40{height:calc(var(--spacing)*40)}.h-80{height:calc(var(--spacing)*80)}.h-\\[1\\.15rem\\]{height:1.15rem}.h-\\[400px\\]{height:400px}.h-\\[calc\\(100\\%-1px\\)\\]{height:calc(100% - 1px)}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-\\(--radix-dropdown-menu-content-available-height\\){max-height:var(--radix-dropdown-menu-content-available-height)}.max-h-4\\/5{max-height:80%}.max-h-20{max-height:calc(var(--spacing)*20)}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-5{min-height:calc(var(--spacing)*5)}.min-h-15{min-height:calc(var(--spacing)*15)}.min-h-16{min-height:calc(var(--spacing)*16)}.w-2\\.5{width:calc(var(--spacing)*2.5)}.w-2xs{width:var(--container-2xs)}.w-8{width:calc(var(--spacing)*8)}.w-15{width:calc(var(--spacing)*15)}.w-20{width:calc(var(--spacing)*20)}.w-26{width:calc(var(--spacing)*26)}.w-40{width:calc(var(--spacing)*40)}.w-50{width:calc(var(--spacing)*50)}.w-72{width:calc(var(--spacing)*72)}.w-88{width:calc(var(--spacing)*88)}.w-96{width:calc(var(--spacing)*96)}.w-\\[600px\\]{width:600px}.w-fit{width:fit-content}.w-full{width:100%}.w-screen{width:100vw}.max-w-4\\/5{max-width:80%}.max-w-\\[calc\\(100\\%-2rem\\)\\]{max-width:calc(100% - 2rem)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[8rem\\]{min-width:8rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-\\(--radix-dropdown-menu-content-transform-origin\\){transform-origin:var(--radix-dropdown-menu-content-transform-origin)}.origin-\\(--radix-popover-content-transform-origin\\){transform-origin:var(--radix-popover-content-transform-origin)}.origin-\\(--radix-tooltip-content-transform-origin\\){transform-origin:var(--radix-tooltip-content-transform-origin)}.-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-\\[-50\\%\\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-1\\/6{--tw-translate-y:calc(1/6*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\\[calc\\(-50\\%_-_2px\\)\\]{--tw-translate-y: calc(-50% - 2px) ;translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-0{rotate:none}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.list-disc{list-style-type:disc}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-\\[1fr_auto_auto\\]{grid-template-columns:1fr auto auto}.grid-rows-\\[auto_auto\\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-stretch{justify-content:stretch}.justify-items-center{justify-items:center}.gap-0{gap:calc(var(--spacing)*0)}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.gap-7{gap:calc(var(--spacing)*7)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.self-center{align-self:center}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[2px\\]{border-radius:2px}.rounded-\\[inherit\\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-xs{border-radius:var(--radius-xs)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border)}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.border-white\\/20{border-color:#fff3}@supports (color:color-mix(in lab,red,red)){.border-white\\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-accent{background-color:var(--accent)}.bg-background{background-color:var(--background)}.bg-black\\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\\/50{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.bg-black\\/70{background-color:#000000b3}@supports (color:color-mix(in lab,red,red)){.bg-black\\/70{background-color:color-mix(in oklab,var(--color-black)70%,transparent)}}.bg-border{background-color:var(--border)}.bg-card{background-color:var(--card)}.bg-destructive{background-color:var(--destructive)}.bg-foreground{background-color:var(--foreground)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-input{background-color:var(--input)}.bg-muted{background-color:var(--muted)}.bg-popover{background-color:var(--popover)}.bg-primary,.bg-primary\\/35{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\\/35{background-color:color-mix(in oklab,var(--primary)35%,transparent)}}.bg-primary\\/90{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\\/90{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:#0000}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-green-400\\/70{--tw-gradient-from:#05df72b3}@supports (color:color-mix(in lab,red,red)){.from-green-400\\/70{--tw-gradient-from:color-mix(in oklab,var(--color-green-400)70%,transparent)}}.from-green-400\\/70{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-red-400\\/70{--tw-gradient-from:#ff6568b3}@supports (color:color-mix(in lab,red,red)){.from-red-400\\/70{--tw-gradient-from:color-mix(in oklab,var(--color-red-400)70%,transparent)}}.from-red-400\\/70{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-emerald-400\\/60{--tw-gradient-to:#00d29499}@supports (color:color-mix(in lab,red,red)){.to-emerald-400\\/60{--tw-gradient-to:color-mix(in oklab,var(--color-emerald-400)60%,transparent)}}.to-emerald-400\\/60{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-rose-400\\/60{--tw-gradient-to:#ff667f99}@supports (color:color-mix(in lab,red,red)){.to-rose-400\\/60{--tw-gradient-to:color-mix(in oklab,var(--color-rose-400)60%,transparent)}}.to-rose-400\\/60{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.fill-amber-500{fill:var(--color-amber-500)}.fill-blue-500{fill:var(--color-blue-500)}.fill-current{fill:currentColor}.fill-foreground{fill:var(--foreground)}.fill-green-500{fill:var(--color-green-500)}.fill-red-500{fill:var(--color-red-500)}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing)*0)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-\\[3px\\]{padding:3px}.p-px{padding:1px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-3\\.5{padding-inline:calc(var(--spacing)*3.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-14{padding-inline:calc(var(--spacing)*14)}.py-0{padding-block:calc(var(--spacing)*0)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-3\\.5{padding-block:calc(var(--spacing)*3.5)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-0{padding-top:calc(var(--spacing)*0)}.pr-2{padding-right:calc(var(--spacing)*2)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.align-bottom{vertical-align:bottom}.align-top{vertical-align:top}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\\/relaxed{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-none{--tw-leading:1;line-height:1}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-balance{text-wrap:balance}.break-all{word-break:break-all}.break-keep{word-break:keep-all}.whitespace-nowrap{white-space:nowrap}.text-background{color:var(--background)}.text-black\\/40{color:#0006}@supports (color:color-mix(in lab,red,red)){.text-black\\/40{color:color-mix(in oklab,var(--color-black)40%,transparent)}}.text-blue-600{color:var(--color-blue-600)}.text-card-foreground{color:var(--card-foreground)}.text-destructive{color:var(--destructive)}.text-foreground{color:var(--foreground)}.text-gray-200{color:var(--color-gray-200)}.text-gray-600{color:var(--color-gray-600)}.text-muted-foreground{color:var(--muted-foreground)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.opacity-70{opacity:.7}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[color\\,box-shadow\\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.fade-in-0{--tw-enter-opacity:0}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.zoom-in-95{--tw-enter-scale:.95}.group-focus-within\\:bg-primary:is(:where(.group):focus-within *){background-color:var(--primary)}.group-has-\\[\\[data-orientation\\=horizontal\\]\\]\\/field\\:text-balance:is(:where(.group\\/field):has([data-orientation=horizontal]) *){text-wrap:balance}.group-data-\\[disabled\\=true\\]\\:pointer-events-none:is(:where(.group)[data-disabled=true] *){pointer-events:none}.group-data-\\[disabled\\=true\\]\\:opacity-50:is(:where(.group)[data-disabled=true] *),.group-data-\\[disabled\\=true\\]\\/field\\:opacity-50:is(:where(.group\\/field)[data-disabled=true] *){opacity:.5}.group-data-\\[variant\\=outline\\]\\/field-group\\:-mb-2:is(:where(.group\\/field-group)[data-variant=outline] *){margin-bottom:calc(var(--spacing)*-2)}.peer-disabled\\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\\:bg-primary ::selection{background-color:var(--primary)}.selection\\:bg-primary::selection{background-color:var(--primary)}.selection\\:text-primary-foreground ::selection{color:var(--primary-foreground)}.selection\\:text-primary-foreground::selection{color:var(--primary-foreground)}.file\\:inline-flex::file-selector-button{display:inline-flex}.file\\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\\:bg-transparent::file-selector-button{background-color:#0000}.file\\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\\:text-foreground::file-selector-button{color:var(--foreground)}.placeholder\\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.last\\:mt-0:last-child{margin-top:calc(var(--spacing)*0)}.focus-within\\:border-primary:focus-within{border-color:var(--primary)}@media (hover:hover){.hover\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:bg-accent:hover{background-color:var(--accent)}.hover\\:bg-destructive\\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-destructive\\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\\:bg-primary\\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-primary\\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\\:bg-secondary:hover,.hover\\:bg-secondary\\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-secondary\\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\\:text-primary:hover{color:var(--primary)}.hover\\:no-underline:hover{text-decoration-line:none}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:opacity-100:hover{opacity:1}.hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\\:bg-accent:focus{background-color:var(--accent)}.focus\\:text-accent-foreground:focus{color:var(--accent-foreground)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus-visible\\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\\:ring-\\[3px\\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.focus-visible\\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\\:outline-ring:focus-visible{outline-color:var(--ring)}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.has-data-\\[slot\\=card-action\\]\\:grid-cols-\\[1fr_auto\\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-data-\\[state\\=checked\\]\\:border-primary:has([data-state=checked]){border-color:var(--primary)}.has-data-\\[state\\=checked\\]\\:bg-primary\\/5:has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.has-data-\\[state\\=checked\\]\\:bg-primary\\/5:has([data-state=checked]){background-color:color-mix(in oklab,var(--primary)5%,transparent)}}.has-\\[\\>\\[data-slot\\=button-group\\]\\]\\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--spacing)*2)}.has-\\[\\>\\[data-slot\\=checkbox-group\\]\\]\\:gap-3:has(>[data-slot=checkbox-group]){gap:calc(var(--spacing)*3)}.has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:items-start:has(>[data-slot=field-content]){align-items:flex-start}.has-\\[\\>\\[data-slot\\=field\\]\\]\\:w-full:has(>[data-slot=field]){width:100%}.has-\\[\\>\\[data-slot\\=field\\]\\]\\:flex-col:has(>[data-slot=field]){flex-direction:column}.has-\\[\\>\\[data-slot\\=field\\]\\]\\:rounded-md:has(>[data-slot=field]){border-radius:calc(var(--radius) - 2px)}.has-\\[\\>\\[data-slot\\=field\\]\\]\\:border:has(>[data-slot=field]){border-style:var(--tw-border-style);border-width:1px}.has-\\[\\>\\[data-slot\\=radio-group\\]\\]\\:gap-3:has(>[data-slot=radio-group]){gap:calc(var(--spacing)*3)}.has-\\[\\>svg\\]\\:px-2\\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\\[\\>svg\\]\\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\\[\\>svg\\]\\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.aria-invalid\\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.data-\\[disabled\\]\\:pointer-events-none[data-disabled]{pointer-events:none}.data-\\[disabled\\]\\:opacity-50[data-disabled]{opacity:.5}.data-\\[inset\\]\\:pl-8[data-inset]{padding-left:calc(var(--spacing)*8)}.data-\\[invalid\\=true\\]\\:text-destructive[data-invalid=true]{color:var(--destructive)}.data-\\[orientation\\=horizontal\\]\\:h-px[data-orientation=horizontal]{height:1px}.data-\\[orientation\\=horizontal\\]\\:w-full[data-orientation=horizontal]{width:100%}.data-\\[orientation\\=vertical\\]\\:h-auto[data-orientation=vertical]{height:auto}.data-\\[orientation\\=vertical\\]\\:h-full[data-orientation=vertical]{height:100%}.data-\\[orientation\\=vertical\\]\\:w-px[data-orientation=vertical]{width:1px}.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\\[slot\\=checkbox-group\\]\\:gap-3[data-slot=checkbox-group]{gap:calc(var(--spacing)*3)}.data-\\[state\\=active\\]\\:bg-background[data-state=active]{background-color:var(--background)}.data-\\[state\\=active\\]\\:shadow-sm[data-state=active]{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.data-\\[state\\=checked\\]\\:translate-x-\\[calc\\(100\\%-2px\\)\\][data-state=checked]{--tw-translate-x: calc(100% - 2px) ;translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked]{background-color:var(--primary)}.data-\\[state\\=closed\\]\\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\\[state\\=inactive\\]\\:hidden[data-state=inactive]{display:none}.data-\\[state\\=open\\]\\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\\[state\\=open\\]\\:bg-accent[data-state=open]{background-color:var(--accent)}.data-\\[state\\=open\\]\\:text-accent-foreground[data-state=open]{color:var(--accent-foreground)}.data-\\[state\\=open\\]\\:text-muted-foreground[data-state=open]{color:var(--muted-foreground)}.data-\\[state\\=open\\]\\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\\[state\\=open\\]\\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked]{background-color:var(--input)}.data-\\[variant\\=destructive\\]\\:text-destructive[data-variant=destructive]{color:var(--destructive)}.data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10[data-variant=destructive]:focus{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10[data-variant=destructive]:focus{background-color:color-mix(in oklab,var(--destructive)10%,transparent)}}.data-\\[variant\\=destructive\\]\\:focus\\:text-destructive[data-variant=destructive]:focus{color:var(--destructive)}.data-\\[variant\\=label\\]\\:text-sm[data-variant=label]{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.data-\\[variant\\=legend\\]\\:text-base[data-variant=legend]{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.nth-last-2\\:-mt-1:nth-last-child(2){margin-top:calc(var(--spacing)*-1)}@media (min-width:40rem){.sm\\:max-w-lg{max-width:var(--container-lg)}.sm\\:flex-row{flex-direction:row}.sm\\:justify-end{justify-content:flex-end}.sm\\:text-left{text-align:left}}@media (min-width:48rem){.md\\:p-12{padding:calc(var(--spacing)*12)}.md\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:64rem){.lg\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:80rem){.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\\:px-16{padding-inline:calc(var(--spacing)*16)}}@media (min-width:96rem){.\\32xl\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@container field-group (min-width:28rem){.\\@md\\/field-group\\:flex-row{flex-direction:row}.\\@md\\/field-group\\:items-center{align-items:center}.\\@md\\/field-group\\:has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:items-start:has(>[data-slot=field-content]){align-items:flex-start}}.dark\\:scale-0:is(.dark *){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.dark\\:scale-100:is(.dark *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.dark\\:-rotate-90:is(.dark *){rotate:-90deg}.dark\\:rotate-0:is(.dark *){rotate:none}.dark\\:border-input:is(.dark *){border-color:var(--input)}.dark\\:bg-destructive\\/60:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-destructive\\/60:is(.dark *){background-color:color-mix(in oklab,var(--destructive)60%,transparent)}}.dark\\:bg-input\\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\\:bg-input\\/30:is(.dark *){background-color:color-mix(in oklab,var(--input)30%,transparent)}}.dark\\:text-muted-foreground:is(.dark *){color:var(--muted-foreground)}@media (hover:hover){.dark\\:hover\\:bg-accent\\/50:is(.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.dark\\:hover\\:bg-accent\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}.dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)50%,transparent)}}}.dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.dark\\:has-data-\\[state\\=checked\\]\\:bg-primary\\/10:is(.dark *):has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.dark\\:has-data-\\[state\\=checked\\]\\:bg-primary\\/10:is(.dark *):has([data-state=checked]){background-color:color-mix(in oklab,var(--primary)10%,transparent)}}.dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.dark\\:data-\\[state\\=active\\]\\:border-input:is(.dark *)[data-state=active]{border-color:var(--input)}.dark\\:data-\\[state\\=active\\]\\:bg-input\\/30:is(.dark *)[data-state=active]{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\\:data-\\[state\\=active\\]\\:bg-input\\/30:is(.dark *)[data-state=active]{background-color:color-mix(in oklab,var(--input)30%,transparent)}}.dark\\:data-\\[state\\=active\\]\\:text-foreground:is(.dark *)[data-state=active]{color:var(--foreground)}.dark\\:data-\\[state\\=checked\\]\\:bg-primary-foreground:is(.dark *)[data-state=checked]{background-color:var(--primary-foreground)}.dark\\:data-\\[state\\=unchecked\\]\\:bg-foreground:is(.dark *)[data-state=unchecked]{background-color:var(--foreground)}.dark\\:data-\\[state\\=unchecked\\]\\:bg-input\\/80:is(.dark *)[data-state=unchecked]{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\\:data-\\[state\\=unchecked\\]\\:bg-input\\/80:is(.dark *)[data-state=unchecked]{background-color:color-mix(in oklab,var(--input)80%,transparent)}}.dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20:is(.dark *)[data-variant=destructive]:focus{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20:is(.dark *)[data-variant=destructive]:focus{background-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-6 svg:not([class*=size-]){width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.\\[\\.border-b\\]\\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\\[\\.border-t\\]\\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}:is(.data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive[data-variant=destructive]>*):is(svg){color:var(--destructive)!important}.\\[\\&\\>\\*\\]\\:w-full>*{width:100%}.\\[\\&\\>\\*\\]\\:focus-visible\\:relative>:focus-visible{position:relative}.\\[\\&\\>\\*\\]\\:focus-visible\\:z-10>:focus-visible{z-index:10}.\\[\\&\\>\\*\\]\\:data-\\[slot\\=field\\]\\:p-4>[data-slot=field]{padding:calc(var(--spacing)*4)}@container field-group (min-width:28rem){.\\@md\\/field-group\\:\\[\\&\\>\\*\\]\\:w-auto>*{width:auto}}.\\[\\&\\>\\*\\:not\\(\\:first-child\\)\\]\\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.\\[\\&\\>\\*\\:not\\(\\:first-child\\)\\]\\:rounded-l-none>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.\\[\\&\\>\\*\\:not\\(\\:first-child\\)\\]\\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.\\[\\&\\>\\*\\:not\\(\\:first-child\\)\\]\\:border-l-0>:not(:first-child){border-left-style:var(--tw-border-style);border-left-width:0}.\\[\\&\\>\\*\\:not\\(\\:last-child\\)\\]\\:rounded-r-none>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.\\[\\&\\>\\*\\:not\\(\\:last-child\\)\\]\\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.\\[\\&\\>\\.sr-only\\]\\:w-auto>.sr-only{width:auto}.\\[\\&\\>\\[data-slot\\=field-group\\]\\]\\:gap-4>[data-slot=field-group]{gap:calc(var(--spacing)*4)}.\\[\\&\\>\\[data-slot\\=field-label\\]\\]\\:flex-auto>[data-slot=field-label]{flex:auto}@container field-group (min-width:28rem){.\\@md\\/field-group\\:\\[\\&\\>\\[data-slot\\=field-label\\]\\]\\:flex-auto>[data-slot=field-label]{flex:auto}}.has-\\[select\\[aria-hidden\\=true\\]\\:last-child\\]\\:\\[\\&\\>\\[data-slot\\=select-trigger\\]\\:last-of-type\\]\\:rounded-r-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\\[\\&\\>\\[data-slot\\=select-trigger\\]\\:not\\(\\[class\\*\\=\\'w-\\'\\]\\)\\]\\:w-fit>[data-slot=select-trigger]:not([class*=w-]){width:fit-content}.has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:\\[\\&\\>\\[role\\=checkbox\\]\\,\\[role\\=radio\\]\\]\\:mt-px:has(>[data-slot=field-content])>[role=checkbox],.has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:\\[\\&\\>\\[role\\=checkbox\\]\\,\\[role\\=radio\\]\\]\\:mt-px:has(>[data-slot=field-content]) [role=radio]{margin-top:1px}@container field-group (min-width:28rem){.\\@md\\/field-group\\:has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:\\[\\&\\>\\[role\\=checkbox\\]\\,\\[role\\=radio\\]\\]\\:mt-px:has(>[data-slot=field-content])>[role=checkbox],.\\@md\\/field-group\\:has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:\\[\\&\\>\\[role\\=checkbox\\]\\,\\[role\\=radio\\]\\]\\:mt-px:has(>[data-slot=field-content]) [role=radio]{margin-top:1px}}.\\[\\&\\>a\\]\\:underline>a{text-decoration-line:underline}.\\[\\&\\>a\\]\\:underline-offset-4>a{text-underline-offset:4px}.\\[\\&\\>a\\:hover\\]\\:text-primary>a:hover{color:var(--primary)}.\\[\\&\\>div\\]\\:\\!block>div{display:block!important}.\\[\\&\\>input\\]\\:flex-1>input{flex:1}.\\[\\&\\>svg\\]\\:pointer-events-none>svg{pointer-events:none}.\\[\\&\\>svg\\]\\:size-2\\.5>svg{width:calc(var(--spacing)*2.5);height:calc(var(--spacing)*2.5)}.\\[\\&\\>svg\\]\\:size-3>svg{width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}[data-variant=legend]+.\\[\\[data-variant\\=legend\\]\\+\\&\\]\\:-mt-1\\.5{margin-top:calc(var(--spacing)*-1.5)}@media (hover:hover){a.\\[a\\&\\]\\:hover\\:bg-accent:hover{background-color:var(--accent)}a.\\[a\\&\\]\\:hover\\:bg-destructive\\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){a.\\[a\\&\\]\\:hover\\:bg-destructive\\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}a.\\[a\\&\\]\\:hover\\:bg-primary\\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){a.\\[a\\&\\]\\:hover\\:bg-primary\\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}a.\\[a\\&\\]\\:hover\\:bg-secondary\\/90:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){a.\\[a\\&\\]\\:hover\\:bg-secondary\\/90:hover{background-color:color-mix(in oklab,var(--secondary)90%,transparent)}}a.\\[a\\&\\]\\:hover\\:text-accent-foreground:hover{color:var(--accent-foreground)}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(70.5% .213 47.604);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(70.5% .213 47.604);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}::view-transition-new(root){animation:none}::view-transition-old(root){animation:none}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}`;
importCSS(indexCss);
const prefix$1 = "cx-style";
const _bannedWordsAtom = utils.atomWithStorage(
`${prefix$1}-banned_words`,
[]
);
const _bannedUsersAtom = utils.atomWithStorage(
`${prefix$1}-banned_users`,
[]
);
const bannedWordsAtom = jotai.atom(
(get2) => get2(_bannedWordsAtom),
(get2, set2, action) => {
const prev = get2(_bannedWordsAtom);
let next;
switch (action.type) {
case "add":
const { word } = action;
next = [word, ...prev.filter((i2) => i2 !== word)];
break;
case "remove":
next = prev.filter((i2) => i2 !== action.word);
break;
case "clear":
next = [];
break;
default:
next = prev;
}
set2(_bannedWordsAtom, next);
}
);
const bannedUsersAtom = jotai.atom(
(get2) => get2(_bannedUsersAtom),
(get2, set2, action) => {
const prev = get2(_bannedUsersAtom);
let next;
switch (action.type) {
case "add": {
const { user } = action;
next = [user, ...prev.filter((i2) => i2.id !== user.id)];
break;
}
case "remove": {
next = prev.filter((i2) => i2.id !== action.id);
break;
}
case "clear":
next = [];
break;
default:
next = prev;
}
set2(_bannedUsersAtom, next);
}
);
async function fetchStreamers() {
const response = await fetch("http://175.178.29.106/webhook/n8n/query");
return response.json();
}
async function fetchImage(key) {
const response = await fetch(
`http://175.178.29.106:5678/webhook/queryByEmojiName?emojiName=${encodeURIComponent(key)}`
);
return response.json();
}
async function fetchEmoji() {
const response = await fetch("http://175.178.29.106/webhook/n8n/emojiQuery");
return response.json();
}
async function fetchStsToken() {
const response = await fetch("http://175.178.29.106:8001/sts-token");
return response.json();
}
async function submitEmojiUrl(url) {
const response = await fetch(
"http://175.178.29.106/webhook/n8n/emojiSubmit",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ url })
}
);
return response.json();
}
const storagePrefix = "cx-style";
const _pinnedIdsAtom = utils.atomWithStorage(
`${storagePrefix}-pinned_streamers`,
[]
);
const _streamerRemarksAtom = utils.atomWithStorage(
`${storagePrefix}-streamer_remarks`,
[]
);
const pinnedIdsAtom = jotai.atom(
(get2) => get2(_pinnedIdsAtom),
(get2, set2, action) => {
const prev = get2(_pinnedIdsAtom);
let next;
switch (action.type) {
case "add": {
const id2 = action.id;
next = [id2, ...prev.filter((i2) => i2 !== id2)];
break;
}
case "remove": {
next = prev.filter((i2) => i2 !== action.id);
break;
}
case "clear": {
next = [];
break;
}
default:
next = prev;
}
const unique = Array.from(new Set(next));
set2(_pinnedIdsAtom, unique);
}
);
const streamersAtom = jotai.atom([]);
const streamersStatusAtom = jotai.atom(
"idle"
);
const lastUpdatedAtom = jotai.atom(null);
const fetchStreamersAtom = jotai.atom(null, async (_, set2) => {
set2(streamersStatusAtom, "loading");
try {
const data = await fetchStreamers();
set2(streamersAtom, data);
set2(lastUpdatedAtom, new Date());
set2(streamersStatusAtom, "done");
} catch (e) {
set2(streamersStatusAtom, "error");
}
});
const liveStreamersAtom = jotai.atom(async (get2) => {
const pinned = new Set(get2(_pinnedIdsAtom));
const streamers = await get2(streamersAtom);
return streamers.filter((s2) => s2.status === 1 && !pinned.has(s2.id));
});
const offlineStreamersAtom = jotai.atom(async (get2) => {
const pinned = new Set(get2(_pinnedIdsAtom));
const streamers = await get2(streamersAtom);
return streamers.filter((s2) => s2.status === 0 && !pinned.has(s2.id));
});
const pinnedStreamersAtom = jotai.atom(async (get2) => {
const pinned = get2(_pinnedIdsAtom);
const streamers = await get2(streamersAtom);
const pinnedSet = new Set(pinned);
return [
...streamers.filter((s2) => pinnedSet.has(s2.id)).sort((a2, b) => b.status - a2.status)
];
});
const streamerRemarksAtom = jotai.atom(
(get2) => get2(_streamerRemarksAtom),
(get2, set2, action) => {
const prev = get2(_streamerRemarksAtom);
let next = [];
switch (action.type) {
case "add": {
const { remark } = action;
next = [remark, ...prev.filter((i2) => i2.id !== remark.id)];
break;
}
case "remove": {
next = prev.filter((i2) => i2.id !== action.id);
break;
}
case "clear": {
next = [];
break;
}
default:
next = prev;
}
set2(_streamerRemarksAtom, next);
}
);
const streamerRemarkAtom = utils.atomFamily(
(id2) => jotai.atom((get2) => {
const remarks = get2(_streamerRemarksAtom);
return remarks.find((r2) => r2.id === id2) ?? null;
})
);
const userAtom = jotai.atom(null);
function injectCSS(css) {
const style2 = document.createElement("style");
style2.textContent = css;
document.head.appendChild(style2);
}
function formatDate(date) {
let dateObj;
if (date instanceof Date) {
dateObj = date;
} else {
dateObj = new Date(date);
}
const year = dateObj.getFullYear();
const month = (dateObj.getMonth() + 1).toString().padStart(2, "0");
const day = dateObj.getDate().toString().padStart(2, "0");
const hours = dateObj.getHours().toString().padStart(2, "0");
const minutes = dateObj.getMinutes().toString().padStart(2, "0");
const seconds = dateObj.getSeconds().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function formatLiveDuration(dateStr) {
const startTime = Date.now() - new Date(dateStr).getTime() + 8 * 3600 * 1e3;
const totalSeconds = Math.ceil(startTime / 1e3);
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.ceil(totalSeconds / 60) % 60;
return hours > 0 ? `${hours}h${minutes}min` : `${minutes}min`;
}
function debounce(func, delay2, immediate = false) {
let timer = null;
return (...args) => {
const callNow = immediate && !timer;
if (timer) clearTimeout(timer);
timer = window.setTimeout(() => {
timer = null;
if (!immediate) func(...args);
}, delay2);
if (callNow) func(...args);
};
}
const prefix = "[chou-xiang-style]";
function log(...args) {
console.log(`${prefix} `, ...args);
}
function error(...args) {
console.error(`${prefix} `, ...args);
}
function parseMessage(text) {
if (!text) return [];
const parts = [];
const regex = /(https?:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])|\[([^\]]+)\]/g;
let lastIndex = 0;
let match;
while ((match = regex.exec(text)) !== null) {
const [_, url, bracketContent] = match;
if (match.index > lastIndex) {
parts.push({ type: "text", text: text.slice(lastIndex, match.index) });
}
if (url) {
parts.push({ type: "link", url });
} else if (bracketContent) {
parts.push({
type: /no\.\d+/.test(bracketContent) ? "image" : "emoji",
key: bracketContent
});
}
lastIndex = regex.lastIndex;
}
if (lastIndex < text.length) {
parts.push({ type: "text", text: text.slice(lastIndex) });
}
return parts;
}
const DB_NAME = "emojiDB";
const STORE_NAME$1 = "emojis";
const DB_VERSION = Number("2");
let dbPromise = null;
function openDB() {
if (dbPromise) return dbPromise;
dbPromise = new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = () => {
const db = request.result;
if (db.objectStoreNames.contains(STORE_NAME$1)) {
db.deleteObjectStore(STORE_NAME$1);
}
const store = db.createObjectStore(STORE_NAME$1, {
keyPath: "id",
autoIncrement: true
});
store.createIndex("key", "key", { unique: true });
store.createIndex("timestamp", "timestamp", { unique: false });
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
return dbPromise;
}
const STORE_NAME = "emojis";
const EXPIRE_DAYS = Number("30");
function isCacheExpired(timestamp) {
if (EXPIRE_DAYS === 0) return true;
return Date.now() - timestamp > EXPIRE_DAYS * 24 * 60 * 60 * 1e3;
}
async function getCachedImage(key) {
const db = await openDB();
return new Promise((resolve, reject) => {
const request = db.transaction(STORE_NAME).objectStore(STORE_NAME).index("key").get(key);
request.onsuccess = (e) => {
const result = e.target.result;
if (result && !isCacheExpired(result.timestamp)) {
const blob = new Blob([result.blob], { type: result.type });
resolve(URL.createObjectURL(blob));
} else {
resolve(null);
}
};
request.onerror = (e) => {
error("getting cache image error");
reject(e);
};
});
}
async function setCachedImage(record) {
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction(STORE_NAME, "readwrite");
const store = transaction.objectStore(STORE_NAME);
const request = store.add(record);
request.onsuccess = () => resolve();
request.onerror = () => {
error(`setting cache image error`);
reject(request.error);
};
});
}
function getCacheKey(emoji) {
return emoji.emojiname || `no.${emoji.id}`;
}
async function getEmojiImageUrl(key) {
try {
const cachedUrl = await getCachedImage(key);
if (cachedUrl) return cachedUrl;
const data = await fetchImage(key);
if (!data || !data.url) {
error("fetch image failed:", data);
return null;
}
const emoji = {
emojiname: data.emoji_name,
id: data.id,
url: data.url
};
const blobUrl = await cacheEmojiImage(emoji);
return blobUrl;
} catch (e) {
error(`${key} image load failed`, e);
throw e;
}
}
async function cacheEmojiImage(emoji) {
const key = getCacheKey(emoji);
try {
const cachedUrl = await getCachedImage(key);
if (cachedUrl) return cachedUrl;
const response = await fetch(emoji.url);
if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
const blob = await response.blob();
const blobBuffer = await blob.arrayBuffer();
await setCachedImage({
key,
blob: blobBuffer,
type: blob.type,
timestamp: Date.now(),
url: emoji.url
});
return URL.createObjectURL(blob);
} catch (e) {
const cachedUrl = await getCachedImage(key);
if (cachedUrl) return cachedUrl;
error("缓存图片失败:", e);
throw e;
}
}
function uploadFile(file, stsToken) {
const { credentials, cosConfig, startTime, expiredTime } = stsToken.data;
const folder = cosConfig.folder || "emojis/";
const extension = file.name.split(".").pop();
const fileName = `${Date.now()}-${Math.random().toString(36).substring(2, 8)}.${extension}`;
const key = folder + fileName;
const cos = new COS({
getAuthorization(_, callback) {
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
StartTime: startTime,
ExpiredTime: expiredTime
});
}
});
return new Promise((resolve, reject) => {
cos.putObject(
{
Bucket: cosConfig.bucket,
Region: cosConfig.region,
Key: key,
Body: file,
onProgress: (progressData) => {
log(`上传进度: ${Math.round(progressData.percent * 100)}%`);
}
},
(err, data) => {
if (err) return reject(err);
const cosUrl = `https://${data.Location}`;
resolve(cosUrl);
}
);
});
}
function skipMessageByBannedWords(message, bannedWords) {
return bannedWords.length > 0 && bannedWords.some((word) => {
if (!word || !message.message) return false;
try {
return new RegExp(word, "i").test(message.message);
} catch (e) {
return message.message.includes(word);
}
});
}
function skipMessageByBannedUsers(message, bannedUsers) {
return bannedUsers.length > 0 && bannedUsers.some((user) => user.id === message.id);
}
const maxMessageCount = Number("300");
const maxRetry = Number("5");
function useChatWebSocket(url) {
const [messages, setMessages] = React.useState([]);
const [onlineCount, setOnlineCount] = React.useState(-1);
const [isConnected, setIsConnected] = React.useState(false);
const wsRef = React.useRef(null);
const fetchStreamers2 = jotai.useSetAtom(fetchStreamersAtom);
const [user, setUser] = jotai.useAtom(userAtom);
const bannedWords = jotai.useAtomValue(bannedWordsAtom);
const bannedUsers = jotai.useAtomValue(bannedUsersAtom);
const retryCountRef = React.useRef(0);
const reconnectTimer = React.useRef(0);
const bannedWordsRef = React.useRef([]);
const bannedUsersRef = React.useRef([]);
bannedWordsRef.current = bannedWords;
bannedUsersRef.current = bannedUsers;
const handleOpen = () => {
log("chat websocket open");
setIsConnected(true);
retryCountRef.current = 0;
clearTimeout(reconnectTimer.current);
};
const handleMessage = (e) => {
try {
const msg = JSON.parse(e.data);
const { type } = msg;
msg.helpId = `${Date.now()}-${Math.random().toFixed(8)}`;
if (type === "message" || type === "history_message" || type === "system") {
if (!skipMessageByBannedWords(msg, bannedWordsRef.current) && !skipMessageByBannedUsers(msg, bannedUsersRef.current)) {
setMessages((prev) => [...prev, msg].splice(-maxMessageCount));
}
} else if (type === "status_change") {
fetchStreamers2();
if (msg.content.status === "1") {
setMessages((prev) => [...prev, msg].splice(-maxMessageCount));
}
} else if (type === "join" || type === "leave") {
setOnlineCount(msg.count);
if (type === "join") {
}
} else if (type === "user") {
setUser(msg);
}
} catch (err) {
error("chat websocket message parse error:", err);
}
};
const handleError = (e) => {
error("chat websocket error:", e);
wsRef.current?.close();
};
const handleClose = () => {
log("chat websocket closed");
setIsConnected(false);
if (retryCountRef.current < maxRetry) {
const delay2 = Math.min(1e3 * 2 ** retryCountRef.current, 1e4);
retryCountRef.current++;
log(`attempting reconnect in ${delay2 / 1e3}s...`);
reconnectTimer.current = window.setTimeout(connect, delay2);
} else {
error("max reconnect attempts reached");
}
};
const connect = () => {
const ws = new WebSocket(url);
wsRef.current = ws;
ws.addEventListener("open", handleOpen);
ws.addEventListener("message", handleMessage);
ws.addEventListener("error", handleError);
ws.addEventListener("close", handleClose);
};
const cleanupWebSocket = () => {
const ws = wsRef.current;
if (!ws) return;
ws.removeEventListener("open", handleOpen);
ws.removeEventListener("message", handleMessage);
ws.removeEventListener("error", handleError);
ws.removeEventListener("close", handleClose);
ws.close();
};
React.useEffect(() => {
connect();
return () => {
clearTimeout(reconnectTimer.current);
cleanupWebSocket();
};
}, [url]);
const sendMessage = (message) => {
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
if (!user) return;
const newMsg = {
type: "message",
ip: user.ip,
username: user.username,
message
};
wsRef.current.send(JSON.stringify(newMsg));
};
return {
messages,
onlineCount,
isConnected,
sendMessage
};
}
function useUnreadMessages(messages, isAutoScrollEnabled) {
const lastHelpIdRef = React.useRef(null);
const stopTrackingRef = React.useRef(false);
const newMessages = React.useMemo(() => {
if (isAutoScrollEnabled) {
stopTrackingRef.current = false;
lastHelpIdRef.current = messages.length ? messages[messages.length - 1].helpId : null;
return [];
}
if (!stopTrackingRef.current) {
lastHelpIdRef.current = messages.length ? messages[messages.length - 1].helpId : null;
stopTrackingRef.current = true;
return [];
}
if (!lastHelpIdRef.current) return messages;
const index2 = messages.findIndex((m) => m.helpId === lastHelpIdRef.current);
if (index2 === -1) return messages;
return messages.slice(index2 + 1);
}, [messages, isAutoScrollEnabled]);
return newMessages;
}
function useSmartAutoScroll(options) {
const behavior = "instant";
const containerRef = React.useRef(null);
const [isAutoScrollEnabled, setIsAutoScrollEnabled] = React.useState(true);
const handleScroll2 = React.useCallback(() => {
const el = containerRef.current;
if (!el) return;
const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
setIsAutoScrollEnabled(isAtBottom);
}, []);
const debounceScroll = React.useRef(debounce(handleScroll2, 100)).current;
React.useEffect(() => {
const el = containerRef.current;
if (!el) return;
el.addEventListener("scroll", debounceScroll);
return () => el.removeEventListener("scroll", debounceScroll);
}, [debounceScroll]);
const scrollToBottom = () => {
const el = containerRef.current;
if (!el) return;
el.scrollTo({
top: el.scrollHeight,
behavior
});
};
return { containerRef, scrollToBottom, isAutoScrollEnabled };
}
const requestCache = new Map();
function useRequest(service, options = {}) {
const {
manual = false,
cacheKey,
onError,
onSuccess,
staleTime = 0,
defaultParams = []
} = options;
const [data, setData] = React.useState();
const [error2, setError] = React.useState(null);
const hasFetched = React.useRef(false);
const [loading, setLoading] = React.useState(false);
const run = async (...params) => {
setLoading(true);
setError(null);
try {
if (cacheKey && staleTime > 0) {
const cached2 = requestCache.get(cacheKey);
const isValid = cached2 && Date.now() - cached2.timestamp < staleTime;
if (isValid) {
setData(cached2.data);
return cached2.data;
}
}
const result = await service(...params);
setData(result);
onSuccess?.(result);
if (cacheKey) {
requestCache.set(cacheKey, {
data: result,
timestamp: Date.now()
});
}
return result;
} catch (e) {
setError(e);
onError?.(e);
throw e;
} finally {
setLoading(false);
}
};
React.useEffect(() => {
if (!manual && !hasFetched.current) {
hasFetched.current = true;
run(...defaultParams);
}
}, [manual]);
return { data, loading, error: error2, run };
}
function useImageUrl(imgKey) {
const [url, setUrl] = React.useState(void 0);
const [isError, setIsError] = React.useState(false);
const promiseRef = React.useRef(null);
React.useEffect(() => {
let cancelled = false;
const p = getEmojiImageUrl(imgKey);
promiseRef.current = p;
p.then((url2) => {
if (!cancelled) setUrl(url2 ?? void 0);
}).catch(() => {
setIsError(true);
});
return () => {
cancelled = true;
};
}, [imgKey]);
return { url, isError, promiseRef };
}
var reactDom = { exports: {} };
var reactDom_production = {};
/**
* @license React
* react-dom.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactDom_production;
function requireReactDom_production() {
if (hasRequiredReactDom_production) return reactDom_production;
hasRequiredReactDom_production = 1;
var React2 = React;
function formatProdErrorMessage(code) {
var url = "https://react.dev/errors/" + code;
if (1 < arguments.length) {
url += "?args[]=" + encodeURIComponent(arguments[1]);
for (var i2 = 2; i2 < arguments.length; i2++)
url += "&args[]=" + encodeURIComponent(arguments[i2]);
}
return "Minified React error #" + code + "; visit " + url + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
}
function noop3() {
}
var Internals = {
d: {
f: noop3,
r: function() {
throw Error(formatProdErrorMessage(522));
},
D: noop3,
C: noop3,
L: noop3,
m: noop3,
X: noop3,
S: noop3,
M: noop3
},
p: 0,
findDOMNode: null
}, REACT_PORTAL_TYPE = Symbol.for("react.portal");
function createPortal$1(children, containerInfo, implementation) {
var key = 3 < arguments.length && void 0 !== arguments[3] ? arguments[3] : null;
return {
$$typeof: REACT_PORTAL_TYPE,
key: null == key ? null : "" + key,
children,
containerInfo,
implementation
};
}
var ReactSharedInternals = React2.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
function getCrossOriginStringAs(as, input) {
if ("font" === as) return "";
if ("string" === typeof input)
return "use-credentials" === input ? input : "";
}
reactDom_production.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = Internals;
reactDom_production.createPortal = function(children, container) {
var key = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : null;
if (!container || 1 !== container.nodeType && 9 !== container.nodeType && 11 !== container.nodeType)
throw Error(formatProdErrorMessage(299));
return createPortal$1(children, container, null, key);
};
reactDom_production.flushSync = function(fn) {
var previousTransition = ReactSharedInternals.T, previousUpdatePriority = Internals.p;
try {
if (ReactSharedInternals.T = null, Internals.p = 2, fn) return fn();
} finally {
ReactSharedInternals.T = previousTransition, Internals.p = previousUpdatePriority, Internals.d.f();
}
};
reactDom_production.preconnect = function(href, options) {
"string" === typeof href && (options ? (options = options.crossOrigin, options = "string" === typeof options ? "use-credentials" === options ? options : "" : void 0) : options = null, Internals.d.C(href, options));
};
reactDom_production.prefetchDNS = function(href) {
"string" === typeof href && Internals.d.D(href);
};
reactDom_production.preinit = function(href, options) {
if ("string" === typeof href && options && "string" === typeof options.as) {
var as = options.as, crossOrigin = getCrossOriginStringAs(as, options.crossOrigin), integrity = "string" === typeof options.integrity ? options.integrity : void 0, fetchPriority = "string" === typeof options.fetchPriority ? options.fetchPriority : void 0;
"style" === as ? Internals.d.S(
href,
"string" === typeof options.precedence ? options.precedence : void 0,
{
crossOrigin,
integrity,
fetchPriority
}
) : "script" === as && Internals.d.X(href, {
crossOrigin,
integrity,
fetchPriority,
nonce: "string" === typeof options.nonce ? options.nonce : void 0
});
}
};
reactDom_production.preinitModule = function(href, options) {
if ("string" === typeof href)
if ("object" === typeof options && null !== options) {
if (null == options.as || "script" === options.as) {
var crossOrigin = getCrossOriginStringAs(
options.as,
options.crossOrigin
);
Internals.d.M(href, {
crossOrigin,
integrity: "string" === typeof options.integrity ? options.integrity : void 0,
nonce: "string" === typeof options.nonce ? options.nonce : void 0
});
}
} else null == options && Internals.d.M(href);
};
reactDom_production.preload = function(href, options) {
if ("string" === typeof href && "object" === typeof options && null !== options && "string" === typeof options.as) {
var as = options.as, crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
Internals.d.L(href, as, {
crossOrigin,
integrity: "string" === typeof options.integrity ? options.integrity : void 0,
nonce: "string" === typeof options.nonce ? options.nonce : void 0,
type: "string" === typeof options.type ? options.type : void 0,
fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0,
referrerPolicy: "string" === typeof options.referrerPolicy ? options.referrerPolicy : void 0,
imageSrcSet: "string" === typeof options.imageSrcSet ? options.imageSrcSet : void 0,
imageSizes: "string" === typeof options.imageSizes ? options.imageSizes : void 0,
media: "string" === typeof options.media ? options.media : void 0
});
}
};
reactDom_production.preloadModule = function(href, options) {
if ("string" === typeof href)
if (options) {
var crossOrigin = getCrossOriginStringAs(options.as, options.crossOrigin);
Internals.d.m(href, {
as: "string" === typeof options.as && "script" !== options.as ? options.as : void 0,
crossOrigin,
integrity: "string" === typeof options.integrity ? options.integrity : void 0
});
} else Internals.d.m(href);
};
reactDom_production.requestFormReset = function(form) {
Internals.d.r(form);
};
reactDom_production.unstable_batchedUpdates = function(fn, a2) {
return fn(a2);
};
reactDom_production.useFormState = function(action, initialState2, permalink) {
return ReactSharedInternals.H.useFormState(action, initialState2, permalink);
};
reactDom_production.useFormStatus = function() {
return ReactSharedInternals.H.useHostTransitionStatus();
};
reactDom_production.version = "19.2.0";
return reactDom_production;
}
var hasRequiredReactDom;
function requireReactDom() {
if (hasRequiredReactDom) return reactDom.exports;
hasRequiredReactDom = 1;
function checkDCE() {
if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") {
return;
}
try {
__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
} catch (err) {
console.error(err);
}
}
{
checkDCE();
reactDom.exports = requireReactDom_production();
}
return reactDom.exports;
}
var reactDomExports = requireReactDom();
const ReactDOM = getDefaultExportFromCjs(reactDomExports);
function setRef$1(ref, value) {
if (typeof ref === "function") {
return ref(value);
} else if (ref !== null && ref !== void 0) {
ref.current = value;
}
}
function composeRefs$1(...refs) {
return (node) => {
let hasCleanup = false;
const cleanups = refs.map((ref) => {
const cleanup = setRef$1(ref, node);
if (!hasCleanup && typeof cleanup == "function") {
hasCleanup = true;
}
return cleanup;
});
if (hasCleanup) {
return () => {
for (let i2 = 0; i2 < cleanups.length; i2++) {
const cleanup = cleanups[i2];
if (typeof cleanup == "function") {
cleanup();
} else {
setRef$1(refs[i2], null);
}
}
};
}
};
}
function useComposedRefs$1(...refs) {
return React__namespace.useCallback(composeRefs$1(...refs), refs);
}
function createSlot(ownerName) {
const SlotClone = createSlotClone(ownerName);
const Slot2 = React__namespace.forwardRef((props, forwardedRef) => {
const { children, ...slotProps } = props;
const childrenArray = React__namespace.Children.toArray(children);
const slottable = childrenArray.find(isSlottable);
if (slottable) {
const newElement = slottable.props.children;
const newChildren = childrenArray.map((child) => {
if (child === slottable) {
if (React__namespace.Children.count(newElement) > 1) return React__namespace.Children.only(null);
return React__namespace.isValidElement(newElement) ? newElement.props.children : null;
} else {
return child;
}
});
return jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React__namespace.isValidElement(newElement) ? React__namespace.cloneElement(newElement, void 0, newChildren) : null });
}
return jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
});
Slot2.displayName = `${ownerName}.Slot`;
return Slot2;
}
var Slot$3 = createSlot("Slot");
function createSlotClone(ownerName) {
const SlotClone = React__namespace.forwardRef((props, forwardedRef) => {
const { children, ...slotProps } = props;
if (React__namespace.isValidElement(children)) {
const childrenRef = getElementRef$1(children);
const props2 = mergeProps(slotProps, children.props);
if (children.type !== React__namespace.Fragment) {
props2.ref = forwardedRef ? composeRefs$1(forwardedRef, childrenRef) : childrenRef;
}
return React__namespace.cloneElement(children, props2);
}
return React__namespace.Children.count(children) > 1 ? React__namespace.Children.only(null) : null;
});
SlotClone.displayName = `${ownerName}.SlotClone`;
return SlotClone;
}
var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
function createSlottable(ownerName) {
const Slottable2 = ({ children }) => {
return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
};
Slottable2.displayName = `${ownerName}.Slottable`;
Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
return Slottable2;
}
function isSlottable(child) {
return React__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
}
function mergeProps(slotProps, childProps) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const slotPropValue = slotProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (slotPropValue && childPropValue) {
overrideProps[propName] = (...args) => {
const result = childPropValue(...args);
slotPropValue(...args);
return result;
};
} else if (slotPropValue) {
overrideProps[propName] = slotPropValue;
}
} else if (propName === "style") {
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
} else if (propName === "className") {
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
}
}
return { ...slotProps, ...overrideProps };
}
function getElementRef$1(element) {
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.ref;
}
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.props.ref;
}
return element.props.ref || element.ref;
}
var NODES = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
];
var Primitive = NODES.reduce((primitive, node) => {
const Slot2 = createSlot(`Primitive.${node}`);
const Node2 = React__namespace.forwardRef((props, forwardedRef) => {
const { asChild, ...primitiveProps } = props;
const Comp = asChild ? Slot2 : node;
if (typeof window !== "undefined") {
window[Symbol.for("radix-ui")] = true;
}
return jsxRuntimeExports.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
});
Node2.displayName = `Primitive.${node}`;
return { ...primitive, [node]: Node2 };
}, {});
function dispatchDiscreteCustomEvent(target, event) {
if (target) reactDomExports.flushSync(() => target.dispatchEvent(event));
}
var useLayoutEffect2 = globalThis?.document ? React__namespace.useLayoutEffect : () => {
};
function useStateMachine$1(initialState2, machine) {
return React__namespace.useReducer((state, event) => {
const nextState = machine[state][event];
return nextState ?? state;
}, initialState2);
}
var Presence = (props) => {
const { present, children } = props;
const presence = usePresence$1(present);
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React__namespace.Children.only(children);
const ref = useComposedRefs$1(presence.ref, getElementRef(child));
const forceMount = typeof children === "function";
return forceMount || presence.isPresent ? React__namespace.cloneElement(child, { ref }) : null;
};
Presence.displayName = "Presence";
function usePresence$1(present) {
const [node, setNode] = React__namespace.useState();
const stylesRef = React__namespace.useRef(null);
const prevPresentRef = React__namespace.useRef(present);
const prevAnimationNameRef = React__namespace.useRef("none");
const initialState2 = present ? "mounted" : "unmounted";
const [state, send] = useStateMachine$1(initialState2, {
mounted: {
UNMOUNT: "unmounted",
ANIMATION_OUT: "unmountSuspended"
},
unmountSuspended: {
MOUNT: "mounted",
ANIMATION_END: "unmounted"
},
unmounted: {
MOUNT: "mounted"
}
});
React__namespace.useEffect(() => {
const currentAnimationName = getAnimationName(stylesRef.current);
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
}, [state]);
useLayoutEffect2(() => {
const styles = stylesRef.current;
const wasPresent = prevPresentRef.current;
const hasPresentChanged = wasPresent !== present;
if (hasPresentChanged) {
const prevAnimationName = prevAnimationNameRef.current;
const currentAnimationName = getAnimationName(styles);
if (present) {
send("MOUNT");
} else if (currentAnimationName === "none" || styles?.display === "none") {
send("UNMOUNT");
} else {
const isAnimating = prevAnimationName !== currentAnimationName;
if (wasPresent && isAnimating) {
send("ANIMATION_OUT");
} else {
send("UNMOUNT");
}
}
prevPresentRef.current = present;
}
}, [present, send]);
useLayoutEffect2(() => {
if (node) {
let timeoutId;
const ownerWindow = node.ownerDocument.defaultView ?? window;
const handleAnimationEnd = (event) => {
const currentAnimationName = getAnimationName(stylesRef.current);
const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
if (event.target === node && isCurrentAnimation) {
send("ANIMATION_END");
if (!prevPresentRef.current) {
const currentFillMode = node.style.animationFillMode;
node.style.animationFillMode = "forwards";
timeoutId = ownerWindow.setTimeout(() => {
if (node.style.animationFillMode === "forwards") {
node.style.animationFillMode = currentFillMode;
}
});
}
}
};
const handleAnimationStart = (event) => {
if (event.target === node) {
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
}
};
node.addEventListener("animationstart", handleAnimationStart);
node.addEventListener("animationcancel", handleAnimationEnd);
node.addEventListener("animationend", handleAnimationEnd);
return () => {
ownerWindow.clearTimeout(timeoutId);
node.removeEventListener("animationstart", handleAnimationStart);
node.removeEventListener("animationcancel", handleAnimationEnd);
node.removeEventListener("animationend", handleAnimationEnd);
};
} else {
send("ANIMATION_END");
}
}, [node, send]);
return {
isPresent: ["mounted", "unmountSuspended"].includes(state),
ref: React__namespace.useCallback((node2) => {
stylesRef.current = node2 ? getComputedStyle(node2) : null;
setNode(node2);
}, [])
};
}
function getAnimationName(styles) {
return styles?.animationName || "none";
}
function getElementRef(element) {
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.ref;
}
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.props.ref;
}
return element.props.ref || element.ref;
}
function createContext2(rootComponentName, defaultContext) {
const Context = React__namespace.createContext(defaultContext);
const Provider2 = (props) => {
const { children, ...context } = props;
const value = React__namespace.useMemo(() => context, Object.values(context));
return jsxRuntimeExports.jsx(Context.Provider, { value, children });
};
Provider2.displayName = rootComponentName + "Provider";
function useContext2(consumerName) {
const context = React__namespace.useContext(Context);
if (context) return context;
if (defaultContext !== void 0) return defaultContext;
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
return [Provider2, useContext2];
}
function createContextScope(scopeName, createContextScopeDeps = []) {
let defaultContexts = [];
function createContext3(rootComponentName, defaultContext) {
const BaseContext = React__namespace.createContext(defaultContext);
const index2 = defaultContexts.length;
defaultContexts = [...defaultContexts, defaultContext];
const Provider2 = (props) => {
const { scope, children, ...context } = props;
const Context = scope?.[scopeName]?.[index2] || BaseContext;
const value = React__namespace.useMemo(() => context, Object.values(context));
return jsxRuntimeExports.jsx(Context.Provider, { value, children });
};
Provider2.displayName = rootComponentName + "Provider";
function useContext2(consumerName, scope) {
const Context = scope?.[scopeName]?.[index2] || BaseContext;
const context = React__namespace.useContext(Context);
if (context) return context;
if (defaultContext !== void 0) return defaultContext;
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
return [Provider2, useContext2];
}
const createScope = () => {
const scopeContexts = defaultContexts.map((defaultContext) => {
return React__namespace.createContext(defaultContext);
});
return function useScope(scope) {
const contexts = scope?.[scopeName] || scopeContexts;
return React__namespace.useMemo(
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
[scope, contexts]
);
};
};
createScope.scopeName = scopeName;
return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
}
function composeContextScopes(...scopes) {
const baseScope = scopes[0];
if (scopes.length === 1) return baseScope;
const createScope = () => {
const scopeHooks = scopes.map((createScope2) => ({
useScope: createScope2(),
scopeName: createScope2.scopeName
}));
return function useComposedScopes(overrideScopes) {
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
const scopeProps = useScope(overrideScopes);
const currentScope = scopeProps[`__scope${scopeName}`];
return { ...nextScopes2, ...currentScope };
}, {});
return React__namespace.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
};
};
createScope.scopeName = baseScope.scopeName;
return createScope;
}
function useCallbackRef$1(callback) {
const callbackRef = React__namespace.useRef(callback);
React__namespace.useEffect(() => {
callbackRef.current = callback;
});
return React__namespace.useMemo(() => (...args) => callbackRef.current?.(...args), []);
}
var DirectionContext = React__namespace.createContext(void 0);
function useDirection(localDir) {
const globalDir = React__namespace.useContext(DirectionContext);
return localDir || globalDir || "ltr";
}
function clamp$2(value, [min2, max2]) {
return Math.min(max2, Math.max(min2, value));
}
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
return function handleEvent(event) {
originalEventHandler?.(event);
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
return ourEventHandler?.(event);
}
};
}
function useStateMachine(initialState2, machine) {
return React__namespace.useReducer((state, event) => {
const nextState = machine[state][event];
return nextState ?? state;
}, initialState2);
}
var SCROLL_AREA_NAME = "ScrollArea";
var [createScrollAreaContext] = createContextScope(SCROLL_AREA_NAME);
var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
var ScrollArea$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
__scopeScrollArea,
type = "hover",
dir,
scrollHideDelay = 600,
...scrollAreaProps
} = props;
const [scrollArea, setScrollArea] = React__namespace.useState(null);
const [viewport, setViewport] = React__namespace.useState(null);
const [content, setContent] = React__namespace.useState(null);
const [scrollbarX, setScrollbarX] = React__namespace.useState(null);
const [scrollbarY, setScrollbarY] = React__namespace.useState(null);
const [cornerWidth, setCornerWidth] = React__namespace.useState(0);
const [cornerHeight, setCornerHeight] = React__namespace.useState(0);
const [scrollbarXEnabled, setScrollbarXEnabled] = React__namespace.useState(false);
const [scrollbarYEnabled, setScrollbarYEnabled] = React__namespace.useState(false);
const composedRefs = useComposedRefs$1(forwardedRef, (node) => setScrollArea(node));
const direction = useDirection(dir);
return jsxRuntimeExports.jsx(
ScrollAreaProvider,
{
scope: __scopeScrollArea,
type,
dir: direction,
scrollHideDelay,
scrollArea,
viewport,
onViewportChange: setViewport,
content,
onContentChange: setContent,
scrollbarX,
onScrollbarXChange: setScrollbarX,
scrollbarXEnabled,
onScrollbarXEnabledChange: setScrollbarXEnabled,
scrollbarY,
onScrollbarYChange: setScrollbarY,
scrollbarYEnabled,
onScrollbarYEnabledChange: setScrollbarYEnabled,
onCornerWidthChange: setCornerWidth,
onCornerHeightChange: setCornerHeight,
children: jsxRuntimeExports.jsx(
Primitive.div,
{
dir: direction,
...scrollAreaProps,
ref: composedRefs,
style: {
position: "relative",
["--radix-scroll-area-corner-width"]: cornerWidth + "px",
["--radix-scroll-area-corner-height"]: cornerHeight + "px",
...props.style
}
}
)
}
);
}
);
ScrollArea$1.displayName = SCROLL_AREA_NAME;
var VIEWPORT_NAME = "ScrollAreaViewport";
var ScrollAreaViewport = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref, context.onViewportChange);
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(
"style",
{
dangerouslySetInnerHTML: {
__html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
},
nonce
}
),
jsxRuntimeExports.jsx(
Primitive.div,
{
"data-radix-scroll-area-viewport": "",
...viewportProps,
ref: composedRefs,
style: {
overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
...props.style
},
children: jsxRuntimeExports.jsx("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
}
)
] });
}
);
ScrollAreaViewport.displayName = VIEWPORT_NAME;
var SCROLLBAR_NAME = "ScrollAreaScrollbar";
var ScrollAreaScrollbar = React__namespace.forwardRef(
(props, forwardedRef) => {
const { forceMount, ...scrollbarProps } = props;
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
const isHorizontal = props.orientation === "horizontal";
React__namespace.useEffect(() => {
isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
return () => {
isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
};
}, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
return context.type === "hover" ? jsxRuntimeExports.jsx(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? jsxRuntimeExports.jsx(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? jsxRuntimeExports.jsx(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? jsxRuntimeExports.jsx(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef }) : null;
}
);
ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
var ScrollAreaScrollbarHover = React__namespace.forwardRef((props, forwardedRef) => {
const { forceMount, ...scrollbarProps } = props;
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
const [visible, setVisible] = React__namespace.useState(false);
React__namespace.useEffect(() => {
const scrollArea = context.scrollArea;
let hideTimer = 0;
if (scrollArea) {
const handlePointerEnter = () => {
window.clearTimeout(hideTimer);
setVisible(true);
};
const handlePointerLeave = () => {
hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
};
scrollArea.addEventListener("pointerenter", handlePointerEnter);
scrollArea.addEventListener("pointerleave", handlePointerLeave);
return () => {
window.clearTimeout(hideTimer);
scrollArea.removeEventListener("pointerenter", handlePointerEnter);
scrollArea.removeEventListener("pointerleave", handlePointerLeave);
};
}
}, [context.scrollArea, context.scrollHideDelay]);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || visible, children: jsxRuntimeExports.jsx(
ScrollAreaScrollbarAuto,
{
"data-state": visible ? "visible" : "hidden",
...scrollbarProps,
ref: forwardedRef
}
) });
});
var ScrollAreaScrollbarScroll = React__namespace.forwardRef((props, forwardedRef) => {
const { forceMount, ...scrollbarProps } = props;
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
const isHorizontal = props.orientation === "horizontal";
const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
const [state, send] = useStateMachine("hidden", {
hidden: {
SCROLL: "scrolling"
},
scrolling: {
SCROLL_END: "idle",
POINTER_ENTER: "interacting"
},
interacting: {
SCROLL: "interacting",
POINTER_LEAVE: "idle"
},
idle: {
HIDE: "hidden",
SCROLL: "scrolling",
POINTER_ENTER: "interacting"
}
});
React__namespace.useEffect(() => {
if (state === "idle") {
const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
return () => window.clearTimeout(hideTimer);
}
}, [state, context.scrollHideDelay, send]);
React__namespace.useEffect(() => {
const viewport = context.viewport;
const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
if (viewport) {
let prevScrollPos = viewport[scrollDirection];
const handleScroll2 = () => {
const scrollPos = viewport[scrollDirection];
const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
if (hasScrollInDirectionChanged) {
send("SCROLL");
debounceScrollEnd();
}
prevScrollPos = scrollPos;
};
viewport.addEventListener("scroll", handleScroll2);
return () => viewport.removeEventListener("scroll", handleScroll2);
}
}, [context.viewport, isHorizontal, send, debounceScrollEnd]);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || state !== "hidden", children: jsxRuntimeExports.jsx(
ScrollAreaScrollbarVisible,
{
"data-state": state === "hidden" ? "hidden" : "visible",
...scrollbarProps,
ref: forwardedRef,
onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
}
) });
});
var ScrollAreaScrollbarAuto = React__namespace.forwardRef((props, forwardedRef) => {
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
const { forceMount, ...scrollbarProps } = props;
const [visible, setVisible] = React__namespace.useState(false);
const isHorizontal = props.orientation === "horizontal";
const handleResize = useDebounceCallback(() => {
if (context.viewport) {
const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
setVisible(isHorizontal ? isOverflowX : isOverflowY);
}
}, 10);
useResizeObserver(context.viewport, handleResize);
useResizeObserver(context.content, handleResize);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || visible, children: jsxRuntimeExports.jsx(
ScrollAreaScrollbarVisible,
{
"data-state": visible ? "visible" : "hidden",
...scrollbarProps,
ref: forwardedRef
}
) });
});
var ScrollAreaScrollbarVisible = React__namespace.forwardRef((props, forwardedRef) => {
const { orientation = "vertical", ...scrollbarProps } = props;
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
const thumbRef = React__namespace.useRef(null);
const pointerOffsetRef = React__namespace.useRef(0);
const [sizes, setSizes] = React__namespace.useState({
content: 0,
viewport: 0,
scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
});
const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
const commonProps = {
...scrollbarProps,
sizes,
onSizesChange: setSizes,
hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
onThumbChange: (thumb) => thumbRef.current = thumb,
onThumbPointerUp: () => pointerOffsetRef.current = 0,
onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
};
function getScrollPosition(pointerPos, dir) {
return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
}
if (orientation === "horizontal") {
return jsxRuntimeExports.jsx(
ScrollAreaScrollbarX,
{
...commonProps,
ref: forwardedRef,
onThumbPositionChange: () => {
if (context.viewport && thumbRef.current) {
const scrollPos = context.viewport.scrollLeft;
const offset2 = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
thumbRef.current.style.transform = `translate3d(${offset2}px, 0, 0)`;
}
},
onWheelScroll: (scrollPos) => {
if (context.viewport) context.viewport.scrollLeft = scrollPos;
},
onDragScroll: (pointerPos) => {
if (context.viewport) {
context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
}
}
}
);
}
if (orientation === "vertical") {
return jsxRuntimeExports.jsx(
ScrollAreaScrollbarY,
{
...commonProps,
ref: forwardedRef,
onThumbPositionChange: () => {
if (context.viewport && thumbRef.current) {
const scrollPos = context.viewport.scrollTop;
const offset2 = getThumbOffsetFromScroll(scrollPos, sizes);
thumbRef.current.style.transform = `translate3d(0, ${offset2}px, 0)`;
}
},
onWheelScroll: (scrollPos) => {
if (context.viewport) context.viewport.scrollTop = scrollPos;
},
onDragScroll: (pointerPos) => {
if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
}
}
);
}
return null;
});
var ScrollAreaScrollbarX = React__namespace.forwardRef((props, forwardedRef) => {
const { sizes, onSizesChange, ...scrollbarProps } = props;
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
const [computedStyle, setComputedStyle] = React__namespace.useState();
const ref = React__namespace.useRef(null);
const composeRefs2 = useComposedRefs$1(forwardedRef, ref, context.onScrollbarXChange);
React__namespace.useEffect(() => {
if (ref.current) setComputedStyle(getComputedStyle(ref.current));
}, [ref]);
return jsxRuntimeExports.jsx(
ScrollAreaScrollbarImpl,
{
"data-orientation": "horizontal",
...scrollbarProps,
ref: composeRefs2,
sizes,
style: {
bottom: 0,
left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
...props.style
},
onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
onWheelScroll: (event, maxScrollPos) => {
if (context.viewport) {
const scrollPos = context.viewport.scrollLeft + event.deltaX;
props.onWheelScroll(scrollPos);
if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
event.preventDefault();
}
}
},
onResize: () => {
if (ref.current && context.viewport && computedStyle) {
onSizesChange({
content: context.viewport.scrollWidth,
viewport: context.viewport.offsetWidth,
scrollbar: {
size: ref.current.clientWidth,
paddingStart: toInt(computedStyle.paddingLeft),
paddingEnd: toInt(computedStyle.paddingRight)
}
});
}
}
}
);
});
var ScrollAreaScrollbarY = React__namespace.forwardRef((props, forwardedRef) => {
const { sizes, onSizesChange, ...scrollbarProps } = props;
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
const [computedStyle, setComputedStyle] = React__namespace.useState();
const ref = React__namespace.useRef(null);
const composeRefs2 = useComposedRefs$1(forwardedRef, ref, context.onScrollbarYChange);
React__namespace.useEffect(() => {
if (ref.current) setComputedStyle(getComputedStyle(ref.current));
}, [ref]);
return jsxRuntimeExports.jsx(
ScrollAreaScrollbarImpl,
{
"data-orientation": "vertical",
...scrollbarProps,
ref: composeRefs2,
sizes,
style: {
top: 0,
right: context.dir === "ltr" ? 0 : void 0,
left: context.dir === "rtl" ? 0 : void 0,
bottom: "var(--radix-scroll-area-corner-height)",
["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
...props.style
},
onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
onWheelScroll: (event, maxScrollPos) => {
if (context.viewport) {
const scrollPos = context.viewport.scrollTop + event.deltaY;
props.onWheelScroll(scrollPos);
if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
event.preventDefault();
}
}
},
onResize: () => {
if (ref.current && context.viewport && computedStyle) {
onSizesChange({
content: context.viewport.scrollHeight,
viewport: context.viewport.offsetHeight,
scrollbar: {
size: ref.current.clientHeight,
paddingStart: toInt(computedStyle.paddingTop),
paddingEnd: toInt(computedStyle.paddingBottom)
}
});
}
}
}
);
});
var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
var ScrollAreaScrollbarImpl = React__namespace.forwardRef((props, forwardedRef) => {
const {
__scopeScrollArea,
sizes,
hasThumb,
onThumbChange,
onThumbPointerUp,
onThumbPointerDown,
onThumbPositionChange,
onDragScroll,
onWheelScroll,
onResize,
...scrollbarProps
} = props;
const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
const [scrollbar, setScrollbar] = React__namespace.useState(null);
const composeRefs2 = useComposedRefs$1(forwardedRef, (node) => setScrollbar(node));
const rectRef = React__namespace.useRef(null);
const prevWebkitUserSelectRef = React__namespace.useRef("");
const viewport = context.viewport;
const maxScrollPos = sizes.content - sizes.viewport;
const handleWheelScroll = useCallbackRef$1(onWheelScroll);
const handleThumbPositionChange = useCallbackRef$1(onThumbPositionChange);
const handleResize = useDebounceCallback(onResize, 10);
function handleDragScroll(event) {
if (rectRef.current) {
const x2 = event.clientX - rectRef.current.left;
const y = event.clientY - rectRef.current.top;
onDragScroll({ x: x2, y });
}
}
React__namespace.useEffect(() => {
const handleWheel = (event) => {
const element = event.target;
const isScrollbarWheel = scrollbar?.contains(element);
if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
};
document.addEventListener("wheel", handleWheel, { passive: false });
return () => document.removeEventListener("wheel", handleWheel, { passive: false });
}, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
React__namespace.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
useResizeObserver(scrollbar, handleResize);
useResizeObserver(context.content, handleResize);
return jsxRuntimeExports.jsx(
ScrollbarProvider,
{
scope: __scopeScrollArea,
scrollbar,
hasThumb,
onThumbChange: useCallbackRef$1(onThumbChange),
onThumbPointerUp: useCallbackRef$1(onThumbPointerUp),
onThumbPositionChange: handleThumbPositionChange,
onThumbPointerDown: useCallbackRef$1(onThumbPointerDown),
children: jsxRuntimeExports.jsx(
Primitive.div,
{
...scrollbarProps,
ref: composeRefs2,
style: { position: "absolute", ...scrollbarProps.style },
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
const mainPointer = 0;
if (event.button === mainPointer) {
const element = event.target;
element.setPointerCapture(event.pointerId);
rectRef.current = scrollbar.getBoundingClientRect();
prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
document.body.style.webkitUserSelect = "none";
if (context.viewport) context.viewport.style.scrollBehavior = "auto";
handleDragScroll(event);
}
}),
onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
const element = event.target;
if (element.hasPointerCapture(event.pointerId)) {
element.releasePointerCapture(event.pointerId);
}
document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
if (context.viewport) context.viewport.style.scrollBehavior = "";
rectRef.current = null;
})
}
)
}
);
});
var THUMB_NAME = "ScrollAreaThumb";
var ScrollAreaThumb = React__namespace.forwardRef(
(props, forwardedRef) => {
const { forceMount, ...thumbProps } = props;
const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || scrollbarContext.hasThumb, children: jsxRuntimeExports.jsx(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
}
);
var ScrollAreaThumbImpl = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeScrollArea, style: style2, ...thumbProps } = props;
const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
const { onThumbPositionChange } = scrollbarContext;
const composedRef = useComposedRefs$1(
forwardedRef,
(node) => scrollbarContext.onThumbChange(node)
);
const removeUnlinkedScrollListenerRef = React__namespace.useRef(void 0);
const debounceScrollEnd = useDebounceCallback(() => {
if (removeUnlinkedScrollListenerRef.current) {
removeUnlinkedScrollListenerRef.current();
removeUnlinkedScrollListenerRef.current = void 0;
}
}, 100);
React__namespace.useEffect(() => {
const viewport = scrollAreaContext.viewport;
if (viewport) {
const handleScroll2 = () => {
debounceScrollEnd();
if (!removeUnlinkedScrollListenerRef.current) {
const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
removeUnlinkedScrollListenerRef.current = listener;
onThumbPositionChange();
}
};
onThumbPositionChange();
viewport.addEventListener("scroll", handleScroll2);
return () => viewport.removeEventListener("scroll", handleScroll2);
}
}, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
return jsxRuntimeExports.jsx(
Primitive.div,
{
"data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
...thumbProps,
ref: composedRef,
style: {
width: "var(--radix-scroll-area-thumb-width)",
height: "var(--radix-scroll-area-thumb-height)",
...style2
},
onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
const thumb = event.target;
const thumbRect = thumb.getBoundingClientRect();
const x2 = event.clientX - thumbRect.left;
const y = event.clientY - thumbRect.top;
scrollbarContext.onThumbPointerDown({ x: x2, y });
}),
onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
}
);
}
);
ScrollAreaThumb.displayName = THUMB_NAME;
var CORNER_NAME = "ScrollAreaCorner";
var ScrollAreaCorner = React__namespace.forwardRef(
(props, forwardedRef) => {
const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
return hasCorner ? jsxRuntimeExports.jsx(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
}
);
ScrollAreaCorner.displayName = CORNER_NAME;
var ScrollAreaCornerImpl = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeScrollArea, ...cornerProps } = props;
const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
const [width, setWidth] = React__namespace.useState(0);
const [height, setHeight] = React__namespace.useState(0);
const hasSize = Boolean(width && height);
useResizeObserver(context.scrollbarX, () => {
const height2 = context.scrollbarX?.offsetHeight || 0;
context.onCornerHeightChange(height2);
setHeight(height2);
});
useResizeObserver(context.scrollbarY, () => {
const width2 = context.scrollbarY?.offsetWidth || 0;
context.onCornerWidthChange(width2);
setWidth(width2);
});
return hasSize ? jsxRuntimeExports.jsx(
Primitive.div,
{
...cornerProps,
ref: forwardedRef,
style: {
width,
height,
position: "absolute",
right: context.dir === "ltr" ? 0 : void 0,
left: context.dir === "rtl" ? 0 : void 0,
bottom: 0,
...props.style
}
}
) : null;
});
function toInt(value) {
return value ? parseInt(value, 10) : 0;
}
function getThumbRatio(viewportSize, contentSize) {
const ratio = viewportSize / contentSize;
return isNaN(ratio) ? 0 : ratio;
}
function getThumbSize(sizes) {
const ratio = getThumbRatio(sizes.viewport, sizes.content);
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
return Math.max(thumbSize, 18);
}
function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
const thumbSizePx = getThumbSize(sizes);
const thumbCenter = thumbSizePx / 2;
const offset2 = pointerOffset || thumbCenter;
const thumbOffsetFromEnd = thumbSizePx - offset2;
const minPointerPos = sizes.scrollbar.paddingStart + offset2;
const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
const maxScrollPos = sizes.content - sizes.viewport;
const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
const interpolate2 = linearScale([minPointerPos, maxPointerPos], scrollRange);
return interpolate2(pointerPos);
}
function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
const thumbSizePx = getThumbSize(sizes);
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
const scrollbar = sizes.scrollbar.size - scrollbarPadding;
const maxScrollPos = sizes.content - sizes.viewport;
const maxThumbPos = scrollbar - thumbSizePx;
const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
const scrollWithoutMomentum = clamp$2(scrollPos, scrollClampRange);
const interpolate2 = linearScale([0, maxScrollPos], [0, maxThumbPos]);
return interpolate2(scrollWithoutMomentum);
}
function linearScale(input, output) {
return (value) => {
if (input[0] === input[1] || output[0] === output[1]) return output[0];
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
return output[0] + ratio * (value - input[0]);
};
}
function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
return scrollPos > 0 && scrollPos < maxScrollPos;
}
var addUnlinkedScrollListener = (node, handler = () => {
}) => {
let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
let rAF = 0;
(function loop() {
const position = { left: node.scrollLeft, top: node.scrollTop };
const isHorizontalScroll = prevPosition.left !== position.left;
const isVerticalScroll = prevPosition.top !== position.top;
if (isHorizontalScroll || isVerticalScroll) handler();
prevPosition = position;
rAF = window.requestAnimationFrame(loop);
})();
return () => window.cancelAnimationFrame(rAF);
};
function useDebounceCallback(callback, delay2) {
const handleCallback = useCallbackRef$1(callback);
const debounceTimerRef = React__namespace.useRef(0);
React__namespace.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
return React__namespace.useCallback(() => {
window.clearTimeout(debounceTimerRef.current);
debounceTimerRef.current = window.setTimeout(handleCallback, delay2);
}, [handleCallback, delay2]);
}
function useResizeObserver(element, onResize) {
const handleResize = useCallbackRef$1(onResize);
useLayoutEffect2(() => {
let rAF = 0;
if (element) {
const resizeObserver = new ResizeObserver(() => {
cancelAnimationFrame(rAF);
rAF = window.requestAnimationFrame(handleResize);
});
resizeObserver.observe(element);
return () => {
window.cancelAnimationFrame(rAF);
resizeObserver.unobserve(element);
};
}
}, [element, handleResize]);
}
var Root$6 = ScrollArea$1;
var Viewport = ScrollAreaViewport;
var Corner = ScrollAreaCorner;
const CLASS_PART_SEPARATOR = "-";
const createClassGroupUtils = (config2) => {
const classMap = createClassMap(config2);
const {
conflictingClassGroups,
conflictingClassGroupModifiers
} = config2;
const getClassGroupId = (className) => {
const classParts = className.split(CLASS_PART_SEPARATOR);
if (classParts[0] === "" && classParts.length !== 1) {
classParts.shift();
}
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
};
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
const conflicts = conflictingClassGroups[classGroupId] || [];
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
}
return conflicts;
};
return {
getClassGroupId,
getConflictingClassGroupIds
};
};
const getGroupRecursive = (classParts, classPartObject) => {
if (classParts.length === 0) {
return classPartObject.classGroupId;
}
const currentClassPart = classParts[0];
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
if (classGroupFromNextClassPart) {
return classGroupFromNextClassPart;
}
if (classPartObject.validators.length === 0) {
return void 0;
}
const classRest = classParts.join(CLASS_PART_SEPARATOR);
return classPartObject.validators.find(({
validator
}) => validator(classRest))?.classGroupId;
};
const arbitraryPropertyRegex = /^\[(.+)\]$/;
const getGroupIdForArbitraryProperty = (className) => {
if (arbitraryPropertyRegex.test(className)) {
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(":"));
if (property) {
return "arbitrary.." + property;
}
}
};
const createClassMap = (config2) => {
const {
theme,
classGroups
} = config2;
const classMap = {
nextPart: new Map(),
validators: []
};
for (const classGroupId in classGroups) {
processClassesRecursively(classGroups[classGroupId], classMap, classGroupId, theme);
}
return classMap;
};
const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
classGroup.forEach((classDefinition) => {
if (typeof classDefinition === "string") {
const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
classPartObjectToEdit.classGroupId = classGroupId;
return;
}
if (typeof classDefinition === "function") {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
classPartObject.validators.push({
validator: classDefinition,
classGroupId
});
return;
}
Object.entries(classDefinition).forEach(([key, classGroup2]) => {
processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
});
});
};
const getPart = (classPartObject, path) => {
let currentClassPartObject = classPartObject;
path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
if (!currentClassPartObject.nextPart.has(pathPart)) {
currentClassPartObject.nextPart.set(pathPart, {
nextPart: new Map(),
validators: []
});
}
currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
});
return currentClassPartObject;
};
const isThemeGetter = (func) => func.isThemeGetter;
const createLruCache = (maxCacheSize) => {
if (maxCacheSize < 1) {
return {
get: () => void 0,
set: () => {
}
};
}
let cacheSize = 0;
let cache = new Map();
let previousCache = new Map();
const update = (key, value) => {
cache.set(key, value);
cacheSize++;
if (cacheSize > maxCacheSize) {
cacheSize = 0;
previousCache = cache;
cache = new Map();
}
};
return {
get(key) {
let value = cache.get(key);
if (value !== void 0) {
return value;
}
if ((value = previousCache.get(key)) !== void 0) {
update(key, value);
return value;
}
},
set(key, value) {
if (cache.has(key)) {
cache.set(key, value);
} else {
update(key, value);
}
}
};
};
const IMPORTANT_MODIFIER = "!";
const MODIFIER_SEPARATOR = ":";
const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
const createParseClassName = (config2) => {
const {
prefix: prefix2,
experimentalParseClassName
} = config2;
let parseClassName = (className) => {
const modifiers = [];
let bracketDepth = 0;
let parenDepth = 0;
let modifierStart = 0;
let postfixModifierPosition;
for (let index2 = 0; index2 < className.length; index2++) {
let currentCharacter = className[index2];
if (bracketDepth === 0 && parenDepth === 0) {
if (currentCharacter === MODIFIER_SEPARATOR) {
modifiers.push(className.slice(modifierStart, index2));
modifierStart = index2 + MODIFIER_SEPARATOR_LENGTH;
continue;
}
if (currentCharacter === "/") {
postfixModifierPosition = index2;
continue;
}
}
if (currentCharacter === "[") {
bracketDepth++;
} else if (currentCharacter === "]") {
bracketDepth--;
} else if (currentCharacter === "(") {
parenDepth++;
} else if (currentCharacter === ")") {
parenDepth--;
}
}
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier);
const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier;
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
return {
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
};
};
if (prefix2) {
const fullPrefix = prefix2 + MODIFIER_SEPARATOR;
const parseClassNameOriginal = parseClassName;
parseClassName = (className) => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.substring(fullPrefix.length)) : {
isExternal: true,
modifiers: [],
hasImportantModifier: false,
baseClassName: className,
maybePostfixModifierPosition: void 0
};
}
if (experimentalParseClassName) {
const parseClassNameOriginal = parseClassName;
parseClassName = (className) => experimentalParseClassName({
className,
parseClassName: parseClassNameOriginal
});
}
return parseClassName;
};
const stripImportantModifier = (baseClassName) => {
if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(0, baseClassName.length - 1);
}
if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(1);
}
return baseClassName;
};
const createSortModifiers = (config2) => {
const orderSensitiveModifiers = Object.fromEntries(config2.orderSensitiveModifiers.map((modifier) => [modifier, true]));
const sortModifiers = (modifiers) => {
if (modifiers.length <= 1) {
return modifiers;
}
const sortedModifiers = [];
let unsortedModifiers = [];
modifiers.forEach((modifier) => {
const isPositionSensitive = modifier[0] === "[" || orderSensitiveModifiers[modifier];
if (isPositionSensitive) {
sortedModifiers.push(...unsortedModifiers.sort(), modifier);
unsortedModifiers = [];
} else {
unsortedModifiers.push(modifier);
}
});
sortedModifiers.push(...unsortedModifiers.sort());
return sortedModifiers;
};
return sortModifiers;
};
const createConfigUtils = (config2) => ({
cache: createLruCache(config2.cacheSize),
parseClassName: createParseClassName(config2),
sortModifiers: createSortModifiers(config2),
...createClassGroupUtils(config2)
});
const SPLIT_CLASSES_REGEX = /\s+/;
const mergeClassList = (classList, configUtils) => {
const {
parseClassName,
getClassGroupId,
getConflictingClassGroupIds,
sortModifiers
} = configUtils;
const classGroupsInConflict = [];
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
let result = "";
for (let index2 = classNames.length - 1; index2 >= 0; index2 -= 1) {
const originalClassName = classNames[index2];
const {
isExternal,
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
} = parseClassName(originalClassName);
if (isExternal) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
let hasPostfixModifier = !!maybePostfixModifierPosition;
let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
if (!classGroupId) {
if (!hasPostfixModifier) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
classGroupId = getClassGroupId(baseClassName);
if (!classGroupId) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
hasPostfixModifier = false;
}
const variantModifier = sortModifiers(modifiers).join(":");
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
const classId = modifierId + classGroupId;
if (classGroupsInConflict.includes(classId)) {
continue;
}
classGroupsInConflict.push(classId);
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
for (let i2 = 0; i2 < conflictGroups.length; ++i2) {
const group = conflictGroups[i2];
classGroupsInConflict.push(modifierId + group);
}
result = originalClassName + (result.length > 0 ? " " + result : result);
}
return result;
};
function twJoin() {
let index2 = 0;
let argument;
let resolvedValue;
let string2 = "";
while (index2 < arguments.length) {
if (argument = arguments[index2++]) {
if (resolvedValue = toValue(argument)) {
string2 && (string2 += " ");
string2 += resolvedValue;
}
}
}
return string2;
}
const toValue = (mix2) => {
if (typeof mix2 === "string") {
return mix2;
}
let resolvedValue;
let string2 = "";
for (let k = 0; k < mix2.length; k++) {
if (mix2[k]) {
if (resolvedValue = toValue(mix2[k])) {
string2 && (string2 += " ");
string2 += resolvedValue;
}
}
}
return string2;
};
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
let configUtils;
let cacheGet;
let cacheSet;
let functionToCall = initTailwindMerge;
function initTailwindMerge(classList) {
const config2 = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
configUtils = createConfigUtils(config2);
cacheGet = configUtils.cache.get;
cacheSet = configUtils.cache.set;
functionToCall = tailwindMerge;
return tailwindMerge(classList);
}
function tailwindMerge(classList) {
const cachedResult = cacheGet(classList);
if (cachedResult) {
return cachedResult;
}
const result = mergeClassList(classList, configUtils);
cacheSet(classList, result);
return result;
}
return function callTailwindMerge() {
return functionToCall(twJoin.apply(null, arguments));
};
}
const fromTheme = (key) => {
const themeGetter = (theme) => theme[key] || [];
themeGetter.isThemeGetter = true;
return themeGetter;
};
const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
const fractionRegex = /^\d+\/\d+$/;
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
const isFraction = (value) => fractionRegex.test(value);
const isNumber = (value) => !!value && !Number.isNaN(Number(value));
const isInteger = (value) => !!value && Number.isInteger(Number(value));
const isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
const isTshirtSize = (value) => tshirtUnitRegex.test(value);
const isAny = () => true;
const isLengthOnly = (value) => (
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
);
const isNever = () => false;
const isShadow = (value) => shadowRegex.test(value);
const isImage = (value) => imageRegex.test(value);
const isAnyNonArbitrary = (value) => !isArbitraryValue(value) && !isArbitraryVariable(value);
const isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever);
const isArbitraryValue = (value) => arbitraryValueRegex.test(value);
const isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
const isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
const isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
const isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
const isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
const isArbitraryVariable = (value) => arbitraryVariableRegex.test(value);
const isArbitraryVariableLength = (value) => getIsArbitraryVariable(value, isLabelLength);
const isArbitraryVariableFamilyName = (value) => getIsArbitraryVariable(value, isLabelFamilyName);
const isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLabelPosition);
const isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
const isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
const isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
const getIsArbitraryValue = (value, testLabel, testValue) => {
const result = arbitraryValueRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return testValue(result[2]);
}
return false;
};
const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
const result = arbitraryVariableRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return shouldMatchNoLabel;
}
return false;
};
const isLabelPosition = (label) => label === "position" || label === "percentage";
const isLabelImage = (label) => label === "image" || label === "url";
const isLabelSize = (label) => label === "length" || label === "size" || label === "bg-size";
const isLabelLength = (label) => label === "length";
const isLabelNumber = (label) => label === "number";
const isLabelFamilyName = (label) => label === "family-name";
const isLabelShadow = (label) => label === "shadow";
const getDefaultConfig = () => {
const themeColor = fromTheme("color");
const themeFont = fromTheme("font");
const themeText = fromTheme("text");
const themeFontWeight = fromTheme("font-weight");
const themeTracking = fromTheme("tracking");
const themeLeading = fromTheme("leading");
const themeBreakpoint = fromTheme("breakpoint");
const themeContainer = fromTheme("container");
const themeSpacing = fromTheme("spacing");
const themeRadius = fromTheme("radius");
const themeShadow = fromTheme("shadow");
const themeInsetShadow = fromTheme("inset-shadow");
const themeTextShadow = fromTheme("text-shadow");
const themeDropShadow = fromTheme("drop-shadow");
const themeBlur = fromTheme("blur");
const themePerspective = fromTheme("perspective");
const themeAspect = fromTheme("aspect");
const themeEase = fromTheme("ease");
const themeAnimate = fromTheme("animate");
const scaleBreak = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
const scalePosition = () => [
"center",
"top",
"bottom",
"left",
"right",
"top-left",
"left-top",
"top-right",
"right-top",
"bottom-right",
"right-bottom",
"bottom-left",
"left-bottom"
];
const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
const scaleOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
const scaleOverscroll = () => ["auto", "contain", "none"];
const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
const scaleInset = () => [isFraction, "full", "auto", ...scaleUnambiguousSpacing()];
const scaleGridTemplateColsRows = () => [isInteger, "none", "subgrid", isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartAndEnd = () => ["auto", {
span: ["full", isInteger, isArbitraryVariable, isArbitraryValue]
}, isInteger, isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartOrEnd = () => [isInteger, "auto", isArbitraryVariable, isArbitraryValue];
const scaleGridAutoColsRows = () => ["auto", "min", "max", "fr", isArbitraryVariable, isArbitraryValue];
const scaleAlignPrimaryAxis = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
const scaleAlignSecondaryAxis = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"];
const scaleMargin = () => ["auto", ...scaleUnambiguousSpacing()];
const scaleSizing = () => [isFraction, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
position: [isArbitraryVariable, isArbitraryValue]
}];
const scaleBgRepeat = () => ["no-repeat", {
repeat: ["", "x", "y", "space", "round"]
}];
const scaleBgSize = () => ["auto", "cover", "contain", isArbitraryVariableSize, isArbitrarySize, {
size: [isArbitraryVariable, isArbitraryValue]
}];
const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
const scaleRadius = () => [
"",
"none",
"full",
themeRadius,
isArbitraryVariable,
isArbitraryValue
];
const scaleBorderWidth = () => ["", isNumber, isArbitraryVariableLength, isArbitraryLength];
const scaleLineStyle = () => ["solid", "dashed", "dotted", "double"];
const scaleBlendMode = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
const scaleBlur = () => [
"",
"none",
themeBlur,
isArbitraryVariable,
isArbitraryValue
];
const scaleRotate = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
const scaleScale = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
const scaleTranslate = () => [isFraction, "full", ...scaleUnambiguousSpacing()];
return {
cacheSize: 500,
theme: {
animate: ["spin", "ping", "pulse", "bounce"],
aspect: ["video"],
blur: [isTshirtSize],
breakpoint: [isTshirtSize],
color: [isAny],
container: [isTshirtSize],
"drop-shadow": [isTshirtSize],
ease: ["in", "out", "in-out"],
font: [isAnyNonArbitrary],
"font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
"inset-shadow": [isTshirtSize],
leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
radius: [isTshirtSize],
shadow: [isTshirtSize],
spacing: ["px", isNumber],
text: [isTshirtSize],
"text-shadow": [isTshirtSize],
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
},
classGroups: {
aspect: [{
aspect: ["auto", "square", isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
}],
container: ["container"],
columns: [{
columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
}],
"break-after": [{
"break-after": scaleBreak()
}],
"break-before": [{
"break-before": scaleBreak()
}],
"break-inside": [{
"break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
}],
"box-decoration": [{
"box-decoration": ["slice", "clone"]
}],
box: [{
box: ["border", "content"]
}],
display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
sr: ["sr-only", "not-sr-only"],
float: [{
float: ["right", "left", "none", "start", "end"]
}],
clear: [{
clear: ["left", "right", "both", "none", "start", "end"]
}],
isolation: ["isolate", "isolation-auto"],
"object-fit": [{
object: ["contain", "cover", "fill", "none", "scale-down"]
}],
"object-position": [{
object: scalePositionWithArbitrary()
}],
overflow: [{
overflow: scaleOverflow()
}],
"overflow-x": [{
"overflow-x": scaleOverflow()
}],
"overflow-y": [{
"overflow-y": scaleOverflow()
}],
overscroll: [{
overscroll: scaleOverscroll()
}],
"overscroll-x": [{
"overscroll-x": scaleOverscroll()
}],
"overscroll-y": [{
"overscroll-y": scaleOverscroll()
}],
position: ["static", "fixed", "absolute", "relative", "sticky"],
inset: [{
inset: scaleInset()
}],
"inset-x": [{
"inset-x": scaleInset()
}],
"inset-y": [{
"inset-y": scaleInset()
}],
start: [{
start: scaleInset()
}],
end: [{
end: scaleInset()
}],
top: [{
top: scaleInset()
}],
right: [{
right: scaleInset()
}],
bottom: [{
bottom: scaleInset()
}],
left: [{
left: scaleInset()
}],
visibility: ["visible", "invisible", "collapse"],
z: [{
z: [isInteger, "auto", isArbitraryVariable, isArbitraryValue]
}],
basis: [{
basis: [isFraction, "full", "auto", themeContainer, ...scaleUnambiguousSpacing()]
}],
"flex-direction": [{
flex: ["row", "row-reverse", "col", "col-reverse"]
}],
"flex-wrap": [{
flex: ["nowrap", "wrap", "wrap-reverse"]
}],
flex: [{
flex: [isNumber, isFraction, "auto", "initial", "none", isArbitraryValue]
}],
grow: [{
grow: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
shrink: [{
shrink: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
order: [{
order: [isInteger, "first", "last", "none", isArbitraryVariable, isArbitraryValue]
}],
"grid-cols": [{
"grid-cols": scaleGridTemplateColsRows()
}],
"col-start-end": [{
col: scaleGridColRowStartAndEnd()
}],
"col-start": [{
"col-start": scaleGridColRowStartOrEnd()
}],
"col-end": [{
"col-end": scaleGridColRowStartOrEnd()
}],
"grid-rows": [{
"grid-rows": scaleGridTemplateColsRows()
}],
"row-start-end": [{
row: scaleGridColRowStartAndEnd()
}],
"row-start": [{
"row-start": scaleGridColRowStartOrEnd()
}],
"row-end": [{
"row-end": scaleGridColRowStartOrEnd()
}],
"grid-flow": [{
"grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
}],
"auto-cols": [{
"auto-cols": scaleGridAutoColsRows()
}],
"auto-rows": [{
"auto-rows": scaleGridAutoColsRows()
}],
gap: [{
gap: scaleUnambiguousSpacing()
}],
"gap-x": [{
"gap-x": scaleUnambiguousSpacing()
}],
"gap-y": [{
"gap-y": scaleUnambiguousSpacing()
}],
"justify-content": [{
justify: [...scaleAlignPrimaryAxis(), "normal"]
}],
"justify-items": [{
"justify-items": [...scaleAlignSecondaryAxis(), "normal"]
}],
"justify-self": [{
"justify-self": ["auto", ...scaleAlignSecondaryAxis()]
}],
"align-content": [{
content: ["normal", ...scaleAlignPrimaryAxis()]
}],
"align-items": [{
items: [...scaleAlignSecondaryAxis(), {
baseline: ["", "last"]
}]
}],
"align-self": [{
self: ["auto", ...scaleAlignSecondaryAxis(), {
baseline: ["", "last"]
}]
}],
"place-content": [{
"place-content": scaleAlignPrimaryAxis()
}],
"place-items": [{
"place-items": [...scaleAlignSecondaryAxis(), "baseline"]
}],
"place-self": [{
"place-self": ["auto", ...scaleAlignSecondaryAxis()]
}],
p: [{
p: scaleUnambiguousSpacing()
}],
px: [{
px: scaleUnambiguousSpacing()
}],
py: [{
py: scaleUnambiguousSpacing()
}],
ps: [{
ps: scaleUnambiguousSpacing()
}],
pe: [{
pe: scaleUnambiguousSpacing()
}],
pt: [{
pt: scaleUnambiguousSpacing()
}],
pr: [{
pr: scaleUnambiguousSpacing()
}],
pb: [{
pb: scaleUnambiguousSpacing()
}],
pl: [{
pl: scaleUnambiguousSpacing()
}],
m: [{
m: scaleMargin()
}],
mx: [{
mx: scaleMargin()
}],
my: [{
my: scaleMargin()
}],
ms: [{
ms: scaleMargin()
}],
me: [{
me: scaleMargin()
}],
mt: [{
mt: scaleMargin()
}],
mr: [{
mr: scaleMargin()
}],
mb: [{
mb: scaleMargin()
}],
ml: [{
ml: scaleMargin()
}],
"space-x": [{
"space-x": scaleUnambiguousSpacing()
}],
"space-x-reverse": ["space-x-reverse"],
"space-y": [{
"space-y": scaleUnambiguousSpacing()
}],
"space-y-reverse": ["space-y-reverse"],
size: [{
size: scaleSizing()
}],
w: [{
w: [themeContainer, "screen", ...scaleSizing()]
}],
"min-w": [{
"min-w": [
themeContainer,
"screen",
"none",
...scaleSizing()
]
}],
"max-w": [{
"max-w": [
themeContainer,
"screen",
"none",
"prose",
{
screen: [themeBreakpoint]
},
...scaleSizing()
]
}],
h: [{
h: ["screen", "lh", ...scaleSizing()]
}],
"min-h": [{
"min-h": ["screen", "lh", "none", ...scaleSizing()]
}],
"max-h": [{
"max-h": ["screen", "lh", ...scaleSizing()]
}],
"font-size": [{
text: ["base", themeText, isArbitraryVariableLength, isArbitraryLength]
}],
"font-smoothing": ["antialiased", "subpixel-antialiased"],
"font-style": ["italic", "not-italic"],
"font-weight": [{
font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
}],
"font-stretch": [{
"font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", isPercent, isArbitraryValue]
}],
"font-family": [{
font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
}],
"fvn-normal": ["normal-nums"],
"fvn-ordinal": ["ordinal"],
"fvn-slashed-zero": ["slashed-zero"],
"fvn-figure": ["lining-nums", "oldstyle-nums"],
"fvn-spacing": ["proportional-nums", "tabular-nums"],
"fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
tracking: [{
tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
}],
"line-clamp": [{
"line-clamp": [isNumber, "none", isArbitraryVariable, isArbitraryNumber]
}],
leading: [{
leading: [
themeLeading,
...scaleUnambiguousSpacing()
]
}],
"list-image": [{
"list-image": ["none", isArbitraryVariable, isArbitraryValue]
}],
"list-style-position": [{
list: ["inside", "outside"]
}],
"list-style-type": [{
list: ["disc", "decimal", "none", isArbitraryVariable, isArbitraryValue]
}],
"text-alignment": [{
text: ["left", "center", "right", "justify", "start", "end"]
}],
"placeholder-color": [{
placeholder: scaleColor()
}],
"text-color": [{
text: scaleColor()
}],
"text-decoration": ["underline", "overline", "line-through", "no-underline"],
"text-decoration-style": [{
decoration: [...scaleLineStyle(), "wavy"]
}],
"text-decoration-thickness": [{
decoration: [isNumber, "from-font", "auto", isArbitraryVariable, isArbitraryLength]
}],
"text-decoration-color": [{
decoration: scaleColor()
}],
"underline-offset": [{
"underline-offset": [isNumber, "auto", isArbitraryVariable, isArbitraryValue]
}],
"text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
"text-overflow": ["truncate", "text-ellipsis", "text-clip"],
"text-wrap": [{
text: ["wrap", "nowrap", "balance", "pretty"]
}],
indent: [{
indent: scaleUnambiguousSpacing()
}],
"vertical-align": [{
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryVariable, isArbitraryValue]
}],
whitespace: [{
whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
}],
break: [{
break: ["normal", "words", "all", "keep"]
}],
wrap: [{
wrap: ["break-word", "anywhere", "normal"]
}],
hyphens: [{
hyphens: ["none", "manual", "auto"]
}],
content: [{
content: ["none", isArbitraryVariable, isArbitraryValue]
}],
"bg-attachment": [{
bg: ["fixed", "local", "scroll"]
}],
"bg-clip": [{
"bg-clip": ["border", "padding", "content", "text"]
}],
"bg-origin": [{
"bg-origin": ["border", "padding", "content"]
}],
"bg-position": [{
bg: scaleBgPosition()
}],
"bg-repeat": [{
bg: scaleBgRepeat()
}],
"bg-size": [{
bg: scaleBgSize()
}],
"bg-image": [{
bg: ["none", {
linear: [{
to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
}, isInteger, isArbitraryVariable, isArbitraryValue],
radial: ["", isArbitraryVariable, isArbitraryValue],
conic: [isInteger, isArbitraryVariable, isArbitraryValue]
}, isArbitraryVariableImage, isArbitraryImage]
}],
"bg-color": [{
bg: scaleColor()
}],
"gradient-from-pos": [{
from: scaleGradientStopPosition()
}],
"gradient-via-pos": [{
via: scaleGradientStopPosition()
}],
"gradient-to-pos": [{
to: scaleGradientStopPosition()
}],
"gradient-from": [{
from: scaleColor()
}],
"gradient-via": [{
via: scaleColor()
}],
"gradient-to": [{
to: scaleColor()
}],
rounded: [{
rounded: scaleRadius()
}],
"rounded-s": [{
"rounded-s": scaleRadius()
}],
"rounded-e": [{
"rounded-e": scaleRadius()
}],
"rounded-t": [{
"rounded-t": scaleRadius()
}],
"rounded-r": [{
"rounded-r": scaleRadius()
}],
"rounded-b": [{
"rounded-b": scaleRadius()
}],
"rounded-l": [{
"rounded-l": scaleRadius()
}],
"rounded-ss": [{
"rounded-ss": scaleRadius()
}],
"rounded-se": [{
"rounded-se": scaleRadius()
}],
"rounded-ee": [{
"rounded-ee": scaleRadius()
}],
"rounded-es": [{
"rounded-es": scaleRadius()
}],
"rounded-tl": [{
"rounded-tl": scaleRadius()
}],
"rounded-tr": [{
"rounded-tr": scaleRadius()
}],
"rounded-br": [{
"rounded-br": scaleRadius()
}],
"rounded-bl": [{
"rounded-bl": scaleRadius()
}],
"border-w": [{
border: scaleBorderWidth()
}],
"border-w-x": [{
"border-x": scaleBorderWidth()
}],
"border-w-y": [{
"border-y": scaleBorderWidth()
}],
"border-w-s": [{
"border-s": scaleBorderWidth()
}],
"border-w-e": [{
"border-e": scaleBorderWidth()
}],
"border-w-t": [{
"border-t": scaleBorderWidth()
}],
"border-w-r": [{
"border-r": scaleBorderWidth()
}],
"border-w-b": [{
"border-b": scaleBorderWidth()
}],
"border-w-l": [{
"border-l": scaleBorderWidth()
}],
"divide-x": [{
"divide-x": scaleBorderWidth()
}],
"divide-x-reverse": ["divide-x-reverse"],
"divide-y": [{
"divide-y": scaleBorderWidth()
}],
"divide-y-reverse": ["divide-y-reverse"],
"border-style": [{
border: [...scaleLineStyle(), "hidden", "none"]
}],
"divide-style": [{
divide: [...scaleLineStyle(), "hidden", "none"]
}],
"border-color": [{
border: scaleColor()
}],
"border-color-x": [{
"border-x": scaleColor()
}],
"border-color-y": [{
"border-y": scaleColor()
}],
"border-color-s": [{
"border-s": scaleColor()
}],
"border-color-e": [{
"border-e": scaleColor()
}],
"border-color-t": [{
"border-t": scaleColor()
}],
"border-color-r": [{
"border-r": scaleColor()
}],
"border-color-b": [{
"border-b": scaleColor()
}],
"border-color-l": [{
"border-l": scaleColor()
}],
"divide-color": [{
divide: scaleColor()
}],
"outline-style": [{
outline: [...scaleLineStyle(), "none", "hidden"]
}],
"outline-offset": [{
"outline-offset": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"outline-w": [{
outline: ["", isNumber, isArbitraryVariableLength, isArbitraryLength]
}],
"outline-color": [{
outline: scaleColor()
}],
shadow: [{
shadow: [
"",
"none",
themeShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}],
"shadow-color": [{
shadow: scaleColor()
}],
"inset-shadow": [{
"inset-shadow": ["none", themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
}],
"inset-shadow-color": [{
"inset-shadow": scaleColor()
}],
"ring-w": [{
ring: scaleBorderWidth()
}],
"ring-w-inset": ["ring-inset"],
"ring-color": [{
ring: scaleColor()
}],
"ring-offset-w": [{
"ring-offset": [isNumber, isArbitraryLength]
}],
"ring-offset-color": [{
"ring-offset": scaleColor()
}],
"inset-ring-w": [{
"inset-ring": scaleBorderWidth()
}],
"inset-ring-color": [{
"inset-ring": scaleColor()
}],
"text-shadow": [{
"text-shadow": ["none", themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
}],
"text-shadow-color": [{
"text-shadow": scaleColor()
}],
opacity: [{
opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"mix-blend": [{
"mix-blend": [...scaleBlendMode(), "plus-darker", "plus-lighter"]
}],
"bg-blend": [{
"bg-blend": scaleBlendMode()
}],
"mask-clip": [{
"mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
}, "mask-no-clip"],
"mask-composite": [{
mask: ["add", "subtract", "intersect", "exclude"]
}],
"mask-image-linear-pos": [{
"mask-linear": [isNumber]
}],
"mask-image-linear-from-pos": [{
"mask-linear-from": scaleMaskImagePosition()
}],
"mask-image-linear-to-pos": [{
"mask-linear-to": scaleMaskImagePosition()
}],
"mask-image-linear-from-color": [{
"mask-linear-from": scaleColor()
}],
"mask-image-linear-to-color": [{
"mask-linear-to": scaleColor()
}],
"mask-image-t-from-pos": [{
"mask-t-from": scaleMaskImagePosition()
}],
"mask-image-t-to-pos": [{
"mask-t-to": scaleMaskImagePosition()
}],
"mask-image-t-from-color": [{
"mask-t-from": scaleColor()
}],
"mask-image-t-to-color": [{
"mask-t-to": scaleColor()
}],
"mask-image-r-from-pos": [{
"mask-r-from": scaleMaskImagePosition()
}],
"mask-image-r-to-pos": [{
"mask-r-to": scaleMaskImagePosition()
}],
"mask-image-r-from-color": [{
"mask-r-from": scaleColor()
}],
"mask-image-r-to-color": [{
"mask-r-to": scaleColor()
}],
"mask-image-b-from-pos": [{
"mask-b-from": scaleMaskImagePosition()
}],
"mask-image-b-to-pos": [{
"mask-b-to": scaleMaskImagePosition()
}],
"mask-image-b-from-color": [{
"mask-b-from": scaleColor()
}],
"mask-image-b-to-color": [{
"mask-b-to": scaleColor()
}],
"mask-image-l-from-pos": [{
"mask-l-from": scaleMaskImagePosition()
}],
"mask-image-l-to-pos": [{
"mask-l-to": scaleMaskImagePosition()
}],
"mask-image-l-from-color": [{
"mask-l-from": scaleColor()
}],
"mask-image-l-to-color": [{
"mask-l-to": scaleColor()
}],
"mask-image-x-from-pos": [{
"mask-x-from": scaleMaskImagePosition()
}],
"mask-image-x-to-pos": [{
"mask-x-to": scaleMaskImagePosition()
}],
"mask-image-x-from-color": [{
"mask-x-from": scaleColor()
}],
"mask-image-x-to-color": [{
"mask-x-to": scaleColor()
}],
"mask-image-y-from-pos": [{
"mask-y-from": scaleMaskImagePosition()
}],
"mask-image-y-to-pos": [{
"mask-y-to": scaleMaskImagePosition()
}],
"mask-image-y-from-color": [{
"mask-y-from": scaleColor()
}],
"mask-image-y-to-color": [{
"mask-y-to": scaleColor()
}],
"mask-image-radial": [{
"mask-radial": [isArbitraryVariable, isArbitraryValue]
}],
"mask-image-radial-from-pos": [{
"mask-radial-from": scaleMaskImagePosition()
}],
"mask-image-radial-to-pos": [{
"mask-radial-to": scaleMaskImagePosition()
}],
"mask-image-radial-from-color": [{
"mask-radial-from": scaleColor()
}],
"mask-image-radial-to-color": [{
"mask-radial-to": scaleColor()
}],
"mask-image-radial-shape": [{
"mask-radial": ["circle", "ellipse"]
}],
"mask-image-radial-size": [{
"mask-radial": [{
closest: ["side", "corner"],
farthest: ["side", "corner"]
}]
}],
"mask-image-radial-pos": [{
"mask-radial-at": scalePosition()
}],
"mask-image-conic-pos": [{
"mask-conic": [isNumber]
}],
"mask-image-conic-from-pos": [{
"mask-conic-from": scaleMaskImagePosition()
}],
"mask-image-conic-to-pos": [{
"mask-conic-to": scaleMaskImagePosition()
}],
"mask-image-conic-from-color": [{
"mask-conic-from": scaleColor()
}],
"mask-image-conic-to-color": [{
"mask-conic-to": scaleColor()
}],
"mask-mode": [{
mask: ["alpha", "luminance", "match"]
}],
"mask-origin": [{
"mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
}],
"mask-position": [{
mask: scaleBgPosition()
}],
"mask-repeat": [{
mask: scaleBgRepeat()
}],
"mask-size": [{
mask: scaleBgSize()
}],
"mask-type": [{
"mask-type": ["alpha", "luminance"]
}],
"mask-image": [{
mask: ["none", isArbitraryVariable, isArbitraryValue]
}],
filter: [{
filter: [
"",
"none",
isArbitraryVariable,
isArbitraryValue
]
}],
blur: [{
blur: scaleBlur()
}],
brightness: [{
brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
contrast: [{
contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"drop-shadow": [{
"drop-shadow": [
"",
"none",
themeDropShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}],
"drop-shadow-color": [{
"drop-shadow": scaleColor()
}],
grayscale: [{
grayscale: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
"hue-rotate": [{
"hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
invert: [{
invert: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
saturate: [{
saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
sepia: [{
sepia: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-filter": [{
"backdrop-filter": [
"",
"none",
isArbitraryVariable,
isArbitraryValue
]
}],
"backdrop-blur": [{
"backdrop-blur": scaleBlur()
}],
"backdrop-brightness": [{
"backdrop-brightness": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-contrast": [{
"backdrop-contrast": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-grayscale": [{
"backdrop-grayscale": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-hue-rotate": [{
"backdrop-hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-invert": [{
"backdrop-invert": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-opacity": [{
"backdrop-opacity": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-saturate": [{
"backdrop-saturate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
"backdrop-sepia": [{
"backdrop-sepia": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
"border-collapse": [{
border: ["collapse", "separate"]
}],
"border-spacing": [{
"border-spacing": scaleUnambiguousSpacing()
}],
"border-spacing-x": [{
"border-spacing-x": scaleUnambiguousSpacing()
}],
"border-spacing-y": [{
"border-spacing-y": scaleUnambiguousSpacing()
}],
"table-layout": [{
table: ["auto", "fixed"]
}],
caption: [{
caption: ["top", "bottom"]
}],
transition: [{
transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", isArbitraryVariable, isArbitraryValue]
}],
"transition-behavior": [{
transition: ["normal", "discrete"]
}],
duration: [{
duration: [isNumber, "initial", isArbitraryVariable, isArbitraryValue]
}],
ease: [{
ease: ["linear", "initial", themeEase, isArbitraryVariable, isArbitraryValue]
}],
delay: [{
delay: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
animate: [{
animate: ["none", themeAnimate, isArbitraryVariable, isArbitraryValue]
}],
backface: [{
backface: ["hidden", "visible"]
}],
perspective: [{
perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
}],
"perspective-origin": [{
"perspective-origin": scalePositionWithArbitrary()
}],
rotate: [{
rotate: scaleRotate()
}],
"rotate-x": [{
"rotate-x": scaleRotate()
}],
"rotate-y": [{
"rotate-y": scaleRotate()
}],
"rotate-z": [{
"rotate-z": scaleRotate()
}],
scale: [{
scale: scaleScale()
}],
"scale-x": [{
"scale-x": scaleScale()
}],
"scale-y": [{
"scale-y": scaleScale()
}],
"scale-z": [{
"scale-z": scaleScale()
}],
"scale-3d": ["scale-3d"],
skew: [{
skew: scaleSkew()
}],
"skew-x": [{
"skew-x": scaleSkew()
}],
"skew-y": [{
"skew-y": scaleSkew()
}],
transform: [{
transform: [isArbitraryVariable, isArbitraryValue, "", "none", "gpu", "cpu"]
}],
"transform-origin": [{
origin: scalePositionWithArbitrary()
}],
"transform-style": [{
transform: ["3d", "flat"]
}],
translate: [{
translate: scaleTranslate()
}],
"translate-x": [{
"translate-x": scaleTranslate()
}],
"translate-y": [{
"translate-y": scaleTranslate()
}],
"translate-z": [{
"translate-z": scaleTranslate()
}],
"translate-none": ["translate-none"],
accent: [{
accent: scaleColor()
}],
appearance: [{
appearance: ["none", "auto"]
}],
"caret-color": [{
caret: scaleColor()
}],
"color-scheme": [{
scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
}],
cursor: [{
cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryVariable, isArbitraryValue]
}],
"field-sizing": [{
"field-sizing": ["fixed", "content"]
}],
"pointer-events": [{
"pointer-events": ["auto", "none"]
}],
resize: [{
resize: ["none", "", "y", "x"]
}],
"scroll-behavior": [{
scroll: ["auto", "smooth"]
}],
"scroll-m": [{
"scroll-m": scaleUnambiguousSpacing()
}],
"scroll-mx": [{
"scroll-mx": scaleUnambiguousSpacing()
}],
"scroll-my": [{
"scroll-my": scaleUnambiguousSpacing()
}],
"scroll-ms": [{
"scroll-ms": scaleUnambiguousSpacing()
}],
"scroll-me": [{
"scroll-me": scaleUnambiguousSpacing()
}],
"scroll-mt": [{
"scroll-mt": scaleUnambiguousSpacing()
}],
"scroll-mr": [{
"scroll-mr": scaleUnambiguousSpacing()
}],
"scroll-mb": [{
"scroll-mb": scaleUnambiguousSpacing()
}],
"scroll-ml": [{
"scroll-ml": scaleUnambiguousSpacing()
}],
"scroll-p": [{
"scroll-p": scaleUnambiguousSpacing()
}],
"scroll-px": [{
"scroll-px": scaleUnambiguousSpacing()
}],
"scroll-py": [{
"scroll-py": scaleUnambiguousSpacing()
}],
"scroll-ps": [{
"scroll-ps": scaleUnambiguousSpacing()
}],
"scroll-pe": [{
"scroll-pe": scaleUnambiguousSpacing()
}],
"scroll-pt": [{
"scroll-pt": scaleUnambiguousSpacing()
}],
"scroll-pr": [{
"scroll-pr": scaleUnambiguousSpacing()
}],
"scroll-pb": [{
"scroll-pb": scaleUnambiguousSpacing()
}],
"scroll-pl": [{
"scroll-pl": scaleUnambiguousSpacing()
}],
"snap-align": [{
snap: ["start", "end", "center", "align-none"]
}],
"snap-stop": [{
snap: ["normal", "always"]
}],
"snap-type": [{
snap: ["none", "x", "y", "both"]
}],
"snap-strictness": [{
snap: ["mandatory", "proximity"]
}],
touch: [{
touch: ["auto", "none", "manipulation"]
}],
"touch-x": [{
"touch-pan": ["x", "left", "right"]
}],
"touch-y": [{
"touch-pan": ["y", "up", "down"]
}],
"touch-pz": ["touch-pinch-zoom"],
select: [{
select: ["none", "text", "all", "auto"]
}],
"will-change": [{
"will-change": ["auto", "scroll", "contents", "transform", isArbitraryVariable, isArbitraryValue]
}],
fill: [{
fill: ["none", ...scaleColor()]
}],
"stroke-w": [{
stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
}],
stroke: [{
stroke: ["none", ...scaleColor()]
}],
"forced-color-adjust": [{
"forced-color-adjust": ["auto", "none"]
}]
},
conflictingClassGroups: {
overflow: ["overflow-x", "overflow-y"],
overscroll: ["overscroll-x", "overscroll-y"],
inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
"inset-x": ["right", "left"],
"inset-y": ["top", "bottom"],
flex: ["basis", "grow", "shrink"],
gap: ["gap-x", "gap-y"],
p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
px: ["pr", "pl"],
py: ["pt", "pb"],
m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
mx: ["mr", "ml"],
my: ["mt", "mb"],
size: ["w", "h"],
"font-size": ["leading"],
"fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
"fvn-ordinal": ["fvn-normal"],
"fvn-slashed-zero": ["fvn-normal"],
"fvn-figure": ["fvn-normal"],
"fvn-spacing": ["fvn-normal"],
"fvn-fraction": ["fvn-normal"],
"line-clamp": ["display", "overflow"],
rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
"rounded-s": ["rounded-ss", "rounded-es"],
"rounded-e": ["rounded-se", "rounded-ee"],
"rounded-t": ["rounded-tl", "rounded-tr"],
"rounded-r": ["rounded-tr", "rounded-br"],
"rounded-b": ["rounded-br", "rounded-bl"],
"rounded-l": ["rounded-tl", "rounded-bl"],
"border-spacing": ["border-spacing-x", "border-spacing-y"],
"border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
"border-w-x": ["border-w-r", "border-w-l"],
"border-w-y": ["border-w-t", "border-w-b"],
"border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
"border-color-x": ["border-color-r", "border-color-l"],
"border-color-y": ["border-color-t", "border-color-b"],
translate: ["translate-x", "translate-y", "translate-none"],
"translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
"scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
"scroll-mx": ["scroll-mr", "scroll-ml"],
"scroll-my": ["scroll-mt", "scroll-mb"],
"scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
"scroll-px": ["scroll-pr", "scroll-pl"],
"scroll-py": ["scroll-pt", "scroll-pb"],
touch: ["touch-x", "touch-y", "touch-pz"],
"touch-x": ["touch"],
"touch-y": ["touch"],
"touch-pz": ["touch"]
},
conflictingClassGroupModifiers: {
"font-size": ["leading"]
},
orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
};
};
const twMerge = createTailwindMerge(getDefaultConfig);
function cn$1(...inputs) {
return twMerge(clsx.clsx(inputs));
}
function ScrollArea({
className,
children,
ref,
...props
}) {
return jsxRuntimeExports.jsxs(
Root$6,
{
"data-slot": "scroll-area",
className: cn$1("relative", className),
...props,
children: [
jsxRuntimeExports.jsx(
Viewport,
{
ref,
"data-slot": "scroll-area-viewport",
className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!block",
children
}
),
jsxRuntimeExports.jsx(ScrollBar, {}),
jsxRuntimeExports.jsx(Corner, {})
]
}
);
}
function ScrollBar({
className,
orientation = "vertical",
...props
}) {
return jsxRuntimeExports.jsx(
ScrollAreaScrollbar,
{
"data-slot": "scroll-area-scrollbar",
orientation,
className: cn$1(
"flex touch-none p-px transition-colors select-none",
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
className
),
...props,
children: jsxRuntimeExports.jsx(
ScrollAreaThumb,
{
"data-slot": "scroll-area-thumb",
className: "bg-border relative flex-1 rounded-full"
}
)
}
);
}
const SvgImageError = (props) => React__namespace.createElement("svg", { t: 1760857878018, className: "icon", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "p-id": 1823, xmlnsXlink: "http://www.w3.org/1999/xlink", width: 200, height: 200, ...props }, React__namespace.createElement("path", { d: "M540.042 675.4l-322.6-305.8c-6.8 3.5-12.9 8.1-18.1 13.7l-134.4 141-7.1-262.7c-0.9-31.6 24.6-58.3 56.2-59.1l237.9-6.4 55.8-59-295.3 8c-63.8 1.8-114.1 54.6-112.4 118.1l8.6 320 5.4 196.6c1.7 63.5 54.8 113.5 118.6 111.8l207.5-5.6 14.1-0.4 55.8-59 137-144.6-7-6.6z m189.5-218.5c47.9 0 86.7-38.6 86.7-86.2s-38.9-86.2-86.7-86.2c-47.8 0-86.7 38.6-86.7 86.2s38.8 86.2 86.7 86.2z", "p-id": 1824, fill: "currentColor" }), React__namespace.createElement("path", { d: "M924.342 161.6l-286.3-40-65 48.9 343.3 47.9c31.5 4.4 53.5 33.5 49.3 65l-64.1 459.3-142.4-187.5c-23.5-30.9-67.5-37-98.5-13.8l-51.9 39 76.8 101.6-65.2 49.3-93.8 70.9-64.8 48.8 40.3 5.6 319.2 44.5c61.4 8.8 118.8-32.7 129.6-93.9 0.4-1.3 0.6-2.7 0.8-4.1l71.4-511.9c8.7-62.7-35.4-120.8-98.7-129.6z", "p-id": 1825, fill: "currentColor" }));
function LoadingIcon(props) {
const { className, strokeWidth = 80 } = props;
return jsxRuntimeExports.jsxs(
"svg",
{
className: `animate-spin ${className}`,
viewBox: "0 0 1024 1024",
version: "1.1",
"p-id": "1869",
width: "200",
height: "200",
xmlns: "http://www.w3.org/2000/svg",
children: [
jsxRuntimeExports.jsx(
"circle",
{
cx: "513",
cy: "512",
r: "400",
fill: "none",
stroke: "rgba(223, 223, 223, .5)",
strokeWidth
}
),
jsxRuntimeExports.jsx(
"circle",
{
cx: "513",
cy: "512",
r: "400",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeWidth: strokeWidth - 20,
strokeDasharray: "2512",
children: jsxRuntimeExports.jsx(
"animate",
{
attributeName: "stroke-dashoffset",
values: "2512;1000;2512",
dur: "2s",
repeatCount: "indefinite"
}
)
}
)
]
}
);
}
const LayoutGroupContext = React.createContext({});
function useConstant(init) {
const ref = React.useRef(null);
if (ref.current === null) {
ref.current = init();
}
return ref.current;
}
const isBrowser = typeof window !== "undefined";
const useIsomorphicLayoutEffect$1 = isBrowser ? React.useLayoutEffect : React.useEffect;
const PresenceContext = React.createContext(null);
function addUniqueItem(arr, item) {
if (arr.indexOf(item) === -1)
arr.push(item);
}
function removeItem(arr, item) {
const index2 = arr.indexOf(item);
if (index2 > -1)
arr.splice(index2, 1);
}
const clamp$1 = (min2, max2, v) => {
if (v > max2)
return max2;
if (v < min2)
return min2;
return v;
};
let invariant = () => {
};
const MotionGlobalConfig = {};
const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
function isObject$1(value) {
return typeof value === "object" && value !== null;
}
const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
function memo(callback) {
let result;
return () => {
if (result === void 0)
result = callback();
return result;
};
}
const noop$1 = (any) => any;
const combineFunctions = (a2, b) => (v) => b(a2(v));
const pipe = (...transformers) => transformers.reduce(combineFunctions);
const progress = (from, to, value) => {
const toFromDifference = to - from;
return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
};
class SubscriptionManager {
constructor() {
this.subscriptions = [];
}
add(handler) {
addUniqueItem(this.subscriptions, handler);
return () => removeItem(this.subscriptions, handler);
}
notify(a2, b, c) {
const numSubscriptions = this.subscriptions.length;
if (!numSubscriptions)
return;
if (numSubscriptions === 1) {
this.subscriptions[0](a2, b, c);
} else {
for (let i2 = 0; i2 < numSubscriptions; i2++) {
const handler = this.subscriptions[i2];
handler && handler(a2, b, c);
}
}
}
getSize() {
return this.subscriptions.length;
}
clear() {
this.subscriptions.length = 0;
}
}
const secondsToMilliseconds = (seconds) => seconds * 1e3;
const millisecondsToSeconds = (milliseconds) => milliseconds / 1e3;
function velocityPerSecond(velocity, frameDuration) {
return frameDuration ? velocity * (1e3 / frameDuration) : 0;
}
const calcBezier = (t2, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t2 + (3 * a2 - 6 * a1)) * t2 + 3 * a1) * t2;
const subdivisionPrecision = 1e-7;
const subdivisionMaxIterations = 12;
function binarySubdivide(x2, lowerBound, upperBound, mX1, mX2) {
let currentX;
let currentT;
let i2 = 0;
do {
currentT = lowerBound + (upperBound - lowerBound) / 2;
currentX = calcBezier(currentT, mX1, mX2) - x2;
if (currentX > 0) {
upperBound = currentT;
} else {
lowerBound = currentT;
}
} while (Math.abs(currentX) > subdivisionPrecision && ++i2 < subdivisionMaxIterations);
return currentT;
}
function cubicBezier(mX1, mY1, mX2, mY2) {
if (mX1 === mY1 && mX2 === mY2)
return noop$1;
const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
return (t2) => t2 === 0 || t2 === 1 ? t2 : calcBezier(getTForX(t2), mY1, mY2);
}
const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
const backIn = reverseEasing(backOut);
const backInOut = mirrorEasing(backIn);
const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
const circIn = (p) => 1 - Math.sin(Math.acos(p));
const circOut = reverseEasing(circIn);
const circInOut = mirrorEasing(circIn);
const easeIn = cubicBezier(0.42, 0, 1, 1);
const easeOut = cubicBezier(0, 0, 0.58, 1);
const easeInOut = cubicBezier(0.42, 0, 0.58, 1);
const isEasingArray = (ease2) => {
return Array.isArray(ease2) && typeof ease2[0] !== "number";
};
const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
const easingLookup = {
linear: noop$1,
easeIn,
easeInOut,
easeOut,
circIn,
circInOut,
circOut,
backIn,
backInOut,
backOut,
anticipate
};
const isValidEasing = (easing) => {
return typeof easing === "string";
};
const easingDefinitionToFunction = (definition) => {
if (isBezierDefinition(definition)) {
invariant(definition.length === 4);
const [x1, y1, x2, y2] = definition;
return cubicBezier(x1, y1, x2, y2);
} else if (isValidEasing(definition)) {
return easingLookup[definition];
}
return definition;
};
const stepsOrder = [
"setup",
"read",
"resolveKeyframes",
"preUpdate",
"update",
"preRender",
"render",
"postRender"
];
function createRenderStep(runNextFrame, stepName) {
let thisFrame = new Set();
let nextFrame = new Set();
let isProcessing = false;
let flushNextFrame = false;
const toKeepAlive = new WeakSet();
let latestFrameData = {
delta: 0,
timestamp: 0,
isProcessing: false
};
function triggerCallback(callback) {
if (toKeepAlive.has(callback)) {
step.schedule(callback);
runNextFrame();
}
callback(latestFrameData);
}
const step = {
schedule: (callback, keepAlive = false, immediate = false) => {
const addToCurrentFrame = immediate && isProcessing;
const queue = addToCurrentFrame ? thisFrame : nextFrame;
if (keepAlive)
toKeepAlive.add(callback);
if (!queue.has(callback))
queue.add(callback);
return callback;
},
cancel: (callback) => {
nextFrame.delete(callback);
toKeepAlive.delete(callback);
},
process: (frameData2) => {
latestFrameData = frameData2;
if (isProcessing) {
flushNextFrame = true;
return;
}
isProcessing = true;
[thisFrame, nextFrame] = [nextFrame, thisFrame];
thisFrame.forEach(triggerCallback);
thisFrame.clear();
isProcessing = false;
if (flushNextFrame) {
flushNextFrame = false;
step.process(frameData2);
}
}
};
return step;
}
const maxElapsed = 40;
function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
let runNextFrame = false;
let useDefaultElapsed = true;
const state = {
delta: 0,
timestamp: 0,
isProcessing: false
};
const flagRunNextFrame = () => runNextFrame = true;
const steps = stepsOrder.reduce((acc, key) => {
acc[key] = createRenderStep(flagRunNextFrame);
return acc;
}, {});
const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender } = steps;
const processBatch = () => {
const timestamp = MotionGlobalConfig.useManualTiming ? state.timestamp : performance.now();
runNextFrame = false;
if (!MotionGlobalConfig.useManualTiming) {
state.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
}
state.timestamp = timestamp;
state.isProcessing = true;
setup.process(state);
read.process(state);
resolveKeyframes.process(state);
preUpdate.process(state);
update.process(state);
preRender.process(state);
render.process(state);
postRender.process(state);
state.isProcessing = false;
if (runNextFrame && allowKeepAlive) {
useDefaultElapsed = false;
scheduleNextBatch(processBatch);
}
};
const wake = () => {
runNextFrame = true;
useDefaultElapsed = true;
if (!state.isProcessing) {
scheduleNextBatch(processBatch);
}
};
const schedule = stepsOrder.reduce((acc, key) => {
const step = steps[key];
acc[key] = (process, keepAlive = false, immediate = false) => {
if (!runNextFrame)
wake();
return step.schedule(process, keepAlive, immediate);
};
return acc;
}, {});
const cancel = (process) => {
for (let i2 = 0; i2 < stepsOrder.length; i2++) {
steps[stepsOrder[i2]].cancel(process);
}
};
return { schedule, cancel, state, steps };
}
const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$1, true);
let now;
function clearTime() {
now = void 0;
}
const time = {
now: () => {
if (now === void 0) {
time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now());
}
return now;
},
set: (newTime) => {
now = newTime;
queueMicrotask(clearTime);
}
};
const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
const isCSSVariableName = checkStringStartsWith("--");
const startsAsVariableToken = checkStringStartsWith("var(--");
const isCSSVariableToken = (value) => {
const startsWithToken = startsAsVariableToken(value);
if (!startsWithToken)
return false;
return singleCssVariableRegex.test(value.split("/*")[0].trim());
};
const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
const number = {
test: (v) => typeof v === "number",
parse: parseFloat,
transform: (v) => v
};
const alpha = {
...number,
transform: (v) => clamp$1(0, 1, v)
};
const scale = {
...number,
default: 1
};
const sanitize = (v) => Math.round(v * 1e5) / 1e5;
const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
function isNullish(v) {
return v == null;
}
const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
const isColorString = (type, testProp) => (v) => {
return Boolean(typeof v === "string" && singleColorRegex.test(v) && v.startsWith(type) || testProp && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp));
};
const splitColor = (aName, bName, cName) => (v) => {
if (typeof v !== "string")
return v;
const [a2, b, c, alpha2] = v.match(floatRegex);
return {
[aName]: parseFloat(a2),
[bName]: parseFloat(b),
[cName]: parseFloat(c),
alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
};
};
const clampRgbUnit = (v) => clamp$1(0, 255, v);
const rgbUnit = {
...number,
transform: (v) => Math.round(clampRgbUnit(v))
};
const rgba = {
test: isColorString("rgb", "red"),
parse: splitColor("red", "green", "blue"),
transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red) + ", " + rgbUnit.transform(green) + ", " + rgbUnit.transform(blue) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
};
function parseHex(v) {
let r2 = "";
let g = "";
let b = "";
let a2 = "";
if (v.length > 5) {
r2 = v.substring(1, 3);
g = v.substring(3, 5);
b = v.substring(5, 7);
a2 = v.substring(7, 9);
} else {
r2 = v.substring(1, 2);
g = v.substring(2, 3);
b = v.substring(3, 4);
a2 = v.substring(4, 5);
r2 += r2;
g += g;
b += b;
a2 += a2;
}
return {
red: parseInt(r2, 16),
green: parseInt(g, 16),
blue: parseInt(b, 16),
alpha: a2 ? parseInt(a2, 16) / 255 : 1
};
}
const hex = {
test: isColorString("#"),
parse: parseHex,
transform: rgba.transform
};
const createUnitType = (unit) => ({
test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
parse: parseFloat,
transform: (v) => `${v}${unit}`
});
const degrees = createUnitType("deg");
const percent = createUnitType("%");
const px = createUnitType("px");
const vh = createUnitType("vh");
const vw = createUnitType("vw");
const progressPercentage = (() => ({
...percent,
parse: (v) => percent.parse(v) / 100,
transform: (v) => percent.transform(v * 100)
}))();
const hsla = {
test: isColorString("hsl", "hue"),
parse: splitColor("hue", "saturation", "lightness"),
transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
}
};
const color = {
test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
parse: (v) => {
if (rgba.test(v)) {
return rgba.parse(v);
} else if (hsla.test(v)) {
return hsla.parse(v);
} else {
return hex.parse(v);
}
},
transform: (v) => {
return typeof v === "string" ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v);
},
getAnimatableNone: (v) => {
const parsed = color.parse(v);
parsed.alpha = 0;
return color.transform(parsed);
}
};
const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
function test(v) {
return isNaN(v) && typeof v === "string" && (v.match(floatRegex)?.length || 0) + (v.match(colorRegex)?.length || 0) > 0;
}
const NUMBER_TOKEN = "number";
const COLOR_TOKEN = "color";
const VAR_TOKEN = "var";
const VAR_FUNCTION_TOKEN = "var(";
const SPLIT_TOKEN = "${}";
const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
function analyseComplexValue(value) {
const originalValue = value.toString();
const values = [];
const indexes = {
color: [],
number: [],
var: []
};
const types = [];
let i2 = 0;
const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
if (color.test(parsedValue)) {
indexes.color.push(i2);
types.push(COLOR_TOKEN);
values.push(color.parse(parsedValue));
} else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
indexes.var.push(i2);
types.push(VAR_TOKEN);
values.push(parsedValue);
} else {
indexes.number.push(i2);
types.push(NUMBER_TOKEN);
values.push(parseFloat(parsedValue));
}
++i2;
return SPLIT_TOKEN;
});
const split = tokenised.split(SPLIT_TOKEN);
return { values, split, indexes, types };
}
function parseComplexValue(v) {
return analyseComplexValue(v).values;
}
function createTransformer(source) {
const { split, types } = analyseComplexValue(source);
const numSections = split.length;
return (v) => {
let output = "";
for (let i2 = 0; i2 < numSections; i2++) {
output += split[i2];
if (v[i2] !== void 0) {
const type = types[i2];
if (type === NUMBER_TOKEN) {
output += sanitize(v[i2]);
} else if (type === COLOR_TOKEN) {
output += color.transform(v[i2]);
} else {
output += v[i2];
}
}
}
return output;
};
}
const convertNumbersToZero = (v) => typeof v === "number" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;
function getAnimatableNone$1(v) {
const parsed = parseComplexValue(v);
const transformer = createTransformer(v);
return transformer(parsed.map(convertNumbersToZero));
}
const complex = {
test,
parse: parseComplexValue,
createTransformer,
getAnimatableNone: getAnimatableNone$1
};
function hueToRgb(p, q, t2) {
if (t2 < 0)
t2 += 1;
if (t2 > 1)
t2 -= 1;
if (t2 < 1 / 6)
return p + (q - p) * 6 * t2;
if (t2 < 1 / 2)
return q;
if (t2 < 2 / 3)
return p + (q - p) * (2 / 3 - t2) * 6;
return p;
}
function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
hue /= 360;
saturation /= 100;
lightness /= 100;
let red = 0;
let green = 0;
let blue = 0;
if (!saturation) {
red = green = blue = lightness;
} else {
const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
const p = 2 * lightness - q;
red = hueToRgb(p, q, hue + 1 / 3);
green = hueToRgb(p, q, hue);
blue = hueToRgb(p, q, hue - 1 / 3);
}
return {
red: Math.round(red * 255),
green: Math.round(green * 255),
blue: Math.round(blue * 255),
alpha: alpha2
};
}
function mixImmediate(a2, b) {
return (p) => p > 0 ? b : a2;
}
const mixNumber$1 = (from, to, progress2) => {
return from + (to - from) * progress2;
};
const mixLinearColor = (from, to, v) => {
const fromExpo = from * from;
const expo = v * (to * to - fromExpo) + fromExpo;
return expo < 0 ? 0 : Math.sqrt(expo);
};
const colorTypes = [hex, rgba, hsla];
const getColorType = (v) => colorTypes.find((type) => type.test(v));
function asRGBA(color2) {
const type = getColorType(color2);
if (!Boolean(type))
return false;
let model = type.parse(color2);
if (type === hsla) {
model = hslaToRgba(model);
}
return model;
}
const mixColor = (from, to) => {
const fromRGBA = asRGBA(from);
const toRGBA = asRGBA(to);
if (!fromRGBA || !toRGBA) {
return mixImmediate(from, to);
}
const blended = { ...fromRGBA };
return (v) => {
blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v);
return rgba.transform(blended);
};
};
const invisibleValues = new Set(["none", "hidden"]);
function mixVisibility(origin, target) {
if (invisibleValues.has(origin)) {
return (p) => p <= 0 ? origin : target;
} else {
return (p) => p >= 1 ? target : origin;
}
}
function mixNumber(a2, b) {
return (p) => mixNumber$1(a2, b, p);
}
function getMixer(a2) {
if (typeof a2 === "number") {
return mixNumber;
} else if (typeof a2 === "string") {
return isCSSVariableToken(a2) ? mixImmediate : color.test(a2) ? mixColor : mixComplex;
} else if (Array.isArray(a2)) {
return mixArray;
} else if (typeof a2 === "object") {
return color.test(a2) ? mixColor : mixObject;
}
return mixImmediate;
}
function mixArray(a2, b) {
const output = [...a2];
const numValues = output.length;
const blendValue = a2.map((v, i2) => getMixer(v)(v, b[i2]));
return (p) => {
for (let i2 = 0; i2 < numValues; i2++) {
output[i2] = blendValue[i2](p);
}
return output;
};
}
function mixObject(a2, b) {
const output = { ...a2, ...b };
const blendValue = {};
for (const key in output) {
if (a2[key] !== void 0 && b[key] !== void 0) {
blendValue[key] = getMixer(a2[key])(a2[key], b[key]);
}
}
return (v) => {
for (const key in blendValue) {
output[key] = blendValue[key](v);
}
return output;
};
}
function matchOrder(origin, target) {
const orderedOrigin = [];
const pointers = { color: 0, var: 0, number: 0 };
for (let i2 = 0; i2 < target.values.length; i2++) {
const type = target.types[i2];
const originIndex = origin.indexes[type][pointers[type]];
const originValue = origin.values[originIndex] ?? 0;
orderedOrigin[i2] = originValue;
pointers[type]++;
}
return orderedOrigin;
}
const mixComplex = (origin, target) => {
const template = complex.createTransformer(target);
const originStats = analyseComplexValue(origin);
const targetStats = analyseComplexValue(target);
const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length;
if (canInterpolate) {
if (invisibleValues.has(origin) && !targetStats.values.length || invisibleValues.has(target) && !originStats.values.length) {
return mixVisibility(origin, target);
}
return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
} else {
return mixImmediate(origin, target);
}
};
function mix(from, to, p) {
if (typeof from === "number" && typeof to === "number" && typeof p === "number") {
return mixNumber$1(from, to, p);
}
const mixer = getMixer(from);
return mixer(from, to);
}
const frameloopDriver = (update) => {
const passTimestamp = ({ timestamp }) => update(timestamp);
return {
start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),
stop: () => cancelFrame(passTimestamp),
now: () => frameData.isProcessing ? frameData.timestamp : time.now()
};
};
const generateLinearEasing = (easing, duration, resolution = 10) => {
let points = "";
const numPoints = Math.max(Math.round(duration / resolution), 2);
for (let i2 = 0; i2 < numPoints; i2++) {
points += Math.round(easing(i2 / (numPoints - 1)) * 1e4) / 1e4 + ", ";
}
return `linear(${points.substring(0, points.length - 2)})`;
};
const maxGeneratorDuration = 2e4;
function calcGeneratorDuration(generator) {
let duration = 0;
const timeStep = 50;
let state = generator.next(duration);
while (!state.done && duration < maxGeneratorDuration) {
duration += timeStep;
state = generator.next(duration);
}
return duration >= maxGeneratorDuration ? Infinity : duration;
}
function createGeneratorEasing(options, scale2 = 100, createGenerator) {
const generator = createGenerator({ ...options, keyframes: [0, scale2] });
const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
return {
type: "keyframes",
ease: (progress2) => {
return generator.next(duration * progress2).value / scale2;
},
duration: millisecondsToSeconds(duration)
};
}
const velocitySampleDuration = 5;
function calcGeneratorVelocity(resolveValue, t2, current) {
const prevT = Math.max(t2 - velocitySampleDuration, 0);
return velocityPerSecond(current - resolveValue(prevT), t2 - prevT);
}
const springDefaults = {
stiffness: 100,
damping: 10,
mass: 1,
velocity: 0,
duration: 800,
bounce: 0.3,
visualDuration: 0.3,
restSpeed: {
granular: 0.01,
default: 2
},
restDelta: {
granular: 5e-3,
default: 0.5
},
minDuration: 0.01,
maxDuration: 10,
minDamping: 0.05,
maxDamping: 1
};
const safeMin = 1e-3;
function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
let envelope;
let derivative;
let dampingRatio = 1 - bounce;
dampingRatio = clamp$1(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
duration = clamp$1(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
if (dampingRatio < 1) {
envelope = (undampedFreq2) => {
const exponentialDecay = undampedFreq2 * dampingRatio;
const delta = exponentialDecay * duration;
const a2 = exponentialDecay - velocity;
const b = calcAngularFreq(undampedFreq2, dampingRatio);
const c = Math.exp(-delta);
return safeMin - a2 / b * c;
};
derivative = (undampedFreq2) => {
const exponentialDecay = undampedFreq2 * dampingRatio;
const delta = exponentialDecay * duration;
const d = delta * velocity + velocity;
const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq2, 2) * duration;
const f = Math.exp(-delta);
const g = calcAngularFreq(Math.pow(undampedFreq2, 2), dampingRatio);
const factor = -envelope(undampedFreq2) + safeMin > 0 ? -1 : 1;
return factor * ((d - e) * f) / g;
};
} else {
envelope = (undampedFreq2) => {
const a2 = Math.exp(-undampedFreq2 * duration);
const b = (undampedFreq2 - velocity) * duration + 1;
return -safeMin + a2 * b;
};
derivative = (undampedFreq2) => {
const a2 = Math.exp(-undampedFreq2 * duration);
const b = (velocity - undampedFreq2) * (duration * duration);
return a2 * b;
};
}
const initialGuess = 5 / duration;
const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
duration = secondsToMilliseconds(duration);
if (isNaN(undampedFreq)) {
return {
stiffness: springDefaults.stiffness,
damping: springDefaults.damping,
duration
};
} else {
const stiffness = Math.pow(undampedFreq, 2) * mass;
return {
stiffness,
damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
duration
};
}
}
const rootIterations = 12;
function approximateRoot(envelope, derivative, initialGuess) {
let result = initialGuess;
for (let i2 = 1; i2 < rootIterations; i2++) {
result = result - envelope(result) / derivative(result);
}
return result;
}
function calcAngularFreq(undampedFreq, dampingRatio) {
return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
}
const durationKeys = ["duration", "bounce"];
const physicsKeys = ["stiffness", "damping", "mass"];
function isSpringType(options, keys) {
return keys.some((key) => options[key] !== void 0);
}
function getSpringOptions(options) {
let springOptions = {
velocity: springDefaults.velocity,
stiffness: springDefaults.stiffness,
damping: springDefaults.damping,
mass: springDefaults.mass,
isResolvedFromDuration: false,
...options
};
if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {
if (options.visualDuration) {
const visualDuration = options.visualDuration;
const root = 2 * Math.PI / (visualDuration * 1.2);
const stiffness = root * root;
const damping = 2 * clamp$1(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
springOptions = {
...springOptions,
mass: springDefaults.mass,
stiffness,
damping
};
} else {
const derived = findSpring(options);
springOptions = {
...springOptions,
...derived,
mass: springDefaults.mass
};
springOptions.isResolvedFromDuration = true;
}
}
return springOptions;
}
function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
const options = typeof optionsOrVisualDuration !== "object" ? {
visualDuration: optionsOrVisualDuration,
keyframes: [0, 1],
bounce
} : optionsOrVisualDuration;
let { restSpeed, restDelta } = options;
const origin = options.keyframes[0];
const target = options.keyframes[options.keyframes.length - 1];
const state = { done: false, value: origin };
const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration } = getSpringOptions({
...options,
velocity: - millisecondsToSeconds(options.velocity || 0)
});
const initialVelocity = velocity || 0;
const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
const initialDelta = target - origin;
const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
const isGranularScale = Math.abs(initialDelta) < 5;
restSpeed || (restSpeed = isGranularScale ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default);
restDelta || (restDelta = isGranularScale ? springDefaults.restDelta.granular : springDefaults.restDelta.default);
let resolveSpring;
if (dampingRatio < 1) {
const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
resolveSpring = (t2) => {
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t2);
return target - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq * Math.sin(angularFreq * t2) + initialDelta * Math.cos(angularFreq * t2));
};
} else if (dampingRatio === 1) {
resolveSpring = (t2) => target - Math.exp(-undampedAngularFreq * t2) * (initialDelta + (initialVelocity + undampedAngularFreq * initialDelta) * t2);
} else {
const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
resolveSpring = (t2) => {
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t2);
const freqForT = Math.min(dampedAngularFreq * t2, 300);
return target - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) * Math.sinh(freqForT) + dampedAngularFreq * initialDelta * Math.cosh(freqForT)) / dampedAngularFreq;
};
}
const generator = {
calculatedDuration: isResolvedFromDuration ? duration || null : null,
next: (t2) => {
const current = resolveSpring(t2);
if (!isResolvedFromDuration) {
let currentVelocity = t2 === 0 ? initialVelocity : 0;
if (dampingRatio < 1) {
currentVelocity = t2 === 0 ? secondsToMilliseconds(initialVelocity) : calcGeneratorVelocity(resolveSpring, t2, current);
}
const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
} else {
state.done = t2 >= duration;
}
state.value = state.done ? target : current;
return state;
},
toString: () => {
const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
const easing = generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
return calculatedDuration + "ms " + easing;
},
toTransition: () => {
}
};
return generator;
}
spring.applyToOptions = (options) => {
const generatorOptions = createGeneratorEasing(options, 100, spring);
options.ease = generatorOptions.ease;
options.duration = secondsToMilliseconds(generatorOptions.duration);
options.type = "keyframes";
return options;
};
function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min: min2, max: max2, restDelta = 0.5, restSpeed }) {
const origin = keyframes2[0];
const state = {
done: false,
value: origin
};
const isOutOfBounds = (v) => min2 !== void 0 && v < min2 || max2 !== void 0 && v > max2;
const nearestBoundary = (v) => {
if (min2 === void 0)
return max2;
if (max2 === void 0)
return min2;
return Math.abs(min2 - v) < Math.abs(max2 - v) ? min2 : max2;
};
let amplitude = power * velocity;
const ideal = origin + amplitude;
const target = modifyTarget === void 0 ? ideal : modifyTarget(ideal);
if (target !== ideal)
amplitude = target - origin;
const calcDelta = (t2) => -amplitude * Math.exp(-t2 / timeConstant);
const calcLatest = (t2) => target + calcDelta(t2);
const applyFriction = (t2) => {
const delta = calcDelta(t2);
const latest = calcLatest(t2);
state.done = Math.abs(delta) <= restDelta;
state.value = state.done ? target : latest;
};
let timeReachedBoundary;
let spring$1;
const checkCatchBoundary = (t2) => {
if (!isOutOfBounds(state.value))
return;
timeReachedBoundary = t2;
spring$1 = spring({
keyframes: [state.value, nearestBoundary(state.value)],
velocity: calcGeneratorVelocity(calcLatest, t2, state.value),
damping: bounceDamping,
stiffness: bounceStiffness,
restDelta,
restSpeed
});
};
checkCatchBoundary(0);
return {
calculatedDuration: null,
next: (t2) => {
let hasUpdatedFrame = false;
if (!spring$1 && timeReachedBoundary === void 0) {
hasUpdatedFrame = true;
applyFriction(t2);
checkCatchBoundary(t2);
}
if (timeReachedBoundary !== void 0 && t2 >= timeReachedBoundary) {
return spring$1.next(t2 - timeReachedBoundary);
} else {
!hasUpdatedFrame && applyFriction(t2);
return state;
}
}
};
}
function createMixers(output, ease2, customMixer) {
const mixers = [];
const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
const numMixers = output.length - 1;
for (let i2 = 0; i2 < numMixers; i2++) {
let mixer = mixerFactory(output[i2], output[i2 + 1]);
if (ease2) {
const easingFunction = Array.isArray(ease2) ? ease2[i2] || noop$1 : ease2;
mixer = pipe(easingFunction, mixer);
}
mixers.push(mixer);
}
return mixers;
}
function interpolate(input, output, { clamp: isClamp = true, ease: ease2, mixer } = {}) {
const inputLength = input.length;
invariant(inputLength === output.length);
if (inputLength === 1)
return () => output[0];
if (inputLength === 2 && output[0] === output[1])
return () => output[1];
const isZeroDeltaRange = input[0] === input[1];
if (input[0] > input[inputLength - 1]) {
input = [...input].reverse();
output = [...output].reverse();
}
const mixers = createMixers(output, ease2, mixer);
const numMixers = mixers.length;
const interpolator = (v) => {
if (isZeroDeltaRange && v < input[0])
return output[0];
let i2 = 0;
if (numMixers > 1) {
for (; i2 < input.length - 2; i2++) {
if (v < input[i2 + 1])
break;
}
}
const progressInRange = progress(input[i2], input[i2 + 1], v);
return mixers[i2](progressInRange);
};
return isClamp ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v)) : interpolator;
}
function fillOffset(offset2, remaining) {
const min2 = offset2[offset2.length - 1];
for (let i2 = 1; i2 <= remaining; i2++) {
const offsetProgress = progress(0, remaining, i2);
offset2.push(mixNumber$1(min2, 1, offsetProgress));
}
}
function defaultOffset(arr) {
const offset2 = [0];
fillOffset(offset2, arr.length - 1);
return offset2;
}
function convertOffsetToTimes(offset2, duration) {
return offset2.map((o2) => o2 * duration);
}
function defaultEasing(values, easing) {
return values.map(() => easing || easeInOut).splice(0, values.length - 1);
}
function keyframes({ duration = 300, keyframes: keyframeValues, times, ease: ease2 = "easeInOut" }) {
const easingFunctions = isEasingArray(ease2) ? ease2.map(easingDefinitionToFunction) : easingDefinitionToFunction(ease2);
const state = {
done: false,
value: keyframeValues[0]
};
const absoluteTimes = convertOffsetToTimes(
times && times.length === keyframeValues.length ? times : defaultOffset(keyframeValues),
duration
);
const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
ease: Array.isArray(easingFunctions) ? easingFunctions : defaultEasing(keyframeValues, easingFunctions)
});
return {
calculatedDuration: duration,
next: (t2) => {
state.value = mapTimeToKeyframe(t2);
state.done = t2 >= duration;
return state;
}
};
}
const isNotNull$2 = (value) => value !== null;
function getFinalKeyframe$1(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
const resolvedKeyframes = keyframes2.filter(isNotNull$2);
const useFirstKeyframe = speed < 0 || repeat && repeatType !== "loop" && repeat % 2 === 1;
const index2 = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
return !index2 || finalKeyframe === void 0 ? resolvedKeyframes[index2] : finalKeyframe;
}
const transitionTypeMap = {
decay: inertia,
inertia,
tween: keyframes,
keyframes,
spring
};
function replaceTransitionType(transition) {
if (typeof transition.type === "string") {
transition.type = transitionTypeMap[transition.type];
}
}
class WithPromise {
constructor() {
this.updateFinished();
}
get finished() {
return this._finished;
}
updateFinished() {
this._finished = new Promise((resolve) => {
this.resolve = resolve;
});
}
notifyFinished() {
this.resolve();
}
then(onResolve, onReject) {
return this.finished.then(onResolve, onReject);
}
}
const percentToProgress = (percent2) => percent2 / 100;
class JSAnimation extends WithPromise {
constructor(options) {
super();
this.state = "idle";
this.startTime = null;
this.isStopped = false;
this.currentTime = 0;
this.holdTime = null;
this.playbackSpeed = 1;
this.stop = () => {
const { motionValue: motionValue2 } = this.options;
if (motionValue2 && motionValue2.updatedAt !== time.now()) {
this.tick(time.now());
}
this.isStopped = true;
if (this.state === "idle")
return;
this.teardown();
this.options.onStop?.();
};
this.options = options;
this.initAnimation();
this.play();
if (options.autoplay === false)
this.pause();
}
initAnimation() {
const { options } = this;
replaceTransitionType(options);
const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = options;
let { keyframes: keyframes$1 } = options;
const generatorFactory = type || keyframes;
if (generatorFactory !== keyframes && typeof keyframes$1[0] !== "number") {
this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
keyframes$1 = [0, 100];
}
const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
if (repeatType === "mirror") {
this.mirroredGenerator = generatorFactory({
...options,
keyframes: [...keyframes$1].reverse(),
velocity: -velocity
});
}
if (generator.calculatedDuration === null) {
generator.calculatedDuration = calcGeneratorDuration(generator);
}
const { calculatedDuration } = generator;
this.calculatedDuration = calculatedDuration;
this.resolvedDuration = calculatedDuration + repeatDelay;
this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;
this.generator = generator;
}
updateTime(timestamp) {
const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
if (this.holdTime !== null) {
this.currentTime = this.holdTime;
} else {
this.currentTime = animationTime;
}
}
tick(timestamp, sample = false) {
const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration } = this;
if (this.startTime === null)
return generator.next(0);
const { delay: delay2 = 0, keyframes: keyframes2, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe } = this.options;
if (this.speed > 0) {
this.startTime = Math.min(this.startTime, timestamp);
} else if (this.speed < 0) {
this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
}
if (sample) {
this.currentTime = timestamp;
} else {
this.updateTime(timestamp);
}
const timeWithoutDelay = this.currentTime - delay2 * (this.playbackSpeed >= 0 ? 1 : -1);
const isInDelayPhase = this.playbackSpeed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;
this.currentTime = Math.max(timeWithoutDelay, 0);
if (this.state === "finished" && this.holdTime === null) {
this.currentTime = totalDuration;
}
let elapsed = this.currentTime;
let frameGenerator = generator;
if (repeat) {
const progress2 = Math.min(this.currentTime, totalDuration) / resolvedDuration;
let currentIteration = Math.floor(progress2);
let iterationProgress = progress2 % 1;
if (!iterationProgress && progress2 >= 1) {
iterationProgress = 1;
}
iterationProgress === 1 && currentIteration--;
currentIteration = Math.min(currentIteration, repeat + 1);
const isOddIteration = Boolean(currentIteration % 2);
if (isOddIteration) {
if (repeatType === "reverse") {
iterationProgress = 1 - iterationProgress;
if (repeatDelay) {
iterationProgress -= repeatDelay / resolvedDuration;
}
} else if (repeatType === "mirror") {
frameGenerator = mirroredGenerator;
}
}
elapsed = clamp$1(0, 1, iterationProgress) * resolvedDuration;
}
const state = isInDelayPhase ? { done: false, value: keyframes2[0] } : frameGenerator.next(elapsed);
if (mixKeyframes) {
state.value = mixKeyframes(state.value);
}
let { done } = state;
if (!isInDelayPhase && calculatedDuration !== null) {
done = this.playbackSpeed >= 0 ? this.currentTime >= totalDuration : this.currentTime <= 0;
}
const isAnimationFinished = this.holdTime === null && (this.state === "finished" || this.state === "running" && done);
if (isAnimationFinished && type !== inertia) {
state.value = getFinalKeyframe$1(keyframes2, this.options, finalKeyframe, this.speed);
}
if (onUpdate) {
onUpdate(state.value);
}
if (isAnimationFinished) {
this.finish();
}
return state;
}
then(resolve, reject) {
return this.finished.then(resolve, reject);
}
get duration() {
return millisecondsToSeconds(this.calculatedDuration);
}
get iterationDuration() {
const { delay: delay2 = 0 } = this.options || {};
return this.duration + millisecondsToSeconds(delay2);
}
get time() {
return millisecondsToSeconds(this.currentTime);
}
set time(newTime) {
newTime = secondsToMilliseconds(newTime);
this.currentTime = newTime;
if (this.startTime === null || this.holdTime !== null || this.playbackSpeed === 0) {
this.holdTime = newTime;
} else if (this.driver) {
this.startTime = this.driver.now() - newTime / this.playbackSpeed;
}
this.driver?.start(false);
}
get speed() {
return this.playbackSpeed;
}
set speed(newSpeed) {
this.updateTime(time.now());
const hasChanged = this.playbackSpeed !== newSpeed;
this.playbackSpeed = newSpeed;
if (hasChanged) {
this.time = millisecondsToSeconds(this.currentTime);
}
}
play() {
if (this.isStopped)
return;
const { driver = frameloopDriver, startTime } = this.options;
if (!this.driver) {
this.driver = driver((timestamp) => this.tick(timestamp));
}
this.options.onPlay?.();
const now2 = this.driver.now();
if (this.state === "finished") {
this.updateFinished();
this.startTime = now2;
} else if (this.holdTime !== null) {
this.startTime = now2 - this.holdTime;
} else if (!this.startTime) {
this.startTime = startTime ?? now2;
}
if (this.state === "finished" && this.speed < 0) {
this.startTime += this.calculatedDuration;
}
this.holdTime = null;
this.state = "running";
this.driver.start();
}
pause() {
this.state = "paused";
this.updateTime(time.now());
this.holdTime = this.currentTime;
}
complete() {
if (this.state !== "running") {
this.play();
}
this.state = "finished";
this.holdTime = null;
}
finish() {
this.notifyFinished();
this.teardown();
this.state = "finished";
this.options.onComplete?.();
}
cancel() {
this.holdTime = null;
this.startTime = 0;
this.tick(0);
this.teardown();
this.options.onCancel?.();
}
teardown() {
this.state = "idle";
this.stopDriver();
this.startTime = this.holdTime = null;
}
stopDriver() {
if (!this.driver)
return;
this.driver.stop();
this.driver = void 0;
}
sample(sampleTime) {
this.startTime = 0;
return this.tick(sampleTime, true);
}
attachTimeline(timeline) {
if (this.options.allowFlatten) {
this.options.type = "keyframes";
this.options.ease = "linear";
this.initAnimation();
}
this.driver?.stop();
return timeline.observe(this);
}
}
function fillWildcards(keyframes2) {
for (let i2 = 1; i2 < keyframes2.length; i2++) {
keyframes2[i2] ?? (keyframes2[i2] = keyframes2[i2 - 1]);
}
}
const radToDeg = (rad) => rad * 180 / Math.PI;
const rotate = (v) => {
const angle = radToDeg(Math.atan2(v[1], v[0]));
return rebaseAngle(angle);
};
const matrix2dParsers = {
x: 4,
y: 5,
translateX: 4,
translateY: 5,
scaleX: 0,
scaleY: 3,
scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
rotate,
rotateZ: rotate,
skewX: (v) => radToDeg(Math.atan(v[1])),
skewY: (v) => radToDeg(Math.atan(v[2])),
skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2
};
const rebaseAngle = (angle) => {
angle = angle % 360;
if (angle < 0)
angle += 360;
return angle;
};
const rotateZ = rotate;
const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
const matrix3dParsers = {
x: 12,
y: 13,
z: 14,
translateX: 12,
translateY: 13,
translateZ: 14,
scaleX,
scaleY,
scale: (v) => (scaleX(v) + scaleY(v)) / 2,
rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
rotateZ,
rotate: rotateZ,
skewX: (v) => radToDeg(Math.atan(v[4])),
skewY: (v) => radToDeg(Math.atan(v[1])),
skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2
};
function defaultTransformValue(name) {
return name.includes("scale") ? 1 : 0;
}
function parseValueFromTransform(transform, name) {
if (!transform || transform === "none") {
return defaultTransformValue(name);
}
const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
let parsers;
let match;
if (matrix3dMatch) {
parsers = matrix3dParsers;
match = matrix3dMatch;
} else {
const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
parsers = matrix2dParsers;
match = matrix2dMatch;
}
if (!match) {
return defaultTransformValue(name);
}
const valueParser = parsers[name];
const values = match[1].split(",").map(convertTransformToNumber);
return typeof valueParser === "function" ? valueParser(values) : values[valueParser];
}
const readTransformValue = (instance, name) => {
const { transform = "none" } = getComputedStyle(instance);
return parseValueFromTransform(transform, name);
};
function convertTransformToNumber(value) {
return parseFloat(value.trim());
}
const transformPropOrder = [
"transformPerspective",
"x",
"y",
"z",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skew",
"skewX",
"skewY"
];
const transformProps = (() => new Set(transformPropOrder))();
const isNumOrPxType = (v) => v === number || v === px;
const transformKeys = new Set(["x", "y", "z"]);
const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
function removeNonTranslationalTransform(visualElement) {
const removedTransforms = [];
nonTranslationalTransformKeys.forEach((key) => {
const value = visualElement.getValue(key);
if (value !== void 0) {
removedTransforms.push([key, value.get()]);
value.set(key.startsWith("scale") ? 1 : 0);
}
});
return removedTransforms;
}
const positionalValues = {
width: ({ x: x2 }, { paddingLeft = "0", paddingRight = "0" }) => x2.max - x2.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
top: (_bbox, { top }) => parseFloat(top),
left: (_bbox, { left }) => parseFloat(left),
bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
right: ({ x: x2 }, { left }) => parseFloat(left) + (x2.max - x2.min),
x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
y: (_bbox, { transform }) => parseValueFromTransform(transform, "y")
};
positionalValues.translateX = positionalValues.x;
positionalValues.translateY = positionalValues.y;
const toResolve = new Set();
let isScheduled = false;
let anyNeedsMeasurement = false;
let isForced = false;
function measureAllKeyframes() {
if (anyNeedsMeasurement) {
const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
const transformsToRestore = new Map();
elementsToMeasure.forEach((element) => {
const removedTransforms = removeNonTranslationalTransform(element);
if (!removedTransforms.length)
return;
transformsToRestore.set(element, removedTransforms);
element.render();
});
resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
elementsToMeasure.forEach((element) => {
element.render();
const restore = transformsToRestore.get(element);
if (restore) {
restore.forEach(([key, value]) => {
element.getValue(key)?.set(value);
});
}
});
resolversToMeasure.forEach((resolver) => resolver.measureEndState());
resolversToMeasure.forEach((resolver) => {
if (resolver.suspendedScrollY !== void 0) {
window.scrollTo(0, resolver.suspendedScrollY);
}
});
}
anyNeedsMeasurement = false;
isScheduled = false;
toResolve.forEach((resolver) => resolver.complete(isForced));
toResolve.clear();
}
function readAllKeyframes() {
toResolve.forEach((resolver) => {
resolver.readKeyframes();
if (resolver.needsMeasurement) {
anyNeedsMeasurement = true;
}
});
}
function flushKeyframeResolvers() {
isForced = true;
readAllKeyframes();
measureAllKeyframes();
isForced = false;
}
class KeyframeResolver {
constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false) {
this.state = "pending";
this.isAsync = false;
this.needsMeasurement = false;
this.unresolvedKeyframes = [...unresolvedKeyframes];
this.onComplete = onComplete;
this.name = name;
this.motionValue = motionValue2;
this.element = element;
this.isAsync = isAsync;
}
scheduleResolve() {
this.state = "scheduled";
if (this.isAsync) {
toResolve.add(this);
if (!isScheduled) {
isScheduled = true;
frame.read(readAllKeyframes);
frame.resolveKeyframes(measureAllKeyframes);
}
} else {
this.readKeyframes();
this.complete();
}
}
readKeyframes() {
const { unresolvedKeyframes, name, element, motionValue: motionValue2 } = this;
if (unresolvedKeyframes[0] === null) {
const currentValue = motionValue2?.get();
const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
if (currentValue !== void 0) {
unresolvedKeyframes[0] = currentValue;
} else if (element && name) {
const valueAsRead = element.readValue(name, finalKeyframe);
if (valueAsRead !== void 0 && valueAsRead !== null) {
unresolvedKeyframes[0] = valueAsRead;
}
}
if (unresolvedKeyframes[0] === void 0) {
unresolvedKeyframes[0] = finalKeyframe;
}
if (motionValue2 && currentValue === void 0) {
motionValue2.set(unresolvedKeyframes[0]);
}
}
fillWildcards(unresolvedKeyframes);
}
setFinalKeyframe() {
}
measureInitialState() {
}
renderEndStyles() {
}
measureEndState() {
}
complete(isForcedComplete = false) {
this.state = "complete";
this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForcedComplete);
toResolve.delete(this);
}
cancel() {
if (this.state === "scheduled") {
toResolve.delete(this);
this.state = "pending";
}
}
resume() {
if (this.state === "pending")
this.scheduleResolve();
}
}
const isCSSVar = (name) => name.startsWith("--");
function setStyle(element, name, value) {
isCSSVar(name) ? element.style.setProperty(name, value) : element.style[name] = value;
}
const supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
const supportsFlags = {};
function memoSupports(callback, supportsFlag) {
const memoized = memo(callback);
return () => supportsFlags[supportsFlag] ?? memoized();
}
const supportsLinearEasing = memoSupports(() => {
try {
document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
} catch (e) {
return false;
}
return true;
}, "linearEasing");
const cubicBezierAsString = ([a2, b, c, d]) => `cubic-bezier(${a2}, ${b}, ${c}, ${d})`;
const supportedWaapiEasing = {
linear: "linear",
ease: "ease",
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
};
function mapEasingToNativeEasing(easing, duration) {
if (!easing) {
return void 0;
} else if (typeof easing === "function") {
return supportsLinearEasing() ? generateLinearEasing(easing, duration) : "ease-out";
} else if (isBezierDefinition(easing)) {
return cubicBezierAsString(easing);
} else if (Array.isArray(easing)) {
return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut);
} else {
return supportedWaapiEasing[easing];
}
}
function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeOut", times } = {}, pseudoElement = void 0) {
const keyframeOptions = {
[valueName]: keyframes2
};
if (times)
keyframeOptions.offset = times;
const easing = mapEasingToNativeEasing(ease2, duration);
if (Array.isArray(easing))
keyframeOptions.easing = easing;
const options = {
delay: delay2,
duration,
easing: !Array.isArray(easing) ? easing : "linear",
fill: "both",
iterations: repeat + 1,
direction: repeatType === "reverse" ? "alternate" : "normal"
};
if (pseudoElement)
options.pseudoElement = pseudoElement;
const animation = element.animate(keyframeOptions, options);
return animation;
}
function isGenerator(type) {
return typeof type === "function" && "applyToOptions" in type;
}
function applyGeneratorOptions({ type, ...options }) {
if (isGenerator(type) && supportsLinearEasing()) {
return type.applyToOptions(options);
} else {
options.duration ?? (options.duration = 300);
options.ease ?? (options.ease = "easeOut");
}
return options;
}
class NativeAnimation extends WithPromise {
constructor(options) {
super();
this.finishedTime = null;
this.isStopped = false;
if (!options)
return;
const { element, name, keyframes: keyframes2, pseudoElement, allowFlatten = false, finalKeyframe, onComplete } = options;
this.isPseudoElement = Boolean(pseudoElement);
this.allowFlatten = allowFlatten;
this.options = options;
invariant(typeof options.type !== "string");
const transition = applyGeneratorOptions(options);
this.animation = startWaapiAnimation(element, name, keyframes2, transition, pseudoElement);
if (transition.autoplay === false) {
this.animation.pause();
}
this.animation.onfinish = () => {
this.finishedTime = this.time;
if (!pseudoElement) {
const keyframe = getFinalKeyframe$1(keyframes2, this.options, finalKeyframe, this.speed);
if (this.updateMotionValue) {
this.updateMotionValue(keyframe);
} else {
setStyle(element, name, keyframe);
}
this.animation.cancel();
}
onComplete?.();
this.notifyFinished();
};
}
play() {
if (this.isStopped)
return;
this.animation.play();
if (this.state === "finished") {
this.updateFinished();
}
}
pause() {
this.animation.pause();
}
complete() {
this.animation.finish?.();
}
cancel() {
try {
this.animation.cancel();
} catch (e) {
}
}
stop() {
if (this.isStopped)
return;
this.isStopped = true;
const { state } = this;
if (state === "idle" || state === "finished") {
return;
}
if (this.updateMotionValue) {
this.updateMotionValue();
} else {
this.commitStyles();
}
if (!this.isPseudoElement)
this.cancel();
}
commitStyles() {
if (!this.isPseudoElement) {
this.animation.commitStyles?.();
}
}
get duration() {
const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
return millisecondsToSeconds(Number(duration));
}
get iterationDuration() {
const { delay: delay2 = 0 } = this.options || {};
return this.duration + millisecondsToSeconds(delay2);
}
get time() {
return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
}
set time(newTime) {
this.finishedTime = null;
this.animation.currentTime = secondsToMilliseconds(newTime);
}
get speed() {
return this.animation.playbackRate;
}
set speed(newSpeed) {
if (newSpeed < 0)
this.finishedTime = null;
this.animation.playbackRate = newSpeed;
}
get state() {
return this.finishedTime !== null ? "finished" : this.animation.playState;
}
get startTime() {
return Number(this.animation.startTime);
}
set startTime(newStartTime) {
this.animation.startTime = newStartTime;
}
attachTimeline({ timeline, observe }) {
if (this.allowFlatten) {
this.animation.effect?.updateTiming({ easing: "linear" });
}
this.animation.onfinish = null;
if (timeline && supportsScrollTimeline()) {
this.animation.timeline = timeline;
return noop$1;
} else {
return observe(this);
}
}
}
const unsupportedEasingFunctions = {
anticipate,
backInOut,
circInOut
};
function isUnsupportedEase(key) {
return key in unsupportedEasingFunctions;
}
function replaceStringEasing(transition) {
if (typeof transition.ease === "string" && isUnsupportedEase(transition.ease)) {
transition.ease = unsupportedEasingFunctions[transition.ease];
}
}
const sampleDelta = 10;
class NativeAnimationExtended extends NativeAnimation {
constructor(options) {
replaceStringEasing(options);
replaceTransitionType(options);
super(options);
if (options.startTime) {
this.startTime = options.startTime;
}
this.options = options;
}
updateMotionValue(value) {
const { motionValue: motionValue2, onUpdate, onComplete, element, ...options } = this.options;
if (!motionValue2)
return;
if (value !== void 0) {
motionValue2.set(value);
return;
}
const sampleAnimation = new JSAnimation({
...options,
autoplay: false
});
const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
sampleAnimation.stop();
}
}
const isAnimatable = (value, name) => {
if (name === "zIndex")
return false;
if (typeof value === "number" || Array.isArray(value))
return true;
if (typeof value === "string" &&
(complex.test(value) || value === "0") &&
!value.startsWith("url(")) {
return true;
}
return false;
};
function hasKeyframesChanged(keyframes2) {
const current = keyframes2[0];
if (keyframes2.length === 1)
return true;
for (let i2 = 0; i2 < keyframes2.length; i2++) {
if (keyframes2[i2] !== current)
return true;
}
}
function canAnimate(keyframes2, name, type, velocity) {
const originKeyframe = keyframes2[0];
if (originKeyframe === null)
return false;
if (name === "display" || name === "visibility")
return true;
const targetKeyframe = keyframes2[keyframes2.length - 1];
const isOriginAnimatable = isAnimatable(originKeyframe, name);
const isTargetAnimatable = isAnimatable(targetKeyframe, name);
if (!isOriginAnimatable || !isTargetAnimatable) {
return false;
}
return hasKeyframesChanged(keyframes2) || (type === "spring" || isGenerator(type)) && velocity;
}
function makeAnimationInstant(options) {
options.duration = 0;
options.type = "keyframes";
}
const acceleratedValues = new Set([
"opacity",
"clipPath",
"filter",
"transform"
]);
const supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
function supportsBrowserAnimation(options) {
const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type } = options;
const subject = motionValue2?.owner?.current;
if (!(subject instanceof HTMLElement)) {
return false;
}
const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
return supportsWaapi() && name && acceleratedValues.has(name) && (name !== "transform" || !transformTemplate) &&
!onUpdate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
}
const MAX_RESOLVE_DELAY = 40;
class AsyncMotionValueAnimation extends WithPromise {
constructor({ autoplay = true, delay: delay2 = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", keyframes: keyframes2, name, motionValue: motionValue2, element, ...options }) {
super();
this.stop = () => {
if (this._animation) {
this._animation.stop();
this.stopTimeline?.();
}
this.keyframeResolver?.cancel();
};
this.createdAt = time.now();
const optionsWithDefaults = {
autoplay,
delay: delay2,
type,
repeat,
repeatDelay,
repeatType,
name,
motionValue: motionValue2,
element,
...options
};
const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
this.keyframeResolver = new KeyframeResolver$1(keyframes2, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue2, element);
this.keyframeResolver?.scheduleResolve();
}
onKeyframesResolved(keyframes2, finalKeyframe, options, sync) {
this.keyframeResolver = void 0;
const { name, type, velocity, delay: delay2, isHandoff, onUpdate } = options;
this.resolvedAt = time.now();
if (!canAnimate(keyframes2, name, type, velocity)) {
if (MotionGlobalConfig.instantAnimations || !delay2) {
onUpdate?.(getFinalKeyframe$1(keyframes2, options, finalKeyframe));
}
keyframes2[0] = keyframes2[keyframes2.length - 1];
makeAnimationInstant(options);
options.repeat = 0;
}
const startTime = sync ? !this.resolvedAt ? this.createdAt : this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY ? this.resolvedAt : this.createdAt : void 0;
const resolvedOptions = {
startTime,
finalKeyframe,
...options,
keyframes: keyframes2
};
const animation = !isHandoff && supportsBrowserAnimation(resolvedOptions) ? new NativeAnimationExtended({
...resolvedOptions,
element: resolvedOptions.motionValue.owner.current
}) : new JSAnimation(resolvedOptions);
animation.finished.then(() => this.notifyFinished()).catch(noop$1);
if (this.pendingTimeline) {
this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
this.pendingTimeline = void 0;
}
this._animation = animation;
}
get finished() {
if (!this._animation) {
return this._finished;
} else {
return this.animation.finished;
}
}
then(onResolve, _onReject) {
return this.finished.finally(onResolve).then(() => {
});
}
get animation() {
if (!this._animation) {
this.keyframeResolver?.resume();
flushKeyframeResolvers();
}
return this._animation;
}
get duration() {
return this.animation.duration;
}
get iterationDuration() {
return this.animation.iterationDuration;
}
get time() {
return this.animation.time;
}
set time(newTime) {
this.animation.time = newTime;
}
get speed() {
return this.animation.speed;
}
get state() {
return this.animation.state;
}
set speed(newSpeed) {
this.animation.speed = newSpeed;
}
get startTime() {
return this.animation.startTime;
}
attachTimeline(timeline) {
if (this._animation) {
this.stopTimeline = this.animation.attachTimeline(timeline);
} else {
this.pendingTimeline = timeline;
}
return () => this.stop();
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
complete() {
this.animation.complete();
}
cancel() {
if (this._animation) {
this.animation.cancel();
}
this.keyframeResolver?.cancel();
}
}
const splitCSSVariableRegex = (
/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
);
function parseCSSVariable(current) {
const match = splitCSSVariableRegex.exec(current);
if (!match)
return [,];
const [, token1, token2, fallback] = match;
return [`--${token1 ?? token2}`, fallback];
}
function getVariableValue(current, element, depth = 1) {
const [token, fallback] = parseCSSVariable(current);
if (!token)
return;
const resolved = window.getComputedStyle(element).getPropertyValue(token);
if (resolved) {
const trimmed = resolved.trim();
return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
}
return isCSSVariableToken(fallback) ? getVariableValue(fallback, element, depth + 1) : fallback;
}
function getValueTransition(transition, key) {
return transition?.[key] ?? transition?.["default"] ?? transition;
}
const positionalKeys = new Set([
"width",
"height",
"top",
"left",
"right",
"bottom",
...transformPropOrder
]);
const auto = {
test: (v) => v === "auto",
parse: (v) => v
};
const testValueType = (v) => (type) => type.test(v);
const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
function isNone(value) {
if (typeof value === "number") {
return value === 0;
} else if (value !== null) {
return value === "none" || value === "0" || isZeroValueString(value);
} else {
return true;
}
}
const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
function applyDefaultFilter(v) {
const [name, value] = v.slice(0, -1).split("(");
if (name === "drop-shadow")
return v;
const [number2] = value.match(floatRegex) || [];
if (!number2)
return v;
const unit = value.replace(number2, "");
let defaultValue = maxDefaults.has(name) ? 1 : 0;
if (number2 !== value)
defaultValue *= 100;
return name + "(" + defaultValue + unit + ")";
}
const functionRegex = /\b([a-z-]*)\(.*?\)/gu;
const filter = {
...complex,
getAnimatableNone: (v) => {
const functions = v.match(functionRegex);
return functions ? functions.map(applyDefaultFilter).join(" ") : v;
}
};
const int = {
...number,
transform: Math.round
};
const transformValueTypes = {
rotate: degrees,
rotateX: degrees,
rotateY: degrees,
rotateZ: degrees,
scale,
scaleX: scale,
scaleY: scale,
scaleZ: scale,
skew: degrees,
skewX: degrees,
skewY: degrees,
distance: px,
translateX: px,
translateY: px,
translateZ: px,
x: px,
y: px,
z: px,
perspective: px,
transformPerspective: px,
opacity: alpha,
originX: progressPercentage,
originY: progressPercentage,
originZ: px
};
const numberValueTypes = {
borderWidth: px,
borderTopWidth: px,
borderRightWidth: px,
borderBottomWidth: px,
borderLeftWidth: px,
borderRadius: px,
radius: px,
borderTopLeftRadius: px,
borderTopRightRadius: px,
borderBottomRightRadius: px,
borderBottomLeftRadius: px,
width: px,
maxWidth: px,
height: px,
maxHeight: px,
top: px,
right: px,
bottom: px,
left: px,
padding: px,
paddingTop: px,
paddingRight: px,
paddingBottom: px,
paddingLeft: px,
margin: px,
marginTop: px,
marginRight: px,
marginBottom: px,
marginLeft: px,
backgroundPositionX: px,
backgroundPositionY: px,
...transformValueTypes,
zIndex: int,
fillOpacity: alpha,
strokeOpacity: alpha,
numOctaves: int
};
const defaultValueTypes = {
...numberValueTypes,
color,
backgroundColor: color,
outlineColor: color,
fill: color,
stroke: color,
borderColor: color,
borderTopColor: color,
borderRightColor: color,
borderBottomColor: color,
borderLeftColor: color,
filter,
WebkitFilter: filter
};
const getDefaultValueType = (key) => defaultValueTypes[key];
function getAnimatableNone(key, value) {
let defaultValueType = getDefaultValueType(key);
if (defaultValueType !== filter)
defaultValueType = complex;
return defaultValueType.getAnimatableNone ? defaultValueType.getAnimatableNone(value) : void 0;
}
const invalidTemplates = new Set(["auto", "none", "0"]);
function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
let i2 = 0;
let animatableTemplate = void 0;
while (i2 < unresolvedKeyframes.length && !animatableTemplate) {
const keyframe = unresolvedKeyframes[i2];
if (typeof keyframe === "string" && !invalidTemplates.has(keyframe) && analyseComplexValue(keyframe).values.length) {
animatableTemplate = unresolvedKeyframes[i2];
}
i2++;
}
if (animatableTemplate && name) {
for (const noneIndex of noneKeyframeIndexes) {
unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
}
}
}
class DOMKeyframesResolver extends KeyframeResolver {
constructor(unresolvedKeyframes, onComplete, name, motionValue2, element) {
super(unresolvedKeyframes, onComplete, name, motionValue2, element, true);
}
readKeyframes() {
const { unresolvedKeyframes, element, name } = this;
if (!element || !element.current)
return;
super.readKeyframes();
for (let i2 = 0; i2 < unresolvedKeyframes.length; i2++) {
let keyframe = unresolvedKeyframes[i2];
if (typeof keyframe === "string") {
keyframe = keyframe.trim();
if (isCSSVariableToken(keyframe)) {
const resolved = getVariableValue(keyframe, element.current);
if (resolved !== void 0) {
unresolvedKeyframes[i2] = resolved;
}
if (i2 === unresolvedKeyframes.length - 1) {
this.finalKeyframe = keyframe;
}
}
}
}
this.resolveNoneKeyframes();
if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
return;
}
const [origin, target] = unresolvedKeyframes;
const originType = findDimensionValueType(origin);
const targetType = findDimensionValueType(target);
if (originType === targetType)
return;
if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
for (let i2 = 0; i2 < unresolvedKeyframes.length; i2++) {
const value = unresolvedKeyframes[i2];
if (typeof value === "string") {
unresolvedKeyframes[i2] = parseFloat(value);
}
}
} else if (positionalValues[name]) {
this.needsMeasurement = true;
}
}
resolveNoneKeyframes() {
const { unresolvedKeyframes, name } = this;
const noneKeyframeIndexes = [];
for (let i2 = 0; i2 < unresolvedKeyframes.length; i2++) {
if (unresolvedKeyframes[i2] === null || isNone(unresolvedKeyframes[i2])) {
noneKeyframeIndexes.push(i2);
}
}
if (noneKeyframeIndexes.length) {
makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
}
}
measureInitialState() {
const { element, unresolvedKeyframes, name } = this;
if (!element || !element.current)
return;
if (name === "height") {
this.suspendedScrollY = window.pageYOffset;
}
this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
unresolvedKeyframes[0] = this.measuredOrigin;
const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
if (measureKeyframe !== void 0) {
element.getValue(name, measureKeyframe).jump(measureKeyframe, false);
}
}
measureEndState() {
const { element, name, unresolvedKeyframes } = this;
if (!element || !element.current)
return;
const value = element.getValue(name);
value && value.jump(this.measuredOrigin, false);
const finalKeyframeIndex = unresolvedKeyframes.length - 1;
const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
if (finalKeyframe !== null && this.finalKeyframe === void 0) {
this.finalKeyframe = finalKeyframe;
}
if (this.removedTransforms?.length) {
this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
element.getValue(unsetTransformName).set(unsetTransformValue);
});
}
this.resolveNoneKeyframes();
}
}
function resolveElements(elementOrSelector, scope, selectorCache) {
if (elementOrSelector instanceof EventTarget) {
return [elementOrSelector];
} else if (typeof elementOrSelector === "string") {
let root = document;
const elements = root.querySelectorAll(elementOrSelector);
return elements ? Array.from(elements) : [];
}
return Array.from(elementOrSelector);
}
const getValueAsType = (value, type) => {
return type && typeof value === "number" ? type.transform(value) : value;
};
function isHTMLElement$1(element) {
return isObject$1(element) && "offsetHeight" in element;
}
const MAX_VELOCITY_DELTA = 30;
const isFloat = (value) => {
return !isNaN(parseFloat(value));
};
class MotionValue {
constructor(init, options = {}) {
this.canTrackVelocity = null;
this.events = {};
this.updateAndNotify = (v) => {
const currentTime = time.now();
if (this.updatedAt !== currentTime) {
this.setPrevFrameValue();
}
this.prev = this.current;
this.setCurrent(v);
if (this.current !== this.prev) {
this.events.change?.notify(this.current);
if (this.dependents) {
for (const dependent of this.dependents) {
dependent.dirty();
}
}
}
};
this.hasAnimated = false;
this.setCurrent(init);
this.owner = options.owner;
}
setCurrent(current) {
this.current = current;
this.updatedAt = time.now();
if (this.canTrackVelocity === null && current !== void 0) {
this.canTrackVelocity = isFloat(this.current);
}
}
setPrevFrameValue(prevFrameValue = this.current) {
this.prevFrameValue = prevFrameValue;
this.prevUpdatedAt = this.updatedAt;
}
onChange(subscription) {
return this.on("change", subscription);
}
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = new SubscriptionManager();
}
const unsubscribe = this.events[eventName].add(callback);
if (eventName === "change") {
return () => {
unsubscribe();
frame.read(() => {
if (!this.events.change.getSize()) {
this.stop();
}
});
};
}
return unsubscribe;
}
clearListeners() {
for (const eventManagers in this.events) {
this.events[eventManagers].clear();
}
}
attach(passiveEffect, stopPassiveEffect) {
this.passiveEffect = passiveEffect;
this.stopPassiveEffect = stopPassiveEffect;
}
set(v) {
if (!this.passiveEffect) {
this.updateAndNotify(v);
} else {
this.passiveEffect(v, this.updateAndNotify);
}
}
setWithVelocity(prev, current, delta) {
this.set(current);
this.prev = void 0;
this.prevFrameValue = prev;
this.prevUpdatedAt = this.updatedAt - delta;
}
jump(v, endAnimation = true) {
this.updateAndNotify(v);
this.prev = v;
this.prevUpdatedAt = this.prevFrameValue = void 0;
endAnimation && this.stop();
if (this.stopPassiveEffect)
this.stopPassiveEffect();
}
dirty() {
this.events.change?.notify(this.current);
}
addDependent(dependent) {
if (!this.dependents) {
this.dependents = new Set();
}
this.dependents.add(dependent);
}
removeDependent(dependent) {
if (this.dependents) {
this.dependents.delete(dependent);
}
}
get() {
return this.current;
}
getPrevious() {
return this.prev;
}
getVelocity() {
const currentTime = time.now();
if (!this.canTrackVelocity || this.prevFrameValue === void 0 || currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
return 0;
}
const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
return velocityPerSecond(parseFloat(this.current) - parseFloat(this.prevFrameValue), delta);
}
start(startAnimation) {
this.stop();
return new Promise((resolve) => {
this.hasAnimated = true;
this.animation = startAnimation(resolve);
if (this.events.animationStart) {
this.events.animationStart.notify();
}
}).then(() => {
if (this.events.animationComplete) {
this.events.animationComplete.notify();
}
this.clearAnimation();
});
}
stop() {
if (this.animation) {
this.animation.stop();
if (this.events.animationCancel) {
this.events.animationCancel.notify();
}
}
this.clearAnimation();
}
isAnimating() {
return !!this.animation;
}
clearAnimation() {
delete this.animation;
}
destroy() {
this.dependents?.clear();
this.events.destroy?.notify();
this.clearListeners();
this.stop();
if (this.stopPassiveEffect) {
this.stopPassiveEffect();
}
}
}
function motionValue(init, options) {
return new MotionValue(init, options);
}
const { schedule: microtask } = createRenderBatcher(queueMicrotask, false);
const isDragging = {
x: false,
y: false
};
function isDragActive() {
return isDragging.x || isDragging.y;
}
function setDragLock(axis) {
if (axis === "x" || axis === "y") {
if (isDragging[axis]) {
return null;
} else {
isDragging[axis] = true;
return () => {
isDragging[axis] = false;
};
}
} else {
if (isDragging.x || isDragging.y) {
return null;
} else {
isDragging.x = isDragging.y = true;
return () => {
isDragging.x = isDragging.y = false;
};
}
}
}
function setupGesture(elementOrSelector, options) {
const elements = resolveElements(elementOrSelector);
const gestureAbortController = new AbortController();
const eventOptions = {
passive: true,
...options,
signal: gestureAbortController.signal
};
const cancel = () => gestureAbortController.abort();
return [elements, eventOptions, cancel];
}
function isValidHover(event) {
return !(event.pointerType === "touch" || isDragActive());
}
function hover(elementOrSelector, onHoverStart, options = {}) {
const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
const onPointerEnter = (enterEvent) => {
if (!isValidHover(enterEvent))
return;
const { target } = enterEvent;
const onHoverEnd = onHoverStart(target, enterEvent);
if (typeof onHoverEnd !== "function" || !target)
return;
const onPointerLeave = (leaveEvent) => {
if (!isValidHover(leaveEvent))
return;
onHoverEnd(leaveEvent);
target.removeEventListener("pointerleave", onPointerLeave);
};
target.addEventListener("pointerleave", onPointerLeave, eventOptions);
};
elements.forEach((element) => {
element.addEventListener("pointerenter", onPointerEnter, eventOptions);
});
return cancel;
}
const isNodeOrChild = (parent, child) => {
if (!child) {
return false;
} else if (parent === child) {
return true;
} else {
return isNodeOrChild(parent, child.parentElement);
}
};
const isPrimaryPointer = (event) => {
if (event.pointerType === "mouse") {
return typeof event.button !== "number" || event.button <= 0;
} else {
return event.isPrimary !== false;
}
};
const focusableElements = new Set([
"BUTTON",
"INPUT",
"SELECT",
"TEXTAREA",
"A"
]);
function isElementKeyboardAccessible(element) {
return focusableElements.has(element.tagName) || element.tabIndex !== -1;
}
const isPressing = new WeakSet();
function filterEvents(callback) {
return (event) => {
if (event.key !== "Enter")
return;
callback(event);
};
}
function firePointerEvent(target, type) {
target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
}
const enableKeyboardPress = (focusEvent, eventOptions) => {
const element = focusEvent.currentTarget;
if (!element)
return;
const handleKeydown = filterEvents(() => {
if (isPressing.has(element))
return;
firePointerEvent(element, "down");
const handleKeyup = filterEvents(() => {
firePointerEvent(element, "up");
});
const handleBlur = () => firePointerEvent(element, "cancel");
element.addEventListener("keyup", handleKeyup, eventOptions);
element.addEventListener("blur", handleBlur, eventOptions);
});
element.addEventListener("keydown", handleKeydown, eventOptions);
element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
};
function isValidPressEvent(event) {
return isPrimaryPointer(event) && !isDragActive();
}
function press(targetOrSelector, onPressStart, options = {}) {
const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
const startPress = (startEvent) => {
const target = startEvent.currentTarget;
if (!isValidPressEvent(startEvent))
return;
isPressing.add(target);
const onPressEnd = onPressStart(target, startEvent);
const onPointerEnd = (endEvent, success) => {
window.removeEventListener("pointerup", onPointerUp);
window.removeEventListener("pointercancel", onPointerCancel);
if (isPressing.has(target)) {
isPressing.delete(target);
}
if (!isValidPressEvent(endEvent)) {
return;
}
if (typeof onPressEnd === "function") {
onPressEnd(endEvent, { success });
}
};
const onPointerUp = (upEvent) => {
onPointerEnd(upEvent, target === window || target === document || options.useGlobalTarget || isNodeOrChild(target, upEvent.target));
};
const onPointerCancel = (cancelEvent) => {
onPointerEnd(cancelEvent, false);
};
window.addEventListener("pointerup", onPointerUp, eventOptions);
window.addEventListener("pointercancel", onPointerCancel, eventOptions);
};
targets.forEach((target) => {
const pointerDownTarget = options.useGlobalTarget ? window : target;
pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
if (isHTMLElement$1(target)) {
target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
if (!isElementKeyboardAccessible(target) && !target.hasAttribute("tabindex")) {
target.tabIndex = 0;
}
}
});
return cancelEvents;
}
function isSVGElement(element) {
return isObject$1(element) && "ownerSVGElement" in element;
}
function isSVGSVGElement(element) {
return isSVGElement(element) && element.tagName === "svg";
}
const isMotionValue = (value) => Boolean(value && value.getVelocity);
const valueTypes = [...dimensionValueTypes, color, complex];
const findValueType = (v) => valueTypes.find(testValueType(v));
const MotionConfigContext = React.createContext({
transformPagePoint: (p) => p,
isStatic: false,
reducedMotion: "never"
});
function setRef(ref, value) {
if (typeof ref === "function") {
return ref(value);
} else if (ref !== null && ref !== void 0) {
ref.current = value;
}
}
function composeRefs(...refs) {
return (node) => {
let hasCleanup = false;
const cleanups = refs.map((ref) => {
const cleanup = setRef(ref, node);
if (!hasCleanup && typeof cleanup === "function") {
hasCleanup = true;
}
return cleanup;
});
if (hasCleanup) {
return () => {
for (let i2 = 0; i2 < cleanups.length; i2++) {
const cleanup = cleanups[i2];
if (typeof cleanup === "function") {
cleanup();
} else {
setRef(refs[i2], null);
}
}
};
}
};
}
function useComposedRefs(...refs) {
return React__namespace.useCallback(composeRefs(...refs), refs);
}
class PopChildMeasure extends React__namespace.Component {
getSnapshotBeforeUpdate(prevProps) {
const element = this.props.childRef.current;
if (element && prevProps.isPresent && !this.props.isPresent) {
const parent = element.offsetParent;
const parentWidth = isHTMLElement$1(parent) ? parent.offsetWidth || 0 : 0;
const size2 = this.props.sizeRef.current;
size2.height = element.offsetHeight || 0;
size2.width = element.offsetWidth || 0;
size2.top = element.offsetTop;
size2.left = element.offsetLeft;
size2.right = parentWidth - size2.width - size2.left;
}
return null;
}
componentDidUpdate() {
}
render() {
return this.props.children;
}
}
function PopChild({ children, isPresent, anchorX, root }) {
const id2 = React.useId();
const ref = React.useRef(null);
const size2 = React.useRef({
width: 0,
height: 0,
top: 0,
left: 0,
right: 0
});
const { nonce } = React.useContext(MotionConfigContext);
const composedRef = useComposedRefs(ref, children?.ref);
React.useInsertionEffect(() => {
const { width, height, top, left, right } = size2.current;
if (isPresent || !ref.current || !width || !height)
return;
const x2 = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
ref.current.dataset.motionPopId = id2;
const style2 = document.createElement("style");
if (nonce)
style2.nonce = nonce;
const parent = root ?? document.head;
parent.appendChild(style2);
if (style2.sheet) {
style2.sheet.insertRule(`
[data-motion-pop-id="${id2}"] {
position: absolute !important;
width: ${width}px !important;
height: ${height}px !important;
${x2}px !important;
top: ${top}px !important;
}
`);
}
return () => {
if (parent.contains(style2)) {
parent.removeChild(style2);
}
};
}, [isPresent]);
return jsxRuntimeExports.jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size2, children: React__namespace.cloneElement(children, { ref: composedRef }) });
}
const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
const presenceChildren = useConstant(newChildrenMap);
const id2 = React.useId();
let isReusedContext = true;
let context = React.useMemo(() => {
isReusedContext = false;
return {
id: id2,
initial,
isPresent,
custom,
onExitComplete: (childId) => {
presenceChildren.set(childId, true);
for (const isComplete of presenceChildren.values()) {
if (!isComplete)
return;
}
onExitComplete && onExitComplete();
},
register: (childId) => {
presenceChildren.set(childId, false);
return () => presenceChildren.delete(childId);
}
};
}, [isPresent, presenceChildren, onExitComplete]);
if (presenceAffectsLayout && isReusedContext) {
context = { ...context };
}
React.useMemo(() => {
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
}, [isPresent]);
React__namespace.useEffect(() => {
!isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
}, [isPresent]);
if (mode === "popLayout") {
children = jsxRuntimeExports.jsx(PopChild, { isPresent, anchorX, root, children });
}
return jsxRuntimeExports.jsx(PresenceContext.Provider, { value: context, children });
};
function newChildrenMap() {
return new Map();
}
function usePresence(subscribe = true) {
const context = React.useContext(PresenceContext);
if (context === null)
return [true, null];
const { isPresent, onExitComplete, register } = context;
const id2 = React.useId();
React.useEffect(() => {
if (subscribe) {
return register(id2);
}
}, [subscribe]);
const safeToRemove = React.useCallback(() => subscribe && onExitComplete && onExitComplete(id2), [id2, onExitComplete, subscribe]);
return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
}
const getChildKey = (child) => child.key || "";
function onlyElements(children) {
const filtered = [];
React.Children.forEach(children, (child) => {
if (React.isValidElement(child))
filtered.push(child);
});
return filtered;
}
const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", root }) => {
const [isParentPresent, safeToRemove] = usePresence(propagate);
const presentChildren = React.useMemo(() => onlyElements(children), [children]);
const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
const isInitialRender = React.useRef(true);
const pendingPresentChildren = React.useRef(presentChildren);
const exitComplete = useConstant(() => new Map());
const [diffedChildren, setDiffedChildren] = React.useState(presentChildren);
const [renderedChildren, setRenderedChildren] = React.useState(presentChildren);
useIsomorphicLayoutEffect$1(() => {
isInitialRender.current = false;
pendingPresentChildren.current = presentChildren;
for (let i2 = 0; i2 < renderedChildren.length; i2++) {
const key = getChildKey(renderedChildren[i2]);
if (!presentKeys.includes(key)) {
if (exitComplete.get(key) !== true) {
exitComplete.set(key, false);
}
} else {
exitComplete.delete(key);
}
}
}, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
const exitingChildren = [];
if (presentChildren !== diffedChildren) {
let nextChildren = [...presentChildren];
for (let i2 = 0; i2 < renderedChildren.length; i2++) {
const child = renderedChildren[i2];
const key = getChildKey(child);
if (!presentKeys.includes(key)) {
nextChildren.splice(i2, 0, child);
exitingChildren.push(child);
}
}
if (mode === "wait" && exitingChildren.length) {
nextChildren = exitingChildren;
}
setRenderedChildren(onlyElements(nextChildren));
setDiffedChildren(presentChildren);
return null;
}
const { forceRender } = React.useContext(LayoutGroupContext);
return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: renderedChildren.map((child) => {
const key = getChildKey(child);
const isPresent = propagate && !isParentPresent ? false : presentChildren === renderedChildren || presentKeys.includes(key);
const onExit = () => {
if (exitComplete.has(key)) {
exitComplete.set(key, true);
} else {
return;
}
let isEveryExitComplete = true;
exitComplete.forEach((isExitComplete) => {
if (!isExitComplete)
isEveryExitComplete = false;
});
if (isEveryExitComplete) {
forceRender?.();
setRenderedChildren(pendingPresentChildren.current);
propagate && safeToRemove?.();
onExitComplete && onExitComplete();
}
};
return jsxRuntimeExports.jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : false, custom, presenceAffectsLayout, mode, root, onExitComplete: isPresent ? void 0 : onExit, anchorX, children: child }, key);
}) });
};
const LazyContext = React.createContext({ strict: false });
const featureProps = {
animation: [
"animate",
"variants",
"whileHover",
"whileTap",
"exit",
"whileInView",
"whileFocus",
"whileDrag"
],
exit: ["exit"],
drag: ["drag", "dragControls"],
focus: ["whileFocus"],
hover: ["whileHover", "onHoverStart", "onHoverEnd"],
tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
layout: ["layout", "layoutId"]
};
const featureDefinitions = {};
for (const key in featureProps) {
featureDefinitions[key] = {
isEnabled: (props) => featureProps[key].some((name) => !!props[name])
};
}
function loadFeatures(features) {
for (const key in features) {
featureDefinitions[key] = {
...featureDefinitions[key],
...features[key]
};
}
}
const validMotionProps = new Set([
"animate",
"exit",
"variants",
"initial",
"style",
"values",
"variants",
"transition",
"transformTemplate",
"custom",
"inherit",
"onBeforeLayoutMeasure",
"onAnimationStart",
"onAnimationComplete",
"onUpdate",
"onDragStart",
"onDrag",
"onDragEnd",
"onMeasureDragConstraints",
"onDirectionLock",
"onDragTransitionEnd",
"_dragX",
"_dragY",
"onHoverStart",
"onHoverEnd",
"onViewportEnter",
"onViewportLeave",
"globalTapTarget",
"ignoreStrict",
"viewport"
]);
function isValidMotionProp(key) {
return key.startsWith("while") || key.startsWith("drag") && key !== "draggable" || key.startsWith("layout") || key.startsWith("onTap") || key.startsWith("onPan") || key.startsWith("onLayout") || validMotionProps.has(key);
}
let shouldForward = (key) => !isValidMotionProp(key);
function loadExternalIsValidProp(isValidProp) {
if (typeof isValidProp !== "function")
return;
shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
}
try {
loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
} catch {
}
function filterProps(props, isDom, forwardMotionProps) {
const filteredProps = {};
for (const key in props) {
if (key === "values" && typeof props.values === "object")
continue;
if (shouldForward(key) || forwardMotionProps === true && isValidMotionProp(key) || !isDom && !isValidMotionProp(key) ||
props["draggable"] && key.startsWith("onDrag")) {
filteredProps[key] = props[key];
}
}
return filteredProps;
}
const MotionContext = React.createContext({});
function isAnimationControls(v) {
return v !== null && typeof v === "object" && typeof v.start === "function";
}
function isVariantLabel(v) {
return typeof v === "string" || Array.isArray(v);
}
const variantPriorityOrder = [
"animate",
"whileInView",
"whileFocus",
"whileHover",
"whileTap",
"whileDrag",
"exit"
];
const variantProps = ["initial", ...variantPriorityOrder];
function isControllingVariants(props) {
return isAnimationControls(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
}
function isVariantNode(props) {
return Boolean(isControllingVariants(props) || props.variants);
}
function getCurrentTreeVariants(props, context) {
if (isControllingVariants(props)) {
const { initial, animate } = props;
return {
initial: initial === false || isVariantLabel(initial) ? initial : void 0,
animate: isVariantLabel(animate) ? animate : void 0
};
}
return props.inherit !== false ? context : {};
}
function useCreateMotionContext(props) {
const { initial, animate } = getCurrentTreeVariants(props, React.useContext(MotionContext));
return React.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
}
function variantLabelsAsDependency(prop) {
return Array.isArray(prop) ? prop.join(" ") : prop;
}
const scaleCorrectors = {};
function addScaleCorrector(correctors) {
for (const key in correctors) {
scaleCorrectors[key] = correctors[key];
if (isCSSVariableName(key)) {
scaleCorrectors[key].isCSSVariable = true;
}
}
}
function isForcedMotionValue(key, { layout: layout2, layoutId }) {
return transformProps.has(key) || key.startsWith("origin") || (layout2 || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
}
const translateAlias = {
x: "translateX",
y: "translateY",
z: "translateZ",
transformPerspective: "perspective"
};
const numTransforms = transformPropOrder.length;
function buildTransform(latestValues, transform, transformTemplate) {
let transformString = "";
let transformIsDefault = true;
for (let i2 = 0; i2 < numTransforms; i2++) {
const key = transformPropOrder[i2];
const value = latestValues[key];
if (value === void 0)
continue;
let valueIsDefault = true;
if (typeof value === "number") {
valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
} else {
valueIsDefault = parseFloat(value) === 0;
}
if (!valueIsDefault || transformTemplate) {
const valueAsType = getValueAsType(value, numberValueTypes[key]);
if (!valueIsDefault) {
transformIsDefault = false;
const transformName = translateAlias[key] || key;
transformString += `${transformName}(${valueAsType}) `;
}
if (transformTemplate) {
transform[key] = valueAsType;
}
}
}
transformString = transformString.trim();
if (transformTemplate) {
transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
} else if (transformIsDefault) {
transformString = "none";
}
return transformString;
}
function buildHTMLStyles(state, latestValues, transformTemplate) {
const { style: style2, vars, transformOrigin: transformOrigin2 } = state;
let hasTransform2 = false;
let hasTransformOrigin = false;
for (const key in latestValues) {
const value = latestValues[key];
if (transformProps.has(key)) {
hasTransform2 = true;
continue;
} else if (isCSSVariableName(key)) {
vars[key] = value;
continue;
} else {
const valueAsType = getValueAsType(value, numberValueTypes[key]);
if (key.startsWith("origin")) {
hasTransformOrigin = true;
transformOrigin2[key] = valueAsType;
} else {
style2[key] = valueAsType;
}
}
}
if (!latestValues.transform) {
if (hasTransform2 || transformTemplate) {
style2.transform = buildTransform(latestValues, state.transform, transformTemplate);
} else if (style2.transform) {
style2.transform = "none";
}
}
if (hasTransformOrigin) {
const { originX = "50%", originY = "50%", originZ = 0 } = transformOrigin2;
style2.transformOrigin = `${originX} ${originY} ${originZ}`;
}
}
const createHtmlRenderState = () => ({
style: {},
transform: {},
transformOrigin: {},
vars: {}
});
function copyRawValuesOnly(target, source, props) {
for (const key in source) {
if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
target[key] = source[key];
}
}
}
function useInitialMotionValues({ transformTemplate }, visualState) {
return React.useMemo(() => {
const state = createHtmlRenderState();
buildHTMLStyles(state, visualState, transformTemplate);
return Object.assign({}, state.vars, state.style);
}, [visualState]);
}
function useStyle(props, visualState) {
const styleProp = props.style || {};
const style2 = {};
copyRawValuesOnly(style2, styleProp, props);
Object.assign(style2, useInitialMotionValues(props, visualState));
return style2;
}
function useHTMLProps(props, visualState) {
const htmlProps = {};
const style2 = useStyle(props, visualState);
if (props.drag && props.dragListener !== false) {
htmlProps.draggable = false;
style2.userSelect = style2.WebkitUserSelect = style2.WebkitTouchCallout = "none";
style2.touchAction = props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`;
}
if (props.tabIndex === void 0 && (props.onTap || props.onTapStart || props.whileTap)) {
htmlProps.tabIndex = 0;
}
htmlProps.style = style2;
return htmlProps;
}
const dashKeys = {
offset: "stroke-dashoffset",
array: "stroke-dasharray"
};
const camelKeys = {
offset: "strokeDashoffset",
array: "strokeDasharray"
};
function buildSVGPath(attrs, length, spacing = 1, offset2 = 0, useDashCase = true) {
attrs.pathLength = 1;
const keys = useDashCase ? dashKeys : camelKeys;
attrs[keys.offset] = px.transform(-offset2);
const pathLength = px.transform(length);
const pathSpacing = px.transform(spacing);
attrs[keys.array] = `${pathLength} ${pathSpacing}`;
}
function buildSVGAttrs(state, {
attrX,
attrY,
attrScale,
pathLength,
pathSpacing = 1,
pathOffset = 0,
...latest
}, isSVGTag2, transformTemplate, styleProp) {
buildHTMLStyles(state, latest, transformTemplate);
if (isSVGTag2) {
if (state.style.viewBox) {
state.attrs.viewBox = state.style.viewBox;
}
return;
}
state.attrs = state.style;
state.style = {};
const { attrs, style: style2 } = state;
if (attrs.transform) {
style2.transform = attrs.transform;
delete attrs.transform;
}
if (style2.transform || attrs.transformOrigin) {
style2.transformOrigin = attrs.transformOrigin ?? "50% 50%";
delete attrs.transformOrigin;
}
if (style2.transform) {
style2.transformBox = styleProp?.transformBox ?? "fill-box";
delete attrs.transformBox;
}
if (attrX !== void 0)
attrs.x = attrX;
if (attrY !== void 0)
attrs.y = attrY;
if (attrScale !== void 0)
attrs.scale = attrScale;
if (pathLength !== void 0) {
buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
}
}
const createSvgRenderState = () => ({
...createHtmlRenderState(),
attrs: {}
});
const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
function useSVGProps(props, visualState, _isStatic, Component2) {
const visualProps = React.useMemo(() => {
const state = createSvgRenderState();
buildSVGAttrs(state, visualState, isSVGTag(Component2), props.transformTemplate, props.style);
return {
...state.attrs,
style: { ...state.style }
};
}, [visualState]);
if (props.style) {
const rawStyles = {};
copyRawValuesOnly(rawStyles, props.style, props);
visualProps.style = { ...rawStyles, ...visualProps.style };
}
return visualProps;
}
const lowercaseSVGElements = [
"animate",
"circle",
"defs",
"desc",
"ellipse",
"g",
"image",
"line",
"filter",
"marker",
"mask",
"metadata",
"path",
"pattern",
"polygon",
"polyline",
"rect",
"stop",
"switch",
"symbol",
"svg",
"text",
"tspan",
"use",
"view"
];
function isSVGComponent(Component2) {
if (
typeof Component2 !== "string" ||
Component2.includes("-")
) {
return false;
} else if (
lowercaseSVGElements.indexOf(Component2) > -1 ||
/[A-Z]/u.test(Component2)
) {
return true;
}
return false;
}
function useRender(Component2, props, ref, { latestValues }, isStatic, forwardMotionProps = false) {
const useVisualProps = isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
const visualProps = useVisualProps(props, latestValues, isStatic, Component2);
const filteredProps = filterProps(props, typeof Component2 === "string", forwardMotionProps);
const elementProps = Component2 !== React.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
const { children } = props;
const renderedChildren = React.useMemo(() => isMotionValue(children) ? children.get() : children, [children]);
return React.createElement(Component2, {
...elementProps,
children: renderedChildren
});
}
function getValueState(visualElement) {
const state = [{}, {}];
visualElement?.values.forEach((value, key) => {
state[0][key] = value.get();
state[1][key] = value.getVelocity();
});
return state;
}
function resolveVariantFromProps(props, definition, custom, visualElement) {
if (typeof definition === "function") {
const [current, velocity] = getValueState(visualElement);
definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
}
if (typeof definition === "string") {
definition = props.variants && props.variants[definition];
}
if (typeof definition === "function") {
const [current, velocity] = getValueState(visualElement);
definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
}
return definition;
}
function resolveMotionValue(value) {
return isMotionValue(value) ? value.get() : value;
}
function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState }, props, context, presenceContext) {
const state = {
latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps2),
renderState: createRenderState()
};
return state;
}
function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
const values = {};
const motionValues = scrapeMotionValues(props, {});
for (const key in motionValues) {
values[key] = resolveMotionValue(motionValues[key]);
}
let { initial, animate } = props;
const isControllingVariants$1 = isControllingVariants(props);
const isVariantNode$1 = isVariantNode(props);
if (context && isVariantNode$1 && !isControllingVariants$1 && props.inherit !== false) {
if (initial === void 0)
initial = context.initial;
if (animate === void 0)
animate = context.animate;
}
let isInitialAnimationBlocked = presenceContext ? presenceContext.initial === false : false;
isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
const variantToSet = isInitialAnimationBlocked ? animate : initial;
if (variantToSet && typeof variantToSet !== "boolean" && !isAnimationControls(variantToSet)) {
const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
for (let i2 = 0; i2 < list.length; i2++) {
const resolved = resolveVariantFromProps(props, list[i2]);
if (resolved) {
const { transitionEnd, transition, ...target } = resolved;
for (const key in target) {
let valueTarget = target[key];
if (Array.isArray(valueTarget)) {
const index2 = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
valueTarget = valueTarget[index2];
}
if (valueTarget !== null) {
values[key] = valueTarget;
}
}
for (const key in transitionEnd) {
values[key] = transitionEnd[key];
}
}
}
}
return values;
}
const makeUseVisualState = (config2) => (props, isStatic) => {
const context = React.useContext(MotionContext);
const presenceContext = React.useContext(PresenceContext);
const make = () => makeState(config2, props, context, presenceContext);
return isStatic ? make() : useConstant(make);
};
function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
const { style: style2 } = props;
const newValues = {};
for (const key in style2) {
if (isMotionValue(style2[key]) || prevProps.style && isMotionValue(prevProps.style[key]) || isForcedMotionValue(key, props) || visualElement?.getValue(key)?.liveStyle !== void 0) {
newValues[key] = style2[key];
}
}
return newValues;
}
const useHTMLVisualState = makeUseVisualState({
scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
createRenderState: createHtmlRenderState
});
function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
for (const key in props) {
if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {
const targetKey = transformPropOrder.indexOf(key) !== -1 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) : key;
newValues[targetKey] = props[key];
}
}
return newValues;
}
const useSVGVisualState = makeUseVisualState({
scrapeMotionValuesFromProps,
createRenderState: createSvgRenderState
});
const motionComponentSymbol = Symbol.for("motionComponentSymbol");
function isRefObject(ref) {
return ref && typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
}
function useMotionRef(visualState, visualElement, externalRef) {
return React.useCallback(
(instance) => {
if (instance) {
visualState.onMount && visualState.onMount(instance);
}
if (visualElement) {
if (instance) {
visualElement.mount(instance);
} else {
visualElement.unmount();
}
}
if (externalRef) {
if (typeof externalRef === "function") {
externalRef(instance);
} else if (isRefObject(externalRef)) {
externalRef.current = instance;
}
}
},
[visualElement]
);
}
const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
const optimizedAppearDataId = "framerAppearId";
const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
const SwitchLayoutGroupContext = React.createContext({});
function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
const { visualElement: parent } = React.useContext(MotionContext);
const lazyContext = React.useContext(LazyContext);
const presenceContext = React.useContext(PresenceContext);
const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
const visualElementRef = React.useRef(null);
createVisualElement = createVisualElement || lazyContext.renderer;
if (!visualElementRef.current && createVisualElement) {
visualElementRef.current = createVisualElement(Component2, {
visualState,
parent,
props,
presenceContext,
blockInitialAnimation: presenceContext ? presenceContext.initial === false : false,
reducedMotionConfig
});
}
const visualElement = visualElementRef.current;
const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
if (visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg")) {
createProjectionNode$1(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
}
const isMounted = React.useRef(false);
React.useInsertionEffect(() => {
if (visualElement && isMounted.current) {
visualElement.update(props, presenceContext);
}
});
const optimisedAppearId = props[optimizedAppearDataAttribute];
const wantsHandoff = React.useRef(Boolean(optimisedAppearId) && !window.MotionHandoffIsComplete?.(optimisedAppearId) && window.MotionHasOptimisedAnimation?.(optimisedAppearId));
useIsomorphicLayoutEffect$1(() => {
if (!visualElement)
return;
isMounted.current = true;
window.MotionIsMounted = true;
visualElement.updateFeatures();
visualElement.scheduleRenderMicrotask();
if (wantsHandoff.current && visualElement.animationState) {
visualElement.animationState.animateChanges();
}
});
React.useEffect(() => {
if (!visualElement)
return;
if (!wantsHandoff.current && visualElement.animationState) {
visualElement.animationState.animateChanges();
}
if (wantsHandoff.current) {
queueMicrotask(() => {
window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
});
wantsHandoff.current = false;
}
visualElement.enteringChildren = void 0;
});
return visualElement;
}
function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, layoutCrossfade } = props;
visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent));
visualElement.projection.setOptions({
layoutId,
layout: layout2,
alwaysMeasureLayout: Boolean(drag2) || dragConstraints && isRefObject(dragConstraints),
visualElement,
animationType: typeof layout2 === "string" ? layout2 : "both",
initialPromotionConfig,
crossfade: layoutCrossfade,
layoutScroll,
layoutRoot
});
}
function getClosestProjectingNode(visualElement) {
if (!visualElement)
return void 0;
return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
}
function createMotionComponent(Component2, { forwardMotionProps = false } = {}, preloadedFeatures, createVisualElement) {
preloadedFeatures && loadFeatures(preloadedFeatures);
const useVisualState = isSVGComponent(Component2) ? useSVGVisualState : useHTMLVisualState;
function MotionDOMComponent(props, externalRef) {
let MeasureLayout2;
const configAndProps = {
...React.useContext(MotionConfigContext),
...props,
layoutId: useLayoutId(props)
};
const { isStatic } = configAndProps;
const context = useCreateMotionContext(props);
const visualState = useVisualState(props, isStatic);
if (!isStatic && isBrowser) {
useStrictMode();
const layoutProjection = getProjectionFunctionality(configAndProps);
MeasureLayout2 = layoutProjection.MeasureLayout;
context.visualElement = useVisualElement(Component2, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
}
return jsxRuntimeExports.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsxRuntimeExports.jsx(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] });
}
MotionDOMComponent.displayName = `motion.${typeof Component2 === "string" ? Component2 : `create(${Component2.displayName ?? Component2.name ?? ""})`}`;
const ForwardRefMotionComponent = React.forwardRef(MotionDOMComponent);
ForwardRefMotionComponent[motionComponentSymbol] = Component2;
return ForwardRefMotionComponent;
}
function useLayoutId({ layoutId }) {
const layoutGroupId = React.useContext(LayoutGroupContext).id;
return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
}
function useStrictMode(configAndProps, preloadedFeatures) {
React.useContext(LazyContext).strict;
}
function getProjectionFunctionality(props) {
const { drag: drag2, layout: layout2 } = featureDefinitions;
if (!drag2 && !layout2)
return {};
const combined = { ...drag2, ...layout2 };
return {
MeasureLayout: drag2?.isEnabled(props) || layout2?.isEnabled(props) ? combined.MeasureLayout : void 0,
ProjectionNode: combined.ProjectionNode
};
}
function createMotionProxy(preloadedFeatures, createVisualElement) {
if (typeof Proxy === "undefined") {
return createMotionComponent;
}
const componentCache = new Map();
const factory = (Component2, options) => {
return createMotionComponent(Component2, options, preloadedFeatures, createVisualElement);
};
const deprecatedFactoryFunction = (Component2, options) => {
return factory(Component2, options);
};
return new Proxy(deprecatedFactoryFunction, {
get: (_target, key) => {
if (key === "create")
return factory;
if (!componentCache.has(key)) {
componentCache.set(key, createMotionComponent(key, void 0, preloadedFeatures, createVisualElement));
}
return componentCache.get(key);
}
});
}
function convertBoundingBoxToBox({ top, left, right, bottom }) {
return {
x: { min: left, max: right },
y: { min: top, max: bottom }
};
}
function convertBoxToBoundingBox({ x: x2, y }) {
return { top: y.min, right: x2.max, bottom: y.max, left: x2.min };
}
function transformBoxPoints(point, transformPoint2) {
if (!transformPoint2)
return point;
const topLeft = transformPoint2({ x: point.left, y: point.top });
const bottomRight = transformPoint2({ x: point.right, y: point.bottom });
return {
top: topLeft.y,
left: topLeft.x,
bottom: bottomRight.y,
right: bottomRight.x
};
}
function isIdentityScale(scale2) {
return scale2 === void 0 || scale2 === 1;
}
function hasScale({ scale: scale2, scaleX: scaleX2, scaleY: scaleY2 }) {
return !isIdentityScale(scale2) || !isIdentityScale(scaleX2) || !isIdentityScale(scaleY2);
}
function hasTransform(values) {
return hasScale(values) || has2DTranslate(values) || values.z || values.rotate || values.rotateX || values.rotateY || values.skewX || values.skewY;
}
function has2DTranslate(values) {
return is2DTranslate(values.x) || is2DTranslate(values.y);
}
function is2DTranslate(value) {
return value && value !== "0%";
}
function scalePoint(point, scale2, originPoint) {
const distanceFromOrigin = point - originPoint;
const scaled = scale2 * distanceFromOrigin;
return originPoint + scaled;
}
function applyPointDelta(point, translate, scale2, originPoint, boxScale) {
if (boxScale !== void 0) {
point = scalePoint(point, boxScale, originPoint);
}
return scalePoint(point, scale2, originPoint) + translate;
}
function applyAxisDelta(axis, translate = 0, scale2 = 1, originPoint, boxScale) {
axis.min = applyPointDelta(axis.min, translate, scale2, originPoint, boxScale);
axis.max = applyPointDelta(axis.max, translate, scale2, originPoint, boxScale);
}
function applyBoxDelta(box, { x: x2, y }) {
applyAxisDelta(box.x, x2.translate, x2.scale, x2.originPoint);
applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
}
const TREE_SCALE_SNAP_MIN = 0.999999999999;
const TREE_SCALE_SNAP_MAX = 1.0000000000001;
function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
const treeLength = treePath.length;
if (!treeLength)
return;
treeScale.x = treeScale.y = 1;
let node;
let delta;
for (let i2 = 0; i2 < treeLength; i2++) {
node = treePath[i2];
delta = node.projectionDelta;
const { visualElement } = node.options;
if (visualElement && visualElement.props.style && visualElement.props.style.display === "contents") {
continue;
}
if (isSharedTransition && node.options.layoutScroll && node.scroll && node !== node.root) {
transformBox(box, {
x: -node.scroll.offset.x,
y: -node.scroll.offset.y
});
}
if (delta) {
treeScale.x *= delta.x.scale;
treeScale.y *= delta.y.scale;
applyBoxDelta(box, delta);
}
if (isSharedTransition && hasTransform(node.latestValues)) {
transformBox(box, node.latestValues);
}
}
if (treeScale.x < TREE_SCALE_SNAP_MAX && treeScale.x > TREE_SCALE_SNAP_MIN) {
treeScale.x = 1;
}
if (treeScale.y < TREE_SCALE_SNAP_MAX && treeScale.y > TREE_SCALE_SNAP_MIN) {
treeScale.y = 1;
}
}
function translateAxis(axis, distance2) {
axis.min = axis.min + distance2;
axis.max = axis.max + distance2;
}
function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {
const originPoint = mixNumber$1(axis.min, axis.max, axisOrigin);
applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);
}
function transformBox(box, transform) {
transformAxis(box.x, transform.x, transform.scaleX, transform.scale, transform.originX);
transformAxis(box.y, transform.y, transform.scaleY, transform.scale, transform.originY);
}
function measureViewportBox(instance, transformPoint2) {
return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint2));
}
function measurePageBox(element, rootProjectionNode2, transformPagePoint) {
const viewportBox = measureViewportBox(element, transformPagePoint);
const { scroll } = rootProjectionNode2;
if (scroll) {
translateAxis(viewportBox.x, scroll.offset.x);
translateAxis(viewportBox.y, scroll.offset.y);
}
return viewportBox;
}
const createAxisDelta = () => ({
translate: 0,
scale: 1,
origin: 0,
originPoint: 0
});
const createDelta = () => ({
x: createAxisDelta(),
y: createAxisDelta()
});
const createAxis = () => ({ min: 0, max: 0 });
const createBox = () => ({
x: createAxis(),
y: createAxis()
});
const prefersReducedMotion = { current: null };
const hasReducedMotionListener = { current: false };
function initPrefersReducedMotion() {
hasReducedMotionListener.current = true;
if (!isBrowser)
return;
if (window.matchMedia) {
const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
const setReducedMotionPreferences = () => prefersReducedMotion.current = motionMediaQuery.matches;
motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
setReducedMotionPreferences();
} else {
prefersReducedMotion.current = false;
}
}
const visualElementStore = new WeakMap();
function updateMotionValuesFromProps(element, next, prev) {
for (const key in next) {
const nextValue = next[key];
const prevValue = prev[key];
if (isMotionValue(nextValue)) {
element.addValue(key, nextValue);
} else if (isMotionValue(prevValue)) {
element.addValue(key, motionValue(nextValue, { owner: element }));
} else if (prevValue !== nextValue) {
if (element.hasValue(key)) {
const existingValue = element.getValue(key);
if (existingValue.liveStyle === true) {
existingValue.jump(nextValue);
} else if (!existingValue.hasAnimated) {
existingValue.set(nextValue);
}
} else {
const latestValue = element.getStaticValue(key);
element.addValue(key, motionValue(latestValue !== void 0 ? latestValue : nextValue, { owner: element }));
}
}
}
for (const key in prev) {
if (next[key] === void 0)
element.removeValue(key);
}
return next;
}
const propEventHandlers = [
"AnimationStart",
"AnimationComplete",
"Update",
"BeforeLayoutMeasure",
"LayoutMeasure",
"LayoutAnimationStart",
"LayoutAnimationComplete"
];
class VisualElement {
scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {
return {};
}
constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
this.current = null;
this.children = new Set();
this.isVariantNode = false;
this.isControllingVariants = false;
this.shouldReduceMotion = null;
this.values = new Map();
this.KeyframeResolver = KeyframeResolver;
this.features = {};
this.valueSubscriptions = new Map();
this.prevMotionValues = {};
this.events = {};
this.propEventSubscriptions = {};
this.notifyUpdate = () => this.notify("Update", this.latestValues);
this.render = () => {
if (!this.current)
return;
this.triggerBuild();
this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
};
this.renderScheduledAt = 0;
this.scheduleRender = () => {
const now2 = time.now();
if (this.renderScheduledAt < now2) {
this.renderScheduledAt = now2;
frame.render(this.render, false, true);
}
};
const { latestValues, renderState } = visualState;
this.latestValues = latestValues;
this.baseTarget = { ...latestValues };
this.initialValues = props.initial ? { ...latestValues } : {};
this.renderState = renderState;
this.parent = parent;
this.props = props;
this.presenceContext = presenceContext;
this.depth = parent ? parent.depth + 1 : 0;
this.reducedMotionConfig = reducedMotionConfig;
this.options = options;
this.blockInitialAnimation = Boolean(blockInitialAnimation);
this.isControllingVariants = isControllingVariants(props);
this.isVariantNode = isVariantNode(props);
if (this.isVariantNode) {
this.variantChildren = new Set();
}
this.manuallyAnimateOnMount = Boolean(parent && parent.current);
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
for (const key in initialMotionValues) {
const value = initialMotionValues[key];
if (latestValues[key] !== void 0 && isMotionValue(value)) {
value.set(latestValues[key]);
}
}
}
mount(instance) {
this.current = instance;
visualElementStore.set(instance, this);
if (this.projection && !this.projection.instance) {
this.projection.mount(instance);
}
if (this.parent && this.isVariantNode && !this.isControllingVariants) {
this.removeFromVariantTree = this.parent.addVariantChild(this);
}
this.values.forEach((value, key) => this.bindToMotionValue(key, value));
if (!hasReducedMotionListener.current) {
initPrefersReducedMotion();
}
this.shouldReduceMotion = this.reducedMotionConfig === "never" ? false : this.reducedMotionConfig === "always" ? true : prefersReducedMotion.current;
this.parent?.addChild(this);
this.update(this.props, this.presenceContext);
}
unmount() {
this.projection && this.projection.unmount();
cancelFrame(this.notifyUpdate);
cancelFrame(this.render);
this.valueSubscriptions.forEach((remove) => remove());
this.valueSubscriptions.clear();
this.removeFromVariantTree && this.removeFromVariantTree();
this.parent?.removeChild(this);
for (const key in this.events) {
this.events[key].clear();
}
for (const key in this.features) {
const feature = this.features[key];
if (feature) {
feature.unmount();
feature.isMounted = false;
}
}
this.current = null;
}
addChild(child) {
this.children.add(child);
this.enteringChildren ?? (this.enteringChildren = new Set());
this.enteringChildren.add(child);
}
removeChild(child) {
this.children.delete(child);
this.enteringChildren && this.enteringChildren.delete(child);
}
bindToMotionValue(key, value) {
if (this.valueSubscriptions.has(key)) {
this.valueSubscriptions.get(key)();
}
const valueIsTransform = transformProps.has(key);
if (valueIsTransform && this.onBindTransform) {
this.onBindTransform();
}
const removeOnChange = value.on("change", (latestValue) => {
this.latestValues[key] = latestValue;
this.props.onUpdate && frame.preRender(this.notifyUpdate);
if (valueIsTransform && this.projection) {
this.projection.isTransformDirty = true;
}
this.scheduleRender();
});
let removeSyncCheck;
if (window.MotionCheckAppearSync) {
removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
}
this.valueSubscriptions.set(key, () => {
removeOnChange();
if (removeSyncCheck)
removeSyncCheck();
if (value.owner)
value.stop();
});
}
sortNodePosition(other) {
if (!this.current || !this.sortInstanceNodePosition || this.type !== other.type) {
return 0;
}
return this.sortInstanceNodePosition(this.current, other.current);
}
updateFeatures() {
let key = "animation";
for (key in featureDefinitions) {
const featureDefinition = featureDefinitions[key];
if (!featureDefinition)
continue;
const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
if (!this.features[key] && FeatureConstructor && isEnabled(this.props)) {
this.features[key] = new FeatureConstructor(this);
}
if (this.features[key]) {
const feature = this.features[key];
if (feature.isMounted) {
feature.update();
} else {
feature.mount();
feature.isMounted = true;
}
}
}
}
triggerBuild() {
this.build(this.renderState, this.latestValues, this.props);
}
measureViewportBox() {
return this.current ? this.measureInstanceViewportBox(this.current, this.props) : createBox();
}
getStaticValue(key) {
return this.latestValues[key];
}
setStaticValue(key, value) {
this.latestValues[key] = value;
}
update(props, presenceContext) {
if (props.transformTemplate || this.props.transformTemplate) {
this.scheduleRender();
}
this.prevProps = this.props;
this.props = props;
this.prevPresenceContext = this.presenceContext;
this.presenceContext = presenceContext;
for (let i2 = 0; i2 < propEventHandlers.length; i2++) {
const key = propEventHandlers[i2];
if (this.propEventSubscriptions[key]) {
this.propEventSubscriptions[key]();
delete this.propEventSubscriptions[key];
}
const listenerName = "on" + key;
const listener = props[listenerName];
if (listener) {
this.propEventSubscriptions[key] = this.on(key, listener);
}
}
this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues);
if (this.handleChildMotionValue) {
this.handleChildMotionValue();
}
}
getProps() {
return this.props;
}
getVariant(name) {
return this.props.variants ? this.props.variants[name] : void 0;
}
getDefaultTransition() {
return this.props.transition;
}
getTransformPagePoint() {
return this.props.transformPagePoint;
}
getClosestVariantNode() {
return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
}
addVariantChild(child) {
const closestVariantNode = this.getClosestVariantNode();
if (closestVariantNode) {
closestVariantNode.variantChildren && closestVariantNode.variantChildren.add(child);
return () => closestVariantNode.variantChildren.delete(child);
}
}
addValue(key, value) {
const existingValue = this.values.get(key);
if (value !== existingValue) {
if (existingValue)
this.removeValue(key);
this.bindToMotionValue(key, value);
this.values.set(key, value);
this.latestValues[key] = value.get();
}
}
removeValue(key) {
this.values.delete(key);
const unsubscribe = this.valueSubscriptions.get(key);
if (unsubscribe) {
unsubscribe();
this.valueSubscriptions.delete(key);
}
delete this.latestValues[key];
this.removeValueFromRenderState(key, this.renderState);
}
hasValue(key) {
return this.values.has(key);
}
getValue(key, defaultValue) {
if (this.props.values && this.props.values[key]) {
return this.props.values[key];
}
let value = this.values.get(key);
if (value === void 0 && defaultValue !== void 0) {
value = motionValue(defaultValue === null ? void 0 : defaultValue, { owner: this });
this.addValue(key, value);
}
return value;
}
readValue(key, target) {
let value = this.latestValues[key] !== void 0 || !this.current ? this.latestValues[key] : this.getBaseTargetFromProps(this.props, key) ?? this.readValueFromInstance(this.current, key, this.options);
if (value !== void 0 && value !== null) {
if (typeof value === "string" && (isNumericalString(value) || isZeroValueString(value))) {
value = parseFloat(value);
} else if (!findValueType(value) && complex.test(target)) {
value = getAnimatableNone(key, target);
}
this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
}
return isMotionValue(value) ? value.get() : value;
}
setBaseTarget(key, value) {
this.baseTarget[key] = value;
}
getBaseTarget(key) {
const { initial } = this.props;
let valueFromInitial;
if (typeof initial === "string" || typeof initial === "object") {
const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
if (variant) {
valueFromInitial = variant[key];
}
}
if (initial && valueFromInitial !== void 0) {
return valueFromInitial;
}
const target = this.getBaseTargetFromProps(this.props, key);
if (target !== void 0 && !isMotionValue(target))
return target;
return this.initialValues[key] !== void 0 && valueFromInitial === void 0 ? void 0 : this.baseTarget[key];
}
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = new SubscriptionManager();
}
return this.events[eventName].add(callback);
}
notify(eventName, ...args) {
if (this.events[eventName]) {
this.events[eventName].notify(...args);
}
}
scheduleRenderMicrotask() {
microtask.render(this.render);
}
}
class DOMVisualElement extends VisualElement {
constructor() {
super(...arguments);
this.KeyframeResolver = DOMKeyframesResolver;
}
sortInstanceNodePosition(a2, b) {
return a2.compareDocumentPosition(b) & 2 ? 1 : -1;
}
getBaseTargetFromProps(props, key) {
return props.style ? props.style[key] : void 0;
}
removeValueFromRenderState(key, { vars, style: style2 }) {
delete vars[key];
delete style2[key];
}
handleChildMotionValue() {
if (this.childSubscription) {
this.childSubscription();
delete this.childSubscription;
}
const { children } = this.props;
if (isMotionValue(children)) {
this.childSubscription = children.on("change", (latest) => {
if (this.current) {
this.current.textContent = `${latest}`;
}
});
}
}
}
function renderHTML(element, { style: style2, vars }, styleProp, projection) {
const elementStyle = element.style;
let key;
for (key in style2) {
elementStyle[key] = style2[key];
}
projection?.applyProjectionStyles(elementStyle, styleProp);
for (key in vars) {
elementStyle.setProperty(key, vars[key]);
}
}
function getComputedStyle$2(element) {
return window.getComputedStyle(element);
}
class HTMLVisualElement extends DOMVisualElement {
constructor() {
super(...arguments);
this.type = "html";
this.renderInstance = renderHTML;
}
readValueFromInstance(instance, key) {
if (transformProps.has(key)) {
return this.projection?.isProjecting ? defaultTransformValue(key) : readTransformValue(instance, key);
} else {
const computedStyle = getComputedStyle$2(instance);
const value = (isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
return typeof value === "string" ? value.trim() : value;
}
}
measureInstanceViewportBox(instance, { transformPagePoint }) {
return measureViewportBox(instance, transformPagePoint);
}
build(renderState, latestValues, props) {
buildHTMLStyles(renderState, latestValues, props.transformTemplate);
}
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
}
}
const camelCaseAttributes = new Set([
"baseFrequency",
"diffuseConstant",
"kernelMatrix",
"kernelUnitLength",
"keySplines",
"keyTimes",
"limitingConeAngle",
"markerHeight",
"markerWidth",
"numOctaves",
"targetX",
"targetY",
"surfaceScale",
"specularConstant",
"specularExponent",
"stdDeviation",
"tableValues",
"viewBox",
"gradientTransform",
"pathLength",
"startOffset",
"textLength",
"lengthAdjust"
]);
function renderSVG(element, renderState, _styleProp, projection) {
renderHTML(element, renderState, void 0, projection);
for (const key in renderState.attrs) {
element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
}
}
class SVGVisualElement extends DOMVisualElement {
constructor() {
super(...arguments);
this.type = "svg";
this.isSVGTag = false;
this.measureInstanceViewportBox = createBox;
}
getBaseTargetFromProps(props, key) {
return props[key];
}
readValueFromInstance(instance, key) {
if (transformProps.has(key)) {
const defaultType = getDefaultValueType(key);
return defaultType ? defaultType.default || 0 : 0;
}
key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
return instance.getAttribute(key);
}
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
return scrapeMotionValuesFromProps(props, prevProps, visualElement);
}
build(renderState, latestValues, props) {
buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate, props.style);
}
renderInstance(instance, renderState, styleProp, projection) {
renderSVG(instance, renderState, styleProp, projection);
}
mount(instance) {
this.isSVGTag = isSVGTag(instance.tagName);
super.mount(instance);
}
}
const createDomVisualElement = (Component2, options) => {
return isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
allowProjection: Component2 !== React.Fragment
});
};
function resolveVariant(visualElement, definition, custom) {
const props = visualElement.getProps();
return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, visualElement);
}
const isKeyframesTarget = (v) => {
return Array.isArray(v);
};
function setMotionValue(visualElement, key, value) {
if (visualElement.hasValue(key)) {
visualElement.getValue(key).set(value);
} else {
visualElement.addValue(key, motionValue(value));
}
}
function resolveFinalValueInKeyframes(v) {
return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
}
function setTarget(visualElement, definition) {
const resolved = resolveVariant(visualElement, definition);
let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
target = { ...target, ...transitionEnd };
for (const key in target) {
const value = resolveFinalValueInKeyframes(target[key]);
setMotionValue(visualElement, key, value);
}
}
function isWillChangeMotionValue(value) {
return Boolean(isMotionValue(value) && value.add);
}
function addValueToWillChange(visualElement, key) {
const willChange = visualElement.getValue("willChange");
if (isWillChangeMotionValue(willChange)) {
return willChange.add(key);
} else if (!willChange && MotionGlobalConfig.WillChange) {
const newWillChange = new MotionGlobalConfig.WillChange("auto");
visualElement.addValue("willChange", newWillChange);
newWillChange.add(key);
}
}
function getOptimisedAppearId(visualElement) {
return visualElement.props[optimizedAppearDataAttribute];
}
const isNotNull$1 = (value) => value !== null;
function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
const resolvedKeyframes = keyframes2.filter(isNotNull$1);
const index2 = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
return resolvedKeyframes[index2];
}
const underDampedSpring = {
type: "spring",
stiffness: 500,
damping: 25,
restSpeed: 10
};
const criticallyDampedSpring = (target) => ({
type: "spring",
stiffness: 550,
damping: target === 0 ? 2 * Math.sqrt(550) : 30,
restSpeed: 10
});
const keyframesTransition = {
type: "keyframes",
duration: 0.8
};
const ease = {
type: "keyframes",
ease: [0.25, 0.1, 0.35, 1],
duration: 0.3
};
const getDefaultTransition = (valueKey, { keyframes: keyframes2 }) => {
if (keyframes2.length > 2) {
return keyframesTransition;
} else if (transformProps.has(valueKey)) {
return valueKey.startsWith("scale") ? criticallyDampedSpring(keyframes2[1]) : underDampedSpring;
}
return ease;
};
function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
return !!Object.keys(transition).length;
}
const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
const valueTransition = getValueTransition(transition, name) || {};
const delay2 = valueTransition.delay || transition.delay || 0;
let { elapsed = 0 } = transition;
elapsed = elapsed - secondsToMilliseconds(delay2);
const options = {
keyframes: Array.isArray(target) ? target : [null, target],
ease: "easeOut",
velocity: value.getVelocity(),
...valueTransition,
delay: -elapsed,
onUpdate: (v) => {
value.set(v);
valueTransition.onUpdate && valueTransition.onUpdate(v);
},
onComplete: () => {
onComplete();
valueTransition.onComplete && valueTransition.onComplete();
},
name,
motionValue: value,
element: isHandoff ? void 0 : element
};
if (!isTransitionDefined(valueTransition)) {
Object.assign(options, getDefaultTransition(name, options));
}
options.duration && (options.duration = secondsToMilliseconds(options.duration));
options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
if (options.from !== void 0) {
options.keyframes[0] = options.from;
}
let shouldSkip = false;
if (options.type === false || options.duration === 0 && !options.repeatDelay) {
makeAnimationInstant(options);
if (options.delay === 0) {
shouldSkip = true;
}
}
if (MotionGlobalConfig.instantAnimations || MotionGlobalConfig.skipAnimations) {
shouldSkip = true;
makeAnimationInstant(options);
options.delay = 0;
}
options.allowFlatten = !valueTransition.type && !valueTransition.ease;
if (shouldSkip && !isHandoff && value.get() !== void 0) {
const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
if (finalKeyframe !== void 0) {
frame.update(() => {
options.onUpdate(finalKeyframe);
options.onComplete();
});
return;
}
}
return valueTransition.isSync ? new JSAnimation(options) : new AsyncMotionValueAnimation(options);
};
function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
needsAnimating[key] = false;
return shouldBlock;
}
function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
if (transitionOverride)
transition = transitionOverride;
const animations2 = [];
const animationTypeState = type && visualElement.animationState && visualElement.animationState.getState()[type];
for (const key in target) {
const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
const valueTarget = target[key];
if (valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key)) {
continue;
}
const valueTransition = {
delay: delay2,
...getValueTransition(transition || {}, key)
};
const currentValue = value.get();
if (currentValue !== void 0 && !value.isAnimating && !Array.isArray(valueTarget) && valueTarget === currentValue && !valueTransition.velocity) {
continue;
}
let isHandoff = false;
if (window.MotionHandoffAnimation) {
const appearId = getOptimisedAppearId(visualElement);
if (appearId) {
const startTime = window.MotionHandoffAnimation(appearId, key, frame);
if (startTime !== null) {
valueTransition.startTime = startTime;
isHandoff = true;
}
}
}
addValueToWillChange(visualElement, key);
value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && positionalKeys.has(key) ? { type: false } : valueTransition, visualElement, isHandoff));
const animation = value.animation;
if (animation) {
animations2.push(animation);
}
}
if (transitionEnd) {
Promise.all(animations2).then(() => {
frame.update(() => {
transitionEnd && setTarget(visualElement, transitionEnd);
});
});
}
return animations2;
}
function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
const index2 = Array.from(children).sort((a2, b) => a2.sortNodePosition(b)).indexOf(child);
const numChildren = children.size;
const maxStaggerDuration = (numChildren - 1) * staggerChildren;
const delayIsFunction = typeof delayChildren === "function";
return delayIsFunction ? delayChildren(index2, numChildren) : staggerDirection === 1 ? index2 * staggerChildren : maxStaggerDuration - index2 * staggerChildren;
}
function animateVariant(visualElement, variant, options = {}) {
const resolved = resolveVariant(visualElement, variant, options.type === "exit" ? visualElement.presenceContext?.custom : void 0);
let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
if (options.transitionOverride) {
transition = options.transitionOverride;
}
const getAnimation = resolved ? () => Promise.all(animateTarget(visualElement, resolved, options)) : () => Promise.resolve();
const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size ? (forwardDelay = 0) => {
const { delayChildren = 0, staggerChildren, staggerDirection } = transition;
return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options);
} : () => Promise.resolve();
const { when } = transition;
if (when) {
const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
return first().then(() => last());
} else {
return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
}
}
function animateChildren(visualElement, variant, delay2 = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
const animations2 = [];
for (const child of visualElement.variantChildren) {
child.notify("AnimationStart", variant);
animations2.push(animateVariant(child, variant, {
...options,
delay: delay2 + (typeof delayChildren === "function" ? 0 : delayChildren) + calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection)
}).then(() => child.notify("AnimationComplete", variant)));
}
return Promise.all(animations2);
}
function animateVisualElement(visualElement, definition, options = {}) {
visualElement.notify("AnimationStart", definition);
let animation;
if (Array.isArray(definition)) {
const animations2 = definition.map((variant) => animateVariant(visualElement, variant, options));
animation = Promise.all(animations2);
} else if (typeof definition === "string") {
animation = animateVariant(visualElement, definition, options);
} else {
const resolvedDefinition = typeof definition === "function" ? resolveVariant(visualElement, definition, options.custom) : definition;
animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
}
return animation.then(() => {
visualElement.notify("AnimationComplete", definition);
});
}
function shallowCompare(next, prev) {
if (!Array.isArray(prev))
return false;
const prevLength = prev.length;
if (prevLength !== next.length)
return false;
for (let i2 = 0; i2 < prevLength; i2++) {
if (prev[i2] !== next[i2])
return false;
}
return true;
}
const numVariantProps = variantProps.length;
function getVariantContext(visualElement) {
if (!visualElement)
return void 0;
if (!visualElement.isControllingVariants) {
const context2 = visualElement.parent ? getVariantContext(visualElement.parent) || {} : {};
if (visualElement.props.initial !== void 0) {
context2.initial = visualElement.props.initial;
}
return context2;
}
const context = {};
for (let i2 = 0; i2 < numVariantProps; i2++) {
const name = variantProps[i2];
const prop = visualElement.props[name];
if (isVariantLabel(prop) || prop === false) {
context[name] = prop;
}
}
return context;
}
const reversePriorityOrder = [...variantPriorityOrder].reverse();
const numAnimationTypes = variantPriorityOrder.length;
function animateList(visualElement) {
return (animations2) => Promise.all(animations2.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
}
function createAnimationState(visualElement) {
let animate = animateList(visualElement);
let state = createState();
let isInitialRender = true;
const buildResolvedTypeValues = (type) => (acc, definition) => {
const resolved = resolveVariant(visualElement, definition, type === "exit" ? visualElement.presenceContext?.custom : void 0);
if (resolved) {
const { transition, transitionEnd, ...target } = resolved;
acc = { ...acc, ...target, ...transitionEnd };
}
return acc;
};
function setAnimateFunction(makeAnimator) {
animate = makeAnimator(visualElement);
}
function animateChanges(changedActiveType) {
const { props } = visualElement;
const context = getVariantContext(visualElement.parent) || {};
const animations2 = [];
const removedKeys = new Set();
let encounteredKeys = {};
let removedVariantIndex = Infinity;
for (let i2 = 0; i2 < numAnimationTypes; i2++) {
const type = reversePriorityOrder[i2];
const typeState = state[type];
const prop = props[type] !== void 0 ? props[type] : context[type];
const propIsVariant = isVariantLabel(prop);
const activeDelta = type === changedActiveType ? typeState.isActive : null;
if (activeDelta === false)
removedVariantIndex = i2;
let isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
if (isInherited && isInitialRender && visualElement.manuallyAnimateOnMount) {
isInherited = false;
}
typeState.protectedKeys = { ...encounteredKeys };
if (
!typeState.isActive && activeDelta === null ||
!prop && !typeState.prevProp ||
isAnimationControls(prop) || typeof prop === "boolean"
) {
continue;
}
const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
let shouldAnimateType = variantDidChange ||
type === changedActiveType && typeState.isActive && !isInherited && propIsVariant ||
i2 > removedVariantIndex && propIsVariant;
let handledRemovedValues = false;
const definitionList = Array.isArray(prop) ? prop : [prop];
let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {});
if (activeDelta === false)
resolvedValues = {};
const { prevResolvedValues = {} } = typeState;
const allKeys = {
...prevResolvedValues,
...resolvedValues
};
const markToAnimate = (key) => {
shouldAnimateType = true;
if (removedKeys.has(key)) {
handledRemovedValues = true;
removedKeys.delete(key);
}
typeState.needsAnimating[key] = true;
const motionValue2 = visualElement.getValue(key);
if (motionValue2)
motionValue2.liveStyle = false;
};
for (const key in allKeys) {
const next = resolvedValues[key];
const prev = prevResolvedValues[key];
if (encounteredKeys.hasOwnProperty(key))
continue;
let valueHasChanged = false;
if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
valueHasChanged = !shallowCompare(next, prev);
} else {
valueHasChanged = next !== prev;
}
if (valueHasChanged) {
if (next !== void 0 && next !== null) {
markToAnimate(key);
} else {
removedKeys.add(key);
}
} else if (next !== void 0 && removedKeys.has(key)) {
markToAnimate(key);
} else {
typeState.protectedKeys[key] = true;
}
}
typeState.prevProp = prop;
typeState.prevResolvedValues = resolvedValues;
if (typeState.isActive) {
encounteredKeys = { ...encounteredKeys, ...resolvedValues };
}
if (isInitialRender && visualElement.blockInitialAnimation) {
shouldAnimateType = false;
}
const willAnimateViaParent = isInherited && variantDidChange;
const needsAnimating = !willAnimateViaParent || handledRemovedValues;
if (shouldAnimateType && needsAnimating) {
animations2.push(...definitionList.map((animation) => {
const options = { type };
if (typeof animation === "string" && isInitialRender && !willAnimateViaParent && visualElement.manuallyAnimateOnMount && visualElement.parent) {
const { parent } = visualElement;
const parentVariant = resolveVariant(parent, animation);
if (parent.enteringChildren && parentVariant) {
const { delayChildren } = parentVariant.transition || {};
options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
}
}
return {
animation,
options
};
}));
}
}
if (removedKeys.size) {
const fallbackAnimation = {};
if (typeof props.initial !== "boolean") {
const initialTransition = resolveVariant(visualElement, Array.isArray(props.initial) ? props.initial[0] : props.initial);
if (initialTransition && initialTransition.transition) {
fallbackAnimation.transition = initialTransition.transition;
}
}
removedKeys.forEach((key) => {
const fallbackTarget = visualElement.getBaseTarget(key);
const motionValue2 = visualElement.getValue(key);
if (motionValue2)
motionValue2.liveStyle = true;
fallbackAnimation[key] = fallbackTarget ?? null;
});
animations2.push({ animation: fallbackAnimation });
}
let shouldAnimate = Boolean(animations2.length);
if (isInitialRender && (props.initial === false || props.initial === props.animate) && !visualElement.manuallyAnimateOnMount) {
shouldAnimate = false;
}
isInitialRender = false;
return shouldAnimate ? animate(animations2) : Promise.resolve();
}
function setActive(type, isActive) {
if (state[type].isActive === isActive)
return Promise.resolve();
visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
state[type].isActive = isActive;
const animations2 = animateChanges(type);
for (const key in state) {
state[key].protectedKeys = {};
}
return animations2;
}
return {
animateChanges,
setActive,
setAnimateFunction,
getState: () => state,
reset: () => {
state = createState();
}
};
}
function checkVariantsDidChange(prev, next) {
if (typeof next === "string") {
return next !== prev;
} else if (Array.isArray(next)) {
return !shallowCompare(next, prev);
}
return false;
}
function createTypeState(isActive = false) {
return {
isActive,
protectedKeys: {},
needsAnimating: {},
prevResolvedValues: {}
};
}
function createState() {
return {
animate: createTypeState(true),
whileInView: createTypeState(),
whileHover: createTypeState(),
whileTap: createTypeState(),
whileDrag: createTypeState(),
whileFocus: createTypeState(),
exit: createTypeState()
};
}
class Feature {
constructor(node) {
this.isMounted = false;
this.node = node;
}
update() {
}
}
class AnimationFeature extends Feature {
constructor(node) {
super(node);
node.animationState || (node.animationState = createAnimationState(node));
}
updateAnimationControlsSubscription() {
const { animate } = this.node.getProps();
if (isAnimationControls(animate)) {
this.unmountControls = animate.subscribe(this.node);
}
}
mount() {
this.updateAnimationControlsSubscription();
}
update() {
const { animate } = this.node.getProps();
const { animate: prevAnimate } = this.node.prevProps || {};
if (animate !== prevAnimate) {
this.updateAnimationControlsSubscription();
}
}
unmount() {
this.node.animationState.reset();
this.unmountControls?.();
}
}
let id$1 = 0;
class ExitAnimationFeature extends Feature {
constructor() {
super(...arguments);
this.id = id$1++;
}
update() {
if (!this.node.presenceContext)
return;
const { isPresent, onExitComplete } = this.node.presenceContext;
const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
if (!this.node.animationState || isPresent === prevIsPresent) {
return;
}
const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
if (onExitComplete && !isPresent) {
exitAnimation.then(() => {
onExitComplete(this.id);
});
}
}
mount() {
const { register, onExitComplete } = this.node.presenceContext || {};
if (onExitComplete) {
onExitComplete(this.id);
}
if (register) {
this.unmount = register(this.id);
}
}
unmount() {
}
}
const animations = {
animation: {
Feature: AnimationFeature
},
exit: {
Feature: ExitAnimationFeature
}
};
function addDomEvent(target, eventName, handler, options = { passive: true }) {
target.addEventListener(eventName, handler, options);
return () => target.removeEventListener(eventName, handler);
}
function extractEventInfo(event) {
return {
point: {
x: event.pageX,
y: event.pageY
}
};
}
const addPointerInfo = (handler) => {
return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
};
function addPointerEvent(target, eventName, handler, options) {
return addDomEvent(target, eventName, addPointerInfo(handler), options);
}
const SCALE_PRECISION = 1e-4;
const SCALE_MIN = 1 - SCALE_PRECISION;
const SCALE_MAX = 1 + SCALE_PRECISION;
const TRANSLATE_PRECISION = 0.01;
const TRANSLATE_MIN = 0 - TRANSLATE_PRECISION;
const TRANSLATE_MAX = 0 + TRANSLATE_PRECISION;
function calcLength(axis) {
return axis.max - axis.min;
}
function isNear(value, target, maxDistance) {
return Math.abs(value - target) <= maxDistance;
}
function calcAxisDelta(delta, source, target, origin = 0.5) {
delta.origin = origin;
delta.originPoint = mixNumber$1(source.min, source.max, delta.origin);
delta.scale = calcLength(target) / calcLength(source);
delta.translate = mixNumber$1(target.min, target.max, delta.origin) - delta.originPoint;
if (delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX || isNaN(delta.scale)) {
delta.scale = 1;
}
if (delta.translate >= TRANSLATE_MIN && delta.translate <= TRANSLATE_MAX || isNaN(delta.translate)) {
delta.translate = 0;
}
}
function calcBoxDelta(delta, source, target, origin) {
calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : void 0);
calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : void 0);
}
function calcRelativeAxis(target, relative, parent) {
target.min = parent.min + relative.min;
target.max = target.min + calcLength(relative);
}
function calcRelativeBox(target, relative, parent) {
calcRelativeAxis(target.x, relative.x, parent.x);
calcRelativeAxis(target.y, relative.y, parent.y);
}
function calcRelativeAxisPosition(target, layout2, parent) {
target.min = layout2.min - parent.min;
target.max = target.min + calcLength(layout2);
}
function calcRelativePosition(target, layout2, parent) {
calcRelativeAxisPosition(target.x, layout2.x, parent.x);
calcRelativeAxisPosition(target.y, layout2.y, parent.y);
}
function eachAxis(callback) {
return [callback("x"), callback("y")];
}
const getContextWindow = ({ current }) => {
return current ? current.ownerDocument.defaultView : null;
};
const distance = (a2, b) => Math.abs(a2 - b);
function distance2D(a2, b) {
const xDelta = distance(a2.x, b.x);
const yDelta = distance(a2.y, b.y);
return Math.sqrt(xDelta ** 2 + yDelta ** 2);
}
class PanSession {
constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3 } = {}) {
this.startEvent = null;
this.lastMoveEvent = null;
this.lastMoveEventInfo = null;
this.handlers = {};
this.contextWindow = window;
this.updatePoint = () => {
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
return;
const info2 = getPanInfo(this.lastMoveEventInfo, this.history);
const isPanStarted = this.startEvent !== null;
const isDistancePastThreshold = distance2D(info2.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
if (!isPanStarted && !isDistancePastThreshold)
return;
const { point: point2 } = info2;
const { timestamp: timestamp2 } = frameData;
this.history.push({ ...point2, timestamp: timestamp2 });
const { onStart, onMove } = this.handlers;
if (!isPanStarted) {
onStart && onStart(this.lastMoveEvent, info2);
this.startEvent = this.lastMoveEvent;
}
onMove && onMove(this.lastMoveEvent, info2);
};
this.handlePointerMove = (event2, info2) => {
this.lastMoveEvent = event2;
this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
frame.update(this.updatePoint, true);
};
this.handlePointerUp = (event2, info2) => {
this.end();
const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
if (this.dragSnapToOrigin)
resumeAnimation && resumeAnimation();
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
return;
const panInfo = getPanInfo(event2.type === "pointercancel" ? this.lastMoveEventInfo : transformPoint(info2, this.transformPagePoint), this.history);
if (this.startEvent && onEnd) {
onEnd(event2, panInfo);
}
onSessionEnd && onSessionEnd(event2, panInfo);
};
if (!isPrimaryPointer(event))
return;
this.dragSnapToOrigin = dragSnapToOrigin;
this.handlers = handlers;
this.transformPagePoint = transformPagePoint;
this.distanceThreshold = distanceThreshold;
this.contextWindow = contextWindow || window;
const info = extractEventInfo(event);
const initialInfo = transformPoint(info, this.transformPagePoint);
const { point } = initialInfo;
const { timestamp } = frameData;
this.history = [{ ...point, timestamp }];
const { onSessionStart } = handlers;
onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
}
updateHandlers(handlers) {
this.handlers = handlers;
}
end() {
this.removeListeners && this.removeListeners();
cancelFrame(this.updatePoint);
}
}
function transformPoint(info, transformPagePoint) {
return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
}
function subtractPoint(a2, b) {
return { x: a2.x - b.x, y: a2.y - b.y };
}
function getPanInfo({ point }, history) {
return {
point,
delta: subtractPoint(point, lastDevicePoint(history)),
offset: subtractPoint(point, startDevicePoint(history)),
velocity: getVelocity(history, 0.1)
};
}
function startDevicePoint(history) {
return history[0];
}
function lastDevicePoint(history) {
return history[history.length - 1];
}
function getVelocity(history, timeDelta) {
if (history.length < 2) {
return { x: 0, y: 0 };
}
let i2 = history.length - 1;
let timestampedPoint = null;
const lastPoint = lastDevicePoint(history);
while (i2 >= 0) {
timestampedPoint = history[i2];
if (lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta)) {
break;
}
i2--;
}
if (!timestampedPoint) {
return { x: 0, y: 0 };
}
const time2 = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
if (time2 === 0) {
return { x: 0, y: 0 };
}
const currentVelocity = {
x: (lastPoint.x - timestampedPoint.x) / time2,
y: (lastPoint.y - timestampedPoint.y) / time2
};
if (currentVelocity.x === Infinity) {
currentVelocity.x = 0;
}
if (currentVelocity.y === Infinity) {
currentVelocity.y = 0;
}
return currentVelocity;
}
function applyConstraints(point, { min: min2, max: max2 }, elastic) {
if (min2 !== void 0 && point < min2) {
point = elastic ? mixNumber$1(min2, point, elastic.min) : Math.max(point, min2);
} else if (max2 !== void 0 && point > max2) {
point = elastic ? mixNumber$1(max2, point, elastic.max) : Math.min(point, max2);
}
return point;
}
function calcRelativeAxisConstraints(axis, min2, max2) {
return {
min: min2 !== void 0 ? axis.min + min2 : void 0,
max: max2 !== void 0 ? axis.max + max2 - (axis.max - axis.min) : void 0
};
}
function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
return {
x: calcRelativeAxisConstraints(layoutBox.x, left, right),
y: calcRelativeAxisConstraints(layoutBox.y, top, bottom)
};
}
function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
let min2 = constraintsAxis.min - layoutAxis.min;
let max2 = constraintsAxis.max - layoutAxis.max;
if (constraintsAxis.max - constraintsAxis.min < layoutAxis.max - layoutAxis.min) {
[min2, max2] = [max2, min2];
}
return { min: min2, max: max2 };
}
function calcViewportConstraints(layoutBox, constraintsBox) {
return {
x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y)
};
}
function calcOrigin(source, target) {
let origin = 0.5;
const sourceLength = calcLength(source);
const targetLength = calcLength(target);
if (targetLength > sourceLength) {
origin = progress(target.min, target.max - sourceLength, source.min);
} else if (sourceLength > targetLength) {
origin = progress(source.min, source.max - targetLength, target.min);
}
return clamp$1(0, 1, origin);
}
function rebaseAxisConstraints(layout2, constraints) {
const relativeConstraints = {};
if (constraints.min !== void 0) {
relativeConstraints.min = constraints.min - layout2.min;
}
if (constraints.max !== void 0) {
relativeConstraints.max = constraints.max - layout2.min;
}
return relativeConstraints;
}
const defaultElastic = 0.35;
function resolveDragElastic(dragElastic = defaultElastic) {
if (dragElastic === false) {
dragElastic = 0;
} else if (dragElastic === true) {
dragElastic = defaultElastic;
}
return {
x: resolveAxisElastic(dragElastic, "left", "right"),
y: resolveAxisElastic(dragElastic, "top", "bottom")
};
}
function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
return {
min: resolvePointElastic(dragElastic, minLabel),
max: resolvePointElastic(dragElastic, maxLabel)
};
}
function resolvePointElastic(dragElastic, label) {
return typeof dragElastic === "number" ? dragElastic : dragElastic[label] || 0;
}
const elementDragControls = new WeakMap();
class VisualElementDragControls {
constructor(visualElement) {
this.openDragLock = null;
this.isDragging = false;
this.currentDirection = null;
this.originPoint = { x: 0, y: 0 };
this.constraints = false;
this.hasMutatedConstraints = false;
this.elastic = createBox();
this.latestPointerEvent = null;
this.latestPanInfo = null;
this.visualElement = visualElement;
}
start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
const { presenceContext } = this.visualElement;
if (presenceContext && presenceContext.isPresent === false)
return;
const onSessionStart = (event) => {
const { dragSnapToOrigin: dragSnapToOrigin2 } = this.getProps();
dragSnapToOrigin2 ? this.pauseAnimation() : this.stopAnimation();
if (snapToCursor) {
this.snapToCursor(extractEventInfo(event).point);
}
};
const onStart = (event, info) => {
const { drag: drag2, dragPropagation, onDragStart } = this.getProps();
if (drag2 && !dragPropagation) {
if (this.openDragLock)
this.openDragLock();
this.openDragLock = setDragLock(drag2);
if (!this.openDragLock)
return;
}
this.latestPointerEvent = event;
this.latestPanInfo = info;
this.isDragging = true;
this.currentDirection = null;
this.resolveConstraints();
if (this.visualElement.projection) {
this.visualElement.projection.isAnimationBlocked = true;
this.visualElement.projection.target = void 0;
}
eachAxis((axis) => {
let current = this.getAxisMotionValue(axis).get() || 0;
if (percent.test(current)) {
const { projection } = this.visualElement;
if (projection && projection.layout) {
const measuredAxis = projection.layout.layoutBox[axis];
if (measuredAxis) {
const length = calcLength(measuredAxis);
current = length * (parseFloat(current) / 100);
}
}
}
this.originPoint[axis] = current;
});
if (onDragStart) {
frame.postRender(() => onDragStart(event, info));
}
addValueToWillChange(this.visualElement, "transform");
const { animationState } = this.visualElement;
animationState && animationState.setActive("whileDrag", true);
};
const onMove = (event, info) => {
this.latestPointerEvent = event;
this.latestPanInfo = info;
const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag } = this.getProps();
if (!dragPropagation && !this.openDragLock)
return;
const { offset: offset2 } = info;
if (dragDirectionLock && this.currentDirection === null) {
this.currentDirection = getCurrentDirection(offset2);
if (this.currentDirection !== null) {
onDirectionLock && onDirectionLock(this.currentDirection);
}
return;
}
this.updateAxis("x", info.point, offset2);
this.updateAxis("y", info.point, offset2);
this.visualElement.render();
onDrag && onDrag(event, info);
};
const onSessionEnd = (event, info) => {
this.latestPointerEvent = event;
this.latestPanInfo = info;
this.stop(event, info);
this.latestPointerEvent = null;
this.latestPanInfo = null;
};
const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" && this.getAxisMotionValue(axis).animation?.play());
const { dragSnapToOrigin } = this.getProps();
this.panSession = new PanSession(originEvent, {
onSessionStart,
onStart,
onMove,
onSessionEnd,
resumeAnimation
}, {
transformPagePoint: this.visualElement.getTransformPagePoint(),
dragSnapToOrigin,
distanceThreshold,
contextWindow: getContextWindow(this.visualElement)
});
}
stop(event, panInfo) {
const finalEvent = event || this.latestPointerEvent;
const finalPanInfo = panInfo || this.latestPanInfo;
const isDragging2 = this.isDragging;
this.cancel();
if (!isDragging2 || !finalPanInfo || !finalEvent)
return;
const { velocity } = finalPanInfo;
this.startAnimation(velocity);
const { onDragEnd } = this.getProps();
if (onDragEnd) {
frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
}
}
cancel() {
this.isDragging = false;
const { projection, animationState } = this.visualElement;
if (projection) {
projection.isAnimationBlocked = false;
}
this.panSession && this.panSession.end();
this.panSession = void 0;
const { dragPropagation } = this.getProps();
if (!dragPropagation && this.openDragLock) {
this.openDragLock();
this.openDragLock = null;
}
animationState && animationState.setActive("whileDrag", false);
}
updateAxis(axis, _point, offset2) {
const { drag: drag2 } = this.getProps();
if (!offset2 || !shouldDrag(axis, drag2, this.currentDirection))
return;
const axisValue = this.getAxisMotionValue(axis);
let next = this.originPoint[axis] + offset2[axis];
if (this.constraints && this.constraints[axis]) {
next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
}
axisValue.set(next);
}
resolveConstraints() {
const { dragConstraints, dragElastic } = this.getProps();
const layout2 = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(false) : this.visualElement.projection?.layout;
const prevConstraints = this.constraints;
if (dragConstraints && isRefObject(dragConstraints)) {
if (!this.constraints) {
this.constraints = this.resolveRefConstraints();
}
} else {
if (dragConstraints && layout2) {
this.constraints = calcRelativeConstraints(layout2.layoutBox, dragConstraints);
} else {
this.constraints = false;
}
}
this.elastic = resolveDragElastic(dragElastic);
if (prevConstraints !== this.constraints && layout2 && this.constraints && !this.hasMutatedConstraints) {
eachAxis((axis) => {
if (this.constraints !== false && this.getAxisMotionValue(axis)) {
this.constraints[axis] = rebaseAxisConstraints(layout2.layoutBox[axis], this.constraints[axis]);
}
});
}
}
resolveRefConstraints() {
const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
if (!constraints || !isRefObject(constraints))
return false;
const constraintsElement = constraints.current;
const { projection } = this.visualElement;
if (!projection || !projection.layout)
return false;
const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
if (onMeasureDragConstraints) {
const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
this.hasMutatedConstraints = !!userConstraints;
if (userConstraints) {
measuredConstraints = convertBoundingBoxToBox(userConstraints);
}
}
return measuredConstraints;
}
startAnimation(velocity) {
const { drag: drag2, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd } = this.getProps();
const constraints = this.constraints || {};
const momentumAnimations = eachAxis((axis) => {
if (!shouldDrag(axis, drag2, this.currentDirection)) {
return;
}
let transition = constraints && constraints[axis] || {};
if (dragSnapToOrigin)
transition = { min: 0, max: 0 };
const bounceStiffness = dragElastic ? 200 : 1e6;
const bounceDamping = dragElastic ? 40 : 1e7;
const inertia2 = {
type: "inertia",
velocity: dragMomentum ? velocity[axis] : 0,
bounceStiffness,
bounceDamping,
timeConstant: 750,
restDelta: 1,
restSpeed: 10,
...dragTransition,
...transition
};
return this.startAxisValueAnimation(axis, inertia2);
});
return Promise.all(momentumAnimations).then(onDragTransitionEnd);
}
startAxisValueAnimation(axis, transition) {
const axisValue = this.getAxisMotionValue(axis);
addValueToWillChange(this.visualElement, axis);
return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false));
}
stopAnimation() {
eachAxis((axis) => this.getAxisMotionValue(axis).stop());
}
pauseAnimation() {
eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
}
getAnimationState(axis) {
return this.getAxisMotionValue(axis).animation?.state;
}
getAxisMotionValue(axis) {
const dragKey = `_drag${axis.toUpperCase()}`;
const props = this.visualElement.getProps();
const externalMotionValue = props[dragKey];
return externalMotionValue ? externalMotionValue : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : void 0) || 0);
}
snapToCursor(point) {
eachAxis((axis) => {
const { drag: drag2 } = this.getProps();
if (!shouldDrag(axis, drag2, this.currentDirection))
return;
const { projection } = this.visualElement;
const axisValue = this.getAxisMotionValue(axis);
if (projection && projection.layout) {
const { min: min2, max: max2 } = projection.layout.layoutBox[axis];
axisValue.set(point[axis] - mixNumber$1(min2, max2, 0.5));
}
});
}
scalePositionWithinConstraints() {
if (!this.visualElement.current)
return;
const { drag: drag2, dragConstraints } = this.getProps();
const { projection } = this.visualElement;
if (!isRefObject(dragConstraints) || !projection || !this.constraints)
return;
this.stopAnimation();
const boxProgress = { x: 0, y: 0 };
eachAxis((axis) => {
const axisValue = this.getAxisMotionValue(axis);
if (axisValue && this.constraints !== false) {
const latest = axisValue.get();
boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
}
});
const { transformTemplate } = this.visualElement.getProps();
this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
projection.root && projection.root.updateScroll();
projection.updateLayout();
this.resolveConstraints();
eachAxis((axis) => {
if (!shouldDrag(axis, drag2, null))
return;
const axisValue = this.getAxisMotionValue(axis);
const { min: min2, max: max2 } = this.constraints[axis];
axisValue.set(mixNumber$1(min2, max2, boxProgress[axis]));
});
}
addListeners() {
if (!this.visualElement.current)
return;
elementDragControls.set(this.visualElement, this);
const element = this.visualElement.current;
const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
const { drag: drag2, dragListener = true } = this.getProps();
drag2 && dragListener && this.start(event);
});
const measureDragConstraints = () => {
const { dragConstraints } = this.getProps();
if (isRefObject(dragConstraints) && dragConstraints.current) {
this.constraints = this.resolveRefConstraints();
}
};
const { projection } = this.visualElement;
const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
if (projection && !projection.layout) {
projection.root && projection.root.updateScroll();
projection.updateLayout();
}
frame.read(measureDragConstraints);
const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
if (this.isDragging && hasLayoutChanged) {
eachAxis((axis) => {
const motionValue2 = this.getAxisMotionValue(axis);
if (!motionValue2)
return;
this.originPoint[axis] += delta[axis].translate;
motionValue2.set(motionValue2.get() + delta[axis].translate);
});
this.visualElement.render();
}
}));
return () => {
stopResizeListener();
stopPointerListener();
stopMeasureLayoutListener();
stopLayoutUpdateListener && stopLayoutUpdateListener();
};
}
getProps() {
const props = this.visualElement.getProps();
const { drag: drag2 = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true } = props;
return {
...props,
drag: drag2,
dragDirectionLock,
dragPropagation,
dragConstraints,
dragElastic,
dragMomentum
};
}
}
function shouldDrag(direction, drag2, currentDirection) {
return (drag2 === true || drag2 === direction) && (currentDirection === null || currentDirection === direction);
}
function getCurrentDirection(offset2, lockThreshold = 10) {
let direction = null;
if (Math.abs(offset2.y) > lockThreshold) {
direction = "y";
} else if (Math.abs(offset2.x) > lockThreshold) {
direction = "x";
}
return direction;
}
class DragGesture extends Feature {
constructor(node) {
super(node);
this.removeGroupControls = noop$1;
this.removeListeners = noop$1;
this.controls = new VisualElementDragControls(node);
}
mount() {
const { dragControls } = this.node.getProps();
if (dragControls) {
this.removeGroupControls = dragControls.subscribe(this.controls);
}
this.removeListeners = this.controls.addListeners() || noop$1;
}
unmount() {
this.removeGroupControls();
this.removeListeners();
}
}
const asyncHandler = (handler) => (event, info) => {
if (handler) {
frame.postRender(() => handler(event, info));
}
};
class PanGesture extends Feature {
constructor() {
super(...arguments);
this.removePointerDownListener = noop$1;
}
onPointerDown(pointerDownEvent) {
this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
transformPagePoint: this.node.getTransformPagePoint(),
contextWindow: getContextWindow(this.node)
});
}
createPanHandlers() {
const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
return {
onSessionStart: asyncHandler(onPanSessionStart),
onStart: asyncHandler(onPanStart),
onMove: onPan,
onEnd: (event, info) => {
delete this.session;
if (onPanEnd) {
frame.postRender(() => onPanEnd(event, info));
}
}
};
}
mount() {
this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
}
update() {
this.session && this.session.updateHandlers(this.createPanHandlers());
}
unmount() {
this.removePointerDownListener();
this.session && this.session.end();
}
}
const globalProjectionState = {
hasAnimatedSinceResize: true,
hasEverUpdated: false
};
function pixelsToPercent(pixels, axis) {
if (axis.max === axis.min)
return 0;
return pixels / (axis.max - axis.min) * 100;
}
const correctBorderRadius = {
correct: (latest, node) => {
if (!node.target)
return latest;
if (typeof latest === "string") {
if (px.test(latest)) {
latest = parseFloat(latest);
} else {
return latest;
}
}
const x2 = pixelsToPercent(latest, node.target.x);
const y = pixelsToPercent(latest, node.target.y);
return `${x2}% ${y}%`;
}
};
const correctBoxShadow = {
correct: (latest, { treeScale, projectionDelta }) => {
const original = latest;
const shadow = complex.parse(latest);
if (shadow.length > 5)
return original;
const template = complex.createTransformer(latest);
const offset2 = typeof shadow[0] !== "number" ? 1 : 0;
const xScale = projectionDelta.x.scale * treeScale.x;
const yScale = projectionDelta.y.scale * treeScale.y;
shadow[0 + offset2] /= xScale;
shadow[1 + offset2] /= yScale;
const averageScale = mixNumber$1(xScale, yScale, 0.5);
if (typeof shadow[2 + offset2] === "number")
shadow[2 + offset2] /= averageScale;
if (typeof shadow[3 + offset2] === "number")
shadow[3 + offset2] /= averageScale;
return template(shadow);
}
};
let hasTakenAnySnapshot = false;
class MeasureLayoutWithContext extends React.Component {
componentDidMount() {
const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
const { projection } = visualElement;
addScaleCorrector(defaultScaleCorrectors);
if (projection) {
if (layoutGroup.group)
layoutGroup.group.add(projection);
if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
switchLayoutGroup.register(projection);
}
if (hasTakenAnySnapshot) {
projection.root.didUpdate();
}
projection.addEventListener("animationComplete", () => {
this.safeToRemove();
});
projection.setOptions({
...projection.options,
onExitComplete: () => this.safeToRemove()
});
}
globalProjectionState.hasEverUpdated = true;
}
getSnapshotBeforeUpdate(prevProps) {
const { layoutDependency, visualElement, drag: drag2, isPresent } = this.props;
const { projection } = visualElement;
if (!projection)
return null;
projection.isPresent = isPresent;
hasTakenAnySnapshot = true;
if (drag2 || prevProps.layoutDependency !== layoutDependency || layoutDependency === void 0 || prevProps.isPresent !== isPresent) {
projection.willUpdate();
} else {
this.safeToRemove();
}
if (prevProps.isPresent !== isPresent) {
if (isPresent) {
projection.promote();
} else if (!projection.relegate()) {
frame.postRender(() => {
const stack = projection.getStack();
if (!stack || !stack.members.length) {
this.safeToRemove();
}
});
}
}
return null;
}
componentDidUpdate() {
const { projection } = this.props.visualElement;
if (projection) {
projection.root.didUpdate();
microtask.postRender(() => {
if (!projection.currentAnimation && projection.isLead()) {
this.safeToRemove();
}
});
}
}
componentWillUnmount() {
const { visualElement, layoutGroup, switchLayoutGroup: promoteContext } = this.props;
const { projection } = visualElement;
hasTakenAnySnapshot = true;
if (projection) {
projection.scheduleCheckAfterUnmount();
if (layoutGroup && layoutGroup.group)
layoutGroup.group.remove(projection);
if (promoteContext && promoteContext.deregister)
promoteContext.deregister(projection);
}
}
safeToRemove() {
const { safeToRemove } = this.props;
safeToRemove && safeToRemove();
}
render() {
return null;
}
}
function MeasureLayout(props) {
const [isPresent, safeToRemove] = usePresence();
const layoutGroup = React.useContext(LayoutGroupContext);
return jsxRuntimeExports.jsx(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent, safeToRemove });
}
const defaultScaleCorrectors = {
borderRadius: {
...correctBorderRadius,
applyTo: [
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius"
]
},
borderTopLeftRadius: correctBorderRadius,
borderTopRightRadius: correctBorderRadius,
borderBottomLeftRadius: correctBorderRadius,
borderBottomRightRadius: correctBorderRadius,
boxShadow: correctBoxShadow
};
function animateSingleValue(value, keyframes2, options) {
const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));
return motionValue$1.animation;
}
const compareByDepth = (a2, b) => a2.depth - b.depth;
class FlatTree {
constructor() {
this.children = [];
this.isDirty = false;
}
add(child) {
addUniqueItem(this.children, child);
this.isDirty = true;
}
remove(child) {
removeItem(this.children, child);
this.isDirty = true;
}
forEach(callback) {
this.isDirty && this.children.sort(compareByDepth);
this.isDirty = false;
this.children.forEach(callback);
}
}
function delay(callback, timeout) {
const start = time.now();
const checkElapsed = ({ timestamp }) => {
const elapsed = timestamp - start;
if (elapsed >= timeout) {
cancelFrame(checkElapsed);
callback(elapsed - timeout);
}
};
frame.setup(checkElapsed, true);
return () => cancelFrame(checkElapsed);
}
const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
const numBorders = borders.length;
const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
const isPx = (value) => typeof value === "number" || px.test(value);
function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
if (shouldCrossfadeOpacity) {
target.opacity = mixNumber$1(0, lead.opacity ?? 1, easeCrossfadeIn(progress2));
target.opacityExit = mixNumber$1(follow.opacity ?? 1, 0, easeCrossfadeOut(progress2));
} else if (isOnlyMember) {
target.opacity = mixNumber$1(follow.opacity ?? 1, lead.opacity ?? 1, progress2);
}
for (let i2 = 0; i2 < numBorders; i2++) {
const borderLabel = `border${borders[i2]}Radius`;
let followRadius = getRadius(follow, borderLabel);
let leadRadius = getRadius(lead, borderLabel);
if (followRadius === void 0 && leadRadius === void 0)
continue;
followRadius || (followRadius = 0);
leadRadius || (leadRadius = 0);
const canMix = followRadius === 0 || leadRadius === 0 || isPx(followRadius) === isPx(leadRadius);
if (canMix) {
target[borderLabel] = Math.max(mixNumber$1(asNumber(followRadius), asNumber(leadRadius), progress2), 0);
if (percent.test(leadRadius) || percent.test(followRadius)) {
target[borderLabel] += "%";
}
} else {
target[borderLabel] = leadRadius;
}
}
if (follow.rotate || lead.rotate) {
target.rotate = mixNumber$1(follow.rotate || 0, lead.rotate || 0, progress2);
}
}
function getRadius(values, radiusName) {
return values[radiusName] !== void 0 ? values[radiusName] : values.borderRadius;
}
const easeCrossfadeIn = compress(0, 0.5, circOut);
const easeCrossfadeOut = compress(0.5, 0.95, noop$1);
function compress(min2, max2, easing) {
return (p) => {
if (p < min2)
return 0;
if (p > max2)
return 1;
return easing( progress(min2, max2, p));
};
}
function copyAxisInto(axis, originAxis) {
axis.min = originAxis.min;
axis.max = originAxis.max;
}
function copyBoxInto(box, originBox) {
copyAxisInto(box.x, originBox.x);
copyAxisInto(box.y, originBox.y);
}
function copyAxisDeltaInto(delta, originDelta) {
delta.translate = originDelta.translate;
delta.scale = originDelta.scale;
delta.originPoint = originDelta.originPoint;
delta.origin = originDelta.origin;
}
function removePointDelta(point, translate, scale2, originPoint, boxScale) {
point -= translate;
point = scalePoint(point, 1 / scale2, originPoint);
if (boxScale !== void 0) {
point = scalePoint(point, 1 / boxScale, originPoint);
}
return point;
}
function removeAxisDelta(axis, translate = 0, scale2 = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
if (percent.test(translate)) {
translate = parseFloat(translate);
const relativeProgress = mixNumber$1(sourceAxis.min, sourceAxis.max, translate / 100);
translate = relativeProgress - sourceAxis.min;
}
if (typeof translate !== "number")
return;
let originPoint = mixNumber$1(originAxis.min, originAxis.max, origin);
if (axis === originAxis)
originPoint -= translate;
axis.min = removePointDelta(axis.min, translate, scale2, originPoint, boxScale);
axis.max = removePointDelta(axis.max, translate, scale2, originPoint, boxScale);
}
function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {
removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);
}
const xKeys = ["x", "scaleX", "originX"];
const yKeys = ["y", "scaleY", "originY"];
function removeBoxTransforms(box, transforms, originBox, sourceBox) {
removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : void 0, sourceBox ? sourceBox.x : void 0);
removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : void 0, sourceBox ? sourceBox.y : void 0);
}
function isAxisDeltaZero(delta) {
return delta.translate === 0 && delta.scale === 1;
}
function isDeltaZero(delta) {
return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
}
function axisEquals(a2, b) {
return a2.min === b.min && a2.max === b.max;
}
function boxEquals(a2, b) {
return axisEquals(a2.x, b.x) && axisEquals(a2.y, b.y);
}
function axisEqualsRounded(a2, b) {
return Math.round(a2.min) === Math.round(b.min) && Math.round(a2.max) === Math.round(b.max);
}
function boxEqualsRounded(a2, b) {
return axisEqualsRounded(a2.x, b.x) && axisEqualsRounded(a2.y, b.y);
}
function aspectRatio(box) {
return calcLength(box.x) / calcLength(box.y);
}
function axisDeltaEquals(a2, b) {
return a2.translate === b.translate && a2.scale === b.scale && a2.originPoint === b.originPoint;
}
class NodeStack {
constructor() {
this.members = [];
}
add(node) {
addUniqueItem(this.members, node);
node.scheduleRender();
}
remove(node) {
removeItem(this.members, node);
if (node === this.prevLead) {
this.prevLead = void 0;
}
if (node === this.lead) {
const prevLead = this.members[this.members.length - 1];
if (prevLead) {
this.promote(prevLead);
}
}
}
relegate(node) {
const indexOfNode = this.members.findIndex((member) => node === member);
if (indexOfNode === 0)
return false;
let prevLead;
for (let i2 = indexOfNode; i2 >= 0; i2--) {
const member = this.members[i2];
if (member.isPresent !== false) {
prevLead = member;
break;
}
}
if (prevLead) {
this.promote(prevLead);
return true;
} else {
return false;
}
}
promote(node, preserveFollowOpacity) {
const prevLead = this.lead;
if (node === prevLead)
return;
this.prevLead = prevLead;
this.lead = node;
node.show();
if (prevLead) {
prevLead.instance && prevLead.scheduleRender();
node.scheduleRender();
node.resumeFrom = prevLead;
if (preserveFollowOpacity) {
node.resumeFrom.preserveOpacity = true;
}
if (prevLead.snapshot) {
node.snapshot = prevLead.snapshot;
node.snapshot.latestValues = prevLead.animationValues || prevLead.latestValues;
}
if (node.root && node.root.isUpdating) {
node.isLayoutDirty = true;
}
const { crossfade } = node.options;
if (crossfade === false) {
prevLead.hide();
}
}
}
exitAnimationComplete() {
this.members.forEach((node) => {
const { options, resumingFrom } = node;
options.onExitComplete && options.onExitComplete();
if (resumingFrom) {
resumingFrom.options.onExitComplete && resumingFrom.options.onExitComplete();
}
});
}
scheduleRender() {
this.members.forEach((node) => {
node.instance && node.scheduleRender(false);
});
}
removeLeadSnapshot() {
if (this.lead && this.lead.snapshot) {
this.lead.snapshot = void 0;
}
}
}
function buildProjectionTransform(delta, treeScale, latestTransform) {
let transform = "";
const xTranslate = delta.x.translate / treeScale.x;
const yTranslate = delta.y.translate / treeScale.y;
const zTranslate = latestTransform?.z || 0;
if (xTranslate || yTranslate || zTranslate) {
transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
}
if (treeScale.x !== 1 || treeScale.y !== 1) {
transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
}
if (latestTransform) {
const { transformPerspective, rotate: rotate2, rotateX, rotateY, skewX, skewY } = latestTransform;
if (transformPerspective)
transform = `perspective(${transformPerspective}px) ${transform}`;
if (rotate2)
transform += `rotate(${rotate2}deg) `;
if (rotateX)
transform += `rotateX(${rotateX}deg) `;
if (rotateY)
transform += `rotateY(${rotateY}deg) `;
if (skewX)
transform += `skewX(${skewX}deg) `;
if (skewY)
transform += `skewY(${skewY}deg) `;
}
const elementScaleX = delta.x.scale * treeScale.x;
const elementScaleY = delta.y.scale * treeScale.y;
if (elementScaleX !== 1 || elementScaleY !== 1) {
transform += `scale(${elementScaleX}, ${elementScaleY})`;
}
return transform || "none";
}
const transformAxes = ["", "X", "Y", "Z"];
const animationTarget = 1e3;
let id = 0;
function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {
const { latestValues } = visualElement;
if (latestValues[key]) {
values[key] = latestValues[key];
visualElement.setStaticValue(key, 0);
if (sharedAnimationValues) {
sharedAnimationValues[key] = 0;
}
}
}
function cancelTreeOptimisedTransformAnimations(projectionNode) {
projectionNode.hasCheckedOptimisedAppear = true;
if (projectionNode.root === projectionNode)
return;
const { visualElement } = projectionNode.options;
if (!visualElement)
return;
const appearId = getOptimisedAppearId(visualElement);
if (window.MotionHasOptimisedAnimation(appearId, "transform")) {
const { layout: layout2, layoutId } = projectionNode.options;
window.MotionCancelOptimisedAnimation(appearId, "transform", frame, !(layout2 || layoutId));
}
const { parent } = projectionNode;
if (parent && !parent.hasCheckedOptimisedAppear) {
cancelTreeOptimisedTransformAnimations(parent);
}
}
function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform }) {
return class ProjectionNode {
constructor(latestValues = {}, parent = defaultParent?.()) {
this.id = id++;
this.animationId = 0;
this.animationCommitId = 0;
this.children = new Set();
this.options = {};
this.isTreeAnimating = false;
this.isAnimationBlocked = false;
this.isLayoutDirty = false;
this.isProjectionDirty = false;
this.isSharedProjectionDirty = false;
this.isTransformDirty = false;
this.updateManuallyBlocked = false;
this.updateBlockedByResize = false;
this.isUpdating = false;
this.isSVG = false;
this.needsReset = false;
this.shouldResetTransform = false;
this.hasCheckedOptimisedAppear = false;
this.treeScale = { x: 1, y: 1 };
this.eventHandlers = new Map();
this.hasTreeAnimated = false;
this.updateScheduled = false;
this.scheduleUpdate = () => this.update();
this.projectionUpdateScheduled = false;
this.checkUpdateFailed = () => {
if (this.isUpdating) {
this.isUpdating = false;
this.clearAllSnapshots();
}
};
this.updateProjection = () => {
this.projectionUpdateScheduled = false;
this.nodes.forEach(propagateDirtyNodes);
this.nodes.forEach(resolveTargetDelta);
this.nodes.forEach(calcProjection);
this.nodes.forEach(cleanDirtyNodes);
};
this.resolvedRelativeTargetAt = 0;
this.hasProjected = false;
this.isVisible = true;
this.animationProgress = 0;
this.sharedNodes = new Map();
this.latestValues = latestValues;
this.root = parent ? parent.root || parent : this;
this.path = parent ? [...parent.path, parent] : [];
this.parent = parent;
this.depth = parent ? parent.depth + 1 : 0;
for (let i2 = 0; i2 < this.path.length; i2++) {
this.path[i2].shouldResetTransform = true;
}
if (this.root === this)
this.nodes = new FlatTree();
}
addEventListener(name, handler) {
if (!this.eventHandlers.has(name)) {
this.eventHandlers.set(name, new SubscriptionManager());
}
return this.eventHandlers.get(name).add(handler);
}
notifyListeners(name, ...args) {
const subscriptionManager = this.eventHandlers.get(name);
subscriptionManager && subscriptionManager.notify(...args);
}
hasListeners(name) {
return this.eventHandlers.has(name);
}
mount(instance) {
if (this.instance)
return;
this.isSVG = isSVGElement(instance) && !isSVGSVGElement(instance);
this.instance = instance;
const { layoutId, layout: layout2, visualElement } = this.options;
if (visualElement && !visualElement.current) {
visualElement.mount(instance);
}
this.root.nodes.add(this);
this.parent && this.parent.children.add(this);
if (this.root.hasTreeAnimated && (layout2 || layoutId)) {
this.isLayoutDirty = true;
}
if (attachResizeListener) {
let cancelDelay;
let innerWidth2 = 0;
const resizeUnblockUpdate = () => this.root.updateBlockedByResize = false;
frame.read(() => {
innerWidth2 = window.innerWidth;
});
attachResizeListener(instance, () => {
const newInnerWidth = window.innerWidth;
if (newInnerWidth === innerWidth2)
return;
innerWidth2 = newInnerWidth;
this.root.updateBlockedByResize = true;
cancelDelay && cancelDelay();
cancelDelay = delay(resizeUnblockUpdate, 250);
if (globalProjectionState.hasAnimatedSinceResize) {
globalProjectionState.hasAnimatedSinceResize = false;
this.nodes.forEach(finishAnimation);
}
});
}
if (layoutId) {
this.root.registerSharedNode(layoutId, this);
}
if (this.options.animate !== false && visualElement && (layoutId || layout2)) {
this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout }) => {
if (this.isTreeAnimationBlocked()) {
this.target = void 0;
this.relativeTarget = void 0;
return;
}
const layoutTransition = this.options.transition || visualElement.getDefaultTransition() || defaultLayoutTransition;
const { onLayoutAnimationStart, onLayoutAnimationComplete } = visualElement.getProps();
const hasTargetChanged = !this.targetLayout || !boxEqualsRounded(this.targetLayout, newLayout);
const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
if (this.options.layoutRoot || this.resumeFrom || hasOnlyRelativeTargetChanged || hasLayoutChanged && (hasTargetChanged || !this.currentAnimation)) {
if (this.resumeFrom) {
this.resumingFrom = this.resumeFrom;
this.resumingFrom.resumingFrom = void 0;
}
const animationOptions = {
...getValueTransition(layoutTransition, "layout"),
onPlay: onLayoutAnimationStart,
onComplete: onLayoutAnimationComplete
};
if (visualElement.shouldReduceMotion || this.options.layoutRoot) {
animationOptions.delay = 0;
animationOptions.type = false;
}
this.startAnimation(animationOptions);
this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
} else {
if (!hasLayoutChanged) {
finishAnimation(this);
}
if (this.isLead() && this.options.onExitComplete) {
this.options.onExitComplete();
}
}
this.targetLayout = newLayout;
});
}
}
unmount() {
this.options.layoutId && this.willUpdate();
this.root.nodes.remove(this);
const stack = this.getStack();
stack && stack.remove(this);
this.parent && this.parent.children.delete(this);
this.instance = void 0;
this.eventHandlers.clear();
cancelFrame(this.updateProjection);
}
blockUpdate() {
this.updateManuallyBlocked = true;
}
unblockUpdate() {
this.updateManuallyBlocked = false;
}
isUpdateBlocked() {
return this.updateManuallyBlocked || this.updateBlockedByResize;
}
isTreeAnimationBlocked() {
return this.isAnimationBlocked || this.parent && this.parent.isTreeAnimationBlocked() || false;
}
startUpdate() {
if (this.isUpdateBlocked())
return;
this.isUpdating = true;
this.nodes && this.nodes.forEach(resetSkewAndRotation);
this.animationId++;
}
getTransformTemplate() {
const { visualElement } = this.options;
return visualElement && visualElement.getProps().transformTemplate;
}
willUpdate(shouldNotifyListeners = true) {
this.root.hasTreeAnimated = true;
if (this.root.isUpdateBlocked()) {
this.options.onExitComplete && this.options.onExitComplete();
return;
}
if (window.MotionCancelOptimisedAnimation && !this.hasCheckedOptimisedAppear) {
cancelTreeOptimisedTransformAnimations(this);
}
!this.root.isUpdating && this.root.startUpdate();
if (this.isLayoutDirty)
return;
this.isLayoutDirty = true;
for (let i2 = 0; i2 < this.path.length; i2++) {
const node = this.path[i2];
node.shouldResetTransform = true;
node.updateScroll("snapshot");
if (node.options.layoutRoot) {
node.willUpdate(false);
}
}
const { layoutId, layout: layout2 } = this.options;
if (layoutId === void 0 && !layout2)
return;
const transformTemplate = this.getTransformTemplate();
this.prevTransformTemplateValue = transformTemplate ? transformTemplate(this.latestValues, "") : void 0;
this.updateSnapshot();
shouldNotifyListeners && this.notifyListeners("willUpdate");
}
update() {
this.updateScheduled = false;
const updateWasBlocked = this.isUpdateBlocked();
if (updateWasBlocked) {
this.unblockUpdate();
this.clearAllSnapshots();
this.nodes.forEach(clearMeasurements);
return;
}
if (this.animationId <= this.animationCommitId) {
this.nodes.forEach(clearIsLayoutDirty);
return;
}
this.animationCommitId = this.animationId;
if (!this.isUpdating) {
this.nodes.forEach(clearIsLayoutDirty);
} else {
this.isUpdating = false;
this.nodes.forEach(resetTransformStyle);
this.nodes.forEach(updateLayout);
this.nodes.forEach(notifyLayoutUpdate);
}
this.clearAllSnapshots();
const now2 = time.now();
frameData.delta = clamp$1(0, 1e3 / 60, now2 - frameData.timestamp);
frameData.timestamp = now2;
frameData.isProcessing = true;
frameSteps.update.process(frameData);
frameSteps.preRender.process(frameData);
frameSteps.render.process(frameData);
frameData.isProcessing = false;
}
didUpdate() {
if (!this.updateScheduled) {
this.updateScheduled = true;
microtask.read(this.scheduleUpdate);
}
}
clearAllSnapshots() {
this.nodes.forEach(clearSnapshot);
this.sharedNodes.forEach(removeLeadSnapshots);
}
scheduleUpdateProjection() {
if (!this.projectionUpdateScheduled) {
this.projectionUpdateScheduled = true;
frame.preRender(this.updateProjection, false, true);
}
}
scheduleCheckAfterUnmount() {
frame.postRender(() => {
if (this.isLayoutDirty) {
this.root.didUpdate();
} else {
this.root.checkUpdateFailed();
}
});
}
updateSnapshot() {
if (this.snapshot || !this.instance)
return;
this.snapshot = this.measure();
if (this.snapshot && !calcLength(this.snapshot.measuredBox.x) && !calcLength(this.snapshot.measuredBox.y)) {
this.snapshot = void 0;
}
}
updateLayout() {
if (!this.instance)
return;
this.updateScroll();
if (!(this.options.alwaysMeasureLayout && this.isLead()) && !this.isLayoutDirty) {
return;
}
if (this.resumeFrom && !this.resumeFrom.instance) {
for (let i2 = 0; i2 < this.path.length; i2++) {
const node = this.path[i2];
node.updateScroll();
}
}
const prevLayout = this.layout;
this.layout = this.measure(false);
this.layoutCorrected = createBox();
this.isLayoutDirty = false;
this.projectionDelta = void 0;
this.notifyListeners("measure", this.layout.layoutBox);
const { visualElement } = this.options;
visualElement && visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : void 0);
}
updateScroll(phase = "measure") {
let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
if (this.scroll && this.scroll.animationId === this.root.animationId && this.scroll.phase === phase) {
needsMeasurement = false;
}
if (needsMeasurement && this.instance) {
const isRoot = checkIsScrollRoot(this.instance);
this.scroll = {
animationId: this.root.animationId,
phase,
isRoot,
offset: measureScroll(this.instance),
wasRoot: this.scroll ? this.scroll.isRoot : isRoot
};
}
}
resetTransform() {
if (!resetTransform)
return;
const isResetRequested = this.isLayoutDirty || this.shouldResetTransform || this.options.alwaysMeasureLayout;
const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
const transformTemplate = this.getTransformTemplate();
const transformTemplateValue = transformTemplate ? transformTemplate(this.latestValues, "") : void 0;
const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
if (isResetRequested && this.instance && (hasProjection || hasTransform(this.latestValues) || transformTemplateHasChanged)) {
resetTransform(this.instance, transformTemplateValue);
this.shouldResetTransform = false;
this.scheduleRender();
}
}
measure(removeTransform = true) {
const pageBox = this.measurePageBox();
let layoutBox = this.removeElementScroll(pageBox);
if (removeTransform) {
layoutBox = this.removeTransform(layoutBox);
}
roundBox(layoutBox);
return {
animationId: this.root.animationId,
measuredBox: pageBox,
layoutBox,
latestValues: {},
source: this.id
};
}
measurePageBox() {
const { visualElement } = this.options;
if (!visualElement)
return createBox();
const box = visualElement.measureViewportBox();
const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot);
if (!wasInScrollRoot) {
const { scroll } = this.root;
if (scroll) {
translateAxis(box.x, scroll.offset.x);
translateAxis(box.y, scroll.offset.y);
}
}
return box;
}
removeElementScroll(box) {
const boxWithoutScroll = createBox();
copyBoxInto(boxWithoutScroll, box);
if (this.scroll?.wasRoot) {
return boxWithoutScroll;
}
for (let i2 = 0; i2 < this.path.length; i2++) {
const node = this.path[i2];
const { scroll, options } = node;
if (node !== this.root && scroll && options.layoutScroll) {
if (scroll.wasRoot) {
copyBoxInto(boxWithoutScroll, box);
}
translateAxis(boxWithoutScroll.x, scroll.offset.x);
translateAxis(boxWithoutScroll.y, scroll.offset.y);
}
}
return boxWithoutScroll;
}
applyTransform(box, transformOnly = false) {
const withTransforms = createBox();
copyBoxInto(withTransforms, box);
for (let i2 = 0; i2 < this.path.length; i2++) {
const node = this.path[i2];
if (!transformOnly && node.options.layoutScroll && node.scroll && node !== node.root) {
transformBox(withTransforms, {
x: -node.scroll.offset.x,
y: -node.scroll.offset.y
});
}
if (!hasTransform(node.latestValues))
continue;
transformBox(withTransforms, node.latestValues);
}
if (hasTransform(this.latestValues)) {
transformBox(withTransforms, this.latestValues);
}
return withTransforms;
}
removeTransform(box) {
const boxWithoutTransform = createBox();
copyBoxInto(boxWithoutTransform, box);
for (let i2 = 0; i2 < this.path.length; i2++) {
const node = this.path[i2];
if (!node.instance)
continue;
if (!hasTransform(node.latestValues))
continue;
hasScale(node.latestValues) && node.updateSnapshot();
const sourceBox = createBox();
const nodeBox = node.measurePageBox();
copyBoxInto(sourceBox, nodeBox);
removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : void 0, sourceBox);
}
if (hasTransform(this.latestValues)) {
removeBoxTransforms(boxWithoutTransform, this.latestValues);
}
return boxWithoutTransform;
}
setTargetDelta(delta) {
this.targetDelta = delta;
this.root.scheduleUpdateProjection();
this.isProjectionDirty = true;
}
setOptions(options) {
this.options = {
...this.options,
...options,
crossfade: options.crossfade !== void 0 ? options.crossfade : true
};
}
clearMeasurements() {
this.scroll = void 0;
this.layout = void 0;
this.snapshot = void 0;
this.prevTransformTemplateValue = void 0;
this.targetDelta = void 0;
this.target = void 0;
this.isLayoutDirty = false;
}
forceRelativeParentToResolveTarget() {
if (!this.relativeParent)
return;
if (this.relativeParent.resolvedRelativeTargetAt !== frameData.timestamp) {
this.relativeParent.resolveTargetDelta(true);
}
}
resolveTargetDelta(forceRecalculation = false) {
const lead = this.getLead();
this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
const isShared = Boolean(this.resumingFrom) || this !== lead;
const canSkip = !(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || this.parent?.isProjectionDirty || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize);
if (canSkip)
return;
const { layout: layout2, layoutId } = this.options;
if (!this.layout || !(layout2 || layoutId))
return;
this.resolvedRelativeTargetAt = frameData.timestamp;
if (!this.targetDelta && !this.relativeTarget) {
const relativeParent = this.getClosestProjectingParent();
if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
this.relativeParent = relativeParent;
this.forceRelativeParentToResolveTarget();
this.relativeTarget = createBox();
this.relativeTargetOrigin = createBox();
calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
} else {
this.relativeParent = this.relativeTarget = void 0;
}
}
if (!this.relativeTarget && !this.targetDelta)
return;
if (!this.target) {
this.target = createBox();
this.targetWithTransforms = createBox();
}
if (this.relativeTarget && this.relativeTargetOrigin && this.relativeParent && this.relativeParent.target) {
this.forceRelativeParentToResolveTarget();
calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
} else if (this.targetDelta) {
if (Boolean(this.resumingFrom)) {
this.target = this.applyTransform(this.layout.layoutBox);
} else {
copyBoxInto(this.target, this.layout.layoutBox);
}
applyBoxDelta(this.target, this.targetDelta);
} else {
copyBoxInto(this.target, this.layout.layoutBox);
}
if (this.attemptToResolveRelativeTarget) {
this.attemptToResolveRelativeTarget = false;
const relativeParent = this.getClosestProjectingParent();
if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
this.relativeParent = relativeParent;
this.forceRelativeParentToResolveTarget();
this.relativeTarget = createBox();
this.relativeTargetOrigin = createBox();
calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
} else {
this.relativeParent = this.relativeTarget = void 0;
}
}
}
getClosestProjectingParent() {
if (!this.parent || hasScale(this.parent.latestValues) || has2DTranslate(this.parent.latestValues)) {
return void 0;
}
if (this.parent.isProjecting()) {
return this.parent;
} else {
return this.parent.getClosestProjectingParent();
}
}
isProjecting() {
return Boolean((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
}
calcProjection() {
const lead = this.getLead();
const isShared = Boolean(this.resumingFrom) || this !== lead;
let canSkip = true;
if (this.isProjectionDirty || this.parent?.isProjectionDirty) {
canSkip = false;
}
if (isShared && (this.isSharedProjectionDirty || this.isTransformDirty)) {
canSkip = false;
}
if (this.resolvedRelativeTargetAt === frameData.timestamp) {
canSkip = false;
}
if (canSkip)
return;
const { layout: layout2, layoutId } = this.options;
this.isTreeAnimating = Boolean(this.parent && this.parent.isTreeAnimating || this.currentAnimation || this.pendingAnimation);
if (!this.isTreeAnimating) {
this.targetDelta = this.relativeTarget = void 0;
}
if (!this.layout || !(layout2 || layoutId))
return;
copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
const prevTreeScaleX = this.treeScale.x;
const prevTreeScaleY = this.treeScale.y;
applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
if (lead.layout && !lead.target && (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {
lead.target = lead.layout.layoutBox;
lead.targetWithTransforms = createBox();
}
const { target } = lead;
if (!target) {
if (this.prevProjectionDelta) {
this.createProjectionDeltas();
this.scheduleRender();
}
return;
}
if (!this.projectionDelta || !this.prevProjectionDelta) {
this.createProjectionDeltas();
} else {
copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x);
copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y);
}
calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
if (this.treeScale.x !== prevTreeScaleX || this.treeScale.y !== prevTreeScaleY || !axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) || !axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) {
this.hasProjected = true;
this.scheduleRender();
this.notifyListeners("projectionUpdate", target);
}
}
hide() {
this.isVisible = false;
}
show() {
this.isVisible = true;
}
scheduleRender(notifyAll = true) {
this.options.visualElement?.scheduleRender();
if (notifyAll) {
const stack = this.getStack();
stack && stack.scheduleRender();
}
if (this.resumingFrom && !this.resumingFrom.instance) {
this.resumingFrom = void 0;
}
}
createProjectionDeltas() {
this.prevProjectionDelta = createDelta();
this.projectionDelta = createDelta();
this.projectionDeltaWithTransform = createDelta();
}
setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
const snapshot = this.snapshot;
const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
const mixedValues = { ...this.latestValues };
const targetDelta = createDelta();
if (!this.relativeParent || !this.relativeParent.options.layoutRoot) {
this.relativeTarget = this.relativeTargetOrigin = void 0;
}
this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
const relativeLayout = createBox();
const snapshotSource = snapshot ? snapshot.source : void 0;
const layoutSource = this.layout ? this.layout.source : void 0;
const isSharedLayoutAnimation = snapshotSource !== layoutSource;
const stack = this.getStack();
const isOnlyMember = !stack || stack.members.length <= 1;
const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation && !isOnlyMember && this.options.crossfade === true && !this.path.some(hasOpacityCrossfade));
this.animationProgress = 0;
let prevRelativeTarget;
this.mixTargetDelta = (latest) => {
const progress2 = latest / 1e3;
mixAxisDelta(targetDelta.x, delta.x, progress2);
mixAxisDelta(targetDelta.y, delta.y, progress2);
this.setTargetDelta(targetDelta);
if (this.relativeTarget && this.relativeTargetOrigin && this.layout && this.relativeParent && this.relativeParent.layout) {
calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress2);
if (prevRelativeTarget && boxEquals(this.relativeTarget, prevRelativeTarget)) {
this.isProjectionDirty = false;
}
if (!prevRelativeTarget)
prevRelativeTarget = createBox();
copyBoxInto(prevRelativeTarget, this.relativeTarget);
}
if (isSharedLayoutAnimation) {
this.animationValues = mixedValues;
mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress2, shouldCrossfadeOpacity, isOnlyMember);
}
this.root.scheduleUpdateProjection();
this.scheduleRender();
this.animationProgress = progress2;
};
this.mixTargetDelta(this.options.layoutRoot ? 1e3 : 0);
}
startAnimation(options) {
this.notifyListeners("animationStart");
this.currentAnimation?.stop();
this.resumingFrom?.currentAnimation?.stop();
if (this.pendingAnimation) {
cancelFrame(this.pendingAnimation);
this.pendingAnimation = void 0;
}
this.pendingAnimation = frame.update(() => {
globalProjectionState.hasAnimatedSinceResize = true;
this.motionValue || (this.motionValue = motionValue(0));
this.currentAnimation = animateSingleValue(this.motionValue, [0, 1e3], {
...options,
velocity: 0,
isSync: true,
onUpdate: (latest) => {
this.mixTargetDelta(latest);
options.onUpdate && options.onUpdate(latest);
},
onStop: () => {
},
onComplete: () => {
options.onComplete && options.onComplete();
this.completeAnimation();
}
});
if (this.resumingFrom) {
this.resumingFrom.currentAnimation = this.currentAnimation;
}
this.pendingAnimation = void 0;
});
}
completeAnimation() {
if (this.resumingFrom) {
this.resumingFrom.currentAnimation = void 0;
this.resumingFrom.preserveOpacity = void 0;
}
const stack = this.getStack();
stack && stack.exitAnimationComplete();
this.resumingFrom = this.currentAnimation = this.animationValues = void 0;
this.notifyListeners("animationComplete");
}
finishAnimation() {
if (this.currentAnimation) {
this.mixTargetDelta && this.mixTargetDelta(animationTarget);
this.currentAnimation.stop();
}
this.completeAnimation();
}
applyTransformsToTarget() {
const lead = this.getLead();
let { targetWithTransforms, target, layout: layout2, latestValues } = lead;
if (!targetWithTransforms || !target || !layout2)
return;
if (this !== lead && this.layout && layout2 && shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout2.layoutBox)) {
target = this.target || createBox();
const xLength = calcLength(this.layout.layoutBox.x);
target.x.min = lead.target.x.min;
target.x.max = target.x.min + xLength;
const yLength = calcLength(this.layout.layoutBox.y);
target.y.min = lead.target.y.min;
target.y.max = target.y.min + yLength;
}
copyBoxInto(targetWithTransforms, target);
transformBox(targetWithTransforms, latestValues);
calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
}
registerSharedNode(layoutId, node) {
if (!this.sharedNodes.has(layoutId)) {
this.sharedNodes.set(layoutId, new NodeStack());
}
const stack = this.sharedNodes.get(layoutId);
stack.add(node);
const config2 = node.options.initialPromotionConfig;
node.promote({
transition: config2 ? config2.transition : void 0,
preserveFollowOpacity: config2 && config2.shouldPreserveFollowOpacity ? config2.shouldPreserveFollowOpacity(node) : void 0
});
}
isLead() {
const stack = this.getStack();
return stack ? stack.lead === this : true;
}
getLead() {
const { layoutId } = this.options;
return layoutId ? this.getStack()?.lead || this : this;
}
getPrevLead() {
const { layoutId } = this.options;
return layoutId ? this.getStack()?.prevLead : void 0;
}
getStack() {
const { layoutId } = this.options;
if (layoutId)
return this.root.sharedNodes.get(layoutId);
}
promote({ needsReset, transition, preserveFollowOpacity } = {}) {
const stack = this.getStack();
if (stack)
stack.promote(this, preserveFollowOpacity);
if (needsReset) {
this.projectionDelta = void 0;
this.needsReset = true;
}
if (transition)
this.setOptions({ transition });
}
relegate() {
const stack = this.getStack();
if (stack) {
return stack.relegate(this);
} else {
return false;
}
}
resetSkewAndRotation() {
const { visualElement } = this.options;
if (!visualElement)
return;
let hasDistortingTransform = false;
const { latestValues } = visualElement;
if (latestValues.z || latestValues.rotate || latestValues.rotateX || latestValues.rotateY || latestValues.rotateZ || latestValues.skewX || latestValues.skewY) {
hasDistortingTransform = true;
}
if (!hasDistortingTransform)
return;
const resetValues = {};
if (latestValues.z) {
resetDistortingTransform("z", visualElement, resetValues, this.animationValues);
}
for (let i2 = 0; i2 < transformAxes.length; i2++) {
resetDistortingTransform(`rotate${transformAxes[i2]}`, visualElement, resetValues, this.animationValues);
resetDistortingTransform(`skew${transformAxes[i2]}`, visualElement, resetValues, this.animationValues);
}
visualElement.render();
for (const key in resetValues) {
visualElement.setStaticValue(key, resetValues[key]);
if (this.animationValues) {
this.animationValues[key] = resetValues[key];
}
}
visualElement.scheduleRender();
}
applyProjectionStyles(targetStyle, styleProp) {
if (!this.instance || this.isSVG)
return;
if (!this.isVisible) {
targetStyle.visibility = "hidden";
return;
}
const transformTemplate = this.getTransformTemplate();
if (this.needsReset) {
this.needsReset = false;
targetStyle.visibility = "";
targetStyle.opacity = "";
targetStyle.pointerEvents = resolveMotionValue(styleProp?.pointerEvents) || "";
targetStyle.transform = transformTemplate ? transformTemplate(this.latestValues, "") : "none";
return;
}
const lead = this.getLead();
if (!this.projectionDelta || !this.layout || !lead.target) {
if (this.options.layoutId) {
targetStyle.opacity = this.latestValues.opacity !== void 0 ? this.latestValues.opacity : 1;
targetStyle.pointerEvents = resolveMotionValue(styleProp?.pointerEvents) || "";
}
if (this.hasProjected && !hasTransform(this.latestValues)) {
targetStyle.transform = transformTemplate ? transformTemplate({}, "") : "none";
this.hasProjected = false;
}
return;
}
targetStyle.visibility = "";
const valuesToRender = lead.animationValues || lead.latestValues;
this.applyTransformsToTarget();
let transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
if (transformTemplate) {
transform = transformTemplate(valuesToRender, transform);
}
targetStyle.transform = transform;
const { x: x2, y } = this.projectionDelta;
targetStyle.transformOrigin = `${x2.origin * 100}% ${y.origin * 100}% 0`;
if (lead.animationValues) {
targetStyle.opacity = lead === this ? valuesToRender.opacity ?? this.latestValues.opacity ?? 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit;
} else {
targetStyle.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
}
for (const key in scaleCorrectors) {
if (valuesToRender[key] === void 0)
continue;
const { correct, applyTo, isCSSVariable } = scaleCorrectors[key];
const corrected = transform === "none" ? valuesToRender[key] : correct(valuesToRender[key], lead);
if (applyTo) {
const num = applyTo.length;
for (let i2 = 0; i2 < num; i2++) {
targetStyle[applyTo[i2]] = corrected;
}
} else {
if (isCSSVariable) {
this.options.visualElement.renderState.vars[key] = corrected;
} else {
targetStyle[key] = corrected;
}
}
}
if (this.options.layoutId) {
targetStyle.pointerEvents = lead === this ? resolveMotionValue(styleProp?.pointerEvents) || "" : "none";
}
}
clearSnapshot() {
this.resumeFrom = this.snapshot = void 0;
}
resetTree() {
this.root.nodes.forEach((node) => node.currentAnimation?.stop());
this.root.nodes.forEach(clearMeasurements);
this.root.sharedNodes.clear();
}
};
}
function updateLayout(node) {
node.updateLayout();
}
function notifyLayoutUpdate(node) {
const snapshot = node.resumeFrom?.snapshot || node.snapshot;
if (node.isLead() && node.layout && snapshot && node.hasListeners("didUpdate")) {
const { layoutBox: layout2, measuredBox: measuredLayout } = node.layout;
const { animationType } = node.options;
const isShared = snapshot.source !== node.layout.source;
if (animationType === "size") {
eachAxis((axis) => {
const axisSnapshot = isShared ? snapshot.measuredBox[axis] : snapshot.layoutBox[axis];
const length = calcLength(axisSnapshot);
axisSnapshot.min = layout2[axis].min;
axisSnapshot.max = axisSnapshot.min + length;
});
} else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout2)) {
eachAxis((axis) => {
const axisSnapshot = isShared ? snapshot.measuredBox[axis] : snapshot.layoutBox[axis];
const length = calcLength(layout2[axis]);
axisSnapshot.max = axisSnapshot.min + length;
if (node.relativeTarget && !node.currentAnimation) {
node.isProjectionDirty = true;
node.relativeTarget[axis].max = node.relativeTarget[axis].min + length;
}
});
}
const layoutDelta = createDelta();
calcBoxDelta(layoutDelta, layout2, snapshot.layoutBox);
const visualDelta = createDelta();
if (isShared) {
calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
} else {
calcBoxDelta(visualDelta, layout2, snapshot.layoutBox);
}
const hasLayoutChanged = !isDeltaZero(layoutDelta);
let hasRelativeLayoutChanged = false;
if (!node.resumeFrom) {
const relativeParent = node.getClosestProjectingParent();
if (relativeParent && !relativeParent.resumeFrom) {
const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
if (parentSnapshot && parentLayout) {
const relativeSnapshot = createBox();
calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
const relativeLayout = createBox();
calcRelativePosition(relativeLayout, layout2, parentLayout.layoutBox);
if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
hasRelativeLayoutChanged = true;
}
if (relativeParent.options.layoutRoot) {
node.relativeTarget = relativeLayout;
node.relativeTargetOrigin = relativeSnapshot;
node.relativeParent = relativeParent;
}
}
}
}
node.notifyListeners("didUpdate", {
layout: layout2,
snapshot,
delta: visualDelta,
layoutDelta,
hasLayoutChanged,
hasRelativeLayoutChanged
});
} else if (node.isLead()) {
const { onExitComplete } = node.options;
onExitComplete && onExitComplete();
}
node.options.transition = void 0;
}
function propagateDirtyNodes(node) {
if (!node.parent)
return;
if (!node.isProjecting()) {
node.isProjectionDirty = node.parent.isProjectionDirty;
}
node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty || node.parent.isProjectionDirty || node.parent.isSharedProjectionDirty));
node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
}
function cleanDirtyNodes(node) {
node.isProjectionDirty = node.isSharedProjectionDirty = node.isTransformDirty = false;
}
function clearSnapshot(node) {
node.clearSnapshot();
}
function clearMeasurements(node) {
node.clearMeasurements();
}
function clearIsLayoutDirty(node) {
node.isLayoutDirty = false;
}
function resetTransformStyle(node) {
const { visualElement } = node.options;
if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
visualElement.notify("BeforeLayoutMeasure");
}
node.resetTransform();
}
function finishAnimation(node) {
node.finishAnimation();
node.targetDelta = node.relativeTarget = node.target = void 0;
node.isProjectionDirty = true;
}
function resolveTargetDelta(node) {
node.resolveTargetDelta();
}
function calcProjection(node) {
node.calcProjection();
}
function resetSkewAndRotation(node) {
node.resetSkewAndRotation();
}
function removeLeadSnapshots(stack) {
stack.removeLeadSnapshot();
}
function mixAxisDelta(output, delta, p) {
output.translate = mixNumber$1(delta.translate, 0, p);
output.scale = mixNumber$1(delta.scale, 1, p);
output.origin = delta.origin;
output.originPoint = delta.originPoint;
}
function mixAxis(output, from, to, p) {
output.min = mixNumber$1(from.min, to.min, p);
output.max = mixNumber$1(from.max, to.max, p);
}
function mixBox(output, from, to, p) {
mixAxis(output.x, from.x, to.x, p);
mixAxis(output.y, from.y, to.y, p);
}
function hasOpacityCrossfade(node) {
return node.animationValues && node.animationValues.opacityExit !== void 0;
}
const defaultLayoutTransition = {
duration: 0.45,
ease: [0.4, 0, 0.1, 1]
};
const userAgentContains = (string2) => typeof navigator !== "undefined" && navigator.userAgent && navigator.userAgent.toLowerCase().includes(string2);
const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") ? Math.round : noop$1;
function roundAxis(axis) {
axis.min = roundPoint(axis.min);
axis.max = roundPoint(axis.max);
}
function roundBox(box) {
roundAxis(box.x);
roundAxis(box.y);
}
function shouldAnimatePositionOnly(animationType, snapshot, layout2) {
return animationType === "position" || animationType === "preserve-aspect" && !isNear(aspectRatio(snapshot), aspectRatio(layout2), 0.2);
}
function checkNodeWasScrollRoot(node) {
return node !== node.root && node.scroll?.wasRoot;
}
const DocumentProjectionNode = createProjectionNode({
attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
measureScroll: () => ({
x: document.documentElement.scrollLeft || document.body.scrollLeft,
y: document.documentElement.scrollTop || document.body.scrollTop
}),
checkIsScrollRoot: () => true
});
const rootProjectionNode = {
current: void 0
};
const HTMLProjectionNode = createProjectionNode({
measureScroll: (instance) => ({
x: instance.scrollLeft,
y: instance.scrollTop
}),
defaultParent: () => {
if (!rootProjectionNode.current) {
const documentNode = new DocumentProjectionNode({});
documentNode.mount(window);
documentNode.setOptions({ layoutScroll: true });
rootProjectionNode.current = documentNode;
}
return rootProjectionNode.current;
},
resetTransform: (instance, value) => {
instance.style.transform = value !== void 0 ? value : "none";
},
checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed")
});
const drag = {
pan: {
Feature: PanGesture
},
drag: {
Feature: DragGesture,
ProjectionNode: HTMLProjectionNode,
MeasureLayout
}
};
function handleHoverEvent(node, event, lifecycle) {
const { props } = node;
if (node.animationState && props.whileHover) {
node.animationState.setActive("whileHover", lifecycle === "Start");
}
const eventName = "onHover" + lifecycle;
const callback = props[eventName];
if (callback) {
frame.postRender(() => callback(event, extractEventInfo(event)));
}
}
class HoverGesture extends Feature {
mount() {
const { current } = this.node;
if (!current)
return;
this.unmount = hover(current, (_element, startEvent) => {
handleHoverEvent(this.node, startEvent, "Start");
return (endEvent) => handleHoverEvent(this.node, endEvent, "End");
});
}
unmount() {
}
}
class FocusGesture extends Feature {
constructor() {
super(...arguments);
this.isActive = false;
}
onFocus() {
let isFocusVisible = false;
try {
isFocusVisible = this.node.current.matches(":focus-visible");
} catch (e) {
isFocusVisible = true;
}
if (!isFocusVisible || !this.node.animationState)
return;
this.node.animationState.setActive("whileFocus", true);
this.isActive = true;
}
onBlur() {
if (!this.isActive || !this.node.animationState)
return;
this.node.animationState.setActive("whileFocus", false);
this.isActive = false;
}
mount() {
this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
}
unmount() {
}
}
function handlePressEvent(node, event, lifecycle) {
const { props } = node;
if (node.current instanceof HTMLButtonElement && node.current.disabled) {
return;
}
if (node.animationState && props.whileTap) {
node.animationState.setActive("whileTap", lifecycle === "Start");
}
const eventName = "onTap" + (lifecycle === "End" ? "" : lifecycle);
const callback = props[eventName];
if (callback) {
frame.postRender(() => callback(event, extractEventInfo(event)));
}
}
class PressGesture extends Feature {
mount() {
const { current } = this.node;
if (!current)
return;
this.unmount = press(current, (_element, startEvent) => {
handlePressEvent(this.node, startEvent, "Start");
return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
}, { useGlobalTarget: this.node.props.globalTapTarget });
}
unmount() {
}
}
const observerCallbacks = new WeakMap();
const observers = new WeakMap();
const fireObserverCallback = (entry) => {
const callback = observerCallbacks.get(entry.target);
callback && callback(entry);
};
const fireAllObserverCallbacks = (entries) => {
entries.forEach(fireObserverCallback);
};
function initIntersectionObserver({ root, ...options }) {
const lookupRoot = root || document;
if (!observers.has(lookupRoot)) {
observers.set(lookupRoot, {});
}
const rootObservers = observers.get(lookupRoot);
const key = JSON.stringify(options);
if (!rootObservers[key]) {
rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
}
return rootObservers[key];
}
function observeIntersection(element, options, callback) {
const rootInteresectionObserver = initIntersectionObserver(options);
observerCallbacks.set(element, callback);
rootInteresectionObserver.observe(element);
return () => {
observerCallbacks.delete(element);
rootInteresectionObserver.unobserve(element);
};
}
const thresholdNames = {
some: 0,
all: 1
};
class InViewFeature extends Feature {
constructor() {
super(...arguments);
this.hasEnteredView = false;
this.isInView = false;
}
startObserver() {
this.unmount();
const { viewport = {} } = this.node.getProps();
const { root, margin: rootMargin, amount = "some", once } = viewport;
const options = {
root: root ? root.current : void 0,
rootMargin,
threshold: typeof amount === "number" ? amount : thresholdNames[amount]
};
const onIntersectionUpdate = (entry) => {
const { isIntersecting } = entry;
if (this.isInView === isIntersecting)
return;
this.isInView = isIntersecting;
if (once && !isIntersecting && this.hasEnteredView) {
return;
} else if (isIntersecting) {
this.hasEnteredView = true;
}
if (this.node.animationState) {
this.node.animationState.setActive("whileInView", isIntersecting);
}
const { onViewportEnter, onViewportLeave } = this.node.getProps();
const callback = isIntersecting ? onViewportEnter : onViewportLeave;
callback && callback(entry);
};
return observeIntersection(this.node.current, options, onIntersectionUpdate);
}
mount() {
this.startObserver();
}
update() {
if (typeof IntersectionObserver === "undefined")
return;
const { props, prevProps } = this.node;
const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps));
if (hasOptionsChanged) {
this.startObserver();
}
}
unmount() {
}
}
function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
return (name) => viewport[name] !== prevViewport[name];
}
const gestureAnimations = {
inView: {
Feature: InViewFeature
},
tap: {
Feature: PressGesture
},
focus: {
Feature: FocusGesture
},
hover: {
Feature: HoverGesture
}
};
const layout = {
layout: {
ProjectionNode: HTMLProjectionNode,
MeasureLayout
}
};
const featureBundle = {
...animations,
...gestureAnimations,
...drag,
...layout
};
const motion = createMotionProxy(featureBundle, createDomVisualElement);
function ZoomableImage({
className,
...props
}) {
if (!props.src) return jsxRuntimeExports.jsx("img", { ...props, className });
const [isOpen, setIsOpen] = React.useState(false);
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(
"img",
{
...props,
onClick: (e) => {
setIsOpen(true);
props.onClick?.(e);
},
className: cn$1("cursor-pointer", className)
}
),
jsxRuntimeExports.jsx(AnimatePresence, { children: isOpen && jsxRuntimeExports.jsx(
motion.div,
{
className: "fixed inset-0 bg-black/70 flex items-center justify-center z-50",
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
onClick: () => setIsOpen(false),
children: jsxRuntimeExports.jsx(
"img",
{
...props,
className: "object-contain max-h-4/5 max-w-4/5"
}
)
}
) })
] });
}
function Image(props) {
const {
loadingPlaceholder: loadingPlaceholder2 = jsxRuntimeExports.jsx(LoadingIcon, { className: "size-8" }),
errorFallback: errorFallback2 = jsxRuntimeExports.jsx(SvgImageError, { className: "size-8" }),
zoomable = false,
className,
onLoad,
onError,
...rest
} = props;
const [loading, setLoading] = React.useState(true);
const [error2, setError] = React.useState(false);
const handleLoad = (e) => {
setLoading(false);
onLoad?.(e);
};
const handleError = (e) => {
setLoading(false);
setError(true);
onError?.(e);
};
if (error2) {
return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: errorFallback2 });
}
return jsxRuntimeExports.jsxs("div", { className: "relative inline", children: [
loading && jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: loadingPlaceholder2 }),
zoomable ? jsxRuntimeExports.jsx(
ZoomableImage,
{
...rest,
className: `${loading ? "invisible" : "visible"} ${className ?? ""}`,
onLoad: handleLoad,
onError: handleError
}
) : jsxRuntimeExports.jsx(
"img",
{
...rest,
className: `${loading ? "invisible" : "visible"} ${className ?? ""}`,
onLoad: handleLoad,
onError: handleError
}
)
] });
}
function ImageInMessage(props) {
const { imgKey, isEmoji = false, onImageDone } = props;
const { url, isError, promiseRef } = useImageUrl(imgKey);
const handleDone = () => {
promiseRef.current && onImageDone?.(promiseRef.current);
};
React.useEffect(() => {
if (isError) {
promiseRef.current && onImageDone?.(promiseRef.current);
}
}, [isError]);
const loadingPlaceholder2 = jsxRuntimeExports.jsx(LoadingIcon, { className: "size-8" });
const errorFallback2 = jsxRuntimeExports.jsx(SvgImageError, { className: "w-20 h-40 text-black/40" });
if (isError) return `[${imgKey}]`;
if (isEmoji)
return jsxRuntimeExports.jsx(
Image,
{
src: url,
className: "w-8 inline-block",
onLoad: handleDone,
onError: handleDone,
alt: imgKey,
loadingPlaceholder: loadingPlaceholder2,
errorFallback: errorFallback2
}
);
return jsxRuntimeExports.jsx("div", { className: "align-top p-1 rounded-lg bg-secondary w-40 inline-flex justify-center items-center", children: jsxRuntimeExports.jsx(
Image,
{
src: url,
className: "rounded-lg min-h-15",
onLoad: handleDone,
onError: handleDone,
alt: imgKey,
loadingPlaceholder: loadingPlaceholder2,
errorFallback: errorFallback2,
zoomable: true
}
) });
}
function Message(props) {
const { text, onImageDone } = props;
const parts = parseMessage(text);
return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: parts.map((part, index2) => {
switch (part.type) {
case "text":
return part.text;
case "link":
return jsxRuntimeExports.jsx(
"a",
{
href: part.url,
target: "_blank",
rel: "noopener noreferrer",
className: "text-blue-600 hover:underline break-all",
children: part.url
},
index2
);
case "emoji":
return jsxRuntimeExports.jsx(
ImageInMessage,
{
imgKey: part.key,
isEmoji: true,
onImageDone
},
index2
);
case "image":
return jsxRuntimeExports.jsx(
ImageInMessage,
{
imgKey: part.key,
onImageDone
},
index2
);
default:
return;
}
}) });
}
const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
const cx = clsx.clsx;
const cva = (base, config2) => (props) => {
var _config_compoundVariants;
if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
const { variants, defaultVariants } = config2;
const getVariantClassNames = Object.keys(variants).map((variant) => {
const variantProp = props === null || props === void 0 ? void 0 : props[variant];
const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
if (variantProp === null) return null;
const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
return variants[variant][variantKey];
});
const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
let [key, value] = param;
if (value === void 0) {
return acc;
}
acc[key] = value;
return acc;
}, {});
const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
return Object.entries(compoundVariantOptions).every((param2) => {
let [key, value] = param2;
return Array.isArray(value) ? value.includes({
...defaultVariants,
...propsWithoutUndefined
}[key]) : {
...defaultVariants,
...propsWithoutUndefined
}[key] === value;
}) ? [
...acc,
cvClass,
cvClassName
] : acc;
}, []);
return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
};
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-sm": "size-8",
"icon-lg": "size-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
function Button({
className,
variant,
size: size2,
asChild = false,
...props
}) {
const Comp = asChild ? Slot$3 : "button";
return jsxRuntimeExports.jsx(
Comp,
{
"data-slot": "button",
className: cn$1(buttonVariants({ variant, size: size2, className })),
...props
}
);
}
const badgeVariants = cva(
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
}
},
defaultVariants: {
variant: "default"
}
}
);
function Badge({
className,
variant,
asChild = false,
...props
}) {
const Comp = asChild ? Slot$3 : "span";
return jsxRuntimeExports.jsx(
Comp,
{
"data-slot": "badge",
className: cn$1(badgeVariants({ variant }), className),
...props
}
);
}
var useInsertionEffect = React__namespace[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
function useControllableState({
prop,
defaultProp,
onChange = () => {
},
caller
}) {
const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
defaultProp,
onChange
});
const isControlled = prop !== void 0;
const value = isControlled ? prop : uncontrolledProp;
{
const isControlledRef = React__namespace.useRef(prop !== void 0);
React__namespace.useEffect(() => {
const wasControlled = isControlledRef.current;
if (wasControlled !== isControlled) {
const from = wasControlled ? "controlled" : "uncontrolled";
const to = isControlled ? "controlled" : "uncontrolled";
console.warn(
`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
);
}
isControlledRef.current = isControlled;
}, [isControlled, caller]);
}
const setValue = React__namespace.useCallback(
(nextValue) => {
if (isControlled) {
const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
if (value2 !== prop) {
onChangeRef.current?.(value2);
}
} else {
setUncontrolledProp(nextValue);
}
},
[isControlled, prop, setUncontrolledProp, onChangeRef]
);
return [value, setValue];
}
function useUncontrolledState({
defaultProp,
onChange
}) {
const [value, setValue] = React__namespace.useState(defaultProp);
const prevValueRef = React__namespace.useRef(value);
const onChangeRef = React__namespace.useRef(onChange);
useInsertionEffect(() => {
onChangeRef.current = onChange;
}, [onChange]);
React__namespace.useEffect(() => {
if (prevValueRef.current !== value) {
onChangeRef.current?.(value);
prevValueRef.current = value;
}
}, [value, prevValueRef]);
return [value, setValue, onChangeRef];
}
function isFunction(value) {
return typeof value === "function";
}
function createCollection(name) {
const PROVIDER_NAME2 = name + "CollectionProvider";
const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME2);
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
PROVIDER_NAME2,
{ collectionRef: { current: null }, itemMap: new Map() }
);
const CollectionProvider = (props) => {
const { scope, children } = props;
const ref = React.useRef(null);
const itemMap = React.useRef( new Map()).current;
return jsxRuntimeExports.jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
};
CollectionProvider.displayName = PROVIDER_NAME2;
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
const CollectionSlot = React.forwardRef(
(props, forwardedRef) => {
const { scope, children } = props;
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
const composedRefs = useComposedRefs$1(forwardedRef, context.collectionRef);
return jsxRuntimeExports.jsx(CollectionSlotImpl, { ref: composedRefs, children });
}
);
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
const ITEM_DATA_ATTR = "data-radix-collection-item";
const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
const CollectionItemSlot = React.forwardRef(
(props, forwardedRef) => {
const { scope, children, ...itemData } = props;
const ref = React.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
React.useEffect(() => {
context.itemMap.set(ref, { ref, ...itemData });
return () => void context.itemMap.delete(ref);
});
return jsxRuntimeExports.jsx(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
}
);
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
function useCollection2(scope) {
const context = useCollectionContext(name + "CollectionConsumer", scope);
const getItems = React.useCallback(() => {
const collectionNode = context.collectionRef.current;
if (!collectionNode) return [];
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
const items = Array.from(context.itemMap.values());
const orderedItems = items.sort(
(a2, b) => orderedNodes.indexOf(a2.ref.current) - orderedNodes.indexOf(b.ref.current)
);
return orderedItems;
}, [context.collectionRef, context.itemMap]);
return getItems;
}
return [
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
useCollection2,
createCollectionScope2
];
}
function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
const onEscapeKeyDown = useCallbackRef$1(onEscapeKeyDownProp);
React__namespace.useEffect(() => {
const handleKeyDown = (event) => {
if (event.key === "Escape") {
onEscapeKeyDown(event);
}
};
ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
}, [onEscapeKeyDown, ownerDocument]);
}
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
var CONTEXT_UPDATE = "dismissableLayer.update";
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
var originalBodyPointerEvents;
var DismissableLayerContext = React__namespace.createContext({
layers: new Set(),
layersWithOutsidePointerEventsDisabled: new Set(),
branches: new Set()
});
var DismissableLayer = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
disableOutsidePointerEvents = false,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onInteractOutside,
onDismiss,
...layerProps
} = props;
const context = React__namespace.useContext(DismissableLayerContext);
const [node, setNode] = React__namespace.useState(null);
const ownerDocument = node?.ownerDocument ?? globalThis?.document;
const [, force] = React__namespace.useState({});
const composedRefs = useComposedRefs$1(forwardedRef, (node2) => setNode(node2));
const layers = Array.from(context.layers);
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
const index2 = node ? layers.indexOf(node) : -1;
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
const pointerDownOutside = usePointerDownOutside((event) => {
const target = event.target;
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
onPointerDownOutside?.(event);
onInteractOutside?.(event);
if (!event.defaultPrevented) onDismiss?.();
}, ownerDocument);
const focusOutside = useFocusOutside((event) => {
const target = event.target;
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
if (isFocusInBranch) return;
onFocusOutside?.(event);
onInteractOutside?.(event);
if (!event.defaultPrevented) onDismiss?.();
}, ownerDocument);
useEscapeKeydown((event) => {
const isHighestLayer = index2 === context.layers.size - 1;
if (!isHighestLayer) return;
onEscapeKeyDown?.(event);
if (!event.defaultPrevented && onDismiss) {
event.preventDefault();
onDismiss();
}
}, ownerDocument);
React__namespace.useEffect(() => {
if (!node) return;
if (disableOutsidePointerEvents) {
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
ownerDocument.body.style.pointerEvents = "none";
}
context.layersWithOutsidePointerEventsDisabled.add(node);
}
context.layers.add(node);
dispatchUpdate();
return () => {
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
}
};
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
React__namespace.useEffect(() => {
return () => {
if (!node) return;
context.layers.delete(node);
context.layersWithOutsidePointerEventsDisabled.delete(node);
dispatchUpdate();
};
}, [node, context]);
React__namespace.useEffect(() => {
const handleUpdate = () => force({});
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
}, []);
return jsxRuntimeExports.jsx(
Primitive.div,
{
...layerProps,
ref: composedRefs,
style: {
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
...props.style
},
onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
onPointerDownCapture: composeEventHandlers(
props.onPointerDownCapture,
pointerDownOutside.onPointerDownCapture
)
}
);
}
);
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
var BRANCH_NAME = "DismissableLayerBranch";
var DismissableLayerBranch = React__namespace.forwardRef((props, forwardedRef) => {
const context = React__namespace.useContext(DismissableLayerContext);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
React__namespace.useEffect(() => {
const node = ref.current;
if (node) {
context.branches.add(node);
return () => {
context.branches.delete(node);
};
}
}, [context.branches]);
return jsxRuntimeExports.jsx(Primitive.div, { ...props, ref: composedRefs });
});
DismissableLayerBranch.displayName = BRANCH_NAME;
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside);
const isPointerInsideReactTreeRef = React__namespace.useRef(false);
const handleClickRef = React__namespace.useRef(() => {
});
React__namespace.useEffect(() => {
const handlePointerDown = (event) => {
if (event.target && !isPointerInsideReactTreeRef.current) {
let handleAndDispatchPointerDownOutsideEvent2 = function() {
handleAndDispatchCustomEvent(
POINTER_DOWN_OUTSIDE,
handlePointerDownOutside,
eventDetail,
{ discrete: true }
);
};
const eventDetail = { originalEvent: event };
if (event.pointerType === "touch") {
ownerDocument.removeEventListener("click", handleClickRef.current);
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
} else {
handleAndDispatchPointerDownOutsideEvent2();
}
} else {
ownerDocument.removeEventListener("click", handleClickRef.current);
}
isPointerInsideReactTreeRef.current = false;
};
const timerId = window.setTimeout(() => {
ownerDocument.addEventListener("pointerdown", handlePointerDown);
}, 0);
return () => {
window.clearTimeout(timerId);
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
ownerDocument.removeEventListener("click", handleClickRef.current);
};
}, [ownerDocument, handlePointerDownOutside]);
return {
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
};
}
function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
const handleFocusOutside = useCallbackRef$1(onFocusOutside);
const isFocusInsideReactTreeRef = React__namespace.useRef(false);
React__namespace.useEffect(() => {
const handleFocus = (event) => {
if (event.target && !isFocusInsideReactTreeRef.current) {
const eventDetail = { originalEvent: event };
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
discrete: false
});
}
};
ownerDocument.addEventListener("focusin", handleFocus);
return () => ownerDocument.removeEventListener("focusin", handleFocus);
}, [ownerDocument, handleFocusOutside]);
return {
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
};
}
function dispatchUpdate() {
const event = new CustomEvent(CONTEXT_UPDATE);
document.dispatchEvent(event);
}
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
const target = detail.originalEvent.target;
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
if (handler) target.addEventListener(name, handler, { once: true });
if (discrete) {
dispatchDiscreteCustomEvent(target, event);
} else {
target.dispatchEvent(event);
}
}
var count$1 = 0;
function useFocusGuards() {
React__namespace.useEffect(() => {
const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
count$1++;
return () => {
if (count$1 === 1) {
document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
}
count$1--;
};
}, []);
}
function createFocusGuard() {
const element = document.createElement("span");
element.setAttribute("data-radix-focus-guard", "");
element.tabIndex = 0;
element.style.outline = "none";
element.style.opacity = "0";
element.style.position = "fixed";
element.style.pointerEvents = "none";
return element;
}
var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
var EVENT_OPTIONS$1 = { bubbles: false, cancelable: true };
var FOCUS_SCOPE_NAME = "FocusScope";
var FocusScope = React__namespace.forwardRef((props, forwardedRef) => {
const {
loop = false,
trapped = false,
onMountAutoFocus: onMountAutoFocusProp,
onUnmountAutoFocus: onUnmountAutoFocusProp,
...scopeProps
} = props;
const [container, setContainer] = React__namespace.useState(null);
const onMountAutoFocus = useCallbackRef$1(onMountAutoFocusProp);
const onUnmountAutoFocus = useCallbackRef$1(onUnmountAutoFocusProp);
const lastFocusedElementRef = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContainer(node));
const focusScope = React__namespace.useRef({
paused: false,
pause() {
this.paused = true;
},
resume() {
this.paused = false;
}
}).current;
React__namespace.useEffect(() => {
if (trapped) {
let handleFocusIn2 = function(event) {
if (focusScope.paused || !container) return;
const target = event.target;
if (container.contains(target)) {
lastFocusedElementRef.current = target;
} else {
focus(lastFocusedElementRef.current, { select: true });
}
}, handleFocusOut2 = function(event) {
if (focusScope.paused || !container) return;
const relatedTarget = event.relatedTarget;
if (relatedTarget === null) return;
if (!container.contains(relatedTarget)) {
focus(lastFocusedElementRef.current, { select: true });
}
}, handleMutations2 = function(mutations) {
const focusedElement = document.activeElement;
if (focusedElement !== document.body) return;
for (const mutation of mutations) {
if (mutation.removedNodes.length > 0) focus(container);
}
};
document.addEventListener("focusin", handleFocusIn2);
document.addEventListener("focusout", handleFocusOut2);
const mutationObserver = new MutationObserver(handleMutations2);
if (container) mutationObserver.observe(container, { childList: true, subtree: true });
return () => {
document.removeEventListener("focusin", handleFocusIn2);
document.removeEventListener("focusout", handleFocusOut2);
mutationObserver.disconnect();
};
}
}, [trapped, container, focusScope.paused]);
React__namespace.useEffect(() => {
if (container) {
focusScopesStack.add(focusScope);
const previouslyFocusedElement = document.activeElement;
const hasFocusedCandidate = container.contains(previouslyFocusedElement);
if (!hasFocusedCandidate) {
const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS$1);
container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
container.dispatchEvent(mountEvent);
if (!mountEvent.defaultPrevented) {
focusFirst$2(removeLinks(getTabbableCandidates(container)), { select: true });
if (document.activeElement === previouslyFocusedElement) {
focus(container);
}
}
}
return () => {
container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
setTimeout(() => {
const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS$1);
container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
container.dispatchEvent(unmountEvent);
if (!unmountEvent.defaultPrevented) {
focus(previouslyFocusedElement ?? document.body, { select: true });
}
container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
focusScopesStack.remove(focusScope);
}, 0);
};
}
}, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
const handleKeyDown = React__namespace.useCallback(
(event) => {
if (!loop && !trapped) return;
if (focusScope.paused) return;
const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
const focusedElement = document.activeElement;
if (isTabKey && focusedElement) {
const container2 = event.currentTarget;
const [first, last] = getTabbableEdges(container2);
const hasTabbableElementsInside = first && last;
if (!hasTabbableElementsInside) {
if (focusedElement === container2) event.preventDefault();
} else {
if (!event.shiftKey && focusedElement === last) {
event.preventDefault();
if (loop) focus(first, { select: true });
} else if (event.shiftKey && focusedElement === first) {
event.preventDefault();
if (loop) focus(last, { select: true });
}
}
}
},
[loop, trapped, focusScope.paused]
);
return jsxRuntimeExports.jsx(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
});
FocusScope.displayName = FOCUS_SCOPE_NAME;
function focusFirst$2(candidates, { select = false } = {}) {
const previouslyFocusedElement = document.activeElement;
for (const candidate of candidates) {
focus(candidate, { select });
if (document.activeElement !== previouslyFocusedElement) return;
}
}
function getTabbableEdges(container) {
const candidates = getTabbableCandidates(container);
const first = findVisible(candidates, container);
const last = findVisible(candidates.reverse(), container);
return [first, last];
}
function getTabbableCandidates(container) {
const nodes = [];
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node) => {
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while (walker.nextNode()) nodes.push(walker.currentNode);
return nodes;
}
function findVisible(elements, container) {
for (const element of elements) {
if (!isHidden(element, { upTo: container })) return element;
}
}
function isHidden(node, { upTo }) {
if (getComputedStyle(node).visibility === "hidden") return true;
while (node) {
if (upTo !== void 0 && node === upTo) return false;
if (getComputedStyle(node).display === "none") return true;
node = node.parentElement;
}
return false;
}
function isSelectableInput(element) {
return element instanceof HTMLInputElement && "select" in element;
}
function focus(element, { select = false } = {}) {
if (element && element.focus) {
const previouslyFocusedElement = document.activeElement;
element.focus({ preventScroll: true });
if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
element.select();
}
}
var focusScopesStack = createFocusScopesStack();
function createFocusScopesStack() {
let stack = [];
return {
add(focusScope) {
const activeFocusScope = stack[0];
if (focusScope !== activeFocusScope) {
activeFocusScope?.pause();
}
stack = arrayRemove(stack, focusScope);
stack.unshift(focusScope);
},
remove(focusScope) {
stack = arrayRemove(stack, focusScope);
stack[0]?.resume();
}
};
}
function arrayRemove(array, item) {
const updatedArray = [...array];
const index2 = updatedArray.indexOf(item);
if (index2 !== -1) {
updatedArray.splice(index2, 1);
}
return updatedArray;
}
function removeLinks(items) {
return items.filter((item) => item.tagName !== "A");
}
var useReactId = React__namespace[" useId ".trim().toString()] || (() => void 0);
var count = 0;
function useId(deterministicId) {
const [id2, setId] = React__namespace.useState(useReactId());
useLayoutEffect2(() => {
setId((reactId) => reactId ?? String(count++));
}, [deterministicId]);
return id2 ? `radix-${id2}` : "";
}
const sides = ["top", "right", "bottom", "left"];
const min = Math.min;
const max = Math.max;
const round = Math.round;
const floor = Math.floor;
const createCoords = (v) => ({
x: v,
y: v
});
const oppositeSideMap = {
left: "right",
right: "left",
bottom: "top",
top: "bottom"
};
const oppositeAlignmentMap = {
start: "end",
end: "start"
};
function clamp(start, value, end) {
return max(start, min(value, end));
}
function evaluate(value, param) {
return typeof value === "function" ? value(param) : value;
}
function getSide(placement) {
return placement.split("-")[0];
}
function getAlignment(placement) {
return placement.split("-")[1];
}
function getOppositeAxis(axis) {
return axis === "x" ? "y" : "x";
}
function getAxisLength(axis) {
return axis === "y" ? "height" : "width";
}
const yAxisSides = new Set(["top", "bottom"]);
function getSideAxis(placement) {
return yAxisSides.has(getSide(placement)) ? "y" : "x";
}
function getAlignmentAxis(placement) {
return getOppositeAxis(getSideAxis(placement));
}
function getAlignmentSides(placement, rects, rtl) {
if (rtl === void 0) {
rtl = false;
}
const alignment = getAlignment(placement);
const alignmentAxis = getAlignmentAxis(placement);
const length = getAxisLength(alignmentAxis);
let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
if (rects.reference[length] > rects.floating[length]) {
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
}
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
}
function getExpandedPlacements(placement) {
const oppositePlacement = getOppositePlacement(placement);
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
}
function getOppositeAlignmentPlacement(placement) {
return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
}
const lrPlacement = ["left", "right"];
const rlPlacement = ["right", "left"];
const tbPlacement = ["top", "bottom"];
const btPlacement = ["bottom", "top"];
function getSideList(side, isStart, rtl) {
switch (side) {
case "top":
case "bottom":
if (rtl) return isStart ? rlPlacement : lrPlacement;
return isStart ? lrPlacement : rlPlacement;
case "left":
case "right":
return isStart ? tbPlacement : btPlacement;
default:
return [];
}
}
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
const alignment = getAlignment(placement);
let list = getSideList(getSide(placement), direction === "start", rtl);
if (alignment) {
list = list.map((side) => side + "-" + alignment);
if (flipAlignment) {
list = list.concat(list.map(getOppositeAlignmentPlacement));
}
}
return list;
}
function getOppositePlacement(placement) {
return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
}
function expandPaddingObject(padding) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
}
function getPaddingObject(padding) {
return typeof padding !== "number" ? expandPaddingObject(padding) : {
top: padding,
right: padding,
bottom: padding,
left: padding
};
}
function rectToClientRect(rect) {
const {
x: x2,
y,
width,
height
} = rect;
return {
width,
height,
top: y,
left: x2,
right: x2 + width,
bottom: y + height,
x: x2,
y
};
}
function computeCoordsFromPlacement(_ref, placement, rtl) {
let {
reference,
floating
} = _ref;
const sideAxis = getSideAxis(placement);
const alignmentAxis = getAlignmentAxis(placement);
const alignLength = getAxisLength(alignmentAxis);
const side = getSide(placement);
const isVertical = sideAxis === "y";
const commonX = reference.x + reference.width / 2 - floating.width / 2;
const commonY = reference.y + reference.height / 2 - floating.height / 2;
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
let coords;
switch (side) {
case "top":
coords = {
x: commonX,
y: reference.y - floating.height
};
break;
case "bottom":
coords = {
x: commonX,
y: reference.y + reference.height
};
break;
case "right":
coords = {
x: reference.x + reference.width,
y: commonY
};
break;
case "left":
coords = {
x: reference.x - floating.width,
y: commonY
};
break;
default:
coords = {
x: reference.x,
y: reference.y
};
}
switch (getAlignment(placement)) {
case "start":
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
break;
case "end":
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
break;
}
return coords;
}
const computePosition$1 = async (reference, floating, config2) => {
const {
placement = "bottom",
strategy = "absolute",
middleware = [],
platform: platform2
} = config2;
const validMiddleware = middleware.filter(Boolean);
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
let rects = await platform2.getElementRects({
reference,
floating,
strategy
});
let {
x: x2,
y
} = computeCoordsFromPlacement(rects, placement, rtl);
let statefulPlacement = placement;
let middlewareData = {};
let resetCount = 0;
for (let i2 = 0; i2 < validMiddleware.length; i2++) {
const {
name,
fn
} = validMiddleware[i2];
const {
x: nextX,
y: nextY,
data,
reset
} = await fn({
x: x2,
y,
initialPlacement: placement,
placement: statefulPlacement,
strategy,
middlewareData,
rects,
platform: platform2,
elements: {
reference,
floating
}
});
x2 = nextX != null ? nextX : x2;
y = nextY != null ? nextY : y;
middlewareData = {
...middlewareData,
[name]: {
...middlewareData[name],
...data
}
};
if (reset && resetCount <= 50) {
resetCount++;
if (typeof reset === "object") {
if (reset.placement) {
statefulPlacement = reset.placement;
}
if (reset.rects) {
rects = reset.rects === true ? await platform2.getElementRects({
reference,
floating,
strategy
}) : reset.rects;
}
({
x: x2,
y
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
}
i2 = -1;
}
}
return {
x: x2,
y,
placement: statefulPlacement,
strategy,
middlewareData
};
};
async function detectOverflow(state, options) {
var _await$platform$isEle;
if (options === void 0) {
options = {};
}
const {
x: x2,
y,
platform: platform2,
rects,
elements,
strategy
} = state;
const {
boundary = "clippingAncestors",
rootBoundary = "viewport",
elementContext = "floating",
altBoundary = false,
padding = 0
} = evaluate(options, state);
const paddingObject = getPaddingObject(padding);
const altContext = elementContext === "floating" ? "reference" : "floating";
const element = elements[altBoundary ? altContext : elementContext];
const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
boundary,
rootBoundary,
strategy
}));
const rect = elementContext === "floating" ? {
x: x2,
y,
width: rects.floating.width,
height: rects.floating.height
} : rects.reference;
const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
x: 1,
y: 1
} : {
x: 1,
y: 1
};
const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
elements,
rect,
offsetParent,
strategy
}) : rect);
return {
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
};
}
const arrow$3 = (options) => ({
name: "arrow",
options,
async fn(state) {
const {
x: x2,
y,
placement,
rects,
platform: platform2,
elements,
middlewareData
} = state;
const {
element,
padding = 0
} = evaluate(options, state) || {};
if (element == null) {
return {};
}
const paddingObject = getPaddingObject(padding);
const coords = {
x: x2,
y
};
const axis = getAlignmentAxis(placement);
const length = getAxisLength(axis);
const arrowDimensions = await platform2.getDimensions(element);
const isYAxis = axis === "y";
const minProp = isYAxis ? "top" : "left";
const maxProp = isYAxis ? "bottom" : "right";
const clientProp = isYAxis ? "clientHeight" : "clientWidth";
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
const startDiff = coords[axis] - rects.reference[axis];
const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
clientSize = elements.floating[clientProp] || rects.floating[length];
}
const centerToReference = endDiff / 2 - startDiff / 2;
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
const min$1 = minPadding;
const max2 = clientSize - arrowDimensions[length] - maxPadding;
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
const offset2 = clamp(min$1, center, max2);
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
return {
[axis]: coords[axis] + alignmentOffset,
data: {
[axis]: offset2,
centerOffset: center - offset2 - alignmentOffset,
...shouldAddOffset && {
alignmentOffset
}
},
reset: shouldAddOffset
};
}
});
const flip$2 = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "flip",
options,
async fn(state) {
var _middlewareData$arrow, _middlewareData$flip;
const {
placement,
middlewareData,
rects,
initialPlacement,
platform: platform2,
elements
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = true,
fallbackPlacements: specifiedFallbackPlacements,
fallbackStrategy = "bestFit",
fallbackAxisSideDirection = "none",
flipAlignment = true,
...detectOverflowOptions
} = evaluate(options, state);
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
return {};
}
const side = getSide(placement);
const initialSideAxis = getSideAxis(initialPlacement);
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
}
const placements = [initialPlacement, ...fallbackPlacements];
const overflow = await detectOverflow(state, detectOverflowOptions);
const overflows = [];
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
if (checkMainAxis) {
overflows.push(overflow[side]);
}
if (checkCrossAxis) {
const sides2 = getAlignmentSides(placement, rects, rtl);
overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
}
overflowsData = [...overflowsData, {
placement,
overflows
}];
if (!overflows.every((side2) => side2 <= 0)) {
var _middlewareData$flip2, _overflowsData$filter;
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
const nextPlacement = placements[nextIndex];
if (nextPlacement) {
const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
if (!ignoreCrossAxisOverflow ||
overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
return {
data: {
index: nextIndex,
overflows: overflowsData
},
reset: {
placement: nextPlacement
}
};
}
}
let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a2, b) => a2.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
if (!resetPlacement) {
switch (fallbackStrategy) {
case "bestFit": {
var _overflowsData$filter2;
const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
if (hasFallbackAxisSideDirection) {
const currentSideAxis = getSideAxis(d.placement);
return currentSideAxis === initialSideAxis ||
currentSideAxis === "y";
}
return true;
}).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a2, b) => a2[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
if (placement2) {
resetPlacement = placement2;
}
break;
}
case "initialPlacement":
resetPlacement = initialPlacement;
break;
}
}
if (placement !== resetPlacement) {
return {
reset: {
placement: resetPlacement
}
};
}
}
return {};
}
};
};
function getSideOffsets(overflow, rect) {
return {
top: overflow.top - rect.height,
right: overflow.right - rect.width,
bottom: overflow.bottom - rect.height,
left: overflow.left - rect.width
};
}
function isAnySideFullyClipped(overflow) {
return sides.some((side) => overflow[side] >= 0);
}
const hide$2 = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "hide",
options,
async fn(state) {
const {
rects
} = state;
const {
strategy = "referenceHidden",
...detectOverflowOptions
} = evaluate(options, state);
switch (strategy) {
case "referenceHidden": {
const overflow = await detectOverflow(state, {
...detectOverflowOptions,
elementContext: "reference"
});
const offsets = getSideOffsets(overflow, rects.reference);
return {
data: {
referenceHiddenOffsets: offsets,
referenceHidden: isAnySideFullyClipped(offsets)
}
};
}
case "escaped": {
const overflow = await detectOverflow(state, {
...detectOverflowOptions,
altBoundary: true
});
const offsets = getSideOffsets(overflow, rects.floating);
return {
data: {
escapedOffsets: offsets,
escaped: isAnySideFullyClipped(offsets)
}
};
}
default: {
return {};
}
}
}
};
};
const originSides = new Set(["left", "top"]);
async function convertValueToCoords(state, options) {
const {
placement,
platform: platform2,
elements
} = state;
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
const side = getSide(placement);
const alignment = getAlignment(placement);
const isVertical = getSideAxis(placement) === "y";
const mainAxisMulti = originSides.has(side) ? -1 : 1;
const crossAxisMulti = rtl && isVertical ? -1 : 1;
const rawValue = evaluate(options, state);
let {
mainAxis,
crossAxis,
alignmentAxis
} = typeof rawValue === "number" ? {
mainAxis: rawValue,
crossAxis: 0,
alignmentAxis: null
} : {
mainAxis: rawValue.mainAxis || 0,
crossAxis: rawValue.crossAxis || 0,
alignmentAxis: rawValue.alignmentAxis
};
if (alignment && typeof alignmentAxis === "number") {
crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
}
return isVertical ? {
x: crossAxis * crossAxisMulti,
y: mainAxis * mainAxisMulti
} : {
x: mainAxis * mainAxisMulti,
y: crossAxis * crossAxisMulti
};
}
const offset$2 = function(options) {
if (options === void 0) {
options = 0;
}
return {
name: "offset",
options,
async fn(state) {
var _middlewareData$offse, _middlewareData$arrow;
const {
x: x2,
y,
placement,
middlewareData
} = state;
const diffCoords = await convertValueToCoords(state, options);
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
return {};
}
return {
x: x2 + diffCoords.x,
y: y + diffCoords.y,
data: {
...diffCoords,
placement
}
};
}
};
};
const shift$2 = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "shift",
options,
async fn(state) {
const {
x: x2,
y,
placement
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = false,
limiter = {
fn: (_ref) => {
let {
x: x3,
y: y2
} = _ref;
return {
x: x3,
y: y2
};
}
},
...detectOverflowOptions
} = evaluate(options, state);
const coords = {
x: x2,
y
};
const overflow = await detectOverflow(state, detectOverflowOptions);
const crossAxis = getSideAxis(getSide(placement));
const mainAxis = getOppositeAxis(crossAxis);
let mainAxisCoord = coords[mainAxis];
let crossAxisCoord = coords[crossAxis];
if (checkMainAxis) {
const minSide = mainAxis === "y" ? "top" : "left";
const maxSide = mainAxis === "y" ? "bottom" : "right";
const min2 = mainAxisCoord + overflow[minSide];
const max2 = mainAxisCoord - overflow[maxSide];
mainAxisCoord = clamp(min2, mainAxisCoord, max2);
}
if (checkCrossAxis) {
const minSide = crossAxis === "y" ? "top" : "left";
const maxSide = crossAxis === "y" ? "bottom" : "right";
const min2 = crossAxisCoord + overflow[minSide];
const max2 = crossAxisCoord - overflow[maxSide];
crossAxisCoord = clamp(min2, crossAxisCoord, max2);
}
const limitedCoords = limiter.fn({
...state,
[mainAxis]: mainAxisCoord,
[crossAxis]: crossAxisCoord
});
return {
...limitedCoords,
data: {
x: limitedCoords.x - x2,
y: limitedCoords.y - y,
enabled: {
[mainAxis]: checkMainAxis,
[crossAxis]: checkCrossAxis
}
}
};
}
};
};
const limitShift$2 = function(options) {
if (options === void 0) {
options = {};
}
return {
options,
fn(state) {
const {
x: x2,
y,
placement,
rects,
middlewareData
} = state;
const {
offset: offset2 = 0,
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = true
} = evaluate(options, state);
const coords = {
x: x2,
y
};
const crossAxis = getSideAxis(placement);
const mainAxis = getOppositeAxis(crossAxis);
let mainAxisCoord = coords[mainAxis];
let crossAxisCoord = coords[crossAxis];
const rawOffset = evaluate(offset2, state);
const computedOffset = typeof rawOffset === "number" ? {
mainAxis: rawOffset,
crossAxis: 0
} : {
mainAxis: 0,
crossAxis: 0,
...rawOffset
};
if (checkMainAxis) {
const len = mainAxis === "y" ? "height" : "width";
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
if (mainAxisCoord < limitMin) {
mainAxisCoord = limitMin;
} else if (mainAxisCoord > limitMax) {
mainAxisCoord = limitMax;
}
}
if (checkCrossAxis) {
var _middlewareData$offse, _middlewareData$offse2;
const len = mainAxis === "y" ? "width" : "height";
const isOriginSide = originSides.has(getSide(placement));
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
if (crossAxisCoord < limitMin) {
crossAxisCoord = limitMin;
} else if (crossAxisCoord > limitMax) {
crossAxisCoord = limitMax;
}
}
return {
[mainAxis]: mainAxisCoord,
[crossAxis]: crossAxisCoord
};
}
};
};
const size$2 = function(options) {
if (options === void 0) {
options = {};
}
return {
name: "size",
options,
async fn(state) {
var _state$middlewareData, _state$middlewareData2;
const {
placement,
rects,
platform: platform2,
elements
} = state;
const {
apply = () => {
},
...detectOverflowOptions
} = evaluate(options, state);
const overflow = await detectOverflow(state, detectOverflowOptions);
const side = getSide(placement);
const alignment = getAlignment(placement);
const isYAxis = getSideAxis(placement) === "y";
const {
width,
height
} = rects.floating;
let heightSide;
let widthSide;
if (side === "top" || side === "bottom") {
heightSide = side;
widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
} else {
widthSide = side;
heightSide = alignment === "end" ? "top" : "bottom";
}
const maximumClippingHeight = height - overflow.top - overflow.bottom;
const maximumClippingWidth = width - overflow.left - overflow.right;
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
const noShift = !state.middlewareData.shift;
let availableHeight = overflowAvailableHeight;
let availableWidth = overflowAvailableWidth;
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
availableWidth = maximumClippingWidth;
}
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
availableHeight = maximumClippingHeight;
}
if (noShift && !alignment) {
const xMin = max(overflow.left, 0);
const xMax = max(overflow.right, 0);
const yMin = max(overflow.top, 0);
const yMax = max(overflow.bottom, 0);
if (isYAxis) {
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
} else {
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
}
}
await apply({
...state,
availableWidth,
availableHeight
});
const nextDimensions = await platform2.getDimensions(elements.floating);
if (width !== nextDimensions.width || height !== nextDimensions.height) {
return {
reset: {
rects: true
}
};
}
return {};
}
};
};
function hasWindow() {
return typeof window !== "undefined";
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || "").toLowerCase();
}
return "#document";
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === "undefined") {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
const invalidOverflowDisplayValues = new Set(["inline", "contents"]);
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$1(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
}
const tableElements = new Set(["table", "td", "th"]);
function isTableElement(element) {
return tableElements.has(getNodeName(element));
}
const topLayerSelectors = [":popover-open", ":modal"];
function isTopLayer(element) {
return topLayerSelectors.some((selector) => {
try {
return element.matches(selector);
} catch (_e) {
return false;
}
});
}
const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
const willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
const containValues = ["paint", "layout", "strict", "content"];
function isContainingBlock(elementOrCss) {
const webkit = isWebKit();
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
}
function getContainingBlock(element) {
let currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode(currentNode);
}
return null;
}
function isWebKit() {
if (typeof CSS === "undefined" || !CSS.supports) return false;
return CSS.supports("-webkit-backdrop-filter", "none");
}
const lastTraversableNodeNames = new Set(["html", "body", "#document"]);
function isLastTraversableNode(node) {
return lastTraversableNodeNames.has(getNodeName(node));
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode(node) {
if (getNodeName(node) === "html") {
return node;
}
const result = (
node.assignedSlot ||
node.parentNode ||
isShadowRoot(node) && node.host ||
getDocumentElement(node)
);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
if (isBody) {
const frameElement = getFrameElement(win);
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
function getCssDimensions(element) {
const css = getComputedStyle$1(element);
let width = parseFloat(css.width) || 0;
let height = parseFloat(css.height) || 0;
const hasOffset = isHTMLElement(element);
const offsetWidth = hasOffset ? element.offsetWidth : width;
const offsetHeight = hasOffset ? element.offsetHeight : height;
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
if (shouldFallback) {
width = offsetWidth;
height = offsetHeight;
}
return {
width,
height,
$: shouldFallback
};
}
function unwrapElement(element) {
return !isElement(element) ? element.contextElement : element;
}
function getScale(element) {
const domElement = unwrapElement(element);
if (!isHTMLElement(domElement)) {
return createCoords(1);
}
const rect = domElement.getBoundingClientRect();
const {
width,
height,
$
} = getCssDimensions(domElement);
let x2 = ($ ? round(rect.width) : rect.width) / width;
let y = ($ ? round(rect.height) : rect.height) / height;
if (!x2 || !Number.isFinite(x2)) {
x2 = 1;
}
if (!y || !Number.isFinite(y)) {
y = 1;
}
return {
x: x2,
y
};
}
const noOffsets = createCoords(0);
function getVisualOffsets(element) {
const win = getWindow(element);
if (!isWebKit() || !win.visualViewport) {
return noOffsets;
}
return {
x: win.visualViewport.offsetLeft,
y: win.visualViewport.offsetTop
};
}
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
if (isFixed === void 0) {
isFixed = false;
}
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
return false;
}
return isFixed;
}
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
const clientRect = element.getBoundingClientRect();
const domElement = unwrapElement(element);
let scale2 = createCoords(1);
if (includeScale) {
if (offsetParent) {
if (isElement(offsetParent)) {
scale2 = getScale(offsetParent);
}
} else {
scale2 = getScale(element);
}
}
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
let x2 = (clientRect.left + visualOffsets.x) / scale2.x;
let y = (clientRect.top + visualOffsets.y) / scale2.y;
let width = clientRect.width / scale2.x;
let height = clientRect.height / scale2.y;
if (domElement) {
const win = getWindow(domElement);
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
let currentWin = win;
let currentIFrame = getFrameElement(currentWin);
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
const iframeScale = getScale(currentIFrame);
const iframeRect = currentIFrame.getBoundingClientRect();
const css = getComputedStyle$1(currentIFrame);
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
x2 *= iframeScale.x;
y *= iframeScale.y;
width *= iframeScale.x;
height *= iframeScale.y;
x2 += left;
y += top;
currentWin = getWindow(currentIFrame);
currentIFrame = getFrameElement(currentWin);
}
}
return rectToClientRect({
width,
height,
x: x2,
y
});
}
function getWindowScrollBarX(element, rect) {
const leftScroll = getNodeScroll(element).scrollLeft;
if (!rect) {
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
}
return rect.left + leftScroll;
}
function getHTMLOffset(documentElement, scroll) {
const htmlRect = documentElement.getBoundingClientRect();
const x2 = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
const y = htmlRect.top + scroll.scrollTop;
return {
x: x2,
y
};
}
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
let {
elements,
rect,
offsetParent,
strategy
} = _ref;
const isFixed = strategy === "fixed";
const documentElement = getDocumentElement(offsetParent);
const topLayer = elements ? isTopLayer(elements.floating) : false;
if (offsetParent === documentElement || topLayer && isFixed) {
return rect;
}
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
let scale2 = createCoords(1);
const offsets = createCoords(0);
const isOffsetParentAnElement = isHTMLElement(offsetParent);
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent);
scale2 = getScale(offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
}
}
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
return {
width: rect.width * scale2.x,
height: rect.height * scale2.y,
x: rect.x * scale2.x - scroll.scrollLeft * scale2.x + offsets.x + htmlOffset.x,
y: rect.y * scale2.y - scroll.scrollTop * scale2.y + offsets.y + htmlOffset.y
};
}
function getClientRects(element) {
return Array.from(element.getClientRects());
}
function getDocumentRect(element) {
const html = getDocumentElement(element);
const scroll = getNodeScroll(element);
const body = element.ownerDocument.body;
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
let x2 = -scroll.scrollLeft + getWindowScrollBarX(element);
const y = -scroll.scrollTop;
if (getComputedStyle$1(body).direction === "rtl") {
x2 += max(html.clientWidth, body.clientWidth) - width;
}
return {
width,
height,
x: x2,
y
};
}
const SCROLLBAR_MAX = 25;
function getViewportRect(element, strategy) {
const win = getWindow(element);
const html = getDocumentElement(element);
const visualViewport = win.visualViewport;
let width = html.clientWidth;
let height = html.clientHeight;
let x2 = 0;
let y = 0;
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height;
const visualViewportBased = isWebKit();
if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
x2 = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
const windowScrollbarX = getWindowScrollBarX(html);
if (windowScrollbarX <= 0) {
const doc = html.ownerDocument;
const body = doc.body;
const bodyStyles = getComputedStyle(body);
const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
width -= clippingStableScrollbarWidth;
}
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
width += windowScrollbarX;
}
return {
width,
height,
x: x2,
y
};
}
const absoluteOrFixed = new Set(["absolute", "fixed"]);
function getInnerBoundingClientRect(element, strategy) {
const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
const top = clientRect.top + element.clientTop;
const left = clientRect.left + element.clientLeft;
const scale2 = isHTMLElement(element) ? getScale(element) : createCoords(1);
const width = element.clientWidth * scale2.x;
const height = element.clientHeight * scale2.y;
const x2 = left * scale2.x;
const y = top * scale2.y;
return {
width,
height,
x: x2,
y
};
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
let rect;
if (clippingAncestor === "viewport") {
rect = getViewportRect(element, strategy);
} else if (clippingAncestor === "document") {
rect = getDocumentRect(getDocumentElement(element));
} else if (isElement(clippingAncestor)) {
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
} else {
const visualOffsets = getVisualOffsets(element);
rect = {
x: clippingAncestor.x - visualOffsets.x,
y: clippingAncestor.y - visualOffsets.y,
width: clippingAncestor.width,
height: clippingAncestor.height
};
}
return rectToClientRect(rect);
}
function hasFixedPositionAncestor(element, stopNode) {
const parentNode = getParentNode(element);
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
return false;
}
return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
}
function getClippingElementAncestors(element, cache) {
const cachedResult = cache.get(element);
if (cachedResult) {
return cachedResult;
}
let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
let currentContainingBlockComputedStyle = null;
const elementIsFixed = getComputedStyle$1(element).position === "fixed";
let currentNode = elementIsFixed ? getParentNode(element) : element;
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
const computedStyle = getComputedStyle$1(currentNode);
const currentNodeIsContaining = isContainingBlock(currentNode);
if (!currentNodeIsContaining && computedStyle.position === "fixed") {
currentContainingBlockComputedStyle = null;
}
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
if (shouldDropCurrentNode) {
result = result.filter((ancestor) => ancestor !== currentNode);
} else {
currentContainingBlockComputedStyle = computedStyle;
}
currentNode = getParentNode(currentNode);
}
cache.set(element, result);
return result;
}
function getClippingRect(_ref) {
let {
element,
boundary,
rootBoundary,
strategy
} = _ref;
const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
const firstClippingAncestor = clippingAncestors[0];
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
accRect.top = max(rect.top, accRect.top);
accRect.right = min(rect.right, accRect.right);
accRect.bottom = min(rect.bottom, accRect.bottom);
accRect.left = max(rect.left, accRect.left);
return accRect;
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
return {
width: clippingRect.right - clippingRect.left,
height: clippingRect.bottom - clippingRect.top,
x: clippingRect.left,
y: clippingRect.top
};
}
function getDimensions(element) {
const {
width,
height
} = getCssDimensions(element);
return {
width,
height
};
}
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
const isFixed = strategy === "fixed";
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
const offsets = createCoords(0);
function setLeftRTLScrollbarOffset() {
offsets.x = getWindowScrollBarX(documentElement);
}
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isOffsetParentAnElement) {
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
} else if (documentElement) {
setLeftRTLScrollbarOffset();
}
}
if (isFixed && !isOffsetParentAnElement && documentElement) {
setLeftRTLScrollbarOffset();
}
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
const x2 = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
return {
x: x2,
y,
width: rect.width,
height: rect.height
};
}
function isStaticPositioned(element) {
return getComputedStyle$1(element).position === "static";
}
function getTrueOffsetParent(element, polyfill) {
if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
return null;
}
if (polyfill) {
return polyfill(element);
}
let rawOffsetParent = element.offsetParent;
if (getDocumentElement(element) === rawOffsetParent) {
rawOffsetParent = rawOffsetParent.ownerDocument.body;
}
return rawOffsetParent;
}
function getOffsetParent(element, polyfill) {
const win = getWindow(element);
if (isTopLayer(element)) {
return win;
}
if (!isHTMLElement(element)) {
let svgOffsetParent = getParentNode(element);
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
return svgOffsetParent;
}
svgOffsetParent = getParentNode(svgOffsetParent);
}
return win;
}
let offsetParent = getTrueOffsetParent(element, polyfill);
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
}
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
return win;
}
return offsetParent || getContainingBlock(element) || win;
}
const getElementRects = async function(data) {
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
const getDimensionsFn = this.getDimensions;
const floatingDimensions = await getDimensionsFn(data.floating);
return {
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
floating: {
x: 0,
y: 0,
width: floatingDimensions.width,
height: floatingDimensions.height
}
};
};
function isRTL(element) {
return getComputedStyle$1(element).direction === "rtl";
}
const platform = {
convertOffsetParentRelativeRectToViewportRelativeRect,
getDocumentElement,
getClippingRect,
getOffsetParent,
getElementRects,
getClientRects,
getDimensions,
getScale,
isElement,
isRTL
};
function rectsAreEqual(a2, b) {
return a2.x === b.x && a2.y === b.y && a2.width === b.width && a2.height === b.height;
}
function observeMove(element, onMove) {
let io = null;
let timeoutId;
const root = getDocumentElement(element);
function cleanup() {
var _io;
clearTimeout(timeoutId);
(_io = io) == null || _io.disconnect();
io = null;
}
function refresh(skip, threshold) {
if (skip === void 0) {
skip = false;
}
if (threshold === void 0) {
threshold = 1;
}
cleanup();
const elementRectForRootMargin = element.getBoundingClientRect();
const {
left,
top,
width,
height
} = elementRectForRootMargin;
if (!skip) {
onMove();
}
if (!width || !height) {
return;
}
const insetTop = floor(top);
const insetRight = floor(root.clientWidth - (left + width));
const insetBottom = floor(root.clientHeight - (top + height));
const insetLeft = floor(left);
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
const options = {
rootMargin,
threshold: max(0, min(1, threshold)) || 1
};
let isFirstUpdate = true;
function handleObserve(entries) {
const ratio = entries[0].intersectionRatio;
if (ratio !== threshold) {
if (!isFirstUpdate) {
return refresh();
}
if (!ratio) {
timeoutId = setTimeout(() => {
refresh(false, 1e-7);
}, 1e3);
} else {
refresh(false, ratio);
}
}
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
refresh();
}
isFirstUpdate = false;
}
try {
io = new IntersectionObserver(handleObserve, {
...options,
root: root.ownerDocument
});
} catch (_e) {
io = new IntersectionObserver(handleObserve, options);
}
io.observe(element);
}
refresh(true);
return cleanup;
}
function autoUpdate(reference, floating, update, options) {
if (options === void 0) {
options = {};
}
const {
ancestorScroll = true,
ancestorResize = true,
elementResize = typeof ResizeObserver === "function",
layoutShift = typeof IntersectionObserver === "function",
animationFrame = false
} = options;
const referenceEl = unwrapElement(reference);
const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
ancestors.forEach((ancestor) => {
ancestorScroll && ancestor.addEventListener("scroll", update, {
passive: true
});
ancestorResize && ancestor.addEventListener("resize", update);
});
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
let reobserveFrame = -1;
let resizeObserver = null;
if (elementResize) {
resizeObserver = new ResizeObserver((_ref) => {
let [firstEntry] = _ref;
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
resizeObserver.unobserve(floating);
cancelAnimationFrame(reobserveFrame);
reobserveFrame = requestAnimationFrame(() => {
var _resizeObserver;
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
});
}
update();
});
if (referenceEl && !animationFrame) {
resizeObserver.observe(referenceEl);
}
resizeObserver.observe(floating);
}
let frameId;
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
if (animationFrame) {
frameLoop();
}
function frameLoop() {
const nextRefRect = getBoundingClientRect(reference);
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
update();
}
prevRefRect = nextRefRect;
frameId = requestAnimationFrame(frameLoop);
}
update();
return () => {
var _resizeObserver2;
ancestors.forEach((ancestor) => {
ancestorScroll && ancestor.removeEventListener("scroll", update);
ancestorResize && ancestor.removeEventListener("resize", update);
});
cleanupIo == null || cleanupIo();
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
resizeObserver = null;
if (animationFrame) {
cancelAnimationFrame(frameId);
}
};
}
const offset$1 = offset$2;
const shift$1 = shift$2;
const flip$1 = flip$2;
const size$1 = size$2;
const hide$1 = hide$2;
const arrow$2 = arrow$3;
const limitShift$1 = limitShift$2;
const computePosition = (reference, floating, options) => {
const cache = new Map();
const mergedOptions = {
platform,
...options
};
const platformWithCache = {
...mergedOptions.platform,
_c: cache
};
return computePosition$1(reference, floating, {
...mergedOptions,
platform: platformWithCache
});
};
var isClient = typeof document !== "undefined";
var noop = function noop2() {
};
var index = isClient ? React.useLayoutEffect : noop;
function deepEqual(a2, b) {
if (a2 === b) {
return true;
}
if (typeof a2 !== typeof b) {
return false;
}
if (typeof a2 === "function" && a2.toString() === b.toString()) {
return true;
}
let length;
let i2;
let keys;
if (a2 && b && typeof a2 === "object") {
if (Array.isArray(a2)) {
length = a2.length;
if (length !== b.length) return false;
for (i2 = length; i2-- !== 0; ) {
if (!deepEqual(a2[i2], b[i2])) {
return false;
}
}
return true;
}
keys = Object.keys(a2);
length = keys.length;
if (length !== Object.keys(b).length) {
return false;
}
for (i2 = length; i2-- !== 0; ) {
if (!{}.hasOwnProperty.call(b, keys[i2])) {
return false;
}
}
for (i2 = length; i2-- !== 0; ) {
const key = keys[i2];
if (key === "_owner" && a2.$$typeof) {
continue;
}
if (!deepEqual(a2[key], b[key])) {
return false;
}
}
return true;
}
return a2 !== a2 && b !== b;
}
function getDPR(element) {
if (typeof window === "undefined") {
return 1;
}
const win = element.ownerDocument.defaultView || window;
return win.devicePixelRatio || 1;
}
function roundByDPR(element, value) {
const dpr = getDPR(element);
return Math.round(value * dpr) / dpr;
}
function useLatestRef(value) {
const ref = React__namespace.useRef(value);
index(() => {
ref.current = value;
});
return ref;
}
function useFloating(options) {
if (options === void 0) {
options = {};
}
const {
placement = "bottom",
strategy = "absolute",
middleware = [],
platform: platform2,
elements: {
reference: externalReference,
floating: externalFloating
} = {},
transform = true,
whileElementsMounted,
open
} = options;
const [data, setData] = React__namespace.useState({
x: 0,
y: 0,
strategy,
placement,
middlewareData: {},
isPositioned: false
});
const [latestMiddleware, setLatestMiddleware] = React__namespace.useState(middleware);
if (!deepEqual(latestMiddleware, middleware)) {
setLatestMiddleware(middleware);
}
const [_reference, _setReference] = React__namespace.useState(null);
const [_floating, _setFloating] = React__namespace.useState(null);
const setReference = React__namespace.useCallback((node) => {
if (node !== referenceRef.current) {
referenceRef.current = node;
_setReference(node);
}
}, []);
const setFloating = React__namespace.useCallback((node) => {
if (node !== floatingRef.current) {
floatingRef.current = node;
_setFloating(node);
}
}, []);
const referenceEl = externalReference || _reference;
const floatingEl = externalFloating || _floating;
const referenceRef = React__namespace.useRef(null);
const floatingRef = React__namespace.useRef(null);
const dataRef = React__namespace.useRef(data);
const hasWhileElementsMounted = whileElementsMounted != null;
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
const platformRef = useLatestRef(platform2);
const openRef = useLatestRef(open);
const update = React__namespace.useCallback(() => {
if (!referenceRef.current || !floatingRef.current) {
return;
}
const config2 = {
placement,
strategy,
middleware: latestMiddleware
};
if (platformRef.current) {
config2.platform = platformRef.current;
}
computePosition(referenceRef.current, floatingRef.current, config2).then((data2) => {
const fullData = {
...data2,
isPositioned: openRef.current !== false
};
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
dataRef.current = fullData;
reactDomExports.flushSync(() => {
setData(fullData);
});
}
});
}, [latestMiddleware, placement, strategy, platformRef, openRef]);
index(() => {
if (open === false && dataRef.current.isPositioned) {
dataRef.current.isPositioned = false;
setData((data2) => ({
...data2,
isPositioned: false
}));
}
}, [open]);
const isMountedRef = React__namespace.useRef(false);
index(() => {
isMountedRef.current = true;
return () => {
isMountedRef.current = false;
};
}, []);
index(() => {
if (referenceEl) referenceRef.current = referenceEl;
if (floatingEl) floatingRef.current = floatingEl;
if (referenceEl && floatingEl) {
if (whileElementsMountedRef.current) {
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
}
update();
}
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
const refs = React__namespace.useMemo(() => ({
reference: referenceRef,
floating: floatingRef,
setReference,
setFloating
}), [setReference, setFloating]);
const elements = React__namespace.useMemo(() => ({
reference: referenceEl,
floating: floatingEl
}), [referenceEl, floatingEl]);
const floatingStyles = React__namespace.useMemo(() => {
const initialStyles = {
position: strategy,
left: 0,
top: 0
};
if (!elements.floating) {
return initialStyles;
}
const x2 = roundByDPR(elements.floating, data.x);
const y = roundByDPR(elements.floating, data.y);
if (transform) {
return {
...initialStyles,
transform: "translate(" + x2 + "px, " + y + "px)",
...getDPR(elements.floating) >= 1.5 && {
willChange: "transform"
}
};
}
return {
position: strategy,
left: x2,
top: y
};
}, [strategy, transform, elements.floating, data.x, data.y]);
return React__namespace.useMemo(() => ({
...data,
update,
refs,
elements,
floatingStyles
}), [data, update, refs, elements, floatingStyles]);
}
const arrow$1 = (options) => {
function isRef(value) {
return {}.hasOwnProperty.call(value, "current");
}
return {
name: "arrow",
options,
fn(state) {
const {
element,
padding
} = typeof options === "function" ? options(state) : options;
if (element && isRef(element)) {
if (element.current != null) {
return arrow$2({
element: element.current,
padding
}).fn(state);
}
return {};
}
if (element) {
return arrow$2({
element,
padding
}).fn(state);
}
return {};
}
};
};
const offset = (options, deps) => ({
...offset$1(options),
options: [options, deps]
});
const shift = (options, deps) => ({
...shift$1(options),
options: [options, deps]
});
const limitShift = (options, deps) => ({
...limitShift$1(options),
options: [options, deps]
});
const flip = (options, deps) => ({
...flip$1(options),
options: [options, deps]
});
const size = (options, deps) => ({
...size$1(options),
options: [options, deps]
});
const hide = (options, deps) => ({
...hide$1(options),
options: [options, deps]
});
const arrow = (options, deps) => ({
...arrow$1(options),
options: [options, deps]
});
var NAME$3 = "Arrow";
var Arrow$1 = React__namespace.forwardRef((props, forwardedRef) => {
const { children, width = 10, height = 5, ...arrowProps } = props;
return jsxRuntimeExports.jsx(
Primitive.svg,
{
...arrowProps,
ref: forwardedRef,
width,
height,
viewBox: "0 0 30 10",
preserveAspectRatio: "none",
children: props.asChild ? children : jsxRuntimeExports.jsx("polygon", { points: "0,0 30,0 15,10" })
}
);
});
Arrow$1.displayName = NAME$3;
var Root$5 = Arrow$1;
function useSize(element) {
const [size2, setSize] = React__namespace.useState(void 0);
useLayoutEffect2(() => {
if (element) {
setSize({ width: element.offsetWidth, height: element.offsetHeight });
const resizeObserver = new ResizeObserver((entries) => {
if (!Array.isArray(entries)) {
return;
}
if (!entries.length) {
return;
}
const entry = entries[0];
let width;
let height;
if ("borderBoxSize" in entry) {
const borderSizeEntry = entry["borderBoxSize"];
const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
width = borderSize["inlineSize"];
height = borderSize["blockSize"];
} else {
width = element.offsetWidth;
height = element.offsetHeight;
}
setSize({ width, height });
});
resizeObserver.observe(element, { box: "border-box" });
return () => resizeObserver.unobserve(element);
} else {
setSize(void 0);
}
}, [element]);
return size2;
}
var POPPER_NAME = "Popper";
var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
var Popper = (props) => {
const { __scopePopper, children } = props;
const [anchor, setAnchor] = React__namespace.useState(null);
return jsxRuntimeExports.jsx(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
};
Popper.displayName = POPPER_NAME;
var ANCHOR_NAME$2 = "PopperAnchor";
var PopperAnchor = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopePopper, virtualRef, ...anchorProps } = props;
const context = usePopperContext(ANCHOR_NAME$2, __scopePopper);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
const anchorRef = React__namespace.useRef(null);
React__namespace.useEffect(() => {
const previousAnchor = anchorRef.current;
anchorRef.current = virtualRef?.current || ref.current;
if (previousAnchor !== anchorRef.current) {
context.onAnchorChange(anchorRef.current);
}
});
return virtualRef ? null : jsxRuntimeExports.jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
}
);
PopperAnchor.displayName = ANCHOR_NAME$2;
var CONTENT_NAME$6 = "PopperContent";
var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$6);
var PopperContent = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
__scopePopper,
side = "bottom",
sideOffset = 0,
align = "center",
alignOffset = 0,
arrowPadding = 0,
avoidCollisions = true,
collisionBoundary = [],
collisionPadding: collisionPaddingProp = 0,
sticky = "partial",
hideWhenDetached = false,
updatePositionStrategy = "optimized",
onPlaced,
...contentProps
} = props;
const context = usePopperContext(CONTENT_NAME$6, __scopePopper);
const [content, setContent] = React__namespace.useState(null);
const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContent(node));
const [arrow$12, setArrow] = React__namespace.useState(null);
const arrowSize = useSize(arrow$12);
const arrowWidth = arrowSize?.width ?? 0;
const arrowHeight = arrowSize?.height ?? 0;
const desiredPlacement = side + (align !== "center" ? "-" + align : "");
const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
const hasExplicitBoundaries = boundary.length > 0;
const detectOverflowOptions = {
padding: collisionPadding,
boundary: boundary.filter(isNotNull),
altBoundary: hasExplicitBoundaries
};
const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
strategy: "fixed",
placement: desiredPlacement,
whileElementsMounted: (...args) => {
const cleanup = autoUpdate(...args, {
animationFrame: updatePositionStrategy === "always"
});
return cleanup;
},
elements: {
reference: context.anchor
},
middleware: [
offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
avoidCollisions && shift({
mainAxis: true,
crossAxis: false,
limiter: sticky === "partial" ? limitShift() : void 0,
...detectOverflowOptions
}),
avoidCollisions && flip({ ...detectOverflowOptions }),
size({
...detectOverflowOptions,
apply: ({ elements, rects, availableWidth, availableHeight }) => {
const { width: anchorWidth, height: anchorHeight } = rects.reference;
const contentStyle = elements.floating.style;
contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
}
}),
arrow$12 && arrow({ element: arrow$12, padding: arrowPadding }),
transformOrigin({ arrowWidth, arrowHeight }),
hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions })
]
});
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const handlePlaced = useCallbackRef$1(onPlaced);
useLayoutEffect2(() => {
if (isPositioned) {
handlePlaced?.();
}
}, [isPositioned, handlePlaced]);
const arrowX = middlewareData.arrow?.x;
const arrowY = middlewareData.arrow?.y;
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
const [contentZIndex, setContentZIndex] = React__namespace.useState();
useLayoutEffect2(() => {
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
}, [content]);
return jsxRuntimeExports.jsx(
"div",
{
ref: refs.setFloating,
"data-radix-popper-content-wrapper": "",
style: {
...floatingStyles,
transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
minWidth: "max-content",
zIndex: contentZIndex,
["--radix-popper-transform-origin"]: [
middlewareData.transformOrigin?.x,
middlewareData.transformOrigin?.y
].join(" "),
...middlewareData.hide?.referenceHidden && {
visibility: "hidden",
pointerEvents: "none"
}
},
dir: props.dir,
children: jsxRuntimeExports.jsx(
PopperContentProvider,
{
scope: __scopePopper,
placedSide,
onArrowChange: setArrow,
arrowX,
arrowY,
shouldHideArrow: cannotCenterArrow,
children: jsxRuntimeExports.jsx(
Primitive.div,
{
"data-side": placedSide,
"data-align": placedAlign,
...contentProps,
ref: composedRefs,
style: {
...contentProps.style,
animation: !isPositioned ? "none" : void 0
}
}
)
}
)
}
);
}
);
PopperContent.displayName = CONTENT_NAME$6;
var ARROW_NAME$4 = "PopperArrow";
var OPPOSITE_SIDE = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
};
var PopperArrow = React__namespace.forwardRef(function PopperArrow2(props, forwardedRef) {
const { __scopePopper, ...arrowProps } = props;
const contentContext = useContentContext(ARROW_NAME$4, __scopePopper);
const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
return (
jsxRuntimeExports.jsx(
"span",
{
ref: contentContext.onArrowChange,
style: {
position: "absolute",
left: contentContext.arrowX,
top: contentContext.arrowY,
[baseSide]: 0,
transformOrigin: {
top: "",
right: "0 0",
bottom: "center 0",
left: "100% 0"
}[contentContext.placedSide],
transform: {
top: "translateY(100%)",
right: "translateY(50%) rotate(90deg) translateX(-50%)",
bottom: `rotate(180deg)`,
left: "translateY(50%) rotate(-90deg) translateX(50%)"
}[contentContext.placedSide],
visibility: contentContext.shouldHideArrow ? "hidden" : void 0
},
children: jsxRuntimeExports.jsx(
Root$5,
{
...arrowProps,
ref: forwardedRef,
style: {
...arrowProps.style,
display: "block"
}
}
)
}
)
);
});
PopperArrow.displayName = ARROW_NAME$4;
function isNotNull(value) {
return value !== null;
}
var transformOrigin = (options) => ({
name: "transformOrigin",
options,
fn(data) {
const { placement, rects, middlewareData } = data;
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
const isArrowHidden = cannotCenterArrow;
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
let x2 = "";
let y = "";
if (placedSide === "bottom") {
x2 = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${-arrowHeight}px`;
} else if (placedSide === "top") {
x2 = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${rects.floating.height + arrowHeight}px`;
} else if (placedSide === "right") {
x2 = `${-arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
} else if (placedSide === "left") {
x2 = `${rects.floating.width + arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
}
return { data: { x: x2, y } };
}
});
function getSideAndAlignFromPlacement(placement) {
const [side, align = "center"] = placement.split("-");
return [side, align];
}
var Root2$3 = Popper;
var Anchor = PopperAnchor;
var Content$2 = PopperContent;
var Arrow = PopperArrow;
var PORTAL_NAME$5 = "Portal";
var Portal$4 = React__namespace.forwardRef((props, forwardedRef) => {
const { container: containerProp, ...portalProps } = props;
const [mounted, setMounted] = React__namespace.useState(false);
useLayoutEffect2(() => setMounted(true), []);
const container = containerProp || mounted && globalThis?.document?.body;
return container ? ReactDOM.createPortal( jsxRuntimeExports.jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
});
Portal$4.displayName = PORTAL_NAME$5;
var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
var EVENT_OPTIONS = { bubbles: false, cancelable: true };
var GROUP_NAME$2 = "RovingFocusGroup";
var [Collection$1, useCollection$1, createCollectionScope$1] = createCollection(GROUP_NAME$2);
var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
GROUP_NAME$2,
[createCollectionScope$1]
);
var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME$2);
var RovingFocusGroup = React__namespace.forwardRef(
(props, forwardedRef) => {
return jsxRuntimeExports.jsx(Collection$1.Provider, { scope: props.__scopeRovingFocusGroup, children: jsxRuntimeExports.jsx(Collection$1.Slot, { scope: props.__scopeRovingFocusGroup, children: jsxRuntimeExports.jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
}
);
RovingFocusGroup.displayName = GROUP_NAME$2;
var RovingFocusGroupImpl = React__namespace.forwardRef((props, forwardedRef) => {
const {
__scopeRovingFocusGroup,
orientation,
loop = false,
dir,
currentTabStopId: currentTabStopIdProp,
defaultCurrentTabStopId,
onCurrentTabStopIdChange,
onEntryFocus,
preventScrollOnEntryFocus = false,
...groupProps
} = props;
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
const direction = useDirection(dir);
const [currentTabStopId, setCurrentTabStopId] = useControllableState({
prop: currentTabStopIdProp,
defaultProp: defaultCurrentTabStopId ?? null,
onChange: onCurrentTabStopIdChange,
caller: GROUP_NAME$2
});
const [isTabbingBackOut, setIsTabbingBackOut] = React__namespace.useState(false);
const handleEntryFocus = useCallbackRef$1(onEntryFocus);
const getItems = useCollection$1(__scopeRovingFocusGroup);
const isClickFocusRef = React__namespace.useRef(false);
const [focusableItemsCount, setFocusableItemsCount] = React__namespace.useState(0);
React__namespace.useEffect(() => {
const node = ref.current;
if (node) {
node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
}
}, [handleEntryFocus]);
return jsxRuntimeExports.jsx(
RovingFocusProvider,
{
scope: __scopeRovingFocusGroup,
orientation,
dir: direction,
loop,
currentTabStopId,
onItemFocus: React__namespace.useCallback(
(tabStopId) => setCurrentTabStopId(tabStopId),
[setCurrentTabStopId]
),
onItemShiftTab: React__namespace.useCallback(() => setIsTabbingBackOut(true), []),
onFocusableItemAdd: React__namespace.useCallback(
() => setFocusableItemsCount((prevCount) => prevCount + 1),
[]
),
onFocusableItemRemove: React__namespace.useCallback(
() => setFocusableItemsCount((prevCount) => prevCount - 1),
[]
),
children: jsxRuntimeExports.jsx(
Primitive.div,
{
tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
"data-orientation": orientation,
...groupProps,
ref: composedRefs,
style: { outline: "none", ...props.style },
onMouseDown: composeEventHandlers(props.onMouseDown, () => {
isClickFocusRef.current = true;
}),
onFocus: composeEventHandlers(props.onFocus, (event) => {
const isKeyboardFocus = !isClickFocusRef.current;
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
event.currentTarget.dispatchEvent(entryFocusEvent);
if (!entryFocusEvent.defaultPrevented) {
const items = getItems().filter((item) => item.focusable);
const activeItem = items.find((item) => item.active);
const currentItem = items.find((item) => item.id === currentTabStopId);
const candidateItems = [activeItem, currentItem, ...items].filter(
Boolean
);
const candidateNodes = candidateItems.map((item) => item.ref.current);
focusFirst$1(candidateNodes, preventScrollOnEntryFocus);
}
}
isClickFocusRef.current = false;
}),
onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
}
)
}
);
});
var ITEM_NAME$2 = "RovingFocusGroupItem";
var RovingFocusGroupItem = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
__scopeRovingFocusGroup,
focusable = true,
active = false,
tabStopId,
children,
...itemProps
} = props;
const autoId = useId();
const id2 = tabStopId || autoId;
const context = useRovingFocusContext(ITEM_NAME$2, __scopeRovingFocusGroup);
const isCurrentTabStop = context.currentTabStopId === id2;
const getItems = useCollection$1(__scopeRovingFocusGroup);
const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
React__namespace.useEffect(() => {
if (focusable) {
onFocusableItemAdd();
return () => onFocusableItemRemove();
}
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
return jsxRuntimeExports.jsx(
Collection$1.ItemSlot,
{
scope: __scopeRovingFocusGroup,
id: id2,
focusable,
active,
children: jsxRuntimeExports.jsx(
Primitive.span,
{
tabIndex: isCurrentTabStop ? 0 : -1,
"data-orientation": context.orientation,
...itemProps,
ref: forwardedRef,
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
if (!focusable) event.preventDefault();
else context.onItemFocus(id2);
}),
onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id2)),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
if (event.key === "Tab" && event.shiftKey) {
context.onItemShiftTab();
return;
}
if (event.target !== event.currentTarget) return;
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
if (focusIntent !== void 0) {
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
event.preventDefault();
const items = getItems().filter((item) => item.focusable);
let candidateNodes = items.map((item) => item.ref.current);
if (focusIntent === "last") candidateNodes.reverse();
else if (focusIntent === "prev" || focusIntent === "next") {
if (focusIntent === "prev") candidateNodes.reverse();
const currentIndex = candidateNodes.indexOf(event.currentTarget);
candidateNodes = context.loop ? wrapArray$1(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
}
setTimeout(() => focusFirst$1(candidateNodes));
}
}),
children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children
}
)
}
);
}
);
RovingFocusGroupItem.displayName = ITEM_NAME$2;
var MAP_KEY_TO_FOCUS_INTENT = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
function getDirectionAwareKey(key, dir) {
if (dir !== "rtl") return key;
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
}
function getFocusIntent(event, orientation, dir) {
const key = getDirectionAwareKey(event.key, dir);
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
return MAP_KEY_TO_FOCUS_INTENT[key];
}
function focusFirst$1(candidates, preventScroll = false) {
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
for (const candidate of candidates) {
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
candidate.focus({ preventScroll });
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
}
}
function wrapArray$1(array, startIndex) {
return array.map((_, index2) => array[(startIndex + index2) % array.length]);
}
var Root$4 = RovingFocusGroup;
var Item = RovingFocusGroupItem;
var getDefaultParent = function(originalTarget) {
if (typeof document === "undefined") {
return null;
}
var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
return sampleTarget.ownerDocument.body;
};
var counterMap = new WeakMap();
var uncontrolledNodes = new WeakMap();
var markerMap = {};
var lockCount = 0;
var unwrapHost = function(node) {
return node && (node.host || unwrapHost(node.parentNode));
};
var correctTargets = function(parent, targets) {
return targets.map(function(target) {
if (parent.contains(target)) {
return target;
}
var correctedTarget = unwrapHost(target);
if (correctedTarget && parent.contains(correctedTarget)) {
return correctedTarget;
}
console.error("aria-hidden", target, "in not contained inside", parent, ". Doing nothing");
return null;
}).filter(function(x2) {
return Boolean(x2);
});
};
var applyAttributeToOthers = function(originalTarget, parentNode, markerName, controlAttribute) {
var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
if (!markerMap[markerName]) {
markerMap[markerName] = new WeakMap();
}
var markerCounter = markerMap[markerName];
var hiddenNodes = [];
var elementsToKeep = new Set();
var elementsToStop = new Set(targets);
var keep = function(el) {
if (!el || elementsToKeep.has(el)) {
return;
}
elementsToKeep.add(el);
keep(el.parentNode);
};
targets.forEach(keep);
var deep = function(parent) {
if (!parent || elementsToStop.has(parent)) {
return;
}
Array.prototype.forEach.call(parent.children, function(node) {
if (elementsToKeep.has(node)) {
deep(node);
} else {
try {
var attr = node.getAttribute(controlAttribute);
var alreadyHidden = attr !== null && attr !== "false";
var counterValue = (counterMap.get(node) || 0) + 1;
var markerValue = (markerCounter.get(node) || 0) + 1;
counterMap.set(node, counterValue);
markerCounter.set(node, markerValue);
hiddenNodes.push(node);
if (counterValue === 1 && alreadyHidden) {
uncontrolledNodes.set(node, true);
}
if (markerValue === 1) {
node.setAttribute(markerName, "true");
}
if (!alreadyHidden) {
node.setAttribute(controlAttribute, "true");
}
} catch (e) {
console.error("aria-hidden: cannot operate on ", node, e);
}
}
});
};
deep(parentNode);
elementsToKeep.clear();
lockCount++;
return function() {
hiddenNodes.forEach(function(node) {
var counterValue = counterMap.get(node) - 1;
var markerValue = markerCounter.get(node) - 1;
counterMap.set(node, counterValue);
markerCounter.set(node, markerValue);
if (!counterValue) {
if (!uncontrolledNodes.has(node)) {
node.removeAttribute(controlAttribute);
}
uncontrolledNodes.delete(node);
}
if (!markerValue) {
node.removeAttribute(markerName);
}
});
lockCount--;
if (!lockCount) {
counterMap = new WeakMap();
counterMap = new WeakMap();
uncontrolledNodes = new WeakMap();
markerMap = {};
}
};
};
var hideOthers = function(originalTarget, parentNode, markerName) {
if (markerName === void 0) {
markerName = "data-aria-hidden";
}
var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
var activeParentNode = getDefaultParent(originalTarget);
if (!activeParentNode) {
return function() {
return null;
};
}
targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll("[aria-live], script")));
return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
};
var __assign = function() {
__assign = Object.assign || function __assign2(t2) {
for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
s2 = arguments[i2];
for (var p in s2) if (Object.prototype.hasOwnProperty.call(s2, p)) t2[p] = s2[p];
}
return t2;
};
return __assign.apply(this, arguments);
};
function __rest(s2, e) {
var t2 = {};
for (var p in s2) if (Object.prototype.hasOwnProperty.call(s2, p) && e.indexOf(p) < 0)
t2[p] = s2[p];
if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
for (var i2 = 0, p = Object.getOwnPropertySymbols(s2); i2 < p.length; i2++) {
if (e.indexOf(p[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p[i2]))
t2[p[i2]] = s2[p[i2]];
}
return t2;
}
function __spreadArray(to, from, pack) {
for (var i2 = 0, l = from.length, ar; i2 < l; i2++) {
if (ar || !(i2 in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i2);
ar[i2] = from[i2];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function(error2, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error2, e.suppressed = suppressed, e;
};
var zeroRightClassName = "right-scroll-bar-position";
var fullWidthClassName = "width-before-scroll-bar";
var noScrollbarsClassName = "with-scroll-bars-hidden";
var removedBarSizeVariable = "--removed-body-scroll-bar-size";
function assignRef(ref, value) {
if (typeof ref === "function") {
ref(value);
} else if (ref) {
ref.current = value;
}
return ref;
}
function useCallbackRef(initialValue, callback) {
var ref = React.useState(function() {
return {
value: initialValue,
callback,
facade: {
get current() {
return ref.value;
},
set current(value) {
var last = ref.value;
if (last !== value) {
ref.value = value;
ref.callback(value, last);
}
}
}
};
})[0];
ref.callback = callback;
return ref.facade;
}
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
var currentValues = new WeakMap();
function useMergeRefs(refs, defaultValue) {
var callbackRef = useCallbackRef(null, function(newValue) {
return refs.forEach(function(ref) {
return assignRef(ref, newValue);
});
});
useIsomorphicLayoutEffect(function() {
var oldValue = currentValues.get(callbackRef);
if (oldValue) {
var prevRefs_1 = new Set(oldValue);
var nextRefs_1 = new Set(refs);
var current_1 = callbackRef.current;
prevRefs_1.forEach(function(ref) {
if (!nextRefs_1.has(ref)) {
assignRef(ref, null);
}
});
nextRefs_1.forEach(function(ref) {
if (!prevRefs_1.has(ref)) {
assignRef(ref, current_1);
}
});
}
currentValues.set(callbackRef, refs);
}, [refs]);
return callbackRef;
}
function ItoI(a2) {
return a2;
}
function innerCreateMedium(defaults, middleware) {
if (middleware === void 0) {
middleware = ItoI;
}
var buffer = [];
var assigned = false;
var medium = {
read: function() {
if (assigned) {
throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");
}
if (buffer.length) {
return buffer[buffer.length - 1];
}
return defaults;
},
useMedium: function(data) {
var item = middleware(data, assigned);
buffer.push(item);
return function() {
buffer = buffer.filter(function(x2) {
return x2 !== item;
});
};
},
assignSyncMedium: function(cb) {
assigned = true;
while (buffer.length) {
var cbs = buffer;
buffer = [];
cbs.forEach(cb);
}
buffer = {
push: function(x2) {
return cb(x2);
},
filter: function() {
return buffer;
}
};
},
assignMedium: function(cb) {
assigned = true;
var pendingQueue = [];
if (buffer.length) {
var cbs = buffer;
buffer = [];
cbs.forEach(cb);
pendingQueue = buffer;
}
var executeQueue = function() {
var cbs2 = pendingQueue;
pendingQueue = [];
cbs2.forEach(cb);
};
var cycle = function() {
return Promise.resolve().then(executeQueue);
};
cycle();
buffer = {
push: function(x2) {
pendingQueue.push(x2);
cycle();
},
filter: function(filter2) {
pendingQueue = pendingQueue.filter(filter2);
return buffer;
}
};
}
};
return medium;
}
function createSidecarMedium(options) {
if (options === void 0) {
options = {};
}
var medium = innerCreateMedium(null);
medium.options = __assign({ async: true, ssr: false }, options);
return medium;
}
var SideCar$1 = function(_a) {
var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
if (!sideCar) {
throw new Error("Sidecar: please provide `sideCar` property to import the right car");
}
var Target = sideCar.read();
if (!Target) {
throw new Error("Sidecar medium not found");
}
return React__namespace.createElement(Target, __assign({}, rest));
};
SideCar$1.isSideCarExport = true;
function exportSidecar(medium, exported) {
medium.useMedium(exported);
return SideCar$1;
}
var effectCar = createSidecarMedium();
var nothing = function() {
return;
};
var RemoveScroll = React__namespace.forwardRef(function(props, parentRef) {
var ref = React__namespace.useRef(null);
var _a = React__namespace.useState({
onScrollCapture: nothing,
onWheelCapture: nothing,
onTouchMoveCapture: nothing
}), callbacks = _a[0], setCallbacks = _a[1];
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? "div" : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
var SideCar2 = sideCar;
var containerRef = useMergeRefs([ref, parentRef]);
var containerProps = __assign(__assign({}, rest), callbacks);
return React__namespace.createElement(
React__namespace.Fragment,
null,
enabled && React__namespace.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
forwardProps ? React__namespace.cloneElement(React__namespace.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React__namespace.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
);
});
RemoveScroll.defaultProps = {
enabled: true,
removeScrollBar: true,
inert: false
};
RemoveScroll.classNames = {
fullWidth: fullWidthClassName,
zeroRight: zeroRightClassName
};
var getNonce = function() {
if (typeof __webpack_nonce__ !== "undefined") {
return __webpack_nonce__;
}
return void 0;
};
function makeStyleTag() {
if (!document)
return null;
var tag = document.createElement("style");
tag.type = "text/css";
var nonce = getNonce();
if (nonce) {
tag.setAttribute("nonce", nonce);
}
return tag;
}
function injectStyles(tag, css) {
if (tag.styleSheet) {
tag.styleSheet.cssText = css;
} else {
tag.appendChild(document.createTextNode(css));
}
}
function insertStyleTag(tag) {
var head = document.head || document.getElementsByTagName("head")[0];
head.appendChild(tag);
}
var stylesheetSingleton = function() {
var counter = 0;
var stylesheet = null;
return {
add: function(style2) {
if (counter == 0) {
if (stylesheet = makeStyleTag()) {
injectStyles(stylesheet, style2);
insertStyleTag(stylesheet);
}
}
counter++;
},
remove: function() {
counter--;
if (!counter && stylesheet) {
stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
stylesheet = null;
}
}
};
};
var styleHookSingleton = function() {
var sheet = stylesheetSingleton();
return function(styles, isDynamic) {
React__namespace.useEffect(function() {
sheet.add(styles);
return function() {
sheet.remove();
};
}, [styles && isDynamic]);
};
};
var styleSingleton = function() {
var useStyle2 = styleHookSingleton();
var Sheet = function(_a) {
var styles = _a.styles, dynamic = _a.dynamic;
useStyle2(styles, dynamic);
return null;
};
return Sheet;
};
var zeroGap = {
left: 0,
top: 0,
right: 0,
gap: 0
};
var parse$1 = function(x2) {
return parseInt(x2 || "", 10) || 0;
};
var getOffset = function(gapMode) {
var cs = window.getComputedStyle(document.body);
var left = cs[gapMode === "padding" ? "paddingLeft" : "marginLeft"];
var top = cs[gapMode === "padding" ? "paddingTop" : "marginTop"];
var right = cs[gapMode === "padding" ? "paddingRight" : "marginRight"];
return [parse$1(left), parse$1(top), parse$1(right)];
};
var getGapWidth = function(gapMode) {
if (gapMode === void 0) {
gapMode = "margin";
}
if (typeof window === "undefined") {
return zeroGap;
}
var offsets = getOffset(gapMode);
var documentWidth = document.documentElement.clientWidth;
var windowWidth = window.innerWidth;
return {
left: offsets[0],
top: offsets[1],
right: offsets[2],
gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0])
};
};
var Style = styleSingleton();
var lockAttribute = "data-scroll-locked";
var getStyles = function(_a, allowRelative, gapMode, important) {
var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
if (gapMode === void 0) {
gapMode = "margin";
}
return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
allowRelative && "position: relative ".concat(important, ";"),
gapMode === "margin" && "\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "),
gapMode === "padding" && "padding-right: ".concat(gap, "px ").concat(important, ";")
].filter(Boolean).join(""), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body[").concat(lockAttribute, "] {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
};
var getCurrentUseCounter = function() {
var counter = parseInt(document.body.getAttribute(lockAttribute) || "0", 10);
return isFinite(counter) ? counter : 0;
};
var useLockAttribute = function() {
React__namespace.useEffect(function() {
document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
return function() {
var newCounter = getCurrentUseCounter() - 1;
if (newCounter <= 0) {
document.body.removeAttribute(lockAttribute);
} else {
document.body.setAttribute(lockAttribute, newCounter.toString());
}
};
}, []);
};
var RemoveScrollBar = function(_a) {
var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? "margin" : _b;
useLockAttribute();
var gap = React__namespace.useMemo(function() {
return getGapWidth(gapMode);
}, [gapMode]);
return React__namespace.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
};
var passiveSupported = false;
if (typeof window !== "undefined") {
try {
var options = Object.defineProperty({}, "passive", {
get: function() {
passiveSupported = true;
return true;
}
});
window.addEventListener("test", options, options);
window.removeEventListener("test", options, options);
} catch (err) {
passiveSupported = false;
}
}
var nonPassive = passiveSupported ? { passive: false } : false;
var alwaysContainsScroll = function(node) {
return node.tagName === "TEXTAREA";
};
var elementCanBeScrolled = function(node, overflow) {
if (!(node instanceof Element)) {
return false;
}
var styles = window.getComputedStyle(node);
return (
styles[overflow] !== "hidden" &&
!(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === "visible")
);
};
var elementCouldBeVScrolled = function(node) {
return elementCanBeScrolled(node, "overflowY");
};
var elementCouldBeHScrolled = function(node) {
return elementCanBeScrolled(node, "overflowX");
};
var locationCouldBeScrolled = function(axis, node) {
var ownerDocument = node.ownerDocument;
var current = node;
do {
if (typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot) {
current = current.host;
}
var isScrollable = elementCouldBeScrolled(axis, current);
if (isScrollable) {
var _a = getScrollVariables(axis, current), scrollHeight = _a[1], clientHeight = _a[2];
if (scrollHeight > clientHeight) {
return true;
}
}
current = current.parentNode;
} while (current && current !== ownerDocument.body);
return false;
};
var getVScrollVariables = function(_a) {
var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
return [
scrollTop,
scrollHeight,
clientHeight
];
};
var getHScrollVariables = function(_a) {
var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
return [
scrollLeft,
scrollWidth,
clientWidth
];
};
var elementCouldBeScrolled = function(axis, node) {
return axis === "v" ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
};
var getScrollVariables = function(axis, node) {
return axis === "v" ? getVScrollVariables(node) : getHScrollVariables(node);
};
var getDirectionFactor = function(axis, direction) {
return axis === "h" && direction === "rtl" ? -1 : 1;
};
var handleScroll = function(axis, endTarget, event, sourceDelta, noOverscroll) {
var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
var delta = directionFactor * sourceDelta;
var target = event.target;
var targetInLock = endTarget.contains(target);
var shouldCancelScroll = false;
var isDeltaPositive = delta > 0;
var availableScroll = 0;
var availableScrollTop = 0;
do {
if (!target) {
break;
}
var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
var elementScroll = scroll_1 - capacity - directionFactor * position;
if (position || elementScroll) {
if (elementCouldBeScrolled(axis, target)) {
availableScroll += elementScroll;
availableScrollTop += position;
}
}
var parent_1 = target.parentNode;
target = parent_1 && parent_1.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? parent_1.host : parent_1;
} while (
!targetInLock && target !== document.body ||
targetInLock && (endTarget.contains(target) || endTarget === target)
);
if (isDeltaPositive && (Math.abs(availableScroll) < 1 || false)) {
shouldCancelScroll = true;
} else if (!isDeltaPositive && (Math.abs(availableScrollTop) < 1 || false)) {
shouldCancelScroll = true;
}
return shouldCancelScroll;
};
var getTouchXY = function(event) {
return "changedTouches" in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
};
var getDeltaXY = function(event) {
return [event.deltaX, event.deltaY];
};
var extractRef = function(ref) {
return ref && "current" in ref ? ref.current : ref;
};
var deltaCompare = function(x2, y) {
return x2[0] === y[0] && x2[1] === y[1];
};
var generateStyle = function(id2) {
return "\n .block-interactivity-".concat(id2, " {pointer-events: none;}\n .allow-interactivity-").concat(id2, " {pointer-events: all;}\n");
};
var idCounter = 0;
var lockStack = [];
function RemoveScrollSideCar(props) {
var shouldPreventQueue = React__namespace.useRef([]);
var touchStartRef = React__namespace.useRef([0, 0]);
var activeAxis = React__namespace.useRef();
var id2 = React__namespace.useState(idCounter++)[0];
var Style2 = React__namespace.useState(styleSingleton)[0];
var lastProps = React__namespace.useRef(props);
React__namespace.useEffect(function() {
lastProps.current = props;
}, [props]);
React__namespace.useEffect(function() {
if (props.inert) {
document.body.classList.add("block-interactivity-".concat(id2));
var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef)).filter(Boolean);
allow_1.forEach(function(el) {
return el.classList.add("allow-interactivity-".concat(id2));
});
return function() {
document.body.classList.remove("block-interactivity-".concat(id2));
allow_1.forEach(function(el) {
return el.classList.remove("allow-interactivity-".concat(id2));
});
};
}
return;
}, [props.inert, props.lockRef.current, props.shards]);
var shouldCancelEvent = React__namespace.useCallback(function(event, parent) {
if ("touches" in event && event.touches.length === 2 || event.type === "wheel" && event.ctrlKey) {
return !lastProps.current.allowPinchZoom;
}
var touch = getTouchXY(event);
var touchStart = touchStartRef.current;
var deltaX = "deltaX" in event ? event.deltaX : touchStart[0] - touch[0];
var deltaY = "deltaY" in event ? event.deltaY : touchStart[1] - touch[1];
var currentAxis;
var target = event.target;
var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? "h" : "v";
if ("touches" in event && moveDirection === "h" && target.type === "range") {
return false;
}
var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
if (!canBeScrolledInMainDirection) {
return true;
}
if (canBeScrolledInMainDirection) {
currentAxis = moveDirection;
} else {
currentAxis = moveDirection === "v" ? "h" : "v";
canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
}
if (!canBeScrolledInMainDirection) {
return false;
}
if (!activeAxis.current && "changedTouches" in event && (deltaX || deltaY)) {
activeAxis.current = currentAxis;
}
if (!currentAxis) {
return true;
}
var cancelingAxis = activeAxis.current || currentAxis;
return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY);
}, []);
var shouldPrevent = React__namespace.useCallback(function(_event) {
var event = _event;
if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
return;
}
var delta = "deltaY" in event ? getDeltaXY(event) : getTouchXY(event);
var sourceEvent = shouldPreventQueue.current.filter(function(e) {
return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta);
})[0];
if (sourceEvent && sourceEvent.should) {
if (event.cancelable) {
event.preventDefault();
}
return;
}
if (!sourceEvent) {
var shardNodes = (lastProps.current.shards || []).map(extractRef).filter(Boolean).filter(function(node) {
return node.contains(event.target);
});
var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
if (shouldStop) {
if (event.cancelable) {
event.preventDefault();
}
}
}
}, []);
var shouldCancel = React__namespace.useCallback(function(name, delta, target, should) {
var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
shouldPreventQueue.current.push(event);
setTimeout(function() {
shouldPreventQueue.current = shouldPreventQueue.current.filter(function(e) {
return e !== event;
});
}, 1);
}, []);
var scrollTouchStart = React__namespace.useCallback(function(event) {
touchStartRef.current = getTouchXY(event);
activeAxis.current = void 0;
}, []);
var scrollWheel = React__namespace.useCallback(function(event) {
shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
}, []);
var scrollTouchMove = React__namespace.useCallback(function(event) {
shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
}, []);
React__namespace.useEffect(function() {
lockStack.push(Style2);
props.setCallbacks({
onScrollCapture: scrollWheel,
onWheelCapture: scrollWheel,
onTouchMoveCapture: scrollTouchMove
});
document.addEventListener("wheel", shouldPrevent, nonPassive);
document.addEventListener("touchmove", shouldPrevent, nonPassive);
document.addEventListener("touchstart", scrollTouchStart, nonPassive);
return function() {
lockStack = lockStack.filter(function(inst) {
return inst !== Style2;
});
document.removeEventListener("wheel", shouldPrevent, nonPassive);
document.removeEventListener("touchmove", shouldPrevent, nonPassive);
document.removeEventListener("touchstart", scrollTouchStart, nonPassive);
};
}, []);
var removeScrollBar = props.removeScrollBar, inert = props.inert;
return React__namespace.createElement(
React__namespace.Fragment,
null,
inert ? React__namespace.createElement(Style2, { styles: generateStyle(id2) }) : null,
removeScrollBar ? React__namespace.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
);
}
function getOutermostShadowParent(node) {
var shadowParent = null;
while (node !== null) {
if (node instanceof ShadowRoot) {
shadowParent = node.host;
node = node.host;
}
node = node.parentNode;
}
return shadowParent;
}
const SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
var ReactRemoveScroll = React__namespace.forwardRef(function(props, ref) {
return React__namespace.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: SideCar }));
});
ReactRemoveScroll.classNames = RemoveScroll.classNames;
var SELECTION_KEYS = ["Enter", " "];
var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
var SUB_OPEN_KEYS = {
ltr: [...SELECTION_KEYS, "ArrowRight"],
rtl: [...SELECTION_KEYS, "ArrowLeft"]
};
var SUB_CLOSE_KEYS = {
ltr: ["ArrowLeft"],
rtl: ["ArrowRight"]
};
var MENU_NAME = "Menu";
var [Collection, useCollection, createCollectionScope] = createCollection(MENU_NAME);
var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [
createCollectionScope,
createPopperScope,
createRovingFocusGroupScope
]);
var usePopperScope$2 = createPopperScope();
var useRovingFocusGroupScope$1 = createRovingFocusGroupScope();
var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
var Menu = (props) => {
const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
const popperScope = usePopperScope$2(__scopeMenu);
const [content, setContent] = React__namespace.useState(null);
const isUsingKeyboardRef = React__namespace.useRef(false);
const handleOpenChange = useCallbackRef$1(onOpenChange);
const direction = useDirection(dir);
React__namespace.useEffect(() => {
const handleKeyDown = () => {
isUsingKeyboardRef.current = true;
document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
document.addEventListener("pointermove", handlePointer, { capture: true, once: true });
};
const handlePointer = () => isUsingKeyboardRef.current = false;
document.addEventListener("keydown", handleKeyDown, { capture: true });
return () => {
document.removeEventListener("keydown", handleKeyDown, { capture: true });
document.removeEventListener("pointerdown", handlePointer, { capture: true });
document.removeEventListener("pointermove", handlePointer, { capture: true });
};
}, []);
return jsxRuntimeExports.jsx(Root2$3, { ...popperScope, children: jsxRuntimeExports.jsx(
MenuProvider,
{
scope: __scopeMenu,
open,
onOpenChange: handleOpenChange,
content,
onContentChange: setContent,
children: jsxRuntimeExports.jsx(
MenuRootProvider,
{
scope: __scopeMenu,
onClose: React__namespace.useCallback(() => handleOpenChange(false), [handleOpenChange]),
isUsingKeyboardRef,
dir: direction,
modal,
children
}
)
}
) });
};
Menu.displayName = MENU_NAME;
var ANCHOR_NAME$1 = "MenuAnchor";
var MenuAnchor = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeMenu, ...anchorProps } = props;
const popperScope = usePopperScope$2(__scopeMenu);
return jsxRuntimeExports.jsx(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
}
);
MenuAnchor.displayName = ANCHOR_NAME$1;
var PORTAL_NAME$4 = "MenuPortal";
var [PortalProvider$3, usePortalContext$3] = createMenuContext(PORTAL_NAME$4, {
forceMount: void 0
});
var MenuPortal = (props) => {
const { __scopeMenu, forceMount, children, container } = props;
const context = useMenuContext(PORTAL_NAME$4, __scopeMenu);
return jsxRuntimeExports.jsx(PortalProvider$3, { scope: __scopeMenu, forceMount, children: jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: jsxRuntimeExports.jsx(Portal$4, { asChild: true, container, children }) }) });
};
MenuPortal.displayName = PORTAL_NAME$4;
var CONTENT_NAME$5 = "MenuContent";
var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME$5);
var MenuContent = React__namespace.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext$3(CONTENT_NAME$5, props.__scopeMenu);
const { forceMount = portalContext.forceMount, ...contentProps } = props;
const context = useMenuContext(CONTENT_NAME$5, props.__scopeMenu);
const rootContext = useMenuRootContext(CONTENT_NAME$5, props.__scopeMenu);
return jsxRuntimeExports.jsx(Collection.Provider, { scope: props.__scopeMenu, children: jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: jsxRuntimeExports.jsx(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? jsxRuntimeExports.jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : jsxRuntimeExports.jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
}
);
var MenuRootContentModal = React__namespace.forwardRef(
(props, forwardedRef) => {
const context = useMenuContext(CONTENT_NAME$5, props.__scopeMenu);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
React__namespace.useEffect(() => {
const content = ref.current;
if (content) return hideOthers(content);
}, []);
return jsxRuntimeExports.jsx(
MenuContentImpl,
{
...props,
ref: composedRefs,
trapFocus: context.open,
disableOutsidePointerEvents: context.open,
disableOutsideScroll: true,
onFocusOutside: composeEventHandlers(
props.onFocusOutside,
(event) => event.preventDefault(),
{ checkForDefaultPrevented: false }
),
onDismiss: () => context.onOpenChange(false)
}
);
}
);
var MenuRootContentNonModal = React__namespace.forwardRef((props, forwardedRef) => {
const context = useMenuContext(CONTENT_NAME$5, props.__scopeMenu);
return jsxRuntimeExports.jsx(
MenuContentImpl,
{
...props,
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
disableOutsideScroll: false,
onDismiss: () => context.onOpenChange(false)
}
);
});
var Slot$2 = createSlot("MenuContent.ScrollLock");
var MenuContentImpl = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
__scopeMenu,
loop = false,
trapFocus,
onOpenAutoFocus,
onCloseAutoFocus,
disableOutsidePointerEvents,
onEntryFocus,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onInteractOutside,
onDismiss,
disableOutsideScroll,
...contentProps
} = props;
const context = useMenuContext(CONTENT_NAME$5, __scopeMenu);
const rootContext = useMenuRootContext(CONTENT_NAME$5, __scopeMenu);
const popperScope = usePopperScope$2(__scopeMenu);
const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeMenu);
const getItems = useCollection(__scopeMenu);
const [currentItemId, setCurrentItemId] = React__namespace.useState(null);
const contentRef = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, contentRef, context.onContentChange);
const timerRef = React__namespace.useRef(0);
const searchRef = React__namespace.useRef("");
const pointerGraceTimerRef = React__namespace.useRef(0);
const pointerGraceIntentRef = React__namespace.useRef(null);
const pointerDirRef = React__namespace.useRef("right");
const lastPointerXRef = React__namespace.useRef(0);
const ScrollLockWrapper = disableOutsideScroll ? ReactRemoveScroll : React__namespace.Fragment;
const scrollLockWrapperProps = disableOutsideScroll ? { as: Slot$2, allowPinchZoom: true } : void 0;
const handleTypeaheadSearch = (key) => {
const search = searchRef.current + key;
const items = getItems().filter((item) => !item.disabled);
const currentItem = document.activeElement;
const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
const values = items.map((item) => item.textValue);
const nextMatch = getNextMatch(values, search, currentMatch);
const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
(function updateSearch(value) {
searchRef.current = value;
window.clearTimeout(timerRef.current);
if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
})(search);
if (newItem) {
setTimeout(() => newItem.focus());
}
};
React__namespace.useEffect(() => {
return () => window.clearTimeout(timerRef.current);
}, []);
useFocusGuards();
const isPointerMovingToSubmenu = React__namespace.useCallback((event) => {
const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
}, []);
return jsxRuntimeExports.jsx(
MenuContentProvider,
{
scope: __scopeMenu,
searchRef,
onItemEnter: React__namespace.useCallback(
(event) => {
if (isPointerMovingToSubmenu(event)) event.preventDefault();
},
[isPointerMovingToSubmenu]
),
onItemLeave: React__namespace.useCallback(
(event) => {
if (isPointerMovingToSubmenu(event)) return;
contentRef.current?.focus();
setCurrentItemId(null);
},
[isPointerMovingToSubmenu]
),
onTriggerLeave: React__namespace.useCallback(
(event) => {
if (isPointerMovingToSubmenu(event)) event.preventDefault();
},
[isPointerMovingToSubmenu]
),
pointerGraceTimerRef,
onPointerGraceIntentChange: React__namespace.useCallback((intent) => {
pointerGraceIntentRef.current = intent;
}, []),
children: jsxRuntimeExports.jsx(ScrollLockWrapper, { ...scrollLockWrapperProps, children: jsxRuntimeExports.jsx(
FocusScope,
{
asChild: true,
trapped: trapFocus,
onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
event.preventDefault();
contentRef.current?.focus({ preventScroll: true });
}),
onUnmountAutoFocus: onCloseAutoFocus,
children: jsxRuntimeExports.jsx(
DismissableLayer,
{
asChild: true,
disableOutsidePointerEvents,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onInteractOutside,
onDismiss,
children: jsxRuntimeExports.jsx(
Root$4,
{
asChild: true,
...rovingFocusGroupScope,
dir: rootContext.dir,
orientation: "vertical",
loop,
currentTabStopId: currentItemId,
onCurrentTabStopIdChange: setCurrentItemId,
onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
}),
preventScrollOnEntryFocus: true,
children: jsxRuntimeExports.jsx(
Content$2,
{
role: "menu",
"aria-orientation": "vertical",
"data-state": getOpenState(context.open),
"data-radix-menu-content": "",
dir: rootContext.dir,
...popperScope,
...contentProps,
ref: composedRefs,
style: { outline: "none", ...contentProps.style },
onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
const target = event.target;
const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
const isCharacterKey = event.key.length === 1;
if (isKeyDownInside) {
if (event.key === "Tab") event.preventDefault();
if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
}
const content = contentRef.current;
if (event.target !== content) return;
if (!FIRST_LAST_KEYS.includes(event.key)) return;
event.preventDefault();
const items = getItems().filter((item) => !item.disabled);
const candidateNodes = items.map((item) => item.ref.current);
if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
focusFirst(candidateNodes);
}),
onBlur: composeEventHandlers(props.onBlur, (event) => {
if (!event.currentTarget.contains(event.target)) {
window.clearTimeout(timerRef.current);
searchRef.current = "";
}
}),
onPointerMove: composeEventHandlers(
props.onPointerMove,
whenMouse((event) => {
const target = event.target;
const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
if (event.currentTarget.contains(target) && pointerXHasChanged) {
const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
pointerDirRef.current = newDir;
lastPointerXRef.current = event.clientX;
}
})
)
}
)
}
)
}
)
}
) })
}
);
}
);
MenuContent.displayName = CONTENT_NAME$5;
var GROUP_NAME$1 = "MenuGroup";
var MenuGroup = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeMenu, ...groupProps } = props;
return jsxRuntimeExports.jsx(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
}
);
MenuGroup.displayName = GROUP_NAME$1;
var LABEL_NAME$1 = "MenuLabel";
var MenuLabel = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeMenu, ...labelProps } = props;
return jsxRuntimeExports.jsx(Primitive.div, { ...labelProps, ref: forwardedRef });
}
);
MenuLabel.displayName = LABEL_NAME$1;
var ITEM_NAME$1 = "MenuItem";
var ITEM_SELECT = "menu.itemSelect";
var MenuItem = React__namespace.forwardRef(
(props, forwardedRef) => {
const { disabled = false, onSelect, ...itemProps } = props;
const ref = React__namespace.useRef(null);
const rootContext = useMenuRootContext(ITEM_NAME$1, props.__scopeMenu);
const contentContext = useMenuContentContext(ITEM_NAME$1, props.__scopeMenu);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
const isPointerDownRef = React__namespace.useRef(false);
const handleSelect = () => {
const menuItem = ref.current;
if (!disabled && menuItem) {
const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });
menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
if (itemSelectEvent.defaultPrevented) {
isPointerDownRef.current = false;
} else {
rootContext.onClose();
}
}
};
return jsxRuntimeExports.jsx(
MenuItemImpl,
{
...itemProps,
ref: composedRefs,
disabled,
onClick: composeEventHandlers(props.onClick, handleSelect),
onPointerDown: (event) => {
props.onPointerDown?.(event);
isPointerDownRef.current = true;
},
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
if (!isPointerDownRef.current) event.currentTarget?.click();
}),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
const isTypingAhead = contentContext.searchRef.current !== "";
if (disabled || isTypingAhead && event.key === " ") return;
if (SELECTION_KEYS.includes(event.key)) {
event.currentTarget.click();
event.preventDefault();
}
})
}
);
}
);
MenuItem.displayName = ITEM_NAME$1;
var MenuItemImpl = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
const contentContext = useMenuContentContext(ITEM_NAME$1, __scopeMenu);
const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeMenu);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
const [isFocused, setIsFocused] = React__namespace.useState(false);
const [textContent, setTextContent] = React__namespace.useState("");
React__namespace.useEffect(() => {
const menuItem = ref.current;
if (menuItem) {
setTextContent((menuItem.textContent ?? "").trim());
}
}, [itemProps.children]);
return jsxRuntimeExports.jsx(
Collection.ItemSlot,
{
scope: __scopeMenu,
disabled,
textValue: textValue ?? textContent,
children: jsxRuntimeExports.jsx(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: jsxRuntimeExports.jsx(
Primitive.div,
{
role: "menuitem",
"data-highlighted": isFocused ? "" : void 0,
"aria-disabled": disabled || void 0,
"data-disabled": disabled ? "" : void 0,
...itemProps,
ref: composedRefs,
onPointerMove: composeEventHandlers(
props.onPointerMove,
whenMouse((event) => {
if (disabled) {
contentContext.onItemLeave(event);
} else {
contentContext.onItemEnter(event);
if (!event.defaultPrevented) {
const item = event.currentTarget;
item.focus({ preventScroll: true });
}
}
})
),
onPointerLeave: composeEventHandlers(
props.onPointerLeave,
whenMouse((event) => contentContext.onItemLeave(event))
),
onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
}
) })
}
);
}
);
var CHECKBOX_ITEM_NAME$1 = "MenuCheckboxItem";
var MenuCheckboxItem = React__namespace.forwardRef(
(props, forwardedRef) => {
const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
return jsxRuntimeExports.jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: jsxRuntimeExports.jsx(
MenuItem,
{
role: "menuitemcheckbox",
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
...checkboxItemProps,
ref: forwardedRef,
"data-state": getCheckedState(checked),
onSelect: composeEventHandlers(
checkboxItemProps.onSelect,
() => onCheckedChange?.(isIndeterminate(checked) ? true : !checked),
{ checkForDefaultPrevented: false }
)
}
) });
}
);
MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME$1;
var RADIO_GROUP_NAME$1 = "MenuRadioGroup";
var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
RADIO_GROUP_NAME$1,
{ value: void 0, onValueChange: () => {
} }
);
var MenuRadioGroup = React__namespace.forwardRef(
(props, forwardedRef) => {
const { value, onValueChange, ...groupProps } = props;
const handleValueChange = useCallbackRef$1(onValueChange);
return jsxRuntimeExports.jsx(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: jsxRuntimeExports.jsx(MenuGroup, { ...groupProps, ref: forwardedRef }) });
}
);
MenuRadioGroup.displayName = RADIO_GROUP_NAME$1;
var RADIO_ITEM_NAME$1 = "MenuRadioItem";
var MenuRadioItem = React__namespace.forwardRef(
(props, forwardedRef) => {
const { value, ...radioItemProps } = props;
const context = useRadioGroupContext(RADIO_ITEM_NAME$1, props.__scopeMenu);
const checked = value === context.value;
return jsxRuntimeExports.jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: jsxRuntimeExports.jsx(
MenuItem,
{
role: "menuitemradio",
"aria-checked": checked,
...radioItemProps,
ref: forwardedRef,
"data-state": getCheckedState(checked),
onSelect: composeEventHandlers(
radioItemProps.onSelect,
() => context.onValueChange?.(value),
{ checkForDefaultPrevented: false }
)
}
) });
}
);
MenuRadioItem.displayName = RADIO_ITEM_NAME$1;
var ITEM_INDICATOR_NAME = "MenuItemIndicator";
var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
ITEM_INDICATOR_NAME,
{ checked: false }
);
var MenuItemIndicator = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
return jsxRuntimeExports.jsx(
Presence,
{
present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
children: jsxRuntimeExports.jsx(
Primitive.span,
{
...itemIndicatorProps,
ref: forwardedRef,
"data-state": getCheckedState(indicatorContext.checked)
}
)
}
);
}
);
MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
var SEPARATOR_NAME$1 = "MenuSeparator";
var MenuSeparator = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeMenu, ...separatorProps } = props;
return jsxRuntimeExports.jsx(
Primitive.div,
{
role: "separator",
"aria-orientation": "horizontal",
...separatorProps,
ref: forwardedRef
}
);
}
);
MenuSeparator.displayName = SEPARATOR_NAME$1;
var ARROW_NAME$3 = "MenuArrow";
var MenuArrow = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeMenu, ...arrowProps } = props;
const popperScope = usePopperScope$2(__scopeMenu);
return jsxRuntimeExports.jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
}
);
MenuArrow.displayName = ARROW_NAME$3;
var SUB_NAME = "MenuSub";
var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
var MenuSubTrigger = React__namespace.forwardRef(
(props, forwardedRef) => {
const context = useMenuContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
const rootContext = useMenuRootContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
const subContext = useMenuSubContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
const contentContext = useMenuContentContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
const openTimerRef = React__namespace.useRef(null);
const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
const scope = { __scopeMenu: props.__scopeMenu };
const clearOpenTimer = React__namespace.useCallback(() => {
if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
openTimerRef.current = null;
}, []);
React__namespace.useEffect(() => clearOpenTimer, [clearOpenTimer]);
React__namespace.useEffect(() => {
const pointerGraceTimer = pointerGraceTimerRef.current;
return () => {
window.clearTimeout(pointerGraceTimer);
onPointerGraceIntentChange(null);
};
}, [pointerGraceTimerRef, onPointerGraceIntentChange]);
return jsxRuntimeExports.jsx(MenuAnchor, { asChild: true, ...scope, children: jsxRuntimeExports.jsx(
MenuItemImpl,
{
id: subContext.triggerId,
"aria-haspopup": "menu",
"aria-expanded": context.open,
"aria-controls": subContext.contentId,
"data-state": getOpenState(context.open),
...props,
ref: composeRefs$1(forwardedRef, subContext.onTriggerChange),
onClick: (event) => {
props.onClick?.(event);
if (props.disabled || event.defaultPrevented) return;
event.currentTarget.focus();
if (!context.open) context.onOpenChange(true);
},
onPointerMove: composeEventHandlers(
props.onPointerMove,
whenMouse((event) => {
contentContext.onItemEnter(event);
if (event.defaultPrevented) return;
if (!props.disabled && !context.open && !openTimerRef.current) {
contentContext.onPointerGraceIntentChange(null);
openTimerRef.current = window.setTimeout(() => {
context.onOpenChange(true);
clearOpenTimer();
}, 100);
}
})
),
onPointerLeave: composeEventHandlers(
props.onPointerLeave,
whenMouse((event) => {
clearOpenTimer();
const contentRect = context.content?.getBoundingClientRect();
if (contentRect) {
const side = context.content?.dataset.side;
const rightSide = side === "right";
const bleed = rightSide ? -5 : 5;
const contentNearEdge = contentRect[rightSide ? "left" : "right"];
const contentFarEdge = contentRect[rightSide ? "right" : "left"];
contentContext.onPointerGraceIntentChange({
area: [
{ x: event.clientX + bleed, y: event.clientY },
{ x: contentNearEdge, y: contentRect.top },
{ x: contentFarEdge, y: contentRect.top },
{ x: contentFarEdge, y: contentRect.bottom },
{ x: contentNearEdge, y: contentRect.bottom }
],
side
});
window.clearTimeout(pointerGraceTimerRef.current);
pointerGraceTimerRef.current = window.setTimeout(
() => contentContext.onPointerGraceIntentChange(null),
300
);
} else {
contentContext.onTriggerLeave(event);
if (event.defaultPrevented) return;
contentContext.onPointerGraceIntentChange(null);
}
})
),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
const isTypingAhead = contentContext.searchRef.current !== "";
if (props.disabled || isTypingAhead && event.key === " ") return;
if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
context.onOpenChange(true);
context.content?.focus();
event.preventDefault();
}
})
}
) });
}
);
MenuSubTrigger.displayName = SUB_TRIGGER_NAME$1;
var SUB_CONTENT_NAME$1 = "MenuSubContent";
var MenuSubContent = React__namespace.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext$3(CONTENT_NAME$5, props.__scopeMenu);
const { forceMount = portalContext.forceMount, ...subContentProps } = props;
const context = useMenuContext(CONTENT_NAME$5, props.__scopeMenu);
const rootContext = useMenuRootContext(CONTENT_NAME$5, props.__scopeMenu);
const subContext = useMenuSubContext(SUB_CONTENT_NAME$1, props.__scopeMenu);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
return jsxRuntimeExports.jsx(Collection.Provider, { scope: props.__scopeMenu, children: jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: jsxRuntimeExports.jsx(Collection.Slot, { scope: props.__scopeMenu, children: jsxRuntimeExports.jsx(
MenuContentImpl,
{
id: subContext.contentId,
"aria-labelledby": subContext.triggerId,
...subContentProps,
ref: composedRefs,
align: "start",
side: rootContext.dir === "rtl" ? "left" : "right",
disableOutsidePointerEvents: false,
disableOutsideScroll: false,
trapFocus: false,
onOpenAutoFocus: (event) => {
if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
event.preventDefault();
},
onCloseAutoFocus: (event) => event.preventDefault(),
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
if (event.target !== subContext.trigger) context.onOpenChange(false);
}),
onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
rootContext.onClose();
event.preventDefault();
}),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
const isKeyDownInside = event.currentTarget.contains(event.target);
const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
if (isKeyDownInside && isCloseKey) {
context.onOpenChange(false);
subContext.trigger?.focus();
event.preventDefault();
}
})
}
) }) }) });
}
);
MenuSubContent.displayName = SUB_CONTENT_NAME$1;
function getOpenState(open) {
return open ? "open" : "closed";
}
function isIndeterminate(checked) {
return checked === "indeterminate";
}
function getCheckedState(checked) {
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
}
function focusFirst(candidates) {
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
for (const candidate of candidates) {
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
candidate.focus();
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
}
}
function wrapArray(array, startIndex) {
return array.map((_, index2) => array[(startIndex + index2) % array.length]);
}
function getNextMatch(values, search, currentMatch) {
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
const normalizedSearch = isRepeated ? search[0] : search;
const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
const excludeCurrentMatch = normalizedSearch.length === 1;
if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
const nextMatch = wrappedValues.find(
(value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
);
return nextMatch !== currentMatch ? nextMatch : void 0;
}
function isPointInPolygon$1(point, polygon) {
const { x: x2, y } = point;
let inside = false;
for (let i2 = 0, j = polygon.length - 1; i2 < polygon.length; j = i2++) {
const ii = polygon[i2];
const jj = polygon[j];
const xi = ii.x;
const yi = ii.y;
const xj = jj.x;
const yj = jj.y;
const intersect = yi > y !== yj > y && x2 < (xj - xi) * (y - yi) / (yj - yi) + xi;
if (intersect) inside = !inside;
}
return inside;
}
function isPointerInGraceArea(event, area) {
if (!area) return false;
const cursorPos = { x: event.clientX, y: event.clientY };
return isPointInPolygon$1(cursorPos, area);
}
function whenMouse(handler) {
return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
}
var Root3$1 = Menu;
var Anchor2 = MenuAnchor;
var Portal$3 = MenuPortal;
var Content2$3 = MenuContent;
var Group = MenuGroup;
var Label$2 = MenuLabel;
var Item2$1 = MenuItem;
var CheckboxItem = MenuCheckboxItem;
var RadioGroup = MenuRadioGroup;
var RadioItem = MenuRadioItem;
var ItemIndicator = MenuItemIndicator;
var Separator$2 = MenuSeparator;
var Arrow2$1 = MenuArrow;
var SubTrigger = MenuSubTrigger;
var SubContent = MenuSubContent;
var DROPDOWN_MENU_NAME = "DropdownMenu";
var [createDropdownMenuContext] = createContextScope(
DROPDOWN_MENU_NAME,
[createMenuScope]
);
var useMenuScope = createMenuScope();
var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
var DropdownMenu$1 = (props) => {
const {
__scopeDropdownMenu,
children,
dir,
open: openProp,
defaultOpen,
onOpenChange,
modal = true
} = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
const triggerRef = React__namespace.useRef(null);
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: DROPDOWN_MENU_NAME
});
return jsxRuntimeExports.jsx(
DropdownMenuProvider,
{
scope: __scopeDropdownMenu,
triggerId: useId(),
triggerRef,
contentId: useId(),
open,
onOpenChange: setOpen,
onOpenToggle: React__namespace.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
modal,
children: jsxRuntimeExports.jsx(Root3$1, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
}
);
};
DropdownMenu$1.displayName = DROPDOWN_MENU_NAME;
var TRIGGER_NAME$4 = "DropdownMenuTrigger";
var DropdownMenuTrigger$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
const context = useDropdownMenuContext(TRIGGER_NAME$4, __scopeDropdownMenu);
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(Anchor2, { asChild: true, ...menuScope, children: jsxRuntimeExports.jsx(
Primitive.button,
{
type: "button",
id: context.triggerId,
"aria-haspopup": "menu",
"aria-expanded": context.open,
"aria-controls": context.open ? context.contentId : void 0,
"data-state": context.open ? "open" : "closed",
"data-disabled": disabled ? "" : void 0,
disabled,
...triggerProps,
ref: composeRefs$1(forwardedRef, context.triggerRef),
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
if (!disabled && event.button === 0 && event.ctrlKey === false) {
context.onOpenToggle();
if (!context.open) event.preventDefault();
}
}),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
if (disabled) return;
if (["Enter", " "].includes(event.key)) context.onOpenToggle();
if (event.key === "ArrowDown") context.onOpenChange(true);
if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
})
}
) });
}
);
DropdownMenuTrigger$1.displayName = TRIGGER_NAME$4;
var PORTAL_NAME$3 = "DropdownMenuPortal";
var DropdownMenuPortal = (props) => {
const { __scopeDropdownMenu, ...portalProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(Portal$3, { ...menuScope, ...portalProps });
};
DropdownMenuPortal.displayName = PORTAL_NAME$3;
var CONTENT_NAME$4 = "DropdownMenuContent";
var DropdownMenuContent$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDropdownMenu, ...contentProps } = props;
const context = useDropdownMenuContext(CONTENT_NAME$4, __scopeDropdownMenu);
const menuScope = useMenuScope(__scopeDropdownMenu);
const hasInteractedOutsideRef = React__namespace.useRef(false);
return jsxRuntimeExports.jsx(
Content2$3,
{
id: context.contentId,
"aria-labelledby": context.triggerId,
...menuScope,
...contentProps,
ref: forwardedRef,
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
hasInteractedOutsideRef.current = false;
event.preventDefault();
}),
onInteractOutside: composeEventHandlers(props.onInteractOutside, (event) => {
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
}),
style: {
...props.style,
...{
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
}
}
}
);
}
);
DropdownMenuContent$1.displayName = CONTENT_NAME$4;
var GROUP_NAME = "DropdownMenuGroup";
var DropdownMenuGroup$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDropdownMenu, ...groupProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(Group, { ...menuScope, ...groupProps, ref: forwardedRef });
}
);
DropdownMenuGroup$1.displayName = GROUP_NAME;
var LABEL_NAME = "DropdownMenuLabel";
var DropdownMenuLabel$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDropdownMenu, ...labelProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(Label$2, { ...menuScope, ...labelProps, ref: forwardedRef });
}
);
DropdownMenuLabel$1.displayName = LABEL_NAME;
var ITEM_NAME = "DropdownMenuItem";
var DropdownMenuItem$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDropdownMenu, ...itemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(Item2$1, { ...menuScope, ...itemProps, ref: forwardedRef });
}
);
DropdownMenuItem$1.displayName = ITEM_NAME;
var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
var DropdownMenuCheckboxItem = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...checkboxItemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
});
DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
var DropdownMenuRadioGroup = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...radioGroupProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
});
DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
var DropdownMenuRadioItem = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...radioItemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
});
DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
var INDICATOR_NAME = "DropdownMenuItemIndicator";
var DropdownMenuItemIndicator = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
});
DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
var SEPARATOR_NAME = "DropdownMenuSeparator";
var DropdownMenuSeparator$1 = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...separatorProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(Separator$2, { ...menuScope, ...separatorProps, ref: forwardedRef });
});
DropdownMenuSeparator$1.displayName = SEPARATOR_NAME;
var ARROW_NAME$2 = "DropdownMenuArrow";
var DropdownMenuArrow = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDropdownMenu, ...arrowProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(Arrow2$1, { ...menuScope, ...arrowProps, ref: forwardedRef });
}
);
DropdownMenuArrow.displayName = ARROW_NAME$2;
var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
var DropdownMenuSubTrigger = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...subTriggerProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
});
DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
var SUB_CONTENT_NAME = "DropdownMenuSubContent";
var DropdownMenuSubContent = React__namespace.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...subContentProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return jsxRuntimeExports.jsx(
SubContent,
{
...menuScope,
...subContentProps,
ref: forwardedRef,
style: {
...props.style,
...{
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
}
}
}
);
});
DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
var Root2$2 = DropdownMenu$1;
var Trigger$3 = DropdownMenuTrigger$1;
var Portal2 = DropdownMenuPortal;
var Content2$2 = DropdownMenuContent$1;
var Group2 = DropdownMenuGroup$1;
var Label2 = DropdownMenuLabel$1;
var Item2 = DropdownMenuItem$1;
var Separator2 = DropdownMenuSeparator$1;
function DropdownMenu({
...props
}) {
return jsxRuntimeExports.jsx(Root2$2, { "data-slot": "dropdown-menu", ...props });
}
function DropdownMenuTrigger({
...props
}) {
return jsxRuntimeExports.jsx(
Trigger$3,
{
"data-slot": "dropdown-menu-trigger",
...props
}
);
}
function DropdownMenuContent({
className,
sideOffset = 4,
...props
}) {
return jsxRuntimeExports.jsx(Portal2, { children: jsxRuntimeExports.jsx(
Content2$2,
{
"data-slot": "dropdown-menu-content",
sideOffset,
className: cn$1(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
),
...props
}
) });
}
function DropdownMenuGroup({
...props
}) {
return jsxRuntimeExports.jsx(Group2, { "data-slot": "dropdown-menu-group", ...props });
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}) {
return jsxRuntimeExports.jsx(
Item2,
{
"data-slot": "dropdown-menu-item",
"data-inset": inset,
"data-variant": variant,
className: cn$1(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
),
...props
}
);
}
function DropdownMenuLabel({
className,
inset,
...props
}) {
return jsxRuntimeExports.jsx(
Label2,
{
"data-slot": "dropdown-menu-label",
"data-inset": inset,
className: cn$1(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
),
...props
}
);
}
function DropdownMenuSeparator({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Separator2,
{
"data-slot": "dropdown-menu-separator",
className: cn$1("bg-border -mx-1 my-1 h-px", className),
...props
}
);
}
var DIALOG_NAME = "Dialog";
var [createDialogContext] = createContextScope(DIALOG_NAME);
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
var Dialog$1 = (props) => {
const {
__scopeDialog,
children,
open: openProp,
defaultOpen,
onOpenChange,
modal = true
} = props;
const triggerRef = React__namespace.useRef(null);
const contentRef = React__namespace.useRef(null);
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: DIALOG_NAME
});
return jsxRuntimeExports.jsx(
DialogProvider,
{
scope: __scopeDialog,
triggerRef,
contentRef,
contentId: useId(),
titleId: useId(),
descriptionId: useId(),
open,
onOpenChange: setOpen,
onOpenToggle: React__namespace.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
modal,
children
}
);
};
Dialog$1.displayName = DIALOG_NAME;
var TRIGGER_NAME$3 = "DialogTrigger";
var DialogTrigger = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...triggerProps } = props;
const context = useDialogContext(TRIGGER_NAME$3, __scopeDialog);
const composedTriggerRef = useComposedRefs$1(forwardedRef, context.triggerRef);
return jsxRuntimeExports.jsx(
Primitive.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": getState$1(context.open),
...triggerProps,
ref: composedTriggerRef,
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
}
);
}
);
DialogTrigger.displayName = TRIGGER_NAME$3;
var PORTAL_NAME$2 = "DialogPortal";
var [PortalProvider$2, usePortalContext$2] = createDialogContext(PORTAL_NAME$2, {
forceMount: void 0
});
var DialogPortal$1 = (props) => {
const { __scopeDialog, forceMount, children, container } = props;
const context = useDialogContext(PORTAL_NAME$2, __scopeDialog);
return jsxRuntimeExports.jsx(PortalProvider$2, { scope: __scopeDialog, forceMount, children: React__namespace.Children.map(children, (child) => jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: jsxRuntimeExports.jsx(Portal$4, { asChild: true, container, children: child }) })) });
};
DialogPortal$1.displayName = PORTAL_NAME$2;
var OVERLAY_NAME = "DialogOverlay";
var DialogOverlay$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext$2(OVERLAY_NAME, props.__scopeDialog);
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
return context.modal ? jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: jsxRuntimeExports.jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
}
);
DialogOverlay$1.displayName = OVERLAY_NAME;
var Slot$1 = createSlot("DialogOverlay.RemoveScroll");
var DialogOverlayImpl = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...overlayProps } = props;
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
return (
jsxRuntimeExports.jsx(ReactRemoveScroll, { as: Slot$1, allowPinchZoom: true, shards: [context.contentRef], children: jsxRuntimeExports.jsx(
Primitive.div,
{
"data-state": getState$1(context.open),
...overlayProps,
ref: forwardedRef,
style: { pointerEvents: "auto", ...overlayProps.style }
}
) })
);
}
);
var CONTENT_NAME$3 = "DialogContent";
var DialogContent$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext$2(CONTENT_NAME$3, props.__scopeDialog);
const { forceMount = portalContext.forceMount, ...contentProps } = props;
const context = useDialogContext(CONTENT_NAME$3, props.__scopeDialog);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: context.modal ? jsxRuntimeExports.jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : jsxRuntimeExports.jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
}
);
DialogContent$1.displayName = CONTENT_NAME$3;
var DialogContentModal = React__namespace.forwardRef(
(props, forwardedRef) => {
const context = useDialogContext(CONTENT_NAME$3, props.__scopeDialog);
const contentRef = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, context.contentRef, contentRef);
React__namespace.useEffect(() => {
const content = contentRef.current;
if (content) return hideOthers(content);
}, []);
return jsxRuntimeExports.jsx(
DialogContentImpl,
{
...props,
ref: composedRefs,
trapFocus: context.open,
disableOutsidePointerEvents: true,
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
event.preventDefault();
context.triggerRef.current?.focus();
}),
onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
if (isRightClick) event.preventDefault();
}),
onFocusOutside: composeEventHandlers(
props.onFocusOutside,
(event) => event.preventDefault()
)
}
);
}
);
var DialogContentNonModal = React__namespace.forwardRef(
(props, forwardedRef) => {
const context = useDialogContext(CONTENT_NAME$3, props.__scopeDialog);
const hasInteractedOutsideRef = React__namespace.useRef(false);
const hasPointerDownOutsideRef = React__namespace.useRef(false);
return jsxRuntimeExports.jsx(
DialogContentImpl,
{
...props,
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event) => {
props.onCloseAutoFocus?.(event);
if (!event.defaultPrevented) {
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
event.preventDefault();
}
hasInteractedOutsideRef.current = false;
hasPointerDownOutsideRef.current = false;
},
onInteractOutside: (event) => {
props.onInteractOutside?.(event);
if (!event.defaultPrevented) {
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === "pointerdown") {
hasPointerDownOutsideRef.current = true;
}
}
const target = event.target;
const targetIsTrigger = context.triggerRef.current?.contains(target);
if (targetIsTrigger) event.preventDefault();
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
event.preventDefault();
}
}
}
);
}
);
var DialogContentImpl = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
const context = useDialogContext(CONTENT_NAME$3, __scopeDialog);
const contentRef = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, contentRef);
useFocusGuards();
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(
FocusScope,
{
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus,
children: jsxRuntimeExports.jsx(
DismissableLayer,
{
role: "dialog",
id: context.contentId,
"aria-describedby": context.descriptionId,
"aria-labelledby": context.titleId,
"data-state": getState$1(context.open),
...contentProps,
ref: composedRefs,
onDismiss: () => context.onOpenChange(false)
}
)
}
),
jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(TitleWarning, { titleId: context.titleId }),
jsxRuntimeExports.jsx(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
] })
] });
}
);
var TITLE_NAME = "DialogTitle";
var DialogTitle$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...titleProps } = props;
const context = useDialogContext(TITLE_NAME, __scopeDialog);
return jsxRuntimeExports.jsx(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
}
);
DialogTitle$1.displayName = TITLE_NAME;
var DESCRIPTION_NAME = "DialogDescription";
var DialogDescription$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...descriptionProps } = props;
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
return jsxRuntimeExports.jsx(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
}
);
DialogDescription$1.displayName = DESCRIPTION_NAME;
var CLOSE_NAME$1 = "DialogClose";
var DialogClose$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...closeProps } = props;
const context = useDialogContext(CLOSE_NAME$1, __scopeDialog);
return jsxRuntimeExports.jsx(
Primitive.button,
{
type: "button",
...closeProps,
ref: forwardedRef,
onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
}
);
}
);
DialogClose$1.displayName = CLOSE_NAME$1;
function getState$1(open) {
return open ? "open" : "closed";
}
var TITLE_WARNING_NAME = "DialogTitleWarning";
var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
contentName: CONTENT_NAME$3,
titleName: TITLE_NAME,
docsSlug: "dialog"
});
var TitleWarning = ({ titleId }) => {
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
React__namespace.useEffect(() => {
if (titleId) {
const hasTitle = document.getElementById(titleId);
if (!hasTitle) console.error(MESSAGE);
}
}, [MESSAGE, titleId]);
return null;
};
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
var DescriptionWarning = ({ contentRef, descriptionId }) => {
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
React__namespace.useEffect(() => {
const describedById = contentRef.current?.getAttribute("aria-describedby");
if (descriptionId && describedById) {
const hasDescription = document.getElementById(descriptionId);
if (!hasDescription) console.warn(MESSAGE);
}
}, [MESSAGE, contentRef, descriptionId]);
return null;
};
var Root$3 = Dialog$1;
var Portal$2 = DialogPortal$1;
var Overlay = DialogOverlay$1;
var Content$1 = DialogContent$1;
var Title = DialogTitle$1;
var Description = DialogDescription$1;
var Close = DialogClose$1;
function Dialog({
...props
}) {
return jsxRuntimeExports.jsx(Root$3, { "data-slot": "dialog", ...props });
}
function DialogPortal({
...props
}) {
return jsxRuntimeExports.jsx(Portal$2, { "data-slot": "dialog-portal", ...props });
}
function DialogClose({
...props
}) {
return jsxRuntimeExports.jsx(Close, { "data-slot": "dialog-close", ...props });
}
function DialogOverlay({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Overlay,
{
"data-slot": "dialog-overlay",
className: cn$1(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
),
...props
}
);
}
function DialogContent({
className,
children,
showCloseButton = true,
...props
}) {
return jsxRuntimeExports.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
jsxRuntimeExports.jsx(DialogOverlay, {}),
jsxRuntimeExports.jsxs(
Content$1,
{
"data-slot": "dialog-content",
className: cn$1(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
),
...props,
children: [
children,
showCloseButton && jsxRuntimeExports.jsxs(
Close,
{
"data-slot": "dialog-close",
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
children: [
jsxRuntimeExports.jsx(lucideReact.XIcon, {}),
jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Close" })
]
}
)
]
}
)
] });
}
function DialogHeader({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "dialog-header",
className: cn$1("flex flex-col gap-2 text-center sm:text-left", className),
...props
}
);
}
function DialogFooter({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "dialog-footer",
className: cn$1(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
),
...props
}
);
}
function DialogTitle({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Title,
{
"data-slot": "dialog-title",
className: cn$1("text-lg leading-none font-semibold", className),
...props
}
);
}
function DialogDescription({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Description,
{
"data-slot": "dialog-description",
className: cn$1("text-muted-foreground text-sm", className),
...props
}
);
}
var NAME$2 = "Label";
var Label$1 = React__namespace.forwardRef((props, forwardedRef) => {
return jsxRuntimeExports.jsx(
Primitive.label,
{
...props,
ref: forwardedRef,
onMouseDown: (event) => {
const target = event.target;
if (target.closest("button, input, select, textarea")) return;
props.onMouseDown?.(event);
if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
}
}
);
});
Label$1.displayName = NAME$2;
var Root$2 = Label$1;
function Label({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Root$2,
{
"data-slot": "label",
className: cn$1(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
),
...props
}
);
}
var NAME$1 = "Separator";
var DEFAULT_ORIENTATION = "horizontal";
var ORIENTATIONS = ["horizontal", "vertical"];
var Separator$1 = React__namespace.forwardRef((props, forwardedRef) => {
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
return jsxRuntimeExports.jsx(
Primitive.div,
{
"data-orientation": orientation,
...semanticProps,
...domProps,
ref: forwardedRef
}
);
});
Separator$1.displayName = NAME$1;
function isValidOrientation(orientation) {
return ORIENTATIONS.includes(orientation);
}
var Root$1 = Separator$1;
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}) {
return jsxRuntimeExports.jsx(
Root$1,
{
"data-slot": "separator",
decorative,
orientation,
className: cn$1(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
),
...props
}
);
}
function FieldGroup({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "field-group",
className: cn$1(
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
className
),
...props
}
);
}
const fieldVariants = cva(
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
{
variants: {
orientation: {
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
],
responsive: [
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
]
}
},
defaultVariants: {
orientation: "vertical"
}
}
);
function Field({
className,
orientation = "vertical",
...props
}) {
return jsxRuntimeExports.jsx(
"div",
{
role: "group",
"data-slot": "field",
"data-orientation": orientation,
className: cn$1(fieldVariants({ orientation }), className),
...props
}
);
}
function FieldLabel({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Label,
{
"data-slot": "field-label",
className: cn$1(
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
className
),
...props
}
);
}
function FieldError({
className,
children,
errors,
...props
}) {
const content = React.useMemo(() => {
if (children) {
return children;
}
if (!errors?.length) {
return null;
}
const uniqueErrors = [
...new Map(errors.map((error2) => [error2?.message, error2])).values()
];
if (uniqueErrors?.length == 1) {
return uniqueErrors[0]?.message;
}
return jsxRuntimeExports.jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
(error2, index2) => error2?.message && jsxRuntimeExports.jsx("li", { children: error2.message }, index2)
) });
}, [children, errors]);
if (!content) {
return null;
}
return jsxRuntimeExports.jsx(
"div",
{
role: "alert",
"data-slot": "field-error",
className: cn$1("text-destructive text-sm font-normal", className),
...props,
children: content
}
);
}
function Input({ className, type, ...props }) {
return jsxRuntimeExports.jsx(
"input",
{
type,
"data-slot": "input",
className: cn$1(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
),
...props
}
);
}
function $constructor(name, initializer2, params) {
function init(inst, def) {
var _a;
Object.defineProperty(inst, "_zod", {
value: inst._zod ?? {},
enumerable: false
});
(_a = inst._zod).traits ?? (_a.traits = new Set());
inst._zod.traits.add(name);
initializer2(inst, def);
for (const k in _.prototype) {
if (!(k in inst))
Object.defineProperty(inst, k, { value: _.prototype[k].bind(inst) });
}
inst._zod.constr = _;
inst._zod.def = def;
}
const Parent = params?.Parent ?? Object;
class Definition extends Parent {
}
Object.defineProperty(Definition, "name", { value: name });
function _(def) {
var _a;
const inst = params?.Parent ? new Definition() : this;
init(inst, def);
(_a = inst._zod).deferred ?? (_a.deferred = []);
for (const fn of inst._zod.deferred) {
fn();
}
return inst;
}
Object.defineProperty(_, "init", { value: init });
Object.defineProperty(_, Symbol.hasInstance, {
value: (inst) => {
if (params?.Parent && inst instanceof params.Parent)
return true;
return inst?._zod?.traits?.has(name);
}
});
Object.defineProperty(_, "name", { value: name });
return _;
}
class $ZodAsyncError extends Error {
constructor() {
super(`Encountered Promise during synchronous parse. Use .parseAsync() instead.`);
}
}
const globalConfig = {};
function config(newConfig) {
return globalConfig;
}
function jsonStringifyReplacer(_, value) {
if (typeof value === "bigint")
return value.toString();
return value;
}
function cached(getter) {
return {
get value() {
{
const value = getter();
Object.defineProperty(this, "value", { value });
return value;
}
}
};
}
function nullish(input) {
return input === null || input === void 0;
}
const EVALUATING = Symbol("evaluating");
function defineLazy(object2, key, getter) {
let value = void 0;
Object.defineProperty(object2, key, {
get() {
if (value === EVALUATING) {
return void 0;
}
if (value === void 0) {
value = EVALUATING;
value = getter();
}
return value;
},
set(v) {
Object.defineProperty(object2, key, {
value: v
});
},
configurable: true
});
}
const captureStackTrace = "captureStackTrace" in Error ? Error.captureStackTrace : (..._args) => {
};
function isObject(data) {
return typeof data === "object" && data !== null && !Array.isArray(data);
}
function clone(inst, def, params) {
const cl = new inst._zod.constr(def ?? inst._zod.def);
if (!def || params?.parent)
cl._zod.parent = inst;
return cl;
}
function normalizeParams(_params) {
const params = _params;
if (!params)
return {};
if (typeof params === "string")
return { error: () => params };
if (params?.message !== void 0) {
if (params?.error !== void 0)
throw new Error("Cannot specify both `message` and `error` params");
params.error = params.message;
}
delete params.message;
if (typeof params.error === "string")
return { ...params, error: () => params.error };
return params;
}
function optionalKeys(shape) {
return Object.keys(shape).filter((k) => {
return shape[k]._zod.optin === "optional" && shape[k]._zod.optout === "optional";
});
}
function aborted(x2, startIndex = 0) {
if (x2.aborted === true)
return true;
for (let i2 = startIndex; i2 < x2.issues.length; i2++) {
if (x2.issues[i2]?.continue !== true) {
return true;
}
}
return false;
}
function prefixIssues(path, issues) {
return issues.map((iss) => {
var _a;
(_a = iss).path ?? (_a.path = []);
iss.path.unshift(path);
return iss;
});
}
function unwrapMessage(message) {
return typeof message === "string" ? message : message?.message;
}
function finalizeIssue(iss, ctx, config2) {
const full = { ...iss, path: iss.path ?? [] };
if (!iss.message) {
const message = unwrapMessage(iss.inst?._zod.def?.error?.(iss)) ?? unwrapMessage(ctx?.error?.(iss)) ?? unwrapMessage(config2.customError?.(iss)) ?? unwrapMessage(config2.localeError?.(iss)) ?? "Invalid input";
full.message = message;
}
delete full.inst;
delete full.continue;
if (!ctx?.reportInput) {
delete full.input;
}
return full;
}
function getLengthableOrigin(input) {
if (Array.isArray(input))
return "array";
if (typeof input === "string")
return "string";
return "unknown";
}
const initializer = (inst, def) => {
inst.name = "$ZodError";
Object.defineProperty(inst, "_zod", {
value: inst._zod,
enumerable: false
});
Object.defineProperty(inst, "issues", {
value: def,
enumerable: false
});
inst.message = JSON.stringify(def, jsonStringifyReplacer, 2);
Object.defineProperty(inst, "toString", {
value: () => inst.message,
enumerable: false
});
};
const $ZodError = $constructor("$ZodError", initializer);
const $ZodRealError = $constructor("$ZodError", initializer, { Parent: Error });
const _parse = (_Err) => (schema, value, _ctx, _params) => {
const ctx = _ctx ? Object.assign(_ctx, { async: false }) : { async: false };
const result = schema._zod.run({ value, issues: [] }, ctx);
if (result instanceof Promise) {
throw new $ZodAsyncError();
}
if (result.issues.length) {
const e = new (_params?.Err ?? _Err)(result.issues.map((iss) => finalizeIssue(iss, ctx, config())));
captureStackTrace(e, _params?.callee);
throw e;
}
return result.value;
};
const parse = _parse($ZodRealError);
const _parseAsync = (_Err) => async (schema, value, _ctx, params) => {
const ctx = _ctx ? Object.assign(_ctx, { async: true }) : { async: true };
let result = schema._zod.run({ value, issues: [] }, ctx);
if (result instanceof Promise)
result = await result;
if (result.issues.length) {
const e = new (params?.Err ?? _Err)(result.issues.map((iss) => finalizeIssue(iss, ctx, config())));
captureStackTrace(e, params?.callee);
throw e;
}
return result.value;
};
const parseAsync = _parseAsync($ZodRealError);
const _safeParse = (_Err) => (schema, value, _ctx) => {
const ctx = _ctx ? { ..._ctx, async: false } : { async: false };
const result = schema._zod.run({ value, issues: [] }, ctx);
if (result instanceof Promise) {
throw new $ZodAsyncError();
}
return result.issues.length ? {
success: false,
error: new (_Err ?? $ZodError)(result.issues.map((iss) => finalizeIssue(iss, ctx, config())))
} : { success: true, data: result.value };
};
const safeParse = _safeParse($ZodRealError);
const _safeParseAsync = (_Err) => async (schema, value, _ctx) => {
const ctx = _ctx ? Object.assign(_ctx, { async: true }) : { async: true };
let result = schema._zod.run({ value, issues: [] }, ctx);
if (result instanceof Promise)
result = await result;
return result.issues.length ? {
success: false,
error: new _Err(result.issues.map((iss) => finalizeIssue(iss, ctx, config())))
} : { success: true, data: result.value };
};
const safeParseAsync = _safeParseAsync($ZodRealError);
const string$1 = (params) => {
const regex = params ? `[\\s\\S]{${params?.minimum ?? 0},${params?.maximum ?? ""}}` : `[\\s\\S]*`;
return new RegExp(`^${regex}$`);
};
const $ZodCheck = $constructor("$ZodCheck", (inst, def) => {
var _a;
inst._zod ?? (inst._zod = {});
inst._zod.def = def;
(_a = inst._zod).onattach ?? (_a.onattach = []);
});
const $ZodCheckMaxLength = $constructor("$ZodCheckMaxLength", (inst, def) => {
var _a;
$ZodCheck.init(inst, def);
(_a = inst._zod.def).when ?? (_a.when = (payload) => {
const val = payload.value;
return !nullish(val) && val.length !== void 0;
});
inst._zod.onattach.push((inst2) => {
const curr = inst2._zod.bag.maximum ?? Number.POSITIVE_INFINITY;
if (def.maximum < curr)
inst2._zod.bag.maximum = def.maximum;
});
inst._zod.check = (payload) => {
const input = payload.value;
const length = input.length;
if (length <= def.maximum)
return;
const origin = getLengthableOrigin(input);
payload.issues.push({
origin,
code: "too_big",
maximum: def.maximum,
inclusive: true,
input,
inst,
continue: !def.abort
});
};
});
const $ZodCheckMinLength = $constructor("$ZodCheckMinLength", (inst, def) => {
var _a;
$ZodCheck.init(inst, def);
(_a = inst._zod.def).when ?? (_a.when = (payload) => {
const val = payload.value;
return !nullish(val) && val.length !== void 0;
});
inst._zod.onattach.push((inst2) => {
const curr = inst2._zod.bag.minimum ?? Number.NEGATIVE_INFINITY;
if (def.minimum > curr)
inst2._zod.bag.minimum = def.minimum;
});
inst._zod.check = (payload) => {
const input = payload.value;
const length = input.length;
if (length >= def.minimum)
return;
const origin = getLengthableOrigin(input);
payload.issues.push({
origin,
code: "too_small",
minimum: def.minimum,
inclusive: true,
input,
inst,
continue: !def.abort
});
};
});
const version = {
major: 4,
minor: 1,
patch: 12
};
const $ZodType = $constructor("$ZodType", (inst, def) => {
var _a;
inst ?? (inst = {});
inst._zod.def = def;
inst._zod.bag = inst._zod.bag || {};
inst._zod.version = version;
const checks = [...inst._zod.def.checks ?? []];
if (inst._zod.traits.has("$ZodCheck")) {
checks.unshift(inst);
}
for (const ch of checks) {
for (const fn of ch._zod.onattach) {
fn(inst);
}
}
if (checks.length === 0) {
(_a = inst._zod).deferred ?? (_a.deferred = []);
inst._zod.deferred?.push(() => {
inst._zod.run = inst._zod.parse;
});
} else {
const runChecks = (payload, checks2, ctx) => {
let isAborted = aborted(payload);
let asyncResult;
for (const ch of checks2) {
if (ch._zod.def.when) {
const shouldRun = ch._zod.def.when(payload);
if (!shouldRun)
continue;
} else if (isAborted) {
continue;
}
const currLen = payload.issues.length;
const _ = ch._zod.check(payload);
if (_ instanceof Promise && ctx?.async === false) {
throw new $ZodAsyncError();
}
if (asyncResult || _ instanceof Promise) {
asyncResult = (asyncResult ?? Promise.resolve()).then(async () => {
await _;
const nextLen = payload.issues.length;
if (nextLen === currLen)
return;
if (!isAborted)
isAborted = aborted(payload, currLen);
});
} else {
const nextLen = payload.issues.length;
if (nextLen === currLen)
continue;
if (!isAborted)
isAborted = aborted(payload, currLen);
}
}
if (asyncResult) {
return asyncResult.then(() => {
return payload;
});
}
return payload;
};
const handleCanaryResult = (canary, payload, ctx) => {
if (aborted(canary)) {
canary.aborted = true;
return canary;
}
const checkResult = runChecks(payload, checks, ctx);
if (checkResult instanceof Promise) {
if (ctx.async === false)
throw new $ZodAsyncError();
return checkResult.then((checkResult2) => inst._zod.parse(checkResult2, ctx));
}
return inst._zod.parse(checkResult, ctx);
};
inst._zod.run = (payload, ctx) => {
if (ctx.skipChecks) {
return inst._zod.parse(payload, ctx);
}
if (ctx.direction === "backward") {
const canary = inst._zod.parse({ value: payload.value, issues: [] }, { ...ctx, skipChecks: true });
if (canary instanceof Promise) {
return canary.then((canary2) => {
return handleCanaryResult(canary2, payload, ctx);
});
}
return handleCanaryResult(canary, payload, ctx);
}
const result = inst._zod.parse(payload, ctx);
if (result instanceof Promise) {
if (ctx.async === false)
throw new $ZodAsyncError();
return result.then((result2) => runChecks(result2, checks, ctx));
}
return runChecks(result, checks, ctx);
};
}
inst["~standard"] = {
validate: (value) => {
try {
const r2 = safeParse(inst, value);
return r2.success ? { value: r2.data } : { issues: r2.error?.issues };
} catch (_) {
return safeParseAsync(inst, value).then((r2) => r2.success ? { value: r2.data } : { issues: r2.error?.issues });
}
},
vendor: "zod",
version: 1
};
});
const $ZodString = $constructor("$ZodString", (inst, def) => {
$ZodType.init(inst, def);
inst._zod.pattern = [...inst?._zod.bag?.patterns ?? []].pop() ?? string$1(inst._zod.bag);
inst._zod.parse = (payload, _) => {
if (def.coerce)
try {
payload.value = String(payload.value);
} catch (_2) {
}
if (typeof payload.value === "string")
return payload;
payload.issues.push({
expected: "string",
code: "invalid_type",
input: payload.value,
inst
});
return payload;
};
});
function handlePropertyResult(result, final, key, input) {
if (result.issues.length) {
final.issues.push(...prefixIssues(key, result.issues));
}
if (result.value === void 0) {
if (key in input) {
final.value[key] = void 0;
}
} else {
final.value[key] = result.value;
}
}
function normalizeDef(def) {
const keys = Object.keys(def.shape);
for (const k of keys) {
if (!def.shape?.[k]?._zod?.traits?.has("$ZodType")) {
throw new Error(`Invalid element at key "${k}": expected a Zod schema`);
}
}
const okeys = optionalKeys(def.shape);
return {
...def,
keys,
keySet: new Set(keys),
numKeys: keys.length,
optionalKeys: new Set(okeys)
};
}
function handleCatchall(proms, input, payload, ctx, def, inst) {
const unrecognized = [];
const keySet = def.keySet;
const _catchall = def.catchall._zod;
const t2 = _catchall.def.type;
for (const key of Object.keys(input)) {
if (keySet.has(key))
continue;
if (t2 === "never") {
unrecognized.push(key);
continue;
}
const r2 = _catchall.run({ value: input[key], issues: [] }, ctx);
if (r2 instanceof Promise) {
proms.push(r2.then((r3) => handlePropertyResult(r3, payload, key, input)));
} else {
handlePropertyResult(r2, payload, key, input);
}
}
if (unrecognized.length) {
payload.issues.push({
code: "unrecognized_keys",
keys: unrecognized,
input,
inst
});
}
if (!proms.length)
return payload;
return Promise.all(proms).then(() => {
return payload;
});
}
const $ZodObject = $constructor("$ZodObject", (inst, def) => {
$ZodType.init(inst, def);
const desc = Object.getOwnPropertyDescriptor(def, "shape");
if (!desc?.get) {
const sh = def.shape;
Object.defineProperty(def, "shape", {
get: () => {
const newSh = { ...sh };
Object.defineProperty(def, "shape", {
value: newSh
});
return newSh;
}
});
}
const _normalized = cached(() => normalizeDef(def));
defineLazy(inst._zod, "propValues", () => {
const shape = def.shape;
const propValues = {};
for (const key in shape) {
const field = shape[key]._zod;
if (field.values) {
propValues[key] ?? (propValues[key] = new Set());
for (const v of field.values)
propValues[key].add(v);
}
}
return propValues;
});
const isObject$12 = isObject;
const catchall = def.catchall;
let value;
inst._zod.parse = (payload, ctx) => {
value ?? (value = _normalized.value);
const input = payload.value;
if (!isObject$12(input)) {
payload.issues.push({
expected: "object",
code: "invalid_type",
input,
inst
});
return payload;
}
payload.value = {};
const proms = [];
const shape = value.shape;
for (const key of value.keys) {
const el = shape[key];
const r2 = el._zod.run({ value: input[key], issues: [] }, ctx);
if (r2 instanceof Promise) {
proms.push(r2.then((r3) => handlePropertyResult(r3, payload, key, input)));
} else {
handlePropertyResult(r2, payload, key, input);
}
}
if (!catchall) {
return proms.length ? Promise.all(proms).then(() => payload) : payload;
}
return handleCatchall(proms, input, payload, ctx, _normalized.value, inst);
};
});
function _string(Class, params) {
return new Class({
type: "string",
...normalizeParams(params)
});
}
function _maxLength(maximum, params) {
const ch = new $ZodCheckMaxLength({
check: "max_length",
...normalizeParams(params),
maximum
});
return ch;
}
function _minLength(minimum, params) {
return new $ZodCheckMinLength({
check: "min_length",
...normalizeParams(params),
minimum
});
}
const ZodMiniType = $constructor("ZodMiniType", (inst, def) => {
if (!inst._zod)
throw new Error("Uninitialized schema in ZodMiniType.");
$ZodType.init(inst, def);
inst.def = def;
inst.type = def.type;
inst.parse = (data, params) => parse(inst, data, params, { callee: inst.parse });
inst.safeParse = (data, params) => safeParse(inst, data, params);
inst.parseAsync = async (data, params) => parseAsync(inst, data, params, { callee: inst.parseAsync });
inst.safeParseAsync = async (data, params) => safeParseAsync(inst, data, params);
inst.check = (...checks) => {
return inst.clone(
{
...def,
checks: [
...def.checks ?? [],
...checks.map((ch) => typeof ch === "function" ? { _zod: { check: ch, def: { check: "custom" }, onattach: [] } } : ch)
]
}
);
};
inst.clone = (_def, params) => clone(inst, _def, params);
inst.brand = () => inst;
inst.register = ((reg, meta) => {
reg.add(inst, meta);
return inst;
});
});
const ZodMiniString = $constructor("ZodMiniString", (inst, def) => {
$ZodString.init(inst, def);
ZodMiniType.init(inst, def);
});
function string(params) {
return _string(ZodMiniString, params);
}
const ZodMiniObject = $constructor("ZodMiniObject", (inst, def) => {
$ZodObject.init(inst, def);
ZodMiniType.init(inst, def);
defineLazy(inst, "shape", () => def.shape);
});
function object(shape, params) {
const def = {
type: "object",
shape: shape ?? {},
...normalizeParams(params)
};
return new ZodMiniObject(def);
}
const r = (t2, r2, o2) => {
if (t2 && "reportValidity" in t2) {
const s2 = reactHookForm.get(o2, r2);
t2.setCustomValidity(s2 && s2.message || ""), t2.reportValidity();
}
}, o = (e, t2) => {
for (const o2 in t2.fields) {
const s2 = t2.fields[o2];
s2 && s2.ref && "reportValidity" in s2.ref ? r(s2.ref, o2, e) : s2 && s2.refs && s2.refs.forEach((t3) => r(t3, o2, e));
}
}, s$1 = (r2, s2) => {
s2.shouldUseNativeValidation && o(r2, s2);
const n2 = {};
for (const o2 in r2) {
const f = reactHookForm.get(s2.fields, o2), c = Object.assign(r2[o2] || {}, { ref: f && f.ref });
if (i$1(s2.names || Object.keys(r2), o2)) {
const r3 = Object.assign({}, reactHookForm.get(n2, o2));
reactHookForm.set(r3, "root", c), reactHookForm.set(n2, o2, r3);
} else reactHookForm.set(n2, o2, c);
}
return n2;
}, i$1 = (e, t2) => {
const r2 = n(t2);
return e.some((e2) => n(e2).match(`^${r2}\\.\\d+`));
};
function n(e) {
return e.replace(/\]|\[/g, "");
}
function t(r2, e) {
try {
var o2 = r2();
} catch (r3) {
return e(r3);
}
return o2 && o2.then ? o2.then(void 0, e) : o2;
}
function s(r2, e) {
for (var n2 = {}; r2.length; ) {
var t2 = r2[0], s2 = t2.code, i2 = t2.message, a2 = t2.path.join(".");
if (!n2[a2]) if ("unionErrors" in t2) {
var u = t2.unionErrors[0].errors[0];
n2[a2] = { message: u.message, type: u.code };
} else n2[a2] = { message: i2, type: s2 };
if ("unionErrors" in t2 && t2.unionErrors.forEach(function(e2) {
return e2.errors.forEach(function(e3) {
return r2.push(e3);
});
}), e) {
var c = n2[a2].types, f = c && c[t2.code];
n2[a2] = reactHookForm.appendErrors(a2, e, n2, s2, f ? [].concat(f, t2.message) : t2.message);
}
r2.shift();
}
return n2;
}
function i(r2, e) {
for (var n2 = {}; r2.length; ) {
var t2 = r2[0], s2 = t2.code, i2 = t2.message, a2 = t2.path.join(".");
if (!n2[a2]) if ("invalid_union" === t2.code && t2.errors.length > 0) {
var u = t2.errors[0][0];
n2[a2] = { message: u.message, type: u.code };
} else n2[a2] = { message: i2, type: s2 };
if ("invalid_union" === t2.code && t2.errors.forEach(function(e2) {
return e2.forEach(function(e3) {
return r2.push(e3);
});
}), e) {
var c = n2[a2].types, f = c && c[t2.code];
n2[a2] = reactHookForm.appendErrors(a2, e, n2, s2, f ? [].concat(f, t2.message) : t2.message);
}
r2.shift();
}
return n2;
}
function a(o$1, a2, u) {
if (void 0 === u && (u = {}), (function(r2) {
return "_def" in r2 && "object" == typeof r2._def && "typeName" in r2._def;
})(o$1)) return function(n2, i2, c) {
try {
return Promise.resolve(t(function() {
return Promise.resolve(o$1["sync" === u.mode ? "parse" : "parseAsync"](n2, a2)).then(function(e) {
return c.shouldUseNativeValidation && o({}, c), { errors: {}, values: u.raw ? Object.assign({}, n2) : e };
});
}, function(r2) {
if ((function(r3) {
return Array.isArray(null == r3 ? void 0 : r3.issues);
})(r2)) return { values: {}, errors: s$1(s(r2.errors, !c.shouldUseNativeValidation && "all" === c.criteriaMode), c) };
throw r2;
}));
} catch (r2) {
return Promise.reject(r2);
}
};
if ((function(r2) {
return "_zod" in r2 && "object" == typeof r2._zod;
})(o$1)) return function(s2, c, f) {
try {
return Promise.resolve(t(function() {
return Promise.resolve(("sync" === u.mode ? parse : parseAsync)(o$1, s2, a2)).then(function(e) {
return f.shouldUseNativeValidation && o({}, f), { errors: {}, values: u.raw ? Object.assign({}, s2) : e };
});
}, function(r2) {
if ((function(r3) {
return r3 instanceof $ZodError;
})(r2)) return { values: {}, errors: s$1(i(r2.issues, !f.shouldUseNativeValidation && "all" === f.criteriaMode), f) };
throw r2;
}));
} catch (r2) {
return Promise.reject(r2);
}
};
throw new Error("Invalid input: not a Zod schema");
}
const _userLabelsAtom = utils.atomWithStorage(
`${"cx-style"}-user_labels`,
[]
);
const userLabelsAtom = jotai.atom(
(get2) => get2(_userLabelsAtom),
(get2, set2, action) => {
const prev = get2(_userLabelsAtom);
let next = [];
switch (action.type) {
case "add":
next = [action.label, ...prev.filter((l) => l.id !== action.label.id)];
break;
case "remove":
next = prev.filter((l) => l.id !== action.id);
break;
case "clear":
break;
default:
next = prev;
}
set2(_userLabelsAtom, next);
}
);
const userLabelByIdAtom = utils.atomFamily(
(id2) => jotai.atom((get2) => {
const labels = get2(_userLabelsAtom);
return labels.find((l) => l.id === id2) ?? null;
})
);
utils.atomFamily(
(username) => jotai.atom((get2) => {
const labels = get2(_userLabelsAtom);
return labels.find((l) => l.username === username) ?? null;
})
);
function ChatHistory(props) {
const { messages, isConnected } = props;
const { containerRef, scrollToBottom, isAutoScrollEnabled } = useSmartAutoScroll();
const [pendingImagePromises, setPendingImagePromises] = React.useState([]);
const newMessages = useUnreadMessages(messages, isAutoScrollEnabled);
const handleImageDone = (p) => {
setPendingImagePromises((e) => [...e, p]);
};
React.useEffect(() => {
if (!isAutoScrollEnabled) return;
scrollToBottom();
if (pendingImagePromises.length === 0) {
return;
}
let cancelled = false;
Promise.allSettled(pendingImagePromises).then((e) => {
if (!cancelled) {
scrollToBottom();
setPendingImagePromises([]);
}
});
return () => {
cancelled = true;
};
}, [messages, pendingImagePromises, isAutoScrollEnabled]);
return jsxRuntimeExports.jsxs(ScrollArea, { className: "flex-1 min-h-0", ref: containerRef, children: [
jsxRuntimeExports.jsx("div", { className: "p-4 flex flex-col gap-1.5", children: messages.map((m) => {
let messageEle;
switch (m.type) {
case "history_message":
case "message":
messageEle = jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(UserNameDropdown, { message: m }),
jsxRuntimeExports.jsx("span", { className: "ml-2 leading-5", children: jsxRuntimeExports.jsx(Message, { text: m.message, onImageDone: handleImageDone }) })
] });
break;
case "status_change":
messageEle = jsxRuntimeExports.jsx(
"div",
{
dangerouslySetInnerHTML: { __html: m.content.message },
className: "rounded-lg p-3 bg-primary/35 text-center break-keep"
}
);
break;
case "system":
messageEle = jsxRuntimeExports.jsx(
"div",
{
dangerouslySetInnerHTML: { __html: m.message },
className: "rounded-lg p-3 bg-primary/35 text-center break-keep "
}
);
break;
default:
return;
}
return jsxRuntimeExports.jsx("div", { className: "text-sm", children: messageEle }, m.helpId);
}) }),
jsxRuntimeExports.jsx(AnimatePresence, { children: !isAutoScrollEnabled && newMessages.length > 0 && jsxRuntimeExports.jsx(
motion.div,
{
className: "absolute bottom-2 left-0 right-0 flex justify-center",
initial: { y: 8, opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: 8, opacity: 0 },
transition: { duration: 0.3 },
children: jsxRuntimeExports.jsxs(
Button,
{
className: "rounded-full flex items-center gap-0.5",
size: "sm",
onClick: () => {
scrollToBottom();
},
children: [
jsxRuntimeExports.jsx(lucideReact.ChevronsDown, { className: "size-4.5 animate-bounce translate-y-1/6" }),
newMessages.length,
"条新消息"
]
}
)
}
) }),
jsxRuntimeExports.jsx(AnimatePresence, { children: !isConnected && jsxRuntimeExports.jsx(
motion.div,
{
className: "absolute bottom-2 left-0 right-0 flex justify-center",
initial: { y: 8, opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: 8, opacity: 0 },
transition: { duration: 0.3 },
children: jsxRuntimeExports.jsxs("span", { className: "px-3 py-1.5 flex items-center gap-1.5 bg-primary/90 rounded-full text-primary-foreground text-sm", children: [
jsxRuntimeExports.jsx(LoadingIcon, { className: "size-5", strokeWidth: 120 }),
"正在连接聊天室..."
] })
}
) })
] });
}
function UserNameDropdown({
message
}) {
const user = jotai.useAtomValue(userAtom);
const { ip, id: id2, username } = message;
const isMe = user?.id === id2;
if (isMe) {
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(Badge, { className: "scale-90", children: "我" }),
jsxRuntimeExports.jsxs("span", { className: "text-primary", children: [
username,
":"
] })
] });
}
const userLabel = jotai.useAtomValue(userLabelByIdAtom(id2));
const labelDispath = jotai.useSetAtom(userLabelsAtom);
const [showLableDialog, setShowLabelDialog] = React.useState(false);
const [bannedUsers, dispatch] = jotai.useAtom(bannedUsersAtom);
const banned = React.useMemo(() => {
return bannedUsers.some((u) => u.id === id2);
}, [bannedUsers, id2]);
const handleBanUser = () => {
if (banned) {
dispatch({ type: "remove", id: id2 });
} else {
dispatch({ type: "add", user: { ip, id: id2, username } });
}
};
const handleRemoveLabel = (id22) => {
labelDispath({ type: "remove", id: id22 });
};
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsxs(DropdownMenu, { children: [
jsxRuntimeExports.jsx(DropdownMenuTrigger, { children: jsxRuntimeExports.jsxs("span", { className: "text-primary", children: [
userLabel?.label || username,
":"
] }) }),
jsxRuntimeExports.jsxs(DropdownMenuContent, { align: "start", children: [
jsxRuntimeExports.jsxs(DropdownMenuLabel, { children: [
userLabel?.label || username,
userLabel?.label && `（${username}）`
] }),
jsxRuntimeExports.jsxs(DropdownMenuGroup, { children: [
jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: handleBanUser, children: banned ? "解除屏蔽" : "屏蔽用户" }),
jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: () => setShowLabelDialog(true), children: "标记用户" }),
userLabel && jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: () => handleRemoveLabel(id2), children: "清除标记" })
] })
] })
] }),
jsxRuntimeExports.jsx(
LabelDialog,
{
message,
open: showLableDialog,
onOpenChange: setShowLabelDialog
}
)
] });
}
const formSchema$1 = object({
label: string().check(_minLength(1, "用户标记不能为空")).check(_maxLength(10, "用户标记不能超过10个字符"))
});
function LabelDialog({
message,
open,
onOpenChange
}) {
const { id: id2, ip, username } = message;
const userLabel = jotai.useAtomValue(userLabelByIdAtom(id2));
const dispatch = jotai.useSetAtom(userLabelsAtom);
const { handleSubmit, control, reset } = reactHookForm.useForm({
resolver: a(formSchema$1),
defaultValues: {
label: userLabel?.label || ""
}
});
function onSubmit(data) {
dispatch({ type: "add", label: { id: id2, ip, username, label: data.label } });
onOpenChange?.(false);
reset();
}
React.useEffect(() => {
reset({ label: userLabel?.label || "" });
}, [userLabel, reset]);
return jsxRuntimeExports.jsx(Dialog, { open, onOpenChange, children: jsxRuntimeExports.jsxs(DialogContent, { children: [
jsxRuntimeExports.jsxs(DialogHeader, { children: [
jsxRuntimeExports.jsxs(DialogTitle, { children: [
"标记 【",
username,
"】"
] }),
jsxRuntimeExports.jsx(DialogDescription, { children: "标记用户后，会以标记替换用户的用户名。需要注意的是，用户标记只能自己看到，其他人是看得不到的" })
] }),
jsxRuntimeExports.jsxs(
"form",
{
id: "label-form",
className: "space-y-4",
onSubmit: handleSubmit(onSubmit),
children: [
jsxRuntimeExports.jsx(FieldGroup, { children: jsxRuntimeExports.jsx(
reactHookForm.Controller,
{
control,
name: "label",
render: ({ field, fieldState }) => jsxRuntimeExports.jsxs(Field, { "data-invalid": fieldState.invalid, children: [
jsxRuntimeExports.jsx(FieldLabel, { htmlFor: "label", children: "用户标记" }),
jsxRuntimeExports.jsx(
Input,
{
...field,
id: "label",
"aria-invalid": fieldState.invalid,
autoComplete: "off"
}
),
fieldState.invalid && jsxRuntimeExports.jsx(FieldError, { errors: [fieldState.error] })
] })
}
) }),
jsxRuntimeExports.jsxs(DialogFooter, { children: [
jsxRuntimeExports.jsx(DialogClose, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", children: "关闭" }) }),
jsxRuntimeExports.jsx(Button, { type: "submit", children: "确定" })
] })
]
}
)
] }) });
}
function OnlineCount(props) {
const { count: count2 } = props;
return jsxRuntimeExports.jsxs("div", { className: "h-12 border-b border-border flex items-center justify-between px-4", children: [
jsxRuntimeExports.jsx("span", { children: "在线人数" }),
jsxRuntimeExports.jsxs("span", { className: "ml-2", children: [
count2 && count2 > -1 ? count2 : "--",
"人"
] })
] });
}
var POPOVER_NAME = "Popover";
var [createPopoverContext] = createContextScope(POPOVER_NAME, [
createPopperScope
]);
var usePopperScope$1 = createPopperScope();
var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
var Popover$1 = (props) => {
const {
__scopePopover,
children,
open: openProp,
defaultOpen,
onOpenChange,
modal = false
} = props;
const popperScope = usePopperScope$1(__scopePopover);
const triggerRef = React__namespace.useRef(null);
const [hasCustomAnchor, setHasCustomAnchor] = React__namespace.useState(false);
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: POPOVER_NAME
});
return jsxRuntimeExports.jsx(Root2$3, { ...popperScope, children: jsxRuntimeExports.jsx(
PopoverProvider,
{
scope: __scopePopover,
contentId: useId(),
triggerRef,
open,
onOpenChange: setOpen,
onOpenToggle: React__namespace.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
hasCustomAnchor,
onCustomAnchorAdd: React__namespace.useCallback(() => setHasCustomAnchor(true), []),
onCustomAnchorRemove: React__namespace.useCallback(() => setHasCustomAnchor(false), []),
modal,
children
}
) });
};
Popover$1.displayName = POPOVER_NAME;
var ANCHOR_NAME = "PopoverAnchor";
var PopoverAnchor = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...anchorProps } = props;
const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
const popperScope = usePopperScope$1(__scopePopover);
const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
React__namespace.useEffect(() => {
onCustomAnchorAdd();
return () => onCustomAnchorRemove();
}, [onCustomAnchorAdd, onCustomAnchorRemove]);
return jsxRuntimeExports.jsx(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
}
);
PopoverAnchor.displayName = ANCHOR_NAME;
var TRIGGER_NAME$2 = "PopoverTrigger";
var PopoverTrigger$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...triggerProps } = props;
const context = usePopoverContext(TRIGGER_NAME$2, __scopePopover);
const popperScope = usePopperScope$1(__scopePopover);
const composedTriggerRef = useComposedRefs$1(forwardedRef, context.triggerRef);
const trigger = jsxRuntimeExports.jsx(
Primitive.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": getState(context.open),
...triggerProps,
ref: composedTriggerRef,
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
}
);
return context.hasCustomAnchor ? trigger : jsxRuntimeExports.jsx(Anchor, { asChild: true, ...popperScope, children: trigger });
}
);
PopoverTrigger$1.displayName = TRIGGER_NAME$2;
var PORTAL_NAME$1 = "PopoverPortal";
var [PortalProvider$1, usePortalContext$1] = createPopoverContext(PORTAL_NAME$1, {
forceMount: void 0
});
var PopoverPortal = (props) => {
const { __scopePopover, forceMount, children, container } = props;
const context = usePopoverContext(PORTAL_NAME$1, __scopePopover);
return jsxRuntimeExports.jsx(PortalProvider$1, { scope: __scopePopover, forceMount, children: jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: jsxRuntimeExports.jsx(Portal$4, { asChild: true, container, children }) }) });
};
PopoverPortal.displayName = PORTAL_NAME$1;
var CONTENT_NAME$2 = "PopoverContent";
var PopoverContent$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext$1(CONTENT_NAME$2, props.__scopePopover);
const { forceMount = portalContext.forceMount, ...contentProps } = props;
const context = usePopoverContext(CONTENT_NAME$2, props.__scopePopover);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: context.modal ? jsxRuntimeExports.jsx(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : jsxRuntimeExports.jsx(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
}
);
PopoverContent$1.displayName = CONTENT_NAME$2;
var Slot = createSlot("PopoverContent.RemoveScroll");
var PopoverContentModal = React__namespace.forwardRef(
(props, forwardedRef) => {
const context = usePopoverContext(CONTENT_NAME$2, props.__scopePopover);
const contentRef = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, contentRef);
const isRightClickOutsideRef = React__namespace.useRef(false);
React__namespace.useEffect(() => {
const content = contentRef.current;
if (content) return hideOthers(content);
}, []);
return jsxRuntimeExports.jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: jsxRuntimeExports.jsx(
PopoverContentImpl,
{
...props,
ref: composedRefs,
trapFocus: context.open,
disableOutsidePointerEvents: true,
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
event.preventDefault();
if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
}),
onPointerDownOutside: composeEventHandlers(
props.onPointerDownOutside,
(event) => {
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
isRightClickOutsideRef.current = isRightClick;
},
{ checkForDefaultPrevented: false }
),
onFocusOutside: composeEventHandlers(
props.onFocusOutside,
(event) => event.preventDefault(),
{ checkForDefaultPrevented: false }
)
}
) });
}
);
var PopoverContentNonModal = React__namespace.forwardRef(
(props, forwardedRef) => {
const context = usePopoverContext(CONTENT_NAME$2, props.__scopePopover);
const hasInteractedOutsideRef = React__namespace.useRef(false);
const hasPointerDownOutsideRef = React__namespace.useRef(false);
return jsxRuntimeExports.jsx(
PopoverContentImpl,
{
...props,
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event) => {
props.onCloseAutoFocus?.(event);
if (!event.defaultPrevented) {
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
event.preventDefault();
}
hasInteractedOutsideRef.current = false;
hasPointerDownOutsideRef.current = false;
},
onInteractOutside: (event) => {
props.onInteractOutside?.(event);
if (!event.defaultPrevented) {
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === "pointerdown") {
hasPointerDownOutsideRef.current = true;
}
}
const target = event.target;
const targetIsTrigger = context.triggerRef.current?.contains(target);
if (targetIsTrigger) event.preventDefault();
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
event.preventDefault();
}
}
}
);
}
);
var PopoverContentImpl = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
__scopePopover,
trapFocus,
onOpenAutoFocus,
onCloseAutoFocus,
disableOutsidePointerEvents,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onInteractOutside,
...contentProps
} = props;
const context = usePopoverContext(CONTENT_NAME$2, __scopePopover);
const popperScope = usePopperScope$1(__scopePopover);
useFocusGuards();
return jsxRuntimeExports.jsx(
FocusScope,
{
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus,
children: jsxRuntimeExports.jsx(
DismissableLayer,
{
asChild: true,
disableOutsidePointerEvents,
onInteractOutside,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onDismiss: () => context.onOpenChange(false),
children: jsxRuntimeExports.jsx(
Content$2,
{
"data-state": getState(context.open),
role: "dialog",
id: context.contentId,
...popperScope,
...contentProps,
ref: forwardedRef,
style: {
...contentProps.style,
...{
"--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-popover-content-available-width": "var(--radix-popper-available-width)",
"--radix-popover-content-available-height": "var(--radix-popper-available-height)",
"--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
}
}
}
)
}
)
}
);
}
);
var CLOSE_NAME = "PopoverClose";
var PopoverClose = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...closeProps } = props;
const context = usePopoverContext(CLOSE_NAME, __scopePopover);
return jsxRuntimeExports.jsx(
Primitive.button,
{
type: "button",
...closeProps,
ref: forwardedRef,
onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
}
);
}
);
PopoverClose.displayName = CLOSE_NAME;
var ARROW_NAME$1 = "PopoverArrow";
var PopoverArrow = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...arrowProps } = props;
const popperScope = usePopperScope$1(__scopePopover);
return jsxRuntimeExports.jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
}
);
PopoverArrow.displayName = ARROW_NAME$1;
function getState(open) {
return open ? "open" : "closed";
}
var Root2$1 = Popover$1;
var Trigger$2 = PopoverTrigger$1;
var Portal$1 = PopoverPortal;
var Content2$1 = PopoverContent$1;
function Popover({
...props
}) {
return jsxRuntimeExports.jsx(Root2$1, { "data-slot": "popover", ...props });
}
function PopoverTrigger({
...props
}) {
return jsxRuntimeExports.jsx(Trigger$2, { "data-slot": "popover-trigger", ...props });
}
function PopoverContent({
className,
align = "center",
sideOffset = 4,
...props
}) {
return jsxRuntimeExports.jsx(Portal$1, { children: jsxRuntimeExports.jsx(
Content2$1,
{
"data-slot": "popover-content",
align,
sideOffset,
className: cn$1(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
),
...props
}
) });
}
var TABS_NAME = "Tabs";
var [createTabsContext] = createContextScope(TABS_NAME, [
createRovingFocusGroupScope
]);
var useRovingFocusGroupScope = createRovingFocusGroupScope();
var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
var Tabs$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
__scopeTabs,
value: valueProp,
onValueChange,
defaultValue,
orientation = "horizontal",
dir,
activationMode = "automatic",
...tabsProps
} = props;
const direction = useDirection(dir);
const [value, setValue] = useControllableState({
prop: valueProp,
onChange: onValueChange,
defaultProp: defaultValue ?? "",
caller: TABS_NAME
});
return jsxRuntimeExports.jsx(
TabsProvider,
{
scope: __scopeTabs,
baseId: useId(),
value,
onValueChange: setValue,
orientation,
dir: direction,
activationMode,
children: jsxRuntimeExports.jsx(
Primitive.div,
{
dir: direction,
"data-orientation": orientation,
...tabsProps,
ref: forwardedRef
}
)
}
);
}
);
Tabs$1.displayName = TABS_NAME;
var TAB_LIST_NAME = "TabsList";
var TabsList$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeTabs, loop = true, ...listProps } = props;
const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
return jsxRuntimeExports.jsx(
Root$4,
{
asChild: true,
...rovingFocusGroupScope,
orientation: context.orientation,
dir: context.dir,
loop,
children: jsxRuntimeExports.jsx(
Primitive.div,
{
role: "tablist",
"aria-orientation": context.orientation,
...listProps,
ref: forwardedRef
}
)
}
);
}
);
TabsList$1.displayName = TAB_LIST_NAME;
var TRIGGER_NAME$1 = "TabsTrigger";
var TabsTrigger$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
const context = useTabsContext(TRIGGER_NAME$1, __scopeTabs);
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
const triggerId = makeTriggerId(context.baseId, value);
const contentId = makeContentId(context.baseId, value);
const isSelected = value === context.value;
return jsxRuntimeExports.jsx(
Item,
{
asChild: true,
...rovingFocusGroupScope,
focusable: !disabled,
active: isSelected,
children: jsxRuntimeExports.jsx(
Primitive.button,
{
type: "button",
role: "tab",
"aria-selected": isSelected,
"aria-controls": contentId,
"data-state": isSelected ? "active" : "inactive",
"data-disabled": disabled ? "" : void 0,
disabled,
id: triggerId,
...triggerProps,
ref: forwardedRef,
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
if (!disabled && event.button === 0 && event.ctrlKey === false) {
context.onValueChange(value);
} else {
event.preventDefault();
}
}),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
if ([" ", "Enter"].includes(event.key)) context.onValueChange(value);
}),
onFocus: composeEventHandlers(props.onFocus, () => {
const isAutomaticActivation = context.activationMode !== "manual";
if (!isSelected && !disabled && isAutomaticActivation) {
context.onValueChange(value);
}
})
}
)
}
);
}
);
TabsTrigger$1.displayName = TRIGGER_NAME$1;
var CONTENT_NAME$1 = "TabsContent";
var TabsContent$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
const context = useTabsContext(CONTENT_NAME$1, __scopeTabs);
const triggerId = makeTriggerId(context.baseId, value);
const contentId = makeContentId(context.baseId, value);
const isSelected = value === context.value;
const isMountAnimationPreventedRef = React__namespace.useRef(isSelected);
React__namespace.useEffect(() => {
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
return () => cancelAnimationFrame(rAF);
}, []);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || isSelected, children: ({ present }) => jsxRuntimeExports.jsx(
Primitive.div,
{
"data-state": isSelected ? "active" : "inactive",
"data-orientation": context.orientation,
role: "tabpanel",
"aria-labelledby": triggerId,
hidden: !present,
id: contentId,
tabIndex: 0,
...contentProps,
ref: forwardedRef,
style: {
...props.style,
animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
},
children: present && children
}
) });
}
);
TabsContent$1.displayName = CONTENT_NAME$1;
function makeTriggerId(baseId, value) {
return `${baseId}-trigger-${value}`;
}
function makeContentId(baseId, value) {
return `${baseId}-content-${value}`;
}
var Root2 = Tabs$1;
var List = TabsList$1;
var Trigger$1 = TabsTrigger$1;
var Content = TabsContent$1;
function Tabs({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Root2,
{
"data-slot": "tabs",
className: cn$1("flex flex-col gap-2", className),
...props
}
);
}
function TabsList({
className,
...props
}) {
return jsxRuntimeExports.jsx(
List,
{
"data-slot": "tabs-list",
className: cn$1(
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
className
),
...props
}
);
}
function TabsTrigger({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Trigger$1,
{
"data-slot": "tabs-trigger",
className: cn$1(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
),
...props
}
);
}
function TabsContent({
className,
...props
}) {
return jsxRuntimeExports.jsx(
Content,
{
forceMount: true,
"data-slot": "tabs-content",
className: cn$1(
"data-[state=inactive]:hidden flex-1 outline-none",
className
),
...props
}
);
}
var VISUALLY_HIDDEN_STYLES = Object.freeze({
position: "absolute",
border: 0,
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
wordWrap: "normal"
});
var NAME = "VisuallyHidden";
var VisuallyHidden = React__namespace.forwardRef(
(props, forwardedRef) => {
return jsxRuntimeExports.jsx(
Primitive.span,
{
...props,
ref: forwardedRef,
style: { ...VISUALLY_HIDDEN_STYLES, ...props.style }
}
);
}
);
VisuallyHidden.displayName = NAME;
var Root = VisuallyHidden;
var [createTooltipContext] = createContextScope("Tooltip", [
createPopperScope
]);
var usePopperScope = createPopperScope();
var PROVIDER_NAME = "TooltipProvider";
var DEFAULT_DELAY_DURATION = 700;
var TOOLTIP_OPEN = "tooltip.open";
var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
var TooltipProvider$1 = (props) => {
const {
__scopeTooltip,
delayDuration = DEFAULT_DELAY_DURATION,
skipDelayDuration = 300,
disableHoverableContent = false,
children
} = props;
const isOpenDelayedRef = React__namespace.useRef(true);
const isPointerInTransitRef = React__namespace.useRef(false);
const skipDelayTimerRef = React__namespace.useRef(0);
React__namespace.useEffect(() => {
const skipDelayTimer = skipDelayTimerRef.current;
return () => window.clearTimeout(skipDelayTimer);
}, []);
return jsxRuntimeExports.jsx(
TooltipProviderContextProvider,
{
scope: __scopeTooltip,
isOpenDelayedRef,
delayDuration,
onOpen: React__namespace.useCallback(() => {
window.clearTimeout(skipDelayTimerRef.current);
isOpenDelayedRef.current = false;
}, []),
onClose: React__namespace.useCallback(() => {
window.clearTimeout(skipDelayTimerRef.current);
skipDelayTimerRef.current = window.setTimeout(
() => isOpenDelayedRef.current = true,
skipDelayDuration
);
}, [skipDelayDuration]),
isPointerInTransitRef,
onPointerInTransitChange: React__namespace.useCallback((inTransit) => {
isPointerInTransitRef.current = inTransit;
}, []),
disableHoverableContent,
children
}
);
};
TooltipProvider$1.displayName = PROVIDER_NAME;
var TOOLTIP_NAME = "Tooltip";
var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
var Tooltip$1 = (props) => {
const {
__scopeTooltip,
children,
open: openProp,
defaultOpen,
onOpenChange,
disableHoverableContent: disableHoverableContentProp,
delayDuration: delayDurationProp
} = props;
const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
const popperScope = usePopperScope(__scopeTooltip);
const [trigger, setTrigger] = React__namespace.useState(null);
const contentId = useId();
const openTimerRef = React__namespace.useRef(0);
const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
const delayDuration = delayDurationProp ?? providerContext.delayDuration;
const wasOpenDelayedRef = React__namespace.useRef(false);
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: (open2) => {
if (open2) {
providerContext.onOpen();
document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
} else {
providerContext.onClose();
}
onOpenChange?.(open2);
},
caller: TOOLTIP_NAME
});
const stateAttribute = React__namespace.useMemo(() => {
return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
}, [open]);
const handleOpen = React__namespace.useCallback(() => {
window.clearTimeout(openTimerRef.current);
openTimerRef.current = 0;
wasOpenDelayedRef.current = false;
setOpen(true);
}, [setOpen]);
const handleClose = React__namespace.useCallback(() => {
window.clearTimeout(openTimerRef.current);
openTimerRef.current = 0;
setOpen(false);
}, [setOpen]);
const handleDelayedOpen = React__namespace.useCallback(() => {
window.clearTimeout(openTimerRef.current);
openTimerRef.current = window.setTimeout(() => {
wasOpenDelayedRef.current = true;
setOpen(true);
openTimerRef.current = 0;
}, delayDuration);
}, [delayDuration, setOpen]);
React__namespace.useEffect(() => {
return () => {
if (openTimerRef.current) {
window.clearTimeout(openTimerRef.current);
openTimerRef.current = 0;
}
};
}, []);
return jsxRuntimeExports.jsx(Root2$3, { ...popperScope, children: jsxRuntimeExports.jsx(
TooltipContextProvider,
{
scope: __scopeTooltip,
contentId,
open,
stateAttribute,
trigger,
onTriggerChange: setTrigger,
onTriggerEnter: React__namespace.useCallback(() => {
if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
else handleOpen();
}, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen]),
onTriggerLeave: React__namespace.useCallback(() => {
if (disableHoverableContent) {
handleClose();
} else {
window.clearTimeout(openTimerRef.current);
openTimerRef.current = 0;
}
}, [handleClose, disableHoverableContent]),
onOpen: handleOpen,
onClose: handleClose,
disableHoverableContent,
children
}
) });
};
Tooltip$1.displayName = TOOLTIP_NAME;
var TRIGGER_NAME = "TooltipTrigger";
var TooltipTrigger$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeTooltip, ...triggerProps } = props;
const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);
const popperScope = usePopperScope(__scopeTooltip);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref, context.onTriggerChange);
const isPointerDownRef = React__namespace.useRef(false);
const hasPointerMoveOpenedRef = React__namespace.useRef(false);
const handlePointerUp = React__namespace.useCallback(() => isPointerDownRef.current = false, []);
React__namespace.useEffect(() => {
return () => document.removeEventListener("pointerup", handlePointerUp);
}, [handlePointerUp]);
return jsxRuntimeExports.jsx(Anchor, { asChild: true, ...popperScope, children: jsxRuntimeExports.jsx(
Primitive.button,
{
"aria-describedby": context.open ? context.contentId : void 0,
"data-state": context.stateAttribute,
...triggerProps,
ref: composedRefs,
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
if (event.pointerType === "touch") return;
if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
context.onTriggerEnter();
hasPointerMoveOpenedRef.current = true;
}
}),
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
context.onTriggerLeave();
hasPointerMoveOpenedRef.current = false;
}),
onPointerDown: composeEventHandlers(props.onPointerDown, () => {
if (context.open) {
context.onClose();
}
isPointerDownRef.current = true;
document.addEventListener("pointerup", handlePointerUp, { once: true });
}),
onFocus: composeEventHandlers(props.onFocus, () => {
if (!isPointerDownRef.current) context.onOpen();
}),
onBlur: composeEventHandlers(props.onBlur, context.onClose),
onClick: composeEventHandlers(props.onClick, context.onClose)
}
) });
}
);
TooltipTrigger$1.displayName = TRIGGER_NAME;
var PORTAL_NAME = "TooltipPortal";
var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
forceMount: void 0
});
var TooltipPortal = (props) => {
const { __scopeTooltip, forceMount, children, container } = props;
const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
return jsxRuntimeExports.jsx(PortalProvider, { scope: __scopeTooltip, forceMount, children: jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: jsxRuntimeExports.jsx(Portal$4, { asChild: true, container, children }) }) });
};
TooltipPortal.displayName = PORTAL_NAME;
var CONTENT_NAME = "TooltipContent";
var TooltipContent$1 = React__namespace.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
return jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? jsxRuntimeExports.jsx(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : jsxRuntimeExports.jsx(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
}
);
var TooltipContentHoverable = React__namespace.forwardRef((props, forwardedRef) => {
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);
const ref = React__namespace.useRef(null);
const composedRefs = useComposedRefs$1(forwardedRef, ref);
const [pointerGraceArea, setPointerGraceArea] = React__namespace.useState(null);
const { trigger, onClose } = context;
const content = ref.current;
const { onPointerInTransitChange } = providerContext;
const handleRemoveGraceArea = React__namespace.useCallback(() => {
setPointerGraceArea(null);
onPointerInTransitChange(false);
}, [onPointerInTransitChange]);
const handleCreateGraceArea = React__namespace.useCallback(
(event, hoverTarget) => {
const currentTarget = event.currentTarget;
const exitPoint = { x: event.clientX, y: event.clientY };
const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
setPointerGraceArea(graceArea);
onPointerInTransitChange(true);
},
[onPointerInTransitChange]
);
React__namespace.useEffect(() => {
return () => handleRemoveGraceArea();
}, [handleRemoveGraceArea]);
React__namespace.useEffect(() => {
if (trigger && content) {
const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
trigger.addEventListener("pointerleave", handleTriggerLeave);
content.addEventListener("pointerleave", handleContentLeave);
return () => {
trigger.removeEventListener("pointerleave", handleTriggerLeave);
content.removeEventListener("pointerleave", handleContentLeave);
};
}
}, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);
React__namespace.useEffect(() => {
if (pointerGraceArea) {
const handleTrackPointerGrace = (event) => {
const target = event.target;
const pointerPosition = { x: event.clientX, y: event.clientY };
const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
if (hasEnteredTarget) {
handleRemoveGraceArea();
} else if (isPointerOutsideGraceArea) {
handleRemoveGraceArea();
onClose();
}
};
document.addEventListener("pointermove", handleTrackPointerGrace);
return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
}
}, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
return jsxRuntimeExports.jsx(TooltipContentImpl, { ...props, ref: composedRefs });
});
var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
var Slottable = createSlottable("TooltipContent");
var TooltipContentImpl = React__namespace.forwardRef(
(props, forwardedRef) => {
const {
__scopeTooltip,
children,
"aria-label": ariaLabel,
onEscapeKeyDown,
onPointerDownOutside,
...contentProps
} = props;
const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
const popperScope = usePopperScope(__scopeTooltip);
const { onClose } = context;
React__namespace.useEffect(() => {
document.addEventListener(TOOLTIP_OPEN, onClose);
return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
}, [onClose]);
React__namespace.useEffect(() => {
if (context.trigger) {
const handleScroll2 = (event) => {
const target = event.target;
if (target?.contains(context.trigger)) onClose();
};
window.addEventListener("scroll", handleScroll2, { capture: true });
return () => window.removeEventListener("scroll", handleScroll2, { capture: true });
}
}, [context.trigger, onClose]);
return jsxRuntimeExports.jsx(
DismissableLayer,
{
asChild: true,
disableOutsidePointerEvents: false,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside: (event) => event.preventDefault(),
onDismiss: onClose,
children: jsxRuntimeExports.jsxs(
Content$2,
{
"data-state": context.stateAttribute,
...popperScope,
...contentProps,
ref: forwardedRef,
style: {
...contentProps.style,
...{
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
}
},
children: [
jsxRuntimeExports.jsx(Slottable, { children }),
jsxRuntimeExports.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: jsxRuntimeExports.jsx(Root, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
]
}
)
}
);
}
);
TooltipContent$1.displayName = CONTENT_NAME;
var ARROW_NAME = "TooltipArrow";
var TooltipArrow = React__namespace.forwardRef(
(props, forwardedRef) => {
const { __scopeTooltip, ...arrowProps } = props;
const popperScope = usePopperScope(__scopeTooltip);
const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
ARROW_NAME,
__scopeTooltip
);
return visuallyHiddenContentContext.isInside ? null : jsxRuntimeExports.jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
}
);
TooltipArrow.displayName = ARROW_NAME;
function getExitSideFromRect(point, rect) {
const top = Math.abs(rect.top - point.y);
const bottom = Math.abs(rect.bottom - point.y);
const right = Math.abs(rect.right - point.x);
const left = Math.abs(rect.left - point.x);
switch (Math.min(top, bottom, right, left)) {
case left:
return "left";
case right:
return "right";
case top:
return "top";
case bottom:
return "bottom";
default:
throw new Error("unreachable");
}
}
function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
const paddedExitPoints = [];
switch (exitSide) {
case "top":
paddedExitPoints.push(
{ x: exitPoint.x - padding, y: exitPoint.y + padding },
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
);
break;
case "bottom":
paddedExitPoints.push(
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
{ x: exitPoint.x + padding, y: exitPoint.y - padding }
);
break;
case "left":
paddedExitPoints.push(
{ x: exitPoint.x + padding, y: exitPoint.y - padding },
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
);
break;
case "right":
paddedExitPoints.push(
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
{ x: exitPoint.x - padding, y: exitPoint.y + padding }
);
break;
}
return paddedExitPoints;
}
function getPointsFromRect(rect) {
const { top, right, bottom, left } = rect;
return [
{ x: left, y: top },
{ x: right, y: top },
{ x: right, y: bottom },
{ x: left, y: bottom }
];
}
function isPointInPolygon(point, polygon) {
const { x: x2, y } = point;
let inside = false;
for (let i2 = 0, j = polygon.length - 1; i2 < polygon.length; j = i2++) {
const ii = polygon[i2];
const jj = polygon[j];
const xi = ii.x;
const yi = ii.y;
const xj = jj.x;
const yj = jj.y;
const intersect = yi > y !== yj > y && x2 < (xj - xi) * (y - yi) / (yj - yi) + xi;
if (intersect) inside = !inside;
}
return inside;
}
function getHull(points) {
const newPoints = points.slice();
newPoints.sort((a2, b) => {
if (a2.x < b.x) return -1;
else if (a2.x > b.x) return 1;
else if (a2.y < b.y) return -1;
else if (a2.y > b.y) return 1;
else return 0;
});
return getHullPresorted(newPoints);
}
function getHullPresorted(points) {
if (points.length <= 1) return points.slice();
const upperHull = [];
for (let i2 = 0; i2 < points.length; i2++) {
const p = points[i2];
while (upperHull.length >= 2) {
const q = upperHull[upperHull.length - 1];
const r2 = upperHull[upperHull.length - 2];
if ((q.x - r2.x) * (p.y - r2.y) >= (q.y - r2.y) * (p.x - r2.x)) upperHull.pop();
else break;
}
upperHull.push(p);
}
upperHull.pop();
const lowerHull = [];
for (let i2 = points.length - 1; i2 >= 0; i2--) {
const p = points[i2];
while (lowerHull.length >= 2) {
const q = lowerHull[lowerHull.length - 1];
const r2 = lowerHull[lowerHull.length - 2];
if ((q.x - r2.x) * (p.y - r2.y) >= (q.y - r2.y) * (p.x - r2.x)) lowerHull.pop();
else break;
}
lowerHull.push(p);
}
lowerHull.pop();
if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
return upperHull;
} else {
return upperHull.concat(lowerHull);
}
}
var Provider = TooltipProvider$1;
var Root3 = Tooltip$1;
var Trigger = TooltipTrigger$1;
var Portal = TooltipPortal;
var Content2 = TooltipContent$1;
var Arrow2 = TooltipArrow;
function TooltipProvider({
delayDuration = 0,
...props
}) {
return jsxRuntimeExports.jsx(
Provider,
{
"data-slot": "tooltip-provider",
delayDuration,
...props
}
);
}
function Tooltip({
...props
}) {
return jsxRuntimeExports.jsx(TooltipProvider, { children: jsxRuntimeExports.jsx(Root3, { "data-slot": "tooltip", ...props }) });
}
function TooltipTrigger({
...props
}) {
return jsxRuntimeExports.jsx(Trigger, { "data-slot": "tooltip-trigger", ...props });
}
function TooltipContent({
className,
sideOffset = 0,
children,
...props
}) {
return jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsxs(
Content2,
{
"data-slot": "tooltip-content",
sideOffset,
className: cn$1(
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
className
),
...props,
children: [
children,
jsxRuntimeExports.jsx(Arrow2, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
]
}
) });
}
function BannedToolkit() {
return jsxRuntimeExports.jsx(Tooltip, { children: jsxRuntimeExports.jsxs(Popover, { children: [
jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: jsxRuntimeExports.jsx(lucideReact.Captions, { className: "ml-auto size-6 hover:text-primary" }) }) }),
jsxRuntimeExports.jsx(TooltipContent, { children: "屏蔽设置" }),
jsxRuntimeExports.jsx(
PopoverContent,
{
align: "end",
side: "top",
className: "w-88 p-0 h-80 overflow-hidden",
children: jsxRuntimeExports.jsx(BannedTabs, {})
}
)
] }) });
}
function BannedTabs() {
return jsxRuntimeExports.jsxs(Tabs, { className: "h-full", children: [
jsxRuntimeExports.jsxs(TabsList, { className: "mt-2 ml-2", children: [
jsxRuntimeExports.jsx(TabsTrigger, { value: "bannedWords", children: "屏蔽词" }),
jsxRuntimeExports.jsx(TabsTrigger, { value: "bannedUsers", children: "屏蔽用户" })
] }),
jsxRuntimeExports.jsx(TabsContent, { value: "bannedWords", className: "flex-1 overflow-hidden", children: jsxRuntimeExports.jsx(BannedWords, {}) }),
jsxRuntimeExports.jsx(TabsContent, { value: "bannedUsers", className: "flex-1 overflow-hidden", children: jsxRuntimeExports.jsx(BannedUsers, {}) })
] });
}
function BannedWords() {
const [bannedWord, setBannedWord] = React.useState("");
const [bannedWords, dispatch] = jotai.useAtom(bannedWordsAtom);
const handleSubmit = (e) => {
e.preventDefault();
if (bannedWord) {
dispatch({
type: "add",
word: bannedWord
});
setBannedWord("");
}
};
const handleChange = (e) => {
setBannedWord(e.target.value);
};
const handleClear = () => {
dispatch({ type: "clear" });
};
const handleRemove = (word) => {
dispatch({ type: "remove", word });
};
return jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 h-full overflow-hidden py-2", children: [
jsxRuntimeExports.jsxs("form", { className: "px-2 flex gap-2", onSubmit: handleSubmit, children: [
jsxRuntimeExports.jsx(
Input,
{
name: "bannedWord",
placeholder: "输入屏蔽词",
value: bannedWord,
onChange: handleChange
}
),
jsxRuntimeExports.jsx(Button, { type: "submit", variant: "outline", children: "添加" })
] }),
bannedWords.length > 0 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 px-3 min-h-0", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: bannedWords.map((w, i2) => jsxRuntimeExports.jsxs(
"div",
{
className: "p-1 flex items-center justify-between hover:bg-secondary rounded-sm gap-1",
children: [
jsxRuntimeExports.jsxs("span", { className: "text-sm", children: [
i2 + 1,
"."
] }),
jsxRuntimeExports.jsx("span", { className: "text-sm truncate flex-1", children: w }),
jsxRuntimeExports.jsx(
lucideReact.Trash2,
{
className: "size-4 cursor-pointer hover:text-primary shrink-0 ml-6",
onClick: () => handleRemove(w)
}
)
]
},
w
)) }) }),
jsxRuntimeExports.jsx("div", { className: "text-center", children: jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
className: "text",
size: "sm",
onClick: handleClear,
children: "清空屏蔽词"
}
) })
] }) : jsxRuntimeExports.jsx("span", { className: "text-sm text-muted-foreground flex-1 flex justify-center items-center", children: "--- 暂未添加屏蔽词 ---" })
] });
}
function BannedUsers() {
const [bannedUsers, dispatch] = jotai.useAtom(bannedUsersAtom);
const handleClear = () => {
dispatch({ type: "clear" });
};
return jsxRuntimeExports.jsx("div", { className: "h-full flex flex-col overflow-hidden py-2 gap-2", children: bannedUsers.length > 0 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(ScrollArea, { className: "min-h-0 px-3", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: bannedUsers.map((u, i2) => jsxRuntimeExports.jsx(BannedUserItem, { user: u, index: i2 }, u.id)) }) }),
jsxRuntimeExports.jsx("div", { className: "text-center", children: jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
className: "text",
size: "sm",
onClick: handleClear,
children: "清空屏蔽用户"
}
) })
] }) : jsxRuntimeExports.jsx("span", { className: "text-sm text-muted-foreground flex-1 flex justify-center items-center", children: "--- 暂未屏蔽用户 ---" }) });
}
function BannedUserItem({ user, index: index2 }) {
const { id: id2, username } = user;
const dispatch = jotai.useSetAtom(bannedUsersAtom);
const userLabel = jotai.useAtomValue(userLabelByIdAtom(id2));
const handleRemove = () => {
dispatch({ type: "remove", id: id2 });
};
return jsxRuntimeExports.jsxs("div", { className: "p-1 flex items-center justify-between hover:bg-secondary rounded-sm gap-1", children: [
jsxRuntimeExports.jsxs("span", { className: "text-sm", children: [
index2 + 1,
"."
] }),
jsxRuntimeExports.jsxs("span", { className: "text-sm truncate flex-1", children: [
userLabel?.label || username,
userLabel?.label ? `（${username}）` : ""
] }),
jsxRuntimeExports.jsx(
lucideReact.Trash2,
{
className: "size-4 cursor-pointer hover:text-primary shrink-0 ml-6",
onClick: handleRemove
}
)
] });
}
function Empty({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "empty",
className: cn$1(
"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
className
),
...props
}
);
}
function EmptyHeader({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "empty-header",
className: cn$1(
"flex max-w-sm flex-col items-center gap-2 text-center",
className
),
...props
}
);
}
const emptyMediaVariants = cva(
"flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-transparent",
icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
}
},
defaultVariants: {
variant: "default"
}
}
);
function EmptyMedia({
className,
variant = "default",
...props
}) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "empty-icon",
"data-variant": variant,
className: cn$1(emptyMediaVariants({ variant, className })),
...props
}
);
}
function EmptyTitle({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "empty-title",
className: cn$1("text-lg font-medium tracking-tight", className),
...props
}
);
}
function EmptyDescription({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "empty-description",
className: cn$1(
"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
className
),
...props
}
);
}
const commentAtom = jotai.atom("");
function __insertCSS(code) {
if (typeof document == "undefined") return;
let head = document.head || document.getElementsByTagName("head")[0];
let style2 = document.createElement("style");
style2.type = "text/css";
head.appendChild(style2);
style2.styleSheet ? style2.styleSheet.cssText = code : style2.appendChild(document.createTextNode(code));
}
const getAsset = (type) => {
switch (type) {
case "success":
return SuccessIcon;
case "info":
return InfoIcon;
case "warning":
return WarningIcon;
case "error":
return ErrorIcon;
default:
return null;
}
};
const bars = Array(12).fill(0);
const Loader = ({ visible, className }) => {
return React.createElement("div", {
className: [
"sonner-loading-wrapper",
className
].filter(Boolean).join(" "),
"data-visible": visible
}, React.createElement("div", {
className: "sonner-spinner"
}, bars.map((_, i2) => React.createElement("div", {
className: "sonner-loading-bar",
key: `spinner-bar-${i2}`
}))));
};
const SuccessIcon = React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
height: "20",
width: "20"
}, React.createElement("path", {
fillRule: "evenodd",
d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
clipRule: "evenodd"
}));
const WarningIcon = React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "currentColor",
height: "20",
width: "20"
}, React.createElement("path", {
fillRule: "evenodd",
d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
clipRule: "evenodd"
}));
const InfoIcon = React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
height: "20",
width: "20"
}, React.createElement("path", {
fillRule: "evenodd",
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
clipRule: "evenodd"
}));
const ErrorIcon = React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
height: "20",
width: "20"
}, React.createElement("path", {
fillRule: "evenodd",
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
clipRule: "evenodd"
}));
const CloseIcon = React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "12",
height: "12",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}, React.createElement("line", {
x1: "18",
y1: "6",
x2: "6",
y2: "18"
}), React.createElement("line", {
x1: "6",
y1: "6",
x2: "18",
y2: "18"
}));
const useIsDocumentHidden = () => {
const [isDocumentHidden, setIsDocumentHidden] = React.useState(document.hidden);
React.useEffect(() => {
const callback = () => {
setIsDocumentHidden(document.hidden);
};
document.addEventListener("visibilitychange", callback);
return () => window.removeEventListener("visibilitychange", callback);
}, []);
return isDocumentHidden;
};
let toastsCounter = 1;
class Observer {
constructor() {
this.subscribe = (subscriber) => {
this.subscribers.push(subscriber);
return () => {
const index2 = this.subscribers.indexOf(subscriber);
this.subscribers.splice(index2, 1);
};
};
this.publish = (data) => {
this.subscribers.forEach((subscriber) => subscriber(data));
};
this.addToast = (data) => {
this.publish(data);
this.toasts = [
...this.toasts,
data
];
};
this.create = (data) => {
var _data_id;
const { message, ...rest } = data;
const id2 = typeof (data == null ? void 0 : data.id) === "number" || ((_data_id = data.id) == null ? void 0 : _data_id.length) > 0 ? data.id : toastsCounter++;
const alreadyExists = this.toasts.find((toast2) => {
return toast2.id === id2;
});
const dismissible = data.dismissible === void 0 ? true : data.dismissible;
if (this.dismissedToasts.has(id2)) {
this.dismissedToasts.delete(id2);
}
if (alreadyExists) {
this.toasts = this.toasts.map((toast2) => {
if (toast2.id === id2) {
this.publish({
...toast2,
...data,
id: id2,
title: message
});
return {
...toast2,
...data,
id: id2,
dismissible,
title: message
};
}
return toast2;
});
} else {
this.addToast({
title: message,
...rest,
dismissible,
id: id2
});
}
return id2;
};
this.dismiss = (id2) => {
if (id2) {
this.dismissedToasts.add(id2);
requestAnimationFrame(() => this.subscribers.forEach((subscriber) => subscriber({
id: id2,
dismiss: true
})));
} else {
this.toasts.forEach((toast2) => {
this.subscribers.forEach((subscriber) => subscriber({
id: toast2.id,
dismiss: true
}));
});
}
return id2;
};
this.message = (message, data) => {
return this.create({
...data,
message
});
};
this.error = (message, data) => {
return this.create({
...data,
message,
type: "error"
});
};
this.success = (message, data) => {
return this.create({
...data,
type: "success",
message
});
};
this.info = (message, data) => {
return this.create({
...data,
type: "info",
message
});
};
this.warning = (message, data) => {
return this.create({
...data,
type: "warning",
message
});
};
this.loading = (message, data) => {
return this.create({
...data,
type: "loading",
message
});
};
this.promise = (promise, data) => {
if (!data) {
return;
}
let id2 = void 0;
if (data.loading !== void 0) {
id2 = this.create({
...data,
promise,
type: "loading",
message: data.loading,
description: typeof data.description !== "function" ? data.description : void 0
});
}
const p = Promise.resolve(promise instanceof Function ? promise() : promise);
let shouldDismiss = id2 !== void 0;
let result;
const originalPromise = p.then(async (response) => {
result = [
"resolve",
response
];
const isReactElementResponse = React.isValidElement(response);
if (isReactElementResponse) {
shouldDismiss = false;
this.create({
id: id2,
type: "default",
message: response
});
} else if (isHttpResponse(response) && !response.ok) {
shouldDismiss = false;
const promiseData = typeof data.error === "function" ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
const description = typeof data.description === "function" ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
const isExtendedResult = typeof promiseData === "object" && !React.isValidElement(promiseData);
const toastSettings = isExtendedResult ? promiseData : {
message: promiseData
};
this.create({
id: id2,
type: "error",
description,
...toastSettings
});
} else if (response instanceof Error) {
shouldDismiss = false;
const promiseData = typeof data.error === "function" ? await data.error(response) : data.error;
const description = typeof data.description === "function" ? await data.description(response) : data.description;
const isExtendedResult = typeof promiseData === "object" && !React.isValidElement(promiseData);
const toastSettings = isExtendedResult ? promiseData : {
message: promiseData
};
this.create({
id: id2,
type: "error",
description,
...toastSettings
});
} else if (data.success !== void 0) {
shouldDismiss = false;
const promiseData = typeof data.success === "function" ? await data.success(response) : data.success;
const description = typeof data.description === "function" ? await data.description(response) : data.description;
const isExtendedResult = typeof promiseData === "object" && !React.isValidElement(promiseData);
const toastSettings = isExtendedResult ? promiseData : {
message: promiseData
};
this.create({
id: id2,
type: "success",
description,
...toastSettings
});
}
}).catch(async (error2) => {
result = [
"reject",
error2
];
if (data.error !== void 0) {
shouldDismiss = false;
const promiseData = typeof data.error === "function" ? await data.error(error2) : data.error;
const description = typeof data.description === "function" ? await data.description(error2) : data.description;
const isExtendedResult = typeof promiseData === "object" && !React.isValidElement(promiseData);
const toastSettings = isExtendedResult ? promiseData : {
message: promiseData
};
this.create({
id: id2,
type: "error",
description,
...toastSettings
});
}
}).finally(() => {
if (shouldDismiss) {
this.dismiss(id2);
id2 = void 0;
}
data.finally == null ? void 0 : data.finally.call(data);
});
const unwrap = () => new Promise((resolve, reject) => originalPromise.then(() => result[0] === "reject" ? reject(result[1]) : resolve(result[1])).catch(reject));
if (typeof id2 !== "string" && typeof id2 !== "number") {
return {
unwrap
};
} else {
return Object.assign(id2, {
unwrap
});
}
};
this.custom = (jsx, data) => {
const id2 = (data == null ? void 0 : data.id) || toastsCounter++;
this.create({
jsx: jsx(id2),
id: id2,
...data
});
return id2;
};
this.getActiveToasts = () => {
return this.toasts.filter((toast2) => !this.dismissedToasts.has(toast2.id));
};
this.subscribers = [];
this.toasts = [];
this.dismissedToasts = new Set();
}
}
const ToastState = new Observer();
const toastFunction = (message, data) => {
const id2 = (data == null ? void 0 : data.id) || toastsCounter++;
ToastState.addToast({
title: message,
...data,
id: id2
});
return id2;
};
const isHttpResponse = (data) => {
return data && typeof data === "object" && "ok" in data && typeof data.ok === "boolean" && "status" in data && typeof data.status === "number";
};
const basicToast = toastFunction;
const getHistory = () => ToastState.toasts;
const getToasts = () => ToastState.getActiveToasts();
const toast = Object.assign(basicToast, {
success: ToastState.success,
info: ToastState.info,
warning: ToastState.warning,
error: ToastState.error,
custom: ToastState.custom,
message: ToastState.message,
promise: ToastState.promise,
dismiss: ToastState.dismiss,
loading: ToastState.loading
}, {
getHistory,
getToasts
});
__insertCSS("[data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-sonner-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-sonner-toaster]{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999;transition:transform .4s ease}@media (hover:none) and (pointer:coarse){[data-sonner-toaster][data-lifted=true]{transform:none}}[data-sonner-toaster][data-x-position=right]{right:var(--offset-right)}[data-sonner-toaster][data-x-position=left]{left:var(--offset-left)}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:var(--offset-top)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--offset-bottom)}[data-sonner-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast][data-styled=true] [data-description]{font-weight:400;line-height:1.4;color:#3f3f3f}[data-rich-colors=true][data-sonner-toast][data-styled=true] [data-description]{color:inherit}[data-sonner-toaster][data-sonner-theme=dark] [data-description]{color:#e8e8e8}[data-sonner-toast][data-styled=true] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast][data-styled=true] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast][data-styled=true] [data-icon]>*{flex-shrink:0}[data-sonner-toast][data-styled=true] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast][data-styled=true] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;font-weight:500;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-sonner-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast][data-styled=true] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast][data-styled=true] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-styled=true] [data-cancel]{background:rgba(255,255,255,.3)}[data-sonner-toast][data-styled=true] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;color:var(--gray12);background:var(--normal-bg);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]::before{content:'';position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]::before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast][data-expanded=true]::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-x-position=right]{right:0}[data-sonner-toast][data-x-position=left]{left:0}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y,0)) translateX(var(--swipe-amount-x,0));transition:none}[data-sonner-toast][data-swiped=true]{user-select:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-sonner-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-sonner-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-sonner-toaster][data-sonner-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 87%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 93%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 84%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-sonner-theme=dark]{--normal-bg:#000;--normal-bg-hover:hsl(0, 0%, 12%);--normal-border:hsl(0, 0%, 20%);--normal-border-hover:hsl(0, 0%, 25%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 43%, 17%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 9%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}");
function isAction(action) {
return action.label !== void 0;
}
const VISIBLE_TOASTS_AMOUNT = 3;
const VIEWPORT_OFFSET = "24px";
const MOBILE_VIEWPORT_OFFSET = "16px";
const TOAST_LIFETIME = 4e3;
const TOAST_WIDTH = 356;
const GAP = 14;
const SWIPE_THRESHOLD = 45;
const TIME_BEFORE_UNMOUNT = 200;
function cn(...classes) {
return classes.filter(Boolean).join(" ");
}
function getDefaultSwipeDirections(position) {
const [y, x2] = position.split("-");
const directions = [];
if (y) {
directions.push(y);
}
if (x2) {
directions.push(x2);
}
return directions;
}
const Toast = (props) => {
var _toast_classNames, _toast_classNames1, _toast_classNames2, _toast_classNames3, _toast_classNames4, _toast_classNames5, _toast_classNames6, _toast_classNames7, _toast_classNames8;
const { invert: ToasterInvert, toast: toast2, unstyled, interacting, setHeights, visibleToasts, heights, index: index2, toasts, expanded, removeToast, defaultRichColors, closeButton: closeButtonFromToaster, style: style2, cancelButtonStyle, actionButtonStyle, className = "", descriptionClassName = "", duration: durationFromToaster, position, gap, expandByDefault, classNames, icons, closeButtonAriaLabel = "Close toast" } = props;
const [swipeDirection, setSwipeDirection] = React.useState(null);
const [swipeOutDirection, setSwipeOutDirection] = React.useState(null);
const [mounted, setMounted] = React.useState(false);
const [removed, setRemoved] = React.useState(false);
const [swiping, setSwiping] = React.useState(false);
const [swipeOut, setSwipeOut] = React.useState(false);
const [isSwiped, setIsSwiped] = React.useState(false);
const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
const [initialHeight, setInitialHeight] = React.useState(0);
const remainingTime = React.useRef(toast2.duration || durationFromToaster || TOAST_LIFETIME);
const dragStartTime = React.useRef(null);
const toastRef = React.useRef(null);
const isFront = index2 === 0;
const isVisible = index2 + 1 <= visibleToasts;
const toastType = toast2.type;
const dismissible = toast2.dismissible !== false;
const toastClassname = toast2.className || "";
const toastDescriptionClassname = toast2.descriptionClassName || "";
const heightIndex = React.useMemo(() => heights.findIndex((height) => height.toastId === toast2.id) || 0, [
heights,
toast2.id
]);
const closeButton = React.useMemo(() => {
var _toast_closeButton;
return (_toast_closeButton = toast2.closeButton) != null ? _toast_closeButton : closeButtonFromToaster;
}, [
toast2.closeButton,
closeButtonFromToaster
]);
const duration = React.useMemo(() => toast2.duration || durationFromToaster || TOAST_LIFETIME, [
toast2.duration,
durationFromToaster
]);
const closeTimerStartTimeRef = React.useRef(0);
const offset2 = React.useRef(0);
const lastCloseTimerStartTimeRef = React.useRef(0);
const pointerStartRef = React.useRef(null);
const [y, x2] = position.split("-");
const toastsHeightBefore = React.useMemo(() => {
return heights.reduce((prev, curr, reducerIndex) => {
if (reducerIndex >= heightIndex) {
return prev;
}
return prev + curr.height;
}, 0);
}, [
heights,
heightIndex
]);
const isDocumentHidden = useIsDocumentHidden();
const invert = toast2.invert || ToasterInvert;
const disabled = toastType === "loading";
offset2.current = React.useMemo(() => heightIndex * gap + toastsHeightBefore, [
heightIndex,
toastsHeightBefore
]);
React.useEffect(() => {
remainingTime.current = duration;
}, [
duration
]);
React.useEffect(() => {
setMounted(true);
}, []);
React.useEffect(() => {
const toastNode = toastRef.current;
if (toastNode) {
const height = toastNode.getBoundingClientRect().height;
setInitialHeight(height);
setHeights((h) => [
{
toastId: toast2.id,
height,
position: toast2.position
},
...h
]);
return () => setHeights((h) => h.filter((height2) => height2.toastId !== toast2.id));
}
}, [
setHeights,
toast2.id
]);
React.useLayoutEffect(() => {
if (!mounted) return;
const toastNode = toastRef.current;
const originalHeight = toastNode.style.height;
toastNode.style.height = "auto";
const newHeight = toastNode.getBoundingClientRect().height;
toastNode.style.height = originalHeight;
setInitialHeight(newHeight);
setHeights((heights2) => {
const alreadyExists = heights2.find((height) => height.toastId === toast2.id);
if (!alreadyExists) {
return [
{
toastId: toast2.id,
height: newHeight,
position: toast2.position
},
...heights2
];
} else {
return heights2.map((height) => height.toastId === toast2.id ? {
...height,
height: newHeight
} : height);
}
});
}, [
mounted,
toast2.title,
toast2.description,
setHeights,
toast2.id,
toast2.jsx,
toast2.action,
toast2.cancel
]);
const deleteToast = React.useCallback(() => {
setRemoved(true);
setOffsetBeforeRemove(offset2.current);
setHeights((h) => h.filter((height) => height.toastId !== toast2.id));
setTimeout(() => {
removeToast(toast2);
}, TIME_BEFORE_UNMOUNT);
}, [
toast2,
removeToast,
setHeights,
offset2
]);
React.useEffect(() => {
if (toast2.promise && toastType === "loading" || toast2.duration === Infinity || toast2.type === "loading") return;
let timeoutId;
const pauseTimer = () => {
if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) {
const elapsedTime = ( new Date()).getTime() - closeTimerStartTimeRef.current;
remainingTime.current = remainingTime.current - elapsedTime;
}
lastCloseTimerStartTimeRef.current = ( new Date()).getTime();
};
const startTimer = () => {
if (remainingTime.current === Infinity) return;
closeTimerStartTimeRef.current = ( new Date()).getTime();
timeoutId = setTimeout(() => {
toast2.onAutoClose == null ? void 0 : toast2.onAutoClose.call(toast2, toast2);
deleteToast();
}, remainingTime.current);
};
if (expanded || interacting || isDocumentHidden) {
pauseTimer();
} else {
startTimer();
}
return () => clearTimeout(timeoutId);
}, [
expanded,
interacting,
toast2,
toastType,
isDocumentHidden,
deleteToast
]);
React.useEffect(() => {
if (toast2.delete) {
deleteToast();
toast2.onDismiss == null ? void 0 : toast2.onDismiss.call(toast2, toast2);
}
}, [
deleteToast,
toast2.delete
]);
function getLoadingIcon() {
var _toast_classNames9;
if (icons == null ? void 0 : icons.loading) {
var _toast_classNames12;
return React.createElement("div", {
className: cn(classNames == null ? void 0 : classNames.loader, toast2 == null ? void 0 : (_toast_classNames12 = toast2.classNames) == null ? void 0 : _toast_classNames12.loader, "sonner-loader"),
"data-visible": toastType === "loading"
}, icons.loading);
}
return React.createElement(Loader, {
className: cn(classNames == null ? void 0 : classNames.loader, toast2 == null ? void 0 : (_toast_classNames9 = toast2.classNames) == null ? void 0 : _toast_classNames9.loader),
visible: toastType === "loading"
});
}
const icon = toast2.icon || (icons == null ? void 0 : icons[toastType]) || getAsset(toastType);
var _toast_richColors, _icons_close;
return React.createElement("li", {
tabIndex: 0,
ref: toastRef,
className: cn(className, toastClassname, classNames == null ? void 0 : classNames.toast, toast2 == null ? void 0 : (_toast_classNames = toast2.classNames) == null ? void 0 : _toast_classNames.toast, classNames == null ? void 0 : classNames.default, classNames == null ? void 0 : classNames[toastType], toast2 == null ? void 0 : (_toast_classNames1 = toast2.classNames) == null ? void 0 : _toast_classNames1[toastType]),
"data-sonner-toast": "",
"data-rich-colors": (_toast_richColors = toast2.richColors) != null ? _toast_richColors : defaultRichColors,
"data-styled": !Boolean(toast2.jsx || toast2.unstyled || unstyled),
"data-mounted": mounted,
"data-promise": Boolean(toast2.promise),
"data-swiped": isSwiped,
"data-removed": removed,
"data-visible": isVisible,
"data-y-position": y,
"data-x-position": x2,
"data-index": index2,
"data-front": isFront,
"data-swiping": swiping,
"data-dismissible": dismissible,
"data-type": toastType,
"data-invert": invert,
"data-swipe-out": swipeOut,
"data-swipe-direction": swipeOutDirection,
"data-expanded": Boolean(expanded || expandByDefault && mounted),
"data-testid": toast2.testId,
style: {
"--index": index2,
"--toasts-before": index2,
"--z-index": toasts.length - index2,
"--offset": `${removed ? offsetBeforeRemove : offset2.current}px`,
"--initial-height": expandByDefault ? "auto" : `${initialHeight}px`,
...style2,
...toast2.style
},
onDragEnd: () => {
setSwiping(false);
setSwipeDirection(null);
pointerStartRef.current = null;
},
onPointerDown: (event) => {
if (event.button === 2) return;
if (disabled || !dismissible) return;
dragStartTime.current = new Date();
setOffsetBeforeRemove(offset2.current);
event.target.setPointerCapture(event.pointerId);
if (event.target.tagName === "BUTTON") return;
setSwiping(true);
pointerStartRef.current = {
x: event.clientX,
y: event.clientY
};
},
onPointerUp: () => {
var _toastRef_current, _toastRef_current1, _dragStartTime_current;
if (swipeOut || !dismissible) return;
pointerStartRef.current = null;
const swipeAmountX = Number(((_toastRef_current = toastRef.current) == null ? void 0 : _toastRef_current.style.getPropertyValue("--swipe-amount-x").replace("px", "")) || 0);
const swipeAmountY = Number(((_toastRef_current1 = toastRef.current) == null ? void 0 : _toastRef_current1.style.getPropertyValue("--swipe-amount-y").replace("px", "")) || 0);
const timeTaken = ( new Date()).getTime() - ((_dragStartTime_current = dragStartTime.current) == null ? void 0 : _dragStartTime_current.getTime());
const swipeAmount = swipeDirection === "x" ? swipeAmountX : swipeAmountY;
const velocity = Math.abs(swipeAmount) / timeTaken;
if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
setOffsetBeforeRemove(offset2.current);
toast2.onDismiss == null ? void 0 : toast2.onDismiss.call(toast2, toast2);
if (swipeDirection === "x") {
setSwipeOutDirection(swipeAmountX > 0 ? "right" : "left");
} else {
setSwipeOutDirection(swipeAmountY > 0 ? "down" : "up");
}
deleteToast();
setSwipeOut(true);
return;
} else {
var _toastRef_current2, _toastRef_current3;
(_toastRef_current2 = toastRef.current) == null ? void 0 : _toastRef_current2.style.setProperty("--swipe-amount-x", `0px`);
(_toastRef_current3 = toastRef.current) == null ? void 0 : _toastRef_current3.style.setProperty("--swipe-amount-y", `0px`);
}
setIsSwiped(false);
setSwiping(false);
setSwipeDirection(null);
},
onPointerMove: (event) => {
var _window_getSelection, _toastRef_current, _toastRef_current1;
if (!pointerStartRef.current || !dismissible) return;
const isHighlighted = ((_window_getSelection = window.getSelection()) == null ? void 0 : _window_getSelection.toString().length) > 0;
if (isHighlighted) return;
const yDelta = event.clientY - pointerStartRef.current.y;
const xDelta = event.clientX - pointerStartRef.current.x;
var _props_swipeDirections;
const swipeDirections = (_props_swipeDirections = props.swipeDirections) != null ? _props_swipeDirections : getDefaultSwipeDirections(position);
if (!swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
setSwipeDirection(Math.abs(xDelta) > Math.abs(yDelta) ? "x" : "y");
}
let swipeAmount = {
x: 0,
y: 0
};
const getDampening = (delta) => {
const factor = Math.abs(delta) / 20;
return 1 / (1.5 + factor);
};
if (swipeDirection === "y") {
if (swipeDirections.includes("top") || swipeDirections.includes("bottom")) {
if (swipeDirections.includes("top") && yDelta < 0 || swipeDirections.includes("bottom") && yDelta > 0) {
swipeAmount.y = yDelta;
} else {
const dampenedDelta = yDelta * getDampening(yDelta);
swipeAmount.y = Math.abs(dampenedDelta) < Math.abs(yDelta) ? dampenedDelta : yDelta;
}
}
} else if (swipeDirection === "x") {
if (swipeDirections.includes("left") || swipeDirections.includes("right")) {
if (swipeDirections.includes("left") && xDelta < 0 || swipeDirections.includes("right") && xDelta > 0) {
swipeAmount.x = xDelta;
} else {
const dampenedDelta = xDelta * getDampening(xDelta);
swipeAmount.x = Math.abs(dampenedDelta) < Math.abs(xDelta) ? dampenedDelta : xDelta;
}
}
}
if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) {
setIsSwiped(true);
}
(_toastRef_current = toastRef.current) == null ? void 0 : _toastRef_current.style.setProperty("--swipe-amount-x", `${swipeAmount.x}px`);
(_toastRef_current1 = toastRef.current) == null ? void 0 : _toastRef_current1.style.setProperty("--swipe-amount-y", `${swipeAmount.y}px`);
}
}, closeButton && !toast2.jsx && toastType !== "loading" ? React.createElement("button", {
"aria-label": closeButtonAriaLabel,
"data-disabled": disabled,
"data-close-button": true,
onClick: disabled || !dismissible ? () => {
} : () => {
deleteToast();
toast2.onDismiss == null ? void 0 : toast2.onDismiss.call(toast2, toast2);
},
className: cn(classNames == null ? void 0 : classNames.closeButton, toast2 == null ? void 0 : (_toast_classNames2 = toast2.classNames) == null ? void 0 : _toast_classNames2.closeButton)
}, (_icons_close = icons == null ? void 0 : icons.close) != null ? _icons_close : CloseIcon) : null, (toastType || toast2.icon || toast2.promise) && toast2.icon !== null && ((icons == null ? void 0 : icons[toastType]) !== null || toast2.icon) ? React.createElement("div", {
"data-icon": "",
className: cn(classNames == null ? void 0 : classNames.icon, toast2 == null ? void 0 : (_toast_classNames3 = toast2.classNames) == null ? void 0 : _toast_classNames3.icon)
}, toast2.promise || toast2.type === "loading" && !toast2.icon ? toast2.icon || getLoadingIcon() : null, toast2.type !== "loading" ? icon : null) : null, React.createElement("div", {
"data-content": "",
className: cn(classNames == null ? void 0 : classNames.content, toast2 == null ? void 0 : (_toast_classNames4 = toast2.classNames) == null ? void 0 : _toast_classNames4.content)
}, React.createElement("div", {
"data-title": "",
className: cn(classNames == null ? void 0 : classNames.title, toast2 == null ? void 0 : (_toast_classNames5 = toast2.classNames) == null ? void 0 : _toast_classNames5.title)
}, toast2.jsx ? toast2.jsx : typeof toast2.title === "function" ? toast2.title() : toast2.title), toast2.description ? React.createElement("div", {
"data-description": "",
className: cn(descriptionClassName, toastDescriptionClassname, classNames == null ? void 0 : classNames.description, toast2 == null ? void 0 : (_toast_classNames6 = toast2.classNames) == null ? void 0 : _toast_classNames6.description)
}, typeof toast2.description === "function" ? toast2.description() : toast2.description) : null), React.isValidElement(toast2.cancel) ? toast2.cancel : toast2.cancel && isAction(toast2.cancel) ? React.createElement("button", {
"data-button": true,
"data-cancel": true,
style: toast2.cancelButtonStyle || cancelButtonStyle,
onClick: (event) => {
if (!isAction(toast2.cancel)) return;
if (!dismissible) return;
toast2.cancel.onClick == null ? void 0 : toast2.cancel.onClick.call(toast2.cancel, event);
deleteToast();
},
className: cn(classNames == null ? void 0 : classNames.cancelButton, toast2 == null ? void 0 : (_toast_classNames7 = toast2.classNames) == null ? void 0 : _toast_classNames7.cancelButton)
}, toast2.cancel.label) : null, React.isValidElement(toast2.action) ? toast2.action : toast2.action && isAction(toast2.action) ? React.createElement("button", {
"data-button": true,
"data-action": true,
style: toast2.actionButtonStyle || actionButtonStyle,
onClick: (event) => {
if (!isAction(toast2.action)) return;
toast2.action.onClick == null ? void 0 : toast2.action.onClick.call(toast2.action, event);
if (event.defaultPrevented) return;
deleteToast();
},
className: cn(classNames == null ? void 0 : classNames.actionButton, toast2 == null ? void 0 : (_toast_classNames8 = toast2.classNames) == null ? void 0 : _toast_classNames8.actionButton)
}, toast2.action.label) : null);
};
function getDocumentDirection() {
if (typeof window === "undefined") return "ltr";
if (typeof document === "undefined") return "ltr";
const dirAttribute = document.documentElement.getAttribute("dir");
if (dirAttribute === "auto" || !dirAttribute) {
return window.getComputedStyle(document.documentElement).direction;
}
return dirAttribute;
}
function assignOffset(defaultOffset2, mobileOffset) {
const styles = {};
[
defaultOffset2,
mobileOffset
].forEach((offset2, index2) => {
const isMobile = index2 === 1;
const prefix2 = isMobile ? "--mobile-offset" : "--offset";
const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
function assignAll(offset3) {
[
"top",
"right",
"bottom",
"left"
].forEach((key) => {
styles[`${prefix2}-${key}`] = typeof offset3 === "number" ? `${offset3}px` : offset3;
});
}
if (typeof offset2 === "number" || typeof offset2 === "string") {
assignAll(offset2);
} else if (typeof offset2 === "object") {
[
"top",
"right",
"bottom",
"left"
].forEach((key) => {
if (offset2[key] === void 0) {
styles[`${prefix2}-${key}`] = defaultValue;
} else {
styles[`${prefix2}-${key}`] = typeof offset2[key] === "number" ? `${offset2[key]}px` : offset2[key];
}
});
} else {
assignAll(defaultValue);
}
});
return styles;
}
const Toaster$1 = React.forwardRef(function Toaster(props, ref) {
const { id: id2, invert, position = "bottom-right", hotkey = [
"altKey",
"KeyT"
], expand, closeButton, className, offset: offset2, mobileOffset, theme = "light", richColors, duration, style: style2, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, containerAriaLabel = "Notifications" } = props;
const [toasts, setToasts] = React.useState([]);
const filteredToasts = React.useMemo(() => {
if (id2) {
return toasts.filter((toast2) => toast2.toasterId === id2);
}
return toasts.filter((toast2) => !toast2.toasterId);
}, [
toasts,
id2
]);
const possiblePositions = React.useMemo(() => {
return Array.from(new Set([
position
].concat(filteredToasts.filter((toast2) => toast2.position).map((toast2) => toast2.position))));
}, [
filteredToasts,
position
]);
const [heights, setHeights] = React.useState([]);
const [expanded, setExpanded] = React.useState(false);
const [interacting, setInteracting] = React.useState(false);
const [actualTheme, setActualTheme] = React.useState(theme !== "system" ? theme : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
const listRef = React.useRef(null);
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
const lastFocusedElementRef = React.useRef(null);
const isFocusWithinRef = React.useRef(false);
const removeToast = React.useCallback((toastToRemove) => {
setToasts((toasts2) => {
var _toasts_find;
if (!((_toasts_find = toasts2.find((toast2) => toast2.id === toastToRemove.id)) == null ? void 0 : _toasts_find.delete)) {
ToastState.dismiss(toastToRemove.id);
}
return toasts2.filter(({ id: id3 }) => id3 !== toastToRemove.id);
});
}, []);
React.useEffect(() => {
return ToastState.subscribe((toast2) => {
if (toast2.dismiss) {
requestAnimationFrame(() => {
setToasts((toasts2) => toasts2.map((t2) => t2.id === toast2.id ? {
...t2,
delete: true
} : t2));
});
return;
}
setTimeout(() => {
ReactDOM.flushSync(() => {
setToasts((toasts2) => {
const indexOfExistingToast = toasts2.findIndex((t2) => t2.id === toast2.id);
if (indexOfExistingToast !== -1) {
return [
...toasts2.slice(0, indexOfExistingToast),
{
...toasts2[indexOfExistingToast],
...toast2
},
...toasts2.slice(indexOfExistingToast + 1)
];
}
return [
toast2,
...toasts2
];
});
});
});
});
}, [
toasts
]);
React.useEffect(() => {
if (theme !== "system") {
setActualTheme(theme);
return;
}
if (theme === "system") {
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
setActualTheme("dark");
} else {
setActualTheme("light");
}
}
if (typeof window === "undefined") return;
const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
try {
darkMediaQuery.addEventListener("change", ({ matches }) => {
if (matches) {
setActualTheme("dark");
} else {
setActualTheme("light");
}
});
} catch (error2) {
darkMediaQuery.addListener(({ matches }) => {
try {
if (matches) {
setActualTheme("dark");
} else {
setActualTheme("light");
}
} catch (e) {
console.error(e);
}
});
}
}, [
theme
]);
React.useEffect(() => {
if (toasts.length <= 1) {
setExpanded(false);
}
}, [
toasts
]);
React.useEffect(() => {
const handleKeyDown = (event) => {
var _listRef_current;
const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
if (isHotkeyPressed) {
var _listRef_current1;
setExpanded(true);
(_listRef_current1 = listRef.current) == null ? void 0 : _listRef_current1.focus();
}
if (event.code === "Escape" && (document.activeElement === listRef.current || ((_listRef_current = listRef.current) == null ? void 0 : _listRef_current.contains(document.activeElement)))) {
setExpanded(false);
}
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [
hotkey
]);
React.useEffect(() => {
if (listRef.current) {
return () => {
if (lastFocusedElementRef.current) {
lastFocusedElementRef.current.focus({
preventScroll: true
});
lastFocusedElementRef.current = null;
isFocusWithinRef.current = false;
}
};
}
}, [
listRef.current
]);
return (
React.createElement("section", {
ref,
"aria-label": `${containerAriaLabel} ${hotkeyLabel}`,
tabIndex: -1,
"aria-live": "polite",
"aria-relevant": "additions text",
"aria-atomic": "false",
suppressHydrationWarning: true
}, possiblePositions.map((position2, index2) => {
var _heights_;
const [y, x2] = position2.split("-");
if (!filteredToasts.length) return null;
return React.createElement("ol", {
key: position2,
dir: dir === "auto" ? getDocumentDirection() : dir,
tabIndex: -1,
ref: listRef,
className,
"data-sonner-toaster": true,
"data-sonner-theme": actualTheme,
"data-y-position": y,
"data-x-position": x2,
style: {
"--front-toast-height": `${((_heights_ = heights[0]) == null ? void 0 : _heights_.height) || 0}px`,
"--width": `${TOAST_WIDTH}px`,
"--gap": `${gap}px`,
...style2,
...assignOffset(offset2, mobileOffset)
},
onBlur: (event) => {
if (isFocusWithinRef.current && !event.currentTarget.contains(event.relatedTarget)) {
isFocusWithinRef.current = false;
if (lastFocusedElementRef.current) {
lastFocusedElementRef.current.focus({
preventScroll: true
});
lastFocusedElementRef.current = null;
}
}
},
onFocus: (event) => {
const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
if (isNotDismissible) return;
if (!isFocusWithinRef.current) {
isFocusWithinRef.current = true;
lastFocusedElementRef.current = event.relatedTarget;
}
},
onMouseEnter: () => setExpanded(true),
onMouseMove: () => setExpanded(true),
onMouseLeave: () => {
if (!interacting) {
setExpanded(false);
}
},
onDragEnd: () => setExpanded(false),
onPointerDown: (event) => {
const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
if (isNotDismissible) return;
setInteracting(true);
},
onPointerUp: () => setInteracting(false)
}, filteredToasts.filter((toast2) => !toast2.position && index2 === 0 || toast2.position === position2).map((toast2, index3) => {
var _toastOptions_duration, _toastOptions_closeButton;
return React.createElement(Toast, {
key: toast2.id,
icons,
index: index3,
toast: toast2,
defaultRichColors: richColors,
duration: (_toastOptions_duration = toastOptions == null ? void 0 : toastOptions.duration) != null ? _toastOptions_duration : duration,
className: toastOptions == null ? void 0 : toastOptions.className,
descriptionClassName: toastOptions == null ? void 0 : toastOptions.descriptionClassName,
invert,
visibleToasts,
closeButton: (_toastOptions_closeButton = toastOptions == null ? void 0 : toastOptions.closeButton) != null ? _toastOptions_closeButton : closeButton,
interacting,
position: position2,
style: toastOptions == null ? void 0 : toastOptions.style,
unstyled: toastOptions == null ? void 0 : toastOptions.unstyled,
classNames: toastOptions == null ? void 0 : toastOptions.classNames,
cancelButtonStyle: toastOptions == null ? void 0 : toastOptions.cancelButtonStyle,
actionButtonStyle: toastOptions == null ? void 0 : toastOptions.actionButtonStyle,
closeButtonAriaLabel: toastOptions == null ? void 0 : toastOptions.closeButtonAriaLabel,
removeToast,
toasts: filteredToasts.filter((t2) => t2.position == toast2.position),
heights: heights.filter((h) => h.position == toast2.position),
setHeights,
expandByDefault: expand,
gap,
expanded,
swipeDirections: props.swipeDirections
});
}));
}))
);
});
function EmojiToolkit() {
return jsxRuntimeExports.jsxs(Popover, { children: [
jsxRuntimeExports.jsx(PopoverTrigger, { children: jsxRuntimeExports.jsx(lucideReact.SmilePlus, { className: "size-6 hover:text-primary" }) }),
jsxRuntimeExports.jsx(
PopoverContent,
{
align: "start",
side: "top",
className: "w-88 p-0 h-80 overflow-hidden",
children: jsxRuntimeExports.jsx(EmojiTabs, {})
}
)
] });
}
function EmojiTabs() {
const [activeTab, setActiveTab] = React.useState();
const { data, loading, error: error2 } = useRequest(fetchEmoji, {
staleTime: 10 * 60 * 1e3,
cacheKey: "emoji"
});
const groupEmoji = React.useMemo(() => {
if (!data) return new Map();
const grouped = new Map();
for (const item of data) {
const list = grouped.get(item.group) ?? [];
list.push(item);
grouped.set(item.group, list);
}
return grouped;
}, [data]);
const setComment = jotai.useSetAtom(commentAtom);
const groups = Array.from(groupEmoji.keys());
const handleClick = (e) => {
setComment((prev) => prev + `[${e.emojiname}]`);
};
React.useEffect(() => {
if (groups.length > 0 && !activeTab) {
setActiveTab(groups[0]);
}
}, [groups, activeTab]);
if (loading) return jsxRuntimeExports.jsx(LoadingContent, {});
if (error2) return jsxRuntimeExports.jsx(ErrorContent, {});
return jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "h-full", children: [
jsxRuntimeExports.jsx(TabsList, { className: "mt-2 ml-2", children: groups.map((group) => jsxRuntimeExports.jsx(TabsTrigger, { value: group, children: group }, group)) }),
groups.map((group) => jsxRuntimeExports.jsx(TabsContent, { value: group, className: "overflow-hidden", children: jsxRuntimeExports.jsx(ScrollArea, { className: "h-full p-2 pt-0", children: jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-7 gap-2 p-2 justify-items-center items-center", children: [
group === "test" && jsxRuntimeExports.jsx(UploadButton, {}),
groupEmoji.get(group)?.map((item) => jsxRuntimeExports.jsx(
EmojiImage,
{
className: "hover:scale-110 object-contain cursor-pointer",
imgKey: item.emojiname,
onClick: () => handleClick(item)
},
item.emojiname
))
] }) }) }))
] });
}
function LoadingContent() {
return jsxRuntimeExports.jsx("div", { className: "h-full flex items-center justify-center text-sm text-muted-foreground", children: "加载中..." });
}
function ErrorContent() {
return jsxRuntimeExports.jsx(Empty, { className: "h-full", children: jsxRuntimeExports.jsxs(EmptyHeader, { children: [
jsxRuntimeExports.jsx(EmptyMedia, { children: jsxRuntimeExports.jsx(lucideReact.TriangleAlert, { className: "size-10" }) }),
jsxRuntimeExports.jsx(EmptyTitle, { children: "图片获取失败" }),
jsxRuntimeExports.jsx(EmptyDescription, { children: "具体错误信息请联系源站长。" })
] }) });
}
const loadingPlaceholder = jsxRuntimeExports.jsx(LoadingIcon, { className: "size-8" });
const errorFallback = jsxRuntimeExports.jsx(SvgImageError, { className: "size-8" });
function EmojiImage({
imgKey,
onClick,
...rest
}) {
const { url, isError } = useImageUrl(imgKey);
if (isError) return errorFallback;
return jsxRuntimeExports.jsx(
Image,
{
src: url,
loadingPlaceholder,
errorFallback,
alt: imgKey,
loading: "lazy",
onClick,
...rest
}
);
}
const imageMaxSize = Number("2");
function UploadButton() {
const fileInputRef = React.useRef(null);
const handleClick = () => {
fileInputRef.current?.click();
};
const handleFileChange = (e) => {
const file = e.target.files?.[0];
if (!file) return;
const validImageTypes = [
"image/jpeg",
"image/png",
"image/gif",
"image/webp"
];
if (!validImageTypes.includes(file.type)) {
toast.error("只支持 JPG, PNG, GIF, WEBP 格式的图片");
return;
}
const maxSize = imageMaxSize * 1024 * 1024;
if (file.size > maxSize) {
toast.error(`图片大小不能超过 ${imageMaxSize}MB`);
return;
}
toast.promise(
fetchStsToken().then((token) => uploadFile(file, token)).then((cosUrl) => submitEmojiUrl(cosUrl)).then((res) => {
if (!res.success) {
throw new Error(res.msg);
}
return res;
}),
{
loading: "图片上传中！请耐心等待。",
success: "表情上传成功，请耐心等待审核结果。",
error(e2) {
return {
message: "图片上传失败！",
description: e2.message || "未知错误"
};
}
}
);
};
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(Button, { variant: "outline", size: "icon", onClick: handleClick, children: jsxRuntimeExports.jsx(lucideReact.Plus, {}) }),
jsxRuntimeExports.jsx(
"input",
{
ref: fileInputRef,
type: "file",
accept: "image/*",
className: "hidden",
onChange: handleFileChange
}
)
] });
}
function LabelTooltik() {
const [userLabels, dispatch] = jotai.useAtom(userLabelsAtom);
const handleRemove = (id2) => {
dispatch({ type: "remove", id: id2 });
};
const handleClear = () => {
dispatch({ type: "clear" });
};
return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Tooltip, { children: jsxRuntimeExports.jsxs(Popover, { children: [
jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: jsxRuntimeExports.jsx(lucideReact.Flag, { className: "size-6 hover:text-primary" }) }) }),
jsxRuntimeExports.jsx(TooltipContent, { children: "我的标记" }),
jsxRuntimeExports.jsx(
PopoverContent,
{
align: "end",
side: "top",
className: "w-88 p-0 py-3 h-80 overflow-hidden",
children: jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-2 h-full overflow-hidden", children: userLabels.length > 0 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(ScrollArea, { className: "px-3 flex-1 min-h-0", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 overflow-hidden h-full", children: userLabels.map((u, i2) => jsxRuntimeExports.jsxs(
"div",
{
className: "p-1 flex items-center justify-between hover:bg-secondary rounded-sm gap-1",
children: [
jsxRuntimeExports.jsxs("span", { className: "text-sm", children: [
i2 + 1,
"."
] }),
jsxRuntimeExports.jsxs("span", { className: "text-sm truncate flex-1", children: [
u.label,
"（",
u.username,
"）"
] }),
jsxRuntimeExports.jsx(
lucideReact.Trash2,
{
className: "size-4 cursor-pointer hover:text-primary shrink-0 ml-6",
onClick: () => handleRemove(u.id)
}
)
]
},
u.id
)) }) }),
jsxRuntimeExports.jsx("div", { className: "text-center", children: jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
className: "text",
size: "sm",
onClick: handleClear,
children: "清空标记"
}
) })
] }) : jsxRuntimeExports.jsx("span", { className: "text-sm text-muted-foreground absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: "--- 暂未标记用户 ---" }) })
}
)
] }) }) });
}
function ChatTooltik() {
return jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
jsxRuntimeExports.jsx(EmojiToolkit, {}),
jsxRuntimeExports.jsx(BannedToolkit, {}),
jsxRuntimeExports.jsx(LabelTooltik, {})
] });
}
function ChatAction() {
return jsxRuntimeExports.jsx("div", { className: "border-t border-border px-4 py-3", children: jsxRuntimeExports.jsx(ChatTooltik, {}) });
}
function Textarea({ className, ...props }) {
return jsxRuntimeExports.jsx(
"textarea",
{
"data-slot": "textarea",
className: cn$1(
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
),
...props
}
);
}
function CommentInput({ sendMessage }) {
const [text, setText] = jotai.useAtom(commentAtom);
const handleChange = (e) => {
setText(e.target.value);
};
const handleKeyDown = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
e.preventDefault();
e.currentTarget.form?.requestSubmit();
}
};
const handleSubmit = React.useCallback(
debounce(
(text2) => {
sendMessage(text2);
setText("");
},
2e3,
true
),
[sendMessage]
);
return jsxRuntimeExports.jsx("div", { className: "px-4 pb-4", children: jsxRuntimeExports.jsxs(
"form",
{
className: "group grid grid-cols-[1fr_auto_auto] border shadow-sm rounded-lg focus-within:border-primary",
onSubmit: (e) => {
e.preventDefault();
handleSubmit(text);
},
children: [
jsxRuntimeExports.jsx(
Textarea,
{
value: text,
name: "comment",
placeholder: "发条评论吧～",
className: "resize-none border-0 focus-visible:ring-0 shadow-none max-h-20 min-h-5",
onChange: handleChange,
onKeyDown: handleKeyDown
}
),
jsxRuntimeExports.jsx(
Separator,
{
orientation: "vertical",
className: "group-focus-within:bg-primary"
}
),
jsxRuntimeExports.jsx(
Button,
{
variant: "link",
className: "self-center hover:no-underline focus-visible:ring-0 shadow-none p-0 mx-4",
type: "submit",
disabled: text.length <= 0,
children: "发送"
}
)
]
}
) });
}
function Card({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "card",
className: cn$1(
"bg-card text-card-foreground flex flex-col gap-2 rounded-xl border py-3.5 shadow-sm",
className
),
...props
}
);
}
function CardHeader({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "card-header",
className: cn$1(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-3.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
),
...props
}
);
}
function CardContent({ className, ...props }) {
return jsxRuntimeExports.jsx(
"div",
{
"data-slot": "card-content",
className: cn$1("px-3.5", className),
...props
}
);
}
function ChatHistoryPanel() {
const { messages, onlineCount, isConnected, sendMessage } = useChatWebSocket("ws://175.178.29.106:8000/ws");
return jsxRuntimeExports.jsxs(Card, { className: "w-96 shadow-lg flex flex-col overflow-hidden py-0 gap-0 relative", children: [
jsxRuntimeExports.jsx(OnlineCount, { count: onlineCount }),
jsxRuntimeExports.jsx(ChatHistory, { messages, isConnected }),
jsxRuntimeExports.jsx(ChatAction, {}),
jsxRuntimeExports.jsx(CommentInput, { sendMessage })
] });
}
const kuaishouLogo = "data:image/svg+xml,%3csvg%20viewBox='0%200%20171%20195.87'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath%20class='cls-1'%20d='M131.08,13.06a39.51,39.51,0,0,0-27,10.59A46.22,46.22,0,1,0,99,76.09a39.68,39.68,0,1,0,32.07-63ZM63.78,73.83A27.63,27.63,0,1,1,91.41,46.21,27.63,27.63,0,0,1,63.78,73.83Zm67.3,0a21.1,21.1,0,1,1,21.1-21.1A21.1,21.1,0,0,1,131.08,73.83Z'%20fill='%23ff4906'/%3e%3cpath%20class='cls-2'%20d='M136.61,100.45H86.38a34.17,34.17,0,0,0-32.53,23.74L24.06,109.11A16.57,16.57,0,0,0,0,123.9v48.64a16.58,16.58,0,0,0,24,14.82l29.93-15a34.16,34.16,0,0,0,32.45,23.51h50.23a34.15,34.15,0,0,0,34.15-34.15V134.6A34.15,34.15,0,0,0,136.61,100.45ZM24.07,167.7a4.53,4.53,0,0,1-6-2,4.59,4.59,0,0,1-.49-2.06V133.05a4.52,4.52,0,0,1,6.55-4l28.1,14.11v10.13L24.15,167.66Zm129.11-6.48v.28a17.07,17.07,0,0,1-17.07,16.79H86.6a17.07,17.07,0,0,1-16.79-17.07v-26.4A17.08,17.08,0,0,1,86.89,118h49.5a17.07,17.07,0,0,1,16.79,17.07Z'%20fill='%23ff4906'%20fill-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e";
const douyinLogo = "data:image/svg+xml,%3csvg%20width='200px'%20height='200'%20viewBox='0%200%2035%2040'%20fill='none'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='g998'%20transform='matrix(1.1587615,0,0,1.1587615,5.6580122e-4,0)'%3e%3cpath%20d='m%2011.639644,13.3091%20v%20-1.3108%20c%20-0.4554,-0.0547%20-0.9108,-0.0911%20-1.3844,-0.0911%20-5.6470199,0%20-10.255732281,4.5881%20-10.255732281,10.2503%200,3.4592%201.730542381,6.5361%204.371892381,8.3931%20-1.71232,-1.8388%20-2.75064,-4.2785%20-2.75064,-6.973%200.01821,-5.5894%204.48119,-10.141%2010.0188799,-10.2685%20z'%20fill='%2300faf0'%20/%3e%3cpath%20d='m%2011.876844,28.22%20c%202.5139,0%204.5723,-2.0027%204.6634,-4.497%20V%201.4201%20h%204.0805%20C%2020.529644,0.96494%2020.493144,0.491574%2020.493144,0%20h%20-5.5741%20v%2022.3029%20c%20-0.0911,2.4943%20-2.1496,4.497%20-4.6634,4.497%20-0.7833099,0%20-1.5301799,-0.2003%20-2.1677499,-0.5462%200.85616,1.2016%202.2405499,1.9663%203.7889499,1.9663%20z'%20fill='%2300faf0'/%3e%3cpath%20d='M%2028.251644,8.99427%20V%207.75624%20c%20-1.5483,0%20-3.0056,-0.45516%20-4.2261,-1.25624%201.0929,1.23804%202.5685,2.13014%204.2261,2.49427%20z'%20fill='%2300faf0'%20/%3e%3cpath%20d='m%2024.045144,6.5005%20c%20-1.184,-1.36548%20-1.9126,-3.13151%20-1.9126,-5.0796%20h%20-1.4938%20c%200.4008,2.11195%201.6577,3.9326%203.4064,5.0796%20z'%20fill='%23ff0050'%20/%3e%3cpath%20d='m%2010.255344,17.4597%20c%20-2.5867399,0%20-4.6816099,2.0937%20-4.6816099,4.679%200,1.8025%201.02011,3.35%202.51384,4.1329%20-0.54649,-0.7647%20-0.8926,-1.7114%20-0.8926,-2.731%200,-2.5853%202.09488,-4.679%204.6815699,-4.679%200.4736,0%200.9473,0.0728%201.3845,0.2184%20v%20-5.6804%20c%20-0.4554,-0.0546%20-0.9109,-0.091%20-1.3845,-0.091%20-0.0728,0%20-0.1639,0%20-0.2368,0%20v%204.3695%20c%20-0.4372,-0.1456%20-0.8926,-0.2184%20-1.3844,-0.2184%20z'%20fill='%23ff0050'%20/%3e%3cpath%20d='m%2028.252544,8.99414%20v%204.33316%20c%20-2.8963,0%20-5.5559,-0.9285%20-7.7419,-2.4943%20v%2011.3062%20c%200,5.644%20-4.5905,10.2502%20-10.2557,10.2502%20-2.1859699,0%20-4.2079799,-0.6918%20-5.8656599,-1.857%201.87627,2.0027%204.53585,3.2771%207.5050599,3.2771%205.6471,0%2010.2558,-4.588%2010.2558,-10.2502%20V%2012.2531%20c%202.1859,1.5658%204.8637,2.4943%207.7419,2.4943%20V%209.17621%20c%20-0.5647,-0.01821%20-1.1112,-0.07283%20-1.6395,-0.18207%20z'%20fill='%23ff0050'%20/%3e%3cpath%20d='M%2020.509644,22.1398%20V%2010.8336%20c%202.1859,1.5658%204.8637,2.4943%207.7419,2.4943%20V%208.99477%20c%20-1.6759,-0.36412%20-3.1332,-1.25623%20-4.2262,-2.49427%20-1.7488,-1.1288%20-3.0057,-2.94945%20-3.3882,-5.0796%20h%20-4.0805%20v%2022.3029%20c%20-0.0911,2.4943%20-2.1495,4.497%20-4.6633,4.497%20-1.5666,0%20-2.9510799,-0.7647%20-3.7890299,-1.9481%20-1.49373,-0.7829%20-2.51384,-2.3486%20-2.51384,-4.1329%200,-2.5853%202.09487,-4.679%204.6815699,-4.679%200.4736,0%200.9473,0.0728%201.3844,0.2184%20v%20-4.3695%20c%20-5.5376999,0.1274%20-10.0006799,4.6791%20-10.0006799,10.232%200,2.6946%201.03832,5.1524%202.75065,6.9731%201.65768,1.1652%203.69791,1.8571%205.8656299,1.8571%205.6288,0.0182%2010.2376,-4.5881%2010.2376,-10.2321%20z'%20fill='%23111111'%20/%3e%3c/g%3e%3c/svg%3e";
const bilibiliLogo = "data:image/svg+xml,%3csvg%20viewBox='0%200%202240%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='140'%20height='64'%3e%3cpath%20d='M2079.810048%20913.566175c-10.01309%200-18.554608%200.799768-26.936172-0.159954-16.987063-1.951433-33.974126-1.567544-50.99318-2.079395-10.972811-0.287916-10.652904-0.287916-11.580634-10.90883-2.71921-32.406582-5.694345-64.781173-8.605499-97.155764-2.527266-28.439735-4.926568-56.91146-7.70976-85.319204-2.527266-26.040432-5.566382-52.016883-8.317583-78.025324-2.623238-24.440897-5.054531-48.913784-7.77374-73.322691a12681.114551%2012681.114551%200%200%200-10.684895-92.133223c-3.295042-27.128116-6.558094-54.320213-10.205034-81.416339a20559.272961%2020559.272961%200%200%200-17.530905-125.979387c-6.398141-44.723002-14.075909-89.22207-22.105576-133.657156-1.439582-7.965685-1.247637-8.253601%206.36615-9.533229%2031.670796-5.406429%2063.501545-10.01309%2095.716183-9.309295%203.486987%200.095972%207.005964%200.159954%2010.460959%200.607823%205.662354%200.703795%208.605499%203.454996%208.925406%2010.045081%201.119675%2022.969325%202.71921%2045.938649%204.414717%2068.875983%202.71921%2037.589076%205.662354%2075.178151%208.477537%20112.735236%201.791479%2024.184971%203.327033%2048.305961%205.150503%2072.426951%202.911154%2038.772732%205.982261%2077.513473%208.925406%20116.286205%201.791479%2023.705111%203.359024%2047.474203%205.182494%2071.179313%202.783191%2034.805885%205.822308%2069.579778%208.637489%20104.353672%201.791479%2022.137566%203.391014%2044.307123%205.278466%2066.44469%202.783191%2032.79047%205.790317%2065.580941%208.63749%2098.371411%202.143377%2025.592562%204.09481%2051.249106%206.270178%2077.673426zM853.670395%20114.918282c4.638652%200%2011.644616-0.511851%2018.554607%200.127963%208.797443%200.799768%2010.49295%203.071107%2011.036793%2011.900541%202.527266%2040.372267%204.894578%2080.776524%207.581796%20121.180782%202.943145%2043.571337%206.174206%2087.078693%209.405267%20130.586048%202.975135%2039.956388%205.950271%2079.912775%209.149341%20119.869163%203.486987%2043.891244%207.357862%2087.718507%2010.876839%20131.609751%202.655228%2033.622229%204.926568%2067.244457%207.677768%20100.898677%202.623238%2031.222926%205.694345%2062.38187%208.509527%2093.572805%202.399303%2026.8402%204.830596%2053.71239%207.165918%2080.58458%200.735786%208.509527%200.127963%209.053369-9.053369%208.829434-24.025018-0.575833-47.922073-3.391014-71.947091-2.71921-5.502401%200.159954-7.101936-2.367312-8.029666-7.581796-1.983424-11.356699-1.663517-22.905343-2.879163-34.390006-3.295042-30.359177-5.182494-60.846317-7.965685-91.269474-2.495275-27.639967-5.502401-55.215953-8.349574-82.82393-2.527266-25.240664-5.02254-50.481329-7.709759-75.753984-2.687219-24.792795-5.534392-49.61758-8.349573-74.442365-2.591247-22.841362-5.118512-45.682723-7.869713-68.524085-4.062819-33.462275-8.093648-66.92455-12.508365-100.322844-4.062819-30.647093-8.66948-61.198214-12.988225-91.813317-5.886289-41.587914-12.508365-83.079855-19.834236-124.411842a1393.96288%201393.96288%200%200%200-5.310457-28.023856c-0.959721-4.702633-0.095972-7.421843%205.278466-8.157629%2014.139891-1.887451%2028.24779-4.830596%2042.451663-6.206196%2014.203872-1.311619%2028.407744-3.966847%2045.106891-2.71921z%20m1006.075609%20403.33878c27.064134%200%2027.703949%200.191944%2032.054684%2024.536869%205.342447%2030.03927%209.08536%2060.334465%2012.636328%2090.62966%203.742912%2032.278619%207.517815%2064.557238%2010.972811%2096.867848%202.783191%2026.008441%205.118512%2052.080864%207.74175%2078.089305%202.7512%2027.256079%205.662354%2054.416185%208.509527%2081.640274%201.567544%2015.387528%203.039117%2030.775056%204.798605%2046.130593%200.511851%204.446708-0.831758%206.81402-5.214485%207.325871-9.245313%201.055693-18.426645%202.27134-27.639967%203.263052-16.891091%201.82347-33.814173%203.614949-50.737254%205.182493-8.733462%200.799768-9.309294%200.319907-10.940821-8.125638-14.843686-76.617733-29.719363-153.171485-44.435086-229.821208-9.789155-50.961189-19.322384-101.95437-28.919595-152.915559a805.525894%20805.525894%200%200%201-3.582959-21.081873c-0.639814-4.030829%200.44787-6.622075%205.022541-7.70976%2030.48714-7.133927%2061.294186-12.636328%2089.733921-14.011927z%20m-1137.077537%200c28.951586%200%2028.823623%200.095972%2033.302322%2026.360339%206.909992%2040.660183%2011.804569%2081.544301%2016.187295%20122.556382%204.286754%2039.796434%208.957397%2079.560878%2013.148179%20119.357311%202.847173%2027.224088%205.086522%2054.512157%207.74175%2081.704255%201.887451%2019.354375%204.126801%2038.644769%206.174206%2057.967153%200.255926%202.367312%200.383888%204.734624%200.543842%207.133927%200.415879%209.469248%200%2010.237025-9.117351%2011.164755-18.074747%201.887451-36.181485%203.454996-54.256232%205.246476-6.558094%200.639814-13.084197%201.599535-19.57831%202.239349-8.63749%200.799768-8.925406%200.767777-10.620913-7.965685-6.078234-30.679084-11.964523-61.422149-17.914793-92.101233-14.267853-73.898523-28.69566-147.733065-42.867542-221.631589-5.662354-29.559409-10.524941-59.246781-16.091323-88.838181-1.023702-5.406429-0.255926-7.933694%205.342447-9.245313%2030.199223-7.037955%2060.590391-12.540355%2088.006423-13.947946z%20m382.128944%20309.861946v124.027954c0%201.183656-0.127963%202.399303%200.03199%203.582959%200.607823%206.014252-1.599535%208.66948-7.805731%208.413555-8.157629-0.351898-16.251277-0.127963-24.408906%200.063981-17.019054%200.319907-34.070098-0.351898-51.057162%201.599535-9.405267%201.087684-9.213322%200.511851-10.141052-9.405266-2.783191-31.222926-5.822308-62.413861-8.669481-93.636787-2.623238-28.823623-4.99055-57.711228-7.677768-86.534851-2.71921-29.655381-5.758326-59.214791-8.509527-88.838181-1.887451-19.770254-3.550968-39.508518-5.214485-59.278772-2.175368-25.720525-4.190782-51.409059-6.462122-77.129585-0.959721-10.844848-0.159954-12.380402%2010.588923-13.500076a531.877423%20531.877423%200%200%201%2083.527724-2.591247c6.941982%200.383888%2013.851974%201.727498%2020.570022%203.359024%208.477536%202.015414%209.405267%203.263052%209.853137%2012.124476%200.92773%2017.850812%201.855461%2035.701624%202.335321%2053.584427%200.543842%2019.866226%200.095972%2039.764443%200.831758%2059.63067%201.855461%2054.800074%201.567544%20109.664129%202.207359%20164.528184z%20m1134.806197%205.630364v117.437869c0%201.983424-0.063981%203.966847%200.03199%205.982262%200.415879%205.150503-1.983424%206.973973-6.878001%206.941982-12.028504-0.095972-24.025018%200-36.021531%200.159954-13.564058%200.127963-27.096125%200.063981-40.628192%201.535553-8.925406%201.023702-8.989387%200.351898-9.789155-8.509527-3.678931-40.660183-7.549806-81.320366-11.260728-122.04453-3.391014-37.525094-6.526103-75.082179-9.981099-112.639265-3.550968-38.740741-7.421843-77.38551-10.90883-116.09426-1.727498-19.386366-3.16708-38.772732-4.606661-58.159097-0.575833-8.445546%200.351898-9.949109%209.885127-10.716886%2016.571184-1.311619%2033.078387-3.550968%2049.777534-3.263051%2016.635165%200.319907%2033.302322-0.607823%2049.841515%202.559256%2014.011928%202.687219%2014.715723%203.486987%2015.547481%2018.458635%202.399303%2044.051198%201.663517%2088.230358%203.231061%20132.281556%201.599535%2046.89837%200.479861%2093.79674%201.759489%20146.069549zM1831.498213%20305.135c9.789155%200.575833%2017.498914%200.095972%2025.176683%201.791479%204.894578%201.119675%207.357862%203.327033%207.837723%208.573509%202.303331%2025.240664%204.798605%2050.51332%207.32587%2075.785975%202.015414%2020.50604%204.158791%2041.012081%206.238188%2061.518121l0.191944%201.183656c1.663517%2012.924244%201.279628%2013.276142-11.292718%2013.979937-11.196746%200.607823-22.361501%201.599535-33.558247%202.27134-7.357862%200.44787-9.693183%201.695507-10.90883-9.021378-4.190782-37.813011-9.053369-75.530049-13.692021-113.311069a1185.0316%201185.0316%200%200%200-4.286754-31.798759c-0.92773-5.982261%201.407591-9.277304%207.005964-9.757164%207.357862-0.671805%2014.715723-0.863749%2019.962198-1.215647z%20m-1133.398606%200.159954c7.549806%200.415879%2015.323547-0.159954%2022.937334%201.599535%204.350736%200.991712%206.558094%202.815182%206.973973%207.773741%200.92773%2011.83656%202.7512%2023.641129%203.870875%2035.477689%203.550968%2036.309448%206.909992%2072.650886%2010.237025%20108.992324%200.703795%207.901704%200.543842%208.061657-6.84601%208.605499-13.116188%200.959721-26.264367%201.919442-39.412546%202.463284-7.645778%200.351898-8.605499-0.575833-9.56522-8.381564-3.327033-26.744227-6.462122-53.520446-9.661192-80.296664-2.591247-22.073585-4.766615-44.14717-7.901704-66.156773-0.863749-6.078234%201.119675-7.74175%205.982262-8.733462%207.709759-1.567544%2015.451509-1.055693%2023.385203-1.343609z%20m399.147998%20100.002936c0%2023.001315%200.063981%2045.97064-0.031991%2069.003946%200%2010.332997-0.127963%2010.396978-10.396978%2010.269016a324.289753%20324.289753%200%200%201-36.981252-1.919443c-7.933694-0.991712-8.093648-0.735786-8.317583-9.149341-0.799768-28.119828-1.631526-56.239655-2.207359-84.359483-0.415879-19.034468-0.639814-38.004955-1.791479-57.039422-0.607823-9.821146-0.063981-9.917118%209.373276-10.045081%2013.915956-0.159954%2027.799921%200.479861%2041.619904%202.591247%208.317583%201.279628%208.701471%201.279628%208.733462%2010.49295%200.063981%2023.385204%200.063981%2046.770407%200.063981%2070.187602h-0.063981z%20m1135.38203%200.607824c0%2023.033306%200.063981%2046.034621-0.031991%2069.035936%200%209.661192-0.159954%209.725174-9.853137%209.661192a505.32514%20505.32514%200%200%201-38.132917-1.791479c-6.302168-0.479861-8.157629-3.135089-7.74175-8.861425%200.063981-0.799768%200-1.599535%200-2.399302-0.959721-44.403095-1.919442-88.7742-2.815182-133.177296-0.031991-2.367312-0.159954-4.734624-0.063982-7.133926%200.127963-8.957397%200.159954-9.181332%209.149341-9.117351%2012.380402%200.063981%2024.664832%200.703795%2037.013243%201.919442%2015.067621%201.503563%2012.412393%203.359024%2012.476375%2015.259566%200.063981%2022.169557%200.031991%2044.403095%200%2066.604643z%20m-1565.593%2054.000306c0.287916%2012.636328%200.287916%2012.604337-11.804569%2015.547481-8.221611%202.015414-16.443221%204.222773-24.728813%206.046243-7.069945%201.599535-8.317583%200.703795-9.53323-6.238187-8.445546-47.090314-16.8591-94.212619-25.240664-141.334924-1.695507-9.757164-1.247637-10.364988%208.349573-12.060495%2011.804569-2.079396%2023.577148-4.126801%2035.381717-5.950271%207.517815-1.183656%208.477536-0.767777%209.9811%207.517815%202.975135%2016.731138%205.790317%2033.526256%207.997675%2050.385357%203.423005%2026.680246%206.238187%2053.456464%209.309295%2080.168701%200.255926%201.951433%200.191944%203.966847%200.287916%205.91828z%20m1064.138735-136.696273c15.451509-2.527266%2031.030982-5.086522%2046.610454-7.549806%205.598373-0.863749%207.29388%202.655228%208.029666%207.645778%202.655228%2018.426645%205.982261%2036.725327%208.157629%2055.183962%203.19907%2026.744227%207.581797%2053.360492%208.413555%2080.328655%200.063981%202.7512%200.031991%205.566382%200.095972%208.317583%200.159954%204.286754-1.983424%206.494113-5.950271%207.421843-10.556932%202.367312-21.113864%204.734624-31.638805%207.261889-5.054531%201.215647-6.750038-0.92773-7.581796-5.854298-3.16708-18.746552-6.81402-37.397131-10.045081-56.079702-5.47041-30.775056-10.780867-61.582103-16.091323-92.38915-0.127963-1.119675%200-2.303331%200-4.286754z%20m-710.64147%20108.032603c-0.44787%2016.37924%200.543842%2030.647093-1.695507%2044.914947-0.671805%204.510689-1.983424%207.421843-6.846011%207.837722-10.428969%200.863749-20.825947%201.695507-31.190935%202.7512-5.02254%200.543842-6.430131-1.631526-7.261889-6.558094-2.335321-14.55577-1.919442-29.303484-3.327033-43.923234-2.655228-27.607976-3.774903-55.407897-5.566383-83.111846-0.44787-6.750038-1.119675-13.436095-1.663516-20.186134-0.287916-3.774903%201.215647-5.886289%205.246475-6.046242%2013.500077-0.543842%2026.936172-3.007126%2040.50023-2.527266%207.933694%200.287916%208.605499%200.799768%209.181331%208.797443%200.351898%205.534392%200.255926%2011.132765%200.383889%2016.699147l2.239349%2081.352357z%20m1134.902169-15.867388c0%2019.066459%200.223935%2038.132918-0.031991%2057.199376-0.159954%209.917118-1.279628%2010.780867-10.652904%2011.644616-9.277304%200.863749-18.490626%201.567544-27.735939%202.559256-5.214485%200.543842-7.645778-0.991712-7.965685-6.973973-1.34361-25.336637-3.16708-50.673273-4.926568-75.977919-1.3756-20.985901-2.943145-41.939811-4.414717-62.893722-0.159954-2.399303-0.031991-4.798605-0.191944-7.165917-0.223935-4.190782%201.055693-6.654066%205.758326-6.81402%2013.116188-0.44787%2026.136404-2.975135%2039.348564-2.495274%208.061657%200.287916%208.18962%200.415879%208.797444%208.797443%201.951433%2027.32006%202.143377%2054.704102%202.015414%2082.120134zM628.295894%20756.171918c16.571184%2018.234701%2017.402942%2039.828425%2011.932532%2062.413861-5.502401%2022.585436-18.042756%2041.204025-33.23834%2057.903171-25.49659%2027.895893-56.303637%2048.497905-89.062116%2065.99682-56.399609%2030.135242-116.190232%2050.161422-178.572103%2061.997982-44.882956%208.477536-90.053828%2015.00364-135.704561%2017.498914-13.915956%200.767777-27.799921%201.407591-41.715876%201.311619-10.077071%200-20.186133%200.287916-30.231214-0.063981-8.541518-0.319907-9.789155-1.791479-10.49295-10.716886-2.591247-32.022693-4.798605-64.077378-7.645778-96.100071-3.327033-37.109215-7.229899-74.18644-10.812858-111.295654-2.623238-26.8402-4.894578-53.744381-7.773741-80.520599-3.327033-31.542833-7.069945-63.021684-10.716885-94.564517-3.327033-29.111539-6.526103-58.28706-10.045081-87.430591-3.934856-32.278619-7.997676-64.493257-12.31642-96.707894a8228.968456%208228.968456%200%200%200-13.212161-92.996973%205984.500754%205984.500754%200%200%200-24.312934-152.627642%203243.825263%203243.825263%200%200%200-23.67312-123.740038c-1.151665-5.502401%200.511851-7.709759%205.342448-9.725174C52.335283%2047.609843%2098.465876%2028.063524%20144.724432%208.77313c8.605499-3.582959%2017.434933-6.590085%2026.584274-8.285592%206.334159-1.183656%207.965685%200.127963%207.773741%206.494113-0.479861%2016.283268%200.191944%2032.630517-1.407591%2048.849803a161.393095%20161.393095%200%200%200-0.639814%2013.084197c-0.735786%2058.383032-1.439582%20116.798056%200.095972%20175.213079%201.34361%2051.185124%204.030829%20102.338258%207.005964%20153.491392%202.335321%2040.372267%205.694345%2080.744534%209.149341%20121.052819%203.391014%2039.508518%207.517815%2078.953054%2011.38869%20118.461572%200.735786%207.517815%201.407591%208.221611%209.949108%207.069945a381.329176%20381.329176%200%200%201%2050.833227-4.190782c52.880632-0.127963%20104.897514%207.133927%20156.338564%2019.322384%2045.010919%2010.684895%2088.806191%2024.920757%20130.777993%2044.818975%2020.793957%209.853136%2040.692174%2021.241827%2058.830902%2035.701624%206.174206%204.862587%2011.676606%2010.46096%2016.891091%2016.315259z%20m1126.840512-9.597211c20.47405%2017.946784%2027.927883%2039.924397%2022.105576%2067.116494-4.830596%2022.425483-15.771416%2041.268006-30.359177%2058.127107-23.417194%2027.096125-51.856929%2047.698138-82.631985%2064.909136-60.334465%2033.782182-124.603787%2055.727804-192.168151%2068.396122a1151.089465%201151.089465%200%200%201-111.455609%2015.547481c-21.177845%201.82347-42.451662%204.09481-66.220754%202.623238h-27.76793c-5.406429%200-8.477536-1.695507-8.925406-8.125638-2.047405-28.087837-4.414717-56.143683-6.941983-84.19953-2.687219-29.623391-5.662354-59.246781-8.477536-88.870172-2.559256-27.224088-4.926568-54.512157-7.709759-81.736245-2.559256-25.656544-5.502401-51.249106-8.285592-76.873659-2.591247-24.057008-5.086522-48.114017-7.933695-72.139035-3.423005-29.111539-7.037955-58.223079-10.652904-87.334618-3.391014-27.160107-6.750038-54.288222-10.364987-81.416338a6133.577429%206133.577429%200%200%200-12.156467-87.142675c-5.694345-37.653057-11.804569-75.178151-17.818822-112.767227a3259.14881%203259.14881%200%200%200-29.111539-158.993792c-0.44787-2.335321-0.671805-4.734624-1.3756-7.005964-1.663517-5.118512-0.063981-7.837722%204.958559-9.821146C1191.012355%2047.641834%201238.61452%2024.448575%201288.2321%206.149893c6.494113-2.431293%2013.052207-5.150503%2020.058171-5.854299%206.302168-0.639814%207.901704%200.383888%207.29388%207.101936-3.327033%2036.43741-1.407591%2073.066765-3.135089%20109.536166-1.407591%2029.751354-1.247637%2059.598679%200.255926%2089.382023%200.351898%207.549806%200.639814%2015.131602%200.575832%2022.649418-0.383888%2035.765606%201.503563%2071.499221%203.327033%20107.200845%202.335321%2047.186286%205.758326%2094.276601%209.245313%20141.398906%202.527266%2034.006117%205.822308%2067.948253%209.021379%20101.922379%201.695507%2018.586598%203.518977%2037.141206%205.822308%2055.631832%201.247637%2010.205034%201.759489%2010.301006%2011.772578%208.957396%2017.658868-2.399303%2035.349726-4.350736%2053.200539-4.09481%2062.637796%200.799768%20124.027954%2010.684895%20184.266447%2027.863902%2040.788146%2011.580634%2080.488608%2026.040432%20117.981712%2046.290547a253.55831%20253.55831%200%200%201%2047.218277%2032.438573zM308.676783%20922.811488c23.161269-11.068783%20135.608589-98.947243%20144.533995-113.279078-54.576139-23.513166-109.344222-45.362816-168.239105-63.24562l23.70511%20176.524698z%20m1277.196815-107.520752c2.879163-3.103098%202.559256-5.502401-1.343609-7.229899-7.773741-3.550968-15.4835-7.325871-23.353213-10.556932-42.003793-17.179007-84.19953-33.814173-127.482951-47.37823-3.774903-1.151665-7.645778-3.774903-12.476374-1.535554l23.321222%20173.45359c3.454996%200.767777%204.798605-0.831758%206.33416-1.919442%2039.316574-28.855614%2078.889073-57.35933%20116.638102-88.390312%206.36615-5.182494%2012.668318-10.396978%2018.362663-16.443221z'%20fill='%2300AEEC'%3e%3c/path%3e%3c/svg%3e";
const weiboLogo = "data:image/svg+xml,%3csvg%20version='1.1'%20width='75px'%20height='61px'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m%205.53007,41.9362%20c%200,8.7573%2011.40225,15.8597%2025.46951,15.8597%2014.06726,0%2025.46951,-7.1024%2025.46951,-15.8597%200,-8.75872%20-11.40225,-15.8597%20-25.46951,-15.8597%20-14.06726,0%20-25.46951,7.10098%20-25.46951,15.8597'%20fill='%23ffffff'/%3e%3cpath%20d='M%2031.59333,56.50352%20C%2019.14371,57.73143%208.39625,52.10481%207.58671,43.93067%206.77861,35.75796%2016.21935,28.13544%2028.66755,26.90466%2041.11861,25.67245%2051.86607,31.30051%2052.67417,39.47178%2053.48084,47.64879%2044.0444,55.27274%2031.59333,56.50352%20M%2056.49546,29.36909%20c%20-1.05885,-0.31665%20-1.78528,-0.53301%20-1.23078,-1.92426%201.20069,-3.02178%201.32534,-5.62805%200.0229,-7.48783%20-2.44149,-3.48744%20-9.12122,-3.29975%20-16.77812,-0.0932%200,-0.005%20-2.40425,1.05168%20-1.78958,-0.85538%201.17777,-3.7869%201.0001,-6.9577%20-0.83245,-8.78882%20C%2031.73373,6.06304%2020.68681,10.37721%2011.21312,19.84661%204.11931,26.94185%200,34.4612%200,40.96326%200,53.4%2015.94853,60.9609%2031.55176,60.9609%20c%2020.45327,0%2034.05917,-11.88367%2034.05917,-21.31868%200,-5.69969%20-4.80132,-8.93496%20-9.11549,-10.2732'%20fill='%23e6162d'/%3e%3cpath%20d='M%2070.07757,6.61%20C%2065.1387,1.13383%2057.85289,-0.95377%2051.12732,0.47617%20l%20-0.002,0%20c%20-1.55459,0.33241%20-2.54752,1.86408%20-2.21368,3.41724%200.33098,1.55316%201.86121,2.54752%203.41724,2.21511%204.78413,-1.01586%209.96085,0.47139%2013.47408,4.36002%203.5075,3.89006%204.46032,9.19573%202.95731,13.84661%20l%2010e-4,0.001%20c%20-0.49002,1.51591%200.33814,3.13641%201.85548,3.62642%201.51161,0.48859%203.13498,-0.33957%203.625,-1.84974%200,-0.002%200,-0.008%200.001,-0.0115%202.10766,-6.54361%200.77658,-14.00135%20-4.16516,-19.47179'%20fill='%23ff9933'/%3e%3cpath%20d='m%2062.49231,13.45494%20c%20-2.40424,-2.66645%20-5.9533,-3.67944%20-9.23012,-2.9831%20-1.33967,0.28513%20-2.19362,1.60331%20-1.90563,2.94441%200.28656,1.33394%201.60331,2.19219%202.93868,1.90133%20l%200,0.002%20c%201.60188,-0.33958%203.33844,0.15474%204.51477,1.45572%201.17633,1.30529%201.49298,3.08196%200.9872,4.64085%20l%200.002,0%20c%20-0.41981,1.30099%200.29229,2.69941%201.59471,3.12208%201.30385,0.41695%202.70084,-0.29372%203.12065,-1.59757%201.03018,-3.18799%200.38685,-6.82015%20-2.02312,-9.48659'%20fill='%23ff9933'/%3e%3cpath%20d='m%2032.28036,41.69964%20c%20-0.43557,0.74506%20-1.39842,1.10326%20-2.15207,0.79234%20-0.7422,-0.30518%20-0.97431,-1.13764%20-0.55307,-1.86981%200.43414,-0.72786%201.35974,-1.08319%202.09906,-0.78947%200.75222,0.2751%201.02159,1.11759%200.60608,1.86694%20m%20-3.96744,5.09219%20c%20-1.20355,1.92139%20-3.7826,2.76244%20-5.72548,1.87554%20-1.91422,-0.87115%20-2.47875,-3.10346%20-1.27376,-4.97613%201.18923,-1.86551%203.68087,-2.69654%205.60943,-1.88844%201.95004,0.83103%202.57331,3.04758%201.38981,4.98903%20m%204.5248,-13.59731%20c%20-5.92464,-1.54169%20-12.62157,1.41131%20-15.19488,6.63102%20-2.6206,5.32429%20-0.086,11.23461%205.89885,13.16746%206.20117,1.99876%2013.50847,-1.06457%2016.05026,-6.81155%202.50598,-5.61802%20-0.62327,-11.40225%20-6.75423,-12.98693'%20fill='%23000000'/%3e%3c/svg%3e";
const douyuLogo = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20viewBox='0%200%201129%201024'%20id='logo_eac22d1'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%23231815'%20d='M1117.645%20179.111c8.602-1.575%2012.757-11.581%207.86-18.911l-12.851-19.217c-33.891-50.922-76.709-88.765-127.249-112.473C945.077%209.594%20900.809-.001%20853.836-.001%20811.59-.007%20774.813%208.03%20751.283%2016.611c-20.326-5.265-67.612-15.427-129.667-15.427-57.691%200-113.722%208.715-166.538%2025.917-65.606%2021.365-125.539%2053.354-178.119%2095.082-42.065%2033.369-79.501%2072.982-111.271%20117.727-54.245%2076.394-73.252%20141.351-74.032%20144.083l-1.902%206.623c-2.166%207.558.764%2015.661%207.239%2020.013l5.672%203.818c61.396%2041.305%20140.314%2064.996%20216.517%2064.996%2049.254%200%2097.381-9.444%20143.057-28.065%20106.807-43.548%20166.692-116.942%20198.12-170.841a416.768%20416.768%200%20008.305-14.943c.802%2025.572-1.297%2055.524-9.245%2088.27-16.204%2066.738-50.337%20122.568-101.448%20165.933-38.706%2032.84-73.219%2045.891-73.565%2046.019l-9.767%203.556-4.826%209.227c-5.502%2010.374-31.896%2064.712-11.361%20116.001%206.392%2015.955%2021.31%2025.483%2039.921%2025.483%2017.66%200%2037.321-8.298%2053.349-17.224%208.432%209.717%2015.005%2016.089%2020.628%2020.836-1.803%2022.239-15.16%2033.58-30.457%2046.703-12.356%2010.591-27.888%2013.622-43.52%2013.622-28.125-44.31-69.349-55.689-120.4-55.689-20.843%200-41.059%204.497-60.093%2013.368-21.761%2010.134-20.733%2041.784%201.632%2050.46.599.234%2065.216%2026.045%20103.493%2078.887%2036.969%2051.039%2015.577%20103.307%2014.087%20106.78l-14.263%2030.163c-3.897%208.237%203.314%2017.402%2012.114%2015.393l32.545-7.418c13.181-2.916%2047.451-12.845%2080.859-41.834%2029.043-25.205%2049.507-58.451%2059.884-96.996%2065.551-10.624%20125.974-34.443%20179.85-70.94%2055.075-37.309%20102.179-87.942%20136.208-146.426%2034.727-59.687%2056.07-127.722%2061.72-196.753%205.398-65.992-3.617-133.259-26.114-195.578%2059.104-68.959%20134.438-84.057%20135.235-84.207l22.514-4.118z'/%3e%3cpath%20fill='%23f0f1f2'%20d='M585.932%20852.978C874.854%20817.884%201031.603%20517.98%20929%20262.776c67.816-89.055%20161.223-106.145%20161.223-106.145C980.145-8.762%20802.153%2024.145%20752.805%2045.772%20729.846%2038.854%20604.664%207.5%20463.366%2053.519c-274.258%2089.316-345.728%20338.454-345.728%20338.454%2078.413%2052.753%20206.486%2086.528%20334.499%2034.332%20193.119-78.737%20225.015-259.651%20225.015-259.651s35.854%2081.547%208.536%20194.081c-42.916%20176.829-192.036%20231.162-192.036%20231.162-7.261%2013.69-24.905%2055.847-10.125%2092.75%207.305%2018.248%2043.417%204.068%2074.049-17.297%2025.009%2032.306%2035.364%2038.355%2042.065%2043.158%201.369%2036.118-12.485%2060.885-37.142%2082.027-24.789%2021.265-50.766%2030.073-68.846%2033.821-29.637-64.262-104.208-87.516-164.46-59.439%200%200%2071.888%2027.882%20115.629%2088.264%2047.907%2066.143%2016.88%20134.367%2016.88%20134.367%2034.749-7.708%20107.962-42.457%20124.231-136.57z'/%3e%3cpath%20fill='%23bcbcbc'%20d='M491.003%2045.415c129.68-33.899%20240.352-6.107%20261.802.356%2019.28-8.45%2058.199-18.621%20105.032-18.015-42.96%203.843-67.909%2015.787-86.383%2023.162-.859.343-1.704.676-2.537.998l-.107.602c39.403%2025.41%2064.004%2061.855%2064.004%2061.855-79.389-100.992-288.72-62.958-322.211-53.434-5.297-5.303-13.452-11.287-19.6-15.525zM1071.083%20161.784c-30.87%209.933-93.141%2036.721-142.083%20100.991%2030.944%2076.967%2038.298%20157.999%2025.552%20234.607a314.04%20314.04%200%2001-6.451%2018.975c17.209-153.353-34.511-247.714-82.64-335.238%2035.986%2042.313%2042.707%2055.813%2042.707%2055.813%2062.01-63.343%20168.466-79.09%20168.466-79.09l-5.55%203.941z'/%3e%3cpath%20fill='%23231815'%20d='M680.604%20364.334c24.053-81.007-6.722-136.76-6.722-136.76-23.316%2088.459-66.815%20153.739-160.074%20203.164-67.48%2035.757-184.621%2042.162-184.621%2042.162l159.068%2087.624c97.409-22.433%20162.52-95.744%20192.349-196.191z'/%3e%3cpath%20fill='%23fff'%20d='M664.598%20240.419c12.637%2052.681%204.766%2090.391.158%2099.212-6.303%2012.042-30.358-4.749-30.358-4.749s9.849%2080.358.251%2090.047c-9.604%209.69-57.872-26.518-57.872-26.518s22.416%2085.244%206.406%2096.01c-16.004%2010.767-91.891-48.827-91.891-48.827s25.188%2097.302%209.511%20101.704c-14.037%203.946-35.987-2.648-59.623-13.65l-36.806-19.547c-26.208-15.358-50.584-32.26-64.74-42.439%2030.327-1.775%20103.497-10.437%20167.939-52.179%2085.586-55.439%20140.61-122.897%20157.026-179.065z'/%3e%3cpath%20fill='%232d0a03'%20stroke='%23231815'%20stroke-width='35.31'%20d='M496.533%20506.619c97.632%2060.955%20125.441%20167.458%2069.942%20244.77-55.504%2077.318-164.2%2083.488-251.675%208.389-78.682-67.556-114.492-180.069-68.701-243.857%2045.802-63.799%20162.614-64.125%20250.434-9.302z'/%3e%3cpath%20fill='%23231815'%20d='M610.523%20624.884c-17.758-59.853-65.458-114.001-127.607-144.858-100.814-50.036-215.487-27.802-261.054%2050.64-44.632%2076.809-7.328%20187.739%2084.911%20252.539%2054.082%2037.989%20118.993%2054.751%20176.127%2045.969a188.204%20188.204%200%200012.059-2.258c45.124-10.033%2080.536-35.234%20102.406-72.88%2021.974-37.818%2026.645-83.687%2013.158-129.153z'/%3e%3cpath%20fill='%23f8c100'%20d='M471.194%20494.97c102.997%2051.127%20153.655%20163.949%20105.791%20246.336-47.864%2082.381-168.268%2089.603-262.504%2023.402-84.763-59.543-118.342-158.487-78.851-226.459s142.925-89.265%20235.564-43.28z'/%3e%3cpath%20fill='%23231815'%20d='M444.805%20479.517s-166.65%2037.652-175.651%20245.539l6.716%209.136s-7.64-64.231%2065.337-158.72c58.02-75.121%20106.825-93.1%20106.825-93.1l-3.227-2.855z'/%3e%3cpath%20fill='%23231815'%20d='M196.833%20705.283C88.696%20650.349%2019.114%20577.713%2037.441%20534.649c20.323-47.756%20141.022-41.061%20269.581%2014.958a687.116%20687.116%200%200130.369%2014.144c3.265-4.671%206.645-9.363%2010.287-13.89a780.404%20780.404%200%2000-36.39-17.005C165.245%20469.223%2028.134%20461.614%205.049%20515.867c-16.276%2038.238%2028.466%2096.99%20107.443%20150.629%2031.118%2021.133%2065.288%2030.165%2084.342%2038.786z'/%3e%3cpath%20fill='%23f0f1f2'%20d='M626.083%20527.481c-43.177%2057.667-111.594%2094.915-188.602%2094.915-5.857%200-11.654-.21-17.397-.631l-.109-.133c37.982%2047.187%2095.849%2077.323%20160.672%2077.323%2099.245%200%20182.181-70.622%20202.406-164.907z'/%3e%3cpath%20fill='%23231815'%20d='M454.2%20635.335v.181c5.46%204.686%2011.13%209.107%2017.019%2013.205%207.443%205.052%2015.127%209.756%2023.188%2013.696%208.007%204.056%2016.314%207.46%2024.807%2010.287%208.428%202.999%2017.085%205.351%2025.863%207.111%208.778%201.787%2017.692%202.889%2026.656%203.381l8.827.343c-.263.011.738-.011-.558.017h.109l.23-.006.908-.039%203.626-.127%2014.405-.47c8.542-.902%2017.162-1.688%2026.098-3.769%204.468-.703%208.794-1.998%2013.125-3.287%204.342-1.251%208.739-2.38%2012.907-4.178%204.178-1.754%208.592-2.972%2012.704-4.914l12.409-5.761c7.963-4.46%2016.008-8.909%2023.418-14.399%203.877-2.512%207.465-5.401%2011.08-8.295%203.648-2.855%207.334-5.7%2010.615-8.998%207.028-6.148%2013.175-13.181%2019.48-20.187%205.885-7.327%2011.786-14.759%2016.779-22.888%202.767-3.907%204.938-8.146%207.345-12.307%202.428-4.15%204.774-8.373%206.645-12.822%204.299-8.694%207.755-17.786%2011.168-27.06-1.449%209.69-2.581%2019.65-5.447%2029.207-1.099%204.892-2.702%209.612-4.419%2014.321-1.641%204.737-3.216%209.551-5.507%2014.017-3.97%209.291-8.975%2018.046-14.121%2026.828-5.704%208.367-11.589%2016.706-18.398%2024.315-3.183%204.018-6.814%207.598-10.446%2011.211-3.577%203.663-7.203%207.31-11.271%2010.42-7.733%206.779-16.237%2012.54-24.796%2018.3-8.882%205.18-17.807%2010.431-27.394%2014.349-4.665%202.263-9.582%203.846-14.476%205.534-4.878%201.732-9.773%203.442-14.843%204.543-5.075%201.168-9.926%202.728-15.226%203.547l-15.904%202.463c-5.031.548-9.718.719-14.597.991l-4.534.238-1.613.022-1.947-.033-7.788-.166c-10.38-.393-20.749-1.5-30.992-3.392-10.249-1.865-20.377-4.444-30.271-7.769-19.77-6.757-38.332-16.795-55.368-28.82-8.406-6.17-16.647-12.634-24.009-20.054-3.974-3.797-7.718-7.824-11.319-11.974-4.158-3.352-9.463-9.959-10.28-12.51l-.002-.007c-4.189-6.035-3.208-14.414%202.461-19.266a14.094%2014.094%200%200113.078-2.858c.251.02.537.052.86.096l10.826.676c3.921.31%209.062.05%2013.541.116%209.27-.266%2018.545-.802%2027.799-1.981l13.809-2.258%2013.672-3.171c8.996-2.584%2018.069-5.152%2026.863-8.644%204.348-1.832%208.854-3.392%2013.082-5.545%204.293-2.031%208.625-4.023%2012.775-6.369a208.188%20208.188%200%200024.665-14.831c4.052-2.645%207.832-5.65%2011.753-8.528%203.998-2.806%207.558-6.12%2011.37-9.208%207.317-6.369%2014.591-13.154%2021.444-20.381-5.234%208.445-10.61%2016.889-17.047%2024.714-3.265%203.807-6.322%207.869-9.855%2011.46-3.434%203.708-6.88%207.443-10.681%2010.78a221.581%20221.581%200%2001-23.511%2019.418c-4.074%203.104-8.46%205.7-12.786%208.439-4.277%202.839-8.871%205.086-13.344%207.614-9.078%204.776-18.458%209.075-28.16%2012.584l-14.728%204.765-15.034%203.791c-8.825%201.823-17.738%203.418-26.738%204.289zM560.372%20147.064c0%2070.621-55.246%20127.873-123.399%20127.873-68.148%200-123.394-57.251-123.394-127.873%200-70.627%2055.246-127.879%20123.394-127.879%2068.153%200%20123.399%2057.251%20123.399%20127.879z'/%3e%3cpath%20fill='%23e9e9e9'%20d='M560.372%20162.855c0%2061.903-48.424%20112.085-108.159%20112.085s-108.159-50.182-108.159-112.085c0-61.903%2048.424-112.085%20108.159-112.085s108.159%2050.182%20108.159%20112.085z'/%3e%3cpath%20fill='%23fff'%20d='M556.487%20161.403c0%2054.908-44.622%2099.415-99.662%2099.415s-99.662-44.506-99.662-99.415c0-54.908%2044.622-99.421%2099.662-99.421s99.662%2044.512%2099.662%2099.421z'/%3e%3cpath%20fill='%23231815'%20d='M539.742%20161.403c0%2045.681-37.125%2082.713-82.919%2082.713-45.789%200-82.914-37.032-82.914-82.713s37.125-82.713%2082.914-82.713c45.795%200%2082.919%2037.032%2082.919%2082.713z'/%3e%3cpath%20fill='%23fff'%20d='M552.151%20167.872c0%2023.997-19.506%2043.459-43.567%2043.459-24.056%200-43.562-19.462-43.562-43.459%200-24.003%2019.506-43.459%2043.562-43.459%2024.061%200%2043.567%2019.456%2043.567%2043.459zM416.269%20135.985c0%2013.416-10.903%2024.298-24.357%2024.298-13.449%200-24.357-10.882-24.357-24.298s10.909-24.298%2024.357-24.298c13.454%200%2024.357%2010.882%2024.357%2024.298z'/%3e%3c/svg%3e";
const xiaohongshuLogo = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20version='1.1'%20id='svg1'%20width='256'%20height='256'%20viewBox='0%200%20256%20256'%20sodipodi:docname='XiaohongshuLOGO.png'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs1'%20/%3e%3csodipodi:namedview%20id='namedview1'%20pagecolor='%23ffffff'%20bordercolor='%23000000'%20borderopacity='0.25'%20inkscape:showpageshadow='2'%20inkscape:pageopacity='0.0'%20inkscape:pagecheckerboard='0'%20inkscape:deskcolor='%23d1d1d1'%20inkscape:zoom='2.6914062'%20inkscape:cx='127.81422'%20inkscape:cy='128'%20inkscape:window-width='1600'%20inkscape:window-height='928'%20inkscape:window-x='0'%20inkscape:window-y='0'%20inkscape:window-maximized='1'%20inkscape:current-layer='g1'%20/%3e%3cg%20inkscape:groupmode='layer'%20inkscape:label='Image'%20id='g1'%3e%3cpath%20style='fill:%23ff2842;stroke:none'%20d='M%2029,0.33332825%20C%2013.959937,3.4666748%201.5356731,15.204498%200,31%20-1.586103,47.314209%200,64.597672%200,81%20v%20102%20c%200,18.76035%20-4.7369685,44.19888%207.3333335,60%20C%2020.372129,260.06897%2044.156731,256%2063,256%20h%20111%2035%20c%205.78276,0%2012.33244,0.84741%2018,-0.33333%2015.0401,-3.13336%2027.46432,-14.87115%2029,-30.66667%201.58612,-16.31419%200,-33.59769%200,-50%20V%2073%20C%20256,54.239685%20260.73697,28.801102%20248.66667,13%20235.62787,-4.0689697%20211.84329,0%20193,0%20H%2082%2047%20C%2041.217228,0%2034.667561,-0.84741211%2029,0.33332825%20M%20120,91%20l%20-7,19%20h%2012%20l%20-10,24%209,1%20c%20-0.98794,2.68155%20-2.31718,7.73317%20-4.33334,9.83334%20C%20118.18945,146.3721%20115.92654,146%20114,146%20c%20-4.35942,0%20-13.16798,1.80539%20-15.5,-3%20-1.069664,-2.20416%200.465553,-4.98451%201.333336,-7%201.813624,-4.21228%204.222554,-8.51549%205.166664,-13%20-2.17548,0%20-4.92464,0.42967%20-7,-0.33333%20-7.778526,-2.85974%200.874031,-15.36435%202.66666,-19.66667%201.25875,-3.020981%202.75652,-9.584732%205.5,-11.5%20C%20110.01874,88.810822%20115.88325,90.674988%20120,91%20m%20-79,63%20c%202.750713,0%206.837379,0.81721%208.5,-2%201.769028,-2.99753%200.5,-9.58963%200.5,-13%20V%20106%20C%2050,102.90659%2048.438198,93.464493%2051.166668,91.5%2053.41069,89.884308%2062.832935,90.226166%2063.833332,93%2065.47065,97.539825%2064,105.16241%2064,110%20v%2032%20c%200,5.48389%200.949112,11.8645%20-1.333332,17%20-2.177158,4.89861%20-12.303417,9.27243%20-17.333336,5.5%20C%2043.120155,162.84012%2041.545292,156.59013%2041,154%20M%20193,91%20v%205%20c%203.72887,0%208.4108,-0.763367%2012,0.333328%2011.97635,3.659424%2011,15.422502%2011,25.666672%201.99706,0%204.04419,-0.15562%206,0.33333%2011.49335,2.87334%2010,14.36401%2010,23.66667%200,4.95615%200.93086,10.82184%20-2.33333,15%20-3.59567,4.60246%20-9.48195,4%20-14.66667,4%20-1.6116,0%20-4.26318,0.51051%20-5.66667,-0.5%20-2.62326,-1.88875%20-3.78159,-7.50485%20-4.33333,-10.5%203.28711,0%209.2179,1.12517%2011.83333,-1.33334%20C%20219.9164,149.76859%20218.65411,138.43454%20215,136.5%20c%20-1.93661,-1.02527%20-4.88672,-0.5%20-7,-0.5%20h%20-15%20v%2029%20h%20-14%20v%20-29%20h%20-14%20v%20-14%20h%2014%20v%20-12%20h%20-9%20V%2096%20h%209%20v%20-5%20h%2014%20m%20-32,5%20v%2014%20h%20-8%20v%2042%20h%2013%20v%2013%20H%20120%20L%20125.33334,152.5%20138,152%20v%20-42%20h%20-8%20V%2096%20h%2031%20m%2057,14%20c%200,-2.84204%20-0.51608,-6.25871%200.33333,-9%203.34434,-10.793121%2019.61577,-2.093994%2011.5,6.83333%20-0.92279,1.01507%20-2.54419,1.51106%20-3.83333,1.83334%20C%20223.43948,110.30679%20220.61993,110%20218,110%20M%2041,110%2036.833332,147%2030,159%2024,143%2027,110%20h%2014%20m%2046,0%203,33%20-6,15%20h%20-2%20c%20-5.366936,-8.49765%20-6.053299,-17.26251%20-7,-27%20-0.672195,-6.91406%20-2,-14.04004%20-2,-21%20h%2014%20m%20106,0%20v%2012%20h%209%20v%20-12%20h%20-9%20m%20-75,42%20-5,13%20H%2091%20L%2096.333336,151.5%20104,151.66666%20Z'%20id='path1'%20/%3e%3c/g%3e%3c/svg%3e";
const PLATFORM_CONFIG = {
kuaishou: { pattern: /快手/, logo: kuaishouLogo },
douyin: { pattern: /抖音/, logo: douyinLogo },
bilibili: { pattern: /bilibili/, logo: bilibiliLogo },
weibo: { pattern: /微博/, logo: weiboLogo },
douyu: { pattern: /斗鱼/, logo: douyuLogo },
xiaohongshu: { pattern: /小红书/, logo: xiaohongshuLogo }
};
function getPlatformLogo(channel) {
for (const key in PLATFORM_CONFIG) {
const { pattern, logo } = PLATFORM_CONFIG[key];
if (pattern.test(channel)) {
return logo;
}
}
return "";
}
function getPlatformKey(channel) {
for (const key in PLATFORM_CONFIG) {
const { pattern } = PLATFORM_CONFIG[key];
if (pattern.test(channel)) {
return key;
}
}
return null;
}
function LivingIcon(props) {
const { barWidth = 160, className } = props;
const barRadius = barWidth / 2;
return jsxRuntimeExports.jsxs(
"svg",
{
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
className: cn$1("size-2.5", className),
children: [
jsxRuntimeExports.jsxs(
"rect",
{
x: "108.22",
y: "274",
width: "160",
height: "750",
rx: barRadius,
ry: barRadius,
fill: "currentColor",
children: [
jsxRuntimeExports.jsx(
"animate",
{
attributeName: "height",
values: "750;1000;750;500;250;500;750",
dur: "0.6s",
repeatCount: "indefinite"
}
),
jsxRuntimeExports.jsx(
"animate",
{
attributeName: "y",
values: "274;24;274;524;774;524;274",
dur: "0.6s",
repeatCount: "indefinite"
}
)
]
}
),
jsxRuntimeExports.jsxs(
"rect",
{
x: "432",
width: "160",
height: "1000",
y: "24",
rx: barRadius,
ry: barRadius,
fill: "currentColor",
children: [
jsxRuntimeExports.jsx(
"animate",
{
attributeName: "height",
values: "1000;750;500;250;500;750;1000",
dur: "0.6s",
repeatCount: "indefinite"
}
),
jsxRuntimeExports.jsx(
"animate",
{
attributeName: "y",
values: "24;274;524;774;524;274;24",
dur: "0.6s",
repeatCount: "indefinite"
}
)
]
}
),
jsxRuntimeExports.jsxs(
"rect",
{
x: "755.78",
y: "524",
width: "160",
height: "500",
rx: barRadius,
ry: barRadius,
fill: "currentColor",
children: [
jsxRuntimeExports.jsx(
"animate",
{
attributeName: "height",
values: "500;750;1000;750;500;250;500",
dur: "0.6s",
repeatCount: "indefinite"
}
),
jsxRuntimeExports.jsx(
"animate",
{
attributeName: "y",
values: "524;274;24;274;524;774;524",
dur: "0.6s",
repeatCount: "indefinite"
}
)
]
}
)
]
}
);
}
function Avatar(props) {
const { streamer } = props;
const platform2 = getPlatformKey(streamer.channel);
const handleError = (e) => {
e.currentTarget.src = "https://placehold.co/48x48?text=Failed";
};
return jsxRuntimeExports.jsxs("div", { className: "relative self-start", children: [
jsxRuntimeExports.jsx(
"img",
{
src: platform2 === "bilibili" ? `https://wsrv.nl//?url=${streamer.avatar}` : streamer.avatar,
className: "size-13 rounded-full",
onError: handleError,
alt: ""
}
),
streamer.status === 1 && jsxRuntimeExports.jsx(Badge, { className: "absolute -bottom-0.5 -right-0 rounded-full p-0.5 [&>svg]:size-2.5 text-white", children: jsxRuntimeExports.jsx(LivingIcon, {}) })
] });
}
function StreamerItem(props) {
const { streamer, className, inPinnedArea = false } = props;
const { channel, live_url, uname, start_time, status } = streamer;
const [showRemarkDialog, setShowRemarkDialog] = React.useState(false);
const remark = jotai.useAtomValue(streamerRemarkAtom(streamer.id));
const dispatchRemark = jotai.useSetAtom(streamerRemarksAtom);
const ref = React.useRef(null);
const dispatchPinnedIds = jotai.useSetAtom(pinnedIdsAtom);
const img = getPlatformLogo(channel);
const handleClick = (e) => {
if (ref.current && ref.current.contains(e.target)) {
return;
}
window.open(live_url, "_blank");
};
const handlePin = (e) => {
e.stopPropagation();
if (inPinnedArea) {
dispatchPinnedIds({ type: "remove", id: streamer.id });
} else {
dispatchPinnedIds({ type: "add", id: streamer.id });
}
};
const handleRemarkDialog = (e) => {
e.stopPropagation();
setShowRemarkDialog(true);
};
const handleRemoveRemark = (e) => {
e.stopPropagation();
dispatchRemark({ type: "remove", id: streamer.id });
};
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsxs(
Card,
{
className: `${status !== 1 ? "grayscale" : ""} rounded-lg hover:shadow-lg ${className ?? ""}`,
onClick: handleClick,
children: [
jsxRuntimeExports.jsxs(CardHeader, { className: "flex flex-col gap-2 relative", children: [
jsxRuntimeExports.jsx(Avatar, { streamer }),
jsxRuntimeExports.jsx("span", { className: "text-sm", children: uname }),
remark && jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground", children: [
"备注：",
remark.remark
] }),
jsxRuntimeExports.jsxs(DropdownMenu, { modal: false, children: [
jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: jsxRuntimeExports.jsx(
Button,
{
ref,
className: "absolute right-2.5 top-0 rounded-full",
variant: "ghost",
size: "icon-sm",
children: jsxRuntimeExports.jsx(lucideReact.EllipsisVertical, {})
}
) }),
jsxRuntimeExports.jsxs(DropdownMenuContent, { align: "start", children: [
jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: handlePin, children: inPinnedArea ? "取消置顶" : "置顶主播" }),
jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: handleRemarkDialog, children: [
remark ? "修改" : "添加",
"备注"
] }),
remark && jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: handleRemoveRemark, children: "删除备注" })
] })
] })
] }),
jsxRuntimeExports.jsxs(CardContent, { className: "flex flex-col items-end justify-stretch gap-1", children: [
jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: status === 1 ? jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground", children: [
"已开播",
formatLiveDuration(start_time)
] }) : jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: "未开播" }) }),
jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground", children: [
jsxRuntimeExports.jsx("span", { className: "align-bottom", children: "来源:" }),
img ? jsxRuntimeExports.jsx("img", { className: "inline-block h-4.5 ml-2 align-bottom", src: img }) : jsxRuntimeExports.jsx("span", { className: "ml-2 align-bottom", children: "未知" })
] })
] })
]
}
),
jsxRuntimeExports.jsx(
RemarkDialog,
{
streamer,
open: showRemarkDialog,
onOpenChange: setShowRemarkDialog
}
)
] });
}
const formSchema = object({
remark: string().check(_minLength(1, "用户标记不能为空")).check(_maxLength(20, "用户标记不能超过20个字符"))
});
function RemarkDialog({
streamer,
open,
onOpenChange
}) {
const { id: id2, uid, uname } = streamer;
const remarkObj = jotai.useAtomValue(streamerRemarkAtom(streamer.id));
const dispatch = jotai.useSetAtom(streamerRemarksAtom);
const { handleSubmit, control, reset } = reactHookForm.useForm({
resolver: a(formSchema),
defaultValues: { remark: remarkObj?.remark || "" }
});
function onSubmit(data) {
dispatch({ type: "add", remark: { id: id2, uid, remark: data.remark } });
onOpenChange?.(false);
reset();
}
React.useEffect(() => {
reset({ remark: remarkObj?.remark || "" });
}, [remarkObj, reset]);
return jsxRuntimeExports.jsx(Dialog, { open, onOpenChange, children: jsxRuntimeExports.jsxs(DialogContent, { children: [
jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsxs(DialogTitle, { children: [
"为【",
uname,
"】添加备注"
] }) }),
jsxRuntimeExports.jsxs(
"form",
{
id: "label-form",
className: "space-y-4",
onSubmit: handleSubmit(onSubmit),
children: [
jsxRuntimeExports.jsx(FieldGroup, { children: jsxRuntimeExports.jsx(
reactHookForm.Controller,
{
control,
name: "remark",
render: ({ field, fieldState }) => jsxRuntimeExports.jsxs(Field, { "data-invalid": fieldState.invalid, children: [
jsxRuntimeExports.jsx(FieldLabel, { htmlFor: "streamer-remark", children: "备注" }),
jsxRuntimeExports.jsx(
Input,
{
...field,
id: "streamer-remark",
"aria-invalid": fieldState.invalid,
autoComplete: "off"
}
),
fieldState.invalid && jsxRuntimeExports.jsx(FieldError, { errors: [fieldState.error] })
] })
}
) }),
jsxRuntimeExports.jsxs(DialogFooter, { children: [
jsxRuntimeExports.jsx(DialogClose, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", children: "关闭" }) }),
jsxRuntimeExports.jsx(Button, { type: "submit", children: "确定" })
] })
]
}
)
] }) });
}
function StreamerList() {
const liveStreamers = jotai.useAtomValue(liveStreamersAtom);
const offlinetreamers = jotai.useAtomValue(offlineStreamersAtom);
return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(ScrollArea, { className: "flex-1 min-h-0", children: [
liveStreamers.length > 0 && jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx("h2", { className: "text-base px-6", children: "直播中 📺" }),
jsxRuntimeExports.jsx("div", { className: "grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 auto-rows-min gap-6 p-6", children: liveStreamers.map((s2) => jsxRuntimeExports.jsx(StreamerItem, { streamer: s2 }, s2.id)) })
] }),
jsxRuntimeExports.jsx("h2", { className: "text-base px-6", children: "未开播 💤" }),
jsxRuntimeExports.jsx("div", { className: "grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 auto-rows-min gap-6 p-6", children: offlinetreamers?.map((s2) => jsxRuntimeExports.jsx(StreamerItem, { streamer: s2 }, s2.id)) })
] }) });
}
function PinnedStreamers() {
const pinnedStreamers = jotai.useAtomValue(pinnedStreamersAtom);
return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx("div", { className: "px-6 flex justify-between", children: jsxRuntimeExports.jsx("h1", { className: "text-2xl", children: "我的置顶" }) }),
jsxRuntimeExports.jsx("hr", { className: "text-gray-200 border-t-2 mx-6" }),
jsxRuntimeExports.jsxs(ScrollArea, { className: "mx-6", children: [
jsxRuntimeExports.jsx("div", { className: " py-6 flex flex-nowrap gap-6", children: pinnedStreamers.map((s2) => jsxRuntimeExports.jsx(
StreamerItem,
{
streamer: s2,
inPinnedArea: true,
className: "w-2xs"
},
s2.id
)) }),
jsxRuntimeExports.jsx(ScrollBar, { orientation: "horizontal" })
] })
] });
}
function Streamers() {
const fetchStreamers2 = jotai.useSetAtom(fetchStreamersAtom);
const lasUpdated = jotai.useAtomValue(lastUpdatedAtom);
const streamersStatus = jotai.useAtomValue(streamersStatusAtom);
const pinnedStreamers = jotai.useAtomValue(pinnedStreamersAtom);
const loading = streamersStatus === "loading";
const isError = streamersStatus === "error";
const showPinnedStreamers = !isError && pinnedStreamers.length > 0;
const refreshData = React.useMemo(
() => debounce(() => fetchStreamers2(), 2e3, true),
[fetchStreamers2]
);
React.useEffect(() => {
fetchStreamers2();
}, [fetchStreamers2]);
return jsxRuntimeExports.jsxs(Card, { className: "flex-1 overflow-hidden shadow-lg flex flex-col", children: [
showPinnedStreamers && jsxRuntimeExports.jsx(PinnedStreamers, {}),
jsxRuntimeExports.jsxs("div", { className: "px-6 flex justify-between", children: [
jsxRuntimeExports.jsx("h1", { className: "text-2xl", children: "主播列表" }),
jsxRuntimeExports.jsxs("div", { className: "flex gap-4 items-end", children: [
jsxRuntimeExports.jsxs("span", { className: "text-gray-600 text-xs", children: [
"最近更新时间：",
lasUpdated ? formatDate(lasUpdated) : "--"
] }),
jsxRuntimeExports.jsx(Button, { onClick: refreshData, disabled: loading, children: loading ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
jsxRuntimeExports.jsx(LoadingIcon, {}),
"刷新中"
] }) : "刷新列表" })
] })
] }),
jsxRuntimeExports.jsx("hr", { className: "text-gray-200 border-t-2 mx-6" }),
isError ? jsxRuntimeExports.jsx(Empty, { children: jsxRuntimeExports.jsxs(EmptyHeader, { children: [
jsxRuntimeExports.jsx(EmptyMedia, { children: jsxRuntimeExports.jsx(lucideReact.TriangleAlert, { className: "size-10" }) }),
jsxRuntimeExports.jsx(EmptyTitle, { children: "主播列表数据请求失败！" }),
jsxRuntimeExports.jsx(EmptyDescription, { children: "具体错误信息请联系源站长。您可以尝试刷新列表数据。" })
] }) }) : jsxRuntimeExports.jsx(StreamerList, {})
] });
}
const initialState = {
theme: "system",
setTheme: () => null
};
const ThemeProviderContext = React.createContext(initialState);
function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "cx-style-ui_theme",
...props
}) {
const [theme, setTheme] = React.useState(
() => localStorage.getItem(storageKey) || defaultTheme
);
React.useEffect(() => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
root.classList.add(systemTheme);
return;
}
root.classList.add(theme);
}, [theme]);
const value = {
theme,
setTheme: (theme2) => {
localStorage.setItem(storageKey, theme2);
setTheme(theme2);
}
};
return jsxRuntimeExports.jsx(ThemeProviderContext.Provider, { ...props, value, children });
}
const useTheme = () => {
const context = React.useContext(ThemeProviderContext);
if (context === void 0)
throw new Error("useTheme must be used within a ThemeProvider");
return context;
};
function ModeToggle({ className }) {
const { setTheme } = useTheme();
const buttonRef = React.useRef(null);
function handleThemeChange(theme) {
if (!buttonRef.current) return;
const rect = buttonRef.current.getBoundingClientRect();
const x2 = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
if (!document.startViewTransition) {
setTheme(theme);
return;
}
document.startViewTransition(() => {
setTheme(theme);
}).ready.then(() => {
const radius = Math.hypot(
Math.max(x2, innerWidth - x2),
Math.max(y, innerHeight - y)
);
document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x2}px ${y}px)`,
`circle(${radius}px at ${x2}px ${y}px)`
]
},
{
duration: 700,
easing: "ease-in-out",
pseudoElement: "::view-transition-new(root)"
}
);
});
}
return jsxRuntimeExports.jsxs(DropdownMenu, { children: [
jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "icon",
className,
ref: buttonRef,
children: [
jsxRuntimeExports.jsx(lucideReact.Sun, { className: "size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
jsxRuntimeExports.jsx(lucideReact.Moon, { className: "absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Toggle theme" })
]
}
) }),
jsxRuntimeExports.jsxs(DropdownMenuContent, { align: "end", children: [
jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: () => handleThemeChange("light"), children: "浅色主题" }),
jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: () => handleThemeChange("dark"), children: "暗黑主题" }),
jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: () => handleThemeChange("system"), children: "跟随系统" })
] })
] });
}
const _globalSettingAtom = utils.atomWithStorage(
`${"cx-style"}-global_setting`,
{
bannedPresenceEffect: false,
enableNewPage: false
}
);
const globalSettingAtom = jotai.atom(
(get2) => get2(_globalSettingAtom),
(get2, set2, update) => {
set2(_globalSettingAtom, { ...get2(_globalSettingAtom), ...update });
}
);
function ToOriginPageButton() {
const setGlobalSetting = jotai.useSetAtom(globalSettingAtom);
const handleClick = () => {
setGlobalSetting({ enableNewPage: false });
window.location.reload();
};
return jsxRuntimeExports.jsxs(Tooltip, { children: [
jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", size: "icon", onClick: handleClick, children: jsxRuntimeExports.jsx(lucideReact.Undo2, { className: "size-[1.2rem]" }) }) }),
jsxRuntimeExports.jsx(TooltipContent, { side: "bottom", children: "回到源站" })
] });
}
const buttonGroupVariants = cva(
"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
{
variants: {
orientation: {
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
}
},
defaultVariants: {
orientation: "horizontal"
}
}
);
function ButtonGroup({
className,
orientation,
...props
}) {
return jsxRuntimeExports.jsx(
"div",
{
role: "group",
"data-slot": "button-group",
"data-orientation": orientation,
className: cn$1(buttonGroupVariants({ orientation }), className),
...props
}
);
}
function NewPage() {
return jsxRuntimeExports.jsxs("main", { className: "w-screen h-screen overflow-hidden flex items-stretch justify-between gap-5 px-14 xl:px-16 py-8", children: [
jsxRuntimeExports.jsx("div", { className: "fixed right-3 top-8 z-10", children: jsxRuntimeExports.jsxs(ButtonGroup, { orientation: "vertical", children: [
jsxRuntimeExports.jsx(ButtonGroup, { children: jsxRuntimeExports.jsx(ModeToggle, {}) }),
jsxRuntimeExports.jsx(ButtonGroup, { children: jsxRuntimeExports.jsx(ToOriginPageButton, {}) })
] }) }),
jsxRuntimeExports.jsx(Streamers, {}),
jsxRuntimeExports.jsx(ChatHistoryPanel, {})
] });
}
const style = "body{background-color:var(--color-background)}";
var M = (e, i2, s2, u, m, a2, l, h) => {
let d = document.documentElement, w = ["light", "dark"];
function p(n2) {
(Array.isArray(e) ? e : [e]).forEach((y) => {
let k = y === "class", S = k && a2 ? m.map((f) => a2[f] || f) : m;
k ? (d.classList.remove(...S), d.classList.add(a2 && a2[n2] ? a2[n2] : n2)) : d.setAttribute(y, n2);
}), R(n2);
}
function R(n2) {
h && w.includes(n2) && (d.style.colorScheme = n2);
}
function c() {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
if (u) p(u);
else try {
let n2 = localStorage.getItem(i2) || s2, y = l && n2 === "system" ? c() : n2;
p(y);
} catch (n2) {
}
};
var x = React__namespace.createContext(void 0), U = { setTheme: (e) => {
}, themes: [] }, z = () => {
var e;
return (e = React__namespace.useContext(x)) != null ? e : U;
};
React__namespace.memo(({ forcedTheme: e, storageKey: i2, attribute: s2, enableSystem: u, enableColorScheme: m, defaultTheme: a2, value: l, themes: h, nonce: d, scriptProps: w }) => {
let p = JSON.stringify([s2, i2, a2, e, h, l, u, m]).slice(1, -1);
return React__namespace.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
});
const Toaster2 = ({ ...props }) => {
const { theme = "system" } = z();
return jsxRuntimeExports.jsx(
Toaster$1,
{
theme,
className: "toaster group",
icons: {
success: jsxRuntimeExports.jsx(lucideReact.CircleCheck, { className: "size-5 text-white fill-green-500" }),
info: jsxRuntimeExports.jsx(lucideReact.InfoIcon, { className: "size-5 text-white fill-blue-500" }),
warning: jsxRuntimeExports.jsx(lucideReact.TriangleAlert, { className: "size-5 text-white fill-amber-500" }),
error: jsxRuntimeExports.jsx(lucideReact.CircleX, { className: "size-5 text-white fill-red-500" }),
loading: jsxRuntimeExports.jsx(lucideReact.Loader2Icon, { className: "size-4.5 animate-spin" })
},
style: {
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)"
},
...props
}
);
};
function ToNewPageButton() {
const setGlobalSetting = jotai.useSetAtom(globalSettingAtom);
const handleClick = () => {
setGlobalSetting({ enableNewPage: true });
window.location.reload();
};
return jsxRuntimeExports.jsx(
"button",
{
style: {
position: "fixed",
padding: "2px 6px",
borderRadius: 6,
outline: 0,
border: "1px solid #000",
zIndex: 99999,
left: 10,
top: 10,
background: "rgba(255 255 255 /.9)",
color: "#000"
},
onClick: handleClick,
children: "去新版"
}
);
}
function removeStyle() {
document.querySelectorAll("style").forEach((styleDom) => {
if (!(styleDom.id === "artplayer-style" ||
/tailwindcss/.test(styleDom.textContent) ||
/data-sonner-toaster/.test(styleDom.textContent))) {
styleDom.remove();
}
});
}
function mount() {
injectCSS(style);
document.querySelectorAll("audio").forEach((item) => item.setAttribute("src", ""));
document.title = document.title + "(new)";
document.body.innerHTML = "";
const rootDiv = document.createElement("div");
rootDiv.id = "root";
document.body.appendChild(rootDiv);
ReactDOM$1.createRoot(rootDiv).render(
jsxRuntimeExports.jsx(React.StrictMode, { children: jsxRuntimeExports.jsxs(ThemeProvider, { children: [
jsxRuntimeExports.jsx(NewPage, {}),
jsxRuntimeExports.jsx(Toaster2, { position: "top-center" })
] }) })
);
removeStyle();
}
function bootstrap() {
const settingStr = localStorage.getItem(
`${"cx-style"}-global_setting`
);
if (settingStr) {
const setting = JSON.parse(settingStr);
if (setting.enableNewPage) {
mount();
return;
}
}
const toggleBtnContainer = document.createElement("div");
document.body.appendChild(toggleBtnContainer);
ReactDOM$1.createRoot(toggleBtnContainer).render(
jsxRuntimeExports.jsx(React.StrictMode, { children: jsxRuntimeExports.jsx(ToNewPageButton, {}) })
);
}
bootstrap();
})(React, ReactDOM, jotai, jotaiVanillaUtils, flvjs, COS, clsx, LucideReact, ReactHookForm);
