diff --git a/packages/core/package.json b/packages/core/package.json
index 9d3bee4..ff5f94d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -2,7 +2,7 @@
   "name": "@react-formgen/core",
   "description": "A headless, type-safe, customizable, and super simple React form generator.",
   "private": false,
-  "version": "0.0.0-alpha.25",
+  "version": "0.0.0-alpha.26",
   "license": "MIT",
   "author": "m6io",
   "repository": {
diff --git a/packages/json-schema/package.json b/packages/json-schema/package.json
index e748d8b..5fffd4f 100644
--- a/packages/json-schema/package.json
+++ b/packages/json-schema/package.json
@@ -2,7 +2,7 @@
   "name": "@react-formgen/json-schema",
   "description": "A headless, type-safe, customizable, and super simple React form generator.",
   "private": false,
-  "version": "0.0.0-alpha.25",
+  "version": "0.0.0-alpha.26",
   "license": "MIT",
   "author": "m6io",
   "repository": {
@@ -35,7 +35,7 @@
     "analyze": "vite build --mode analyze"
   },
   "dependencies": {
-    "@react-formgen/core": "0.0.0-alpha.25"
+    "@react-formgen/core": "0.0.0-alpha.26"
   },
   "peerDependencies": {
     "ajv": "^8.16.0",
diff --git a/packages/json-schema/src/components/types.ts b/packages/json-schema/src/components/types.ts
index 270e1a7..55d0e50 100644
--- a/packages/json-schema/src/components/types.ts
+++ b/packages/json-schema/src/components/types.ts
@@ -76,16 +76,18 @@ export interface UISchema {
  * Represents an extended JSONSchema7 with additional properties for customizing forms.
  * This adds form-specific extensions to the standard JSON Schema.
  *
- * @extends {Omit<JSONSchema7, "properties" | "definitions">}
+ * @extends {Omit<JSONSchema7, "properties" | "definitions" | "items">}
  * @property {UISchema} [uiSchema] - UI-specific configuration
  * @property {Record<string, FormgenJSONSchema7>} [properties] - Object properties
  * @property {Record<string, FormgenJSONSchema7>} [definitions] - Schema definitions
+ * @property {FormgenJSONSchema7 | FormgenJSONSchema7[]} [items] - Array items schema with uiSchema support
  */
 export interface FormgenJSONSchema7
-  extends Omit<JSONSchema7, "properties" | "definitions"> {
+  extends Omit<JSONSchema7, "properties" | "definitions" | "items"> {
   uiSchema?: UISchema;
   properties?: Record<string, FormgenJSONSchema7>;
   definitions?: Record<string, FormgenJSONSchema7>;
+  items?: FormgenJSONSchema7 | FormgenJSONSchema7[];
 }
 
 /**
diff --git a/packages/yup/package.json b/packages/yup/package.json
index baf524e..2ab1df5 100644
--- a/packages/yup/package.json
+++ b/packages/yup/package.json
@@ -2,7 +2,7 @@
   "name": "@react-formgen/yup",
   "description": "A headless, type-safe, customizable, and super simple React form generator.",
   "private": false,
-  "version": "0.0.0-alpha.25",
+  "version": "0.0.0-alpha.26",
   "license": "MIT",
   "author": "m6io",
   "repository": {
@@ -33,7 +33,7 @@
     "analyze": "vite build --mode analyze"
   },
   "dependencies": {
-    "@react-formgen/core": "0.0.0-alpha.25"
+    "@react-formgen/core": "0.0.0-alpha.26"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/zod/package.json b/packages/zod/package.json
index 23cae0f..f3a1faf 100644
--- a/packages/zod/package.json
+++ b/packages/zod/package.json
@@ -2,7 +2,7 @@
   "name": "@react-formgen/zod",
   "description": "A headless, type-safe, customizable, and super simple React form generator.",
   "private": false,
-  "version": "0.0.0-alpha.25",
+  "version": "0.0.0-alpha.26",
   "license": "MIT",
   "author": "m6io",
   "repository": {
@@ -33,12 +33,12 @@
     "analyze": "vite build --mode analyze"
   },
   "dependencies": {
-    "@react-formgen/core": "0.0.0-alpha.25"
+    "@react-formgen/core": "0.0.0-alpha.26"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "zod": "^3.23.8"
+    "zod": "^3.25.61"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
diff --git a/packages/zod/src/components/RenderTemplate.tsx b/packages/zod/src/components/RenderTemplate.tsx
index d1aabec..706d482 100644
--- a/packages/zod/src/components/RenderTemplate.tsx
+++ b/packages/zod/src/components/RenderTemplate.tsx
@@ -1,40 +1,90 @@
 import React from "react";
-import { z } from "zod";
 import { RenderTemplateProps } from "./types";
-import { mapToPrimaryType, resolveSchema } from "../utils/resolveSchema";
 import { useTemplates } from "..";
+import { unwrapSchema } from "../utils";
 
+/**
+ * Render a template based on the schema type.
+ * @param {RenderTemplateProps} props - The props for the RenderTemplate.
+ * @returns {JSX.Element} The rendered template component.
+ */
 export const RenderTemplate: React.FC<RenderTemplateProps> = ({
   schema,
   path,
 }) => {
+  // Grab custom or default templates from context.
   const {
     StringTemplate,
     NumberTemplate,
     BooleanTemplate,
-    ObjectTemplate,
+    BigIntTemplate,
+    DateTemplate,
     ArrayTemplate,
+    ObjectTemplate,
+    UnionTemplate,
+    TupleTemplate,
+    EnumTemplate,
   } = useTemplates();
-  const resolvedSchema = mapToPrimaryType(resolveSchema(schema));
-
-  if (
-    resolvedSchema instanceof z.ZodString ||
-    resolvedSchema instanceof z.ZodDate ||
-    resolvedSchema instanceof z.ZodEnum
-  ) {
-    return <StringTemplate schema={resolvedSchema} path={path} />;
-  } else if (resolvedSchema instanceof z.ZodNumber) {
-    return <NumberTemplate schema={resolvedSchema} path={path} />;
-  } else if (resolvedSchema instanceof z.ZodBoolean) {
-    return <BooleanTemplate schema={resolvedSchema} path={path} />;
-  } else if (resolvedSchema instanceof z.ZodObject) {
-    return <ObjectTemplate schema={resolvedSchema} path={path} />;
-  } else if (resolvedSchema instanceof z.ZodArray) {
-    return <ArrayTemplate schema={resolvedSchema} path={path} />;
-  } else {
-    console.error(
-      `Unsupported schema type: ${resolvedSchema._def.typeName} at path: ${path}`
-    );
-    return null;
+
+  // Let's first unwrap the schema to get to the core type
+  const coreSchema = unwrapSchema(schema);
+
+  const def = coreSchema._zod.def;
+
+  switch (def.type) {
+    case "string":
+      return <StringTemplate schema={schema} path={path} />;
+
+    case "number":
+      return <NumberTemplate schema={schema} path={path} />;
+
+    case "boolean":
+      return <BooleanTemplate schema={schema} path={path} />;
+
+    case "bigint":
+      return <BigIntTemplate schema={schema} path={path} />;
+
+    case "date":
+      return <DateTemplate schema={schema} path={path} />;
+
+    case "object":
+      return <ObjectTemplate schema={schema} path={path} />;
+
+    case "array":
+      return <ArrayTemplate schema={schema} path={path} />;
+
+    case "enum":
+      return <EnumTemplate schema={schema} path={path} />;
+
+    case "union":
+      return <UnionTemplate schema={schema} path={path} />;
+
+    case "tuple":
+      return <TupleTemplate schema={schema} path={path} />;
+
+    default:
+      // Unknown or unsupported schema type
+      console.error(
+        `Unsupported schema type: ${def.type} at path: ${path.join("/")}`
+      );
+      // For debugging during development
+      // return (
+      //   <div
+      //     style={{
+      //       color: "red",
+      //       display: "flex",
+      //       flexDirection: "column",
+      //       border: "1px dashed red",
+      //       padding: "1rem",
+      //     }}
+      //   >
+      //     <strong>ERROR:</strong>
+      //     <small>
+      //       Unsupported schema type `{def.type || "UNKNOWN"}` at path: `
+      //       {path.join("/")}`
+      //     </small>
+      //   </div>
+      // );
+      return null;
   }
 };
diff --git a/packages/zod/src/components/Templates.tsx b/packages/zod/src/components/Templates.tsx
deleted file mode 100644
index 7cedbfd..0000000
--- a/packages/zod/src/components/Templates.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-import React from "react";
-import { z } from "zod";
-import {
-  useFormDataAtPath,
-  useErrorsAtPath,
-  useFormContext,
-  useArrayTemplate,
-  FormState,
-  useRenderTemplate,
-} from "..";
-import { generateInitialData } from "../utils";
-import { resolveSchema } from "../utils/resolveSchema";
-import { FormRootProps, Templates } from "./types";
-
-export const ReadonlyPrimitiveTemplate: React.FC<{
-  title?: string;
-  value: string | number | boolean | null;
-  description?: string;
-}> = ({ title, value, description }) => {
-  return (
-    <div style={{ marginBottom: "1rem" }}>
-      {title && <strong>{title}: </strong>}
-      <span>{value ?? "N/A"}</span>
-      {description && (
-        <p style={{ fontSize: "small", color: "#666" }}>{description}</p>
-      )}
-    </div>
-  );
-};
-
-export const ReadonlyComplexTemplate: React.FC<{
-  title?: string;
-  description?: string;
-  children: React.ReactNode;
-}> = ({ title, description, children }) => {
-  return (
-    <div
-      style={{
-        marginBottom: "1rem",
-        paddingLeft: "1rem",
-        borderLeft: "2px solid #ccc",
-      }}
-    >
-      {title && <strong>{title}</strong>}
-      {description && (
-        <p style={{ fontSize: "small", color: "#666" }}>{description}</p>
-      )}
-      <div style={{ marginTop: "0.5rem" }}>{children}</div>
-    </div>
-  );
-};
-
-export const ErrorsList: React.FC<{ errorsAtPath: z.ZodIssue[] }> = ({
-  errorsAtPath,
-}) => {
-  return errorsAtPath.map((error, index) => (
-    <div key={index} style={{ color: "red" }}>
-      {error.message}
-    </div>
-  ));
-};
-
-const WrapperStyle: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-};
-
-const ComplexWrapperStyle: React.CSSProperties = {
-  padding: "1rem",
-  display: "flex",
-  flexDirection: "column",
-  gap: "1rem",
-};
-
-// String Template
-export const StringTemplate: React.FC<{
-  schema: z.ZodString | z.ZodDate;
-  path: string[];
-}> = ({ schema, path }) => {
-  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path);
-  const errorsAtPath = useErrorsAtPath(path);
-  const readonly = useFormContext((state: FormState) => state.readonly);
-
-  if (readonly) {
-    return (
-      <ReadonlyPrimitiveTemplate
-        title={schema.description}
-        value={valueAtPath}
-        description={schema.description}
-      />
-    );
-  }
-
-  return (
-    <div style={WrapperStyle}>
-      <input
-        type="text"
-        value={valueAtPath ?? ""}
-        onChange={(e) => setValueAtPath(e.target.value)}
-        placeholder={schema.description || ""}
-      />
-      {schema.description && <small>{schema.description}</small>}
-      {errorsAtPath && <ErrorsList errorsAtPath={errorsAtPath} />}
-    </div>
-  );
-};
-
-// Number Template
-export const NumberTemplate: React.FC<{
-  schema: z.ZodNumber;
-  path: string[];
-}> = ({ schema, path }) => {
-  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path);
-  const errorsAtPath = useErrorsAtPath(path);
-  const readonly = useFormContext((state: FormState) => state.readonly);
-
-  if (readonly) {
-    return (
-      <ReadonlyPrimitiveTemplate
-        title={schema.description}
-        value={valueAtPath}
-        description={schema.description}
-      />
-    );
-  }
-
-  return (
-    <div style={WrapperStyle}>
-      <input
-        type="number"
-        value={valueAtPath ?? ""}
-        onChange={(e) =>
-          setValueAtPath(e.target.value ? Number(e.target.value) : null)
-        }
-        placeholder={schema.description || ""}
-      />
-      {schema.description && <small>{schema.description}</small>}
-      {errorsAtPath && <ErrorsList errorsAtPath={errorsAtPath} />}
-    </div>
-  );
-};
-
-// Boolean Template
-export const BooleanTemplate: React.FC<{
-  schema: z.ZodBoolean;
-  path: string[];
-}> = ({ schema, path }) => {
-  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path);
-  const errorsAtPath = useErrorsAtPath(path);
-  const readonly = useFormContext((state: FormState) => state.readonly);
-
-  if (readonly) {
-    return (
-      <ReadonlyPrimitiveTemplate
-        title={schema.description}
-        value={valueAtPath ? "true" : "false"}
-        description={schema.description}
-      />
-    );
-  }
-
-  return (
-    <div
-      style={{
-        ...WrapperStyle,
-        alignItems: "flex-start",
-      }}
-    >
-      <input
-        type="checkbox"
-        checked={valueAtPath}
-        onChange={(e) => setValueAtPath(e.target.checked)}
-      />
-      {schema.description && <small>{schema.description}</small>}
-      {errorsAtPath && <ErrorsList errorsAtPath={errorsAtPath} />}
-    </div>
-  );
-};
-
-// Object Template
-export const ObjectTemplate: React.FC<{
-  schema: z.ZodObject<any>;
-  path: string[];
-}> = ({ schema, path }) => {
-  const errorsAtPath = useErrorsAtPath(path);
-  const readonly = useFormContext((state: FormState) => state.readonly);
-  const RenderTemplate = useRenderTemplate();
-
-  if (readonly) {
-    return (
-      <ReadonlyComplexTemplate
-        title={schema.description}
-        description={schema.description}
-      >
-        {schema.shape && Object.keys(schema.shape).length > 0 ? (
-          Object.keys(schema.shape).map((key) => (
-            <RenderTemplate
-              key={key}
-              schema={schema.shape[key]}
-              path={[...path, key]}
-            />
-          ))
-        ) : (
-          <div style={{ color: "#888" }}>No data available</div>
-        )}
-      </ReadonlyComplexTemplate>
-    );
-  }
-
-  return (
-    <div style={WrapperStyle}>
-      {schema.description && <small>{schema.description}</small>}
-      {errorsAtPath && <ErrorsList errorsAtPath={errorsAtPath} />}
-      <div
-        style={{
-          border: "0.125rem solid",
-          ...ComplexWrapperStyle,
-        }}
-      >
-        {schema.shape &&
-          Object.keys(schema.shape).map((key) => (
-            <RenderTemplate
-              key={key}
-              schema={schema.shape[key]}
-              path={[...path, key]}
-            />
-          ))}
-      </div>
-    </div>
-  );
-};
-
-// Ensure the inner schema is correctly typed
-const getInnerSchema = (schema: z.ZodArray<any>): z.ZodTypeAny => {
-  return schema.element;
-};
-
-// Array Template
-export const ArrayTemplate: React.FC<{
-  schema: z.ZodArray<any>;
-  path: string[];
-}> = ({ schema, path }) => {
-  const innerSchema = getInnerSchema(schema);
-  const readonly = useFormContext((state: FormState) => state.readonly);
-  const { valueAtPath, errorsAtPath, moveItem, removeItem, addItem } =
-    useArrayTemplate(path, () => generateInitialData(innerSchema));
-  const RenderTemplate = useRenderTemplate();
-
-  if (readonly) {
-    return (
-      <ReadonlyComplexTemplate
-        title={schema.description}
-        description={schema.description}
-      >
-        {Array.isArray(valueAtPath) && valueAtPath.length > 0 ? (
-          valueAtPath.map((_, index: number) => (
-            <div key={index} style={{ marginBottom: "0.5rem" }}>
-              <RenderTemplate
-                schema={innerSchema}
-                path={[...path, index.toString()]}
-              />
-            </div>
-          ))
-        ) : (
-          <div style={{ color: "#888" }}>No items available</div>
-        )}
-      </ReadonlyComplexTemplate>
-    );
-  }
-
-  return (
-    <div style={WrapperStyle}>
-      {schema.description && <small>{schema.description}</small>}
-      {errorsAtPath && <ErrorsList errorsAtPath={errorsAtPath} />}
-      <div
-        style={{
-          border: "0.25rem dashed",
-          ...ComplexWrapperStyle,
-        }}
-      >
-        {Array.isArray(valueAtPath) &&
-          valueAtPath.map((_, index: number) => (
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "1rem",
-              }}
-              key={index}
-            >
-              <RenderTemplate
-                schema={innerSchema}
-                path={[...path, index.toString()]}
-              />
-              <div
-                style={{
-                  display: "flex",
-                  gap: "1rem",
-                  paddingBottom: "1rem",
-                  borderBottom: "0.125rem dashed",
-                }}
-              >
-                <button
-                  type="button"
-                  onClick={() => moveItem(index, "up")}
-                  disabled={index === 0}
-                >
-                  Move Up
-                </button>
-                <button
-                  type="button"
-                  onClick={() => moveItem(index, "down")}
-                  disabled={index === valueAtPath.length - 1}
-                >
-                  Move Down
-                </button>
-                <button type="button" onClick={() => removeItem(index)}>
-                  Remove
-                </button>
-              </div>
-            </div>
-          ))}
-        <button type="button" onClick={addItem}>
-          Add Item
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export const BaseTemplates: Templates = {
-  StringTemplate: StringTemplate,
-  NumberTemplate: NumberTemplate,
-  BooleanTemplate: BooleanTemplate,
-  ObjectTemplate: ObjectTemplate,
-  ArrayTemplate: ArrayTemplate,
-};
-
-// Helper function to check if schema is an ObjectSchema
-const isObjectSchema = (schema: z.ZodTypeAny): schema is z.ZodObject<any> => {
-  return resolveSchema(schema) instanceof z.ZodObject;
-};
-
-/**
- * Form component that renders the form based on the schema.
- * @param {FormRootProps} props - The props for the BaseFormRoot.
- * @returns {JSX.Element} The form component.
- */
-export const BaseFormRoot: React.FC<FormRootProps> = ({
-  onSubmit,
-  onError,
-}) => {
-  const readonly = useFormContext((state: FormState) => state.readonly);
-  const schema = useFormContext((state: FormState) => state.schema);
-  const formData = useFormContext((state: FormState) => state.formData);
-  const setErrors = useFormContext((state: FormState) => state.setErrors);
-  const RenderTemplate = useRenderTemplate();
-
-  const resolvedSchema = resolveSchema(schema);
-
-  if (readonly) {
-    return (
-      <div style={ComplexWrapperStyle}>
-        {isObjectSchema(resolvedSchema) &&
-          Object.keys(resolvedSchema.shape).map((key) => (
-            <RenderTemplate
-              key={key}
-              schema={resolvedSchema.shape[key]}
-              path={[key]}
-            />
-          ))}
-      </div>
-    );
-  }
-
-  const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    try {
-      resolvedSchema.parse(formData);
-      setErrors(null);
-      onSubmit(formData);
-    } catch (validationErrors) {
-      const zodErrors = validationErrors as z.ZodError;
-      setErrors(zodErrors.issues);
-      onError(zodErrors.issues, formData);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} style={ComplexWrapperStyle}>
-      {isObjectSchema(resolvedSchema) &&
-        Object.keys(resolvedSchema.shape).map((key) => (
-          <RenderTemplate
-            key={key}
-            schema={resolvedSchema.shape[key]}
-            path={[key]}
-          />
-        ))}
-      <button type="submit">Submit</button>
-    </form>
-  );
-};
diff --git a/packages/zod/src/components/index.ts b/packages/zod/src/components/index.ts
index d4c8f5b..ba5f34c 100644
--- a/packages/zod/src/components/index.ts
+++ b/packages/zod/src/components/index.ts
@@ -1,3 +1,2 @@
 export * from "./types";
 export * from "./RenderTemplate";
-export * from "./Templates";
diff --git a/packages/zod/src/components/types.ts b/packages/zod/src/components/types.ts
index bf647e9..484c244 100644
--- a/packages/zod/src/components/types.ts
+++ b/packages/zod/src/components/types.ts
@@ -1,44 +1,119 @@
-import { z } from "zod";
+import type * as z from "zod/v4/core";
 
+/**
+ * Represents the props for the Form component.
+ *
+ * @property {z.$ZodType} schema - The Zod schema used for form validation and data structure
+ * @property {{ [key: string]: unknown }} [initialData] - Initial form data
+ * @property {(data: unknown) => void} [onSubmit] - Callback function for form submission
+ * @property {(issues: z.$ZodIssue[], data?: { [key: string]: unknown }) => void} [onError] - Callback function for form errors
+ * @property {Templates} templates - Custom templates used in rendering type-specific components
+ * @property {React.FC<FormRootProps>} formRoot - Custom form root component
+ * @property {React.FC<RenderTemplateProps>} [renderTemplate] - Custom template renderer override
+ * @property {boolean} [readonly] - Whether to render the form in readonly mode
+ * @property {boolean} [enableDevtools] - Whether to enable Zustand devtools for debugging
+ */
 export type FormProps = {
-  schema: z.ZodObject<any>;
+  schema: z.$ZodType;
   initialData?: { [key: string]: unknown };
-  onSubmit?: (data: { [key: string]: unknown }) => void;
-  onError?: (errors: z.ZodIssue[], data?: { [key: string]: unknown }) => void;
-  templates?: Templates;
-  formRoot?: React.FC<FormRootProps>;
+  onSubmit?: (data: unknown) => void;
+  onError?: (issues: z.$ZodIssue[], data?: { [key: string]: unknown }) => void;
+  templates: Templates; // Required
+  formRoot: React.FC<FormRootProps>; // Required
+  renderTemplate?: React.FC<RenderTemplateProps>;
   readonly?: boolean;
+  enableDevtools?: boolean;
 };
 
+/**
+ * Represents the props for the FormProvider component.
+ *
+ * @property {z.$ZodType} schema - The Zod schema used for form validation and data structure
+ * @property {{ [key: string]: unknown }} [initialData] - Initial form data
+ * @property {React.ReactNode} children - Child components that will have access to the form context
+ * @property {Templates} templates - Custom templates used in rendering type-specific components
+ * @property {boolean} [readonly] - Whether to render the form in readonly mode
+ * @property {React.FC<RenderTemplateProps>} [renderTemplate] - Optional custom render template function
+ * @property {boolean} [enableDevtools] - Whether to enable Zustand devtools for debugging
+ */
+export type FormProviderProps = {
+  schema: z.$ZodType;
+  initialData?: { [key: string]: unknown };
+  children: React.ReactNode;
+  templates: Templates;
+  readonly?: boolean;
+  renderTemplate?: React.FC<RenderTemplateProps>;
+  enableDevtools?: boolean;
+};
+
+/**
+ * Represents the props for the FormRoot component.
+ * This is the component responsible for rendering the form container, handling form submission,
+ * and displaying validation errors.
+ *
+ * @property {(data: unknown) => void} onSubmit - Called on successful form submission
+ * @property   {(issues: z.$ZodIssue[], data?: { [key: string]: unknown }) => void} onError - Called when there are validation errors
+ */
 export type FormRootProps = {
-  onSubmit: (data: { [key: string]: unknown }) => void;
-  onError: (errors: z.ZodIssue[], data?: { [key: string]: unknown }) => void;
+  onSubmit: (data: unknown) => void;
+  onError: (issues: z.$ZodIssue[], data?: { [key: string]: unknown }) => void;
 };
 
+/**
+ * Represents the custom templates for each schema type.
+ * You MUST provide implementations for all of these template components.
+ */
 export type Templates = {
-  StringTemplate: React.FC<{
-    schema: z.ZodString | z.ZodDate;
-    path: string[];
-  }>;
-  NumberTemplate: React.FC<{
-    schema: z.ZodNumber;
-    path: string[];
-  }>;
-  BooleanTemplate: React.FC<{
-    schema: z.ZodBoolean;
-    path: string[];
-  }>;
-  ObjectTemplate: React.FC<{
-    schema: z.ZodObject<any>;
-    path: string[];
-  }>;
-  ArrayTemplate: React.FC<{
-    schema: z.ZodArray<any>;
-    path: string[];
-  }>;
+  StringTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  NumberTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  BooleanTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  BigIntTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  DateTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  ArrayTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  ObjectTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  UnionTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  TupleTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
+  EnumTemplate: React.FC<{ schema: z.$ZodType; path: string[] }>;
 };
 
+/**
+ * Props for the RenderTemplate component.
+ * This component is responsible for rendering the correct template based on the schema type.
+ *
+ * @property {z.$ZodType} schema - The Zod schema to be rendered
+ * @property {string[]} path - The path to the property corresponding to the schema
+ */
 export interface RenderTemplateProps {
-  schema: z.ZodTypeAny;
+  schema: z.$ZodType;
   path: string[];
 }
+
+/**
+ * Represents the UI schema for a property.
+ * This can be used to provide UI-specific configuration for a schema property.
+ *
+ * @property {string} component - The component to use for the property
+ * @property {Record<string, unknown>} [props] - The props to pass to the component
+ */
+export interface UISchema {
+  component: string;
+  props?: Record<string, unknown>;
+}
+
+/**
+ * Metadata type returned by the meta() method
+ */
+export interface SchemaMetadata {
+  title?: string;
+  description?: string;
+  uiSchema?: UISchema;
+  [key: string]: unknown;
+}
+
+/**
+ * Extended Zod type that includes the meta method
+ * This represents schemas that have been extended with metadata capabilities
+ */
+export interface $ZodTypeWithMeta<T = unknown, U = T> extends z.$ZodType<T, U> {
+  meta(): SchemaMetadata;
+}
diff --git a/packages/zod/src/index.ts b/packages/zod/src/index.ts
index 7d6f474..2801cb5 100644
--- a/packages/zod/src/index.ts
+++ b/packages/zod/src/index.ts
@@ -1,58 +1,65 @@
-import { z } from "zod";
 import {
   createFormProviderAndHooks,
   FormState as CoreFormState,
 } from "@react-formgen/core";
+
+import type * as z from "zod/v4/core";
 import { generateInitialData } from "./utils";
 import {
-  BaseFormRoot,
-  BaseTemplates,
   RenderTemplate as DefaultRenderTemplate,
+  FormProps,
+  FormProviderProps,
 } from "./components";
 
-const createInitialData = (schema: z.ZodTypeAny) => generateInitialData(schema);
+const createInitialData = (schema: z.$ZodType) => generateInitialData(schema);
 
-const getErrorsAtPath = (
-  errors: z.ZodIssue[],
+/**
+ * Extracts validation errors at a specific path from Zod issues
+ * @param issues - Array of Zod issues (individual validation errors)
+ * @param path - The path to check for errors
+ * @returns Array of issues at the specified path, or undefined if none found
+ */
+const getIssuesAtPath = (
+  issues: z.$ZodIssue[],
   path: string[]
-): z.ZodIssue[] | undefined => {
-  const errorMap: { [key: string]: z.ZodIssue[] } = {};
-
-  // Normalize the error paths to handle array indices
-  const normalizePath = (path: string): string => {
-    return path.replace(/\[(\d+)\]/g, ".$1");
-  };
+): z.$ZodIssue[] | undefined => {
+  // Filter issues that match the specified path
+  const pathStr = path.join(".");
 
-  errors.forEach((error) => {
-    const fullPath = normalizePath(error.path.join("."));
-    errorMap[fullPath] = errorMap[fullPath] || [];
-    errorMap[fullPath].push(error);
+  const matchingIssues = issues.filter((issue) => {
+    const issuePath = issue.path.map(String).join(".");
+    return issuePath === pathStr;
   });
 
-  const fullPath = path.join(".");
-  return errorMap[fullPath] || [];
+  return matchingIssues.length > 0 ? matchingIssues : undefined;
 };
 
+/**
+ * Create the form provider and hooks using the core factory
+ */
 const {
-  FormProvider,
+  FormProvider: CoreFormProvider,
   useFormContext,
   useFormDataAtPath,
   useErrorsAtPath,
   useArrayTemplate,
   useTemplates,
   useRenderTemplate,
-  Form,
-} = createFormProviderAndHooks<z.ZodTypeAny, z.ZodIssue>(
+  Form: CoreForm,
+} = createFormProviderAndHooks<z.$ZodType, z.$ZodIssue>(
   createInitialData,
-  getErrorsAtPath,
-  DefaultRenderTemplate,
-  BaseFormRoot,
-  BaseTemplates
+  getIssuesAtPath,
+  DefaultRenderTemplate
 );
 
-export type FormState = CoreFormState<z.ZodTypeAny, z.ZodIssue>;
+export type FormState = CoreFormState<z.$ZodType, z.$ZodIssue>;
+
+const FormProvider = CoreFormProvider as React.FC<FormProviderProps>;
+const Form = CoreForm as React.FC<FormProps>;
 
 export {
+  CoreFormProvider,
+  CoreForm,
   FormProvider,
   useFormContext,
   useFormDataAtPath,
diff --git a/packages/zod/src/utils/generateInitialData.ts b/packages/zod/src/utils/generateInitialData.ts
index 56b8fb8..a59dab7 100644
--- a/packages/zod/src/utils/generateInitialData.ts
+++ b/packages/zod/src/utils/generateInitialData.ts
@@ -1,49 +1,111 @@
-import { z, ZodTypeAny } from "zod";
-
-// Utility function to get initial data based on schema type
-export const generateInitialData = (schema: ZodTypeAny): any => {
-  // Unwrap and resolve defaults within a single function
-  while (
-    schema instanceof z.ZodEffects ||
-    schema instanceof z.ZodDefault ||
-    schema instanceof z.ZodOptional ||
-    schema instanceof z.ZodNullable
-  ) {
-    if (schema instanceof z.ZodEffects) {
-      schema = schema._def.schema;
-    } else if (schema instanceof z.ZodDefault) {
-      return schema._def.defaultValue(); // Return the default value
-    } else if (
-      schema instanceof z.ZodOptional ||
-      schema instanceof z.ZodNullable
-    ) {
-      schema = schema._def.innerType;
-    }
+import type * as z from "zod/v4/core";
+import { getDefaultValue } from "./getDefaultValue";
+import { isOptional } from "./isOptional";
+import { unwrapSchema } from "./unwrapSchema";
+
+/**
+ * Represents the possible zero state values that can be extracted from a schema
+ */
+type ZeroState =
+  | string
+  | number
+  | boolean
+  | bigint
+  | Date
+  | unknown[]
+  | undefined
+  | unknown;
+
+/**
+ * Extracts a zero state value from a Zod 4 schema
+ * @param schema - The Zod schema to extract zero state from
+ * @returns The zero state value for the schema
+ */
+export function generateInitialData(schema: z.$ZodType): ZeroState {
+  // First check for default values
+  const defaultValue = getDefaultValue(schema);
+  if (defaultValue !== undefined) {
+    return defaultValue;
   }
 
-  // Now resolve based on the unwrapped schema type
-  if (schema instanceof z.ZodString) {
-    return undefined;
-  } else if (schema instanceof z.ZodNumber) {
-    return undefined;
-  } else if (schema instanceof z.ZodBoolean) {
-    return undefined;
-  } else if (schema instanceof z.ZodDate) {
+  // Check if optional (return undefined for optional fields without defaults)
+  if (isOptional(schema)) {
+    // I'm still unsure about how to best handle optional Zod schemas when generating initial data. Keeping this for now for debugging purposes.
+    // const coreSchema = unwrapSchema(schema)
+    // console.log(
+    //   `Schema ${coreSchema._zod.def.type} / ${JSON.stringify(coreSchema, null, 2)} is optional, returning undefined`,
+    // )
+
     return undefined;
-  } else if (schema instanceof z.ZodLiteral) {
-    return schema._def.value;
-  } else if (schema instanceof z.ZodEnum) {
-    return undefined; // or schema._def.values[0] if you prefer
-  } else if (schema instanceof z.ZodArray) {
-    return [];
-  } else if (schema instanceof z.ZodObject) {
-    const result: Record<string, any> = {};
-    for (const [key, value] of Object.entries(schema.shape)) {
-      result[key] = generateInitialData(value as ZodTypeAny);
+  }
+
+  // Unwrap to get to the core schema type
+  const coreSchema = unwrapSchema(schema);
+  const def = coreSchema._zod.def;
+
+  switch (def.type) {
+    case "string":
+    case "number":
+    case "boolean":
+    case "bigint":
+    case "date":
+      return undefined;
+
+    case "array": {
+      const arraySchema = coreSchema as z.$ZodArray;
+      const minCheck = arraySchema._zod.def.checks?.find(
+        (check) => check._zod.def.check === "min_size"
+      ) as z.$ZodCheckMinSize | undefined;
+
+      if (minCheck) {
+        const minSize = minCheck._zod.def.minimum;
+        const elementZeroState = generateInitialData(
+          arraySchema._zod.def.element
+        );
+        return Array(minSize).fill(elementZeroState);
+      }
+
+      return [];
     }
-    return result;
-  } else {
-    console.error(`Unsupported schema type: ${schema._def.typeName}`);
-    return undefined;
+
+    case "object": {
+      const objectSchema = coreSchema as z.$ZodObject;
+      const shape = objectSchema._zod.def.shape;
+      const result: Record<string, unknown> = {};
+
+      for (const [key, fieldSchema] of Object.entries(shape)) {
+        const fieldZeroState = generateInitialData(fieldSchema as z.$ZodType);
+        if (fieldZeroState !== undefined) {
+          result[key] = fieldZeroState;
+        }
+      }
+
+      return result;
+    }
+
+    case "union": {
+      const unionSchema = coreSchema as z.$ZodUnion;
+      const firstOption = unionSchema._zod.def.options[0];
+      return firstOption ? generateInitialData(firstOption) : undefined;
+    }
+
+    case "tuple": {
+      const tupleSchema = coreSchema as z.$ZodTuple;
+      return tupleSchema._zod.def.items.map((item) =>
+        generateInitialData(item)
+      );
+    }
+
+    case "enum": {
+      const enumSchema = coreSchema as z.$ZodEnum;
+      const enumDef = enumSchema._zod.def as z.$ZodEnumDef;
+      // Get the first key from the enum entries object
+      const firstKey = Object.keys(enumDef.entries)[0];
+      return enumDef.entries[firstKey];
+    }
+
+    default:
+      console.error(`Unsupported schema type: ${def.type}`);
+      return undefined;
   }
-};
+}
diff --git a/packages/zod/src/utils/getDefaultValue.ts b/packages/zod/src/utils/getDefaultValue.ts
new file mode 100644
index 0000000..5b672c7
--- /dev/null
+++ b/packages/zod/src/utils/getDefaultValue.ts
@@ -0,0 +1,38 @@
+import type * as z from "zod/v4/core";
+
+/**
+ * Extracts the default value from a schema if it has one
+ * @param schema - The original schema (before unwrapping)
+ * @returns The default value if present, undefined otherwise
+ */
+export function getDefaultValue(schema: z.$ZodType): unknown {
+  const typedSchema = schema as z.$ZodTypes;
+  const def = typedSchema._zod.def;
+
+  if (def.type === "default" || def.type === "prefault") {
+    const defaultSchema = typedSchema as z.$ZodDefault;
+    const defaultValue = defaultSchema._zod.def.defaultValue;
+
+    if (typeof defaultValue === "function") {
+      return defaultValue();
+    }
+    return defaultValue;
+  }
+
+  // Check if this is a wrapper around a default/prefault
+  if (
+    def.type === "optional" ||
+    def.type === "nullable" ||
+    def.type === "readonly" ||
+    def.type === "nonoptional"
+  ) {
+    const innerSchema = typedSchema as
+      | z.$ZodOptional
+      | z.$ZodNullable
+      | z.$ZodReadonly
+      | z.$ZodNonOptional;
+    return getDefaultValue(innerSchema._zod.def.innerType);
+  }
+
+  return undefined;
+}
diff --git a/packages/zod/src/utils/index.ts b/packages/zod/src/utils/index.ts
index d524097..7b7cdc3 100644
--- a/packages/zod/src/utils/index.ts
+++ b/packages/zod/src/utils/index.ts
@@ -1,4 +1,16 @@
 import { generateInitialData } from "./generateInitialData";
-import { resolveSchema, mapToPrimaryType } from "./resolveSchema";
+import { getDefaultValue } from "./getDefaultValue";
+import { isOptional } from "./isOptional";
+import { isRequired } from "./isRequired";
+import { hasMeta, getMetadata } from "./metadata";
+import { unwrapSchema } from "./unwrapSchema";
 
-export { generateInitialData, resolveSchema, mapToPrimaryType };
+export {
+  generateInitialData,
+  getDefaultValue,
+  isOptional,
+  isRequired,
+  hasMeta,
+  getMetadata,
+  unwrapSchema,
+};
diff --git a/packages/zod/src/utils/isOptional.ts b/packages/zod/src/utils/isOptional.ts
new file mode 100644
index 0000000..a069e56
--- /dev/null
+++ b/packages/zod/src/utils/isOptional.ts
@@ -0,0 +1,30 @@
+import type * as z from "zod/v4/core";
+
+/**
+ * Checks if a schema is optional at any level of wrapping
+ * @param schema - The schema to check
+ * @returns True if the schema is optional
+ */
+export function isOptional(schema: z.$ZodType): boolean {
+  const typedSchema = schema as z.$ZodTypes;
+  const def = typedSchema._zod.def;
+
+  if (def.type === "optional") return true;
+
+  // Check nested wrappers
+  if (
+    def.type === "default" ||
+    def.type === "prefault" ||
+    def.type === "nullable" ||
+    def.type === "readonly"
+  ) {
+    const innerSchema = typedSchema as
+      | z.$ZodDefault
+      | z.$ZodPrefault
+      | z.$ZodNullable
+      | z.$ZodReadonly;
+    return isOptional(innerSchema._zod.def.innerType);
+  }
+
+  return false;
+}
diff --git a/packages/zod/src/utils/isRequired.ts b/packages/zod/src/utils/isRequired.ts
new file mode 100644
index 0000000..3b92269
--- /dev/null
+++ b/packages/zod/src/utils/isRequired.ts
@@ -0,0 +1,27 @@
+import type * as z from "zod/v4/core";
+
+/**
+ * Checks if a field is required
+ */
+export function isRequired(schema: z.$ZodType): boolean {
+  const typedSchema = schema as z.$ZodTypes;
+  const def = typedSchema._zod.def;
+
+  // Check if it's wrapped in optional
+  if (def.type === "optional") return false;
+
+  // Check nested wrappers
+  if (
+    def.type === "nullable" ||
+    def.type === "default" ||
+    def.type === "readonly"
+  ) {
+    const innerSchema = typedSchema as
+      | z.$ZodNullable
+      | z.$ZodDefault
+      | z.$ZodReadonly;
+    return isRequired(innerSchema._zod.def.innerType);
+  }
+
+  return true;
+}
diff --git a/packages/zod/src/utils/metadata.ts b/packages/zod/src/utils/metadata.ts
new file mode 100644
index 0000000..aaacf62
--- /dev/null
+++ b/packages/zod/src/utils/metadata.ts
@@ -0,0 +1,19 @@
+import type * as z from "zod/v4/core";
+import { $ZodTypeWithMeta, SchemaMetadata } from "../components";
+
+/**
+ * Type guard to check if a schema has the meta method
+ */
+export function hasMeta(schema: z.$ZodType): schema is $ZodTypeWithMeta {
+  return typeof (schema as $ZodTypeWithMeta).meta === "function";
+}
+
+/**
+ * Safely get metadata from a schema
+ */
+export function getMetadata(schema: z.$ZodType): SchemaMetadata {
+  if (hasMeta(schema)) {
+    return schema.meta();
+  }
+  return {};
+}
diff --git a/packages/zod/src/utils/resolveSchema.ts b/packages/zod/src/utils/resolveSchema.ts
deleted file mode 100644
index c443061..0000000
--- a/packages/zod/src/utils/resolveSchema.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { z } from "zod";
-
-// Helper function to resolve lazy schemas
-export const resolveSchema = (
-  schema: z.ZodTypeAny
-): z.ZodFirstPartySchemaTypes => {
-  let resolvedSchema = schema as z.ZodFirstPartySchemaTypes;
-
-  // Recursively resolve lazy schemas
-  while (resolvedSchema._def.typeName === z.ZodFirstPartyTypeKind.ZodLazy) {
-    resolvedSchema = resolvedSchema._def.getter();
-  }
-
-  while (
-    resolvedSchema._def.typeName === z.ZodFirstPartyTypeKind.ZodOptional ||
-    resolvedSchema._def.typeName === z.ZodFirstPartyTypeKind.ZodNullable ||
-    resolvedSchema._def.typeName === z.ZodFirstPartyTypeKind.ZodDefault
-  ) {
-    resolvedSchema = resolvedSchema._def
-      .innerType as z.ZodFirstPartySchemaTypes;
-  }
-
-  return resolvedSchema;
-};
-
-export const mapToPrimaryType = (
-  schema: z.ZodFirstPartySchemaTypes
-): z.ZodFirstPartySchemaTypes => {
-  switch (schema._def.typeName) {
-    case z.ZodFirstPartyTypeKind.ZodLiteral:
-      return resolveSchema(schema);
-    case z.ZodFirstPartyTypeKind.ZodEnum:
-      return resolveSchema(schema);
-    case z.ZodFirstPartyTypeKind.ZodUnion:
-      return resolveSchema(schema._def.options[0]);
-    case z.ZodFirstPartyTypeKind.ZodTuple:
-      return resolveSchema(schema._def.items[0]);
-    case z.ZodFirstPartyTypeKind.ZodEffects:
-      return resolveSchema(schema._def.schema);
-    default:
-      return schema;
-  }
-};
diff --git a/packages/zod/src/utils/unwrapSchema.ts b/packages/zod/src/utils/unwrapSchema.ts
new file mode 100644
index 0000000..1ccaf27
--- /dev/null
+++ b/packages/zod/src/utils/unwrapSchema.ts
@@ -0,0 +1,46 @@
+import type * as z from "zod/v4/core";
+
+/**
+ * Schema visitor that recursively unwraps wrapper types to get to the core schema
+ * @param schema - The Zod schema to unwrap
+ * @returns The innermost non-wrapper schema
+ */
+export function unwrapSchema(schema: z.$ZodType): z.$ZodTypes {
+  const typedSchema = schema as z.$ZodTypes;
+  const def = typedSchema._zod.def;
+
+  switch (def.type) {
+    case "optional": {
+      const optionalSchema = typedSchema as z.$ZodOptional;
+      return unwrapSchema(optionalSchema._zod.def.innerType);
+    }
+
+    case "nullable": {
+      const nullableSchema = typedSchema as z.$ZodNullable;
+      return unwrapSchema(nullableSchema._zod.def.innerType);
+    }
+
+    case "default": {
+      const defaultSchema = typedSchema as z.$ZodDefault;
+      return unwrapSchema(defaultSchema._zod.def.innerType);
+    }
+
+    case "prefault": {
+      const prefaultSchema = typedSchema as z.$ZodDefault;
+      return unwrapSchema(prefaultSchema._zod.def.innerType);
+    }
+
+    case "readonly": {
+      const readonlySchema = typedSchema as z.$ZodReadonly;
+      return unwrapSchema(readonlySchema._zod.def.innerType);
+    }
+
+    case "nonoptional": {
+      const nonOptionalSchema = typedSchema as z.$ZodNonOptional;
+      return unwrapSchema(nonOptionalSchema._zod.def.innerType);
+    }
+
+    default:
+      return typedSchema;
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a139a2a..dbbd2e4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,251 +18,6 @@ importers:
         specifier: ^3.2.5
         version: 3.3.2
 
-  examples/form-basic:
-    dependencies:
-      react:
-        specifier: ^19.0.0
-        version: 19.1.0
-      react-dom:
-        specifier: ^19.0.0
-        version: 19.1.0(react@19.1.0)
-    devDependencies:
-      '@eslint/js':
-        specifier: ^9.22.0
-        version: 9.25.0
-      '@types/react':
-        specifier: ^19.0.10
-        version: 19.1.2
-      '@types/react-dom':
-        specifier: ^19.0.4
-        version: 19.1.2(@types/react@19.1.2)
-      '@vitejs/plugin-react':
-        specifier: ^4.3.4
-        version: 4.4.1(vite@6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2))
-      eslint:
-        specifier: ^9.22.0
-        version: 9.25.0(jiti@2.4.2)
-      eslint-plugin-react-hooks:
-        specifier: ^5.2.0
-        version: 5.2.0(eslint@9.25.0(jiti@2.4.2))
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.19
-        version: 0.4.19(eslint@9.25.0(jiti@2.4.2))
-      globals:
-        specifier: ^16.0.0
-        version: 16.0.0
-      typescript:
-        specifier: ~5.7.2
-        version: 5.7.3
-      typescript-eslint:
-        specifier: ^8.26.1
-        version: 8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.7.3)
-      vite:
-        specifier: ^6.3.1
-        version: 6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2)
-
-  examples/form-shadcn:
-    dependencies:
-      '@hookform/resolvers':
-        specifier: ^5.0.1
-        version: 5.0.1(react-hook-form@7.56.1(react@19.1.0))
-      '@radix-ui/react-accordion':
-        specifier: ^1.2.8
-        version: 1.2.8(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-alert-dialog':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-aspect-ratio':
-        specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-avatar':
-        specifier: ^1.1.7
-        version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.2.3
-        version: 1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-collapsible':
-        specifier: ^1.1.8
-        version: 1.1.8(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-context-menu':
-        specifier: ^2.2.12
-        version: 2.2.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-dialog':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.12
-        version: 2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-hover-card':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.4
-        version: 2.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-menubar':
-        specifier: ^1.1.12
-        version: 1.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-navigation-menu':
-        specifier: ^1.2.10
-        version: 1.2.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-popover':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-progress':
-        specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.3.4
-        version: 1.3.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-scroll-area':
-        specifier: ^1.2.6
-        version: 1.2.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-select':
-        specifier: ^2.2.2
-        version: 2.2.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slider':
-        specifier: ^1.3.2
-        version: 1.3.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot':
-        specifier: ^1.2.0
-        version: 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.2.2
-        version: 1.2.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.9
-        version: 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle':
-        specifier: ^1.1.6
-        version: 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle-group':
-        specifier: ^1.1.7
-        version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.2.4
-        version: 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@react-formgen/json-schema':
-        specifier: workspace:*
-        version: link:../../packages/json-schema
-      '@tailwindcss/vite':
-        specifier: ^4.1.4
-        version: 4.1.4(vite@6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2))
-      ajv:
-        specifier: ^8.17.1
-        version: 8.17.1
-      ajv-errors:
-        specifier: ^3.0.0
-        version: 3.0.0(ajv@8.17.1)
-      ajv-formats:
-        specifier: ^3.0.1
-        version: 3.0.1(ajv@8.17.1)
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      cmdk:
-        specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      date-fns:
-        specifier: ^4.1.0
-        version: 4.1.0
-      embla-carousel-react:
-        specifier: ^8.6.0
-        version: 8.6.0(react@19.1.0)
-      input-otp:
-        specifier: ^1.4.2
-        version: 1.4.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      json-schema:
-        specifier: ^0.4.0
-        version: 0.4.0
-      lucide-react:
-        specifier: ^0.503.0
-        version: 0.503.0(react@19.1.0)
-      next-themes:
-        specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react:
-        specifier: ^19.0.0
-        version: 19.1.0
-      react-day-picker:
-        specifier: 8.10.1
-        version: 8.10.1(date-fns@4.1.0)(react@19.1.0)
-      react-dom:
-        specifier: ^19.0.0
-        version: 19.1.0(react@19.1.0)
-      react-hook-form:
-        specifier: ^7.56.1
-        version: 7.56.1(react@19.1.0)
-      react-resizable-panels:
-        specifier: ^2.1.8
-        version: 2.1.8(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      recharts:
-        specifier: ^2.15.3
-        version: 2.15.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      sonner:
-        specifier: ^2.0.3
-        version: 2.0.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      tailwind-merge:
-        specifier: ^3.2.0
-        version: 3.2.0
-      tailwindcss:
-        specifier: ^4.1.4
-        version: 4.1.4
-      vaul:
-        specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      zod:
-        specifier: ^3.23.8
-        version: 3.23.8
-    devDependencies:
-      '@eslint/js':
-        specifier: ^9.22.0
-        version: 9.25.0
-      '@types/json-schema':
-        specifier: ^7.0.15
-        version: 7.0.15
-      '@types/node':
-        specifier: ^20.14.8
-        version: 20.14.8
-      '@types/react':
-        specifier: ^19.0.10
-        version: 19.1.2
-      '@types/react-dom':
-        specifier: ^19.0.4
-        version: 19.1.2(@types/react@19.1.2)
-      '@vitejs/plugin-react':
-        specifier: ^4.3.4
-        version: 4.4.1(vite@6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2))
-      eslint:
-        specifier: ^9.22.0
-        version: 9.25.0(jiti@2.4.2)
-      eslint-plugin-react-hooks:
-        specifier: ^5.2.0
-        version: 5.2.0(eslint@9.25.0(jiti@2.4.2))
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.19
-        version: 0.4.19(eslint@9.25.0(jiti@2.4.2))
-      globals:
-        specifier: ^16.0.0
-        version: 16.0.0
-      tw-animate-css:
-        specifier: ^1.2.8
-        version: 1.2.8
-      typescript:
-        specifier: ~5.7.2
-        version: 5.7.3
-      typescript-eslint:
-        specifier: ^8.26.1
-        version: 8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.7.3)
-      vite:
-        specifier: ^6.3.1
-        version: 6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2)
-
   packages/core:
     dependencies:
       nanoid:
@@ -295,13 +50,13 @@ importers:
         version: 7.13.1(eslint@8.57.0)(typescript@5.7.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.1
-        version: 4.4.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))
+        version: 4.4.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))
       '@vitest/coverage-istanbul':
         specifier: ^2.0.4
-        version: 2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2))
+        version: 2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1))
       '@vitest/coverage-v8':
         specifier: ^2.0.4
-        version: 2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2))
+        version: 2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1))
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -328,10 +83,10 @@ importers:
         version: 5.7.3
       vite:
         specifier: ^5.3.1
-        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
       vitest:
         specifier: ^2.0.4
-        version: 2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2)
+        version: 2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1)
 
   packages/json-schema:
     dependencies:
@@ -368,7 +123,7 @@ importers:
         version: 7.13.1(eslint@8.57.0)(typescript@5.5.2)
       '@vitejs/plugin-react':
         specifier: ^4.3.1
-        version: 4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))
+        version: 4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -392,7 +147,7 @@ importers:
         version: 5.5.2
       vite:
         specifier: ^5.3.1
-        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
 
   packages/yup:
     dependencies:
@@ -420,7 +175,7 @@ importers:
         version: 7.13.1(eslint@8.57.0)(typescript@5.5.2)
       '@vitejs/plugin-react':
         specifier: ^4.3.1
-        version: 4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))
+        version: 4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -444,7 +199,7 @@ importers:
         version: 5.5.2
       vite:
         specifier: ^5.3.1
-        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
 
   packages/zod:
     dependencies:
@@ -452,8 +207,8 @@ importers:
         specifier: workspace:*
         version: link:../core
       zod:
-        specifier: ^3.23.8
-        version: 3.23.8
+        specifier: ^3.25.61
+        version: 3.25.67
     devDependencies:
       '@types/node':
         specifier: ^20.14.8
@@ -472,7 +227,7 @@ importers:
         version: 7.13.1(eslint@8.57.0)(typescript@5.5.2)
       '@vitejs/plugin-react':
         specifier: ^4.3.1
-        version: 4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))
+        version: 4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -496,7 +251,7 @@ importers:
         version: 5.5.2
       vite:
         specifier: ^5.3.1
-        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+        version: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
 
   website:
     dependencies:
@@ -509,6 +264,15 @@ importers:
       '@react-formgen/zod':
         specifier: workspace:*
         version: link:../packages/zod
+      '@tailwindcss/forms':
+        specifier: ^0.5.10
+        version: 0.5.10(tailwindcss@4.1.11)
+      '@tailwindcss/typography':
+        specifier: ^0.5.16
+        version: 0.5.16(tailwindcss@4.1.11)
+      '@tailwindcss/vite':
+        specifier: ^4.1.3
+        version: 4.1.11(vite@6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1))
       ajv:
         specifier: ^8.17.1
         version: 8.17.1
@@ -524,9 +288,15 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.1.0(react@19.1.0)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@19.1.0)
       react-router-dom:
         specifier: ^7.5.1
         version: 7.5.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      tailwindcss:
+        specifier: ^4.1.3
+        version: 4.1.11
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
@@ -534,54 +304,63 @@ importers:
         specifier: ^1.4.0
         version: 1.4.0
       zod:
-        specifier: ^3.23.8
-        version: 3.23.8
+        specifier: ^3.25.61
+        version: 3.25.67
       zustand:
         specifier: ^5.0.3
         version: 5.0.3(@types/react@19.1.2)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0))
     devDependencies:
       '@eslint/js':
-        specifier: ^9.22.0
+        specifier: ^9.19.0
         version: 9.25.0
       '@types/json-schema':
         specifier: ^7.0.15
         version: 7.0.15
       '@types/node':
-        specifier: ^20.14.8
-        version: 20.14.8
+        specifier: ^22.13.4
+        version: 22.15.34
       '@types/react':
-        specifier: ^19.0.10
+        specifier: ^19.0.8
         version: 19.1.2
       '@types/react-dom':
-        specifier: ^19.0.4
+        specifier: ^19.0.3
         version: 19.1.2(@types/react@19.1.2)
       '@types/uuid':
         specifier: ^10.0.0
         version: 10.0.0
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.4.1(vite@6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2))
+        version: 4.4.1(vite@6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1))
       eslint:
-        specifier: ^9.22.0
+        specifier: ^9.19.0
         version: 9.25.0(jiti@2.4.2)
+      eslint-config-prettier:
+        specifier: ^10.0.1
+        version: 10.1.5(eslint@9.25.0(jiti@2.4.2))
       eslint-plugin-react-hooks:
-        specifier: ^5.2.0
+        specifier: ^5.0.0
         version: 5.2.0(eslint@9.25.0(jiti@2.4.2))
       eslint-plugin-react-refresh:
-        specifier: ^0.4.19
+        specifier: ^0.4.18
         version: 0.4.19(eslint@9.25.0(jiti@2.4.2))
       globals:
-        specifier: ^16.0.0
-        version: 16.0.0
+        specifier: ^15.14.0
+        version: 15.15.0
+      prettier:
+        specifier: ^3.5.1
+        version: 3.6.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.13(prettier@3.6.2)
       typescript:
         specifier: ~5.7.2
         version: 5.7.3
       typescript-eslint:
-        specifier: ^8.26.1
+        specifier: ^8.22.0
         version: 8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.7.3)
       vite:
-        specifier: ^6.3.1
-        version: 6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2)
+        specifier: ^6.1.0
+        version: 6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1)
 
 packages:
 
@@ -1162,26 +941,6 @@ packages:
     resolution: {integrity: sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/core@1.6.9':
-    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
-
-  '@floating-ui/dom@1.6.13':
-    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
-
-  '@floating-ui/react-dom@2.1.2':
-    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@floating-ui/utils@0.2.9':
-    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
-
-  '@hookform/resolvers@5.0.1':
-    resolution: {integrity: sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==}
-    peerDependencies:
-      react-hook-form: ^7.55.0
-
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1215,6 +974,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
   '@istanbuljs/schema@0.1.3':
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
@@ -1256,707 +1019,95 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@radix-ui/number@1.1.1':
-    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+  '@rollup/rollup-android-arm-eabi@4.18.0':
+    resolution: {integrity: sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==}
+    cpu: [arm]
+    os: [android]
 
-  '@radix-ui/primitive@1.1.2':
-    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+  '@rollup/rollup-android-arm-eabi@4.40.0':
+    resolution: {integrity: sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==}
+    cpu: [arm]
+    os: [android]
 
-  '@radix-ui/react-accordion@1.2.8':
-    resolution: {integrity: sha512-c7OKBvO36PfQIUGIjj1Wko0hH937pYFU2tR5zbIJDUsmTzHoZVHHt4bmb7OOJbzTaWJtVELKWojBHa7OcnUHmQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-android-arm64@4.18.0':
+    resolution: {integrity: sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==}
+    cpu: [arm64]
+    os: [android]
 
-  '@radix-ui/react-alert-dialog@1.1.11':
-    resolution: {integrity: sha512-4KfkwrFnAw3Y5Jeoq6G+JYSKW0JfIS3uDdFC/79Jw9AsMayZMizSSMxk1gkrolYXsa/WzbbDfOA7/D8N5D+l1g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-android-arm64@4.40.0':
+    resolution: {integrity: sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==}
+    cpu: [arm64]
+    os: [android]
 
-  '@radix-ui/react-arrow@1.1.4':
-    resolution: {integrity: sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-darwin-arm64@4.18.0':
+    resolution: {integrity: sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@radix-ui/react-aspect-ratio@1.1.4':
-    resolution: {integrity: sha512-ie2mUDtM38LBqVU+Xn+GIY44tWM5yVbT5uXO+th85WZxUUsgEdWNNZWecqqGzkQ4Af+Fq1mYT6TyQ/uUf5gfcw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-darwin-arm64@4.40.0':
+    resolution: {integrity: sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@radix-ui/react-avatar@1.1.7':
-    resolution: {integrity: sha512-V7ODUt4mUoJTe3VUxZw6nfURxaPALVqmDQh501YmaQsk3D8AZQrOPRnfKn4H7JGDLBc0KqLhT94H79nV88ppNg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-darwin-x64@4.18.0':
+    resolution: {integrity: sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@radix-ui/react-checkbox@1.2.3':
-    resolution: {integrity: sha512-pHVzDYsnaDmBlAuwim45y3soIN8H4R7KbkSVirGhXO+R/kO2OLCe0eucUEbddaTcdMHHdzcIGHtZSMSQlA+apw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-darwin-x64@4.40.0':
+    resolution: {integrity: sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@radix-ui/react-collapsible@1.1.8':
-    resolution: {integrity: sha512-hxEsLvK9WxIAPyxdDRULL4hcaSjMZCfP7fHB0Z1uUnDoDBat1Zh46hwYfa69DeZAbJrPckjf0AGAtEZyvDyJbw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-freebsd-arm64@4.40.0':
+    resolution: {integrity: sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==}
+    cpu: [arm64]
+    os: [freebsd]
 
-  '@radix-ui/react-collection@1.1.4':
-    resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-freebsd-x64@4.40.0':
+    resolution: {integrity: sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-arm-gnueabihf@4.18.0':
+    resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-context-menu@2.2.12':
-    resolution: {integrity: sha512-5UFKuTMX8F2/KjHvyqu9IYT8bEtDSCJwwIx1PghBo4jh9S6jJVsceq9xIjqsOVcxsynGwV5eaqPE3n/Cu+DrSA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.0':
+    resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-context@1.1.2':
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-arm-musleabihf@4.18.0':
+    resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-dialog@1.1.11':
-    resolution: {integrity: sha512-yI7S1ipkP5/+99qhSI6nthfo/tR6bL6Zgxi/+1UO6qPa6UeM6nlafWcQ65vB4rU2XjgjMfMhI3k9Y5MztA62VQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-linux-arm-musleabihf@4.40.0':
+    resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-direction@1.1.1':
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-arm64-gnu@4.18.0':
+    resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@radix-ui/react-dismissable-layer@1.1.7':
-    resolution: {integrity: sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-linux-arm64-gnu@4.40.0':
+    resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@radix-ui/react-dropdown-menu@2.1.12':
-    resolution: {integrity: sha512-VJoMs+BWWE7YhzEQyVwvF9n22Eiyr83HotCVrMQzla/OwRovXCgah7AcaEr4hMNj4gJxSdtIbcHGvmJXOoJVHA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-linux-arm64-musl@4.18.0':
+    resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@radix-ui/react-focus-guards@1.1.2':
-    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-focus-scope@1.1.4':
-    resolution: {integrity: sha512-r2annK27lIW5w9Ho5NyQgqs0MmgZSTIKXWpVCJaLC1q2kZrZkcqnmHkCHMEmv8XLvsLlurKMPT+kbKkRkm/xVA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-hover-card@1.1.11':
-    resolution: {integrity: sha512-q9h9grUpGZKR3MNhtVCLVnPGmx1YnzBgGR+O40mhSNGsUnkR+LChVH8c7FB0mkS+oudhd8KAkZGTJPJCjdAPIg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-label@2.1.4':
-    resolution: {integrity: sha512-wy3dqizZnZVV4ja0FNnUhIWNwWdoldXrneEyUcVtLYDAt8ovGS4ridtMAOGgXBBIfggL4BOveVWsjXDORdGEQg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-menu@2.1.12':
-    resolution: {integrity: sha512-+qYq6LfbiGo97Zz9fioX83HCiIYYFNs8zAsVCMQrIakoNYylIzWuoD/anAD3UzvvR6cnswmfRFJFq/zYYq/k7Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-menubar@1.1.12':
-    resolution: {integrity: sha512-bM2vT5nxRqJH/d1vFQ9jLsW4qR70yFQw2ZD1TUPWUNskDsV0eYeMbbNJqxNjGMOVogEkOJaHtu11kzYdTJvVJg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-navigation-menu@1.2.10':
-    resolution: {integrity: sha512-kGDqMVPj2SRB1vJmXN/jnhC66REAXNyDmDRubbbmJ+360zSIJUDmWGMKIJOf72PHMwPENrbtJVb3CMAUJDjEIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popover@1.1.11':
-    resolution: {integrity: sha512-yFMfZkVA5G3GJnBgb2PxrrcLKm1ZLWXrbYVgdyTl//0TYEIHS9LJbnyz7WWcZ0qCq7hIlJZpRtxeSeIG5T5oJw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popper@1.2.4':
-    resolution: {integrity: sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-portal@1.1.6':
-    resolution: {integrity: sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-presence@1.1.4':
-    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-primitive@2.1.0':
-    resolution: {integrity: sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-progress@1.1.4':
-    resolution: {integrity: sha512-8rl9w7lJdcVPor47Dhws9mUHRHLE+8JEgyJRdNWCpGPa6HIlr3eh+Yn9gyx1CnCLbw5naHsI2gaO9dBWO50vzw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-radio-group@1.3.4':
-    resolution: {integrity: sha512-N4J9QFdW5zcJNxxY/zwTXBN4Uc5VEuRM7ZLjNfnWoKmNvgrPtNNw4P8zY532O3qL6aPkaNO+gY9y6bfzmH4U1g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-roving-focus@1.1.7':
-    resolution: {integrity: sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-scroll-area@1.2.6':
-    resolution: {integrity: sha512-lj8OMlpPERXrQIHlEQdlXHJoRT52AMpBrgyPYylOhXYq5e/glsEdtOc/kCQlsTdtgN5U0iDbrrolDadvektJGQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-select@2.2.2':
-    resolution: {integrity: sha512-HjkVHtBkuq+r3zUAZ/CvNWUGKPfuicGDbgtZgiQuFmNcV5F+Tgy24ep2nsAW2nFgvhGPJVqeBZa6KyVN0EyrBA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-separator@1.1.4':
-    resolution: {integrity: sha512-2fTm6PSiUm8YPq9W0E4reYuv01EE3aFSzt8edBiXqPHshF8N9+Kymt/k0/R+F3dkY5lQyB/zPtrP82phskLi7w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slider@1.3.2':
-    resolution: {integrity: sha512-oQnqfgSiYkxZ1MrF6672jw2/zZvpB+PJsrIc3Zm1zof1JHf/kj7WhmROw7JahLfOwYQ5/+Ip0rFORgF1tjSiaQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slot@1.2.0':
-    resolution: {integrity: sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-switch@1.2.2':
-    resolution: {integrity: sha512-7Z8n6L+ifMIIYZ83f28qWSceUpkXuslI2FJ34+kDMTiyj91ENdpdQ7VCidrzj5JfwfZTeano/BnGBbu/jqa5rQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tabs@1.1.9':
-    resolution: {integrity: sha512-KIjtwciYvquiW/wAFkELZCVnaNLBsYNhTNcvl+zfMAbMhRkcvNuCLXDDd22L0j7tagpzVh/QwbFpwAATg7ILPw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle-group@1.1.7':
-    resolution: {integrity: sha512-GRaPJhxrRSOqAcmcX3MwRL/SZACkoYdmoY9/sg7Bd5DhBYsB2t4co0NxTvVW8H7jUmieQDQwRtUlZ5Ta8UbgJA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle@1.1.6':
-    resolution: {integrity: sha512-3SeJxKeO3TO1zVw1Nl++Cp0krYk6zHDHMCUXXVkosIzl6Nxcvb07EerQpyD2wXQSJ5RZajrYAmPaydU8Hk1IyQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.2.4':
-    resolution: {integrity: sha512-DyW8VVeeMSSLFvAmnVnCwvI3H+1tpJFHT50r+tdOoMse9XqYDBCcyux8u3G2y+LOpt7fPQ6KKH0mhs+ce1+Z5w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-is-hydrated@0.1.0':
-    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-visually-hidden@1.2.0':
-    resolution: {integrity: sha512-rQj0aAWOpCdCMRbI6pLQm8r7S2BM3YhTa0SzOYD55k+hJA8oo9J+H+9wLM9oMlZWOX/wJWPTzfDfmZkf7LvCfg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-
-  '@rollup/rollup-android-arm-eabi@4.18.0':
-    resolution: {integrity: sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm-eabi@4.40.0':
-    resolution: {integrity: sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.18.0':
-    resolution: {integrity: sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.40.0':
-    resolution: {integrity: sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-darwin-arm64@4.18.0':
-    resolution: {integrity: sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-arm64@4.40.0':
-    resolution: {integrity: sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.18.0':
-    resolution: {integrity: sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.40.0':
-    resolution: {integrity: sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-freebsd-arm64@4.40.0':
-    resolution: {integrity: sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@rollup/rollup-freebsd-x64@4.40.0':
-    resolution: {integrity: sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.18.0':
-    resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.40.0':
-    resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.18.0':
-    resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.40.0':
-    resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-gnu@4.18.0':
-    resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-gnu@4.40.0':
-    resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-musl@4.18.0':
-    resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-musl@4.40.0':
-    resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
-    cpu: [arm64]
-    os: [linux]
+  '@rollup/rollup-linux-arm64-musl@4.40.0':
+    resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
+    cpu: [arm64]
+    os: [linux]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.40.0':
     resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
@@ -2048,68 +1199,70 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@standard-schema/utils@0.3.0':
-    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+  '@tailwindcss/forms@0.5.10':
+    resolution: {integrity: sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
 
-  '@tailwindcss/node@4.1.4':
-    resolution: {integrity: sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==}
+  '@tailwindcss/node@4.1.11':
+    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
 
-  '@tailwindcss/oxide-android-arm64@4.1.4':
-    resolution: {integrity: sha512-xMMAe/SaCN/vHfQYui3fqaBDEXMu22BVwQ33veLc8ep+DNy7CWN52L+TTG9y1K397w9nkzv+Mw+mZWISiqhmlA==}
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.4':
-    resolution: {integrity: sha512-JGRj0SYFuDuAGilWFBlshcexev2hOKfNkoX+0QTksKYq2zgF9VY/vVMq9m8IObYnLna0Xlg+ytCi2FN2rOL0Sg==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.4':
-    resolution: {integrity: sha512-sdDeLNvs3cYeWsEJ4H1DvjOzaGios4QbBTNLVLVs0XQ0V95bffT3+scptzYGPMjm7xv4+qMhCDrkHwhnUySEzA==}
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.4':
-    resolution: {integrity: sha512-VHxAqxqdghM83HslPhRsNhHo91McsxRJaEnShJOMu8mHmEj9Ig7ToHJtDukkuLWLzLboh2XSjq/0zO6wgvykNA==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
-    resolution: {integrity: sha512-OTU/m/eV4gQKxy9r5acuesqaymyeSCnsx1cFto/I1WhPmi5HDxX1nkzb8KYBiwkHIGg7CTfo/AcGzoXAJBxLfg==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
-    resolution: {integrity: sha512-hKlLNvbmUC6z5g/J4H+Zx7f7w15whSVImokLPmP6ff1QqTVE+TxUM9PGuNsjHvkvlHUtGTdDnOvGNSEUiXI1Ww==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
-    resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
-    resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
-    resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
-    resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
     bundledDependencies:
@@ -2120,26 +1273,31 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
-    resolution: {integrity: sha512-VlnhfilPlO0ltxW9/BgfLI5547PYzqBMPIzRrk4W7uupgCt8z6Trw/tAj6QUtF2om+1MH281Pg+HHUJoLesmng==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
-    resolution: {integrity: sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.4':
-    resolution: {integrity: sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ==}
+  '@tailwindcss/oxide@4.1.11':
+    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
     engines: {node: '>= 10'}
 
-  '@tailwindcss/vite@4.1.4':
-    resolution: {integrity: sha512-4UQeMrONbvrsXKXXp/uxmdEN5JIJ9RkH7YVzs6AMxC/KC1+Np7WZBaNIco7TEjlkthqxZbt8pU/ipD+hKjm80A==}
+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
-      vite: ^5.2.0 || ^6
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
+  '@tailwindcss/vite@4.1.11':
+    resolution: {integrity: sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
 
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
@@ -2179,33 +1337,6 @@ packages:
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
-  '@types/d3-array@3.2.1':
-    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
-
-  '@types/d3-color@3.1.3':
-    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
-
-  '@types/d3-ease@3.0.2':
-    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
-
-  '@types/d3-interpolate@3.0.4':
-    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
-
-  '@types/d3-path@3.1.1':
-    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
-
-  '@types/d3-scale@4.0.9':
-    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
-
-  '@types/d3-shape@3.1.7':
-    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
-
-  '@types/d3-time@3.0.4':
-    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
-
-  '@types/d3-timer@3.0.2':
-    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
-
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -2218,6 +1349,9 @@ packages:
   '@types/node@20.14.8':
     resolution: {integrity: sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==}
 
+  '@types/node@22.15.34':
+    resolution: {integrity: sha512-8Y6E5WUupYy1Dd0II32BsWAx5MWdcnRd8L84Oys3veg1YrYtNtzgO4CFhiBg6MDSjk7Ay36HYOnU7/tuOzIzcw==}
+
   '@types/react-dom@19.1.2':
     resolution: {integrity: sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==}
     peerDependencies:
@@ -2411,11 +1545,6 @@ packages:
     resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
     engines: {node: '>= 14'}
 
-  ajv-errors@3.0.0:
-    resolution: {integrity: sha512-V3wD15YHfHz6y0KdhYFjyy9vWtEVALT9UrxfN3zqlI6dMioHnJrqOYfyPKol3oqrnCM9uwkcdCwkJ0WUcbLMTQ==}
-    peerDependencies:
-      ajv: ^8.0.1
-
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
     peerDependencies:
@@ -2460,10 +1589,6 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.4:
-    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
-    engines: {node: '>=10'}
-
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -2543,23 +1668,14 @@ packages:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
 
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
 
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
-  clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
-    engines: {node: '>=6'}
-
-  cmdk@1.1.1:
-    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^18 || ^19 || ^19.0.0-rc
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -2598,6 +1714,11 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   cssstyle@4.3.1:
     resolution: {integrity: sha512-ZgW+Jgdd7i52AaLYCriF8Mxqft0gD/R9i9wi6RWBhs1pqdPEzPjym7rvRKi397WmQFf3SlyUsszhw+VVCbx79Q==}
     engines: {node: '>=18'}
@@ -2605,57 +1726,10 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  d3-array@3.2.4:
-    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
-    engines: {node: '>=12'}
-
-  d3-color@3.1.0:
-    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
-    engines: {node: '>=12'}
-
-  d3-ease@3.0.1:
-    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
-    engines: {node: '>=12'}
-
-  d3-format@3.1.0:
-    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
-    engines: {node: '>=12'}
-
-  d3-interpolate@3.0.1:
-    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
-    engines: {node: '>=12'}
-
-  d3-path@3.1.0:
-    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
-    engines: {node: '>=12'}
-
-  d3-scale@4.0.2:
-    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
-    engines: {node: '>=12'}
-
-  d3-shape@3.2.0:
-    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
-    engines: {node: '>=12'}
-
-  d3-time-format@4.1.0:
-    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
-    engines: {node: '>=12'}
-
-  d3-time@3.1.0:
-    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
-    engines: {node: '>=12'}
-
-  d3-timer@3.0.1:
-    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
-    engines: {node: '>=12'}
-
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
 
-  date-fns@4.1.0:
-    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
-
   debug@4.3.5:
     resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
     engines: {node: '>=6.0'}
@@ -2674,9 +1748,6 @@ packages:
       supports-color:
         optional: true
 
-  decimal.js-light@2.5.1:
-    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
-
   decimal.js@10.5.0:
     resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
@@ -2703,9 +1774,6 @@ packages:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -2720,9 +1788,6 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
-  dom-helpers@5.2.1:
-    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
-
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2736,27 +1801,14 @@ packages:
   electron-to-chromium@1.5.139:
     resolution: {integrity: sha512-GGnRYOTdN5LYpwbIr0rwP/ZHOQSvAF6TG0LSzp28uCBb9JiXHJGmaaKw29qjNJc5bGnnp6kXJqRnGMQoELwi5w==}
 
-  embla-carousel-react@8.6.0:
-    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
-  embla-carousel-reactive-utils@8.6.0:
-    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
-    peerDependencies:
-      embla-carousel: 8.6.0
-
-  embla-carousel@8.6.0:
-    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
-
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  enhanced-resolve@5.18.1:
-    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
+  enhanced-resolve@5.18.2:
+    resolution: {integrity: sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==}
     engines: {node: '>=10.13.0'}
 
   entities@4.5.0:
@@ -2808,6 +1860,12 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  eslint-config-prettier@10.1.5:
+    resolution: {integrity: sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
   eslint-plugin-react-hooks@4.6.2:
     resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
     engines: {node: '>=10'}
@@ -2889,9 +1947,6 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  eventemitter3@4.0.7:
-    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
-
   expect-type@1.2.1:
     resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
     engines: {node: '>=12.0.0'}
@@ -2899,10 +1954,6 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-equals@5.2.2:
-    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
-    engines: {node: '>=6.0.0'}
-
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -2985,10 +2036,6 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
-  get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -3021,8 +2068,8 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@16.0.0:
-    resolution: {integrity: sha512-iInW14XItCXET01CQFqudPOWP2jYMl7T+QRQT+UNcR/iQncN/F0UNpgd76iFkBPgNQb4+X3LV9tLJYzwh+Gl3A==}
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
   globby@11.1.0:
@@ -3101,16 +2148,6 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  input-otp@1.4.2:
-    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
-    peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
-
-  internmap@2.0.3:
-    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
-    engines: {node: '>=12'}
-
   is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
@@ -3226,84 +2263,86 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  lightningcss-darwin-arm64@1.29.2:
-    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.29.2:
-    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.29.2:
-    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.29.2:
-    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.29.2:
-    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-arm64-musl@1.29.2:
-    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-x64-gnu@1.29.2:
-    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-linux-x64-musl@1.29.2:
-    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-win32-arm64-msvc@1.29.2:
-    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.29.2:
-    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.29.2:
-    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
     engines: {node: '>= 12.0.0'}
 
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
   loupe@3.1.3:
     resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
@@ -3313,11 +2352,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@0.503.0:
-    resolution: {integrity: sha512-HGGkdlPWQ0vTF8jJ5TdIqhQXZi6uh3LnNgfZ8MHiuxFfX3RZeA79r2MW2tHAZKlAVfoNE8esm3p+O6VkIvpj6w==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -3356,6 +2390,10 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
+  mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -3367,6 +2405,15 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -3386,12 +2433,6 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  next-themes@0.4.6:
-    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
-    peerDependencies:
-      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-
   node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
 
@@ -3401,10 +2442,6 @@ packages:
   nwsapi@2.2.20:
     resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
 
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3475,6 +2512,10 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss@8.4.38:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -3487,18 +2528,75 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-tailwindcss@0.6.13:
+    resolution: {integrity: sha512-uQ0asli1+ic8xrrSmIOaElDu0FacR4x69GynTh2oZjFY10JUt6EEumTQl5tB4fMeD6I1naKd+4rXQQ7esT2i1g==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@3.3.2:
     resolution: {integrity: sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==}
     engines: {node: '>=14'}
     hasBin: true
 
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-
   property-expr@2.0.6:
     resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
 
@@ -3515,32 +2613,19 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  react-day-picker@8.10.1:
-    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
-    peerDependencies:
-      date-fns: ^2.28.0 || ^3.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   react-dom@19.1.0:
     resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
       react: ^19.1.0
 
-  react-hook-form@7.56.1:
-    resolution: {integrity: sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ==}
-    engines: {node: '>=18.0.0'}
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
     peerDependencies:
-      react: ^16.8.0 || ^17 || ^18 || ^19
-
-  react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+      react: '*'
 
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
-
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -3549,32 +2634,6 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
-  react-remove-scroll-bar@2.3.8:
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.6.3:
-    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-resizable-panels@2.1.8:
-    resolution: {integrity: sha512-oDvD0sw34Ecx00cQFLiRJpAE2fCgNLBr8DMrBzkrsaUiLpAycIQoY3eAWfMblDql3pTIMZ60wJ/P89RO1htM2w==}
-    peerDependencies:
-      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
   react-router-dom@7.5.1:
     resolution: {integrity: sha512-5DPSPc7ENrt2tlKPq0FtpG80ZbqA9aIKEyqX6hSNJDlol/tr6iqCK4crqdsusmOSSotq6zDsn0y3urX9TuTNmA==}
     engines: {node: '>=20.0.0'}
@@ -3592,42 +2651,10 @@ packages:
       react-dom:
         optional: true
 
-  react-smooth@4.0.4:
-    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  react-style-singleton@2.2.3:
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-transition-group@4.4.5:
-    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
-    peerDependencies:
-      react: '>=16.6.0'
-      react-dom: '>=16.6.0'
-
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
-  recharts-scale@0.4.5:
-    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
-
-  recharts@2.15.3:
-    resolution: {integrity: sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -3742,12 +2769,6 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
-  sonner@2.0.3:
-    resolution: {integrity: sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==}
-    peerDependencies:
-      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -3801,16 +2822,17 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  tailwind-merge@3.2.0:
-    resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
-
-  tailwindcss@4.1.4:
-    resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
+  tailwindcss@4.1.11:
+    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
 
-  tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+  tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
     engines: {node: '>=6'}
 
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
   test-exclude@7.0.1:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
@@ -3821,9 +2843,6 @@ packages:
   tiny-case@1.0.3:
     resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==}
 
-  tiny-invariant@1.3.3:
-    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -3877,15 +2896,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
-
   turbo-stream@2.4.0:
     resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==}
 
-  tw-animate-css@1.2.8:
-    resolution: {integrity: sha512-AxSnYRvyFnAiZCUndS3zQZhNfV/B77ZhJ+O7d3K6wfg/jKJY+yv6ahuyXwnyaYA9UdLqnpCwhTRv9pPTBnPR2g==}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -3918,6 +2931,9 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
   universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
@@ -3940,44 +2956,18 @@ packages:
   url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
 
-  use-callback-ref@1.3.3:
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sidecar@1.1.3:
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   use-sync-external-store@1.5.0:
     resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   uuid@11.1.0:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
-  vaul@1.1.2:
-    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
-    peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
-
-  victory-vendor@36.9.2:
-    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
-
   vite-node@2.1.9:
     resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4147,6 +3137,10 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -4162,8 +3156,8 @@ packages:
   yup@1.4.0:
     resolution: {integrity: sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==}
 
-  zod@3.23.8:
-    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+  zod@3.25.67:
+    resolution: {integrity: sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==}
 
   zustand@4.5.6:
     resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
@@ -4423,1042 +3417,371 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.10)':
-    dependencies:
-      '@babel/core': 7.26.10
-      '@babel/helper-plugin-utils': 7.26.5
-
-  '@babel/runtime@7.27.0':
-    dependencies:
-      regenerator-runtime: 0.14.1
-
-  '@babel/runtime@7.27.6': {}
-
-  '@babel/template@7.24.7':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-
-  '@babel/template@7.27.0':
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/parser': 7.27.0
-      '@babel/types': 7.27.0
-
-  '@babel/traverse@7.24.7':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-hoist-variables': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-      debug: 4.4.0
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/traverse@7.27.0':
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.27.0
-      '@babel/parser': 7.27.0
-      '@babel/template': 7.27.0
-      '@babel/types': 7.27.0
-      debug: 4.4.0
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/types@7.24.7':
-    dependencies:
-      '@babel/helper-string-parser': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
-
-  '@babel/types@7.27.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
-
-  '@bcoe/v8-coverage@0.2.3': {}
-
-  '@csstools/color-helpers@5.0.2': {}
-
-  '@csstools/css-calc@2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
-      '@csstools/css-tokenizer': 3.0.3
-
-  '@csstools/css-color-parser@3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
-    dependencies:
-      '@csstools/color-helpers': 5.0.2
-      '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
-      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
-      '@csstools/css-tokenizer': 3.0.3
-
-  '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)':
-    dependencies:
-      '@csstools/css-tokenizer': 3.0.3
-
-  '@csstools/css-tokenizer@3.0.3': {}
-
-  '@esbuild/aix-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/aix-ppc64@0.25.2':
-    optional: true
-
-  '@esbuild/android-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm64@0.25.2':
-    optional: true
-
-  '@esbuild/android-arm@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm@0.25.2':
-    optional: true
-
-  '@esbuild/android-x64@0.21.5':
-    optional: true
-
-  '@esbuild/android-x64@0.25.2':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.25.2':
-    optional: true
-
-  '@esbuild/darwin-x64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-x64@0.25.2':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.25.2':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.25.2':
-    optional: true
-
-  '@esbuild/linux-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm64@0.25.2':
-    optional: true
-
-  '@esbuild/linux-arm@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm@0.25.2':
-    optional: true
-
-  '@esbuild/linux-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ia32@0.25.2':
-    optional: true
-
-  '@esbuild/linux-loong64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-loong64@0.25.2':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.21.5':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.25.2':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.25.2':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.25.2':
-    optional: true
-
-  '@esbuild/linux-s390x@0.21.5':
-    optional: true
-
-  '@esbuild/linux-s390x@0.25.2':
-    optional: true
-
-  '@esbuild/linux-x64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-x64@0.25.2':
-    optional: true
-
-  '@esbuild/netbsd-arm64@0.25.2':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.25.2':
-    optional: true
-
-  '@esbuild/openbsd-arm64@0.25.2':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.25.2':
-    optional: true
-
-  '@esbuild/sunos-x64@0.21.5':
-    optional: true
-
-  '@esbuild/sunos-x64@0.25.2':
-    optional: true
-
-  '@esbuild/win32-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-arm64@0.25.2':
-    optional: true
-
-  '@esbuild/win32-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/win32-ia32@0.25.2':
-    optional: true
-
-  '@esbuild/win32-x64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-x64@0.25.2':
-    optional: true
-
-  '@eslint-community/eslint-utils@4.4.0(eslint@8.57.0)':
-    dependencies:
-      eslint: 8.57.0
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.25.0(jiti@2.4.2))':
+  '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.10)':
     dependencies:
-      eslint: 9.25.0(jiti@2.4.2)
-      eslint-visitor-keys: 3.4.3
+      '@babel/core': 7.26.10
+      '@babel/helper-plugin-utils': 7.26.5
 
-  '@eslint-community/regexpp@4.10.1': {}
+  '@babel/runtime@7.27.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
 
-  '@eslint-community/regexpp@4.12.1': {}
+  '@babel/runtime@7.27.6': {}
 
-  '@eslint/config-array@0.20.0':
+  '@babel/template@7.24.7':
     dependencies:
-      '@eslint/object-schema': 2.1.6
-      debug: 4.4.0
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/config-helpers@0.2.1': {}
+      '@babel/code-frame': 7.24.7
+      '@babel/parser': 7.24.7
+      '@babel/types': 7.24.7
 
-  '@eslint/core@0.13.0':
+  '@babel/template@7.27.0':
     dependencies:
-      '@types/json-schema': 7.0.15
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
 
-  '@eslint/eslintrc@2.1.4':
+  '@babel/traverse@7.24.7':
     dependencies:
-      ajv: 6.12.6
-      debug: 4.3.5
-      espree: 9.6.1
-      globals: 13.24.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
+      '@babel/code-frame': 7.24.7
+      '@babel/generator': 7.24.7
+      '@babel/helper-environment-visitor': 7.24.7
+      '@babel/helper-function-name': 7.24.7
+      '@babel/helper-hoist-variables': 7.24.7
+      '@babel/helper-split-export-declaration': 7.24.7
+      '@babel/parser': 7.24.7
+      '@babel/types': 7.24.7
+      debug: 4.4.0
+      globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/eslintrc@3.3.1':
+  '@babel/traverse@7.27.0':
     dependencies:
-      ajv: 6.12.6
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.27.0
+      '@babel/parser': 7.27.0
+      '@babel/template': 7.27.0
+      '@babel/types': 7.27.0
       debug: 4.4.0
-      espree: 10.3.0
-      globals: 14.0.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
+      globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@8.57.0': {}
-
-  '@eslint/js@9.25.0': {}
-
-  '@eslint/object-schema@2.1.6': {}
-
-  '@eslint/plugin-kit@0.2.8':
-    dependencies:
-      '@eslint/core': 0.13.0
-      levn: 0.4.1
-
-  '@floating-ui/core@1.6.9':
+  '@babel/types@7.24.7':
     dependencies:
-      '@floating-ui/utils': 0.2.9
+      '@babel/helper-string-parser': 7.24.7
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
 
-  '@floating-ui/dom@1.6.13':
+  '@babel/types@7.27.0':
     dependencies:
-      '@floating-ui/core': 1.6.9
-      '@floating-ui/utils': 0.2.9
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
 
-  '@floating-ui/react-dom@2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@floating-ui/dom': 1.6.13
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+  '@bcoe/v8-coverage@0.2.3': {}
 
-  '@floating-ui/utils@0.2.9': {}
+  '@csstools/color-helpers@5.0.2': {}
 
-  '@hookform/resolvers@5.0.1(react-hook-form@7.56.1(react@19.1.0))':
+  '@csstools/css-calc@2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
     dependencies:
-      '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.56.1(react@19.1.0)
-
-  '@humanfs/core@0.19.1': {}
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
 
-  '@humanfs/node@0.16.6':
+  '@csstools/css-color-parser@3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
     dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.3.1
+      '@csstools/color-helpers': 5.0.2
+      '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
 
-  '@humanwhocodes/config-array@0.11.14':
+  '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)':
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.5
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/object-schema@2.0.3': {}
+      '@csstools/css-tokenizer': 3.0.3
 
-  '@humanwhocodes/retry@0.3.1': {}
+  '@csstools/css-tokenizer@3.0.3': {}
 
-  '@humanwhocodes/retry@0.4.2': {}
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
 
-  '@isaacs/cliui@8.0.2':
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+  '@esbuild/aix-ppc64@0.25.2':
+    optional: true
 
-  '@istanbuljs/schema@0.1.3': {}
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
 
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.25
+  '@esbuild/android-arm64@0.25.2':
+    optional: true
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  '@esbuild/android-arm@0.21.5':
+    optional: true
 
-  '@jridgewell/set-array@1.2.1': {}
+  '@esbuild/android-arm@0.25.2':
+    optional: true
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
+  '@esbuild/android-x64@0.21.5':
+    optional: true
 
-  '@jridgewell/sourcemap-codec@1.5.0': {}
+  '@esbuild/android-x64@0.25.2':
+    optional: true
 
-  '@jridgewell/trace-mapping@0.3.25':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
 
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
+  '@esbuild/darwin-arm64@0.25.2':
+    optional: true
 
-  '@nodelib/fs.stat@2.0.5': {}
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
 
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
+  '@esbuild/darwin-x64@0.25.2':
+    optional: true
 
-  '@pkgjs/parseargs@0.11.0':
+  '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
-  '@radix-ui/number@1.1.1': {}
+  '@esbuild/freebsd-arm64@0.25.2':
+    optional: true
 
-  '@radix-ui/primitive@1.1.2': {}
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-accordion@1.2.8(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collapsible': 1.1.8(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/freebsd-x64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-alert-dialog@1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dialog': 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-arrow@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-arm64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-aspect-ratio@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
 
-  '@radix-ui/react-avatar@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-arm@0.25.2':
+    optional: true
 
-  '@radix-ui/react-checkbox@1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
 
-  '@radix-ui/react-collapsible@1.1.8(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-ia32@0.25.2':
+    optional: true
 
-  '@radix-ui/react-collection@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.2)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+  '@esbuild/linux-loong64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-context-menu@2.2.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-menu': 2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.1.2)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+  '@esbuild/linux-mips64el@0.25.2':
+    optional: true
 
-  '@radix-ui/react-dialog@1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.2)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.1.2)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+  '@esbuild/linux-ppc64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-dropdown-menu@2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-menu': 2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-riscv64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.2)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
 
-  '@radix-ui/react-focus-scope@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-s390x@0.25.2':
+    optional: true
 
-  '@radix-ui/react-hover-card@1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.1.2)(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+  '@esbuild/linux-x64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-label@2.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/netbsd-arm64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-menu@2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.2)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-menubar@1.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-menu': 2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/netbsd-x64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-navigation-menu@1.2.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/openbsd-arm64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-popover@1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.2)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-popper@1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-arrow': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/rect': 1.1.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/openbsd-x64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-portal@1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/sunos-x64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-primitive@2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-progress@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/win32-arm64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-radio-group@1.3.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
 
-  '@radix-ui/react-roving-focus@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/win32-ia32@0.25.2':
+    optional: true
 
-  '@radix-ui/react-scroll-area@1.2.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
 
-  '@radix-ui/react-select@2.2.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      aria-hidden: 1.2.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.3(@types/react@19.1.2)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@esbuild/win32-x64@0.25.2':
+    optional: true
 
-  '@radix-ui/react-separator@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@eslint-community/eslint-utils@4.4.0(eslint@8.57.0)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
-
-  '@radix-ui/react-slider@1.3.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+      eslint: 8.57.0
+      eslint-visitor-keys: 3.4.3
 
-  '@radix-ui/react-slot@1.2.0(@types/react@19.1.2)(react@19.1.0)':
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.25.0(jiti@2.4.2))':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      eslint: 9.25.0(jiti@2.4.2)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.10.1': {}
+
+  '@eslint-community/regexpp@4.12.1': {}
 
-  '@radix-ui/react-switch@1.2.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@eslint/config-array@0.20.0':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  '@radix-ui/react-tabs@1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@eslint/config-helpers@0.2.1': {}
+
+  '@eslint/core@0.13.0':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+      '@types/json-schema': 7.0.15
 
-  '@radix-ui/react-toggle-group@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@eslint/eslintrc@2.1.4':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+      ajv: 6.12.6
+      debug: 4.3.5
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@radix-ui/react-toggle@1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@eslint/eslintrc@3.3.1':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+      ajv: 6.12.6
+      debug: 4.4.0
+      espree: 10.3.0
+      globals: 14.0.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@radix-ui/react-tooltip@1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+  '@eslint/js@8.57.0': {}
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.2)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+  '@eslint/js@9.25.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.2)(react@19.1.0)':
+  '@eslint/plugin-kit@0.2.8':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      '@eslint/core': 0.13.0
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.1': {}
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.2)(react@19.1.0)':
+  '@humanfs/node@0.16.6':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.2)(react@19.1.0)':
+  '@humanwhocodes/config-array@0.11.14':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.3.5
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/object-schema@2.0.3': {}
+
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.2': {}
 
-  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.2)(react@19.1.0)':
+  '@isaacs/cliui@8.0.2':
     dependencies:
-      react: 19.1.0
-      use-sync-external-store: 1.5.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.2)(react@19.1.0)':
+  '@isaacs/fs-minipass@4.0.1':
     dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      minipass: 7.1.2
+
+  '@istanbuljs/schema@0.1.3': {}
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.2)(react@19.1.0)':
+  '@jridgewell/gen-mapping@0.3.5':
     dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.4.15': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.2)(react@19.1.0)':
+  '@jridgewell/trace-mapping@0.3.25':
     dependencies:
-      '@radix-ui/rect': 1.1.1
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.2)(react@19.1.0)':
+  '@nodelib/fs.scandir@2.1.5':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.2
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
 
-  '@radix-ui/react-visually-hidden@1.2.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@nodelib/fs.walk@1.2.8':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.17.1
 
-  '@radix-ui/rect@1.1.1': {}
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
 
   '@rollup/rollup-android-arm-eabi@4.18.0':
     optional: true
@@ -5568,72 +3891,89 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.40.0':
     optional: true
 
-  '@standard-schema/utils@0.3.0': {}
+  '@tailwindcss/forms@0.5.10(tailwindcss@4.1.11)':
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 4.1.11
 
-  '@tailwindcss/node@4.1.4':
+  '@tailwindcss/node@4.1.11':
     dependencies:
-      enhanced-resolve: 5.18.1
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.2
       jiti: 2.4.2
-      lightningcss: 1.29.2
-      tailwindcss: 4.1.4
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.11
 
-  '@tailwindcss/oxide-android-arm64@4.1.4':
+  '@tailwindcss/oxide-android-arm64@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.4':
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.4':
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.4':
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
     optional: true
 
-  '@tailwindcss/oxide@4.1.4':
+  '@tailwindcss/oxide@4.1.11':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.4
-      '@tailwindcss/oxide-darwin-arm64': 4.1.4
-      '@tailwindcss/oxide-darwin-x64': 4.1.4
-      '@tailwindcss/oxide-freebsd-x64': 4.1.4
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.4
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.4
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.4
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.4
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.4
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.4
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.4
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.4
-
-  '@tailwindcss/vite@4.1.4(vite@6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2))':
-    dependencies:
-      '@tailwindcss/node': 4.1.4
-      '@tailwindcss/oxide': 4.1.4
-      tailwindcss: 4.1.4
-      vite: 6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2)
+      '@tailwindcss/oxide-android-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-x64': 4.1.11
+      '@tailwindcss/oxide-freebsd-x64': 4.1.11
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.1.11)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.1.11
+
+  '@tailwindcss/vite@4.1.11(vite@6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1))':
+    dependencies:
+      '@tailwindcss/node': 4.1.11
+      '@tailwindcss/oxide': 4.1.11
+      tailwindcss: 4.1.11
+      vite: 6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1)
 
   '@testing-library/dom@10.4.0':
     dependencies:
@@ -5689,30 +4029,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.24.7
 
-  '@types/d3-array@3.2.1': {}
-
-  '@types/d3-color@3.1.3': {}
-
-  '@types/d3-ease@3.0.2': {}
-
-  '@types/d3-interpolate@3.0.4':
-    dependencies:
-      '@types/d3-color': 3.1.3
-
-  '@types/d3-path@3.1.1': {}
-
-  '@types/d3-scale@4.0.9':
-    dependencies:
-      '@types/d3-time': 3.0.4
-
-  '@types/d3-shape@3.1.7':
-    dependencies:
-      '@types/d3-path': 3.1.1
-
-  '@types/d3-time@3.0.4': {}
-
-  '@types/d3-timer@3.0.2': {}
-
   '@types/estree@1.0.5': {}
 
   '@types/estree@1.0.7': {}
@@ -5723,6 +4039,10 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
+  '@types/node@22.15.34':
+    dependencies:
+      undici-types: 6.21.0
+
   '@types/react-dom@19.1.2(@types/react@19.1.2)':
     dependencies:
       '@types/react': 19.1.2
@@ -5962,40 +4282,40 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react@4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))':
+  '@vitejs/plugin-react@4.3.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.24.7)
       '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.24.7)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@4.4.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))':
+  '@vitejs/plugin-react@4.4.1(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))':
     dependencies:
       '@babel/core': 7.26.10
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10)
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@4.4.1(vite@6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2))':
+  '@vitejs/plugin-react@4.4.1(vite@6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1))':
     dependencies:
       '@babel/core': 7.26.10
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10)
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2)
+      vite: 6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-istanbul@2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2))':
+  '@vitest/coverage-istanbul@2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1))':
     dependencies:
       '@istanbuljs/schema': 0.1.3
       debug: 4.4.0
@@ -6007,11 +4327,11 @@ snapshots:
       magicast: 0.3.5
       test-exclude: 7.0.1
       tinyrainbow: 1.2.0
-      vitest: 2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2)
+      vitest: 2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2))':
+  '@vitest/coverage-v8@2.1.9(vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -6025,7 +4345,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 1.2.0
-      vitest: 2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2)
+      vitest: 2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -6036,13 +4356,13 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.9(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))':
+  '@vitest/mocker@2.1.9(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))':
     dependencies:
       '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
 
   '@vitest/pretty-format@2.1.9':
     dependencies:
@@ -6083,10 +4403,6 @@ snapshots:
 
   agent-base@7.1.3: {}
 
-  ajv-errors@3.0.0(ajv@8.17.1):
-    dependencies:
-      ajv: 8.17.1
-
   ajv-formats@3.0.1(ajv@8.16.0):
     optionalDependencies:
       ajv: 8.16.0
@@ -6134,10 +4450,6 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.4:
-    dependencies:
-      tslib: 2.8.1
-
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -6218,9 +4530,7 @@ snapshots:
 
   check-error@2.1.1: {}
 
-  class-variance-authority@0.7.1:
-    dependencies:
-      clsx: 2.1.1
+  chownr@3.0.0: {}
 
   cliui@8.0.1:
     dependencies:
@@ -6228,20 +4538,6 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
-  clsx@2.1.1: {}
-
-  cmdk@1.1.1(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-dialog': 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -6278,6 +4574,8 @@ snapshots:
 
   css.escape@1.5.1: {}
 
+  cssesc@3.0.0: {}
+
   cssstyle@4.3.1:
     dependencies:
       '@asamuzakjp/css-color': 3.1.3
@@ -6285,51 +4583,11 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  d3-array@3.2.4:
-    dependencies:
-      internmap: 2.0.3
-
-  d3-color@3.1.0: {}
-
-  d3-ease@3.0.1: {}
-
-  d3-format@3.1.0: {}
-
-  d3-interpolate@3.0.1:
-    dependencies:
-      d3-color: 3.1.0
-
-  d3-path@3.1.0: {}
-
-  d3-scale@4.0.2:
-    dependencies:
-      d3-array: 3.2.4
-      d3-format: 3.1.0
-      d3-interpolate: 3.0.1
-      d3-time: 3.1.0
-      d3-time-format: 4.1.0
-
-  d3-shape@3.2.0:
-    dependencies:
-      d3-path: 3.1.0
-
-  d3-time-format@4.1.0:
-    dependencies:
-      d3-time: 3.1.0
-
-  d3-time@3.1.0:
-    dependencies:
-      d3-array: 3.2.4
-
-  d3-timer@3.0.1: {}
-
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
 
-  date-fns@4.1.0: {}
-
   debug@4.3.5:
     dependencies:
       ms: 2.1.2
@@ -6338,8 +4596,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  decimal.js-light@2.5.1: {}
-
   decimal.js@10.5.0: {}
 
   deep-eql@5.0.2: {}
@@ -6354,8 +4610,6 @@ snapshots:
 
   detect-libc@2.0.4: {}
 
-  detect-node-es@1.1.0: {}
-
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -6368,11 +4622,6 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
-  dom-helpers@5.2.1:
-    dependencies:
-      '@babel/runtime': 7.27.0
-      csstype: 3.1.3
-
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -6385,26 +4634,14 @@ snapshots:
 
   electron-to-chromium@1.5.139: {}
 
-  embla-carousel-react@8.6.0(react@19.1.0):
-    dependencies:
-      embla-carousel: 8.6.0
-      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
-      react: 19.1.0
-
-  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
-    dependencies:
-      embla-carousel: 8.6.0
-
-  embla-carousel@8.6.0: {}
-
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
-  enhanced-resolve@5.18.1:
+  enhanced-resolve@5.18.2:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.2.1
+      tapable: 2.2.2
 
   entities@4.5.0: {}
 
@@ -6487,6 +4724,10 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  eslint-config-prettier@10.1.5(eslint@9.25.0(jiti@2.4.2)):
+    dependencies:
+      eslint: 9.25.0(jiti@2.4.2)
+
   eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -6634,14 +4875,10 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  eventemitter3@4.0.7: {}
-
   expect-type@1.2.1: {}
 
   fast-deep-equal@3.1.3: {}
 
-  fast-equals@5.2.2: {}
-
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -6730,8 +4967,6 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
-  get-nonce@1.0.1: {}
-
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -6771,7 +5006,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@16.0.0: {}
+  globals@15.15.0: {}
 
   globby@11.1.0:
     dependencies:
@@ -6844,13 +5079,6 @@ snapshots:
 
   inherits@2.0.4: {}
 
-  input-otp@1.4.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
-  internmap@2.0.3: {}
-
   is-docker@2.2.1: {}
 
   is-extglob@2.1.1: {}
@@ -6971,63 +5199,63 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lightningcss-darwin-arm64@1.29.2:
+  lightningcss-darwin-arm64@1.30.1:
     optional: true
 
-  lightningcss-darwin-x64@1.29.2:
+  lightningcss-darwin-x64@1.30.1:
     optional: true
 
-  lightningcss-freebsd-x64@1.29.2:
+  lightningcss-freebsd-x64@1.30.1:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.29.2:
+  lightningcss-linux-arm-gnueabihf@1.30.1:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.29.2:
+  lightningcss-linux-arm64-gnu@1.30.1:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.29.2:
+  lightningcss-linux-arm64-musl@1.30.1:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.29.2:
+  lightningcss-linux-x64-gnu@1.30.1:
     optional: true
 
-  lightningcss-linux-x64-musl@1.29.2:
+  lightningcss-linux-x64-musl@1.30.1:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.29.2:
+  lightningcss-win32-arm64-msvc@1.30.1:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.29.2:
+  lightningcss-win32-x64-msvc@1.30.1:
     optional: true
 
-  lightningcss@1.29.2:
+  lightningcss@1.30.1:
     dependencies:
       detect-libc: 2.0.4
     optionalDependencies:
-      lightningcss-darwin-arm64: 1.29.2
-      lightningcss-darwin-x64: 1.29.2
-      lightningcss-freebsd-x64: 1.29.2
-      lightningcss-linux-arm-gnueabihf: 1.29.2
-      lightningcss-linux-arm64-gnu: 1.29.2
-      lightningcss-linux-arm64-musl: 1.29.2
-      lightningcss-linux-x64-gnu: 1.29.2
-      lightningcss-linux-x64-musl: 1.29.2
-      lightningcss-win32-arm64-msvc: 1.29.2
-      lightningcss-win32-x64-msvc: 1.29.2
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
 
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
+  lodash.castarray@4.4.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
   lodash.merge@4.6.2: {}
 
   lodash@4.17.21: {}
 
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
   loupe@3.1.3: {}
 
   lru-cache@10.4.3: {}
@@ -7036,10 +5264,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.503.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-
   lz-string@1.5.0: {}
 
   magic-string@0.30.17:
@@ -7073,6 +5297,8 @@ snapshots:
 
   min-indent@1.0.1: {}
 
+  mini-svg-data-uri@1.4.4: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -7083,6 +5309,12 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
+  mkdirp@3.0.1: {}
+
   ms@2.1.2: {}
 
   ms@2.1.3: {}
@@ -7093,19 +5325,12 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
   node-releases@2.0.14: {}
 
   node-releases@2.0.19: {}
 
   nwsapi@2.2.20: {}
 
-  object-assign@4.1.1: {}
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -7168,6 +5393,11 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.4.38:
     dependencies:
       nanoid: 3.3.11
@@ -7182,20 +5412,20 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-tailwindcss@0.6.13(prettier@3.6.2):
+    dependencies:
+      prettier: 3.6.2
+
   prettier@3.3.2: {}
 
+  prettier@3.6.2: {}
+
   pretty-format@27.5.1:
     dependencies:
       ansi-regex: 5.0.1
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  prop-types@15.8.1:
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-
   property-expr@2.0.6: {}
 
   psl@1.9.0: {}
@@ -7206,54 +5436,21 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-day-picker@8.10.1(date-fns@4.1.0)(react@19.1.0):
-    dependencies:
-      date-fns: 4.1.0
-      react: 19.1.0
-
   react-dom@19.1.0(react@19.1.0):
     dependencies:
       react: 19.1.0
       scheduler: 0.26.0
 
-  react-hook-form@7.56.1(react@19.1.0):
+  react-icons@5.5.0(react@19.1.0):
     dependencies:
       react: 19.1.0
 
-  react-is@16.13.1: {}
-
   react-is@17.0.2: {}
 
-  react-is@18.3.1: {}
-
   react-refresh@0.14.2: {}
 
   react-refresh@0.17.0: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.1.2)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-style-singleton: 2.2.3(@types/react@19.1.2)(react@19.1.0)
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.2
-
-  react-remove-scroll@2.6.3(@types/react@19.1.2)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-remove-scroll-bar: 2.3.8(@types/react@19.1.2)(react@19.1.0)
-      react-style-singleton: 2.2.3(@types/react@19.1.2)(react@19.1.0)
-      tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.1.2)(react@19.1.0)
-      use-sidecar: 1.1.3(@types/react@19.1.2)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-
-  react-resizable-panels@2.1.8(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
   react-router-dom@7.5.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -7269,50 +5466,8 @@ snapshots:
     optionalDependencies:
       react-dom: 19.1.0(react@19.1.0)
 
-  react-smooth@4.0.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      fast-equals: 5.2.2
-      prop-types: 15.8.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-transition-group: 4.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-
-  react-style-singleton@2.2.3(@types/react@19.1.2)(react@19.1.0):
-    dependencies:
-      get-nonce: 1.0.1
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.2
-
-  react-transition-group@4.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      '@babel/runtime': 7.27.0
-      dom-helpers: 5.2.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
   react@19.1.0: {}
 
-  recharts-scale@0.4.5:
-    dependencies:
-      decimal.js-light: 2.5.1
-
-  recharts@2.15.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      clsx: 2.1.1
-      eventemitter3: 4.0.7
-      lodash: 4.17.21
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-is: 18.3.1
-      react-smooth: 4.0.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      recharts-scale: 0.4.5
-      tiny-invariant: 1.3.3
-      victory-vendor: 36.9.2
-
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -7434,11 +5589,6 @@ snapshots:
 
   slash@3.0.0: {}
 
-  sonner@2.0.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
   source-map-js@1.2.0: {}
 
   source-map-js@1.2.1: {}
@@ -7485,11 +5635,18 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
-  tailwind-merge@3.2.0: {}
+  tailwindcss@4.1.11: {}
 
-  tailwindcss@4.1.4: {}
+  tapable@2.2.2: {}
 
-  tapable@2.2.1: {}
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
 
   test-exclude@7.0.1:
     dependencies:
@@ -7501,8 +5658,6 @@ snapshots:
 
   tiny-case@1.0.3: {}
 
-  tiny-invariant@1.3.3: {}
-
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -7549,12 +5704,8 @@ snapshots:
     dependencies:
       typescript: 5.7.3
 
-  tslib@2.8.1: {}
-
   turbo-stream@2.4.0: {}
 
-  tw-animate-css@1.2.8: {}
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -7579,6 +5730,8 @@ snapshots:
 
   undici-types@5.26.5: {}
 
+  undici-types@6.21.0: {}
+
   universalify@0.2.0: {}
 
   update-browserslist-db@1.0.16(browserslist@4.23.1):
@@ -7602,60 +5755,21 @@ snapshots:
       querystringify: 2.2.0
       requires-port: 1.0.0
 
-  use-callback-ref@1.3.3(@types/react@19.1.2)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.2
-
-  use-sidecar@1.1.3(@types/react@19.1.2)(react@19.1.0):
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.2
-
   use-sync-external-store@1.5.0(react@19.1.0):
     dependencies:
       react: 19.1.0
 
+  util-deprecate@1.0.2: {}
+
   uuid@11.1.0: {}
 
-  vaul@1.1.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      '@radix-ui/react-dialog': 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-
-  victory-vendor@36.9.2:
-    dependencies:
-      '@types/d3-array': 3.2.1
-      '@types/d3-ease': 3.0.2
-      '@types/d3-interpolate': 3.0.4
-      '@types/d3-scale': 4.0.9
-      '@types/d3-shape': 3.1.7
-      '@types/d3-time': 3.0.4
-      '@types/d3-timer': 3.0.2
-      d3-array: 3.2.4
-      d3-ease: 3.0.1
-      d3-interpolate: 3.0.1
-      d3-scale: 4.0.2
-      d3-shape: 3.2.0
-      d3-time: 3.1.0
-      d3-timer: 3.0.1
-
-  vite-node@2.1.9(@types/node@20.14.8)(lightningcss@1.29.2):
+  vite-node@2.1.9(@types/node@20.14.8)(lightningcss@1.30.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 1.1.2
-      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
+      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -7666,7 +5780,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2):
+  vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.38
@@ -7674,9 +5788,9 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.14.8
       fsevents: 2.3.3
-      lightningcss: 1.29.2
+      lightningcss: 1.30.1
 
-  vite@6.3.2(@types/node@20.14.8)(jiti@2.4.2)(lightningcss@1.29.2):
+  vite@6.3.2(@types/node@22.15.34)(jiti@2.4.2)(lightningcss@1.30.1):
     dependencies:
       esbuild: 0.25.2
       fdir: 6.4.4(picomatch@4.0.2)
@@ -7685,15 +5799,15 @@ snapshots:
       rollup: 4.40.0
       tinyglobby: 0.2.13
     optionalDependencies:
-      '@types/node': 20.14.8
+      '@types/node': 22.15.34
       fsevents: 2.3.3
       jiti: 2.4.2
-      lightningcss: 1.29.2
+      lightningcss: 1.30.1
 
-  vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.29.2):
+  vitest@2.1.9(@types/node@20.14.8)(jsdom@24.1.3)(lightningcss@1.30.1):
     dependencies:
       '@vitest/expect': 2.1.9
-      '@vitest/mocker': 2.1.9(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.29.2))
+      '@vitest/mocker': 2.1.9(vite@5.3.1(@types/node@20.14.8)(lightningcss@1.30.1))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.9
       '@vitest/snapshot': 2.1.9
@@ -7709,8 +5823,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 1.2.0
-      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.29.2)
-      vite-node: 2.1.9(@types/node@20.14.8)(lightningcss@1.29.2)
+      vite: 5.3.1(@types/node@20.14.8)(lightningcss@1.30.1)
+      vite-node: 2.1.9(@types/node@20.14.8)(lightningcss@1.30.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 20.14.8
@@ -7777,6 +5891,8 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yallist@5.0.0: {}
+
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2:
@@ -7798,7 +5914,7 @@ snapshots:
       toposort: 2.0.2
       type-fest: 2.19.0
 
-  zod@3.23.8: {}
+  zod@3.25.67: {}
 
   zustand@4.5.6(@types/react@19.1.2)(react@19.1.0):
     dependencies:
diff --git a/website/.prettierrc b/website/.prettierrc
index 7a791a7..20c87ce 100644
--- a/website/.prettierrc
+++ b/website/.prettierrc
@@ -2,5 +2,6 @@
   "singleQuote": true,
   "semi": false,
   "trailingComma": "all",
-  "useTabs": true
+  "tailwindStylesheet": "./src/index.css",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/website/eslint.config.js b/website/eslint.config.js
index 5ed949b..05c6f57 100644
--- a/website/eslint.config.js
+++ b/website/eslint.config.js
@@ -3,26 +3,28 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
 
 export default tseslint.config(
-	{ ignores: ['dist'] },
-	{
-		extends: [js.configs.recommended, ...tseslint.configs.recommended],
-		files: ['**/*.{ts,tsx}'],
-		languageOptions: {
-			ecmaVersion: 2020,
-			globals: globals.browser,
-		},
-		plugins: {
-			'react-hooks': reactHooks,
-			'react-refresh': reactRefresh,
-		},
-		rules: {
-			...reactHooks.configs.recommended.rules,
-			'react-refresh/only-export-components': [
-				'warn',
-				{ allowConstantExport: true },
-			],
-		},
-	},
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+  eslintConfigPrettier,
 )
diff --git a/website/index.html b/website/index.html
index e4b78ea..c5b8077 100644
--- a/website/index.html
+++ b/website/index.html
@@ -2,9 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/m6.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>@react-formgen</title>
+    <script>
+      // Apply theme immediately to prevent flash
+      ;(function (storageKey = 'vite-ui-theme') {
+        const stored = localStorage.getItem(storageKey)
+        const prefersDark = window.matchMedia(
+          '(prefers-color-scheme: dark)',
+        ).matches
+        const isDark = stored ? stored === 'true' : prefersDark
+
+        // Apply theme class immediately if needed
+        if (isDark) document.documentElement.classList.add('dark')
+      })()
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/website/package.json b/website/package.json
index 7ad17d6..893e8a2 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,43 +1,57 @@
 {
-	"name": "website",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc -b && vite build",
-		"lint": "eslint .",
-		"preview": "vite preview"
-	},
-	"dependencies": {
-		"@react-formgen/json-schema": "0.0.0-alpha.25",
-		"@react-formgen/yup": "0.0.0-alpha.25",
-		"@react-formgen/zod": "0.0.0-alpha.25",
-		"ajv": "^8.17.1",
-		"ajv-formats": "^3.0.1",
-		"json-schema": "^0.4.0",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
-		"react-router-dom": "^7.5.1",
-		"uuid": "^11.1.0",
-		"yup": "^1.4.0",
-		"zod": "^3.23.8",
-		"zustand": "^5.0.3"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.22.0",
-		"@types/json-schema": "^7.0.15",
-		"@types/node": "^20.14.8",
-		"@types/react": "^19.0.10",
-		"@types/react-dom": "^19.0.4",
-		"@types/uuid": "^10.0.0",
-		"@vitejs/plugin-react": "^4.3.4",
-		"eslint": "^9.22.0",
-		"eslint-plugin-react-hooks": "^5.2.0",
-		"eslint-plugin-react-refresh": "^0.4.19",
-		"globals": "^16.0.0",
-		"typescript": "~5.7.2",
-		"typescript-eslint": "^8.26.1",
-		"vite": "^6.3.1"
-	}
+  "name": "website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\""
+  },
+  "dependencies": {
+    "@react-formgen/json-schema": "0.0.0-alpha.26",
+    "@react-formgen/yup": "0.0.0-alpha.26",
+    "@react-formgen/zod": "0.0.0-alpha.26",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
+    "json-schema": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.5.1",
+    "uuid": "^11.1.0",
+    "yup": "^1.4.0",
+    "zod": "^3.25.61",
+    "tailwindcss": "^4.1.3",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/json-schema": "^7.0.15",
+    "@types/node": "^22.13.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "prettier": "^3.5.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
 }
diff --git a/website/public/m6.svg b/website/public/m6.svg
new file mode 100644
index 0000000..4575787
--- /dev/null
+++ b/website/public/m6.svg
@@ -0,0 +1,35 @@
+<svg id="e4261ebc-e7c5-486b-8286-44d486b8367b" data-name="m6io with lines" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
+  <g>
+    <g>
+      <polygon points="846.112 299.88 846.112 700.12 500 900 153.888 700.12 153.888 299.88 500 100 846.112 299.88" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+      <g>
+        <line x1="500" y1="100" x2="500" y2="500" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+        <line x1="846.11212" y1="699.88013" x2="500" y2="500" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+        <line x1="153.88785" y1="699.88013" x2="500" y2="500" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+      </g>
+    </g>
+    <g>
+      <polygon points="500 100 153.888 299.88 153.888 300.12 500 500 500 100" fill="#d1fae5" opacity="0.5"/>
+      <polygon points="153.888 300.12 153.888 699.88 500 500 153.888 300.12" fill="#d1fae5" opacity="0.5"/>
+      <polygon points="153.888 699.88 153.888 700.12 500 900 500 500 153.888 699.88" fill="#d1fae5" opacity="0.5"/>
+      <polygon points="500 100 500 500 846.112 300.12 846.112 299.88 500 100" fill="#d1fae5" opacity="0.5"/>
+      <polygon points="846.112 699.88 846.112 300.12 500 500 846.112 699.88" fill="#d1fae5" opacity="0.5"/>
+      <polygon points="500 900 846.112 700.12 846.112 699.88 500 500 500 900" fill="#d1fae5" opacity="0.5"/>
+    </g>
+    <g>
+      <polygon points="672.974 500.088 672.864 700.147 759.389 750.102 759.584 750.102 759.584 449.807 672.974 500.088" fill="#34d399"/>
+      <path d="M759.58478,349.98444,500,499.8559V599.95435l259.58411-149.8711c0,10.05445.00006,300.01886.0025,300.01886l86.52557-49.95544V300.02905Z" fill="#064e3b"/>
+      <polygon points="327.026 500.088 240.416 449.807 240.416 750.102 240.611 750.102 327.136 700.147 327.026 500.088" fill="#064e3b"/>
+      <path d="M500,499.8559,240.41522,349.98444l-86.5274-49.95539V700.14667l86.52557,49.95544c.00244,0,.0025-289.96441.0025-300.01886L500,599.95435Z" fill="#34d399"/>
+      <polygon points="759.587 249.886 500 399.758 240.413 249.886 153.888 299.841 153.89 300.029 240.416 349.984 500 499.856 759.584 349.984 846.11 300.029 846.112 299.841 759.587 249.886" fill="#059669"/>
+    </g>
+    <g>
+      <polygon points="846.112 299.88 846.112 700.12 500 900 153.888 700.12 153.888 299.88 500 100 846.112 299.88" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+      <g>
+        <line x1="500" y1="500" x2="500" y2="900" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+        <line x1="500" y1="500" x2="153.88785" y2="300.11987" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+        <line x1="500" y1="500" x2="846.11212" y2="300.11987" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/website/src/App.css b/website/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/website/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/website/src/App.tsx b/website/src/App.tsx
index ff54c0d..924874b 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -1,222 +1,293 @@
 import React, { useState, useEffect } from 'react'
 import {
-	BrowserRouter as Router,
-	Routes,
-	Route,
-	useNavigate,
-	useLocation,
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useNavigate,
+  useLocation,
 } from 'react-router-dom'
+import { MdDarkMode, MdLightMode, MdExpandMore } from 'react-icons/md'
 import {
-	JsonSchemaExample,
-	JsonSchemaComplexExample,
-	JsonSchemaWithRecursiveRefsExample,
-	JsonSchemaWithDevToolsExample,
+  JsonSchemaExample,
+  JsonSchemaComplexExample,
+  JsonSchemaWithRecursiveRefsExample,
+  JsonSchemaWithDevToolsExample,
 } from './examples/JsonSchema'
 import { YupSchemaExample, YupSchemaComplexExample } from './examples/Yup'
 import { ZodSchemaExample, ZodSchemaComplexExample } from './examples/Zod'
-import { useWindowSize } from './components/templates/json-schema/hooks/useWindowSize'
+import { useWindowSize } from './hooks/useWindowSize'
+import { useThemeContext } from '@/theme/ThemeProvider'
 
+/**
+ * Configuration for navigation links and routes
+ */
 const links = [
-	{
-		title: 'JSON Schema',
-		links: [
-			{ title: 'Simple', path: '/json-schema' },
-			{ title: 'Complex', path: '/json-schema/complex' },
-			{ title: 'Recursive Refs', path: '/json-schema/recursive-refs' },
-			{ title: 'Devtools', path: '/json-schema/devtools' },
-		],
-	},
-	{
-		title: 'Yup Schema',
-		links: [
-			{ title: 'Simple', path: '/yup-schema' },
-			{ title: 'Complex', path: '/yup-schema/complex' },
-		],
-	},
-	{
-		title: 'Zod Schema',
-		links: [
-			{ title: 'Simple', path: '/zod-schema' },
-			{ title: 'Complex', path: '/zod-schema/complex' },
-		],
-	},
+  {
+    title: 'JSON Schema',
+    links: [
+      { title: 'Simple', path: '/json-schema' },
+      { title: 'Complex', path: '/json-schema/complex' },
+      { title: 'Recursive Refs', path: '/json-schema/recursive-refs' },
+      { title: 'Devtools', path: '/json-schema/devtools' },
+    ],
+  },
+  {
+    title: 'Yup Schema',
+    links: [
+      { title: 'Simple', path: '/yup-schema' },
+      { title: 'Complex', path: '/yup-schema/complex' },
+    ],
+  },
+  {
+    title: 'Zod Schema',
+    links: [
+      { title: 'Simple', path: '/zod-schema' },
+      { title: 'Complex', path: '/zod-schema/complex' },
+    ],
+  },
 ]
 
+/**
+ * Custom Select Component with better styling
+ */
+const CustomSelect: React.FC<{
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void
+  options: Array<{ title: string; value?: string }>
+  placeholder?: string
+  className?: string
+}> = ({ value, onChange, options, placeholder, className = '' }) => {
+  return (
+    <div className={`relative ${className}`}>
+      <select
+        value={value}
+        onChange={onChange}
+        className={`w-full appearance-none rounded-lg border border-gray-300 bg-white px-4 py-2.5 pr-10 text-sm font-medium text-gray-900 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500 dark:focus:border-blue-400`}
+      >
+        {placeholder && <option value="">{placeholder}</option>}
+        {options.map((option) => (
+          <option key={option.title} value={option.value || option.title}>
+            {option.title}
+          </option>
+        ))}
+      </select>
+      <MdExpandMore className="pointer-events-none absolute top-1/2 right-3 h-5 w-5 -translate-y-1/2 text-gray-500 dark:text-gray-400" />
+    </div>
+  )
+}
+
+/**
+ * Theme Toggle Button Component
+ */
+const ThemeToggle: React.FC<{
+  isDarkMode: boolean
+  toggleDarkMode: () => void
+}> = ({ isDarkMode, toggleDarkMode }) => {
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className={`relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 transition-all duration-200 ease-in-out hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500/20 focus:outline-none active:scale-95 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-500 dark:hover:bg-gray-700`}
+      aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {isDarkMode ? (
+        <MdLightMode className="h-5 w-5" />
+      ) : (
+        <MdDarkMode className="h-5 w-5" />
+      )}
+    </button>
+  )
+}
+
+/**
+ * Redirect component for default route
+ */
 const Redirect = () => {
-	const navigate = useNavigate()
-	useEffect(() => {
-		navigate('/json-schema')
-	}, [navigate])
-	return null
+  const navigate = useNavigate()
+  useEffect(() => {
+    navigate('/json-schema')
+  }, [navigate])
+  return null
 }
 
+/**
+ * Main App Component
+ */
 const App = () => {
-	const location = useLocation()
-	const navigate = useNavigate()
-	const size = useWindowSize()
-
-	// State variables for the selected schema type and subpath
-	const [selectedSchemaType, setSelectedSchemaType] = useState('')
-	const [selectedSubpath, setSelectedSubpath] = useState('')
-
-	// Update state based on the current location
-	useEffect(() => {
-		// Find the schema type and subpath based on the current path
-		const currentLink = links.find((link) =>
-			link.links.some((sublink) => sublink.path === location.pathname),
-		)
-
-		if (currentLink) {
-			setSelectedSchemaType(currentLink.title)
-			const currentSublink = currentLink.links.find(
-				(sublink) => sublink.path === location.pathname,
-			)
-			setSelectedSubpath(currentSublink?.title || currentLink.links[0].title)
-		} else {
-			// Default to the first schema type and subpath if no match
-			setSelectedSchemaType(links[0].title)
-			setSelectedSubpath(links[0].links[0].title)
-		}
-	}, [location])
-
-	// Get the subpaths for the selected schema type
-	const currentSchemaTypeLinks = links.find(
-		(link) => link.title === selectedSchemaType,
-	)
-
-	const handleSchemaTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-		const newSchemaTypeTitle = e.target.value
-		setSelectedSchemaType(newSchemaTypeTitle)
-
-		// Get the first subpath of the new schema type
-		const newSchemaType = links.find(
-			(link) => link.title === newSchemaTypeTitle,
-		)
-		if (newSchemaType) {
-			const newSubpath = newSchemaType.links[0]
-			setSelectedSubpath(newSubpath.title)
-			navigate(newSubpath.path)
-		}
-	}
-
-	const handleSubpathChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-		const newSubpathTitle = e.target.value
-		setSelectedSubpath(newSubpathTitle)
-
-		// Get the path for the selected schema type and subpath
-		const schemaType = links.find((link) => link.title === selectedSchemaType)
-		if (schemaType) {
-			const subpath = schemaType.links.find(
-				(sublink) => sublink.title === newSubpathTitle,
-			)
-			if (subpath) {
-				navigate(subpath.path)
-			}
-		}
-	}
-
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: '1rem',
-			}}
-		>
-			<nav
-				style={{
-					display: 'flex',
-					justifyContent: 'space-between',
-					alignItems: 'center',
-					padding: '1rem',
-				}}
-			>
-				<h3>@react-formgen</h3>
-
-				<div
-					style={{
-						display: 'flex',
-						gap: '1rem',
-						flexWrap: 'wrap',
-						width:
-							size.width && size.width > 640 ? 'max-content' : 'min-content',
-					}}
-				>
-					<select
-						style={{
-							width: '12rem',
-							padding: '8px',
-							border: '1px solid #d1d5db',
-							borderRadius: '0.375rem',
-							boxSizing: 'border-box',
-						}}
-						value={selectedSchemaType}
-						onChange={handleSchemaTypeChange}
-					>
-						{links.map((link) => (
-							<option key={link.title} value={link.title}>
-								{link.title}
-							</option>
-						))}
-					</select>
-
-					<select
-						style={{
-							width: '12rem',
-							padding: '8px',
-							border: '1px solid #d1d5db',
-							borderRadius: '0.375rem',
-							boxSizing: 'border-box',
-						}}
-						value={selectedSubpath}
-						onChange={handleSubpathChange}
-					>
-						{currentSchemaTypeLinks &&
-							currentSchemaTypeLinks.links.map((sublink) => (
-								<option key={sublink.title} value={sublink.title}>
-									{sublink.title}
-								</option>
-							))}
-					</select>
-				</div>
-			</nav>
-			<Routes>
-				<Route path="/json-schema" element={<JsonSchemaExample />} />
-				<Route
-					path="/json-schema/complex"
-					element={<JsonSchemaComplexExample />}
-				/>
-
-				<Route
-					path="/json-schema/recursive-refs"
-					element={<JsonSchemaWithRecursiveRefsExample />}
-				/>
-				<Route
-					path="/json-schema/devtools"
-					element={<JsonSchemaWithDevToolsExample />}
-				/>
-				<Route path="/yup-schema" element={<YupSchemaExample />} />
-				<Route
-					path="/yup-schema/complex"
-					element={<YupSchemaComplexExample />}
-				/>
-				<Route path="/zod-schema" element={<ZodSchemaExample />} />
-				<Route
-					path="/zod-schema/complex"
-					element={<ZodSchemaComplexExample />}
-				/>
-				<Route path="*" element={<Redirect />} />
-			</Routes>
-		</div>
-	)
+  const location = useLocation()
+  const navigate = useNavigate()
+  const size = useWindowSize()
+  const { isDarkMode, toggleDarkMode } = useThemeContext()
+
+  // State variables for the selected schema type and subpath
+  const [selectedSchemaType, setSelectedSchemaType] = useState('')
+  const [selectedSubpath, setSelectedSubpath] = useState('')
+
+  // Update state based on the current location
+  useEffect(() => {
+    const currentLink = links.find((link) =>
+      link.links.some((sublink) => sublink.path === location.pathname),
+    )
+
+    if (currentLink) {
+      setSelectedSchemaType(currentLink.title)
+      const currentSublink = currentLink.links.find(
+        (sublink) => sublink.path === location.pathname,
+      )
+      setSelectedSubpath(currentSublink?.title || currentLink.links[0].title)
+    } else {
+      setSelectedSchemaType(links[0].title)
+      setSelectedSubpath(links[0].links[0].title)
+    }
+  }, [location])
+
+  // Get the subpaths for the selected schema type
+  const currentSchemaTypeLinks = links.find(
+    (link) => link.title === selectedSchemaType,
+  )
+
+  const handleSchemaTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newSchemaTypeTitle = e.target.value
+    setSelectedSchemaType(newSchemaTypeTitle)
+
+    const newSchemaType = links.find(
+      (link) => link.title === newSchemaTypeTitle,
+    )
+    if (newSchemaType) {
+      const newSubpath = newSchemaType.links[0]
+      setSelectedSubpath(newSubpath.title)
+      navigate(newSubpath.path)
+    }
+  }
+
+  const handleSubpathChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newSubpathTitle = e.target.value
+    setSelectedSubpath(newSubpathTitle)
+
+    const schemaType = links.find((link) => link.title === selectedSchemaType)
+    if (schemaType) {
+      const subpath = schemaType.links.find(
+        (sublink) => sublink.title === newSubpathTitle,
+      )
+      if (subpath) {
+        navigate(subpath.path)
+      }
+    }
+  }
+
+  const isMobile = size.width && size.width < 768
+
+  return (
+    <div className="min-h-screen bg-gray-50 transition-colors duration-200 dark:bg-gray-900">
+      {/* Navigation Header */}
+      <nav className="sticky top-0 z-50 border-b border-gray-200 bg-white/80 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900/80">
+        {/* <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> */}
+        <div className="mx-auto max-w-7xl p-4 sm:p-6 lg:p-8">
+          {/* <div className="flex h-16 items-center justify-between"> */}
+          <div className="flex items-center justify-between">
+            {/* Logo/Title */}
+            <div className="flex items-center gap-3">
+              <img
+                src="/m6.svg"
+                alt="M6 Logo"
+                className="h-8 w-auto"
+                aria-hidden="true"
+              ></img>
+              <h1 className="bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-xl font-bold text-transparent dark:from-gray-100 dark:to-gray-400">
+                @react-formgen
+              </h1>
+            </div>
+
+            {/* Controls */}
+            <div
+              className={`flex items-center gap-3 ${isMobile ? 'flex-col' : 'flex-row'}`}
+            >
+              {isMobile ? (
+                <div className="flex w-full flex-col gap-2">
+                  <CustomSelect
+                    value={selectedSchemaType}
+                    onChange={handleSchemaTypeChange}
+                    options={links}
+                    className="w-full"
+                  />
+                  <div className="flex gap-2">
+                    <CustomSelect
+                      value={selectedSubpath}
+                      onChange={handleSubpathChange}
+                      options={currentSchemaTypeLinks?.links || []}
+                      className="flex-1"
+                    />
+                    <ThemeToggle
+                      isDarkMode={isDarkMode}
+                      toggleDarkMode={toggleDarkMode}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <CustomSelect
+                    value={selectedSchemaType}
+                    onChange={handleSchemaTypeChange}
+                    options={links}
+                    className="w-48"
+                  />
+                  <CustomSelect
+                    value={selectedSubpath}
+                    onChange={handleSubpathChange}
+                    options={currentSchemaTypeLinks?.links || []}
+                    className="w-40"
+                  />
+                  <ThemeToggle
+                    isDarkMode={isDarkMode}
+                    toggleDarkMode={toggleDarkMode}
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+          <Routes>
+            <Route path="/json-schema" element={<JsonSchemaExample />} />
+            <Route
+              path="/json-schema/complex"
+              element={<JsonSchemaComplexExample />}
+            />
+            <Route
+              path="/json-schema/recursive-refs"
+              element={<JsonSchemaWithRecursiveRefsExample />}
+            />
+            <Route
+              path="/json-schema/devtools"
+              element={<JsonSchemaWithDevToolsExample />}
+            />
+            <Route path="/yup-schema" element={<YupSchemaExample />} />
+            <Route
+              path="/yup-schema/complex"
+              element={<YupSchemaComplexExample />}
+            />
+            <Route path="/zod-schema" element={<ZodSchemaExample />} />
+            <Route
+              path="/zod-schema/complex"
+              element={<ZodSchemaComplexExample />}
+            />
+            <Route path="*" element={<Redirect />} />
+          </Routes>
+        </div>
+      </main>
+    </div>
+  )
 }
 
 const RootApp = () => {
-	return (
-		<Router>
-			<App />
-		</Router>
-	)
+  return (
+    <Router>
+      <App />
+    </Router>
+  )
 }
 
 export default RootApp
diff --git a/website/src/components/SwitchToReadonly.tsx b/website/src/components/SwitchToReadonly.tsx
index 7eea195..40fcf0a 100644
--- a/website/src/components/SwitchToReadonly.tsx
+++ b/website/src/components/SwitchToReadonly.tsx
@@ -1,36 +1,56 @@
-import { FormState as JsonSchemaFormState } from "@react-formgen/json-schema";
-import { FormState as YupFormState } from "@react-formgen/yup";
-import { FormState as ZodFormState } from "@react-formgen/zod";
+import { FormState as JsonSchemaFormState } from '@react-formgen/json-schema'
+import { FormState as YupFormState } from '@react-formgen/yup'
+import { FormState as ZodFormState } from '@react-formgen/zod'
 
-// Generic hook that returns the readonly state and setter based on the context hook provided
+/**
+ * Generic hook that returns the readonly state and setter based on the context hook provided
+ */
 export function useFormReadonly<
   T extends JsonSchemaFormState | YupFormState | ZodFormState,
 >(contextHook: <U>(selector: (state: T) => U) => U) {
-  const readonly = contextHook((state) => state.readonly);
-  const setReadonly = contextHook((state) => state.setReadonly);
-  return { readonly, setReadonly };
+  const readonly = contextHook((state) => state.readonly)
+  const setReadonly = contextHook((state) => state.setReadonly)
+  return { readonly, setReadonly }
 }
 
-// Generic SwitchToReadonly component that accepts a context hook and uses it to access the form state
+/**
+ * Generic SwitchToReadonly component that accepts a context hook and uses it to access the form state
+ * Renders a styled toggle switch for switching between readonly and editable modes
+ */
 export const SwitchToReadonly = <
   T extends JsonSchemaFormState | YupFormState | ZodFormState,
 >({
   contextHook,
 }: {
-  contextHook: <U>(selector: (state: T) => U) => U;
+  contextHook: <U>(selector: (state: T) => U) => U
 }) => {
-  const { readonly, setReadonly } = useFormReadonly(contextHook);
+  const { readonly, setReadonly } = useFormReadonly(contextHook)
 
   return (
-    <div>
-      <label>
-        Readonly
+    <div className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50">
+      <div className="flex flex-col">
+        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+          Form Mode
+        </span>
+        <span className="text-xs text-gray-500 dark:text-gray-400">
+          {readonly ? 'Currently in readonly mode' : 'Currently editable'}
+        </span>
+      </div>
+
+      <label
+        className={`flex cursor-pointer items-center space-x-3 transition-all duration-200 ease-in-out`}
+      >
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Readonly
+        </span>
+
         <input
           type="checkbox"
           checked={readonly}
           onChange={(e) => setReadonly(e.target.checked)}
+          className={`h-4 w-4 rounded border-gray-300 bg-white text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-blue-400`}
         />
       </label>
     </div>
-  );
-};
+  )
+}
diff --git a/website/src/components/templates/json-schema/BaseFormRoot.tsx b/website/src/components/templates/json-schema/BaseFormRoot.tsx
index 24b8020..a33ff30 100644
--- a/website/src/components/templates/json-schema/BaseFormRoot.tsx
+++ b/website/src/components/templates/json-schema/BaseFormRoot.tsx
@@ -1,20 +1,67 @@
 import React from 'react'
 import {
-	FormRootProps,
-	FormgenJSONSchema7,
-	useFormContext,
-	FormState,
-	useRenderTemplate,
+  FormRootProps,
+  FormgenJSONSchema7,
+  useFormContext,
+  FormState,
+  useRenderTemplate,
 } from '@react-formgen/json-schema'
 import Ajv from 'ajv'
 import addFormats from 'ajv-formats'
 
 export const AjvInstance = new Ajv({
-	allErrors: true,
-	verbose: true,
+  allErrors: true,
+  verbose: true,
 }).addKeyword('uiSchema')
 addFormats(AjvInstance)
 
+/**
+ * Form validation state for styling
+ */
+type FormValidationState = 'idle' | 'valid' | 'invalid'
+
+/**
+ * Gets the border classes based on form validation state
+ * @param validationState - Current validation state of the form
+ */
+const getFormBorderClasses = (validationState: FormValidationState): string => {
+  switch (validationState) {
+    case 'valid':
+      return 'border border-green-500 dark:border-green-400'
+    case 'invalid':
+      return 'border border-red-500 dark:border-red-400'
+    case 'idle':
+    default:
+      return 'border-0'
+  }
+}
+
+/**
+ * Common layout classes for form containers
+ */
+const FORM_CONTAINER_CLASSES =
+  'p-4 flex flex-wrap gap-4 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100'
+
+/**
+ * Submit button classes
+ */
+const SUBMIT_BUTTON_CLASSES = `
+  w-full px-4 py-2 
+  bg-blue-600 hover:bg-blue-700 
+  dark:bg-blue-500 dark:hover:bg-blue-600
+  text-white 
+  rounded-md 
+  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 
+  dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900
+  transition-colors duration-200 
+  disabled:opacity-50 disabled:cursor-not-allowed
+  disabled:hover:bg-blue-600 dark:disabled:hover:bg-blue-500
+  font-medium
+  shadow-sm hover:shadow-md dark:shadow-gray-900/50
+`
+  .replace(/\s+/g, ' ')
+  .trim()
+
 /**
  * BaseFormRoot
  * The root form component that renders the form based on the schema and handles submission.
@@ -24,82 +71,65 @@ addFormats(AjvInstance)
  * @returns {JSX.Element} - The form component.
  */
 export const BaseFormRoot: React.FC<FormRootProps> = ({
-	onSubmit,
-	onError,
+  onSubmit,
+  onError,
 }) => {
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const schema = useFormContext((state: FormState) => state.schema)
-	const formData = useFormContext((state: FormState) => state.formData)
-	const setErrors = useFormContext((state: FormState) => state.setErrors)
-	const RenderTemplate = useRenderTemplate()
-	const [formBorder, setFormBorder] = React.useState<string>('none')
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const schema = useFormContext((state: FormState) => state.schema)
+  const formData = useFormContext((state: FormState) => state.formData)
+  const setErrors = useFormContext((state: FormState) => state.setErrors)
+  const RenderTemplate = useRenderTemplate()
+  const [validationState, setValidationState] =
+    React.useState<FormValidationState>('idle')
+
+  if (readonly) {
+    return (
+      <div className={`${FORM_CONTAINER_CLASSES} rounded-lg`}>
+        {Object.keys(schema.properties || {}).map((key) => (
+          <RenderTemplate
+            key={key}
+            schema={schema.properties?.[key] as FormgenJSONSchema7}
+            path={[key]}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  /**
+   * Handles form submission with validation
+   * @param event - Form submission event
+   */
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    const validate = AjvInstance.compile(schema)
+    const valid = validate(formData)
 
-	if (readonly) {
-		return (
-			<div
-				style={{
-					padding: '1rem',
-					...{
-						display: 'flex',
-						flexWrap: 'wrap',
-						gap: '1rem',
-					},
-				}}
-			>
-				{Object.keys(schema.properties || {}).map((key) => (
-					<RenderTemplate
-						key={key}
-						schema={schema.properties?.[key] as FormgenJSONSchema7}
-						path={[key]}
-					/>
-				))}
-			</div>
-		)
-	}
+    if (valid) {
+      setValidationState('valid')
+      setErrors(null)
+      onSubmit(formData)
+    } else {
+      setValidationState('invalid')
+      setErrors(validate.errors ?? null)
+      onError(validate.errors ?? [], formData)
+    }
+  }
 
-	const handleSubmit = (event: React.FormEvent) => {
-		event.preventDefault()
-		const validate = AjvInstance.compile(schema)
-		const valid = validate(formData)
-		if (valid) {
-			setFormBorder('1px solid green')
-			setErrors(null)
-			onSubmit(formData)
-		} else {
-			setFormBorder('1px solid red')
-			setErrors(validate.errors ?? null)
-			onError(validate.errors ?? [], formData)
-		}
-	}
+  const formClasses = `${FORM_CONTAINER_CLASSES} ${getFormBorderClasses(validationState)} rounded-lg transition-colors duration-200`
 
-	return (
-		<form
-			onSubmit={handleSubmit}
-			style={{
-				padding: '1rem',
-				border: formBorder,
-				...{
-					display: 'flex',
-					flexWrap: 'wrap',
-					gap: '1rem',
-				},
-			}}
-		>
-			{Object.keys(schema.properties || {}).map((key) => (
-				<RenderTemplate
-					key={key}
-					schema={schema.properties?.[key] as FormgenJSONSchema7}
-					path={[key]}
-				/>
-			))}
-			<button
-				type="submit"
-				style={{
-					width: '100%',
-				}}
-			>
-				Submit
-			</button>
-		</form>
-	)
+  return (
+    <form onSubmit={handleSubmit} className={formClasses}>
+      {Object.keys(schema.properties || {}).map((key) => (
+        <RenderTemplate
+          key={key}
+          schema={schema.properties?.[key] as FormgenJSONSchema7}
+          path={[key]}
+        />
+      ))}
+      <button type="submit" className={SUBMIT_BUTTON_CLASSES}>
+        Submit
+      </button>
+    </form>
+  )
 }
diff --git a/website/src/components/templates/json-schema/common/ReadonlyComplexTemplate.tsx b/website/src/components/templates/json-schema/common/ReadonlyComplexTemplate.tsx
deleted file mode 100644
index d0e5140..0000000
--- a/website/src/components/templates/json-schema/common/ReadonlyComplexTemplate.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-
-/**
- * ReadonlyComplexTemplate
- * Renders a readonly view of complex data (objects or arrays) with a title and description.
- * @param {Object} props - The props for the component.
- * @param {string} [props.title] - The title of the field.
- * @param {string} [props.description] - The description of the field.
- * @param {React.ReactNode} props.children - The child components to render.
- * @returns {JSX.Element} - The readonly complex component.
- */
-export const ReadonlyComplexTemplate: React.FC<{
-	title?: string
-	description?: string
-	children: React.ReactNode
-}> = ({ title, description, children }) => {
-	return (
-		<div
-			style={{
-				width: '100%',
-				marginBottom: '1rem',
-				paddingLeft: '1rem',
-				borderLeft: '2px solid #ccc',
-			}}
-		>
-			{title && <strong>{title}</strong>}
-			{description && (
-				<p style={{ fontSize: 'small', color: '#666' }}>{description}</p>
-			)}
-			<div style={{ marginTop: '0.5rem' }}>{children}</div>
-		</div>
-	)
-}
diff --git a/website/src/components/templates/json-schema/common/ReadonlyPrimitiveTemplate.tsx b/website/src/components/templates/json-schema/common/ReadonlyPrimitiveTemplate.tsx
deleted file mode 100644
index de65ac3..0000000
--- a/website/src/components/templates/json-schema/common/ReadonlyPrimitiveTemplate.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-export const ReadonlyPrimitiveTemplate: React.FC<{
-	title?: string
-	value?: string | number | boolean
-	description?: string
-}> = ({ title, value, description }) => {
-	return (
-		<div
-			style={{
-				width: '100%',
-				...{
-					display: 'flex',
-					flexDirection: 'column',
-				},
-			}}
-		>
-			{title && <label style={{ fontWeight: '600' }}>{title}</label>}
-			<div style={{ padding: '8px' }}>{value ?? 'N/A'}</div>
-			{description && <small>{description}</small>}
-		</div>
-	)
-}
diff --git a/website/src/components/templates/json-schema/templates/array/MultiSelectCheckboxTemplate.tsx b/website/src/components/templates/json-schema/templates/array/MultiSelectCheckboxTemplate.tsx
index 55edeb4..2b582fb 100644
--- a/website/src/components/templates/json-schema/templates/array/MultiSelectCheckboxTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/array/MultiSelectCheckboxTemplate.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import {
-	ArraySchema,
-	FormgenJSONSchema7,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  ArraySchema,
+  FormgenJSONSchema7,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
 /**
@@ -18,91 +18,118 @@ import {
  * @returns {JSX.Element} - The multi-select checkbox component.
  */
 export const MultiSelectCheckboxTemplate: React.FC<{
-	schema: ArraySchema
-	path: string[]
+  schema: ArraySchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, [])
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, [])
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
 
-	const options = React.useMemo(() => {
-		if (typeof schema.items === 'object' && !Array.isArray(schema.items)) {
-			if ('enum' in schema.items && schema.items.enum) {
-				return schema.items.enum.map((option) => ({
-					value: option,
-					label: option,
-				}))
-			} else if ('oneOf' in schema.items && schema.items.oneOf) {
-				return schema.items.oneOf
-					.filter(
-						(item): item is FormgenJSONSchema7 =>
-							typeof item === 'object' && !Array.isArray(item),
-					)
-					.map((option) => ({
-						value: option.const,
-						label: option.title,
-					}))
-			}
-		}
-		return []
-	}, [schema])
+  const options = React.useMemo(() => {
+    if (typeof schema.items === 'object' && !Array.isArray(schema.items)) {
+      if ('enum' in schema.items && schema.items.enum) {
+        return schema.items.enum.map((option) => ({
+          value: option,
+          label: option,
+        }))
+      } else if ('oneOf' in schema.items && schema.items.oneOf) {
+        return schema.items.oneOf
+          .filter(
+            (item): item is FormgenJSONSchema7 =>
+              typeof item === 'object' && !Array.isArray(item),
+          )
+          .map((option) => ({
+            value: option.const,
+            label: option.title,
+          }))
+      }
+    }
+    return []
+  }, [schema])
 
-	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-		const selectedValue = event.target.value
-		const updatedValues = valueAtPath.includes(selectedValue)
-			? valueAtPath.filter((item: string) => item !== selectedValue)
-			: [...valueAtPath, selectedValue]
-		setValueAtPath(updatedValues)
-	}
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedValue = event.target.value
+    const updatedValues = valueAtPath.includes(selectedValue)
+      ? valueAtPath.filter((item: string) => item !== selectedValue)
+      : [...valueAtPath, selectedValue]
+    setValueAtPath(updatedValues)
+  }
 
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			{schema.description && <small>{schema.description}</small>}
-			<div style={{ marginTop: '8px' }}>
-				{options
-					.filter(
-						(option) =>
-							option.value !== undefined && option.label !== undefined,
-					)
-					.map((option) => (
-						<div
-							key={String(option.value)}
-							style={{
-								display: 'flex',
-								alignItems: 'center',
-								marginBottom: '8px',
-							}}
-						>
-							<input
-								type="checkbox"
-								value={String(option.value)}
-								checked={valueAtPath.includes(option.value)}
-								onChange={handleChange}
-								disabled={readonly}
-								style={{ marginRight: '8px' }}
-							/>
-							<label style={{ fontSize: '14px' }}>{String(option.label)}</label>
-						</div>
-					))}
-			</div>
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {schema.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
+
+      <div
+        className={`space-y-1 rounded-lg border p-3 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } `}
+      >
+        {options
+          .filter(
+            (option) =>
+              option.value !== undefined && option.label !== undefined,
+          )
+          .map((option) => (
+            <label
+              key={String(option.value)}
+              className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${readonly ? 'cursor-not-allowed opacity-50' : ''} ${
+                valueAtPath.includes(option.value)
+                  ? 'border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20'
+                  : 'border border-transparent'
+              } `}
+            >
+              <input
+                type="checkbox"
+                value={String(option.value)}
+                checked={valueAtPath.includes(option.value)}
+                onChange={handleChange}
+                disabled={readonly}
+                className={`h-4 w-4 rounded border-gray-300 bg-white text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-blue-400`}
+              />
+              <span
+                className={`text-sm font-medium ${
+                  valueAtPath.includes(option.value)
+                    ? 'text-blue-900 dark:text-blue-100'
+                    : 'text-gray-900 dark:text-gray-100'
+                } ${readonly ? 'text-gray-500 dark:text-gray-400' : ''} `}
+              >
+                {String(option.label)}
+              </span>
+            </label>
+          ))}
+      </div>
+
+      {/* Selected items summary */}
+      {valueAtPath && valueAtPath.length > 0 && (
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          {valueAtPath.length} item{valueAtPath.length !== 1 ? 's' : ''}{' '}
+          selected
+        </div>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/array/MultiSelectTemplate.tsx b/website/src/components/templates/json-schema/templates/array/MultiSelectTemplate.tsx
index 60c3f46..40f8366 100644
--- a/website/src/components/templates/json-schema/templates/array/MultiSelectTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/array/MultiSelectTemplate.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import {
-	ArraySchema,
-	FormgenJSONSchema7,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  ArraySchema,
+  FormgenJSONSchema7,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
 /**
@@ -18,82 +18,122 @@ import {
  * @returns {JSX.Element} - The multi-select field component.
  */
 export const MultiSelectTemplate: React.FC<{
-	schema: ArraySchema
-	path: string[]
+  schema: ArraySchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, [])
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, [])
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
 
-	const options = React.useMemo(() => {
-		if (typeof schema.items === 'object' && !Array.isArray(schema.items)) {
-			if ('enum' in schema.items && schema.items.enum) {
-				return schema.items.enum.map((option) => ({
-					value: option,
-					label: option,
-				}))
-			} else if ('oneOf' in schema.items && schema.items.oneOf) {
-				return schema.items.oneOf
-					.filter(
-						(item): item is FormgenJSONSchema7 =>
-							typeof item === 'object' && !Array.isArray(item),
-					)
-					.map((option) => ({
-						value: option.const,
-						label: option.title,
-					}))
-			}
-		}
-		return []
-	}, [schema])
+  const options = React.useMemo(() => {
+    if (typeof schema.items === 'object' && !Array.isArray(schema.items)) {
+      if ('enum' in schema.items && schema.items.enum) {
+        return schema.items.enum.map((option) => ({
+          value: option,
+          label: option,
+        }))
+      } else if ('oneOf' in schema.items && schema.items.oneOf) {
+        return schema.items.oneOf
+          .filter(
+            (item): item is FormgenJSONSchema7 =>
+              typeof item === 'object' && !Array.isArray(item),
+          )
+          .map((option) => ({
+            value: option.const,
+            label: option.title,
+          }))
+      }
+    }
+    return []
+  }, [schema])
 
-	const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-		const selectedOptions = Array.from(
-			event.target.selectedOptions,
-			(option) => option.value,
-		)
-		setValueAtPath(selectedOptions)
-	}
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedOptions = Array.from(
+      event.target.selectedOptions,
+      (option) => option.value,
+    )
+    setValueAtPath(selectedOptions)
+  }
 
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			{schema.description && <small>{schema.description}</small>}
-			<select
-				multiple
-				value={valueAtPath}
-				onChange={handleChange}
-				disabled={readonly}
-				style={{
-					width: '100%',
-					padding: '8px',
-					border: '1px solid #d1d5db',
-					borderRadius: '8px',
-				}}
-			>
-				{options.map((option) => (
-					<option key={String(option.value)} value={String(option.value)}>
-						{String(option.label)}
-					</option>
-				))}
-			</select>
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {schema.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
+
+      <div className="relative">
+        <select
+          multiple
+          value={valueAtPath}
+          onChange={handleChange}
+          disabled={readonly}
+          size={Math.min(options.length, 6)} // Show up to 6 options without scrolling
+          className={`min-h-[120px] w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+            errorsAtPath && errorsAtPath.length > 0
+              ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+              : ''
+          } `}
+        >
+          {options.map((option) => (
+            <option
+              key={String(option.value)}
+              value={String(option.value)}
+              className="selected:bg-blue-100 dark:selected:bg-blue-900/50 selected:text-blue-900 dark:selected:text-blue-100 px-2 py-1 text-gray-900 hover:bg-blue-50 dark:text-gray-100 dark:hover:bg-blue-900/30"
+            >
+              {String(option.label)}
+            </option>
+          ))}
+        </select>
+
+        {/* Helper text for multi-select usage */}
+        <div className="absolute -bottom-5 left-0 text-xs text-gray-400 dark:text-gray-500">
+          Hold Ctrl/Cmd to select multiple items
+        </div>
+      </div>
+
+      {/* Selected items indicator */}
+      {valueAtPath && valueAtPath.length > 0 && (
+        <div className="mt-4 flex flex-wrap gap-1">
+          <span className="mr-2 text-xs text-gray-500 dark:text-gray-400">
+            Selected ({valueAtPath.length}):
+          </span>
+          {valueAtPath.map(
+            (value: string | number | boolean, index: number) => {
+              const option = options.find(
+                (opt) => String(opt.value) === String(value),
+              )
+              return (
+                <span
+                  key={index}
+                  className="inline-flex items-center rounded-md bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-200"
+                >
+                  {option ? String(option.label) : String(value)}
+                </span>
+              )
+            },
+          )}
+        </div>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/array/SimpleArrayTemplate.tsx b/website/src/components/templates/json-schema/templates/array/SimpleArrayTemplate.tsx
index 6f3be08..7b2eb60 100644
--- a/website/src/components/templates/json-schema/templates/array/SimpleArrayTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/array/SimpleArrayTemplate.tsx
@@ -1,16 +1,36 @@
 import React from 'react'
 import {
-	ArraySchema,
-	FormgenJSONSchema7,
-	useFormContext,
-	useArrayTemplate,
-	FormState,
-	useRenderTemplate,
-	generateInitialData,
-	useIsRequired,
+  ArraySchema,
+  FormgenJSONSchema7,
+  useFormContext,
+  useArrayTemplate,
+  FormState,
+  useRenderTemplate,
+  generateInitialData,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyComplexTemplate } from '../../common/ReadonlyComplexTemplate'
+export const ReadonlySimpleArrayTemplate: React.FC<{
+  title?: string
+  description?: string
+  children: React.ReactNode
+}> = ({ title, description, children }) => {
+  return (
+    <div className="mb-4 w-full border-l-2 border-gray-300 pl-4 dark:border-gray-600">
+      {title && (
+        <strong className="mb-1 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </strong>
+      )}
+      {description && (
+        <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </p>
+      )}
+      <div className="mt-2 space-y-3">{children}</div>
+    </div>
+  )
+}
 
 /**
  * SimpleArrayTemplate
@@ -21,131 +41,135 @@ import { ReadonlyComplexTemplate } from '../../common/ReadonlyComplexTemplate'
  * @returns {JSX.Element} - The simple array template component.
  */
 export const SimpleArrayTemplate: React.FC<{
-	schema: ArraySchema
-	path: string[]
+  schema: ArraySchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const definitions = useFormContext(
-		(state: FormState) => state.schema.definitions || {},
-	)
-	const RenderTemplate = useRenderTemplate()
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const definitions = useFormContext(
+    (state: FormState) => state.schema.definitions || {},
+  )
+  const RenderTemplate = useRenderTemplate()
+
+  const { valueAtPath, errorsAtPath, moveItem, removeItem, addItem } =
+    useArrayTemplate(path, () =>
+      generateInitialData(schema.items as FormgenJSONSchema7, definitions),
+    )
+  const required = useIsRequired(path)
+
+  if (readonly) {
+    return (
+      <ReadonlySimpleArrayTemplate
+        title={schema.title}
+        description={schema.description}
+      >
+        {Array.isArray(valueAtPath) && valueAtPath.length > 0 ? (
+          valueAtPath.map((_, index: number) => (
+            <div key={index} className="mb-2">
+              <RenderTemplate
+                schema={schema.items as FormgenJSONSchema7}
+                path={[...path, index.toString()]}
+              />
+            </div>
+          ))
+        ) : (
+          <div className="text-sm text-gray-500 italic dark:text-gray-400">
+            No items available
+          </div>
+        )}
+      </ReadonlySimpleArrayTemplate>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {schema.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+
+      <div
+        className={`space-y-4 rounded-lg border-2 border-dashed p-4 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-300 bg-red-50/30 dark:border-red-600 dark:bg-red-900/10'
+            : 'border-gray-300 bg-gray-50/30 dark:border-gray-600 dark:bg-gray-800/30'
+        } `}
+      >
+        {schema.items &&
+          Array.isArray(valueAtPath) &&
+          valueAtPath.map((_, index: number) => (
+            <div
+              key={index}
+              className="flex flex-col space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+            >
+              <RenderTemplate
+                schema={schema.items as FormgenJSONSchema7}
+                path={[...path, index.toString()]}
+              />
+
+              <div className="flex flex-wrap gap-2 border-t border-dashed border-gray-200 pt-3 dark:border-gray-600">
+                <button
+                  type="button"
+                  onClick={() => moveItem(index, 'up')}
+                  disabled={index === 0}
+                  className={`rounded-md px-3 py-1.5 text-xs font-medium transition-all duration-200 ease-in-out ${
+                    index === 0
+                      ? 'cursor-not-allowed bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'
+                      : 'border border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50'
+                  } `}
+                >
+                  Move Up
+                </button>
 
-	const { valueAtPath, errorsAtPath, moveItem, removeItem, addItem } =
-		useArrayTemplate(path, () =>
-			generateInitialData(schema.items as FormgenJSONSchema7, definitions),
-		)
-	const required = useIsRequired(path)
+                <button
+                  type="button"
+                  onClick={() => moveItem(index, 'down')}
+                  disabled={index === valueAtPath.length - 1}
+                  className={`rounded-md px-3 py-1.5 text-xs font-medium transition-all duration-200 ease-in-out ${
+                    index === valueAtPath.length - 1
+                      ? 'cursor-not-allowed bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'
+                      : 'border border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50'
+                  } `}
+                >
+                  Move Down
+                </button>
 
-	if (readonly) {
-		return (
-			<ReadonlyComplexTemplate
-				title={schema.title}
-				description={schema.description}
-			>
-				{Array.isArray(valueAtPath) && valueAtPath.length > 0 ? (
-					valueAtPath.map((_, index: number) => (
-						<div key={index} style={{ marginBottom: '0.5rem' }}>
-							<RenderTemplate
-								schema={schema.items as FormgenJSONSchema7}
-								path={[...path, index.toString()]}
-							/>
-						</div>
-					))
-				) : (
-					<div style={{ color: '#888' }}>No items available</div>
-				)}
-			</ReadonlyComplexTemplate>
-		)
-	}
+                <button
+                  type="button"
+                  onClick={() => removeItem(index)}
+                  className="rounded-md border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 transition-all duration-200 ease-in-out hover:bg-red-100 dark:border-red-700 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50"
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          ))}
 
-	return (
-		<div
-			style={{
-				width: '100%',
-				...{
-					display: 'flex',
-					flexDirection: 'column',
-				},
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-			<div
-				style={{
-					border: '0.25rem dashed',
-					padding: '1rem',
-					...{
-						display: 'flex',
-						flexWrap: 'wrap',
-						gap: '1rem',
-					},
-				}}
-			>
-				{schema.items &&
-					Array.isArray(valueAtPath) &&
-					valueAtPath.map((_, index: number) => (
-						<div
-							style={{
-								display: 'flex',
-								flexDirection: 'column',
-								gap: '1rem',
-								width: '100%',
-							}}
-							key={index}
-						>
-							<RenderTemplate
-								schema={schema.items as FormgenJSONSchema7}
-								path={[...path, index.toString()]}
-							/>
-							<div
-								style={{
-									display: 'flex',
-									gap: '1rem',
-									paddingBottom: '1rem',
-									borderBottom: '0.125rem dashed',
-								}}
-							>
-								<button
-									type="button"
-									onClick={() => moveItem(index, 'up')}
-									disabled={index === 0}
-								>
-									Move Up
-								</button>
-								<button
-									type="button"
-									onClick={() => moveItem(index, 'down')}
-									disabled={index === valueAtPath.length - 1}
-								>
-									Move Down
-								</button>
-								<button type="button" onClick={() => removeItem(index)}>
-									Remove
-								</button>
-							</div>
-						</div>
-					))}
-				<button
-					type="button"
-					onClick={addItem}
-					style={{
-						width: '100%',
-					}}
-				>
-					Add Item
-				</button>
-			</div>
-		</div>
-	)
+        <button
+          type="button"
+          onClick={addItem}
+          className="w-full rounded-lg border-2 border-dashed border-green-300 bg-green-50 px-4 py-3 text-sm font-medium text-green-700 transition-all duration-200 ease-in-out hover:border-green-400 hover:bg-green-100 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-green-600 dark:bg-green-900/30 dark:text-green-300 dark:hover:border-green-500 dark:hover:bg-green-900/50"
+        >
+          + Add Item
+        </button>
+      </div>
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/array/TupleArrayTemplate.tsx b/website/src/components/templates/json-schema/templates/array/TupleArrayTemplate.tsx
index 3b1d763..a7d8121 100644
--- a/website/src/components/templates/json-schema/templates/array/TupleArrayTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/array/TupleArrayTemplate.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import {
-	ArraySchema,
-	FormgenJSONSchema7,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useRenderTemplate,
-	resolveSchema,
-	useIsRequired,
+  ArraySchema,
+  FormgenJSONSchema7,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useRenderTemplate,
+  resolveSchema,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
 /**
@@ -20,115 +20,127 @@ import {
  * @returns {JSX.Element} - The tuple array template component.
  */
 export const TupleArrayTemplate: React.FC<{
-	schema: ArraySchema
-	path: string[]
+  schema: ArraySchema
+  path: string[]
 }> = ({ schema, path }) => {
-	// To account for the elements of the tuple array having their respective data generated at form creation and the effect this has on validation, we need to first check if this tuple is a required property. If it's not, then we should reset the tuple's initial data to an empty array.
-	const rootSchema = useFormContext((state: FormState) => state.schema)
-	// We can use the current path and cross reference it with the root schema to determine if this tuple instance is a required property of its parent object.
-	const parentPath = path.slice(0, -1)
-	// We'll get the parent schema by iterating through the root schema using the parent path, resolving any $ref schemas along the way.
-	let parentSchema = rootSchema
-	for (const key of parentPath) {
-		const newSchema =
-			parentSchema.type === 'object'
-				? (resolveSchema(
-						parentSchema.properties?.[key] as FormgenJSONSchema7,
-						rootSchema.definitions,
-					) as FormgenJSONSchema7)
-				: (resolveSchema(
-						parentSchema.items as FormgenJSONSchema7,
-						rootSchema.definitions,
-					) as FormgenJSONSchema7)
+  // To account for the elements of the tuple array having their respective data generated at form creation and the effect this has on validation, we need to first check if this tuple is a required property. If it's not, then we should reset the tuple's initial data to an empty array.
+  const rootSchema = useFormContext((state: FormState) => state.schema)
+  // We can use the current path and cross reference it with the root schema to determine if this tuple instance is a required property of its parent object.
+  const parentPath = path.slice(0, -1)
+  // We'll get the parent schema by iterating through the root schema using the parent path, resolving any $ref schemas along the way.
+  let parentSchema = rootSchema
+  for (const key of parentPath) {
+    const newSchema =
+      parentSchema.type === 'object'
+        ? (resolveSchema(
+            parentSchema.properties?.[key] as FormgenJSONSchema7,
+            rootSchema.definitions,
+          ) as FormgenJSONSchema7)
+        : (resolveSchema(
+            parentSchema.items as FormgenJSONSchema7,
+            rootSchema.definitions,
+          ) as FormgenJSONSchema7)
 
-		parentSchema = newSchema
-	}
+    parentSchema = newSchema
+  }
 
-	const isRequired = parentSchema?.required?.includes(path[path.length - 1])
+  const isRequired = parentSchema?.required?.includes(path[path.length - 1])
 
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
-	const [parentValue, setParentValue] = useFormDataAtPath(parentPath)
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const RenderTemplate = useRenderTemplate()
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const [parentValue, setParentValue] = useFormDataAtPath(parentPath)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const RenderTemplate = useRenderTemplate()
+  const required = useIsRequired(path)
 
-	return (
-		<div
-			style={{
-				width: '100%',
-				...{
-					display: 'flex',
-					flexDirection: 'column',
-				},
-			}}
-		>
-			{valueAtPath ? (
-				<>
-					{schema.title && (
-						<label style={{ fontWeight: '600' }}>
-							{schema.title}
-							{required && <span style={{ color: 'red' }}>*</span>}
-						</label>
-					)}
-					{schema.description && <small>{schema.description}</small>}
-					<div
-						style={{
-							marginBottom: '16px',
-							width: '100%',
-							...{
-								display: 'flex',
-								flexWrap: 'wrap',
-								gap: '1rem',
-							},
-						}}
-					>
-						{errorsAtPath &&
-							errorsAtPath.map((error, index) => (
-								<div key={index} style={{ color: 'red', width: '100%' }}>
-									{error.message}
-								</div>
-							))}
-						{Array.isArray(schema.items) &&
-							schema.items.map((itemSchema, index) => (
-								<RenderTemplate
-									key={index}
-									schema={itemSchema as FormgenJSONSchema7}
-									path={[...path, index.toString()]}
-								/>
-							))}
-					</div>
-					{/* If the tuple is not required, render a button to remove it */}
-					{!readonly && !isRequired && valueAtPath && (
-						<button
-							onClick={() =>
-								setParentValue({
-									...parentValue,
-									[path[path.length - 1]]: undefined,
-								})
-							}
-							type="button"
-							style={{
-								width: '100%',
-							}}
-						>
-							Remove {schema.title ?? path[path.length - 1]}
-						</button>
-					)}
-				</>
-			) : (
-				!readonly && (
-					<button
-						onClick={() => setValueAtPath([])}
-						type="button"
-						style={{
-							width: '100%',
-						}}
-					>
-						Add {schema.title ?? path[path.length - 1]}
-					</button>
-				)
-			)}
-		</div>
-	)
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {valueAtPath ? (
+        <>
+          {schema.title && (
+            <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+              {schema.title}
+              {required && <span className="ml-1 text-red-500">*</span>}
+            </label>
+          )}
+
+          {schema.description && (
+            <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {schema.description}
+            </small>
+          )}
+
+          <div className="space-y-3">
+            {errorsAtPath &&
+              errorsAtPath.map((error, index) => (
+                <div
+                  key={index}
+                  className="text-sm font-medium text-red-500 dark:text-red-400"
+                >
+                  {error.message}
+                </div>
+              ))}
+
+            <div
+              className={`space-y-4 rounded-lg border-2 p-4 ${
+                errorsAtPath && errorsAtPath.length > 0
+                  ? 'border-red-200 bg-red-50/30 dark:border-red-700 dark:bg-red-900/10'
+                  : 'border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/30'
+              } `}
+            >
+              <div
+                className={`grid gap-4 ${(() => {
+                  const columns = schema.uiSchema?.props?.columns
+                  if (typeof columns === 'number' && columns > 0) {
+                    // Generate grid-cols-{n} class based on columns value
+                    return `grid-cols-${Math.min(columns, 12)}` // Cap at 12 for Tailwind safety
+                  }
+                  return 'grid-cols-1' // Default to 1 column
+                })()}`}
+              >
+                {Array.isArray(schema.items) &&
+                  schema.items.map((itemSchema, index) => (
+                    <div key={index} className="space-y-2">
+                      {/* <div className="text-xs font-medium tracking-wide text-gray-500 uppercase dark:text-gray-400">
+                        Item {index + 1}
+                      </div> */}
+                      <RenderTemplate
+                        schema={itemSchema as FormgenJSONSchema7}
+                        path={[...path, index.toString()]}
+                      />
+                    </div>
+                  ))}
+              </div>
+            </div>
+          </div>
+
+          {/* If the tuple is not required, render a button to remove it */}
+          {!readonly && !isRequired && valueAtPath && (
+            <button
+              onClick={() =>
+                setParentValue({
+                  ...parentValue,
+                  [path[path.length - 1]]: undefined,
+                })
+              }
+              type="button"
+              className="w-full rounded-lg border-2 border-dashed border-red-300 bg-red-50 px-4 py-3 text-sm font-medium text-red-700 transition-all duration-200 ease-in-out hover:border-red-400 hover:bg-red-100 focus:ring-2 focus:ring-red-500/20 focus:outline-none dark:border-red-600 dark:bg-red-900/30 dark:text-red-300 dark:hover:border-red-500 dark:hover:bg-red-900/50"
+            >
+              Remove {schema.title ?? path[path.length - 1]}
+            </button>
+          )}
+        </>
+      ) : (
+        !readonly && (
+          <button
+            onClick={() => setValueAtPath([])}
+            type="button"
+            className="w-full rounded-lg border-2 border-dashed border-green-300 bg-green-50 px-4 py-3 text-sm font-medium text-green-700 transition-all duration-200 ease-in-out hover:border-green-400 hover:bg-green-100 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-green-600 dark:bg-green-900/30 dark:text-green-300 dark:hover:border-green-500 dark:hover:bg-green-900/50"
+          >
+            + Add {schema.title ?? path[path.length - 1]}
+          </button>
+        )
+      )}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/boolean/CheckboxTemplate.tsx b/website/src/components/templates/json-schema/templates/boolean/CheckboxTemplate.tsx
index 02649c8..9500691 100644
--- a/website/src/components/templates/json-schema/templates/boolean/CheckboxTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/boolean/CheckboxTemplate.tsx
@@ -1,14 +1,36 @@
 import React from 'react'
 import {
-	BooleanSchema,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  BooleanSchema,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplate'
+export const ReadonlyCheckboxTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
 
 /**
  * CheckboxTemplate
@@ -19,53 +41,73 @@ import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplat
  * @returns {JSX.Element} - The checkbox boolean field component.
  */
 export const CheckboxTemplate: React.FC<{
-	schema: BooleanSchema
-	path: string[]
+  schema: BooleanSchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
+
+  if (readonly) {
+    return (
+      <ReadonlyCheckboxTemplate
+        title={schema.title}
+        value={valueAtPath ? 'true' : 'false'}
+        description={schema.description}
+      />
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      <div
+        className={`flex items-center space-x-3 rounded-lg border p-3 transition-all duration-200 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } ${!schema.readOnly ? 'hover:bg-gray-100/50 dark:hover:bg-gray-700/50' : ''} `}
+      >
+        <input
+          type="checkbox"
+          checked={valueAtPath}
+          disabled={schema.readOnly}
+          onChange={(event) => setValueAtPath(event.target.checked)}
+          className={`h-4 w-4 rounded border-gray-300 bg-white text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-blue-400 ${
+            errorsAtPath && errorsAtPath.length > 0
+              ? 'border-red-500 dark:border-red-400'
+              : ''
+          } `}
+        />
+        {schema.title && (
+          <label
+            className={`flex-1 cursor-pointer text-sm font-medium ${
+              valueAtPath
+                ? 'text-blue-900 dark:text-blue-100'
+                : 'text-gray-900 dark:text-gray-100'
+            } ${schema.readOnly ? 'cursor-not-allowed text-gray-500 dark:text-gray-400' : ''} `}
+          >
+            {schema.title}
+            {required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+        )}
+      </div>
 
-	if (readonly) {
-		return (
-			<ReadonlyPrimitiveTemplate
-				title={schema.title}
-				value={valueAtPath ? 'true' : 'false'}
-				description={schema.description}
-			/>
-		)
-	}
+      {schema.description && (
+        <small className="ml-1 text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
 
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<input
-					type="checkbox"
-					checked={valueAtPath}
-					disabled={schema.readOnly}
-					onChange={(event) => setValueAtPath(event.target.checked)}
-					style={{ marginRight: '8px' }}
-				/>
-				{schema.title && (
-					<label style={{ fontSize: '0.875rem' }}>
-						{schema.title}
-						{required && <span style={{ color: 'red' }}>*</span>}
-					</label>
-				)}
-			</div>
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="ml-1 text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/boolean/RadioTemplate.tsx b/website/src/components/templates/json-schema/templates/boolean/RadioTemplate.tsx
index d7290ca..6aec3bd 100644
--- a/website/src/components/templates/json-schema/templates/boolean/RadioTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/boolean/RadioTemplate.tsx
@@ -1,14 +1,36 @@
 import React from 'react'
 import {
-	BooleanSchema,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  BooleanSchema,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplate'
+export const ReadonlyRadioTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
 
 /**
  * RadioTemplate
@@ -19,63 +41,80 @@ import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplat
  * @returns {JSX.Element} - The radio boolean field component.
  */
 export const RadioTemplate: React.FC<{
-	schema: BooleanSchema
-	path: string[]
+  schema: BooleanSchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
+
+  if (readonly) {
+    return (
+      <ReadonlyRadioTemplate
+        title={schema.title ?? undefined}
+        value={valueAtPath ? 'true' : 'false'}
+        description={schema.description ?? undefined}
+      />
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <div
+        className={`space-y-1 rounded-lg border p-3 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } `}
+      >
+        {schema.oneOf?.map((option) => (
+          <label
+            key={option.title}
+            className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${schema.readOnly ? 'cursor-not-allowed opacity-50' : ''} ${valueAtPath === option.const ? 'border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20' : 'border border-transparent'} `}
+          >
+            <input
+              type="radio"
+              checked={valueAtPath === option.const}
+              disabled={schema.readOnly}
+              onChange={() => setValueAtPath(option.const)}
+              className={`h-4 w-4 border-gray-300 text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-blue-400`}
+            />
+            <span
+              className={`text-sm font-medium ${
+                valueAtPath === option.const
+                  ? 'text-blue-900 dark:text-blue-100'
+                  : 'text-gray-900 dark:text-gray-100'
+              } ${schema.readOnly ? 'text-gray-500 dark:text-gray-400' : ''} `}
+            >
+              {option.title}
+            </span>
+          </label>
+        ))}
+      </div>
 
-	if (readonly) {
-		return (
-			<ReadonlyPrimitiveTemplate
-				title={schema.title ?? undefined}
-				value={valueAtPath ? 'true' : 'false'}
-				description={schema.description ?? undefined}
-			/>
-		)
-	}
+      {schema.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
 
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			{schema.oneOf?.map((option) => (
-				<label
-					key={option.title}
-					style={{ display: 'flex', alignItems: 'center' }}
-				>
-					<input
-						type="radio"
-						checked={valueAtPath === option.const}
-						disabled={schema.readOnly}
-						onChange={() => setValueAtPath(option.const)}
-						style={{
-							height: '16px',
-							width: '16px',
-							marginRight: '8px',
-						}}
-					/>
-					<span>{option.title}</span>
-				</label>
-			))}
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/index.tsx b/website/src/components/templates/json-schema/templates/index.tsx
index d713581..b62cf4b 100644
--- a/website/src/components/templates/json-schema/templates/index.tsx
+++ b/website/src/components/templates/json-schema/templates/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 import {
   StringSchema,
   ArraySchema,
@@ -7,143 +7,201 @@ import {
   ObjectSchema,
   FormgenJSONSchema7,
   Templates,
-} from "@react-formgen/json-schema";
+} from '@react-formgen/json-schema'
 
-import { MultiSelectCheckboxTemplate } from "./array/MultiSelectCheckboxTemplate";
-// import { MultiSelectTemplate } from './array/MultiSelectTemplate' // Not in use, just for reference
-import { SimpleArrayTemplate } from "./array/SimpleArrayTemplate";
-import { TupleArrayTemplate } from "./array/TupleArrayTemplate";
-import { CheckboxTemplate } from "./boolean/CheckboxTemplate";
-import { RadioTemplate } from "./boolean/RadioTemplate";
-import { SimpleObjectTemplate } from "./object/SimpleObjectTemplate";
-// import { TextareaTemplate } from './string/TextareaTemplate' // Not in use, just for reference
-import { InputTemplate } from "./union/InputTemplate";
-// import { MultipleChoiceTemplate } from './union/MultipleChoiceTemplate' // Not in use, just for reference
-import { SelectTemplate } from "./union/SelectTemplate";
+import { MultiSelectCheckboxTemplate } from './array/MultiSelectCheckboxTemplate'
+import { MultiSelectTemplate } from './array/MultiSelectTemplate'
+import { SimpleArrayTemplate } from './array/SimpleArrayTemplate'
+import { TupleArrayTemplate } from './array/TupleArrayTemplate'
+import { CheckboxTemplate } from './boolean/CheckboxTemplate'
+import { RadioTemplate } from './boolean/RadioTemplate'
+import { SimpleObjectTemplate } from './object/SimpleObjectTemplate'
+import { TextareaTemplate } from './string/TextareaTemplate'
+import { InputTemplate } from './union/InputTemplate'
+import { MultipleChoiceTemplate } from './union/MultipleChoiceTemplate'
+import { SelectTemplate } from './union/SelectTemplate'
+import { RangeNumberTemplate } from './number/RangeNumberTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher<T> {
+  matcher: (schema: T) => boolean
+  render: () => React.ReactElement
+}
 
 /**
  * BaseStringTemplate
- * Handles switching between input, select, and date fields based on schema metadata.
+ * Handles switching between input, select, textarea, and radio fields based on schema metadata and uiSchema.
  * @param {Object} props - The props for the component.
  * @param {StringSchema} props.schema - The schema for the string property.
  * @param {string[]} props.path - The path to the string property in the form data.
  * @returns {JSX.Element} - The string template component.
  */
 export const BaseStringTemplate: React.FC<{
-  schema: StringSchema;
-  path: string[];
+  schema: StringSchema
+  path: string[]
 }> = ({ schema, path }) => {
-  const stringMatchers = [
+  const stringMatchers: TemplateMatcher<StringSchema>[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: (schema) => schema.uiSchema?.component === 'textarea',
+      render: () => <TextareaTemplate schema={schema} path={path} />,
+    },
+    {
+      matcher: (schema) => schema.uiSchema?.component === 'multipleChoice',
+      render: () => <MultipleChoiceTemplate schema={schema} path={path} />,
+    },
+    // Default schema-based logic
     {
-      matcher: (schema: StringSchema) => schema.enum || schema.oneOf,
+      matcher: (schema) => Boolean(schema.enum || schema.oneOf),
       render: () => <SelectTemplate schema={schema} path={path} />,
-      // Alternative render method
-      // render: () => (
-      //   <MultipleChoiceTemplate schema={schema} path={path} />
-      // ),
     },
     {
-      matcher: (schema: StringSchema) =>
-        schema.format && ["date", "date-time"].includes(schema.format),
+      matcher: (schema) =>
+        Boolean(schema.format && ['date', 'date-time'].includes(schema.format)),
       render: () => (
         <InputTemplate
           schema={schema}
           path={path}
           htmlType={
-            schema.format === "date-time" ? "datetime-local" : schema.format
+            schema.format === 'date-time' ? 'datetime-local' : schema.format
           }
         />
       ),
     },
     {
-      matcher: (schema: StringSchema) => schema.format === "email",
+      matcher: (schema) => schema.format === 'email',
       render: () => (
         <InputTemplate schema={schema} path={path} htmlType="email" />
       ),
     },
     {
-      matcher: (schema: StringSchema) => schema.format === "uri",
+      matcher: (schema) => schema.format === 'uri',
       render: () => (
         <InputTemplate schema={schema} path={path} htmlType="url" />
       ),
     },
+    // Fallback
     {
       matcher: () => true,
       render: () => <InputTemplate schema={schema} path={path} />,
     },
-  ];
+  ]
+  // for (const { matcher, render } of stringMatchers) {
+  //   if (matcher(schema)) {
+  //     return render();
+  //   }
+  // }
+  // return <InputTemplate schema={schema} path={path} />;
 
-  for (const { matcher, render } of stringMatchers) {
-    if (matcher(schema)) {
-      return render();
-    }
-  }
-  return <InputTemplate schema={schema} path={path} />;
-};
+  const matchedTemplate = stringMatchers.find(({ matcher }) => matcher(schema))
+  return (
+    matchedTemplate?.render() ?? <InputTemplate schema={schema} path={path} />
+  )
+}
 
 /**
  * BaseNumberTemplate
- * Renders a number input or select field based on the number schema.
+ * Renders a number input or select field based on the number schema and uiSchema.
  * @param {Object} props - The props for the component.
  * @param {NumberSchema} props.schema - The schema for the number property.
  * @param {string[]} props.path - The path to the number property in the form data.
  * @returns {JSX.Element} - The number template component.
  */
 export const BaseNumberTemplate: React.FC<{
-  schema: NumberSchema;
-  path: string[];
+  schema: NumberSchema
+  path: string[]
 }> = ({ schema, path }) => {
-  const numberMatchers = [
+  const numberMatchers: TemplateMatcher<NumberSchema>[] = [
+    // uiSchema component overrides for non-default behavior
     {
-      matcher: (schema: NumberSchema) => schema.enum || schema.oneOf,
+      matcher: (schema) =>
+        schema.uiSchema?.component === 'range' &&
+        typeof schema.minimum === 'number' &&
+        typeof schema.maximum === 'number',
+      render: () => (
+        <RangeNumberTemplate
+          schema={schema as NumberSchema & { minimum: number; maximum: number }}
+          path={path}
+        />
+      ),
+    },
+    // Default schema-based logic
+    {
+      matcher: (schema) => Boolean(schema.enum || schema.oneOf),
       render: () => <SelectTemplate schema={schema} path={path} />,
     },
+    // Fallback
     {
       matcher: () => true,
       render: () => (
         <InputTemplate schema={schema} path={path} htmlType="number" />
       ),
     },
-  ];
+  ]
+  // for (const { matcher, render } of numberMatchers) {
+  //   if (matcher(schema)) {
+  //     return render();
+  //   }
+  // }
+  // return <InputTemplate schema={schema} path={path} htmlType="number" />;
 
-  for (const { matcher, render } of numberMatchers) {
-    if (matcher(schema)) {
-      return render();
-    }
-  }
-  return <InputTemplate schema={schema} path={path} htmlType="number" />;
-};
+  const matchedTemplate = numberMatchers.find(({ matcher }) => matcher(schema))
+  return (
+    matchedTemplate?.render() ?? (
+      <InputTemplate schema={schema} path={path} htmlType="number" />
+    )
+  )
+}
 
 /**
  * BaseBooleanTemplate
- * Renders a checkbox or radio buttons for boolean schemas.
+ * Renders a checkbox or radio buttons for boolean schemas based on uiSchema.
  * @param {Object} props - The props for the component.
  * @param {BooleanSchema} props.schema - The schema for the boolean property.
  * @param {string[]} props.path - The path to the boolean property in the form data.
  * @returns {JSX.Element} - The boolean template component.
  */
 export const BaseBooleanTemplate: React.FC<{
-  schema: BooleanSchema;
-  path: string[];
+  schema: BooleanSchema
+  path: string[]
 }> = ({ schema, path }) => {
-  const booleanMatchers = [
+  const booleanMatchers: TemplateMatcher<BooleanSchema>[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: (schema) => schema.uiSchema?.component === 'radio',
+      render: () => <RadioTemplate schema={schema} path={path} />,
+    },
     {
-      matcher: (schema: BooleanSchema) => !schema.oneOf,
+      matcher: (schema) => schema.uiSchema?.component === 'checkbox',
       render: () => <CheckboxTemplate schema={schema} path={path} />,
     },
+    // Default schema-based logic
+    {
+      matcher: (schema) => !schema.oneOf,
+      render: () => <CheckboxTemplate schema={schema} path={path} />,
+    },
+    // Fallback
     {
       matcher: () => true,
       render: () => <RadioTemplate schema={schema} path={path} />,
     },
-  ];
+  ]
+  // for (const { matcher, render } of booleanMatchers) {
+  //   if (matcher(schema)) {
+  //     return render();
+  //   }
+  // }
+  // return <CheckboxTemplate schema={schema} path={path} />;
 
-  for (const { matcher, render } of booleanMatchers) {
-    if (matcher(schema)) {
-      return render();
-    }
-  }
-  return <CheckboxTemplate schema={schema} path={path} />;
-};
+  const matchedTemplate = booleanMatchers.find(({ matcher }) => matcher(schema))
+  return (
+    matchedTemplate?.render() ?? (
+      <CheckboxTemplate schema={schema} path={path} />
+    )
+  )
+}
 
 /**
  * BaseObjectTemplate
@@ -154,58 +212,77 @@ export const BaseBooleanTemplate: React.FC<{
  * @returns {JSX.Element} - The object template component.
  */
 export const BaseObjectTemplate: React.FC<{
-  schema: ObjectSchema;
-  path: string[];
+  schema: ObjectSchema
+  path: string[]
 }> = ({ schema, path }) => {
-  return <SimpleObjectTemplate schema={schema} path={path} />;
-};
+  return <SimpleObjectTemplate schema={schema} path={path} />
+}
 
 /**
  * BaseArrayTemplate
- * Renders an array field, choosing the appropriate template based on the schema.
+ * Renders an array field, choosing the appropriate template based on the schema and uiSchema.
  * @param {Object} props - The props for the component.
  * @param {ArraySchema} props.schema - The schema for the array property.
  * @param {string[]} props.path - The path to the array property in the form data.
  * @returns {JSX.Element} - The array template component.
  */
 export const BaseArrayTemplate: React.FC<{
-  schema: ArraySchema;
-  path: string[];
+  schema: ArraySchema
+  path: string[]
 }> = ({ schema, path }) => {
-  const arrayMatchers = [
+  const arrayMatchers: TemplateMatcher<ArraySchema>[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: (schema) => schema.uiSchema?.component === 'multiSelect',
+      render: () => <MultiSelectTemplate schema={schema} path={path} />,
+    },
+    // Default schema-based logic
     {
-      matcher: (schema: ArraySchema) => Array.isArray(schema.items),
+      matcher: (schema) => Array.isArray(schema.items),
       render: () => <TupleArrayTemplate schema={schema} path={path} />,
     },
     {
-      matcher: (schema: ArraySchema) =>
-        schema.uniqueItems &&
-        schema.items &&
-        !Array.isArray(schema.items) &&
-        typeof schema.items === "object" &&
-        ((schema.items as FormgenJSONSchema7).enum ||
-          (schema.items as FormgenJSONSchema7).oneOf),
+      matcher: (schema) =>
+        Boolean(
+          schema.uniqueItems &&
+            schema.items &&
+            !Array.isArray(schema.items) &&
+            typeof schema.items === 'object' &&
+            ((schema.items as FormgenJSONSchema7).enum ||
+              (schema.items as FormgenJSONSchema7).oneOf),
+        ),
       render: () => <MultiSelectCheckboxTemplate schema={schema} path={path} />,
     },
+    // Fallback
     {
       matcher: () => true,
       render: () => <SimpleArrayTemplate schema={schema} path={path} />,
     },
-  ];
+  ]
 
-  for (const { matcher, render } of arrayMatchers) {
-    if (matcher(schema)) {
-      return render();
-    }
-  }
+  // for (const { matcher, render } of arrayMatchers) {
+  //   if (matcher(schema)) {
+  //     return render();
+  //   }
+  // }
 
-  return <SimpleArrayTemplate schema={schema} path={path} />;
-};
+  // return <SimpleArrayTemplate schema={schema} path={path} />;
+  const matchedTemplate = arrayMatchers.find(({ matcher }) => matcher(schema))
+  return (
+    matchedTemplate?.render() ?? (
+      <SimpleArrayTemplate schema={schema} path={path} />
+    )
+  )
+}
 
+/**
+ * Base templates configuration for the form system
+ * Provides default template implementations for all schema types
+ */
 export const BaseTemplates: Templates = {
   StringTemplate: BaseStringTemplate,
   NumberTemplate: BaseNumberTemplate,
   BooleanTemplate: BaseBooleanTemplate,
   ObjectTemplate: BaseObjectTemplate,
   ArrayTemplate: BaseArrayTemplate,
-};
+}
diff --git a/website/src/components/templates/json-schema/templates/number/RangeNumberTemplate.tsx b/website/src/components/templates/json-schema/templates/number/RangeNumberTemplate.tsx
new file mode 100644
index 0000000..6094f26
--- /dev/null
+++ b/website/src/components/templates/json-schema/templates/number/RangeNumberTemplate.tsx
@@ -0,0 +1,174 @@
+import React from 'react'
+import {
+  NumberSchema,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
+} from '@react-formgen/json-schema'
+
+export const ReadonlyRangeTemplate: React.FC<{
+  title?: string
+  value?: number
+  min?: number
+  max?: number
+  description?: string
+}> = ({ title, value, min = 0, max = 100, description }) => {
+  const percentage = (((value ?? min) - min) / (max - min)) * 100
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+
+      <div className="relative">
+        {/* Range track */}
+        <div className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            className="h-2 rounded-full bg-blue-500 transition-all duration-200 dark:bg-blue-400"
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+
+        {/* Value display */}
+        <div className="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+          <span>{min}</span>
+          <span className="font-medium text-gray-900 dark:text-gray-100">
+            {value ?? 'N/A'}
+          </span>
+          <span>{max}</span>
+        </div>
+      </div>
+
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * RangeNumberTemplate
+ * Renders a range slider input for number schemas with min/max constraints.
+ * @param {Object} props - The props for the component.
+ * @param {NumberSchema} props.schema - The schema for the range field (must have min/max).
+ * @param {string[]} props.path - The path to the range field in the form data.
+ * @returns {JSX.Element} - The range slider component.
+ */
+export const RangeNumberTemplate: React.FC<{
+  schema: NumberSchema & { minimum: number; maximum: number }
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
+
+  // Extract min/max from schema (support both minimum/maximum and min/max)
+  const min = schema.minimum
+  const max = schema.maximum
+  const step = schema.multipleOf ?? 1
+
+  // Ensure we have a valid number value
+  const currentValue = typeof valueAtPath === 'number' ? valueAtPath : min
+
+  if (readonly) {
+    return (
+      <ReadonlyRangeTemplate
+        title={schema.title ?? undefined}
+        value={currentValue}
+        min={min}
+        max={max}
+        description={schema.description ?? undefined}
+      />
+    )
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(event.target.value)
+    setValueAtPath(newValue)
+  }
+
+  const percentage = ((currentValue - min) / (max - min)) * 100
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <div className="space-y-2">
+        {/* Range Input */}
+        <div className="relative">
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={currentValue}
+            disabled={schema.readOnly}
+            onChange={handleChange}
+            className={`/* Webkit styles */ /* Firefox styles */ h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 transition-all duration-200 ease-in-out focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:shadow-lg [&::-moz-range-thumb]:dark:bg-blue-400 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:transition-colors [&::-webkit-slider-thumb]:duration-200 [&::-webkit-slider-thumb]:hover:bg-blue-600 [&::-webkit-slider-thumb]:dark:border-gray-800 [&::-webkit-slider-thumb]:dark:bg-blue-400 [&::-webkit-slider-thumb]:dark:hover:bg-blue-300 ${
+              errorsAtPath && errorsAtPath.length > 0
+                ? '[&::-moz-range-thumb]:bg-red-500 [&::-moz-range-thumb]:dark:bg-red-400 [&::-webkit-slider-thumb]:bg-red-500 [&::-webkit-slider-thumb]:dark:bg-red-400'
+                : ''
+            } `}
+            style={{
+              background: `linear-gradient(to right, 
+                rgb(59 130 246) 0%, 
+                rgb(59 130 246) ${percentage}%, 
+                rgb(229 231 235) ${percentage}%, 
+                rgb(229 231 235) 100%)`,
+            }}
+          />
+        </div>
+
+        {/* Value display and range labels */}
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {min}
+          </span>
+
+          <div
+            className={`rounded-md px-3 py-1 text-sm font-medium ${
+              errorsAtPath && errorsAtPath.length > 0
+                ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
+                : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200'
+            } `}
+          >
+            {currentValue}
+          </div>
+
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {max}
+          </span>
+        </div>
+      </div>
+
+      {schema.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/json-schema/templates/object/SimpleObjectTemplate.tsx b/website/src/components/templates/json-schema/templates/object/SimpleObjectTemplate.tsx
index f7c3683..c24f6ba 100644
--- a/website/src/components/templates/json-schema/templates/object/SimpleObjectTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/object/SimpleObjectTemplate.tsx
@@ -1,15 +1,35 @@
 import React from 'react'
 import {
-	ObjectSchema,
-	FormgenJSONSchema7,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useRenderTemplate,
-	useIsRequired,
+  ObjectSchema,
+  FormgenJSONSchema7,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useRenderTemplate,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyComplexTemplate } from '../../common/ReadonlyComplexTemplate'
+export const ReadonlySimpleObjectTemplate: React.FC<{
+  title?: string
+  description?: string
+  children: React.ReactNode
+}> = ({ title, description, children }) => {
+  return (
+    <div className="mb-4 w-full border-l-2 border-gray-300 pl-4 dark:border-gray-600">
+      {title && (
+        <strong className="mb-1 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </strong>
+      )}
+      {description && (
+        <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </p>
+      )}
+      <div className="mt-2 space-y-3">{children}</div>
+    </div>
+  )
+}
 
 /**
  * SimpleObjectTemplate
@@ -20,78 +40,83 @@ import { ReadonlyComplexTemplate } from '../../common/ReadonlyComplexTemplate'
  * @returns {JSX.Element} - The simple object template component.
  */
 export const SimpleObjectTemplate: React.FC<{
-	schema: ObjectSchema
-	path: string[]
+  schema: ObjectSchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const RenderTemplate = useRenderTemplate()
-	const required = useIsRequired(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const RenderTemplate = useRenderTemplate()
+  const required = useIsRequired(path)
+
+  if (readonly) {
+    return (
+      <ReadonlySimpleObjectTemplate
+        title={schema.title}
+        description={schema.description}
+      >
+        {schema.properties && Object.keys(schema.properties).length > 0 ? (
+          Object.keys(schema.properties).map((key) => (
+            <RenderTemplate
+              key={key}
+              schema={schema.properties?.[key] as FormgenJSONSchema7}
+              path={[...path, key]}
+            />
+          ))
+        ) : (
+          <div className="text-sm text-gray-500 italic dark:text-gray-400">
+            No data available
+          </div>
+        )}
+      </ReadonlySimpleObjectTemplate>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {schema.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
 
-	if (readonly) {
-		return (
-			<ReadonlyComplexTemplate
-				title={schema.title}
-				description={schema.description}
-			>
-				{schema.properties && Object.keys(schema.properties).length > 0 ? (
-					Object.keys(schema.properties).map((key) => (
-						<RenderTemplate
-							key={key}
-							schema={schema.properties?.[key] as FormgenJSONSchema7}
-							path={[...path, key]}
-						/>
-					))
-				) : (
-					<div style={{ color: '#888' }}>No data available</div>
-				)}
-			</ReadonlyComplexTemplate>
-		)
-	}
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
 
-	return (
-		<div
-			style={{
-				width: '100%',
-				...{
-					display: 'flex',
-					flexDirection: 'column',
-				},
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-			<div
-				style={{
-					border: '0.125rem solid',
-					padding: '1rem',
-					...{
-						display: 'flex',
-						flexWrap: 'wrap',
-						gap: '1rem',
-					},
-				}}
-			>
-				{schema.properties &&
-					Object.keys(schema.properties).map((key) => (
-						<RenderTemplate
-							key={key}
-							schema={schema.properties?.[key] as FormgenJSONSchema7}
-							path={[...path, key]}
-						/>
-					))}
-			</div>
-		</div>
-	)
+      <div
+        className={`rounded-lg border-2 p-4 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/30 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/30'
+        } flex flex-wrap gap-4`}
+      >
+        {schema.properties && Object.keys(schema.properties).length > 0 ? (
+          Object.keys(schema.properties).map((key) => (
+            <RenderTemplate
+              key={key}
+              schema={schema.properties?.[key] as FormgenJSONSchema7}
+              path={[...path, key]}
+            />
+          ))
+        ) : (
+          <div className="w-full py-4 text-center text-sm text-gray-500 italic dark:text-gray-400">
+            No properties defined
+          </div>
+        )}
+      </div>
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/string/TextareaTemplate.tsx b/website/src/components/templates/json-schema/templates/string/TextareaTemplate.tsx
index 46b5906..99818be 100644
--- a/website/src/components/templates/json-schema/templates/string/TextareaTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/string/TextareaTemplate.tsx
@@ -1,14 +1,36 @@
 import React from 'react'
 import {
-	StringSchema,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  StringSchema,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplate'
+export const ReadonlyTextareaTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="min-h-[80px] rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 whitespace-pre-wrap text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
 
 /**
  * TextareaTemplate
@@ -19,59 +41,65 @@ import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplat
  * @returns {JSX.Element} - The textarea field component.
  */
 export const TextareaTemplate: React.FC<{
-	schema: StringSchema
-	path: string[]
+  schema: StringSchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
+
+  if (readonly) {
+    return (
+      <ReadonlyTextareaTemplate
+        title={schema.title ?? undefined}
+        value={valueAtPath}
+        description={schema.description ?? undefined}
+      />
+    )
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValueAtPath(event.target.value)
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
 
-	if (readonly) {
-		return (
-			<ReadonlyPrimitiveTemplate
-				title={schema.title ?? undefined}
-				value={valueAtPath}
-				description={schema.description ?? undefined}
-			/>
-		)
-	}
+      <textarea
+        value={valueAtPath ?? ''}
+        disabled={schema.readOnly}
+        onChange={handleChange}
+        placeholder={schema.title || ''}
+        rows={4}
+        className={`min-h-[80px] w-full resize-y rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:resize-none disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      />
 
-	const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-		setValueAtPath(event.target.value)
-	}
+      {schema.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
 
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			<textarea
-				value={valueAtPath ?? ''}
-				disabled={schema.readOnly}
-				onChange={handleChange}
-				placeholder={schema.title || ''}
-				style={{
-					padding: '8px',
-					border: '1px solid #d1d5db',
-					borderRadius: '0.375rem',
-				}}
-			/>
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/union/InputTemplate.tsx b/website/src/components/templates/json-schema/templates/union/InputTemplate.tsx
index 2bb6ed8..68bc126 100644
--- a/website/src/components/templates/json-schema/templates/union/InputTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/union/InputTemplate.tsx
@@ -1,16 +1,37 @@
 import React from 'react'
 import {
-	StringSchema,
-	NumberSchema,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  StringSchema,
+  NumberSchema,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplate'
-import { useWindowSize } from '../../hooks/useWindowSize'
+export const ReadonlyInputTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
 
 /**
  * InputTemplate
@@ -22,63 +43,62 @@ import { useWindowSize } from '../../hooks/useWindowSize'
  * @returns {JSX.Element} - The input field component.
  */
 export const InputTemplate: React.FC<{
-	schema: StringSchema | NumberSchema
-	path: string[]
-	htmlType?: string
+  schema: StringSchema | NumberSchema
+  path: string[]
+  htmlType?: string
 }> = ({ schema, path, htmlType = 'text' }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const size = useWindowSize()
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
+
+  if (readonly) {
+    return (
+      <ReadonlyInputTemplate
+        title={schema.title ?? undefined}
+        value={valueAtPath}
+        description={schema.description ?? undefined}
+      />
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <input
+        type={htmlType}
+        value={valueAtPath ?? ''}
+        disabled={schema.readOnly}
+        onChange={(e) => setValueAtPath(e.target.value ? e.target.value : null)}
+        placeholder={schema.title || ''}
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      />
 
-	if (readonly) {
-		return (
-			<ReadonlyPrimitiveTemplate
-				title={schema.title ?? undefined}
-				value={valueAtPath}
-				description={schema.description ?? undefined}
-			/>
-		)
-	}
+      {schema.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
 
-	return (
-		<div
-			style={{
-				width: size.width && size.width > 640 ? 'min-content' : '100%',
-				...{
-					display: 'flex',
-					flexDirection: 'column',
-				},
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			<input
-				type={htmlType}
-				value={valueAtPath ?? ''}
-				disabled={schema.readOnly}
-				onChange={(e) => setValueAtPath(e.target.value ? e.target.value : null)}
-				placeholder={schema.title || ''}
-				style={{
-					width: size.width && size.width > 640 ? '12rem' : '100%',
-					padding: '8px',
-					border: '1px solid #d1d5db',
-					borderRadius: '0.375rem',
-					boxSizing: 'border-box',
-				}}
-			/>
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/union/MultipleChoiceTemplate.tsx b/website/src/components/templates/json-schema/templates/union/MultipleChoiceTemplate.tsx
index 37745d1..09ce951 100644
--- a/website/src/components/templates/json-schema/templates/union/MultipleChoiceTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/union/MultipleChoiceTemplate.tsx
@@ -1,40 +1,70 @@
 import React from 'react'
 import {
-	StringSchema,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  StringSchema,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplate'
+export const ReadonlyMultipleChoiceOptionTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
 
-// Memoized MultipleChoiceOptionTemplate to prevent re-renders unless its props change
+/**
+ * Memoized MultipleChoiceOptionTemplate to prevent re-renders unless its props change
+ */
 const MultipleChoiceOptionTemplate: React.FC<{
-	value: string
-	title: string
-	checked: boolean
-	onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-	disabled?: boolean
+  value: string
+  title: string
+  checked: boolean
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
 }> = React.memo(({ value, title, checked, onChange, disabled }) => {
-	return (
-		<label style={{ display: 'flex', alignItems: 'center' }}>
-			<input
-				type="radio"
-				value={value}
-				disabled={disabled}
-				checked={checked}
-				onChange={onChange}
-				style={{
-					height: '16px',
-					width: '16px',
-					marginRight: '8px',
-				}}
-			/>
-			<span>{title}</span>
-		</label>
-	)
+  return (
+    <label
+      className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${checked ? 'border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20' : 'border border-transparent'} `}
+    >
+      <input
+        type="radio"
+        value={value}
+        disabled={disabled}
+        checked={checked}
+        onChange={onChange}
+        className={`h-4 w-4 border-gray-300 text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-blue-400`}
+      />
+      <span
+        className={`text-sm font-medium ${
+          checked
+            ? 'text-blue-900 dark:text-blue-100'
+            : 'text-gray-900 dark:text-gray-100'
+        } ${disabled ? 'text-gray-500 dark:text-gray-400' : ''} `}
+      >
+        {title}
+      </span>
+    </label>
+  )
 })
 
 /**
@@ -46,86 +76,99 @@ const MultipleChoiceOptionTemplate: React.FC<{
  * @returns {JSX.Element} - The multiple-choice field component.
  */
 export const MultipleChoiceTemplate: React.FC<{
-	schema: StringSchema
-	path: string[]
+  schema: StringSchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setValueAtPath(event.target.value)
+    },
+    [setValueAtPath],
+  )
+
+  // Memoize the options to prevent unnecessary recalculations
+  const opts: { value: string; title: string }[] = React.useMemo(() => {
+    const options: { value: string; title: string }[] = []
+    if (schema.enum) {
+      schema.enum.forEach((opt) => options.push({ value: opt, title: opt }))
+    } else if (schema.oneOf) {
+      schema.oneOf.forEach((opt) =>
+        options.push({ value: opt.const, title: opt.title ?? opt.const }),
+      )
+    }
+    return options
+  }, [schema.enum, schema.oneOf])
+
+  // Memoize the option rendering to avoid recreating the function on every render
+  const renderOption = React.useCallback(
+    (option: { value: string; title: string }, index: number) => {
+      return (
+        <MultipleChoiceOptionTemplate
+          key={index}
+          value={option.value}
+          title={option.title}
+          checked={valueAtPath === option.value}
+          onChange={handleChange}
+          disabled={schema.readOnly}
+        />
+      )
+    },
+    [valueAtPath, handleChange, schema.readOnly],
+  )
 
-	const handleChange = React.useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>) => {
-			setValueAtPath(event.target.value)
-		},
-		[setValueAtPath],
-	)
+  if (readonly) {
+    const selectedOption =
+      schema.enum?.find((opt) => opt === valueAtPath) ||
+      schema.oneOf?.find((opt) => opt.const === valueAtPath)?.title ||
+      valueAtPath
+    return (
+      <ReadonlyMultipleChoiceOptionTemplate
+        title={schema.title ?? undefined}
+        value={selectedOption}
+        description={schema.description ?? undefined}
+      />
+    )
+  }
 
-	// Memoize the options to prevent unnecessary recalculations
-	const opts: { value: string; title: string }[] = React.useMemo(() => {
-		const options: { value: string; title: string }[] = []
-		if (schema.enum) {
-			schema.enum.forEach((opt) => options.push({ value: opt, title: opt }))
-		} else if (schema.oneOf) {
-			schema.oneOf.forEach((opt) =>
-				options.push({ value: opt.const, title: opt.title ?? opt.const }),
-			)
-		}
-		return options
-	}, [schema.enum, schema.oneOf])
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
 
-	// Memoize the option rendering to avoid recreating the function on every render
-	const renderOption = React.useCallback(
-		(option: { value: string; title: string }, index: number) => {
-			return (
-				<MultipleChoiceOptionTemplate
-					key={index}
-					value={option.value}
-					title={option.title}
-					checked={valueAtPath === option.value}
-					onChange={handleChange}
-					disabled={schema.readOnly}
-				/>
-			)
-		},
-		[valueAtPath, handleChange, schema.readOnly],
-	)
+      <div
+        className={`space-y-1 rounded-lg border p-3 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } `}
+      >
+        {opts.map((option, index) => renderOption(option, index))}
+      </div>
 
-	if (readonly) {
-		const selectedOption =
-			schema.enum?.find((opt) => opt === valueAtPath) ||
-			schema.oneOf?.find((opt) => opt.const === valueAtPath)?.title ||
-			valueAtPath
-		return (
-			<ReadonlyPrimitiveTemplate
-				title={schema.title ?? undefined}
-				value={selectedOption}
-				description={schema.description ?? undefined}
-			/>
-		)
-	}
+      {schema.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
 
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			<div>{opts.map((option, index) => renderOption(option, index))}</div>
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/json-schema/templates/union/SelectTemplate.tsx b/website/src/components/templates/json-schema/templates/union/SelectTemplate.tsx
index 61aafbe..87e8a9e 100644
--- a/website/src/components/templates/json-schema/templates/union/SelectTemplate.tsx
+++ b/website/src/components/templates/json-schema/templates/union/SelectTemplate.tsx
@@ -1,16 +1,37 @@
 import React from 'react'
 import {
-	StringSchema,
-	NumberSchema,
-	useFormDataAtPath,
-	useErrorsAtPath,
-	useFormContext,
-	FormState,
-	useIsRequired,
+  StringSchema,
+  NumberSchema,
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+  useIsRequired,
 } from '@react-formgen/json-schema'
 
-import { ReadonlyPrimitiveTemplate } from '../../common/ReadonlyPrimitiveTemplate'
-import { useWindowSize } from '../../hooks/useWindowSize'
+export const ReadonlySelectTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
 
 /**
  * SelectTemplate
@@ -20,82 +41,92 @@ import { useWindowSize } from '../../hooks/useWindowSize'
  * @returns {JSX.Element} - The select field component.
  */
 export const SelectTemplate: React.FC<{
-	schema: StringSchema | NumberSchema
-	path: string[]
+  schema: StringSchema | NumberSchema
+  path: string[]
 }> = ({ schema, path }) => {
-	const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, '')
-	const errorsAtPath = useErrorsAtPath(path)
-	const readonly = useFormContext((state: FormState) => state.readonly)
-	const size = useWindowSize()
-	const required = useIsRequired(path)
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, '')
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = useIsRequired(path)
+
+  if (readonly) {
+    const selectedOption =
+      schema.enum?.find((opt) => opt === valueAtPath) ||
+      schema.oneOf?.find((opt) => opt.const === valueAtPath)?.title ||
+      valueAtPath ||
+      'N/A' // Default to 'N/A' if no match found. This is just a workaround for the example to ensure we always have a value to display. Probably not the best idea to push this to prod :)
+
+    return (
+      <ReadonlySelectTemplate
+        title={schema.title ?? undefined}
+        value={selectedOption}
+        description={schema.description ?? undefined}
+      />
+    )
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setValueAtPath(event.target.value)
+  }
 
-	if (readonly) {
-		const selectedOption =
-			schema.enum?.find((opt) => opt === valueAtPath) ||
-			schema.oneOf?.find((opt) => opt.const === valueAtPath)?.title ||
-			valueAtPath
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {schema.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {schema.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
 
-		return (
-			<ReadonlyPrimitiveTemplate
-				title={schema.title ?? undefined}
-				value={selectedOption}
-				description={schema.description ?? undefined}
-			/>
-		)
-	}
+      <select
+        value={valueAtPath}
+        disabled={schema.readOnly}
+        onChange={handleChange}
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      >
+        <option value="" className="text-gray-500 dark:text-gray-400">
+          -- Select an option --
+        </option>
+        {schema.enum
+          ? schema.enum.map((option, index) => (
+              <option
+                key={index}
+                value={option}
+                className="text-gray-900 dark:text-gray-100"
+              >
+                {option}
+              </option>
+            ))
+          : schema.oneOf?.map((option) => (
+              <option
+                key={option.const}
+                value={option.const}
+                className="text-gray-900 dark:text-gray-100"
+              >
+                {option.title}
+              </option>
+            ))}
+      </select>
 
-	const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-		setValueAtPath(event.target.value)
-	}
+      {schema.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {schema.description}
+        </small>
+      )}
 
-	return (
-		<div
-			style={{
-				width: size.width && size.width > 640 ? 'min-content' : '100%',
-				...{
-					display: 'flex',
-					flexDirection: 'column',
-				},
-			}}
-		>
-			{schema.title && (
-				<label style={{ fontWeight: '600' }}>
-					{schema.title}
-					{required && <span style={{ color: 'red' }}>*</span>}
-				</label>
-			)}
-			<select
-				value={valueAtPath}
-				disabled={schema.readOnly}
-				onChange={handleChange}
-				style={{
-					width: size.width && size.width > 640 ? '12rem' : '100%',
-					padding: '8px',
-					border: '1px solid #d1d5db',
-					borderRadius: '0.375rem',
-					boxSizing: 'border-box',
-				}}
-			>
-				<option value=""></option>
-				{schema.enum
-					? schema.enum.map((option, index) => (
-							<option key={index} value={option}>
-								{option}
-							</option>
-						))
-					: schema.oneOf?.map((option) => (
-							<option key={option.const} value={option.const}>
-								{option.title}
-							</option>
-						))}
-			</select>
-			{schema.description && <small>{schema.description}</small>}
-			{errorsAtPath &&
-				errorsAtPath.map((error, index) => (
-					<div key={index} style={{ color: 'red', width: '100%' }}>
-						{error.message}
-					</div>
-				))}
-		</div>
-	)
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
 }
diff --git a/website/src/components/templates/zod/BaseFormRoot.tsx b/website/src/components/templates/zod/BaseFormRoot.tsx
new file mode 100644
index 0000000..98ce325
--- /dev/null
+++ b/website/src/components/templates/zod/BaseFormRoot.tsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import * as z from 'zod/v4/core'
+import {
+  useFormContext,
+  useRenderTemplate,
+  FormState,
+  FormRootProps,
+  unwrapSchema,
+} from '@react-formgen/zod'
+
+/**
+ * Form validation state for styling
+ */
+type FormValidationState = 'idle' | 'valid' | 'invalid'
+
+/**
+ * Gets the border classes based on form validation state
+ * @param validationState - Current validation state of the form
+ */
+const getFormBorderClasses = (validationState: FormValidationState): string => {
+  switch (validationState) {
+    case 'valid':
+      return 'border border-green-500 dark:border-green-400'
+    case 'invalid':
+      return 'border border-red-500 dark:border-red-400'
+    case 'idle':
+    default:
+      return 'border-0'
+  }
+}
+
+/**
+ * Common layout classes for form containers
+ */
+const FORM_CONTAINER_CLASSES =
+  'p-4 flex flex-wrap gap-4 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100'
+
+/**
+ * Submit button classes
+ */
+const SUBMIT_BUTTON_CLASSES = `
+  w-full px-4 py-2 
+  bg-blue-600 hover:bg-blue-700 
+  dark:bg-blue-500 dark:hover:bg-blue-600
+  text-white 
+  rounded-md 
+  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 
+  dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900
+  transition-colors duration-200 
+  disabled:opacity-50 disabled:cursor-not-allowed
+  disabled:hover:bg-blue-600 dark:disabled:hover:bg-blue-500
+  font-medium
+  shadow-sm hover:shadow-md dark:shadow-gray-900/50
+`
+  .replace(/\s+/g, ' ')
+  .trim()
+
+/**
+ * BaseFormRoot
+ * The root form component that renders the form based on the schema and handles submission.
+ * @param {FormRootProps} props - The props for the BaseFormRoot.
+ * @param {Function} props.onSubmit - Callback function when form is submitted successfully.
+ * @param {Function} props.onError - Callback function when form submission has errors.
+ * @returns {JSX.Element} - The form component.
+ */
+export const BaseFormRoot: React.FC<FormRootProps> = ({
+  onSubmit,
+  onError,
+}) => {
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const schema = useFormContext((state: FormState) => state.schema)
+  const formData = useFormContext((state: FormState) => state.formData)
+  const setErrors = useFormContext((state: FormState) => state.setErrors)
+  const RenderTemplate = useRenderTemplate()
+  const [validationState, setValidationState] =
+    React.useState<FormValidationState>('idle')
+
+  // Unwrap to get the core schema
+  const coreSchema = unwrapSchema(schema)
+
+  if (readonly) {
+    return (
+      <div className={`${FORM_CONTAINER_CLASSES} rounded-lg`}>
+        {coreSchema._zod.def.type === 'object' ? (
+          Object.entries((coreSchema as z.$ZodObject)._zod.def.shape).map(
+            ([key, fieldSchema]) => (
+              <RenderTemplate
+                key={key}
+                schema={fieldSchema as z.$ZodType}
+                path={[key]}
+              />
+            ),
+          )
+        ) : (
+          <RenderTemplate schema={schema} path={[]} />
+        )}
+      </div>
+    )
+  }
+
+  /**
+   * Handles form submission with validation
+   * @param event - Form submission event
+   */
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    try {
+      // Parse with Zod
+      const result = await z.safeParseAsync(schema, formData)
+
+      if (result.success) {
+        setValidationState('valid')
+        setErrors(null)
+        onSubmit(result.data)
+      } else {
+        setValidationState('invalid')
+        // Convert Zod errors to issues format
+        const issues = result.error.issues
+        setErrors(issues)
+        onError(issues, formData)
+      }
+    } catch (error) {
+      console.error('Form validation error:', error)
+      setValidationState('invalid')
+    }
+  }
+
+  const formClasses = `${FORM_CONTAINER_CLASSES} ${getFormBorderClasses(validationState)} rounded-lg transition-colors duration-200`
+
+  return (
+    <form onSubmit={handleSubmit} className={formClasses}>
+      {coreSchema._zod.def.type === 'object' ? (
+        Object.entries((coreSchema as z.$ZodObject)._zod.def.shape).map(
+          ([key, fieldSchema]) => (
+            <RenderTemplate
+              key={key}
+              schema={fieldSchema as z.$ZodType}
+              path={[key]}
+            />
+          ),
+        )
+      ) : (
+        <RenderTemplate schema={schema} path={[]} />
+      )}
+      <button type="submit" className={SUBMIT_BUTTON_CLASSES}>
+        Submit
+      </button>
+    </form>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/array/BaseArrayTemplate.tsx b/website/src/components/templates/zod/templates/array/BaseArrayTemplate.tsx
new file mode 100644
index 0000000..d973f6a
--- /dev/null
+++ b/website/src/components/templates/zod/templates/array/BaseArrayTemplate.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { getMetadata, unwrapSchema } from '@react-formgen/zod'
+import { MultiSelectCheckboxTemplate } from './MultiSelectCheckboxTemplate'
+import { MultiSelectTemplate } from './MultiSelectTemplate'
+import { SimpleArrayTemplate } from './SimpleArrayTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher {
+  matcher: () => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * Helper function to check if array element is a union of literals (for multi-select)
+ * @param elementSchema - The array element schema to check
+ * @returns Boolean indicating if this is a union of literals
+ */
+function isUnionOfLiterals(elementSchema: z.$ZodType): boolean {
+  const unwrappedElement = unwrapSchema(elementSchema)
+
+  if (unwrappedElement._zod.def.type !== 'union') {
+    return false
+  }
+
+  const unionSchema = unwrappedElement as z.$ZodUnion
+  return unionSchema._zod.def.options.every((option: z.$ZodType) => {
+    const unwrappedOption = unwrapSchema(option)
+    return unwrappedOption._zod.def.type === 'literal'
+  })
+}
+
+/**
+ * BaseArrayTemplate
+ * Handles switching between different array templates based on schema and uiSchema.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the array property.
+ * @param {string[]} props.path - The path to the array property in the form data.
+ * @returns {JSX.Element} - The array template component.
+ */
+export const BaseArrayTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const metadata = getMetadata(schema)
+
+  // Extract array element schema
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodArray
+  const elementSchema = unwrappedSchema._zod.def.element
+
+  const arrayMatchers: TemplateMatcher[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: () =>
+        metadata.uiSchema?.component === 'multiSelect' &&
+        isUnionOfLiterals(elementSchema),
+      render: () => <MultiSelectTemplate schema={schema} path={path} />,
+    },
+    {
+      matcher: () =>
+        metadata.uiSchema?.component === 'checkbox' &&
+        isUnionOfLiterals(elementSchema),
+      render: () => <MultiSelectCheckboxTemplate schema={schema} path={path} />,
+    },
+
+    // Auto-detect multi-select for arrays with union of literals
+    {
+      matcher: () => isUnionOfLiterals(elementSchema),
+      render: () => <MultiSelectCheckboxTemplate schema={schema} path={path} />,
+    },
+
+    // Fallback to simple array
+    {
+      matcher: () => true,
+      render: () => <SimpleArrayTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = arrayMatchers.find(({ matcher }) => matcher())
+  return (
+    matchedTemplate?.render() ?? (
+      <SimpleArrayTemplate schema={schema} path={path} />
+    )
+  )
+}
diff --git a/website/src/components/templates/zod/templates/array/MultiSelectCheckboxTemplate.tsx b/website/src/components/templates/zod/templates/array/MultiSelectCheckboxTemplate.tsx
new file mode 100644
index 0000000..65ad5ae
--- /dev/null
+++ b/website/src/components/templates/zod/templates/array/MultiSelectCheckboxTemplate.tsx
@@ -0,0 +1,166 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * Helper function to extract options from array element union schema
+ * @param elementSchema - The element schema to analyze
+ * @returns Array of options with value and label
+ */
+function extractUnionOptions(
+  elementSchema: z.$ZodType,
+): Array<{ value: unknown; label: string }> {
+  const unwrappedElement = unwrapSchema(elementSchema)
+
+  if (unwrappedElement._zod.def.type !== 'union') {
+    return []
+  }
+
+  const unionSchema = unwrappedElement as z.$ZodUnion
+  const options: Array<{ value: unknown; label: string }> = []
+
+  unionSchema._zod.def.options.forEach((option: z.$ZodType) => {
+    const unwrappedOption = unwrapSchema(option)
+
+    if (unwrappedOption._zod.def.type === 'literal') {
+      const literalSchema = unwrappedOption as z.$ZodLiteral
+      const values = Array.from(literalSchema._zod.def.values)
+      const metadata = getMetadata(option)
+
+      options.push({
+        value: values[0],
+        label: metadata?.title || String(values[0]),
+      })
+    }
+  })
+
+  return options
+}
+
+/**
+ * MultiSelectCheckboxTemplate
+ * Renders a set of checkboxes for multi-select arrays with union literal elements.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the array property.
+ * @param {string[]} props.path - The path to the array property in the form data.
+ * @returns {JSX.Element} - The multi-select checkbox component.
+ */
+export const MultiSelectCheckboxTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, [])
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract array element schema and options
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodArray
+  const elementSchema = unwrappedSchema._zod.def.element
+  const options = extractUnionOptions(elementSchema)
+
+  /**
+   * Handles checkbox value changes
+   * @param optionValue - The option value being toggled
+   */
+  const handleChange = (optionValue: unknown) => {
+    const currentValues = Array.isArray(valueAtPath) ? valueAtPath : []
+    const updatedValues = currentValues.includes(optionValue)
+      ? currentValues.filter((item: unknown) => item !== optionValue)
+      : [...currentValues, optionValue]
+    setValueAtPath(updatedValues)
+  }
+
+  if (readonly) {
+    const selectedLabels = options
+      .filter(
+        (option) =>
+          Array.isArray(valueAtPath) && valueAtPath.includes(option.value),
+      )
+      .map((option) => option.label)
+      .join(', ')
+
+    return (
+      <div className="flex w-full flex-col space-y-1">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </label>
+        )}
+        <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+          {selectedLabels || 'N/A'}
+        </div>
+        {metadata.description && (
+          <small className="text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </small>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      <div
+        className={`space-y-1 rounded-lg border p-3 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } `}
+      >
+        {options.map((option) => (
+          <label
+            key={String(option.value)}
+            className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${
+              Array.isArray(valueAtPath) && valueAtPath.includes(option.value)
+                ? 'border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20'
+                : 'border border-transparent'
+            } `}
+          >
+            <input
+              type="checkbox"
+              checked={
+                Array.isArray(valueAtPath) && valueAtPath.includes(option.value)
+              }
+              onChange={() => handleChange(option.value)}
+              className="h-4 w-4 rounded border-gray-300 bg-white text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-blue-400"
+            />
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              {option.label}
+            </span>
+          </label>
+        ))}
+      </div>
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/array/MultiSelectTemplate.tsx b/website/src/components/templates/zod/templates/array/MultiSelectTemplate.tsx
new file mode 100644
index 0000000..a6ac221
--- /dev/null
+++ b/website/src/components/templates/zod/templates/array/MultiSelectTemplate.tsx
@@ -0,0 +1,175 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * Helper function to extract options from array element union schema
+ * @param elementSchema - The element schema to analyze
+ * @returns Array of options with value and label
+ */
+function extractUnionOptions(
+  elementSchema: z.$ZodType,
+): Array<{ value: unknown; label: string }> {
+  const unwrappedElement = unwrapSchema(elementSchema)
+
+  if (unwrappedElement._zod.def.type !== 'union') {
+    return []
+  }
+
+  const unionSchema = unwrappedElement as z.$ZodUnion
+  const options: Array<{ value: unknown; label: string }> = []
+
+  unionSchema._zod.def.options.forEach((option: z.$ZodType) => {
+    const unwrappedOption = unwrapSchema(option)
+
+    if (unwrappedOption._zod.def.type === 'literal') {
+      const literalSchema = unwrappedOption as z.$ZodLiteral
+      const values = Array.from(literalSchema._zod.def.values)
+      const metadata = getMetadata(option)
+
+      options.push({
+        value: values[0],
+        label: metadata?.title || String(values[0]),
+      })
+    }
+  })
+
+  return options
+}
+
+/**
+ * MultiSelectTemplate
+ * Renders a multi-select dropdown for arrays with union literal elements.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the array property.
+ * @param {string[]} props.path - The path to the array property in the form data.
+ * @returns {JSX.Element} - The multi-select field component.
+ */
+export const MultiSelectTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path, [])
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract array element schema and options
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodArray
+  const elementSchema = unwrappedSchema._zod.def.element
+  const options = extractUnionOptions(elementSchema)
+
+  /**
+   * Handles multi-select changes
+   * @param event - The select change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedOptions = Array.from(
+      event.target.selectedOptions,
+      (option) => {
+        // Try to parse the value back to its original type
+        const originalOption = options.find(
+          (opt) => String(opt.value) === option.value,
+        )
+        return originalOption ? originalOption.value : option.value
+      },
+    )
+    setValueAtPath(selectedOptions)
+  }
+
+  if (readonly) {
+    const selectedLabels = options
+      .filter(
+        (option) =>
+          Array.isArray(valueAtPath) && valueAtPath.includes(option.value),
+      )
+      .map((option) => option.label)
+      .join(', ')
+
+    return (
+      <div className="flex w-full flex-col space-y-1">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </label>
+        )}
+        <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+          {selectedLabels || 'N/A'}
+        </div>
+        {metadata.description && (
+          <small className="text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </small>
+        )}
+      </div>
+    )
+  }
+
+  // Convert current values to strings for HTML select
+  const currentValues = Array.isArray(valueAtPath)
+    ? valueAtPath.map((val) => String(val))
+    : []
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      <div className="relative">
+        <select
+          multiple
+          value={currentValues}
+          onChange={handleChange}
+          disabled={false} // Zod doesn't have readOnly property like JSON Schema
+          size={Math.min(options.length, 6)} // Show up to 6 options without scrolling
+          className={`min-h-[120px] w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+            errorsAtPath && errorsAtPath.length > 0
+              ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+              : ''
+          } `}
+        >
+          {options.map((option) => (
+            <option
+              key={String(option.value)}
+              value={String(option.value)}
+              className="px-2 py-1"
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <small className="text-xs text-gray-500 dark:text-gray-400">
+        Hold Ctrl (Cmd on Mac) to select multiple options
+      </small>
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/array/SimpleArrayTemplate.tsx b/website/src/components/templates/zod/templates/array/SimpleArrayTemplate.tsx
new file mode 100644
index 0000000..eb92227
--- /dev/null
+++ b/website/src/components/templates/zod/templates/array/SimpleArrayTemplate.tsx
@@ -0,0 +1,183 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormContext,
+  useArrayTemplate,
+  useRenderTemplate,
+  FormState,
+} from '@react-formgen/zod'
+import {
+  getMetadata,
+  isRequired,
+  unwrapSchema,
+  generateInitialData,
+} from '@react-formgen/zod'
+
+/**
+ * ReadonlySimpleArrayTemplate
+ * Renders a readonly array display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {string} [props.description] - The field description.
+ * @param {React.ReactNode} props.children - Child elements to render.
+ * @returns {JSX.Element} - The readonly array component.
+ */
+export const ReadonlySimpleArrayTemplate: React.FC<{
+  title?: string
+  description?: string
+  children: React.ReactNode
+}> = ({ title, description, children }) => {
+  return (
+    <div className="mb-4 w-full border-l-2 border-gray-300 pl-4 dark:border-gray-600">
+      {title && (
+        <strong className="mb-1 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </strong>
+      )}
+      {description && (
+        <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </p>
+      )}
+      <div className="mt-2 space-y-3">{children}</div>
+    </div>
+  )
+}
+
+/**
+ * SimpleArrayTemplate
+ * Renders an array schema where items are of the same type.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema of the array.
+ * @param {string[]} props.path - The path to the array in the form data.
+ * @returns {JSX.Element} - The simple array template component.
+ */
+export const SimpleArrayTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const RenderTemplate = useRenderTemplate()
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract array element schema
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodArray
+  const elementSchema = unwrappedSchema._zod.def.element
+
+  const { valueAtPath, errorsAtPath, moveItem, removeItem, addItem } =
+    useArrayTemplate(path, () => generateInitialData(elementSchema), [])
+
+  if (readonly) {
+    return (
+      <ReadonlySimpleArrayTemplate
+        title={metadata.title}
+        description={metadata.description}
+      >
+        {Array.isArray(valueAtPath) && valueAtPath.length > 0 ? (
+          valueAtPath.map((_, index) => (
+            <RenderTemplate
+              key={index}
+              schema={elementSchema}
+              path={[...path, index.toString()]}
+            />
+          ))
+        ) : (
+          <div className="text-gray-500 italic dark:text-gray-400">
+            No items
+          </div>
+        )}
+      </ReadonlySimpleArrayTemplate>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      <div className="space-y-3">
+        {errorsAtPath &&
+          errorsAtPath.map((error, index) => (
+            <div
+              key={index}
+              className="text-sm font-medium text-red-500 dark:text-red-400"
+            >
+              {error.message}
+            </div>
+          ))}
+
+        <div
+          className={`space-y-4 rounded-lg border-2 p-4 ${
+            errorsAtPath && errorsAtPath.length > 0
+              ? 'border-red-200 bg-red-50/30 dark:border-red-700 dark:bg-red-900/10'
+              : 'border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/30'
+          } `}
+        >
+          {Array.isArray(valueAtPath) && valueAtPath.length > 0 ? (
+            valueAtPath.map((_, index) => (
+              <div
+                key={index}
+                className="flex items-start space-x-3 rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-600 dark:bg-gray-800"
+              >
+                <div className="flex-1">
+                  <RenderTemplate
+                    schema={elementSchema}
+                    path={[...path, index.toString()]}
+                  />
+                </div>
+                <div className="flex flex-col space-y-1">
+                  <button
+                    type="button"
+                    onClick={() => moveItem(index, 'up')}
+                    disabled={index === 0}
+                    className="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                  >
+                    ↑
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => moveItem(index, 'down')}
+                    disabled={index === valueAtPath.length - 1}
+                    className="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                  >
+                    ↓
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => removeItem(index)}
+                    className="rounded border border-red-300 bg-red-50 px-2 py-1 text-xs text-red-700 hover:bg-red-100 dark:border-red-600 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="py-4 text-center text-gray-500 italic dark:text-gray-400">
+              No items added yet
+            </div>
+          )}
+        </div>
+
+        <button
+          type="button"
+          onClick={addItem}
+          className="w-full rounded-lg border-2 border-dashed border-green-300 bg-green-50 px-4 py-3 text-sm font-medium text-green-700 transition-all duration-200 ease-in-out hover:border-green-400 hover:bg-green-100 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-green-600 dark:bg-green-900/30 dark:text-green-300 dark:hover:border-green-500 dark:hover:bg-green-900/50"
+        >
+          + Add Item
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/array/index.ts b/website/src/components/templates/zod/templates/array/index.ts
new file mode 100644
index 0000000..56c22c5
--- /dev/null
+++ b/website/src/components/templates/zod/templates/array/index.ts
@@ -0,0 +1,4 @@
+export { BaseArrayTemplate } from './BaseArrayTemplate'
+export { SimpleArrayTemplate } from './SimpleArrayTemplate'
+export { MultiSelectTemplate } from './MultiSelectTemplate'
+export { MultiSelectCheckboxTemplate } from './MultiSelectCheckboxTemplate'
diff --git a/website/src/components/templates/zod/templates/bigint/BaseBigIntTemplate.tsx b/website/src/components/templates/zod/templates/bigint/BaseBigIntTemplate.tsx
new file mode 100644
index 0000000..cbbaf60
--- /dev/null
+++ b/website/src/components/templates/zod/templates/bigint/BaseBigIntTemplate.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { getMetadata, unwrapSchema } from '@react-formgen/zod'
+import { RangeBigIntTemplate } from './RangeBigIntTemplate'
+import { BigIntInputTemplate } from './BigIntInputTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher {
+  matcher: () => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * Helper function to check if a schema has both min and max constraints for range input
+ * @param schema - The Zod schema to check
+ * @returns Boolean indicating if the schema has both min and max
+ */
+function hasMinAndMax(schema: z.$ZodType): boolean {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodBigInt
+  const bag = unwrappedSchema._zod.bag
+
+  return typeof bag?.minimum === 'bigint' && typeof bag?.maximum === 'bigint'
+}
+
+/**
+ * BaseBigIntTemplate
+ * Handles switching between range and BigInt input based on schema constraints and uiSchema.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the BigInt property.
+ * @param {string[]} props.path - The path to the BigInt property in the form data.
+ * @returns {JSX.Element} - The BigInt template component.
+ */
+export const BaseBigIntTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const metadata = getMetadata(schema)
+
+  const bigintMatchers: TemplateMatcher[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: () =>
+        metadata.uiSchema?.component === 'range' && hasMinAndMax(schema),
+      render: () => <RangeBigIntTemplate schema={schema} path={path} />,
+    },
+
+    // Auto-detect range based on min/max constraints
+    {
+      matcher: () => hasMinAndMax(schema),
+      render: () => <RangeBigIntTemplate schema={schema} path={path} />,
+    },
+
+    // Fallback to BigInt input
+    {
+      matcher: () => true,
+      render: () => <BigIntInputTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = bigintMatchers.find(({ matcher }) => matcher())
+  return (
+    matchedTemplate?.render() ?? (
+      <BigIntInputTemplate schema={schema} path={path} />
+    )
+  )
+}
diff --git a/website/src/components/templates/zod/templates/bigint/BigIntInputTemplate.tsx b/website/src/components/templates/zod/templates/bigint/BigIntInputTemplate.tsx
new file mode 100644
index 0000000..38ff7f9
--- /dev/null
+++ b/website/src/components/templates/zod/templates/bigint/BigIntInputTemplate.tsx
@@ -0,0 +1,134 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyBigIntInputTemplate
+ * Renders a readonly BigInt input display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {bigint} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly BigInt input component.
+ */
+export const ReadonlyBigIntInputTemplate: React.FC<{
+  title?: string
+  value?: bigint
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value?.toString() ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * BigIntInputTemplate
+ * Renders a BigInt input field for BigInt schemas using Zod.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the BigInt field.
+ * @param {string[]} props.path - The path to the BigInt field in the form data.
+ * @returns {JSX.Element} - The BigInt input field component.
+ */
+export const BigIntInputTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  if (readonly) {
+    return (
+      <ReadonlyBigIntInputTemplate
+        title={metadata.title}
+        value={valueAtPath as bigint}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles BigInt input value changes
+   * @param event - The input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    if (value === '') {
+      setValueAtPath(null)
+    } else {
+      try {
+        const bigintValue = BigInt(value)
+        setValueAtPath(bigintValue)
+      } catch {
+        // Invalid BigInt format, set to null
+        setValueAtPath(null)
+      }
+    }
+  }
+
+  // Convert BigInt to string for display
+  const displayValue =
+    typeof valueAtPath === 'bigint' ? valueAtPath.toString() : ''
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <input
+        type="text"
+        value={displayValue}
+        disabled={false} // Zod doesn't have readOnly property like JSON Schema
+        onChange={handleChange}
+        placeholder={metadata.title || 'Enter BigInt...'}
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      />
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/bigint/RangeBigIntTemplate.tsx b/website/src/components/templates/zod/templates/bigint/RangeBigIntTemplate.tsx
new file mode 100644
index 0000000..d6a580b
--- /dev/null
+++ b/website/src/components/templates/zod/templates/bigint/RangeBigIntTemplate.tsx
@@ -0,0 +1,212 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * ReadonlyRangeBigIntTemplate
+ * Renders a readonly range display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {bigint} [props.value] - The current value.
+ * @param {bigint} [props.min] - The minimum value.
+ * @param {bigint} [props.max] - The maximum value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly range component.
+ */
+export const ReadonlyRangeBigIntTemplate: React.FC<{
+  title?: string
+  value?: bigint
+  min?: bigint
+  max?: bigint
+  description?: string
+}> = ({ title, value, min = 0n, max = 100n, description }) => {
+  const percentage = Number((((value ?? min) - min) * 100n) / (max - min))
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+
+      <div className="relative">
+        {/* Range track */}
+        <div className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            className="h-2 rounded-full bg-blue-500 transition-all duration-200 dark:bg-blue-400"
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+
+        {/* Value display */}
+        <div className="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+          <span>{min.toString()}</span>
+          <span className="font-medium text-gray-900 dark:text-gray-100">
+            {value?.toString() ?? 'N/A'}
+          </span>
+          <span>{max.toString()}</span>
+        </div>
+      </div>
+
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Helper function to extract min/max/step constraints from Zod BigInt schema
+ * @param schema - The Zod schema to analyze
+ * @returns Object with min, max, and step values
+ */
+function extractBigIntConstraints(schema: z.$ZodType): {
+  min?: bigint
+  max?: bigint
+  step?: bigint
+} {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodBigInt
+  const bag = unwrappedSchema._zod.bag
+
+  return {
+    min: bag?.minimum,
+    max: bag?.maximum,
+    step: bag?.multipleOf as bigint | undefined,
+  }
+}
+
+/**
+ * RangeBigIntTemplate
+ * Renders a range slider input for BigInt schemas with min/max constraints.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the range field.
+ * @param {string[]} props.path - The path to the range field in the form data.
+ * @returns {JSX.Element} - The range slider component.
+ */
+export const RangeBigIntTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract min/max/step from Zod checks
+  const { min = 0n, max = 100n, step = 1n } = extractBigIntConstraints(schema)
+
+  // Ensure we have a valid BigInt value
+  const currentValue = typeof valueAtPath === 'bigint' ? valueAtPath : min
+
+  if (readonly) {
+    return (
+      <ReadonlyRangeBigIntTemplate
+        title={metadata.title}
+        value={currentValue}
+        min={min}
+        max={max}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles range value changes
+   * @param event - The range input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      const newValue = BigInt(event.target.value)
+      setValueAtPath(newValue)
+    } catch {
+      // Invalid BigInt, keep current value
+    }
+  }
+
+  const percentage = Number(((currentValue - min) * 100n) / (max - min))
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <div className="space-y-2">
+        {/* Range Input */}
+        <div className="relative">
+          <input
+            type="range"
+            min={min.toString()}
+            max={max.toString()}
+            step={step.toString()}
+            value={currentValue.toString()}
+            disabled={false} // Zod doesn't have readOnly property like JSON Schema
+            onChange={handleChange}
+            className={`/* Webkit styles */ /* Firefox styles */ h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 transition-all duration-200 ease-in-out focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:shadow-lg [&::-moz-range-thumb]:dark:bg-blue-400 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:transition-colors [&::-webkit-slider-thumb]:duration-200 [&::-webkit-slider-thumb]:hover:bg-blue-600 [&::-webkit-slider-thumb]:dark:border-gray-800 [&::-webkit-slider-thumb]:dark:bg-blue-400 [&::-webkit-slider-thumb]:dark:hover:bg-blue-300 ${
+              errorsAtPath && errorsAtPath.length > 0
+                ? '[&::-moz-range-thumb]:bg-red-500 [&::-moz-range-thumb]:dark:bg-red-400 [&::-webkit-slider-thumb]:bg-red-500 [&::-webkit-slider-thumb]:dark:bg-red-400'
+                : ''
+            } `}
+            style={{
+              background: `linear-gradient(to right, 
+                rgb(59 130 246) 0%, 
+                rgb(59 130 246) ${percentage}%, 
+                rgb(229 231 235) ${percentage}%, 
+                rgb(229 231 235) 100%)`,
+            }}
+          />
+        </div>
+
+        {/* Value display and range labels */}
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {min.toString()}
+          </span>
+
+          <div
+            className={`rounded-md px-3 py-1 text-sm font-medium ${
+              errorsAtPath && errorsAtPath.length > 0
+                ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
+                : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200'
+            } `}
+          >
+            {currentValue.toString()}
+          </div>
+
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {max.toString()}
+          </span>
+        </div>
+      </div>
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/bigint/index.ts b/website/src/components/templates/zod/templates/bigint/index.ts
new file mode 100644
index 0000000..32771c8
--- /dev/null
+++ b/website/src/components/templates/zod/templates/bigint/index.ts
@@ -0,0 +1,3 @@
+export { BaseBigIntTemplate } from './BaseBigIntTemplate'
+export { RangeBigIntTemplate } from './RangeBigIntTemplate'
+export { BigIntInputTemplate } from './BigIntInputTemplate'
diff --git a/website/src/components/templates/zod/templates/boolean/BaseBooleanTemplate.tsx b/website/src/components/templates/zod/templates/boolean/BaseBooleanTemplate.tsx
new file mode 100644
index 0000000..acb8161
--- /dev/null
+++ b/website/src/components/templates/zod/templates/boolean/BaseBooleanTemplate.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { getMetadata } from '@react-formgen/zod'
+import { CheckboxTemplate } from './CheckboxTemplate'
+import { RadioTemplate } from './RadioTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher {
+  matcher: () => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * BaseBooleanTemplate
+ * Handles switching between checkbox and radio button based on uiSchema.
+ * Default is checkbox unless uiSchema specifies radio.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the boolean property.
+ * @param {string[]} props.path - The path to the boolean property in the form data.
+ * @returns {JSX.Element} - The boolean template component.
+ */
+export const BaseBooleanTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const metadata = getMetadata(schema)
+
+  const booleanMatchers: TemplateMatcher[] = [
+    // uiSchema component override for radio
+    {
+      matcher: () => metadata.uiSchema?.component === 'radio',
+      render: () => <RadioTemplate schema={schema} path={path} />,
+    },
+
+    // Default to checkbox for all other cases
+    {
+      matcher: () => true,
+      render: () => <CheckboxTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = booleanMatchers.find(({ matcher }) => matcher())
+  return (
+    matchedTemplate?.render() ?? (
+      <CheckboxTemplate schema={schema} path={path} />
+    )
+  )
+}
diff --git a/website/src/components/templates/zod/templates/boolean/CheckboxTemplate.tsx b/website/src/components/templates/zod/templates/boolean/CheckboxTemplate.tsx
new file mode 100644
index 0000000..bba5370
--- /dev/null
+++ b/website/src/components/templates/zod/templates/boolean/CheckboxTemplate.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyCheckboxTemplate
+ * Renders a readonly checkbox display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {string | number | boolean} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly checkbox component.
+ */
+export const ReadonlyCheckboxTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ? 'true' : 'false'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * CheckboxTemplate
+ * Renders a checkbox for boolean schemas without union options.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the checkbox boolean field.
+ * @param {string[]} props.path - The path to the checkbox boolean field in the form data.
+ * @returns {JSX.Element} - The checkbox boolean field component.
+ */
+export const CheckboxTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  if (readonly) {
+    return (
+      <ReadonlyCheckboxTemplate
+        title={metadata.title}
+        value={valueAtPath}
+        description={metadata.description}
+      />
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      <div
+        className={`flex items-center space-x-3 rounded-lg border p-3 transition-all duration-200 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } hover:bg-gray-100/50 dark:hover:bg-gray-700/50`}
+      >
+        <input
+          type="checkbox"
+          checked={!!valueAtPath}
+          disabled={false} // Zod doesn't have readOnly property like JSON Schema
+          onChange={(event) => setValueAtPath(event.target.checked)}
+          className={`h-4 w-4 rounded border-gray-300 bg-white text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-blue-400 ${
+            errorsAtPath && errorsAtPath.length > 0
+              ? 'border-red-500 dark:border-red-400'
+              : ''
+          } `}
+        />
+        {metadata.title && (
+          <label
+            className={`flex-1 cursor-pointer text-sm font-medium ${
+              valueAtPath
+                ? 'text-blue-900 dark:text-blue-100'
+                : 'text-gray-900 dark:text-gray-100'
+            }`}
+          >
+            {metadata.title}
+            {required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+        )}
+      </div>
+
+      {metadata.description && (
+        <small className="ml-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="ml-1 text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/boolean/RadioTemplate.tsx b/website/src/components/templates/zod/templates/boolean/RadioTemplate.tsx
new file mode 100644
index 0000000..364f22d
--- /dev/null
+++ b/website/src/components/templates/zod/templates/boolean/RadioTemplate.tsx
@@ -0,0 +1,140 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyRadioTemplate
+ * Renders a readonly radio display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {string | number | boolean} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly radio component.
+ */
+export const ReadonlyRadioTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ? 'true' : 'false'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * RadioTemplate
+ * Renders radio buttons for boolean schemas when explicitly requested via uiSchema.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the radio boolean field.
+ * @param {string[]} props.path - The path to the radio boolean field in the form data.
+ * @returns {JSX.Element} - The radio boolean field component.
+ */
+export const RadioTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Standard boolean options
+  const options = [
+    { const: true, title: 'True' },
+    { const: false, title: 'False' },
+  ]
+
+  if (readonly) {
+    return (
+      <ReadonlyRadioTemplate
+        title={metadata.title}
+        value={valueAtPath}
+        description={metadata.description}
+      />
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <div
+        className={`space-y-1 rounded-lg border p-3 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } `}
+      >
+        {options.map((option) => (
+          <label
+            key={option.title}
+            className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${
+              valueAtPath === option.const
+                ? 'border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20'
+                : 'border border-transparent'
+            } `}
+          >
+            <input
+              type="radio"
+              checked={valueAtPath === option.const}
+              disabled={false} // Zod doesn't have readOnly property like JSON Schema
+              onChange={() => setValueAtPath(option.const)}
+              className="h-4 w-4 border-gray-300 text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-blue-400"
+            />
+            <span
+              className={`text-sm font-medium ${
+                valueAtPath === option.const
+                  ? 'text-blue-900 dark:text-blue-100'
+                  : 'text-gray-900 dark:text-gray-100'
+              }`}
+            >
+              {option.title}
+            </span>
+          </label>
+        ))}
+      </div>
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/boolean/index.ts b/website/src/components/templates/zod/templates/boolean/index.ts
new file mode 100644
index 0000000..cf08c2e
--- /dev/null
+++ b/website/src/components/templates/zod/templates/boolean/index.ts
@@ -0,0 +1,3 @@
+export { BaseBooleanTemplate } from './BaseBooleanTemplate'
+export { CheckboxTemplate } from './CheckboxTemplate'
+export { RadioTemplate } from './RadioTemplate'
diff --git a/website/src/components/templates/zod/templates/date/BaseDateTemplate.tsx b/website/src/components/templates/zod/templates/date/BaseDateTemplate.tsx
new file mode 100644
index 0000000..ba32c79
--- /dev/null
+++ b/website/src/components/templates/zod/templates/date/BaseDateTemplate.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { getMetadata, unwrapSchema } from '@react-formgen/zod'
+import { RangeDateTemplate } from './RangeDateTemplate'
+import { DateInputTemplate } from './DateInputTemplate'
+import { DateTimeInputTemplate } from './DateTimeInputTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher {
+  matcher: () => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * Helper function to check if a schema has both min and max constraints for range input
+ * @param schema - The Zod schema to check
+ * @returns Boolean indicating if the schema has both min and max
+ */
+function hasMinAndMax(schema: z.$ZodType): boolean {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodDate
+  const bag = unwrappedSchema._zod.bag
+
+  return bag?.minimum instanceof Date && bag?.maximum instanceof Date
+}
+
+/**
+ * BaseDateTemplate
+ * Handles switching between range, date, and datetime inputs based on schema constraints and uiSchema.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the date property.
+ * @param {string[]} props.path - The path to the date property in the form data.
+ * @returns {JSX.Element} - The date template component.
+ */
+export const BaseDateTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const metadata = getMetadata(schema)
+
+  const dateMatchers: TemplateMatcher[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: () =>
+        metadata.uiSchema?.component === 'range' && hasMinAndMax(schema),
+      render: () => <RangeDateTemplate schema={schema} path={path} />,
+    },
+    {
+      matcher: () => metadata.uiSchema?.component === 'datetime',
+      render: () => <DateTimeInputTemplate schema={schema} path={path} />,
+    },
+
+    // Auto-detect range based on min/max constraints
+    {
+      matcher: () => hasMinAndMax(schema),
+      render: () => <RangeDateTemplate schema={schema} path={path} />,
+    },
+
+    // Fallback to date input
+    {
+      matcher: () => true,
+      render: () => <DateInputTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = dateMatchers.find(({ matcher }) => matcher())
+  return (
+    matchedTemplate?.render() ?? (
+      <DateInputTemplate schema={schema} path={path} />
+    )
+  )
+}
diff --git a/website/src/components/templates/zod/templates/date/DateInputTemplate.tsx b/website/src/components/templates/zod/templates/date/DateInputTemplate.tsx
new file mode 100644
index 0000000..8814025
--- /dev/null
+++ b/website/src/components/templates/zod/templates/date/DateInputTemplate.tsx
@@ -0,0 +1,138 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyDateInputTemplate
+ * Renders a readonly date input display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {Date} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly date input component.
+ */
+export const ReadonlyDateInputTemplate: React.FC<{
+  title?: string
+  value?: Date
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value?.toLocaleDateString() ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Helper function to format Date to YYYY-MM-DD for HTML date input
+ * @param date - Date to format
+ * @returns Formatted date string
+ */
+function formatDateForInput(date: Date): string {
+  return date.toISOString().split('T')[0]
+}
+
+/**
+ * DateInputTemplate
+ * Renders a date input field for Date schemas using Zod.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the date field.
+ * @param {string[]} props.path - The path to the date field in the form data.
+ * @returns {JSX.Element} - The date input field component.
+ */
+export const DateInputTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  if (readonly) {
+    return (
+      <ReadonlyDateInputTemplate
+        title={metadata.title}
+        value={valueAtPath as Date}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles date input value changes
+   * @param event - The input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    if (value === '') {
+      setValueAtPath(null)
+    } else {
+      const dateValue = new Date(value)
+      setValueAtPath(isNaN(dateValue.getTime()) ? null : dateValue)
+    }
+  }
+
+  // Convert Date to string for display
+  const displayValue =
+    valueAtPath instanceof Date ? formatDateForInput(valueAtPath) : ''
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <input
+        type="date"
+        value={displayValue}
+        disabled={false} // Zod doesn't have readOnly property like JSON Schema
+        onChange={handleChange}
+        placeholder={metadata.title || ''}
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      />
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/date/DateTimeInputTemplate.tsx b/website/src/components/templates/zod/templates/date/DateTimeInputTemplate.tsx
new file mode 100644
index 0000000..7ed9ade
--- /dev/null
+++ b/website/src/components/templates/zod/templates/date/DateTimeInputTemplate.tsx
@@ -0,0 +1,144 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyDateTimeInputTemplate
+ * Renders a readonly datetime input display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {Date} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly datetime input component.
+ */
+export const ReadonlyDateTimeInputTemplate: React.FC<{
+  title?: string
+  value?: Date
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value?.toLocaleString() ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Helper function to format Date to YYYY-MM-DDTHH:MM for HTML datetime-local input
+ * @param date - Date to format
+ * @returns Formatted datetime string
+ */
+function formatDateTimeForInput(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+
+  return `${year}-${month}-${day}T${hours}:${minutes}`
+}
+
+/**
+ * DateTimeInputTemplate
+ * Renders a datetime-local input field for Date schemas using Zod.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the datetime field.
+ * @param {string[]} props.path - The path to the datetime field in the form data.
+ * @returns {JSX.Element} - The datetime input field component.
+ */
+export const DateTimeInputTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  if (readonly) {
+    return (
+      <ReadonlyDateTimeInputTemplate
+        title={metadata.title}
+        value={valueAtPath as Date}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles datetime input value changes
+   * @param event - The input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    if (value === '') {
+      setValueAtPath(null)
+    } else {
+      const dateValue = new Date(value)
+      setValueAtPath(isNaN(dateValue.getTime()) ? null : dateValue)
+    }
+  }
+
+  // Convert Date to string for display
+  const displayValue =
+    valueAtPath instanceof Date ? formatDateTimeForInput(valueAtPath) : ''
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <input
+        type="datetime-local"
+        value={displayValue}
+        disabled={false} // Zod doesn't have readOnly property like JSON Schema
+        onChange={handleChange}
+        placeholder={metadata.title || ''}
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      />
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/date/RangeDateTemplate.tsx b/website/src/components/templates/zod/templates/date/RangeDateTemplate.tsx
new file mode 100644
index 0000000..ce06582
--- /dev/null
+++ b/website/src/components/templates/zod/templates/date/RangeDateTemplate.tsx
@@ -0,0 +1,230 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * ReadonlyRangeDateTemplate
+ * Renders a readonly date range display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {Date} [props.value] - The current value.
+ * @param {Date} [props.min] - The minimum value.
+ * @param {Date} [props.max] - The maximum value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly range component.
+ */
+export const ReadonlyRangeDateTemplate: React.FC<{
+  title?: string
+  value?: Date
+  min?: Date
+  max?: Date
+  description?: string
+}> = ({ title, value, min, max, description }) => {
+  const percentage =
+    min && max && value
+      ? ((value.getTime() - min.getTime()) / (max.getTime() - min.getTime())) *
+        100
+      : 0
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+
+      <div className="relative">
+        {/* Range track */}
+        <div className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            className="h-2 rounded-full bg-blue-500 transition-all duration-200 dark:bg-blue-400"
+            style={{ width: `${Math.max(0, Math.min(100, percentage))}%` }}
+          />
+        </div>
+
+        {/* Value display */}
+        <div className="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+          <span>{min?.toLocaleDateString() ?? 'N/A'}</span>
+          <span className="font-medium text-gray-900 dark:text-gray-100">
+            {value?.toLocaleDateString() ?? 'N/A'}
+          </span>
+          <span>{max?.toLocaleDateString() ?? 'N/A'}</span>
+        </div>
+      </div>
+
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Helper function to extract min/max constraints from Zod Date schema
+ * @param schema - The Zod schema to analyze
+ * @returns Object with min and max Date values
+ */
+function extractDateConstraints(schema: z.$ZodType): {
+  min?: Date
+  max?: Date
+} {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodDate
+  const bag = unwrappedSchema._zod.bag
+
+  return {
+    min: bag?.minimum,
+    max: bag?.maximum,
+  }
+}
+
+/**
+ * Helper function to format Date to YYYY-MM-DD for HTML date input
+ * @param date - Date to format
+ * @returns Formatted date string
+ */
+function formatDateForInput(date: Date): string {
+  return date.toISOString().split('T')[0]
+}
+
+/**
+ * RangeDateTemplate
+ * Renders a date range slider input for Date schemas with min/max constraints.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the date range field.
+ * @param {string[]} props.path - The path to the date range field in the form data.
+ * @returns {JSX.Element} - The date range slider component.
+ */
+export const RangeDateTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract min/max from Zod checks
+  const { min, max } = extractDateConstraints(schema)
+
+  // Ensure we have a valid Date value
+  const currentValue =
+    valueAtPath instanceof Date ? valueAtPath : min || new Date()
+
+  if (readonly) {
+    return (
+      <ReadonlyRangeDateTemplate
+        title={metadata.title}
+        value={currentValue}
+        min={min}
+        max={max}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles date range value changes
+   * @param event - The range input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const dateValue = new Date(event.target.value)
+    if (!isNaN(dateValue.getTime())) {
+      setValueAtPath(dateValue)
+    }
+  }
+
+  // Calculate percentage for visual indicator
+  const percentage =
+    min && max
+      ? ((currentValue.getTime() - min.getTime()) /
+          (max.getTime() - min.getTime())) *
+        100
+      : 0
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <div className="space-y-2">
+        {/* Date Range Input */}
+        <div className="relative">
+          <input
+            type="date"
+            value={formatDateForInput(currentValue)}
+            min={min ? formatDateForInput(min) : undefined}
+            max={max ? formatDateForInput(max) : undefined}
+            disabled={false} // Zod doesn't have readOnly property like JSON Schema
+            onChange={handleChange}
+            className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+              errorsAtPath && errorsAtPath.length > 0
+                ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+                : ''
+            } `}
+          />
+        </div>
+
+        {/* Visual range indicator */}
+        {min && max && (
+          <div className="relative">
+            <div className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+              <div
+                className={`h-2 rounded-full transition-all duration-200 ${
+                  errorsAtPath && errorsAtPath.length > 0
+                    ? 'bg-red-500 dark:bg-red-400'
+                    : 'bg-blue-500 dark:bg-blue-400'
+                }`}
+                style={{ width: `${Math.max(0, Math.min(100, percentage))}%` }}
+              />
+            </div>
+
+            {/* Range labels */}
+            <div className="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+              <span>{min.toLocaleDateString()}</span>
+              <div
+                className={`rounded-md px-3 py-1 text-sm font-medium ${
+                  errorsAtPath && errorsAtPath.length > 0
+                    ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
+                    : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200'
+                } `}
+              >
+                {currentValue.toLocaleDateString()}
+              </div>
+              <span>{max.toLocaleDateString()}</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/date/index.ts b/website/src/components/templates/zod/templates/date/index.ts
new file mode 100644
index 0000000..e344647
--- /dev/null
+++ b/website/src/components/templates/zod/templates/date/index.ts
@@ -0,0 +1,4 @@
+export { BaseDateTemplate } from './BaseDateTemplate'
+export { RangeDateTemplate } from './RangeDateTemplate'
+export { DateInputTemplate } from './DateInputTemplate'
+export { DateTimeInputTemplate } from './DateTimeInputTemplate'
diff --git a/website/src/components/templates/zod/templates/enum/BaseEnumTemplate.tsx b/website/src/components/templates/zod/templates/enum/BaseEnumTemplate.tsx
new file mode 100644
index 0000000..a664332
--- /dev/null
+++ b/website/src/components/templates/zod/templates/enum/BaseEnumTemplate.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { getMetadata } from '@react-formgen/zod'
+import { SelectEnumTemplate } from './SelectEnumTemplate'
+import { RadioEnumTemplate } from './RadioEnumTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher {
+  matcher: () => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * BaseEnumTemplate
+ * Handles switching between select and radio enum templates based on uiSchema.
+ * Default is select dropdown unless uiSchema specifies radio.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the enum property.
+ * @param {string[]} props.path - The path to the enum property in the form data.
+ * @returns {JSX.Element} - The enum template component.
+ */
+export const BaseEnumTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const metadata = getMetadata(schema)
+
+  const enumMatchers: TemplateMatcher[] = [
+    // uiSchema component override for radio
+    {
+      matcher: () => metadata.uiSchema?.component === 'radio',
+      render: () => <RadioEnumTemplate schema={schema} path={path} />,
+    },
+
+    // Default to select dropdown for all other cases
+    {
+      matcher: () => true,
+      render: () => <SelectEnumTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = enumMatchers.find(({ matcher }) => matcher())
+  return (
+    matchedTemplate?.render() ?? (
+      <SelectEnumTemplate schema={schema} path={path} />
+    )
+  )
+}
diff --git a/website/src/components/templates/zod/templates/enum/RadioEnumTemplate.tsx b/website/src/components/templates/zod/templates/enum/RadioEnumTemplate.tsx
new file mode 100644
index 0000000..09e95a9
--- /dev/null
+++ b/website/src/components/templates/zod/templates/enum/RadioEnumTemplate.tsx
@@ -0,0 +1,130 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * Helper function to extract enum options
+ * @param schema - The enum schema to analyze
+ * @returns Array of enum options with value and label
+ */
+function extractEnumOptions(
+  schema: z.$ZodType,
+): Array<{ value: string; label: string }> {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodEnum
+  const entries = unwrappedSchema._zod.def.entries
+
+  return Object.entries(entries).map(([key, val]) => ({
+    value: val as string,
+    label: key,
+  }))
+}
+
+/**
+ * RadioEnumTemplate
+ * Renders radio buttons for enum schemas when explicitly requested.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the enum field.
+ * @param {string[]} props.path - The path to the enum field in the form data.
+ * @returns {JSX.Element} - The radio enum template component.
+ */
+export const RadioEnumTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  const options = extractEnumOptions(schema)
+
+  if (readonly) {
+    const selectedOption = options.find((opt) => opt.value === valueAtPath)
+    return (
+      <div className="flex w-full flex-col space-y-1">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </label>
+        )}
+        <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+          {selectedOption?.label || 'N/A'}
+        </div>
+        {metadata.description && (
+          <small className="text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </small>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      <div
+        className={`space-y-1 rounded-lg border p-3 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } `}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${
+              valueAtPath === option.value
+                ? 'border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20'
+                : 'border border-transparent'
+            } `}
+          >
+            <input
+              type="radio"
+              checked={valueAtPath === option.value}
+              onChange={() => setValueAtPath(option.value)}
+              className="h-4 w-4 border-gray-300 text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-blue-400"
+            />
+            <span
+              className={`text-sm font-medium ${
+                valueAtPath === option.value
+                  ? 'text-blue-900 dark:text-blue-100'
+                  : 'text-gray-900 dark:text-gray-100'
+              }`}
+            >
+              {option.label}
+            </span>
+          </label>
+        ))}
+      </div>
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/enum/SelectEnumTemplate.tsx b/website/src/components/templates/zod/templates/enum/SelectEnumTemplate.tsx
new file mode 100644
index 0000000..461b548
--- /dev/null
+++ b/website/src/components/templates/zod/templates/enum/SelectEnumTemplate.tsx
@@ -0,0 +1,122 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * Helper function to extract enum options
+ * @param schema - The enum schema to analyze
+ * @returns Array of enum options with value and label
+ */
+function extractEnumOptions(
+  schema: z.$ZodType,
+): Array<{ value: string; label: string }> {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodEnum
+  const entries = unwrappedSchema._zod.def.entries
+
+  return Object.entries(entries).map(([key, val]) => ({
+    value: val as string,
+    label: key,
+  }))
+}
+
+/**
+ * SelectEnumTemplate
+ * Renders a select dropdown for enum schemas.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the enum field.
+ * @param {string[]} props.path - The path to the enum field in the form data.
+ * @returns {JSX.Element} - The select enum template component.
+ */
+export const SelectEnumTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  const options = extractEnumOptions(schema)
+
+  if (readonly) {
+    const selectedOption = options.find((opt) => opt.value === valueAtPath)
+    return (
+      <div className="flex w-full flex-col space-y-1">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </label>
+        )}
+        <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+          {selectedOption?.label || 'N/A'}
+        </div>
+        {metadata.description && (
+          <small className="text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </small>
+        )}
+      </div>
+    )
+  }
+
+  /**
+   * Handles select value changes
+   * @param event - The select change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value
+    setValueAtPath(value === '' ? undefined : value)
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <select
+        value={valueAtPath || ''}
+        onChange={handleChange}
+        disabled={false} // Zod doesn't have readOnly property like JSON Schema
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      >
+        <option value="">Select an option</option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/enum/index.ts b/website/src/components/templates/zod/templates/enum/index.ts
new file mode 100644
index 0000000..a960815
--- /dev/null
+++ b/website/src/components/templates/zod/templates/enum/index.ts
@@ -0,0 +1,3 @@
+export { BaseEnumTemplate } from './BaseEnumTemplate'
+export { SelectEnumTemplate } from './SelectEnumTemplate'
+export { RadioEnumTemplate } from './RadioEnumTemplate'
diff --git a/website/src/components/templates/zod/templates/index.ts b/website/src/components/templates/zod/templates/index.ts
new file mode 100644
index 0000000..9c89f97
--- /dev/null
+++ b/website/src/components/templates/zod/templates/index.ts
@@ -0,0 +1,24 @@
+import { Templates } from '@react-formgen/zod'
+import { BaseArrayTemplate } from './array'
+import { BaseBigIntTemplate } from './bigint'
+import { BaseBooleanTemplate } from './boolean'
+import { BaseDateTemplate } from './date'
+import { BaseEnumTemplate } from './enum'
+import { BaseNumberTemplate } from './number'
+import { BaseObjectTemplate } from './object'
+import { BaseStringTemplate } from './string'
+import { BaseTupleTemplate } from './tuple'
+import { BaseUnionTemplate } from './union'
+
+export const BaseTemplates: Templates = {
+  StringTemplate: BaseStringTemplate,
+  NumberTemplate: BaseNumberTemplate,
+  BooleanTemplate: BaseBooleanTemplate,
+  BigIntTemplate: BaseBigIntTemplate,
+  DateTemplate: BaseDateTemplate,
+  ArrayTemplate: BaseArrayTemplate,
+  ObjectTemplate: BaseObjectTemplate,
+  UnionTemplate: BaseUnionTemplate,
+  TupleTemplate: BaseTupleTemplate,
+  EnumTemplate: BaseEnumTemplate,
+}
diff --git a/website/src/components/templates/zod/templates/number/BaseNumberTemplate.tsx b/website/src/components/templates/zod/templates/number/BaseNumberTemplate.tsx
new file mode 100644
index 0000000..3d40609
--- /dev/null
+++ b/website/src/components/templates/zod/templates/number/BaseNumberTemplate.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { getMetadata, unwrapSchema } from '@react-formgen/zod'
+import { RangeNumberTemplate } from './RangeNumberTemplate'
+import { NumberInputTemplate } from './NumberInputTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher {
+  matcher: () => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * Helper function to check if a schema has both min and max constraints for range input
+ * @param schema - The Zod schema to check
+ * @returns Boolean indicating if the schema has both min and max
+ */
+function hasMinAndMax(schema: z.$ZodType): boolean {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodNumber
+  const bag = unwrappedSchema._zod.bag
+
+  return typeof bag?.minimum === 'number' && typeof bag?.maximum === 'number'
+}
+
+/**
+ * BaseNumberTemplate
+ * Handles switching between range and number input based on schema constraints and uiSchema.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the number property.
+ * @param {string[]} props.path - The path to the number property in the form data.
+ * @returns {JSX.Element} - The number template component.
+ */
+export const BaseNumberTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const metadata = getMetadata(schema)
+
+  const numberMatchers: TemplateMatcher[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: () =>
+        metadata.uiSchema?.component === 'range' && hasMinAndMax(schema),
+      render: () => <RangeNumberTemplate schema={schema} path={path} />,
+    },
+
+    // Auto-detect range based on min/max constraints
+    {
+      matcher: () => hasMinAndMax(schema),
+      render: () => <RangeNumberTemplate schema={schema} path={path} />,
+    },
+
+    // Fallback to number input
+    {
+      matcher: () => true,
+      render: () => <NumberInputTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = numberMatchers.find(({ matcher }) => matcher())
+  return (
+    matchedTemplate?.render() ?? (
+      <NumberInputTemplate schema={schema} path={path} />
+    )
+  )
+}
diff --git a/website/src/components/templates/zod/templates/number/NumberInputTemplate.tsx b/website/src/components/templates/zod/templates/number/NumberInputTemplate.tsx
new file mode 100644
index 0000000..77f749d
--- /dev/null
+++ b/website/src/components/templates/zod/templates/number/NumberInputTemplate.tsx
@@ -0,0 +1,125 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyNumberInputTemplate
+ * Renders a readonly number input display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {number} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly number input component.
+ */
+export const ReadonlyNumberInputTemplate: React.FC<{
+  title?: string
+  value?: number
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * NumberInputTemplate
+ * Renders a number input field for number schemas using Zod.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the number field.
+ * @param {string[]} props.path - The path to the number field in the form data.
+ * @returns {JSX.Element} - The number input field component.
+ */
+export const NumberInputTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  if (readonly) {
+    return (
+      <ReadonlyNumberInputTemplate
+        title={metadata.title}
+        value={valueAtPath as number}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles number input value changes
+   * @param event - The input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    if (value === '') {
+      setValueAtPath(null)
+    } else {
+      const numValue = parseFloat(value)
+      setValueAtPath(isNaN(numValue) ? null : numValue)
+    }
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <input
+        type="number"
+        value={valueAtPath ?? ''}
+        disabled={false} // Zod doesn't have readOnly property like JSON Schema
+        onChange={handleChange}
+        placeholder={metadata.title || ''}
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 transition-all duration-200 ease-in-out hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:hover:border-gray-500 dark:focus:border-blue-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20 dark:border-red-400'
+            : ''
+        } `}
+      />
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/number/RangeNumberTemplate.tsx b/website/src/components/templates/zod/templates/number/RangeNumberTemplate.tsx
new file mode 100644
index 0000000..b288094
--- /dev/null
+++ b/website/src/components/templates/zod/templates/number/RangeNumberTemplate.tsx
@@ -0,0 +1,207 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * ReadonlyRangeTemplate
+ * Renders a readonly range display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {number} [props.value] - The current value.
+ * @param {number} [props.min] - The minimum value.
+ * @param {number} [props.max] - The maximum value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly range component.
+ */
+export const ReadonlyRangeTemplate: React.FC<{
+  title?: string
+  value?: number
+  min?: number
+  max?: number
+  description?: string
+}> = ({ title, value, min = 0, max = 100, description }) => {
+  const percentage = (((value ?? min) - min) / (max - min)) * 100
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+
+      <div className="relative">
+        {/* Range track */}
+        <div className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            className="h-2 rounded-full bg-blue-500 transition-all duration-200 dark:bg-blue-400"
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+
+        {/* Value display */}
+        <div className="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+          <span>{min}</span>
+          <span className="font-medium text-gray-900 dark:text-gray-100">
+            {value ?? 'N/A'}
+          </span>
+          <span>{max}</span>
+        </div>
+      </div>
+
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Helper function to extract min/max/step constraints from Zod number schema
+ * @param schema - The Zod schema to analyze
+ * @returns Object with min, max, and step values
+ */
+function extractNumberConstraints(schema: z.$ZodType): {
+  min?: number
+  max?: number
+  step?: number
+} {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodNumber
+  const bag = unwrappedSchema._zod.bag
+
+  return {
+    min: bag?.minimum,
+    max: bag?.maximum,
+  }
+}
+
+/**
+ * RangeNumberTemplate
+ * Renders a range slider input for number schemas with min/max constraints.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the range field.
+ * @param {string[]} props.path - The path to the range field in the form data.
+ * @returns {JSX.Element} - The range slider component.
+ */
+export const RangeNumberTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract min/max/step from Zod checks
+  const { min = 0, max = 100 } = extractNumberConstraints(schema)
+
+  // Ensure we have a valid number value
+  const currentValue = typeof valueAtPath === 'number' ? valueAtPath : min
+
+  if (readonly) {
+    return (
+      <ReadonlyRangeTemplate
+        title={metadata.title}
+        value={currentValue}
+        min={min}
+        max={max}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles range value changes
+   * @param event - The range input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(event.target.value)
+    setValueAtPath(newValue)
+  }
+
+  const percentage = ((currentValue - min) / (max - min)) * 100
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <div className="space-y-2">
+        {/* Range Input */}
+        <div className="relative">
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={1} // Zod doesn't have a built-in way to handle a step value. Perhaps this can be addressed wtih teh uiSchema?
+            value={currentValue}
+            disabled={false} // Zod doesn't have readOnly property like JSON Schema
+            onChange={handleChange}
+            className={`/* Webkit styles */ /* Firefox styles */ h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 transition-all duration-200 ease-in-out focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:shadow-lg [&::-moz-range-thumb]:dark:bg-blue-400 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:transition-colors [&::-webkit-slider-thumb]:duration-200 [&::-webkit-slider-thumb]:hover:bg-blue-600 [&::-webkit-slider-thumb]:dark:border-gray-800 [&::-webkit-slider-thumb]:dark:bg-blue-400 [&::-webkit-slider-thumb]:dark:hover:bg-blue-300 ${
+              errorsAtPath && errorsAtPath.length > 0
+                ? '[&::-moz-range-thumb]:bg-red-500 [&::-moz-range-thumb]:dark:bg-red-400 [&::-webkit-slider-thumb]:bg-red-500 [&::-webkit-slider-thumb]:dark:bg-red-400'
+                : ''
+            } `}
+            style={{
+              background: `linear-gradient(to right, 
+                rgb(59 130 246) 0%, 
+                rgb(59 130 246) ${percentage}%, 
+                rgb(229 231 235) ${percentage}%, 
+                rgb(229 231 235) 100%)`,
+            }}
+          />
+        </div>
+
+        {/* Value display and range labels */}
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {min}
+          </span>
+
+          <div
+            className={`rounded-md px-3 py-1 text-sm font-medium ${
+              errorsAtPath && errorsAtPath.length > 0
+                ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
+                : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200'
+            } `}
+          >
+            {currentValue}
+          </div>
+
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {max}
+          </span>
+        </div>
+      </div>
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/number/index.ts b/website/src/components/templates/zod/templates/number/index.ts
new file mode 100644
index 0000000..c3be5a1
--- /dev/null
+++ b/website/src/components/templates/zod/templates/number/index.ts
@@ -0,0 +1,3 @@
+export { BaseNumberTemplate } from './BaseNumberTemplate'
+export { RangeNumberTemplate } from './RangeNumberTemplate'
+export { NumberInputTemplate } from './NumberInputTemplate'
diff --git a/website/src/components/templates/zod/templates/object/BaseObjectTemplate.tsx b/website/src/components/templates/zod/templates/object/BaseObjectTemplate.tsx
new file mode 100644
index 0000000..056a8bd
--- /dev/null
+++ b/website/src/components/templates/zod/templates/object/BaseObjectTemplate.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { SimpleObjectTemplate } from './SimpleObjectTemplate'
+
+/**
+ * BaseObjectTemplate
+ * Renders an object schema by delegating to the appropriate template.
+ * For now, we only have SimpleObjectTemplate, but this allows for future extensions.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema of the object.
+ * @param {string[]} props.path - The path to the object in the form data.
+ * @returns {JSX.Element} - The object template component.
+ */
+export const BaseObjectTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  return <SimpleObjectTemplate schema={schema} path={path} />
+}
diff --git a/website/src/components/templates/zod/templates/object/SimpleObjectTemplate.tsx b/website/src/components/templates/zod/templates/object/SimpleObjectTemplate.tsx
new file mode 100644
index 0000000..da86646
--- /dev/null
+++ b/website/src/components/templates/zod/templates/object/SimpleObjectTemplate.tsx
@@ -0,0 +1,163 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  useRenderTemplate,
+  FormState,
+} from '@react-formgen/zod'
+import {
+  getMetadata,
+  isRequired,
+  unwrapSchema,
+  generateInitialData,
+} from '@react-formgen/zod'
+
+/**
+ * SimpleObjectTemplate
+ * Renders an object schema by rendering each property.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema of the object.
+ * @param {string[]} props.path - The path to the object in the form data.
+ * @returns {JSX.Element} - The object template component.
+ */
+export const SimpleObjectTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const RenderTemplate = useRenderTemplate()
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract object shape
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodObject
+  const shape = unwrappedSchema._zod.def.shape
+
+  // For optional objects that are undefined
+  if (!required && valueAtPath === undefined && !readonly) {
+    return (
+      <div className="flex w-full flex-col space-y-2">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+            <span className="ml-1 text-gray-500 dark:text-gray-400">
+              (optional)
+            </span>
+          </label>
+        )}
+        {metadata.description && (
+          <small className="text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </small>
+        )}
+        <button
+          type="button"
+          onClick={() => {
+            // Initialize the object with default values
+            const initialObject = generateInitialData(schema)
+            setValueAtPath(initialObject)
+          }}
+          className="w-full rounded-lg border-2 border-dashed border-green-300 bg-green-50 px-4 py-3 text-sm font-medium text-green-700 transition-all duration-200 ease-in-out hover:border-green-400 hover:bg-green-100 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-green-600 dark:bg-green-900/30 dark:text-green-300 dark:hover:border-green-500 dark:hover:bg-green-900/50"
+        >
+          + Add {metadata.title || 'Object'}
+        </button>
+      </div>
+    )
+  }
+
+  if (readonly) {
+    return (
+      <div className="mb-4 w-full border-l-2 border-gray-300 pl-4 dark:border-gray-600">
+        {metadata.title && (
+          <strong className="mb-1 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </strong>
+        )}
+        {metadata.description && (
+          <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </p>
+        )}
+        <div className="mt-2 space-y-3">
+          {valueAtPath !== undefined ? (
+            Object.entries(shape).map(([key, fieldSchema]) => (
+              <RenderTemplate
+                key={key}
+                schema={fieldSchema as z.$ZodType}
+                path={[...path, key]}
+              />
+            ))
+          ) : (
+            <div className="text-gray-500 italic dark:text-gray-400">
+              Not set
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      <div className="flex items-center justify-between">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+            {required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+        )}
+        {!required && valueAtPath !== undefined && (
+          <button
+            type="button"
+            onClick={() => setValueAtPath(undefined)}
+            className="rounded border border-red-300 bg-red-50 px-2 py-1 text-xs text-red-700 hover:bg-red-100 dark:border-red-600 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+
+      <div
+        className={`rounded-lg border-2 p-4 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/30 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/30'
+        } flex flex-wrap gap-4`}
+      >
+        {Object.keys(shape).length > 0 ? (
+          Object.entries(shape).map(([key, fieldSchema]) => (
+            <RenderTemplate
+              key={key}
+              schema={fieldSchema as z.$ZodType}
+              path={[...path, key]}
+            />
+          ))
+        ) : (
+          <div className="w-full py-4 text-center text-sm text-gray-500 italic dark:text-gray-400">
+            No properties defined
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/object/index.ts b/website/src/components/templates/zod/templates/object/index.ts
new file mode 100644
index 0000000..6ce5cbf
--- /dev/null
+++ b/website/src/components/templates/zod/templates/object/index.ts
@@ -0,0 +1,2 @@
+export { BaseObjectTemplate } from './BaseObjectTemplate'
+export { SimpleObjectTemplate } from './SimpleObjectTemplate'
diff --git a/website/src/components/templates/zod/templates/string/BaseStringTemplate.tsx b/website/src/components/templates/zod/templates/string/BaseStringTemplate.tsx
new file mode 100644
index 0000000..92e476d
--- /dev/null
+++ b/website/src/components/templates/zod/templates/string/BaseStringTemplate.tsx
@@ -0,0 +1,95 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { getMetadata } from '@react-formgen/zod'
+import { TextareaTemplate } from './TextareaTemplate'
+import { InputTemplate } from './InputTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher<T> {
+  matcher: (schema: T) => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * Interface for Zod string schema definitions with format support
+ */
+interface StringSchemaDef extends z.$ZodTypeDef {
+  checks?: z.$ZodCheck[]
+  format?: string
+}
+
+/**
+ * BaseStringTemplate
+ * Handles switching between input and textarea fields based on schema metadata and uiSchema.
+ * Unlike JSON Schema templates, this doesn't handle enums/unions as those are handled by separate templates.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the string property.
+ * @param {string[]} props.path - The path to the string property in the form data.
+ * @returns {JSX.Element} - The string template component.
+ */
+export const BaseStringTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const metadata = getMetadata(schema)
+
+  // Type-safe access to schema internals
+  const typedSchema = schema as z.$ZodTypes
+  const schemaDef = typedSchema._zod.def as StringSchemaDef
+  const format = schemaDef.format as string | undefined
+
+  const stringMatchers: TemplateMatcher<z.$ZodType>[] = [
+    // uiSchema component overrides for non-default behavior
+    {
+      matcher: () => {
+        return metadata.uiSchema?.component === 'textarea'
+      },
+      render: () => <TextareaTemplate schema={schema} path={path} />,
+    },
+
+    // Format-based logic for specific input types
+    {
+      matcher: () => {
+        return Boolean(
+          schemaDef.format && ['date', 'datetime'].includes(schemaDef.format),
+        )
+      },
+      render: () => {
+        const inputType = format === 'datetime' ? 'datetime-local' : format
+        return (
+          <InputTemplate schema={schema} path={path} htmlType={inputType} />
+        )
+      },
+    },
+    {
+      matcher: () => {
+        return schemaDef.format === 'email'
+      },
+      render: () => (
+        <InputTemplate schema={schema} path={path} htmlType="email" />
+      ),
+    },
+    {
+      matcher: () => {
+        return schemaDef.format === 'url'
+      },
+      render: () => (
+        <InputTemplate schema={schema} path={path} htmlType="url" />
+      ),
+    },
+
+    // Fallback to input template
+    {
+      matcher: () => true,
+      render: () => <InputTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = stringMatchers.find(({ matcher }) => matcher(schema))
+  return (
+    matchedTemplate?.render() ?? <InputTemplate schema={schema} path={path} />
+  )
+}
diff --git a/website/src/components/templates/zod/templates/string/InputTemplate.tsx b/website/src/components/templates/zod/templates/string/InputTemplate.tsx
new file mode 100644
index 0000000..278e488
--- /dev/null
+++ b/website/src/components/templates/zod/templates/string/InputTemplate.tsx
@@ -0,0 +1,126 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyInputTemplate
+ * Renders a readonly input display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {string | number | boolean} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly input component.
+ */
+export const ReadonlyInputTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * InputTemplate
+ * Renders a text input field for string schemas using Zod.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the input field.
+ * @param {string[]} props.path - The path to the input field in the form data.
+ * @param {string} [props.htmlType] - The HTML input type (default: "text").
+ * @returns {JSX.Element} - The input field component.
+ */
+export const InputTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+  htmlType?: string
+}> = ({ schema, path, htmlType = 'text' }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  if (readonly) {
+    return (
+      <ReadonlyInputTemplate
+        title={metadata.title}
+        value={valueAtPath}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles input value changes
+   * @param event - The input change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    setValueAtPath(value === '' ? undefined : value)
+  }
+
+  // Get error styling classes
+  const errorClasses =
+    errorsAtPath && errorsAtPath.length > 0
+      ? 'border-red-500 dark:border-red-400 focus:ring-red-500'
+      : 'border-gray-300 dark:border-gray-600 focus:ring-blue-500'
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <input
+        type={htmlType}
+        value={valueAtPath ?? ''}
+        onChange={handleChange}
+        className={`rounded-lg border bg-white px-3 py-2 text-gray-900 placeholder-gray-400 transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:ring-offset-gray-900 ${errorClasses} `
+          .replace(/\s+/g, ' ')
+          .trim()}
+        placeholder={
+          metadata.description ||
+          `Enter ${htmlType === 'email' ? 'email' : htmlType === 'url' ? 'URL' : 'text'}...`
+        }
+      />
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath && errorsAtPath.length > 0 && (
+        <div className="text-xs text-red-600 dark:text-red-400">
+          {errorsAtPath.map((error, index) => (
+            <div key={index}>{error.message}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/string/TextareaTemplate.tsx b/website/src/components/templates/zod/templates/string/TextareaTemplate.tsx
new file mode 100644
index 0000000..a635f8d
--- /dev/null
+++ b/website/src/components/templates/zod/templates/string/TextareaTemplate.tsx
@@ -0,0 +1,118 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired } from '@react-formgen/zod'
+
+/**
+ * ReadonlyTextareaTemplate
+ * Renders a readonly textarea display for form preview mode.
+ * @param {Object} props - The props for the component.
+ * @param {string} [props.title] - The field title/label.
+ * @param {string | number | boolean} [props.value] - The current value.
+ * @param {string} [props.description] - The field description.
+ * @returns {JSX.Element} - The readonly textarea component.
+ */
+export const ReadonlyTextareaTemplate: React.FC<{
+  title?: string
+  value?: string | number | boolean
+  description?: string
+}> = ({ title, value, description }) => {
+  return (
+    <div className="flex w-full flex-col space-y-1">
+      {title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </label>
+      )}
+      <div className="min-h-[80px] rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 whitespace-pre-wrap text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+        {value ?? 'N/A'}
+      </div>
+      {description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {description}
+        </small>
+      )}
+    </div>
+  )
+}
+
+/**
+ * TextareaTemplate
+ * Renders a textarea input for multi-line string input using Zod schemas.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the textarea field.
+ * @param {string[]} props.path - The path to the textarea field in the form data.
+ * @returns {JSX.Element} - The textarea field component.
+ */
+export const TextareaTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  if (readonly) {
+    return (
+      <ReadonlyTextareaTemplate
+        title={metadata.title}
+        value={valueAtPath}
+        description={metadata.description}
+      />
+    )
+  }
+
+  /**
+   * Handles textarea value changes
+   * @param event - The textarea change event
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValueAtPath(event.target.value)
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-2">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      <textarea
+        value={valueAtPath ?? ''}
+        onChange={handleChange}
+        rows={4}
+        className={`min-h-[80px] resize-y rounded-lg border bg-white px-3 py-2 text-gray-900 placeholder-gray-400 transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:ring-offset-gray-900 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-500 focus:ring-red-500 dark:border-red-400'
+            : 'border-gray-300 focus:ring-blue-500 dark:border-gray-600'
+        } `
+          .replace(/\s+/g, ' ')
+          .trim()}
+        placeholder={metadata.description || 'Enter text...'}
+      />
+
+      {metadata.description && (
+        <small className="text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath && errorsAtPath.length > 0 && (
+        <div className="text-xs text-red-600 dark:text-red-400">
+          {errorsAtPath.map((error, index) => (
+            <div key={index}>{error.message}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/string/index.tsx b/website/src/components/templates/zod/templates/string/index.tsx
new file mode 100644
index 0000000..7a18cfd
--- /dev/null
+++ b/website/src/components/templates/zod/templates/string/index.tsx
@@ -0,0 +1,3 @@
+export { BaseStringTemplate } from './BaseStringTemplate'
+export { TextareaTemplate } from './TextareaTemplate'
+export { InputTemplate } from './InputTemplate'
diff --git a/website/src/components/templates/zod/templates/tuple/BaseTupleTemplate.tsx b/website/src/components/templates/zod/templates/tuple/BaseTupleTemplate.tsx
new file mode 100644
index 0000000..336631f
--- /dev/null
+++ b/website/src/components/templates/zod/templates/tuple/BaseTupleTemplate.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { SimpleTupleTemplate } from './SimpleTupleTemplate'
+
+/**
+ * BaseTupleTemplate
+ * Renders a tuple schema by delegating to the appropriate template.
+ * For now, we only have SimpleTupleTemplate, but this allows for future extensions.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema of the tuple.
+ * @param {string[]} props.path - The path to the tuple in the form data.
+ * @returns {JSX.Element} - The tuple template component.
+ */
+export const BaseTupleTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  return <SimpleTupleTemplate schema={schema} path={path} />
+}
diff --git a/website/src/components/templates/zod/templates/tuple/SimpleTupleTemplate.tsx b/website/src/components/templates/zod/templates/tuple/SimpleTupleTemplate.tsx
new file mode 100644
index 0000000..685f5ce
--- /dev/null
+++ b/website/src/components/templates/zod/templates/tuple/SimpleTupleTemplate.tsx
@@ -0,0 +1,193 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  useRenderTemplate,
+  FormState,
+} from '@react-formgen/zod'
+import {
+  getMetadata,
+  isRequired,
+  unwrapSchema,
+  generateInitialData,
+} from '@react-formgen/zod'
+
+/**
+ * SimpleTupleTemplate
+ * Renders a tuple where each item has a specific schema at each position.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the tuple.
+ * @param {string[]} props.path - The path to the tuple in the form data.
+ * @returns {JSX.Element} - The tuple template component.
+ */
+export const SimpleTupleTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const RenderTemplate = useRenderTemplate()
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract tuple items
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodTuple
+  const items = unwrappedSchema._zod.def.items
+
+  // For optional tuples that are undefined
+  if (!required && valueAtPath === undefined && !readonly) {
+    return (
+      <div className="flex w-full flex-col space-y-2">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+            <span className="ml-1 text-gray-500 dark:text-gray-400">
+              (optional)
+            </span>
+          </label>
+        )}
+        {metadata.description && (
+          <small className="text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </small>
+        )}
+        <button
+          type="button"
+          onClick={() => {
+            // Initialize the tuple with default values for each item
+            const initialTuple = items.map((item: z.$ZodType) =>
+              generateInitialData(item),
+            )
+            setValueAtPath(initialTuple)
+          }}
+          className="w-full rounded-lg border-2 border-dashed border-green-300 bg-green-50 px-4 py-3 text-sm font-medium text-green-700 transition-all duration-200 ease-in-out hover:border-green-400 hover:bg-green-100 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-green-600 dark:bg-green-900/30 dark:text-green-300 dark:hover:border-green-500 dark:hover:bg-green-900/50"
+        >
+          + Add {metadata.title || 'Tuple'}
+        </button>
+      </div>
+    )
+  }
+
+  if (readonly) {
+    return (
+      <div className="mb-4 w-full border-l-2 border-gray-300 pl-4 dark:border-gray-600">
+        {metadata.title && (
+          <strong className="mb-1 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </strong>
+        )}
+        {metadata.description && (
+          <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </p>
+        )}
+        <div className="mt-2 space-y-3">
+          {valueAtPath !== undefined ? (
+            items.map((itemSchema: z.$ZodType, index: number) => (
+              <div key={index} className="space-y-1">
+                {/* <div className="text-xs font-medium tracking-wide text-gray-500 uppercase dark:text-gray-400">
+                  Item {index + 1}
+                </div> */}
+                <RenderTemplate
+                  schema={itemSchema}
+                  path={[...path, index.toString()]}
+                />
+              </div>
+            ))
+          ) : (
+            <div className="text-gray-500 italic dark:text-gray-400">
+              Not set
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const shouldRenderItems = required || valueAtPath !== undefined
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      <div className="flex items-center justify-between">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+            {required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+        )}
+        {!required && valueAtPath !== undefined && (
+          <button
+            type="button"
+            onClick={() => setValueAtPath(undefined)}
+            className="rounded border border-red-300 bg-red-50 px-2 py-1 text-xs text-red-700 hover:bg-red-100 dark:border-red-600 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+
+      {shouldRenderItems && (
+        <div
+          className={`space-y-4 rounded-lg border-2 p-4 ${
+            errorsAtPath && errorsAtPath.length > 0
+              ? 'border-red-200 bg-red-50/30 dark:border-red-700 dark:bg-red-900/10'
+              : 'border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/30'
+          } `}
+        >
+          <div
+            className={`grid gap-4 ${(() => {
+              // You can add uiSchema support for columns later
+              // For now, default to 1 column for tuple layouts
+              return 'grid-cols-1'
+            })()}`}
+          >
+            {items.map((itemSchema: z.$ZodType, index: number) => (
+              <div key={index} className="space-y-2">
+                {/* <div className="text-xs font-medium tracking-wide text-gray-500 uppercase dark:text-gray-400">
+                  Item {index + 1}
+                </div> */}
+                <RenderTemplate
+                  schema={itemSchema}
+                  path={[...path, index.toString()]}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* If the tuple is optional and not required, render a button to remove it */}
+      {!readonly &&
+        !required &&
+        valueAtPath !== undefined &&
+        items.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setValueAtPath(undefined)}
+            className="w-full rounded-lg border-2 border-dashed border-red-300 bg-red-50 px-4 py-3 text-sm font-medium text-red-700 transition-all duration-200 ease-in-out hover:border-red-400 hover:bg-red-100 focus:ring-2 focus:ring-red-500/20 focus:outline-none dark:border-red-600 dark:bg-red-900/30 dark:text-red-300 dark:hover:border-red-500 dark:hover:bg-red-900/50"
+          >
+            Remove {metadata.title || 'Tuple'}
+          </button>
+        )}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/tuple/index.ts b/website/src/components/templates/zod/templates/tuple/index.ts
new file mode 100644
index 0000000..6253288
--- /dev/null
+++ b/website/src/components/templates/zod/templates/tuple/index.ts
@@ -0,0 +1,2 @@
+export { BaseTupleTemplate } from './BaseTupleTemplate'
+export { SimpleTupleTemplate } from './SimpleTupleTemplate'
diff --git a/website/src/components/templates/zod/templates/union/BaseUnionTemplate.tsx b/website/src/components/templates/zod/templates/union/BaseUnionTemplate.tsx
new file mode 100644
index 0000000..c897f0a
--- /dev/null
+++ b/website/src/components/templates/zod/templates/union/BaseUnionTemplate.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import { unwrapSchema } from '@react-formgen/zod'
+import { LiteralUnionTemplate } from './LiteralUnionTemplate'
+import { ComplexUnionTemplate } from './ComplexUnionTemplate'
+
+/**
+ * Template matcher configuration for efficient template selection
+ */
+interface TemplateMatcher {
+  matcher: () => boolean
+  render: () => React.ReactElement
+}
+
+/**
+ * Helper function to check if union contains only literal values
+ * @param schema - The union schema to check
+ * @returns Boolean indicating if all options are literals
+ */
+function isLiteralUnion(schema: z.$ZodType): boolean {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodUnion
+
+  return unwrappedSchema._zod.def.options.every((option: z.$ZodType) => {
+    const unwrappedOption = unwrapSchema(option)
+    return unwrappedOption._zod.def.type === 'literal'
+  })
+}
+
+/**
+ * BaseUnionTemplate
+ * Handles switching between literal and complex union templates.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the union property.
+ * @param {string[]} props.path - The path to the union property in the form data.
+ * @returns {JSX.Element} - The union template component.
+ */
+export const BaseUnionTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const unionMatchers: TemplateMatcher[] = [
+    // Literal unions get radio buttons
+    {
+      matcher: () => isLiteralUnion(schema),
+      render: () => <LiteralUnionTemplate schema={schema} path={path} />,
+    },
+
+    // Complex unions get discriminated union handling
+    {
+      matcher: () => true,
+      render: () => <ComplexUnionTemplate schema={schema} path={path} />,
+    },
+  ]
+
+  // Find the first matching template and render it
+  const matchedTemplate = unionMatchers.find(({ matcher }) => matcher())
+  return (
+    matchedTemplate?.render() ?? (
+      <ComplexUnionTemplate schema={schema} path={path} />
+    )
+  )
+}
diff --git a/website/src/components/templates/zod/templates/union/ComplexUnionTemplate.tsx b/website/src/components/templates/zod/templates/union/ComplexUnionTemplate.tsx
new file mode 100644
index 0000000..d878bd1
--- /dev/null
+++ b/website/src/components/templates/zod/templates/union/ComplexUnionTemplate.tsx
@@ -0,0 +1,158 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  useRenderTemplate,
+  FormState,
+} from '@react-formgen/zod'
+import {
+  getMetadata,
+  isRequired,
+  unwrapSchema,
+  generateInitialData,
+} from '@react-formgen/zod'
+
+/**
+ * ComplexUnionTemplate
+ * Renders a discriminated union by trying to match the current value against each option.
+ * Falls back to rendering the first option if no match is found.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the union field.
+ * @param {string[]} props.path - The path to the union field in the form data.
+ * @returns {JSX.Element} - The complex union template component.
+ */
+export const ComplexUnionTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const RenderTemplate = useRenderTemplate()
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  // Extract union options
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodUnion
+  const options = unwrappedSchema._zod.def.options
+
+  // Try to find which option matches the current value
+  const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(0)
+
+  // When value changes, try to determine which schema option it matches
+  React.useEffect(() => {
+    if (valueAtPath !== undefined && valueAtPath !== null) {
+      for (let i = 0; i < options.length; i++) {
+        try {
+          const result = (options[i] as z.$ZodType).safeParse(valueAtPath)
+          if (result.success) {
+            setSelectedOptionIndex(i)
+            break
+          }
+        } catch {
+          // Continue to next option
+        }
+      }
+    }
+  }, [valueAtPath, options])
+
+  /**
+   * Handles option change and updates the value accordingly
+   * @param optionIndex - The index of the selected option
+   */
+  const handleOptionChange = (optionIndex: number) => {
+    setSelectedOptionIndex(optionIndex)
+    // Generate initial data for the new option
+    const newValue = generateInitialData(options[optionIndex] as z.$ZodType)
+    setValueAtPath(newValue)
+  }
+
+  if (readonly) {
+    return (
+      <div className="mb-4 w-full border-l-2 border-gray-300 pl-4 dark:border-gray-600">
+        {metadata.title && (
+          <strong className="mb-1 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </strong>
+        )}
+        {metadata.description && (
+          <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </p>
+        )}
+        <div className="mt-2">
+          <RenderTemplate
+            schema={options[selectedOptionIndex] as z.$ZodType}
+            path={path}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      {/* Option selector */}
+      {options.length > 1 && (
+        <div className="flex flex-wrap gap-2">
+          {options.map((_, index) => {
+            const optionMetadata = getMetadata(options[index] as z.$ZodType)
+            return (
+              <button
+                key={index}
+                type="button"
+                onClick={() => handleOptionChange(index)}
+                className={`rounded-lg border px-3 py-2 text-sm font-medium transition-all duration-200 ${
+                  selectedOptionIndex === index
+                    ? 'border-blue-500 bg-blue-100 text-blue-800 dark:border-blue-400 dark:bg-blue-900/30 dark:text-blue-200'
+                    : 'border-gray-300 bg-white text-gray-700 hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-500 dark:hover:bg-gray-700'
+                }`}
+              >
+                {optionMetadata?.title || `Option ${index + 1}`}
+              </button>
+            )
+          })}
+        </div>
+      )}
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+
+      {/* Render the selected option */}
+      <div
+        className={`rounded-lg border-2 p-4 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/30 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/30'
+        }`}
+      >
+        <RenderTemplate
+          schema={options[selectedOptionIndex] as z.$ZodType}
+          path={path}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/union/LiteralUnionTemplate.tsx b/website/src/components/templates/zod/templates/union/LiteralUnionTemplate.tsx
new file mode 100644
index 0000000..b042c2f
--- /dev/null
+++ b/website/src/components/templates/zod/templates/union/LiteralUnionTemplate.tsx
@@ -0,0 +1,142 @@
+import React from 'react'
+import type * as z from 'zod/v4/core'
+import {
+  useFormDataAtPath,
+  useErrorsAtPath,
+  useFormContext,
+  FormState,
+} from '@react-formgen/zod'
+import { getMetadata, isRequired, unwrapSchema } from '@react-formgen/zod'
+
+/**
+ * Helper function to extract literal options from union schema
+ * @param schema - The union schema to analyze
+ * @returns Array of literal options with value and label
+ */
+function extractLiteralOptions(
+  schema: z.$ZodType,
+): Array<{ value: unknown; label: string }> {
+  const unwrappedSchema = unwrapSchema(schema) as z.$ZodUnion
+  const options: Array<{ value: unknown; label: string }> = []
+
+  unwrappedSchema._zod.def.options.forEach((option: z.$ZodType) => {
+    const unwrappedOption = unwrapSchema(option)
+
+    if (unwrappedOption._zod.def.type === 'literal') {
+      const literalSchema = unwrappedOption as z.$ZodLiteral
+      const values = Array.from(literalSchema._zod.def.values)
+      const metadata = getMetadata(option)
+
+      options.push({
+        value: values[0],
+        label: metadata?.title || String(values[0]),
+      })
+    }
+  })
+
+  return options
+}
+
+/**
+ * LiteralUnionTemplate
+ * Renders radio buttons for unions with literal values.
+ * @param {Object} props - The props for the component.
+ * @param {z.$ZodType} props.schema - The Zod schema for the union field.
+ * @param {string[]} props.path - The path to the union field in the form data.
+ * @returns {JSX.Element} - The literal union template component.
+ */
+export const LiteralUnionTemplate: React.FC<{
+  schema: z.$ZodType
+  path: string[]
+}> = ({ schema, path }) => {
+  const [valueAtPath, setValueAtPath] = useFormDataAtPath(path)
+  const errorsAtPath = useErrorsAtPath(path)
+  const readonly = useFormContext((state: FormState) => state.readonly)
+  const required = isRequired(schema)
+  const metadata = getMetadata(schema)
+
+  const options = extractLiteralOptions(schema)
+
+  if (readonly) {
+    const selectedOption = options.find((opt) => opt.value === valueAtPath)
+    return (
+      <div className="flex w-full flex-col space-y-1">
+        {metadata.title && (
+          <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {metadata.title}
+          </label>
+        )}
+        <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+          {selectedOption?.label || 'N/A'}
+        </div>
+        {metadata.description && (
+          <small className="text-xs text-gray-500 dark:text-gray-400">
+            {metadata.description}
+          </small>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col space-y-3">
+      {metadata.title && (
+        <label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {metadata.title}
+          {required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+      )}
+
+      {metadata.description && (
+        <small className="-mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {metadata.description}
+        </small>
+      )}
+
+      <div
+        className={`space-y-1 rounded-lg border p-3 ${
+          errorsAtPath && errorsAtPath.length > 0
+            ? 'border-red-200 bg-red-50/50 dark:border-red-700 dark:bg-red-900/10'
+            : 'border-gray-200 bg-gray-50/50 dark:border-gray-700 dark:bg-gray-800/50'
+        } `}
+      >
+        {options.map((option) => (
+          <label
+            key={String(option.value)}
+            className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${
+              valueAtPath === option.value
+                ? 'border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20'
+                : 'border border-transparent'
+            } `}
+          >
+            <input
+              type="radio"
+              checked={valueAtPath === option.value}
+              onChange={() => setValueAtPath(option.value)}
+              className="h-4 w-4 border-gray-300 text-blue-600 transition-colors duration-200 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-blue-400"
+            />
+            <span
+              className={`text-sm font-medium ${
+                valueAtPath === option.value
+                  ? 'text-blue-900 dark:text-blue-100'
+                  : 'text-gray-900 dark:text-gray-100'
+              }`}
+            >
+              {option.label}
+            </span>
+          </label>
+        ))}
+      </div>
+
+      {errorsAtPath &&
+        errorsAtPath.map((error, index) => (
+          <div
+            key={index}
+            className="text-sm font-medium text-red-500 dark:text-red-400"
+          >
+            {error.message}
+          </div>
+        ))}
+    </div>
+  )
+}
diff --git a/website/src/components/templates/zod/templates/union/index.ts b/website/src/components/templates/zod/templates/union/index.ts
new file mode 100644
index 0000000..57fe8be
--- /dev/null
+++ b/website/src/components/templates/zod/templates/union/index.ts
@@ -0,0 +1,3 @@
+export { BaseUnionTemplate } from './BaseUnionTemplate'
+export { LiteralUnionTemplate } from './LiteralUnionTemplate'
+export { ComplexUnionTemplate } from './ComplexUnionTemplate'
diff --git a/website/src/examples/JsonSchema.tsx b/website/src/examples/JsonSchema.tsx
index f784d64..4a9e27e 100644
--- a/website/src/examples/JsonSchema.tsx
+++ b/website/src/examples/JsonSchema.tsx
@@ -1,188 +1,204 @@
 import { Form, FormProvider, useFormContext } from '@react-formgen/json-schema'
 import {
-	jsonSchema,
-	jsonSchemaBasic,
-	jsonSchemaWithRecursiveRefs,
+  jsonSchema,
+  jsonSchemaBasic,
+  jsonSchemaWithRecursiveRefs,
 } from '../schemas/jsonSchema'
 import { SwitchToReadonly } from '../components/SwitchToReadonly.tsx'
 import { BaseFormRoot } from '../components/templates/json-schema/BaseFormRoot.tsx'
 import { BaseTemplates } from '../components/templates/json-schema/templates/index.tsx'
 
 const initialFormData = {
-	firstName: 'John Doe',
-	lastName: 'Doe John',
-	age: 69,
-	email: 'johndoe@joedohn.com',
+  firstName: 'John Doe',
+  lastName: 'Doe John',
+  age: 69,
+  email: 'johndoe@joedohn.com',
 }
 
-// This example demonstrates how to use the `Form` component
-// to render a form based on a JSON schema. The `Form` component
+/**
+ * JsonSchemaExample
+ * This example demonstrates how to use the `Form` component
+ * to render a form based on a JSON schema. The `Form` component
+ */
 const JsonSchemaExample = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: '1rem',
-				maxWidth: 'calc(640px + 0.125rem)',
-				alignSelf: 'center',
-				padding: '1rem',
-			}}
-		>
-			<h2>JSON Schema Form</h2>
+  return (
+    <div className="mx-auto flex flex-col space-y-6 p-6">
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          JSON Schema Form
+        </h2>
+        <p className="leading-relaxed text-gray-600 dark:text-gray-400">
+          This form demonstrates a basic JSON schema form with a simple schema
+          and initial data. The form will validate the data based on the schema
+          and display errors if the data is invalid.
+        </p>
+      </div>
 
-			<p>
-				This form demonstrates a basic JSON schema form with a simple schema and
-				initial data. The form will validate the data based on the schema and
-				display errors if the data is invalid.
-			</p>
-			<Form
-				templates={BaseTemplates}
-				formRoot={BaseFormRoot}
-				schema={jsonSchemaBasic}
-				initialData={initialFormData}
-				onSubmit={(data) => console.log('JSON Schema:', data)}
-				onError={(errors, data) => console.error('JSON Schema:', errors, data)}
-			/>
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <Form
+          templates={BaseTemplates}
+          formRoot={BaseFormRoot}
+          schema={jsonSchemaBasic}
+          initialData={initialFormData}
+          onSubmit={(data) => console.log('JSON Schema:', data)}
+          onError={(errors, data) =>
+            console.error('JSON Schema:', errors, data)
+          }
+        />
+      </div>
 
-			<h2>JSON Schema Form (Readonly)</h2>
-			<Form
-				templates={BaseTemplates}
-				formRoot={BaseFormRoot}
-				schema={jsonSchemaBasic}
-				initialData={initialFormData}
-				readonly
-			/>
-		</div>
-	)
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          JSON Schema Form (Readonly)
+        </h2>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <Form
+          templates={BaseTemplates}
+          formRoot={BaseFormRoot}
+          schema={jsonSchemaBasic}
+          initialData={initialFormData}
+          readonly
+        />
+      </div>
+    </div>
+  )
 }
 
-// This example demonstrates a more advanced use case
-// where the `FormProvider` is used instead of the `Form`
-// component in order to use custom components that
-// require access to the form's context. In this case,
-// the `SwitchToReadonly` component is used to toggle
-// the form between editable and readonly states.
+/**
+ * JsonSchemaComplexExample
+ * This example demonstrates a more advanced use case
+ * where the `FormProvider` is used instead of the `Form`
+ * component in order to use custom components that
+ * require access to the form's context. In this case,
+ * the `SwitchToReadonly` component is used to toggle
+ * the form between editable and readonly states.
+ */
 const JsonSchemaComplexExample = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: '1rem',
-				maxWidth: 'calc(640px + 0.125rem)',
-				alignSelf: 'center',
-				padding: '1rem',
-			}}
-		>
-			<h2>Complex JSON Schema Form</h2>
-			<p>
-				This form demonstrates a more complex JSON schema form with a custom
-				form provider and initial data. The form will validate the data based on
-				the schema and display errors if the data is invalid.
-			</p>
-			<FormProvider
-				schema={jsonSchema}
-				initialData={initialFormData}
-				templates={BaseTemplates}
-			>
-				<SwitchToReadonly contextHook={useFormContext} />
-				<BaseFormRoot
-					onSubmit={(data) => console.log('JSON Schema:', data)}
-					onError={(errors, data) =>
-						console.error('JSON Schema:', errors, data)
-					}
-				/>
-			</FormProvider>
-		</div>
-	)
-}
+  return (
+    <div className="mx-auto flex flex-col space-y-6 p-6">
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Complex JSON Schema Form
+        </h2>
+        <p className="leading-relaxed text-gray-600 dark:text-gray-400">
+          This form demonstrates a more complex JSON schema form with a custom
+          form provider and initial data. The form will validate the data based
+          on the schema and display errors if the data is invalid.
+        </p>
+      </div>
 
-// This example demonstrates the use of a JSON schema
-// with recursive references, which are not currently
-// supported by the form generator. The form will
-// render with unresolvable fields.
-const JsonSchemaWithRecursiveRefsExample = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: '1rem',
-				maxWidth: 'calc(640px + 0.125rem)',
-				alignSelf: 'center',
-				padding: '1rem',
-			}}
-		>
-			<h2>JSON Schema Unresolvable Form</h2>
-			<p>
-				This form demonstrates a JSON schema with recursive references, which
-				are not currently supported by the form generator. The form will render
-				with unresolvable fields.
-			</p>
-			<Form
-				formRoot={BaseFormRoot}
-				templates={BaseTemplates}
-				schema={jsonSchemaWithRecursiveRefs}
-				onSubmit={(data) => console.log('JSON Schema:', data)}
-				onError={(errors, data) => console.error('JSON Schema:', errors, data)}
-			/>
-		</div>
-	)
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <FormProvider
+          schema={jsonSchema}
+          initialData={initialFormData}
+          templates={BaseTemplates}
+        >
+          <div className="border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/50">
+            <SwitchToReadonly contextHook={useFormContext} />
+          </div>
+          <BaseFormRoot
+            onSubmit={(data) => console.log('JSON Schema:', data)}
+            onError={(errors, data) =>
+              console.error('JSON Schema:', errors, data)
+            }
+          />
+        </FormProvider>
+      </div>
+    </div>
+  )
 }
 
-// This example demonstrates how to enable the Zustand DevTools (using Redux DevTools)
-// for the form state, which allows you to inspect and manipulate
-// the form state in real-time.
+/**
+ * JsonSchemaWithRecursiveRefsExample
+ * This example demonstrates the use of a JSON schema
+ * with recursive references, which are not currently
+ * supported by the form generator. The form will
+ * render with unresolvable fields.
+ */
+const JsonSchemaWithRecursiveRefsExample = () => {
+  return (
+    <div className="mx-auto flex flex-col space-y-6 p-6">
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          JSON Schema Unresolvable Form
+        </h2>
+        <p className="leading-relaxed text-gray-600 dark:text-gray-400">
+          This form demonstrates a JSON schema with recursive references, which
+          are not currently supported by the form generator. The form will
+          render with unresolvable fields.
+        </p>
+      </div>
 
-// Note: To access the DevTools, open the browser's developer
-// tools and navigate to the Redux DevTools tab.
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <Form
+          formRoot={BaseFormRoot}
+          templates={BaseTemplates}
+          schema={jsonSchemaWithRecursiveRefs}
+          onSubmit={(data) => console.log('JSON Schema:', data)}
+          onError={(errors, data) =>
+            console.error('JSON Schema:', errors, data)
+          }
+        />
+      </div>
+    </div>
+  )
+}
 
-// Warning: Enabling the DevTools sets the internal Zustand store's
-// state to be exposed to the browser's DevTools. This should only be used
-// in development mode or non-sensitive environments, as it may expose
-// application state and user data. Avoid enabling it in production
-// environments where sensitive information is handled.
+/**
+ * JsonSchemaWithDevToolsExample
+ * This example demonstrates how to enable the Zustand DevTools (using Redux DevTools)
+ * for the form state, which allows you to inspect and manipulate
+ * the form state in real-time.
+ *
+ * Note: To access the DevTools, open the browser's developer
+ * tools and navigate to the Redux DevTools tab.
+ *
+ * Warning: Enabling the DevTools sets the internal Zustand store's
+ * state to be exposed to the browser's DevTools. This should only be used
+ * in development mode or non-sensitive environments, as it may expose
+ * application state and user data. Avoid enabling it in production
+ * environments where sensitive information is handled.
+ */
 const JsonSchemaWithDevToolsExample = () => {
-	// Enable the DevTools only in development mode
-	// const enableDevtools = process.env.NODE_ENV === "development";
+  // Enable the DevTools only in development mode
+  // const enableDevtools = process.env.NODE_ENV === "development";
+
+  // Enable the DevTools in all environments (just for demonstration purposes)
+  const enableDevtools = true
 
-	// Enable the DevTools in all environments (just for demonstration purposes)
-	const enableDevtools = true
+  return (
+    <div className="mx-auto flex flex-col space-y-6 p-6">
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          JSON Schema Form with DevTools
+        </h2>
+        <p className="leading-relaxed text-gray-600 dark:text-gray-400">
+          The Zustand DevTools are enabled for this form. Open the browser's
+          developer tools and navigate to the Redux DevTools tab to inspect and
+          manipulate the form state.
+        </p>
+      </div>
 
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: '1rem',
-				maxWidth: 'calc(640px + 0.125rem)',
-				alignSelf: 'center',
-				padding: '1rem',
-			}}
-		>
-			<h2>JSON Schema Form with DevTools</h2>
-			<p>
-				The Zustand DevTools are enabled for this form. Open the browser's
-				developer tools and navigate to the Redux DevTools tab to inspect and
-				manipulate the form state.
-			</p>
-			<Form
-				formRoot={BaseFormRoot}
-				templates={BaseTemplates}
-				schema={jsonSchemaBasic}
-				initialData={initialFormData}
-				onSubmit={(data) => console.log('JSON Schema:', data)}
-				onError={(errors) => console.error('JSON Schema:', errors)}
-				enableDevtools={enableDevtools}
-			/>
-		</div>
-	)
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <Form
+          formRoot={BaseFormRoot}
+          templates={BaseTemplates}
+          schema={jsonSchemaBasic}
+          initialData={initialFormData}
+          onSubmit={(data) => console.log('JSON Schema:', data)}
+          onError={(errors) => console.error('JSON Schema:', errors)}
+          enableDevtools={enableDevtools}
+        />
+      </div>
+    </div>
+  )
 }
 
 export {
-	JsonSchemaExample,
-	JsonSchemaComplexExample,
-	JsonSchemaWithRecursiveRefsExample,
-	JsonSchemaWithDevToolsExample,
+  JsonSchemaExample,
+  JsonSchemaComplexExample,
+  JsonSchemaWithRecursiveRefsExample,
+  JsonSchemaWithDevToolsExample,
 }
diff --git a/website/src/examples/Zod.tsx b/website/src/examples/Zod.tsx
index 4f62ed3..e8ced6b 100644
--- a/website/src/examples/Zod.tsx
+++ b/website/src/examples/Zod.tsx
@@ -1,49 +1,107 @@
-import {
-  Form,
-  FormProvider,
-  BaseFormRoot,
-  useFormContext,
-} from "@react-formgen/zod";
-import { zodSchema, zodSchemaBasic } from "../schemas/zodSchema";
-import { SwitchToReadonly } from "../components/SwitchToReadonly";
+import { Form, FormProvider, useFormContext } from '@react-formgen/zod'
+import { zodSchema, zodSchemaBasic } from '../schemas/zodSchema'
+import { SwitchToReadonly } from '../components/SwitchToReadonly.tsx'
+import { BaseFormRoot } from '../components/templates/zod/BaseFormRoot.tsx'
+import { BaseTemplates } from '../components/templates/zod/templates/index.ts'
 
 const initialFormData = {
-  firstName: "John Doe",
-  lastName: "Doe John",
+  firstName: 'John Doe',
+  lastName: 'Doe John',
   age: 69,
-  email: "johndoe@joedohn.com",
-};
+  email: 'johndoe@joedohn.com',
+}
 
+/**
+ * ZodSchemaExample
+ * This example demonstrates how to use the `Form` component
+ * to render a form based on a Zod schema. The `Form` component
+ */
 const ZodSchemaExample = () => {
   return (
-    <div>
-      <h2>Zod Schema Form</h2>
-      <Form
-        schema={zodSchemaBasic}
-        initialData={initialFormData}
-        onSubmit={(data) => console.log("Zod:", data)}
-        onError={(errors) => console.error("Zod:", errors)}
-      />
-
-      <h2>Zod Schema Form (Readonly)</h2>
-      <Form schema={zodSchemaBasic} initialData={initialFormData} readonly />
+    <div className="mx-auto flex flex-col space-y-6 p-6">
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Zod Schema Form
+        </h2>
+        <p className="leading-relaxed text-gray-600 dark:text-gray-400">
+          This form demonstrates a basic Zod schema form with a simple schema
+          and initial data. The form will validate the data based on the schema
+          and display errors if the data is invalid.
+        </p>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <Form
+          templates={BaseTemplates}
+          formRoot={BaseFormRoot}
+          schema={zodSchemaBasic}
+          initialData={initialFormData}
+          onSubmit={(data) => console.log('Zod Schema:', data)}
+          onError={(errors, data) => console.error('Zod Schema:', errors, data)}
+        />
+      </div>
+
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Zod Schema Form (Readonly)
+        </h2>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <Form
+          templates={BaseTemplates}
+          formRoot={BaseFormRoot}
+          schema={zodSchemaBasic}
+          initialData={initialFormData}
+          readonly
+        />
+      </div>
     </div>
-  );
-};
+  )
+}
 
+/**
+ * ZodSchemaComplexExample
+ * This example demonstrates a more advanced use case
+ * where the `FormProvider` is used instead of the `Form`
+ * component in order to use custom components that
+ * require access to the form's context. In this case,
+ * the `SwitchToReadonly` component is used to toggle
+ * the form between editable and readonly states.
+ */
 const ZodSchemaComplexExample = () => {
   return (
-    <div>
-      <h2>Complex Zod Schema Form</h2>
-      <FormProvider schema={zodSchema} initialData={initialFormData}>
-        <SwitchToReadonly contextHook={useFormContext} />
-        <BaseFormRoot
-          onSubmit={(data) => console.log("Zod:", data)}
-          onError={(errors) => console.error("Zod:", errors)}
-        />
-      </FormProvider>
+    <div className="mx-auto flex flex-col space-y-6 p-6">
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Complex Zod Schema Form
+        </h2>
+        <p className="leading-relaxed text-gray-600 dark:text-gray-400">
+          This form demonstrates a more complex Zod schema form with a custom
+          form provider and initial data. The form will validate the data based
+          on the schema and display errors if the data is invalid.
+        </p>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+        <FormProvider
+          schema={zodSchema}
+          initialData={initialFormData}
+          templates={BaseTemplates}
+        >
+          <div className="border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/50">
+            <SwitchToReadonly contextHook={useFormContext} />
+          </div>
+          <BaseFormRoot
+            onSubmit={(data) => console.log('Zod Schema:', data)}
+            onError={(errors, data) =>
+              console.error('Zod Schema:', errors, data)
+            }
+          />
+        </FormProvider>
+      </div>
     </div>
-  );
-};
+  )
+}
 
-export { ZodSchemaExample, ZodSchemaComplexExample };
+export { ZodSchemaExample, ZodSchemaComplexExample }
diff --git a/website/src/components/templates/json-schema/hooks/useWindowSize.ts b/website/src/hooks/useWindowSize.ts
similarity index 100%
rename from website/src/components/templates/json-schema/hooks/useWindowSize.ts
rename to website/src/hooks/useWindowSize.ts
diff --git a/website/src/index.css b/website/src/index.css
index fdde1e6..d32f13a 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -1,75 +1,7 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  max-width: 100vw;
-}
-
-nav {
-  background-color: #1a1a1a;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  nav {
-    background-color: #dcdcdc;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #dcdcdc;
-    color: #213547;
-  }
-}
+@custom-variant hover (&:hover); // there seems to be an issue with chrome compatibility and tw v4, where hover styles do not get applied at all. This is a workaround per https://github.com/tailwindlabs/tailwindcss/issues/16531#issuecomment-2658901967 until fixed
\ No newline at end of file
diff --git a/website/src/main.tsx b/website/src/main.tsx
index 6f4ac9b..1b3a4eb 100644
--- a/website/src/main.tsx
+++ b/website/src/main.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { ThemeProvider } from '@/theme/ThemeProvider'
+import App from '@/App.tsx'
+import '@/index.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )
diff --git a/website/src/schemas/jsonSchema.ts b/website/src/schemas/jsonSchema.ts
index 761eb46..a9c895c 100644
--- a/website/src/schemas/jsonSchema.ts
+++ b/website/src/schemas/jsonSchema.ts
@@ -1,31 +1,31 @@
-import { FormgenJSONSchema7 } from "@react-formgen/json-schema";
+import { FormgenJSONSchema7 } from '@react-formgen/json-schema'
 
 export const jsonSchema: FormgenJSONSchema7 = {
-  $schema: "http://json-schema.org/draft-07/schema#",
-  title: "Example Schema",
-  description: "A schema representing a complex object with various features.",
-  type: "object",
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'Example Schema',
+  description: 'A schema representing a complex object with various features.',
+  type: 'object',
   definitions: {
     address: {
-      title: "Address",
-      description: "An tuple containing the street address, city, and state.",
-      type: "array",
+      title: 'Address',
+      description: 'An tuple containing the street address, city, and state.',
+      type: 'array',
       items: [
         {
-          title: "Street Address",
-          description: "The street address.",
-          type: "string",
+          title: 'Street Address',
+          description: 'The street address.',
+          type: 'string',
         },
         {
-          title: "City",
-          description: "The city.",
-          type: "string",
+          title: 'City',
+          description: 'The city.',
+          type: 'string',
         },
         {
-          title: "State",
+          title: 'State',
           description:
-            "The state. This field has an enum, so it will render as a select input.",
-          type: "string",
+            'The state. This field has an enum, so it will render as a select input.',
+          type: 'string',
           // prettier-ignore
           enum: [
             "AL", "AK", "AS", "AZ", "AR",
@@ -42,357 +42,412 @@ export const jsonSchema: FormgenJSONSchema7 = {
             "WA", "WV", "WI", "WY",
           ],
         },
+        {
+          title: 'Zip Code',
+          description: 'The zip code.',
+          type: 'string',
+          pattern: '^[0-9]{5}(?:-[0-9]{4})?$',
+          minLength: 5,
+          maxLength: 10,
+        },
+        {
+          type: 'string',
+          uiSchema: {
+            component: 'multipleChoice',
+          },
+          enum: [
+            'Single Family Home',
+            'Townhouse',
+            'Condo',
+            'Apartment',
+            'Other',
+          ],
+          title: 'Property Type',
+          description: 'The type of property.',
+          default: 'Single Family Home',
+        },
       ],
       additionalItems: false,
-      minItems: 3,
-      maxItems: 3,
+      minItems: 5,
+      maxItems: 5,
     },
     friend: {
-      title: "Friend",
-      description: "An object representing a friend.",
-      type: "object",
+      title: 'Friend',
+      description: 'An object representing a friend.',
+      type: 'object',
       properties: {
         name: {
-          title: "Name",
+          title: 'Name',
           description: "The friend's name.",
           minLength: 1,
           maxLength: 100,
-          type: "string",
+          type: 'string',
         },
         age: {
-          title: "Age",
+          title: 'Age',
           description: "The friend's age.",
-          type: "integer",
+          type: 'integer',
+          minimum: 0,
+          maximum: 150,
+        },
+        ageAlt: {
+          title: 'Age (Alt)',
+          description: "The friend's age, but rendered as a range input.",
+          default: 30,
+          type: 'number',
           minimum: 0,
           maximum: 150,
+          uiSchema: {
+            component: 'range',
+          },
         },
         address: {
-          title: "Address",
+          title: 'Address',
           description: "The friend's address.",
-          $ref: "#/definitions/address",
+          $ref: '#/definitions/address',
         },
       },
-      required: ["name", "address"],
+      required: ['name', 'address'],
     },
   },
   properties: {
     firstName: {
-      title: "First Name",
+      title: 'First Name',
       description: "The person's first name.",
-      type: "string",
+      type: 'string',
       minLength: 1,
       maxLength: 100,
-      pattern: "^[A-Za-z]+$",
+      pattern: '^[A-Za-z]+$',
     },
     lastName: {
-      title: "Last Name",
+      title: 'Last Name',
       description: "The person's last name.",
-      type: "string",
+      type: 'string',
       minLength: 1,
       maxLength: 100,
-      pattern: "^[A-Za-z]+$",
+      pattern: '^[A-Za-z]+$',
     },
     age: {
-      title: "Age",
+      title: 'Age',
       description: "The person's age.",
-      type: "integer",
+      type: 'integer',
       minimum: 0,
       maximum: 150,
     },
     email: {
-      title: "Email",
+      title: 'Email',
       description: "The person's email address.",
-      type: "string",
-      format: "email",
+      type: 'string',
+      format: 'email',
     },
     phone: {
-      title: "Phone",
+      title: 'Phone',
       description: "The person's phone number.",
-      type: "string",
+      type: 'string',
     },
     ssn: {
-      title: "SSN",
+      title: 'SSN',
       description: "The person's social security number.",
-      type: "string",
-      format: "password",
+      type: 'string',
+      format: 'password',
     },
     homepage: {
-      title: "Homepage",
+      title: 'Homepage',
       description: "The person's homepage URL.",
-      type: "string",
-      format: "uri",
+      type: 'string',
+      format: 'uri',
     },
     birthday: {
-      title: "Birthday",
+      title: 'Birthday',
       description: "The person's birthday.",
-      type: "string",
-      format: "date",
+      type: 'string',
+      format: 'date',
     },
     is_active: {
-      title: "Is Active",
+      title: 'Is Active',
       description:
-        "Indicates whether the person is active. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.",
-      type: "boolean",
+        'Indicates whether the person is active. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.',
+      type: 'boolean',
       oneOf: [
         {
-          title: "Yes",
+          title: 'Yes',
           const: true,
         },
         {
-          title: "No",
+          title: 'No',
           const: false,
         },
       ],
     },
     loves_cats: {
-      title: "Loves Cats",
+      title: 'Loves Cats',
       description:
-        "Indicates whether the person loves cats. This field has no complex definition, so it will render as a checkbox input.",
-      type: "boolean",
+        'Indicates whether the person loves cats. This field has no complex definition, so it will render as a checkbox input.',
+      type: 'boolean',
     },
     loves_dogs: {
-      title: "Loves Dogs",
+      title: 'Loves Dogs',
       description:
-        "Indicates whether the person loves dogs. This field has no complex definition, so it will render as a checkbox input.",
-      type: "boolean",
+        'Indicates whether the person loves dogs. This field has no complex definition, so it will render as a checkbox input.',
+      type: 'boolean',
     },
     loves_pizza: {
-      title: "Loves Pizza",
+      title: 'Loves Pizza',
       description:
-        "Indicates whether the person loves pizza. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.",
-      type: "boolean",
+        'Indicates whether the person loves pizza. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.',
+      type: 'boolean',
       default: true,
       oneOf: [
         {
-          title: "🍕",
+          title: '🍕',
           const: true,
         },
         {
-          title: "🙅‍♂️",
+          title: '🙅‍♂️',
           const: false,
         },
       ],
     },
     loves_tacos: {
-      title: "Loves Tacos",
+      title: 'Loves Tacos',
       description:
-        "Indicates whether the person loves tacos. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.",
-      type: "boolean",
+        'Indicates whether the person loves tacos. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.',
+      type: 'boolean',
       oneOf: [
         {
-          title: "🌮",
+          title: '🌮',
           const: true,
         },
         {
-          title: "🙅‍♂️",
+          title: '🙅‍♂️',
           const: false,
         },
       ],
     },
     favorite_foods: {
-      title: "Favorite Foods",
+      title: 'Favorite Foods',
+      description:
+        'A list of favorite foods, unique and selected from predefined options.',
+      type: 'array',
+      items: {
+        oneOf: [
+          { const: 'Pizza', title: '🍕 Pizza' },
+          { const: 'Burger', title: '🍔 Burgers' },
+          { const: 'Tacos', title: '🌮 Tacos' },
+          { const: 'Sushi', title: '🍣 Sushi' },
+        ],
+      },
+      uniqueItems: true,
+      minItems: 1,
+    },
+    favorite_foods_alt: {
+      title: 'Favorite Foods (Alt)',
       description:
-        "A list of favorite foods, unique and selected from predefined options.",
-      type: "array",
+        'A list of favorite foods, unique and selected from predefined options, but rendered as a multi-select dropdown.',
+      type: 'array',
       items: {
         oneOf: [
-          { const: "Pizza", title: "🍕 Pizza" },
-          { const: "Burger", title: "🍔 Burgers" },
-          { const: "Tacos", title: "🌮 Tacos" },
-          { const: "Sushi", title: "🍣 Sushi" },
+          { const: 'Pizza', title: '🍕 Pizza' },
+          { const: 'Burger', title: '🍔 Burgers' },
+          { const: 'Tacos', title: '🌮 Tacos' },
+          { const: 'Sushi', title: '🍣 Sushi' },
         ],
       },
       uniqueItems: true,
       minItems: 1,
+      uiSchema: {
+        component: 'multiSelect',
+      },
     },
     address: {
-      title: "Address",
+      title: 'Address',
       description: "The person's address.",
-      $ref: "#/definitions/address",
+      $ref: '#/definitions/address',
     },
     friends: {
-      title: "Friends",
+      title: 'Friends',
       description: "A list of the person's friends.",
-      type: "array",
+      type: 'array',
       items: {
-        $ref: "#/definitions/friend",
+        $ref: '#/definitions/friend',
       },
       minItems: 0,
       uniqueItems: true,
     },
     employment: {
-      title: "Employment",
+      title: 'Employment',
       description: "The person's employment details.",
-      type: "object",
+      type: 'object',
       properties: {
         employer: {
-          title: "Employer",
+          title: 'Employer',
           description: "The person's employer.",
-          type: "string",
+          type: 'string',
         },
         role: {
-          title: "Role",
+          title: 'Role',
           description: "The person's role.",
-          type: "string",
+          type: 'string',
         },
         start_date: {
-          title: "Start Date",
-          description: "The date the person started the role.",
-          type: "string",
-          format: "date",
+          title: 'Start Date',
+          description: 'The date the person started the role.',
+          type: 'string',
+          format: 'date',
         },
         end_date: {
-          title: "End Date",
-          description: "The date the person ended the role.",
-          type: "string",
-          format: "date",
+          title: 'End Date',
+          description: 'The date the person ended the role.',
+          type: 'string',
+          format: 'date',
         },
         address: {
-          title: "Address",
-          description: "The address of the employment location.",
-          $ref: "#/definitions/address",
+          title: 'Address',
+          description: 'The address of the employment location.',
+          $ref: '#/definitions/address',
         },
       },
-      required: ["employer", "role", "start_date"],
+      required: ['employer', 'role', 'start_date'],
     },
     projects: {
-      title: "Projects",
+      title: 'Projects',
       description: "A list of the person's projects.",
-      type: "array",
+      type: 'array',
       items: {
-        title: "Project",
-        description: "An object representing a project.",
-        type: "object",
+        title: 'Project',
+        description: 'An object representing a project.',
+        type: 'object',
         properties: {
           name: {
-            title: "Name",
-            description: "The name of the project.",
-            type: "string",
+            title: 'Name',
+            description: 'The name of the project.',
+            type: 'string',
           },
           description: {
-            title: "Description",
-            description: "The description of the project.",
-            type: "string",
+            title: 'Description',
+            description: 'The description of the project.',
+            type: 'string',
+            uiSchema: { component: 'textarea' },
           },
           start_date: {
-            title: "Start Date",
-            description: "The date the project started.",
-            type: "string",
-            format: "date",
+            title: 'Start Date',
+            description: 'The date the project started.',
+            type: 'string',
+            format: 'date',
           },
           end_date: {
-            title: "End Date",
-            description: "The date the project ended.",
-            type: "string",
-            format: "date",
+            title: 'End Date',
+            description: 'The date the project ended.',
+            type: 'string',
+            format: 'date',
           },
           team: {
-            title: "Team",
-            description: "The team members involved in the project.",
-            type: "array",
+            title: 'Team',
+            description: 'The team members involved in the project.',
+            type: 'array',
             items: {
-              $ref: "#/definitions/friend",
+              $ref: '#/definitions/friend',
             },
           },
         },
-        required: ["name", "description", "start_date"],
+        required: ['name', 'description', 'start_date'],
       },
       minItems: 0,
       uniqueItems: true,
     },
   },
-  required: ["firstName", "lastName", "email", "address"],
-};
+  required: ['firstName', 'lastName', 'email', 'address'],
+}
 
 export const jsonSchemaBasic: FormgenJSONSchema7 = {
-  title: "User Form",
-  description: "A simple user form",
-  type: "object",
+  title: 'User Form',
+  description: 'A simple user form',
+  type: 'object',
   properties: {
     firstName: {
-      type: "string",
-      title: "First Name",
+      type: 'string',
+      title: 'First Name',
       minLength: 1,
       maxLength: 100,
-      pattern: "^[A-Za-z]+$",
+      pattern: '^[A-Za-z]+$',
       description: "The person's first name.",
     },
     lastName: {
-      type: "string",
-      title: "Last Name",
+      type: 'string',
+      title: 'Last Name',
       minLength: 1,
       maxLength: 100,
-      pattern: "^[A-Za-z]+$",
+      pattern: '^[A-Za-z]+$',
       description: "The person's last name.",
     },
     age: {
-      type: "integer",
-      title: "Age",
+      type: 'integer',
+      title: 'Age',
       minimum: 0,
       maximum: 150,
       description: "The person's age.",
     },
     email: {
-      type: "string",
-      format: "email",
-      title: "Email Address",
+      type: 'string',
+      format: 'email',
+      title: 'Email Address',
       description: "The person's email address.",
     },
   },
-  required: ["firstName", "lastName", "email"],
-};
+  required: ['firstName', 'lastName', 'email'],
+}
 
 export const jsonSchemaWithRecursiveRefs: FormgenJSONSchema7 = {
-  $schema: "http://json-schema.org/draft-07/schema#",
-  title: "Person Schema",
-  type: "object",
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'Person Schema',
+  type: 'object',
   properties: {
     name: {
       title: "Person's Name",
-      $ref: "#/definitions/name",
+      $ref: '#/definitions/name',
     },
     age: {
       title: "Person's Age",
-      $ref: "#/$defs/age",
+      $ref: '#/$defs/age',
     },
     child: {
-      title: "Child Information",
-      type: "object",
+      title: 'Child Information',
+      type: 'object',
       properties: {
         childName: {
           title: "Child's Name",
-          $ref: "#/definitions/childName",
+          $ref: '#/definitions/childName',
         },
         childAge: {
           title: "Child's Age",
-          $ref: "#/$defs/age",
+          $ref: '#/$defs/age',
         },
         childOfChild: {
-          title: "Child of Child (Grandchild)",
-          $ref: "#",
+          title: 'Child of Child (Grandchild)',
+          $ref: '#',
         },
       },
       definitions: {
         childName: {
-          title: "Child Name Definition",
-          type: "string",
-          default: "Child Name",
+          title: 'Child Name Definition',
+          type: 'string',
+          default: 'Child Name',
         },
       },
     },
   },
   definitions: {
     name: {
-      title: "Name Definition",
-      type: "string",
-      default: "John Doe",
+      title: 'Name Definition',
+      type: 'string',
+      default: 'John Doe',
     },
   },
   $defs: {
     age: {
-      title: "Age Definition",
-      type: "integer",
+      title: 'Age Definition',
+      type: 'integer',
       default: 30,
     },
   },
-};
+}
diff --git a/website/src/schemas/zodSchema.ts b/website/src/schemas/zodSchema.ts
index 22520ef..dbc90ea 100644
--- a/website/src/schemas/zodSchema.ts
+++ b/website/src/schemas/zodSchema.ts
@@ -1,481 +1,329 @@
-import { z } from "zod";
+import { z } from 'zod/v4'
+
+// prettier-ignore
+const US_STATE_CODES =  [
+  "AL", "AK", "AS", "AZ", "AR",
+  "CA", "CO", "CT", "DE", "DC",
+  "FM", "FL", "GA", "GU", "HI",
+  "ID", "IL", "IN", "IA", "KS",
+  "KY", "LA", "ME", "MH", "MD",
+  "MA", "MI", "MN", "MS", "MO",
+  "MT", "NE", "NV", "NH", "NJ",
+  "NM", "NY", "NC", "ND", "MP",
+  "OH", "OK", "OR", "PW", "PA",
+  "PR", "RI", "SC", "SD", "TN",
+  "TX", "UT", "VT", "VI", "VA",
+  "WA", "WV", "WI", "WY",
+] as const
+
+const PROPERTY_TYPES = [
+  'Single Family Home',
+  'Townhouse',
+  'Condo',
+  'Apartment',
+  'Other',
+] as const
+
+export const addressSchema = z
+  .tuple([
+    z
+      .string()
+      .meta({ title: 'Street Address', description: 'The street address.' }),
+    z.string().meta({ title: 'City', description: 'The city.' }),
+    z.enum(US_STATE_CODES).meta({
+      title: 'State',
+      description:
+        'The state. This field has an enum, so it will render as a select input.',
+    }),
+    z
+      .string()
+      .regex(/^[0-9]{5}(?:-[0-9]{4})?$/)
+      .min(5)
+      .max(10)
+      .meta({ title: 'Zip Code', description: 'The zip code.' }),
+    z
+      .enum(PROPERTY_TYPES)
+      .default('Single Family Home')
+      .meta({
+        title: 'Property Type',
+        description: 'The type of property.',
+        uiSchema: { component: 'multipleChoice' },
+      }),
+  ])
+  .meta({
+    title: 'Address',
+    description: 'An tuple containing the street address, city, and state.',
+  })
+
+export const friendSchema = z
+  .object({
+    name: z
+      .string()
+      .min(1)
+      .max(100)
+      .meta({ title: 'Name', description: "The friend's name." }),
+    age: z
+      .number()
+      .int()
+      .min(0)
+      .max(150)
+      .optional()
+      .meta({ title: 'Age', description: "The friend's age." }),
+    ageAlt: z
+      .number()
+      .min(0)
+      .max(150)
+      .default(30)
+      .meta({
+        title: 'Age (Alt)',
+        description: "The friend's age, but rendered as a range input.",
+        uiSchema: { component: 'range' },
+      }),
+    address: addressSchema.meta({
+      title: 'Address',
+      description: "The friend's address.",
+    }),
+  })
+
+  .meta({ title: 'Friend', description: 'An object representing a friend.' })
 
 export const zodSchema = z
   .object({
     firstName: z
       .string()
-      .regex(new RegExp("^[A-Za-z]+$"))
       .min(1)
       .max(100)
-      .describe("The person's name."),
+      .regex(/^[A-Za-z]+$/)
+      .meta({
+        title: 'First Name',
+        description: "The person's first name.",
+      }),
     lastName: z
       .string()
-      .regex(new RegExp("^[A-Za-z]+$"))
       .min(1)
       .max(100)
-      .describe("The person's last name."),
-    age: z
-      .number()
-      .int()
-      .gte(0)
-      .lte(150)
-      .describe("The person's age.")
-      .optional(),
-    email: z.string().email().describe("The person's email address."),
-    phone: z.string().describe("The person's phone number.").optional(),
-    ssn: z.string().describe("The person's social security number.").optional(),
-    homepage: z
-      .string()
-      .url()
-      .describe("The person's homepage URL.")
-      .optional(),
-    birthday: z.string().describe("The person's birthday.").optional(),
-    is_active: z
-      .boolean()
-      .describe("Whether the person is active.")
-      .superRefine((val, ctx) => {
-        if (val !== true && val !== false) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: "Value must be either true (Yes) or false (No).",
-          });
-        }
-      })
-      .optional(),
+      .regex(/^[A-Za-z]+$/)
+      .meta({
+        title: 'Last Name',
+        description: "The person's last name.",
+      }),
+    age: z.number().int().min(0).max(150).optional().meta({
+      title: 'Age',
+      description: "The person's age.",
+    }),
+    email: z.email().meta({
+      title: 'Email',
+      description: "The person's email address.",
+    }),
+    phone: z.string().optional().meta({
+      title: 'Phone',
+      description: "The person's phone number.",
+    }),
+    ssn: z.string().optional().meta({
+      title: 'SSN',
+      description: "The person's social security number.",
+    }),
+    homepage: z.string().url().optional().meta({
+      title: 'Homepage',
+      description: "The person's homepage URL.",
+    }),
+    birthday: z.date().optional().meta({
+      title: 'Birthday',
+      description: "The person's birthday.",
+    }),
 
-    loves_cats: z
-      .boolean()
-      .describe("Whether the person loves cats.")
-      .optional(),
-    loves_dogs: z
+    is_active: z
       .boolean()
-      .describe("Whether the person loves dogs.")
-      .optional(),
+      .optional()
+      .meta({
+        title: 'Is Active',
+        description:
+          'Indicates whether the person is active. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.',
+        oneOf: [
+          { title: 'Yes', const: true },
+          { title: 'No', const: false },
+        ],
+      }),
+    loves_cats: z.boolean().optional().meta({
+      title: 'Loves Cats',
+      description:
+        'Indicates whether the person loves cats. This field has no complex definition, so it will render as a checkbox input.',
+    }),
+    loves_dogs: z.boolean().optional().meta({
+      title: 'Loves Dogs',
+      description:
+        'Indicates whether the person loves dogs. This field has no complex definition, so it will render as a checkbox input.',
+    }),
     loves_pizza: z
       .boolean()
-      .describe("Whether the person loves pizza.")
-      .superRefine((val, ctx) => {
-        if (val !== true && val !== false) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: "Value must be either true (🍕) or false (🙅‍♂️).",
-          });
-        }
-      })
       .default(true)
-      .optional(),
-
+      .meta({
+        title: 'Loves Pizza',
+        description:
+          'Indicates whether the person loves pizza. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.',
+        oneOf: [
+          { title: '🍕', const: true },
+          { title: '🙅‍♂️', const: false },
+        ],
+      }),
     loves_tacos: z
       .boolean()
-      .describe("Whether the person loves tacos.")
-      .superRefine((val, ctx) => {
-        if (val !== true && val !== false) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: "Value must be either true (🌮) or false (🙅‍♂️).",
-          });
-        }
+      .optional()
+      .meta({
+        title: 'Loves Tacos',
+        description:
+          'Indicates whether the person loves tacos. Defined using schema composition via `oneOf`, each boolean value (`true` or `false`) is paired with a `title` for clarity. Renders as a radio input.',
+        oneOf: [
+          { title: '🌮', const: true },
+          { title: '🙅‍♂️', const: false },
+        ],
+      }),
+    favorite_foods: z
+      .array(
+        z.union([
+          z.literal('Pizza').meta({ title: '🍕 Pizza' }),
+          z.literal('Burger').meta({ title: '🍔 Burgers' }),
+          z.literal('Tacos').meta({ title: '🌮 Tacos' }),
+          z.literal('Sushi').meta({ title: '🍣 Sushi' }),
+        ]),
+      )
+      .min(1)
+      .refine((arr) => new Set(arr).size === arr.length, {
+        message: 'Items must be unique',
       })
-      .optional(),
+      .optional()
+      .meta({
+        title: 'Favorite Foods',
+        description:
+          'A list of favorite foods, unique and selected from predefined options.',
+        uiSchema: { component: 'checkbox' },
+      }),
 
-    address: z
-      .object({
-        street_address: z.string().describe("The street address."),
-        city: z.string().describe("The city."),
-        // TODO: Generating enum-based inputs not yet supported
-        state: z
-          .enum([
-            "AL",
-            "AK",
-            "AS",
-            "AZ",
-            "AR",
-            "CA",
-            "CO",
-            "CT",
-            "DE",
-            "DC",
-            "FM",
-            "FL",
-            "GA",
-            "GU",
-            "HI",
-            "ID",
-            "IL",
-            "IN",
-            "IA",
-            "KS",
-            "KY",
-            "LA",
-            "ME",
-            "MH",
-            "MD",
-            "MA",
-            "MI",
-            "MN",
-            "MS",
-            "MO",
-            "MT",
-            "NE",
-            "NV",
-            "NH",
-            "NJ",
-            "NM",
-            "NY",
-            "NC",
-            "ND",
-            "MP",
-            "OH",
-            "OK",
-            "OR",
-            "PW",
-            "PA",
-            "PR",
-            "RI",
-            "SC",
-            "SD",
-            "TN",
-            "TX",
-            "UT",
-            "VT",
-            "VI",
-            "VA",
-            "WA",
-            "WV",
-            "WI",
-            "WY",
-          ])
-          .describe(
-            "The state. This field has an enum, so it will render as a select input."
-          ),
-        notes: z
-          .string()
-          .describe("Additional notes about the address.")
-          .optional(),
-      })
-      .describe("An object representing an address.")
-      .optional(),
-    friends: z
+    favorite_foods_alt: z
       .array(
-        z
-          .object({
-            name: z.string().describe("The friend's name."),
-            age: z
-              .number()
-              .int()
-              .gte(0)
-              .lte(150)
-              .describe("The friend's age.")
-              .optional(),
-            address: z
-              .object({
-                street_address: z.string().describe("The street address."),
-                city: z.string().describe("The city."),
-                // TODO: Generating enum-based inputs not yet supported
-                state: z
-                  .enum([
-                    "AL",
-                    "AK",
-                    "AS",
-                    "AZ",
-                    "AR",
-                    "CA",
-                    "CO",
-                    "CT",
-                    "DE",
-                    "DC",
-                    "FM",
-                    "FL",
-                    "GA",
-                    "GU",
-                    "HI",
-                    "ID",
-                    "IL",
-                    "IN",
-                    "IA",
-                    "KS",
-                    "KY",
-                    "LA",
-                    "ME",
-                    "MH",
-                    "MD",
-                    "MA",
-                    "MI",
-                    "MN",
-                    "MS",
-                    "MO",
-                    "MT",
-                    "NE",
-                    "NV",
-                    "NH",
-                    "NJ",
-                    "NM",
-                    "NY",
-                    "NC",
-                    "ND",
-                    "MP",
-                    "OH",
-                    "OK",
-                    "OR",
-                    "PW",
-                    "PA",
-                    "PR",
-                    "RI",
-                    "SC",
-                    "SD",
-                    "TN",
-                    "TX",
-                    "UT",
-                    "VT",
-                    "VI",
-                    "VA",
-                    "WA",
-                    "WV",
-                    "WI",
-                    "WY",
-                  ])
-                  .describe(
-                    "The state. This field has an enum, so it will render as a select input."
-                  ),
-                notes: z
-                  .string()
-                  .describe("Additional notes about the address.")
-                  .optional(),
-              })
-              .describe("An object representing an address.")
-              .optional(),
-          })
-          .describe("An object representing a friend.")
+        z.union([
+          z.literal('Pizza').meta({ title: '🍕 Pizza' }),
+          z.literal('Burger').meta({ title: '🍔 Burgers' }),
+          z.literal('Tacos').meta({ title: '🌮 Tacos' }),
+          z.literal('Sushi').meta({ title: '🍣 Sushi' }),
+        ]),
       )
-      .min(0)
-      .describe("A list of the person's friends.")
-      .optional(),
+      .min(1)
+      .refine((arr) => new Set(arr).size === arr.length, {
+        message: 'Items must be unique',
+      })
+      .optional()
+      .meta({
+        title: 'Favorite Foods (Alt)',
+        description:
+          'A list of favorite foods, unique and selected from predefined options, but rendered as a multi-select dropdown.',
+        uiSchema: { component: 'multiSelect' },
+      }),
+
+    address: addressSchema.meta({
+      title: 'Address',
+      description: "The person's address.",
+    }),
+    friends: z.array(friendSchema).optional().meta({
+      title: 'Friends',
+      description: "A list of the person's friends.",
+    }),
     employment: z
       .object({
-        employer: z.string().describe("The person's employer."),
-        role: z.string().describe("The person's role."),
-        start_date: z
+        employer: z
           .string()
-          .describe("The date the person started the role."),
-        end_date: z
+          .meta({ title: 'Employer', description: "The person's employer." }),
+        role: z
           .string()
-          .describe("The date the person ended the role.")
-          .optional(),
-        address: z
-          .object({
-            street_address: z.string().describe("The street address."),
-            city: z.string().describe("The city."),
-            // TODO: Generating enum-based inputs not yet supported
-            state: z
-              .enum([
-                "AL",
-                "AK",
-                "AS",
-                "AZ",
-                "AR",
-                "CA",
-                "CO",
-                "CT",
-                "DE",
-                "DC",
-                "FM",
-                "FL",
-                "GA",
-                "GU",
-                "HI",
-                "ID",
-                "IL",
-                "IN",
-                "IA",
-                "KS",
-                "KY",
-                "LA",
-                "ME",
-                "MH",
-                "MD",
-                "MA",
-                "MI",
-                "MN",
-                "MS",
-                "MO",
-                "MT",
-                "NE",
-                "NV",
-                "NH",
-                "NJ",
-                "NM",
-                "NY",
-                "NC",
-                "ND",
-                "MP",
-                "OH",
-                "OK",
-                "OR",
-                "PW",
-                "PA",
-                "PR",
-                "RI",
-                "SC",
-                "SD",
-                "TN",
-                "TX",
-                "UT",
-                "VT",
-                "VI",
-                "VA",
-                "WA",
-                "WV",
-                "WI",
-                "WY",
-              ])
-              .describe(
-                "The state. This field has an enum, so it will render as a select input."
-              ),
-            notes: z
-              .string()
-              .describe("Additional notes about the address.")
-              .optional(),
-          })
-          .describe("An object representing an address.")
-          .optional(),
+          .meta({ title: 'Role', description: "The person's role." }),
+        start_date: z.date().meta({
+          title: 'Start Date',
+          description: 'The date the person started the role.',
+        }),
+        end_date: z.date().optional().meta({
+          title: 'End Date',
+          description: 'The date the person ended the role.',
+        }),
+        address: addressSchema.meta({
+          title: 'Address',
+          description: 'The address of the employment location.',
+        }),
       })
-      .describe("The person's employment details.")
-      .optional(),
+      .optional()
+      .meta({
+        title: 'Employment',
+        description: "The person's employment details.",
+      }),
     projects: z
       .array(
         z
           .object({
-            name: z.string().describe("The name of the project."),
-            description: z.string().describe("The description of the project."),
-            start_date: z.string().describe("The date the project started."),
-            end_date: z
+            name: z
               .string()
-              .describe("The date the project ended.")
-              .optional(),
-            team: z
-              .array(
-                z
-                  .object({
-                    name: z.string().describe("The friend's name."),
-                    age: z
-                      .number()
-                      .int()
-                      .gte(0)
-                      .lte(150)
-                      .describe("The friend's age.")
-                      .optional(),
-                    address: z
-                      .object({
-                        street_address: z
-                          .string()
-                          .describe("The street address."),
-                        city: z.string().describe("The city."),
-                        // TODO: Generating enum-based inputs not yet supported
-                        state: z
-                          .enum([
-                            "AL",
-                            "AK",
-                            "AS",
-                            "AZ",
-                            "AR",
-                            "CA",
-                            "CO",
-                            "CT",
-                            "DE",
-                            "DC",
-                            "FM",
-                            "FL",
-                            "GA",
-                            "GU",
-                            "HI",
-                            "ID",
-                            "IL",
-                            "IN",
-                            "IA",
-                            "KS",
-                            "KY",
-                            "LA",
-                            "ME",
-                            "MH",
-                            "MD",
-                            "MA",
-                            "MI",
-                            "MN",
-                            "MS",
-                            "MO",
-                            "MT",
-                            "NE",
-                            "NV",
-                            "NH",
-                            "NJ",
-                            "NM",
-                            "NY",
-                            "NC",
-                            "ND",
-                            "MP",
-                            "OH",
-                            "OK",
-                            "OR",
-                            "PW",
-                            "PA",
-                            "PR",
-                            "RI",
-                            "SC",
-                            "SD",
-                            "TN",
-                            "TX",
-                            "UT",
-                            "VT",
-                            "VI",
-                            "VA",
-                            "WA",
-                            "WV",
-                            "WI",
-                            "WY",
-                          ])
-                          .describe(
-                            "The state. This field has an enum, so it will render as a select input."
-                          ),
-                        notes: z
-                          .string()
-                          .describe("Additional notes about the address.")
-                          .optional(),
-                      })
-                      .describe("An object representing an address.")
-                      .optional(),
-                  })
-                  .describe("An object representing a friend.")
-              )
-              .describe("The team members involved in the project.")
-              .optional(),
+              .meta({ title: 'Name', description: 'The name of the project.' }),
+            description: z.string().meta({
+              title: 'Description',
+              description: 'The description of the project.',
+              uiSchema: { component: 'textarea' },
+            }),
+            start_date: z.date().meta({
+              title: 'Start Date',
+              description: 'The date the project started.',
+            }),
+            end_date: z.date().optional().meta({
+              title: 'End Date',
+              description: 'The date the project ended.',
+            }),
+            team: z.array(friendSchema).optional().meta({
+              title: 'Team',
+              description: 'The team members involved in the project.',
+            }),
           })
-          .describe("An object representing a project.")
+          .meta({
+            title: 'Project',
+            description: 'An object representing a project.',
+          }),
       )
       .min(0)
-      .describe("A list of the person's projects.")
-      .optional(),
+      .optional()
+      .meta({
+        title: 'Projects',
+        description: "A list of the person's projects.",
+      }),
+  })
+  .meta({
+    title: 'Example Schema',
+    description:
+      'A schema representing a complex object with various features.',
   })
-  .describe("A schema representing a complex object with various features.");
 
-export const zodSchemaBasic = z.object({
-  firstName: z
-    .string()
-    .regex(new RegExp("^[A-Za-z]+$"))
-    .min(1)
-    .max(100)
-    .describe("The person's first name."),
-  lastName: z
-    .string()
-    .regex(new RegExp("^[A-Za-z]+$"))
-    .min(1)
-    .max(100)
-    .describe("The person's last name."),
-  age: z
-    .number()
-    .int()
-    .gte(0)
-    .lte(150)
-    .describe("The person's age.")
-    .optional(),
-  email: z.string().email().describe("The person's email address."),
-});
+export const zodSchemaBasic = z
+  .object({
+    firstName: z
+      .string()
+      .min(1)
+      .max(100)
+      .regex(/^[A-Za-z]+$/)
+      .meta({
+        title: 'First Name',
+        description: "The person's first name.",
+      }),
+    lastName: z
+      .string()
+      .min(1)
+      .max(100)
+      .regex(/^[A-Za-z]+$/)
+      .meta({
+        title: 'Last Name',
+        description: "The person's last name.",
+      }),
+    age: z.number().int().min(0).max(150).optional().meta({
+      title: 'Age',
+      description: "The person's age.",
+    }),
+    email: z.email().meta({
+      title: 'Email Address',
+      description: "The person's email address.",
+    }),
+  })
+  .meta({ title: 'User Form', description: 'A simple user form' })
diff --git a/website/src/theme/ThemeProvider.tsx b/website/src/theme/ThemeProvider.tsx
new file mode 100644
index 0000000..e1e58ca
--- /dev/null
+++ b/website/src/theme/ThemeProvider.tsx
@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react'
+import { useTheme } from './useTheme'
+
+interface ThemeContextProps {
+  isDarkMode: boolean
+  toggleDarkMode: () => void
+}
+
+const ThemeContext = createContext<ThemeContextProps | undefined>(undefined)
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const { isDarkMode, toggleDarkMode } = useTheme()
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useThemeContext must be used within a ThemeProvider')
+  }
+  return context
+}
diff --git a/website/src/theme/useTheme.ts b/website/src/theme/useTheme.ts
new file mode 100644
index 0000000..789e98c
--- /dev/null
+++ b/website/src/theme/useTheme.ts
@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * Custom hook for managing theme state with localStorage persistence
+ * and system preference detection. Prevents theme flashing by working
+ * with the theme script in index.html
+ */
+export const useTheme = (storageKey = 'vite-ui-theme') => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    // Check if dark class is already applied
+    if (document.documentElement.classList.contains('dark')) return true
+
+    // Fallback logic (should rarely be needed due to inline script)
+    return localStorage.getItem(storageKey)
+      ? localStorage.getItem(storageKey) === 'true'
+      : window.matchMedia('(prefers-color-scheme: dark)').matches
+  })
+
+  useEffect(() => {
+    // Toggle dark class based on state
+    document.documentElement.classList.toggle('dark', isDarkMode)
+
+    // Always update localStorage to keep it in sync
+    localStorage.setItem(storageKey, isDarkMode.toString())
+  }, [isDarkMode, storageKey])
+
+  const toggleDarkMode = () => setIsDarkMode(!isDarkMode)
+
+  return { isDarkMode, toggleDarkMode }
+}
diff --git a/website/tsconfig.app.json b/website/tsconfig.app.json
index 358ca9b..19c2176 100644
--- a/website/tsconfig.app.json
+++ b/website/tsconfig.app.json
@@ -20,7 +20,13 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/website/tsconfig.json b/website/tsconfig.json
index ea9d0cd..1e17393 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -7,5 +7,11 @@
     {
       "path": "./tsconfig.node.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }
diff --git a/website/vite.config.ts b/website/vite.config.ts
index 8b0f57b..92dd4e1 100644
--- a/website/vite.config.ts
+++ b/website/vite.config.ts
@@ -1,7 +1,14 @@
+import path from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 })