@valbuild/ui 0.41.0 → 0.42.0

package/dist/valbuild-ui.cjs.js

@@ -51498,7 +51498,7 @@ function isRichTextSchema(schema) {
 function isImageSchema(schema) {
   return schema instanceof ImageSchema || _typeof(schema) === "object" && "type" in schema && schema.type === "image";
 }
-function resolvePath$2(path, valModule, schema) {
+function resolvePath$1(path, valModule, schema) {
   var parts = parsePath$1(path);
   var origParts = _toConsumableArray$1(parts);
   var resolvedSchema = schema;
@@ -52034,7 +52034,7 @@ var Internal = {
   getValPath,
   getVal,
   getSource,
-  resolvePath: resolvePath$2,
+  resolvePath: resolvePath$1,
   splitModuleIdAndModulePath,
   isVal,
   createValPathOfItem: createValPathOfItem$1,
@@ -66595,106 +66595,419 @@ function useDrag({
   const isInitialized = !!((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.width);
   return [position, isInitialized, ref, handleMouseDown];
 }
-function resolvePath$1(sourcePath, modules) {
-  const [moduleId, modulePath] = Internal.splitModuleIdAndModulePath(sourcePath);
-  const valModule = modules[moduleId];
-  if (!(valModule == null ? void 0 : valModule.source)) {
-    return result.err({
-      message: `Module "${moduleId}" has no source`
+function usePatch(paths, api, valStore, onSubmit, session) {
+  const [state, setState] = React$3.useState({});
+  const [error, setError] = React$3.useState(null);
+  const [progress, setProgress] = React$3.useState("ready");
+  const initPatchCallback = React$3.useCallback(
+    (paths2) => {
+      return (callback) => {
+        setState((prev) => {
+          const nextState = paths2.reduce((acc, path) => {
+            const patchPath = Internal.createPatchJSONPath(
+              Internal.splitModuleIdAndModulePath(path)[1]
+            );
+            return {
+              ...acc,
+              [path]: () => callback(patchPath)
+            };
+          }, {});
+          return {
+            ...prev,
+            ...nextState
+          };
+        });
+      };
+    },
+    []
+  );
+  React$3.useEffect(() => {
+    setState((prev) => {
+      const newState = {};
+      for (const path of paths) {
+        if (prev[path]) {
+          newState[path] = prev[path];
+        }
+      }
+      if (Object.keys(newState).length === Object.keys(prev).length) {
+        return prev;
+      }
+      return newState;
     });
-  }
-  if (!(valModule == null ? void 0 : valModule.schema)) {
-    return result.err({
-      message: `Module "${moduleId}" has no schema`
+  }, [paths]);
+  const onSubmitPatch = React$3.useCallback(async () => {
+    setError(null);
+    setProgress("create_patch");
+    const patches = {};
+    for (const path in state) {
+      const [moduleId] = Internal.splitModuleIdAndModulePath(
+        path
+      );
+      const patch = await state[path]();
+      patches[moduleId] = patch;
+    }
+    return maybeStartViewTransition(() => {
+      setProgress("patching");
+      return Promise.all(
+        Object.entries(patches).map(
+          ([moduleId, patch]) => api.postPatches(moduleId, patch).then((res) => {
+            if (result.isErr(res)) {
+              throw res.error;
+            } else {
+              res.value;
+            }
+          })
+        )
+      ).then(() => {
+        setProgress("on_submit");
+        const refreshRequired = session.status === "success" && session.data.mode === "proxy";
+        return onSubmit(refreshRequired);
+      }).then(() => {
+        setProgress("update_store");
+        return valStore.update(
+          paths.map(
+            (path) => Internal.splitModuleIdAndModulePath(path)[0]
+          )
+        );
+      });
+    }).catch((err2) => {
+      setError(err2);
+    }).finally(() => {
+      setProgress("ready");
     });
+  }, [state, session]);
+  return { initPatchCallback, onSubmitPatch, error, progress };
+}
+async function maybeStartViewTransition(f) {
+  if ("startViewTransition" in document && typeof document.startViewTransition === "function") {
+    await document.startViewTransition(f);
   }
-  return result.ok(
-    Internal.resolvePath(modulePath, valModule.source, valModule.schema)
-  );
+  await f();
 }
-const falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config) => {
-  return (props) => {
-    var ref;
-    if ((config === null || config === void 0 ? void 0 : config.variants) == null)
-      return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    const { variants, defaultVariants } = config;
-    const getVariantClassNames = Object.keys(variants).map((variant) => {
-      const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-      const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-      if (variantProp === null)
-        return null;
-      const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-      return variants[variant][variantKey];
-    });
-    const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-      let [key, value] = param;
-      if (value === void 0) {
-        return acc;
+function useTheme(defaultTheme = "dark") {
+  const [theme2, setTheme] = React$3.useState(defaultTheme);
+  React$3.useEffect(() => {
+    if (localStorage.getItem("val-theme") === "light") {
+      setTheme("light");
+    } else if (localStorage.getItem("val-theme") === "dark") {
+      setTheme("dark");
+    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      setTheme("dark");
+    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+      setTheme("light");
+    }
+    const themeListener = (e) => {
+      if (!localStorage.getItem("val-theme")) {
+        setTheme(e.matches ? "dark" : "light");
       }
-      acc[key] = value;
-      return acc;
-    }, {});
-    const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
-      let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param1;
-      return Object.entries(compoundVariantOptions).every((param) => {
-        let [key, value] = param;
-        return Array.isArray(value) ? value.includes({
-          ...defaultVariants,
-          ...propsWithoutUndefined
-        }[key]) : {
-          ...defaultVariants,
-          ...propsWithoutUndefined
-        }[key] === value;
-      }) ? [
-        ...acc,
-        cvClass,
-        cvClassName
-      ] : acc;
-    }, []);
-    return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeListener);
+    return () => {
+      window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeListener);
+    };
+  }, []);
+  return [
+    theme2,
+    (theme22) => {
+      localStorage.setItem("val-theme", theme22);
+      setTheme(theme22);
+    }
+  ];
+}
+function Grid({ children }) {
+  const leftColRef = React$3.useRef(null);
+  const rightColRef = React$3.useRef(null);
+  const isResizing = React$3.useRef(false);
+  const x = React$3.useRef(0);
+  const dragRef = React$3.useRef(null);
+  const originalWidth = React$3.useRef(0);
+  const handleMouseUp = () => {
+    isResizing.current = false;
+    dragRef.current = null;
+    x.current = 0;
+    originalWidth.current = 0;
   };
-};
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
+  const handleMouseMove = (event) => {
+    event.preventDefault();
+    const targetRef = dragRef.current === "left" ? leftColRef : rightColRef;
+    if (targetRef.current && isResizing.current) {
+      const dx = dragRef.current === "left" ? event.screenX - x.current : x.current - event.screenX;
+      targetRef.current.style.width = `${Math.max(
+        originalWidth.current + dx,
+        150
+      )}px`;
+    }
+  };
+  const handleMouseDown = (column) => (event) => {
+    const target = event.target;
+    if (target) {
+      const columnRef = column === "left" ? leftColRef : column === "right" ? rightColRef : null;
+      isResizing.current = true;
+      if (columnRef && columnRef.current) {
+        x.current = event.screenX;
+        dragRef.current = column;
+        if (columnRef.current) {
+          originalWidth.current = columnRef.current.offsetWidth;
+        }
       }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
     }
-  }
-);
-const Button = React__namespace.forwardRef(
-  ({ className: className2, variant, size: size2, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
+  };
+  const [header1, body1, header2, body2, header3, body3] = React$3.Children.toArray(children);
+  React$3.useEffect(() => {
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        className: cn(buttonVariants({ variant, size: size2, className: className2 })),
-        ref,
-        ...props
+        ref: leftColRef,
+        className: "relative border-r border-border",
+        style: { width: 300 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
+            header1,
+            /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body1 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-y-0 right-0 cursor-col-resize w-[1px] hover:w-[3px] h-full hover:bg-border",
+              onMouseDown: handleMouseDown("left")
+            }
+          )
+        ]
       }
-    );
-  }
-);
-Button.displayName = "Button";
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: classNames("", {
+          "w-full": !header3 && !body3
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
+          header2,
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body2 })
+        ] })
+      }
+    ),
+    header3 || body3 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rightColRef,
+        className: "relative h-screen border-l border-border",
+        style: { width: 300 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
+            header3,
+            /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body3 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onMouseDown: handleMouseDown("right"),
+              className: "absolute inset-y-0 left-0 cursor-col-resize w-[1px] bg-border hover:w-[3px] hover:bg-border"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+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 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "9",
+      height: "10",
+      viewBox: "0 0 9 10",
+      className: className2,
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      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)"
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+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]
+      });
+    }) })
+  ] });
+};
+const falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config) => {
+  return (props) => {
+    var ref;
+    if ((config === null || config === void 0 ? void 0 : config.variants) == null)
+      return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    const { variants, defaultVariants } = config;
+    const getVariantClassNames = Object.keys(variants).map((variant) => {
+      const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+      const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+      if (variantProp === null)
+        return null;
+      const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+      return variants[variant][variantKey];
+    });
+    const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+      let [key, value] = param;
+      if (value === void 0) {
+        return acc;
+      }
+      acc[key] = value;
+      return acc;
+    }, {});
+    const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
+      let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param1;
+      return Object.entries(compoundVariantOptions).every((param) => {
+        let [key, value] = param;
+        return Array.isArray(value) ? value.includes({
+          ...defaultVariants,
+          ...propsWithoutUndefined
+        }[key]) : {
+          ...defaultVariants,
+          ...propsWithoutUndefined
+        }[key] === value;
+      }) ? [
+        ...acc,
+        cvClass,
+        cvClassName
+      ] : acc;
+    }, []);
+    return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  };
+};
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = React__namespace.forwardRef(
+  ({ className: className2, variant, size: size2, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size: size2, className: className2 })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 const Input = React__namespace.forwardRef(
   ({ className: className2, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -71101,255 +71414,544 @@ const SelectSeparator = React__namespace.forwardRef(({ className: className2, ..
   }
 ));
 SelectSeparator.displayName = $cc7e05a45900e73f$export$1ff3c3f08ae963c0.displayName;
-function Grid({ children }) {
-  const leftColRef = React$3.useRef(null);
-  const rightColRef = React$3.useRef(null);
-  const isResizing = React$3.useRef(false);
-  const x = React$3.useRef(0);
-  const dragRef = React$3.useRef(null);
-  const originalWidth = React$3.useRef(0);
-  const handleMouseUp = () => {
-    isResizing.current = false;
-    dragRef.current = null;
-    x.current = 0;
-    originalWidth.current = 0;
-  };
-  const handleMouseMove = (event) => {
-    event.preventDefault();
-    const targetRef = dragRef.current === "left" ? leftColRef : rightColRef;
-    if (targetRef.current && isResizing.current) {
-      const dx = dragRef.current === "left" ? event.screenX - x.current : x.current - event.screenX;
-      targetRef.current.style.width = `${Math.max(
-        originalWidth.current + dx,
-        150
-      )}px`;
-    }
-  };
-  const handleMouseDown = (column) => (event) => {
-    const target = event.target;
-    if (target) {
-      const columnRef = column === "left" ? leftColRef : column === "right" ? rightColRef : null;
-      isResizing.current = true;
-      if (columnRef && columnRef.current) {
-        x.current = event.screenX;
-        dragRef.current = column;
-        if (columnRef.current) {
-          originalWidth.current = columnRef.current.offsetWidth;
-        }
+function ValFormField({
+  path,
+  disabled,
+  source,
+  schema,
+  registerPatchCallback,
+  onSubmit
+}) {
+  if ((typeof source === "string" || source === null) && (schema == null ? void 0 : schema.type) === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StringField,
+      {
+        defaultValue: source,
+        disabled,
+        registerPatchCallback,
+        onSubmit
       }
-    }
-  };
-  const [header1, body1, header2, body2, header3, body3] = React$3.Children.toArray(children);
-  React$3.useEffect(() => {
-    document.addEventListener("mouseup", handleMouseUp);
-    document.addEventListener("mousemove", handleMouseMove);
-    return () => {
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    );
+  }
+  if ((typeof source === "number" || source === null) && (schema == null ? void 0 : schema.type) === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NumberField,
       {
-        ref: leftColRef,
-        className: "relative border-r border-border",
-        style: { width: 300 },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
-            header1,
-            /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body1 })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute inset-y-0 right-0 cursor-col-resize w-[1px] hover:w-[3px] h-full hover:bg-border",
-              onMouseDown: handleMouseDown("left")
-            }
-          )
-        ]
+        defaultValue: source,
+        disabled,
+        registerPatchCallback,
+        onSubmit
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+    );
+  }
+  if ((typeof source === "number" || typeof source === "string" || source === null) && (schema == null ? void 0 : schema.type) === "keyOf") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      KeyOfField,
       {
-        className: classNames("", {
-          "w-full": !header3 && !body3
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
-          header2,
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body2 })
-        ] })
+        defaultValue: source,
+        disabled,
+        registerPatchCallback,
+        onSubmit,
+        selector: schema.selector
       }
-    ),
-    header3 || body3 && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    );
+  }
+  if ((typeof source === "number" || source === null) && (schema == null ? void 0 : schema.type) === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NumberField,
       {
-        ref: rightColRef,
-        className: "relative h-screen border-l border-border",
-        style: { width: 300 },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Grid.Column, { children: [
-            header3,
-            /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body3 })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              onMouseDown: handleMouseDown("right"),
-              className: "absolute inset-y-0 left-0 cursor-col-resize w-[1px] bg-border hover:w-[3px] hover:bg-border"
-            }
-          )
-        ]
+        defaultValue: source,
+        disabled,
+        registerPatchCallback,
+        onSubmit
       }
