@luxonis/visualizer-protobuf 2.31.1 → 2.33.0

package/dist/{index-BP8xet9G.js → index-iUK2g5-Z.js}

@@ -9,7 +9,7 @@ import { p as parseFoxgloveMessage } from './foxglove-protocol-BQ1FsNfG.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';
-import { alpha, Typography, Divider, Link, Button as Button$1, useTheme as useTheme$3, GlobalStyles, Dialog as Dialog$2, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions, Stack as Stack$2 } from '@mui/material';
+import { alpha, Typography, Divider, Link, Button as Button$1, useTheme as useTheme$3, GlobalStyles, Dialog as Dialog$2, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions } from '@mui/material';
 import { t as tinycolor, b as baseAssignValue, a as assignValue, m as merge$2, i as instance } from './i18next-IYI3-Nuv.js';
 import { ThemeContext, __unsafe_useEmotionCache } from '@emotion/react';
 import require$$1 from 'object-assign';
@@ -27,7 +27,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.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    --spacing: 0.25rem;\n    --font-weight-semibold: 600;\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  .hidden {\n    display: none;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\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";
+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
@@ -523,7 +523,10 @@ class ThroughputMetricsManager {
 /* eslint-disable @foxglove/strict-equality */
 const WORKER_COUNT = 4;
 const DEFAULT_TARGET_FPS = 9;
-const DEFAULT_MAX_PROCESSED_QUEUE_SIZE = 100;
+const DEFAULT_MAX_PROCESSED_QUEUE_SIZE = 25;
+const DISPATCH_INTERVAL_MS = 100; // The interval in which the pool will dispatch frames. NOTE: Lower values may result in lag spikes.
+const DISPATCH_INTERVAL_FRACTION = 1000 / DISPATCH_INTERVAL_MS;
+const MAX_BATCH_SIZE = 3;
 class DepthToPointcloudWorkerPool {
   lastUsedWorkerIndex = 0;
   #frameQueue = [];
@@ -532,14 +535,14 @@ class DepthToPointcloudWorkerPool {
   #metrics;
   #maximumStorageBufferSize;
   #FRAME_BATCH_SIZE;
-  #targetDispatchIntervalMs;
   #maxProcessedQueueSize;
   #prevColorFrameWidth;
   #prevDepthFrameWidth;
   #dispatchCallback;
+  #targetDispatchIntervalMs;
   #isProcessing = false;
   #dispatchTimeoutId = undefined;
-  constructor(callback, batchSize = 10, targetFps = DEFAULT_TARGET_FPS, maxProcessedQueueSize = DEFAULT_MAX_PROCESSED_QUEUE_SIZE) {
+  constructor(callback, batchSize = MAX_BATCH_SIZE, targetFps = DEFAULT_TARGET_FPS, maxProcessedQueueSize = DEFAULT_MAX_PROCESSED_QUEUE_SIZE) {
     if (typeof navigator.gpu !== "undefined") {
       void navigator.gpu.requestAdapter().then(gpuAdapter => {
         if (!gpuAdapter) {
@@ -563,7 +566,7 @@ class DepthToPointcloudWorkerPool {
     this.#prevColorFrameWidth = 0;
     this.#dispatchCallback = callback;
     this.#FRAME_BATCH_SIZE = Math.max(1, batchSize);
-    this.#targetDispatchIntervalMs = 1000 / Math.max(1, targetFps);
+    this.#targetDispatchIntervalMs = DISPATCH_INTERVAL_MS / Math.max(1, Math.round(targetFps / DISPATCH_INTERVAL_FRACTION)) * this.#calculateBatchMultiplier();
     this.#maxProcessedQueueSize = Math.max(1, maxProcessedQueueSize);
     this.workerApis = new Array(WORKER_COUNT).fill(undefined).map(() => wrap$3(new Worker(new URL("pointcloudFromDepth.worker-hil48rbC.js", import.meta.url), {
       type: "module"
@@ -598,8 +601,9 @@ class DepthToPointcloudWorkerPool {
     if (currentOutSize > this.#maximumStorageBufferSize) {
       console.warn(`GPU queue size ${currentOutSize} exceeds maximum storage buffer size ${this.#maximumStorageBufferSize}. Reducing batch size.`);
       const frameBatchSize = Math.floor(this.#maximumStorageBufferSize / (numPixelsPerFrame * 16));
-      this.#FRAME_BATCH_SIZE = Math.max(1, frameBatchSize);
+      this.#FRAME_BATCH_SIZE = Math.min(Math.max(1, frameBatchSize), MAX_BATCH_SIZE);
       if (frameBatchSize < 1) {
+        // We can't fit one color and depth frame in GPU memory. So it's better to fallback to CPU
         console.warn("Output buffer size is too small to process. Falling back to CPU.");
         this.#isWebGpuSupported = false;
       }
@@ -611,7 +615,7 @@ class DepthToPointcloudWorkerPool {
     this.#metrics?.registerEvent("pcl-pool.batchSent");
     const fps = this.#metrics?.calculate("pcl-pool.batchSent");
     if (fps && fps > 0) {
-      this.#targetDispatchIntervalMs = 1000 / Math.max(4, fps);
+      this.#targetDispatchIntervalMs = DISPATCH_INTERVAL_MS / Math.max(1, Math.round(fps / DISPATCH_INTERVAL_FRACTION)) * this.#calculateBatchMultiplier();
     }
     if ((this.#isProcessing || this.#frameQueue.length < this.#FRAME_BATCH_SIZE) && !force) {
       return;
@@ -635,7 +639,7 @@ class DepthToPointcloudWorkerPool {
     const i420Height = firstFrame.i420Height;
     try {
       const depthDataArray = batchToProcess.map(f => uint8ArrayToUint16Array(f.depthFrame.data));
-      // @ts-expect-error - ITS unknow
+      // @ts-expect-error - ITS unknown
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
       const i420DataArray = batchToProcess.map(f => f.colorFrame.message.data);
       const workerIndex = this.lastUsedWorkerIndex;
@@ -701,11 +705,20 @@ class DepthToPointcloudWorkerPool {
       this.tryProcessBatch();
     }
   }
+  #calculateBatchMultiplier() {
+    if (this.#processedFrameQueue.length > this.#maxProcessedQueueSize / 2) {
+      return 1.2;
+    }
+    if (this.#processedFrameQueue.length >= this.#maxProcessedQueueSize - this.#maxProcessedQueueSize / 5) {
+      return 0.75;
+    }
+    return 1.3;
+  }
   #addToProcessedQueue(processedFrame) {
     if (this.#processedFrameQueue.length >= this.#maxProcessedQueueSize) {
       const fps = this.#metrics?.calculate("pcl-pool.batchSent");
       if (fps && fps > 0) {
-        this.#targetDispatchIntervalMs = 1000 / Math.max(4, fps + 1);
+        this.#targetDispatchIntervalMs = DISPATCH_INTERVAL_MS / Math.max(1, Math.round(fps / DISPATCH_INTERVAL_FRACTION)) * this.#calculateBatchMultiplier();
       }
       this.#processedFrameQueue.shift();
       console.warn(`Processed frame queue full (>= ${this.#maxProcessedQueueSize}). Dropping oldest frame.`);
@@ -719,9 +732,13 @@ class DepthToPointcloudWorkerPool {
     if (this.#dispatchTimeoutId !== undefined) {
       clearTimeout(this.#dispatchTimeoutId);
     }
-    if (this.#processedFrameQueue.length > 0) {
-      this.#dispatchTimeoutId = setTimeout(this.#dispatchNextFrame, this.#targetDispatchIntervalMs);
-    } else {
+    const fps = this.#metrics?.calculate("pcl-pool.batchSent");
+    if (fps && fps > 0) {
+      const MIN_DISPATCH_INTERVAL_MS = 100;
+      this.#targetDispatchIntervalMs = Math.min(MIN_DISPATCH_INTERVAL_MS, DISPATCH_INTERVAL_MS / Math.max(1, Math.round(fps / DISPATCH_INTERVAL_FRACTION)) * this.#calculateBatchMultiplier());
+    }
+    this.#dispatchTimeoutId = setTimeout(this.#dispatchNextFrame, this.#targetDispatchIntervalMs);
+    if (this.#processedFrameQueue.length <= 0) {
       this.#dispatchTimeoutId = undefined;
     }
   }
@@ -733,10 +750,8 @@ class DepthToPointcloudWorkerPool {
       } catch (error) {
         console.error("Error in dispatchCallback:", error);
       }
-    } else {
-      console.warn("Dispatch timer fired but processed queue was empty.");
     }
-    this.#scheduleNextDispatch();
+    this.#dispatchTimeoutId = setTimeout(this.#dispatchNextFrame, this.#targetDispatchIntervalMs);
   };
   destroy() {
     if (this.#dispatchTimeoutId !== undefined) {
@@ -754,7 +769,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-DsCOJqEa.js", import.meta.url), {
+  const workerWrap = wrap$3(new Worker(new URL("deserialization.worker-CXyfLlRt.js", import.meta.url), {
     type: "module",
     name: `message-decoder`
   }));
@@ -843,7 +858,7 @@ class PoitCloudSyncFramework {
     };
   }
   storedFrames = [];
-  #MAX_DELAY_SEC = 0.075;
+  #MAX_DELAY_SEC = 0.065;
   #MAX_STORED_FRAMES = 100;
   getFrame(nsec) {
     const {
@@ -1005,6 +1020,13 @@ class FoxgloveConnection {
     this.emitState();
     const poitcloudColorFrameName = this.subscribedTopics.get("_Point Cloud Color") ? "_Point Cloud Color" : "H.264 Stream";
     if (event.topic === poitcloudColorFrameName) {
+      /* Good for performance testing
+      const date = Date.now();
+      event.publishTime= {
+        sec: Math.floor(date / 1000),
+        nsec: date *10 ** 6,
+      };
+      */
       void this.handleParsePoitcloudMessage(event);
     }
   }
@@ -19152,7 +19174,7 @@ class WebRtcBridge extends ArtificialWorker {
   constructor(automaticTokenRefresh) {
     super();
     this.automaticTokenRefresh = automaticTokenRefresh;
-    this.#worker = new Worker(new URL("worker-C_ZGBh4B.js", import.meta.url), {
+    this.#worker = new Worker(new URL("worker-DgLpu88k.js", import.meta.url), {
       type: "module"
     });
     this.#setupArtificialWorker();
@@ -19368,7 +19390,7 @@ class VisualizerConnection extends FoxgloveConnection {
     let worker;
     if (type === 'ws') {
       this.#url = data.connectionUrl;
-      worker = new Worker(new URL("worker-DMpdSxSr.js", import.meta.url), {
+      worker = new Worker(new URL("worker-OyuK26A1.js", import.meta.url), {
         type: "module"
       });
     } else {
@@ -34871,68 +34893,6 @@ function RemountOnValueChange(props) {
   return /*#__PURE__*/React__default.createElement(Parent, null, props.children);
 }
 
-var DefaultContext$1 = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
-};
-var IconContext$1 = React__default.createContext && /*#__PURE__*/React__default.createContext(DefaultContext$1);
-
-var _excluded$7 = ["attr", "size", "title"];
-function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$3(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$3(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive$1(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function Tree2Element$1(tree) {
-  return tree && tree.map((node, i) => /*#__PURE__*/React__default.createElement(node.tag, _objectSpread$3({
-    key: i
-  }, node.attr), Tree2Element$1(node.child)));
-}
-function GenIcon$1(data) {
-  return props => /*#__PURE__*/React__default.createElement(IconBase$1, _extends$2({
-    attr: _objectSpread$3({}, data.attr)
-  }, props), Tree2Element$1(data.child));
-}
-function IconBase$1(props) {
-  var elem = conf => {
-    var {
-        attr,
-        size,
-        title
-      } = props,
-      svgProps = _objectWithoutProperties$2(props, _excluded$7);
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + " " : "") + props.className;
-    return /*#__PURE__*/React__default.createElement("svg", _extends$2({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className: className,
-      style: _objectSpread$3(_objectSpread$3({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && /*#__PURE__*/React__default.createElement("title", null, title), props.children);
-  };
-  return IconContext$1 !== undefined ? /*#__PURE__*/React__default.createElement(IconContext$1.Consumer, null, conf => elem(conf)) : elem(DefaultContext$1);
-}
-
-// THIS FILE IS AUTO GENERATED
-function CiFilter (props) {
-  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"g","attr":{"id":"Filter"},"child":[{"tag":"path","attr":{"d":"M14.037,20.937a1.015,1.015,0,0,1-.518-.145l-3.334-2a2.551,2.551,0,0,1-1.233-2.176V12.091a1.526,1.526,0,0,0-.284-.891L4.013,4.658a1.01,1.01,0,0,1,.822-1.6h14.33a1.009,1.009,0,0,1,.822,1.6h0L15.332,11.2a1.527,1.527,0,0,0-.285.891v7.834a1.013,1.013,0,0,1-1.01,1.012ZM4.835,4.063,9.482,10.62a2.515,2.515,0,0,1,.47,1.471v4.524a1.543,1.543,0,0,0,.747,1.318l3.334,2,.014-7.843a2.516,2.516,0,0,1,.471-1.471l4.654-6.542,0,0Z"},"child":[]}]}]})(props);
-}
-
 var css$8 = "@layer reset, base, tokens, recipes, utilities;\n\n.fake-password-input {\n    -webkit-text-security: disc;\n}";
 n$1(css$8,{});
 
@@ -39716,53 +39676,53 @@ withContext$8(_DialogTitle, 'title');
 const _DialogDescription = styled(Description$1);
 withContext$8(_DialogDescription, 'description');
 
-var DefaultContext = {
+var DefaultContext$1 = {
   color: undefined,
   size: undefined,
   className: undefined,
   style: undefined,
   attr: undefined
 };
-var IconContext = React__default.createContext && /*#__PURE__*/React__default.createContext(DefaultContext);
+var IconContext$1 = React__default.createContext && /*#__PURE__*/React__default.createContext(DefaultContext$1);
 
-var _excluded$6 = ["attr", "size", "title"];
-function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$2(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /*#__PURE__*/React__default.createElement(node.tag, _objectSpread$2({
+var _excluded$7 = ["attr", "size", "title"];
+function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$3(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$3(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive$1(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function Tree2Element$1(tree) {
+  return tree && tree.map((node, i) => /*#__PURE__*/React__default.createElement(node.tag, _objectSpread$3({
     key: i
-  }, node.attr), Tree2Element(node.child)));
+  }, node.attr), Tree2Element$1(node.child)));
 }
-function GenIcon(data) {
-  return props => /*#__PURE__*/React__default.createElement(IconBase, _extends$1({
-    attr: _objectSpread$2({}, data.attr)
-  }, props), Tree2Element(data.child));
+function GenIcon$1(data) {
+  return props => /*#__PURE__*/React__default.createElement(IconBase$1, _extends$2({
+    attr: _objectSpread$3({}, data.attr)
+  }, props), Tree2Element$1(data.child));
 }
-function IconBase(props) {
+function IconBase$1(props) {
   var elem = conf => {
     var {
         attr,
         size,
         title
       } = props,
-      svgProps = _objectWithoutProperties$1(props, _excluded$6);
+      svgProps = _objectWithoutProperties$2(props, _excluded$7);
     var computedSize = size || conf.size || "1em";
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /*#__PURE__*/React__default.createElement("svg", _extends$1({
+    return /*#__PURE__*/React__default.createElement("svg", _extends$2({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, conf.attr, attr, svgProps, {
       className: className,
-      style: _objectSpread$2(_objectSpread$2({
+      style: _objectSpread$3(_objectSpread$3({
         color: props.color || conf.color
       }, conf.style), props.style),
       height: computedSize,
@@ -39770,34 +39730,36 @@ function IconBase(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }), title && /*#__PURE__*/React__default.createElement("title", null, title), props.children);
   };
-  return IconContext !== undefined ? /*#__PURE__*/React__default.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
+  return IconContext$1 !== undefined ? /*#__PURE__*/React__default.createElement(IconContext$1.Consumer, null, conf => elem(conf)) : elem(DefaultContext$1);
 }
 
 // THIS FILE IS AUTO GENERATED
 function MdDeleteOutline (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0V0z"},"child":[]},{"tag":"path","attr":{"d":"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5-1-1h-5l-1 1H5v2h14V4z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0V0z"},"child":[]},{"tag":"path","attr":{"d":"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5-1-1h-5l-1 1H5v2h14V4z"},"child":[]}]})(props);
 }function MdHelpOutline (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"},"child":[]}]})(props);
 }function MdOpenInNew (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"},"child":[]}]})(props);
 }function MdVisibilityOff (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"},"child":[]}]})(props);
 }function MdVisibility (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"},"child":[]}]})(props);
 }function MdCloudUpload (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"},"child":[]}]})(props);
 }function MdKeyboardArrowDown (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0V0z"},"child":[]},{"tag":"path","attr":{"d":"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0V0z"},"child":[]},{"tag":"path","attr":{"d":"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"},"child":[]}]})(props);
 }function MdKeyboardArrowUp (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"},"child":[]}]})(props);
 }function MdCircle (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"},"child":[]}]})(props);
 }function MdImage (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"},"child":[]}]})(props);
 }function MdCheck (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"},"child":[]}]})(props);
 }function MdClose (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"},"child":[]}]})(props);
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"},"child":[]}]})(props);
+}function MdFullscreen (props) {
+  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"},"child":[]}]})(props);
 }
 
 // packages/react/context/src/createContext.tsx
@@ -50665,11 +50627,11 @@ function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Sy
 
 function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); }
 
@@ -50899,7 +50861,7 @@ function pickerOptionsFromAccept(accept) {
           mimeType = _ref5[0],
           ext = _ref5[1];
 
-      return _objectSpread$1(_objectSpread$1({}, agg), {}, _defineProperty$1({}, mimeType, ext));
+      return _objectSpread$2(_objectSpread$2({}, agg), {}, _defineProperty$2({}, mimeType, ext));
     }, {});
     return [{
       // description is required due to https://crbug.com/1264708
@@ -50987,7 +50949,7 @@ function isExt(v) {
  * @typedef {"file-invalid-type"|"file-too-large"|"file-too-small"|"too-many-files"} ErrorCode
  */
 
-var _excluded$5 = ["children"],
+var _excluded$6 = ["children"],
     _excluded2 = ["open"],
     _excluded3 = ["refKey", "role", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"],
     _excluded4 = ["refKey", "onChange", "onClick"];
@@ -51012,15 +50974,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -51038,11 +51000,11 @@ function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null)
 
 var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      params = _objectWithoutProperties(_ref, _excluded$5);
+      params = _objectWithoutProperties$1(_ref, _excluded$6);
 
   var _useDropzone = useDropzone$1(params),
       open = _useDropzone.open,
-      props = _objectWithoutProperties(_useDropzone, _excluded2);
+      props = _objectWithoutProperties$1(_useDropzone, _excluded2);
 
   useImperativeHandle(ref, function () {
     return {
@@ -51050,7 +51012,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
-  return /*#__PURE__*/React__default.createElement(Fragment$1, null, children(_objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/React__default.createElement(Fragment$1, null, children(_objectSpread$1(_objectSpread$1({}, props), {}, {
     open: open
   })));
 });
@@ -51423,7 +51385,7 @@ var initialState = {
 function useDropzone$1() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+  var _defaultProps$props = _objectSpread$1(_objectSpread$1({}, defaultProps), props),
       accept = _defaultProps$props.accept,
       disabled = _defaultProps$props.disabled,
       getFilesFromEvent = _defaultProps$props.getFilesFromEvent,
@@ -51847,9 +51809,9 @@ function useDropzone$1() {
           onDragOver = _ref2.onDragOver,
           onDragLeave = _ref2.onDragLeave,
           onDrop = _ref2.onDrop,
-          rest = _objectWithoutProperties(_ref2, _excluded3);
+          rest = _objectWithoutProperties$1(_ref2, _excluded3);
 
-      return _objectSpread(_objectSpread(_defineProperty({
+      return _objectSpread$1(_objectSpread$1(_defineProperty$1({
         onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
         onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
         onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -51874,9 +51836,9 @@ function useDropzone$1() {
           refKey = _ref3$refKey === void 0 ? "ref" : _ref3$refKey,
           onChange = _ref3.onChange,
           onClick = _ref3.onClick,
-          rest = _objectWithoutProperties(_ref3, _excluded4);
+          rest = _objectWithoutProperties$1(_ref3, _excluded4);
 
-      var inputProps = _defineProperty({
+      var inputProps = _defineProperty$1({
         accept: acceptAttr,
         multiple: multiple,
         type: "file",
@@ -51897,10 +51859,10 @@ function useDropzone$1() {
         tabIndex: -1
       }, refKey, inputRef);
 
-      return _objectSpread(_objectSpread({}, inputProps), rest);
+      return _objectSpread$1(_objectSpread$1({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
-  return _objectSpread(_objectSpread({}, state), {}, {
+  return _objectSpread$1(_objectSpread$1({}, state), {}, {
     isFocused: isFocused && !disabled,
     getRootProps: getRootProps,
     getInputProps: getInputProps,
@@ -51919,41 +51881,41 @@ function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
     case "focus":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
         isFocused: true
       });
 
     case "blur":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
         isFocused: false
       });
 
     case "openDialog":
-      return _objectSpread(_objectSpread({}, initialState), {}, {
+      return _objectSpread$1(_objectSpread$1({}, initialState), {}, {
         isFileDialogActive: true
       });
 
     case "closeDialog":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
         isFileDialogActive: false
       });
 
     case "setDraggedFiles":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
         isDragActive: action.isDragActive,
         isDragAccept: action.isDragAccept,
         isDragReject: action.isDragReject
       });
 
     case "setFiles":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections,
         isDragReject: action.isDragReject
       });
 
     case "reset":
-      return _objectSpread({}, initialState);
+      return _objectSpread$1({}, initialState);
 
     default:
       return state;
@@ -56351,17 +56313,17 @@ function toProperties(value, node) {
   return value ? clone(value) : {}
 }
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends.apply(null, arguments);
+  }, _extends$1.apply(null, arguments);
 }
 
-function _objectWithoutPropertiesLoose(r, e) {
+function _objectWithoutPropertiesLoose$1(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
@@ -85462,7 +85424,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-QCS7rRjJ.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-Bg2wGIRX.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -85473,7 +85435,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-DKy3gbmW.js').then(m => m.cpp());
+            return import('./index-Bt_1Ingm.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85481,7 +85443,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-DKy3gbmW.js').then(m => m.cpp());
+            return import('./index-Bt_1Ingm.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85501,7 +85463,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-Cmshqsvw.js').then(m => m.go());
+            return import('./index-D0SP7fRp.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85516,7 +85478,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-D77uCBAO.js').then(m => m.java());
+            return import('./index-C8AIoPAv.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85532,7 +85494,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-DmLecJHe.js').then(m => m.json());
+            return import('./index-CX4A9Odw.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85546,14 +85508,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-uoDpeMpU.js').then(m => m.less());
+            return import('./index-CYGRFZj-.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-B87igDpg.js').then(m => m.liquid());
+            return import('./index-CvW9Q4VD.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85579,7 +85541,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-Bgt0P9DZ.js').then(m => m.php());
+            return import('./index-Dpjb_uMZ.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85596,28 +85558,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-B_E0WpuE.js').then(m => m.python());
+            return import('./index-DoIQXSoy.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-WSsHQmbV.js').then(m => m.rust());
+            return import('./index-DTVwWGhY.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-CJis4XsK.js').then(m => m.sass({ indented: true }));
+            return import('./index-TgfyH0by.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-CJis4XsK.js').then(m => m.sass());
+            return import('./index-TgfyH0by.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85648,7 +85610,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-Dgcol-fP.js').then(m => m.wast());
+            return import('./index-DN4ToaLh.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85656,7 +85618,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-CDS7NmJ7.js').then(m => m.xml());
+            return import('./index-BmrFCWrk.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85664,7 +85626,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-BEFg_Sko.js').then(m => m.yaml());
+            return import('./index-BUBQn6Kl.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -86460,13 +86422,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-BRoKkcrX.js').then(m => m.vue());
+            return import('./index-af73Jp_A.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-DjfB4_mu.js').then(m => m.angular());
+            return import('./index-C47Ti8Df.js').then(m => m.angular());
         }
     })
 ];
@@ -90176,7 +90138,7 @@ function useCodeMirror(props) {
   };
 }
 
-var _excluded$4 = ["className", "value", "selection", "extensions", "onChange", "onStatistics", "onCreateEditor", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root", "initialState"];
+var _excluded$5 = ["className", "value", "selection", "extensions", "onChange", "onStatistics", "onCreateEditor", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root", "initialState"];
 var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       className,
@@ -90203,7 +90165,7 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
       root,
       initialState
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
   var editor = useRef(null);
   var {
     state,
@@ -90245,7 +90207,7 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
     throw new Error("value must be typeof string but got " + typeof value);
   }
   var defaultClassNames = typeof theme === 'string' ? "cm-theme-" + theme : 'cm-theme';
-  return /*#__PURE__*/jsx$2("div", _extends({
+  return /*#__PURE__*/jsx$2("div", _extends$1({
     ref: editor,
     className: "" + defaultClassNames + (className ? " " + className : '')
   }, other));
@@ -154369,7 +154331,7 @@ function useCopied(container) {
 var css$4 = "@media (prefers-color-scheme: dark) {\n  .wmde-markdown,\n  .wmde-markdown-var {\n    color-scheme: dark;\n    --color-prettylights-syntax-comment: #8b949e;\n    --color-prettylights-syntax-constant: #79c0ff;\n    --color-prettylights-syntax-entity: #d2a8ff;\n    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;\n    --color-prettylights-syntax-entity-tag: #7ee787;\n    --color-prettylights-syntax-keyword: #ff7b72;\n    --color-prettylights-syntax-string: #a5d6ff;\n    --color-prettylights-syntax-variable: #ffa657;\n    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;\n    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;\n    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;\n    --color-prettylights-syntax-carriage-return-text: #f0f6fc;\n    --color-prettylights-syntax-carriage-return-bg: #b62324;\n    --color-prettylights-syntax-string-regexp: #7ee787;\n    --color-prettylights-syntax-markup-list: #f2cc60;\n    --color-prettylights-syntax-markup-heading: #1f6feb;\n    --color-prettylights-syntax-markup-italic: #c9d1d9;\n    --color-prettylights-syntax-markup-bold: #c9d1d9;\n    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;\n    --color-prettylights-syntax-markup-deleted-bg: #67060c;\n    --color-prettylights-syntax-markup-inserted-text: #aff5b4;\n    --color-prettylights-syntax-markup-inserted-bg: #033a16;\n    --color-prettylights-syntax-markup-changed-text: #ffdfb6;\n    --color-prettylights-syntax-markup-changed-bg: #5a1e02;\n    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;\n    --color-prettylights-syntax-markup-ignored-bg: #1158c7;\n    --color-prettylights-syntax-meta-diff-range: #d2a8ff;\n    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;\n    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;\n    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;\n    --color-fg-default: #c9d1d9;\n    --color-fg-muted: #8b949e;\n    --color-fg-subtle: #484f58;\n    --color-canvas-default: #0d1117;\n    --color-canvas-subtle: #161b22;\n    --color-border-default: #30363d;\n    --color-border-muted: #21262d;\n    --color-neutral-muted: rgba(110, 118, 129, 0.4);\n    --color-accent-fg: #58a6ff;\n    --color-accent-emphasis: #1f6feb;\n    --color-attention-subtle: rgba(187, 128, 9, 0.15);\n    --color-danger-fg: #f85149;\n    --color-danger-emphasis: #da3633;\n    --color-attention-fg: #d29922;\n    --color-attention-emphasis: #9e6a03;\n    --color-done-fg: #a371f7;\n    --color-done-emphasis: #8957e5;\n    --color-success-fg: #3fb950;\n    --color-success-emphasis: #238636;\n    --color-copied-active-bg: #2e9b33;\n  }\n}\n@media (prefers-color-scheme: light) {\n  .wmde-markdown,\n  .wmde-markdown-var {\n    color-scheme: light;\n    --color-prettylights-syntax-comment: #6e7781;\n    --color-prettylights-syntax-constant: #0550ae;\n    --color-prettylights-syntax-entity: #8250df;\n    --color-prettylights-syntax-storage-modifier-import: #24292f;\n    --color-prettylights-syntax-entity-tag: #116329;\n    --color-prettylights-syntax-keyword: #cf222e;\n    --color-prettylights-syntax-string: #0a3069;\n    --color-prettylights-syntax-variable: #953800;\n    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;\n    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;\n    --color-prettylights-syntax-invalid-illegal-bg: #82071e;\n    --color-prettylights-syntax-carriage-return-text: #f6f8fa;\n    --color-prettylights-syntax-carriage-return-bg: #cf222e;\n    --color-prettylights-syntax-string-regexp: #116329;\n    --color-prettylights-syntax-markup-list: #3b2300;\n    --color-prettylights-syntax-markup-heading: #0550ae;\n    --color-prettylights-syntax-markup-italic: #24292f;\n    --color-prettylights-syntax-markup-bold: #24292f;\n    --color-prettylights-syntax-markup-deleted-text: #82071e;\n    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;\n    --color-prettylights-syntax-markup-inserted-text: #116329;\n    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;\n    --color-prettylights-syntax-markup-changed-text: #953800;\n    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;\n    --color-prettylights-syntax-markup-ignored-text: #eaeef2;\n    --color-prettylights-syntax-markup-ignored-bg: #0550ae;\n    --color-prettylights-syntax-meta-diff-range: #8250df;\n    --color-prettylights-syntax-brackethighlighter-angle: #57606a;\n    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;\n    --color-prettylights-syntax-constant-other-reference-link: #0a3069;\n    --color-fg-default: #24292f;\n    --color-fg-muted: #57606a;\n    --color-fg-subtle: #6e7781;\n    --color-canvas-default: #ffffff;\n    --color-canvas-subtle: #f6f8fa;\n    --color-border-default: #d0d7de;\n    --color-border-muted: hsl(210, 18%, 87%);\n    --color-neutral-muted: rgba(175, 184, 193, 0.2);\n    --color-accent-fg: #0969da;\n    --color-accent-emphasis: #0969da;\n    --color-attention-subtle: #fff8c5;\n    --color-danger-fg: #d1242f;\n    --color-danger-emphasis: #cf222e;\n    --color-attention-fg: #9a6700;\n    --color-attention-emphasis: #9a6700;\n    --color-done-fg: #8250df;\n    --color-done-emphasis: #8250df;\n    --color-success-fg: #1a7f37;\n    --color-success-emphasis: #1f883d;\n    --color-copied-active-bg: #2e9b33;\n  }\n}\n[data-color-mode*='dark'] .wmde-markdown,\n[data-color-mode*='dark'] .wmde-markdown-var,\n.wmde-markdown-var[data-color-mode*='dark'],\n.wmde-markdown[data-color-mode*='dark'],\nbody[data-color-mode*='dark'] {\n  color-scheme: dark;\n  --color-prettylights-syntax-comment: #8b949e;\n  --color-prettylights-syntax-constant: #79c0ff;\n  --color-prettylights-syntax-entity: #d2a8ff;\n  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;\n  --color-prettylights-syntax-entity-tag: #7ee787;\n  --color-prettylights-syntax-keyword: #ff7b72;\n  --color-prettylights-syntax-string: #a5d6ff;\n  --color-prettylights-syntax-variable: #ffa657;\n  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;\n  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;\n  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;\n  --color-prettylights-syntax-carriage-return-text: #f0f6fc;\n  --color-prettylights-syntax-carriage-return-bg: #b62324;\n  --color-prettylights-syntax-string-regexp: #7ee787;\n  --color-prettylights-syntax-markup-list: #f2cc60;\n  --color-prettylights-syntax-markup-heading: #1f6feb;\n  --color-prettylights-syntax-markup-italic: #c9d1d9;\n  --color-prettylights-syntax-markup-bold: #c9d1d9;\n  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;\n  --color-prettylights-syntax-markup-deleted-bg: #67060c;\n  --color-prettylights-syntax-markup-inserted-text: #aff5b4;\n  --color-prettylights-syntax-markup-inserted-bg: #033a16;\n  --color-prettylights-syntax-markup-changed-text: #ffdfb6;\n  --color-prettylights-syntax-markup-changed-bg: #5a1e02;\n  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;\n  --color-prettylights-syntax-markup-ignored-bg: #1158c7;\n  --color-prettylights-syntax-meta-diff-range: #d2a8ff;\n  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;\n  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;\n  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;\n  --color-fg-default: #c9d1d9;\n  --color-fg-muted: #8b949e;\n  --color-fg-subtle: #484f58;\n  --color-canvas-default: #0d1117;\n  --color-canvas-subtle: #161b22;\n  --color-border-default: #30363d;\n  --color-border-muted: #21262d;\n  --color-neutral-muted: rgba(110, 118, 129, 0.4);\n  --color-accent-fg: #58a6ff;\n  --color-accent-emphasis: #1f6feb;\n  --color-attention-subtle: rgba(187, 128, 9, 0.15);\n  --color-danger-fg: #f85149;\n}\n[data-color-mode*='light'] .wmde-markdown,\n[data-color-mode*='light'] .wmde-markdown-var,\n.wmde-markdown-var[data-color-mode*='light'],\n.wmde-markdown[data-color-mode*='light'],\nbody[data-color-mode*='light'] {\n  color-scheme: light;\n  --color-prettylights-syntax-comment: #6e7781;\n  --color-prettylights-syntax-constant: #0550ae;\n  --color-prettylights-syntax-entity: #8250df;\n  --color-prettylights-syntax-storage-modifier-import: #24292f;\n  --color-prettylights-syntax-entity-tag: #116329;\n  --color-prettylights-syntax-keyword: #cf222e;\n  --color-prettylights-syntax-string: #0a3069;\n  --color-prettylights-syntax-variable: #953800;\n  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;\n  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;\n  --color-prettylights-syntax-invalid-illegal-bg: #82071e;\n  --color-prettylights-syntax-carriage-return-text: #f6f8fa;\n  --color-prettylights-syntax-carriage-return-bg: #cf222e;\n  --color-prettylights-syntax-string-regexp: #116329;\n  --color-prettylights-syntax-markup-list: #3b2300;\n  --color-prettylights-syntax-markup-heading: #0550ae;\n  --color-prettylights-syntax-markup-italic: #24292f;\n  --color-prettylights-syntax-markup-bold: #24292f;\n  --color-prettylights-syntax-markup-deleted-text: #82071e;\n  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;\n  --color-prettylights-syntax-markup-inserted-text: #116329;\n  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;\n  --color-prettylights-syntax-markup-changed-text: #953800;\n  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;\n  --color-prettylights-syntax-markup-ignored-text: #eaeef2;\n  --color-prettylights-syntax-markup-ignored-bg: #0550ae;\n  --color-prettylights-syntax-meta-diff-range: #8250df;\n  --color-prettylights-syntax-brackethighlighter-angle: #57606a;\n  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;\n  --color-prettylights-syntax-constant-other-reference-link: #0a3069;\n  --color-fg-default: #24292f;\n  --color-fg-muted: #57606a;\n  --color-fg-subtle: #6e7781;\n  --color-canvas-default: #ffffff;\n  --color-canvas-subtle: #f6f8fa;\n  --color-border-default: #d0d7de;\n  --color-border-muted: hsl(210, 18%, 87%);\n  --color-neutral-muted: rgba(175, 184, 193, 0.2);\n  --color-accent-fg: #0969da;\n  --color-accent-emphasis: #0969da;\n  --color-attention-subtle: #fff8c5;\n  --color-danger-fg: #cf222e;\n}\n.wmde-markdown {\n  -webkit-text-size-adjust: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  font-size: 16px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  color: var(--color-fg-default);\n  background-color: var(--color-canvas-default);\n}\n.wmde-markdown details,\n.wmde-markdown figcaption,\n.wmde-markdown figure {\n  display: block;\n}\n.wmde-markdown summary {\n  display: list-item;\n}\n.wmde-markdown [hidden] {\n  display: none !important;\n}\n.wmde-markdown a {\n  background-color: transparent;\n  color: var(--color-accent-fg);\n  text-decoration: none;\n}\n.wmde-markdown a:active,\n.wmde-markdown a:hover {\n  outline-width: 0;\n}\n.wmde-markdown abbr[title] {\n  border-bottom: none;\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n.wmde-markdown b,\n.wmde-markdown strong {\n  font-weight: 600;\n}\n.wmde-markdown dfn {\n  font-style: italic;\n}\n.wmde-markdown h1 {\n  margin: 0.67em 0;\n  font-weight: 600;\n  padding-bottom: 0.3em;\n  font-size: 2em;\n  border-bottom: 1px solid var(--color-border-muted);\n}\n.wmde-markdown mark {\n  background-color: var(--color-attention-subtle);\n  color: var(--color-text-primary);\n}\n.wmde-markdown small {\n  font-size: 90%;\n}\n.wmde-markdown sub,\n.wmde-markdown sup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.wmde-markdown sub {\n  bottom: -0.25em;\n}\n.wmde-markdown sup {\n  top: -0.5em;\n}\n.wmde-markdown img {\n  display: inline-block;\n  border-style: none;\n  max-width: 100%;\n  box-sizing: content-box;\n  background-color: var(--color-canvas-default);\n}\n.wmde-markdown code,\n.wmde-markdown kbd,\n.wmde-markdown pre,\n.wmde-markdown samp {\n  font-family: monospace, monospace;\n  font-size: 1em;\n}\n.wmde-markdown figure {\n  margin: 1em 40px;\n}\n.wmde-markdown hr {\n  box-sizing: content-box;\n  overflow: hidden;\n  background: transparent;\n  border: 0;\n  border-bottom: 1px solid var(--color-border-muted);\n  height: 0.25em;\n  padding: 0;\n  margin: 24px 0;\n  background-color: var(--color-border-default);\n}\n.wmde-markdown input {\n  font: inherit;\n  margin: 0;\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.wmde-markdown [type='button'],\n.wmde-markdown [type='reset'],\n.wmde-markdown [type='submit'] {\n  -webkit-appearance: button;\n}\n.wmde-markdown [type='button']::-moz-focus-inner,\n.wmde-markdown [type='reset']::-moz-focus-inner,\n.wmde-markdown [type='submit']::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n.wmde-markdown [type='button']:-moz-focusring,\n.wmde-markdown [type='reset']:-moz-focusring,\n.wmde-markdown [type='submit']:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n.wmde-markdown [type='checkbox'],\n.wmde-markdown [type='radio'] {\n  box-sizing: border-box;\n  padding: 0;\n}\n.wmde-markdown [type='number']::-webkit-inner-spin-button,\n.wmde-markdown [type='number']::-webkit-outer-spin-button {\n  height: auto;\n}\n.wmde-markdown [type='search'] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n.wmde-markdown [type='search']::-webkit-search-cancel-button,\n.wmde-markdown [type='search']::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n.wmde-markdown ::-webkit-input-placeholder {\n  color: inherit;\n  opacity: 0.54;\n}\n.wmde-markdown ::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n.wmde-markdown a:hover {\n  text-decoration: underline;\n}\n.wmde-markdown hr::before {\n  display: table;\n  content: '';\n}\n.wmde-markdown hr::after {\n  display: table;\n  clear: both;\n  content: '';\n}\n.wmde-markdown table {\n  border-spacing: 0;\n  border-collapse: collapse;\n  display: block;\n  width: max-content;\n  max-width: 100%;\n}\n.wmde-markdown td,\n.wmde-markdown th {\n  padding: 0;\n}\n.wmde-markdown details summary {\n  cursor: pointer;\n}\n.wmde-markdown details:not([open]) > *:not(summary) {\n  display: none !important;\n}\n.wmde-markdown kbd {\n  display: inline-block;\n  padding: 3px 5px;\n  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;\n  line-height: 10px;\n  color: var(--color-fg-default);\n  vertical-align: middle;\n  background-color: var(--color-canvas-subtle);\n  border: solid 1px var(--color-neutral-muted);\n  border-bottom-color: var(--color-neutral-muted);\n  border-radius: 6px;\n  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);\n}\n.wmde-markdown h1,\n.wmde-markdown h2,\n.wmde-markdown h3,\n.wmde-markdown h4,\n.wmde-markdown h5,\n.wmde-markdown h6 {\n  margin-top: 24px;\n  margin-bottom: 16px;\n  font-weight: 600;\n  line-height: 1.25;\n}\n.wmde-markdown td,\n.wmde-markdown th {\n  padding: 0;\n}\n.wmde-markdown details summary {\n  cursor: pointer;\n}\n.wmde-markdown details:not([open]) > *:not(summary) {\n  display: none !important;\n}\n.wmde-markdown kbd {\n  display: inline-block;\n  padding: 3px 5px;\n  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;\n  line-height: 10px;\n  color: var(--color-fg-default);\n  vertical-align: middle;\n  background-color: var(--color-canvas-subtle);\n  border: solid 1px var(--color-neutral-muted);\n  border-bottom-color: var(--color-neutral-muted);\n  border-radius: 6px;\n  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);\n}\n.wmde-markdown h1,\n.wmde-markdown h2,\n.wmde-markdown h3,\n.wmde-markdown h4,\n.wmde-markdown h5,\n.wmde-markdown h6 {\n  margin-top: 24px;\n  margin-bottom: 16px;\n  font-weight: 600;\n  line-height: 1.25;\n}\n.wmde-markdown h2 {\n  font-weight: 600;\n  padding-bottom: 0.3em;\n  font-size: 1.5em;\n  border-bottom: 1px solid var(--color-border-muted);\n}\n.wmde-markdown h3 {\n  font-weight: 600;\n  font-size: 1.25em;\n}\n.wmde-markdown h4 {\n  font-weight: 600;\n  font-size: 1em;\n}\n.wmde-markdown h5 {\n  font-weight: 600;\n  font-size: 0.875em;\n}\n.wmde-markdown h6 {\n  font-weight: 600;\n  font-size: 0.85em;\n  color: var(--color-fg-muted);\n}\n.wmde-markdown p {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n.wmde-markdown blockquote {\n  margin: 0;\n  padding: 0 1em;\n  color: var(--color-fg-muted);\n  border-left: 0.25em solid var(--color-border-default);\n}\n.wmde-markdown ul,\n.wmde-markdown ol {\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 2em;\n}\n.wmde-markdown ol ol,\n.wmde-markdown ul ol {\n  list-style-type: lower-roman;\n}\n.wmde-markdown ul ul ol,\n.wmde-markdown ul ol ol,\n.wmde-markdown ol ul ol,\n.wmde-markdown ol ol ol {\n  list-style-type: lower-alpha;\n}\n.wmde-markdown dd {\n  margin-left: 0;\n}\n.wmde-markdown tt,\n.wmde-markdown code {\n  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;\n  font-size: 12px;\n}\n.wmde-markdown pre {\n  margin-top: 0;\n  margin-bottom: 0;\n  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;\n  font-size: 12px;\n  word-wrap: normal;\n}\n.wmde-markdown .octicon {\n  display: inline-block;\n  overflow: visible !important;\n  vertical-align: text-bottom;\n  fill: currentColor;\n}\n.wmde-markdown ::placeholder {\n  color: var(--color-fg-subtle);\n  opacity: 1;\n}\n.wmde-markdown input::-webkit-outer-spin-button,\n.wmde-markdown input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.wmde-markdown [data-catalyst] {\n  display: block;\n}\n.wmde-markdown::before {\n  display: table;\n  content: '';\n}\n.wmde-markdown::after {\n  display: table;\n  clear: both;\n  content: '';\n}\n.wmde-markdown > *:first-child {\n  margin-top: 0 !important;\n}\n.wmde-markdown > *:last-child {\n  margin-bottom: 0 !important;\n}\n.wmde-markdown a:not([href]) {\n  color: inherit;\n  text-decoration: none;\n}\n.wmde-markdown .absent {\n  color: var(--color-danger-fg);\n}\n.wmde-markdown a.anchor {\n  float: left;\n  padding-right: 4px;\n  margin-left: -20px;\n  line-height: 1;\n}\n.wmde-markdown .anchor:focus {\n  outline: none;\n}\n.wmde-markdown p,\n.wmde-markdown blockquote,\n.wmde-markdown ul,\n.wmde-markdown ol,\n.wmde-markdown dl,\n.wmde-markdown table,\n.wmde-markdown pre,\n.wmde-markdown details {\n  margin-top: 0;\n  margin-bottom: 16px;\n}\n.wmde-markdown blockquote > :first-child {\n  margin-top: 0;\n}\n.wmde-markdown blockquote > :last-child {\n  margin-bottom: 0;\n}\n.wmde-markdown sup > a::before {\n  content: '[';\n}\n.wmde-markdown sup > a::after {\n  content: ']';\n}\n.wmde-markdown h1 .octicon-link,\n.wmde-markdown h2 .octicon-link,\n.wmde-markdown h3 .octicon-link,\n.wmde-markdown h4 .octicon-link,\n.wmde-markdown h5 .octicon-link,\n.wmde-markdown h6 .octicon-link {\n  color: var(--color-fg-default);\n  vertical-align: middle;\n  visibility: hidden;\n}\n.wmde-markdown h1:hover .anchor,\n.wmde-markdown h2:hover .anchor,\n.wmde-markdown h3:hover .anchor,\n.wmde-markdown h4:hover .anchor,\n.wmde-markdown h5:hover .anchor,\n.wmde-markdown h6:hover .anchor {\n  text-decoration: none;\n}\n.wmde-markdown h1:hover .anchor .octicon-link,\n.wmde-markdown h2:hover .anchor .octicon-link,\n.wmde-markdown h3:hover .anchor .octicon-link,\n.wmde-markdown h4:hover .anchor .octicon-link,\n.wmde-markdown h5:hover .anchor .octicon-link,\n.wmde-markdown h6:hover .anchor .octicon-link {\n  visibility: visible;\n}\n.wmde-markdown h1 tt,\n.wmde-markdown h1 code,\n.wmde-markdown h2 tt,\n.wmde-markdown h2 code,\n.wmde-markdown h3 tt,\n.wmde-markdown h3 code,\n.wmde-markdown h4 tt,\n.wmde-markdown h4 code,\n.wmde-markdown h5 tt,\n.wmde-markdown h5 code,\n.wmde-markdown h6 tt,\n.wmde-markdown h6 code {\n  padding: 0 0.2em;\n  font-size: inherit;\n}\n.wmde-markdown ul.no-list,\n.wmde-markdown ol.no-list {\n  padding: 0;\n  list-style-type: none;\n}\n.wmde-markdown ol[type='1'] {\n  list-style-type: decimal;\n}\n.wmde-markdown ol[type='a'] {\n  list-style-type: lower-alpha;\n}\n.wmde-markdown ol[type='i'] {\n  list-style-type: lower-roman;\n}\n.wmde-markdown div > ol:not([type]) {\n  list-style-type: decimal;\n}\n.wmde-markdown ul ul,\n.wmde-markdown ul ol,\n.wmde-markdown ol ol,\n.wmde-markdown ol ul {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.wmde-markdown li > p {\n  margin-top: 16px;\n}\n.wmde-markdown li + li {\n  margin-top: 0.25em;\n}\n.wmde-markdown dl {\n  padding: 0;\n}\n.wmde-markdown dl dt {\n  padding: 0;\n  margin-top: 16px;\n  font-size: 1em;\n  font-style: italic;\n  font-weight: 600;\n}\n.wmde-markdown dl dd {\n  padding: 0 16px;\n  margin-bottom: 16px;\n}\n.wmde-markdown table th {\n  font-weight: 600;\n}\n.wmde-markdown table th,\n.wmde-markdown table td {\n  padding: 6px 13px;\n  border: 1px solid var(--color-border-default);\n}\n.wmde-markdown table tr {\n  background-color: var(--color-canvas-default);\n  border-top: 1px solid var(--color-border-muted);\n}\n.wmde-markdown table tr:nth-child(2n) {\n  background-color: var(--color-canvas-subtle);\n}\n.wmde-markdown table img {\n  background-color: transparent;\n}\n.wmde-markdown img[align='right'] {\n  padding-left: 20px;\n}\n.wmde-markdown img[align='left'] {\n  padding-right: 20px;\n}\n.wmde-markdown .emoji {\n  max-width: none;\n  vertical-align: text-top;\n  background-color: transparent;\n}\n.wmde-markdown span.frame {\n  display: block;\n  overflow: hidden;\n}\n.wmde-markdown span.frame > span {\n  display: block;\n  float: left;\n  width: auto;\n  padding: 7px;\n  margin: 13px 0 0;\n  overflow: hidden;\n  border: 1px solid var(--color-border-default);\n}\n.wmde-markdown span.frame span img {\n  display: block;\n  float: left;\n}\n.wmde-markdown span.frame span span {\n  display: block;\n  padding: 5px 0 0;\n  clear: both;\n  color: var(--color-fg-default);\n}\n.wmde-markdown span.align-center {\n  display: block;\n  overflow: hidden;\n  clear: both;\n}\n.wmde-markdown span.align-center > span {\n  display: block;\n  margin: 13px auto 0;\n  overflow: hidden;\n  text-align: center;\n}\n.wmde-markdown span.align-center span img {\n  margin: 0 auto;\n  text-align: center;\n}\n.wmde-markdown span.align-right {\n  display: block;\n  overflow: hidden;\n  clear: both;\n}\n.wmde-markdown span.align-right > span {\n  display: block;\n  margin: 13px 0 0;\n  overflow: hidden;\n  text-align: right;\n}\n.wmde-markdown span.align-right span img {\n  margin: 0;\n  text-align: right;\n}\n.wmde-markdown span.float-left {\n  display: block;\n  float: left;\n  margin-right: 13px;\n  overflow: hidden;\n}\n.wmde-markdown span.float-left span {\n  margin: 13px 0 0;\n}\n.wmde-markdown span.float-right {\n  display: block;\n  float: right;\n  margin-left: 13px;\n  overflow: hidden;\n}\n.wmde-markdown span.float-right > span {\n  display: block;\n  margin: 13px auto 0;\n  overflow: hidden;\n  text-align: right;\n}\n.wmde-markdown code,\n.wmde-markdown tt {\n  padding: 0.2em 0.4em;\n  margin: 0;\n  font-size: 85%;\n  background-color: var(--color-neutral-muted);\n  border-radius: 6px;\n}\n.wmde-markdown code br,\n.wmde-markdown tt br {\n  display: none;\n}\n.wmde-markdown del code {\n  text-decoration: inherit;\n}\n.wmde-markdown pre code {\n  font-size: 100%;\n}\n.wmde-markdown pre > code {\n  padding: 0;\n  margin: 0;\n  word-break: normal;\n  white-space: pre;\n  background: transparent;\n  border: 0;\n}\n.wmde-markdown pre {\n  font-size: 85%;\n  line-height: 1.45;\n  background-color: var(--color-canvas-subtle);\n  border-radius: 6px;\n}\n.wmde-markdown pre code,\n.wmde-markdown pre tt {\n  display: inline;\n  max-width: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n  line-height: inherit;\n  word-wrap: normal;\n  background-color: transparent;\n  border: 0;\n}\n.wmde-markdown pre > code {\n  padding: 16px;\n  overflow: auto;\n  display: block;\n}\n.wmde-markdown pre > code::-webkit-scrollbar {\n  background: transparent;\n  width: 8px;\n  height: 8px;\n}\n.wmde-markdown pre > code::-webkit-scrollbar-thumb {\n  background: var(--color-fg-muted);\n  border-radius: 10px;\n}\n.wmde-markdown .csv-data td,\n.wmde-markdown .csv-data th {\n  padding: 5px;\n  overflow: hidden;\n  font-size: 12px;\n  line-height: 1;\n  text-align: left;\n  white-space: nowrap;\n}\n.wmde-markdown .csv-data .blob-num {\n  padding: 10px 8px 9px;\n  text-align: right;\n  background: var(--color-canvas-default);\n  border: 0;\n}\n.wmde-markdown .csv-data tr {\n  border-top: 0;\n}\n.wmde-markdown .csv-data th {\n  font-weight: 600;\n  background: var(--color-canvas-subtle);\n  border-top: 0;\n}\n.wmde-markdown .footnotes {\n  font-size: 12px;\n  color: var(--color-fg-muted);\n  border-top: 1px solid var(--color-border-default);\n}\n.wmde-markdown .footnotes ol {\n  padding-left: 16px;\n}\n.wmde-markdown .footnotes li {\n  position: relative;\n}\n.wmde-markdown .footnotes li:target::before {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  bottom: -8px;\n  left: -24px;\n  pointer-events: none;\n  content: '';\n  border: 2px solid var(--color-accent-emphasis);\n  border-radius: 6px;\n}\n.wmde-markdown .footnotes li:target {\n  color: var(--color-fg-default);\n}\n.wmde-markdown .footnotes .data-footnote-backref g-emoji {\n  font-family: monospace;\n}\n.wmde-markdown .task-list-item {\n  list-style-type: none;\n}\n.wmde-markdown .task-list-item label {\n  font-weight: 400;\n}\n.wmde-markdown .task-list-item.enabled label {\n  cursor: pointer;\n}\n.wmde-markdown .task-list-item + .wmde-markdown .task-list-item {\n  margin-top: 3px;\n}\n.wmde-markdown .task-list-item .handle {\n  display: none;\n}\n.wmde-markdown .task-list-item-checkbox,\n.wmde-markdown .contains-task-list input[type='checkbox'] {\n  margin: 0 0.2em 0.25em -1.6em;\n  vertical-align: middle;\n}\n.wmde-markdown .contains-task-list:dir(rtl) .task-list-item-checkbox,\n.wmde-markdown .contains-task-list:dir(rtl) input[type='checkbox'] {\n  margin: 0 -1.6em 0.25em 0.2em;\n}\n.wmde-markdown ::-webkit-calendar-picker-indicator {\n  filter: invert(50%);\n}\n.wmde-markdown pre {\n  position: relative;\n}\n.wmde-markdown pre .copied {\n  visibility: hidden;\n  display: flex;\n  position: absolute;\n  cursor: pointer;\n  color: var(--color-fg-default);\n  top: 6px;\n  right: 6px;\n  border-radius: 5px;\n  background: var(--color-border-default);\n  padding: 6px;\n  font-size: 12px;\n  transition: all 0.3s;\n}\n.wmde-markdown pre .copied .octicon-copy {\n  display: block;\n}\n.wmde-markdown pre .copied .octicon-check {\n  display: none;\n}\n.wmde-markdown pre:hover .copied {\n  visibility: visible;\n}\n.wmde-markdown pre:hover .copied:hover {\n  background: var(--color-prettylights-syntax-entity-tag);\n  color: var(--color-canvas-default);\n}\n.wmde-markdown pre:hover .copied:active,\n.wmde-markdown pre .copied.active {\n  background: var(--color-copied-active-bg);\n  color: var(--color-canvas-default);\n}\n.wmde-markdown pre .active .octicon-copy {\n  display: none;\n}\n.wmde-markdown pre .active .octicon-check {\n  display: block;\n}\n.wmde-markdown .markdown-alert {\n  padding: 0.5rem 1em;\n  color: inherit;\n  margin-bottom: 16px;\n  border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));\n}\n.wmde-markdown .markdown-alert > :last-child {\n  margin-bottom: 0 !important;\n}\n.wmde-markdown .markdown-alert .markdown-alert-title {\n  display: flex;\n  align-items: center;\n  line-height: 1;\n  font-weight: 500;\n  font-size: 14px;\n}\n.wmde-markdown .markdown-alert .markdown-alert-title svg.octicon {\n  margin-right: var(--base-size-8, 8px) !important;\n}\n.wmde-markdown .markdown-alert.markdown-alert-note {\n  border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));\n}\n.wmde-markdown .markdown-alert.markdown-alert-note .markdown-alert-title {\n  color: var(--fgColor-accent, var(--color-accent-fg));\n}\n.wmde-markdown .markdown-alert.markdown-alert-tip {\n  border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));\n}\n.wmde-markdown .markdown-alert.markdown-alert-tip .markdown-alert-title {\n  color: var(--fgColor-success, var(--color-success-fg));\n}\n.wmde-markdown .markdown-alert.markdown-alert-important {\n  border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));\n}\n.wmde-markdown .markdown-alert.markdown-alert-important .markdown-alert-title {\n  color: var(--fgColor-done, var(--color-done-fg));\n}\n.wmde-markdown .markdown-alert.markdown-alert-warning {\n  border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));\n}\n.wmde-markdown .markdown-alert.markdown-alert-warning .markdown-alert-title {\n  color: var(--fgColor-attention, var(--color-attention-fg));\n}\n.wmde-markdown .markdown-alert.markdown-alert-caution {\n  border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));\n}\n.wmde-markdown .markdown-alert.markdown-alert-caution .markdown-alert-title {\n  color: var(--fgColor-danger, var(--color-danger-fg));\n}\n.wmde-markdown .highlight-line {\n  background-color: var(--color-neutral-muted);\n}\n.wmde-markdown .code-line.line-number::before {\n  display: inline-block;\n  width: 1rem;\n  text-align: right;\n  margin-right: 16px;\n  color: var(--color-fg-subtle);\n  content: attr(line);\n  white-space: nowrap;\n}\n.wmde-markdown .token.comment,\n.wmde-markdown .token.prolog,\n.wmde-markdown .token.doctype,\n.wmde-markdown .token.cdata {\n  color: var(--color-prettylights-syntax-comment);\n}\n.wmde-markdown .token.namespace {\n  opacity: 0.7;\n}\n.wmde-markdown .token.property,\n.wmde-markdown .token.tag,\n.wmde-markdown .token.selector,\n.wmde-markdown .token.constant,\n.wmde-markdown .token.symbol,\n.wmde-markdown .token.deleted {\n  color: var(--color-prettylights-syntax-entity-tag);\n}\n.wmde-markdown .token.maybe-class-name {\n  color: var(--color-prettylights-syntax-variable);\n}\n.wmde-markdown .token.property-access,\n.wmde-markdown .token.operator,\n.wmde-markdown .token.boolean,\n.wmde-markdown .token.number,\n.wmde-markdown .token.selector .token.class,\n.wmde-markdown .token.attr-name,\n.wmde-markdown .token.string,\n.wmde-markdown .token.char,\n.wmde-markdown .token.builtin {\n  color: var(--color-prettylights-syntax-constant);\n}\n.wmde-markdown .token.deleted {\n  color: var(--color-prettylights-syntax-markup-deleted-text);\n}\n.wmde-markdown .code-line .token.deleted {\n  background-color: var(--color-prettylights-syntax-markup-deleted-bg);\n}\n.wmde-markdown .token.inserted {\n  color: var(--color-prettylights-syntax-markup-inserted-text);\n}\n.wmde-markdown .code-line .token.inserted {\n  background-color: var(--color-prettylights-syntax-markup-inserted-bg);\n}\n.wmde-markdown .token.variable {\n  color: var(--color-prettylights-syntax-constant);\n}\n.wmde-markdown .token.entity,\n.wmde-markdown .token.url,\n.wmde-markdown .language-css .token.string,\n.wmde-markdown .style .token.string {\n  color: var(--color-prettylights-syntax-string);\n}\n.wmde-markdown .token.color,\n.wmde-markdown .token.atrule,\n.wmde-markdown .token.attr-value,\n.wmde-markdown .token.function,\n.wmde-markdown .token.class-name {\n  color: var(--color-prettylights-syntax-string);\n}\n.wmde-markdown .token.rule,\n.wmde-markdown .token.regex,\n.wmde-markdown .token.important,\n.wmde-markdown .token.keyword {\n  color: var(--color-prettylights-syntax-keyword);\n}\n.wmde-markdown .token.coord {\n  color: var(--color-prettylights-syntax-meta-diff-range);\n}\n.wmde-markdown .token.important,\n.wmde-markdown .token.bold {\n  font-weight: bold;\n}\n.wmde-markdown .token.italic {\n  font-style: italic;\n}\n.wmde-markdown .token.entity {\n  cursor: help;\n}\n";
 n$1(css$4,{});
 
-var _excluded$3 = ["prefixCls", "className", "source", "style", "disableCopy", "skipHtml", "onScroll", "onMouseOver", "pluginsFilter", "rehypeRewrite", "wrapperElement", "warpperElement", "urlTransform"];
+var _excluded$4 = ["prefixCls", "className", "source", "style", "disableCopy", "skipHtml", "onScroll", "onMouseOver", "pluginsFilter", "rehypeRewrite", "wrapperElement", "warpperElement", "urlTransform"];
 var defaultUrlTransform = url => url;
 var MarkdownPreview$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   var {
@@ -154386,9 +154348,9 @@ var MarkdownPreview$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       warpperElement = {},
       urlTransform
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$4);
   var mdp = React__default.useRef(null);
-  useImperativeHandle(ref, () => _extends({}, props, {
+  useImperativeHandle(ref, () => _extends$1({}, props, {
     mdp
   }), [mdp, props]);
   var cls = (prefixCls || '') + " " + (className || '');
@@ -154406,15 +154368,15 @@ var MarkdownPreview$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     rehypePlugins.push(rehypeRaw);
   }
   var remarkPlugins = [remarkAlert, ...(other.remarkPlugins || []), remarkGfm];
-  var wrapperProps = _extends({}, warpperElement, wrapperElement);
-  return /*#__PURE__*/jsx$2("div", _extends({
+  var wrapperProps = _extends$1({}, warpperElement, wrapperElement);
+  return /*#__PURE__*/jsx$2("div", _extends$1({
     ref: mdp,
     onScroll: onScroll,
     onMouseOver: onMouseOver
   }, wrapperProps, {
     className: cls,
     style: style,
-    children: /*#__PURE__*/jsx$2(Markdown, _extends({}, customProps, other, {
+    children: /*#__PURE__*/jsx$2(Markdown, _extends$1({}, customProps, other, {
       skipHtml: skipHtml,
       urlTransform: urlTransform || defaultUrlTransform,
       rehypePlugins: pluginsFilter ? pluginsFilter('rehype', rehypePlugins) : rehypePlugins,
@@ -154428,7 +154390,7 @@ var reservedMeta = function reservedMeta(options) {
   return tree => {
     visit(tree, node => {
       if (node.type === 'element' && node.tagName === 'code' && node.data && node.data.meta) {
-        node.properties = _extends({}, node.properties, {
+        node.properties = _extends$1({}, node.properties, {
           'data-meta': String(node.data.meta)
         });
       }
@@ -154691,7 +154653,7 @@ var rehypeRewriteHandle = (disableCopy, rewrite) => (node, index, parent) => {
   if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
     var child = node.children && node.children[0];
     if (child && child.properties && child.properties.ariaHidden === 'true') {
-      child.properties = _extends({
+      child.properties = _extends$1({
         class: 'anchor'
       }, child.properties);
       child.children = [octiconLink];
@@ -154714,7 +154676,7 @@ var MarkdownPreview = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }], ...(props.rehypePlugins || []), [f, {
     ignoreMissing: true
   }]];
-  return /*#__PURE__*/jsx$2(MarkdownPreview$1, _extends({}, props, {
+  return /*#__PURE__*/jsx$2(MarkdownPreview$1, _extends$1({}, props, {
     rehypePlugins: rehypePlugins,
     ref: ref
   }));
@@ -155280,14 +155242,14 @@ var undo = {
   }
 };
 
-var _excluded$2 = ["editorProps", "command", "onClick"];
+var _excluded$3 = ["editorProps", "command", "onClick"];
 var FullscreenButton = props => {
   var {
       editorProps,
       command,
       onClick
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded$2);
+    reset = _objectWithoutPropertiesLoose$1(props, _excluded$3);
   var $height = useRef(0);
   var [full, setFull] = useState(false);
   var fullRef = useRef(full);
@@ -155353,7 +155315,7 @@ var FullscreenButton = props => {
     setFull(isFull);
     onClick == null || onClick(evn, isFull);
   };
-  return /*#__PURE__*/jsx$2("button", _extends({}, reset, {
+  return /*#__PURE__*/jsx$2("button", _extends$1({}, reset, {
     onClick: click,
     type: "button",
     className: full ? 'active' : '',
@@ -155365,7 +155327,7 @@ var fullscreen = {
   keyCommand: 'fullscreen',
   button: (command, props, opts) => /*#__PURE__*/jsx$2(FullscreenButton, {
     command: command,
-    editorProps: _extends({}, props, opts)
+    editorProps: _extends$1({}, props, opts)
   }),
   icon: /*#__PURE__*/jsx$2("svg", {
     fill: "currentColor",
@@ -155434,7 +155396,7 @@ var preview = {
   keyCommand: 'preview',
   button: (command, props, opts) => /*#__PURE__*/jsx$2(Preview, {
     command: command,
-    editorProps: _extends({}, props, opts)
+    editorProps: _extends$1({}, props, opts)
   }),
   icon: /*#__PURE__*/jsx$2("svg", {
     fill: "currentColor",
@@ -155472,7 +155434,7 @@ var getModeCommands = () => [preview, fullscreen];
 var css$3 = ".md-editor-toolbar {\n  padding: 4px 2px 4px 5px;\n  border-radius: 3px 3px 0 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n}\n.md-editor-toolbar-warp {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  -webkit-user-select: none;\n          user-select: none;\n  flex-wrap: wrap;\n}\n.md-editor-toolbar-warp:not(.md-editor-toolbar-bottom) {\n  border-bottom: 1px solid var(--color-border-muted);\n}\n.md-editor-toolbar-bottom {\n  border-top: 1px solid var(--color-border-muted);\n  border-radius: 0 0 3px 3px;\n}\n.md-editor-toolbar button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: 0;\n  display: inline-block;\n  height: 20px;\n  width: 20px;\n  padding: 0;\n  border-radius: 2px;\n  transition: all 0.3s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color-fg-default);\n}\n.md-editor-toolbar button:hover {\n  color: var(--color-accent-fg);\n  background-color: var(--color-neutral-muted);\n}\n.md-editor-toolbar button.active {\n  color: var(--color-prettylights-syntax-constant);\n  background-color: var(--color-neutral-muted);\n}\n.md-editor-toolbar button:active {\n  color: var(--color-danger-fg);\n  background-color: var(--color-neutral-muted);\n}\n.md-editor-toolbar button svg {\n  vertical-align: middle;\n}\n.md-editor-toolbar-mode {\n  padding-right: 5px;\n}\n";
 n$1(css$3,{});
 
-var _excluded$1 = ["prefixCls", "className", "onClick", "toolbars", "editor", "mode", "preview", "container", "containerEditor", "editorProps"];
+var _excluded$2 = ["prefixCls", "className", "onClick", "toolbars", "editor", "mode", "preview", "container", "containerEditor", "editorProps"];
 function ToolBar(props) {
   var {
       prefixCls = 'md-editor',
@@ -155485,7 +155447,7 @@ function ToolBar(props) {
       containerEditor,
       editorProps = {}
     } = props,
-    htmlProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+    htmlProps = _objectWithoutPropertiesLoose$1(props, _excluded$2);
   if (!toolbars || toolbars.length === 0) return null;
   function handleClick(execute) {
     if (execute && editor && editor) {
@@ -155493,7 +155455,7 @@ function ToolBar(props) {
     }
   }
   editorProps.prefixCls = prefixCls;
-  return /*#__PURE__*/jsx$2("div", _extends({
+  return /*#__PURE__*/jsx$2("div", _extends$1({
     className: prefixCls + "-toolbar " + (className || '') + " " + (mode ? prefixCls + "-toolbar-mode" : '')
   }, htmlProps, {
     children: [...toolbars].map((command, key) => {
@@ -155520,7 +155482,7 @@ function ToolBar(props) {
           key
         });
       }
-      return /*#__PURE__*/createElement("button", _extends({}, buttonProps, {
+      return /*#__PURE__*/createElement("button", _extends$1({}, buttonProps, {
         key: key
       }));
     })
@@ -155688,7 +155650,7 @@ var defaultTheme = createTheme({
 var css$2 = "[data-color-mode*='dark'] .md-editor {\n  --color-border-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 rgb(255 255 255 / 0%), 0 1px 1px rgb(255 255 255 / 20%);\n}\n[data-color-mode*='light'] .md-editor {\n  --color-border-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgb(16 22 26 / 0%), 0 1px 1px rgb(16 22 26 / 20%);\n}\n.md-editor {\n  color: var(--color-fg-default);\n  box-shadow: var(--color-border-shadow);\n  text-align: left;\n  border-radius: 3px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-canvas-subtle);\n}\n.md-editor-content {\n  position: relative;\n  flex: 1;\n  overflow: auto;\n}\n.md-editor-fullscreen .md-editor {\n  border-radius: 0;\n}\n.md-editor-fullscreen {\n  z-index: 999;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.md-editor-fullscreen .md-editor-toolbar {\n  border-radius: 0;\n}\n.md-editor-preview {\n  padding: 20px;\n  width: 0%;\n  overflow: hidden;\n  border-left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  box-sizing: border-box;\n  background-color: var(--color-canvas-default);\n}\n.md-editor h1 a,\n.md-editor h2 a,\n.md-editor h3 a,\n.md-editor h4 a,\n.md-editor h5 a,\n.md-editor h6 a {\n  display: none;\n}\n";
 n$1(css$2,{});
 
-var _excluded = ["prefixCls", "className", "onChange", "toolbars", "toolbarsMode", "toolbarsFilter", "visible", "renderPreview", "visibleEditor", "hideToolbar", "showToolbar", "toolbarBottom", "enableScroll", "enablePreview", "previewProps", "extensions", "previewWidth", "reExtensions", "onPreviewMode"];
+var _excluded$1 = ["prefixCls", "className", "onChange", "toolbars", "toolbarsMode", "toolbarsFilter", "visible", "renderPreview", "visibleEditor", "hideToolbar", "showToolbar", "toolbarBottom", "enableScroll", "enablePreview", "previewProps", "extensions", "previewWidth", "reExtensions", "onPreviewMode"];
 var scrollerStyle = EditorView.theme({
   '&.cm-editor, & .cm-scroller': {
     borderBottomRightRadius: '3px',
@@ -155718,7 +155680,7 @@ function MarkdownEditorInternal(props, ref) {
       previewWidth = '50%',
       reExtensions
     } = props,
-    codemirrorProps = _objectWithoutPropertiesLoose(props, _excluded);
+    codemirrorProps = _objectWithoutPropertiesLoose$1(props, _excluded$1);
   var [value, setValue] = useState(props.value || '');
   var codeMirror = useRef(null);
   var container = useRef(null);
@@ -155735,7 +155697,7 @@ function MarkdownEditorInternal(props, ref) {
     editor: codeMirror,
     container: container,
     containerEditor: containerEditor,
-    editorProps: _extends({}, props, {
+    editorProps: _extends$1({}, props, {
       previewWidth
     })
   };
@@ -155798,7 +155760,7 @@ function MarkdownEditorInternal(props, ref) {
     children: [/*#__PURE__*/jsx$2("div", {
       className: prefixCls + "-content-editor",
       ref: containerEditor,
-      children: visibleEditor && /*#__PURE__*/jsx$2(ReactCodeMirror, _extends({
+      children: visibleEditor && /*#__PURE__*/jsx$2(ReactCodeMirror, _extends$1({
         theme: defaultTheme
       }, codemirrorProps, {
         className: prefixCls + "-inner",
@@ -155810,7 +155772,7 @@ function MarkdownEditorInternal(props, ref) {
     }), enablePreview && /*#__PURE__*/jsx$2("div", {
       className: clsPreview,
       ref: preview,
-      children: renderPreview ? renderPreview(previewProps, !!visible) : /*#__PURE__*/jsx$2(MarkdownPreview, _extends({}, previewProps, {
+      children: renderPreview ? renderPreview(previewProps, !!visible) : /*#__PURE__*/jsx$2(MarkdownPreview, _extends$1({}, previewProps, {
         "data-visible": !!visible
       }))
     })]
@@ -155821,9 +155783,9 @@ function MarkdownEditorInternal(props, ref) {
   var isShowToolbar = hideToolbar != null ? hideToolbar : showToolbar;
   var toolbarView = isShowToolbar && /*#__PURE__*/jsxs("div", {
     className: clsToolbar,
-    children: [/*#__PURE__*/jsx$2(ToolBar, _extends({}, toolBarProps, {
+    children: [/*#__PURE__*/jsx$2(ToolBar, _extends$1({}, toolBarProps, {
       toolbars: tools
-    })), /*#__PURE__*/jsx$2(ToolBar, _extends({}, toolBarProps, {
+    })), /*#__PURE__*/jsx$2(ToolBar, _extends$1({}, toolBarProps, {
       toolbars: toolsMode,
       mode: true
     }))]
@@ -162201,15 +162163,79 @@ definePreset$1({
     name: 'common-fe-components',
 });
 
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React__default.createContext && /*#__PURE__*/React__default.createContext(DefaultContext);
+
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /*#__PURE__*/React__default.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return props => /*#__PURE__*/React__default.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = conf => {
+    var {
+        attr,
+        size,
+        title
+      } = props,
+      svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /*#__PURE__*/React__default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? /*#__PURE__*/React__default.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function CiFilter (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"g","attr":{"id":"Filter"},"child":[{"tag":"path","attr":{"d":"M14.037,20.937a1.015,1.015,0,0,1-.518-.145l-3.334-2a2.551,2.551,0,0,1-1.233-2.176V12.091a1.526,1.526,0,0,0-.284-.891L4.013,4.658a1.01,1.01,0,0,1,.822-1.6h14.33a1.009,1.009,0,0,1,.822,1.6h0L15.332,11.2a1.527,1.527,0,0,0-.285.891v7.834a1.013,1.013,0,0,1-1.01,1.012ZM4.835,4.063,9.482,10.62a2.515,2.515,0,0,1,.47,1.471v4.524a1.543,1.543,0,0,0,.747,1.318l3.334,2,.014-7.843a2.516,2.516,0,0,1,.471-1.471l4.654-6.542,0,0Z"},"child":[]}]}]})(props);
+}
+
 // THIS FILE IS AUTO GENERATED
 function ImCheckboxChecked (props) {
-  return GenIcon$1({"tag":"svg","attr":{"version":"1.1","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM7 12.414l-3.707-3.707 1.414-1.414 2.293 2.293 4.793-4.793 1.414 1.414-6.207 6.207z"},"child":[]}]})(props);
+  return GenIcon({"tag":"svg","attr":{"version":"1.1","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM7 12.414l-3.707-3.707 1.414-1.414 2.293 2.293 4.793-4.793 1.414 1.414-6.207 6.207z"},"child":[]}]})(props);
 }function ImCheckboxUnchecked (props) {
-  return GenIcon$1({"tag":"svg","attr":{"version":"1.1","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM14 14h-12v-12h12v12z"},"child":[]}]})(props);
+  return GenIcon({"tag":"svg","attr":{"version":"1.1","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM14 14h-12v-12h12v12z"},"child":[]}]})(props);
 }
 
-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-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--size_icon {\n    height: var(--sizes-10);\n    width: var(--sizes-10);\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_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--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--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    .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      .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  .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  .bg_light\\.gray {\n    background: var(--colors-light-gray);\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  .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  .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  .fw_medium {\n    font-weight: var(--font-weights-medium);\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,{});
+// THIS FILE IS AUTO GENERATED
+function RiNumbersFill (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M9 18H4V10H9V18ZM15 18H10V6H15V18ZM21 18H16V2H21V18ZM22 22H3V20H22V22Z"},"child":[]}]})(props);
+}
 
 const refreshInterval$1 = 500;
 function createEventLoopDelaySampler() {
@@ -162229,10 +162255,8 @@ function createEventLoopDelaySampler() {
   return delay;
 }
 
-// THIS FILE IS AUTO GENERATED
-function RiNumbersFill (props) {
-  return GenIcon$1({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M9 18H4V10H9V18ZM15 18H10V6H15V18ZM21 18H16V2H21V18ZM22 22H3V20H22V22Z"},"child":[]}]})(props);
-}
+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-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--size_icon {\n    height: var(--sizes-10);\n    width: var(--sizes-10);\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_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--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--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    .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      .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  .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  .bg_light\\.gray {\n    background: var(--colors-light-gray);\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  .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  .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  .fw_medium {\n    font-weight: var(--font-weights-medium);\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,{});
 
 function PanelToolbarMetrics({
   renderedFps,
@@ -162326,7 +162350,8 @@ const PanelToolbar = ({
   triggerToast,
   renderedFps,
   annotationsFps,
-  toggleTopic
+  toggleTopic,
+  toggleFullscreen
 }) => {
   const [metrics, setMetrics] = React__default.useState();
   const {
@@ -162385,7 +162410,7 @@ const PanelToolbar = ({
     gap: "sm",
     align: "center",
     justify: "space-between",
-    className: "px-4"
+    className: "px-4 bg-white"
   }, /*#__PURE__*/React__default.createElement(Flex, {
     direction: "row",
     gap: "xs",
@@ -162459,7 +162484,15 @@ const PanelToolbar = ({
     colorVariant: "white",
     size: "sm",
     className: "text-gray-700"
-  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), toggleFullscreen && /*#__PURE__*/React__default.createElement(Tooltip, {
+    content: "Fullscreen"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    icon: MdFullscreen,
+    variant: "outline",
+    colorVariant: "white",
+    size: "sm",
+    onClick: toggleFullscreen
+  })), /*#__PURE__*/React__default.createElement(Tooltip, {
     content: "Close Stream"
   }, /*#__PURE__*/React__default.createElement(Button, {
     icon: MdClose,
@@ -162499,28 +162532,32 @@ const Panel = ({
   renderDelay,
   toggleTopic,
   triggerToast,
-  hideToolbar = false
+  hideToolbar = false,
+  toggleFullscreen
 }) => {
   const [detections, setDetections] = React__default.useState([]);
+  const sectionRef = useRef(null);
   React__default.useEffect(() => {
     if (!disableAnnotations) {
       setDetections(current => [...rawToAnnotations(annotationTopics, "main", current), ...rawToAnnotations(extraAnnotationTopics, "extra", current)]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(annotationTopics), JSON.stringify(extraAnnotationTopics)]);
+  const toggleFullscreenForThisPanel = () => {
+    if (!toggleFullscreen || !sectionRef.current) {
+      return;
+    }
+    toggleFullscreen(sectionRef);
+  };
   return /*#__PURE__*/React__default.createElement(RemountOnValueChange, {
     value: "internal-player"
   }, /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(DetectionContext.Provider, {
     value: {
       detections
     }
-  }, /*#__PURE__*/React__default.createElement(Stack$2, {
-    flexGrow: 1,
-    overflow: "hidden",
-    border: "1px solid #d3d3d3d9",
-    style: {
-      borderRadius: "8px"
-    }
+  }, /*#__PURE__*/React__default.createElement("section", {
+    className: "flex flex-col grow border border-solid border-[#d3d3d3d9] overflow-hidden rounded-lg",
+    ref: sectionRef
   }, !hideToolbar && /*#__PURE__*/React__default.createElement(PanelToolbar, {
     kind: kind,
     topic: topic,
@@ -162531,6 +162568,7 @@ const Panel = ({
     annotationsFps: annotationsFps,
     renderDelay: renderDelay,
     toggleTopic: toggleTopic,
+    toggleFullscreen: toggleFullscreenForThisPanel,
     triggerToast: triggerToast
   }), /*#__PURE__*/React__default.createElement(Suspense, {
     fallback: /*#__PURE__*/React__default.createElement(EmptyState, null, /*#__PURE__*/React__default.createElement("div", null, "Loading..."))
@@ -162565,7 +162603,7 @@ function createRenderDelaySampler() {
   };
 }
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BgHqUgA4.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-C2xXrJ3A.js'));
 const ImagePanelBody = ({
   topic,
   frameRenderedEvent,
@@ -162628,6 +162666,7 @@ const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
     kind: "image"
   }, props, {
     toggleTopic: props.toggleTopic,
+    toggleFullscreen: props.toggleFullscreen,
     renderedFps: renderedFps,
     annotationsFps: annotationsFps,
     renderDelay: averageFrameDelay
@@ -162642,7 +162681,24 @@ const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
 // 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-Bgmmj1v0.js'));
+const DEFAULT_CAMERA_STATE = {
+  distance: -500,
+  perspective: true,
+  phi: 89,
+  target: [0, 0, 0],
+  targetOffset: [0, 0, 0],
+  targetOrientation: [0, 1, 1, 1],
+  thetaOffset: 180,
+  fovy: 60,
+  near: 2,
+  far: 20000
+};
+
+// 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/
+
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-CdL1JTfy.js'));
 const PointCloudPanelBody = ({
   topic,
   frameRenderedEvent
@@ -162671,16 +162727,16 @@ const PointCloudPanelBody = ({
       }
     },
     cameraState: {
-      distance: -1000,
-      perspective: true,
+      distance: DEFAULT_CAMERA_STATE.distance,
+      perspective: DEFAULT_CAMERA_STATE.perspective,
       phi: 89,
-      target: [0, 0, 0],
-      targetOffset: [0, 0, 0],
-      targetOrientation: [0, 1, 1, 1],
-      thetaOffset: 180,
-      fovy: getFovy(),
-      near: 5,
-      far: 20000
+      target: DEFAULT_CAMERA_STATE.target,
+      targetOffset: DEFAULT_CAMERA_STATE.targetOffset,
+      targetOrientation: DEFAULT_CAMERA_STATE.targetOrientation,
+      thetaOffset: DEFAULT_CAMERA_STATE.thetaOffset,
+      near: DEFAULT_CAMERA_STATE.near,
+      far: DEFAULT_CAMERA_STATE.far,
+      fovy: getFovy()
     },
     imageMode: {
       colorMode: "rgba-fields"
@@ -162694,6 +162750,7 @@ const PointCloudPanelBody = ({
 const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPanel({
   topic,
   toggleTopic,
+  toggleFullscreen,
   targetFps,
   hideToolbar = false
 }) {
@@ -162711,23 +162768,24 @@ const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPane
   React__default.useEffect(() => {
     const interval = setInterval(() => {
       if (!renderedFpsMetricsManagerRef.current) {
-        console.warn('renderedFpsMetricsManagerRef is null');
+        console.warn("renderedFpsMetricsManagerRef is null");
         return;
       }
-      setRenderedFps(renderedFpsMetricsManagerRef.current.calculate('render-pt'));
+      setRenderedFps(renderedFpsMetricsManagerRef.current.calculate("render-pt"));
     }, 500);
     return () => {
       clearInterval(interval);
     };
   }, [renderedFpsMetricsManagerRef]);
   const handleFrameRendered = React__default.useCallback(frameTime => {
-    renderedFpsMetricsManagerRef.current?.registerEvent('render-pt');
+    renderedFpsMetricsManagerRef.current?.registerEvent("render-pt");
     addFrameTime(frameTime);
   }, [addFrameTime]);
   return /*#__PURE__*/React__default.createElement(Panel, {
     kind: "pointCloud",
     topic: topic,
     toggleTopic: toggleTopic,
+    toggleFullscreen: toggleFullscreen,
     renderedFps: renderedFps,
     renderDelay: averageFrameDelay,
     disableAnnotations: true,
@@ -162739,4 +162797,4 @@ const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPane
   }));
 });
 
-export { flatIndent 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, indentNodeProp as J, continuedIndent as K, LeftSidebarItemKeys as L, foldNodeProp as M, styleTags as N, tags$1 as O, PropTypes as P, LRLanguage as Q, RightSidebarItemKeys as R, Stack$1 as S, LanguageSupport as T, ExternalTokenizer as U, LRParser as V, WorkspaceContext as W, ifNotIn as X, completeFromList as Y, syntaxTree as Z, _extends$3 as _, AppEvent as a, delimitedIndent as a0, foldInside as a1, ContextTracker as a2, LocalTokenGroup as a3, snippetCompletion as a4, IterMode as a5, NodeWeakMap as a6, defineCSSCompletionSource as a7, EditorView as a8, EditorSelection as a9, html$4 as aa, parseMixed as ab, bracketMatchingHandle as ac, javascriptLanguage as ad, VisualizerConnection as ae, VisualizerContext as af, PanelLayout as ag, ImagePanel as ah, PointCloudPanel as ai, EventMetricsManager as aj, ThroughputMetricsManager as ak, 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, 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 };