@luxonis/visualizer-protobuf 2.44.0 → 2.45.0

package/dist/{index-JW_1o4zI.js → index-DUrzP-j-.js}

@@ -1,11 +1,11 @@
-import { d as dist$1, e as estimateObjectSize, r as reportError, A as AppError, b as baseFlatten, a as baseEach, c as baseIteratee, f as baseDifference, g as getTag, h as baseKeys, i as baseIsEqual, j as castPath, t as toKey, k as baseGet, l as hasIn, s as sendNotification, m as shallowequal, u as useGuaranteedContext, n as getPanelIdsInsideTabPanels, o as getPanelTypeFromId, T as TAB_PANEL_TYPE, p as removePanelFromTabPanel, q as getPanelIdForType, v as getPathFromNode, w as updateTabPanelLayout, x as getSaveConfigsPayloadForAddedPanel, y as replaceAndRemovePanels, z as inlineTabPanelLayouts, B as getAllPanelIds, C as getConfigsForNestedPanelsInsideTab, D as reorderTabWithinTabPanel, E as moveTabBetweenTabPanels, F as isTabPanelConfig, G as DEFAULT_TAB_PANEL_CONFIG, H as addPanelToTab, I as createAddUpdates, J as filterMap, L as Logger, K as uniq$2, M as useShallowMemo, N as CurrentLayoutContext, O as MessageOrderTracker, P as AppConfigurationContext, _ as __assign$8, Q as __rest$5, R as __spreadArray$5 } from './tslib.es6-C73eoP_E.js';
+import { d as dist$1, e as estimateObjectSize, r as reportError, A as AppError, b as baseFlatten, a as baseEach, c as baseIteratee, f as baseDifference, g as getTag, h as baseKeys, i as baseIsEqual, j as castPath, t as toKey, k as baseGet, l as hasIn, s as sendNotification, m as shallowequal, u as useGuaranteedContext, n as getPanelIdsInsideTabPanels, o as getPanelTypeFromId, T as TAB_PANEL_TYPE, p as removePanelFromTabPanel, q as getPanelIdForType, v as getPathFromNode, w as updateTabPanelLayout, x as getSaveConfigsPayloadForAddedPanel, y as replaceAndRemovePanels, z as inlineTabPanelLayouts, B as getAllPanelIds, C as getConfigsForNestedPanelsInsideTab, D as reorderTabWithinTabPanel, E as moveTabBetweenTabPanels, F as isTabPanelConfig, G as DEFAULT_TAB_PANEL_CONFIG, H as addPanelToTab, I as createAddUpdates, J as filterMap, L as Logger, K as uniq$2, M as useShallowMemo, N as CurrentLayoutContext, O as MessageOrderTracker, P as AppConfigurationContext, _ as __assign$8, Q as __rest$5, R as __spreadArray$5 } from './tslib.es6-C2WzYB9K.js';
 import { w as wrap$3, p as proxy } from './comlink-DHMAu6X7.js';
 import { u as uint8ArrayToUint16Array } from './utils-Hzt3wxhG.js';
-import { B as BinaryOpcode } from './FoxgloveServer-C39Uooyk.js';
-import { g as getDefaultExportFromCjs, c as commonjsGlobal } from './_commonjsHelpers-E-ZsRS8r.js';
+import { p as protobufSchemaNameToType, g as getDefaultExportFromCjs, c as commonjsGlobal } from './protobuf-DaN_RVVA.js';
 import * as React$1 from 'react';
 import React__default, { useRef, useMemo, createContext, useContext, forwardRef, createElement, useState, Component, useCallback, useEffect, useLayoutEffect, useReducer, useImperativeHandle, Fragment as Fragment$1, Suspense } from 'react';