-    )
+    );
+  }
+  if ((typeof source === "number" || typeof source === "string" || source === null) && (schema == null ? void 0 : schema.type) === "keyOf") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      KeyOfField,
+      {
+        defaultValue: source,
+        disabled,
+        registerPatchCallback,
+        onSubmit,
+        selector: schema.selector
+      }
+    );
+  }
+  if ((typeof source === "object" || source === null) && (schema == null ? void 0 : schema.type) === "richtext") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RichTextField,
+      {
+        registerPatchCallback,
+        onSubmit,
+        defaultValue: source
+      }
+    );
+  }
+  if ((typeof source === "object" || source === null) && (schema == null ? void 0 : schema.type) === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ImageField,
+      {
+        path,
+        registerPatchCallback,
+        onSubmit,
+        defaultValue: source
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    "Unsupported schema: ",
+    schema.type
   ] });
 }
-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 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: "9",
-      height: "10",
-      viewBox: "0 0 9 10",
-      className: className2,
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      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)"
-          }
-        ) }) })
-      ]
+function createImagePatch(path, data, filename, metadata) {
+  if (!data || !metadata) {
+    return [];
+  }
+  const shaSuffix = metadata.sha256.slice(0, 5);
+  const newFilePath = function() {
+    const mimeType = getMimeType(data) ?? "unknown";
+    const newExt = mimeTypeToFileExt(mimeType);
+    if (filename) {
+      const filenameWithoutExt = filename.split(".").slice(0, -1).join(".") || filename;
+      return `/public/${filenameWithoutExt}_${shaSuffix}.${newExt}`;
     }
-  );
-};
-const Section$1 = Section;
-const TextIcon = ({ className: className2 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+    return `/public/${metadata.sha256}.${newExt}`;
+  }();
+  return [
     {
-      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" }) })
+      value: {
+        [FILE_REF_PROP]: newFilePath,
+        [VAL_EXTENSION]: "file",
+        metadata
+      },
+      op: "replace",
+      path
+    },
+    {
+      value: data,
+      op: "file",
+      path,
+      filePath: newFilePath
     }
-  );
-};
-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 = [],
+function ImageField({
   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",
+  defaultValue,
+  onSubmit,
+  registerPatchCallback
+}) {
+  const [data, setData] = React$3.useState(
+    null
+  );
+  const [loading, setLoading] = React$3.useState(false);
+  const [metadata, setMetadata] = React$3.useState();
+  const [url, setUrl] = React$3.useState();
+  React$3.useEffect(() => {
+    setUrl(defaultValue && Internal.convertFileSource(defaultValue).url);
+  }, [defaultValue]);
+  React$3.useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path2) => {
+        return createImagePatch(
+          path2,
+          (data == null ? void 0 : data.src) ?? null,
+          (data == null ? void 0 : data.filename) ?? null,
+          metadata
+        );
+      });
+    }
+  }, [data, defaultValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: `img_input:${path}`, className: "", children: [
+      data || url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: (data == null ? void 0 : data.src) || url }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Empty" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: `img_input:${path}`,
+          type: "file",
+          hidden: true,
+          onChange: (ev) => {
+            readImage(ev).then((res) => {
+              setData({ src: res.src, filename: res.filename });
+              if (res.width && res.height) {
+                setMetadata({
+                  sha256: res.sha256,
+                  width: res.width,
+                  height: res.height
+                });
+              } else {
+                setMetadata(void 0);
+              }
+            }).catch((err2) => {
+              console.error(err2.message);
+              setData(null);
+              setMetadata(void 0);
+            });
+          }
+        }
+      )
+    ] }),
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: data && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
       {
-        className: "flex justify-between w-full group py-2 text-xs font-[400] shrink-0",
+        disabled: loading,
         onClick: () => {
-          setActivePath && setActivePath(path);
+          setLoading(true);
+          onSubmit(
+            (path2) => Promise.resolve(
+              createImagePatch(
+                path2,
+                data.src,
+                data.filename ?? null,
+                metadata
+              )
+            )
+          ).finally(() => {
+            setLoading(false);
+            setData(null);
+            setMetadata(void 0);
+          });
         },
-        style: { paddingLeft },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          logo,
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: path })
-        ] })
+        children: loading ? "Saving..." : "Save"
       }
