@valbuild/ui 0.45.0 → 0.46.1

package/dist/valbuild-ui.cjs.js

@@ -50849,7 +50849,7 @@ var Schema = /* @__PURE__ */ function() {
   return Schema2;
 }();
 var GetSchema = Symbol("GetSchema");
-var Path = Symbol("Path");
+var Path$1 = Symbol("Path");
 var GetSource = Symbol("GetSource");
 function getSchema(selector) {
   return selector[GetSchema];
@@ -50898,10 +50898,10 @@ function isSerializedVal(val) {
   return _typeof(val) === "object" && val !== null && val !== void 0 && ("val" in val || "valPath" in val);
 }
 function isVal(val) {
-  return _typeof(val) === "object" && val !== null && val !== void 0 && Path in val && "val" in val;
+  return _typeof(val) === "object" && val !== null && val !== void 0 && Path$1 in val && "val" in val;
 }
 function getValPath(valOrSelector) {
-  return valOrSelector[Path];
+  return valOrSelector[Path$1];
 }
 function hasOwn$1(obj, prop) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
@@ -50913,7 +50913,7 @@ function _andThen(f, source, path) {
   return newSelectorProxy(source, path);
 }
 function isSelector(source) {
-  return _typeof(source) === "object" && source !== null && (GetSource in source || Path in source);
+  return _typeof(source) === "object" && source !== null && (GetSource in source || Path$1 in source);
 }
 function newSelectorProxy(source, path, moduleSchema) {
   if (_typeof(source) === "object") {
@@ -50942,7 +50942,7 @@ function newSelectorProxy(source, path, moduleSchema) {
             if (prop === GetSource) {
               return true;
             }
-            if (prop === Path) {
+            if (prop === Path$1) {
               return true;
             }
             if (prop === "andThen") {
@@ -50957,7 +50957,7 @@ function newSelectorProxy(source, path, moduleSchema) {
             if (prop === GetSource) {
               return source;
             }
-            if (prop === Path) {
+            if (prop === Path$1) {
               return path;
             }
             if (prop === GetSchema) {
@@ -51024,7 +51024,7 @@ function newSelectorProxy(source, path, moduleSchema) {
         andThen: function andThen(f) {
           return _andThen(f, source === void 0 ? null : source, path);
         }
-      }, GetSource, source === void 0 ? null : source), Path, path), GetSchema, moduleSchema);
+      }, GetSource, source === void 0 ? null : source), Path$1, path), GetSchema, moduleSchema);
   }
 }
 function createValPathOfItem$1(arrayPath, prop) {
@@ -51034,7 +51034,7 @@ function createValPathOfItem$1(arrayPath, prop) {
   return arrayPath && "".concat(arrayPath, ".").concat(JSON.stringify(prop));
 }
 function unValify(valueOrSelector) {
-  if (_typeof(valueOrSelector) === "object" && (GetSource in valueOrSelector || Path in valueOrSelector)) {
+  if (_typeof(valueOrSelector) === "object" && (GetSource in valueOrSelector || Path$1 in valueOrSelector)) {
     var selectorValue = valueOrSelector[GetSource];
     return selectorValue;
   }
@@ -51845,6 +51845,96 @@ function parsePath$1(input) {
   }
   return result2;
 }
+var StringSchema = /* @__PURE__ */ function(_Schema) {
+  _inherits(StringSchema2, _Schema);
+  var _super = _createSuper(StringSchema2);
+  function StringSchema2(options) {
+    var _this;
+    var opt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var isRaw = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+    _classCallCheck(this, StringSchema2);
+    _this = _super.call(this);
+    _this.options = options;
+    _this.opt = opt;
+    _this.isRaw = isRaw;
+    return _this;
+  }
+  _createClass(StringSchema2, [{
+    key: "validate",
+    value: function validate(path, src) {
+      var _this$options, _this$options2, _this$options3;
+      if (this.opt && (src === null || src === void 0)) {
+        return false;
+      }
+      if (typeof src !== "string") {
+        return _defineProperty$5({}, path, [{
+          message: "Expected 'string', got '".concat(_typeof(src), "'"),
+          value: src
+        }]);
+      }
+      var errors = [];
+      if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.maxLength && src.length > this.options.maxLength) {
+        errors.push({
+          message: "Expected string to be at most ".concat(this.options.maxLength, " characters long, got ").concat(src.length),
+          value: src
+        });
+      }
+      if ((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.minLength && src.length < this.options.minLength) {
+        errors.push({
+          message: "Expected string to be at least ".concat(this.options.minLength, " characters long, got ").concat(src.length),
+          value: src
+        });
+      }
+      if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.regexp && !this.options.regexp.test(src)) {
+        errors.push({
+          message: "Expected string to match reg exp: ".concat(this.options.regexp.toString(), ", got '").concat(src, "'"),
+          value: src
+        });
+      }
+      if (errors.length > 0) {
+        return _defineProperty$5({}, path, errors);
+      }
+      return false;
+    }
+  }, {
+    key: "assert",
+    value: function assert(src) {
+      if (this.opt && (src === null || src === void 0)) {
+        return true;
+      }
+      return typeof src === "string";
+    }
+  }, {
+    key: "optional",
+    value: function optional() {
+      return new StringSchema2(this.options, true, this.isRaw);
+    }
+  }, {
+    key: "raw",
+    value: function raw() {
+      return new StringSchema2(this.options, this.opt, true);
+    }
+  }, {
+    key: "serialize",
+    value: function serialize() {
+      var _this$options4, _this$options5, _this$options6;
+      return {
+        type: "string",
+        options: {
+          maxLength: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.maxLength,
+          minLength: (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.minLength,
+          regexp: ((_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.regexp) && {
+            source: this.options.regexp.source,
+            flags: this.options.regexp.flags
+          }
+        },
+        opt: this.opt,
+        raw: this.isRaw
+      };
+    }
+  }]);
+  return StringSchema2;
+}(Schema);
 function getVal(selector) {
   return newValProxy(serializedValOfSelectorSource(selector));
 }
@@ -51867,7 +51957,7 @@ function serializedValOfSelectorSource(selector) {
     var isObject = isObjectOrObjectSelector(child);
     if (isArray) {
       var array = GetSource in child ? child[GetSource] : child;
-      var valPath = Path in child ? child[Path] : void 0;
+      var valPath = Path$1 in child ? child[Path$1] : void 0;
       return {
         val: array.map(function(item, i) {
           return rec(isSelector(item) ? item : newSelectorProxy(item, createValPathOfItem$1(valPath, i)));
@@ -51876,7 +51966,7 @@ function serializedValOfSelectorSource(selector) {
       };
     } else if (isObject) {
       var obj = GetSource in child ? child[GetSource] : child;
-      var _valPath = Path in child ? child[Path] : void 0;
+      var _valPath = Path$1 in child ? child[Path$1] : void 0;
       return {
         val: obj !== null && Object.fromEntries(Object.entries(obj).map(function(_ref) {
           var _ref2 = _slicedToArray$1(_ref, 2), key = _ref2[0], value = _ref2[1];
@@ -51887,7 +51977,7 @@ function serializedValOfSelectorSource(selector) {
     } else if (isSelector(child)) {
       return {
         val: rec(child[GetSource]),
-        valPath: child[Path]
+        valPath: child[Path$1]
       };
     } else {
       return child;
@@ -51929,13 +52019,13 @@ function newValProxy(val) {
             if (prop === "val") {
               return true;
             }
-            if (prop === Path) {
+            if (prop === Path$1) {
               return true;
             }
             return hasOwn(target, prop);
           },
           get: function get(target, prop) {
-            if (prop === Path) {
+            if (prop === Path$1) {
               return val.valPath;
             }
             if (prop === "val") {
@@ -51956,7 +52046,7 @@ function newValProxy(val) {
         });
       }
     default:
-      return _defineProperty$5(_defineProperty$5({}, Path, val.valPath), "val", val.val);
+      return _defineProperty$5(_defineProperty$5({}, Path$1, val.valPath), "val", val.val);
   }
 }
 function hasOwn(obj, prop) {
@@ -56381,7 +56471,7 @@ const Toolbar = ({
       }
     });
   }, [activeEditor]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 flex flex-col px-4 py-2 border-b bg-background border-highlight", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 flex flex-col px-4 py-2 border rounded-md rounded-b-none border-input bg-background", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Dropdown$1,
@@ -56510,12 +56600,10 @@ const Toolbar$1 = Toolbar;
 function onError(error) {
   console.error(error);
 }
-const TOOLBAR_HEIGHT = 28;
 const RichTextEditor = ({
   richtext,
   onEditor
 }) => {
-  const { windowSize } = useValOverlayContext();
   const prePopulatedState = (editor) => {
     editor.setEditorState(
       editor.parseEditorState({
@@ -56558,17 +56646,8 @@ const RichTextEditor = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       LexicalRichTextPlugin_1.RichTextPlugin,
       {
-        contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "font-sans border-b text-primary border-highlight",
-            style: {
-              minHeight: (windowSize == null ? void 0 : windowSize.innerHeight) ? (windowSize == null ? void 0 : windowSize.innerHeight) - TOOLBAR_HEIGHT : void 0
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(LexicalContentEditable, { className: "p-4 outline-none bg-fill" })
-          }
-        ),
-        placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: "Enter some text..." }),
+        contentEditable: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm border-b rounded-md rounded-t-none border-x border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(LexicalContentEditable, { className: "p-4 outline-none bg-fill" }) }),
+        placeholder: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "" }),
         ErrorBoundary: LexicalErrorBoundary$1
       }
     ),
@@ -56633,17 +56712,22 @@ const LogIn = createLucideIcon("LogIn", [
   ["polyline", { points: "10 17 15 12 10 7", key: "1ail0h" }],
   ["line", { x1: "15", x2: "3", y1: "12", y2: "12", key: "v6grx8" }]
 ]);
-const Maximize = createLucideIcon("Maximize", [
-  ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
-  ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
-  ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
-  ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
+const Maximize2 = createLucideIcon("Maximize2", [
+  ["polyline", { points: "15 3 21 3 21 9", key: "mznyad" }],
+  ["polyline", { points: "9 21 3 21 3 15", key: "1avn1i" }],
+  ["line", { x1: "21", x2: "14", y1: "3", y2: "10", key: "ota7mn" }],
+  ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
+]);
+const Menu = createLucideIcon("Menu", [
+  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
+  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
+  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
 ]);
-const Minimize = createLucideIcon("Minimize", [
-  ["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
-  ["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
-  ["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
-  ["path", { d: "M16 21v-3a2 2 0 0 1 2-2h3", key: "ph8mxp" }]
+const Minimize2 = createLucideIcon("Minimize2", [
+  ["polyline", { points: "4 14 10 14 10 20", key: "11kfnr" }],
+  ["polyline", { points: "20 10 14 10 14 4", key: "rlmsce" }],
+  ["line", { x1: "14", x2: "21", y1: "10", y2: "3", key: "o5lafz" }],
+  ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
 ]);
 const Moon = createLucideIcon("Moon", [
   ["path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z", key: "a7tn18" }]
@@ -56683,20 +56767,35 @@ const PREV_URL_KEY = "valbuild:urlBeforeNavigation";
 function ValMenu({
   api,
   patches,
+  direction,
   onCommit
 }) {
   const { theme: theme2, setTheme, editMode, setEditMode, session } = useValOverlayContext();
   if (session.status === "success" && session.data.mode === "unauthorized") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(SingleItemMenu, { href: api.getLoginUrl(window.location.href), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Login" }),
-      /* @__PURE__ */ jsxRuntime.jsx(LogIn, { size: 18 })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      SingleItemMenu,
+      {
+        direction,
+        href: api.getLoginUrl(window.location.href),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Login" }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogIn, { size: 18 })
+        ]
+      }
+    );
   }
   if (session.status === "success" && !session.data.enabled) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(SingleItemMenu, { href: api.getEnableUrl(window.location.href), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Enable" }),
-      /* @__PURE__ */ jsxRuntime.jsx(LogIn, { size: 18 })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      SingleItemMenu,
+      {
+        direction,
+        href: api.getEnableUrl(window.location.href),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Enable" }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogIn, { size: 18 })
+        ]
+      }
+    );
   }
   const [patchCount, setPatchCount] = React$3.useState();
   React$3.useEffect(() => {
@@ -56706,9 +56805,9 @@ function ValMenu({
     }
     setPatchCount(patchCount2);
   }, [patches]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(MenuContainer, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MenuContainer, { direction, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      MenuButton,
+      MenuButton$1,
       {
         active: editMode === "hover",
         onClick: () => {
@@ -56718,7 +56817,7 @@ function ValMenu({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      MenuButton,
+      MenuButton$1,
       {
         onClick: () => {
           setTheme(theme2 === "dark" ? "light" : "dark");
@@ -56730,7 +56829,7 @@ function ValMenu({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      MenuButton,
+      MenuButton$1,
       {
         active: editMode === "full",
         onClick: () => {
@@ -56742,11 +56841,11 @@ function ValMenu({
             window.location.href = prevUrl || "/";
           }
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[24px] w-[24px] flex justify-center items-center", children: editMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(Minimize, { size: 15 }) : /* @__PURE__ */ jsxRuntime.jsx(Maximize, { size: 15 }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[24px] w-[24px] flex justify-center items-center", children: editMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(Minimize2, { size: 15 }) : /* @__PURE__ */ jsxRuntime.jsx(Maximize2, { size: 15 }) })
       }
     ),
     patchCount !== void 0 && session.status === "success" && session.data.mode === "proxy" && /* @__PURE__ */ jsxRuntime.jsx(
-      MenuButton,
+      MenuButton$1,
       {
         onClick: () => {
           if (patchCount > 0) {
@@ -56774,16 +56873,42 @@ function ValMenu({
 }
 function SingleItemMenu({
   href,
+  direction,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-center w-full h-full font-sans border-2 rounded-full gap-x-3 text-primary bg-background border-fill", children: /* @__PURE__ */ jsxRuntime.jsx("a", { className, href, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center px-2 gap-x-2", children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames(
+        "flex items-start justify-center w-full h-full font-sans border rounded-full gap-3 text-primary border-fill bg-gradient-to-br from-background/90 from-40% to-background backdrop-blur-lg drop-shadow-2xl",
+        {
+          "flex-col items-start": direction === "vertical",
+          "flex-row items-center": direction === "horizontal"
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("a", { className, href, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center px-2 gap-y-2", children }) })
+    }
+  );
 }
 function MenuContainer({
-  children
+  children,
+  direction
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-center w-full h-full px-2 py-2 font-sans border-2 rounded-full gap-x-3 text-primary bg-background border-fill", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames(
+        "flex justify-center w-full h-full px-2 py-2 font-sans border rounded-full gap-3 text-primary border-fill bg-gradient-to-br from-background/90 from-40% to-background backdrop-blur-lg drop-shadow-2xl",
+        {
+          "flex-col items-start": direction === "vertical",
+          "flex-row items-center": direction === "horizontal"
+        }
+      ),
+      children
+    }
+  );
 }
-function MenuButton({
+function MenuButton$1({
   active,
   onClick,
   children
@@ -56792,7 +56917,7 @@ function MenuButton({
     "button",
     {
       className: classNames(className, {
-        "bg-accent drop-shadow-[0px_0px_12px_rgba(56,205,152,0.60)]": active
+        "bg-accent text-accent-foreground drop-shadow-[0px_0px_12px_hsl(var(--accent))]": active
       }),
       onClick,
       children
@@ -62380,14 +62505,21 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-const ScrollArea = React__namespace.forwardRef(({ className: className2, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+const ScrollArea = React__namespace.forwardRef(({ className: className2, children, innerRef, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   $57acba87d6e25586$export$be92b6f5f03c0fe9,
   {
     ref,
     className: cn("relative overflow-hidden", className2),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx($57acba87d6e25586$export$d5c6c08dc2d3ca7, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        $57acba87d6e25586$export$d5c6c08dc2d3ca7,
+        {
+          className: "h-full w-full rounded-[inherit]",
+          ref: innerRef,
+          children
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
       /* @__PURE__ */ jsxRuntime.jsx($57acba87d6e25586$export$ac61190d9fc311a9, {})
     ]
@@ -62418,8 +62550,8 @@ const ScrollBar = React__namespace.forwardRef(({ className: className2, orientat
   }
 ));
 ScrollBar.displayName = $57acba87d6e25586$export$2fabd85d0eba3c57.displayName;
-const MIN_WIDTH = 320;
-const MIN_HEIGHT = 320;
+const MIN_WIDTH = 400;
+const MIN_HEIGHT = 250;
 function ValWindow({
   position,
   onClose,
@@ -62442,14 +62574,12 @@ function ValWindow({
   const { windowSize, setWindowSize } = useValOverlayContext();
   React$3.useEffect(() => {
     var _a, _b;
-    if (!windowSize) {
-      setWindowSize({
-        height: MIN_HEIGHT,
-        width: MIN_WIDTH,
-        innerHeight: MIN_HEIGHT - (64 + (((_b = (_a = bottomRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height) || 0))
-      });
-    }
-  }, [windowSize]);
+    setWindowSize({
+      height: window.innerHeight - 30,
+      width: MIN_WIDTH,
+      innerHeight: window.innerHeight - 30 - (64 + (((_b = (_a = bottomRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height) || 0))
+    });
+  }, []);
   const bottomRef = React$3.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Resizable,
@@ -62461,7 +62591,7 @@ function ValWindow({
         var _a, _b;
         return setWindowSize({
           ...size2,
-          innerHeight: ((windowSize == null ? void 0 : windowSize.height) || MIN_HEIGHT) - (64 + (((_b = (_a = bottomRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height) || 0))
+          innerHeight: size2.height - (64 + (((_b = (_a = bottomRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height) || 0))
         });
       },
       handle: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-0 right-0 cursor-se-resize", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -62495,14 +62625,16 @@ function ValWindow({
             width: (windowSize == null ? void 0 : windowSize.width) || MIN_WIDTH,
             height: (windowSize == null ? void 0 : windowSize.height) || MIN_HEIGHT,
             left: draggedPosition.left,
-            top: draggedPosition.top
+            top: draggedPosition.top,
+            right: draggedPosition.right,
+            bottom: draggedPosition.bottom
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 ref: dragRef,
-                className: "relative flex items-center justify-center px-2 pt-2 text-primary",
+                className: "relative flex items-center justify-center px-2 py-2 text-primary",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     AlignJustify,
@@ -62527,56 +62659,32 @@ function ValWindow({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "form",
-              {
-                className: "h-full",
-                onSubmit: (ev) => {
-                  ev.preventDefault();
-                },
-                children: [
-                  Array.isArray(children) && children.slice(0, 1),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ScrollArea,
-                    {
-                      className: "relative",
-                      style: {
-                        height: windowSize == null ? void 0 : windowSize.innerHeight
-                      },
-                      children: Array.isArray(children) ? children.slice(1, -1) : children
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottomRef, className: "w-full px-4 pb-0", children: Array.isArray(children) && children.slice(-1) })
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              Array.isArray(children) && children.slice(0, 1),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ScrollArea,
+                {
+                  className: "relative",
+                  style: {
+                    height: windowSize == null ? void 0 : windowSize.innerHeight
+                  },
+                  children: Array.isArray(children) ? children.slice(1, -1) : children
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottomRef, className: "w-full px-4 pb-0", children: Array.isArray(children) && children.slice(-1) })
+            ] })
           ]
         }
       )
     }
   );
 }
-function useDrag({
-  position: initPosition
-}) {
+function useDrag({ position: initPosition }) {
   var _a, _b;
-  const [position, setPosition] = React$3.useState({ left: 0, top: 0 });
+  const [position, setPosition] = React$3.useState({ left: window.innerWidth - MIN_WIDTH - (24 + 50), top: 16 });
   React$3.useEffect(() => {
-    var _a2, _b2;
     if (initPosition) {
-      const left = initPosition.left - (((_b2 = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.getBoundingClientRect()) == null ? void 0 : _b2.width) || 0) / 2;
-      const top = initPosition.top - 16;
-      setPosition({
-        left: left < 0 ? 0 : left,
-        top: top < 0 ? 0 : top
-      });
-    } else {
-      const left = window.innerWidth / 2 - MIN_WIDTH / 2 - window.scrollX;
-      const top = window.innerHeight / 2 - MIN_HEIGHT / 2 + window.scrollY;
-      setPosition({
-        left,
-        top
-      });
+      setPosition(initPosition);
     }
   }, [initPosition]);
   const [mouseDown, setMouseDown] = React$3.useState(false);
@@ -62590,8 +62698,8 @@ function useDrag({
       if (mouseDown) {
         e.preventDefault();
         e.stopPropagation();
-        const left = -((((_b2 = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.getBoundingClientRect()) == null ? void 0 : _b2.width) || 0) / 2) + e.pageX;
-        const top = -((((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.getBoundingClientRect()) == null ? void 0 : _d.height) || 0) / 2) + +e.pageY;
+        const left = -((((_b2 = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.getBoundingClientRect()) == null ? void 0 : _b2.width) || 0) / 2) + e.clientX;
+        const top = -((((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.getBoundingClientRect()) == null ? void 0 : _d.height) || 0) / 2) + +e.clientY;
         setPosition({
           left: left < 0 ? 0 : left,
           top: top < 0 ? 0 : top
@@ -62769,6 +62877,7 @@ function Grid({ children }) {
   const x = React$3.useRef(0);
   const dragRef = React$3.useRef(null);
   const originalWidth = React$3.useRef(0);
+  const [showMobileLeftMenu, setShowMobileLeftMenu] = React$3.useState(true);
   const handleMouseUp = () => {
     isResizing.current = false;
     dragRef.current = null;
@@ -62809,17 +62918,40 @@ function Grid({ children }) {
       document.removeEventListener("mousemove", handleMouseMove);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-screen", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref: leftColRef,
-        className: "relative border-r border-border",
-        style: { width: 300 },
+        className: classNames(
+          "absolute top-0 left-0 border-r border-border md:relative z-[1] bg-gradient-to-br from-card from-50% to-background",
+          {
+            "w-[300px]": showMobileLeftMenu,
+            "w-0 md:w-[300px]": !showMobileLeftMenu
+          }
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
-            header1,
-            /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body1 })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MenuButton,
+              {
+                showOnMobile: !showMobileLeftMenu,
+                onClick: () => {
+                  setShowMobileLeftMenu(!showMobileLeftMenu);
+                },
+                children: header1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ScrollArea,
+              {
+                style: { height: "calc(100vh - 50px)" },
+                onClick: () => {
+                  setShowMobileLeftMenu(false);
+                },
+                children: body1
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -62838,7 +62970,28 @@ function Grid({ children }) {
           "w-full": !header3 && !body3
         }),
         children: /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
-          header2,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MenuButton,
+              {
+                className: "md:hidden",
+                showOnMobile: showMobileLeftMenu,
+                onClick: () => {
+                  setShowMobileLeftMenu(!showMobileLeftMenu);
+                },
+                children: header1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: classNames({
+                  "pl-[300px] md:pl-0": showMobileLeftMenu
+                }),
+                children: header2
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body2 })
         ] })
       }
@@ -62866,111 +63019,30 @@ function Grid({ children }) {
     )
   ] });
 }
-Grid.Column = ({ children }) => {
-  const [header, body] = React$3.Children.toArray(children);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b border-border", children: header }),
-    body
-  ] });
-};
-const Section = ({ className: className2 }) => {
+function MenuButton({
+  className: className2,
+  showOnMobile,
+  onClick,
+  children
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
+    "div",
     {
-      width: "9",
-      height: "10",
-      viewBox: "0 0 9 10",
-      className: className2,
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
+      className: classNames("flex items-center px-4 md:px-4", className2, {
+        "hidden md:flex": showOnMobile
+      }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_1222_1618)", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M9 1.5H0V0.5H9V1.5Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M9 9.5H0V8.5H9V9.5Z",
-              fill: "currentColor"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_1222_1618", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
-          {
-            width: "9",
-            height: "9",
-            fill: "white",
-            transform: "translate(0 0.5)"
-          }
-        ) }) })
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "md:hidden", onClick, children: /* @__PURE__ */ jsxRuntime.jsx(Menu, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-between w-full", children })
       ]
     }
   );
-};
-const Section$1 = Section;
-const TextIcon = ({ className: className2 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "9",
-      height: "10",
-      viewBox: "0 0 9 10",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: className2,
-      children: /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_1229_1625)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.0145513 0.5H8.98545L9 3.18569H8.57074C8.43007 2.2276 8.02749 1.57948 7.36298 1.24133C6.98949 1.05491 6.43169 0.953035 5.68957 0.935694V7.94581C5.68957 8.43569 5.78416 8.76084 5.97332 8.92124C6.16734 9.08165 6.5675 9.16185 7.17381 9.16185V9.5H1.86257V9.16185C2.44462 9.16185 2.83023 9.08165 3.0194 8.92124C3.21342 8.7565 3.31043 8.43136 3.31043 7.94581V0.935694C2.58286 0.953035 2.02506 1.05491 1.63703 1.24133C0.92401 1.58815 0.521423 2.23627 0.429264 3.18569H0L0.0145513 0.5Z" }) })
-    }
-  );
-};
-const TextIcon$1 = TextIcon;
-function Tree({ children, rootPath }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full py-2 text-xs", children: React$3.Children.map(children, (child) => {
-    return React$3.cloneElement(child, {
-      paths: [rootPath]
-    });
-  }) });
 }
-Tree.Node = ({
-  children,
-  paths = [],
-  path,
-  level = 1,
-  type,
-  setActivePath
-}) => {
-  const paddingLeft = level * 30;
-  const logo = type === "string" ? /* @__PURE__ */ jsxRuntime.jsx(TextIcon$1, {}) : type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(ImageIcon$1, { className: "h-[9px] w-[9px]" }) : /* @__PURE__ */ jsxRuntime.jsx(Section$1, {});
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        className: "flex justify-between w-full group py-2 text-xs font-[400] shrink-0",
-        onClick: () => {
-          setActivePath && setActivePath(path);
-        },
-        style: { paddingLeft },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          logo,
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: path })
-        ] })
-      }
-    ),
-    children && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: React$3.Children.map(children, (child) => {
-      return React$3.cloneElement(child, {
-        level: level + 1,
-        paths: [...paths, path]
-      });
-    }) })
+Grid.Column = ({ children, className: className2 }) => {
+  const [header, body] = React$3.Children.toArray(children);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames("flex flex-col", className2), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b border-border", children: header }),
+    body
   ] });
 };
 const falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
@@ -67474,8 +67546,10 @@ function ValFormField({
     return /* @__PURE__ */ jsxRuntime.jsx(
       StringField,
       {
+        path,
         defaultValue: source,
         disabled,
+        schema,
         registerPatchCallback,
         onSubmit
       }
@@ -67550,7 +67624,13 @@ function ValFormField({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     "Unsupported schema: ",
-    schema.type
+    schema.type,
+    " (source type: ",
+    typeof source,
+    " source:",
+    " ",
+    JSON.stringify(source),
+    ")"
   ] });
 }
 function createImagePatch(path, data, filename, metadata) {
@@ -67609,6 +67689,7 @@ function ImageField({
   onSubmit,
   registerPatchCallback
 }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const [data, setData] = React$3.useState(
     null
   );
@@ -67632,7 +67713,7 @@ function ImageField({
     }
   }, [data, defaultValue]);
   React$3.useEffect(() => {
-    var _a;
+    var _a2;
     if (hotspot) {
       if (metadata) {
         const newMetadata = {
@@ -67649,43 +67730,63 @@ function ImageField({
         console.error("Neither image metadata nor value is set");
       }
     } else {
-      if ((_a = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _a.hotspot) {
+      if ((_a2 = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _a2.hotspot) {
         setHotspot(defaultValue.metadata.hotspot);
       }
     }
   }, [hotspot, defaultValue]);
   return /* @__PURE__ */ jsxRuntime.jsxs(FieldContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col max-w-4xl p-4 gap-y-4", children: [
-      data || url ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        hotspot && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "rounded-full h-[20px] w-[20px] bg-accent absolute",
-            style: {
-              top: `${hotspot.y * 100}%`,
-              left: `${hotspot.x * 100}%`
-            }
-          }
-        ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-fit", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "flex flex-col justify-start p-2 border border-b-0 rounded-sm rounded-b-none gap-y-4 bg-background text-foreground border-input",
+          children: data || url ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            hotspot && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "rounded-full h-[12px] w-[12px] bg-background mix-blend-difference border-accent border-2 absolute pointer-events-none",
+                style: {
+                  top: `${hotspot.y * 100}%`,
+                  left: `${hotspot.x * 100}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: (data == null ? void 0 : data.src) || url,
+                draggable: false,
+                className: "object-contain w-full max-h-[500px]",
+                style: {
+                  cursor: "crosshair"
+                },
+                onClick: (ev) => {
+                  const { width: width2, height: height2, left, top } = ev.currentTarget.getBoundingClientRect();
+                  const hotspotX = (ev.clientX - 6 - left) / width2;
+                  const hotspotY = (ev.clientY - 6 - top) / height2;
+                  setHotspot({
+                    x: hotspotX,
+                    y: hotspotY,
+                    width: 1,
+                    height: 1
+                  });
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Select image below" })
+        },
+        path
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border border-t-0 rounded-b-sm bg-background border-input", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          "label",
           {
-            src: (data == null ? void 0 : data.src) || url,
-            className: "w-full cursor-crosshair",
-            onClick: (ev) => {
-              const x = ev.nativeEvent.offsetX;
-              const y = ev.nativeEvent.offsetY;
-              const width2 = ev.currentTarget.clientWidth;
-              const height2 = ev.currentTarget.clientHeight;
-              const hotspotX = Math.round(x / width2 * 100) / 100;
-              const hotspotY = Math.round(y / height2 * 100) / 100;
-              setHotspot({ x: hotspotX, y: hotspotY, width: 1, height: 1 });
-            }
+            htmlFor: `img_input:${path}`,
+            className: "block px-1 py-2 text-sm text-center rounded-md cursor-pointer bg-primary text-background",
+            children: "Update"
           }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Select image below" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: `img_input:${path}`, className: "", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 py-2 text-center rounded-md bg-primary text-background", children: "Update image" }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -67717,43 +67818,39 @@ function ImageField({
           }
         )
       ] })
-    ] }, path),
-    onSubmit && data && /* @__PURE__ */ jsxRuntime.jsx(
+    ] }),
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx(
       SubmitButton,
       {
         loading,
+        enabled: !!data || ((_b = (_a = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _a.hotspot) == null ? void 0 : _b.height) !== (hotspot == null ? void 0 : hotspot.height) || ((_d = (_c = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _c.hotspot) == null ? void 0 : _d.width) !== (hotspot == null ? void 0 : hotspot.width) || ((_f = (_e = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _e.hotspot) == null ? void 0 : _f.x) !== (hotspot == null ? void 0 : hotspot.x) || ((_h = (_g = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _g.hotspot) == null ? void 0 : _h.y) !== (hotspot == null ? void 0 : hotspot.y) || ((_i = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _i.width) !== (metadata == null ? void 0 : metadata.width) || ((_j = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _j.height) !== (metadata == null ? void 0 : metadata.height) || ((_k = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _k.mimeType) !== (metadata == null ? void 0 : metadata.mimeType) || ((_l = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _l.sha256) !== (metadata == null ? void 0 : metadata.sha256),
         onClick: () => {
-          setLoading(true);
-          onSubmit(
-            (path2) => Promise.resolve(
-              createImagePatch(
-                path2,
-                data.src,
-                data.filename ?? null,
-                metadata
+          if (data) {
+            setLoading(true);
+            onSubmit(
+              (path2) => Promise.resolve(
+                createImagePatch(
+                  path2,
+                  data.src,
+                  data.filename ?? null,
+                  metadata
+                )
               )
-            )
-          ).finally(() => {
-            setLoading(false);
-            setData(null);
-            setMetadata(void 0);
-          });
-        }
-      }
-    ),
-    onSubmit && !data && metadata && /* @__PURE__ */ jsxRuntime.jsx(
-      SubmitButton,
-      {
-        loading,
-        onClick: () => {
-          setLoading(true);
-          onSubmit(
-            (path2) => Promise.resolve(createImageMetadataPatch(path2, metadata))
-          ).finally(() => {
-            setLoading(false);
-            setData(null);
-            setMetadata(void 0);
-          });
+            ).finally(() => {
+              setLoading(false);
+              setData(null);
+              setMetadata(void 0);
+            });
+          } else if (metadata) {
+            setLoading(true);
+            onSubmit(
+              (path2) => Promise.resolve(createImageMetadataPatch(path2, metadata))
+            ).finally(() => {
+              setLoading(false);
+              setData(null);
+              setMetadata(void 0);
+            });
+          }
         }
       }
     )
@@ -67834,10 +67931,11 @@ function RichTextField({
         }
       }
     ),
-    onSubmit && didChange && /* @__PURE__ */ jsxRuntime.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx(
       SubmitButton,
       {
         loading: loading || !editor,
+        enabled: didChange,
         onClick: () => {
           if (editor) {
             setLoading(true);
@@ -67919,10 +68017,11 @@ function KeyOfField({
         ]
       }
     ),
-    onSubmit && defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx(
       SubmitButton,
       {
         loading,
+        enabled: defaultValue !== value,
         onClick: () => {
           setLoading(true);
           onSubmit(async (path) => [
@@ -67976,10 +68075,11 @@ function NumberField({
         type: "number"
       }
     ),
-    onSubmit && defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx(
       SubmitButton,
       {
         loading,
+        enabled: defaultValue !== value,
         onClick: () => {
           setLoading(true);
           onSubmit(async (path) => {
@@ -68002,6 +68102,8 @@ function NumberField({
 function StringField({
   disabled,
   defaultValue,
+  path,
+  schema,
   registerPatchCallback,
   onSubmit
 }) {
@@ -68013,18 +68115,28 @@ function StringField({
   const ref = React$3.useRef(null);
   React$3.useEffect(() => {
     if (registerPatchCallback) {
-      registerPatchCallback(async (path) => {
+      registerPatchCallback(async (path2) => {
         var _a;
         return [
           {
             op: "replace",
-            path,
+            path: path2,
             value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
           }
         ];
       });
     }
   }, []);
+  const actualSchema = new StringSchema(
+    schema.options ? {
+      ...schema.options,
+      regexp: schema.options.regexp ? new RegExp(
+        schema.options.regexp.source,
+        schema.options.regexp.flags
+      ) : void 0
+    } : void 0
+  );
+  const validationErrors = actualSchema.validate(path, value);
   return /* @__PURE__ */ jsxRuntime.jsxs(FieldContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input,
@@ -68035,18 +68147,20 @@ function StringField({
         onChange: (e) => setValue(e.target.value)
       }
     ),
-    onSubmit && defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx(
       SubmitButton,
       {
+        validationErrors: validationErrors && validationErrors[path],
         loading,
+        enabled: defaultValue !== value && !validationErrors,
         onClick: () => {
           setLoading(true);
-          onSubmit(async (path) => {
+          onSubmit(async (path2) => {
             var _a;
             return [
               {
                 op: "replace",
-                path,
+                path: path2,
                 value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
               }
             ];
@@ -68058,14 +68172,28 @@ function StringField({
     )
   ] });
 }
-function FieldContainer({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative p-4 border rounded border-card", children });
+function InlineValidationErrors({ errors }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col p-2 text-sm rounded-md gap-y-1 text-destructive-foreground bg-destructive", children: errors.map((error, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error.message }, i)) });
+}
+function FieldContainer({
+  children,
+  className: className2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames("relative max-w-lg px-4 pt-4", className2), children });
 }
 function SubmitButton({
   loading,
+  enabled,
+  validationErrors,
   onClick
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end w-full py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading, onClick, children: loading ? "Saving..." : "Save" }) }) });
+  const { session } = useValOverlayContext();
+  const isProxy = session.status === "success" && session.data.mode === "proxy";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 m-4 mt-2 ml-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-start w-full gap-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading || !enabled, onClick, children: loading ? isProxy ? "Staging..." : "Saving..." : isProxy ? "Stage" : "Save" }),
+    " ",
+    validationErrors ? /* @__PURE__ */ jsxRuntime.jsx(InlineValidationErrors, { errors: validationErrors || [] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
+  ] }) });
 }
 const Logo = ({ className: className2 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -68082,7 +68210,7 @@ const Logo = ({ className: className2 }) => {
           "path",
           {
             d: "M5 5.36426C5 5.16309 5.16309 5 5.36426 5H17.6581C17.8593 5 18.0223 5.16309 18.0223 5.36426V28.4949C18.0223 28.696 17.8593 28.8591 17.6581 28.8591H5.36426C5.16309 28.8591 5 28.696 5 28.4949V5.36426Z",
-            fill: "#38CD98"
+            fill: "hsl(var(--accent))"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx("g", { filter: "url(#filter1_i_21_1677)", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11.4656", cy: "23.7595", r: "2.18557", fill: "currentColor" }) }),
@@ -72536,6 +72664,33 @@ function useSession(api) {
   }, [sessionResetId]);
   return session;
 }
+function Path({ children }) {
+  const segs = children.split("/").filter((seg) => seg);
+  return segs.map((seg, i) => {
+    if (i !== segs.length - 1) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(React$3.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: seg }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-[2px] text-muted", children: "/" })
+      ] }, `${children}/${seg}`);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Seg, { children: seg }, children);
+  });
+}
+function Seg({ children }) {
+  if (children.includes(".")) {
+    const segs = children.split(".");
+    return segs.map((seg, i) => {
+      if (i !== segs.length - 1) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(React$3.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: i === 0 ? seg : JSON.parse(seg) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-[2px] text-muted", children: "." })
+        ] }, `${children}.${seg}`);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: i === 0 ? seg : JSON.parse(seg) }, children);
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children });
+}
 const ValModulesContext = React$3.createContext(null);
 const useValModuleFromPath = (sourcePath) => {
   var _a, _b;
@@ -72686,12 +72841,13 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
         "div",
         {
           id: "val-fullscreen-container",
-          className: "relative font-serif antialiased",
+          className: "relative w-full h-[100] overflow-hidden font-serif antialiased bg-background text-primary",
           "data-mode": theme2,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed -translate-x-1/2 z-overlay left-1/2 bottom-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed -translate-y-1/2 right-4 top-1/2 z-overlay", children: /* @__PURE__ */ jsxRuntime.jsx(
               ValMenu,
               {
+                direction: "vertical",
                 api,
                 patches,
                 onCommit: () => setPatchResetId((prev) => prev + 1)
@@ -72704,18 +72860,19 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
                 value: {
                   hoverElem: hoverElemRef == null ? void 0 : hoverElemRef.current
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs(Grid, { children: [
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary", children: /* @__PURE__ */ jsxRuntime.jsxs(Grid, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 h-[50px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Logo$1, {}) }),
                   /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "px-4", children: modules ? /* @__PURE__ */ jsxRuntime.jsx(
                     PathTree,
                     {
+                      selectedPath,
                       paths: Object.keys(modules),
                       setSelectedModuleId: (path) => {
                         navigate(path);
                       }
                     }
                   ) : !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: "Loading..." }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-start w-full h-[50px] gap-2 font-serif text-xs", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-start h-[50px] gap-2 font-serif text-xs", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "button",
                       {
@@ -72725,10 +72882,18 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
                         children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {})
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { children: selectedPath || "/" })
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "truncate max-w-[300px]",
+                        dir: "rtl",
+                        title: selectedPath,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Path, { children: selectedPath || "/" })
+                      }
+                    )
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-                    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-lg text-destructive-foreground", children: [
+                    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl p-4 text-lg bg-destructive text-destructive-foreground", children: [
                       "ERROR: ",
                       error
                     ] }),
@@ -72797,7 +72962,7 @@ function AnyVal({
   initOnSubmit,
   top
 }) {
-  if (source === null || schema.opt) {
+  if (schema.opt) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ValOptional,
       {
@@ -72810,6 +72975,18 @@ function AnyVal({
       }
     );
   }
+  if (source === null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ValDefaultOf,
+      {
+        source,
+        schema,
+        path,
+        setSelectedPath,
+        initOnSubmit
+      }
+    );
+  }
   if (schema.type === "object") {
     if (typeof source !== "object" || isJsonArray(source)) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -72835,15 +73012,18 @@ function AnyVal({
         typeof source
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ValList,
-      {
-        source,
-        path,
-        schema,
-        setSelectedPath
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      field ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntime.jsx(Path, { children: path }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ValList,
+        {
+          source,
+          path,
+          schema,
+          setSelectedPath
+        }
+      )
+    ] });
   } else if (schema.type === "record") {
     if (typeof source !== "object") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -72859,18 +73039,39 @@ function AnyVal({
         schema.type
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ValRecord,
-      {
-        source,
-        path,
-        schema,
-        setSelectedPath
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      field ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntime.jsx(Path, { children: path }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ValRecord,
+        {
+          source,
+          path,
+          schema,
+          setSelectedPath
+        }
+      )
+    ] });
+  } else if ((schema == null ? void 0 : schema.type) === "union") {
+    if (schema.key && typeof source === "object" && !isJsonArray(source)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ValTaggedUnion,
+        {
+          field,
+          tag: schema.key,
+          source,
+          path,
+          schema,
+          initOnSubmit,
+          setSelectedPath,
+          top
+        }
+      );
+    }
+  } else if ((schema == null ? void 0 : schema.type) === "literal") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 gap-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: field || path }),
+    field ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntime.jsx(Path, { children: path }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ValFormField,
       {
@@ -72883,6 +73084,110 @@ function AnyVal({
     )
   ] });
 }
+function ValTaggedUnion({
+  tag,
+  field,
+  path,
+  source,
+  schema,
+  setSelectedPath,
+  initOnSubmit,
+  top
+}) {
+  const [currentKey, setCurrentKey] = React$3.useState(null);
+  const [current, setCurrent] = React$3.useState(null);
+  const keys = schema.items.flatMap((item) => {
+    if (item.type === "object" && item.items[tag]) {
+      const maybeLiteral = item.items[tag];
+      if (maybeLiteral.type === "literal") {
+        return [maybeLiteral.value];
+      }
+    }
+    return [];
+  });
+  React$3.useEffect(() => {
+    if (!currentKey) {
+      const maybeCurrentKey = source == null ? void 0 : source[tag];
+      if (maybeCurrentKey && typeof maybeCurrentKey === "string") {
+        setCurrentKey(maybeCurrentKey);
+      }
+    } else {
+      const sourceKey = source[tag];
+      const unionSchema = schema.items.find((item) => {
+        if (item.type === "object" && item.items[tag]) {
+          const maybeLiteral = item.items[tag];
+          if (maybeLiteral.type === "literal") {
+            return maybeLiteral.value === currentKey;
+          }
+          return false;
+        }
+      });
+      if (sourceKey && typeof sourceKey === "string" && unionSchema) {
+        setCurrent({ source, schema: unionSchema });
+      } else if (unionSchema) {
+        setCurrent({ schema: unionSchema });
+      } else {
+        console.error(
+          "Could not find source or schema of key",
+          currentKey,
+          source,
+          schema
+        );
+        setCurrent(null);
+      }
+    }
+  }, [currentKey, source, tag, schema, keys]);
+  if (keys.length !== schema.items.length) {
+    console.warn("Not all items have tag:", tag);
+  }
+  const loading = false;
+  const onSubmit = initOnSubmit(path);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FieldContainer,
+    {
+      className: classNames("flex flex-col gap-y-4", {
+        "border-l-2 border-border pl-6": !top
+      }),
+      children: [
+        field ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntime.jsx(Path, { children: path }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Select,
+          {
+            value: currentKey ?? void 0,
+            disabled: loading,
+            onValueChange: (key) => {
+              setCurrentKey(key);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select type" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: keys.map((tag2) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: tag2.toString(), children: tag2.toString() }, tag2)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SubmitButton,
+          {
+            loading,
+            enabled: false,
+            onClick: () => onSubmit(async () => [])
+          }
+        ),
+        current && /* @__PURE__ */ jsxRuntime.jsx(
+          AnyVal,
+          {
+            path,
+            source: current.source ?? null,
+            schema: current.schema,
+            setSelectedPath,
+            initOnSubmit,
+            top
+          }
+        )
+      ]
+    },
+    path
+  );
+}
 function ValObject({
   path,
   source,
@@ -72894,7 +73199,7 @@ function ValObject({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames("flex flex-col gap-y-8", {
+      className: classNames("flex flex-col gap-y-1", {
         "border-l-2 border-border pl-6": !top
       }),
       children: Object.entries(schema.items).map(([key, property]) => {
@@ -72903,7 +73208,7 @@ function ValObject({
           AnyVal,
           {
             path: subPath,
-            source: source[key],
+            source: (source == null ? void 0 : source[key]) ?? null,
             schema: property,
             setSelectedPath,
             field: key,
@@ -72987,7 +73292,7 @@ function ValList({
   setSelectedPath
 }) {
   const navigate = useNavigate();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: source.map((item, index2) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2 pb-8", children: source.map((item, index2) => {
     const subPath = createValPathOfItem(path, index2);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -73226,9 +73531,10 @@ function ValOptional({
   field
 }) {
   const [enable, setEnable] = React$3.useState(source !== null);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
-    field ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-start gap-x-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+  const { editMode } = useValOverlayContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-start gap-x-4", children: [
+      editMode === "full" && /* @__PURE__ */ jsxRuntime.jsx(
         Switch,
         {
           checked: enable,
@@ -73237,16 +73543,8 @@ function ValOptional({
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: field })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-      Switch,
-      {
-        checked: enable,
-        onClick: () => {
-          setEnable((prev) => !prev);
-        }
-      }
-    ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: field ? field : /* @__PURE__ */ jsxRuntime.jsx(Path, { children: path }) })
+    ] }),
     enable && /* @__PURE__ */ jsxRuntime.jsx(
       ValDefaultOf,
       {
@@ -73315,61 +73613,62 @@ function ValDefaultOf({
 function isJsonArray(source) {
   return Array.isArray(source);
 }
-function pathsToTree(paths) {
-  const tree = {};
+function dirPaths(paths) {
+  const res = {};
   paths.forEach((path) => {
-    const parts = path.split("/").filter((part) => part !== "");
-    let current = tree;
-    parts.forEach((part) => {
-      if (!current[part]) {
-        current[part] = {};
+    const allParts = path.split("/").filter((part) => part !== "");
+    if (allParts.length === 1) {
+      if (!res[""]) {
+        res[""] = [];
       }
-      current = current[part];
-    });
+      res[""].push(allParts[0]);
+    } else if (allParts.length > 1) {
+      const dir = allParts.slice(0, allParts.length - 1).join("/");
+      const file = allParts.slice(-1)[0];
+      if (!res[dir]) {
+        res[dir] = [];
+      }
+      res[dir].push(file);
+    }
   });
-  return tree;
+  return res;
 }
 function PathTree({
+  selectedPath,
   paths,
   setSelectedModuleId
 }) {
-  const tree = pathsToTree(paths);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tree, { children: Object.entries(tree).map(([name, subTree]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-    PathNode,
-    {
-      name,
-      tree: subTree,
-      moduleId: `/${name}`,
-      setSelectedModuleId
-    }
-  ) }, `/${name}`)) });
-}
-function PathNode({
-  name,
-  tree,
-  moduleId,
-  setSelectedModuleId
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => {
-          setSelectedModuleId(moduleId);
-        },
-        children: name
-      }
-    ),
-    Object.entries(tree).map(([childName, childTree]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-      PathNode,
-      {
-        name: childName,
-        tree: childTree,
-        moduleId: `${moduleId}/${childName}`,
-        setSelectedModuleId
-      }
-    ) }, `${moduleId}/${childName}`))
-  ] });
+  const tree = dirPaths(paths);
+  const selectedModuleId = selectedPath && Internal.splitModuleIdAndModulePath(selectedPath)[0];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full py-2 text-xs", children: Object.entries(tree).map(([dir, files]) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2", children: [
+      dir && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold truncate max-w-[300px]", title: dir, children: /* @__PURE__ */ jsxRuntime.jsx(Path, { children: dir }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: classNames({
+            "flex flex-col py-2 justify-start items-start": !!dir
+          }),
+          children: files.map((file) => {
+            const moduleId = `/${dir}/${file}`;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: classNames("block px-2 py-1 rounded-full", {
+                  "bg-accent text-accent-foreground": selectedModuleId === moduleId
+                }),
+                onClick: () => {
+                  setSelectedModuleId(moduleId);
+                },
+                children: file
+              },
+              moduleId
+            );
+          })
+        }
+      )
+    ] }, `/${dir}`);
+  }) });
 }
 const theme = {
   tags: {
@@ -73561,76 +73860,91 @@ function ValOverlay({
         windowSize,
         setWindowSize
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-mode": theme2, className: "antialiased", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed -translate-x-1/2 z-overlay left-1/2 bottom-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-          ValMenu,
-          {
-            api,
-            patches,
-            onCommit: () => {
-              setPatchResetId((patchResetId) => patchResetId + 1);
-            }
-          }
-        ) }),
-        session.status === "success" && session.data.enabled && editMode === "hover" && hoverTarget.path && /* @__PURE__ */ jsxRuntime.jsx(
-          ValHover,
-          {
-            hoverTarget,
-            setHoverTarget,
-            setEditMode,
-            setWindowTarget
-          }
-        ),
-        editMode === "window" && windowTarget && /* @__PURE__ */ jsxRuntime.jsx(
-          ValWindow,
-          {
-            onClose: () => {
-              setWindowTarget(null);
-              setEditMode("hover");
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-mode": theme2,
+          className: "font-serif antialiased",
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            zIndex: 8999
+            // 1 less than the NextJS error z-index: 9000
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed -translate-y-1/2 right-4 top-1/2 z-overlay", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ValMenu,
               {
-                className: "p-4",
-                style: {
-                  maxHeight: windowSize == null ? void 0 : windowSize.innerHeight
+                direction: "vertical",
+                api,
+                patches,
+                onCommit: () => {
+                  setPatchResetId((patchResetId) => patchResetId + 1);
+                }
+              }
+            ) }),
+            session.status === "success" && session.data.enabled && editMode === "hover" && hoverTarget.path && /* @__PURE__ */ jsxRuntime.jsx(
+              ValHover,
+              {
+                hoverTarget,
+                setHoverTarget,
+                setEditMode,
+                setWindowTarget
+              }
+            ),
+            editMode === "window" && windowTarget && /* @__PURE__ */ jsxRuntime.jsx(
+              ValWindow,
+              {
+                onClose: () => {
+                  setWindowTarget(null);
+                  setEditMode("hover");
                 },
-                children: Object.entries(formData).map(([path, data]) => {
-                  if (data.status !== "success") {
-                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      path,
-                      ": ",
-                      data.status
-                    ] }, path);
-                  }
-                  const { source, schema } = data.data;
-                  if (!source || !schema) {
-                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      "Module: ",
-                      path,
-                      " is missing source or schema"
-                    ] });
-                  }
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    AnyVal,
-                    {
-                      initOnSubmit,
-                      path,
-                      schema,
-                      source,
-                      setSelectedPath: () => {
-                      },
-                      field: path,
-                      top: true
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "p-4",
+                    style: {
+                      maxHeight: windowSize == null ? void 0 : windowSize.innerHeight,
+                      maxWidth: windowSize == null ? void 0 : windowSize.width
                     },
-                    path
-                  );
-                })
+                    children: Object.entries(formData).map(([path, data]) => {
+                      if (data.status !== "success") {
+                        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                          path,
+                          ": ",
+                          data.status
+                        ] }, path);
+                      }
+                      const { source, schema } = data.data;
+                      if (!source || !schema) {
+                        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                          "Module: ",
+                          path,
+                          " is missing source or schema"
+                        ] });
+                      }
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        AnyVal,
+                        {
+                          initOnSubmit,
+                          path,
+                          schema,
+                          source,
+                          setSelectedPath: () => {
+                          },
+                          top: true
+                        },
+                        path
+                      );
+                    })
+                  }
+                )
               }
             )
-          }
-        )
-      ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -73697,7 +74011,7 @@ function ValHover({
     "div",
     {
       id: "val-hover",
-      className: "fixed border-2 cursor-pointer z-overlay-hover border-highlight drop-shadow-[0px_0px_12px_rgba(56,205,152,0.60)]",
+      className: "fixed border-2 cursor-pointer z-overlay-hover border-accent",
       style: {
         top: rect == null ? void 0 : rect.top,
         left: rect == null ? void 0 : rect.left,
@@ -73718,7 +74032,7 @@ function ValHover({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end w-full text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "flex items-center justify-center px-3 py-1 text-primary bg-highlight",
+          className: "flex items-center justify-center px-3 py-1 border-b-2 border-l-2 text-accent-foreground bg-accent border-accent",
           style: {
             maxHeight: (rect == null ? void 0 : rect.height) && rect.height - 4,
             fontSize: (rect == null ? void 0 : rect.height) && rect.height <= 16 ? rect.height - 4 : void 0
@@ -73762,9 +74076,19 @@ function useHoverTarget(editMode) {
         setTargetRect(targetElement.getBoundingClientRect());
       }
     };
+    const observer = new ResizeObserver(() => {
+      if (targetElement) {
+        setTargetRect(targetElement.getBoundingClientRect());
+      }
+    });
+    const valUIElement = document.getElementById("val-ui");
+    if (targetElement && valUIElement) {
+      observer.observe(valUIElement);
+    }
     document.addEventListener("scroll", scrollListener, { passive: true });
     return () => {
       document.removeEventListener("scroll", scrollListener);
+      observer.disconnect();
     };
   }, [targetElement]);
   return [
@@ -73811,7 +74135,7 @@ function useInitEditMode() {
   }, []);
   return [editMode, setEditMode];
 }
-const styleCss = "/*\n  Need to explicitly set config path, otherwise it may fail to resolve when\n  built from outside packages/ui.\n*/\n\n/*\n  ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: 'Roboto', sans-serif; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\n\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n\n[hidden] {\n  display: none;\n}\n\n/* :host for use with Shadow DOM, copied from the TailwindCSS prelude */\n\n:host {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 0 0% 57.3%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 159, 60%, 51%, 1;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n\n:root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 0 0% 57.3%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 159, 60%, 51%, 1;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n\n/* dark theme */\n\n*[data-mode=\"dark\"] {\n    --background: 0 0% 4%;\n    --foreground: 210 40% 98%;\n\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n\n    --muted: 178, 23%, 76%, 1;\n    --muted-foreground: 215 20.2% 65.1%;\n\n    --accent: 159, 60%, 51%, 1;\n    --accent-foreground: 210 40% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n\n* {\n  border-color: hsl(var(--border));\n}\n\nbody {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.sr-only {\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.pointer-events-none {\n  pointer-events: none;\n}\n.invisible {\n  visibility: hidden;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.-left-2 {\n  left: -0.5rem;\n}\n.-right-\\[10px\\] {\n  right: -10px;\n}\n.-top-\\[10px\\] {\n  top: -10px;\n}\n.-top-\\[4px\\] {\n  top: -4px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.left-0 {\n  left: 0px;\n}\n.left-1 {\n  left: 0.25rem;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.left-2 {\n  left: 0.5rem;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.right-1 {\n  right: 0.25rem;\n}\n.right-4 {\n  right: 1rem;\n}\n.right-\\[16px\\] {\n  right: 16px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-4 {\n  top: 1rem;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.z-50 {\n  z-index: 50;\n}\n.z-\\[5\\] {\n  z-index: 5;\n}\n.z-overlay {\n  z-index: 4;\n}\n.-mx-1 {\n  margin-left: -0.25rem;\n  margin-right: -0.25rem;\n}\n.-my-2 {\n  margin-top: -0.5rem;\n  margin-bottom: -0.5rem;\n}\n.-my-\\[100px\\] {\n  margin-top: -100px;\n  margin-bottom: -100px;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.ml-\\[20px\\] {\n  margin-left: 20px;\n}\n.ml-auto {\n  margin-left: auto;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.hidden {\n  display: none;\n}\n.aspect-square {\n  aspect-ratio: 1 / 1;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-11 {\n  height: 2.75rem;\n}\n.h-2 {\n  height: 0.5rem;\n}\n.h-2\\.5 {\n  height: 0.625rem;\n}\n.h-3 {\n  height: 0.75rem;\n}\n.h-3\\.5 {\n  height: 0.875rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-7 {\n  height: 1.75rem;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[18px\\] {\n  height: 18px;\n}\n.h-\\[1px\\] {\n  height: 1px;\n}\n.h-\\[20px\\] {\n  height: 20px;\n}\n.h-\\[22px\\] {\n  height: 22px;\n}\n.h-\\[24px\\] {\n  height: 24px;\n}\n.h-\\[32px\\] {\n  height: 32px;\n}\n.h-\\[50px\\] {\n  height: 50px;\n}\n.h-\\[75px\\] {\n  height: 75px;\n}\n.h-\\[9px\\] {\n  height: 9px;\n}\n.h-\\[var\\(--radix-select-trigger-height\\)\\] {\n  height: var(--radix-select-trigger-height);\n}\n.h-full {\n  height: 100%;\n}\n.h-px {\n  height: 1px;\n}\n.h-screen {\n  height: 100vh;\n}\n.max-h-\\[300px\\] {\n  max-height: 300px;\n}\n.min-h-\\[200px\\] {\n  min-height: 200px;\n}\n.min-h-\\[300px\\] {\n  min-height: 300px;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-2 {\n  width: 0.5rem;\n}\n.w-2\\.5 {\n  width: 0.625rem;\n}\n.w-3 {\n  width: 0.75rem;\n}\n.w-3\\.5 {\n  width: 0.875rem;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-7 {\n  width: 1.75rem;\n}\n.w-72 {\n  width: 18rem;\n}\n.w-9 {\n  width: 2.25rem;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-\\[1px\\] {\n  width: 1px;\n}\n.w-\\[20px\\] {\n  width: 20px;\n}\n.w-\\[24px\\] {\n  width: 24px;\n}\n.w-\\[32px\\] {\n  width: 32px;\n}\n.w-\\[44px\\] {\n  width: 44px;\n}\n.w-\\[9px\\] {\n  width: 9px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.w-screen {\n  width: 100vw;\n}\n.min-w-0 {\n  min-width: 0px;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.min-w-\\[8rem\\] {\n  min-width: 8rem;\n}\n.min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n  min-width: var(--radix-select-trigger-width);\n}\n.max-w-4xl {\n  max-width: 56rem;\n}\n.max-w-\\[1000px\\] {\n  max-width: 1000px;\n}\n.max-w-\\[10vw\\] {\n  max-width: 10vw;\n}\n.max-w-\\[300px\\] {\n  max-width: 300px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.max-w-lg {\n  max-width: 32rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-auto {\n  flex: 1 1 auto;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.-translate-x-1\\/2 {\n  --tw-translate-x: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-\\[-50\\%\\] {\n  --tw-translate-x: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-\\[-50\\%\\] {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[-90deg\\] {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[90deg\\] {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-col-resize {\n  cursor: col-resize;\n}\n.cursor-crosshair {\n  cursor: crosshair;\n}\n.cursor-default {\n  cursor: default;\n}\n.cursor-grab {\n  cursor: grab;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-se-resize {\n  cursor: se-resize;\n}\n.touch-none {\n  touch-action: none;\n}\n.select-none {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.resize-none {\n  resize: none;\n}\n.resize {\n  resize: both;\n}\n.list-decimal {\n  list-style-type: decimal;\n}\n.list-disc {\n  list-style-type: disc;\n}\n.grid-cols-\\[min-content_1fr\\] {\n  grid-template-columns: min-content 1fr;\n}\n.grid-rows-\\[1fr\\2c _min-content\\] {\n  grid-template-rows: 1fr min-content;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-\\[0\\.5em\\] {\n  gap: 0.5em;\n}\n.gap-\\[36px\\] {\n  gap: 36px;\n}\n.gap-x-2 {\n  -moz-column-gap: 0.5rem;\n       column-gap: 0.5rem;\n}\n.gap-x-3 {\n  -moz-column-gap: 0.75rem;\n       column-gap: 0.75rem;\n}\n.gap-x-4 {\n  -moz-column-gap: 1rem;\n       column-gap: 1rem;\n}\n.gap-y-2 {\n  row-gap: 0.5rem;\n}\n.gap-y-4 {\n  row-gap: 1rem;\n}\n.gap-y-6 {\n  row-gap: 1.5rem;\n}\n.gap-y-8 {\n  row-gap: 2rem;\n}\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.25rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-clip {\n  overflow: clip;\n}\n.overflow-scroll {\n  overflow: scroll;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: var(--radius);\n}\n.rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.rounded-sm {\n  border-radius: calc(var(--radius) - 4px);\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-\\[2px\\] {\n  border-width: 2px;\n}\n.border-y {\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-l-2 {\n  border-left-width: 2px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-accent {\n  border-color: hsl(var(--accent));\n}\n.border-border {\n  border-color: hsl(var(--border));\n}\n.border-card {\n  border-color: hsl(var(--card));\n}\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgb(156 163 175 / var(--tw-border-opacity));\n}\n.border-input {\n  border-color: hsl(var(--input));\n}\n.border-primary {\n  border-color: hsl(var(--primary));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-l-transparent {\n  border-left-color: transparent;\n}\n.border-t-transparent {\n  border-top-color: transparent;\n}\n.bg-accent {\n  background-color: hsl(var(--accent));\n}\n.bg-background {\n  background-color: hsl(var(--background));\n}\n.bg-background\\/80 {\n  background-color: hsl(var(--background) / 0.8);\n}\n.bg-border {\n  background-color: hsl(var(--border));\n}\n.bg-card {\n  background-color: hsl(var(--card));\n}\n.bg-card-foreground {\n  background-color: hsl(var(--card-foreground));\n}\n.bg-destructive {\n  background-color: hsl(var(--destructive));\n}\n.bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity));\n}\n.bg-gray-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity));\n}\n.bg-muted {\n  background-color: hsl(var(--muted));\n}\n.bg-popover {\n  background-color: hsl(var(--popover));\n}\n.bg-primary {\n  background-color: hsl(var(--primary));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.bg-secondary {\n  background-color: hsl(var(--secondary));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-b {\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.bg-gradient-to-br {\n  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\n}\n.from-background\\/90 {\n  --tw-gradient-from: hsl(var(--background) / 0.9) var(--tw-gradient-from-position);\n  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-transparent {\n  --tw-gradient-from: transparent var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-40\\% {\n  --tw-gradient-from-position: 40%;\n}\n.to-background {\n  --tw-gradient-to: hsl(var(--background)) var(--tw-gradient-to-position);\n}\n.fill-current {\n  fill: currentColor;\n}\n.fill-white {\n  fill: #fff;\n}\n.stroke-\\[2px\\] {\n  stroke-width: 2px;\n}\n.stroke-\\[3px\\] {\n  stroke-width: 3px;\n}\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n.p-0 {\n  padding: 0px;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-10 {\n  padding: 2.5rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-\\[1px\\] {\n  padding: 1px;\n}\n.px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.px-\\[24px\\] {\n  padding-left: 24px;\n  padding-right: 24px;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.py-7 {\n  padding-top: 1.75rem;\n  padding-bottom: 1.75rem;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pb-0 {\n  padding-bottom: 0px;\n}\n.pb-20 {\n  padding-bottom: 5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pl-6 {\n  padding-left: 1.5rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n.pr-2 {\n  padding-right: 0.5rem;\n}\n.pt-0 {\n  padding-top: 0px;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-start {\n  text-align: start;\n}\n.font-sans {\n  font-family: 'Roboto', sans-serif;\n}\n.font-serif {\n  font-family: 'Space Mono', monospace;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.text-\\[0\\.8rem\\] {\n  font-size: 0.8rem;\n}\n.text-\\[12px\\] {\n  font-size: 12px;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[400\\] {\n  font-weight: 400;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-\\[550\\] {\n  font-weight: 550;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-extrabold {\n  font-weight: 800;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.italic {\n  font-style: italic;\n}\n.leading-4 {\n  line-height: 1rem;\n}\n.leading-none {\n  line-height: 1;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.tracking-widest {\n  letter-spacing: 0.1em;\n}\n.text-accent {\n  color: hsl(var(--accent));\n}\n.text-accent-foreground {\n  color: hsl(var(--accent-foreground));\n}\n.text-background {\n  color: hsl(var(--background));\n}\n.text-card-foreground {\n  color: hsl(var(--card-foreground));\n}\n.text-current {\n  color: currentColor;\n}\n.text-destructive {\n  color: hsl(var(--destructive));\n}\n.text-destructive-foreground {\n  color: hsl(var(--destructive-foreground));\n}\n.text-foreground {\n  color: hsl(var(--foreground));\n}\n.text-muted {\n  color: hsl(var(--muted));\n}\n.text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.text-popover-foreground {\n  color: hsl(var(--popover-foreground));\n}\n.text-primary {\n  color: hsl(var(--primary));\n}\n.text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.line-through {\n  text-decoration-line: line-through;\n}\n.underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-60 {\n  opacity: 0.6;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.outline {\n  outline-style: solid;\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-offset-background {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.drop-shadow-2xl {\n  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.drop-shadow-\\[0px_0px_12px_rgba\\(56\\2c 205\\2c 152\\2c 0\\.60\\)\\] {\n  --tw-drop-shadow: drop-shadow(0px 0px 12px rgba(56,205,152,0.60));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-lg {\n  --tw-backdrop-blur: blur(16px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-150 {\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.animate-in {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.fade-in-0 {\n  --tw-enter-opacity: 0;\n}\n.zoom-in-95 {\n  --tw-enter-scale: .95;\n}\n.duration-150 {\n  animation-duration: 150ms;\n}\n.duration-200 {\n  animation-duration: 200ms;\n}\n.ease-in-out {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.file\\:border-0::file-selector-button {\n  border-width: 0px;\n}\n.file\\:bg-transparent::file-selector-button {\n  background-color: transparent;\n}\n.file\\:text-sm::file-selector-button {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.file\\:font-medium::file-selector-button {\n  font-weight: 500;\n}\n.placeholder\\:text-muted-foreground::-moz-placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.placeholder\\:text-muted-foreground::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.focus-within\\:relative:focus-within {\n  position: relative;\n}\n.hover\\:w-\\[2px\\]:hover {\n  width: 2px;\n}\n.hover\\:w-\\[3px\\]:hover {\n  width: 3px;\n}\n.hover\\:cursor-pointer:hover {\n  cursor: pointer;\n}\n.hover\\:rounded-lg:hover {\n  border-radius: var(--radius);\n}\n.hover\\:bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:bg-border:hover {\n  background-color: hsl(var(--border));\n}\n.hover\\:bg-destructive\\/90:hover {\n  background-color: hsl(var(--destructive) / 0.9);\n}\n.hover\\:bg-muted:hover {\n  background-color: hsl(var(--muted));\n}\n.hover\\:bg-primary:hover {\n  background-color: hsl(var(--primary));\n}\n.hover\\:bg-primary\\/90:hover {\n  background-color: hsl(var(--primary) / 0.9);\n}\n.hover\\:bg-red-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n.hover\\:bg-secondary\\/80:hover {\n  background-color: hsl(var(--secondary) / 0.8);\n}\n.hover\\:text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:text-muted-foreground:hover {\n  color: hsl(var(--muted-foreground));\n}\n.hover\\:text-primary-foreground:hover {\n  color: hsl(var(--primary-foreground));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.hover\\:opacity-100:hover {\n  opacity: 1;\n}\n.focus\\:bg-accent:focus {\n  background-color: hsl(var(--accent));\n}\n.focus\\:bg-primary:focus {\n  background-color: hsl(var(--primary));\n}\n.focus\\:text-accent-foreground:focus {\n  color: hsl(var(--accent-foreground));\n}\n.focus\\:text-primary-foreground:focus {\n  color: hsl(var(--primary-foreground));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-ring:focus {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:outline-accent:focus-visible {\n  outline-color: hsl(var(--accent));\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:ring-offset-background:focus-visible {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n.disabled\\:text-background:disabled {\n  color: hsl(var(--background));\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: 0.7;\n}\n.aria-selected\\:bg-accent[aria-selected=\"true\"] {\n  background-color: hsl(var(--accent));\n}\n.aria-selected\\:text-accent-foreground[aria-selected=\"true\"] {\n  color: hsl(var(--accent-foreground));\n}\n.aria-selected\\:opacity-100[aria-selected=\"true\"] {\n  opacity: 1;\n}\n.data-\\[disabled\\]\\:pointer-events-none[data-disabled] {\n  pointer-events: none;\n}\n.data-\\[side\\=bottom\\]\\:translate-y-1[data-side=bottom] {\n  --tw-translate-y: 0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[side\\=left\\]\\:-translate-x-1[data-side=left] {\n  --tw-translate-x: -0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[side\\=right\\]\\:translate-x-1[data-side=right] {\n  --tw-translate-x: 0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[side\\=top\\]\\:-translate-y-1[data-side=top] {\n  --tw-translate-y: -0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=checked\\]\\:translate-x-5[data-state=checked] {\n  --tw-translate-x: 1.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes accordion-up {\n\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n\n  to {\n    height: 0;\n  }\n}\n.data-\\[state\\=closed\\]\\:animate-accordion-up[data-state=closed] {\n  animation: accordion-up 0.2s ease-out;\n}\n@keyframes accordion-down {\n\n  from {\n    height: 0;\n  }\n\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n.data-\\[state\\=open\\]\\:animate-accordion-down[data-state=open] {\n  animation: accordion-down 0.2s ease-out;\n}\n.data-\\[state\\=active\\]\\:bg-background[data-state=active] {\n  background-color: hsl(var(--background));\n}\n.data-\\[state\\=checked\\]\\:bg-accent[data-state=checked] {\n  background-color: hsl(var(--accent));\n}\n.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=on\\]\\:bg-accent[data-state=on] {\n  background-color: hsl(var(--accent));\n}\n.data-\\[state\\=open\\]\\:bg-accent[data-state=open] {\n  background-color: hsl(var(--accent));\n}\n.data-\\[state\\=unchecked\\]\\:bg-primary[data-state=unchecked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=active\\]\\:text-foreground[data-state=active] {\n  color: hsl(var(--foreground));\n}\n.data-\\[state\\=checked\\]\\:text-primary-foreground[data-state=checked] {\n  color: hsl(var(--primary-foreground));\n}\n.data-\\[state\\=on\\]\\:text-accent-foreground[data-state=on] {\n  color: hsl(var(--accent-foreground));\n}\n.data-\\[state\\=open\\]\\:text-muted-foreground[data-state=open] {\n  color: hsl(var(--muted-foreground));\n}\n.data-\\[disabled\\]\\:opacity-50[data-disabled] {\n  opacity: 0.5;\n}\n.data-\\[state\\=active\\]\\:shadow-sm[data-state=active] {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed] {\n  --tw-exit-opacity: 0;\n}\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=open] {\n  --tw-enter-opacity: 0;\n}\n.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=closed] {\n  --tw-exit-scale: .95;\n}\n.data-\\[state\\=open\\]\\:zoom-in-95[data-state=open] {\n  --tw-enter-scale: .95;\n}\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom] {\n  --tw-enter-translate-y: -0.5rem;\n}\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left] {\n  --tw-enter-translate-x: 0.5rem;\n}\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right] {\n  --tw-enter-translate-x: -0.5rem;\n}\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top] {\n  --tw-enter-translate-y: 0.5rem;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=closed] {\n  --tw-exit-translate-x: -50%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-top-\\[48\\%\\][data-state=closed] {\n  --tw-exit-translate-y: -48%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=open] {\n  --tw-enter-translate-x: -50%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-top-\\[48\\%\\][data-state=open] {\n  --tw-enter-translate-y: -48%;\n}\n:is([data-mode=\"dark\"] .dark\\:border-white) {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:mt-0 {\n    margin-top: 0px;\n  }\n\n  .sm\\:block {\n    display: block;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(1rem * var(--tw-space-x-reverse));\n    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-y-reverse: 0;\n    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n    margin-bottom: calc(0px * var(--tw-space-y-reverse));\n  }\n\n  .sm\\:rounded-lg {\n    border-radius: var(--radius);\n  }\n\n  .sm\\:p-0 {\n    padding: 0px;\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:w-full {\n    width: 100%;\n  }\n}\n.\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:bg-accent:has([aria-selected]) {\n  background-color: hsl(var(--accent));\n}\n.first\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-l-md:has([aria-selected]):first-child {\n  border-top-left-radius: calc(var(--radius) - 2px);\n  border-bottom-left-radius: calc(var(--radius) - 2px);\n}\n.last\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-r-md:has([aria-selected]):last-child {\n  border-top-right-radius: calc(var(--radius) - 2px);\n  border-bottom-right-radius: calc(var(--radius) - 2px);\n}\n.\\[\\&\\[data-state\\=open\\]\\>svg\\]\\:rotate-180[data-state=open]>svg {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 [cmdk-group-heading] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 [cmdk-group-heading] {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs [cmdk-group-heading] {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium [cmdk-group-heading] {\n  font-weight: 500;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground [cmdk-group-heading] {\n  color: hsl(var(--muted-foreground));\n}\n.\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {\n  padding-top: 0px;\n}\n.\\[\\&_\\[cmdk-group\\]\\]\\:px-2 [cmdk-group] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 [cmdk-input-wrapper] svg {\n  height: 1.25rem;\n}\n.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 [cmdk-input-wrapper] svg {\n  width: 1.25rem;\n}\n.\\[\\&_\\[cmdk-input\\]\\]\\:h-12 [cmdk-input] {\n  height: 3rem;\n}\n.\\[\\&_\\[cmdk-item\\]\\]\\:px-2 [cmdk-item] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.\\[\\&_\\[cmdk-item\\]\\]\\:py-3 [cmdk-item] {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 [cmdk-item] svg {\n  height: 1.25rem;\n}\n.\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 [cmdk-item] svg {\n  width: 1.25rem;\n}\n";
+const styleCss = "/*\n  Need to explicitly set config path, otherwise it may fail to resolve when\n  built from outside packages/ui.\n*/\n\n/*\n  ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: 'Roboto', sans-serif; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\n\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n\n[hidden] {\n  display: none;\n}\n\n/* :host for use with Shadow DOM, copied from the TailwindCSS prelude */\n\n:host {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 0 0% 57.3%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 273 60% 51%;\n    --accent-foreground: 110 10% 94%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n\n:root {\n    --background: 110 10% 94%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 0 0% 57.3%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 273 60% 51%;\n    --accent-foreground: 110 10% 94%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 212.7 9.1% 76.3%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n\n/* dark theme */\n\n*[data-mode=\"dark\"] {\n    --background: 0 0% 4%;\n    --foreground: 210 40% 98%;\n\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n\n    --muted: 178 23% 76%;\n    --muted-foreground: 215 20.2% 65.1%;\n\n    --accent: 159 60% 51%;\n    --accent-foreground: 210 40% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n\n* {\n  border-color: hsl(var(--border));\n}\n\nbody {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.sr-only {\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.pointer-events-none {\n  pointer-events: none;\n}\n.invisible {\n  visibility: hidden;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.-left-2 {\n  left: -0.5rem;\n}\n.-right-\\[10px\\] {\n  right: -10px;\n}\n.-top-\\[10px\\] {\n  top: -10px;\n}\n.-top-\\[4px\\] {\n  top: -4px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.left-1 {\n  left: 0.25rem;\n}\n.left-2 {\n  left: 0.5rem;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.right-1 {\n  right: 0.25rem;\n}\n.right-4 {\n  right: 1rem;\n}\n.right-\\[16px\\] {\n  right: 16px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-1\\/2 {\n  top: 50%;\n}\n.top-4 {\n  top: 1rem;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.z-50 {\n  z-index: 50;\n}\n.z-\\[1\\] {\n  z-index: 1;\n}\n.z-\\[5\\] {\n  z-index: 5;\n}\n.z-overlay {\n  z-index: 4;\n}\n.m-4 {\n  margin: 1rem;\n}\n.-mx-1 {\n  margin-left: -0.25rem;\n  margin-right: -0.25rem;\n}\n.-my-2 {\n  margin-top: -0.5rem;\n  margin-bottom: -0.5rem;\n}\n.-my-\\[100px\\] {\n  margin-top: -100px;\n  margin-bottom: -100px;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-0 {\n  margin-left: 0px;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.ml-\\[20px\\] {\n  margin-left: 20px;\n}\n.ml-auto {\n  margin-left: auto;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.hidden {\n  display: none;\n}\n.aspect-square {\n  aspect-ratio: 1 / 1;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-11 {\n  height: 2.75rem;\n}\n.h-2 {\n  height: 0.5rem;\n}\n.h-2\\.5 {\n  height: 0.625rem;\n}\n.h-3 {\n  height: 0.75rem;\n}\n.h-3\\.5 {\n  height: 0.875rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-7 {\n  height: 1.75rem;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.h-\\[100\\] {\n  height: 100;\n}\n.h-\\[12px\\] {\n  height: 12px;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[18px\\] {\n  height: 18px;\n}\n.h-\\[1px\\] {\n  height: 1px;\n}\n.h-\\[20px\\] {\n  height: 20px;\n}\n.h-\\[22px\\] {\n  height: 22px;\n}\n.h-\\[24px\\] {\n  height: 24px;\n}\n.h-\\[32px\\] {\n  height: 32px;\n}\n.h-\\[50px\\] {\n  height: 50px;\n}\n.h-\\[75px\\] {\n  height: 75px;\n}\n.h-\\[9px\\] {\n  height: 9px;\n}\n.h-\\[var\\(--radix-select-trigger-height\\)\\] {\n  height: var(--radix-select-trigger-height);\n}\n.h-full {\n  height: 100%;\n}\n.h-px {\n  height: 1px;\n}\n.h-screen {\n  height: 100vh;\n}\n.max-h-\\[300px\\] {\n  max-height: 300px;\n}\n.max-h-\\[500px\\] {\n  max-height: 500px;\n}\n.min-h-\\[200px\\] {\n  min-height: 200px;\n}\n.min-h-\\[300px\\] {\n  min-height: 300px;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-0 {\n  width: 0px;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-2 {\n  width: 0.5rem;\n}\n.w-2\\.5 {\n  width: 0.625rem;\n}\n.w-3 {\n  width: 0.75rem;\n}\n.w-3\\.5 {\n  width: 0.875rem;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-7 {\n  width: 1.75rem;\n}\n.w-72 {\n  width: 18rem;\n}\n.w-9 {\n  width: 2.25rem;\n}\n.w-\\[12px\\] {\n  width: 12px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-\\[1px\\] {\n  width: 1px;\n}\n.w-\\[20px\\] {\n  width: 20px;\n}\n.w-\\[24px\\] {\n  width: 24px;\n}\n.w-\\[300px\\] {\n  width: 300px;\n}\n.w-\\[32px\\] {\n  width: 32px;\n}\n.w-\\[44px\\] {\n  width: 44px;\n}\n.w-\\[9px\\] {\n  width: 9px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.w-screen {\n  width: 100vw;\n}\n.min-w-0 {\n  min-width: 0px;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.min-w-\\[8rem\\] {\n  min-width: 8rem;\n}\n.min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n  min-width: var(--radix-select-trigger-width);\n}\n.max-w-\\[1000px\\] {\n  max-width: 1000px;\n}\n.max-w-\\[10vw\\] {\n  max-width: 10vw;\n}\n.max-w-\\[300px\\] {\n  max-width: 300px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.max-w-lg {\n  max-width: 32rem;\n}\n.max-w-xl {\n  max-width: 36rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-auto {\n  flex: 1 1 auto;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.-translate-y-1\\/2 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-\\[-50\\%\\] {\n  --tw-translate-x: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-\\[-50\\%\\] {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[-90deg\\] {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[90deg\\] {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-col-resize {\n  cursor: col-resize;\n}\n.cursor-default {\n  cursor: default;\n}\n.cursor-grab {\n  cursor: grab;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-se-resize {\n  cursor: se-resize;\n}\n.touch-none {\n  touch-action: none;\n}\n.select-none {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.resize-none {\n  resize: none;\n}\n.resize {\n  resize: both;\n}\n.list-decimal {\n  list-style-type: decimal;\n}\n.list-disc {\n  list-style-type: disc;\n}\n.grid-cols-\\[min-content_1fr\\] {\n  grid-template-columns: min-content 1fr;\n}\n.grid-rows-\\[1fr\\2c _min-content\\] {\n  grid-template-rows: 1fr min-content;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-\\[0\\.5em\\] {\n  gap: 0.5em;\n}\n.gap-\\[36px\\] {\n  gap: 36px;\n}\n.gap-x-4 {\n  -moz-column-gap: 1rem;\n       column-gap: 1rem;\n}\n.gap-y-1 {\n  row-gap: 0.25rem;\n}\n.gap-y-2 {\n  row-gap: 0.5rem;\n}\n.gap-y-4 {\n  row-gap: 1rem;\n}\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.25rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-clip {\n  overflow: clip;\n}\n.overflow-scroll {\n  overflow: scroll;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: var(--radius);\n}\n.rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.rounded-sm {\n  border-radius: calc(var(--radius) - 4px);\n}\n.rounded-b-none {\n  border-bottom-right-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n.rounded-b-sm {\n  border-bottom-right-radius: calc(var(--radius) - 4px);\n  border-bottom-left-radius: calc(var(--radius) - 4px);\n}\n.rounded-t-none {\n  border-top-left-radius: 0px;\n  border-top-right-radius: 0px;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-\\[2px\\] {\n  border-width: 2px;\n}\n.border-x {\n  border-left-width: 1px;\n  border-right-width: 1px;\n}\n.border-y {\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-b-0 {\n  border-bottom-width: 0px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-l-2 {\n  border-left-width: 2px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-t-0 {\n  border-top-width: 0px;\n}\n.border-accent {\n  border-color: hsl(var(--accent));\n}\n.border-border {\n  border-color: hsl(var(--border));\n}\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgb(156 163 175 / var(--tw-border-opacity));\n}\n.border-input {\n  border-color: hsl(var(--input));\n}\n.border-primary {\n  border-color: hsl(var(--primary));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-l-transparent {\n  border-left-color: transparent;\n}\n.border-t-transparent {\n  border-top-color: transparent;\n}\n.bg-accent {\n  background-color: hsl(var(--accent));\n}\n.bg-background {\n  background-color: hsl(var(--background));\n}\n.bg-background\\/80 {\n  background-color: hsl(var(--background) / 0.8);\n}\n.bg-border {\n  background-color: hsl(var(--border));\n}\n.bg-card {\n  background-color: hsl(var(--card));\n}\n.bg-card-foreground {\n  background-color: hsl(var(--card-foreground));\n}\n.bg-destructive {\n  background-color: hsl(var(--destructive));\n}\n.bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity));\n}\n.bg-gray-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity));\n}\n.bg-muted {\n  background-color: hsl(var(--muted));\n}\n.bg-popover {\n  background-color: hsl(var(--popover));\n}\n.bg-primary {\n  background-color: hsl(var(--primary));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.bg-secondary {\n  background-color: hsl(var(--secondary));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-b {\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.bg-gradient-to-br {\n  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\n}\n.from-background\\/90 {\n  --tw-gradient-from: hsl(var(--background) / 0.9) var(--tw-gradient-from-position);\n  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-card {\n  --tw-gradient-from: hsl(var(--card)) var(--tw-gradient-from-position);\n  --tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-transparent {\n  --tw-gradient-from: transparent var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-40\\% {\n  --tw-gradient-from-position: 40%;\n}\n.from-50\\% {\n  --tw-gradient-from-position: 50%;\n}\n.to-background {\n  --tw-gradient-to: hsl(var(--background)) var(--tw-gradient-to-position);\n}\n.fill-current {\n  fill: currentColor;\n}\n.fill-white {\n  fill: #fff;\n}\n.stroke-\\[2px\\] {\n  stroke-width: 2px;\n}\n.stroke-\\[3px\\] {\n  stroke-width: 3px;\n}\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n.p-0 {\n  padding: 0px;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-10 {\n  padding: 2.5rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-\\[1px\\] {\n  padding: 1px;\n}\n.px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.px-\\[24px\\] {\n  padding-left: 24px;\n  padding-right: 24px;\n}\n.px-\\[2px\\] {\n  padding-left: 2px;\n  padding-right: 2px;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.py-7 {\n  padding-top: 1.75rem;\n  padding-bottom: 1.75rem;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pb-0 {\n  padding-bottom: 0px;\n}\n.pb-20 {\n  padding-bottom: 5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-6 {\n  padding-left: 1.5rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n.pl-\\[300px\\] {\n  padding-left: 300px;\n}\n.pr-2 {\n  padding-right: 0.5rem;\n}\n.pt-0 {\n  padding-top: 0px;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-start {\n  text-align: start;\n}\n.font-sans {\n  font-family: 'Roboto', sans-serif;\n}\n.font-serif {\n  font-family: 'Space Mono', monospace;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.text-\\[0\\.8rem\\] {\n  font-size: 0.8rem;\n}\n.text-\\[12px\\] {\n  font-size: 12px;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[400\\] {\n  font-weight: 400;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-\\[550\\] {\n  font-weight: 550;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-extrabold {\n  font-weight: 800;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.italic {\n  font-style: italic;\n}\n.leading-4 {\n  line-height: 1rem;\n}\n.leading-none {\n  line-height: 1;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.tracking-widest {\n  letter-spacing: 0.1em;\n}\n.text-accent {\n  color: hsl(var(--accent));\n}\n.text-accent-foreground {\n  color: hsl(var(--accent-foreground));\n}\n.text-background {\n  color: hsl(var(--background));\n}\n.text-card-foreground {\n  color: hsl(var(--card-foreground));\n}\n.text-current {\n  color: currentColor;\n}\n.text-destructive {\n  color: hsl(var(--destructive));\n}\n.text-destructive-foreground {\n  color: hsl(var(--destructive-foreground));\n}\n.text-foreground {\n  color: hsl(var(--foreground));\n}\n.text-muted {\n  color: hsl(var(--muted));\n}\n.text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.text-popover-foreground {\n  color: hsl(var(--popover-foreground));\n}\n.text-primary {\n  color: hsl(var(--primary));\n}\n.text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.line-through {\n  text-decoration-line: line-through;\n}\n.underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-60 {\n  opacity: 0.6;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.mix-blend-difference {\n  mix-blend-mode: difference;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.outline {\n  outline-style: solid;\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-offset-background {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.drop-shadow-2xl {\n  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.drop-shadow-\\[0px_0px_12px_hsl\\(var\\(--accent\\)\\)\\] {\n  --tw-drop-shadow: drop-shadow(0px 0px 12px hsl(var(--accent)));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-lg {\n  --tw-backdrop-blur: blur(16px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-150 {\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.animate-in {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.fade-in-0 {\n  --tw-enter-opacity: 0;\n}\n.zoom-in-95 {\n  --tw-enter-scale: .95;\n}\n.duration-150 {\n  animation-duration: 150ms;\n}\n.duration-200 {\n  animation-duration: 200ms;\n}\n.ease-in-out {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.file\\:border-0::file-selector-button {\n  border-width: 0px;\n}\n.file\\:bg-transparent::file-selector-button {\n  background-color: transparent;\n}\n.file\\:text-sm::file-selector-button {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.file\\:font-medium::file-selector-button {\n  font-weight: 500;\n}\n.placeholder\\:text-muted-foreground::-moz-placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.placeholder\\:text-muted-foreground::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.focus-within\\:relative:focus-within {\n  position: relative;\n}\n.hover\\:w-\\[2px\\]:hover {\n  width: 2px;\n}\n.hover\\:w-\\[3px\\]:hover {\n  width: 3px;\n}\n.hover\\:cursor-pointer:hover {\n  cursor: pointer;\n}\n.hover\\:rounded-lg:hover {\n  border-radius: var(--radius);\n}\n.hover\\:bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:bg-border:hover {\n  background-color: hsl(var(--border));\n}\n.hover\\:bg-destructive\\/90:hover {\n  background-color: hsl(var(--destructive) / 0.9);\n}\n.hover\\:bg-muted:hover {\n  background-color: hsl(var(--muted));\n}\n.hover\\:bg-primary:hover {\n  background-color: hsl(var(--primary));\n}\n.hover\\:bg-primary\\/90:hover {\n  background-color: hsl(var(--primary) / 0.9);\n}\n.hover\\:bg-red-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n.hover\\:bg-secondary\\/80:hover {\n  background-color: hsl(var(--secondary) / 0.8);\n}\n.hover\\:text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:text-muted-foreground:hover {\n  color: hsl(var(--muted-foreground));\n}\n.hover\\:text-primary-foreground:hover {\n  color: hsl(var(--primary-foreground));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.hover\\:opacity-100:hover {\n  opacity: 1;\n}\n.focus\\:bg-accent:focus {\n  background-color: hsl(var(--accent));\n}\n.focus\\:bg-primary:focus {\n  background-color: hsl(var(--primary));\n}\n.focus\\:text-accent-foreground:focus {\n  color: hsl(var(--accent-foreground));\n}\n.focus\\:text-primary-foreground:focus {\n  color: hsl(var(--primary-foreground));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-ring:focus {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:outline-accent:focus-visible {\n  outline-color: hsl(var(--accent));\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:ring-offset-background:focus-visible {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n.disabled\\:text-background:disabled {\n  color: hsl(var(--background));\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: 0.7;\n}\n.aria-selected\\:bg-accent[aria-selected=\"true\"] {\n  background-color: hsl(var(--accent));\n}\n.aria-selected\\:text-accent-foreground[aria-selected=\"true\"] {\n  color: hsl(var(--accent-foreground));\n}\n.aria-selected\\:opacity-100[aria-selected=\"true\"] {\n  opacity: 1;\n}\n.data-\\[disabled\\]\\:pointer-events-none[data-disabled] {\n  pointer-events: none;\n}\n.data-\\[side\\=bottom\\]\\:translate-y-1[data-side=bottom] {\n  --tw-translate-y: 0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[side\\=left\\]\\:-translate-x-1[data-side=left] {\n  --tw-translate-x: -0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[side\\=right\\]\\:translate-x-1[data-side=right] {\n  --tw-translate-x: 0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[side\\=top\\]\\:-translate-y-1[data-side=top] {\n  --tw-translate-y: -0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=checked\\]\\:translate-x-5[data-state=checked] {\n  --tw-translate-x: 1.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes accordion-up {\n\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n\n  to {\n    height: 0;\n  }\n}\n.data-\\[state\\=closed\\]\\:animate-accordion-up[data-state=closed] {\n  animation: accordion-up 0.2s ease-out;\n}\n@keyframes accordion-down {\n\n  from {\n    height: 0;\n  }\n\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n.data-\\[state\\=open\\]\\:animate-accordion-down[data-state=open] {\n  animation: accordion-down 0.2s ease-out;\n}\n.data-\\[state\\=active\\]\\:bg-background[data-state=active] {\n  background-color: hsl(var(--background));\n}\n.data-\\[state\\=checked\\]\\:bg-accent[data-state=checked] {\n  background-color: hsl(var(--accent));\n}\n.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=on\\]\\:bg-accent[data-state=on] {\n  background-color: hsl(var(--accent));\n}\n.data-\\[state\\=open\\]\\:bg-accent[data-state=open] {\n  background-color: hsl(var(--accent));\n}\n.data-\\[state\\=unchecked\\]\\:bg-primary[data-state=unchecked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=active\\]\\:text-foreground[data-state=active] {\n  color: hsl(var(--foreground));\n}\n.data-\\[state\\=checked\\]\\:text-primary-foreground[data-state=checked] {\n  color: hsl(var(--primary-foreground));\n}\n.data-\\[state\\=on\\]\\:text-accent-foreground[data-state=on] {\n  color: hsl(var(--accent-foreground));\n}\n.data-\\[state\\=open\\]\\:text-muted-foreground[data-state=open] {\n  color: hsl(var(--muted-foreground));\n}\n.data-\\[disabled\\]\\:opacity-50[data-disabled] {\n  opacity: 0.5;\n}\n.data-\\[state\\=active\\]\\:shadow-sm[data-state=active] {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed] {\n  --tw-exit-opacity: 0;\n}\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=open] {\n  --tw-enter-opacity: 0;\n}\n.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=closed] {\n  --tw-exit-scale: .95;\n}\n.data-\\[state\\=open\\]\\:zoom-in-95[data-state=open] {\n  --tw-enter-scale: .95;\n}\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom] {\n  --tw-enter-translate-y: -0.5rem;\n}\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left] {\n  --tw-enter-translate-x: 0.5rem;\n}\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right] {\n  --tw-enter-translate-x: -0.5rem;\n}\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top] {\n  --tw-enter-translate-y: 0.5rem;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=closed] {\n  --tw-exit-translate-x: -50%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-top-\\[48\\%\\][data-state=closed] {\n  --tw-exit-translate-y: -48%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=open] {\n  --tw-enter-translate-x: -50%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-top-\\[48\\%\\][data-state=open] {\n  --tw-enter-translate-y: -48%;\n}\n:is([data-mode=\"dark\"] .dark\\:border-white) {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:mt-0 {\n    margin-top: 0px;\n  }\n\n  .sm\\:block {\n    display: block;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(1rem * var(--tw-space-x-reverse));\n    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-y-reverse: 0;\n    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n    margin-bottom: calc(0px * var(--tw-space-y-reverse));\n  }\n\n  .sm\\:rounded-lg {\n    border-radius: var(--radius);\n  }\n\n  .sm\\:p-0 {\n    padding: 0px;\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:relative {\n    position: relative;\n  }\n\n  .md\\:flex {\n    display: flex;\n  }\n\n  .md\\:hidden {\n    display: none;\n  }\n\n  .md\\:w-\\[300px\\] {\n    width: 300px;\n  }\n\n  .md\\:w-full {\n    width: 100%;\n  }\n\n  .md\\:px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n\n  .md\\:pl-0 {\n    padding-left: 0px;\n  }\n}\n.\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:bg-accent:has([aria-selected]) {\n  background-color: hsl(var(--accent));\n}\n.first\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-l-md:has([aria-selected]):first-child {\n  border-top-left-radius: calc(var(--radius) - 2px);\n  border-bottom-left-radius: calc(var(--radius) - 2px);\n}\n.last\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-r-md:has([aria-selected]):last-child {\n  border-top-right-radius: calc(var(--radius) - 2px);\n  border-bottom-right-radius: calc(var(--radius) - 2px);\n}\n.\\[\\&\\[data-state\\=open\\]\\>svg\\]\\:rotate-180[data-state=open]>svg {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 [cmdk-group-heading] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 [cmdk-group-heading] {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs [cmdk-group-heading] {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium [cmdk-group-heading] {\n  font-weight: 500;\n}\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground [cmdk-group-heading] {\n  color: hsl(var(--muted-foreground));\n}\n.\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {\n  padding-top: 0px;\n}\n.\\[\\&_\\[cmdk-group\\]\\]\\:px-2 [cmdk-group] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 [cmdk-input-wrapper] svg {\n  height: 1.25rem;\n}\n.\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 [cmdk-input-wrapper] svg {\n  width: 1.25rem;\n}\n.\\[\\&_\\[cmdk-input\\]\\]\\:h-12 [cmdk-input] {\n  height: 3rem;\n}\n.\\[\\&_\\[cmdk-item\\]\\]\\:px-2 [cmdk-item] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.\\[\\&_\\[cmdk-item\\]\\]\\:py-3 [cmdk-item] {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 [cmdk-item] svg {\n  height: 1.25rem;\n}\n.\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 [cmdk-item] svg {\n  width: 1.25rem;\n}\n";
 function Style() {
   return /* @__PURE__ */ jsxRuntime.jsx("style", { children: styleCss });
 }