-import { p as parseFoxgloveMessage } from './foxglove-protocol-CYoMweAY.js';
+import { B as BinaryOpcode } from './FoxgloveServer-DNo9aiV3.js';
+import { p as parseFoxgloveMessage } from './foxglove-protocol-DUzk1IXN.js';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { getLeaves, createRemoveUpdate, updateTree, createHideUpdate, createDragToUpdates, getNodeAtPath, MosaicContext, MosaicWindowContext } from 'react-mosaic-component';
@@ -26,7 +26,7 @@ import { defineGlobalStyles, defineTokens as defineTokens$1, defineKeyframes, de
 
 var e=[],t$1=[];function n$1(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t$1[u]={}),a=t$1[u]&&t$1[u][s]?t$1[u][s]:t$1[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$b = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-700: oklch(0.373 0.034 259.733);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --font-weight-semibold: 600;\n    --radius-lg: 0.5rem;\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    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\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentColor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .visible {\n    visibility: visible;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\[\\#d3d3d3d9\\] {\n    border-color: #d3d3d3d9;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .text-\\[14px\\]\\/\\[14px\\] {\n    font-size: 14px;\n    line-height: 14px;\n  }\n  .text-\\[20px\\]\\/\\[20px\\] {\n    font-size: 20px;\n    line-height: 20px;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .xl\\:flex-row {\n    @media (width >= 80rem) {\n      flex-direction: row;\n    }\n  }\n  .xl\\:items-end {\n    @media (width >= 80rem) {\n      align-items: flex-end;\n    }\n  }\n  .xl\\:pb-\\[2px\\] {\n    @media (width >= 80rem) {\n      padding-bottom: 2px;\n    }\n  }\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-outline-style: solid;\n    }\n  }\n}\n";
+var css$b = "/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-700: oklch(0.373 0.034 259.733);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --font-weight-semibold: 600;\n    --radius-lg: 0.5rem;\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    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\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: color-mix(in oklab, currentColor 50%, transparent);\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .visible {\n    visibility: visible;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\[\\#d3d3d3d9\\] {\n    border-color: #d3d3d3d9;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .text-\\[14px\\]\\/\\[14px\\] {\n    font-size: 14px;\n    line-height: 14px;\n  }\n  .text-\\[20px\\]\\/\\[20px\\] {\n    font-size: 20px;\n    line-height: 20px;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .xl\\:flex-row {\n    @media (width >= 80rem) {\n      flex-direction: row;\n    }\n  }\n  .xl\\:items-end {\n    @media (width >= 80rem) {\n      align-items: flex-end;\n    }\n  }\n  .xl\\:pb-\\[2px\\] {\n    @media (width >= 80rem) {\n      padding-bottom: 2px;\n    }\n  }\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n";
 n$1(css$b,{});
 
 // This Source Code Form is subject to the terms of the Mozilla Public
@@ -448,20 +448,19 @@ class Condvar {
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
 const MAX_SAMPLE_SIZE = 100;
+function constructKeyForTopicRenderMetrics(key, topic) {
+  return `${key}:${topic}`;
+}
 function bytesToMegabits(bytes) {
   return bytes / (1024 * 1024) * 8;
 }
-class EventMetricsManager {
+class MetricsManager {
   metrics = {};
-  registerEvent(topic) {
-    const currentTime = performance.now();
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    this.metrics[topic] ??= [];
-    this.metrics[topic].unshift(currentTime);
-    if (this.metrics[topic].length > MAX_SAMPLE_SIZE) {
-      this.metrics[topic].length = MAX_SAMPLE_SIZE;
-    }
+  getMetrics() {
+    return this.metrics;
   }
+}
+class EventMetricsManager extends MetricsManager {
   calculate(topic) {
     const topicMetrics = this.metrics[topic];
     if (!topicMetrics) {
@@ -477,20 +476,17 @@ class EventMetricsManager {
     const fps = 1_000 / (totalInterval / (topicMetrics.length - 1));
     return Math.round(fps);
   }
-}
-class ThroughputMetricsManager {
-  metrics = {};
-  registerEvent(topic, value) {
-    const timestamp = performance.now();
+  registerEvent(topic) {
+    const currentTime = performance.now();
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     this.metrics[topic] ??= [];
-    this.metrics[topic].unshift({
-      timestamp,
-      value
-    });
+    this.metrics[topic].unshift(currentTime);
     if (this.metrics[topic].length > MAX_SAMPLE_SIZE) {
       this.metrics[topic].length = MAX_SAMPLE_SIZE;
     }
   }
+}
+class ThroughputMetricsManager extends MetricsManager {
   calculate(topic) {
     const topicMetrics = this.metrics[topic];
     if (!topicMetrics || topicMetrics.length < 2 || !topicMetrics.at(0) || !topicMetrics.at(-1)) {
@@ -514,7 +510,19 @@ class ThroughputMetricsManager {
     // Return rounded value
     return Number(bytesToMegabits(bytesPerSecond).toFixed(2));
   }
+  registerEvent(topic, value) {
+    const timestamp = performance.now();
+    this.metrics[topic] ??= [];
+    this.metrics[topic].unshift({
+      timestamp,
+      value
+    });
+    if (this.metrics[topic].length > MAX_SAMPLE_SIZE) {
+      this.metrics[topic].length = MAX_SAMPLE_SIZE;
+    }
+  }
 }
+const [globalInputEventMetricsManager, globalDecodeMetricsManager, globalRenderMetricsManager, globalThroughputMetricsManager] = [new EventMetricsManager(), new EventMetricsManager(), new EventMetricsManager(), new ThroughputMetricsManager()];
 
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v2.0. If a copy of the MPL was not distributed with this
@@ -570,7 +578,7 @@ class DepthToPointcloudWorkerPool {
     this.workerApis = new Array(WORKER_COUNT).fill(undefined).map(() => wrap$3(new Worker(new URL("pointcloudFromDepth.worker-hil48rbC.js", import.meta.url), {
       type: "module"
     })));
-    this.#metrics = new EventMetricsManager();
+    this.#metrics = globalInputEventMetricsManager;
     this.#metrics.registerEvent("pcl-pool.frameInput");
   }
   async queueDepthFrame(data) {
@@ -768,7 +776,7 @@ class DepthToPointcloudWorkerPool {
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
 function initWorker(callback) {
-  const workerWrap = wrap$3(new Worker(new URL("deserialization.worker-BKq1x9xw.js", import.meta.url), {
+  const workerWrap = wrap$3(new Worker(new URL("deserialization.worker-y8Hqp0K3.js", import.meta.url), {
     type: "module",
     name: `message-decoder`
   }));
@@ -889,6 +897,73 @@ class PoitCloudSyncFramework {
   }
 }
 
+class EventLoopDelaySampler {
+  lastObservedTime = performance.now();
+  measuredDelay = 0;
+  constructor(refreshInterval = 500) {
+    this.intervalId = setInterval(() => {
+      const now = performance.now();
+      this.measuredDelay = now - this.lastObservedTime - refreshInterval;
+      this.lastObservedTime = now;
+    }, refreshInterval);
+  }
+  getDelay() {
+    return this.measuredDelay;
+  }
+  dispose() {
+    clearInterval(this.intervalId);
+  }
+}
+
+class RateLimiter {
+  lastObservedState = 1;
+  isFlagUp = false;
+  eventLoopDelaySampler = new EventLoopDelaySampler();
+  constructor(thresholds, handleRateLimiterStateChange, refreshInterval = 1000) {
+    this.thresholds = thresholds;
+    this.handleRateLimiterStateChange = handleRateLimiterStateChange;
+    this.refreshInterval = refreshInterval;
+    // Sort thresholds by descending delay cap
+    // This way we can find the first threshold that is lower than the current event loop delay easily
+    this.thresholds = thresholds.sort((a, b) => b.delayCap - a.delayCap);
+    this.intervalId = setInterval(() => {
+      this.refreshRateLimiterState();
+    }, refreshInterval);
+  }
+  dispose() {
+    this.eventLoopDelaySampler.dispose();
+    clearInterval(this.intervalId);
+  }
+  refreshRateLimiterState() {
+    // If we don't know about event loop delay, we can't do anything and return 1
+    if (!this.eventLoopDelaySampler.getDelay()) {
+      return this.updateModuloCoefficient(1);
+    }
+
+    // Find the first threshold which is smaller than the current event loop delay
+    const threshold = this.thresholds.find(threshold => threshold.delayCap <= this.eventLoopDelaySampler.getDelay());
+
+    // If all caps are higher than the current event loop delay, Viewer is managing the traffic fine -> return 1
+    if (!threshold) {
+      return this.updateModuloCoefficient(1);
+    }
+    this.updateModuloCoefficient(threshold.moduloCoefficient);
+  }
+  updateModuloCoefficient(newRecommendedModuloCoefficient) {
+    // If previous value is the same do nothing or the flag is not up yet
+    if (this.lastObservedState === newRecommendedModuloCoefficient || !this.isFlagUp) {
+      return;
+    }
+
+    // When we first encounter modulo coefficient > 1, we need to set the flag to true as a warning for next time
+    this.isFlagUp = newRecommendedModuloCoefficient > 1;
+
+    // Else update the value and notify the listeners about the new recommended modulo coefficient
+    this.lastObservedState = newRecommendedModuloCoefficient;
+    this.handleRateLimiterStateChange(newRecommendedModuloCoefficient);
+  }
+}
+
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
@@ -921,15 +996,40 @@ class FoxgloveConnection {
   skipPoitcloud = false;
   problems = new ProblemManager();
   resolutions = new Map();
-  inputMetrics = new EventMetricsManager();
-  throughputMetrics = new ThroughputMetricsManager();
-  decodeMetrics = new EventMetricsManager();
+  inputMetrics = globalInputEventMetricsManager;
+  decodeMetrics = globalDecodeMetricsManager;
+  throughputMetrics = globalThroughputMetricsManager;
   PoitCloudSyncFramework = new PoitCloudSyncFramework();
   depthToPointcloudWorkerPool = new DepthToPointcloudWorkerPool((event, frame, message) => {
     this.submitPoitcloudFrameCallback(event, frame, message);
   });
   // message handler
 
+  rateLimitModCoefficient = 1;
+  rateLimitCounter = {
+    image: 0,
+    pointCloud: 0,
+    annotations: 0
+  };
+  rateLimiter = new RateLimiter([{
+    delayCap: 100,
+    moduloCoefficient: 2
+  }, {
+    delayCap: 200,
+    moduloCoefficient: 3
+  }, {
+    delayCap: 300,
+    moduloCoefficient: 4
+  }, {
+    delayCap: 400,
+    moduloCoefficient: 5
+  }, {
+    delayCap: 500,
+    moduloCoefficient: 10
+  }], newValue => {
+    console.warn(`Setting rate limiting coefficient to ${newValue}`);
+    this.rateLimitModCoefficient = newValue;
+  });
   topics = {};
   constructor(id) {
     this.id = id;
@@ -941,7 +1041,7 @@ class FoxgloveConnection {
   }
   getTopicMetrics(topic) {
     return {
-      incomingMessagesFps: this.inputMetrics.calculate(topic),
+      incomingMessagesFps: this.inputMetrics.calculate(constructKeyForTopicRenderMetrics("renderImageFrame", topic)),
       decodedMessagesFps: this.decodeMetrics.calculate(topic),
       messageThroughput: this.throughputMetrics.calculate(topic),
       resolutions: this.resolutions
@@ -951,7 +1051,19 @@ class FoxgloveConnection {
     return dist$1.fromMillis(Date.now());
   }
   onMessagePacket(event, errorCallback) {
-    this.inputMetrics.registerEvent(event.data.topic);
+    const [imageFrameMetricsKey, annotationsFrameMetricsKey, pointCloudFrameMetricsKey] = React__default.useMemo(() => {
+      return [constructKeyForTopicRenderMetrics("incomingImageFrame", event.data.topic), constructKeyForTopicRenderMetrics("incomingAnnotationsFrame", event.data.topic), constructKeyForTopicRenderMetrics("incomingPointCloudFrame", event.data.topic)];
+    }, [event.data.topic]);
+    const packetType = protobufSchemaNameToType(event.data.schema);
+    const rateLimiterCounterForType = this.rateLimitCounter[packetType];
+    this.rateLimitCounter[packetType] = (rateLimiterCounterForType + 1) % this.rateLimitModCoefficient;
+
+    // If the rate limiting coefficient is not 1 we want to skip messages which
+    if (this.isMessageTypeDominant(packetType, event.data.topic) && this.rateLimitCounter[packetType] !== 0) {
+      console.warn(`Skipping message of type ${packetType} due to rate limiting in topic ${event.data.topic}.`);
+      return;
+    }
+    this.inputMetrics.registerEvent(packetType === "image" ? imageFrameMetricsKey : packetType === "pointCloud" ? pointCloudFrameMetricsKey : annotationsFrameMetricsKey);
     this.throughputMetrics.registerEvent(event.data.topic, event.data.buffer.byteLength);
     this.messageHandler.handle(event.data, errorCallback);
   }
@@ -1084,6 +1196,19 @@ class FoxgloveConnection {
     };
     await this.listener(newPlayerState);
   });
+  isMessageTypeDominant(packetType, topic) {
+    const fpsPerPacketTypeList = [{
+      packetType: "image",
+      incomingFps: globalInputEventMetricsManager.calculate(constructKeyForTopicRenderMetrics("incomingImageFrame", topic))
+    }, {
+      packetType: "annotations",
+      incomingFps: globalInputEventMetricsManager.calculate(constructKeyForTopicRenderMetrics("incomingAnnotationsFrame", topic))
+    }, {
+      packetType: "pointCloud",
+      incomingFps: globalInputEventMetricsManager.calculate(constructKeyForTopicRenderMetrics("incomingPointCloudFrame", topic))
+    }].sort((a, b) => b.incomingFps - a.incomingFps);
+    return fpsPerPacketTypeList.at(0)?.packetType === packetType;
+  }
 }
 
 // biome-ignore lint/suspicious/noExplicitAny: See https://github.com/biomejs/biome/issues/4906
@@ -19974,7 +20099,7 @@ class WebRtcBridge extends ArtificialWorker {
   constructor(automaticTokenRefresh) {
     super();
     this.automaticTokenRefresh = automaticTokenRefresh;
-    this.#worker = new Worker(new URL("worker-ChOPGWcQ.js", import.meta.url), {
+    this.#worker = new Worker(new URL("worker-DGLIx_li.js", import.meta.url), {
       type: "module"
     });
     this.#setupArtificialWorker();
@@ -20191,7 +20316,7 @@ class VisualizerConnection extends FoxgloveConnection {
     let worker;
     if (type === "ws") {
       this.#url = data.connectionUrl;
-      worker = new Worker(new URL("worker-BCJnECSn.js", import.meta.url), {
+      worker = new Worker(new URL("worker-CHw4c4uq.js", import.meta.url), {
         type: "module"
       });
     } else {
@@ -34420,7 +34545,7 @@ const threeDee$2 = {
   yDeviationHelp: "The Y standard deviation to publish with pose estimates",
   // HUD Items and empty states
   noImageTopicsAvailable: "Waiting for image messages to arrive.",
-  imageTopicDNE: "Stream not found",
+  imageTopicDNE: "Stream is loading...",
   calibrationTopicDNE: "Calibration topic does not exist.",
   imageAndCalibrationDNE: "Image and calibration topics do not exist.",
   waitingForCalibrationAndImages: "Waiting for messages…",
@@ -86606,7 +86731,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-BhMsFlKj.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-CqMt_2D7.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -86617,7 +86742,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-_Reh-70u.js').then(m => m.cpp());
+            return import('./index-CvRarm-Z.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86625,7 +86750,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-_Reh-70u.js').then(m => m.cpp());
+            return import('./index-CvRarm-Z.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86645,7 +86770,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-CUGtBqn4.js').then(m => m.go());
+            return import('./index-BscWPxPB.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86660,7 +86785,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-BTV3yGFf.js').then(m => m.java());
+            return import('./index-DVqoKIqv.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86676,7 +86801,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-aUJRZxmm.js').then(m => m.json());
+            return import('./index-B7UcS8L9.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86690,14 +86815,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-BzDi48AW.js').then(m => m.less());
+            return import('./index-BocHZGIh.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-DXCv8tws.js').then(m => m.liquid());
+            return import('./index-BWhbg1Ym.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86723,7 +86848,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-BrXP6SIZ.js').then(m => m.php());
+            return import('./index-B7X30dhh.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86740,28 +86865,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-U1lmcSHD.js').then(m => m.python());
+            return import('./index-DU-cOOXF.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-Bsjq5fXE.js').then(m => m.rust());
+            return import('./index-DsslwFkg.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-DKFF_z4v.js').then(m => m.sass({ indented: true }));
+            return import('./index-BwufpqIX.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-DKFF_z4v.js').then(m => m.sass());
+            return import('./index-BwufpqIX.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86792,7 +86917,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-Dy_V-DfR.js').then(m => m.wast());
+            return import('./index-DPzSleUy.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86800,7 +86925,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-C9o4w-t2.js').then(m => m.xml());
+            return import('./index-DmjG8EP6.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86808,7 +86933,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-CGiadoVA.js').then(m => m.yaml());
+            return import('./index-BWanP6r1.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -87604,13 +87729,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index--R8PL3a1.js').then(m => m.vue());
+            return import('./index-BFwogXBZ.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-DR0APcXh.js').then(m => m.angular());
+            return import('./index-uKdBgi5l.js').then(m => m.angular());
         }
     })
 ];
@@ -165796,13 +165921,18 @@ function createEventLoopDelaySampler() {
 var css$1 = "@layer reset, base, tokens, recipes, utilities;\n\n@layer reset{\n  html,:host {\n    --font-fallback: 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';\n    -webkit-text-size-adjust: 100%;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -moz-tab-size: 4;\n    tab-size: 4;\n    -webkit-tap-highlight-color: transparent;\n    line-height: 1.5;\n    font-family: var(--global-font-body, var(--font-fallback));\n}\n\n  *,::before,::after,::backdrop,::file-selector-button {\n    margin: 0px;\n    padding: 0px;\n    box-sizing: border-box;\n    border-width: 0px;\n    border-style: solid;\n    border-color: var(--global-color-border, currentColor);\n}\n\n  hr {\n    height: 0px;\n    color: inherit;\n    border-top-width: 1px;\n}\n\n  body {\n    height: 100%;\n    line-height: inherit;\n}\n\n  img {\n    border-style: none;\n}\n\n  img,svg,video,canvas,audio,iframe,embed,object {\n    display: block;\n    vertical-align: middle;\n}\n\n  img,video {\n    max-width: 100%;\n    height: auto;\n}\n\n  h1,h2,h3,h4,h5,h6 {\n    text-wrap: balance;\n    font-size: inherit;\n    font-weight: inherit;\n}\n\n  p,h1,h2,h3,h4,h5,h6 {\n    overflow-wrap: break-word;\n}\n\n  ol,ul,menu {\n    list-style: none;\n}\n\n  button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {\n    appearance: button;\n    -webkit-appearance: button;\n}\n\n  button,input,optgroup,select,textarea,::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    background: var(--colors-transparent);\n}\n\n  ::placeholder {\n    opacity: 1;\n    --placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent);\n    color: var(--global-color-placeholder, var(--placeholder-fallback));\n}\n\n  textarea {\n    resize: vertical;\n}\n\n  table {\n    text-indent: 0px;\n    border-collapse: collapse;\n    border-color: inherit;\n}\n\n  summary {\n    display: list-item;\n}\n\n  small {\n    font-size: 80%;\n}\n\n  sub,sup {\n    position: relative;\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n}\n\n  sub {\n    bottom: -0.25em;\n}\n\n  sup {\n    top: -0.5em;\n}\n\n  dialog {\n    padding: 0px;\n}\n\n  a {\n    color: inherit;\n    text-decoration: inherit;\n}\n\n  abbr:where([title]) {\n    text-decoration: underline dotted;\n}\n\n  b,strong {\n    font-weight: bolder;\n}\n\n  code,kbd,samp,pre {\n    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';\n    font-feature-settings: normal;\n    font-variation-settings: normal;\n    font-family: var(--global-font-mono, var(--font-mono-fallback));\n    font-size: 1em;\n}\n\n  progress {\n    vertical-align: baseline;\n}\n\n  ::-webkit-search-decoration,::-webkit-search-cancel-button {\n    -webkit-appearance: none;\n}\n\n  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {\n    height: auto;\n}\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n}\n\n  :-moz-focusring {\n    outline: auto;\n}\n\n  [hidden]:where(:not([hidden='until-found'])) {\n    display: none !important;\n}\n}\n\n@layer base{\n  :root {\n    --made-with-panda: '🐼';\n}\n\n  * {\n    box-sizing: border-box;\n    font-family: var(--fonts-body);\n}\n\n  html,body {\n    margin: var(--spacing-0);\n    padding: var(--spacing-0);\n}\n\n  #root {\n    display: flex;\n    height: 100vh;\n    flex-direction: column;\n}\n\n  html {\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n}\n\n  body {\n    background: var(--colors-background);\n    color: var(--colors-foreground);\n    font-family: var(--fonts-sans);\n}\n\n  button {\n    color: inherit;\n    outline: 2px solid transparent;\n}\n\n  *,::before,::after,::backdrop {\n    --blur: /*-*/ /*-*/;\n    --brightness: /*-*/ /*-*/;\n    --contrast: /*-*/ /*-*/;\n    --grayscale: /*-*/ /*-*/;\n    --hue-rotate: /*-*/ /*-*/;\n    --invert: /*-*/ /*-*/;\n    --saturate: /*-*/ /*-*/;\n    --sepia: /*-*/ /*-*/;\n    --drop-shadow: /*-*/ /*-*/;\n    --backdrop-blur: /*-*/ /*-*/;\n    --backdrop-brightness: /*-*/ /*-*/;\n    --backdrop-contrast: /*-*/ /*-*/;\n    --backdrop-grayscale: /*-*/ /*-*/;\n    --backdrop-hue-rotate: /*-*/ /*-*/;\n    --backdrop-invert: /*-*/ /*-*/;\n    --backdrop-opacity: /*-*/ /*-*/;\n    --backdrop-saturate: /*-*/ /*-*/;\n    --backdrop-sepia: /*-*/ /*-*/;\n    --gradient-from-position: /*-*/ /*-*/;\n    --gradient-to-position: /*-*/ /*-*/;\n    --gradient-via-position: /*-*/ /*-*/;\n    --scroll-snap-strictness: proximity;\n    --border-spacing-x: 0;\n    --border-spacing-y: 0;\n    --translate-x: 0;\n    --translate-y: 0;\n    --rotate: 0;\n    --rotate-x: 0;\n    --rotate-y: 0;\n    --skew-x: 0;\n    --skew-y: 0;\n    --scale-x: 1;\n    --scale-y: 1;\n}\n}\n\n@layer tokens{\n  :where(:root, :host) {\n    --aspect-ratios-square: 1 / 1;\n    --aspect-ratios-landscape: 4 / 3;\n    --aspect-ratios-portrait: 3 / 4;\n    --aspect-ratios-wide: 16 / 9;\n    --aspect-ratios-ultrawide: 18 / 5;\n    --aspect-ratios-golden: 1.618 / 1;\n    --letter-spacings-tighter: -0.05em;\n    --letter-spacings-tight: -0.025em;\n    --letter-spacings-normal: 0em;\n    --letter-spacings-wide: 0.025em;\n    --letter-spacings-wider: 0.05em;\n    --letter-spacings-widest: 0.1em;\n    --blurs-sm: 4px;\n    --blurs-base: 8px;\n    --blurs-md: 12px;\n    --blurs-lg: 16px;\n    --blurs-xl: 24px;\n    --blurs-2xl: 40px;\n    --blurs-3xl: 64px;\n    --animations-spin: spin 1s linear infinite;\n    --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n    --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --animations-bounce: bounce 1s infinite;\n    --colors-current: currentColor;\n    --colors-black: #000;\n    --colors-white: #fff;\n    --colors-transparent: rgb(0 0 0 / 0);\n    --colors-rose-50: #fff1f2;\n    --colors-rose-100: #ffe4e6;\n    --colors-rose-200: #fecdd3;\n    --colors-rose-300: #fda4af;\n    --colors-rose-400: #fb7185;\n    --colors-rose-500: #f43f5e;\n    --colors-rose-600: #e11d48;\n    --colors-rose-700: #be123c;\n    --colors-rose-800: #9f1239;\n    --colors-rose-900: #881337;\n    --colors-rose-950: #4c0519;\n    --colors-pink-50: #fdf2f8;\n    --colors-pink-100: #fce7f3;\n    --colors-pink-200: #fbcfe8;\n    --colors-pink-300: #f9a8d4;\n    --colors-pink-400: #f472b6;\n    --colors-pink-500: #ec4899;\n    --colors-pink-600: #db2777;\n    --colors-pink-700: #be185d;\n    --colors-pink-800: #9d174d;\n    --colors-pink-900: #831843;\n    --colors-pink-950: #500724;\n    --colors-fuchsia-50: #fdf4ff;\n    --colors-fuchsia-100: #fae8ff;\n    --colors-fuchsia-200: #f5d0fe;\n    --colors-fuchsia-300: #f0abfc;\n    --colors-fuchsia-400: #e879f9;\n    --colors-fuchsia-500: #d946ef;\n    --colors-fuchsia-600: #c026d3;\n    --colors-fuchsia-700: #a21caf;\n    --colors-fuchsia-800: #86198f;\n    --colors-fuchsia-900: #701a75;\n    --colors-fuchsia-950: #4a044e;\n    --colors-purple-50: #faf5ff;\n    --colors-purple-100: #f3e8ff;\n    --colors-purple-200: #e9d5ff;\n    --colors-purple-300: #d8b4fe;\n    --colors-purple-400: #c084fc;\n    --colors-purple-500: #a855f7;\n    --colors-purple-600: #9333ea;\n    --colors-purple-700: #7e22ce;\n    --colors-purple-800: #6b21a8;\n    --colors-purple-900: #581c87;\n    --colors-purple-950: #3b0764;\n    --colors-violet-50: #f5f3ff;\n    --colors-violet-100: #ede9fe;\n    --colors-violet-200: #ddd6fe;\n    --colors-violet-300: #c4b5fd;\n    --colors-violet-400: #a78bfa;\n    --colors-violet-500: #8b5cf6;\n    --colors-violet-600: #7c3aed;\n    --colors-violet-700: #6d28d9;\n    --colors-violet-800: #5b21b6;\n    --colors-violet-900: #4c1d95;\n    --colors-violet-950: #2e1065;\n    --colors-indigo-50: #eef2ff;\n    --colors-indigo-100: #e0e7ff;\n    --colors-indigo-200: #c7d2fe;\n    --colors-indigo-300: #a5b4fc;\n    --colors-indigo-400: #818cf8;\n    --colors-indigo-500: #6366f1;\n    --colors-indigo-600: #4f46e5;\n    --colors-indigo-700: #4338ca;\n    --colors-indigo-800: #3730a3;\n    --colors-indigo-900: #312e81;\n    --colors-indigo-950: #1e1b4b;\n    --colors-blue-50: #eff6ff;\n    --colors-blue-100: #dbeafe;\n    --colors-blue-200: #bfdbfe;\n    --colors-blue-300: #93c5fd;\n    --colors-blue-400: #60a5fa;\n    --colors-blue-500: #3b82f6;\n    --colors-blue-600: #2563eb;\n    --colors-blue-700: #1d4ed8;\n    --colors-blue-800: #1e40af;\n    --colors-blue-900: #1e3a8a;\n    --colors-blue-950: #172554;\n    --colors-sky-50: #f0f9ff;\n    --colors-sky-100: #e0f2fe;\n    --colors-sky-200: #bae6fd;\n    --colors-sky-300: #7dd3fc;\n    --colors-sky-400: #38bdf8;\n    --colors-sky-500: #0ea5e9;\n    --colors-sky-600: #0284c7;\n    --colors-sky-700: #0369a1;\n    --colors-sky-800: #075985;\n    --colors-sky-900: #0c4a6e;\n    --colors-sky-950: #082f49;\n    --colors-cyan-50: #ecfeff;\n    --colors-cyan-100: #cffafe;\n    --colors-cyan-200: #a5f3fc;\n    --colors-cyan-300: #67e8f9;\n    --colors-cyan-400: #22d3ee;\n    --colors-cyan-500: #06b6d4;\n    --colors-cyan-600: #0891b2;\n    --colors-cyan-700: #0e7490;\n    --colors-cyan-800: #155e75;\n    --colors-cyan-900: #164e63;\n    --colors-cyan-950: #083344;\n    --colors-teal-50: #f0fdfa;\n    --colors-teal-100: #ccfbf1;\n    --colors-teal-200: #99f6e4;\n    --colors-teal-300: #5eead4;\n    --colors-teal-400: #2dd4bf;\n    --colors-teal-500: #14b8a6;\n    --colors-teal-600: #0d9488;\n    --colors-teal-700: #0f766e;\n    --colors-teal-800: #115e59;\n    --colors-teal-900: #134e4a;\n    --colors-teal-950: #042f2e;\n    --colors-emerald-50: #ecfdf5;\n    --colors-emerald-100: #d1fae5;\n    --colors-emerald-200: #a7f3d0;\n    --colors-emerald-300: #6ee7b7;\n    --colors-emerald-400: #34d399;\n    --colors-emerald-500: #10b981;\n    --colors-emerald-600: #059669;\n    --colors-emerald-700: #047857;\n    --colors-emerald-800: #065f46;\n    --colors-emerald-900: #064e3b;\n    --colors-emerald-950: #022c22;\n    --colors-green-50: #f0fdf4;\n    --colors-green-100: #dcfce7;\n    --colors-green-200: #bbf7d0;\n    --colors-green-300: #86efac;\n    --colors-green-400: #4ade80;\n    --colors-green-500: #22c55e;\n    --colors-green-600: #16a34a;\n    --colors-green-700: #15803d;\n    --colors-green-800: #166534;\n    --colors-green-900: #14532d;\n    --colors-green-950: #052e16;\n    --colors-lime-50: #f7fee7;\n    --colors-lime-100: #ecfccb;\n    --colors-lime-200: #d9f99d;\n    --colors-lime-300: #bef264;\n    --colors-lime-400: #a3e635;\n    --colors-lime-500: #84cc16;\n    --colors-lime-600: #65a30d;\n    --colors-lime-700: #4d7c0f;\n    --colors-lime-800: #3f6212;\n    --colors-lime-900: #365314;\n    --colors-lime-950: #1a2e05;\n    --colors-yellow-50: #fefce8;\n    --colors-yellow-100: #fef9c3;\n    --colors-yellow-200: #fef08a;\n    --colors-yellow-300: #fde047;\n    --colors-yellow-400: #facc15;\n    --colors-yellow-500: #eab308;\n    --colors-yellow-600: #ca8a04;\n    --colors-yellow-700: #a16207;\n    --colors-yellow-800: #854d0e;\n    --colors-yellow-900: #713f12;\n    --colors-yellow-950: #422006;\n    --colors-amber-50: #fffbeb;\n    --colors-amber-100: #fef3c7;\n    --colors-amber-200: #fde68a;\n    --colors-amber-300: #fcd34d;\n    --colors-amber-400: #fbbf24;\n    --colors-amber-500: #f59e0b;\n    --colors-amber-600: #d97706;\n    --colors-amber-700: #b45309;\n    --colors-amber-800: #92400e;\n    --colors-amber-900: #78350f;\n    --colors-amber-950: #451a03;\n    --colors-orange-50: #fff7ed;\n    --colors-orange-100: #ffedd5;\n    --colors-orange-200: #fed7aa;\n    --colors-orange-300: #fdba74;\n    --colors-orange-400: #fb923c;\n    --colors-orange-500: #f97316;\n    --colors-orange-600: #ea580c;\n    --colors-orange-700: #c2410c;\n    --colors-orange-800: #9a3412;\n    --colors-orange-900: #7c2d12;\n    --colors-orange-950: #431407;\n    --colors-red-50: #fef2f2;\n    --colors-red-100: #fee2e2;\n    --colors-red-200: #fecaca;\n    --colors-red-300: #fca5a5;\n    --colors-red-400: #f87171;\n    --colors-red-500: #ef4444;\n    --colors-red-600: #dc2626;\n    --colors-red-700: #b91c1c;\n    --colors-red-800: #991b1b;\n    --colors-red-900: #7f1d1d;\n    --colors-red-950: #450a0a;\n    --colors-neutral-50: #fafafa;\n    --colors-neutral-100: #f5f5f5;\n    --colors-neutral-200: #e5e5e5;\n    --colors-neutral-300: #d4d4d4;\n    --colors-neutral-400: #a3a3a3;\n    --colors-neutral-500: #737373;\n    --colors-neutral-600: #525252;\n    --colors-neutral-700: #404040;\n    --colors-neutral-800: #262626;\n    --colors-neutral-900: #171717;\n    --colors-neutral-950: #0a0a0a;\n    --colors-stone-50: #fafaf9;\n    --colors-stone-100: #f5f5f4;\n    --colors-stone-200: #e7e5e4;\n    --colors-stone-300: #d6d3d1;\n    --colors-stone-400: #a8a29e;\n    --colors-stone-500: #78716c;\n    --colors-stone-600: #57534e;\n    --colors-stone-700: #44403c;\n    --colors-stone-800: #292524;\n    --colors-stone-900: #1c1917;\n    --colors-stone-950: #0c0a09;\n    --colors-zinc-50: #fafafa;\n    --colors-zinc-100: #f4f4f5;\n    --colors-zinc-200: #e4e4e7;\n    --colors-zinc-300: #d4d4d8;\n    --colors-zinc-400: #a1a1aa;\n    --colors-zinc-500: #71717a;\n    --colors-zinc-600: #52525b;\n    --colors-zinc-700: #3f3f46;\n    --colors-zinc-800: #27272a;\n    --colors-zinc-900: #18181b;\n    --colors-zinc-950: #09090b;\n    --colors-gray-50: #f9fafb;\n    --colors-gray-100: #f3f4f6;\n    --colors-gray-200: #e5e7eb;\n    --colors-gray-300: #d1d5db;\n    --colors-gray-400: #9ca3af;\n    --colors-gray-500: #6b7280;\n    --colors-gray-600: #4b5563;\n    --colors-gray-700: #374151;\n    --colors-gray-800: #1f2937;\n    --colors-gray-900: #111827;\n    --colors-gray-950: #030712;\n    --colors-slate-50: #f8fafc;\n    --colors-slate-100: #f1f5f9;\n    --colors-slate-200: #e2e8f0;\n    --colors-slate-300: #cbd5e1;\n    --colors-slate-400: #94a3b8;\n    --colors-slate-500: #64748b;\n    --colors-slate-600: #475569;\n    --colors-slate-700: #334155;\n    --colors-slate-800: #1e293b;\n    --colors-slate-900: #0f172a;\n    --colors-slate-950: #020617;\n    --colors-grayscale-0: var(--colors-white);\n    --colors-grayscale-50: var(--colors-zinc-50);\n    --colors-grayscale-100: var(--colors-zinc-100);\n    --colors-grayscale-200: var(--colors-zinc-200);\n    --colors-grayscale-300: var(--colors-zinc-300);\n    --colors-grayscale-400: var(--colors-zinc-400);\n    --colors-grayscale-500: var(--colors-zinc-500);\n    --colors-grayscale-600: var(--colors-zinc-600);\n    --colors-grayscale-700: var(--colors-zinc-700);\n    --colors-grayscale-800: var(--colors-zinc-800);\n    --colors-grayscale-900: var(--colors-zinc-900);\n    --colors-grayscale-950: var(--colors-zinc-950);\n    --colors-hover-light-success: #ECFDF3d9;\n    --colors-hover-light-warning: #FFFAEBd9;\n    --colors-hover-light-error: #FEF3F2d9;\n    --colors-hover-light-active: #DCEFFCd9;\n    --colors-hover-light-gray: #F2F4F7d9;\n    --colors-hover-dark-success: #12B76Ad9;\n    --colors-hover-dark-warning: #DC6803d9;\n    --colors-hover-dark-error: #F04438d9;\n    --colors-hover-dark-active: #4c4ff1d9;\n    --colors-hover-dark-gray: #667085d9;\n    --colors-light-success: #ECFDF3;\n    --colors-light-warning: #FFFAEB;\n    --colors-light-error: #FEF3F2;\n    --colors-light-active: #DCEFFC;\n    --colors-light-gray: #F2F4F7;\n    --colors-dark-success: #12B76A;\n    --colors-dark-warning: #DC6803;\n    --colors-dark-error: #F04438;\n    --colors-dark-active: #4c4ff1;\n    --colors-dark-gray: #667085;\n    --colors-text-normal: #1D2939;\n    --colors-text-label: #475467;\n    --colors-text-light: #667085;\n    --colors-text-success: #027A48;\n    --colors-text-warning: #B54708;\n    --colors-text-error: #B42318;\n    --colors-text-active: #5724e8;\n    --colors-text-gray: #344054;\n    --colors-decoration-success: #6CE9A6;\n    --colors-decoration-warning: #FEC84B;\n    --colors-decoration-error: #FDA29B;\n    --colors-decoration-active: #8da4f4;\n    --colors-decoration-gray: #D0D5DD;\n    --fonts-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n    --fonts-sans: var(--font-inter, Inter), 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\";\n    --fonts-body: Inter;\n    --fonts-mono: JetBrainsMono;\n    --font-sizes-2xs: 0.5rem;\n    --font-sizes-2xl: 1.5rem;\n    --font-sizes-3xl: 1.875rem;\n    --font-sizes-4xl: 2.25rem;\n    --font-sizes-5xl: 3rem;\n    --font-sizes-6xl: 3.75rem;\n    --font-sizes-7xl: 4.5rem;\n    --font-sizes-8xl: 6rem;\n    --font-sizes-9xl: 8rem;\n    --font-sizes-xxs: 10px;\n    --font-sizes-xs: 12px;\n    --font-sizes-sm: 14px;\n    --font-sizes-primary: 16px;\n    --font-sizes-md: 20px;\n    --font-sizes-lg: 24px;\n    --font-sizes-xl: 32px;\n    --line-heights-3: .75rem;\n    --line-heights-4: 1rem;\n    --line-heights-5: 1.25rem;\n    --line-heights-6: 1.5rem;\n    --line-heights-7: 1.75rem;\n    --line-heights-8: 2rem;\n    --line-heights-9: 2.25rem;\n    --line-heights-10: 2.5rem;\n    --line-heights-none: 1;\n    --line-heights-tight: 1.25;\n    --line-heights-snug: 1.375;\n    --line-heights-normal: 1.5;\n    --line-heights-relaxed: 1.625;\n    --line-heights-loose: 2;\n    --line-heights-sm: 20px;\n    --line-heights-primary: 24px;\n    --line-heights-md: 32px;\n    --line-heights-lg: 38px;\n    --font-weights-thin: 100;\n    --font-weights-extralight: 200;\n    --font-weights-light: 300;\n    --font-weights-normal: 400;\n    --font-weights-medium: 500;\n    --font-weights-semibold: 600;\n    --font-weights-bold: 700;\n    --font-weights-extrabold: 800;\n    --font-weights-black: 900;\n    --font-weights-primary: 400;\n    --font-weights-md: 500;\n    --font-weights-lg: 600;\n    --font-weights-xl: 800;\n    --radii-xs: 0.125rem;\n    --radii-sm: calc(var(--radii-radius) - 4px);\n    --radii-md: calc(var(--radii-radius) - 2px);\n    --radii-lg: var(--radii-radius);\n    --radii-xl: calc(var(--radii-radius) + 4px);\n    --radii-2xl: 1rem;\n    --radii-3xl: 1.5rem;\n    --radii-4xl: 2rem;\n    --radii-full: 9999px;\n    --radii-radius: 0.5rem;\n    --radii-common: 6px;\n    --sizes-0: 0rem;\n    --sizes-1: 0.25rem;\n    --sizes-2: 0.5rem;\n    --sizes-3: 0.75rem;\n    --sizes-4: 1rem;\n    --sizes-5: 1.25rem;\n    --sizes-6: 1.5rem;\n    --sizes-7: 1.75rem;\n    --sizes-8: 2rem;\n    --sizes-9: 2.25rem;\n    --sizes-10: 2.5rem;\n    --sizes-11: 2.75rem;\n    --sizes-12: 3rem;\n    --sizes-14: 3.5rem;\n    --sizes-16: 4rem;\n    --sizes-20: 5rem;\n    --sizes-24: 6rem;\n    --sizes-28: 7rem;\n    --sizes-32: 8rem;\n    --sizes-36: 9rem;\n    --sizes-40: 10rem;\n    --sizes-44: 11rem;\n    --sizes-48: 12rem;\n    --sizes-52: 13rem;\n    --sizes-56: 14rem;\n    --sizes-60: 15rem;\n    --sizes-64: 16rem;\n    --sizes-72: 18rem;\n    --sizes-80: 20rem;\n    --sizes-96: 24rem;\n    --sizes-0\\.5: 0.125rem;\n    --sizes-1\\.5: 0.375rem;\n    --sizes-2\\.5: 0.625rem;\n    --sizes-3\\.5: 0.875rem;\n    --sizes-xs: 20rem;\n    --sizes-sm: 24rem;\n    --sizes-md: 28rem;\n    --sizes-lg: 32rem;\n    --sizes-xl: 36rem;\n    --sizes-2xl: 42rem;\n    --sizes-3xl: 48rem;\n    --sizes-4xl: 56rem;\n    --sizes-5xl: 64rem;\n    --sizes-6xl: 72rem;\n    --sizes-7xl: 80rem;\n    --sizes-8xl: 90rem;\n    --sizes-prose: 65ch;\n    --sizes-full: 100%;\n    --sizes-min: min-content;\n    --sizes-max: max-content;\n    --sizes-fit: fit-content;\n    --sizes-basic-almost-full: 90%;\n    --sizes-card-xs: 175px;\n    --sizes-card-sm: 414px;\n    --sizes-responsive-card-xs: min(95vw,var(--sizes-card-xs));\n    --sizes-responsive-card-sm: min(95vw,var(--sizes-card-sm));\n    --sizes-circle: 40px;\n    --sizes-container-smaller-xxxs: 80px;\n    --sizes-container-smaller-xxs: 120px;\n    --sizes-container-smaller-xs: 290px;\n    --sizes-container-smaller-sm: 410px;\n    --sizes-container-smaller-md: 600px;\n    --sizes-container-bigger-xs: 380px;\n    --sizes-container-xxs: 150px;\n    --sizes-container-xs: 350px;\n    --sizes-container-sm: 640px;\n    --sizes-container-md: 768px;\n    --sizes-container-lg: 1024px;\n    --sizes-container-xl: 1280px;\n    --sizes-container-xxl: 1440px;\n    --sizes-container-content-xl: 729px;\n    --sizes-container-content-2xl: 829px;\n    --sizes-container-grid-base-size: 220px;\n    --sizes-container-grid-label-height: 56px;\n    --sizes-container-grid-grid-gap: 28px;\n    --sizes-container-side-bar-collapsed: 65px;\n    --sizes-container-side-bar-expanded: 210px;\n    --sizes-table-cell-min-width: 200px;\n    --sizes-table-instances-name-cell: 300px;\n    --sizes-table-instances-name: 200px;\n    --sizes-table-instances-cell: 180px;\n    --sizes-sourcecode-width: 40px;\n    --sizes-slider-label: 40px;\n    --sizes-slider-thumb-sm: 16px;\n    --sizes-slider-thumb-lg: 20px;\n    --sizes-skeleton-height: 40px;\n    --sizes-skeleton-width: full;\n    --sizes-skeleton-button-width: 150px;\n    --sizes-skeleton-button-height: var(--sizes-skeleton-height);\n    --sizes-skeleton-input-width: 230px;\n    --sizes-skeleton-input-height: var(--sizes-skeleton-height);\n    --sizes-skeleton-textarea-width: var(--sizes-skeleton-width);\n    --sizes-skeleton-textarea-height: 80px;\n    --sizes-skeleton-avatar-width: var(--sizes-skeleton-height);\n    --sizes-skeleton-avatar-height: var(--sizes-skeleton-height);\n    --sizes-skeleton-grid-width-xs: 32px;\n    --sizes-skeleton-grid-width-sm: 64px;\n    --sizes-skeleton-grid-width-md: 128px;\n    --sizes-skeleton-grid-width-lg: 256px;\n    --sizes-skeleton-grid-width-xl: 512px;\n    --sizes-skeleton-grid-height-xs: 32px;\n    --sizes-skeleton-grid-height-sm: 64px;\n    --sizes-skeleton-grid-height-md: 128px;\n    --sizes-skeleton-grid-height-lg: 256px;\n    --sizes-skeleton-grid-height-xl: 512px;\n    --sizes-skeleton-table-height-sm: 32px;\n    --sizes-skeleton-table-height-md: 64px;\n    --sizes-skeleton-table-height-lg: 128px;\n    --sizes-skeleton-table-height-xl: 256px;\n    --sizes-icon-xxs: 8px;\n    --sizes-icon-xs: 16px;\n    --sizes-icon-sm: 20px;\n    --sizes-icon-md: 24px;\n    --sizes-icon-lg: 32px;\n    --sizes-icon-xl: 40px;\n    --sizes-icon-xxl: 48px;\n    --sizes-icon-smaller-xs: 14px;\n    --sizes-breakpoint-sm: 640px;\n    --sizes-breakpoint-md: 768px;\n    --sizes-breakpoint-lg: 1024px;\n    --sizes-breakpoint-2lg: 1100px;\n    --sizes-breakpoint-xl: 1280px;\n    --sizes-breakpoint-2xl: 1536px;\n    --spacing-0: 0rem;\n    --spacing-1: 0.25rem;\n    --spacing-2: 0.5rem;\n    --spacing-3: 0.75rem;\n    --spacing-4: 1rem;\n    --spacing-5: 1.25rem;\n    --spacing-6: 1.5rem;\n    --spacing-7: 1.75rem;\n    --spacing-8: 2rem;\n    --spacing-9: 2.25rem;\n    --spacing-10: 2.5rem;\n    --spacing-11: 2.75rem;\n    --spacing-12: 3rem;\n    --spacing-14: 3.5rem;\n    --spacing-16: 4rem;\n    --spacing-20: 5rem;\n    --spacing-24: 6rem;\n    --spacing-28: 7rem;\n    --spacing-32: 8rem;\n    --spacing-36: 9rem;\n    --spacing-40: 10rem;\n    --spacing-44: 11rem;\n    --spacing-48: 12rem;\n    --spacing-52: 13rem;\n    --spacing-56: 14rem;\n    --spacing-60: 15rem;\n    --spacing-64: 16rem;\n    --spacing-72: 18rem;\n    --spacing-80: 20rem;\n    --spacing-96: 24rem;\n    --spacing-0\\.5: 0.125rem;\n    --spacing-1\\.5: 0.375rem;\n    --spacing-2\\.5: 0.625rem;\n    --spacing-3\\.5: 0.875rem;\n    --spacing-separator: 10px;\n    --spacing-smaller-xs: 4px;\n    --spacing-smaller-sm: 12px;\n    --spacing-smaller-md: 14px;\n    --spacing-xxs: 6px;\n    --spacing-xs: 8px;\n    --spacing-sm: 16px;\n    --spacing-3xs: 24px;\n    --spacing-md: 32px;\n    --spacing-lg: 64px;\n    --shadows-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    --shadows-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    --shadows-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n    --shadows-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);\n    --shadows-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);\n    --shadows-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n    --shadows-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\n    --borders-none: none;\n    --borders-outline-base: 1px solid var(--colors-light-gray);\n    --borders-border-base: 1px solid var(--colors-decoration-gray);\n    --borders-border-error: 1px solid var(--colors-decoration-error);\n    --borders-border-success: 1px solid var(--colors-decoration-success);\n    --borders-border-active: 1px solid var(--colors-decoration-active);\n    --opacity-90: 0.9;\n    --easings-default: cubic-bezier(0.4, 0, 0.2, 1);\n    --easings-linear: linear;\n    --easings-in: cubic-bezier(0.4, 0, 1, 1);\n    --easings-out: cubic-bezier(0, 0, 0.2, 1);\n    --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --easings-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --durations-fastest: 50ms;\n    --durations-faster: 100ms;\n    --durations-normal: 200ms;\n    --durations-slow: 300ms;\n    --durations-slower: 400ms;\n    --durations-slowest: 500ms;\n    --durations-fast: 150ms;\n    --breakpoints-sm: 640px;\n    --breakpoints-md: 768px;\n    --breakpoints-lg: 1024px;\n    --breakpoints-2lg: 1100px;\n    --breakpoints-xl: 1280px;\n    --breakpoints-2xl: 1536px;\n    --borders-base: 1px solid var(--colors-border);\n    --borders-input: 1px solid var(--colors-input);\n    --borders-primary: 1px solid var(--colors-primary);\n    --borders-destructive: 1px solid var(--colors-destructive);\n    --animations-accordion-down: accordion-down 0.2s ease-out;\n    --animations-accordion-up: accordion-up 0.2s ease-out;\n    --colors-background: var(--colors-grayscale-0);\n    --colors-foreground: var(--colors-grayscale-950);\n    --colors-muted: var(--colors-grayscale-100);\n    --colors-muted-foreground: var(--colors-grayscale-500);\n    --colors-card: var(--colors-grayscale-0);\n    --colors-card-foreground: var(--colors-grayscale-950);\n    --colors-popover: var(--colors-grayscale-0);\n    --colors-popover-foreground: var(--colors-grayscale-950);\n    --colors-border: var(--colors-grayscale-200);\n    --colors-input: var(--colors-grayscale-200);\n    --colors-secondary: var(--colors-grayscale-100);\n    --colors-secondary-foreground: var(--colors-grayscale-900);\n    --colors-accent: var(--colors-grayscale-100);\n    --colors-accent-foreground: var(--colors-grayscale-900);\n    --colors-destructive: var(--colors-red-500);\n    --colors-destructive-foreground: var(--colors-grayscale-50);\n    --colors-ring: var(--colors-grayscale-400);\n    --colors-primary-foreground: var(--colors-grayscale-50);\n    --colors-primary: var(--colors-dark-active);\n    --sizes-icon-primary: var(--sizes-icon-xs);\n}\n\n  .dark {\n    --colors-background: var(--colors-grayscale-950);\n    --colors-foreground: var(--colors-grayscale-50);\n    --colors-muted: var(--colors-grayscale-800);\n    --colors-muted-foreground: var(--colors-grayscale-400);\n    --colors-card: var(--colors-grayscale-950);\n    --colors-card-foreground: var(--colors-grayscale-50);\n    --colors-popover: var(--colors-grayscale-950);\n    --colors-popover-foreground: var(--colors-grayscale-50);\n    --colors-border: var(--colors-grayscale-800);\n    --colors-input: var(--colors-grayscale-800);\n    --colors-secondary: var(--colors-grayscale-800);\n    --colors-secondary-foreground: var(--colors-grayscale-50);\n    --colors-accent: var(--colors-grayscale-800);\n    --colors-accent-foreground: var(--colors-grayscale-50);\n    --colors-destructive: var(--colors-red-700);\n    --colors-destructive-foreground: var(--colors-red-50);\n    --colors-ring: var(--colors-grayscale-300);\n    --colors-primary-foreground: var(--colors-grayscale-900)\n}\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n}\n}\n\n  @keyframes ping {\n    75%,100% {\n      transform: scale(2);\n      opacity: 0;\n}\n}\n\n  @keyframes pulse {\n    50% {\n      opacity: 0.5;\n}\n}\n\n  @keyframes bounce {\n    0%,100% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8,0,1,1);\n}\n\n    50% {\n      transform: none;\n      animation-timing-function: cubic-bezier(0,0,0.2,1);\n}\n}\n\n  @keyframes enter {\n    from {\n      opacity: var(--shadow-panda-enter-opacity, 1);\n      transform: translate3d(var(--shadow-panda-enter-translate-x, 0), var(--shadow-panda-enter-translate-y, 0), 0) scale3d(var(--shadow-panda-enter-scale, 1), var(--shadow-panda-enter-scale, 1), var(--shadow-panda-enter-scale, 1)) rotate(var(--shadow-panda-enter-rotate, 0));\n}\n}\n\n  @keyframes exit {\n    to {\n      opacity: var(--shadow-panda-exit-opacity, 1);\n      transform: translate3d(var(--shadow-panda-exit-translate-x, 0), var(--shadow-panda-exit-translate-y, 0), 0) scale3d(var(--shadow-panda-exit-scale, 1), var(--shadow-panda-exit-scale, 1), var(--shadow-panda-exit-scale, 1)) rotate(var(--shadow-panda-exit-rotate, 0));\n}\n}\n\n  @keyframes accordion-down {\n    from {\n      height: var(--sizes-0);\n}\n\n    to {\n      height: var(--radix-accordion-content-height);\n}\n}\n\n  @keyframes accordion-up {\n    from {\n      height: var(--radix-accordion-content-height);\n}\n\n    to {\n      height: var(--sizes-0);\n}\n}\n}\n\n@layer recipes{\n  @layer _base{\n\n    .badge {\n      display: inline-flex;\n      border-radius: var(--radii-full);\n      border: var(--borders-base);\n      padding-inline: var(--spacing-2\\.5);\n      padding-block: var(--spacing-0\\.5);\n      font-size: 0.75rem;\n      line-height: 1rem;\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      align-items: center;\n      font-weight: var(--font-weights-semibold);\n}\n\n    .badge:is(:focus, [data-focus]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .button {\n      display: inline-flex;\n      border-radius: var(--radii-md);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      gap: var(--spacing-2);\n      align-items: center;\n      justify-content: center;\n      font-weight: var(--font-weights-medium);\n}\n\n    .button:is(:disabled, [disabled], [data-disabled]) {\n      pointer-events: none;\n      opacity: 50%;\n}\n\n    .button:is(:focus-visible, [data-focus-visible]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .label {\n      font-size: 0.875rem;\n      line-height: var(--line-heights-none);\n      font-weight: var(--font-weights-medium);\n}\n\n    .peer:is(:disabled, [disabled], [data-disabled]) ~ .label {\n      cursor: not-allowed;\n      opacity: 0.7;\n}\n\n    .separator {\n      background: var(--colors-border);\n      flex-shrink: 0;\n}\n\n    .tableRow {\n      border-bottom: var(--borders-base);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .tableRow[data-state=selected] {\n      --sp-bga: color-mix(in srgb, transparent 0%, var(--colors-muted));\n      background-color: var(--sp-bga, var(--colors-muted));\n}\n\n    .tableRow:is(:hover, [data-hover]) {\n      --sp-bga: color-mix(in srgb, transparent 50%, var(--colors-muted));\n      background-color: var(--sp-bga, var(--colors-muted));\n}\n\n    .tableCell {\n      padding: var(--spacing-4);\n      vertical-align: middle;\n}\n\n    .tableCell:has([role=checkbox]) {\n      padding-right: var(--spacing-0);\n}\n\n    .card {\n      border-radius: var(--radii-lg);\n      border: var(--borders-base);\n      background: var(--colors-card);\n      color: var(--colors-card-foreground);\n      box-shadow: var(--shadows-sm);\n}\n\n    .table {\n      width: var(--sizes-full);\n      caption-side: bottom;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n}\n\n    .tableBody tr:last-child {\n      border-bottom: transparent;\n}\n\n    .formItem {\n      display: flex;\n      gap: var(--spacing-2);\n      flex-direction: column;\n}\n\n    .formDescription {\n      color: var(--colors-muted-foreground);\n}\n\n    .formDescription,.formMessage {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n}\n\n    .formMessage {\n      color: var(--colors-destructive);\n      font-weight: var(--font-weights-medium);\n}\n\n    .input {\n      display: flex;\n      height: var(--sizes-10);\n      width: var(--sizes-full);\n      border-radius: var(--radii-md);\n      border: var(--borders-input);\n      background: var(--colors-background);\n      padding-inline: var(--spacing-3);\n      padding-block: var(--spacing-2);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n}\n\n    .input::file-selector-button {\n      border: var(--borders-none);\n      background: var(--colors-transparent);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: var(--font-weights-medium);\n}\n\n    .input::placeholder,.input[data-placeholder] {\n      color: var(--colors-muted-foreground);\n}\n\n    .input:is(:disabled, [disabled], [data-disabled]) {\n      cursor: not-allowed;\n      opacity: 0.5;\n}\n\n    .input:is(:focus-visible, [data-focus-visible]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .tableContainer {\n      width: var(--sizes-full);\n      overflow: auto;\n}\n\n    .toastViewport {\n      position: fixed;\n      z-index: 100;\n      display: flex;\n      max-height: 100vh;\n      width: var(--sizes-full);\n      padding: var(--spacing-4);\n      top: var(--spacing-0);\n      flex-direction: column-reverse;\n}\n\n    .skeleton {\n      animation: var(--animations-pulse);\n      border-radius: var(--radii-md);\n      background: var(--colors-muted);\n}\n\n    @media screen and (min-width: 40rem) {\n      .toastViewport {\n        bottom: var(--spacing-0);\n        right: var(--spacing-0);\n        top: auto;\n        flex-direction: column;\n}\n}\n\n    @media screen and (min-width: 48rem) {\n      .toastViewport {\n        max-width: 420px;\n}\n}\n}\n\n  .icon--size_md {\n    height: var(--sizes-4);\n    width: var(--sizes-4);\n}\n\n  .icon--size_xs {\n    height: var(--sizes-2);\n    width: var(--sizes-2);\n}\n\n  .icon--size_sm {\n    height: var(--sizes-3);\n    width: var(--sizes-3);\n}\n\n  .icon--left_auto {\n    margin-left: auto;\n}\n\n  .icon--fillCurrent_true {\n    fill: currentColor;\n}\n\n  .icon--dimmed_true {\n    opacity: 0.5;\n}\n\n  .badge--variant_default {\n    background: var(--colors-primary);\n    color: var(--colors-primary-foreground);\n    border-color: var(--colors-transparent);\n}\n\n  .badge--variant_default:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent 20%, var(--colors-primary));\n    background-color: var(--sp-bga, var(--colors-primary));\n}\n\n  .button--variant_ghost:is(:hover, [data-hover]) {\n    background: var(--colors-accent);\n    color: var(--colors-accent-foreground);\n}\n\n  .button--size_sm {\n    height: var(--sizes-9);\n    border-radius: var(--radii-md);\n    padding-inline: var(--spacing-3);\n}\n\n  .button--variant_outline {\n    border: var(--borders-input);\n    background: var(--colors-background);\n}\n\n  .button--variant_outline:is(:hover, [data-hover]) {\n    background: var(--colors-accent);\n    color: var(--colors-accent-foreground);\n}\n\n  .button--size_default {\n    height: var(--sizes-10);\n    padding-inline: var(--spacing-4);\n    padding-block: var(--spacing-2);\n}\n\n  .button--variant_default {\n    background: var(--colors-primary);\n    color: var(--colors-primary-foreground);\n}\n\n  .button--variant_default:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent NaN, var(--colors-primary));\n    background-color: var(--sp-bga, var(--colors-primary));\n}\n\n  .button--size_icon {\n    height: var(--sizes-10);\n    width: var(--sizes-10);\n}\n\n  .button--variant_destructive {\n    background: var(--colors-destructive);\n    color: var(--colors-destructive-foreground);\n}\n\n  .button--variant_destructive:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent NaN, var(--colors-destructive));\n    background-color: var(--sp-bga, var(--colors-destructive));\n}\n\n  .button--variant_secondary {\n    background: var(--colors-secondary);\n    color: var(--colors-secondary-foreground);\n}\n\n  .button--variant_secondary:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent NaN, var(--colors-secondary));\n    background-color: var(--sp-bga, var(--colors-secondary));\n}\n\n  .button--variant_link {\n    color: var(--colors-primary);\n    text-underline-offset: 4px;\n}\n\n  .button--variant_link:is(:hover, [data-hover]) {\n    text-decoration: underline;\n}\n\n  .button--size_lg {\n    height: var(--sizes-11);\n    border-radius: var(--radii-md);\n    padding-inline: var(--spacing-8);\n}\n\n  .separator--orientation_vertical {\n    height: var(--sizes-full);\n    width: 1px;\n}\n\n  .separator--orientation_horizontal {\n    height: 1px;\n    width: var(--sizes-full);\n}\n}\n\n@layer recipes.slots{\n  @layer _base{\n\n    .tooltip__content {\n      z-index: 50;\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-popover);\n      padding-inline: var(--spacing-3);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      color: var(--colors-popover-foreground);\n      box-shadow: var(--shadows-md);\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .tooltip__content[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .tooltip__content[data-side=top] {\n      --shadow-panda-enter-translate-y: var(--spacing-2);\n}\n\n    .tooltip__content[data-side=bottom] {\n      --shadow-panda-enter-translate-y: calc(var(--spacing-2) * -1);\n}\n\n    .tooltip__content[data-side=left] {\n      --shadow-panda-enter-translate-x: var(--spacing-2);\n}\n\n    .tooltip__content[data-side=right] {\n      --shadow-panda-enter-translate-x: calc(var(--spacing-2) * -1);\n}\n\n    .dropdownMenu__subTrigger {\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      border-radius: var(--radii-sm);\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      gap: var(--spacing-2);\n      align-items: center;\n}\n\n    .dropdownMenu__subTrigger[data-state=open] {\n      background: var(--colors-accent);\n}\n\n    .dropdownMenu__subTrigger:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n}\n\n    .dropdownMenu__subContent {\n      z-index: 50;\n      min-width: 8rem;\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-popover);\n      padding: var(--spacing-1);\n      color: var(--colors-popover-foreground);\n      box-shadow: var(--shadows-lg);\n}\n\n    .dropdownMenu__subContent[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .dropdownMenu__subContent[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .dropdownMenu__content {\n      z-index: 50;\n      min-width: 8rem;\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-popover);\n      padding: var(--spacing-1);\n      color: var(--colors-popover-foreground);\n      box-shadow: var(--shadows-md);\n}\n\n    .dropdownMenu__content[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .dropdownMenu__content[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .dropdownMenu__item {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      border-radius: var(--radii-sm);\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      gap: var(--spacing-2);\n      align-items: center;\n}\n\n    .dropdownMenu__item[data-disabled] {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .dropdownMenu__item:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .dropdownMenu__itemIndicator {\n      position: absolute;\n      display: flex;\n      height: var(--sizes-3\\.5);\n      width: var(--sizes-3\\.5);\n      left: var(--spacing-2);\n      align-items: center;\n      justify-content: center;\n}\n\n    .dropdownMenu__checkboxItem {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      border-radius: var(--radii-sm);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      align-items: center;\n      padding-left: var(--spacing-8);\n      padding-right: var(--spacing-2);\n}\n\n    .dropdownMenu__checkboxItem[data-disabled] {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .dropdownMenu__checkboxItem:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .dropdownMenu__radioItem {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      border-radius: var(--radii-sm);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      align-items: center;\n      padding-left: var(--spacing-8);\n      padding-right: var(--spacing-2);\n}\n\n    .dropdownMenu__radioItem[data-disabled] {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .dropdownMenu__radioItem:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .dropdownMenu__label {\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: var(--font-weights-semibold);\n}\n\n    .dropdownMenu__separator {\n      margin-inline: calc(var(--spacing-1) * -1);\n      margin-block: var(--spacing-1);\n      height: 1px;\n      background: var(--colors-muted);\n}\n\n    .dropdownMenu__shortcut {\n      font-size: 0.75rem;\n      line-height: 1rem;\n      letter-spacing: var(--letter-spacings-widest);\n      opacity: 0.6;\n      margin-left: auto;\n}\n\n    .checkbox__root {\n      height: var(--sizes-4);\n      width: var(--sizes-4);\n      border-radius: var(--radii-sm);\n      border: var(--borders-primary);\n      cursor: pointer;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      flex-shrink: 0;\n}\n\n    .checkbox__root:is(:disabled, [disabled], [data-disabled]) {\n      cursor: not-allowed;\n      opacity: 0.5;\n}\n\n    .checkbox__root[data-state=\"checked\"] {\n      background: var(--colors-primary);\n      color: var(--colors-primary-foreground);\n}\n\n    .checkbox__root:is(:focus-visible, [data-focus-visible]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .checkbox__indicator {\n      display: flex;\n      color: currentColor;\n      align-items: center;\n      justify-content: center;\n}\n\n    .popover__content {\n      z-index: 50;\n      width: var(--sizes-72);\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-popover);\n      padding: var(--spacing-4);\n      color: var(--colors-popover-foreground);\n      box-shadow: var(--shadows-md);\n      outline: var(--borders-none);\n}\n\n    .popover__content[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .popover__content[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .popover__content[data-side=top] {\n      --shadow-panda-enter-translate-y: var(--spacing-2);\n}\n\n    .popover__content[data-side=bottom] {\n      --shadow-panda-enter-translate-y: calc(var(--spacing-2) * -1);\n}\n\n    .popover__content[data-side=left] {\n      --shadow-panda-enter-translate-x: var(--spacing-2);\n}\n\n    .popover__content[data-side=right] {\n      --shadow-panda-enter-translate-x: calc(var(--spacing-2) * -1);\n}\n\n    .calendar__root {\n      padding: var(--spacing-3);\n}\n\n    .calendar__months {\n      display: flex;\n}\n\n    .calendar__months > * + * {\n      margin-top: var(--spacing-4);\n}\n\n    .calendar__months {\n      flex-direction: column;\n}\n\n    .calendar__month > * + * {\n      margin-top: var(--spacing-4);\n}\n\n    .calendar__caption {\n      display: flex;\n      position: relative;\n      justify-content: center;\n      align-items: center;\n      padding-top: var(--spacing-1);\n}\n\n    .calendar__caption_label {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: var(--font-weights-medium);\n}\n\n    .calendar__nav {\n      display: flex;\n}\n\n    .calendar__nav > * + * {\n      margin-left: var(--spacing-1);\n}\n\n    .calendar__nav {\n      align-items: center;\n}\n\n    .calendar__nav_button {\n      height: var(--sizes-7) !important;\n      width: var(--sizes-7) !important;\n      padding-inline: var(--spacing-0) !important;\n      padding-block: var(--spacing-0) !important;\n      background: var(--colors-transparent);\n      opacity: 0.5;\n}\n\n    .calendar__nav_button:hover {\n      opacity: 1;\n}\n\n    .calendar__nav_button_previous {\n      position: absolute;\n      left: var(--spacing-1);\n}\n\n    .calendar__nav_button_next {\n      position: absolute;\n      right: var(--spacing-1);\n}\n\n    .calendar__table {\n      width: var(--sizes-full);\n      border-collapse: collapse;\n}\n\n    .calendar__table > * + * {\n      margin-top: var(--spacing-1);\n}\n\n    .calendar__head_row {\n      display: flex;\n}\n\n    .calendar__head_cell {\n      color: var(--colors-muted-foreground);\n      border-radius: var(--radii-md);\n      width: var(--sizes-9);\n      font-weight: var(--font-weights-normal);\n      font-size: 0.8rem;\n}\n\n    .calendar__row {\n      display: flex;\n      width: var(--sizes-full);\n      margin-top: var(--spacing-2);\n}\n\n    .calendar__cell {\n      text-align: center;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      padding: var(--spacing-0);\n      position: relative;\n}\n\n    .calendar__cell:has([aria-selected]) {\n      background: var(--colors-accent);\n}\n\n    .calendar__cell:focus-within {\n      position: relative;\n      z-index: 20;\n}\n\n    .calendar__cell:first-child:has([aria-selected]) {\n      border-top-left-radius: var(--radii-md);\n      border-bottom-left-radius: var(--radii-md);\n}\n\n    .calendar__cell:last-child:has([aria-selected]) {\n      border-top-right-radius: var(--radii-md);\n      border-bottom-right-radius: var(--radii-md);\n}\n\n    .calendar__day {\n      height: var(--sizes-9) !important;\n      width: var(--sizes-9) !important;\n      padding-inline: var(--spacing-0) !important;\n      padding-block: var(--spacing-0) !important;\n      font-weight: var(--font-weights-normal);\n}\n\n    .calendar__day[aria-selected=\"true\"] {\n      opacity: 1;\n}\n\n    .calendar__day_selected {\n      background: var(--colors-primary);\n      color: var(--colors-primary-foreground);\n}\n\n    .calendar__day_selected:is(:focus, [data-focus]) {\n      background: var(--colors-primary);\n      color: var(--colors-primary-foreground);\n}\n\n    .calendar__day_selected:is(:hover, [data-hover]) {\n      background: var(--colors-primary);\n      color: var(--colors-primary-foreground);\n}\n\n    .calendar__day_today {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .calendar__day_outside,.calendar__day_disabled {\n      color: var(--colors-muted-foreground);\n      opacity: 0.5;\n}\n\n    .calendar__day_range_start:is(:hover, [data-hover]) {\n      background: var(--colors-primary) !important;\n      color: var(--colors-primary-foreground) !important;\n}\n\n    .calendar__day_range_middle[aria-selected=\"true\"] {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .calendar__day_range_middle[aria-selected=\"true\"]:is(:hover, [data-hover]) {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .calendar__day_range_end:is(:hover, [data-hover]) {\n      background: var(--colors-primary) !important;\n      color: var(--colors-primary-foreground) !important;\n}\n\n    .calendar__day_hidden {\n      visibility: hidden;\n}\n\n    .accordion__item {\n      border-bottom: var(--borders-base);\n}\n\n    .accordion__header,.accordion__trigger {\n      display: flex;\n}\n\n    .accordion__trigger {\n      flex: 1 1 0%;\n      padding-block: var(--spacing-4);\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n      align-items: center;\n      justify-content: space-between;\n      font-weight: var(--font-weights-medium);\n}\n\n    .accordion__trigger > svg {\n      height: var(--sizes-4);\n      width: var(--sizes-4);\n      transition-property: var(--transition-prop, transform);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--durations-normal);\n      flex-shrink: 0;\n      --transition-duration: var(--durations-normal);\n}\n\n    .accordion__trigger[data-state=open] > svg {\n      transform: rotate(180deg);\n}\n\n    .accordion__trigger:is(:hover, [data-hover]) {\n      text-decoration: underline;\n}\n\n    .accordion__content {\n      overflow: hidden;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .accordion__content[data-state=closed] {\n      animation: var(--animations-accordion-up);\n}\n\n    .accordion__content[data-state=open] {\n      animation: var(--animations-accordion-down);\n}\n\n    .accordion__content > div {\n      padding-bottom: var(--spacing-4);\n      padding-top: var(--spacing-0);\n}\n\n    .progress__root {\n      position: relative;\n      height: var(--sizes-4);\n      width: var(--sizes-full);\n      overflow: hidden;\n      border-radius: var(--radii-full);\n      background: var(--colors-secondary);\n}\n\n    .progress__indicator {\n      height: var(--sizes-full);\n      width: var(--sizes-full);\n      flex: 1 1 0%;\n      background: var(--colors-primary);\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .dialog__overlay {\n      position: fixed;\n      inset: var(--spacing-0);\n      z-index: 50;\n      --sp-bga: color-mix(in srgb, transparent 20%, var(--colors-background));\n      background-color: var(--sp-bga, var(--colors-background));\n      backdrop-filter: blur(4px);\n}\n\n    .dialog__overlay[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 1;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .dialog__overlay[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 1;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .dialog__close {\n      position: absolute;\n      border-radius: var(--radii-sm);\n      opacity: 0.7;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      transition-property: var(--transition-prop, opacity);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n      background: var(--colors-accent);\n      color: var(--colors-muted-foreground);\n      right: var(--spacing-4);\n      top: var(--spacing-4);\n}\n\n    .dialog__close:is(:disabled, [disabled], [data-disabled]) {\n      pointer-events: none;\n}\n\n    .dialog__close:is(:focus, [data-focus]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .dialog__close:is(:hover, [data-hover]) {\n      opacity: 1;\n}\n\n    .dialog__content {\n      position: fixed;\n      z-index: 50;\n      display: grid;\n      width: var(--sizes-full);\n      max-width: var(--sizes-lg);\n      transform: translate(var(--shadow-panda-translate-x, 0), var(--shadow-panda-translate-y, 0)) rotate(var(--shadow-panda-rotate, 0)) skewX(var(--shadow-panda-skew-x, 0)) skewY(var(--shadow-panda-skew-y, 0)) scaleX(var(--shadow-panda-scale-x, 1)) scaleY(var(--shadow-panda-scale-y, 1));\n      --shadow-panda-translate-x: -50%;\n      --shadow-panda-translate-y: -50%;\n      gap: var(--spacing-4);\n      border: var(--borders-base);\n      background: var(--colors-background);\n      padding: var(--spacing-6);\n      box-shadow: var(--shadows-lg);\n      left: 50%;\n      top: 50%;\n      --transition-duration: var(--durations-normal);\n      transition-duration: var(--durations-normal);\n}\n\n    .dialog__content[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: calc(50% * -1);\n      --shadow-panda-enter-translate-y: calc(48% * -1);\n}\n\n    .dialog__content[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: calc(50% * -1);\n      --shadow-panda-exit-translate-y: calc(48% * -1);\n}\n\n    .dialog__header {\n      display: flex;\n}\n\n    .dialog__header > * + * {\n      margin-top: var(--spacing-1\\.5);\n}\n\n    .dialog__header {\n      text-align: center;\n      flex-direction: column;\n}\n\n    .dialog__footer {\n      display: flex;\n      flex-direction: column-reverse;\n}\n\n    .dialog__title {\n      font-size: 1.125rem;\n      line-height: var(--line-heights-none);\n      letter-spacing: var(--letter-spacings-tight);\n      font-weight: var(--font-weights-semibold);\n}\n\n    .dialog__description {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      color: var(--colors-muted-foreground);\n}\n\n    .toast__root {\n      pointer-events: auto;\n      position: relative;\n      display: flex;\n      width: var(--sizes-full);\n      gap: var(--spacing-4);\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      padding: var(--spacing-6);\n      box-shadow: var(--shadows-lg);\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      align-items: center;\n      justify-content: space-between;\n      padding-right: var(--spacing-8);\n}\n\n    .toast__root[data-swipe=cancel] {\n      transform: translateX(0);\n}\n\n    .toast__root[data-swipe=end] {\n      transform: translateX(var(--radix-toast-swipe-end-x));\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 1;\n      --shadow-panda-exit-scale: 1;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .toast__root[data-swipe=move] {\n      transform: translateX(var(--radix-toast-swipe-move-x));\n      transition: none;\n}\n\n    .toast__root[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 1;\n      --shadow-panda-enter-scale: 1;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: calc(100% * -1);\n}\n\n    .toast__root[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0.8;\n      --shadow-panda-exit-scale: 1;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 100%;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .toast__action {\n      display: inline-flex;\n      height: var(--sizes-8);\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-transparent);\n      padding-inline: var(--spacing-3);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      font-weight: var(--font-weights-medium);\n}\n\n    .toast__action:is(:disabled, [disabled], [data-disabled]) {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .toast__action:is(:focus, [data-focus]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .toast__action:is(:hover, [data-hover]) {\n      background: var(--colors-secondary);\n}\n\n    .toast__close {\n      position: absolute;\n      border-radius: var(--radii-md);\n      padding: var(--spacing-1);\n      --sp-ca: color-mix(in srgb, transparent 50%, var(--colors-foreground));\n      color: var(--sp-ca, var(--colors-foreground));\n      opacity: 0;\n      transition-property: var(--transition-prop, opacity);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n      right: var(--spacing-2);\n      top: var(--spacing-2);\n}\n\n    .toast__close:is(:focus, [data-focus]) {\n      opacity: 1;\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .toast__close:is(:hover, [data-hover]) {\n      color: var(--colors-foreground);\n}\n\n    .group:is(:hover, [data-hover]) .toast__close {\n      opacity: 1;\n}\n\n    .toast__title {\n      font-weight: var(--font-weights-semibold);\n}\n\n    .toast__title,.toast__description {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n}\n\n    .toast__description {\n      opacity: 0.9;\n}\n\n    .command-dialog__content {\n      overflow: hidden;\n      padding: var(--spacing-0) !important;\n      box-shadow: var(--shadows-lg) !important;\n}\n\n    .command-dialog__command [cmdk-group-heading] {\n      padding-inline: var(--spacing-2);\n      color: var(--colors-muted-foreground);\n      font-weight: var(--font-weights-medium);\n}\n\n    .command-dialog__command [cmdk-group] {\n      padding-inline: var(--spacing-2);\n}\n\n    .command-dialog__command [cmdk-input-wrapper] svg {\n      height: var(--sizes-5);\n      width: var(--sizes-5);\n}\n\n    .command-dialog__command [cmdk-input] {\n      height: var(--sizes-12);\n}\n\n    .command-dialog__command [cmdk-item] {\n      padding-block: var(--spacing-3);\n}\n\n    .command-dialog__command [cmdk-item] svg {\n      height: var(--sizes-5);\n      width: var(--sizes-5);\n}\n\n    .command-dialog__command [cmdk-group]:not([hidden]) ~[cmdk-group] {\n      padding-top: var(--spacing-0);\n}\n\n    .command__root {\n      display: flex;\n      height: var(--sizes-full);\n      width: var(--sizes-full);\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      background: var(--colors-popover);\n      color: var(--colors-popover-foreground);\n      flex-direction: column;\n}\n\n    .command__inputWrapper {\n      display: flex;\n      border-bottom: var(--borders-base);\n      padding-inline: var(--spacing-3);\n      align-items: center;\n}\n\n    .command__inputSearch {\n      height: var(--sizes-4);\n      width: var(--sizes-4);\n      opacity: 0.5;\n      margin-right: var(--spacing-2);\n      flex-shrink: 0;\n}\n\n    .command__input {\n      display: flex;\n      height: var(--sizes-11);\n      width: var(--sizes-full);\n      border-radius: var(--radii-md);\n      background: var(--colors-transparent);\n      padding-block: var(--spacing-3);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      box-shadow: none;\n}\n\n    .command__input::placeholder,.command__input[data-placeholder] {\n      color: var(--colors-muted-foreground);\n}\n\n    .command__input:is(:disabled, [disabled], [data-disabled]) {\n      cursor: not-allowed;\n      opacity: 0.5;\n}\n\n    .command__list {\n      max-height: 300px;\n      overflow-y: auto;\n      overflow-x: hidden;\n}\n\n    .command__empty {\n      padding-block: var(--spacing-6);\n      text-align: center;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n}\n\n    .command__group {\n      overflow: hidden;\n      padding: var(--spacing-1);\n      color: var(--colors-foreground);\n}\n\n    .command__group [cmdk-group-heading] {\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.75rem;\n      line-height: 1rem;\n      color: var(--colors-muted-foreground);\n      font-weight: var(--font-weights-medium);\n}\n\n    .command__separator {\n      margin-inline: calc(var(--spacing-1) * -1);\n      height: 1px;\n      background: var(--colors-border);\n}\n\n    .command__item {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      border-radius: var(--radii-sm);\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      gap: var(--spacing-2);\n      align-items: center;\n}\n\n    .command__item[aria-selected=true] {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .command__item[data-disabled] {\n      opacity: 0.5;\n}\n\n    .command__shortcut {\n      font-size: 0.75rem;\n      line-height: 1rem;\n      letter-spacing: var(--letter-spacings-widest);\n      color: var(--colors-muted-foreground);\n      margin-left: auto;\n}\n\n    .slider__root {\n      display: flex;\n      touch-action: none;\n      -webkit-user-select: none;\n      user-select: none;\n      align-items: center;\n}\n\n    .slider__root,.slider__track {\n      position: relative;\n      width: var(--sizes-full);\n}\n\n    .slider__track {\n      height: var(--sizes-2);\n      overflow: hidden;\n      border-radius: var(--radii-full);\n      background: var(--colors-secondary);\n      flex-grow: 1;\n}\n\n    .slider__range {\n      position: absolute;\n      height: var(--sizes-full);\n      background: var(--colors-primary);\n}\n\n    .slider__thumb {\n      display: block;\n      height: var(--sizes-5);\n      width: var(--sizes-5);\n      cursor: pointer;\n      border-radius: var(--radii-full);\n      background: var(--colors-background);\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      border-width: 2px;\n      border-style: solid;\n      border-color: var(--colors-primary);\n}\n\n    .slider__thumb:is(:disabled, [disabled], [data-disabled]) {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .slider__thumb:is(:focus-visible, [data-focus-visible]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    @media screen and (min-width: 40rem) {\n      .calendar__months > * + * {\n        margin-left: var(--spacing-4);\n        margin-top: var(--spacing-0);\n}\n\n      .calendar__months {\n        flex-direction: row;\n}\n      .dialog__content {\n        border-radius: var(--radii-lg);\n}\n      .dialog__header {\n        text-align: left;\n}\n      .dialog__footer > * + * {\n        margin-left: var(--spacing-2);\n}\n\n      .dialog__footer {\n        flex-direction: row;\n        justify-content: flex-end;\n}\n      .toast__root[data-state=open] {\n        --shadow-panda-enter-translate-y: 100%;\n}\n}\n}\n\n  .toast__root--variant_default {\n    border: var(--borders-base);\n    background: var(--colors-background);\n}\n\n  .toast__root--variant_destructive {\n    border: var(--borders-destructive);\n    background: var(--colors-destructive);\n    color: var(--colors-destructive-foreground);\n}\n\n  .toast__action--variant_destructive {\n    --sp-bca: color-mix(in srgb, transparent 60%, var(--colors-muted));\n    border-color: var(--sp-bca, var(--colors-muted));\n}\n\n  .toast__action--variant_destructive:is(:focus, [data-focus]) {\n    --shadow-panda-ring-color: var(--colors-destructive);\n}\n\n  .toast__action--variant_destructive:is(:hover, [data-hover]) {\n    --sp-bca: color-mix(in srgb, transparent 70%, var(--colors-destructive));\n    border-color: var(--sp-bca, var(--colors-destructive));\n    background: var(--colors-destructive);\n    color: var(--colors-destructive-foreground);\n}\n\n  .toast__close--variant_destructive {\n    color: var(--colors-red-300);\n}\n\n  .toast__close--variant_destructive:is(:focus, [data-focus]) {\n    --shadow-panda-ring-color: var(--colors-red-400);\n    --shadow-panda-ring-offset-color: var(--colors-red-600);\n}\n\n  .toast__close--variant_destructive:is(:hover, [data-hover]) {\n    color: var(--colors-red-50);\n}\n}\n\n@layer utilities{\n\n  .c_black {\n    color: var(--colors-black);\n}\n\n  .c_text\\.active {\n    color: var(--colors-text-active);\n}\n\n  .c_text\\.gray {\n    color: var(--colors-text-gray);\n}\n\n  .c_text\\.success {\n    color: var(--colors-text-success);\n}\n\n  .c_text\\.warning {\n    color: var(--colors-text-warning);\n}\n\n  .c_text\\.error {\n    color: var(--colors-text-error);\n}\n\n  .c_white {\n    color: var(--colors-white);\n}\n\n  .bd_none {\n    border: var(--borders-none);\n}\n\n  .py_0 {\n    padding-block: var(--spacing-0);\n}\n\n  .px_0 {\n    padding-inline: var(--spacing-0);\n}\n\n  .c_text\\.white {\n    color: text.white;\n}\n\n  .p_sm {\n    padding: var(--spacing-sm);\n}\n\n  .c_unset {\n    color: unset;\n}\n\n  .d_flex {\n    display: flex;\n}\n\n  .pointer-events_visible {\n    pointer-events: visible;\n}\n\n  .pointer-events_none {\n    pointer-events: none;\n}\n\n  .cursor_help {\n    cursor: help;\n}\n\n  .cursor_auto {\n    cursor: auto;\n}\n\n  .gap_xs {\n    gap: var(--spacing-xs);\n}\n\n  .white-space_nowrap {\n    white-space: nowrap;\n}\n\n  .max-w_full {\n    max-width: var(--sizes-full);\n}\n\n  .tov_ellipsis {\n    text-overflow: ellipsis;\n}\n\n  .tov_clip {\n    text-overflow: clip;\n}\n\n  .ov_hidden {\n    overflow: hidden;\n}\n\n  .gap_smaller\\.xs {\n    gap: var(--spacing-smaller-xs);\n}\n\n  .py_1 {\n    padding-block: var(--spacing-1);\n}\n\n  .w_icon\\.xs {\n    width: var(--sizes-icon-xs);\n}\n\n  .h_icon\\.xs {\n    height: var(--sizes-icon-xs);\n}\n\n  .c_dark\\.gray {\n    color: var(--colors-dark-gray);\n}\n\n  .max-w_container\\.smaller\\.xxs {\n    max-width: var(--sizes-container-smaller-xxs);\n}\n\n  .c_light {\n    color: light;\n}\n\n  .bdr_common {\n    border-radius: var(--radii-common);\n}\n\n  .h_lineHeights\\.sm {\n    height: lineHeights.sm;\n}\n\n  .h_lineHeights\\.xs {\n    height: lineHeights.xs;\n}\n\n  .cursor_default {\n    cursor: default;\n}\n\n  .cursor_pointer {\n    cursor: pointer;\n}\n\n  .d_none {\n    display: none;\n}\n\n  .bdr-l_0 {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n  .my_-xs {\n    margin-block: calc(var(--spacing-xs) * -1);\n}\n\n  .p_smaller\\.sm {\n    padding: var(--spacing-smaller-sm);\n}\n\n  .c_inherit {\n    color: inherit;\n}\n\n  .w_auto {\n    width: auto;\n}\n\n  .h_full {\n    height: var(--sizes-full);\n}\n\n  .max-h_container\\.smaller\\.xs {\n    max-height: var(--sizes-container-smaller-xs);\n}\n\n  .w_full {\n    width: var(--sizes-full);\n}\n\n  .ov_auto {\n    overflow: auto;\n}\n\n  .gap_sm {\n    gap: var(--spacing-sm);\n}\n\n  .c_normal {\n    color: normal;\n}\n\n  .ta_left {\n    text-align: left;\n}\n\n  .c_label {\n    color: label;\n}\n\n  .p_0 {\n    padding: var(--spacing-0);\n}\n\n  .w_circle {\n    width: var(--sizes-circle);\n}\n\n  .h_circle {\n    height: var(--sizes-circle);\n}\n\n  .bdr_full {\n    border-radius: var(--radii-full);\n}\n\n  .c_dark\\.success {\n    color: var(--colors-dark-success);\n}\n\n  .c_dark\\.error {\n    color: var(--colors-dark-error);\n}\n\n  .c_dark\\.active {\n    color: var(--colors-dark-active);\n}\n\n  .c_dark\\.warning {\n    color: var(--colors-dark-warning);\n}\n\n  .c_dark {\n    color: dark;\n}\n\n  .bdr_md {\n    border-radius: var(--radii-md);\n}\n\n  .bd_border\\.base {\n    border: var(--borders-border-base);\n}\n\n  .h_8 {\n    height: var(--sizes-8);\n}\n\n  .op_1 {\n    opacity: 1;\n}\n\n  .pointer-events_auto {\n    pointer-events: auto;\n}\n\n  .h_9\\! {\n    height: var(--sizes-9) !important;\n}\n\n  .w_9\\! {\n    width: var(--sizes-9) !important;\n}\n\n  .px_0\\! {\n    padding-inline: var(--spacing-0) !important;\n}\n\n  .py_0\\! {\n    padding-block: var(--spacing-0) !important;\n}\n\n  .max-h_300px {\n    max-height: 300px;\n}\n\n  .px_xs {\n    padding-inline: var(--spacing-xs);\n}\n\n  .h_300px {\n    height: 300px;\n}\n\n  .w_1px {\n    width: 1px;\n}\n\n  .bg_light\\.gray {\n    background: var(--colors-light-gray);\n}\n\n  .mx_xs {\n    margin-inline: var(--spacing-xs);\n}\n\n  .bd_base {\n    border: var(--borders-base);\n}\n\n  .bd_border\\.success {\n    border: var(--borders-border-success);\n}\n\n  .bd_border\\.active {\n    border: var(--borders-border-active);\n}\n\n  .pos_relative {\n    position: relative;\n}\n\n  .z_1 {\n    z-index: 1;\n}\n\n  .max-w_container\\.xs {\n    max-width: var(--sizes-container-xs);\n}\n\n  .py_xs {\n    padding-block: var(--spacing-xs);\n}\n\n  .px_sm {\n    padding-inline: var(--spacing-sm);\n}\n\n  .gap_xxs {\n    gap: var(--spacing-xxs);\n}\n\n  .max-w_card\\.sm {\n    max-width: var(--sizes-card-sm);\n}\n\n  .flex_0_0_auto {\n    flex: 0 0 auto;\n}\n\n  .bdr_9999px {\n    border-radius: 9999px;\n}\n\n  .c_success {\n    color: success;\n}\n\n  .c_gray {\n    color: gray;\n}\n\n  .columns_1 {\n    columns: 1;\n}\n\n  .c_error {\n    color: error;\n}\n\n  .cursor_not-allowed {\n    cursor: not-allowed;\n}\n\n  .w_fit-content {\n    width: fit-content;\n}\n\n  .w_container\\.smaller\\.sm {\n    width: var(--sizes-container-smaller-sm);\n}\n\n  .max-h_container\\.xs {\n    max-height: var(--sizes-container-xs);\n}\n\n  .space_y_sm > * + * {\n    margin-top: var(--spacing-sm);\n}\n\n  .my_md {\n    margin-block: var(--spacing-md);\n}\n\n  .d_grid {\n    display: grid;\n}\n\n  .gap_10px {\n    gap: 10px;\n}\n\n  .w_icon\\.primary {\n    width: var(--sizes-icon-primary);\n}\n\n  .h_icon\\.primary {\n    height: var(--sizes-icon-primary);\n}\n\n  .w_icon\\.xxs {\n    width: var(--sizes-icon-xxs);\n}\n\n  .h_icon\\.xxs {\n    height: var(--sizes-icon-xxs);\n}\n\n  .w_icon\\.sm {\n    width: var(--sizes-icon-sm);\n}\n\n  .h_icon\\.sm {\n    height: var(--sizes-icon-sm);\n}\n\n  .w_icon\\.md {\n    width: var(--sizes-icon-md);\n}\n\n  .h_icon\\.md {\n    height: var(--sizes-icon-md);\n}\n\n  .w_icon\\.lg {\n    width: var(--sizes-icon-lg);\n}\n\n  .h_icon\\.lg {\n    height: var(--sizes-icon-lg);\n}\n\n  .w_icon\\.xxl {\n    width: var(--sizes-icon-xxl);\n}\n\n  .h_icon\\.xxl {\n    height: var(--sizes-icon-xxl);\n}\n\n  .w_icon\\.smaller\\.xs {\n    width: var(--sizes-icon-smaller-xs);\n}\n\n  .h_icon\\.smaller\\.xs {\n    height: var(--sizes-icon-smaller-xs);\n}\n\n  .c_dark\\.black {\n    color: dark.black;\n}\n\n  .c_dark\\.white {\n    color: dark.white;\n}\n\n  .cursor_inherit {\n    cursor: inherit;\n}\n\n  .ps_3 {\n    padding-inline-start: var(--spacing-3);\n}\n\n  .pe_3 {\n    padding-inline-end: var(--spacing-3);\n}\n\n  .ps_md {\n    padding-inline-start: var(--spacing-md);\n}\n\n  .pe_md {\n    padding-inline-end: var(--spacing-md);\n}\n\n  .pos_absolute {\n    position: absolute;\n}\n\n  .min-w_container\\.xxs {\n    min-width: var(--sizes-container-xxs);\n}\n\n  .h_auto {\n    height: auto;\n}\n\n  .max-h_basic\\.almost-full {\n    max-height: var(--sizes-basic-almost-full);\n}\n\n  .min-h_container\\.smaller\\.xxs {\n    min-height: var(--sizes-container-smaller-xxs);\n}\n\n  .min-w_min-content {\n    min-width: min-content;\n}\n\n  .max-w_basic\\.almost-full {\n    max-width: var(--sizes-basic-almost-full);\n}\n\n  .sr_true {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n  .ring_none {\n    outline: var(--borders-none);\n}\n\n  .d_flex\\! {\n    display: flex !important;\n}\n\n  .d_block {\n    display: block;\n}\n\n  .wb_break-all {\n    word-break: break-all;\n}\n\n  .c_primary {\n    color: var(--colors-primary);\n}\n\n  .gap_0 {\n    gap: var(--spacing-0);\n}\n\n  .direction_row {\n    direction: row;\n}\n\n  .bdr-r_0 {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n\n  .c_muted\\.foreground {\n    color: var(--colors-muted-foreground);\n}\n\n  .wb_break-word {\n    word-break: break-word;\n}\n\n  .white-space_break-spaces {\n    white-space: break-spaces;\n}\n\n  .c_text\\.normal {\n    color: var(--colors-text-normal);\n}\n\n  .c_text\\.label {\n    color: var(--colors-text-label);\n}\n\n  .c_text\\.light {\n    color: var(--colors-text-light);\n}\n\n  .white-space_pre-wrap {\n    white-space: pre-wrap;\n}\n\n  .ta_center {\n    text-align: center;\n}\n\n  .ta_right {\n    text-align: right;\n}\n\n  .bd_input {\n    border: var(--borders-input);\n}\n\n  .p_xs {\n    padding: var(--spacing-xs);\n}\n\n  .cursor_text {\n    cursor: text;\n}\n\n  .d_inline-block {\n    display: inline-block;\n}\n\n  .w_300px {\n    width: 300px;\n}\n\n  .bdr_var\\(--border-radius\\) {\n    border-radius: var(--border-radius);\n}\n\n  .w_100\\% {\n    width: 100%;\n}\n\n  .ring_unset {\n    outline: unset;\n}\n\n  .m_0_-1px_-1px_0 {\n    margin: 0 -1px -1px 0;\n}\n\n  .z_10 {\n    z-index: 10;\n}\n\n  .h_100\\% {\n    height: 100%;\n}\n\n  .c_destructive {\n    color: var(--colors-destructive);\n}\n\n  .pos_popper {\n    position: popper;\n}\n\n  .w_slider\\.label {\n    width: var(--sizes-slider-label);\n}\n\n  .w_slider\\.thumb\\.sm\\! {\n    width: var(--sizes-slider-thumb-sm) !important;\n}\n\n  .h_slider\\.thumb\\.sm\\! {\n    height: var(--sizes-slider-thumb-sm) !important;\n}\n\n  .w_slider\\.thumb\\.lg\\! {\n    width: var(--sizes-slider-thumb-lg) !important;\n}\n\n  .h_slider\\.thumb\\.lg\\! {\n    height: var(--sizes-slider-thumb-lg) !important;\n}\n\n  .min-w_skeleton\\.button\\.width {\n    min-width: var(--sizes-skeleton-button-width);\n}\n\n  .min-h_skeleton\\.button\\.height {\n    min-height: var(--sizes-skeleton-button-height);\n}\n\n  .h_skeleton\\.grid\\.height\\.sm {\n    height: var(--sizes-skeleton-grid-height-sm);\n}\n\n  .h_skeleton\\.grid\\.height\\.xs {\n    height: var(--sizes-skeleton-grid-height-xs);\n}\n\n  .h_skeleton\\.grid\\.height\\.md {\n    height: var(--sizes-skeleton-grid-height-md);\n}\n\n  .h_skeleton\\.grid\\.height\\.lg {\n    height: var(--sizes-skeleton-grid-height-lg);\n}\n\n  .h_skeleton\\.grid\\.height\\.xl {\n    height: var(--sizes-skeleton-grid-height-xl);\n}\n\n  .min-w_skeleton\\.input\\.width {\n    min-width: var(--sizes-skeleton-input-width);\n}\n\n  .min-h_skeleton\\.input\\.height {\n    min-height: var(--sizes-skeleton-input-height);\n}\n\n  .min-w_full {\n    min-width: var(--sizes-full);\n}\n\n  .min-h_skeleton\\.height {\n    min-height: var(--sizes-skeleton-height);\n}\n\n  .min-w_skeleton\\.textarea\\.width {\n    min-width: var(--sizes-skeleton-textarea-width);\n}\n\n  .min-h_skeleton\\.textarea\\.height {\n    min-height: var(--sizes-skeleton-textarea-height);\n}\n\n  .pos_right {\n    position: right;\n}\n\n  .max-w_container\\.sm {\n    max-width: var(--sizes-container-sm);\n}\n\n  .gap_-25px {\n    gap: -25px;\n}\n\n  .bd-b_1px_solid_gray {\n    border-bottom: 1px solid gray;\n}\n\n  .my_-20px {\n    margin-block: -20px;\n}\n\n  .bd-w_1px {\n    border-width: 1px;\n}\n\n  .bd-c_transparent {\n    border-color: var(--colors-transparent);\n}\n\n  .bg-c_transparent {\n    background-color: var(--colors-transparent);\n}\n\n  .bd-c_dark\\.active {\n    border-color: var(--colors-dark-active);\n}\n\n  .bg-c_dark\\.active {\n    background-color: var(--colors-dark-active);\n}\n\n  .bd-c_dark\\.gray {\n    border-color: var(--colors-dark-gray);\n}\n\n  .bg-c_dark\\.gray {\n    background-color: var(--colors-dark-gray);\n}\n\n  .bd-c_dark\\.success {\n    border-color: var(--colors-dark-success);\n}\n\n  .bg-c_dark\\.success {\n    background-color: var(--colors-dark-success);\n}\n\n  .bd-c_dark\\.warning {\n    border-color: var(--colors-dark-warning);\n}\n\n  .bg-c_dark\\.warning {\n    background-color: var(--colors-dark-warning);\n}\n\n  .bd-c_dark\\.error {\n    border-color: var(--colors-dark-error);\n}\n\n  .bg-c_dark\\.error {\n    background-color: var(--colors-dark-error);\n}\n\n  .bd-c_white {\n    border-color: var(--colors-white);\n}\n\n  .bg-c_white {\n    background-color: var(--colors-white);\n}\n\n  .bd-c_light\\.active {\n    border-color: var(--colors-light-active);\n}\n\n  .bg-c_light\\.active {\n    background-color: var(--colors-light-active);\n}\n\n  .bd-c_light\\.gray {\n    border-color: var(--colors-light-gray);\n}\n\n  .bg-c_light\\.gray {\n    background-color: var(--colors-light-gray);\n}\n\n  .bd-c_light\\.success {\n    border-color: var(--colors-light-success);\n}\n\n  .bg-c_light\\.success {\n    background-color: var(--colors-light-success);\n}\n\n  .bd-c_light\\.warning {\n    border-color: var(--colors-light-warning);\n}\n\n  .bg-c_light\\.warning {\n    background-color: var(--colors-light-warning);\n}\n\n  .bd-c_light\\.error {\n    border-color: var(--colors-light-error);\n}\n\n  .bg-c_light\\.error {\n    background-color: var(--colors-light-error);\n}\n\n  .bd-c_decoration\\.active {\n    border-color: var(--colors-decoration-active);\n}\n\n  .bd-c_decoration\\.gray {\n    border-color: var(--colors-decoration-gray);\n}\n\n  .bd-c_decoration\\.success {\n    border-color: var(--colors-decoration-success);\n}\n\n  .bd-c_decoration\\.warning {\n    border-color: var(--colors-decoration-warning);\n}\n\n  .bd-c_decoration\\.error {\n    border-color: var(--colors-decoration-error);\n}\n\n  .trs-prop_background-color\\,_border-color\\,_color\\,_opacity {\n    --transition-prop: background-color, border-color, color, opacity;\n    transition-property: background-color, border-color, color, opacity;\n}\n\n  .trs-dur_token\\(durations\\.fast\\) {\n    --transition-duration: var(--durations-fast);\n    transition-duration: var(--durations-fast);\n}\n\n  .trs-tmf_token\\(easings\\.easeInOut\\) {\n    --transition-easing: var(--easings-ease-in-out);\n    transition-timing-function: var(--easings-ease-in-out);\n}\n\n  .ai_center {\n    align-items: center;\n}\n\n  .jc_space-between {\n    justify-content: space-between;\n}\n\n  .bd-w_thin {\n    border-width: thin;\n}\n\n  .bg-c_blue {\n    background-color: blue;\n}\n\n  .bd-c_blueviolet {\n    border-color: blueviolet;\n}\n\n  .bg-c_\\#C70000 {\n    background-color: #C70000;\n}\n\n  .bd-c_\\#C70000 {\n    border-color: #C70000;\n}\n\n  .bg-c_\\#0000A8 {\n    background-color: #0000A8;\n}\n\n  .bd-c_\\#0000A8 {\n    border-color: #0000A8;\n}\n\n  .bg-c_\\#00c700 {\n    background-color: #00c700;\n}\n\n  .bd-c_\\#00c700 {\n    border-color: #00c700;\n}\n\n  .flex-d_row {\n    flex-direction: row;\n}\n\n  .flex-d_row-reverse {\n    flex-direction: row-reverse;\n}\n\n  .jc_space-evenly {\n    justify-content: space-evenly;\n}\n\n  .pl_1 {\n    padding-left: var(--spacing-1);\n}\n\n  .li-t_disc {\n    list-style-type: disc;\n}\n\n  .li-pos_inside {\n    list-style-position: inside;\n}\n\n  .flex-wrap_nowrap {\n    flex-wrap: nowrap;\n}\n\n  .flex-sh_0 {\n    flex-shrink: 0;\n}\n\n  .pr_0 {\n    padding-right: var(--spacing-0);\n}\n\n  .ov-y_auto {\n    overflow-y: auto;\n}\n\n  .flex-d_column {\n    flex-direction: column;\n}\n\n  .flex-g_1 {\n    flex-grow: 1;\n}\n\n  .bd-b-c_decoration\\.gray {\n    border-bottom-color: var(--colors-decoration-gray);\n}\n\n  .ai_start {\n    align-items: start;\n}\n\n  .jc_center {\n    justify-content: center;\n}\n\n  .jc_end {\n    justify-content: end;\n}\n\n  .flex-wrap_wrap {\n    flex-wrap: wrap;\n}\n\n  .flex-g_0 {\n    flex-grow: 0;\n}\n\n  .jc_flex-start {\n    justify-content: flex-start;\n}\n\n  .fw_normal {\n    font-weight: var(--font-weights-normal);\n}\n\n  .leading_10 {\n    line-height: var(--line-heights-10);\n}\n\n  .pt_xs {\n    padding-top: var(--spacing-xs);\n}\n\n  .pb_xs {\n    padding-bottom: var(--spacing-xs);\n}\n\n  .leading_sm {\n    line-height: var(--line-heights-sm);\n}\n\n  .mt_sm {\n    margin-top: var(--spacing-sm);\n}\n\n  .jc_flex-end {\n    justify-content: flex-end;\n}\n\n  .top_0 {\n    top: var(--spacing-0);\n}\n\n  .bottom_0 {\n    bottom: var(--spacing-0);\n}\n\n  .left_0 {\n    left: var(--spacing-0);\n}\n\n  .right_0 {\n    right: var(--spacing-0);\n}\n\n  .mb_sm {\n    margin-bottom: var(--spacing-sm);\n}\n\n  .font-style_italic {\n    font-style: italic;\n}\n\n  .jc_start {\n    justify-content: start;\n}\n\n  .jc_normal {\n    justify-content: normal;\n}\n\n  .ml_-xs {\n    margin-left: calc(var(--spacing-xs) * -1);\n}\n\n  .mr_-xs {\n    margin-right: calc(var(--spacing-xs) * -1);\n}\n\n  .leading_unset {\n    line-height: unset;\n}\n\n  .ff_mono {\n    font-family: var(--fonts-mono);\n}\n\n  .bd-r-w_0 {\n    border-right-width: 0;\n}\n\n  .bd-r-w_1px {\n    border-right-width: 1px;\n}\n\n  .leading_lineHeights\\.sm {\n    line-height: lineHeights.sm;\n}\n\n  .right_5 {\n    right: var(--spacing-5);\n}\n\n  .right_1 {\n    right: var(--spacing-1);\n}\n\n  .top_1 {\n    top: var(--spacing-1);\n}\n\n  .flex-sh_1 {\n    flex-shrink: 1;\n}\n\n  .mt_xs {\n    margin-top: var(--spacing-xs);\n}\n\n  .fs_primary {\n    font-size: var(--font-sizes-primary);\n}\n\n  .fs_xl {\n    font-size: var(--font-sizes-xl);\n}\n\n  .fs_lg {\n    font-size: var(--font-sizes-lg);\n}\n\n  .fs_md {\n    font-size: var(--font-sizes-md);\n}\n\n  .fs_sm {\n    font-size: var(--font-sizes-sm);\n}\n\n  .fs_xs {\n    font-size: var(--font-sizes-xs);\n}\n\n  .fs_xxs {\n    font-size: var(--font-sizes-xxs);\n}\n\n  .fw_primary {\n    font-weight: var(--font-weights-primary);\n}\n\n  .fw_md {\n    font-weight: var(--font-weights-md);\n}\n\n  .fw_lg {\n    font-weight: var(--font-weights-lg);\n}\n\n  .fw_xl {\n    font-weight: var(--font-weights-xl);\n}\n\n  .ff_body {\n    font-family: var(--fonts-body);\n}\n\n  .leading_1 {\n    line-height: 1;\n}\n\n  .bg-c_\\#000 {\n    background-color: #000;\n}\n\n  .pl_8 {\n    padding-left: var(--spacing-8);\n}\n\n  .top_100\\% {\n    top: 100%;\n}\n\n  .left_calc\\(-1_\\*_token\\(sizes\\.slider\\.label\\)_\\/_3\\) {\n    left: calc(-1 * var(--sizes-slider-label) / 3);\n}\n\n  .grid-af_row {\n    grid-auto-flow: row;\n}\n\n  .pb_3px {\n    padding-bottom: 3px;\n}\n\n  .border-style_dotted {\n    border-style: dotted;\n}\n\n  .fw_lighter {\n    font-weight: lighter;\n}\n\n  .fw_semibold {\n    font-weight: var(--font-weights-semibold);\n}\n\n  .\\[\\&\\:first-child\\]\\:bdr-l_common:first-child {\n    border-top-left-radius: var(--radii-common);\n    border-bottom-left-radius: var(--radii-common);\n}\n\n  .\\[\\&\\:last-child\\]\\:bdr-r_common:last-child {\n    border-top-right-radius: var(--radii-common);\n    border-bottom-right-radius: var(--radii-common);\n}\n\n  .\\[\\&_code\\,_\\&_code_\\*\\]\\:ff_mono code,.\\[\\&_code\\,_\\&_code_\\*\\]\\:ff_mono code * {\n    font-family: var(--fonts-mono);\n}\n\n  .\\[\\&\\:last-child\\]\\:bd-r-w_1px:last-child {\n    border-right-width: 1px;\n}\n\n  .\\[\\&\\:checked\\]\\:bd-c_decoration\\.active:checked {\n    border-color: var(--colors-decoration-active);\n}\n\n  .\\[\\&\\:checked\\]\\:bg-c_light\\.active:checked {\n    background-color: var(--colors-light-active);\n}\n\n  .\\[\\&_\\+_label\\]\\:bd-l-w_0 + label {\n    border-left-width: 0;\n}\n\n  .hover\\:td_underline:is(:hover, [data-hover]) {\n    text-decoration: underline;\n}\n\n  .hover\\:cursor_pointer:is(:hover, [data-hover]) {\n    cursor: pointer;\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.dark\\.active\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-active);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.dark\\.active\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-active);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.dark\\.gray\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-gray);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.dark\\.gray\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-gray);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.dark\\.success\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-success);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.dark\\.success\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-success);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.dark\\.warning\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-warning);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.dark\\.warning\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-warning);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.dark\\.error\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-error);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.dark\\.error\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-error);\n}\n\n  .hover\\:bd-c_token\\(colors\\.light\\.gray\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-gray);\n}\n\n  .hover\\:bg-c_token\\(colors\\.light\\.gray\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-gray);\n}\n\n  .hover\\:bd-c_token\\(colors\\.light\\.active\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-active);\n}\n\n  .hover\\:bg-c_token\\(colors\\.light\\.active\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-active);\n}\n\n  .hover\\:bd-c_token\\(colors\\.light\\.success\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-success);\n}\n\n  .hover\\:bg-c_token\\(colors\\.light\\.success\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-success);\n}\n\n  .hover\\:bd-c_token\\(colors\\.light\\.warning\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-warning);\n}\n\n  .hover\\:bg-c_token\\(colors\\.light\\.warning\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-warning);\n}\n\n  .hover\\:bd-c_token\\(colors\\.light\\.error\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-error);\n}\n\n  .hover\\:bg-c_token\\(colors\\.light\\.error\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-error);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.light\\.active\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-active);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.light\\.active\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-active);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.light\\.gray\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-gray);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.light\\.gray\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-gray);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.light\\.success\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-success);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.light\\.success\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-success);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.light\\.warning\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-warning);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.light\\.warning\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-warning);\n}\n\n  .hover\\:bd-c_token\\(colors\\.hover\\.light\\.error\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-error);\n}\n\n  .hover\\:bg-c_token\\(colors\\.hover\\.light\\.error\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-error);\n}\n\n  .hover\\:bg-c_light\\.success:is(:hover, [data-hover]) {\n    background-color: var(--colors-light-success);\n}\n\n  .hover\\:bg-c_light\\.active:is(:hover, [data-hover]) {\n    background-color: var(--colors-light-active);\n}\n\n  .hover\\:bg-c_light\\.error:is(:hover, [data-hover]) {\n    background-color: var(--colors-light-error);\n}\n\n  .hover\\:bg-c_transparent:is(:hover, [data-hover]) {\n    background-color: var(--colors-transparent);\n}\n\n  .hover\\:bg-c_hover\\.light\\.active:is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-active);\n}\n\n  .hover\\:bd-c_decoration\\.active:is(:hover, [data-hover]) {\n    border-color: var(--colors-decoration-active);\n}\n\n  .\\[\\&_\\+_label\\:hover\\]\\:bd-l-w_0 + label:hover {\n    border-left-width: 0;\n}\n\n  .hover\\:\\[\\&_\\+_label\\]\\:bd-l-w_0:is(:hover, [data-hover]) + label {\n    border-left-width: 0;\n}\n\n  @media screen and (min-width: 40rem) {\n    .sm\\:d_block {\n      display: block;\n}\n}\n}";
 n$1(css$1,{});
 
+const METRICS_UPDATE_INTERVAL = 500;
 function PanelToolbarMetrics({
-  renderedFps,
-  annotationsFps,
   targetFps,
   metrics,
-  inDropdown
+  inDropdown,
+  topic
 }) {
+  const [renderMetricsKey, annotationsMetricsKey] = React__default.useMemo(() => {
+    return [constructKeyForTopicRenderMetrics("renderImageFrame", topic), constructKeyForTopicRenderMetrics("renderAnnotationsFrame", topic)];
+  }, [topic]);
+  const [renderedFps, setRenderedFps] = React__default.useState(globalRenderMetricsManager.calculate(renderMetricsKey));
+  const [annotationsFps, setAnnotationsFps] = React__default.useState(globalRenderMetricsManager.calculate(annotationsMetricsKey));
   const [variant, setVariant] = React__default.useState(inDropdown ? "compact" : "full");
   const eventLoopDelay = createEventLoopDelaySampler();
   const descriptionRef = React__default.useRef(null);
@@ -165816,6 +165946,17 @@ function PanelToolbarMetrics({
       setVariant("full");
     }
   }, [descriptionRef.current?.offsetWidth, inDropdown]);
+
+  // Effect to update the metrics periodically
+  React__default.useEffect(() => {
+    const interval = setInterval(() => {
+      setRenderedFps(globalRenderMetricsManager.calculate(renderMetricsKey));
+      setAnnotationsFps(globalInputEventMetricsManager.calculate(annotationsMetricsKey));
+    }, METRICS_UPDATE_INTERVAL);
+    return () => {
+      clearInterval(interval);
+    };
+  });
   const parentContainer = descriptionRef.current ?? document.body;
   return /*#__PURE__*/React__default.createElement(Flex, {
     direction: "row",
@@ -165866,6 +166007,8 @@ function PanelToolbarMetrics({
     text: `Rendering: ${renderedFps === 0 || !Number.isFinite(renderedFps) ? "-" : renderedFps}\u00A0FPS`
   }), annotationsFps !== undefined && annotationsFps !== 0 && /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Annotations: ${annotationsFps === 0 || !Number.isFinite(annotationsFps) ? "-" : annotationsFps}\u00A0FPS`
+  }), annotationsFps !== undefined && annotationsFps !== 0 && /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Annotations: ${annotationsFps === 0 || !Number.isFinite(annotationsFps) ? "-" : annotationsFps}\u00A0FPS`
   }), metrics?.messageThroughput !== undefined && /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Throughput: ${metrics.messageThroughput === 0 ? "-" : metrics.messageThroughput}\u00A0Mbps`
   }), eventLoopDelay !== undefined && /*#__PURE__*/React__default.createElement(Label$3, {
@@ -165899,8 +166042,6 @@ const PanelToolbar = ({
   disableAnnotations = false,
   targetFps,
   triggerToast,
-  renderedFps,
-  annotationsFps,
   toggleTopic,
   toggleFullscreen,
   canMoveUp,
@@ -165916,7 +166057,9 @@ const PanelToolbar = ({
   const connections = useConnections();
   React__default.useEffect(() => {
     // Initial set
-    setMetrics(connections.at(0)?.getTopicMetrics(topic));
+    if (!metrics) {
+      setMetrics(connections.at(0)?.getTopicMetrics(topic));
+    }
     const interval = setInterval(() => {
       setMetrics(connections[0]?.getTopicMetrics(topic));
     }, 500);
@@ -165997,10 +166140,9 @@ const PanelToolbar = ({
   })), /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
     ref: wrapperBreakpointRef
   }, /*#__PURE__*/React__default.createElement(PanelToolbarMetrics, {
-    renderedFps: renderedFps,
-    annotationsFps: annotationsFps,
     targetFps: targetFps,
     metrics: metrics,
+    topic: topic,
     inDropdown: true
   }), kind === "pointCloud" && /*#__PURE__*/React__default.createElement(Tooltip, {
     parentContainer: parentContainer,
@@ -166058,10 +166200,9 @@ const PanelToolbar = ({
     disabled: !canMoveDown,
     icon: MdClose
   }, "Close Stream")))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PanelToolbarMetrics, {
-    renderedFps: renderedFps,
-    annotationsFps: annotationsFps,
     targetFps: targetFps,
-    metrics: metrics
+    metrics: metrics,
+    topic: topic
   }), /*#__PURE__*/React__default.createElement(Flex, {
     direction: "row",
     gap: "xs",
@@ -166182,8 +166323,6 @@ const Panel = ({
   annotationTopics = [],
   extraAnnotationTopics = [],
   targetFps,
-  renderedFps,
-  annotationsFps,
   renderDelay,
   toggleTopic,
   triggerToast,
@@ -166223,8 +166362,6 @@ const Panel = ({
     setDetections: setDetections,
     disableAnnotations: disableAnnotations,
     targetFps: targetFps,
-    renderedFps: renderedFps,
-    annotationsFps: annotationsFps,
     renderDelay: renderDelay,
     toggleTopic: toggleTopic,
     toggleFullscreen: toggleFullscreenForThisPanel,
@@ -166267,11 +166404,11 @@ function createRenderDelaySampler() {
   };
 }
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-CJ9fIZ-J.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-B5MQNBC-.js'));
 const ImagePanelBody = ({
   topic,
   frameRenderedEvent,
-  annotationsFpsUpdateHandler
+  annotationReceivedEventHandler
 }) => {
   const {
     detections
@@ -166291,48 +166428,26 @@ const ImagePanelBody = ({
   return /*#__PURE__*/React__default.createElement(ImagePanelComponent, {
     overrideConfig: defaultConfig,
     frameRenderedEvent: frameRenderedEvent,
-    annotationsFpsUpdateHandler: annotationsFpsUpdateHandler
+    annotationReceivedEventHandler: annotationReceivedEventHandler
   });
 };
 const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
-  const renderedFpsMetricsManagerRef = React__default.useRef(null);
-  const [renderedFps, setRenderedFps] = React__default.useState(undefined);
-  const [annotationsFps, setAnnotationsFps] = React__default.useState(undefined);
   const {
     averageFrameDelay,
     addFrameTime
   } = createRenderDelaySampler();
-  React__default.useEffect(() => {
-    renderedFpsMetricsManagerRef.current = new EventMetricsManager();
-  }, []);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  React__default.useEffect(() => {
-    const interval = setInterval(() => {
-      if (!renderedFpsMetricsManagerRef.current) {
-        console.warn('renderedFpsMetricsManagerRef is null');
-        return;
-      }
-      setRenderedFps(renderedFpsMetricsManagerRef.current.calculate('render'));
-    }, 500);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [renderedFpsMetricsManagerRef]);
+  const [renderMetricsKey, annotationsMetricsKey] = React__default.useMemo(() => {
+    return [constructKeyForTopicRenderMetrics("renderImageFrame", props.topic), constructKeyForTopicRenderMetrics("renderAnnotationsFrame", props.topic)];
+  }, [props.topic]);
   const handleFrameRendered = React__default.useCallback(frameTime => {
-    renderedFpsMetricsManagerRef.current?.registerEvent('render');
+    globalRenderMetricsManager.registerEvent(renderMetricsKey);
     addFrameTime(frameTime);
-  }, [addFrameTime]);
-  const handleAnnotationsFpsUpdate = React__default.useCallback(fps => {
-    setAnnotationsFps(fps);
-  }, []);
+  }, [addFrameTime, renderMetricsKey]);
   return /*#__PURE__*/React__default.createElement(Panel, _extends$3({
     kind: "image"
   }, props, {
     toggleTopic: props.toggleTopic,
     toggleFullscreen: props.toggleFullscreen,
-    renderedFps: renderedFps,
-    annotationsFps: annotationsFps,
     renderDelay: averageFrameDelay,
     canMoveUp: props.canMoveUp,
     moveUp: props.moveUp,
@@ -166341,7 +166456,7 @@ const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
   }), /*#__PURE__*/React__default.createElement(ImagePanelBody, {
     topic: props.topic,
     frameRenderedEvent: handleFrameRendered,
-    annotationsFpsUpdateHandler: handleAnnotationsFpsUpdate
+    annotationReceivedEventHandler: () => globalRenderMetricsManager.registerEvent(annotationsMetricsKey)
   }));
 });
 
@@ -166366,7 +166481,7 @@ const DEFAULT_CAMERA_STATE = {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-DGa0rqWH.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-sfCEw8Dv.js'));
 const PointCloudPanelBody = ({
   topic,
   frameRenderedEvent
@@ -166426,31 +166541,12 @@ const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPane
   canMoveDown,
   moveDown
 }) {
-  const renderedFpsMetricsManagerRef = React__default.useRef(null);
-  const [renderedFps, setRenderedFps] = React__default.useState(undefined);
   const {
     averageFrameDelay,
     addFrameTime
   } = createRenderDelaySampler();
-  React__default.useEffect(() => {
-    renderedFpsMetricsManagerRef.current = new EventMetricsManager();
-  }, []);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  React__default.useEffect(() => {
-    const interval = setInterval(() => {
-      if (!renderedFpsMetricsManagerRef.current) {
-        console.warn("renderedFpsMetricsManagerRef is null");
-        return;
-      }
-      setRenderedFps(renderedFpsMetricsManagerRef.current.calculate("render-pt"));
-    }, 500);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [renderedFpsMetricsManagerRef]);
   const handleFrameRendered = React__default.useCallback(frameTime => {
-    renderedFpsMetricsManagerRef.current?.registerEvent("render-pt");
+    globalRenderMetricsManager.registerEvent(constructKeyForTopicRenderMetrics("renderPointCloudFrame", topic));
     addFrameTime(frameTime);
   }, [addFrameTime]);
   return /*#__PURE__*/React__default.createElement(Panel, {
@@ -166458,7 +166554,6 @@ const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPane
     topic: topic,
     toggleTopic: toggleTopic,
     toggleFullscreen: toggleFullscreen,
-    renderedFps: renderedFps,
     renderDelay: averageFrameDelay,
     disableAnnotations: true,
     targetFps: targetFps,
@@ -166473,4 +166568,4 @@ const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPane
   }));
 });
 
-export { syntaxTree as $, AnalyticsContext as A, PlayerCapabilities as B, assertNever as C, PlayerPresence as D, ErrorDisplay as E, isEqual as F, isDesktopApp as G, createTheme$1 as H, propTypesExports as I, DEFAULT_CAMERA_STATE as J, indentNodeProp as K, LeftSidebarItemKeys as L, continuedIndent as M, foldNodeProp as N, styleTags as O, PropTypes as P, tags$1 as Q, RightSidebarItemKeys as R, Stack$1 as S, LRLanguage as T, LanguageSupport as U, ExternalTokenizer as V, WorkspaceContext as W, LRParser as X, ifNotIn as Y, completeFromList as Z, _extends$3 as _, AppEvent as a, flatIndent as a0, delimitedIndent as a1, foldInside as a2, ContextTracker as a3, LocalTokenGroup as a4, snippetCompletion as a5, IterMode as a6, NodeWeakMap as a7, defineCSSCompletionSource as a8, EditorView as a9, EditorSelection as aa, html$4 as ab, parseMixed as ac, bracketMatchingHandle as ad, javascriptLanguage as ae, VisualizerConnection as af, VisualizerContext as ag, PanelLayout as ah, ImagePanel as ai, PointCloudPanel as aj, EventMetricsManager as ak, ThroughputMetricsManager as al, baseSet as b, createAggregator as c, useTranslation as d, usePanelCatalog as e, flatRest as f, generateUtilityClass as g, EmptyState as h, isEmpty as i, PanelContext as j, PanelCatalogContext as k, usePanelStateStore as l, makeStyles as m, useDefaultPanelTitle as n, useWorkspaceStore as o, WorkspaceStoreSelectors as p, difference as q, usePanelContext as r, useMessagePipeline as s, useHoverValue as t, useAnalytics as u, v4 as v, useSetHoverValue as w, useClearHoverValue as x, useMessagePipelineGetter as y, usePanelSettingsTreeUpdate as z };
+export { syntaxTree as $, AnalyticsContext as A, PlayerCapabilities as B, assertNever as C, PlayerPresence as D, ErrorDisplay as E, isEqual as F, isDesktopApp as G, createTheme$1 as H, propTypesExports as I, DEFAULT_CAMERA_STATE as J, indentNodeProp as K, LeftSidebarItemKeys as L, continuedIndent as M, foldNodeProp as N, styleTags as O, PropTypes as P, tags$1 as Q, RightSidebarItemKeys as R, Stack$1 as S, LRLanguage as T, LanguageSupport as U, ExternalTokenizer as V, WorkspaceContext as W, LRParser as X, ifNotIn as Y, completeFromList as Z, _extends$3 as _, AppEvent as a, flatIndent as a0, delimitedIndent as a1, foldInside as a2, ContextTracker as a3, LocalTokenGroup as a4, snippetCompletion as a5, IterMode as a6, NodeWeakMap as a7, defineCSSCompletionSource as a8, EditorView as a9, EditorSelection as aa, html$4 as ab, parseMixed as ac, bracketMatchingHandle as ad, javascriptLanguage as ae, VisualizerConnection as af, VisualizerContext as ag, PanelLayout as ah, ImagePanel as ai, PointCloudPanel as aj, globalInputEventMetricsManager as ak, globalDecodeMetricsManager as al, globalRenderMetricsManager as am, globalThroughputMetricsManager as an, baseSet as b, createAggregator as c, useTranslation as d, usePanelCatalog as e, flatRest as f, generateUtilityClass as g, EmptyState as h, isEmpty as i, PanelContext as j, PanelCatalogContext as k, usePanelStateStore as l, makeStyles as m, useDefaultPanelTitle as n, useWorkspaceStore as o, WorkspaceStoreSelectors as p, difference as q, usePanelContext as r, useMessagePipeline as s, useHoverValue as t, useAnalytics as u, v4 as v, useSetHoverValue as w, useClearHoverValue as x, useMessagePipelineGetter as y, usePanelSettingsTreeUpdate as z };