-    ),
-    children && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: React$3.Children.map(children, (child) => {
-      return React$3.cloneElement(child, {
-        level: level + 1,
-        paths: [...paths, path]
-      });
-    }) })
-  ] });
-};
-const Logo = ({ className: className2 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
+    ) })
+  ] }, path);
+}
+async function createRichTextPatch(path, editor) {
+  const { templateStrings, exprs, files } = editor ? await lexicalToRichTextSource(
+    editor.getEditorState().toJSON().root
+  ) : {
+    [VAL_EXTENSION]: "richtext",
+    templateStrings: [""],
+    exprs: [],
+    files: {}
+  };
+  return [
     {
-      width: "58",
-      height: "34",
-      viewBox: "0 0 58 34",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: className2,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("g", { filter: "url(#filter0_d_21_1677)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "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"
+      op: "replace",
+      path,
+      value: {
+        templateStrings,
+        exprs,
+        [VAL_EXTENSION]: "richtext"
+      }
+    },
+    ...Object.entries(files).map(([filePath, value]) => {
+      return {
+        op: "file",
+        path,
+        filePath,
+        value
+      };
+    })
+  ];
+}
+function RichTextField({
+  defaultValue,
+  onSubmit,
+  registerPatchCallback
+}) {
+  const [editor, setEditor] = React$3.useState(null);
+  const [didChange, setDidChange] = React$3.useState(false);
+  const [loading, setLoading] = React$3.useState(false);
+  React$3.useEffect(() => {
+    if (editor) {
+      setDidChange(false);
+      editor.registerTextContentListener(() => {
+        setDidChange(true);
+      });
+      editor.registerDecoratorListener(() => {
+        setDidChange(true);
+      });
+    }
+  }, [editor]);
+  React$3.useEffect(() => {
+    if (editor && registerPatchCallback) {
+      registerPatchCallback((path) => createRichTextPatch(path, editor));
+    }
+  }, [editor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded border-card", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RichTextEditor,
+      {
+        onEditor: (editor2) => {
+          setEditor(editor2);
+        },
+        richtext: defaultValue || {
+          children: [],
+          [VAL_EXTENSION]: "root"
+        }
+      }
+    ),
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: didChange && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        disabled: loading || !editor,
+        onClick: () => {
+          if (editor) {
+            setLoading(true);
+            onSubmit((path) => createRichTextPatch(path, editor)).finally(
+              () => {
+                setLoading(false);
+                setDidChange(false);
+              }
+            );
           }
-        ) }),
-        /* @__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" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
+        },
+        children: loading ? "Saving..." : "Save"
+      }
+    ) })
+  ] });
+}
+function KeyOfField({
+  disabled,
+  defaultValue,
+  registerPatchCallback,
+  onSubmit,
+  selector
+}) {
+  const valModule = useValModuleFromPath(selector);
+  const getValuesFromModule = (module2) => {
+    if (Array.isArray(module2.moduleSource)) {
+      return {
+        type: "number",
+        values: Object.keys(module2.moduleSource).map((key) => parseInt(key))
+      };
+    }
+    return {
+      type: "string",
+      values: Object.keys(module2.moduleSource ?? ["ERROR fetching source"])
+    };
+  };
+  const typeAndValues = getValuesFromModule(valModule);
+  const [value, setValue] = React$3.useState(defaultValue || typeAndValues.values[0]);
+  const [loading, setLoading] = React$3.useState(false);
+  React$3.useEffect(() => {
+    setLoading(disabled);
+  }, [disabled]);
+  const parse2 = (value2) => {
+    if (typeAndValues.type === "number") {
+      if (value2 === "") {
+        throw new Error("Value cannot be empty");
+      }
+      if (Number.isNaN(Number(value2))) {
+        throw new Error("Value was not a number: " + JSON.stringify(value2));
+      }
+      return Number(value2);
+    }
+    return value2;
+  };
+  React$3.useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path) => {
+        return [
           {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M52.8588 23.839H48.7257H48.537H48.1128C47.6715 23.839 47.4508 23.5942 47.4508 23.1044V13.7293C47.4508 13.5784 47.3285 13.4561 47.1777 13.4561H45.8118C45.6609 13.4561 45.5386 13.5784 45.5386 13.7293V15.1836C45.5386 15.2844 45.4569 15.3661 45.3561 15.3661C45.2876 15.3661 45.225 15.3275 45.1924 15.2672C44.805 14.5503 44.283 14.02 43.6264 13.6765C42.9563 13.301 42.2045 13.1132 41.3709 13.1132C40.6028 13.1132 39.8755 13.252 39.189 13.5295C38.5026 13.8071 37.8979 14.2152 37.3748 14.7539C36.8682 15.2764 36.4678 15.9212 36.1736 16.6885C35.8794 17.4558 35.7323 18.3374 35.7323 19.3332V19.725C35.7323 20.7372 35.8794 21.627 36.1736 22.3942C36.4678 23.1615 36.8682 23.8146 37.3748 24.3533C37.8979 24.8757 38.5026 25.2757 39.189 25.5532C39.8755 25.8144 40.6191 25.945 41.42 25.945C42.1881 25.945 42.9154 25.7491 43.6019 25.3573C44.2751 24.982 44.8058 24.4119 45.1941 23.6471C45.2255 23.5852 45.2886 23.5452 45.358 23.5452H45.3917C45.4728 23.5452 45.5386 23.611 45.5386 23.6921C45.5386 23.7904 45.544 23.8856 45.5547 23.9777V25.1392C45.5547 25.3904 45.7584 25.5941 46.0096 25.5941H47.2261C47.2914 25.5995 47.3581 25.6022 47.4263 25.6022H48.537H48.7257H57.7268C57.8777 25.6022 58 25.4799 58 25.329V24.1122C58 23.9614 57.8777 23.839 57.7268 23.839H55.3174C55.1665 23.839 55.0442 23.7167 55.0442 23.5659V8.73368C55.0442 8.58279 54.9219 8.46048 54.771 8.46048H50.5054C50.3545 8.46048 50.2322 8.58279 50.2322 8.73368V9.95043C50.2322 10.1013 50.3545 10.2236 50.5054 10.2236H52.8588C53.0097 10.2236 53.132 10.3459 53.132 10.4968V23.5659C53.132 23.7167 53.0097 23.839 52.8588 23.839ZM41.6161 24.1329C42.1881 24.1329 42.7111 24.0268 43.1851 23.8146C43.6754 23.6023 44.0922 23.3003 44.4354 22.9085C44.7786 22.5167 45.0483 22.0514 45.2444 21.5127C45.4406 20.9576 45.5386 20.3454 45.5386 19.6761V19.3822C45.5386 18.7292 45.4406 18.1333 45.2444 17.5946C45.0483 17.0395 44.7705 16.5661 44.4109 16.1743C44.0677 15.7824 43.6509 15.4804 43.1606 15.2682C42.6866 15.0396 42.1718 14.9254 41.6161 14.9254C41.044 14.9254 40.521 15.0315 40.0471 15.2437C39.5731 15.4559 39.1563 15.758 38.7968 16.1498C38.4535 16.5252 38.1839 16.9905 37.9877 17.5456C37.7916 18.0843 37.6936 18.6802 37.6936 19.3332V19.725C37.6936 21.1127 38.0531 22.1983 38.7722 22.982C39.5077 23.7493 40.4557 24.1329 41.6161 24.1329ZM31.1115 25.4191C31.0732 25.5287 30.9698 25.6022 30.8536 25.6022H27.4661C27.35 25.6022 27.2465 25.5287 27.2082 25.4191L23.1578 13.8193C23.0958 13.6417 23.2276 13.4561 23.4157 13.4561H25.089C25.2068 13.4561 25.3114 13.5316 25.3484 13.6435L28.9666 24.581C28.9942 24.6643 29.0721 24.7206 29.1599 24.7206C29.2477 24.7206 29.3256 24.6643 29.3532 24.581L32.9714 13.6435C33.0084 13.5316 33.1129 13.4561 33.2308 13.4561H34.9041C35.0922 13.4561 35.224 13.6417 35.162 13.8193L31.1115 25.4191Z",
-            fill: "currentColor"
+            op: "replace",
+            path,
+            value
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "filter",
-            {
-              id: "filter0_d_21_1677",
-              x: "0.124722",
-              y: "0.124722",
-              width: "22.7729",
-              height: "33.6097",
-              filterUnits: "userSpaceOnUse",
+        ];
+      });
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full gap-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        defaultValue: value.toString(),
+        disabled: loading,
+        onValueChange: (value2) => {
+          setValue(parse2(value2));
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a value" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: typeAndValues.values.map((value2) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: value2.toString(), children: value2.toString() }, value2)) })
+        ]
+      }
+    ),
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        disabled: loading,
+        onClick: () => {
+          setLoading(true);
+          onSubmit(async (path) => [
+            {
+              op: "replace",
+              path,
+              value
+            }
+          ]).finally(() => {
+            setLoading(false);
+          });
+        },
+        children: loading ? "Saving..." : "Save"
+      }
+    ) })
+  ] });
+}
+function NumberField({
+  disabled,
+  defaultValue,
+  registerPatchCallback,
+  onSubmit
+}) {
+  const [value, setValue] = React$3.useState(defaultValue || 0);
+  const [loading, setLoading] = React$3.useState(false);
+  React$3.useEffect(() => {
+    setLoading(disabled);
+  }, [disabled]);
+  const ref = React$3.useRef(null);
+  React$3.useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path) => {
+        var _a;
+        return [
+          {
+            op: "replace",
+            path,
+            value: Number((_a = ref.current) == null ? void 0 : _a.value) || 0
+          }
+        ];
+      });
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full gap-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        ref,
+        disabled: loading,
+        defaultValue: value ?? 0,
+        onChange: (e) => setValue(Number(e.target.value)),
+        type: "number"
+      }
+    ),
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        disabled: loading,
+        onClick: () => {
+          setLoading(true);
+          onSubmit(async (path) => {
+            var _a;
+            return [
+              {
+                op: "replace",
+                path,
+                value: Number((_a = ref.current) == null ? void 0 : _a.value) || 0
+              }
+            ];
+          }).finally(() => {
+            setLoading(false);
+          });
+        },
+        children: loading ? "Saving..." : "Save"
+      }
+    ) })
+  ] });
+}
+function StringField({
+  disabled,
+  defaultValue,
+  registerPatchCallback,
+  onSubmit
+}) {
+  const [value, setValue] = React$3.useState(defaultValue || "");
+  const [loading, setLoading] = React$3.useState(false);
+  React$3.useEffect(() => {
+    setLoading(disabled);
+  }, [disabled]);
+  const ref = React$3.useRef(null);
+  React$3.useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path) => {
+        var _a;
+        return [
+          {
+            op: "replace",
+            path,
+            value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
+          }
+        ];
+      });
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full gap-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        ref,
+        disabled: loading,
+        defaultValue: value ?? "",
+        onChange: (e) => setValue(e.target.value)
+      }
+    ),
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        disabled: loading,
+        onClick: () => {
+          setLoading(true);
+          onSubmit(async (path) => {
+            var _a;
+            return [
+              {
+                op: "replace",
+                path,
+                value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
+              }
+            ];
+          }).finally(() => {
+            setLoading(false);
+          });
+        },
+        children: loading ? "Saving..." : "Save"
+      }
+    ) })
+  ] });
+}
+const Logo = ({ className: className2 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "58",
+      height: "34",
+      viewBox: "0 0 58 34",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: className2,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("g", { filter: "url(#filter0_d_21_1677)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "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"
+          }
+        ) }),
+        /* @__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" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M52.8588 23.839H48.7257H48.537H48.1128C47.6715 23.839 47.4508 23.5942 47.4508 23.1044V13.7293C47.4508 13.5784 47.3285 13.4561 47.1777 13.4561H45.8118C45.6609 13.4561 45.5386 13.5784 45.5386 13.7293V15.1836C45.5386 15.2844 45.4569 15.3661 45.3561 15.3661C45.2876 15.3661 45.225 15.3275 45.1924 15.2672C44.805 14.5503 44.283 14.02 43.6264 13.6765C42.9563 13.301 42.2045 13.1132 41.3709 13.1132C40.6028 13.1132 39.8755 13.252 39.189 13.5295C38.5026 13.8071 37.8979 14.2152 37.3748 14.7539C36.8682 15.2764 36.4678 15.9212 36.1736 16.6885C35.8794 17.4558 35.7323 18.3374 35.7323 19.3332V19.725C35.7323 20.7372 35.8794 21.627 36.1736 22.3942C36.4678 23.1615 36.8682 23.8146 37.3748 24.3533C37.8979 24.8757 38.5026 25.2757 39.189 25.5532C39.8755 25.8144 40.6191 25.945 41.42 25.945C42.1881 25.945 42.9154 25.7491 43.6019 25.3573C44.2751 24.982 44.8058 24.4119 45.1941 23.6471C45.2255 23.5852 45.2886 23.5452 45.358 23.5452H45.3917C45.4728 23.5452 45.5386 23.611 45.5386 23.6921C45.5386 23.7904 45.544 23.8856 45.5547 23.9777V25.1392C45.5547 25.3904 45.7584 25.5941 46.0096 25.5941H47.2261C47.2914 25.5995 47.3581 25.6022 47.4263 25.6022H48.537H48.7257H57.7268C57.8777 25.6022 58 25.4799 58 25.329V24.1122C58 23.9614 57.8777 23.839 57.7268 23.839H55.3174C55.1665 23.839 55.0442 23.7167 55.0442 23.5659V8.73368C55.0442 8.58279 54.9219 8.46048 54.771 8.46048H50.5054C50.3545 8.46048 50.2322 8.58279 50.2322 8.73368V9.95043C50.2322 10.1013 50.3545 10.2236 50.5054 10.2236H52.8588C53.0097 10.2236 53.132 10.3459 53.132 10.4968V23.5659C53.132 23.7167 53.0097 23.839 52.8588 23.839ZM41.6161 24.1329C42.1881 24.1329 42.7111 24.0268 43.1851 23.8146C43.6754 23.6023 44.0922 23.3003 44.4354 22.9085C44.7786 22.5167 45.0483 22.0514 45.2444 21.5127C45.4406 20.9576 45.5386 20.3454 45.5386 19.6761V19.3822C45.5386 18.7292 45.4406 18.1333 45.2444 17.5946C45.0483 17.0395 44.7705 16.5661 44.4109 16.1743C44.0677 15.7824 43.6509 15.4804 43.1606 15.2682C42.6866 15.0396 42.1718 14.9254 41.6161 14.9254C41.044 14.9254 40.521 15.0315 40.0471 15.2437C39.5731 15.4559 39.1563 15.758 38.7968 16.1498C38.4535 16.5252 38.1839 16.9905 37.9877 17.5456C37.7916 18.0843 37.6936 18.6802 37.6936 19.3332V19.725C37.6936 21.1127 38.0531 22.1983 38.7722 22.982C39.5077 23.7493 40.4557 24.1329 41.6161 24.1329ZM31.1115 25.4191C31.0732 25.5287 30.9698 25.6022 30.8536 25.6022H27.4661C27.35 25.6022 27.2465 25.5287 27.2082 25.4191L23.1578 13.8193C23.0958 13.6417 23.2276 13.4561 23.4157 13.4561H25.089C25.2068 13.4561 25.3114 13.5316 25.3484 13.6435L28.9666 24.581C28.9942 24.6643 29.0721 24.7206 29.1599 24.7206C29.2477 24.7206 29.3256 24.6643 29.3532 24.581L32.9714 13.6435C33.0084 13.5316 33.1129 13.4561 33.2308 13.4561H34.9041C35.0922 13.4561 35.224 13.6417 35.162 13.8193L31.1115 25.4191Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "filter",
+            {
+              id: "filter0_d_21_1677",
+              x: "0.124722",
+              y: "0.124722",
+              width: "22.7729",
+              height: "33.6097",
+              filterUnits: "userSpaceOnUse",
               colorInterpolationFilters: "sRGB",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
@@ -71993,36 +72595,6 @@ function useNavigateStable() {
 }
 new Promise(() => {
 });
-function useTheme(defaultTheme = "dark") {
-  const [theme2, setTheme] = React$3.useState(defaultTheme);
-  React$3.useEffect(() => {
-    if (localStorage.getItem("val-theme") === "light") {
-      setTheme("light");
-    } else if (localStorage.getItem("val-theme") === "dark") {
-      setTheme("dark");
-    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      setTheme("dark");
-    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
-      setTheme("light");
-    }
-    const themeListener = (e) => {
-      if (!localStorage.getItem("val-theme")) {
-        setTheme(e.matches ? "dark" : "light");
-      }
-    };
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeListener);
-    return () => {
-      window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeListener);
-    };
-  }, []);
-  return [
-    theme2,
-    (theme22) => {
-      localStorage.setItem("val-theme", theme22);
-      setTheme(theme22);
-    }
-  ];
-}
 const ValModulesContext = React$3.createContext(null);
 const useValModuleFromPath = (sourcePath) => {
   var _a, _b;
@@ -72212,1356 +72784,766 @@ Showing stack trace of: 0. ${fatalErrors[0].message}`;
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
                     error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-lg text-destructive-foreground", children: [
-                      "ERROR: ",
-                      error
-                    ] }),
-                    modules && selectedPath && selectedModuleId && moduleSource !== void 0 && moduleSchema !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(ValModulesContext.Provider, { value: modules, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      ValModule,
-                      {
-                        path: selectedPath,
-                        source: moduleSource,
-                        schema: moduleSchema,
-                        setSelectedPath,
-                        initOnSubmit
-                      }
-                    ) })
-                  ] })
-                ] }) })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-const ValFullscreenHoverContext = React$3.createContext({
-  hoverElem: null
-});
-const useValFullscreenHover = () => {
-  return React$3.useContext(ValFullscreenHoverContext);
-};
-function ValModule({
-  path,
-  source: moduleSource,
-  schema: moduleSchema,
-  setSelectedPath,
-  initOnSubmit
-}) {
-  const [, modulePath] = Internal.splitModuleIdAndModulePath(
-    path
-  );
-  const resolvedPath = Internal.resolvePath(
-    modulePath,
-    moduleSource,
-    moduleSchema
-  );
-  if (!resolvedPath) {
-    throw Error("Could not resolve module: " + path);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AnyVal,
-    {
-      path,
-      source: resolvedPath.source,
-      schema: resolvedPath.schema,
-      setSelectedPath,
-      initOnSubmit,
-      top: true
-    }
-  );
-}
-function AnyVal({
-  path,
-  source,
-  schema,
-  setSelectedPath,
-  field,
-  initOnSubmit,
-  top
-}) {
-  if (source === null || schema.opt) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ValOptional,
-      {
-        path,
-        source,
-        schema,
-        field,
-        initOnSubmit,
-        setSelectedPath
-      }
-    );
-  }
-  if (schema.type === "object") {
-    if (typeof source !== "object" || isJsonArray(source)) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "ERROR: expected object, but found ",
-        typeof source
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ValObject,
-      {
-        source,
-        path,
-        schema,
-        initOnSubmit,
-        setSelectedPath,
-        top
-      }
-    );
-  } else if (schema.type === "array") {
-    if (typeof source !== "object" || !isJsonArray(source)) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "ERROR: expected array, but found ",
-        typeof source
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ValList,
-      {
-        source,
-        path,
-        schema,
-        setSelectedPath
-      }
-    );
-  } else if (schema.type === "record") {
-    if (typeof source !== "object") {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "ERROR: expected object for ",
-        schema.type,
-        ", but found ",
-        typeof source
-      ] });
-    }
-    if (isJsonArray(source)) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "ERROR: did not expect array for ",
-        schema.type
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ValRecord,
-      {
-        source,
-        path,
-        schema,
-        setSelectedPath
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 gap-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: field || path }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ValFormField,
-      {
-        path,
-        disabled: false,
-        source,
-        schema,
-        onSubmit: initOnSubmit(path)
-      }
-    )
-  ] });
-}
-function ValObject({
-  path,
-  source,
-  schema,
-  setSelectedPath,
-  initOnSubmit,
-  top
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classNames("flex flex-col gap-y-8", {
-        "border-l-2 border-border pl-6": !top
-      }),
-      children: Object.entries(schema.items).map(([key, property]) => {
-        const subPath = createValPathOfItem(path, key);
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          AnyVal,
-          {
-            path: subPath,
-            source: source[key],
-            schema: property,
-            setSelectedPath,
-            field: key,
-            initOnSubmit
-          },
-          subPath
-        );
-      })
-    },
-    path
-  );
-}
-function ValRecord({
-  path,
-  source,
-  schema,
-  setSelectedPath
-}) {
-  const navigate = useNavigate();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: Object.entries(source).map(([key, item]) => {
-    const subPath = createValPathOfItem(path, key);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => {
-          setSelectedPath(subPath);
-          navigate(subPath);
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ValRecordItem,
-          {
-            recordKey: key,
-            path: subPath,
-            source: item,
-            schema: schema.item
-          }
-        )
-      },
-      subPath
-    );
-  }) }, path);
-}
-const RECORD_ITEM_MAX_HEIGHT = 170;
-function ValRecordItem({
-  recordKey,
-  path,
-  source,
-  schema
-}) {
-  const ref = React$3.useRef(null);
-  const [isTruncated, setIsTruncated] = React$3.useState(false);
-  React$3.useEffect(() => {
-    if (ref.current) {
-      const height2 = ref.current.getBoundingClientRect().height;
-      if (height2 >= RECORD_ITEM_MAX_HEIGHT) {
-        setIsTruncated(true);
-      }
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Card,
-    {
-      ref,
-      className: "relative px-4 pt-2 pb-4 overflow-hidden border gap-y-2",
-      style: {
-        maxHeight: RECORD_ITEM_MAX_HEIGHT
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-4 font-serif text-left text-accent", children: recordKey }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ValPreview, { path, source, schema }) }),
-        isTruncated && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 w-full h-[20px] bg-gradient-to-b from-transparent to-background" })
-      ]
-    },
-    path
-  );
-}
-function ValList({
-  path,
-  source,
-  schema,
-  setSelectedPath
-}) {
-  const navigate = useNavigate();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: source.map((item, index2) => {
-    const subPath = createValPathOfItem(path, index2);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => {
-          setSelectedPath(subPath);
-          navigate(subPath);
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ValListItem,
-          {
-            index: index2,
-            path: subPath,
-            source: item,
-            schema: schema.item
-          },
-          subPath
-        )
-      },
-      subPath
-    );
-  }) }, path);
-}
-const LIST_ITEM_MAX_HEIGHT = RECORD_ITEM_MAX_HEIGHT;
-function ValListItem({
-  index: index2,
-  path,
-  source,
-  schema
-}) {
-  const ref = React$3.useRef(null);
-  const [isTruncated, setIsTruncated] = React$3.useState(false);
-  React$3.useEffect(() => {
-    if (ref.current) {
-      const height2 = ref.current.getBoundingClientRect().height;
-      if (height2 >= LIST_ITEM_MAX_HEIGHT) {
-        setIsTruncated(true);
-      }
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Card,
-    {
-      ref,
-      className: "relative px-4 pt-2 pb-4 overflow-hidden border gap-y-2",
-      style: {
-        maxHeight: LIST_ITEM_MAX_HEIGHT
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-4 font-serif text-left uppercase text-accent", children: index2 + 1 < 10 ? `0${index2 + 1}` : index2 + 1 }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ValPreview, { path, source, schema }) }),
-        isTruncated && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 w-full h-[20px] bg-gradient-to-b from-transparent to-background" })
-      ]
-    }
-  );
-}
-function createValPathOfItem(arrayPath, prop) {
-  const val = Internal.createValPathOfItem(arrayPath, prop);
-  if (!val) {
-    throw Error(
-      `Could not create val path: ${arrayPath} of ${prop == null ? void 0 : prop.toString()}`
-    );
-  }
-  return val;
-}
-function ValPreview({
-  path,
-  source,
-  schema
-}) {
-  const [isMouseOver, setIsMouseOver] = React$3.useState(null);
-  const { hoverElem } = useValFullscreenHover();
-  if (schema.type === "object") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "grid grid-cols-[min-content_1fr] gap-2 text-left",
-        children: Object.entries(schema.items).map(([key]) => {
-          return /* @__PURE__ */ jsxRuntime.jsxs(React$3.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted", children: [
-              key,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              ValPreview,
-              {
-                source: (source == null ? void 0 : source[key]) ?? null,
-                schema: schema.items[key],
-                path: createValPathOfItem(path, key)
-              }
-            ) })
-          ] }, createValPathOfItem(path, key));
-        })
-      },
-      path
-    );
-  } else if (schema.type === "array") {
-    if (source === null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
-    }
-    if (Array.isArray(source)) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source.length }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: source.length === 1 ? " item" : " items" })
-      ] }, path);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "px-2 bg-destructive text-destructive-foreground",
-        children: "Unknown length"
-      },
-      path
-    );
-  } else if (schema.type === "richtext") {
-    if (source === null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
-    }
-    if (typeof source !== "object") {
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "p-4 text-destructive-foreground bg-destructive",
-          children: [
-            "ERROR: ",
-            typeof source,
-            " not an object"
-          ]
-        },
-        path
-      );
-    }
-    if (!(VAL_EXTENSION in source) || source[VAL_EXTENSION] !== "richtext") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "p-4 text-destructive-foreground bg-destructive",
-          children: "ERROR: object is not richtext"
-        },
-        path
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(ValRichText, { children: parseRichTextSource(source) }, path);
-  } else if (schema.type === "string") {
-    if (source === null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: source });
-  } else if (schema.type === "image") {
-    if (source === null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
-    }
-    if (typeof source !== "object") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "p-4 text-destructive-foreground bg-destructive",
-          children: "ERROR: not an object"
-        },
-        path
-      );
-    }
-    if (!(FILE_REF_PROP in source) || typeof source[FILE_REF_PROP] !== "string") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "p-4 text-destructive-foreground bg-destructive",
-          children: "ERROR: object is not an image"
-        },
-        path
-      );
-    }
-    const url = Internal.convertFileSource(
-      source
-    ).url;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        onMouseOver: (ev) => {
-          setIsMouseOver({
-            x: ev.clientX,
-            y: ev.clientY
-          });
-        },
-        onMouseLeave: () => {
-          setIsMouseOver(null);
-        },
-        className: "relative flex items-center justify-start gap-1",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: url, className: "overflow-hidden underline truncate ", children: source[FILE_REF_PROP] }),
-          isMouseOver && hoverElem && reactDomExports.createPortal(
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                className: "absolute z-[5] max-w-[10vw]",
-                style: {
-                  left: isMouseOver.x + 10,
-                  top: isMouseOver.y + 10
-                },
-                src: url
-              }
-            ),
-            hoverElem
-          )
-        ]
-      },
-      path
-    );
-  } else if (schema.type === "boolean") {
-    if (source === null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source ? "true" : "false" }, path);
-  } else if (schema.type === "number") {
-    if (source === null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source.toString() });
-  } else if (schema.type === "keyOf") {
-    if (source === null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source.toString() }, path);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    "TODO: ",
-    schema.type
-  ] }, path);
-}
-function ValOptional({
-  path,
-  source,
-  schema,
-  setSelectedPath,
-  initOnSubmit,
-  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(
-        Switch,
-        {
-          checked: enable,
-          onClick: () => {
-            setEnable((prev) => !prev);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: field })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-      Switch,
-      {
-        checked: enable,
-        onClick: () => {
-          setEnable((prev) => !prev);
-        }
-      }
-    ),
-    enable && /* @__PURE__ */ jsxRuntime.jsx(
-      ValDefaultOf,
-      {
-        source,
-        schema,
-        path,
-        setSelectedPath,
-        initOnSubmit
-      }
-    )
-  ] }, path);
-}
-function ValDefaultOf({
-  source,
-  path,
-  schema,
-  setSelectedPath,
-  initOnSubmit
-}) {
-  if (schema.type === "array") {
-    if (typeof source === "object" && (source === null || isJsonArray(source))) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ValList,
-        {
-          source: source === null ? [] : source,
-          path,
-          schema,
-          setSelectedPath
-        }
-      );
-    }
-  } else if (schema.type === "object") {
-    if (typeof source === "object" && (source === null || !isJsonArray(source))) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ValObject,
-        {
-          source,
-          path,
-          schema,
-          setSelectedPath,
-          initOnSubmit
-        }
-      );
-    }
-  } else if (schema.type === "richtext" || schema.type === "string" || schema.type === "image" || schema.type === "number" || schema.type === "keyOf") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ValFormField,
-      {
-        path,
-        disabled: false,
-        source,
-        schema,
-        onSubmit: initOnSubmit(path)
-      },
-      path
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-destructive text-destructive-foreground", children: [
-    "ERROR: unexpected source type ",
-    typeof source,
-    " for schema type",
-    " ",
-    schema.type
-  ] });
-}
-function isJsonArray(source) {
-  return Array.isArray(source);
-}
-function pathsToTree(paths) {
-  const tree = {};
-  paths.forEach((path) => {
-    const parts = path.split("/").filter((part) => part !== "");
-    let current = tree;
-    parts.forEach((part) => {
-      if (!current[part]) {
-        current[part] = {};
-      }
-      current = current[part];
-    });
-  });
-  return tree;
-}
-function PathTree({
-  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 theme = {
-  tags: {
-    h1: "font-bold",
-    h2: "font-bold",
-    h3: "font-bold",
-    h4: "font-bold",
-    h5: "font-bold",
-    h6: "font-bold",
-    p: ""
-  },
-  classes: {
-    bold: "font-bold",
-    italic: "italic",
-    lineThrough: "line-through"
-  }
-};
-function ValRichText({
-  children
-}) {
-  const root = children;
-  function withRenderTag(clazz, current) {
-    const renderClass = theme.tags[clazz];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-  function withRenderClass(clazz, current) {
-    const renderClass = theme.classes[clazz];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-  function toReact(node, key) {
-    var _a, _b;
-    if (typeof node === "string") {
-      return node;
-    }
-    if (node.tag === "p") {
-      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: withRenderTag("p"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "img") {
-      return /* @__PURE__ */ jsxRuntime.jsx("img", { className: withRenderTag("img"), src: node.src }, key);
-    }
-    if (node.tag === "ul") {
-      return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: withRenderTag("ul"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "ol") {
-      return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: withRenderTag("ol"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "li") {
-      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: withRenderTag("li"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "span") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: node.classes.map((nodeClass) => {
-            switch (nodeClass) {
-              case "bold":
-                return withRenderClass("bold");
-              case "line-through":
-                return withRenderClass("lineThrough");
-              case "italic":
-                return withRenderClass("italic");
-            }
-          }).join(" "),
-          children: node.children.map((child, key2) => toReact(child, key2))
-        },
-        key
-      );
-    }
-    if (node.tag === "h1") {
-      return /* @__PURE__ */ jsxRuntime.jsx("h1", { className: withRenderTag("h1"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "h2") {
-      return /* @__PURE__ */ jsxRuntime.jsx("h2", { className: withRenderTag("h2"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "h3") {
-      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: withRenderTag("h3"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "h4") {
-      return /* @__PURE__ */ jsxRuntime.jsx("h4", { className: withRenderTag("h4"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "h5") {
-      return /* @__PURE__ */ jsxRuntime.jsx("h5", { className: withRenderTag("h5"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "h6") {
-      return /* @__PURE__ */ jsxRuntime.jsx("h6", { className: withRenderTag("h6"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    if (node.tag === "br") {
-      return /* @__PURE__ */ jsxRuntime.jsx("br", {}, key);
-    }
-    if (node.tag === "a") {
-      return /* @__PURE__ */ jsxRuntime.jsx("a", { href: node.href, children: node.children.map((child, key2) => toReact(child, key2)) }, key);
-    }
-    console.error("Unknown tag", node.tag);
-    const _exhaustiveCheck = node.tag;
-    const anyNode = _exhaustiveCheck;
-    if (!(anyNode == null ? void 0 : anyNode.tag)) {
-      return null;
+                      "ERROR: ",
+                      error
+                    ] }),
+                    modules && selectedPath && selectedModuleId && moduleSource !== void 0 && moduleSchema !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(ValModulesContext.Provider, { value: modules, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ValModule,
+                      {
+                        path: selectedPath,
+                        source: moduleSource,
+                        schema: moduleSchema,
+                        setSelectedPath,
+                        initOnSubmit
+                      }
+                    ) })
+                  ] })
+                ] }) })
+              }
+            )
+          ]
+        }
+      )
     }
-    return React$3.createElement(anyNode.tag, {
-      key,
-      className: (_a = anyNode.class) == null ? void 0 : _a.join(" "),
-      children: (_b = anyNode.children) == null ? void 0 : _b.map(toReact)
-    });
+  );
+};
+const ValFullscreenHoverContext = React$3.createContext({
+  hoverElem: null
+});
+const useValFullscreenHover = () => {
+  return React$3.useContext(ValFullscreenHoverContext);
+};
+function ValModule({
+  path,
+  source: moduleSource,
+  schema: moduleSchema,
+  setSelectedPath,
+  initOnSubmit
+}) {
+  const [, modulePath] = Internal.splitModuleIdAndModulePath(
+    path
+  );
+  const resolvedPath = Internal.resolvePath(
+    modulePath,
+    moduleSource,
+    moduleSchema
+  );
+  if (!resolvedPath) {
+    throw Error("Could not resolve module: " + path);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-val-path": root.valPath, children: root.children.map((child, i) => {
-    return toReact(child, i);
-  }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AnyVal,
+    {
+      path,
+      source: resolvedPath.source,
+      schema: resolvedPath.schema,
+      setSelectedPath,
+      initOnSubmit,
+      top: true
+    }
+  );
 }
-function ValFormField({
+function AnyVal({
   path,
-  disabled,
   source,
   schema,
-  registerPatchCallback,
-  onSubmit
+  setSelectedPath,
+  field,
+  initOnSubmit,
+  top
 }) {
-  if ((typeof source === "string" || source === null) && (schema == null ? void 0 : schema.type) === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StringField,
-      {
-        defaultValue: source,
-        disabled,
-        registerPatchCallback,
-        onSubmit
-      }
-    );
-  }
-  if ((typeof source === "number" || source === null) && (schema == null ? void 0 : schema.type) === "number") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      NumberField,
-      {
-        defaultValue: source,
-        disabled,
-        registerPatchCallback,
-        onSubmit
-      }
-    );
-  }
-  if ((typeof source === "number" || typeof source === "string" || source === null) && (schema == null ? void 0 : schema.type) === "keyOf") {
+  if (source === null || schema.opt) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      KeyOfField,
+      ValOptional,
       {
-        defaultValue: source,
-        disabled,
-        registerPatchCallback,
-        onSubmit,
-        selector: schema.selector
+        path,
+        source,
+        schema,
+        field,
+        initOnSubmit,
+        setSelectedPath
       }
     );
   }
-  if ((typeof source === "number" || source === null) && (schema == null ? void 0 : schema.type) === "number") {
+  if (schema.type === "object") {
+    if (typeof source !== "object" || isJsonArray(source)) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "ERROR: expected object, but found ",
+        typeof source
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      NumberField,
+      ValObject,
       {
-        defaultValue: source,
-        disabled,
-        registerPatchCallback,
-        onSubmit
+        source,
+        path,
+        schema,
+        initOnSubmit,
+        setSelectedPath,
+        top
       }
     );
-  }
-  if ((typeof source === "number" || typeof source === "string" || source === null) && (schema == null ? void 0 : schema.type) === "keyOf") {
+  } else if (schema.type === "array") {
+    if (typeof source !== "object" || !isJsonArray(source)) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "ERROR: expected array, but found ",
+        typeof source
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      KeyOfField,
+      ValList,
       {
-        defaultValue: source,
-        disabled,
-        registerPatchCallback,
-        onSubmit,
-        selector: schema.selector
+        source,
+        path,
+        schema,
+        setSelectedPath
       }
     );
-  }
-  if ((typeof source === "object" || source === null) && (schema == null ? void 0 : schema.type) === "richtext") {
+  } else if (schema.type === "record") {
+    if (typeof source !== "object") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "ERROR: expected object for ",
+        schema.type,
+        ", but found ",
+        typeof source
+      ] });
+    }
+    if (isJsonArray(source)) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "ERROR: did not expect array for ",
+        schema.type
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      RichTextField,
+      ValRecord,
       {
-        registerPatchCallback,
-        onSubmit,
-        defaultValue: source
+        source,
+        path,
+        schema,
+        setSelectedPath
       }
     );
   }
-  if ((typeof source === "object" || source === null) && (schema == null ? void 0 : schema.type) === "image") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ImageField,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 gap-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: field || path }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ValFormField,
       {
         path,
-        registerPatchCallback,
-        onSubmit,
-        defaultValue: source
+        disabled: false,
+        source,
+        schema,
+        onSubmit: initOnSubmit(path)
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    "Unsupported schema: ",
-    schema.type
+    )
   ] });
 }
-function createImagePatch(path, data, filename, metadata) {
-  if (!data || !metadata) {
-    return [];
-  }
-  const shaSuffix = metadata.sha256.slice(0, 5);
-  const newFilePath = function() {
-    const mimeType = getMimeType(data) ?? "unknown";
-    const newExt = mimeTypeToFileExt(mimeType);
-    if (filename) {
-      const filenameWithoutExt = filename.split(".").slice(0, -1).join(".") || filename;
-      return `/public/${filenameWithoutExt}_${shaSuffix}.${newExt}`;
+function ValObject({
+  path,
+  source,
+  schema,
+  setSelectedPath,
+  initOnSubmit,
+  top
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames("flex flex-col gap-y-8", {
+        "border-l-2 border-border pl-6": !top
+      }),
+      children: Object.entries(schema.items).map(([key, property]) => {
+        const subPath = createValPathOfItem(path, key);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          AnyVal,
+          {
+            path: subPath,
+            source: source[key],
+            schema: property,
+            setSelectedPath,
+            field: key,
+            initOnSubmit
+          },
+          subPath
+        );
+      })
+    },
+    path
+  );
+}
+function ValRecord({
+  path,
+  source,
+  schema,
+  setSelectedPath
+}) {
+  const navigate = useNavigate();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: Object.entries(source).map(([key, item]) => {
+    const subPath = createValPathOfItem(path, key);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          setSelectedPath(subPath);
+          navigate(subPath);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ValRecordItem,
+          {
+            recordKey: key,
+            path: subPath,
+            source: item,
+            schema: schema.item
+          }
+        )
+      },
+      subPath
+    );
+  }) }, path);
+}
+const RECORD_ITEM_MAX_HEIGHT = 170;
+function ValRecordItem({
+  recordKey,
+  path,
+  source,
+  schema
+}) {
+  const ref = React$3.useRef(null);
+  const [isTruncated, setIsTruncated] = React$3.useState(false);
+  React$3.useEffect(() => {
+    if (ref.current) {
+      const height2 = ref.current.getBoundingClientRect().height;
+      if (height2 >= RECORD_ITEM_MAX_HEIGHT) {
+        setIsTruncated(true);
+      }
     }
-    return `/public/${metadata.sha256}.${newExt}`;
-  }();
-  return [
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
     {
-      value: {
-        [FILE_REF_PROP]: newFilePath,
-        [VAL_EXTENSION]: "file",
-        metadata
+      ref,
+      className: "relative px-4 pt-2 pb-4 overflow-hidden border gap-y-2",
+      style: {
+        maxHeight: RECORD_ITEM_MAX_HEIGHT
       },
-      op: "replace",
-      path
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-4 font-serif text-left text-accent", children: recordKey }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ValPreview, { path, source, schema }) }),
+        isTruncated && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 w-full h-[20px] bg-gradient-to-b from-transparent to-background" })
+      ]
     },
-    {
-      value: data,
-      op: "file",
-      path,
-      filePath: newFilePath
-    }
-  ];
+    path
+  );
 }
-function ImageField({
+function ValList({
   path,
-  defaultValue,
-  onSubmit,
-  registerPatchCallback
+  source,
+  schema,
+  setSelectedPath
 }) {
-  const [data, setData] = React$3.useState(
-    null
-  );
-  const [loading, setLoading] = React$3.useState(false);
-  const [metadata, setMetadata] = React$3.useState();
-  const [url, setUrl] = React$3.useState();
-  React$3.useEffect(() => {
-    setUrl(defaultValue && Internal.convertFileSource(defaultValue).url);
-  }, [defaultValue]);
-  React$3.useEffect(() => {
-    if (registerPatchCallback) {
-      registerPatchCallback(async (path2) => {
-        return createImagePatch(
-          path2,
-          (data == null ? void 0 : data.src) ?? null,
-          (data == null ? void 0 : data.filename) ?? null,
-          metadata
-        );
-      });
-    }
-  }, [data, defaultValue]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl p-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: `img_input:${path}`, className: "", children: [
-      data || url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: (data == null ? void 0 : data.src) || url }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Empty" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: `img_input:${path}`,
-          type: "file",
-          hidden: true,
-          onChange: (ev) => {
-            readImage(ev).then((res) => {
-              setData({ src: res.src, filename: res.filename });
-              if (res.width && res.height) {
-                setMetadata({
-                  sha256: res.sha256,
-                  width: res.width,
-                  height: res.height
-                });
-              } else {
-                setMetadata(void 0);
-              }
-            }).catch((err2) => {
-              console.error(err2.message);
-              setData(null);
-              setMetadata(void 0);
-            });
-          }
-        }
-      )
-    ] }),
-    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: data && /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
+  const navigate = useNavigate();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: source.map((item, index2) => {
+    const subPath = createValPathOfItem(path, index2);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        disabled: loading,
         onClick: () => {
-          setLoading(true);
-          onSubmit(
-            (path2) => Promise.resolve(
-              createImagePatch(
-                path2,
-                data.src,
-                data.filename ?? null,
-                metadata
-              )
-            )
-          ).finally(() => {
-            setLoading(false);
-            setData(null);
-            setMetadata(void 0);
-          });
+          setSelectedPath(subPath);
+          navigate(subPath);
         },
-        children: loading ? "Saving..." : "Submit"
-      }
-    ) })
-  ] }, path);
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ValListItem,
+          {
+            index: index2,
+            path: subPath,
+            source: item,
+            schema: schema.item
+          },
+          subPath
+        )
+      },
+      subPath
+    );
+  }) }, path);
 }
-async function createRichTextPatch(path, editor) {
-  const { templateStrings, exprs, files } = editor ? await lexicalToRichTextSource(
-    editor.getEditorState().toJSON().root
-  ) : {
-    [VAL_EXTENSION]: "richtext",
-    templateStrings: [""],
-    exprs: [],
-    files: {}
-  };
-  return [
-    {
-      op: "replace",
-      path,
-      value: {
-        templateStrings,
-        exprs,
-        [VAL_EXTENSION]: "richtext"
+const LIST_ITEM_MAX_HEIGHT = RECORD_ITEM_MAX_HEIGHT;
+function ValListItem({
+  index: index2,
+  path,
+  source,
+  schema
+}) {
+  const ref = React$3.useRef(null);
+  const [isTruncated, setIsTruncated] = React$3.useState(false);
+  React$3.useEffect(() => {
+    if (ref.current) {
+      const height2 = ref.current.getBoundingClientRect().height;
+      if (height2 >= LIST_ITEM_MAX_HEIGHT) {
+        setIsTruncated(true);
       }
-    },
-    ...Object.entries(files).map(([filePath, value]) => {
-      return {
-        op: "file",
-        path,
-        filePath,
-        value
-      };
-    })
-  ];
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      ref,
+      className: "relative px-4 pt-2 pb-4 overflow-hidden border gap-y-2",
+      style: {
+        maxHeight: LIST_ITEM_MAX_HEIGHT
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-4 font-serif text-left uppercase text-accent", children: index2 + 1 < 10 ? `0${index2 + 1}` : index2 + 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ValPreview, { path, source, schema }) }),
+        isTruncated && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 w-full h-[20px] bg-gradient-to-b from-transparent to-background" })
+      ]
+    }
+  );
 }
-function RichTextField({
-  defaultValue,
-  onSubmit,
-  registerPatchCallback
+function createValPathOfItem(arrayPath, prop) {
+  const val = Internal.createValPathOfItem(arrayPath, prop);
+  if (!val) {
+    throw Error(
+      `Could not create val path: ${arrayPath} of ${prop == null ? void 0 : prop.toString()}`
+    );
+  }
+  return val;
+}
+function ValPreview({
+  path,
+  source,
+  schema
 }) {
-  const [editor, setEditor] = React$3.useState(null);
-  const [didChange, setDidChange] = React$3.useState(false);
-  const [loading, setLoading] = React$3.useState(false);
-  React$3.useEffect(() => {
-    if (editor) {
-      setDidChange(false);
-      editor.registerTextContentListener(() => {
-        setDidChange(true);
-      });
-      editor.registerDecoratorListener(() => {
-        setDidChange(true);
-      });
+  const [isMouseOver, setIsMouseOver] = React$3.useState(null);
+  const { hoverElem } = useValFullscreenHover();
+  if (schema.type === "object") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "grid grid-cols-[min-content_1fr] gap-2 text-left",
+        children: Object.entries(schema.items).map(([key]) => {
+          return /* @__PURE__ */ jsxRuntime.jsxs(React$3.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted", children: [
+              key,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ValPreview,
+              {
+                source: (source == null ? void 0 : source[key]) ?? null,
+                schema: schema.items[key],
+                path: createValPathOfItem(path, key)
+              }
+            ) })
+          ] }, createValPathOfItem(path, key));
+        })
+      },
+      path
+    );
+  } else if (schema.type === "array") {
+    if (source === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
     }
-  }, [editor]);
-  React$3.useEffect(() => {
-    if (editor && registerPatchCallback) {
-      registerPatchCallback((path) => createRichTextPatch(path, editor));
+    if (Array.isArray(source)) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source.length }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: source.length === 1 ? " item" : " items" })
+      ] }, path);
     }
-  }, [editor]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded border-card", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RichTextEditor,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
       {
-        onEditor: (editor2) => {
-          setEditor(editor2);
+        className: "px-2 bg-destructive text-destructive-foreground",
+        children: "Unknown length"
+      },
+      path
+    );
+  } else if (schema.type === "richtext") {
+    if (source === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
+    }
+    if (typeof source !== "object") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "p-4 text-destructive-foreground bg-destructive",
+          children: [
+            "ERROR: ",
+            typeof source,
+            " not an object"
+          ]
         },
-        richtext: defaultValue || {
-          children: [],
-          [VAL_EXTENSION]: "root"
-        }
-      }
-    ),
-    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: didChange && /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        disabled: loading || !editor,
-        onClick: () => {
-          if (editor) {
-            setLoading(true);
-            onSubmit((path) => createRichTextPatch(path, editor)).finally(
-              () => {
-                setLoading(false);
-                setDidChange(false);
-              }
-            );
-          }
+        path
+      );
+    }
+    if (!(VAL_EXTENSION in source) || source[VAL_EXTENSION] !== "richtext") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "p-4 text-destructive-foreground bg-destructive",
+          children: "ERROR: object is not richtext"
         },
-        children: loading ? "Saving..." : "Submit"
-      }
-    ) })
-  ] });
-}
-function KeyOfField({
-  disabled,
-  defaultValue,
-  registerPatchCallback,
-  onSubmit,
-  selector
-}) {
-  const valModule = useValModuleFromPath(selector);
-  const getValuesFromModule = (module2) => {
-    if (Array.isArray(module2.moduleSource)) {
-      return {
-        type: "number",
-        values: Object.keys(module2.moduleSource).map((key) => parseInt(key))
-      };
+        path
+      );
     }
-    return {
-      type: "string",
-      values: Object.keys(module2.moduleSource ?? ["ERROR fetching source"])
-    };
-  };
-  const typeAndValues = getValuesFromModule(valModule);
-  const [value, setValue] = React$3.useState(defaultValue || typeAndValues.values[0]);
-  const [loading, setLoading] = React$3.useState(false);
-  React$3.useEffect(() => {
-    setLoading(disabled);
-  }, [disabled]);
-  const parse2 = (value2) => {
-    if (typeAndValues.type === "number") {
-      if (value2 === "") {
-        throw new Error("Value cannot be empty");
-      }
-      if (Number.isNaN(Number(value2))) {
-        throw new Error("Value was not a number: " + JSON.stringify(value2));
-      }
-      return Number(value2);
+    return /* @__PURE__ */ jsxRuntime.jsx(ValRichText, { children: parseRichTextSource(source) }, path);
+  } else if (schema.type === "string") {
+    if (source === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
     }
-    return value2;
-  };
-  React$3.useEffect(() => {
-    if (registerPatchCallback) {
-      registerPatchCallback(async (path) => {
-        return [
-          {
-            op: "replace",
-            path,
-            value
-          }
-        ];
-      });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: source });
+  } else if (schema.type === "image") {
+    if (source === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
     }
-  }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full gap-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Select,
+    if (typeof source !== "object") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "p-4 text-destructive-foreground bg-destructive",
+          children: "ERROR: not an object"
+        },
+        path
+      );
+    }
+    if (!(FILE_REF_PROP in source) || typeof source[FILE_REF_PROP] !== "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "p-4 text-destructive-foreground bg-destructive",
+          children: "ERROR: object is not an image"
+        },
+        path
+      );
+    }
+    const url = Internal.convertFileSource(
+      source
+    ).url;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
       {
-        defaultValue: value.toString(),
-        disabled: loading,
-        onValueChange: (value2) => {
-          setValue(parse2(value2));
+        onMouseOver: (ev) => {
+          setIsMouseOver({
+            x: ev.clientX,
+            y: ev.clientY
+          });
         },
+        onMouseLeave: () => {
+          setIsMouseOver(null);
+        },
+        className: "relative flex items-center justify-start gap-1",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a value" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: typeAndValues.values.map((value2) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: value2.toString(), children: value2.toString() }, value2)) })
+          /* @__PURE__ */ jsxRuntime.jsx("a", { href: url, className: "overflow-hidden underline truncate ", children: source[FILE_REF_PROP] }),
+          isMouseOver && hoverElem && reactDomExports.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                className: "absolute z-[5] max-w-[10vw]",
+                style: {
+                  left: isMouseOver.x + 10,
+                  top: isMouseOver.y + 10
+                },
+                src: url
+              }
+            ),
+            hoverElem
+          )
         ]
+      },
+      path
+    );
+  } else if (schema.type === "boolean") {
+    if (source === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source ? "true" : "false" }, path);
+  } else if (schema.type === "number") {
+    if (source === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source.toString() });
+  } else if (schema.type === "keyOf") {
+    if (source === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "Empty" }, path);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: source.toString() }, path);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    "TODO: ",
+    schema.type
+  ] }, path);
+}
+function ValOptional({
+  path,
+  source,
+  schema,
+  setSelectedPath,
+  initOnSubmit,
+  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(
+        Switch,
+        {
+          checked: enable,
+          onClick: () => {
+            setEnable((prev) => !prev);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: field })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      Switch,
+      {
+        checked: enable,
+        onClick: () => {
+          setEnable((prev) => !prev);
+        }
       }
     ),
-    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
+    enable && /* @__PURE__ */ jsxRuntime.jsx(
+      ValDefaultOf,
       {
-        disabled: loading,
-        onClick: () => {
-          setLoading(true);
-          onSubmit(async (path) => [
-            {
-              op: "replace",
-              path,
-              value
-            }
-          ]).finally(() => {
-            setLoading(false);
-          });
-        },
-        children: loading ? "Saving..." : "Submit"
+        source,
+        schema,
+        path,
+        setSelectedPath,
+        initOnSubmit
       }
-    ) })
+    )
+  ] }, path);
+}
+function ValDefaultOf({
+  source,
+  path,
+  schema,
+  setSelectedPath,
+  initOnSubmit
+}) {
+  if (schema.type === "array") {
+    if (typeof source === "object" && (source === null || isJsonArray(source))) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ValList,
+        {
+          source: source === null ? [] : source,
+          path,
+          schema,
+          setSelectedPath
+        }
+      );
+    }
+  } else if (schema.type === "object") {
+    if (typeof source === "object" && (source === null || !isJsonArray(source))) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ValObject,
+        {
+          source,
+          path,
+          schema,
+          setSelectedPath,
+          initOnSubmit
+        }
+      );
+    }
+  } else if (schema.type === "richtext" || schema.type === "string" || schema.type === "image" || schema.type === "number" || schema.type === "keyOf") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ValFormField,
+      {
+        path,
+        disabled: false,
+        source,
+        schema,
+        onSubmit: initOnSubmit(path)
+      },
+      path
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-destructive text-destructive-foreground", children: [
+    "ERROR: unexpected source type ",
+    typeof source,
+    " for schema type",
+    " ",
+    schema.type
   ] });
 }
-function NumberField({
-  disabled,
-  defaultValue,
-  registerPatchCallback,
-  onSubmit
+function isJsonArray(source) {
+  return Array.isArray(source);
+}
+function pathsToTree(paths) {
+  const tree = {};
+  paths.forEach((path) => {
+    const parts = path.split("/").filter((part) => part !== "");
+    let current = tree;
+    parts.forEach((part) => {
+      if (!current[part]) {
+        current[part] = {};
+      }
+      current = current[part];
+    });
+  });
+  return tree;
+}
+function PathTree({
+  paths,
+  setSelectedModuleId
 }) {
-  const [value, setValue] = React$3.useState(defaultValue || 0);
-  const [loading, setLoading] = React$3.useState(false);
-  React$3.useEffect(() => {
-    setLoading(disabled);
-  }, [disabled]);
-  const ref = React$3.useRef(null);
-  React$3.useEffect(() => {
-    if (registerPatchCallback) {
-      registerPatchCallback(async (path) => {
-        var _a;
-        return [
-          {
-            op: "replace",
-            path,
-            value: Number((_a = ref.current) == null ? void 0 : _a.value) || 0
-          }
-        ];
-      });
+  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
     }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full gap-y-4", children: [
+  ) }, `/${name}`)) });
+}
+function PathNode({
+  name,
+  tree,
+  moduleId,
+  setSelectedModuleId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
+      "button",
       {
-        ref,
-        disabled: loading,
-        defaultValue: value ?? 0,
-        onChange: (e) => setValue(Number(e.target.value)),
-        type: "number"
+        onClick: () => {
+          setSelectedModuleId(moduleId);
+        },
+        children: name
       }
     ),
-    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
+    Object.entries(tree).map(([childName, childTree]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+      PathNode,
       {
-        disabled: loading,
-        onClick: () => {
-          setLoading(true);
-          onSubmit(async (path) => {
-            var _a;
-            return [
-              {
-                op: "replace",
-                path,
-                value: Number((_a = ref.current) == null ? void 0 : _a.value) || 0
-              }
-            ];
-          }).finally(() => {
-            setLoading(false);
-          });
-        },
-        children: loading ? "Saving..." : "Submit"
+        name: childName,
+        tree: childTree,
+        moduleId: `${moduleId}/${childName}`,
+        setSelectedModuleId
       }
-    ) })
+    ) }, `${moduleId}/${childName}`))
   ] });
 }
-function StringField({
-  disabled,
-  defaultValue,
-  registerPatchCallback,
-  onSubmit
+const theme = {
+  tags: {
+    h1: "font-bold",
+    h2: "font-bold",
+    h3: "font-bold",
+    h4: "font-bold",
+    h5: "font-bold",
+    h6: "font-bold",
+    p: ""
+  },
+  classes: {
+    bold: "font-bold",
+    italic: "italic",
+    lineThrough: "line-through"
+  }
+};
+function ValRichText({
+  children
 }) {
-  const [value, setValue] = React$3.useState(defaultValue || "");
-  const [loading, setLoading] = React$3.useState(false);
-  React$3.useEffect(() => {
-    setLoading(disabled);
-  }, [disabled]);
-  const ref = React$3.useRef(null);
-  React$3.useEffect(() => {
-    if (registerPatchCallback) {
-      registerPatchCallback(async (path) => {
-        var _a;
-        return [
-          {
-            op: "replace",
-            path,
-            value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
-          }
-        ];
-      });
+  const root = children;
+  function withRenderTag(clazz, current) {
+    const renderClass = theme.tags[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
+    }
+    if (renderClass) {
+      return renderClass;
+    }
+    return current;
+  }
+  function withRenderClass(clazz, current) {
+    const renderClass = theme.classes[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
+    }
+    if (renderClass) {
+      return renderClass;
+    }
+    return current;
+  }
+  function toReact(node, key) {
+    var _a, _b;
+    if (typeof node === "string") {
+      return node;
+    }
+    if (node.tag === "p") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: withRenderTag("p"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "img") {
+      return /* @__PURE__ */ jsxRuntime.jsx("img", { className: withRenderTag("img"), src: node.src }, key);
+    }
+    if (node.tag === "ul") {
+      return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: withRenderTag("ul"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "ol") {
+      return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: withRenderTag("ol"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "li") {
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: withRenderTag("li"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
     }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full gap-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
-      {
-        ref,
-        disabled: loading,
-        defaultValue: value ?? "",
-        onChange: (e) => setValue(e.target.value)
-      }
-    ),
-    onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultValue !== value && /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        disabled: loading,
-        onClick: () => {
-          setLoading(true);
-          onSubmit(async (path) => {
-            var _a;
-            return [
-              {
-                op: "replace",
-                path,
-                value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
-              }
-            ];
-          }).finally(() => {
-            setLoading(false);
-          });
+    if (node.tag === "span") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: node.classes.map((nodeClass) => {
+            switch (nodeClass) {
+              case "bold":
+                return withRenderClass("bold");
+              case "line-through":
+                return withRenderClass("lineThrough");
+              case "italic":
+                return withRenderClass("italic");
+            }
+          }).join(" "),
+          children: node.children.map((child, key2) => toReact(child, key2))
         },
-        children: loading ? "Saving..." : "Submit"
-      }
-    ) })
-  ] });
-}
-function usePatch(paths, api, valStore, onSubmit, session) {
-  const [state, setState] = React$3.useState({});
-  const [error, setError] = React$3.useState(null);
-  const [progress, setProgress] = React$3.useState("ready");
-  const initPatchCallback = React$3.useCallback(
-    (pathsAttr) => {
-      return (callback) => {
-        setState((prev) => {
-          const paths2 = pathsAttr.split(",");
-          const nextState = paths2.reduce((acc, path) => {
-            const patchPath = Internal.createPatchJSONPath(
-              Internal.splitModuleIdAndModulePath(path)[1]
-            );
-            return {
-              ...acc,
-              [path]: () => callback(patchPath)
-            };
-          }, {});
-          return {
-            ...prev,
-            ...nextState
-          };
-        });
-      };
-    },
-    []
-  );
-  React$3.useEffect(() => {
-    setState((prev) => {
-      const newState = {};
-      for (const path of paths) {
-        if (prev[path]) {
-          newState[path] = prev[path];
-        }
-      }
-      if (Object.keys(newState).length === Object.keys(prev).length) {
-        return prev;
-      }
-      return newState;
-    });
-  }, [paths]);
-  const onSubmitPatch = React$3.useCallback(async () => {
-    setError(null);
-    setProgress("create_patch");
-    const patches = {};
-    for (const path in state) {
-      const [moduleId] = Internal.splitModuleIdAndModulePath(
-        path
+        key
       );
-      const patch = await state[path]();
-      patches[moduleId] = patch;
     }
-    return maybeStartViewTransition(() => {
-      setProgress("patching");
-      return Promise.all(
-        Object.entries(patches).map(
-          ([moduleId, patch]) => api.postPatches(moduleId, patch).then((res) => {
-            if (result.isErr(res)) {
-              throw res.error;
-            } else {
-              res.value;
-            }
-          })
-        )
-      ).then(() => {
-        setProgress("on_submit");
-        const refreshRequired = session.status === "success" && session.data.mode === "proxy";
-        return onSubmit(refreshRequired);
-      }).then(() => {
-        setProgress("update_store");
-        return valStore.update(
-          paths.map(
-            (path) => Internal.splitModuleIdAndModulePath(path)[0]
-          )
-        );
-      });
-    }).catch((err2) => {
-      setError(err2);
-    }).finally(() => {
-      setProgress("ready");
+    if (node.tag === "h1") {
+      return /* @__PURE__ */ jsxRuntime.jsx("h1", { className: withRenderTag("h1"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "h2") {
+      return /* @__PURE__ */ jsxRuntime.jsx("h2", { className: withRenderTag("h2"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "h3") {
+      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: withRenderTag("h3"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "h4") {
+      return /* @__PURE__ */ jsxRuntime.jsx("h4", { className: withRenderTag("h4"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "h5") {
+      return /* @__PURE__ */ jsxRuntime.jsx("h5", { className: withRenderTag("h5"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "h6") {
+      return /* @__PURE__ */ jsxRuntime.jsx("h6", { className: withRenderTag("h6"), children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    if (node.tag === "br") {
+      return /* @__PURE__ */ jsxRuntime.jsx("br", {}, key);
+    }
+    if (node.tag === "a") {
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { href: node.href, children: node.children.map((child, key2) => toReact(child, key2)) }, key);
+    }
+    console.error("Unknown tag", node.tag);
+    const _exhaustiveCheck = node.tag;
+    const anyNode = _exhaustiveCheck;
+    if (!(anyNode == null ? void 0 : anyNode.tag)) {
+      return null;
+    }
+    return React$3.createElement(anyNode.tag, {
+      key,
+      className: (_a = anyNode.class) == null ? void 0 : _a.join(" "),
+      children: (_b = anyNode.children) == null ? void 0 : _b.map(toReact)
     });
-  }, [state, session]);
-  return { initPatchCallback, onSubmitPatch, error, progress };
-}
-async function maybeStartViewTransition(f) {
-  if ("startViewTransition" in document && typeof document.startViewTransition === "function") {
-    await document.startViewTransition(f);
   }
-  await f();
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-val-path": root.valPath, children: root.children.map((child, i) => {
+    return toReact(child, i);
+  }) });
 }
 function ValOverlay({
   defaultTheme,
@@ -73575,32 +73557,48 @@ function ValOverlay({
   const [hoverTarget, setHoverTarget] = useHoverTarget(editMode);
   const [windowTarget, setWindowTarget] = React$3.useState(null);
   const [highlight, setHighlight] = React$3.useState(false);
-  const { selectedSchema, selectedSource, moduleId, error, loading } = useValModules(api, windowTarget == null ? void 0 : windowTarget.path);
+  const paths = (windowTarget == null ? void 0 : windowTarget.path) ? windowTarget.path.split(",") : [];
+  const [formData, setFormData] = React$3.useState(
+    Object.fromEntries(
+      paths.map((path) => {
+        return [path, { status: "not-asked" }];
+      })
+    )
+  );
+  React$3.useEffect(() => {
+    setFormData(
+      Object.fromEntries(paths.map((path) => [path, { status: "loading" }]))
+    );
+    for (const path of paths) {
+      updateFormData(api, path, setFormData);
+    }
+  }, [paths.join(";")]);
+  const selectedPaths = (windowTarget == null ? void 0 : windowTarget.path) ? paths : [];
   const {
-    initPatchCallback,
     onSubmitPatch,
-    progress: patchProgress,
+    // progress: patchProgress,
     error: patchError
-  } = usePatch(
-    (windowTarget == null ? void 0 : windowTarget.path) ? [windowTarget.path] : [],
-    api,
-    store,
-    onSubmit,
-    session
-  );
+  } = usePatch(selectedPaths, api, store, onSubmit, session);
   const [windowSize, setWindowSize] = React$3.useState();
   React$3.useEffect(() => {
-    if (moduleId) {
-      store.update([moduleId]);
-    } else {
-      store.updateAll();
-    }
-  }, [moduleId]);
+    store.updateAll();
+  }, []);
   React$3.useEffect(() => {
     if (patchError) {
       console.error(patchError);
     }
   }, [patchError]);
+  const initOnSubmit = React$3.useCallback(
+    (path) => async (callback) => {
+      const [moduleId, modulePath] = Internal.splitModuleIdAndModulePath(path);
+      const patch = await callback(Internal.createPatchJSONPath(modulePath));
+      await api.postPatches(moduleId, patch);
+      return onSubmitPatch().then(() => store.update([moduleId])).then(() => {
+        updateFormData(api, path, setFormData);
+      });
+    },
+    []
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     ValOverlayContext.Provider,
     {
@@ -73618,7 +73616,7 @@ function ValOverlay({
       },
       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 }) }),
-        editMode === "hover" && hoverTarget.path && /* @__PURE__ */ jsxRuntime.jsx(
+        session.status === "success" && session.data.enabled && editMode === "hover" && hoverTarget.path && /* @__PURE__ */ jsxRuntime.jsx(
           ValHover,
           {
             hoverTarget,
@@ -73627,134 +73625,109 @@ function ValOverlay({
             setWindowTarget
           }
         ),
-        editMode === "window" && windowTarget && /* @__PURE__ */ jsxRuntime.jsxs(
+        editMode === "window" && windowTarget && /* @__PURE__ */ jsxRuntime.jsx(
           ValWindow,
           {
             onClose: () => {
               setWindowTarget(null);
               setEditMode("hover");
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-full px-4 py-2 text-sm border-b border-highlight", children: /* @__PURE__ */ jsxRuntime.jsx(
-                WindowHeader,
-                {
-                  path: windowTarget.path,
-                  type: selectedSchema == null ? void 0 : selectedSchema.type
-                }
-              ) }),
-              loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary", children: "Loading..." }),
-              error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 text-red", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-bold", children: [
-                  "Error: ",
-                  error.message
-                ] }),
-                "details" in error && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-card text-card-foreground", children: error.details })
-              ] }),
-              selectedSchema !== void 0 && selectedSource !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                ValFormField,
-                {
-                  path: windowTarget.path,
-                  disabled: loading,
-                  source: selectedSource,
-                  schema: selectedSchema,
-                  registerPatchCallback: initPatchCallback(windowTarget.path)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end justify-end py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  className: "px-4 py-2 border border-highlight disabled:border-border",
-                  disabled: patchProgress !== "ready",
-                  onClick: onSubmitPatch,
-                  children: patchProgress === "patching" ? "Finalizing..." : patchProgress === "create_patch" ? "Patching..." : patchProgress === "on_submit" ? "Completing..." : patchProgress === "update_store" ? "Refreshing..." : "Submit"
-                }
-              ) })
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "p-4",
+                style: {
+                  maxHeight: windowSize == null ? void 0 : windowSize.innerHeight
+                },
+                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
+                    },
+                    path
+                  );
+                })
+              }
+            )
           }
         )
       ] })
     }
   );
 }
-function useValModules(api, path) {
-  const [modules, setModules] = React$3.useState();
-  const moduleId = path && Internal.splitModuleIdAndModulePath(path)[0];
-  React$3.useEffect(() => {
-    if (path) {
-      setModules({ status: "loading" });
-      api.getTree({
-        patch: true,
-        includeSchema: true,
-        includeSource: true,
-        treePath: moduleId
-      }).then((res) => {
-        if (result.isOk(res)) {
-          setModules({ status: "success", data: res.value.modules });
-        } else {
-          console.error({ status: "error", error: res.error });
-          setModules({ status: "error", error: res.error.message });
+function updateFormData(api, path, setData) {
+  const [moduleId, modulePath] = Internal.splitModuleIdAndModulePath(
+    path
+  );
+  api.getTree({
+    patch: true,
+    includeSchema: true,
+    includeSource: true,
+    treePath: moduleId
+  }).then((res) => {
+    if (result.isOk(res)) {
+      const { schema, source } = res.value.modules[moduleId];
+      if (!schema || !source) {
+        return setData((prev) => ({
+          ...prev,
+          [path]: {
+            status: "success",
+            data: {
+              source: res.value.modules[moduleId].source,
+              schema: res.value.modules[moduleId].schema
+            }
+          }
+        }));
+      }
+      const resolvedModulePath = Internal.resolvePath(
+        modulePath,
+        source,
+        schema
+      );
+      setData((prev) => ({
+        ...prev,
+        [path]: {
+          status: "success",
+          data: {
+            source: resolvedModulePath.source,
+            schema: resolvedModulePath.schema
+          }
         }
-      });
+      }));
+    } else {
+      console.error({ status: "error", error: res.error });
+      setData((prev) => ({
+        ...prev,
+        [path]: {
+          status: "error",
+          error: res.error.message
+        }
+      }));
     }
-  }, [path]);
-  if (!path || (modules == null ? void 0 : modules.status) === "not-asked") {
-    return {
-      moduleId,
-      error: null,
-      selectedSource: void 0,
-      selectedSchema: void 0,
-      loading: false
-    };
-  }
-  if ((modules == null ? void 0 : modules.status) === "loading") {
-    return {
-      moduleId,
-      error: null,
-      selectedSource: void 0,
-      selectedSchema: void 0,
-      loading: true
-    };
-  }
-  if ((modules == null ? void 0 : modules.status) === "error") {
-    return {
-      moduleId,
-      error: { message: modules.error },
-      selectedSource: void 0,
-      selectedSchema: void 0,
-      loading: false
-    };
-  }
-  if (!(modules == null ? void 0 : modules.data)) {
-    return {
-      error: {
-        message: "Val could not fetch data for this element.",
-        details: "Module data not found for: " + moduleId
-      },
-      selectedSource: void 0,
-      selectedSchema: void 0,
-      loading: false
-    };
-  }
-  const resolvedModulePath = resolvePath$1(path, modules.data);
-  const {
-    error,
-    source: selectedSource,
-    schema: selectedSchema
-  } = resolvedModulePath && result.isOk(resolvedModulePath) ? {
-    ...resolvedModulePath.value,
-    error: null
-  } : {
-    error: resolvedModulePath && result.isErr(resolvedModulePath) ? resolvedModulePath.error : null,
-    source: void 0,
-    schema: void 0
-  };
-  return {
-    moduleId,
-    error,
-    selectedSource,
-    selectedSchema,
-    loading: false
-  };
+  });
 }
 function ValHover({
   hoverTarget,
@@ -73921,40 +73894,7 @@ function useSession(api) {
   }, [sessionResetId]);
   return session;
 }
-function WindowHeader({
-  path,
-  type
-}) {
-  const segments = path.split("/").slice(1);
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "h-[20px] flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "whitespace-nowrap", dir: "rtl", children: segments.map((segment, i) => {
-      if (i === segments.length - 1) {
-        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: segment.split(".").map((s, i2) => {
-          let name = s;
-          if (i2 === 0) {
-            return /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: name }) }, i2 + ".");
-          } else {
-            name = JSON.parse(s);
-          }
-          return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 text-xs text-highlight", children: "/" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: name })
-          ] }, i2 + ".");
-        }) }, i);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: segment }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 text-xs opacity-50", children: "/" })
-      ] }, i);
-    }) }),
-    type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4", children: [
-      "(",
-      type,
-      ")"
-    ] })
-  ] });
-}
-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-full {\n  max-width: 100%;\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-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-end {\n  align-items: flex-end;\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.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.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-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-background:hover {\n  background-color: hsl(var(--background));\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\\:border-border:disabled {\n  border-color: hsl(var(--border));\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: 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-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.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.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-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-background:hover {\n  background-color: hsl(var(--background));\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";
 function Style() {
   return /* @__PURE__ */ jsxRuntime.jsx("style", { children: styleCss });
 }