From 6fb1a71e6ba262df53ff7c629e48050d58fe6ae8 Mon Sep 17 00:00:00 2001
From: Labb Realheart <labb@realheart.se>
Date: Thu, 23 Jan 2025 14:07:52 +0100
Subject: [PATCH 01/40] new elemetn added

---
 .env                                   | 5 ++---
 next.config.mjs                        | 3 ---
 package-lock.json                      | 9 +++++----
 src/components/FormElements.tsx        | 8 ++++++--
 src/components/FormElementsSidebar.tsx | 3 ++-
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/.env b/.env
index f70fed1..65fc7d5 100644
--- a/.env
+++ b/.env
@@ -1,6 +1,5 @@
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c3BsZW5kaWQtZG9iZXJtYW4tNTkuY2xlcmsuYWNjb3VudHMuZGV2JA
-CLERK_SECRET_KEY=sk_test_l2T0mqHo5vjz6jgNgaziHJILNjGytPOmFALnMrIIU9
-
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aW1wcm92ZWQtZ2FyZmlzaC05Ni5jbGVyay5hY2NvdW50cy5kZXYk
+CLERK_SECRET_KEY=sk_test_g77C4CnTgDtW7L8DVj8WGHbwDlCspgYWWO6PWXGLVD
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
diff --git a/next.config.mjs b/next.config.mjs
index e709436..0a7c9af 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,8 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    serverActions: true,
-  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 77d3a87..c01c4b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2966,9 +2966,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001597",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
-      "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
+      "version": "1.0.30001695",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz",
+      "integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2982,7 +2982,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index 799d579..b5d3211 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -21,7 +21,8 @@ export type ElementsType =
   | "TextAreaField"
   | "DateField"
   | "SelectField"
-  | "CheckboxField";
+  | "CheckboxField"
+  | "NewElementField"; // Add your new element type here
 
 export type SubmitFunction = (key: string, value: string) => void;
 
@@ -60,6 +61,8 @@ export type FormElementInstance = {
 type FormElementsType = {
   [key in ElementsType]: FormElement;
 };
+import { NewElementFormElement } from "./field/NewElementField";
+
 export const FormElements: FormElementsType = {
   TextField: TextFieldFormElement,
   TitleField: TitleFieldFormElement,
@@ -72,4 +75,5 @@ export const FormElements: FormElementsType = {
   DateField: DateFieldFormElement,
   SelectField: SelectFieldFormElement,
   CheckboxField: CheckboxFieldFormElement,
-};
\ No newline at end of file
+  NewElementField: NewElementFormElement,
+};
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index 97f1efb..19da432 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -23,9 +23,10 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.DateField} />
         <SidebarBtnElement formElement={FormElements.SelectField} />
         <SidebarBtnElement formElement={FormElements.CheckboxField} />
+        <SidebarBtnElement formElement={FormElements.NewElementField} />
       </div>
     </div>
   );
 }
 
-export default FormElementsSidebar;
\ No newline at end of file
+export default FormElementsSidebar;

From 1ec7b06481b02a1cfc89f2297a01c2c29c7739c8 Mon Sep 17 00:00:00 2001
From: Labb Realheart <labb@realheart.se>
Date: Thu, 23 Jan 2025 14:12:42 +0100
Subject: [PATCH 02/40] all files

---
 .env                                     |   5 +-
 src/components/field/NewElementField.tsx | 230 +++++++++++++++++++++++
 2 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 src/components/field/NewElementField.tsx

diff --git a/.env b/.env
index 65fc7d5..f70fed1 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,6 @@
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aW1wcm92ZWQtZ2FyZmlzaC05Ni5jbGVyay5hY2NvdW50cy5kZXYk
-CLERK_SECRET_KEY=sk_test_g77C4CnTgDtW7L8DVj8WGHbwDlCspgYWWO6PWXGLVD
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c3BsZW5kaWQtZG9iZXJtYW4tNTkuY2xlcmsuYWNjb3VudHMuZGV2JA
+CLERK_SECRET_KEY=sk_test_l2T0mqHo5vjz6jgNgaziHJILNjGytPOmFALnMrIIU9
+
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
diff --git a/src/components/field/NewElementField.tsx b/src/components/field/NewElementField.tsx
new file mode 100644
index 0000000..203a5c1
--- /dev/null
+++ b/src/components/field/NewElementField.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { BsTextareaResize } from "react-icons/bs";
+import useDesigner from "@/hooks/useDesigner";
+
+// Define the extra attributes your element needs
+type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    label: string;
+    helperText: string;
+    required: boolean;
+    placeholder: string;
+  };
+};
+
+// Define validation schema for properties form
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  helperText: z.string().max(200),
+  required: z.boolean().default(false),
+  placeholder: z.string().max(50),
+});
+
+export const NewElementFormElement: FormElement = {
+  type: "NewElementField",
+  construct: (id: string) => ({
+    id,
+    type: "NewElementField",
+    extraAttributes: {
+      label: "New Element",
+      helperText: "Helper text",
+      required: false,
+      placeholder: "Placeholder",
+    },
+  }),
+
+  designerBtnElement: {
+    icon: BsTextareaResize,
+    label: "New Element",
+  },
+
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
+    const element = formElement as CustomInstance;
+    if (element.extraAttributes.required) {
+      return currentValue.length > 0;
+    }
+    return true;
+  },
+};
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { label, helperText, required, placeholder } = element.extraAttributes;
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label>
+        {label}
+        {required && "*"}
+      </Label>
+      <Input readOnly disabled placeholder={placeholder} />
+      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+    </div>
+  );
+}
+
+function FormComponent({
+  elementInstance,
+  submitValue,
+  isInvalid,
+  defaultValue,
+}: {
+  elementInstance: FormElementInstance;
+  submitValue?: (key: string, value: string) => void;
+  isInvalid?: boolean;
+  defaultValue?: string;
+}) {
+  const element = elementInstance as CustomInstance;
+  const { label, helperText, required, placeholder } = element.extraAttributes;
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className={`${isInvalid ? "text-red-500" : ""}`}>
+        {label}
+        {required && "*"}
+      </Label>
+      <Input
+        className={`${isInvalid ? "border-red-500" : ""}`}
+        placeholder={placeholder}
+        onChange={(e) => submitValue?.(element.id, e.target.value)}
+        defaultValue={defaultValue}
+      />
+      {helperText && <p className={`text-[0.8rem] ${isInvalid ? "text-red-500" : "text-muted-foreground"}`}>{helperText}</p>}
+    </div>
+  );
+}
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      label: element.extraAttributes.label,
+      helperText: element.extraAttributes.helperText,
+      required: element.extraAttributes.required,
+      placeholder: element.extraAttributes.placeholder,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    const { label, helperText, required, placeholder } = values;
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        label,
+        helperText,
+        required,
+        placeholder,
+      },
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="label"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="placeholder"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Placeholder</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="helperText"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Helper text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="required"
+          render={({ field }) => (
+            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+              <div className="space-y-0.5">
+                <FormLabel>Required</FormLabel>
+              </div>
+              <FormControl>
+                <input
+                  type="checkbox"
+                  checked={field.value}
+                  onChange={field.onChange}
+                  className="accent-primary"
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}

From 94aa252edc6bfe903e2dea2b0c56d1f83333ce7b Mon Sep 17 00:00:00 2001
From: Labb Realheart <labb@realheart.se>
Date: Thu, 23 Jan 2025 14:22:24 +0100
Subject: [PATCH 03/40] added element and documenation

---
 Docs/AddElement.md | 182 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 Docs/AddElement.md

diff --git a/Docs/AddElement.md b/Docs/AddElement.md
new file mode 100644
index 0000000..c5342f5
--- /dev/null
+++ b/Docs/AddElement.md
@@ -0,0 +1,182 @@
+# Adding a New Form Element
+
+This guide explains how to add a new form element type to the Quick Form Builder system.
+
+## Overview
+
+Form elements are the building blocks of forms in our system. Each element type (like text fields, checkboxes, etc.) is implemented as a separate component that follows a consistent pattern and interface.
+
+## Step-by-Step Guide
+
+### 1. Add Element Type Definition
+
+In `src/components/FormElements.tsx`, add your new element type to the `ElementsType` union type:
+
+```typescript
+export type ElementsType =
+  | "TextField"
+  | "TitleField"
+  // ... other existing types ...
+  | "YourNewFieldType"; // Add your new type here
+```
+
+### 2. Create Element Component File
+
+Create a new file for your element under `src/components/field/` (e.g., `YourNewField.tsx`). The file should include:
+
+#### a) Type Definitions
+```typescript
+type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    label: string;
+    helperText: string;
+    required: boolean;
+    placeholder: string;
+    // Add any additional attributes your element needs
+  };
+};
+
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  helperText: z.string().max(200),
+  required: z.boolean().default(false),
+  placeholder: z.string().max(50),
+  // Add validation for any additional properties
+});
+```
+
+#### b) Element Implementation
+```typescript
+export const YourNewFormElement: FormElement = {
+  type: "YourNewFieldType",
+  
+  // Factory function to create new instances
+  construct: (id: string) => ({
+    id,
+    type: "YourNewFieldType",
+    extraAttributes: {
+      label: "Default Label",
+      helperText: "Default helper text",
+      required: false,
+      placeholder: "Default placeholder",
+    },
+  }),
+
+  // Sidebar button configuration
+  designerBtnElement: {
+    icon: YourIcon,  // Import from react-icons
+    label: "Your Element",
+  },
+
+  // Component references
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  // Validation logic
+  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
+    const element = formElement as CustomInstance;
+    if (element.extraAttributes.required) {
+      return currentValue.length > 0;
+    }
+    return true;
+  },
+};
+```
+
+#### c) Required Components
+
+1. Designer Component (Preview in builder):
+```typescript
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { label, helperText, required, placeholder } = element.extraAttributes;
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label>
+        {label}
+        {required && "*"}
+      </Label>
+      <Input readOnly disabled placeholder={placeholder} />
+      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+    </div>
+  );
+}
+```
+
+2. Form Component (Live form element):
+```typescript
+function FormComponent({
+  elementInstance,
+  submitValue,
+  isInvalid,
+  defaultValue,
+}: {
+  elementInstance: FormElementInstance;
+  submitValue?: (key: string, value: string) => void;
+  isInvalid?: boolean;
+  defaultValue?: string;
+}) {
+  const element = elementInstance as CustomInstance;
+  // Implementation for the actual form input
+}
+```
+
+3. Properties Component (Settings panel):
+```typescript
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  // Implementation for property editing
+}
+```
+
+### 3. Register the Element
+
+In `src/components/FormElements.tsx`, import and add your element to the FormElements object:
+
+```typescript
+import { YourNewFormElement } from "./field/YourNewField";
+
+export const FormElements: FormElementsType = {
+  TextField: TextFieldFormElement,
+  // ... other elements ...
+  YourNewFieldType: YourNewFormElement,
+};
+```
+
+### 4. Add to Sidebar
+
+In `src/components/FormElementsSidebar.tsx`, add your element to the sidebar:
+
+```typescript
+<SidebarBtnElement formElement={FormElements.YourNewFieldType} />
+```
+
+## Database Integration
+
+No additional database changes are required. The system stores form content as JSON in the Prisma database, and new elements are automatically handled as long as they follow the FormElementInstance interface.
+
+## Testing Your New Element
+
+1. Create a new form
+2. Verify your element appears in the sidebar
+3. Test dragging and dropping the element
+4. Test property editing
+5. Test form saving and loading
+6. Test form publishing and submission
+
+## Best Practices
+
+1. Follow the existing naming conventions
+2. Implement proper validation
+3. Include helpful default values
+4. Add appropriate TypeScript types
+5. Ensure proper error handling
+6. Test all component states (preview, edit, submit)
+
+## Common Issues
+
+- If the element doesn't appear in the sidebar, check the FormElements export
+- If properties don't update, verify the PropertiesComponent implementation
+- If validation fails, check the validate function implementation

From a72fa059588cb98248e4eec8a1b687dc87e21433 Mon Sep 17 00:00:00 2001
From: Labb Realheart <labb@realheart.se>
Date: Thu, 23 Jan 2025 16:03:51 +0100
Subject: [PATCH 04/40] added image upload

---
 Examples/ImageUpload.tsx                  | 157 ++++++++
 src/components/FormElements.tsx           |   6 +-
 src/components/FormElementsSidebar.tsx    |   2 +-
 src/components/field/ImageUploadField.tsx | 444 ++++++++++++++++++++++
 4 files changed, 605 insertions(+), 4 deletions(-)
 create mode 100644 Examples/ImageUpload.tsx
 create mode 100644 src/components/field/ImageUploadField.tsx

diff --git a/Examples/ImageUpload.tsx b/Examples/ImageUpload.tsx
new file mode 100644
index 0000000..3e37d09
--- /dev/null
+++ b/Examples/ImageUpload.tsx
@@ -0,0 +1,157 @@
+import React, { useState, useRef } from 'react';
+
+const ImageUpload = ({
+  prompt = "Upload an image",
+  buttonText = "Choose File",
+  width = "w-96",
+  height = "h-64",
+  maxDimension = 800,
+  onImageSelect = (file) => console.log('Image selected:', file)
+}) => {
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [fileName, setFileName] = useState("No file chosen");
+  const fileInputRef = useRef(null);
+
+  const resizeImage = (originalFile) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.src = URL.createObjectURL(originalFile);
+      
+      img.onload = () => {
+        // Calculate new dimensions
+        let newWidth = img.width;
+        let newHeight = img.height;
+        
+        if (img.width > maxDimension || img.height > maxDimension) {
+          if (img.width > img.height) {
+            newWidth = maxDimension;
+            newHeight = (img.height / img.width) * maxDimension;
+          } else {
+            newHeight = maxDimension;
+            newWidth = (img.width / img.height) * maxDimension;
+          }
+        }
+
+        // Create canvas and resize
+        const canvas = document.createElement('canvas');
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+        
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, newWidth, newHeight);
+        
+        // Convert to file
+        canvas.toBlob((blob) => {
+          // Create new file with original name
+          const resizedFile = new File([blob], originalFile.name, {
+            type: originalFile.type,
+            lastModified: Date.now(),
+          });
+          
+          resolve(resizedFile);
+        }, originalFile.type);
+
+        // Clean up
+        URL.revokeObjectURL(img.src);
+      };
+    });
+  };
+
+  const handleFileSelect = async (event) => {
+    const file = event.target.files[0];
+    if (file && file.type.startsWith('image/')) {
+      setFileName(file.name);
+      
+      // Create preview
+      const reader = new FileReader();
+      reader.onload = () => {
+        setPreviewUrl(reader.result);
+      };
+      reader.readAsDataURL(file);
+      
+      // Process and resize image if needed
+      const img = new Image();
+      img.src = URL.createObjectURL(file);
+      
+      img.onload = async () => {
+        let finalFile = file;
+        
+        // Only resize if image exceeds max dimensions
+        if (img.width > maxDimension || img.height > maxDimension) {
+          finalFile = await resizeImage(file);
+          console.log(`Image resized from ${img.width}x${img.height} to ${finalFile.width}x${finalFile.height}`);
+        }
+        
+        URL.revokeObjectURL(img.src);
+        onImageSelect(finalFile);
+      };
+    }
+  };
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      {/* Image Preview Area */}
+      <div 
+        className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg 
+          flex items-center justify-center overflow-hidden bg-gray-50`}
+      >
+        {previewUrl ? (
+          <img 
+            src={previewUrl} 
+            alt="Preview" 
+            className="max-w-full max-h-full object-contain"
+          />
+        ) : (
+          <div className="text-gray-400">
+            <svg 
+              className="w-12 h-12 mx-auto mb-2"
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                strokeWidth={2} 
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Prompt Text */}
+      <div className="text-sm text-gray-600 max-w-prose text-center px-4 whitespace-normal">
+        {prompt}
+      </div>
+
+      {/* DaisyUI-style File Input */}
+      <div className="flex w-full max-w-xs">
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileSelect}
+          accept="image/*"
+          className="hidden"
+        />
+        <div 
+          className="flex w-full cursor-pointer"
+          onClick={handleButtonClick}
+        >
+          <div className="bg-blue-500 text-white px-4 py-2 rounded-l-lg hover:bg-blue-600 transition-colors duration-200">
+            {buttonText}
+          </div>
+          <div className="flex-1 px-4 py-2 bg-gray-100 text-gray-600 truncate rounded-r-lg border-y border-r border-gray-200">
+            {fileName}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageUpload;
\ No newline at end of file
diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index b5d3211..1216c36 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -22,7 +22,7 @@ export type ElementsType =
   | "DateField"
   | "SelectField"
   | "CheckboxField"
-  | "NewElementField"; // Add your new element type here
+  | "ImageUploadField";
 
 export type SubmitFunction = (key: string, value: string) => void;
 
@@ -61,7 +61,7 @@ export type FormElementInstance = {
 type FormElementsType = {
   [key in ElementsType]: FormElement;
 };
-import { NewElementFormElement } from "./field/NewElementField";
+import { ImageUploadFormElement } from "./field/ImageUploadField";
 
 export const FormElements: FormElementsType = {
   TextField: TextFieldFormElement,
@@ -75,5 +75,5 @@ export const FormElements: FormElementsType = {
   DateField: DateFieldFormElement,
   SelectField: SelectFieldFormElement,
   CheckboxField: CheckboxFieldFormElement,
-  NewElementField: NewElementFormElement,
+  ImageUploadField: ImageUploadFormElement,
 };
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index 19da432..6dcbc92 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -23,7 +23,7 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.DateField} />
         <SidebarBtnElement formElement={FormElements.SelectField} />
         <SidebarBtnElement formElement={FormElements.CheckboxField} />
-        <SidebarBtnElement formElement={FormElements.NewElementField} />
+        <SidebarBtnElement formElement={FormElements.ImageUploadField} />
       </div>
     </div>
   );
diff --git a/src/components/field/ImageUploadField.tsx b/src/components/field/ImageUploadField.tsx
new file mode 100644
index 0000000..0c07d3b
--- /dev/null
+++ b/src/components/field/ImageUploadField.tsx
@@ -0,0 +1,444 @@
+"use client";
+
+import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState, useRef } from "react";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { BsCardImage } from "react-icons/bs";
+import useDesigner from "@/hooks/useDesigner";
+
+type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    label: string;
+    helperText: string;
+    required: boolean;
+    prompt: string;
+    buttonText: string;
+    width: string;
+    height: string;
+    maxDimension: number;
+  };
+};
+
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  helperText: z.string().max(200),
+  required: z.boolean().default(false),
+  prompt: z.string().min(2).max(100),
+  buttonText: z.string().min(2).max(50),
+  width: z.string(),
+  height: z.string(),
+  maxDimension: z.number().min(100).max(2000),
+});
+
+export const ImageUploadFormElement: FormElement = {
+  type: "ImageUploadField",
+  construct: (id: string) => ({
+    id,
+    type: "ImageUploadField",
+    extraAttributes: {
+      label: "Image Upload",
+      helperText: "Upload an image file",
+      required: false,
+      prompt: "Upload an image",
+      buttonText: "Choose File",
+      width: "w-96",
+      height: "h-64",
+      maxDimension: 800,
+    },
+  }),
+
+  designerBtnElement: {
+    icon: BsCardImage,
+    label: "Image Upload",
+  },
+
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
+    const element = formElement as CustomInstance;
+    if (element.extraAttributes.required) {
+      return currentValue.length > 0;
+    }
+    return true;
+  },
+};
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { label, helperText, required, prompt, buttonText, width, height } = element.extraAttributes;
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label>
+        {label}
+        {required && "*"}
+      </Label>
+      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50`}>
+        <div className="text-gray-400">
+          <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path 
+              strokeLinecap="round" 
+              strokeLinejoin="round" 
+              strokeWidth={2} 
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
+            />
+          </svg>
+        </div>
+      </div>
+      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+    </div>
+  );
+}
+
+function FormComponent({
+  elementInstance,
+  submitValue,
+  isInvalid,
+  defaultValue,
+}: {
+  elementInstance: FormElementInstance;
+  submitValue?: (key: string, value: string) => void;
+  isInvalid?: boolean;
+  defaultValue?: string;
+}) {
+  const element = elementInstance as CustomInstance;
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [fileName, setFileName] = useState("No file chosen");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { prompt, buttonText, width, height, maxDimension } = element.extraAttributes;
+
+  const resizeImage = (originalFile: File): Promise<File> => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.src = URL.createObjectURL(originalFile);
+      
+      img.onload = () => {
+        let newWidth = img.width;
+        let newHeight = img.height;
+        
+        if (img.width > maxDimension || img.height > maxDimension) {
+          if (img.width > img.height) {
+            newWidth = maxDimension;
+            newHeight = (img.height / img.width) * maxDimension;
+          } else {
+            newHeight = maxDimension;
+            newWidth = (img.width / img.height) * maxDimension;
+          }
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+        
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(img, 0, 0, newWidth, newHeight);
+          
+          canvas.toBlob((blob) => {
+            if (blob) {
+              const resizedFile = new File([blob], originalFile.name, {
+                type: originalFile.type,
+                lastModified: Date.now(),
+              });
+              
+              resolve(resizedFile);
+            }
+          }, originalFile.type);
+        }
+
+        URL.revokeObjectURL(img.src);
+      };
+    });
+  };
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file && file.type.startsWith('image/')) {
+      setFileName(file.name);
+      
+      const reader = new FileReader();
+      reader.onload = () => {
+        setPreviewUrl(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+      
+      const img = new Image();
+      img.src = URL.createObjectURL(file);
+      
+      img.onload = async () => {
+        let finalFile = file;
+        
+        if (img.width > maxDimension || img.height > maxDimension) {
+          finalFile = await resizeImage(file);
+        }
+        
+        URL.revokeObjectURL(img.src);
+        submitValue?.(elementInstance.id, finalFile.name);
+      };
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className={`${isInvalid ? "text-red-500" : ""}`}>
+        {element.extraAttributes.label}
+        {element.extraAttributes.required && "*"}
+      </Label>
+      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50`}>
+        {previewUrl ? (
+          <img 
+            src={previewUrl} 
+            alt="Preview" 
+            className="max-w-full max-h-full object-contain"
+          />
+        ) : (
+          <div className="text-gray-400">
+            <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                strokeWidth={2} 
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+      <div className="text-sm text-gray-600 max-w-prose text-center px-4 whitespace-normal">
+        {prompt}
+      </div>
+      <div className="flex w-full max-w-xs">
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileSelect}
+          accept="image/*"
+          className="hidden"
+        />
+        <div 
+          className="flex w-full cursor-pointer"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <div className="bg-blue-500 text-white px-4 py-2 rounded-l-lg hover:bg-blue-600 transition-colors duration-200">
+            {buttonText}
+          </div>
+          <div className="flex-1 px-4 py-2 bg-gray-100 text-gray-600 truncate rounded-r-lg border-y border-r border-gray-200">
+            {fileName}
+          </div>
+        </div>
+      </div>
+      {element.extraAttributes.helperText && (
+        <p className={`text-[0.8rem] ${isInvalid ? "text-red-500" : "text-muted-foreground"}`}>
+          {element.extraAttributes.helperText}
+        </p>
+      )}
+    </div>
+  );
+}
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      label: element.extraAttributes.label,
+      helperText: element.extraAttributes.helperText,
+      required: element.extraAttributes.required,
+      prompt: element.extraAttributes.prompt,
+      buttonText: element.extraAttributes.buttonText,
+      width: element.extraAttributes.width,
+      height: element.extraAttributes.height,
+      maxDimension: element.extraAttributes.maxDimension,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: values,
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="label"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="prompt"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Prompt Text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="buttonText"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Button Text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="helperText"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Helper text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="width"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Width (Tailwind class)</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="height"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Height (Tailwind class)</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="maxDimension"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Max Dimension (pixels)</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  type="number"
+                  min={100}
+                  max={2000}
+                  onChange={(e) => field.onChange(parseInt(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="required"
+          render={({ field }) => (
+            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+              <div className="space-y-0.5">
+                <FormLabel>Required</FormLabel>
+              </div>
+              <FormControl>
+                <input
+                  type="checkbox"
+                  checked={field.value}
+                  onChange={field.onChange}
+                  className="accent-primary"
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}

From 28f20dfd08b5d69f7b84190afa473369aedc50b3 Mon Sep 17 00:00:00 2001
From: Labb Realheart <labb@realheart.se>
Date: Thu, 23 Jan 2025 16:21:46 +0100
Subject: [PATCH 05/40] added rating scale

---
 Examples/RatingScale.tsx                  | 189 +++++++
 src/components/FormElements.tsx           |   5 +-
 src/components/FormElementsSidebar.tsx    |   1 +
 src/components/field/RatingScaleField.tsx | 574 ++++++++++++++++++++++
 4 files changed, 768 insertions(+), 1 deletion(-)
 create mode 100644 Examples/RatingScale.tsx
 create mode 100644 src/components/field/RatingScaleField.tsx

diff --git a/Examples/RatingScale.tsx b/Examples/RatingScale.tsx
new file mode 100644
index 0000000..18035d1
--- /dev/null
+++ b/Examples/RatingScale.tsx
@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+
+const solidColorSchemes = {
+  blue: {
+    selected: 'bg-blue-500 border-blue-600',
+    hover: 'hover:border-blue-400',
+    text: 'text-blue-600'
+  },
+  green: {
+    selected: 'bg-green-500 border-green-600',
+    hover: 'hover:border-green-400',
+    text: 'text-green-600'
+  },
+  purple: {
+    selected: 'bg-purple-500 border-purple-600',
+    hover: 'hover:border-purple-400',
+    text: 'text-purple-600'
+  },
+  red: {
+    selected: 'bg-red-500 border-red-600',
+    hover: 'hover:border-red-400',
+    text: 'text-red-600'
+  },
+  amber: {
+    selected: 'bg-amber-500 border-amber-600',
+    hover: 'hover:border-amber-400',
+    text: 'text-amber-600'
+  }
+};
+
+const gradientColorSchemes = {
+  severity: {
+    colors: ['green', 'yellow', 'red'],
+    labels: {
+      start: { color: 'text-green-600', hover: 'hover:border-green-400' },
+      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
+      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
+    }
+  },
+  satisfaction: {
+    colors: ['red', 'yellow', 'green'],
+    labels: {
+      start: { color: 'text-red-600', hover: 'hover:border-red-400' },
+      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
+      end: { color: 'text-green-600', hover: 'hover:border-green-400' }
+    }
+  },
+  temperature: {
+    colors: ['blue', 'green', 'red'],
+    labels: {
+      start: { color: 'text-blue-600', hover: 'hover:border-blue-400' },
+      middle: { color: 'text-green-600', hover: 'hover:border-green-400' },
+      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
+    }
+  }
+};
+
+const getColorForValue = (value, minValue, maxValue, gradientScheme) => {
+  const position = (value - minValue) / (maxValue - minValue);
+  const colors = gradientColorSchemes[gradientScheme]?.colors;
+  
+  if (!colors) return null;
+
+  if (position <= 0.33) {
+    return {
+      selected: `bg-${colors[0]}-500 border-${colors[0]}-600`,
+      hover: `hover:border-${colors[0]}-400`
+    };
+  } else if (position <= 0.66) {
+    return {
+      selected: `bg-${colors[1]}-500 border-${colors[1]}-600`,
+      hover: `hover:border-${colors[1]}-400`
+    };
+  } else {
+    return {
+      selected: `bg-${colors[2]}-500 border-${colors[2]}-600`,
+      hover: `hover:border-${colors[2]}-400`
+    };
+  }
+};
+
+const OneToTen = ({ 
+  question = "Rate your pain level",
+  minLabel = "Mild",
+  midLabel = "Moderate",
+  maxLabel = "Severe",
+  minValue = 0,
+  maxValue = 10,
+  defaultValue = null,
+  colorScheme = 'blue',
+  gradientScheme = null,
+  onChange = (value) => console.log('Selected value:', value)
+}) => {
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const [hoveredValue, setHoveredValue] = useState(null);
+  
+  const useGradient = gradientScheme && gradientColorSchemes[gradientScheme];
+  const gradientLabels = useGradient ? gradientColorSchemes[gradientScheme].labels : null;
+  const solidColors = solidColorSchemes[colorScheme] || solidColorSchemes.blue;
+  
+  // Calculate the range of values
+  const values = Array.from(
+    { length: maxValue - minValue + 1 },
+    (_, i) => i + minValue
+  );
+  
+  const handleSelection = (value) => {
+    setSelectedValue(value);
+    onChange(value);
+  };
+
+  const getButtonColors = (value) => {
+    if (useGradient) {
+      return getColorForValue(value, minValue, maxValue, gradientScheme);
+    }
+    return {
+      selected: solidColors.selected,
+      hover: solidColors.hover
+    };
+  };
+
+  const getLabelColor = (position) => {
+    if (!useGradient) return solidColors.text;
+    
+    switch(position) {
+      case 'start': return gradientLabels.start.color;
+      case 'middle': return gradientLabels.middle.color;
+      case 'end': return gradientLabels.end.color;
+      default: return solidColors.text;
+    }
+  };
+
+  return (
+    <div className="w-full max-w-2xl mx-auto p-4">
+      {/* Question Label */}
+      <div className="text-center mb-6 transform transition-all duration-300 ease-in-out">
+        <h3 className={`text-lg font-medium ${getLabelColor('middle')}`}>{question}</h3>
+      </div>
+      
+      {/* Radio Button Group */}
+      <div className="flex justify-between items-center mb-4">
+        {values.map((value) => {
+          const colors = getButtonColors(value);
+          return (
+            <div 
+              key={value} 
+              className="flex flex-col items-center"
+              onMouseEnter={() => setHoveredValue(value)}
+              onMouseLeave={() => setHoveredValue(null)}
+            >
+              <button
+                className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
+                  transform transition-all duration-200 ease-in-out
+                  ${selectedValue === value 
+                    ? `${colors.selected} text-white scale-110` 
+                    : `bg-white ${colors.hover}`}
+                  ${hoveredValue === value ? 'scale-105' : ''}
+                  ${hoveredValue !== null && hoveredValue !== value ? 'opacity-50' : 'opacity-100'}
+                `}
+                onClick={() => handleSelection(value)}
+                aria-label={`Select ${value}`}
+              >
+                <span className="text-sm font-medium">{value}</span>
+              </button>
+            </div>
+          );
+        })}
+      </div>
+      
+      {/* Label Row */}
+      <div className="flex justify-between px-4 transition-opacity duration-300">
+        <span className={`text-sm ${getLabelColor('start')} transform transition-all duration-300
+          ${hoveredValue !== null && hoveredValue <= minValue + (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
+          {minLabel}
+        </span>
+        <span className={`text-sm ${getLabelColor('middle')} transform transition-all duration-300
+          ${hoveredValue !== null && hoveredValue > minValue + (maxValue - minValue) / 3 && hoveredValue < maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
+          {midLabel}
+        </span>
+        <span className={`text-sm ${getLabelColor('end')} transform transition-all duration-300
+          ${hoveredValue !== null && hoveredValue >= maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
+          {maxLabel}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default OneToTen;
\ No newline at end of file
diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index 1216c36..ca86e76 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -22,7 +22,8 @@ export type ElementsType =
   | "DateField"
   | "SelectField"
   | "CheckboxField"
-  | "ImageUploadField";
+  | "ImageUploadField"
+  | "RatingScaleField";
 
 export type SubmitFunction = (key: string, value: string) => void;
 
@@ -62,6 +63,7 @@ type FormElementsType = {
   [key in ElementsType]: FormElement;
 };
 import { ImageUploadFormElement } from "./field/ImageUploadField";
+import { RatingScaleFormElement } from "./field/RatingScaleField";
 
 export const FormElements: FormElementsType = {
   TextField: TextFieldFormElement,
@@ -76,4 +78,5 @@ export const FormElements: FormElementsType = {
   SelectField: SelectFieldFormElement,
   CheckboxField: CheckboxFieldFormElement,
   ImageUploadField: ImageUploadFormElement,
+  RatingScaleField: RatingScaleFormElement,
 };
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index 6dcbc92..e210a20 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -24,6 +24,7 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.SelectField} />
         <SidebarBtnElement formElement={FormElements.CheckboxField} />
         <SidebarBtnElement formElement={FormElements.ImageUploadField} />
+        <SidebarBtnElement formElement={FormElements.RatingScaleField} />
       </div>
     </div>
   );
diff --git a/src/components/field/RatingScaleField.tsx b/src/components/field/RatingScaleField.tsx
new file mode 100644
index 0000000..fe878f9
--- /dev/null
+++ b/src/components/field/RatingScaleField.tsx
@@ -0,0 +1,574 @@
+"use client";
+
+import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
+import { Label } from "../ui/label";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { BsStarFill } from "react-icons/bs";
+import useDesigner from "@/hooks/useDesigner";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+const SOLID_COLOR_SCHEMES = ["blue", "green", "purple", "red", "amber"] as const;
+const GRADIENT_SCHEMES = ["severity", "satisfaction", "temperature"] as const;
+
+type ColorScheme = {
+  selected: string;
+  hover: string;
+  text: string;
+};
+
+type SolidColorSchemes = {
+  [key in typeof SOLID_COLOR_SCHEMES[number]]: ColorScheme;
+};
+
+const solidColorSchemes: SolidColorSchemes = {
+  blue: {
+    selected: 'bg-blue-500 border-blue-600',
+    hover: 'hover:border-blue-400',
+    text: 'text-blue-600'
+  },
+  green: {
+    selected: 'bg-green-500 border-green-600',
+    hover: 'hover:border-green-400',
+    text: 'text-green-600'
+  },
+  purple: {
+    selected: 'bg-purple-500 border-purple-600',
+    hover: 'hover:border-purple-400',
+    text: 'text-purple-600'
+  },
+  red: {
+    selected: 'bg-red-500 border-red-600',
+    hover: 'hover:border-red-400',
+    text: 'text-red-600'
+  },
+  amber: {
+    selected: 'bg-amber-500 border-amber-600',
+    hover: 'hover:border-amber-400',
+    text: 'text-amber-600'
+  }
+};
+
+type GradientLabel = {
+  color: string;
+  hover: string;
+};
+
+type GradientScheme = {
+  colors: string[];
+  labels: {
+    start: GradientLabel;
+    middle: GradientLabel;
+    end: GradientLabel;
+  };
+};
+
+type GradientColorSchemes = {
+  [key in typeof GRADIENT_SCHEMES[number]]: GradientScheme;
+};
+
+const gradientColorSchemes: GradientColorSchemes = {
+  severity: {
+    colors: ['green', 'yellow', 'red'],
+    labels: {
+      start: { color: 'text-green-600', hover: 'hover:border-green-400' },
+      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
+      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
+    }
+  },
+  satisfaction: {
+    colors: ['red', 'yellow', 'green'],
+    labels: {
+      start: { color: 'text-red-600', hover: 'hover:border-red-400' },
+      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
+      end: { color: 'text-green-600', hover: 'hover:border-green-400' }
+    }
+  },
+  temperature: {
+    colors: ['blue', 'green', 'red'],
+    labels: {
+      start: { color: 'text-blue-600', hover: 'hover:border-blue-400' },
+      middle: { color: 'text-green-600', hover: 'hover:border-green-400' },
+      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
+    }
+  }
+};
+
+type ColorSchemeType = typeof SOLID_COLOR_SCHEMES[number];
+type GradientSchemeType = typeof GRADIENT_SCHEMES[number] | null;
+
+type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    label: string;
+    helperText: string;
+    required: boolean;
+    question: string;
+    minLabel: string;
+    midLabel: string;
+    maxLabel: string;
+    minValue: number;
+    maxValue: number;
+    colorScheme: ColorSchemeType;
+    gradientScheme: GradientSchemeType;
+  };
+};
+
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  helperText: z.string().max(200),
+  required: z.boolean().default(false),
+  question: z.string().min(2).max(200),
+  minLabel: z.string().min(1).max(50),
+  midLabel: z.string().min(1).max(50),
+  maxLabel: z.string().min(1).max(50),
+  minValue: z.number().min(0).max(100),
+  maxValue: z.number().min(0).max(100),
+  colorScheme: z.enum(SOLID_COLOR_SCHEMES),
+  gradientScheme: z.enum(['none', ...GRADIENT_SCHEMES]).transform((value: string) => value === 'none' ? null : value),
+});
+
+export const RatingScaleFormElement: FormElement = {
+  type: "RatingScaleField",
+  construct: (id: string) => ({
+    id,
+    type: "RatingScaleField",
+    extraAttributes: {
+      label: "Rating Scale",
+      helperText: "Select a value",
+      required: false,
+      question: "Rate your experience",
+      minLabel: "Poor",
+      midLabel: "Average",
+      maxLabel: "Excellent",
+      minValue: 1,
+      maxValue: 10,
+      colorScheme: "blue",
+      gradientScheme: null,
+    },
+  }),
+
+  designerBtnElement: {
+    icon: BsStarFill,
+    label: "Rating Scale",
+  },
+
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
+    const element = formElement as CustomInstance;
+    if (element.extraAttributes.required) {
+      return currentValue.length > 0;
+    }
+    return true;
+  },
+};
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { question, minLabel, midLabel, maxLabel, minValue, maxValue, colorScheme } = element.extraAttributes;
+  const solidColors = solidColorSchemes[colorScheme];
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-lg font-medium text-center">{question}</Label>
+      <div className="flex justify-between items-center mb-4">
+        {Array.from({ length: maxValue - minValue + 1 }, (_, i) => i + minValue).map((value) => (
+          <div key={value} className="flex flex-col items-center">
+            <button
+              className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
+                bg-white ${solidColors.hover}`}
+            >
+              <span className="text-sm font-medium">{value}</span>
+            </button>
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-between px-4">
+        <span className={`text-sm ${solidColors.text}`}>{minLabel}</span>
+        <span className={`text-sm ${solidColors.text}`}>{midLabel}</span>
+        <span className={`text-sm ${solidColors.text}`}>{maxLabel}</span>
+      </div>
+    </div>
+  );
+}
+
+function FormComponent({
+  elementInstance,
+  submitValue,
+  isInvalid,
+  defaultValue,
+}: {
+  elementInstance: FormElementInstance;
+  submitValue?: (key: string, value: string) => void;
+  isInvalid?: boolean;
+  defaultValue?: string;
+}) {
+  const element = elementInstance as CustomInstance;
+  const [selectedValue, setSelectedValue] = useState<number | null>(defaultValue ? parseInt(defaultValue) : null);
+  const [hoveredValue, setHoveredValue] = useState<number | null>(null);
+
+  const {
+    question,
+    minLabel,
+    midLabel,
+    maxLabel,
+    minValue,
+    maxValue,
+    colorScheme,
+    gradientScheme
+  } = element.extraAttributes;
+
+  const useGradient = gradientScheme && gradientColorSchemes[gradientScheme];
+  const gradientLabels = useGradient ? gradientColorSchemes[gradientScheme].labels : null;
+  const solidColors = solidColorSchemes[colorScheme];
+
+  const values = Array.from(
+    { length: maxValue - minValue + 1 },
+    (_, i) => i + minValue
+  );
+
+  const handleSelection = (value: number) => {
+    setSelectedValue(value);
+    submitValue?.(elementInstance.id, value.toString());
+  };
+
+  const getButtonColors = (value: number) => {
+    if (useGradient) {
+      const position = (value - minValue) / (maxValue - minValue);
+      if (position <= 0.33) {
+        return {
+          selected: `bg-${gradientColorSchemes[gradientScheme].colors[0]}-500 border-${gradientColorSchemes[gradientScheme].colors[0]}-600`,
+          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[0]}-400`
+        };
+      } else if (position <= 0.66) {
+        return {
+          selected: `bg-${gradientColorSchemes[gradientScheme].colors[1]}-500 border-${gradientColorSchemes[gradientScheme].colors[1]}-600`,
+          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[1]}-400`
+        };
+      } else {
+        return {
+          selected: `bg-${gradientColorSchemes[gradientScheme].colors[2]}-500 border-${gradientColorSchemes[gradientScheme].colors[2]}-600`,
+          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[2]}-400`
+        };
+      }
+    }
+    return {
+      selected: solidColors.selected,
+      hover: solidColors.hover
+    };
+  };
+
+  const getLabelColor = (position: 'start' | 'middle' | 'end'): string => {
+    if (!useGradient || !gradientLabels) return solidColors.text;
+    return gradientLabels[position].color;
+  };
+
+  return (
+    <div className="w-full max-w-2xl mx-auto p-4">
+      <div className="text-center mb-6">
+        <h3 className={`text-lg font-medium ${getLabelColor('middle')}`}>{question}</h3>
+      </div>
+      
+      <div className="flex justify-between items-center mb-4">
+        {values.map((value) => {
+          const colors = getButtonColors(value);
+          return (
+            <div 
+              key={value} 
+              className="flex flex-col items-center"
+              onMouseEnter={() => setHoveredValue(value)}
+              onMouseLeave={() => setHoveredValue(null)}
+            >
+              <button
+                className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
+                  transform transition-all duration-200 ease-in-out
+                  ${selectedValue === value 
+                    ? `${colors.selected} text-white scale-110` 
+                    : `bg-white ${colors.hover}`}
+                  ${hoveredValue === value ? 'scale-105' : ''}
+                  ${hoveredValue !== null && hoveredValue !== value ? 'opacity-50' : 'opacity-100'}
+                `}
+                onClick={() => handleSelection(value)}
+                aria-label={`Select ${value}`}
+              >
+                <span className="text-sm font-medium">{value}</span>
+              </button>
+            </div>
+          );
+        })}
+      </div>
+      
+      <div className="flex justify-between px-4 transition-opacity duration-300">
+        <span className={`text-sm ${getLabelColor('start')} transform transition-all duration-300
+          ${hoveredValue !== null && hoveredValue <= minValue + (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
+          {minLabel}
+        </span>
+        <span className={`text-sm ${getLabelColor('middle')} transform transition-all duration-300
+          ${hoveredValue !== null && hoveredValue > minValue + (maxValue - minValue) / 3 && hoveredValue < maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
+          {midLabel}
+        </span>
+        <span className={`text-sm ${getLabelColor('end')} transform transition-all duration-300
+          ${hoveredValue !== null && hoveredValue >= maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
+          {maxLabel}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      label: element.extraAttributes.label,
+      helperText: element.extraAttributes.helperText,
+      required: element.extraAttributes.required,
+      question: element.extraAttributes.question,
+      minLabel: element.extraAttributes.minLabel,
+      midLabel: element.extraAttributes.midLabel,
+      maxLabel: element.extraAttributes.maxLabel,
+      minValue: element.extraAttributes.minValue,
+      maxValue: element.extraAttributes.maxValue,
+      colorScheme: element.extraAttributes.colorScheme,
+      gradientScheme: element.extraAttributes.gradientScheme ?? 'none',
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    const { colorScheme, gradientScheme, ...rest } = values;
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...rest,
+        colorScheme: colorScheme as ColorSchemeType,
+        gradientScheme: gradientScheme === 'none' ? null : gradientScheme as GradientSchemeType,
+      },
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="question"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Question</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="minLabel"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Minimum Label</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="midLabel"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Middle Label</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="maxLabel"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Maximum Label</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="minValue"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Minimum Value</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  type="number"
+                  min={0}
+                  max={100}
+                  onChange={(e) => field.onChange(parseInt(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="maxValue"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Maximum Value</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  type="number"
+                  min={0}
+                  max={100}
+                  onChange={(e) => field.onChange(parseInt(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="colorScheme"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Color Scheme</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a color scheme" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {SOLID_COLOR_SCHEMES.map((scheme) => (
+                    <SelectItem key={scheme} value={scheme}>
+                      {scheme.charAt(0).toUpperCase() + scheme.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="gradientScheme"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Gradient Scheme (Optional)</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value ?? 'none'}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a gradient scheme" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="none">None</SelectItem>
+                  {GRADIENT_SCHEMES.map((scheme) => (
+                    <SelectItem key={scheme} value={scheme}>
+                      {scheme.charAt(0).toUpperCase() + scheme.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="required"
+          render={({ field }) => (
+            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+              <div className="space-y-0.5">
+                <FormLabel>Required</FormLabel>
+              </div>
+              <FormControl>
+                <input
+                  type="checkbox"
+                  checked={field.value}
+                  onChange={field.onChange}
+                  className="accent-primary"
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;

From c7215217891f0cba4515403e9a878d56b3288330 Mon Sep 17 00:00:00 2001
From: Labb Realheart <labb@realheart.se>
Date: Thu, 23 Jan 2025 16:35:07 +0100
Subject: [PATCH 06/40] clean build

---
 Examples/ImageUpload.tsx                 | 157 ----------------
 Examples/RatingScale.tsx                 | 189 -------------------
 package-lock.json                        |  49 +++++
 package.json                             |   1 +
 src/components/field/NewElementField.tsx | 230 -----------------------
 tailwind.config.ts                       |   2 +-
 6 files changed, 51 insertions(+), 577 deletions(-)
 delete mode 100644 Examples/ImageUpload.tsx
 delete mode 100644 Examples/RatingScale.tsx
 delete mode 100644 src/components/field/NewElementField.tsx

diff --git a/Examples/ImageUpload.tsx b/Examples/ImageUpload.tsx
deleted file mode 100644
index 3e37d09..0000000
--- a/Examples/ImageUpload.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useState, useRef } from 'react';
-
-const ImageUpload = ({
-  prompt = "Upload an image",
-  buttonText = "Choose File",
-  width = "w-96",
-  height = "h-64",
-  maxDimension = 800,
-  onImageSelect = (file) => console.log('Image selected:', file)
-}) => {
-  const [previewUrl, setPreviewUrl] = useState(null);
-  const [fileName, setFileName] = useState("No file chosen");
-  const fileInputRef = useRef(null);
-
-  const resizeImage = (originalFile) => {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.src = URL.createObjectURL(originalFile);
-      
-      img.onload = () => {
-        // Calculate new dimensions
-        let newWidth = img.width;
-        let newHeight = img.height;
-        
-        if (img.width > maxDimension || img.height > maxDimension) {
-          if (img.width > img.height) {
-            newWidth = maxDimension;
-            newHeight = (img.height / img.width) * maxDimension;
-          } else {
-            newHeight = maxDimension;
-            newWidth = (img.width / img.height) * maxDimension;
-          }
-        }
-
-        // Create canvas and resize
-        const canvas = document.createElement('canvas');
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-        
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(img, 0, 0, newWidth, newHeight);
-        
-        // Convert to file
-        canvas.toBlob((blob) => {
-          // Create new file with original name
-          const resizedFile = new File([blob], originalFile.name, {
-            type: originalFile.type,
-            lastModified: Date.now(),
-          });
-          
-          resolve(resizedFile);
-        }, originalFile.type);
-
-        // Clean up
-        URL.revokeObjectURL(img.src);
-      };
-    });
-  };
-
-  const handleFileSelect = async (event) => {
-    const file = event.target.files[0];
-    if (file && file.type.startsWith('image/')) {
-      setFileName(file.name);
-      
-      // Create preview
-      const reader = new FileReader();
-      reader.onload = () => {
-        setPreviewUrl(reader.result);
-      };
-      reader.readAsDataURL(file);
-      
-      // Process and resize image if needed
-      const img = new Image();
-      img.src = URL.createObjectURL(file);
-      
-      img.onload = async () => {
-        let finalFile = file;
-        
-        // Only resize if image exceeds max dimensions
-        if (img.width > maxDimension || img.height > maxDimension) {
-          finalFile = await resizeImage(file);
-          console.log(`Image resized from ${img.width}x${img.height} to ${finalFile.width}x${finalFile.height}`);
-        }
-        
-        URL.revokeObjectURL(img.src);
-        onImageSelect(finalFile);
-      };
-    }
-  };
-
-  const handleButtonClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  return (
-    <div className="flex flex-col items-center space-y-4">
-      {/* Image Preview Area */}
-      <div 
-        className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg 
-          flex items-center justify-center overflow-hidden bg-gray-50`}
-      >
-        {previewUrl ? (
-          <img 
-            src={previewUrl} 
-            alt="Preview" 
-            className="max-w-full max-h-full object-contain"
-          />
-        ) : (
-          <div className="text-gray-400">
-            <svg 
-              className="w-12 h-12 mx-auto mb-2"
-              fill="none" 
-              stroke="currentColor" 
-              viewBox="0 0 24 24"
-            >
-              <path 
-                strokeLinecap="round" 
-                strokeLinejoin="round" 
-                strokeWidth={2} 
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
-              />
-            </svg>
-          </div>
-        )}
-      </div>
-
-      {/* Prompt Text */}
-      <div className="text-sm text-gray-600 max-w-prose text-center px-4 whitespace-normal">
-        {prompt}
-      </div>
-
-      {/* DaisyUI-style File Input */}
-      <div className="flex w-full max-w-xs">
-        <input
-          type="file"
-          ref={fileInputRef}
-          onChange={handleFileSelect}
-          accept="image/*"
-          className="hidden"
-        />
-        <div 
-          className="flex w-full cursor-pointer"
-          onClick={handleButtonClick}
-        >
-          <div className="bg-blue-500 text-white px-4 py-2 rounded-l-lg hover:bg-blue-600 transition-colors duration-200">
-            {buttonText}
-          </div>
-          <div className="flex-1 px-4 py-2 bg-gray-100 text-gray-600 truncate rounded-r-lg border-y border-r border-gray-200">
-            {fileName}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ImageUpload;
\ No newline at end of file
diff --git a/Examples/RatingScale.tsx b/Examples/RatingScale.tsx
deleted file mode 100644
index 18035d1..0000000
--- a/Examples/RatingScale.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { useState } from 'react';
-
-const solidColorSchemes = {
-  blue: {
-    selected: 'bg-blue-500 border-blue-600',
-    hover: 'hover:border-blue-400',
-    text: 'text-blue-600'
-  },
-  green: {
-    selected: 'bg-green-500 border-green-600',
-    hover: 'hover:border-green-400',
-    text: 'text-green-600'
-  },
-  purple: {
-    selected: 'bg-purple-500 border-purple-600',
-    hover: 'hover:border-purple-400',
-    text: 'text-purple-600'
-  },
-  red: {
-    selected: 'bg-red-500 border-red-600',
-    hover: 'hover:border-red-400',
-    text: 'text-red-600'
-  },
-  amber: {
-    selected: 'bg-amber-500 border-amber-600',
-    hover: 'hover:border-amber-400',
-    text: 'text-amber-600'
-  }
-};
-
-const gradientColorSchemes = {
-  severity: {
-    colors: ['green', 'yellow', 'red'],
-    labels: {
-      start: { color: 'text-green-600', hover: 'hover:border-green-400' },
-      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
-      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
-    }
-  },
-  satisfaction: {
-    colors: ['red', 'yellow', 'green'],
-    labels: {
-      start: { color: 'text-red-600', hover: 'hover:border-red-400' },
-      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
-      end: { color: 'text-green-600', hover: 'hover:border-green-400' }
-    }
-  },
-  temperature: {
-    colors: ['blue', 'green', 'red'],
-    labels: {
-      start: { color: 'text-blue-600', hover: 'hover:border-blue-400' },
-      middle: { color: 'text-green-600', hover: 'hover:border-green-400' },
-      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
-    }
-  }
-};
-
-const getColorForValue = (value, minValue, maxValue, gradientScheme) => {
-  const position = (value - minValue) / (maxValue - minValue);
-  const colors = gradientColorSchemes[gradientScheme]?.colors;
-  
-  if (!colors) return null;
-
-  if (position <= 0.33) {
-    return {
-      selected: `bg-${colors[0]}-500 border-${colors[0]}-600`,
-      hover: `hover:border-${colors[0]}-400`
-    };
-  } else if (position <= 0.66) {
-    return {
-      selected: `bg-${colors[1]}-500 border-${colors[1]}-600`,
-      hover: `hover:border-${colors[1]}-400`
-    };
-  } else {
-    return {
-      selected: `bg-${colors[2]}-500 border-${colors[2]}-600`,
-      hover: `hover:border-${colors[2]}-400`
-    };
-  }
-};
-
-const OneToTen = ({ 
-  question = "Rate your pain level",
-  minLabel = "Mild",
-  midLabel = "Moderate",
-  maxLabel = "Severe",
-  minValue = 0,
-  maxValue = 10,
-  defaultValue = null,
-  colorScheme = 'blue',
-  gradientScheme = null,
-  onChange = (value) => console.log('Selected value:', value)
-}) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
-  const [hoveredValue, setHoveredValue] = useState(null);
-  
-  const useGradient = gradientScheme && gradientColorSchemes[gradientScheme];
-  const gradientLabels = useGradient ? gradientColorSchemes[gradientScheme].labels : null;
-  const solidColors = solidColorSchemes[colorScheme] || solidColorSchemes.blue;
-  
-  // Calculate the range of values
-  const values = Array.from(
-    { length: maxValue - minValue + 1 },
-    (_, i) => i + minValue
-  );
-  
-  const handleSelection = (value) => {
-    setSelectedValue(value);
-    onChange(value);
-  };
-
-  const getButtonColors = (value) => {
-    if (useGradient) {
-      return getColorForValue(value, minValue, maxValue, gradientScheme);
-    }
-    return {
-      selected: solidColors.selected,
-      hover: solidColors.hover
-    };
-  };
-
-  const getLabelColor = (position) => {
-    if (!useGradient) return solidColors.text;
-    
-    switch(position) {
-      case 'start': return gradientLabels.start.color;
-      case 'middle': return gradientLabels.middle.color;
-      case 'end': return gradientLabels.end.color;
-      default: return solidColors.text;
-    }
-  };
-
-  return (
-    <div className="w-full max-w-2xl mx-auto p-4">
-      {/* Question Label */}
-      <div className="text-center mb-6 transform transition-all duration-300 ease-in-out">
-        <h3 className={`text-lg font-medium ${getLabelColor('middle')}`}>{question}</h3>
-      </div>
-      
-      {/* Radio Button Group */}
-      <div className="flex justify-between items-center mb-4">
-        {values.map((value) => {
-          const colors = getButtonColors(value);
-          return (
-            <div 
-              key={value} 
-              className="flex flex-col items-center"
-              onMouseEnter={() => setHoveredValue(value)}
-              onMouseLeave={() => setHoveredValue(null)}
-            >
-              <button
-                className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
-                  transform transition-all duration-200 ease-in-out
-                  ${selectedValue === value 
-                    ? `${colors.selected} text-white scale-110` 
-                    : `bg-white ${colors.hover}`}
-                  ${hoveredValue === value ? 'scale-105' : ''}
-                  ${hoveredValue !== null && hoveredValue !== value ? 'opacity-50' : 'opacity-100'}
-                `}
-                onClick={() => handleSelection(value)}
-                aria-label={`Select ${value}`}
-              >
-                <span className="text-sm font-medium">{value}</span>
-              </button>
-            </div>
-          );
-        })}
-      </div>
-      
-      {/* Label Row */}
-      <div className="flex justify-between px-4 transition-opacity duration-300">
-        <span className={`text-sm ${getLabelColor('start')} transform transition-all duration-300
-          ${hoveredValue !== null && hoveredValue <= minValue + (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
-          {minLabel}
-        </span>
-        <span className={`text-sm ${getLabelColor('middle')} transform transition-all duration-300
-          ${hoveredValue !== null && hoveredValue > minValue + (maxValue - minValue) / 3 && hoveredValue < maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
-          {midLabel}
-        </span>
-        <span className={`text-sm ${getLabelColor('end')} transform transition-all duration-300
-          ${hoveredValue !== null && hoveredValue >= maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
-          {maxLabel}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export default OneToTen;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c01c4b3..dabe951 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,6 +69,7 @@
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "autoprefixer": "^10.0.1",
+        "daisyui": "^4.12.23",
         "eslint": "^8",
         "eslint-config-next": "14.1.3",
         "postcss": "^8",
@@ -3142,6 +3143,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3159,6 +3171,36 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "devOptional": true
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/daisyui": {
+      "version": "4.12.23",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz",
+      "integrity": "sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -3983,6 +4025,13 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
diff --git a/package.json b/package.json
index 3a90e06..030c75f 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "daisyui": "^4.12.23",
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
     "postcss": "^8",
diff --git a/src/components/field/NewElementField.tsx b/src/components/field/NewElementField.tsx
deleted file mode 100644
index 203a5c1..0000000
--- a/src/components/field/NewElementField.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-"use client";
-
-import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
-import { Label } from "../ui/label";
-import { Input } from "../ui/input";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
-import { BsTextareaResize } from "react-icons/bs";
-import useDesigner from "@/hooks/useDesigner";
-
-// Define the extra attributes your element needs
-type CustomInstance = FormElementInstance & {
-  extraAttributes: {
-    label: string;
-    helperText: string;
-    required: boolean;
-    placeholder: string;
-  };
-};
-
-// Define validation schema for properties form
-const propertiesSchema = z.object({
-  label: z.string().min(2).max(50),
-  helperText: z.string().max(200),
-  required: z.boolean().default(false),
-  placeholder: z.string().max(50),
-});
-
-export const NewElementFormElement: FormElement = {
-  type: "NewElementField",
-  construct: (id: string) => ({
-    id,
-    type: "NewElementField",
-    extraAttributes: {
-      label: "New Element",
-      helperText: "Helper text",
-      required: false,
-      placeholder: "Placeholder",
-    },
-  }),
-
-  designerBtnElement: {
-    icon: BsTextareaResize,
-    label: "New Element",
-  },
-
-  designerComponent: DesignerComponent,
-  formComponent: FormComponent,
-  propertiesComponent: PropertiesComponent,
-
-  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
-    const element = formElement as CustomInstance;
-    if (element.extraAttributes.required) {
-      return currentValue.length > 0;
-    }
-    return true;
-  },
-};
-
-function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
-  const element = elementInstance as CustomInstance;
-  const { label, helperText, required, placeholder } = element.extraAttributes;
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <Label>
-        {label}
-        {required && "*"}
-      </Label>
-      <Input readOnly disabled placeholder={placeholder} />
-      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
-    </div>
-  );
-}
-
-function FormComponent({
-  elementInstance,
-  submitValue,
-  isInvalid,
-  defaultValue,
-}: {
-  elementInstance: FormElementInstance;
-  submitValue?: (key: string, value: string) => void;
-  isInvalid?: boolean;
-  defaultValue?: string;
-}) {
-  const element = elementInstance as CustomInstance;
-  const { label, helperText, required, placeholder } = element.extraAttributes;
-
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <Label className={`${isInvalid ? "text-red-500" : ""}`}>
-        {label}
-        {required && "*"}
-      </Label>
-      <Input
-        className={`${isInvalid ? "border-red-500" : ""}`}
-        placeholder={placeholder}
-        onChange={(e) => submitValue?.(element.id, e.target.value)}
-        defaultValue={defaultValue}
-      />
-      {helperText && <p className={`text-[0.8rem] ${isInvalid ? "text-red-500" : "text-muted-foreground"}`}>{helperText}</p>}
-    </div>
-  );
-}
-
-type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
-
-function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
-  const element = elementInstance as CustomInstance;
-  const { updateElement } = useDesigner();
-  const form = useForm<propertiesFormSchemaType>({
-    resolver: zodResolver(propertiesSchema),
-    mode: "onBlur",
-    defaultValues: {
-      label: element.extraAttributes.label,
-      helperText: element.extraAttributes.helperText,
-      required: element.extraAttributes.required,
-      placeholder: element.extraAttributes.placeholder,
-    },
-  });
-
-  useEffect(() => {
-    form.reset(element.extraAttributes);
-  }, [element, form]);
-
-  function applyChanges(values: propertiesFormSchemaType) {
-    const { label, helperText, required, placeholder } = values;
-    updateElement(element.id, {
-      ...element,
-      extraAttributes: {
-        label,
-        helperText,
-        required,
-        placeholder,
-      },
-    });
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onBlur={form.handleSubmit(applyChanges)}
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-        className="space-y-3"
-      >
-        <FormField
-          control={form.control}
-          name="label"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Label</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="placeholder"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Placeholder</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="helperText"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Helper text</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="required"
-          render={({ field }) => (
-            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
-              <div className="space-y-0.5">
-                <FormLabel>Required</FormLabel>
-              </div>
-              <FormControl>
-                <input
-                  type="checkbox"
-                  checked={field.value}
-                  onChange={field.onChange}
-                  className="accent-primary"
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
-      </form>
-    </Form>
-  );
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e8..6678914 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -74,7 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"),require('daisyui')],
 } satisfies Config
 
 export default config
\ No newline at end of file

From f417d151a2358c62ac30711832a1e1ac27bc8a2c Mon Sep 17 00:00:00 2001
From: Labb Realheart <labb@realheart.se>
Date: Thu, 23 Jan 2025 16:58:59 +0100
Subject: [PATCH 07/40] theming

---
 .../migration.sql                             |  2 +
 prisma/schema.prisma                          |  1 +
 src/action/form.ts                            |  7 +++-
 src/app/submit/[formUrl]/page.tsx             |  6 ++-
 src/components/DesignerSidebar.tsx            |  8 ++--
 src/components/FormBuilder.tsx                |  5 ++-
 src/components/FormSettings.tsx               | 40 +++++++++++++++++++
 src/components/FormSubmitComponent.tsx        | 26 +++++++++---
 src/components/PreviewDialogBtn.tsx           | 10 +++--
 src/components/PropertiesFormSidebar.tsx      | 22 ++++++++--
 src/components/SaveFormBtn.tsx                |  6 +--
 src/components/field/TextField.tsx            | 18 +++++++--
 src/context/DesignerContext.tsx               | 11 +++--
 src/schemas/form.ts                           | 40 +++++++++++++++++++
 14 files changed, 172 insertions(+), 30 deletions(-)
 create mode 100644 prisma/migrations/20250123154420_add_theme_field/migration.sql
 create mode 100644 src/components/FormSettings.tsx

diff --git a/prisma/migrations/20250123154420_add_theme_field/migration.sql b/prisma/migrations/20250123154420_add_theme_field/migration.sql
new file mode 100644
index 0000000..363df71
--- /dev/null
+++ b/prisma/migrations/20250123154420_add_theme_field/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Form" ADD COLUMN     "theme" TEXT NOT NULL DEFAULT 'default';
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index c3d5aaa..7c445da 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -22,6 +22,7 @@ model Form {
   name        String
   description String   @default("")
   content     String   @default("[]")
+  theme       String   @default("default") // Theme identifier for the form
 
   visits      Int @default(0)
   submissions Int @default(0)
diff --git a/src/action/form.ts b/src/action/form.ts
index 6cdbe0a..61f4825 100644
--- a/src/action/form.ts
+++ b/src/action/form.ts
@@ -52,13 +52,14 @@ export async function CreateForm(data: formSchemaType) {
     throw new UserNotFoundErr();
   }
 
-  const { name, description } = data;
+  const { name, description, theme } = data;
 
   const form = await prisma.form.create({
     data: {
       userId: user.id,
       name,
       description,
+      theme: theme || "default",
     },
   });
 
@@ -143,7 +144,7 @@ export async function GetFormById(id: number) {
   });
 }
 
-export async function UpdateFormContent(id: number, jsonContent: string) {
+export async function UpdateFormContent(id: number, jsonContent: string, theme?: string) {
   const user = await currentUser();
   if (!user) {
     throw new UserNotFoundErr();
@@ -156,6 +157,7 @@ export async function UpdateFormContent(id: number, jsonContent: string) {
     },
     data: {
       content: jsonContent,
+      ...(theme && { theme }),
     },
   });
 }
@@ -181,6 +183,7 @@ export async function GetFormContentByUrl(formUrl: string) {
   return await prisma.form.update({
     select: {
       content: true,
+      theme: true,
     },
     data: {
       visits: {
diff --git a/src/app/submit/[formUrl]/page.tsx b/src/app/submit/[formUrl]/page.tsx
index 1ff3ba0..f45c7cc 100644
--- a/src/app/submit/[formUrl]/page.tsx
+++ b/src/app/submit/[formUrl]/page.tsx
@@ -1,6 +1,7 @@
 import { GetFormContentByUrl } from "@/action/form";
 import { FormElementInstance } from "@/components/FormElements";
 import FormSubmitComponent from "@/components/FormSubmitComponent";
+import { FormTheme } from "@/schemas/form";
 import React from "react";
 
 async function SubmitPage({
@@ -17,8 +18,9 @@ async function SubmitPage({
     }
 
     const formContent = JSON.parse(form.content) as FormElementInstance[];
+    const theme = (form.theme || "default") as FormTheme;
 
-    return <FormSubmitComponent formUrl={params.formUrl} content={formContent} />;
+    return <FormSubmitComponent formUrl={params.formUrl} content={formContent} theme={theme} />;
 }
 
-export default SubmitPage;
\ No newline at end of file
+export default SubmitPage;
diff --git a/src/components/DesignerSidebar.tsx b/src/components/DesignerSidebar.tsx
index cc2e483..cc0f9fb 100644
--- a/src/components/DesignerSidebar.tsx
+++ b/src/components/DesignerSidebar.tsx
@@ -7,10 +7,12 @@ function DesignerSidebar() {
   const { selectedElement } = useDesigner();
   return (
     <aside className="w-[400px] max-w-[400px] designer-sidebar flex flex-col flex-grow gap-2 border-l-2 border-muted p-2 lg:p-4 bg-background overflow-y-auto h-full">
-      {!selectedElement && <FormElementsSidebar />}
-      {selectedElement && <PropertiesFormSidebar />}
+      <div className="flex flex-col flex-grow">
+        <PropertiesFormSidebar />
+        {!selectedElement && <FormElementsSidebar />}
+      </div>
     </aside>
   );
 }
 
-export default DesignerSidebar;
\ No newline at end of file
+export default DesignerSidebar;
diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index b87d65f..f876aa2 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -19,7 +19,7 @@ import useDesigner from "@/hooks/useDesigner";
 import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
 
 function FormBuilder({ form }: { form: Form }) {
-  const { setElements, setSelectedElement } = useDesigner();
+  const { setElements, setSelectedElement, setTheme } = useDesigner();
   const [isReady, setIsReady] = useState(false);
 
   const [isSmallScreen, setIsSmallScreen] = useState(false);
@@ -62,6 +62,7 @@ function FormBuilder({ form }: { form: Form }) {
     const elements = JSON.parse(form.content);
     setElements(elements);
     setSelectedElement(null);
+    setTheme(form.theme || "default");
     const readyTimeout = setTimeout(() => setIsReady(true), 500);
     return () => clearTimeout(readyTimeout);
   }, [form, setElements, isReady, setSelectedElement]);
@@ -173,4 +174,4 @@ function FormBuilder({ form }: { form: Form }) {
   );
 }
 
-export default FormBuilder;
\ No newline at end of file
+export default FormBuilder;
diff --git a/src/components/FormSettings.tsx b/src/components/FormSettings.tsx
new file mode 100644
index 0000000..246a9a2
--- /dev/null
+++ b/src/components/FormSettings.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { formThemes } from "@/schemas/form";
+import { Label } from "./ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+
+interface FormSettingsProps {
+  theme: keyof typeof formThemes;
+  onThemeChange: (theme: keyof typeof formThemes) => void;
+}
+
+function FormSettings({ theme, onThemeChange }: FormSettingsProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Label>Form Theme</Label>
+        <Select
+          value={theme}
+          onValueChange={(value) => onThemeChange(value as keyof typeof formThemes)}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a theme" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(formThemes).map(([key, theme]) => (
+              <SelectItem key={key} value={key}>
+                {theme.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-muted-foreground text-sm">
+          Choose a theme for your form. This will affect how your form looks when shared.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default FormSettings;
diff --git a/src/components/FormSubmitComponent.tsx b/src/components/FormSubmitComponent.tsx
index 2962482..03edba8 100644
--- a/src/components/FormSubmitComponent.tsx
+++ b/src/components/FormSubmitComponent.tsx
@@ -2,13 +2,23 @@
 
 import React, { useCallback, useRef, useState, useTransition } from "react";
 import { FormElementInstance, FormElements } from "./FormElements";
+import { formThemes } from "@/schemas/form";
+import { cn } from "@/lib/utils";
 import { Button } from "./ui/button";
 import { HiCursorClick } from "react-icons/hi";
 import { toast } from "./ui/use-toast";
 import { ImSpinner2 } from "react-icons/im";
 import { SubmitForm } from "@/action/form";
 
-function FormSubmitComponent({ formUrl, content }: { content: FormElementInstance[]; formUrl: string }) {
+function FormSubmitComponent({ 
+  formUrl, 
+  content, 
+  theme = "default" 
+}: { 
+  content: FormElementInstance[]; 
+  formUrl: string;
+  theme?: keyof typeof formThemes;
+}) {
   const formValues = useRef<{ [key: string]: string }>({});
   const formErrors = useRef<{ [key: string]: boolean }>({});
   const [renderKey, setRenderKey] = useState(new Date().getTime());
@@ -78,7 +88,10 @@ function FormSubmitComponent({ formUrl, content }: { content: FormElementInstanc
     <div className="flex justify-center w-full h-full items-center p-2 lg:p-8">
       <div
         key={renderKey}
-        className="max-w-[620px] flex flex-col gap-4 flex-grow bg-background w-full p-8 overflow-y-auto border shadow-md dark:shadow-white/20 rounded-md"
+        className={`max-w-[620px] flex flex-col gap-4 flex-grow w-full p-8 overflow-y-auto border shadow-md dark:shadow-white/20 rounded-md
+          ${formThemes[theme].styles.background}
+          ${formThemes[theme].styles.text}
+          ${formThemes[theme].styles.border}`}
       >
         {content.map((element) => {
           const FormElement = FormElements[element.type].formComponent;
@@ -92,8 +105,11 @@ function FormSubmitComponent({ formUrl, content }: { content: FormElementInstanc
             />
           );
         })}
-        <Button
-          className="mt-8"
+          <Button
+            className={cn(
+              "mt-8",
+              formThemes[theme].styles.primary
+            )}
           onClick={() => {
             startTransition(submitForm);
           }}
@@ -112,4 +128,4 @@ function FormSubmitComponent({ formUrl, content }: { content: FormElementInstanc
   );
 }
 
-export default FormSubmitComponent;
\ No newline at end of file
+export default FormSubmitComponent;
diff --git a/src/components/PreviewDialogBtn.tsx b/src/components/PreviewDialogBtn.tsx
index 7ad571c..f8bb67e 100644
--- a/src/components/PreviewDialogBtn.tsx
+++ b/src/components/PreviewDialogBtn.tsx
@@ -2,11 +2,12 @@ import React from "react";
 import { Button } from "./ui/button";
 import { MdPreview } from "react-icons/md";
 import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
-import { FormElements, ElementsType } from "./FormElements"; // Ensure ElementsType is imported
+import { FormElements, ElementsType } from "./FormElements";
 import useDesigner from "@/hooks/useDesigner";
+import { formThemes } from "@/schemas/form";
 
 function PreviewDialogBtn() {
-  const { elements } = useDesigner();
+  const { elements, theme } = useDesigner();
 
   return (
     <Dialog>
@@ -22,7 +23,10 @@ function PreviewDialogBtn() {
           <p className="text-sm text-muted-foreground">This is how your form will look like to your users.</p>
         </div>
         <div className="bg-accent flex flex-col flex-grow items-center justify-center p-4 bg-[url(/paper.svg)] dark:bg-[url(/paper-dark.svg)] overflow-y-auto">
-          <div className="max-w-[620px] flex flex-col gap-4 flex-grow bg-background h-full w-full rounded-2xl p-8 overflow-y-auto">
+          <div className={`max-w-[620px] flex flex-col gap-4 flex-grow h-full w-full rounded-2xl p-8 overflow-y-auto
+            ${formThemes[theme].styles.background}
+            ${formThemes[theme].styles.text}
+            ${formThemes[theme].styles.border}`}>
             {elements.map((element) => {
               const elementType = element.type as ElementsType; // Assert type as ElementsType
               const FormComponent = FormElements[elementType].formComponent;
diff --git a/src/components/PropertiesFormSidebar.tsx b/src/components/PropertiesFormSidebar.tsx
index 64fc146..78dd001 100644
--- a/src/components/PropertiesFormSidebar.tsx
+++ b/src/components/PropertiesFormSidebar.tsx
@@ -1,13 +1,29 @@
 import React from "react";
-import { FormElements, ElementsType } from "./FormElements"; // Ensure ElementsType is imported
+import { FormElements, ElementsType } from "./FormElements";
 import { AiOutlineClose } from "react-icons/ai";
 import { Button } from "./ui/button";
 import { Separator } from "./ui/separator";
 import useDesigner from "@/hooks/useDesigner";
+import FormSettings from "./FormSettings";
+import { MdSettings } from "react-icons/md";
 
 function PropertiesFormSidebar() {
-  const { selectedElement, setSelectedElement } = useDesigner();
-  if (!selectedElement) return null;
+  const { selectedElement, setSelectedElement, theme, setTheme } = useDesigner();
+  
+  if (!selectedElement) {
+    return (
+      <div className="flex flex-col p-2">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-2">
+            <MdSettings className="h-5 w-5" />
+            <p className="text-sm text-foreground/70">Form settings</p>
+          </div>
+        </div>
+        <Separator className="mb-4" />
+        <FormSettings theme={theme} onThemeChange={setTheme} />
+      </div>
+    );
+  }
 
   const elementType = selectedElement?.type as ElementsType; // Assert type as ElementsType
   const PropertiesForm = FormElements[elementType].propertiesComponent;
diff --git a/src/components/SaveFormBtn.tsx b/src/components/SaveFormBtn.tsx
index 9852095..23d8951 100644
--- a/src/components/SaveFormBtn.tsx
+++ b/src/components/SaveFormBtn.tsx
@@ -7,13 +7,13 @@ import { FaSpinner } from "react-icons/fa";
 import { UpdateFormContent } from "@/action/form";
 
 function SaveFormBtn({ id }: { id: number }) {
-  const { elements } = useDesigner();
+  const { elements, theme } = useDesigner();
   const [loading, startTransition] = useTransition();
 
   const updateFormContent = async () => {
     try {
       const jsonElements = JSON.stringify(elements);
-      await UpdateFormContent(id, jsonElements);
+      await UpdateFormContent(id, jsonElements, theme);
       toast({
         title: "Success",
         description: "Your form has been saved",
@@ -42,4 +42,4 @@ function SaveFormBtn({ id }: { id: number }) {
   );
 }
 
-export default SaveFormBtn;
\ No newline at end of file
+export default SaveFormBtn;
diff --git a/src/components/field/TextField.tsx b/src/components/field/TextField.tsx
index da64747..44f0816 100644
--- a/src/components/field/TextField.tsx
+++ b/src/components/field/TextField.tsx
@@ -13,6 +13,7 @@ import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, For
 import { Switch } from "../ui/switch";
 import { cn } from "@/lib/utils";
 import useDesigner from "@/hooks/useDesigner";
+import { formThemes } from "@/schemas/form";
 
 const type: ElementsType = "TextField";
 
@@ -61,6 +62,7 @@ type CustomInstance = FormElementInstance & {
 
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
+  const { theme } = useDesigner();
   const { label, required, placeHolder, helperText } = element.extraAttributes;
   return (
     <div className="flex flex-col gap-2 w-full">
@@ -68,7 +70,12 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
         {label}
         {required && "*"}
       </Label>
-      <Input readOnly disabled placeholder={placeHolder} />
+      <Input 
+        readOnly 
+        disabled 
+        placeholder={placeHolder}
+        className={formThemes[theme].styles.input}
+      />
       {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
     </div>
   );
@@ -86,7 +93,7 @@ function FormComponent({
   defaultValue?: string;
 }) {
   const element = elementInstance as CustomInstance;
-
+  const { theme } = useDesigner();
   const [value, setValue] = useState(defaultValue || "");
   const [error, setError] = useState(false);
 
@@ -102,7 +109,10 @@ function FormComponent({
         {required && "*"}
       </Label>
       <Input
-        className={cn(error && "border-red-500")}
+        className={cn(
+          error && "border-red-500",
+          formThemes[theme].styles.input
+        )}
         placeholder={placeHolder}
         onChange={(e) => setValue(e.target.value)}
         onBlur={(e) => {
@@ -243,4 +253,4 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
       </form>
     </Form>
   );
-}
\ No newline at end of file
+}
diff --git a/src/context/DesignerContext.tsx b/src/context/DesignerContext.tsx
index feae0ba..51c1842 100644
--- a/src/context/DesignerContext.tsx
+++ b/src/context/DesignerContext.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormElementInstance } from "@/components/FormElements";
+import { formThemes } from "@/schemas/form";
 import { Dispatch, ReactNode, SetStateAction, createContext, useState } from "react";
 
 type DesignerContextType = {
@@ -13,6 +14,9 @@ type DesignerContextType = {
     setSelectedElement: Dispatch<SetStateAction<FormElementInstance | null>>;
 
     updateElement: (id: string, element: FormElementInstance) => void;
+
+    theme: keyof typeof formThemes;
+    setTheme: Dispatch<SetStateAction<keyof typeof formThemes>>;
 };
 
 export const DesignerContext = createContext<DesignerContextType | null>(null);
@@ -20,6 +24,7 @@ export const DesignerContext = createContext<DesignerContextType | null>(null);
 export default function DesignerContextProvider({ children }: { children: ReactNode }) {
     const [elements, setElements] = useState<FormElementInstance[]>([]);
     const [selectedElement, setSelectedElement] = useState<FormElementInstance | null>(null);
+    const [theme, setTheme] = useState<keyof typeof formThemes>("default");
 
     const addElement = (index: number, element: FormElementInstance) => {
         setElements((prev) => {
@@ -49,14 +54,14 @@ export default function DesignerContextProvider({ children }: { children: ReactN
                 setElements,
                 addElement,
                 removeElement,
-
                 selectedElement,
                 setSelectedElement,
-
                 updateElement,
+                theme,
+                setTheme,
             }}
         >
             {children}
         </DesignerContext.Provider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/schemas/form.ts b/src/schemas/form.ts
index 82b8d85..cd416f1 100644
--- a/src/schemas/form.ts
+++ b/src/schemas/form.ts
@@ -3,6 +3,46 @@ import { z } from "zod";
 export const formSchema = z.object({
   name: z.string().min(4),
   description: z.string().optional(),
+  theme: z.string().default("default"),
 });
 
+// Available themes for forms
+export const formThemes = {
+  default: {
+    name: "Default",
+    styles: {
+      background: "bg-background",
+      text: "text-foreground",
+      border: "border-border",
+      input: "bg-background border-input",
+      primary: "bg-primary text-primary-foreground",
+      muted: "bg-muted text-muted-foreground"
+    }
+  },
+  modern: {
+    name: "Modern",
+    styles: {
+      background: "bg-zinc-50 dark:bg-zinc-900",
+      text: "text-zinc-900 dark:text-zinc-50",
+      border: "border-zinc-200 dark:border-zinc-700",
+      input: "bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-600",
+      primary: "bg-indigo-600 text-white dark:bg-indigo-500",
+      muted: "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+    }
+  },
+  elegant: {
+    name: "Elegant",
+    styles: {
+      background: "bg-stone-50 dark:bg-stone-900",
+      text: "text-stone-900 dark:text-stone-50",
+      border: "border-stone-200 dark:border-stone-700",
+      input: "bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-600",
+      primary: "bg-amber-600 text-white dark:bg-amber-500",
+      muted: "bg-stone-100 text-stone-500 dark:bg-stone-800 dark:text-stone-400"
+    }
+  }
+} as const;
+
+export type FormTheme = keyof typeof formThemes;
+
 export type formSchemaType = z.infer<typeof formSchema>;

From e92dc0b54d6c6e2de5f6b8ac86bd8915e681e34f Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 13:04:41 +0100
Subject: [PATCH 08/40] Centered image upload

---
 src/components/field/ImageUploadField.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/field/ImageUploadField.tsx b/src/components/field/ImageUploadField.tsx
index 0c07d3b..40710f2 100644
--- a/src/components/field/ImageUploadField.tsx
+++ b/src/components/field/ImageUploadField.tsx
@@ -75,11 +75,11 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
   const { label, helperText, required, prompt, buttonText, width, height } = element.extraAttributes;
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label>
+      <Label className="text-center w-full pb-2">
         {label}
         {required && "*"}
       </Label>
-      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50`}>
+      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto`}>
         <div className="text-gray-400">
           <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path 
@@ -186,11 +186,11 @@ function FormComponent({
 
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className={`${isInvalid ? "text-red-500" : ""}`}>
+      <Label className={`${isInvalid ? "text-red-500" : ""} text-center w-full pb-2`}>
         {element.extraAttributes.label}
         {element.extraAttributes.required && "*"}
       </Label>
-      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50`}>
+      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto`}>
         {previewUrl ? (
           <img 
             src={previewUrl} 

From f6af8a366cbc057ee61364241d58ab9e2a1afdb2 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 13:38:37 +0100
Subject: [PATCH 09/40] Dual image upload

---
 src/components/FormElements.tsx        | 9 ++++++---
 src/components/FormElementsSidebar.tsx | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index ca86e76..93dd633 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -9,6 +9,9 @@ import { SubTitleFieldFormElement } from "./field/SubTitleField";
 import { TextAreaFormElement } from "./field/TextAreaField";
 import { TextFieldFormElement } from "./field/TextField";
 import { TitleFieldFormElement } from "./field/TitleField";
+import { DualImageUploadFormElement } from "./field/DualImageUpload";
+import { ImageUploadFormElement } from "./field/ImageUploadField";
+import { RatingScaleFormElement } from "./field/RatingScaleField";
 
 export type ElementsType =
   | "TextField"
@@ -23,7 +26,8 @@ export type ElementsType =
   | "SelectField"
   | "CheckboxField"
   | "ImageUploadField"
-  | "RatingScaleField";
+  | "RatingScaleField"
+  | "DualImageUpload";
 
 export type SubmitFunction = (key: string, value: string) => void;
 
@@ -62,8 +66,6 @@ export type FormElementInstance = {
 type FormElementsType = {
   [key in ElementsType]: FormElement;
 };
-import { ImageUploadFormElement } from "./field/ImageUploadField";
-import { RatingScaleFormElement } from "./field/RatingScaleField";
 
 export const FormElements: FormElementsType = {
   TextField: TextFieldFormElement,
@@ -79,4 +81,5 @@ export const FormElements: FormElementsType = {
   CheckboxField: CheckboxFieldFormElement,
   ImageUploadField: ImageUploadFormElement,
   RatingScaleField: RatingScaleFormElement,
+  DualImageUpload: DualImageUploadFormElement,
 };
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index e210a20..54f390a 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -25,6 +25,7 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.CheckboxField} />
         <SidebarBtnElement formElement={FormElements.ImageUploadField} />
         <SidebarBtnElement formElement={FormElements.RatingScaleField} />
+        <SidebarBtnElement formElement={FormElements.DualImageUpload} />
       </div>
     </div>
   );

From 820fce6632a34a3361c14f7a61b9c452550c166c Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 13:47:51 +0100
Subject: [PATCH 10/40] Image select

---
 src/components/FormElements.tsx        | 5 ++++-
 src/components/FormElementsSidebar.tsx | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index 93dd633..4cb3036 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -2,6 +2,7 @@ import { CheckboxFieldFormElement } from "./field/CheckBoxField";
 import { DateFieldFormElement } from "./field/DateField";
 import { NumberFieldFormElement } from "./field/NumberField";
 import { ParagprahFieldFormElement } from "./field/ParagraphField";
+import { PictureSelectFormElement } from "./field/PictureSelectField";
 import { SelectFieldFormElement } from "./field/SelectField";
 import { SeparatorFieldFormElement } from "./field/SeparatorField";
 import { SpacerFieldFormElement } from "./field/SpacerField";
@@ -27,7 +28,8 @@ export type ElementsType =
   | "CheckboxField"
   | "ImageUploadField"
   | "RatingScaleField"
-  | "DualImageUpload";
+  | "DualImageUpload"
+  | "PictureSelectField";
 
 export type SubmitFunction = (key: string, value: string) => void;
 
@@ -82,4 +84,5 @@ export const FormElements: FormElementsType = {
   ImageUploadField: ImageUploadFormElement,
   RatingScaleField: RatingScaleFormElement,
   DualImageUpload: DualImageUploadFormElement,
+  PictureSelectField: PictureSelectFormElement,
 };
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index 54f390a..92f1eb2 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -26,6 +26,7 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.ImageUploadField} />
         <SidebarBtnElement formElement={FormElements.RatingScaleField} />
         <SidebarBtnElement formElement={FormElements.DualImageUpload} />
+        <SidebarBtnElement formElement={FormElements.PictureSelectField} />
       </div>
     </div>
   );

From 98640b797e3530247a3d2d89c1ed4a18abebd053 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 14:00:15 +0100
Subject: [PATCH 11/40] Image select fixed width issue

---
 .vscode/settings.json                       |   3 +
 Example/image-selector.tsx                  | 141 ++++++
 src/components/field/DualImageUpload.tsx    | 459 ++++++++++++++++++++
 src/components/field/PictureSelectField.tsx | 382 ++++++++++++++++
 4 files changed, 985 insertions(+)
 create mode 100644 .vscode/settings.json
 create mode 100644 Example/image-selector.tsx
 create mode 100644 src/components/field/DualImageUpload.tsx
 create mode 100644 src/components/field/PictureSelectField.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..5dabb89
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "sarif-viewer.connectToGithubCodeScanning": "off"
+}
\ No newline at end of file
diff --git a/Example/image-selector.tsx b/Example/image-selector.tsx
new file mode 100644
index 0000000..12f54e7
--- /dev/null
+++ b/Example/image-selector.tsx
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { Upload, X } from 'lucide-react';
+
+const ImageSelector = ({ 
+  isDesigner = true,
+  defaultImages = []
+}) => {
+  const [images, setImages] = useState(defaultImages);
+  const [selectedImage, setSelectedImage] = useState('');
+
+  const handleImageUpload = (e, index) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const newImages = [...images];
+        newImages[index] = {
+          ...newImages[index],
+          src: reader.result
+        };
+        setImages(newImages);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleLabelChange = (index, newLabel) => {
+    const newImages = [...images];
+    newImages[index] = {
+      ...newImages[index],
+      label: newLabel
+    };
+    setImages(newImages);
+  };
+
+  const addImage = () => {
+    setImages([...images, { 
+      src: '/api/placeholder/200/200',
+      label: `Option ${images.length + 1}`
+    }]);
+  };
+
+  const removeImage = (index) => {
+    const newImages = images.filter((_, i) => i !== index);
+    setImages(newImages);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isDesigner) {
+      console.log('Form configuration:', images);
+    } else {
+      console.log('Selected label:', selectedImage);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="max-w-2xl mx-auto p-4">
+      <div className="grid grid-cols-2 gap-4 mb-6">
+        {images.map((image, index) => (
+          <div key={index} className="flex flex-col items-center">
+            {isDesigner ? (
+              <div className="w-full space-y-2">
+                <div className="relative">
+                  <label className="cursor-pointer p-2 rounded-lg border-2 hover:bg-gray-50 block">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      onChange={(e) => handleImageUpload(e, index)}
+                      className="sr-only"
+                    />
+                    <img
+                      src={image.src}
+                      alt={image.label}
+                      className="w-full h-48 object-contain rounded-lg"
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity rounded-lg">
+                      <Upload className="w-8 h-8 text-white" />
+                    </div>
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() => removeImage(index)}
+                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+                <input
+                  type="text"
+                  value={image.label}
+                  onChange={(e) => handleLabelChange(index, e.target.value)}
+                  className="w-full p-2 border rounded"
+                  placeholder="Enter label"
+                />
+              </div>
+            ) : (
+              <label className="cursor-pointer p-2 rounded-lg border-2 hover:bg-gray-50">
+                <input
+                  type="radio"
+                  name="imageChoice"
+                  value={image.label}
+                  onChange={(e) => setSelectedImage(e.target.value)}
+                  className="sr-only"
+                />
+                <img
+                  src={image.src}
+                  alt={image.label}
+                  className={`w-full h-48 object-cover rounded-lg ${
+                    selectedImage === image.label ? 'ring-4 ring-blue-500' : ''
+                  }`}
+                />
+                <p className="mt-2 text-center font-medium">{image.label}</p>
+              </label>
+            )}
+          </div>
+        ))}
+      </div>
+      
+      {isDesigner && (
+        <button
+          type="button"
+          onClick={addImage}
+          className="w-full mb-4 border-2 border-dashed border-gray-300 p-4 rounded-lg hover:bg-gray-50"
+        >
+          Add Image Option
+        </button>
+      )}
+
+      <button
+        type="submit"
+        className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+        disabled={!isDesigner && !selectedImage}
+      >
+        {isDesigner ? 'Save Configuration' : 'Submit Selection'}
+      </button>
+    </form>
+  );
+};
+
+export default ImageSelector;
\ No newline at end of file
diff --git a/src/components/field/DualImageUpload.tsx b/src/components/field/DualImageUpload.tsx
new file mode 100644
index 0000000..3e86ea0
--- /dev/null
+++ b/src/components/field/DualImageUpload.tsx
@@ -0,0 +1,459 @@
+"use client";
+
+import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState, useRef } from "react";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { BsCardImage } from "react-icons/bs";
+import useDesigner from "@/hooks/useDesigner";
+
+type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    label: string;
+    helperText: string;
+    required: boolean;
+    prompt: string;
+    buttonText: string;
+    width: string;
+    height: string;
+    maxDimension: number;
+  };
+};
+
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  helperText: z.string().max(200),
+  required: z.boolean().default(false),
+  prompt: z.string().min(2).max(100),
+  buttonText: z.string().min(2).max(50),
+  width: z.string(),
+  height: z.string(),
+  maxDimension: z.number().min(100).max(2000),
+});
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+
+export const DualImageUploadFormElement: FormElement = {
+  type: "DualImageUpload",
+  construct: (id: string) => ({
+    id,
+    type: "DualImageUpload",
+    extraAttributes: {
+      label: "Dual Image Upload",
+      helperText: "Upload two image files",
+      required: false,
+      prompt: "Upload two images",
+      buttonText: "Choose Files",
+      width: "w-64",
+      height: "h-48",
+      maxDimension: 800,
+    },
+  }),
+
+  designerBtnElement: {
+    icon: BsCardImage,
+    label: "Dual Image Upload",
+  },
+
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: (formElement: FormElementInstance, currentValue: string[]): boolean => {
+    const element = formElement as CustomInstance;
+    if (element.extraAttributes.required) {
+      return currentValue.length === 2 && currentValue.every(value => value.length > 0);
+    }
+    return true;
+  },
+};
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { label, helperText, required, prompt, buttonText, width, height } = element.extraAttributes;
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-center w-full pb-2">
+        {label}
+        {required && "*"}
+      </Label>
+      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto`}>
+        <div className="text-gray-400">
+          <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path 
+              strokeLinecap="round" 
+              strokeLinejoin="round" 
+              strokeWidth={2} 
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
+            />
+          </svg>
+        </div>
+      </div>
+      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+    </div>
+  );
+}
+
+function FormComponent({
+  elementInstance,
+  submitValue,
+  isInvalid,
+  defaultValue,
+}: {
+  elementInstance: FormElementInstance;
+  submitValue?: (key: string, value: string[]) => void;
+  isInvalid?: boolean;
+  defaultValue?: string[];
+}) {
+  const element = elementInstance as CustomInstance;
+  const [previewUrls, setPreviewUrls] = useState<(string | null)[]>([null, null]);
+  const [fileNames, setFileNames] = useState(["No file chosen", "No file chosen"]);
+  const fileInputRefs = [useRef<HTMLInputElement>(null), useRef<HTMLInputElement>(null)];
+  const { prompt, buttonText, width, height, maxDimension } = element.extraAttributes;
+
+  const resizeImage = (originalFile: File): Promise<File> => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.src = URL.createObjectURL(originalFile);
+      
+      img.onload = () => {
+        let newWidth = img.width;
+        let newHeight = img.height;
+        
+        if (img.width > maxDimension || img.height > maxDimension) {
+          if (img.width > img.height) {
+            newWidth = maxDimension;
+            newHeight = (img.height / img.width) * maxDimension;
+          } else {
+            newHeight = maxDimension;
+            newWidth = (img.width / img.height) * maxDimension;
+          }
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+        
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(img, 0, 0, newWidth, newHeight);
+          
+          canvas.toBlob((blob) => {
+            if (blob) {
+              const resizedFile = new File([blob], originalFile.name, {
+                type: originalFile.type,
+                lastModified: Date.now(),
+              });
+              
+              resolve(resizedFile);
+            }
+          }, originalFile.type);
+        }
+
+        URL.revokeObjectURL(img.src);
+      };
+    });
+  };
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const file = event.target.files?.[0];
+    if (file && file.type.startsWith('image/')) {
+      const newFileNames = [...fileNames];
+      newFileNames[index] = file.name;
+      setFileNames(newFileNames);
+
+      const reader = new FileReader();
+      reader.onload = () => {
+        const newPreviewUrls = [...previewUrls];
+        newPreviewUrls[index] = reader.result as string;
+        setPreviewUrls(newPreviewUrls);
+      };
+      reader.readAsDataURL(file);
+
+      const img = new Image();
+      img.src = URL.createObjectURL(file);
+
+      img.onload = async () => {
+        let finalFile = file;
+
+        if (img.width > maxDimension || img.height > maxDimension) {
+          finalFile = await resizeImage(file);
+        }
+
+        URL.revokeObjectURL(img.src);
+        const newFileNames = [...fileNames];
+        newFileNames[index] = finalFile.name;
+        setFileNames(newFileNames);
+        submitValue?.(elementInstance.id, newFileNames);
+      };
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className={`${isInvalid ? "text-red-500" : ""} text-center w-full pb-2`}>
+        {element.extraAttributes.label}
+        {element.extraAttributes.required && "*"}
+      </Label>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-3xl mx-auto w-full">
+        {[0, 1].map((i) => (
+          <div key={i} className={`${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto w-64`}>
+            {previewUrls[i] ? (
+              <img 
+                src={previewUrls[i] || undefined} 
+                alt="Preview" 
+                className="max-w-full max-h-full object-contain"
+              />
+            ) : (
+              <div className="text-gray-400">
+                <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    strokeWidth={2} 
+                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      <div className="text-sm text-gray-600 max-w-prose text-center px-4 whitespace-normal">
+        {prompt}
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-3xl mx-auto w-full">
+        {[0, 1].map((i) => (
+          <div key={i} className="flex w-64 mx-auto">
+            <input
+              type="file"
+              ref={fileInputRefs[i]}
+              onChange={(e) => handleFileSelect(e, i)}
+              accept="image/*"
+              className="hidden"
+            />
+            <div 
+              className="flex w-full cursor-pointer"
+              onClick={() => fileInputRefs[i].current?.click()}
+            >
+              <div className="bg-blue-500 text-white px-4 py-2 rounded-l-lg hover:bg-blue-600 transition-colors duration-200">
+                {buttonText}
+              </div>
+              <div className="flex-1 px-4 py-2 bg-gray-100 text-gray-600 truncate rounded-r-lg border-y border-r border-gray-200">
+                {fileNames[i]}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {element.extraAttributes.helperText && (
+        <p className={`text-[0.8rem] ${isInvalid ? "text-red-500" : "text-muted-foreground"}`}>
+          {element.extraAttributes.helperText}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      label: element.extraAttributes.label,
+      helperText: element.extraAttributes.helperText,
+      required: element.extraAttributes.required,
+      prompt: element.extraAttributes.prompt,
+      buttonText: element.extraAttributes.buttonText,
+      width: element.extraAttributes.width,
+      height: element.extraAttributes.height,
+      maxDimension: element.extraAttributes.maxDimension,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: values,
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="label"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="prompt"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Prompt Text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="buttonText"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Button Text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="helperText"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Helper text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="width"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Width (Tailwind class)</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="height"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Height (Tailwind class)</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="maxDimension"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Max Dimension (pixels)</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  type="number"
+                  min={100}
+                  max={2000}
+                  onChange={(e) => field.onChange(parseInt(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="required"
+          render={({ field }) => (
+            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+              <div className="space-y-0.5">
+                <FormLabel>Required</FormLabel>
+              </div>
+              <FormControl>
+                <input
+                  type="checkbox"
+                  checked={field.value}
+                  onChange={field.onChange}
+                  className="accent-primary"
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/field/PictureSelectField.tsx b/src/components/field/PictureSelectField.tsx
new file mode 100644
index 0000000..1943df4
--- /dev/null
+++ b/src/components/field/PictureSelectField.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { BsCardImage } from "react-icons/bs";
+import { Upload, X } from 'lucide-react';
+import useDesigner from "@/hooks/useDesigner";
+
+type ImageOption = {
+  src: string;
+  label: string;
+};
+
+type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    label: string;
+    helperText: string;
+    required: boolean;
+    images: ImageOption[];
+  };
+};
+
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  helperText: z.string().max(200),
+  required: z.boolean().default(false),
+  images: z.array(z.object({
+    src: z.string(),
+    label: z.string()
+  }))
+});
+
+export const PictureSelectFormElement: FormElement = {
+  type: "PictureSelectField",
+  construct: (id: string) => ({
+    id,
+    type: "PictureSelectField",
+    extraAttributes: {
+      label: "Picture Select",
+      helperText: "Select one of the images",
+      required: false,
+      images: [{
+        src: '/api/placeholder/200/200',
+        label: 'Option 1'
+      }]
+    },
+  }),
+
+  designerBtnElement: {
+    icon: BsCardImage,
+    label: "Picture Select",
+  },
+
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
+    const element = formElement as CustomInstance;
+    if (element.extraAttributes.required) {
+      return currentValue.length > 0;
+    }
+    return true;
+  },
+};
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { label, helperText, required, images } = element.extraAttributes;
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-center w-full pb-2">
+        {label}
+        {required && "*"}
+      </Label>
+      <div className="grid grid-cols-2 gap-4 mb-6">
+        {images.map((image, index) => (
+          <div key={index} className="flex flex-col items-center">
+            <div className="w-full space-y-2">
+              <div className="relative">
+                <img
+                  src={image.src}
+                  alt={image.label}
+                  className="w-full h-48 object-contain rounded-lg border-2 border-gray-300"
+                />
+              </div>
+              <p className="text-center font-medium">{image.label}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+    </div>
+  );
+}
+
+function FormComponent({
+  elementInstance,
+  submitValue,
+  isInvalid,
+  defaultValue,
+}: {
+  elementInstance: FormElementInstance;
+  submitValue?: (key: string, value: string) => void;
+  isInvalid?: boolean;
+  defaultValue?: string;
+}) {
+  const element = elementInstance as CustomInstance;
+  const [selectedImage, setSelectedImage] = useState(defaultValue || '');
+  const { images, label, helperText, required } = element.extraAttributes;
+
+  const handleImageSelect = (label: string) => {
+    setSelectedImage(label);
+    submitValue?.(elementInstance.id, label);
+  };
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className={`${isInvalid ? "text-red-500" : ""} text-center w-full pb-2`}>
+        {label}
+        {required && "*"}
+      </Label>
+      <div className="grid grid-cols-2 gap-4 mb-6">
+        {images.map((image, index) => (
+          <div key={index} className="flex flex-col items-center">
+            <label className="cursor-pointer p-2 rounded-lg border-2 hover:bg-gray-50">
+              <input
+                type="radio"
+                name={`imageChoice_${elementInstance.id}`}
+                value={image.label}
+                checked={selectedImage === image.label}
+                onChange={() => handleImageSelect(image.label)}
+                className="sr-only"
+              />
+              <img
+                src={image.src}
+                alt={image.label}
+                className={`w-full h-48 object-contain rounded-lg ${
+                  selectedImage === image.label ? 'ring-4 ring-blue-500' : ''
+                }`}
+              />
+              <p className="mt-2 text-center font-medium">{image.label}</p>
+            </label>
+          </div>
+        ))}
+      </div>
+      {helperText && (
+        <p className={`text-[0.8rem] ${isInvalid ? "text-red-500" : "text-muted-foreground"}`}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+}
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const [images, setImages] = useState(element.extraAttributes.images);
+
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      label: element.extraAttributes.label,
+      helperText: element.extraAttributes.helperText,
+      required: element.extraAttributes.required,
+      images: element.extraAttributes.images,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const newImages = [...images];
+        newImages[index] = {
+          ...newImages[index],
+          src: reader.result as string
+        };
+        setImages(newImages);
+        updateElement(element.id, {
+          ...element,
+          extraAttributes: {
+            ...element.extraAttributes,
+            images: newImages
+          }
+        });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleLabelChange = (index: number, newLabel: string) => {
+    const newImages = [...images];
+    newImages[index] = {
+      ...newImages[index],
+      label: newLabel
+    };
+    setImages(newImages);
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...element.extraAttributes,
+        images: newImages
+      }
+    });
+  };
+
+  const addImage = () => {
+    const newImages = [...images, { 
+      src: '/api/placeholder/200/200',
+      label: `Option ${images.length + 1}`
+    }];
+    setImages(newImages);
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...element.extraAttributes,
+        images: newImages
+      }
+    });
+  };
+
+  const removeImage = (index: number) => {
+    const newImages = images.filter((_, i) => i !== index);
+    setImages(newImages);
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...element.extraAttributes,
+        images: newImages
+      }
+    });
+  };
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    const newValues = {
+      ...values,
+      images
+    };
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: newValues,
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="label"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="helperText"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Helper text</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="required"
+          render={({ field }) => (
+            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+              <div className="space-y-0.5">
+                <FormLabel>Required</FormLabel>
+              </div>
+              <FormControl>
+                <input
+                  type="checkbox"
+                  checked={field.value}
+                  onChange={field.onChange}
+                  className="accent-primary"
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <div className="space-y-4">
+          <FormLabel>Image Options</FormLabel>
+          <div className="grid grid-cols-2 gap-4">
+            {images.map((image, index) => (
+              <div key={index} className="flex flex-col items-center">
+                <div className="w-full space-y-2">
+                  <div className="relative">
+                    <label className="cursor-pointer p-2 rounded-lg border-2 hover:bg-gray-50 block">
+                      <input
+                        type="file"
+                        accept="image/*"
+                        onChange={(e) => handleImageUpload(e, index)}
+                        className="sr-only"
+                      />
+                      <img
+                        src={image.src}
+                        alt={image.label}
+                        className="w-full h-48 object-contain rounded-lg"
+                      />
+                      <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity rounded-lg">
+                        <Upload className="w-8 h-8 text-white" />
+                      </div>
+                    </label>
+                    <button
+                      type="button"
+                      onClick={() => removeImage(index)}
+                      className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  </div>
+                  <Input
+                    type="text"
+                    value={image.label}
+                    onChange={(e) => handleLabelChange(index, e.target.value)}
+                    className="w-full"
+                    placeholder="Enter label"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+          <button
+            type="button"
+            onClick={addImage}
+            className="w-full border-2 border-dashed border-gray-300 p-4 rounded-lg hover:bg-gray-50"
+          >
+            Add Image Option
+          </button>
+        </div>
+      </form>
+    </Form>
+  );
+}

From e4d5fc8b8d44c012eaba2627a2c9215c52d4febc Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 14:00:47 +0100
Subject: [PATCH 12/40] removed example

---
 Example/image-selector.tsx | 141 -------------------------------------
 1 file changed, 141 deletions(-)
 delete mode 100644 Example/image-selector.tsx

diff --git a/Example/image-selector.tsx b/Example/image-selector.tsx
deleted file mode 100644
index 12f54e7..0000000
--- a/Example/image-selector.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useState } from 'react';
-import { Upload, X } from 'lucide-react';
-
-const ImageSelector = ({ 
-  isDesigner = true,
-  defaultImages = []
-}) => {
-  const [images, setImages] = useState(defaultImages);
-  const [selectedImage, setSelectedImage] = useState('');
-
-  const handleImageUpload = (e, index) => {
-    const file = e.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        const newImages = [...images];
-        newImages[index] = {
-          ...newImages[index],
-          src: reader.result
-        };
-        setImages(newImages);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleLabelChange = (index, newLabel) => {
-    const newImages = [...images];
-    newImages[index] = {
-      ...newImages[index],
-      label: newLabel
-    };
-    setImages(newImages);
-  };
-
-  const addImage = () => {
-    setImages([...images, { 
-      src: '/api/placeholder/200/200',
-      label: `Option ${images.length + 1}`
-    }]);
-  };
-
-  const removeImage = (index) => {
-    const newImages = images.filter((_, i) => i !== index);
-    setImages(newImages);
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (isDesigner) {
-      console.log('Form configuration:', images);
-    } else {
-      console.log('Selected label:', selectedImage);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="max-w-2xl mx-auto p-4">
-      <div className="grid grid-cols-2 gap-4 mb-6">
-        {images.map((image, index) => (
-          <div key={index} className="flex flex-col items-center">
-            {isDesigner ? (
-              <div className="w-full space-y-2">
-                <div className="relative">
-                  <label className="cursor-pointer p-2 rounded-lg border-2 hover:bg-gray-50 block">
-                    <input
-                      type="file"
-                      accept="image/*"
-                      onChange={(e) => handleImageUpload(e, index)}
-                      className="sr-only"
-                    />
-                    <img
-                      src={image.src}
-                      alt={image.label}
-                      className="w-full h-48 object-contain rounded-lg"
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity rounded-lg">
-                      <Upload className="w-8 h-8 text-white" />
-                    </div>
-                  </label>
-                  <button
-                    type="button"
-                    onClick={() => removeImage(index)}
-                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1"
-                  >
-                    <X className="w-4 h-4" />
-                  </button>
-                </div>
-                <input
-                  type="text"
-                  value={image.label}
-                  onChange={(e) => handleLabelChange(index, e.target.value)}
-                  className="w-full p-2 border rounded"
-                  placeholder="Enter label"
-                />
-              </div>
-            ) : (
-              <label className="cursor-pointer p-2 rounded-lg border-2 hover:bg-gray-50">
-                <input
-                  type="radio"
-                  name="imageChoice"
-                  value={image.label}
-                  onChange={(e) => setSelectedImage(e.target.value)}
-                  className="sr-only"
-                />
-                <img
-                  src={image.src}
-                  alt={image.label}
-                  className={`w-full h-48 object-cover rounded-lg ${
-                    selectedImage === image.label ? 'ring-4 ring-blue-500' : ''
-                  }`}
-                />
-                <p className="mt-2 text-center font-medium">{image.label}</p>
-              </label>
-            )}
-          </div>
-        ))}
-      </div>
-      
-      {isDesigner && (
-        <button
-          type="button"
-          onClick={addImage}
-          className="w-full mb-4 border-2 border-dashed border-gray-300 p-4 rounded-lg hover:bg-gray-50"
-        >
-          Add Image Option
-        </button>
-      )}
-
-      <button
-        type="submit"
-        className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
-        disabled={!isDesigner && !selectedImage}
-      >
-        {isDesigner ? 'Save Configuration' : 'Submit Selection'}
-      </button>
-    </form>
-  );
-};
-
-export default ImageSelector;
\ No newline at end of file

From bfb0e8a558b990b3ec114b964f9204fc7012e4ab Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 14:07:03 +0100
Subject: [PATCH 13/40] compiles clean now

---
 src/components/FormBuilder.tsx           |  4 +++-
 src/components/field/DualImageUpload.tsx | 28 +++++++++++++++++++-----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index f876aa2..3f1e92e 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -17,6 +17,7 @@ import { BsArrowLeft, BsArrowRight } from "react-icons/bs";
 import Confetti from "react-confetti";
 import useDesigner from "@/hooks/useDesigner";
 import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
+import { formThemes } from "@/schemas/form";
 
 function FormBuilder({ form }: { form: Form }) {
   const { setElements, setSelectedElement, setTheme } = useDesigner();
@@ -62,7 +63,8 @@ function FormBuilder({ form }: { form: Form }) {
     const elements = JSON.parse(form.content);
     setElements(elements);
     setSelectedElement(null);
-    setTheme(form.theme || "default");
+    const theme = form.theme as keyof typeof formThemes || "default";
+    setTheme(theme);
     const readyTimeout = setTimeout(() => setIsReady(true), 500);
     return () => clearTimeout(readyTimeout);
   }, [form, setElements, isReady, setSelectedElement]);
diff --git a/src/components/field/DualImageUpload.tsx b/src/components/field/DualImageUpload.tsx
index 3e86ea0..2a29095 100644
--- a/src/components/field/DualImageUpload.tsx
+++ b/src/components/field/DualImageUpload.tsx
@@ -63,10 +63,15 @@ export const DualImageUploadFormElement: FormElement = {
   formComponent: FormComponent,
   propertiesComponent: PropertiesComponent,
 
-  validate: (formElement: FormElementInstance, currentValue: string[]): boolean => {
+  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
     const element = formElement as CustomInstance;
     if (element.extraAttributes.required) {
-      return currentValue.length === 2 && currentValue.every(value => value.length > 0);
+      try {
+        const parsedValue = JSON.parse(currentValue);
+        return Array.isArray(parsedValue) && parsedValue.length === 2 && parsedValue.every(value => value.length > 0);
+      } catch (e) {
+        return false;
+      }
     }
     return true;
   },
@@ -105,9 +110,9 @@ function FormComponent({
   defaultValue,
 }: {
   elementInstance: FormElementInstance;
-  submitValue?: (key: string, value: string[]) => void;
+  submitValue?: (key: string, value: string) => void;
   isInvalid?: boolean;
-  defaultValue?: string[];
+  defaultValue?: string;
 }) {
   const element = elementInstance as CustomInstance;
   const [previewUrls, setPreviewUrls] = useState<(string | null)[]>([null, null]);
@@ -115,6 +120,19 @@ function FormComponent({
   const fileInputRefs = [useRef<HTMLInputElement>(null), useRef<HTMLInputElement>(null)];
   const { prompt, buttonText, width, height, maxDimension } = element.extraAttributes;
 
+  useEffect(() => {
+    if (defaultValue) {
+      try {
+        const parsedNames = JSON.parse(defaultValue);
+        if (Array.isArray(parsedNames)) {
+          setFileNames(parsedNames);
+        }
+      } catch (e) {
+        console.error("Failed to parse default value:", e);
+      }
+    }
+  }, [defaultValue]);
+
   const resizeImage = (originalFile: File): Promise<File> => {
     return new Promise((resolve) => {
       const img = new Image();
@@ -188,7 +206,7 @@ function FormComponent({
         const newFileNames = [...fileNames];
         newFileNames[index] = finalFile.name;
         setFileNames(newFileNames);
-        submitValue?.(elementInstance.id, newFileNames);
+        submitValue?.(elementInstance.id, JSON.stringify(newFileNames));
       };
     }
   };

From afb8a4b69ab80bc7f8fd8bd0474cc5d0705352d5 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 15:01:29 +0100
Subject: [PATCH 14/40] Setup local db. Is saving

---
 .env                 |  7 +++----
 prisma/schema.prisma | 31 +++++++++++--------------------
 src/action/form.ts   | 33 +++++++++++++++++++--------------
 3 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/.env b/.env
index f70fed1..59d8b97 100644
--- a/.env
+++ b/.env
@@ -6,7 +6,6 @@ NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
 
-POSTGRES_PRISMA_URL="postgres://default:5YBlPxAmaN4c@ep-morning-smoke-a4r3sc7j-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
-POSTGRES_URL_NON_POOLING="postgres://default:5YBlPxAmaN4c@ep-morning-smoke-a4r3sc7j.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
-
-DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
\ No newline at end of file
+POSTGRES_PRISMA_URL="postgresql://admin:password@localhost:5432/quickform?schema=public"
+POSTGRES_URL_NON_POOLING="postgresql://admin:password@localhost:5432/quickform?schema=public"
+DATABASE_URL="postgresql://admin:password@localhost:5432/quickform?schema=public"
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 7c445da..4bdc915 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,9 +1,3 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
-// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
-// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
-
 generator client {
   provider = "prisma-client-js"
 }
@@ -15,19 +9,17 @@ datasource db {
 }
 
 model Form {
-  id          Int      @id @default(autoincrement())
-  userId      String
-  createdAt   DateTime @default(now())
-  published   Boolean  @default(false)
-  name        String
-  description String   @default("")
-  content     String   @default("[]")
-  theme       String   @default("default") // Theme identifier for the form
-
-  visits      Int @default(0)
-  submissions Int @default(0)
-
+  id              Int               @id @default(autoincrement())
+  userId          String
+  createdAt       DateTime          @default(now())
+  published       Boolean           @default(false)
+  name            String
+  description     String            @default("")
+  content         String            @default("[]")
+  visits          Int               @default(0)
+  submissions     Int               @default(0)
   shareURL        String            @unique @default(uuid())
+  theme           String            @default("default")
   FormSubmissions FormSubmissions[]
 
   @@unique([name, userId])
@@ -37,7 +29,6 @@ model FormSubmissions {
   id        Int      @id @default(autoincrement())
   createdAt DateTime @default(now())
   formId    Int
+  content   String
   form      Form     @relation(fields: [formId], references: [id])
-
-  content String
 }
diff --git a/src/action/form.ts b/src/action/form.ts
index 61f4825..5972235 100644
--- a/src/action/form.ts
+++ b/src/action/form.ts
@@ -145,21 +145,26 @@ export async function GetFormById(id: number) {
 }
 
 export async function UpdateFormContent(id: number, jsonContent: string, theme?: string) {
-  const user = await currentUser();
-  if (!user) {
-    throw new UserNotFoundErr();
+  try {
+    const user = await currentUser();
+    if (!user) {
+      throw new UserNotFoundErr();
+    }
+
+    return await prisma.form.update({
+      where: {
+        userId: user.id,
+        id,
+      },
+      data: {
+        content: jsonContent,
+        ...(theme && { theme }),
+      },
+    });
+  } catch (error) {
+    console.error('Error in UpdateFormContent:', error);
+    throw error;
   }
-
-  return await prisma.form.update({
-    where: {
-      userId: user.id,
-      id,
-    },
-    data: {
-      content: jsonContent,
-      ...(theme && { theme }),
-    },
-  });
 }
 
 export async function PublishForm(id: number) {

From 07485ca04ce07b0fad7d3c8acf3566e8a957aa4e Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 15:11:45 +0100
Subject: [PATCH 15/40] fix up a few errors

---
 src/components/FormBuilder.tsx              |  3 ++-
 src/components/FormCard.tsx                 | 24 ++++-----------------
 src/components/field/PictureSelectField.tsx |  4 ++--
 src/components/ui/Navbar.tsx                |  3 +--
 4 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index 3f1e92e..e0dbbf9 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -27,12 +27,13 @@ function FormBuilder({ form }: { form: Form }) {
   const [isOpen, setIsOpen] = useState(false)
 
   useEffect(() => {
+    setIsSmallScreen(window.innerWidth <= 768);
     const handleResize = () => {
       setIsSmallScreen(window.innerWidth <= 768); // Adjust the max width as per your requirement
     };
 
     // Initial check on mount
-    handleResize();
+    // handleResize();
 
     // Event listener for window resize
     window.addEventListener('resize', handleResize);
diff --git a/src/components/FormCard.tsx b/src/components/FormCard.tsx
index b94b0c9..c9b6027 100644
--- a/src/components/FormCard.tsx
+++ b/src/components/FormCard.tsx
@@ -69,14 +69,14 @@ const FormCard = ({ form }: { form: Form }) => {
         <Card className="min-h-[200px]">
             <CardHeader>
                 <CardTitle className="flex items-center gap-2 justify-between relative">
-                    <h2 className="font-semibold leading-6 text-[1.2rem] lg:text-[1.4rem]">{form.name}</h2>
+                    <span className="font-semibold leading-6 text-[1.2rem] lg:text-[1.4rem]">{form.name}</span>
                     {form.published && <Badge>Published</Badge>}
                     {!form.published && <Badge variant={"destructive"}>Draft</Badge>}
                     <AlertDialog>
-                        <AlertDialogTrigger>
+                        <AlertDialogTrigger asChild>
                             <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
-                                    <Button size="icon" variant="ghost" className="rounded-full">
+                                    <Button size="icon" variant="ghost" className="rounded-full" type="button">
                                         <PiDotsThreeOutlineVerticalFill className="w-4 h-4" />
                                         <span className="sr-only">Actions</span>
                                     </Button>
@@ -152,20 +152,4 @@ const FormCard = ({ form }: { form: Form }) => {
     );
 };
 
-export default FormCard;
-
-
-{/* <DropdownMenu>
-<DropdownMenuTrigger asChild>
-    <Button size="icon" variant="ghost" className="rounded-full">
-        <PiDotsThreeOutlineVerticalFill className="w-4 h-4" />
-        <span className="sr-only">Actions</span>
-    </Button>
-</DropdownMenuTrigger>
-<DropdownMenuContent align="end">
-    <DropdownMenuItem className="cursor-pointer" onClick={handleDelete}>
-        <RiDeleteBin5Line className="mr-2" />
-        Delete
-    </DropdownMenuItem>
-</DropdownMenuContent>
-</DropdownMenu> */}
\ No newline at end of file
+export default FormCard;
\ No newline at end of file
diff --git a/src/components/field/PictureSelectField.tsx b/src/components/field/PictureSelectField.tsx
index 1943df4..f85fde1 100644
--- a/src/components/field/PictureSelectField.tsx
+++ b/src/components/field/PictureSelectField.tsx
@@ -46,7 +46,7 @@ export const PictureSelectFormElement: FormElement = {
       helperText: "Select one of the images",
       required: false,
       images: [{
-        src: '/api/placeholder/200/200',
+        src: 'https://placehold.co/200x200',
         label: 'Option 1'
       }]
     },
@@ -223,7 +223,7 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
 
   const addImage = () => {
     const newImages = [...images, { 
-      src: '/api/placeholder/200/200',
+      src: 'https://placehold.co/200x200',
       label: `Option ${images.length + 1}`
     }];
     setImages(newImages);
diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index 611aabc..991aef1 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -21,7 +21,7 @@ const Navbar = () => {
                 <div className="py-0.5 lg:py-2 dark:bg-[#030712]  bg-[#fcfdff] backdrop-blur-md">
                     <div className="flex items-center justify-between container">
                         <Link href="/" className="flex items-center gap-3">
-                            <Image src="/logo.svg" width={45} height={45} alt="logo" />
+                            <Image src="/logo.svg" width={45} height={45} alt="logo" style={{ width: 'auto', height: '45px' }} />
                             {user && (
                                 <h1 className="text-2xl lg:text-3xl font-bold">QuickForm</h1>
                             )}
@@ -73,4 +73,3 @@ const Navbar = () => {
 }
 
 export default Navbar
-

From 46b99cabd396ba939a9992e4490646e529a54088 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 15:24:00 +0100
Subject: [PATCH 16/40] fix up a few errors

---
 src/components/field/PictureSelectField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/field/PictureSelectField.tsx b/src/components/field/PictureSelectField.tsx
index f85fde1..11ac8dd 100644
--- a/src/components/field/PictureSelectField.tsx
+++ b/src/components/field/PictureSelectField.tsx
@@ -46,7 +46,7 @@ export const PictureSelectFormElement: FormElement = {
       helperText: "Select one of the images",
       required: false,
       images: [{
-        src: 'https://placehold.co/200x200',
+        src: "https://placehold.co/200x200",
         label: 'Option 1'
       }]
     },

From 40f1aad749e00ad6f16e96057771473d51ac6b37 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Sun, 26 Jan 2025 21:31:06 +0100
Subject: [PATCH 17/40] Increased size to save images and added code to save
 images to db

---
 audit.js                                    | 92 +++++++++++++++++++++
 next.config.mjs                             |  5 ++
 src/components/field/ImageUploadField.tsx   | 25 ++++--
 src/components/field/PictureSelectField.tsx | 82 ++++++++++--------
 4 files changed, 160 insertions(+), 44 deletions(-)
 create mode 100644 audit.js

diff --git a/audit.js b/audit.js
new file mode 100644
index 0000000..d25b57c
--- /dev/null
+++ b/audit.js
@@ -0,0 +1,92 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+// Read package.json and get dependencies
+const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+const dependencies = {
+  ...packageJson.dependencies,
+  ...packageJson.devDependencies
+};
+
+// Define directories to scan
+const dirsToScan = [
+  'src',
+  'pages',
+  'components',
+  'lib',
+  'utils',
+  'styles',
+  'app'
+];
+
+// Get all JS/TS files
+const files = glob.sync(`{${dirsToScan.join(',')}}/**/*.{js,jsx,ts,tsx}`);
+
+// Initialize results
+const results = {
+  used: new Set(),
+  unused: new Set(),
+  nextSpecific: new Set(['next', '@next/font', 'next-auth']), // Common Next.js packages
+  internal: new Set() // For @/ imports
+};
+
+// Process each file
+files.forEach(file => {
+  const content = fs.readFileSync(file, 'utf8');
+  
+  // Check for import statements
+  const importRegex = /import.*?['"]([^'"]+)['"]/g;
+  let match;
+  
+  while ((match = importRegex.exec(content)) !== null) {
+    const importPath = match[1];
+    
+    // Handle different import types
+    if (importPath.startsWith('@/')) {
+      results.internal.add(importPath);
+      continue;
+    }
+    
+    // Get package name (handle scoped packages)
+    const packageName = importPath.startsWith('@') 
+      ? importPath.split('/').slice(0, 2).join('/')
+      : importPath.split('/')[0];
+    
+    if (dependencies[packageName]) {
+      results.used.add(packageName);
+    }
+  }
+  
+  // Check for require statements
+  const requireRegex = /require\(['"]([^'"]+)['"]\)/g;
+  while ((match = requireRegex.exec(content)) !== null) {
+    const packageName = match[1].split('/')[0];
+    if (dependencies[packageName]) {
+      results.used.add(packageName);
+    }
+  }
+});
+
+// Find unused dependencies
+Object.keys(dependencies).forEach(dep => {
+  if (!results.used.has(dep) && !results.nextSpecific.has(dep)) {
+    results.unused.add(dep);
+  }
+});
+
+// Print results
+console.log('\nDependency Audit Results\n');
+console.log('Used Dependencies:', Array.from(results.used).sort());
+console.log('\nPotentially Unused Dependencies:', Array.from(results.unused).sort());
+console.log('\nNext.js Specific Dependencies:', Array.from(results.nextSpecific));
+console.log('\nInternal Imports:', Array.from(results.internal).sort());
+
+// Print summary
+console.log('\nSummary:');
+console.log(`Total Dependencies: ${Object.keys(dependencies).length}`);
+console.log(`Used: ${results.used.size}`);
+console.log(`Potentially Unused: ${results.unused.size}`);
+console.log(`Next.js Specific: ${results.nextSpecific.size}`);
+
+console.log('\nNote: This is a basic analysis and may have false positives. Please verify before removing any packages.');
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index 0a7c9af..6f50f45 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,5 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '10mb'
+    }
+  }
 };
 
 export default nextConfig;
diff --git a/src/components/field/ImageUploadField.tsx b/src/components/field/ImageUploadField.tsx
index 40710f2..b37949e 100644
--- a/src/components/field/ImageUploadField.tsx
+++ b/src/components/field/ImageUploadField.tsx
@@ -157,29 +157,38 @@ function FormComponent({
     });
   };
 
+  const convertToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = error => reject(error);
+    });
+  };
+
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file && file.type.startsWith('image/')) {
       setFileName(file.name);
       
-      const reader = new FileReader();
-      reader.onload = () => {
-        setPreviewUrl(reader.result as string);
-      };
-      reader.readAsDataURL(file);
+      let finalFile = file;
       
       const img = new Image();
       img.src = URL.createObjectURL(file);
       
       img.onload = async () => {
-        let finalFile = file;
-        
         if (img.width > maxDimension || img.height > maxDimension) {
           finalFile = await resizeImage(file);
         }
         
         URL.revokeObjectURL(img.src);
-        submitValue?.(elementInstance.id, finalFile.name);
+        
+        // Convert the final image to base64 and set preview
+        const base64Data = await convertToBase64(finalFile);
+        setPreviewUrl(base64Data);
+        
+        // Submit the base64 data instead of just the filename
+        submitValue?.(elementInstance.id, base64Data);
       };
     }
   };
diff --git a/src/components/field/PictureSelectField.tsx b/src/components/field/PictureSelectField.tsx
index 11ac8dd..0a46c4e 100644
--- a/src/components/field/PictureSelectField.tsx
+++ b/src/components/field/PictureSelectField.tsx
@@ -36,6 +36,15 @@ const propertiesSchema = z.object({
   }))
 });
 
+const convertImageToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = error => reject(error);
+  });
+};
+
 export const PictureSelectFormElement: FormElement = {
   type: "PictureSelectField",
   construct: (id: string) => ({
@@ -45,10 +54,7 @@ export const PictureSelectFormElement: FormElement = {
       label: "Picture Select",
       helperText: "Select one of the images",
       required: false,
-      images: [{
-        src: "https://placehold.co/200x200",
-        label: 'Option 1'
-      }]
+      images: []
     },
   }),
 
@@ -165,9 +171,7 @@ type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
 function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { updateElement } = useDesigner();
-  const [images, setImages] = useState(element.extraAttributes.images);
-
-  const form = useForm<propertiesFormSchemaType>({
+  const form = useForm<z.infer<typeof propertiesSchema>>({
     resolver: zodResolver(propertiesSchema),
     mode: "onBlur",
     defaultValues: {
@@ -179,39 +183,46 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   });
 
   useEffect(() => {
-    form.reset(element.extraAttributes);
+    form.reset({
+      label: element.extraAttributes.label,
+      helperText: element.extraAttributes.helperText,
+      required: element.extraAttributes.required,
+      images: element.extraAttributes.images,
+    });
   }, [element, form]);
 
-  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        const newImages = [...images];
-        newImages[index] = {
-          ...newImages[index],
-          src: reader.result as string
-        };
-        setImages(newImages);
-        updateElement(element.id, {
-          ...element,
-          extraAttributes: {
-            ...element.extraAttributes,
-            images: newImages
-          }
-        });
+  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const base64Image = await convertImageToBase64(file);
+      const updatedImages = [...form.getValues("images")];
+      updatedImages[index] = {
+        ...updatedImages[index],
+        src: base64Image
       };
-      reader.readAsDataURL(file);
+      
+      form.setValue("images", updatedImages);
+      updateElement(element.id, {
+        ...element,
+        extraAttributes: {
+          ...element.extraAttributes,
+          images: updatedImages
+        }
+      });
+    } catch (error) {
+      console.error("Error converting image:", error);
     }
   };
 
   const handleLabelChange = (index: number, newLabel: string) => {
-    const newImages = [...images];
+    const newImages = [...form.getValues("images")];
     newImages[index] = {
       ...newImages[index],
       label: newLabel
     };
-    setImages(newImages);
+    form.setValue("images", newImages);
     updateElement(element.id, {
       ...element,
       extraAttributes: {
@@ -222,11 +233,11 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   };
 
   const addImage = () => {
-    const newImages = [...images, { 
+    const newImages = [...form.getValues("images"), { 
       src: 'https://placehold.co/200x200',
-      label: `Option ${images.length + 1}`
+      label: `Option ${form.getValues("images").length + 1}`
     }];
-    setImages(newImages);
+    form.setValue("images", newImages);
     updateElement(element.id, {
       ...element,
       extraAttributes: {
@@ -237,8 +248,8 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   };
 
   const removeImage = (index: number) => {
-    const newImages = images.filter((_, i) => i !== index);
-    setImages(newImages);
+    const newImages = form.getValues("images").filter((_, i) => i !== index);
+    form.setValue("images", newImages);
     updateElement(element.id, {
       ...element,
       extraAttributes: {
@@ -251,7 +262,6 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   function applyChanges(values: propertiesFormSchemaType) {
     const newValues = {
       ...values,
-      images
     };
     updateElement(element.id, {
       ...element,
@@ -329,7 +339,7 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
         <div className="space-y-4">
           <FormLabel>Image Options</FormLabel>
           <div className="grid grid-cols-2 gap-4">
-            {images.map((image, index) => (
+            {form.getValues("images").map((image, index) => (
               <div key={index} className="flex flex-col items-center">
                 <div className="w-full space-y-2">
                   <div className="relative">

From 3726e80c86b0d5743f6162420cc793338dbd48d9 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Mon, 27 Jan 2025 00:04:00 +0100
Subject: [PATCH 18/40] Added ability to embed forms

---
 package-lock.json                         |  49 --
 package.json                              |   1 -
 prisma/schema.prisma                      |   1 +
 src/action/form-embed.ts                  |  47 ++
 src/action/form.ts                        |  74 +-
 src/app/(routes)/dashboard/page.tsx       | 182 ++---
 src/app/api/embed/[formId]/js/route.ts    | 795 ++++++++++++++++++++++
 src/app/api/submit-form/[formId]/route.ts |  72 ++
 src/components/EmbedFormPreview.tsx       |  56 ++
 src/components/FormBuilder.tsx            |  50 +-
 src/components/FormCard.tsx               | 204 +++---
 src/components/GenerateCodeBtn.tsx        | 140 ++++
 src/components/PublishFormBtn.tsx         |  19 +-
 tailwind.config.ts                        |   2 +-
 14 files changed, 1391 insertions(+), 301 deletions(-)
 create mode 100644 src/action/form-embed.ts
 create mode 100644 src/app/api/embed/[formId]/js/route.ts
 create mode 100644 src/app/api/submit-form/[formId]/route.ts
 create mode 100644 src/components/EmbedFormPreview.tsx
 create mode 100644 src/components/GenerateCodeBtn.tsx

diff --git a/package-lock.json b/package-lock.json
index dabe951..c01c4b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,7 +69,6 @@
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "autoprefixer": "^10.0.1",
-        "daisyui": "^4.12.23",
         "eslint": "^8",
         "eslint-config-next": "14.1.3",
         "postcss": "^8",
@@ -3143,17 +3142,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-selector-tokenizer": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
-      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "fastparse": "^1.1.2"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3171,36 +3159,6 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "devOptional": true
     },
-    "node_modules/culori": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
-      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
-    "node_modules/daisyui": {
-      "version": "4.12.23",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz",
-      "integrity": "sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "css-selector-tokenizer": "^0.8",
-        "culori": "^3",
-        "picocolors": "^1",
-        "postcss-js": "^4"
-      },
-      "engines": {
-        "node": ">=16.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/daisyui"
-      }
-    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -4025,13 +3983,6 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
-    "node_modules/fastparse": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
diff --git a/package.json b/package.json
index 030c75f..3a90e06 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,6 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
-    "daisyui": "^4.12.23",
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
     "postcss": "^8",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 4bdc915..f3f3a43 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -23,6 +23,7 @@ model Form {
   FormSubmissions FormSubmissions[]
 
   @@unique([name, userId])
+  @@index([userId, id])
 }
 
 model FormSubmissions {
diff --git a/src/action/form-embed.ts b/src/action/form-embed.ts
new file mode 100644
index 0000000..3ffc715
--- /dev/null
+++ b/src/action/form-embed.ts
@@ -0,0 +1,47 @@
+"use server";
+
+import { currentUser } from "@clerk/nextjs";
+import prisma from "@/lib/prisma";
+
+class UserNotFoundErr extends Error {}
+
+export type EmbedCodeResponse = {
+  scriptUrl: string;
+  embedCode: string;
+  formId: number;
+};
+
+export async function GenerateEmbedCode(formId: number): Promise<EmbedCodeResponse> {
+  const user = await currentUser();
+  if (!user) {
+    throw new UserNotFoundErr();
+  }
+
+  // Verify the form exists and belongs to the user
+  const form = await prisma.form.findFirst({
+    where: {
+      id: formId,
+      userId: user.id,
+    },
+  });
+
+  if (!form) {
+    throw new Error("Form not found");
+  }
+
+  // Generate unique script URL for this form
+  const scriptUrl = `/api/embed/${formId}/js`;
+
+  // Generate the embed code with a container div and the script
+  const embedCode = `
+<!-- Quick Form Builder Embed -->
+<div id="quick-form-${formId}"></div>
+<script src="${scriptUrl}" async defer></script>
+  `.trim();
+
+  return {
+    scriptUrl,
+    embedCode,
+    formId,
+  };
+}
diff --git a/src/action/form.ts b/src/action/form.ts
index 5972235..96bd93f 100644
--- a/src/action/form.ts
+++ b/src/action/form.ts
@@ -54,10 +54,34 @@ export async function CreateForm(data: formSchemaType) {
 
   const { name, description, theme } = data;
 
+  // Check for existing forms with the same name
+  const existingForms = await prisma.form.findMany({
+    where: {
+      userId: user.id,
+      name: {
+        startsWith: name,
+      },
+    },
+    select: {
+      name: true,
+    },
+  });
+
+  // If there are existing forms with the same name, append a number
+  let newName = name;
+  if (existingForms.length > 0) {
+    const existingNames = new Set(existingForms.map(f => f.name));
+    let counter = 1;
+    while (existingNames.has(newName)) {
+      newName = `${name} (${counter})`;
+      counter++;
+    }
+  }
+
   const form = await prisma.form.create({
     data: {
       userId: user.id,
-      name,
+      name: newName,
       description,
       theme: theme || "default",
     },
@@ -69,42 +93,33 @@ export async function CreateForm(data: formSchemaType) {
 
   return form.id;
 }
+
 export async function DeleteForm(formId: number) {
   const user = await currentUser();
   if (!user) {
     throw new UserNotFoundErr();
   }
 
-  // Check if the form exists before attempting to delete it
-  const existingForm = await prisma.form.findUnique({
+  // Check if the form exists and belongs to the user
+  const existingForm = await prisma.form.findFirst({
     where: {
       id: formId,
+      userId: user.id,
     },
   });
 
   if (!existingForm) {
-    throw new Error("Form not found");
+    throw new Error("Form not found or you don't have permission to delete it");
   }
 
-  // Check if there are any related records (e.g., submissions) before deleting the form
-  const submissions = await prisma.formSubmissions.findMany({
+  // Delete related submissions first
+  await prisma.formSubmissions.deleteMany({
     where: {
       formId: formId,
     },
   });
 
-  // Delete related records first
-  await Promise.all(
-    submissions.map(async (submission) => {
-      await prisma.formSubmissions.delete({
-        where: {
-          id: submission.id,
-        },
-      });
-    })
-  );
-
-  // Now delete the form
+  // Delete the form
   await prisma.form.delete({
     where: {
       id: formId,
@@ -136,10 +151,10 @@ export async function GetFormById(id: number) {
     throw new UserNotFoundErr();
   }
 
-  return await prisma.form.findUnique({
+  return await prisma.form.findFirst({
     where: {
-      userId: user.id,
       id,
+      userId: user.id,
     },
   });
 }
@@ -173,14 +188,25 @@ export async function PublishForm(id: number) {
     throw new UserNotFoundErr();
   }
 
-  return await prisma.form.update({
-    data: {
-      published: true,
-    },
+  // First check if the form exists and belongs to the user
+  const form = await prisma.form.findFirst({
     where: {
+      id,
       userId: user.id,
+    },
+  });
+
+  if (!form) {
+    throw new Error("Form not found");
+  }
+
+  return await prisma.form.update({
+    where: {
       id,
     },
+    data: {
+      published: true,
+    },
   });
 }
 
diff --git a/src/app/(routes)/dashboard/page.tsx b/src/app/(routes)/dashboard/page.tsx
index 7f299cc..323faca 100644
--- a/src/app/(routes)/dashboard/page.tsx
+++ b/src/app/(routes)/dashboard/page.tsx
@@ -1,6 +1,8 @@
+"use client";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
-import { ReactNode, Suspense } from "react";
+import { ReactNode, Suspense, useEffect, useState } from "react";
 import { LuView } from "react-icons/lu";
 import { FaWpforms } from "react-icons/fa";
 import { HiCursorClick } from "react-icons/hi";
@@ -9,99 +11,115 @@ import { Separator } from "@/components/ui/separator";
 import CreateFormBtn from "@/components/CreateFormBtn";
 import { GetFormStats, GetForms } from "@/action/form";
 import FormCard from "@/components/FormCard";
+import { Form } from "@prisma/client";
 
 export default function Home() {
+  const [stats, setStats] = useState<Awaited<ReturnType<typeof GetFormStats>> | null>(null);
+  const [forms, setForms] = useState<Form[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const [statsData, formsData] = await Promise.all([
+          GetFormStats(),
+          GetForms(),
+        ]);
+        setStats(statsData);
+        setForms(formsData);
+      } catch (error) {
+        console.error("Error loading dashboard data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
+  const handleFormDeleted = (formId: number) => {
+    setForms((prevForms) => prevForms.filter((form) => form.id !== formId));
+    // Update stats
+    setStats((prevStats) => {
+      if (!prevStats) return null;
+      return {
+        ...prevStats,
+        visits: prevStats.visits - (forms.find(f => f.id === formId)?.visits || 0),
+        submissions: prevStats.submissions - (forms.find(f => f.id === formId)?.submissions || 0),
+      };
+    });
+  };
+
   return (
     <div className="container pt-4">
-      <Suspense fallback={<StatsCards loading={true} />}>
-        <CardStatsWrapper />
-      </Suspense>
+      <div className="w-full pt-8 gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+        <StatsCard
+          title="Total visits"
+          icon={<LuView className="text-blue-600" />}
+          helperText="All time form visits"
+          value={stats?.visits.toLocaleString() || "0"}
+          loading={loading}
+          className="shadow-md shadow-blue-600"
+        />
+
+        <StatsCard
+          title="Total submissions"
+          icon={<FaWpforms className="text-yellow-600" />}
+          helperText="All time form submissions"
+          value={stats?.submissions.toLocaleString() || "0"}
+          loading={loading}
+          className="shadow-md shadow-yellow-600"
+        />
+
+        <StatsCard
+          title="Submission rate"
+          icon={<HiCursorClick className="text-green-600" />}
+          helperText="Visits that result in form submission"
+          value={stats?.submissionRate.toLocaleString() + "%" || "0%"}
+          loading={loading}
+          className="shadow-md shadow-green-600"
+        />
+
+        <StatsCard
+          title="Bounce rate"
+          icon={<TbArrowBounce className="text-red-600" />}
+          helperText="Visits that leave without interacting"
+          value={stats?.bounceRate.toLocaleString() + "%" || "0%"}
+          loading={loading}
+          className="shadow-md shadow-red-600"
+        />
+      </div>
+
       <Separator className="my-6" />
       <h2 className="text-3xl lg:text-4xl font-bold col-span-2">Your forms</h2>
       <Separator className="my-6" />
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <CreateFormBtn />
-        <Suspense
-          fallback={[1, 2, 3, 4].map((el) => (
+        {loading ? (
+          [1, 2, 3, 4].map((el) => (
             <FormCardSkeleton key={el} />
-          ))}
-        >
-          <FormCards />
-        </Suspense>
+          ))
+        ) : (
+          forms.map((form) => (
+            <FormCard key={form.id} form={form} onDelete={handleFormDeleted} />
+          ))
+        )}
       </div>
     </div>
   );
 }
 
-async function CardStatsWrapper() {
-  const stats = await GetFormStats();
-  return <StatsCards loading={false} data={stats} />;
-}
-
 interface StatsCardProps {
-  data?: Awaited<ReturnType<typeof GetFormStats>>;
-  loading: boolean;
-}
-
-function StatsCards(props: StatsCardProps) {
-  const { data, loading } = props;
-
-  return (
-    <div className="w-full pt-8 gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-      <StatsCard
-        title="Total visits"
-        icon={<LuView className="text-blue-600" />}
-        helperText="All time form visits"
-        value={data?.visits.toLocaleString() || ""}
-        loading={loading}
-        className="shadow-md shadow-blue-600"
-      />
-
-      <StatsCard
-        title="Total submissions"
-        icon={<FaWpforms className="text-yellow-600" />}
-        helperText="All time form submissions"
-        value={data?.submissions.toLocaleString() || ""}
-        loading={loading}
-        className="shadow-md shadow-yellow-600"
-      />
-
-      <StatsCard
-        title="Submission rate"
-        icon={<HiCursorClick className="text-green-600" />}
-        helperText="Visits that result in form submission"
-        value={data?.submissionRate.toLocaleString() + "%" || ""}
-        loading={loading}
-        className="shadow-md shadow-green-600"
-      />
-
-      <StatsCard
-        title="Bounce rate"
-        icon={<TbArrowBounce className="text-red-600" />}
-        helperText="Visits that leaves without interacting"
-        value={data?.submissionRate.toLocaleString() + "%" || ""}
-        loading={loading}
-        className="shadow-md shadow-red-600"
-      />
-    </div>
-  );
-}
-
-export function StatsCard({
-  title,
-  value,
-  icon,
-  helperText,
-  loading,
-  className,
-}: {
   title: string;
   value: string;
   helperText: string;
   className: string;
   loading: boolean;
   icon: ReactNode;
-}) {
+}
+
+function StatsCard({ title, value, icon, helperText, loading, className }: StatsCardProps) {
   return (
     <Card className={className}>
       <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -110,12 +128,7 @@ export function StatsCard({
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">
-          {loading && (
-            <Skeleton>
-              <span className="opacity-0">0</span>
-            </Skeleton>
-          )}
-          {!loading && value}
+          {loading ? <Skeleton className="h-8 w-24" /> : value}
         </div>
         <p className="text-xs text-muted-foreground pt-1">{helperText}</p>
       </CardContent>
@@ -124,16 +137,5 @@ export function StatsCard({
 }
 
 function FormCardSkeleton() {
-  return <Skeleton className="border-2 border-primary-/20 h-[210px] w-full" />;
-}
-
-async function FormCards() {
-  const forms = await GetForms();
-  return (
-    <>
-      {forms.map((form) => (
-        <FormCard key={form.id} form={form} />
-      ))}
-    </>
-  );
+  return <Skeleton className="h-[190px] w-full" />;
 }
diff --git a/src/app/api/embed/[formId]/js/route.ts b/src/app/api/embed/[formId]/js/route.ts
new file mode 100644
index 0000000..1ed6008
--- /dev/null
+++ b/src/app/api/embed/[formId]/js/route.ts
@@ -0,0 +1,795 @@
+import prisma from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  request: Request,
+  { params }: { params: { formId: string } }
+) {
+  if (!params.formId) {
+    console.log("Missing formId");
+    return new NextResponse("Missing formId", { status: 400 });
+  }
+
+  try {
+    const formId = parseInt(params.formId);
+    console.log("Looking for form:", formId);
+    
+    // Get the form data - only published forms are accessible
+    const form = await prisma.form.findFirst({
+      where: {
+        id: formId,
+        published: true,
+      },
+    });
+
+    console.log("Form found:", form);
+
+    if (!form) {
+      console.log("Form not found or not published");
+      return new NextResponse("Form not found or not published", { status: 404 });
+    }
+
+    // Parse the form content
+    let formContent;
+    try {
+      formContent = JSON.parse(form.content);
+      console.log("Form content parsed:", formContent);
+    } catch (error) {
+      console.error("Error parsing form content:", error);
+      return new NextResponse("Invalid form content", { status: 500 });
+    }
+
+    if (!Array.isArray(formContent)) {
+      console.error("Form content is not an array:", formContent);
+      return new NextResponse("Invalid form content", { status: 500 });
+    }
+
+    // Generate the form bundle
+    const bundle = `
+      (() => {
+        // Find or create container
+        const containerId = 'quick-form-${formId}';
+        let container = document.getElementById(containerId);
+        if (!container) {
+          console.error('Quick Form container not found:', containerId);
+          return;
+        }
+
+        // Clear existing content
+        container.innerHTML = '';
+        
+        // Add styles
+        const style = document.createElement('style');
+        style.textContent = \`
+          /* Base form styles */
+          .quick-form-container { width: 100%; }
+          .quick-form { max-width: 600px; margin: 0 auto; padding: 20px; font-family: system-ui, -apple-system, sans-serif; }
+          .quick-form-field { margin-bottom: 20px; }
+          
+          /* Typography */
+          .quick-form-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #111827; }
+          .quick-form-subtitle { font-size: 18px; color: #4B5563; margin-bottom: 15px; }
+          .quick-form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }
+          .quick-form-helper-text { font-size: 14px; color: #6B7280; margin-top: 4px; }
+          
+          /* Form elements */
+          .quick-form-input {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #D1D5DB;
+            border-radius: 6px;
+            font-size: 14px;
+            line-height: 1.5;
+            transition: border-color 0.15s ease-in-out;
+          }
+          .quick-form-input:focus {
+            outline: none;
+            border-color: #6366f1;
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+          }
+          .quick-form-input::placeholder {
+            color: #9CA3AF;
+          }
+          
+          .quick-form-checkbox-wrapper { display: flex; align-items: center; gap: 8px; }
+          .quick-form-checkbox { 
+            width: 16px; 
+            height: 16px; 
+            border: 2px solid #D1D5DB;
+            border-radius: 4px;
+            cursor: pointer;
+            appearance: none;
+            background-color: white;
+          }
+          .quick-form-checkbox:checked {
+            background-color: #6366f1;
+            border-color: #6366f1;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
+          }
+          .quick-form-checkbox:hover { border-color: #6366f1; }
+          .quick-form-checkbox:focus { 
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+            box-shadow: 0 0 0 2px #E0E7FF;
+          }
+          
+          /* Submit button */
+          .quick-form-submit {
+            background: #6366f1;
+            color: white;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 6px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.15s ease-in-out;
+          }
+          .quick-form-submit:hover {
+            background: #4f46e5;
+          }
+          .quick-form-submit:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
+          }
+          .quick-form-error {
+            color: #ef4444;
+            font-size: 14px;
+            margin-top: 4px;
+          }
+          
+          /* Custom Controls */
+          .quick-form-image-upload { 
+            border: 2px dashed #D1D5DB; 
+            padding: 20px; 
+            text-align: center; 
+            border-radius: 8px; 
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #F9FAFB;
+            transition: all 0.2s ease;
+          }
+          .quick-form-image-upload:hover { 
+            border-color: #6366F1;
+            background: #F3F4F6;
+          }
+          .quick-form-image-preview { 
+            max-width: 100%;
+            margin-top: 10px;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          }
+          
+          .quick-form-picture-select { 
+            display: grid; 
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
+            gap: 12px; 
+            margin-top: 8px;
+          }
+          .quick-form-picture-option { 
+            cursor: pointer; 
+            border: 2px solid transparent; 
+            padding: 4px; 
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            background: white;
+          }
+          .quick-form-picture-option:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          }
+          .quick-form-picture-option.selected { 
+            border-color: #6366F1;
+            background: #F3F4F6;
+          }
+          .quick-form-picture-option img { 
+            width: 100%; 
+            height: 150px; 
+            object-fit: cover; 
+            border-radius: 6px;
+          }
+          .quick-form-picture-option .label {
+            margin-top: 4px;
+            text-align: center;
+            font-size: 14px;
+            color: #4B5563;
+          }
+          
+          .quick-form-rating-scale { 
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            margin-top: 8px;
+          }
+          .quick-form-rating-buttons {
+            display: flex;
+            gap: 8px;
+            justify-content: space-between;
+            align-items: center;
+          }
+          .quick-form-rating-button {
+            width: 40px;
+            height: 40px;
+            border: 2px solid #D1D5DB;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background: white;
+            transition: all 0.2s ease;
+            font-weight: 500;
+          }
+          .quick-form-rating-button:hover {
+            transform: translateY(-2px);
+            border-color: #6366F1;
+          }
+          .quick-form-rating-button.selected {
+            background: #6366F1;
+            border-color: #6366F1;
+            color: white;
+          }
+          .quick-form-rating-labels {
+            display: flex;
+            justify-content: space-between;
+            color: #6B7280;
+            font-size: 14px;
+          }
+          
+          /* Dual Image Upload */
+          .quick-form-dual-image {
+            display: flex;
+            gap: 16px;
+            margin-top: 8px;
+          }
+          .quick-form-dual-image-side {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+          }
+          .quick-form-dual-image-upload { 
+            border: 2px dashed #D1D5DB; 
+            padding: 20px; 
+            text-align: center; 
+            border-radius: 8px; 
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #F9FAFB;
+            transition: all 0.2s ease;
+            min-height: 200px;
+          }
+          .quick-form-dual-image-upload:hover { 
+            border-color: #6366F1;
+            background: #F3F4F6;
+          }
+          .quick-form-dual-image-preview { 
+            max-width: 100%;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            display: none;
+          }
+          .quick-form-dual-image-label {
+            font-weight: 500;
+            color: #4B5563;
+            font-size: 14px;
+          }
+        \`;
+        document.head.appendChild(style);
+
+        // Create form
+        const form = document.createElement('form');
+        form.className = 'quick-form';
+        
+        // Create form fields
+        const formContent = ${JSON.stringify(formContent)};
+        formContent.forEach(element => {
+          const wrapper = document.createElement('div');
+          wrapper.className = 'quick-form-field';
+
+          switch (element.type) {
+            case 'TitleField':
+              const title = document.createElement('h1');
+              title.className = 'quick-form-title';
+              title.textContent = element.extraAttributes?.title || '';
+              wrapper.appendChild(title);
+              break;
+
+            case 'SubTitleField':
+              const subtitle = document.createElement('h2');
+              subtitle.className = 'quick-form-subtitle';
+              subtitle.textContent = element.extraAttributes?.title || '';
+              wrapper.appendChild(subtitle);
+              break;
+
+            case 'TextField':
+              const textLabel = document.createElement('label');
+              textLabel.className = 'quick-form-label';
+              textLabel.textContent = element.extraAttributes?.label || '';
+              
+              const textHelperText = document.createElement('div');
+              textHelperText.className = 'quick-form-helper-text';
+              textHelperText.textContent = element.extraAttributes?.helperText || '';
+              
+              const textInput = document.createElement('input');
+              textInput.type = 'text';
+              textInput.name = element.id;
+              textInput.className = 'quick-form-input';
+              textInput.placeholder = element.extraAttributes?.placeHolder || '';
+              textInput.required = element.extraAttributes?.required || false;
+              
+              wrapper.appendChild(textLabel);
+              wrapper.appendChild(textInput);
+              wrapper.appendChild(textHelperText);
+              break;
+
+            case 'CheckboxField':
+              const checkboxLabel = document.createElement('label');
+              checkboxLabel.className = 'quick-form-label';
+              checkboxLabel.textContent = element.extraAttributes?.label || '';
+              
+              const helperText = document.createElement('div');
+              helperText.className = 'quick-form-helper-text';
+              helperText.textContent = element.extraAttributes?.helperText || '';
+              
+              const checkboxWrapper = document.createElement('div');
+              checkboxWrapper.className = 'quick-form-checkbox-wrapper';
+              
+              const checkbox = document.createElement('input');
+              checkbox.type = 'checkbox';
+              checkbox.name = element.id;
+              checkbox.className = 'quick-form-checkbox';
+              checkbox.required = element.extraAttributes?.required || false;
+              
+              const checkboxText = document.createElement('span');
+              checkboxText.textContent = element.extraAttributes?.label || '';
+              
+              checkboxWrapper.appendChild(checkbox);
+              checkboxWrapper.appendChild(checkboxText);
+              
+              wrapper.appendChild(checkboxLabel);
+              wrapper.appendChild(helperText);
+              wrapper.appendChild(checkboxWrapper);
+              break;
+
+            case 'ImageUploadField':
+              const imageLabel = document.createElement('label');
+              imageLabel.className = 'quick-form-label';
+              imageLabel.textContent = element.extraAttributes?.label || '';
+              
+              const imageHelperText = document.createElement('div');
+              imageHelperText.className = 'quick-form-helper-text';
+              imageHelperText.textContent = element.extraAttributes?.helperText || '';
+              
+              const imageUpload = document.createElement('div');
+              imageUpload.className = \`quick-form-image-upload \${element.extraAttributes?.width || 'w-full'} \${element.extraAttributes?.height || 'h-48'}\`;
+              imageUpload.textContent = element.extraAttributes?.prompt || 'Click or drag to upload image';
+              
+              const imageInput = document.createElement('input');
+              imageInput.type = 'file';
+              imageInput.accept = 'image/*';
+              imageInput.style.display = 'none';
+              imageInput.name = element.id;
+              imageInput.required = element.extraAttributes?.required || false;
+              
+              const imagePreview = document.createElement('img');
+              imagePreview.className = 'quick-form-image-preview';
+              imagePreview.style.display = 'none';
+              
+              imageUpload.addEventListener('click', () => imageInput.click());
+              imageInput.addEventListener('change', (e) => {
+                const file = e.target.files && e.target.files[0];
+                if (file) {
+                  const reader = new FileReader();
+                  reader.onload = (e) => {
+                    if (e.target && e.target.result) {
+                      imagePreview.src = e.target.result.toString();
+                      imagePreview.style.display = 'block';
+                      imageUpload.style.display = 'none';
+                    }
+                  };
+                  reader.readAsDataURL(file);
+                }
+              });
+              
+              wrapper.appendChild(imageLabel);
+              wrapper.appendChild(imageHelperText);
+              wrapper.appendChild(imageUpload);
+              wrapper.appendChild(imageInput);
+              wrapper.appendChild(imagePreview);
+              break;
+
+            case 'PictureSelectField':
+              const pictureSelectLabel = document.createElement('label');
+              pictureSelectLabel.className = 'quick-form-label';
+              pictureSelectLabel.textContent = element.extraAttributes?.label || '';
+              
+              const pictureHelperText = document.createElement('div');
+              pictureHelperText.className = 'quick-form-helper-text';
+              pictureHelperText.textContent = element.extraAttributes?.helperText || '';
+              
+              const pictureGrid = document.createElement('div');
+              pictureGrid.className = 'quick-form-picture-select';
+              
+              const hiddenInput = document.createElement('input');
+              hiddenInput.type = 'hidden';
+              hiddenInput.name = element.id;
+              hiddenInput.required = element.extraAttributes?.required || false;
+              
+              const images = element.extraAttributes?.images || [];
+              images.forEach(img => {
+                const option = document.createElement('div');
+                option.className = 'quick-form-picture-option';
+                
+                const imgEl = document.createElement('img');
+                imgEl.src = img.url;
+                imgEl.alt = img.label || '';
+                
+                option.appendChild(imgEl);
+                
+                if (img.label) {
+                  const label = document.createElement('div');
+                  label.className = 'label';
+                  label.textContent = img.label;
+                  option.appendChild(label);
+                }
+                
+                option.addEventListener('click', () => {
+                  document.querySelectorAll('.quick-form-picture-option').forEach(el => 
+                    el.classList.remove('selected'));
+                  option.classList.add('selected');
+                  hiddenInput.value = img.url;
+                });
+                
+                pictureGrid.appendChild(option);
+              });
+              
+              wrapper.appendChild(pictureSelectLabel);
+              wrapper.appendChild(pictureHelperText);
+              wrapper.appendChild(pictureGrid);
+              wrapper.appendChild(hiddenInput);
+              break;
+
+            case 'RatingScaleField':
+              const ratingLabel = document.createElement('label');
+              ratingLabel.className = 'quick-form-label';
+              ratingLabel.textContent = element.extraAttributes?.label || '';
+              
+              const ratingHelperText = document.createElement('div');
+              ratingHelperText.className = 'quick-form-helper-text';
+              ratingHelperText.textContent = element.extraAttributes?.helperText || '';
+              
+              const ratingQuestion = document.createElement('div');
+              ratingQuestion.className = 'text-base font-medium text-gray-900 mt-2';
+              ratingQuestion.textContent = element.extraAttributes?.question || '';
+              
+              const ratingScale = document.createElement('div');
+              ratingScale.className = 'quick-form-rating-scale';
+              
+              const ratingButtons = document.createElement('div');
+              ratingButtons.className = 'quick-form-rating-buttons';
+              
+              const ratingInput = document.createElement('input');
+              ratingInput.type = 'hidden';
+              ratingInput.name = element.id;
+              ratingInput.required = element.extraAttributes?.required || false;
+              
+              const minValue = element.extraAttributes?.minValue || 1;
+              const maxValue = element.extraAttributes?.maxValue || 10;
+              
+              for (let i = minValue; i <= maxValue; i++) {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'quick-form-rating-button';
+                button.textContent = i.toString();
+                
+                button.addEventListener('click', () => {
+                  ratingButtons.querySelectorAll('button').forEach(btn => 
+                    btn.classList.remove('selected'));
+                  button.classList.add('selected');
+                  ratingInput.value = i.toString();
+                });
+                
+                ratingButtons.appendChild(button);
+              }
+              
+              const ratingLabels = document.createElement('div');
+              ratingLabels.className = 'quick-form-rating-labels';
+              
+              const minLabel = document.createElement('span');
+              minLabel.textContent = element.extraAttributes?.minLabel || '';
+              
+              const midLabel = document.createElement('span');
+              midLabel.textContent = element.extraAttributes?.midLabel || '';
+              
+              const maxLabel = document.createElement('span');
+              maxLabel.textContent = element.extraAttributes?.maxLabel || '';
+              
+              ratingLabels.appendChild(minLabel);
+              ratingLabels.appendChild(midLabel);
+              ratingLabels.appendChild(maxLabel);
+              
+              ratingScale.appendChild(ratingButtons);
+              ratingScale.appendChild(ratingLabels);
+              
+              wrapper.appendChild(ratingLabel);
+              wrapper.appendChild(ratingHelperText);
+              wrapper.appendChild(ratingQuestion);
+              wrapper.appendChild(ratingScale);
+              wrapper.appendChild(ratingInput);
+              break;
+
+            case 'DualImageUploadField':
+              const dualImageLabel = document.createElement('label');
+              dualImageLabel.className = 'quick-form-label';
+              dualImageLabel.textContent = element.extraAttributes?.label || '';
+              
+              const dualImageHelperText = document.createElement('div');
+              dualImageHelperText.className = 'quick-form-helper-text';
+              dualImageHelperText.textContent = element.extraAttributes?.helperText || '';
+              
+              const dualImageContainer = document.createElement('div');
+              dualImageContainer.className = 'quick-form-dual-image';
+              
+              // Create left side
+              const leftSide = document.createElement('div');
+              leftSide.className = 'quick-form-dual-image-side';
+              
+              const leftLabel = document.createElement('div');
+              leftLabel.className = 'quick-form-dual-image-label';
+              leftLabel.textContent = element.extraAttributes?.leftLabel || 'Left Image';
+              
+              const leftUpload = document.createElement('div');
+              leftUpload.className = 'quick-form-dual-image-upload';
+              leftUpload.textContent = element.extraAttributes?.leftPrompt || 'Upload left image';
+              
+              const leftInput = document.createElement('input');
+              leftInput.type = 'file';
+              leftInput.accept = 'image/*';
+              leftInput.style.display = 'none';
+              leftInput.name = \`\${element.id}_left\`;
+              leftInput.required = element.extraAttributes?.required || false;
+              
+              const leftPreview = document.createElement('img');
+              leftPreview.className = 'quick-form-dual-image-preview';
+              
+              leftSide.appendChild(leftLabel);
+              leftSide.appendChild(leftUpload);
+              leftSide.appendChild(leftInput);
+              leftSide.appendChild(leftPreview);
+              
+              // Create right side
+              const rightSide = document.createElement('div');
+              rightSide.className = 'quick-form-dual-image-side';
+              
+              const rightLabel = document.createElement('div');
+              rightLabel.className = 'quick-form-dual-image-label';
+              rightLabel.textContent = element.extraAttributes?.rightLabel || 'Right Image';
+              
+              const rightUpload = document.createElement('div');
+              rightUpload.className = 'quick-form-dual-image-upload';
+              rightUpload.textContent = element.extraAttributes?.rightPrompt || 'Upload right image';
+              
+              const rightInput = document.createElement('input');
+              rightInput.type = 'file';
+              rightInput.accept = 'image/*';
+              rightInput.style.display = 'none';
+              rightInput.name = \`\${element.id}_right\`;
+              rightInput.required = element.extraAttributes?.required || false;
+              
+              const rightPreview = document.createElement('img');
+              rightPreview.className = 'quick-form-dual-image-preview';
+              
+              rightSide.appendChild(rightLabel);
+              rightSide.appendChild(rightUpload);
+              rightSide.appendChild(rightInput);
+              rightSide.appendChild(rightPreview);
+              
+              // Add click handlers
+              leftUpload.addEventListener('click', () => leftInput.click());
+              rightUpload.addEventListener('click', () => rightInput.click());
+              
+              // Add change handlers
+              leftInput.addEventListener('change', (e) => {
+                const file = e.target.files && e.target.files[0];
+                if (file) {
+                  const reader = new FileReader();
+                  reader.onload = (e) => {
+                    if (e.target && e.target.result) {
+                      leftPreview.src = e.target.result.toString();
+                      leftPreview.style.display = 'block';
+                      leftUpload.style.display = 'none';
+                    }
+                  };
+                  reader.readAsDataURL(file);
+                }
+              });
+              
+              rightInput.addEventListener('change', (e) => {
+                const file = e.target.files && e.target.files[0];
+                if (file) {
+                  const reader = new FileReader();
+                  reader.onload = (e) => {
+                    if (e.target && e.target.result) {
+                      rightPreview.src = e.target.result.toString();
+                      rightPreview.style.display = 'block';
+                      rightUpload.style.display = 'none';
+                    }
+                  };
+                  reader.readAsDataURL(file);
+                }
+              });
+              
+              dualImageContainer.appendChild(leftSide);
+              dualImageContainer.appendChild(rightSide);
+              
+              wrapper.appendChild(dualImageLabel);
+              wrapper.appendChild(dualImageHelperText);
+              wrapper.appendChild(dualImageContainer);
+              break;
+          }
+
+          form.appendChild(wrapper);
+        });
+
+        // Add submit button wrapper
+        const submitWrapper = document.createElement('div');
+        submitWrapper.className = 'quick-form-field';
+        const submitBtn = document.createElement('button');
+        submitBtn.type = 'submit';
+        submitBtn.className = 'quick-form-submit';
+        submitBtn.textContent = 'Submit';
+        submitWrapper.appendChild(submitBtn);
+        form.appendChild(submitWrapper);
+
+        // Add form submit handler
+        form.addEventListener('submit', async (e) => {
+          e.preventDefault();
+          submitBtn.disabled = true;
+          submitBtn.textContent = 'Submitting...';
+
+          try {
+            const formData = new FormData(form);
+            const data = {};
+            
+            // Process all form fields
+            const processPromises = formContent.map(async element => {
+              const fieldName = element.id;
+              const value = formData.get(fieldName);
+              
+              if (!value && !element.extraAttributes?.required) {
+                return;
+              }
+
+              switch (element.type) {
+                case 'ImageUploadField':
+                  if (value && value instanceof File) {
+                    const base64 = await new Promise((resolve) => {
+                      const reader = new FileReader();
+                      reader.onload = (e) => {
+                        if (e.target && e.target.result) {
+                          resolve(e.target.result.toString());
+                        }
+                      };
+                      reader.readAsDataURL(value);
+                    });
+                    data[fieldName] = base64;
+                  }
+                  break;
+
+                case 'PictureSelectField':
+                  if (value) {
+                    data[fieldName] = {
+                      url: value,
+                      label: element.extraAttributes?.images?.find(img => img.url === value)?.label
+                    };
+                  }
+                  break;
+
+                case 'RatingScaleField':
+                  if (value) {
+                    data[fieldName] = {
+                      value: parseInt(value),
+                      maxValue: element.extraAttributes?.maxValue || 10,
+                      minValue: element.extraAttributes?.minValue || 1
+                    };
+                  }
+                  break;
+
+                case 'CheckboxField':
+                  data[fieldName] = !!value;
+                  break;
+
+                case 'DualImageUploadField':
+                  if (value) {
+                    const leftFile = formData.get(\`\${fieldName}_left\`);
+                    const rightFile = formData.get(\`\${fieldName}_right\`);
+                    
+                    const [leftBase64, rightBase64] = await Promise.all([
+                      leftFile instanceof File ? new Promise((resolve) => {
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                          if (e.target && e.target.result) {
+                            resolve(e.target.result.toString());
+                          }
+                        };
+                        reader.readAsDataURL(leftFile);
+                      }) : null,
+                      rightFile instanceof File ? new Promise((resolve) => {
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                          if (e.target && e.target.result) {
+                            resolve(e.target.result.toString());
+                          }
+                        };
+                        reader.readAsDataURL(rightFile);
+                      }) : null
+                    ]);
+                    
+                    data[fieldName] = {
+                      left: leftBase64,
+                      right: rightBase64
+                    };
+                  }
+                  break;
+
+                default:
+                  if (value) {
+                    data[fieldName] = value;
+                  }
+              }
+            });
+
+            // Wait for all field processing to complete
+            await Promise.all(processPromises);
+
+            console.log('Submitting form data:', data);
+
+            const response = await fetch('/api/submit-form/${formId}', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify(data)
+            });
+
+            if (!response.ok) {
+              throw new Error(\`Submission failed: \${response.status} \${response.statusText}\`);
+            }
+
+            // Show success message
+            form.innerHTML = '<div class="quick-form-field"><h2 class="quick-form-subtitle">Thank you for your submission!</h2></div>';
+          } catch (error) {
+            console.error('Form submission error:', error);
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Submit';
+            
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'quick-form-error';
+            errorDiv.textContent = 'Failed to submit form. Please try again.';
+            form.insertBefore(errorDiv, form.firstChild);
+          }
+        });
+
+        // Add form to container
+        container.appendChild(form);
+      })();
+    `;
+
+    // Return the bundle with proper JavaScript content type
+    return new NextResponse(bundle, {
+      headers: {
+        "Content-Type": "application/javascript",
+        "Cache-Control": "no-cache, no-store, must-revalidate",
+      },
+    });
+  } catch (error) {
+    console.error('Error generating form bundle:', error);
+    return new NextResponse("Error generating form bundle", { status: 500 });
+  }
+}
diff --git a/src/app/api/submit-form/[formId]/route.ts b/src/app/api/submit-form/[formId]/route.ts
new file mode 100644
index 0000000..da5dbdb
--- /dev/null
+++ b/src/app/api/submit-form/[formId]/route.ts
@@ -0,0 +1,72 @@
+import prisma from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(
+  request: Request,
+  { params }: { params: { formId: string } }
+) {
+  try {
+    const formId = parseInt(params.formId);
+    const data = await request.json();
+
+    // Get the form to verify it exists and is published
+    const form = await prisma.form.findFirst({
+      where: {
+        id: formId,
+        published: true,
+      },
+    });
+
+    if (!form) {
+      return new NextResponse("Form not found", { status: 404 });
+    }
+
+    // Save the submission and analytics
+    const submission = await prisma.submission.create({
+      data: {
+        formId,
+        content: JSON.stringify(data),
+      },
+    });
+
+    // Track analytics
+    await prisma.analytics.create({
+      data: {
+        formId,
+        submissionId: submission.id,
+        event: 'FORM_SUBMISSION',
+        metadata: JSON.stringify({
+          timestamp: new Date().toISOString(),
+          userAgent: request.headers.get('user-agent'),
+          referer: request.headers.get('referer'),
+          origin: request.headers.get('origin'),
+          fieldCount: Object.keys(data).length,
+        }),
+      },
+    });
+
+    return new NextResponse(JSON.stringify({ success: true }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'POST',
+      },
+    });
+  } catch (error) {
+    console.error('Error processing form submission:', error);
+    return new NextResponse("Error processing submission", { status: 500 });
+  }
+}
+
+// Handle CORS preflight requests
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}
diff --git a/src/components/EmbedFormPreview.tsx b/src/components/EmbedFormPreview.tsx
new file mode 100644
index 0000000..4a4c00a
--- /dev/null
+++ b/src/components/EmbedFormPreview.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react";
+
+interface EmbedFormPreviewProps {
+  formId: number;
+  previewMode?: boolean;
+}
+
+export default function EmbedFormPreview({ formId, previewMode = false }: EmbedFormPreviewProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    // Reset iframe content
+    iframe.srcdoc = `
+      <html>
+        <body>
+          <div id="quick-form-${formId}"></div>
+          <script src="/api/embed/${formId}/js" async defer onload="window.parent.postMessage('loaded', '*')"></script>
+        </body>
+      </html>
+    `;
+
+    // Listen for load message from iframe
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data === 'loaded') {
+        setIsLoading(false);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [formId]);
+
+  return (
+    <div className={`w-full ${previewMode ? "border-2 border-dashed border-gray-300 rounded-lg p-4" : ""}`}>
+      {isLoading && (
+        <div className="animate-pulse">
+          <div className="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
+          <div className="h-10 bg-gray-200 rounded mb-4"></div>
+          <div className="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
+          <div className="h-10 bg-gray-200 rounded"></div>
+        </div>
+      )}
+      <iframe
+        ref={iframeRef}
+        className="w-full min-h-[400px] border-0"
+        title={`Form Preview ${formId}`}
+      />
+    </div>
+  );
+}
diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index e0dbbf9..bf5044f 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -4,6 +4,7 @@ import { Form } from "@prisma/client";
 import React, { useEffect, useState } from "react";
 import PreviewDialogBtn from "./PreviewDialogBtn";
 import PublishFormBtn from "./PublishFormBtn";
+import GenerateCodeBtn from "./GenerateCodeBtn";
 import SaveFormBtn from "./SaveFormBtn";
 import Designer from "./Designer";
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
@@ -95,30 +96,31 @@ function FormBuilder({ form }: { form: Form }) {
             </h3>
             <div className="my-4 flex flex-col gap-2 items-center w-full border-b pb-4">
               <Input className="w-full" readOnly value={shareUrl} />
-              <Button
-                className="mt-2 w-full"
-                onClick={() => {
-                  navigator.clipboard.writeText(shareUrl);
-                  toast({
-                    title: "Copied!",
-                    description: "Link copied to clipboard",
-                  });
-                }}
-              >
-                Copy link
-              </Button>
+              <div className="flex gap-2 w-full">
+                <Button
+                  className="w-full"
+                  onClick={() => {
+                    navigator.clipboard.writeText(shareUrl);
+                    toast({
+                      title: "Copied!",
+                      description: "Link copied to clipboard",
+                    });
+                  }}
+                >
+                  Copy link
+                </Button>
+                <GenerateCodeBtn id={form.id} />
+              </div>
             </div>
-            <div className="flex justify-between">
-              <Button variant={"link"} asChild>
-                <Link href={"/"} className="gap-2">
-                  <BsArrowLeft />
-                  Go back home
+            <div className="flex justify-between items-center w-full mt-4">
+              <Button asChild variant="link">
+                <Link href="/dashboard" className="gap-2">
+                  <BsArrowLeft /> Back to dashboard
                 </Link>
               </Button>
-              <Button variant={"link"} className="opacity-70" asChild>
-                <Link href={`/forms/${form.id}`} className="gap-2">
-                  Form details
-                  <BsArrowRight />
+              <Button asChild variant="link">
+                <Link href={shareUrl} target="_blank" className="gap-2">
+                  View form <BsArrowRight />
                 </Link>
               </Button>
             </div>
@@ -151,6 +153,7 @@ function FormBuilder({ form }: { form: Form }) {
                         <div className="flex flex-col gap-3">
                           <SaveFormBtn id={form.id} />
                           <PublishFormBtn id={form.id} />
+                          <GenerateCodeBtn id={form.id} />
                         </div>
                       </div>}
                     </div>
@@ -158,14 +161,11 @@ function FormBuilder({ form }: { form: Form }) {
                     <>
                       <SaveFormBtn id={form.id} />
                       <PublishFormBtn id={form.id} />
+                      <GenerateCodeBtn id={form.id} />
                     </>
                   )}
               </>
             )}
-            {/* <div className="flex flex-col gap-3">
-                          <SaveFormBtn id={form.id} />
-                          <PublishFormBtn id={form.id} />
-                        </div> */}
           </div>
         </nav>
         <div className="flex w-full flex-grow items-center justify-center relative overflow-y-auto h-[200px] bg-accent bg-[url(/paper.svg)] dark:bg-[url(/paper-dark.svg)]">
diff --git a/src/components/FormCard.tsx b/src/components/FormCard.tsx
index c9b6027..d71ec16 100644
--- a/src/components/FormCard.tsx
+++ b/src/components/FormCard.tsx
@@ -26,127 +26,129 @@ import {
 } from "./ui/alert-dialog";
 import { toast } from "./ui/use-toast";
 import { DeleteForm } from "@/action/form";
+import GenerateCodeBtn from "./GenerateCodeBtn";
+import { useState } from "react";
 
-const FormCard = ({ form }: { form: Form }) => {
+interface FormCardProps {
+    form: Form;
+    onDelete?: (formId: number) => void;
+}
 
+const FormCard = ({ form, onDelete }: FormCardProps) => {
     const [loading, startTransition] = useTransition();
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
     const handleDelete = async () => {
         try {
-            console.log("Form deleted", form.id);
-
-            const deleted = await DeleteForm(form.id);
-
-            if (deleted) {
+            startTransition(async () => {
+                await DeleteForm(form.id);
                 toast({
-                    title: "Form Deleted!",
-                    description: "Your form has been deleted successfully!",
-                    duration: 2500,
+                    title: "Success",
+                    description: "Form deleted successfully",
                 });
-            }
-        } catch (error: any) {
-            // Handle error
+                setShowDeleteDialog(false);
+                onDelete?.(form.id);
+            });
+        } catch (error) {
             console.error("Error deleting form:", error);
-
-            if (error.message === "Form not found") {
-                toast({
-                    title: "Error",
-                    description: "The form you're trying to delete does not exist.",
-                    duration: 2500,
-                });
-            } else {
-                toast({
-                    title: "Error",
-                    description: "Failed to delete form. Please try again later.",
-                    duration: 2500,
-                });
-            }
+            toast({
+                title: "Error",
+                description: "Failed to delete form",
+                variant: "destructive",
+            });
         }
     };
 
-
     return (
-        <Card className="min-h-[200px]">
+        <Card>
             <CardHeader>
-                <CardTitle className="flex items-center gap-2 justify-between relative">
-                    <span className="font-semibold leading-6 text-[1.2rem] lg:text-[1.4rem]">{form.name}</span>
-                    {form.published && <Badge>Published</Badge>}
-                    {!form.published && <Badge variant={"destructive"}>Draft</Badge>}
-                    <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button size="icon" variant="ghost" className="rounded-full" type="button">
-                                        <PiDotsThreeOutlineVerticalFill className="w-4 h-4" />
-                                        <span className="sr-only">Actions</span>
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                    <DropdownMenuItem className="cursor-pointer">
-                                        <RiDeleteBin5Line className="mr-2" />
-                                        Delete
-                                    </DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                            <AlertDialogHeader>
-                                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                                <AlertDialogDescription>
-                                    This action cannot be undone. After deleting the form, you will not be able to retrieve it. <br />
-                                    <br />
-                                    <span className="font-medium">
-                                        By deleting this form, all associated data will be permanently removed from your account.
-                                    </span>
-                                </AlertDialogDescription>
-                            </AlertDialogHeader>
-                            <AlertDialogFooter>
-                                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                <AlertDialogAction className="bg-red-500 text-white hover:bg-red-600"
-                                    disabled={loading}
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        startTransition(handleDelete);
-                                    }}
-                                >
-                                    <p className="flex items-center gap-2" onClick={handleDelete}> <RiDeleteBin5Line />Delete {loading && <FaSpinner className="animate-spin" />}</p>
-                                </AlertDialogAction>
-                            </AlertDialogFooter>
-                        </AlertDialogContent>
-                    </AlertDialog>
+                <CardTitle className="flex items-center gap-2 justify-between">
+                    <span className="flex items-center gap-2">
+                        <FaWpforms className="h-6 w-6 text-gray-500" />
+                        {form.name}
+                    </span>
+                    <div className="flex items-center gap-2">
+                        <Badge variant={form.published ? "default" : "secondary"}>
+                            {form.published ? "Published" : "Draft"}
+                        </Badge>
+                        {form.published && (
+                            <Badge variant="secondary" className="flex gap-2">
+                                <LuView className="h-4 w-4" />
+                                {form.visits}
+                            </Badge>
+                        )}
+                    </div>
                 </CardTitle>
-                <CardDescription className="flex items-center justify-between text-muted-foreground text-sm">
-                    {formatDistance(form.createdAt, new Date(), {
-                        addSuffix: true,
-                    })}
-                    {form.published && (
-                        <span className="flex items-center gap-2">
-                            <LuView className="text-muted-foreground" />
-                            <span>{form.visits.toLocaleString()}</span>
-                            <FaWpforms className="text-muted-foreground" />
-                            <span>{form.submissions.toLocaleString()}</span>
-                        </span>
-                    )}
+                <CardDescription>
+                    Created {formatDistance(new Date(form.createdAt), new Date(), { addSuffix: true })}
                 </CardDescription>
             </CardHeader>
             <CardContent className="h-[20px] truncate text-sm text-muted-foreground">
                 {form.description || "No description"}
             </CardContent>
-            <CardFooter>
-                {form.published && (
-                    <Button asChild className="w-full mt-2 text-md gap-4">
-                        <Link href={`/forms/${form.id}`}>
-                            View submissions <BiRightArrowAlt />
-                        </Link>
-                    </Button>
-                )}
-                {!form.published && (
-                    <Button asChild variant={"secondary"} className="w-full mt-2 text-md gap-4">
-                        <Link href={`/builder/${form.id}`}>
-                            Edit form <FaEdit />
-                        </Link>
-                    </Button>
-                )}
+            <CardFooter className="flex items-center justify-between">
+                <div className="flex gap-2">
+                    {form.published ? (
+                        <>
+                            <Button variant="outline" asChild>
+                                <Link href={`/submit/${form.shareURL}`} target="_blank">
+                                    View
+                                </Link>
+                            </Button>
+                            <GenerateCodeBtn id={form.id} />
+                        </>
+                    ) : (
+                        <Button asChild>
+                            <Link href={`/builder/${form.id}`}>
+                                Edit form <BiRightArrowAlt className="ml-2 h-5 w-5" />
+                            </Link>
+                        </Button>
+                    )}
+                </div>
+                <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button size="icon" variant="ghost" className="rounded-full">
+                                <PiDotsThreeOutlineVerticalFill className="w-4 h-4" />
+                                <span className="sr-only">Actions</span>
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem 
+                                className="text-destructive focus:text-destructive cursor-pointer"
+                                onClick={() => setShowDeleteDialog(true)}
+                            >
+                                <RiDeleteBin5Line className="mr-2 h-4 w-4" />
+                                Delete
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                            <AlertDialogDescription>
+                                This will permanently delete the form "{form.name}" and all its submissions.
+                                This action cannot be undone.
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+                            <AlertDialogAction
+                                className="bg-destructive hover:bg-destructive/90"
+                                disabled={loading}
+                                onClick={handleDelete}
+                            >
+                                {loading ? (
+                                    <FaSpinner className="animate-spin mr-2 h-4 w-4" />
+                                ) : (
+                                    <RiDeleteBin5Line className="mr-2 h-4 w-4" />
+                                )}
+                                Delete
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
             </CardFooter>
         </Card>
     );
diff --git a/src/components/GenerateCodeBtn.tsx b/src/components/GenerateCodeBtn.tsx
new file mode 100644
index 0000000..e4eb687
--- /dev/null
+++ b/src/components/GenerateCodeBtn.tsx
@@ -0,0 +1,140 @@
+import { useRouter } from "next/navigation";
+import { useTransition, useState, useEffect } from "react";
+import { FaCode, FaCopy } from "react-icons/fa";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+import { toast } from "./ui/use-toast";
+import { GenerateEmbedCode } from "@/action/form-embed";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import EmbedFormPreview from "./EmbedFormPreview";
+import { GetFormById } from "@/action/form";
+
+function FormPreviewTab({ id }: { id: number }) {
+  return (
+    <div className="w-full bg-white rounded-md p-4">
+      <EmbedFormPreview key={`preview-${id}`} formId={id} previewMode />
+    </div>
+  );
+}
+
+function GenerateCodeBtn({ id }: { id: number }) {
+  const [loading, startTransition] = useTransition();
+  const [embedCode, setEmbedCode] = useState<string>("");
+  const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("embedCode");
+  const router = useRouter();
+
+  useEffect(() => {
+    if (open) {
+      startTransition(generateEmbedCode);
+    }
+  }, [open]);
+
+  async function generateEmbedCode() {
+    try {
+      // Check if form is published first
+      const form = await GetFormById(id);
+      if (!form?.published) {
+        toast({
+          title: "Form not published",
+          description: "Please publish your form before generating the embed code.",
+          variant: "destructive",
+        });
+        setOpen(false);
+        return;
+      }
+
+      const result = await GenerateEmbedCode(id);
+      setEmbedCode(result.embedCode);
+      toast({
+        title: "Success",
+        description: "Embed code has been generated. Click the copy button to copy it.",
+      });
+      router.refresh();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Something went wrong generating the embed code",
+        variant: "destructive",
+      });
+    }
+  }
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(embedCode);
+      toast({
+        title: "Copied!",
+        description: "Embed code copied to clipboard",
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to copy to clipboard",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button className="gap-2 text-white bg-gradient-to-r from-indigo-400 to-cyan-400">
+          <FaCode className="h-4 w-4" />
+          Embed
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Generate Embed Code?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will generate an embed code for your form. Make sure to publish your form first!
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full mt-2">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="embedCode">Embed Code</TabsTrigger>
+            <TabsTrigger value="preview">Preview</TabsTrigger>
+          </TabsList>
+          <TabsContent value="embedCode" className="space-y-4">
+            <div className="w-full bg-slate-950 rounded-md p-4">
+              <div className="flex items-center justify-between">
+                <pre className="text-white text-sm">{embedCode}</pre>
+                {embedCode && (
+                  <Button onClick={copyToClipboard} variant="outline" size="icon">
+                    <FaCopy />
+                  </Button>
+                )}
+              </div>
+            </div>
+          </TabsContent>
+          <TabsContent value="preview" className="space-y-4">
+            {activeTab === "preview" && embedCode && (
+              <div className="preview-container">
+                <FormPreviewTab id={id} />
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>Close</AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export { GenerateCodeBtn };
+export default GenerateCodeBtn;
diff --git a/src/components/PublishFormBtn.tsx b/src/components/PublishFormBtn.tsx
index 8ee4876..1aa00d0 100644
--- a/src/components/PublishFormBtn.tsx
+++ b/src/components/PublishFormBtn.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import { useTransition } from "react";
+import { useTransition, useState } from "react";
 import { FaSpinner } from "react-icons/fa";
 import { MdOutlinePublish } from "react-icons/md";
 import {
@@ -19,6 +19,7 @@ import { PublishForm } from "@/action/form";
 
 function PublishFormBtn({ id }: { id: number }) {
   const [loading, startTransition] = useTransition();
+  const [open, setOpen] = useState(false);
   const router = useRouter();
 
   async function publishForm() {
@@ -26,19 +27,21 @@ function PublishFormBtn({ id }: { id: number }) {
       await PublishForm(id);
       toast({
         title: "Success",
-        description: "Your form is now available to the public",
+        description: "Your form is now available to the public. You can now generate the embed code.",
       });
+      setOpen(false);
       router.refresh();
     } catch (error) {
       toast({
         title: "Error",
         description: "Something went wrong",
+        variant: "destructive",
       });
     }
   }
 
   return (
-    <AlertDialog>
+    <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger asChild>
         <Button className="gap-2 text-white bg-gradient-to-r from-indigo-400 to-cyan-400">
           <MdOutlinePublish className="h-4 w-4" />
@@ -49,12 +52,7 @@ function PublishFormBtn({ id }: { id: number }) {
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. After publishing you will not be able to edit this form. <br />
-            <br />
-            <span className="font-medium">
-              By publishing this form you will make it available to the public and you will be able to collect
-              submissions.
-            </span>
+            This will make your form available to the public. You can generate an embed code after publishing.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
@@ -66,7 +64,8 @@ function PublishFormBtn({ id }: { id: number }) {
               startTransition(publishForm);
             }}
           >
-            Proceed {loading && <FaSpinner className="animate-spin ml-2" />}
+            {loading && <FaSpinner className="animate-spin" />}
+            Publish
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6678914..84287e8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -74,7 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate"),require('daisyui')],
+  plugins: [require("tailwindcss-animate")],
 } satisfies Config
 
 export default config
\ No newline at end of file

From a0e550304f9f5aaadd0c8152e4b1fa69ea3f9fad Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Tue, 28 Jan 2025 13:34:01 +0100
Subject: [PATCH 19/40] Fixed all errors and warnings

---
 src/app/(routes)/dashboard/page.tsx         | 19 +-----------
 src/app/api/submit-form/[formId]/route.ts   | 27 +++++++----------
 src/app/forms/[id]/page.tsx                 |  2 +-
 src/app/not-found.tsx                       | 33 ++++++++++++++++++---
 src/app/sign-in/[[...sign-in]]/page.tsx     |  9 ++++--
 src/app/sign-up/[[...sign-up]]/page.tsx     |  9 ++++--
 src/components/FormBuilder.tsx              |  2 +-
 src/components/FormCard.tsx                 |  2 +-
 src/components/GenerateCodeBtn.tsx          | 24 +++++++--------
 src/components/field/DualImageUpload.tsx    |  7 +++--
 src/components/field/ImageUploadField.tsx   |  5 +++-
 src/components/field/PictureSelectField.tsx | 13 ++++++--
 12 files changed, 86 insertions(+), 66 deletions(-)

diff --git a/src/app/(routes)/dashboard/page.tsx b/src/app/(routes)/dashboard/page.tsx
index 323faca..c82b493 100644
--- a/src/app/(routes)/dashboard/page.tsx
+++ b/src/app/(routes)/dashboard/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-
+import { StatsCard } from "@/components/ui/stats-card";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ReactNode, Suspense, useEffect, useState } from "react";
@@ -119,23 +119,6 @@ interface StatsCardProps {
   icon: ReactNode;
 }
 
-function StatsCard({ title, value, icon, helperText, loading, className }: StatsCardProps) {
-  return (
-    <Card className={className}>
-      <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
-        {icon}
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">
-          {loading ? <Skeleton className="h-8 w-24" /> : value}
-        </div>
-        <p className="text-xs text-muted-foreground pt-1">{helperText}</p>
-      </CardContent>
-    </Card>
-  );
-}
-
 function FormCardSkeleton() {
   return <Skeleton className="h-[190px] w-full" />;
 }
diff --git a/src/app/api/submit-form/[formId]/route.ts b/src/app/api/submit-form/[formId]/route.ts
index da5dbdb..0db4199 100644
--- a/src/app/api/submit-form/[formId]/route.ts
+++ b/src/app/api/submit-form/[formId]/route.ts
@@ -23,31 +23,24 @@ export async function POST(
       return new NextResponse("Form not found", { status: 404 });
     }
 
-    // Save the submission and analytics
-    const submission = await prisma.submission.create({
+    // Save the submission
+    const submission = await prisma.formSubmissions.create({
       data: {
         formId,
         content: JSON.stringify(data),
       },
     });
 
-    // Track analytics
-    await prisma.analytics.create({
-      data: {
-        formId,
-        submissionId: submission.id,
-        event: 'FORM_SUBMISSION',
-        metadata: JSON.stringify({
-          timestamp: new Date().toISOString(),
-          userAgent: request.headers.get('user-agent'),
-          referer: request.headers.get('referer'),
-          origin: request.headers.get('origin'),
-          fieldCount: Object.keys(data).length,
-        }),
-      },
+    // Update form submission count
+    await prisma.form.update({
+      where: { id: formId },
+      data: { submissions: { increment: 1 } },
     });
 
-    return new NextResponse(JSON.stringify({ success: true }), {
+    return new NextResponse(JSON.stringify({
+      data: submission,
+      message: "Form submitted successfully",
+    }), {
       headers: {
         'Content-Type': 'application/json',
         'Access-Control-Allow-Origin': '*',
diff --git a/src/app/forms/[id]/page.tsx b/src/app/forms/[id]/page.tsx
index 4e8a6d0..3b4936f 100644
--- a/src/app/forms/[id]/page.tsx
+++ b/src/app/forms/[id]/page.tsx
@@ -10,7 +10,7 @@ import { format, formatDistance } from "date-fns";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { GetFormById, GetFormWithSubmissions } from "@/action/form";
-import { StatsCard } from "@/app/(routes)/dashboard/page";
+import { StatsCard } from "@/components/ui/stats-card";
 import ShareForm from "@/components/ShareForm";
 
 async function FormDetailPage({
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index c92d738..e2004e5 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,12 +1,25 @@
 import Link from 'next/link';
 import React from 'react';
+import Image from 'next/image';
 
 const NotFoundPage = () => {
     return (
         <div className='error-page'>
             <div className="mars"></div>
-            <img src="https://assets.codepen.io/1538474/404.svg" className="logo-404" />
-            <img src="https://assets.codepen.io/1538474/meteor.svg" className="meteor" />
+            <Image 
+                src="https://assets.codepen.io/1538474/404.svg" 
+                alt="404 Error" 
+                width={300}
+                height={100}
+                className="logo-404" 
+            />
+            <Image 
+                src="https://assets.codepen.io/1538474/meteor.svg" 
+                alt="Meteor" 
+                width={100}
+                height={100}
+                className="meteor" 
+            />
             <p className="title">Oh no!!</p>
             <p className="subtitle">
                 You&apos;re either misspelling the URL <br /> or requesting a page that&apos;s no longer here.
@@ -14,8 +27,20 @@ const NotFoundPage = () => {
             <div className='text-center'>
                 <Link href="/" className='text-xl py-3 px-8 bg-[#884DEE] hover:bg-[#673ab5] rounded-md text-white'>Back to Home</Link>
             </div>
-            <img src="https://assets.codepen.io/1538474/astronaut.svg" className="astronaut" />
-            <img src="https://assets.codepen.io/1538474/spaceship.svg" className="spaceship" />
+            <Image 
+                src="https://assets.codepen.io/1538474/astronaut.svg" 
+                alt="Astronaut" 
+                width={140}
+                height={140}
+                className="astronaut" 
+            />
+            <Image 
+                src="https://assets.codepen.io/1538474/spaceship.svg" 
+                alt="Spaceship" 
+                width={140}
+                height={140}
+                className="spaceship" 
+            />
         </div>
     );
 };
diff --git a/src/app/sign-in/[[...sign-in]]/page.tsx b/src/app/sign-in/[[...sign-in]]/page.tsx
index 89bcdcb..bb3e381 100644
--- a/src/app/sign-in/[[...sign-in]]/page.tsx
+++ b/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,5 +1,6 @@
 import { SignIn } from '@clerk/nextjs'
 import React from 'react'
+import Image from 'next/image'
 
 const SignInPage = () => {
     return (
@@ -7,10 +8,12 @@ const SignInPage = () => {
             <section className="">
                 <div className="lg:grid lg:min-h-screen lg:grid-cols-12">
                     <aside className="relative block h-16 lg:order-last lg:col-span-5 lg:h-full xl:col-span-6">
-                        <img
-                            alt=""
+                        <Image
+                            alt="Sign in background"
                             src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
-                            className="absolute inset-0 h-full w-full object-cover"
+                            fill
+                            className="object-cover"
+                            priority
                         />
                     </aside>
 
diff --git a/src/app/sign-up/[[...sign-up]]/page.tsx b/src/app/sign-up/[[...sign-up]]/page.tsx
index 31ea7a9..81de753 100644
--- a/src/app/sign-up/[[...sign-up]]/page.tsx
+++ b/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -1,5 +1,6 @@
 import { SignUp } from '@clerk/nextjs'
 import React from 'react'
+import Image from 'next/image'
 
 const SignUpPage = () => {
     return (
@@ -7,10 +8,12 @@ const SignUpPage = () => {
             <section className="">
                 <div className="lg:grid h-screen lg:grid-cols-12">
                     <aside className="relative block lg:order-last lg:col-span-5 lg:h-full xl:col-span-6">
-                        <img
-                            alt=""
+                        <Image
+                            alt="Sign up background"
                             src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
-                            className="absolute inset-0 h-full w-full object-cover"
+                            fill
+                            className="object-cover"
+                            priority
                         />
                     </aside>
 
diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index bf5044f..fcb19d8 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -69,7 +69,7 @@ function FormBuilder({ form }: { form: Form }) {
     setTheme(theme);
     const readyTimeout = setTimeout(() => setIsReady(true), 500);
     return () => clearTimeout(readyTimeout);
-  }, [form, setElements, isReady, setSelectedElement]);
+  }, [form, setElements, isReady, setSelectedElement, setTheme]);
 
   if (!isReady) {
     return (
diff --git a/src/components/FormCard.tsx b/src/components/FormCard.tsx
index d71ec16..aec9d0a 100644
--- a/src/components/FormCard.tsx
+++ b/src/components/FormCard.tsx
@@ -128,7 +128,7 @@ const FormCard = ({ form, onDelete }: FormCardProps) => {
                         <AlertDialogHeader>
                             <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                             <AlertDialogDescription>
-                                This will permanently delete the form "{form.name}" and all its submissions.
+                                This will permanently delete the form &ldquo;{form.name}&rdquo; and all its submissions.
                                 This action cannot be undone.
                             </AlertDialogDescription>
                         </AlertDialogHeader>
diff --git a/src/components/GenerateCodeBtn.tsx b/src/components/GenerateCodeBtn.tsx
index e4eb687..7ef02ba 100644
--- a/src/components/GenerateCodeBtn.tsx
+++ b/src/components/GenerateCodeBtn.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import { useTransition, useState, useEffect } from "react";
+import { useTransition, useState, useEffect, useCallback } from "react";
 import { FaCode, FaCopy } from "react-icons/fa";
 import {
   AlertDialog,
@@ -34,13 +34,7 @@ function GenerateCodeBtn({ id }: { id: number }) {
   const [activeTab, setActiveTab] = useState("embedCode");
   const router = useRouter();
 
-  useEffect(() => {
-    if (open) {
-      startTransition(generateEmbedCode);
-    }
-  }, [open]);
-
-  async function generateEmbedCode() {
+  const generateEmbedCode = useCallback(async () => {
     try {
       // Check if form is published first
       const form = await GetFormById(id);
@@ -54,8 +48,8 @@ function GenerateCodeBtn({ id }: { id: number }) {
         return;
       }
 
-      const result = await GenerateEmbedCode(id);
-      setEmbedCode(result.embedCode);
+      const code = await GenerateEmbedCode(id);
+      setEmbedCode(code.embedCode);
       toast({
         title: "Success",
         description: "Embed code has been generated. Click the copy button to copy it.",
@@ -64,11 +58,17 @@ function GenerateCodeBtn({ id }: { id: number }) {
     } catch (error) {
       toast({
         title: "Error",
-        description: "Something went wrong generating the embed code",
+        description: "Something went wrong while generating the embed code.",
         variant: "destructive",
       });
     }
-  }
+  }, [id, router]);
+
+  useEffect(() => {
+    if (open) {
+      startTransition(generateEmbedCode);
+    }
+  }, [open, generateEmbedCode]);
 
   const copyToClipboard = async () => {
     try {
diff --git a/src/components/field/DualImageUpload.tsx b/src/components/field/DualImageUpload.tsx
index 2a29095..acbe2e3 100644
--- a/src/components/field/DualImageUpload.tsx
+++ b/src/components/field/DualImageUpload.tsx
@@ -10,6 +10,7 @@ import { useEffect, useState, useRef } from "react";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { BsCardImage } from "react-icons/bs";
 import useDesigner from "@/hooks/useDesigner";
+import NextImage from "next/image";
 
 type CustomInstance = FormElementInstance & {
   extraAttributes: {
@@ -221,9 +222,11 @@ function FormComponent({
         {[0, 1].map((i) => (
           <div key={i} className={`${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto w-64`}>
             {previewUrls[i] ? (
-              <img 
-                src={previewUrls[i] || undefined} 
+              <NextImage 
+                src={previewUrls[i] || ''} 
                 alt="Preview" 
+                width={256}
+                height={256}
                 className="max-w-full max-h-full object-contain"
               />
             ) : (
diff --git a/src/components/field/ImageUploadField.tsx b/src/components/field/ImageUploadField.tsx
index b37949e..4fa6c94 100644
--- a/src/components/field/ImageUploadField.tsx
+++ b/src/components/field/ImageUploadField.tsx
@@ -10,6 +10,7 @@ import { useEffect, useState, useRef } from "react";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { BsCardImage } from "react-icons/bs";
 import useDesigner from "@/hooks/useDesigner";
+import NextImage from "next/image";
 
 type CustomInstance = FormElementInstance & {
   extraAttributes: {
@@ -201,9 +202,11 @@ function FormComponent({
       </Label>
       <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto`}>
         {previewUrl ? (
-          <img 
+          <NextImage 
             src={previewUrl} 
             alt="Preview" 
+            width={400}
+            height={400}
             className="max-w-full max-h-full object-contain"
           />
         ) : (
diff --git a/src/components/field/PictureSelectField.tsx b/src/components/field/PictureSelectField.tsx
index 0a46c4e..33d1829 100644
--- a/src/components/field/PictureSelectField.tsx
+++ b/src/components/field/PictureSelectField.tsx
@@ -11,6 +11,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { BsCardImage } from "react-icons/bs";
 import { Upload, X } from 'lucide-react';
 import useDesigner from "@/hooks/useDesigner";
+import Image from "next/image";
 
 type ImageOption = {
   src: string;
@@ -91,9 +92,11 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
           <div key={index} className="flex flex-col items-center">
             <div className="w-full space-y-2">
               <div className="relative">
-                <img
+                <Image
                   src={image.src}
                   alt={image.label}
+                  width={400}
+                  height={300}
                   className="w-full h-48 object-contain rounded-lg border-2 border-gray-300"
                 />
               </div>
@@ -145,9 +148,11 @@ function FormComponent({
                 onChange={() => handleImageSelect(image.label)}
                 className="sr-only"
               />
-              <img
+              <Image
                 src={image.src}
                 alt={image.label}
+                width={400}
+                height={300}
                 className={`w-full h-48 object-contain rounded-lg ${
                   selectedImage === image.label ? 'ring-4 ring-blue-500' : ''
                 }`}
@@ -350,9 +355,11 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
                         onChange={(e) => handleImageUpload(e, index)}
                         className="sr-only"
                       />
-                      <img
+                      <Image
                         src={image.src}
                         alt={image.label}
+                        width={400}
+                        height={300}
                         className="w-full h-48 object-contain rounded-lg"
                       />
                       <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity rounded-lg">

From 04bb043a1640a05d0976ce99abe80ac117ed92de Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Tue, 28 Jan 2025 14:34:59 +0100
Subject: [PATCH 20/40] Lots of layout changes

---
 Docs/AddElement.md                            | 124 ++++-
 .../migration.sql                             |   2 +
 src/components/FormElements.tsx               |  12 +-
 src/components/FormElementsSidebar.tsx        |   2 +
 src/components/field/BulletedListField.tsx    | 221 +++++++++
 src/components/field/ImageElement.tsx         | 469 ++++++++++++++++++
 src/components/field/ParagraphField.tsx       |   2 +-
 src/components/field/SubTitleField.tsx        |  96 +++-
 src/components/field/TitleField.tsx           | 221 ++++++---
 src/components/field/utils/fontStyles.ts      |  18 +
 src/components/ui/stats-card.tsx              |  31 ++
 11 files changed, 1095 insertions(+), 103 deletions(-)
 create mode 100644 prisma/migrations/20250127214005_upgrade_to_v6/migration.sql
 create mode 100644 src/components/field/BulletedListField.tsx
 create mode 100644 src/components/field/ImageElement.tsx
 create mode 100644 src/components/field/utils/fontStyles.ts
 create mode 100644 src/components/ui/stats-card.tsx

diff --git a/Docs/AddElement.md b/Docs/AddElement.md
index c5342f5..f6200b3 100644
--- a/Docs/AddElement.md
+++ b/Docs/AddElement.md
@@ -6,6 +6,94 @@ This guide explains how to add a new form element type to the Quick Form Builder
 
 Form elements are the building blocks of forms in our system. Each element type (like text fields, checkboxes, etc.) is implemented as a separate component that follows a consistent pattern and interface.
 
+## Element Categories
+
+Elements are divided into two categories in the sidebar:
+
+1. **Layout Elements**: Static elements used for form structure and presentation (e.g., Title, SubTitle, Paragraph, Separator, Spacer, Image)
+2. **Form Elements**: Interactive input elements that collect data (e.g., TextField, NumberField, ImageUpload)
+
+When adding a new element, make sure to place it in the appropriate section in `FormElementsSidebar.tsx`.
+
+## TypeScript Best Practices
+
+### Image Handling
+When working with images in TypeScript, avoid using the global `Image` constructor as it can conflict with imported icon components. Instead:
+
+```typescript
+// ❌ Don't use this
+const img = new Image();
+
+// ✅ Use this instead
+const img = document.createElement('img') as HTMLImageElement;
+```
+
+### Form Element Type Definitions
+Always define proper types for your element's attributes:
+
+```typescript
+type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    // Define your element's specific attributes here
+    label: string;
+    required: boolean;
+    // ... other attributes
+  };
+};
+
+// Use zod for runtime validation
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  required: z.boolean().default(false),
+  // ... other validations
+});
+```
+
+### Property Updates
+Always use the `useDesigner` hook to update element properties. Direct mutations of `extraAttributes` will not trigger re-renders or persist changes:
+
+```typescript
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: element.extraAttributes,
+  });
+
+  // ❌ Don't update properties directly
+  const wrongWay = () => {
+    element.extraAttributes.someProperty = newValue; // This won't work properly
+  };
+
+  // ✅ Use updateElement from useDesigner
+  const rightWay = (values: propertiesFormSchemaType) => {
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...element.extraAttributes,
+        ...values,
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(rightWay)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        {/* Form fields here */}
+      </form>
+    </Form>
+  );
+}
+```
+
 ## Step-by-Step Guide
 
 ### 1. Add Element Type Definition
@@ -127,7 +215,41 @@ function FormComponent({
 function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { updateElement } = useDesigner();
-  // Implementation for property editing
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: element.extraAttributes,
+  });
+
+  // ❌ Don't update properties directly
+  const wrongWay = () => {
+    element.extraAttributes.someProperty = newValue; // This won't work properly
+  };
+
+  // ✅ Use updateElement from useDesigner
+  const rightWay = (values: propertiesFormSchemaType) => {
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...element.extraAttributes,
+        ...values,
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(rightWay)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        {/* Form fields here */}
+      </form>
+    </Form>
+  );
 }
 ```
 
diff --git a/prisma/migrations/20250127214005_upgrade_to_v6/migration.sql b/prisma/migrations/20250127214005_upgrade_to_v6/migration.sql
new file mode 100644
index 0000000..9041f83
--- /dev/null
+++ b/prisma/migrations/20250127214005_upgrade_to_v6/migration.sql
@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "Form_userId_id_idx" ON "Form"("userId", "id");
diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index 4cb3036..e8a341d 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -13,6 +13,8 @@ import { TitleFieldFormElement } from "./field/TitleField";
 import { DualImageUploadFormElement } from "./field/DualImageUpload";
 import { ImageUploadFormElement } from "./field/ImageUploadField";
 import { RatingScaleFormElement } from "./field/RatingScaleField";
+import { ImageFormElement } from "./field/ImageElement";
+import { BulletedListFieldFormElement } from "./field/BulletedListField";
 
 export type ElementsType =
   | "TextField"
@@ -26,7 +28,9 @@ export type ElementsType =
   | "DateField"
   | "SelectField"
   | "CheckboxField"
+  | "ImageField"
   | "ImageUploadField"
+  | "BulletedListField"
   | "RatingScaleField"
   | "DualImageUpload"
   | "PictureSelectField";
@@ -69,7 +73,7 @@ type FormElementsType = {
   [key in ElementsType]: FormElement;
 };
 
-export const FormElements: FormElementsType = {
+export const FormElements = {
   TextField: TextFieldFormElement,
   TitleField: TitleFieldFormElement,
   SubTitleField: SubTitleFieldFormElement,
@@ -81,8 +85,10 @@ export const FormElements: FormElementsType = {
   DateField: DateFieldFormElement,
   SelectField: SelectFieldFormElement,
   CheckboxField: CheckboxFieldFormElement,
+  ImageField: ImageFormElement,
   ImageUploadField: ImageUploadFormElement,
-  RatingScaleField: RatingScaleFormElement,
   DualImageUpload: DualImageUploadFormElement,
+  RatingScaleField: RatingScaleFormElement,
   PictureSelectField: PictureSelectFormElement,
-};
+  BulletedListField: BulletedListFieldFormElement,
+} satisfies FormElementsType;
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index 92f1eb2..0e36923 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -13,8 +13,10 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.TitleField} />
         <SidebarBtnElement formElement={FormElements.SubTitleField} />
         <SidebarBtnElement formElement={FormElements.ParagraphField} />
+        <SidebarBtnElement formElement={FormElements.BulletedListField} />
         <SidebarBtnElement formElement={FormElements.SeparatorField} />
         <SidebarBtnElement formElement={FormElements.SpacerField} />
+        <SidebarBtnElement formElement={FormElements.ImageField} />
 
         <p className="text-sm text-muted-foreground col-span-1 md:col-span-2 my-2 place-self-start">Form elements</p>
         <SidebarBtnElement formElement={FormElements.TextField} />
diff --git a/src/components/field/BulletedListField.tsx b/src/components/field/BulletedListField.tsx
new file mode 100644
index 0000000..76ad7d3
--- /dev/null
+++ b/src/components/field/BulletedListField.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
+import { Label } from "../ui/label";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { BsListUl } from "react-icons/bs";
+import { Textarea } from "../ui/textarea";
+import useDesigner from "@/hooks/useDesigner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+const type: ElementsType = "BulletedListField";
+
+const bulletStyles = {
+  disc: "•",
+  circle: "○",
+  square: "■",
+  dash: "-",
+  arrow: "→",
+  checkmark: "✓",
+  star: "★",
+} as const;
+
+const fontSizes = {
+  h1: "text-4xl font-bold",
+  h2: "text-3xl font-semibold",
+  h3: "text-2xl font-normal",
+  h4: "text-xl font-normal",
+} as const;
+
+type BulletStyle = keyof typeof bulletStyles;
+type FontSize = keyof typeof fontSizes;
+
+const extraAttributes = {
+  items: "Item 1\nItem 2\nItem 3",
+  bulletStyle: "disc" as BulletStyle,
+  fontSize: "h3" as FontSize,
+};
+
+const propertiesSchema = z.object({
+  items: z.string().min(2).max(1000),
+  bulletStyle: z.enum(Object.keys(bulletStyles) as [BulletStyle, ...BulletStyle[]]),
+  fontSize: z.enum(Object.keys(fontSizes) as [FontSize, ...FontSize[]]),
+});
+
+export const BulletedListFieldFormElement: FormElement = {
+  type,
+  construct: (id: string) => ({
+    id,
+    type,
+    extraAttributes,
+  }),
+  designerBtnElement: {
+    icon: BsListUl,
+    label: "Bulleted List",
+  },
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+  validate: () => true,
+};
+
+type CustomInstance = FormElementInstance & {
+  extraAttributes: typeof extraAttributes;
+};
+
+function ListComponent({ items, bulletStyle, fontSize }: { items: string; bulletStyle: BulletStyle; fontSize: FontSize }) {
+  const itemsArray = items.split('\n').filter(item => item.trim() !== '');
+  
+  return (
+    <div className="flex justify-center w-full">
+      <ul className="list-none space-y-2 w-full max-w-2xl">
+        {itemsArray.map((item, index) => (
+          <li key={index} className={`flex items-start ${fontSizes[fontSize]}`}>
+            <span className="mr-2 min-w-[1.5em] text-center">{bulletStyles[bulletStyle]}</span>
+            <span className="flex-1">{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { items, bulletStyle, fontSize } = element.extraAttributes;
+  
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-muted-foreground">Bulleted List</Label>
+      <ListComponent items={items} bulletStyle={bulletStyle} fontSize={fontSize} />
+    </div>
+  );
+}
+
+function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { items, bulletStyle, fontSize } = element.extraAttributes;
+
+  return <ListComponent items={items} bulletStyle={bulletStyle} fontSize={fontSize} />;
+}
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      items: element.extraAttributes.items,
+      bulletStyle: element.extraAttributes.bulletStyle,
+      fontSize: element.extraAttributes.fontSize,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: values,
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="items"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>List Items (one per line)</FormLabel>
+              <FormControl>
+                <Textarea
+                  rows={5}
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.stopPropagation();
+                    }
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="bulletStyle"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bullet Style</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a bullet style" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.entries(bulletStyles).map(([key, value]) => (
+                    <SelectItem key={key} value={key}>
+                      {value} {key.charAt(0).toUpperCase() + key.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="fontSize"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Font Size</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a font size" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.keys(fontSizes).map((key) => (
+                    <SelectItem key={key} value={key}>
+                      {key.toUpperCase()}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/field/ImageElement.tsx b/src/components/field/ImageElement.tsx
new file mode 100644
index 0000000..6e4668f
--- /dev/null
+++ b/src/components/field/ImageElement.tsx
@@ -0,0 +1,469 @@
+"use client";
+
+import { FormElement, FormElementInstance } from "../FormElements";
+import { Label } from "../ui/label";
+import { z } from "zod";
+import { Image as ImageIcon } from "lucide-react";
+import { useRef, useState, useEffect } from "react";
+import useDesigner from "@/hooks/useDesigner";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { Input } from "../ui/input";
+
+type ImageInstance = FormElementInstance & {
+  extraAttributes: {
+    base64Image: string;
+    height: number;
+    width: number;
+    maintainAspectRatio: boolean;
+    alignment: "left" | "center" | "right";
+    marginTop: number;
+    marginBottom: number;
+    marginLeft: number;
+    marginRight: number;
+    maxDimension: number;
+  };
+};
+
+const propertiesSchema = z.object({
+  base64Image: z.string(),
+  height: z.number().min(1).max(2000),
+  width: z.number().min(1).max(2000),
+  maintainAspectRatio: z.boolean().default(true),
+  alignment: z.enum(["left", "center", "right"]).default("center"),
+  marginTop: z.number().min(0).max(100),
+  marginBottom: z.number().min(0).max(100),
+  marginLeft: z.number().min(0).max(100),
+  marginRight: z.number().min(0).max(100),
+  maxDimension: z.number().min(100).max(2000),
+});
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+
+export const ImageFormElement: FormElement = {
+  type: "ImageElement",
+  construct: (id: string) => ({
+    id,
+    type: "ImageElement",
+    extraAttributes: {
+      base64Image: "",
+      height: 200,
+      width: 200,
+      maintainAspectRatio: true,
+      alignment: "center",
+      marginTop: 0,
+      marginBottom: 0,
+      marginLeft: 0,
+      marginRight: 0,
+      maxDimension: 800,
+    },
+  }),
+
+  designerBtnElement: {
+    icon: ImageIcon,
+    label: "Image",
+  },
+
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: () => true, // Images don't need validation
+};
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as ImageInstance;
+  const { base64Image, height, width, maintainAspectRatio, alignment, marginTop, marginBottom, marginLeft, marginRight } = element.extraAttributes;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div
+      className="w-full"
+      style={{
+        textAlign: alignment,
+        marginTop: `${marginTop}px`,
+        marginBottom: `${marginBottom}px`,
+        marginLeft: `${marginLeft}px`,
+        marginRight: `${marginRight}px`,
+      }}
+    >
+      {base64Image ? (
+        <img
+          src={base64Image}
+          style={{
+            height: `${height}px`,
+            width: `${width}px`,
+            objectFit: maintainAspectRatio ? "contain" : "fill",
+            display: "inline-block"
+          }}
+          alt="Form Image"
+        />
+      ) : (
+        <div 
+          className="h-[200px] w-[200px] bg-muted rounded-md flex items-center justify-center cursor-pointer mx-auto"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <ImageIcon className="h-8 w-8 text-muted-foreground" />
+          <input
+            type="file"
+            ref={fileInputRef}
+            className="hidden"
+            accept="image/*"
+            onChange={() => {}} // Designer mode doesn't need file handling
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as ImageInstance;
+  return <DesignerComponent elementInstance={element} />;
+}
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as ImageInstance;
+  const { updateElement } = useDesigner();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      base64Image: element.extraAttributes.base64Image,
+      height: element.extraAttributes.height,
+      width: element.extraAttributes.width,
+      maintainAspectRatio: element.extraAttributes.maintainAspectRatio,
+      alignment: element.extraAttributes.alignment,
+      marginTop: element.extraAttributes.marginTop,
+      marginBottom: element.extraAttributes.marginBottom,
+      marginLeft: element.extraAttributes.marginLeft,
+      marginRight: element.extraAttributes.marginRight,
+      maxDimension: element.extraAttributes.maxDimension,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    const { base64Image, ...otherValues } = values;
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...otherValues,
+        base64Image: element.extraAttributes.base64Image, // Preserve the existing image
+      },
+    });
+  }
+
+  const resizeImage = (originalFile: File): Promise<File> => {
+    return new Promise((resolve) => {
+      const img = document.createElement('img') as HTMLImageElement;
+      img.src = URL.createObjectURL(originalFile);
+      
+      img.onload = () => {
+        let newWidth = img.width;
+        let newHeight = img.height;
+        
+        if (img.width > element.extraAttributes.maxDimension || img.height > element.extraAttributes.maxDimension) {
+          if (img.width > img.height) {
+            newWidth = element.extraAttributes.maxDimension;
+            newHeight = (img.height / img.width) * element.extraAttributes.maxDimension;
+          } else {
+            newHeight = element.extraAttributes.maxDimension;
+            newWidth = (img.width / img.height) * element.extraAttributes.maxDimension;
+          }
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+        
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(img, 0, 0, newWidth, newHeight);
+          
+          canvas.toBlob((blob) => {
+            if (blob) {
+              const resizedFile = new File([blob], originalFile.name, {
+                type: originalFile.type,
+                lastModified: Date.now(),
+              });
+              
+              resolve(resizedFile);
+            }
+          }, originalFile.type);
+        }
+
+        URL.revokeObjectURL(img.src);
+      };
+    });
+  };
+
+  const convertToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = error => reject(error);
+    });
+  };
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file && file.type.startsWith('image/')) {
+      let finalFile = file;
+      
+      const img = document.createElement('img') as HTMLImageElement;
+      img.src = URL.createObjectURL(file);
+      
+      img.onload = async () => {
+        if (img.width > element.extraAttributes.maxDimension || img.height > element.extraAttributes.maxDimension) {
+          finalFile = await resizeImage(file);
+        }
+        
+        URL.revokeObjectURL(img.src);
+        
+        // Convert the final image to base64
+        const base64Data = await convertToBase64(finalFile);
+        updateElement(element.id, {
+          ...element,
+          extraAttributes: {
+            ...element.extraAttributes,
+            base64Image: base64Data,
+          },
+        });
+      };
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <div className="flex flex-col gap-2">
+          <Label>Upload Image</Label>
+          <div 
+            className="w-full h-[200px] border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer bg-gray-50"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {element.extraAttributes.base64Image ? (
+              <img
+                src={element.extraAttributes.base64Image}
+                alt="Uploaded"
+                className="max-h-full max-w-full object-contain"
+              />
+            ) : (
+              <div className="text-gray-400">
+                <ImageIcon className="w-12 h-12 mx-auto mb-2" />
+                <p>Click to upload image</p>
+              </div>
+            )}
+            <input
+              type="file"
+              ref={fileInputRef}
+              className="hidden"
+              accept="image/*"
+              onChange={handleFileSelect}
+            />
+          </div>
+        </div>
+
+        <FormField
+          control={form.control}
+          name="height"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Height (px)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="width"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Width (px)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="maintainAspectRatio"
+          render={({ field }) => (
+            <FormItem className="flex items-center gap-2">
+              <FormControl>
+                <input
+                  type="checkbox"
+                  checked={field.value}
+                  onChange={e => field.onChange(e.target.checked)}
+                />
+              </FormControl>
+              <FormLabel>Maintain Aspect Ratio</FormLabel>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="alignment"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Alignment</FormLabel>
+              <FormControl>
+                <select
+                  className="w-full px-2 py-1 border rounded"
+                  value={field.value}
+                  onChange={e => field.onChange(e.target.value)}
+                >
+                  <option value="left">Left</option>
+                  <option value="center">Center</option>
+                  <option value="right">Right</option>
+                </select>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="marginTop"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Margin Top (px)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="marginBottom"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Margin Bottom (px)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="marginLeft"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Margin Left (px)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="marginRight"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Margin Right (px)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="maxDimension"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Max Dimension (px)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.currentTarget.blur();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+              <p className="text-sm text-muted-foreground">Images larger than this will be automatically resized</p>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/field/ParagraphField.tsx b/src/components/field/ParagraphField.tsx
index c657ca8..6ae7d30 100644
--- a/src/components/field/ParagraphField.tsx
+++ b/src/components/field/ParagraphField.tsx
@@ -50,7 +50,7 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
   return (
     <div className="flex flex-col gap-2 w-full">
       <Label className="text-muted-foreground">Paragraph field</Label>
-      <p className="truncate">{text}</p>
+      <p className="text-muted-foreground whitespace-pre-wrap break-words">{text}</p>
     </div>
   );
 }
diff --git a/src/components/field/SubTitleField.tsx b/src/components/field/SubTitleField.tsx
index 012aa28..eb828fd 100644
--- a/src/components/field/SubTitleField.tsx
+++ b/src/components/field/SubTitleField.tsx
@@ -7,19 +7,24 @@ import { z } from "zod";
 import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
-
-import { LuHeading2 } from "react-icons/lu";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { LuHeading2 } from "react-icons/lu";
 import useDesigner from "@/hooks/useDesigner";
+import { fontSizes, FontSize, fontSizeSchema, alignments, Alignment, alignmentSchema } from "./utils/fontStyles";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 const type: ElementsType = "SubTitleField";
 
 const extraAttributes = {
-  title: "SubTitle field",
+  subTitle: "Subtitle",
+  fontSize: "h2" as FontSize,
+  alignment: "center" as Alignment,
 };
 
 const propertiesSchema = z.object({
-  title: z.string().min(2).max(50),
+  subTitle: z.string().min(2).max(50),
+  fontSize: z.enum(fontSizeSchema),
+  alignment: z.enum(alignmentSchema),
 });
 
 export const SubTitleFieldFormElement: FormElement = {
@@ -31,7 +36,7 @@ export const SubTitleFieldFormElement: FormElement = {
   }),
   designerBtnElement: {
     icon: LuHeading2,
-    label: "SubTitle field",
+    label: "Subtitle",
   },
   designerComponent: DesignerComponent,
   formComponent: FormComponent,
@@ -46,11 +51,11 @@ type CustomInstance = FormElementInstance & {
 
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
-  const { title } = element.extraAttributes;
+  const { subTitle, fontSize, alignment } = element.extraAttributes;
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className="text-muted-foreground">SubTitle field</Label>
-      <p className="text-lg">{title}</p>
+      <Label className="text-muted-foreground">Subtitle field</Label>
+      <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{subTitle}</p>
     </div>
   );
 }
@@ -58,8 +63,8 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
 function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
 
-  const { title } = element.extraAttributes;
-  return <p className="text-lg">{title}</p>;
+  const { subTitle, fontSize, alignment } = element.extraAttributes;
+  return <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{subTitle}</p>;
 }
 
 type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
@@ -71,7 +76,9 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
     resolver: zodResolver(propertiesSchema),
     mode: "onBlur",
     defaultValues: {
-      title: element.extraAttributes.title,
+      subTitle: element.extraAttributes.subTitle,
+      fontSize: element.extraAttributes.fontSize,
+      alignment: element.extraAttributes.alignment,
     },
   });
 
@@ -80,12 +87,9 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   }, [element, form]);
 
   function applyChanges(values: propertiesFormSchemaType) {
-    const { title } = values;
     updateElement(element.id, {
       ...element,
-      extraAttributes: {
-        title,
-      },
+      extraAttributes: values,
     });
   }
 
@@ -100,15 +104,15 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
       >
         <FormField
           control={form.control}
-          name="title"
+          name="subTitle"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Title</FormLabel>
+              <FormLabel>Subtitle</FormLabel>
               <FormControl>
                 <Input
                   {...field}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -116,6 +120,62 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
             </FormItem>
           )}
         />
+
+        <FormField
+          control={form.control}
+          name="fontSize"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Font Size</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a font size" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.keys(fontSizes).map((key) => (
+                    <SelectItem key={key} value={key}>
+                      {key.toUpperCase()}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="alignment"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Text Alignment</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select text alignment" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.keys(alignments).map((key) => (
+                    <SelectItem key={key} value={key}>
+                      {key.charAt(0).toUpperCase() + key.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
       </form>
     </Form>
   );
diff --git a/src/components/field/TitleField.tsx b/src/components/field/TitleField.tsx
index 7a98590..f2c30be 100644
--- a/src/components/field/TitleField.tsx
+++ b/src/components/field/TitleField.tsx
@@ -11,112 +11,173 @@ import { useEffect } from "react";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { LuHeading1 } from "react-icons/lu";
 import useDesigner from "@/hooks/useDesigner";
+import { fontSizes, FontSize, fontSizeSchema, alignments, Alignment, alignmentSchema } from "./utils/fontStyles";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 const type: ElementsType = "TitleField";
 
 const extraAttributes = {
-    title: "Title field",
+  title: "Title",
+  fontSize: "h1" as FontSize,
+  alignment: "center" as Alignment,
 };
 
 const propertiesSchema = z.object({
-    title: z.string().min(2).max(50),
+  title: z.string().min(2).max(50),
+  fontSize: z.enum(fontSizeSchema),
+  alignment: z.enum(alignmentSchema),
 });
 
 export const TitleFieldFormElement: FormElement = {
+  type,
+  construct: (id: string) => ({
+    id,
     type,
-    construct: (id: string) => ({
-        id,
-        type,
-        extraAttributes,
-    }),
-    designerBtnElement: {
-        icon: LuHeading1,
-        label: "Title field",
-    },
-    designerComponent: DesignerComponent,
-    formComponent: FormComponent,
-    propertiesComponent: PropertiesComponent,
-
-    validate: () => true,
+    extraAttributes,
+  }),
+  designerBtnElement: {
+    icon: LuHeading1,
+    label: "Title",
+  },
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: () => true,
 };
 
 type CustomInstance = FormElementInstance & {
-    extraAttributes: typeof extraAttributes;
+  extraAttributes: typeof extraAttributes;
 };
 
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
-    const element = elementInstance as CustomInstance;
-    const { title } = element.extraAttributes;
-    return (
-        <div className="flex flex-col gap-2 w-full">
-            <Label className="text-muted-foreground">Title field</Label>
-            <p className="text-xl">{title}</p>
-        </div>
-    );
+  const element = elementInstance as CustomInstance;
+  const { title, fontSize, alignment } = element.extraAttributes;
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-muted-foreground">Title field</Label>
+      <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{title}</p>
+    </div>
+  );
 }
 
 function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
-    const element = elementInstance as CustomInstance;
+  const element = elementInstance as CustomInstance;
 
-    const { title } = element.extraAttributes;
-    return <p className="text-xl">{title}</p>;
+  const { title, fontSize, alignment } = element.extraAttributes;
+  return <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{title}</p>;
 }
 
 type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
 
 function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
-    const element = elementInstance as CustomInstance;
-    const { updateElement } = useDesigner();
-    const form = useForm<propertiesFormSchemaType>({
-        resolver: zodResolver(propertiesSchema),
-        mode: "onBlur",
-        defaultValues: {
-            title: element.extraAttributes.title,
-        },
-    });
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      title: element.extraAttributes.title,
+      fontSize: element.extraAttributes.fontSize,
+      alignment: element.extraAttributes.alignment,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
 
-    useEffect(() => {
-        form.reset(element.extraAttributes);
-    }, [element, form]);
-
-    function applyChanges(values: propertiesFormSchemaType) {
-        const { title } = values;
-        updateElement(element.id, {
-            ...element,
-            extraAttributes: {
-                title,
-            },
-        });
-    }
-
-    return (
-        <Form {...form}>
-            <form
-                onBlur={form.handleSubmit(applyChanges)}
-                onSubmit={(e) => {
-                    e.preventDefault();
-                }}
-                className="space-y-3"
-            >
-                <FormField
-                    control={form.control}
-                    name="title"
-                    render={({ field }) => (
-                        <FormItem>
-                            <FormLabel>Title</FormLabel>
-                            <FormControl>
-                                <Input
-                                    {...field}
-                                    onKeyDown={(e) => {
-                                        if (e.key === "Enter") e.currentTarget.blur();
-                                    }}
-                                />
-                            </FormControl>
-                            <FormMessage />
-                        </FormItem>
-                    )}
+  function applyChanges(values: propertiesFormSchemaType) {
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: values,
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Title</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") e.preventDefault();
+                  }}
                 />
-            </form>
-        </Form>
-    );
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="fontSize"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Font Size</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a font size" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.keys(fontSizes).map((key) => (
+                    <SelectItem key={key} value={key}>
+                      {key.toUpperCase()}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="alignment"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Text Alignment</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select text alignment" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.keys(alignments).map((key) => (
+                    <SelectItem key={key} value={key}>
+                      {key.charAt(0).toUpperCase() + key.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
 }
\ No newline at end of file
diff --git a/src/components/field/utils/fontStyles.ts b/src/components/field/utils/fontStyles.ts
new file mode 100644
index 0000000..e51a5d3
--- /dev/null
+++ b/src/components/field/utils/fontStyles.ts
@@ -0,0 +1,18 @@
+export const fontSizes = {
+  h1: "text-4xl font-bold",
+  h2: "text-3xl font-semibold",
+  h3: "text-2xl font-normal",
+  h4: "text-xl font-normal",
+} as const;
+
+export const alignments = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+} as const;
+
+export type FontSize = keyof typeof fontSizes;
+export type Alignment = keyof typeof alignments;
+
+export const fontSizeSchema = Object.keys(fontSizes) as [FontSize, ...FontSize[]];
+export const alignmentSchema = Object.keys(alignments) as [Alignment, ...Alignment[]];
diff --git a/src/components/ui/stats-card.tsx b/src/components/ui/stats-card.tsx
new file mode 100644
index 0000000..666e825
--- /dev/null
+++ b/src/components/ui/stats-card.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface StatsCardProps {
+  title: string;
+  value: string;
+  helperText: string;
+  className: string;
+  loading: boolean;
+  icon: ReactNode;
+}
+
+export function StatsCard({ title, value, icon, helperText, loading, className }: StatsCardProps) {
+  return (
+    <Card className={className}>
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+        {icon}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">
+          {loading ? <Skeleton className="h-8 w-24" /> : value}
+        </div>
+        <p className="text-xs text-muted-foreground pt-1">{helperText}</p>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file

From 7aaa4a2dda4e5da55e0e42c7baf38890908a4ec6 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Tue, 28 Jan 2025 15:16:49 +0100
Subject: [PATCH 21/40] Added image element to layout

---
 src/components/FormElements.tsx           |  20 +-
 src/components/FormElementsSidebar.tsx    |   2 +-
 src/components/SidebarBtnElement.tsx      |   8 +-
 src/components/field/ImageUploadField.tsx | 235 +++++++++++-----------
 4 files changed, 130 insertions(+), 135 deletions(-)

diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index e8a341d..b61b756 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -11,7 +11,7 @@ import { TextAreaFormElement } from "./field/TextAreaField";
 import { TextFieldFormElement } from "./field/TextField";
 import { TitleFieldFormElement } from "./field/TitleField";
 import { DualImageUploadFormElement } from "./field/DualImageUpload";
-import { ImageUploadFormElement } from "./field/ImageUploadField";
+import { ImageUploadFieldFormElement } from "./field/ImageUploadField";
 import { RatingScaleFormElement } from "./field/RatingScaleField";
 import { ImageFormElement } from "./field/ImageElement";
 import { BulletedListFieldFormElement } from "./field/BulletedListField";
@@ -28,7 +28,7 @@ export type ElementsType =
   | "DateField"
   | "SelectField"
   | "CheckboxField"
-  | "ImageField"
+  | "ImageElement"
   | "ImageUploadField"
   | "BulletedListField"
   | "RatingScaleField"
@@ -37,7 +37,7 @@ export type ElementsType =
 
 export type SubmitFunction = (key: string, value: string) => void;
 
-export type FormElement = {
+export interface FormElement {
   type: ElementsType;
 
   construct: (id: string) => FormElementInstance;
@@ -50,30 +50,32 @@ export type FormElement = {
   designerComponent: React.FC<{
     elementInstance: FormElementInstance;
   }>;
+
   formComponent: React.FC<{
     elementInstance: FormElementInstance;
     submitValue?: SubmitFunction;
     isInvalid?: boolean;
     defaultValue?: string;
   }>;
+
   propertiesComponent: React.FC<{
     elementInstance: FormElementInstance;
   }>;
 
   validate: (formElement: FormElementInstance, currentValue: string) => boolean;
-};
+}
 
-export type FormElementInstance = {
+export interface FormElementInstance {
   id: string;
   type: ElementsType;
   extraAttributes?: Record<string, any>;
-};
+}
 
 type FormElementsType = {
   [key in ElementsType]: FormElement;
 };
 
-export const FormElements = {
+export const FormElements: FormElementsType = {
   TextField: TextFieldFormElement,
   TitleField: TitleFieldFormElement,
   SubTitleField: SubTitleFieldFormElement,
@@ -85,8 +87,8 @@ export const FormElements = {
   DateField: DateFieldFormElement,
   SelectField: SelectFieldFormElement,
   CheckboxField: CheckboxFieldFormElement,
-  ImageField: ImageFormElement,
-  ImageUploadField: ImageUploadFormElement,
+  ImageElement: ImageFormElement,
+  ImageUploadField: ImageUploadFieldFormElement,
   DualImageUpload: DualImageUploadFormElement,
   RatingScaleField: RatingScaleFormElement,
   PictureSelectField: PictureSelectFormElement,
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index 0e36923..1e640a1 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -16,7 +16,7 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.BulletedListField} />
         <SidebarBtnElement formElement={FormElements.SeparatorField} />
         <SidebarBtnElement formElement={FormElements.SpacerField} />
-        <SidebarBtnElement formElement={FormElements.ImageField} />
+        <SidebarBtnElement formElement={FormElements.ImageElement} />
 
         <p className="text-sm text-muted-foreground col-span-1 md:col-span-2 my-2 place-self-start">Form elements</p>
         <SidebarBtnElement formElement={FormElements.TextField} />
diff --git a/src/components/SidebarBtnElement.tsx b/src/components/SidebarBtnElement.tsx
index 4e33848..4375baa 100644
--- a/src/components/SidebarBtnElement.tsx
+++ b/src/components/SidebarBtnElement.tsx
@@ -5,7 +5,7 @@ import { useDraggable } from "@dnd-kit/core";
 import { cn } from "@/lib/utils";
 
 function SidebarBtnElement({ formElement }: { formElement: FormElement }) {
-  const { label, icon: Icon } = formElement.designerBtnElement;
+  const { label, icon: Icon } = formElement.designerBtnElement || {};
   const draggable = useDraggable({
     id: `designer-btn-${formElement.type}`,
     data: {
@@ -14,6 +14,8 @@ function SidebarBtnElement({ formElement }: { formElement: FormElement }) {
     },
   });
 
+  if (!Icon || !label) return null;
+
   return (
     <Button
       ref={draggable.setNodeRef}
@@ -32,7 +34,9 @@ function SidebarBtnElement({ formElement }: { formElement: FormElement }) {
 }
 
 export function SidebarBtnElementDragOverlay({ formElement }: { formElement: FormElement }) {
-  const { label, icon: Icon } = formElement.designerBtnElement;
+  const { label, icon: Icon } = formElement.designerBtnElement || {};
+
+  if (!Icon || !label) return null;
 
   return (
     <Button variant={"outline"} className="flex flex-col gap-2 h-[120px] w-[120px] cursor-grab">
diff --git a/src/components/field/ImageUploadField.tsx b/src/components/field/ImageUploadField.tsx
index 4fa6c94..a829e95 100644
--- a/src/components/field/ImageUploadField.tsx
+++ b/src/components/field/ImageUploadField.tsx
@@ -11,18 +11,24 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { BsCardImage } from "react-icons/bs";
 import useDesigner from "@/hooks/useDesigner";
 import NextImage from "next/image";
+import { Button } from "../ui/button";
+import { Checkbox } from "../ui/checkbox";
+
+const type: ElementsType = "ImageUploadField";
+
+const extraAttributes = {
+  label: "Image Upload",
+  helperText: "Upload an image file",
+  required: false,
+  prompt: "Upload an image",
+  buttonText: "Choose File",
+  width: "w-96",
+  height: "h-64",
+  maxDimension: 800,
+};
 
 type CustomInstance = FormElementInstance & {
-  extraAttributes: {
-    label: string;
-    helperText: string;
-    required: boolean;
-    prompt: string;
-    buttonText: string;
-    width: string;
-    height: string;
-    maxDimension: number;
-  };
+  extraAttributes: typeof extraAttributes;
 };
 
 const propertiesSchema = z.object({
@@ -36,41 +42,6 @@ const propertiesSchema = z.object({
   maxDimension: z.number().min(100).max(2000),
 });
 
-export const ImageUploadFormElement: FormElement = {
-  type: "ImageUploadField",
-  construct: (id: string) => ({
-    id,
-    type: "ImageUploadField",
-    extraAttributes: {
-      label: "Image Upload",
-      helperText: "Upload an image file",
-      required: false,
-      prompt: "Upload an image",
-      buttonText: "Choose File",
-      width: "w-96",
-      height: "h-64",
-      maxDimension: 800,
-    },
-  }),
-
-  designerBtnElement: {
-    icon: BsCardImage,
-    label: "Image Upload",
-  },
-
-  designerComponent: DesignerComponent,
-  formComponent: FormComponent,
-  propertiesComponent: PropertiesComponent,
-
-  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
-    const element = formElement as CustomInstance;
-    if (element.extraAttributes.required) {
-      return currentValue.length > 0;
-    }
-    return true;
-  },
-};
-
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { label, helperText, required, prompt, buttonText, width, height } = element.extraAttributes;
@@ -109,49 +80,48 @@ function FormComponent({
   defaultValue?: string;
 }) {
   const element = elementInstance as CustomInstance;
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [fileName, setFileName] = useState("No file chosen");
+  const [previewUrl, setPreviewUrl] = useState<string | null>(defaultValue || null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { prompt, buttonText, width, height, maxDimension } = element.extraAttributes;
 
-  const resizeImage = (originalFile: File): Promise<File> => {
+  const resizeImage = async (originalFile: File): Promise<File> => {
     return new Promise((resolve) => {
       const img = new Image();
       img.src = URL.createObjectURL(originalFile);
-      
+
       img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d')!;
+
+        // Calculate new dimensions while maintaining aspect ratio
         let newWidth = img.width;
         let newHeight = img.height;
-        
-        if (img.width > maxDimension || img.height > maxDimension) {
-          if (img.width > img.height) {
+
+        if (newWidth > maxDimension || newHeight > maxDimension) {
+          if (newWidth > newHeight) {
+            newHeight = (newHeight / newWidth) * maxDimension;
             newWidth = maxDimension;
-            newHeight = (img.height / img.width) * maxDimension;
           } else {
+            newWidth = (newWidth / newHeight) * maxDimension;
             newHeight = maxDimension;
-            newWidth = (img.width / img.height) * maxDimension;
           }
         }
 
-        const canvas = document.createElement('canvas');
         canvas.width = newWidth;
         canvas.height = newHeight;
-        
-        const ctx = canvas.getContext('2d');
-        if (ctx) {
-          ctx.drawImage(img, 0, 0, newWidth, newHeight);
-          
-          canvas.toBlob((blob) => {
-            if (blob) {
-              const resizedFile = new File([blob], originalFile.name, {
-                type: originalFile.type,
-                lastModified: Date.now(),
-              });
-              
-              resolve(resizedFile);
-            }
-          }, originalFile.type);
-        }
+
+        ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const resizedFile = new File([blob], originalFile.name, {
+              type: originalFile.type,
+              lastModified: Date.now(),
+            });
+            resolve(resizedFile);
+          }
+        }, originalFile.type);
 
         URL.revokeObjectURL(img.src);
       };
@@ -171,17 +141,17 @@ function FormComponent({
     const file = event.target.files?.[0];
     if (file && file.type.startsWith('image/')) {
       setFileName(file.name);
-      
+
       let finalFile = file;
-      
+
       const img = new Image();
       img.src = URL.createObjectURL(file);
-      
+
       img.onload = async () => {
         if (img.width > maxDimension || img.height > maxDimension) {
           finalFile = await resizeImage(file);
         }
-        
+
         URL.revokeObjectURL(img.src);
         
         // Convert the final image to base64 and set preview
@@ -194,6 +164,10 @@ function FormComponent({
     }
   };
 
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
   return (
     <div className="flex flex-col gap-2 w-full">
       <Label className={`${isInvalid ? "text-red-500" : ""} text-center w-full pb-2`}>
@@ -203,8 +177,8 @@ function FormComponent({
       <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto`}>
         {previewUrl ? (
           <NextImage 
-            src={previewUrl} 
-            alt="Preview" 
+            src={previewUrl}
+            alt="Preview"
             width={400}
             height={400}
             className="max-w-full max-h-full object-contain"
@@ -219,36 +193,29 @@ function FormComponent({
                 d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
               />
             </svg>
+            <p className="text-sm text-center">{prompt}</p>
           </div>
         )}
       </div>
-      <div className="text-sm text-gray-600 max-w-prose text-center px-4 whitespace-normal">
-        {prompt}
-      </div>
-      <div className="flex w-full max-w-xs">
+      <div className="flex justify-center items-center gap-2">
         <input
           type="file"
-          ref={fileInputRef}
-          onChange={handleFileSelect}
           accept="image/*"
+          onChange={handleFileSelect}
           className="hidden"
+          ref={fileInputRef}
         />
-        <div 
-          className="flex w-full cursor-pointer"
-          onClick={() => fileInputRef.current?.click()}
+        <Button
+          onClick={handleButtonClick}
+          variant="outline"
+          className="px-4 py-2"
         >
-          <div className="bg-blue-500 text-white px-4 py-2 rounded-l-lg hover:bg-blue-600 transition-colors duration-200">
-            {buttonText}
-          </div>
-          <div className="flex-1 px-4 py-2 bg-gray-100 text-gray-600 truncate rounded-r-lg border-y border-r border-gray-200">
-            {fileName}
-          </div>
-        </div>
+          {buttonText}
+        </Button>
+        <span className="text-sm text-gray-500">{fileName}</span>
       </div>
       {element.extraAttributes.helperText && (
-        <p className={`text-[0.8rem] ${isInvalid ? "text-red-500" : "text-muted-foreground"}`}>
-          {element.extraAttributes.helperText}
-        </p>
+        <p className="text-muted-foreground text-[0.8rem]">{element.extraAttributes.helperText}</p>
       )}
     </div>
   );
@@ -279,9 +246,19 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   }, [element, form]);
 
   function applyChanges(values: propertiesFormSchemaType) {
+    const { label, helperText, required, prompt, buttonText, width, height, maxDimension } = values;
     updateElement(element.id, {
       ...element,
-      extraAttributes: values,
+      extraAttributes: {
+        label,
+        helperText,
+        required,
+        prompt,
+        buttonText,
+        width,
+        height,
+        maxDimension,
+      },
     });
   }
 
@@ -304,7 +281,7 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
                 <Input
                   {...field}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -315,15 +292,15 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
 
         <FormField
           control={form.control}
-          name="prompt"
+          name="helperText"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Prompt Text</FormLabel>
+              <FormLabel>Helper text</FormLabel>
               <FormControl>
                 <Input
                   {...field}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -334,15 +311,15 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
 
         <FormField
           control={form.control}
-          name="buttonText"
+          name="prompt"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Button Text</FormLabel>
+              <FormLabel>Prompt text</FormLabel>
               <FormControl>
                 <Input
                   {...field}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -353,15 +330,15 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
 
         <FormField
           control={form.control}
-          name="helperText"
+          name="buttonText"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Helper text</FormLabel>
+              <FormLabel>Button text</FormLabel>
               <FormControl>
                 <Input
                   {...field}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -375,12 +352,12 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
           name="width"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Width (Tailwind class)</FormLabel>
+              <FormLabel>Width</FormLabel>
               <FormControl>
                 <Input
                   {...field}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -394,12 +371,12 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
           name="height"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Height (Tailwind class)</FormLabel>
+              <FormLabel>Height</FormLabel>
               <FormControl>
                 <Input
                   {...field}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -413,16 +390,13 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
           name="maxDimension"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Max Dimension (pixels)</FormLabel>
+              <FormLabel>Max dimension (px)</FormLabel>
               <FormControl>
                 <Input
                   {...field}
                   type="number"
-                  min={100}
-                  max={2000}
-                  onChange={(e) => field.onChange(parseInt(e.target.value))}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
+                    if (e.key === "Enter") e.preventDefault();
                   }}
                 />
               </FormControl>
@@ -435,18 +409,14 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
           control={form.control}
           name="required"
           render={({ field }) => (
-            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
-              <div className="space-y-0.5">
-                <FormLabel>Required</FormLabel>
-              </div>
+            <FormItem className="flex items-center gap-2 space-y-0">
               <FormControl>
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={field.value}
-                  onChange={field.onChange}
-                  className="accent-primary"
+                  onCheckedChange={field.onChange}
                 />
               </FormControl>
+              <FormLabel>Required</FormLabel>
             </FormItem>
           )}
         />
@@ -454,3 +424,22 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
     </Form>
   );
 }
+
+export const ImageUploadFieldFormElement: FormElement = {
+  type,
+  construct: (id: string) => ({
+    id,
+    type,
+    extraAttributes,
+  }),
+  designerBtnElement: {
+    icon: BsCardImage,
+    label: "Image Upload",
+  },
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+  validate: (formElement: FormElementInstance, currentValue: string) => {
+    return true;
+  },
+};

From f54c644e35e7c9191c764466f8dbf1b401424f7d Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Tue, 28 Jan 2025 15:25:19 +0100
Subject: [PATCH 22/40] Seemingly works ok

---
 src/components/field/ImageUploadField.tsx | 204 ++++++++++------------
 1 file changed, 89 insertions(+), 115 deletions(-)

diff --git a/src/components/field/ImageUploadField.tsx b/src/components/field/ImageUploadField.tsx
index a829e95..6482c5a 100644
--- a/src/components/field/ImageUploadField.tsx
+++ b/src/components/field/ImageUploadField.tsx
@@ -13,6 +13,7 @@ import useDesigner from "@/hooks/useDesigner";
 import NextImage from "next/image";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
+import clsx from "clsx";
 
 const type: ElementsType = "ImageUploadField";
 
@@ -80,87 +81,43 @@ function FormComponent({
   defaultValue?: string;
 }) {
   const element = elementInstance as CustomInstance;
-  const [fileName, setFileName] = useState("No file chosen");
-  const [previewUrl, setPreviewUrl] = useState<string | null>(defaultValue || null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const { prompt, buttonText, width, height, maxDimension } = element.extraAttributes;
-
-  const resizeImage = async (originalFile: File): Promise<File> => {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.src = URL.createObjectURL(originalFile);
-
-      img.onload = () => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d')!;
-
-        // Calculate new dimensions while maintaining aspect ratio
-        let newWidth = img.width;
-        let newHeight = img.height;
-
-        if (newWidth > maxDimension || newHeight > maxDimension) {
-          if (newWidth > newHeight) {
-            newHeight = (newHeight / newWidth) * maxDimension;
-            newWidth = maxDimension;
-          } else {
-            newWidth = (newWidth / newHeight) * maxDimension;
-            newHeight = maxDimension;
-          }
-        }
-
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-
-        ctx.drawImage(img, 0, 0, newWidth, newHeight);
+  const { label, helperText, required, prompt, buttonText, width, height } = element.extraAttributes;
 
-        canvas.toBlob((blob) => {
-          if (blob) {
-            const resizedFile = new File([blob], originalFile.name, {
-              type: originalFile.type,
-              lastModified: Date.now(),
-            });
-            resolve(resizedFile);
-          }
-        }, originalFile.type);
+  const [previewImage, setPreviewImage] = useState<string | null>(defaultValue || null);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-        URL.revokeObjectURL(img.src);
-      };
-    });
+  const handleFileSelect = (file: File) => {
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const base64String = e.target?.result as string;
+      setPreviewImage(base64String);
+      if (submitValue) {
+        submitValue(elementInstance.id, base64String);
+      }
+    };
+    reader.readAsDataURL(file);
   };
 
-  const convertToBase64 = (file: File): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = error => reject(error);
-    });
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
   };
 
-  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file && file.type.startsWith('image/')) {
-      setFileName(file.name);
-
-      let finalFile = file;
-
-      const img = new Image();
-      img.src = URL.createObjectURL(file);
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
 
-      img.onload = async () => {
-        if (img.width > maxDimension || img.height > maxDimension) {
-          finalFile = await resizeImage(file);
-        }
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
 
-        URL.revokeObjectURL(img.src);
-        
-        // Convert the final image to base64 and set preview
-        const base64Data = await convertToBase64(finalFile);
-        setPreviewUrl(base64Data);
-        
-        // Submit the base64 data instead of just the filename
-        submitValue?.(elementInstance.id, base64Data);
-      };
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith("image/")) {
+      handleFileSelect(file);
     }
   };
 
@@ -170,52 +127,69 @@ function FormComponent({
 
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className={`${isInvalid ? "text-red-500" : ""} text-center w-full pb-2`}>
-        {element.extraAttributes.label}
-        {element.extraAttributes.required && "*"}
+      <Label className={clsx(isInvalid && "text-red-500")}>
+        {label}
+        {required && "*"}
       </Label>
-      <div className={`${width} ${height} border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 mx-auto`}>
-        {previewUrl ? (
-          <NextImage 
-            src={previewUrl}
-            alt="Preview"
-            width={400}
-            height={400}
-            className="max-w-full max-h-full object-contain"
-          />
-        ) : (
-          <div className="text-gray-400">
-            <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path 
-                strokeLinecap="round" 
-                strokeLinejoin="round" 
-                strokeWidth={2} 
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 
-              />
-            </svg>
-            <p className="text-sm text-center">{prompt}</p>
+      <div
+        className={clsx(
+          "relative flex flex-col items-center justify-center p-4 border-2 border-dashed rounded-lg transition-colors",
+          width,
+          height,
+          isDragging ? "border-primary bg-primary/10" : "border-gray-300",
+          isInvalid && "border-red-500"
+        )}
+        onDragEnter={handleDragEnter}
+        onDragOver={(e) => e.preventDefault()}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {previewImage ? (
+          <div className="relative w-full h-full">
+            <img
+              src={previewImage}
+              alt="Preview"
+              className="w-full h-full object-contain"
+            />
+            <Button
+              variant="outline"
+              className="absolute top-2 right-2"
+              onClick={() => setPreviewImage(null)}
+            >
+              Change
+            </Button>
           </div>
+        ) : (
+          <>
+            <input
+              type="file"
+              ref={fileInputRef}
+              accept="image/*"
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) handleFileSelect(file);
+              }}
+            />
+            <div className="text-center">
+              <BsCardImage className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+              <p className="mb-2 text-sm text-gray-500">{prompt}</p>
+              <Button
+                type="button"
+                variant="outline"
+                className="mx-auto"
+                onClick={handleButtonClick}
+              >
+                {buttonText}
+              </Button>
+            </div>
+          </>
         )}
       </div>
-      <div className="flex justify-center items-center gap-2">
-        <input
-          type="file"
-          accept="image/*"
-          onChange={handleFileSelect}
-          className="hidden"
-          ref={fileInputRef}
-        />
-        <Button
-          onClick={handleButtonClick}
-          variant="outline"
-          className="px-4 py-2"
-        >
-          {buttonText}
-        </Button>
-        <span className="text-sm text-gray-500">{fileName}</span>
-      </div>
-      {element.extraAttributes.helperText && (
-        <p className="text-muted-foreground text-[0.8rem]">{element.extraAttributes.helperText}</p>
+      {helperText && (
+        <p className={clsx("text-muted-foreground text-[0.8rem]", isInvalid && "text-red-500")}>
+          {helperText}
+        </p>
       )}
     </div>
   );

From 603747bab8377ac97ae77458b8238d79615e7bd5 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Tue, 28 Jan 2025 16:50:33 +0100
Subject: [PATCH 23/40] Cleaning up layout elements

---
 next.config.mjs                               |  10 +
 package-lock.json                             | 408 +++++++++++++++++-
 package.json                                  |   1 +
 .../placeholder/[width]/[height]/route.tsx    |  36 ++
 src/components/Designer.tsx                   |  14 +-
 src/components/FormBuilder.tsx                |   2 +
 src/components/PreviewDialogBtn.tsx           |  18 +-
 src/components/ThemeSelector.tsx              |  36 ++
 src/components/field/BulletedListField.tsx    |  37 +-
 src/components/field/PictureSelectField.tsx   |  24 +-
 src/components/field/SubTitleField.tsx        |  13 +-
 src/components/field/TitleField.tsx           |  13 +-
 src/schemas/form.ts                           |  73 +++-
 13 files changed, 607 insertions(+), 78 deletions(-)
 create mode 100644 src/app/api/placeholder/[width]/[height]/route.tsx
 create mode 100644 src/components/ThemeSelector.tsx

diff --git a/next.config.mjs b/next.config.mjs
index 6f50f45..2f2c6cb 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -4,6 +4,16 @@ const nextConfig = {
     serverActions: {
       bodySizeLimit: '10mb'
     }
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'placehold.co',
+      },
+    ],
+    domains: ['placehold.co'],
+    unoptimized: true
   }
 };
 
diff --git a/package-lock.json b/package-lock.json
index c01c4b3..b940515 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
+        "canvas": "^3.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",
@@ -2833,6 +2834,26 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2841,6 +2862,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2894,6 +2926,30 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -2985,6 +3041,20 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.1.0.tgz",
+      "integrity": "sha512-tTj3CqqukVJ9NgSahykNwtGda7V33VLObwrHfzT0vqJXu7J4d4C/7kQQW3fOEGDfZZoILPut5H00gOjyttPGyg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || >= 20.9.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3035,6 +3105,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC"
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
@@ -3191,6 +3267,30 @@
         }
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3256,6 +3356,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -3345,6 +3454,15 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.16.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
@@ -3939,6 +4057,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4124,6 +4251,12 @@
         }
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT"
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4234,6 +4367,12 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT"
+    },
     "node_modules/glob": {
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
@@ -4446,6 +4585,26 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -4493,8 +4652,13 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC"
     },
     "node_modules/input-otp": {
       "version": "1.1.0",
@@ -5151,6 +5315,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5167,7 +5343,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5180,6 +5355,12 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5213,6 +5394,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT"
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -5325,6 +5512,24 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.73.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.73.0.tgz",
+      "integrity": "sha512-z8iYzQGBu35ZkTQ9mtR8RqugJZ9RCLn8fv3d7LsgDBzOijGQP3RdKTX4LA7LXw03ZhU5z0l4xfhIMgSES31+cg==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT"
+    },
     "node_modules/node-fetch-native": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.0.1.tgz",
@@ -5488,7 +5693,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -5794,6 +5998,32 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5830,6 +6060,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/pump": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5882,6 +6122,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -6044,6 +6308,20 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6217,6 +6495,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -6246,7 +6544,6 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
       "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -6261,7 +6558,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -6349,6 +6645,51 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -6416,6 +6757,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -6727,6 +7077,34 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.2.tgz",
+      "integrity": "sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==",
+      "license": "MIT",
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6818,6 +7196,18 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/tween-functions": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
@@ -7253,14 +7643,12 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
       "version": "2.4.1",
diff --git a/package.json b/package.json
index 3a90e06..6d1d093 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "canvas": "^3.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
diff --git a/src/app/api/placeholder/[width]/[height]/route.tsx b/src/app/api/placeholder/[width]/[height]/route.tsx
new file mode 100644
index 0000000..0d6197f
--- /dev/null
+++ b/src/app/api/placeholder/[width]/[height]/route.tsx
@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server';
+import { createCanvas } from 'canvas';
+
+export async function GET(request: Request, { params }: { params: { width: string, height: string } }) {
+  try {
+    const width = Number(params.width);
+    const height = Number(params.height);
+    
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+    
+    // Fill background
+    ctx.fillStyle = '#e2e8f0';
+    ctx.fillRect(0, 0, width, height);
+    
+    // Add text
+    ctx.fillStyle = '#1e293b';
+    ctx.font = `${Math.min(width, height) * 0.1}px Arial`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Add Image', width / 2, height / 2);
+    
+    // Convert to buffer
+    const buffer = canvas.toBuffer('image/png');
+    
+    return new NextResponse(buffer, {
+      headers: {
+        'Content-Type': 'image/png',
+        'Cache-Control': 'public, max-age=31536000, immutable',
+      },
+    });
+  } catch (e) {
+    console.error('Failed to generate image:', e);
+    return new NextResponse('Failed to generate image', { status: 500 });
+  }
+}
diff --git a/src/components/Designer.tsx b/src/components/Designer.tsx
index 71f30a3..637f32a 100644
--- a/src/components/Designer.tsx
+++ b/src/components/Designer.tsx
@@ -9,9 +9,10 @@ import { idGenerator } from "@/lib/idGenerator";
 import { Button } from "./ui/button";
 import { BiSolidTrash } from "react-icons/bi";
 import useDesigner from "@/hooks/useDesigner";
+import { formThemes } from "@/schemas/form";
 
 function Designer() {
-    const { elements, addElement, selectedElement, setSelectedElement, removeElement } = useDesigner();
+    const { elements, addElement, selectedElement, setSelectedElement, removeElement, theme } = useDesigner();
 
     const droppable = useDroppable({
         id: "designer-drop-area",
@@ -112,12 +113,15 @@ function Designer() {
                 <div
                     ref={droppable.setNodeRef}
                     className={cn(
-                        "bg-background max-w-[920px] h-full m-auto rounded-xl flex flex-col flex-grow items-center justify-start flex-1 overflow-y-auto",
+                        formThemes[theme].styles.background,
+                        formThemes[theme].styles.text,
+                        formThemes[theme].styles.border,
+                        "max-w-[920px] h-full m-auto rounded-xl flex flex-col flex-grow items-center justify-start flex-1 overflow-y-auto border",
                         droppable.isOver && "ring-4 ring-primary ring-inset",
                     )}
                 >
                     {!droppable.isOver && elements.length === 0 && (
-                        <p className="text-3xl text-muted-foreground flex flex-grow items-center font-bold">Drop here</p>
+                        <p className={cn("text-3xl font-bold flex flex-grow items-center", formThemes[theme].styles.muted)}>Drop here</p>
                     )}
 
                     {droppable.isOver && elements.length === 0 && (
@@ -214,8 +218,10 @@ function DesignerElementWrapper({ element }: { element: FormElementInstance }) {
             {topHalf.isOver && <div className="absolute top-0 w-full rounded-md h-[7px] bg-primary rounded-b-none" />}
             <div
                 className={cn(
-                    "flex w-full min-h-[100px] items-center rounded-md bg-accent/40 px-4 py-2 pointer-events-none opacity-100",
+                    "flex w-full min-h-[40px] items-center rounded-md px-4 py-2 pointer-events-none",
                     mouseIsOver && "opacity-30",
+                    selectedElement?.id === element.id && "ring-2 ring-primary ring-inset",
+                    !mouseIsOver && !selectedElement?.id && "hover:ring-2 hover:ring-accent ring-inset"
                 )}
             >
                 <DesignerElement elementInstance={element} />
diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index fcb19d8..294dbc3 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -7,6 +7,7 @@ import PublishFormBtn from "./PublishFormBtn";
 import GenerateCodeBtn from "./GenerateCodeBtn";
 import SaveFormBtn from "./SaveFormBtn";
 import Designer from "./Designer";
+import { ThemeSelector } from "./ThemeSelector"; 
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import DragOverlayWrapper from "./DragOverlayWrapper";
 import { ImSpinner2 } from "react-icons/im";
@@ -139,6 +140,7 @@ function FormBuilder({ form }: { form: Form }) {
             {form.name}
           </h2>
           <div className="flex items-center gap-2">
+            <ThemeSelector />
             <PreviewDialogBtn />
             {!form.published && (
               <>
diff --git a/src/components/PreviewDialogBtn.tsx b/src/components/PreviewDialogBtn.tsx
index f8bb67e..7ea9712 100644
--- a/src/components/PreviewDialogBtn.tsx
+++ b/src/components/PreviewDialogBtn.tsx
@@ -5,6 +5,7 @@ import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
 import { FormElements, ElementsType } from "./FormElements";
 import useDesigner from "@/hooks/useDesigner";
 import { formThemes } from "@/schemas/form";
+import { cn } from "@/lib/utils";
 
 function PreviewDialogBtn() {
   const { elements, theme } = useDesigner();
@@ -17,19 +18,20 @@ function PreviewDialogBtn() {
           Preview
         </Button>
       </DialogTrigger>
-      <DialogContent className="w-screen h-screen max-h-screen max-w-full flex flex-col flex-grow p-0 gap-0">
+      <DialogContent className="w-screen h-screen max-h-screen max-w-full flex flex-col flex-grow gap-0 p-0">
         <div className="px-4 py-2 border-b">
           <p className="text-lg font-bold text-muted-foreground">Form preview</p>
           <p className="text-sm text-muted-foreground">This is how your form will look like to your users.</p>
         </div>
-        <div className="bg-accent flex flex-col flex-grow items-center justify-center p-4 bg-[url(/paper.svg)] dark:bg-[url(/paper-dark.svg)] overflow-y-auto">
-          <div className={`max-w-[620px] flex flex-col gap-4 flex-grow h-full w-full rounded-2xl p-8 overflow-y-auto
-            ${formThemes[theme].styles.background}
-            ${formThemes[theme].styles.text}
-            ${formThemes[theme].styles.border}`}>
+        <div className="bg-accent flex flex-col flex-grow items-center justify-center p-4 bg-[url(/paper.svg)] dark:bg-[url(/paper-dark.svg)]">
+          <div className={cn(
+            formThemes[theme].styles.background,
+            formThemes[theme].styles.text,
+            formThemes[theme].styles.border,
+            "w-full max-w-[620px] flex flex-col flex-grow rounded-2xl p-8 overflow-y-auto border"
+          )}>
             {elements.map((element) => {
-              const elementType = element.type as ElementsType; // Assert type as ElementsType
-              const FormComponent = FormElements[elementType].formComponent;
+              const FormComponent = FormElements[element.type].formComponent;
               return <FormComponent key={element.id} elementInstance={element} />;
             })}
           </div>
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
new file mode 100644
index 0000000..26a4bcc
--- /dev/null
+++ b/src/components/ThemeSelector.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { formThemes } from "@/schemas/form";
+import useDesigner from "@/hooks/useDesigner";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./ui/select";
+
+export function ThemeSelector() {
+    const { theme, setTheme } = useDesigner();
+
+    return (
+        <div className="flex items-center gap-2">
+            <label className="text-sm font-medium">Theme:</label>
+            <Select
+                value={theme}
+                onValueChange={(value) => setTheme(value as keyof typeof formThemes)}
+            >
+                <SelectTrigger className="w-[140px]">
+                    <SelectValue placeholder="Select theme" />
+                </SelectTrigger>
+                <SelectContent>
+                    {Object.entries(formThemes).map(([key, theme]) => (
+                        <SelectItem key={key} value={key}>
+                            {theme.name}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    );
+}
diff --git a/src/components/field/BulletedListField.tsx b/src/components/field/BulletedListField.tsx
index 76ad7d3..94c53af 100644
--- a/src/components/field/BulletedListField.tsx
+++ b/src/components/field/BulletedListField.tsx
@@ -11,6 +11,8 @@ import { BsListUl } from "react-icons/bs";
 import { Textarea } from "../ui/textarea";
 import useDesigner from "@/hooks/useDesigner";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { cn } from "@/lib/utils";
+import { formThemes } from "@/schemas/form";
 
 const type: ElementsType = "BulletedListField";
 
@@ -67,31 +69,31 @@ type CustomInstance = FormElementInstance & {
   extraAttributes: typeof extraAttributes;
 };
 
-function ListComponent({ items, bulletStyle, fontSize }: { items: string; bulletStyle: BulletStyle; fontSize: FontSize }) {
-  const itemsArray = items.split('\n').filter(item => item.trim() !== '');
-  
+function ListComponent({ items, bulletStyle, fontSize, theme }: { items: string; bulletStyle: BulletStyle; fontSize: FontSize; theme: keyof typeof formThemes }) {
+  const { styles } = formThemes[theme];
+  const itemsArray = items.split("\n").filter((item) => item.length > 0);
+
   return (
-    <div className="flex justify-center w-full">
-      <ul className="list-none space-y-2 w-full max-w-2xl">
-        {itemsArray.map((item, index) => (
-          <li key={index} className={`flex items-start ${fontSizes[fontSize]}`}>
-            <span className="mr-2 min-w-[1.5em] text-center">{bulletStyles[bulletStyle]}</span>
-            <span className="flex-1">{item}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <ul className={cn("flex flex-col gap-1", styles.text)}>
+      {itemsArray.map((item, index) => (
+        <li key={index} className={cn("flex gap-2 items-start", fontSizes[fontSize])}>
+          <span className="select-none">{bulletStyles[bulletStyle]}</span>
+          <span>{item}</span>
+        </li>
+      ))}
+    </ul>
   );
 }
 
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { items, bulletStyle, fontSize } = element.extraAttributes;
-  
+  const { theme } = useDesigner();
+
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className="text-muted-foreground">Bulleted List</Label>
-      <ListComponent items={items} bulletStyle={bulletStyle} fontSize={fontSize} />
+      <Label className="text-muted-foreground">Bulleted list field</Label>
+      <ListComponent items={items} bulletStyle={bulletStyle} fontSize={fontSize} theme={theme} />
     </div>
   );
 }
@@ -99,8 +101,9 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
 function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { items, bulletStyle, fontSize } = element.extraAttributes;
+  const { theme } = useDesigner();
 
-  return <ListComponent items={items} bulletStyle={bulletStyle} fontSize={fontSize} />;
+  return <ListComponent items={items} bulletStyle={bulletStyle} fontSize={fontSize} theme={theme} />;
 }
 
 type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
diff --git a/src/components/field/PictureSelectField.tsx b/src/components/field/PictureSelectField.tsx
index 33d1829..58fa181 100644
--- a/src/components/field/PictureSelectField.tsx
+++ b/src/components/field/PictureSelectField.tsx
@@ -11,7 +11,6 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { BsCardImage } from "react-icons/bs";
 import { Upload, X } from 'lucide-react';
 import useDesigner from "@/hooks/useDesigner";
-import Image from "next/image";
 
 type ImageOption = {
   src: string;
@@ -55,7 +54,12 @@ export const PictureSelectFormElement: FormElement = {
       label: "Picture Select",
       helperText: "Select one of the images",
       required: false,
-      images: []
+      images: [
+        {
+          src: "/api/placeholder/400/300",
+          label: "Option 1"
+        }
+      ]
     },
   }),
 
@@ -92,15 +96,12 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
           <div key={index} className="flex flex-col items-center">
             <div className="w-full space-y-2">
               <div className="relative">
-                <Image
+                <img
                   src={image.src}
                   alt={image.label}
-                  width={400}
-                  height={300}
                   className="w-full h-48 object-contain rounded-lg border-2 border-gray-300"
                 />
               </div>
-              <p className="text-center font-medium">{image.label}</p>
             </div>
           </div>
         ))}
@@ -148,11 +149,9 @@ function FormComponent({
                 onChange={() => handleImageSelect(image.label)}
                 className="sr-only"
               />
-              <Image
+              <img
                 src={image.src}
                 alt={image.label}
-                width={400}
-                height={300}
                 className={`w-full h-48 object-contain rounded-lg ${
                   selectedImage === image.label ? 'ring-4 ring-blue-500' : ''
                 }`}
@@ -239,7 +238,7 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
 
   const addImage = () => {
     const newImages = [...form.getValues("images"), { 
-      src: 'https://placehold.co/200x200',
+      src: "/api/placeholder/400/300",
       label: `Option ${form.getValues("images").length + 1}`
     }];
     form.setValue("images", newImages);
@@ -267,6 +266,7 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   function applyChanges(values: propertiesFormSchemaType) {
     const newValues = {
       ...values,
+      images: form.getValues("images"), // Ensure images are included in the update
     };
     updateElement(element.id, {
       ...element,
@@ -355,11 +355,9 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
                         onChange={(e) => handleImageUpload(e, index)}
                         className="sr-only"
                       />
-                      <Image
+                      <img
                         src={image.src}
                         alt={image.label}
-                        width={400}
-                        height={300}
                         className="w-full h-48 object-contain rounded-lg"
                       />
                       <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity rounded-lg">
diff --git a/src/components/field/SubTitleField.tsx b/src/components/field/SubTitleField.tsx
index eb828fd..3523d56 100644
--- a/src/components/field/SubTitleField.tsx
+++ b/src/components/field/SubTitleField.tsx
@@ -12,6 +12,8 @@ import { LuHeading2 } from "react-icons/lu";
 import useDesigner from "@/hooks/useDesigner";
 import { fontSizes, FontSize, fontSizeSchema, alignments, Alignment, alignmentSchema } from "./utils/fontStyles";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { cn } from "@/lib/utils"; // Fix cn import to use @/lib/utils
+import { formThemes } from "@/schemas/form";
 
 const type: ElementsType = "SubTitleField";
 
@@ -52,19 +54,24 @@ type CustomInstance = FormElementInstance & {
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { subTitle, fontSize, alignment } = element.extraAttributes;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+
   return (
     <div className="flex flex-col gap-2 w-full">
       <Label className="text-muted-foreground">Subtitle field</Label>
-      <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{subTitle}</p>
+      <p className={cn(fontSizes[fontSize], alignments[alignment], styles.text)}>{subTitle}</p>
     </div>
   );
 }
 
 function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
-
   const { subTitle, fontSize, alignment } = element.extraAttributes;
-  return <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{subTitle}</p>;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+
+  return <p className={cn(fontSizes[fontSize], alignments[alignment], styles.text)}>{subTitle}</p>;
 }
 
 type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
diff --git a/src/components/field/TitleField.tsx b/src/components/field/TitleField.tsx
index f2c30be..b25d6a9 100644
--- a/src/components/field/TitleField.tsx
+++ b/src/components/field/TitleField.tsx
@@ -13,6 +13,8 @@ import { LuHeading1 } from "react-icons/lu";
 import useDesigner from "@/hooks/useDesigner";
 import { fontSizes, FontSize, fontSizeSchema, alignments, Alignment, alignmentSchema } from "./utils/fontStyles";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { cn } from "@/lib/utils";
+import { formThemes } from "@/schemas/form";
 
 const type: ElementsType = "TitleField";
 
@@ -53,19 +55,24 @@ type CustomInstance = FormElementInstance & {
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { title, fontSize, alignment } = element.extraAttributes;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+  
   return (
     <div className="flex flex-col gap-2 w-full">
       <Label className="text-muted-foreground">Title field</Label>
-      <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{title}</p>
+      <p className={cn(fontSizes[fontSize], alignments[alignment], styles.text)}>{title}</p>
     </div>
   );
 }
 
 function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
-
   const { title, fontSize, alignment } = element.extraAttributes;
-  return <p className={`${fontSizes[fontSize]} ${alignments[alignment]}`}>{title}</p>;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+
+  return <p className={cn(fontSizes[fontSize], alignments[alignment], styles.text)}>{title}</p>;
 }
 
 type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
diff --git a/src/schemas/form.ts b/src/schemas/form.ts
index cd416f1..8686a20 100644
--- a/src/schemas/form.ts
+++ b/src/schemas/form.ts
@@ -9,36 +9,69 @@ export const formSchema = z.object({
 // Available themes for forms
 export const formThemes = {
   default: {
-    name: "Default",
+    name: "Default Light",
     styles: {
-      background: "bg-background",
-      text: "text-foreground",
-      border: "border-border",
-      input: "bg-background border-input",
+      background: "bg-white",
+      text: "text-gray-900",
+      border: "border-gray-200",
+      input: "bg-white border-gray-300",
       primary: "bg-primary text-primary-foreground",
-      muted: "bg-muted text-muted-foreground"
+      muted: "bg-gray-50 text-gray-500"
+    }
+  },
+  defaultDark: {
+    name: "Default Dark",
+    styles: {
+      background: "bg-zinc-900",
+      text: "text-zinc-50",
+      border: "border-zinc-700",
+      input: "bg-zinc-800 border-zinc-600",
+      primary: "bg-primary text-primary-foreground",
+      muted: "bg-zinc-800 text-zinc-400"
     }
   },
   modern: {
-    name: "Modern",
+    name: "Modern Light",
+    styles: {
+      background: "bg-white",
+      text: "text-zinc-900",
+      border: "border-zinc-200",
+      input: "bg-white border-zinc-300",
+      primary: "bg-indigo-600 text-white",
+      muted: "bg-zinc-100 text-zinc-500"
+    }
+  },
+  modernDark: {
+    name: "Modern Dark",
     styles: {
-      background: "bg-zinc-50 dark:bg-zinc-900",
-      text: "text-zinc-900 dark:text-zinc-50",
-      border: "border-zinc-200 dark:border-zinc-700",
-      input: "bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-600",
-      primary: "bg-indigo-600 text-white dark:bg-indigo-500",
-      muted: "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+      background: "bg-zinc-900",
+      text: "text-zinc-50",
+      border: "border-zinc-700",
+      input: "bg-zinc-800 border-zinc-600",
+      primary: "bg-indigo-500 text-white",
+      muted: "bg-zinc-800 text-zinc-400"
     }
   },
   elegant: {
-    name: "Elegant",
+    name: "Elegant Light",
+    styles: {
+      background: "bg-white",
+      text: "text-stone-900",
+      border: "border-stone-200",
+      input: "bg-white border-stone-300",
+      primary: "bg-amber-600 text-white",
+      muted: "bg-stone-100 text-stone-500"
+    }
+  },
+  elegantDark: {
+    name: "Elegant Dark",
     styles: {
-      background: "bg-stone-50 dark:bg-stone-900",
-      text: "text-stone-900 dark:text-stone-50",
-      border: "border-stone-200 dark:border-stone-700",
-      input: "bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-600",
-      primary: "bg-amber-600 text-white dark:bg-amber-500",
-      muted: "bg-stone-100 text-stone-500 dark:bg-stone-800 dark:text-stone-400"
+      background: "bg-stone-900",
+      text: "text-stone-50",
+      border: "border-stone-700",
+      input: "bg-stone-800 border-stone-600",
+      primary: "bg-amber-500 text-white",
+      muted: "bg-stone-800 text-stone-400"
     }
   }
 } as const;

From 024f9c6ec96d0111cdd9e05307d4e29dcba6ea3c Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Tue, 28 Jan 2025 17:07:49 +0100
Subject: [PATCH 24/40] Added 2 column layout

---
 src/components/Designer.tsx                   |  50 +++-
 src/components/FormElements.tsx               |   9 +-
 src/components/FormElementsSidebar.tsx        |   1 +
 src/components/field/DateField.tsx            |  41 +++-
 src/components/field/TwoColumnLayoutField.tsx | 219 ++++++++++++++++++
 src/components/ui/calendar.tsx                |  48 ++--
 6 files changed, 334 insertions(+), 34 deletions(-)
 create mode 100644 src/components/field/TwoColumnLayoutField.tsx

diff --git a/src/components/Designer.tsx b/src/components/Designer.tsx
index 637f32a..2ba0938 100644
--- a/src/components/Designer.tsx
+++ b/src/components/Designer.tsx
@@ -12,7 +12,7 @@ import useDesigner from "@/hooks/useDesigner";
 import { formThemes } from "@/schemas/form";
 
 function Designer() {
-    const { elements, addElement, selectedElement, setSelectedElement, removeElement, theme } = useDesigner();
+    const { elements, addElement, selectedElement, setSelectedElement, removeElement, theme, updateElement } = useDesigner();
 
     const droppable = useDroppable({
         id: "designer-drop-area",
@@ -28,11 +28,11 @@ function Designer() {
 
             const isDesignerBtnElement = active.data?.current?.isDesignerBtnElement;
             const isDroppingOverDesignerDropArea = over.data?.current?.isDesignerDropArea;
+            const isDroppingOverColumn = over.data?.current?.isColumnDropArea;
 
             const droppingSidebarBtnOverDesignerDropArea = isDesignerBtnElement && isDroppingOverDesignerDropArea;
 
             // First
-            
             if (droppingSidebarBtnOverDesignerDropArea) {
                 const type = active.data?.current?.type;
                 const newElement = FormElements[type as ElementsType].construct(idGenerator());
@@ -41,6 +41,50 @@ function Designer() {
                 return;
             }
 
+            // Handle dropping into columns
+            if (isDroppingOverColumn) {
+                const type = active.data?.current?.type;
+                const columnId = over.data?.current?.columnId;
+                const parentId = over.data?.current?.elementId;
+                
+                // Find the parent TwoColumnLayout element
+                const parentIndex = elements.findIndex((el) => el.id === parentId);
+                if (parentIndex === -1) return;
+                
+                const parent = { ...elements[parentIndex] };
+                const isDesignerElement = active.data?.current?.isDesignerElement;
+                
+                let elementToAdd;
+                if (isDesignerElement) {
+                    // Moving an existing element
+                    const activeId = active.data?.current?.elementId;
+                    const activeElementIndex = elements.findIndex((el) => el.id === activeId);
+                    if (activeElementIndex === -1) return;
+                    
+                    elementToAdd = { ...elements[activeElementIndex] };
+                    // Remove from main elements array if it's there
+                    removeElement(activeId);
+                    
+                    // Also remove from other columns if it exists there
+                    const otherColumn = columnId === 'left' ? 'rightColumn' : 'leftColumn';
+                    parent.extraAttributes[otherColumn] = parent.extraAttributes[otherColumn].filter(
+                        (el: FormElementInstance) => el.id !== activeId
+                    );
+                } else {
+                    // Creating a new element from sidebar
+                    elementToAdd = FormElements[type as ElementsType].construct(idGenerator());
+                }
+                
+                // Add to the appropriate column
+                const column = columnId === 'left' ? 'leftColumn' : 'rightColumn';
+                parent.extraAttributes[column] = [...parent.extraAttributes[column], elementToAdd];
+                
+                // Update the parent element
+                elements[parentIndex] = parent;
+                updateElement(parentId, parent);
+                return;
+            }
+
             const isDroppingOverDesignerElementTopHalf = over.data?.current?.isTopHalfDesignerElement;
 
             const isDroppingOverDesignerElementBottomHalf = over.data?.current?.isBottomHalfDesignerElement;
@@ -144,7 +188,7 @@ function Designer() {
 }
 
 function DesignerElementWrapper({ element }: { element: FormElementInstance }) {
-    const { removeElement, selectedElement, setSelectedElement } = useDesigner();
+    const { removeElement, selectedElement, setSelectedElement, updateElement } = useDesigner();
 
     const [mouseIsOver, setMouseIsOver] = useState<boolean>(false);
     const topHalf = useDroppable({
diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index b61b756..9733130 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -15,6 +15,7 @@ import { ImageUploadFieldFormElement } from "./field/ImageUploadField";
 import { RatingScaleFormElement } from "./field/RatingScaleField";
 import { ImageFormElement } from "./field/ImageElement";
 import { BulletedListFieldFormElement } from "./field/BulletedListField";
+import { TwoColumnLayoutFieldFormElement } from "./field/TwoColumnLayoutField";
 
 export type ElementsType =
   | "TextField"
@@ -33,7 +34,8 @@ export type ElementsType =
   | "BulletedListField"
   | "RatingScaleField"
   | "DualImageUpload"
-  | "PictureSelectField";
+  | "PictureSelectField"
+  | "TwoColumnLayoutField";
 
 export type SubmitFunction = (key: string, value: string) => void;
 
@@ -89,8 +91,9 @@ export const FormElements: FormElementsType = {
   CheckboxField: CheckboxFieldFormElement,
   ImageElement: ImageFormElement,
   ImageUploadField: ImageUploadFieldFormElement,
-  DualImageUpload: DualImageUploadFormElement,
+  BulletedListField: BulletedListFieldFormElement,
   RatingScaleField: RatingScaleFormElement,
+  DualImageUpload: DualImageUploadFormElement,
   PictureSelectField: PictureSelectFormElement,
-  BulletedListField: BulletedListFieldFormElement,
+  TwoColumnLayoutField: TwoColumnLayoutFieldFormElement,
 } satisfies FormElementsType;
diff --git a/src/components/FormElementsSidebar.tsx b/src/components/FormElementsSidebar.tsx
index 1e640a1..a5f9585 100644
--- a/src/components/FormElementsSidebar.tsx
+++ b/src/components/FormElementsSidebar.tsx
@@ -17,6 +17,7 @@ function FormElementsSidebar() {
         <SidebarBtnElement formElement={FormElements.SeparatorField} />
         <SidebarBtnElement formElement={FormElements.SpacerField} />
         <SidebarBtnElement formElement={FormElements.ImageElement} />
+        <SidebarBtnElement formElement={FormElements.TwoColumnLayoutField} />
 
         <p className="text-sm text-muted-foreground col-span-1 md:col-span-2 my-2 place-self-start">Form elements</p>
         <SidebarBtnElement formElement={FormElements.TextField} />
diff --git a/src/components/field/DateField.tsx b/src/components/field/DateField.tsx
index a9e60e2..34bfb3f 100644
--- a/src/components/field/DateField.tsx
+++ b/src/components/field/DateField.tsx
@@ -18,6 +18,7 @@ import useDesigner from "@/hooks/useDesigner";
 import { Input } from "../ui/input";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { formThemes } from "@/schemas/form";
 
 const type: ElementsType = "DateField";
 
@@ -65,17 +66,28 @@ type CustomInstance = FormElementInstance & {
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { label, required, placeHolder, helperText } = element.extraAttributes;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label>
+      <Label className={styles.text}>
         {label}
         {required && "*"}
       </Label>
-      <Button variant={"outline"} className="w-full justify-start text-left font-normal">
-        <CalendarIcon className="mr-2 h-4 w-4" />
+      <Button 
+        variant={"outline"} 
+        className={cn(
+          "w-full justify-start text-left font-normal",
+          styles.text,
+          styles.input,
+          styles.border
+        )}
+      >
+        <CalendarIcon className={cn("mr-2 h-4 w-4", styles.text)} />
         <span>Pick a date</span>
       </Button>
-      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+      {helperText && <p className={cn("text-[0.8rem]", styles.muted)}>{helperText}</p>}
     </div>
   );
 }
@@ -92,19 +104,21 @@ function FormComponent({
   defaultValue?: string;
 }) {
   const element = elementInstance as CustomInstance;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
 
   const [date, setDate] = useState<Date | undefined>(defaultValue ? new Date(defaultValue) : undefined);
-
   const [error, setError] = useState(false);
 
   useEffect(() => {
     setError(isInvalid === true);
   }, [isInvalid]);
 
-  const { label, required, placeHolder, helperText } = element.extraAttributes;
+  const { label, required, helperText } = element.extraAttributes;
+
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className={cn(error && "text-red-500")}>
+      <Label className={cn(styles.text, error && "text-red-500")}>
         {label}
         {required && "*"}
       </Label>
@@ -114,21 +128,23 @@ function FormComponent({
             variant={"outline"}
             className={cn(
               "w-full justify-start text-left font-normal",
-              !date && "text-muted-foreground",
+              !date && styles.muted,
               error && "border-red-500",
+              styles.text,
+              styles.input,
+              styles.border
             )}
           >
-            <CalendarIcon className="mr-2 h-4 w-4" />
+            <CalendarIcon className={cn("mr-2 h-4 w-4", styles.text)} />
             {date ? format(date, "PPP") : <span>Pick a date</span>}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        <PopoverContent className={cn("w-auto p-0", styles.background, styles.border)} align="start">
           <Calendar
             mode="single"
             selected={date}
             onSelect={(date) => {
               setDate(date);
-
               if (!submitValue) return;
               const value = date?.toUTCString() || "";
               const valid = DateFieldFormElement.validate(element, value);
@@ -136,10 +152,11 @@ function FormComponent({
               submitValue(element.id, value);
             }}
             initialFocus
+            className={cn(styles.text)}
           />
         </PopoverContent>
       </Popover>
-      {helperText && <p className={cn("text-muted-foreground text-[0.8rem]", error && "text-red-500")}>{helperText}</p>}
+      {helperText && <p className={cn("text-[0.8rem]", error ? "text-red-500" : styles.muted)}>{helperText}</p>}
     </div>
   );
 }
diff --git a/src/components/field/TwoColumnLayoutField.tsx b/src/components/field/TwoColumnLayoutField.tsx
new file mode 100644
index 0000000..93cc95f
--- /dev/null
+++ b/src/components/field/TwoColumnLayoutField.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { ElementsType, FormElement, FormElementInstance, FormElements } from "../FormElements";
+import { Label } from "../ui/label";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, memo } from "react";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { LuColumns } from "react-icons/lu";
+import useDesigner from "@/hooks/useDesigner";
+import { cn } from "@/lib/utils";
+import { formThemes } from "@/schemas/form";
+import { useDroppable } from "@dnd-kit/core";
+import { idGenerator } from "@/lib/idGenerator";
+
+const type: ElementsType = "TwoColumnLayoutField";
+
+const extraAttributes = {
+  gap: "4", // Tailwind gap spacing
+  leftColumn: [] as FormElementInstance[],
+  rightColumn: [] as FormElementInstance[],
+};
+
+const propertiesSchema = z.object({
+  gap: z.string(),
+});
+
+// Create a memoized wrapper for form components
+const MemoizedFormComponent = memo(
+  ({ element }: { element: FormElementInstance }) => {
+    return FormElements[element.type].formComponent({
+      elementInstance: element,
+    });
+  }
+);
+
+export const TwoColumnLayoutFieldFormElement: FormElement = {
+  type,
+  construct: (id: string) => ({
+    id,
+    type,
+    extraAttributes,
+  }),
+  designerBtnElement: {
+    icon: LuColumns,
+    label: "Two Column Layout",
+  },
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+  validate: () => true,
+};
+
+type CustomInstance = FormElementInstance & {
+  extraAttributes: typeof extraAttributes;
+};
+
+function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { gap, leftColumn, rightColumn } = element.extraAttributes;
+  const { theme, addElement } = useDesigner();
+  const { styles } = formThemes[theme];
+
+  const droppableLeft = useDroppable({
+    id: `${element.id}-left`,
+    data: {
+      isColumnDropArea: true,
+      columnId: "left",
+      elementId: element.id,
+    },
+  });
+
+  const droppableRight = useDroppable({
+    id: `${element.id}-right`,
+    data: {
+      isColumnDropArea: true,
+      columnId: "right",
+      elementId: element.id,
+    },
+  });
+  
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-muted-foreground">Two Column Layout</Label>
+      <div className={cn("grid grid-cols-2 w-full", `gap-${gap}`)}>
+        <div
+          ref={droppableLeft.setNodeRef}
+          className={cn(
+            "border-2 border-dashed rounded-md min-h-[150px] p-4",
+            droppableLeft.isOver ? "border-primary" : "border-gray-300"
+          )}
+        >
+          {leftColumn.map((element) => (
+            <div key={element.id} className="mb-4 w-full">
+              <MemoizedFormComponent element={element} />
+            </div>
+          ))}
+          {!leftColumn.length && (
+            <p className={cn("text-center text-muted-foreground", styles.text)}>
+              Drop elements here
+            </p>
+          )}
+        </div>
+        <div
+          ref={droppableRight.setNodeRef}
+          className={cn(
+            "border-2 border-dashed rounded-md min-h-[150px] p-4",
+            droppableRight.isOver ? "border-primary" : "border-gray-300"
+          )}
+        >
+          {rightColumn.map((element) => (
+            <div key={element.id} className="mb-4 w-full">
+              <MemoizedFormComponent element={element} />
+            </div>
+          ))}
+          {!rightColumn.length && (
+            <p className={cn("text-center text-muted-foreground", styles.text)}>
+              Drop elements here
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { gap, leftColumn, rightColumn } = element.extraAttributes;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+
+  return (
+    <div className={cn("grid grid-cols-2 w-full", `gap-${gap}`)}>
+      <div className="w-full">
+        {leftColumn.map((element) => (
+          <div key={element.id} className="mb-4 w-full">
+            <MemoizedFormComponent element={element} />
+          </div>
+        ))}
+      </div>
+      <div className="w-full">
+        {rightColumn.map((element) => (
+          <div key={element.id} className="mb-4 w-full">
+            <MemoizedFormComponent element={element} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+
+function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  const form = useForm<propertiesFormSchemaType>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      gap: element.extraAttributes.gap,
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: propertiesFormSchemaType) {
+    const { leftColumn, rightColumn } = element.extraAttributes;
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...values,
+        leftColumn,
+        rightColumn,
+      },
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={() => {
+          form.handleSubmit(applyChanges)();
+        }}
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit(applyChanges)();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="gap"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Gap Between Columns</FormLabel>
+              <FormControl>
+                <select
+                  {...field}
+                  className="w-full border border-gray-300 rounded-md p-2"
+                >
+                  <option value="2">Small</option>
+                  <option value="4">Medium</option>
+                  <option value="6">Large</option>
+                  <option value="8">Extra Large</option>
+                </select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 2f02434..b846c96 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -3,9 +3,10 @@
 import * as React from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
-
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
+import useDesigner from "@/hooks/useDesigner"
+import { formThemes } from "@/schemas/form"
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
@@ -15,6 +16,9 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }: CalendarProps) {
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -22,40 +26,52 @@ function Calendar({
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
+        caption: cn("flex justify-center pt-1 relative items-center", styles.text),
+        caption_label: cn("text-sm font-medium", styles.text),
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          styles.text,
+          styles.border
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        head_cell: cn(
+          "rounded-md w-9 font-normal text-[0.8rem]",
+          styles.muted
+        ),
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: cn(
+          "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+          styles.text
+        ),
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+          styles.text
         ),
         day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
+        day_selected: cn(
+          "hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          styles.primary
+        ),
+        day_today: cn("bg-accent", styles.text),
+        day_outside: cn(
+          "day-outside opacity-50 aria-selected:bg-accent/50 aria-selected:opacity-30",
+          styles.muted
+        ),
+        day_disabled: cn("opacity-50", styles.muted),
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ ...props }) => <ChevronLeft className={styles.text} {...props} />,
+        IconRight: ({ ...props }) => <ChevronRight className={styles.text} {...props} />,
       }}
       {...props}
     />

From 832654c3856c4d6ff6dc00fb2ac068c3990d2590 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Tue, 28 Jan 2025 18:14:40 +0100
Subject: [PATCH 25/40] Fixed 2 col grid saveing

---
 src/components/field/NumberField.tsx          | 41 +++++++++++++++----
 src/components/field/TwoColumnLayoutField.tsx | 22 ++++++----
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/components/field/NumberField.tsx b/src/components/field/NumberField.tsx
index 45147f9..199b503 100644
--- a/src/components/field/NumberField.tsx
+++ b/src/components/field/NumberField.tsx
@@ -13,6 +13,7 @@ import { Bs123 } from "react-icons/bs";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { Switch } from "../ui/switch";
 import useDesigner from "@/hooks/useDesigner";
+import { formThemes } from "@/schemas/form";
 
 const type: ElementsType = "NumberField";
 
@@ -62,14 +63,23 @@ type CustomInstance = FormElementInstance & {
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { label, required, placeHolder, helperText } = element.extraAttributes;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
+
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label>
+      <Label className={styles.text}>
         {label}
         {required && "*"}
       </Label>
-      <Input readOnly disabled type="number" placeholder={placeHolder} />
-      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+      <Input 
+        readOnly 
+        disabled 
+        type="number" 
+        placeholder={placeHolder}
+        className={cn(styles.text, styles.input, styles.border)}
+      />
+      {helperText && <p className={cn("text-[0.8rem]", styles.muted)}>{helperText}</p>}
     </div>
   );
 }
@@ -86,6 +96,8 @@ function FormComponent({
   defaultValue?: string;
 }) {
   const element = elementInstance as CustomInstance;
+  const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
 
   const [value, setValue] = useState(defaultValue || "");
   const [error, setError] = useState(false);
@@ -97,25 +109,36 @@ function FormComponent({
   const { label, required, placeHolder, helperText } = element.extraAttributes;
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className={cn(error && "text-red-500")}>
+      <Label className={cn(styles.text, error && "text-red-500")}>
         {label}
         {required && "*"}
       </Label>
       <Input
         type="number"
-        className={cn(error && "border-red-500")}
         placeholder={placeHolder}
-        onChange={(e) => setValue(e.target.value)}
-        onBlur={(e) => {
+        onChange={(e) => {
+          setValue(e.target.value);
           if (!submitValue) return;
           const valid = NumberFieldFormElement.validate(element, e.target.value);
           setError(!valid);
-          if (!valid) return;
           submitValue(element.id, e.target.value);
         }}
         value={value}
+        className={cn(
+          error && "border-red-500",
+          styles.text,
+          styles.input,
+          styles.border
+        )}
       />
-      {helperText && <p className={cn("text-muted-foreground text-[0.8rem]", error && "text-red-500")}>{helperText}</p>}
+      {helperText && (
+        <p className={cn(
+          "text-[0.8rem]",
+          error ? "text-red-500" : styles.muted
+        )}>
+          {helperText}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/src/components/field/TwoColumnLayoutField.tsx b/src/components/field/TwoColumnLayoutField.tsx
index 93cc95f..67ace96 100644
--- a/src/components/field/TwoColumnLayoutField.tsx
+++ b/src/components/field/TwoColumnLayoutField.tsx
@@ -24,6 +24,8 @@ const extraAttributes = {
 
 const propertiesSchema = z.object({
   gap: z.string(),
+  leftColumn: z.array(z.any()).default([]),
+  rightColumn: z.array(z.any()).default([]),
 });
 
 // Create a memoized wrapper for form components
@@ -32,6 +34,11 @@ const MemoizedFormComponent = memo(
     return FormElements[element.type].formComponent({
       elementInstance: element,
     });
+  },
+  (prevProps, nextProps) => {
+    // Custom comparison function to ensure proper updates
+    return prevProps.element.id === nextProps.element.id &&
+           JSON.stringify(prevProps.element.extraAttributes) === JSON.stringify(nextProps.element.extraAttributes);
   }
 );
 
@@ -40,7 +47,11 @@ export const TwoColumnLayoutFieldFormElement: FormElement = {
   construct: (id: string) => ({
     id,
     type,
-    extraAttributes,
+    extraAttributes: {
+      ...extraAttributes,
+      leftColumn: [], // Create new arrays for each instance
+      rightColumn: [], // Create new arrays for each instance
+    },
   }),
   designerBtnElement: {
     icon: LuColumns,
@@ -161,6 +172,8 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
     mode: "onBlur",
     defaultValues: {
       gap: element.extraAttributes.gap,
+      leftColumn: element.extraAttributes.leftColumn,
+      rightColumn: element.extraAttributes.rightColumn,
     },
   });
 
@@ -169,14 +182,9 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   }, [element, form]);
 
   function applyChanges(values: propertiesFormSchemaType) {
-    const { leftColumn, rightColumn } = element.extraAttributes;
     updateElement(element.id, {
       ...element,
-      extraAttributes: {
-        ...values,
-        leftColumn,
-        rightColumn,
-      },
+      extraAttributes: values,
     });
   }
 

From 2b3bbf33a2580b12a2d0a73ce9f32b0891bc2d62 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Wed, 29 Jan 2025 15:43:39 +0100
Subject: [PATCH 26/40] Fixing up the element parsing

---
 src/app/api/embed/[formId]/js/route.ts | 19 ++++++++-
 src/app/forms/[id]/page.tsx            | 55 +++++++++++++++++---------
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/src/app/api/embed/[formId]/js/route.ts b/src/app/api/embed/[formId]/js/route.ts
index 1ed6008..17055b8 100644
--- a/src/app/api/embed/[formId]/js/route.ts
+++ b/src/app/api/embed/[formId]/js/route.ts
@@ -524,7 +524,7 @@ export async function GET(
               wrapper.appendChild(ratingInput);
               break;
 
-            case 'DualImageUploadField':
+            case 'DualImageUpload':
               const dualImageLabel = document.createElement('label');
               dualImageLabel.className = 'quick-form-label';
               dualImageLabel.textContent = element.extraAttributes?.label || '';
@@ -632,6 +632,21 @@ export async function GET(
               wrapper.appendChild(dualImageHelperText);
               wrapper.appendChild(dualImageContainer);
               break;
+
+            default:
+              if (element.type === 'DualImageUploadField') {
+                console.error('Unsupported field type:', element.type);
+                return;
+              }
+
+              if (element.type === 'DualImageUpload') {
+                console.error('Unsupported field type:', element.type);
+                return;
+              }
+
+              if (value) {
+                data[fieldName] = value;
+              }
           }
 
           form.appendChild(wrapper);
@@ -705,7 +720,7 @@ export async function GET(
                   data[fieldName] = !!value;
                   break;
 
-                case 'DualImageUploadField':
+                case 'DualImageUpload':
                   if (value) {
                     const leftFile = formData.get(\`\${fieldName}_left\`);
                     const rightFile = formData.get(\`\${fieldName}_right\`);
diff --git a/src/app/forms/[id]/page.tsx b/src/app/forms/[id]/page.tsx
index 3b4936f..70a8087 100644
--- a/src/app/forms/[id]/page.tsx
+++ b/src/app/forms/[id]/page.tsx
@@ -115,25 +115,42 @@ async function SubmissionsTable({ id }: { id: number }) {
         type: ElementsType;
     }[] = [];
 
-    formElements.forEach((element) => {
-        switch (element.type) {
-            case "TextField":
-            case "NumberField":
-            case "TextAreaField":
-            case "DateField":
-            case "SelectField":
-            case "CheckboxField":
-                columns.push({
-                    id: element.id,
-                    label: element.extraAttributes?.label,
-                    required: element.extraAttributes?.required,
-                    type: element.type,
-                });
-                break;
-            default:
-                break;
-        }
-    });
+    function parseFormElements(elements: FormElementInstance[]) {
+        elements.forEach((element) => {
+            switch (element.type) {
+                case "TextField":
+                case "NumberField":
+                case "TextAreaField":
+                case "DateField":
+                case "SelectField":
+                case "CheckboxField":
+                case "ImageUploadField":
+                case "DualImageUpload":
+                case "PictureSelectField":
+                case "RatingScaleField":
+                    columns.push({
+                        id: element.id,
+                        label: element.extraAttributes?.label,
+                        required: element.extraAttributes?.required,
+                        type: element.type,
+                    });
+                    break;
+                case "TwoColumnLayoutField":
+                    // Parse elements in both columns
+                    const { leftColumn, rightColumn } = element.extraAttributes as {
+                        leftColumn: FormElementInstance[];
+                        rightColumn: FormElementInstance[];
+                    };
+                    parseFormElements(leftColumn);
+                    parseFormElements(rightColumn);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+
+    parseFormElements(formElements);
 
     const rows: Row[] = [];
     form.FormSubmissions.forEach((submission) => {

From d3f1eca97f5660ff79fcf4e102e3e7bf664c46c9 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Wed, 29 Jan 2025 15:55:56 +0100
Subject: [PATCH 27/40] Fixed build errors

---
 src/components/Designer.tsx                   | 20 +++++++++++--------
 src/components/field/TwoColumnLayoutField.tsx |  2 ++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Designer.tsx b/src/components/Designer.tsx
index 2ba0938..89002b7 100644
--- a/src/components/Designer.tsx
+++ b/src/components/Designer.tsx
@@ -67,9 +67,11 @@ function Designer() {
                     
                     // Also remove from other columns if it exists there
                     const otherColumn = columnId === 'left' ? 'rightColumn' : 'leftColumn';
-                    parent.extraAttributes[otherColumn] = parent.extraAttributes[otherColumn].filter(
-                        (el: FormElementInstance) => el.id !== activeId
-                    );
+                    if (parent.type === 'TwoColumnLayoutField' && parent.extraAttributes?.[otherColumn]) {
+                        parent.extraAttributes[otherColumn] = (parent.extraAttributes[otherColumn] as FormElementInstance[]).filter(
+                            (el: FormElementInstance) => el.id !== activeId
+                        );
+                    }
                 } else {
                     // Creating a new element from sidebar
                     elementToAdd = FormElements[type as ElementsType].construct(idGenerator());
@@ -77,11 +79,13 @@ function Designer() {
                 
                 // Add to the appropriate column
                 const column = columnId === 'left' ? 'leftColumn' : 'rightColumn';
-                parent.extraAttributes[column] = [...parent.extraAttributes[column], elementToAdd];
-                
-                // Update the parent element
-                elements[parentIndex] = parent;
-                updateElement(parentId, parent);
+                if (parent.type === 'TwoColumnLayoutField' && parent.extraAttributes) {
+                    parent.extraAttributes[column] = [...(parent.extraAttributes[column] as FormElementInstance[] || []), elementToAdd];
+                    
+                    // Update the parent element
+                    elements[parentIndex] = parent;
+                    updateElement(parent.id, parent);
+                }
                 return;
             }
 
diff --git a/src/components/field/TwoColumnLayoutField.tsx b/src/components/field/TwoColumnLayoutField.tsx
index 67ace96..8a3db85 100644
--- a/src/components/field/TwoColumnLayoutField.tsx
+++ b/src/components/field/TwoColumnLayoutField.tsx
@@ -42,6 +42,8 @@ const MemoizedFormComponent = memo(
   }
 );
 
+MemoizedFormComponent.displayName = "MemoizedFormComponent";
+
 export const TwoColumnLayoutFieldFormElement: FormElement = {
   type,
   construct: (id: string) => ({

From ed1c8cc3f6a96f515b2cf37535a2556ddc926fb0 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Wed, 29 Jan 2025 16:04:53 +0100
Subject: [PATCH 28/40] Fixed build more errors

---
 src/components/field/RatingScaleField.tsx | 120 +++++++++++++---------
 1 file changed, 74 insertions(+), 46 deletions(-)

diff --git a/src/components/field/RatingScaleField.tsx b/src/components/field/RatingScaleField.tsx
index fe878f9..c63f3e7 100644
--- a/src/components/field/RatingScaleField.tsx
+++ b/src/components/field/RatingScaleField.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
 import { Label } from "../ui/label";
 import { z } from "zod";
@@ -269,55 +270,82 @@ function FormComponent({
     return gradientLabels[position].color;
   };
 
+  const labelColor = (index: number) => {
+    if (!useGradient || !gradientLabels) return solidColors.text;
+    const position = (index - minValue) / (maxValue - minValue);
+    if (position <= 0.33) {
+      return gradientLabels.start.color;
+    } else if (position <= 0.66) {
+      return gradientLabels.middle.color;
+    } else {
+      return gradientLabels.end.color;
+    }
+  };
+
+  const buttonClasses = (index: number) => {
+    if (!useGradient) return solidColors.hover;
+    const position = (index - minValue) / (maxValue - minValue);
+    if (position <= 0.33) {
+      return `hover:border-${gradientColorSchemes[gradientScheme].colors[0]}-400`;
+    } else if (position <= 0.66) {
+      return `hover:border-${gradientColorSchemes[gradientScheme].colors[1]}-400`;
+    } else {
+      return `hover:border-${gradientColorSchemes[gradientScheme].colors[2]}-400`;
+    }
+  };
+
+  const selectedClass = (index: number) => {
+    if (!useGradient) return solidColors.selected;
+    const position = (index - minValue) / (maxValue - minValue);
+    if (position <= 0.33) {
+      return `bg-${gradientColorSchemes[gradientScheme].colors[0]}-500 border-${gradientColorSchemes[gradientScheme].colors[0]}-600`;
+    } else if (position <= 0.66) {
+      return `bg-${gradientColorSchemes[gradientScheme].colors[1]}-500 border-${gradientColorSchemes[gradientScheme].colors[1]}-600`;
+    } else {
+      return `bg-${gradientColorSchemes[gradientScheme].colors[2]}-500 border-${gradientColorSchemes[gradientScheme].colors[2]}-600`;
+    }
+  };
+
   return (
-    <div className="w-full max-w-2xl mx-auto p-4">
-      <div className="text-center mb-6">
-        <h3 className={`text-lg font-medium ${getLabelColor('middle')}`}>{question}</h3>
-      </div>
-      
-      <div className="flex justify-between items-center mb-4">
-        {values.map((value) => {
-          const colors = getButtonColors(value);
-          return (
-            <div 
-              key={value} 
-              className="flex flex-col items-center"
-              onMouseEnter={() => setHoveredValue(value)}
-              onMouseLeave={() => setHoveredValue(null)}
-            >
-              <button
-                className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
-                  transform transition-all duration-200 ease-in-out
-                  ${selectedValue === value 
-                    ? `${colors.selected} text-white scale-110` 
-                    : `bg-white ${colors.hover}`}
-                  ${hoveredValue === value ? 'scale-105' : ''}
-                  ${hoveredValue !== null && hoveredValue !== value ? 'opacity-50' : 'opacity-100'}
-                `}
-                onClick={() => handleSelection(value)}
-                aria-label={`Select ${value}`}
-              >
-                <span className="text-sm font-medium">{value}</span>
-              </button>
-            </div>
-          );
-        })}
+    <div className="flex flex-col gap-2 w-full">
+      <Label>
+        {elementInstance.extraAttributes.label}
+        {elementInstance.extraAttributes.required && <span className="text-red-500 ml-1">*</span>}
+      </Label>
+      <div className="flex flex-col sm:flex-row items-center gap-2 w-full">
+        <div className="flex items-center justify-between w-full max-w-3xl mx-auto">
+          <span className={cn("text-sm whitespace-nowrap", labelColor(0))}>{elementInstance.extraAttributes.minLabel}</span>
+          <div className="flex-1 flex justify-center">
+            <span className={cn("text-sm whitespace-nowrap", labelColor(Math.floor(elementInstance.extraAttributes.maxValue / 2)))}>{elementInstance.extraAttributes.midLabel}</span>
+          </div>
+          <span className={cn("text-sm whitespace-nowrap", labelColor(elementInstance.extraAttributes.maxValue - 1))}>{elementInstance.extraAttributes.maxLabel}</span>
+        </div>
       </div>
-      
-      <div className="flex justify-between px-4 transition-opacity duration-300">
-        <span className={`text-sm ${getLabelColor('start')} transform transition-all duration-300
-          ${hoveredValue !== null && hoveredValue <= minValue + (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
-          {minLabel}
-        </span>
-        <span className={`text-sm ${getLabelColor('middle')} transform transition-all duration-300
-          ${hoveredValue !== null && hoveredValue > minValue + (maxValue - minValue) / 3 && hoveredValue < maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
-          {midLabel}
-        </span>
-        <span className={`text-sm ${getLabelColor('end')} transform transition-all duration-300
-          ${hoveredValue !== null && hoveredValue >= maxValue - (maxValue - minValue) / 3 ? 'scale-110 font-medium' : ''}`}>
-          {maxLabel}
-        </span>
+      <div className="flex flex-wrap justify-center gap-2 w-full max-w-3xl mx-auto">
+        {Array.from({ length: elementInstance.extraAttributes.maxValue }, (_, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => handleSelection(i + 1)}
+            className={cn(
+              "w-10 h-10 rounded-full border-2 transition-all",
+              "focus:outline-none focus:ring-2 focus:ring-offset-2",
+              buttonClasses(i),
+              {
+                [selectedClass(i)]: selectedValue === i + 1,
+                "opacity-50": selectedValue && selectedValue !== i + 1,
+              }
+            )}
+          >
+            {i + 1}
+          </button>
+        ))}
       </div>
+      {elementInstance.extraAttributes.helperText && (
+        <p className={cn("text-muted-foreground text-sm", { "text-red-500": isInvalid })}>
+          {elementInstance.extraAttributes.helperText}
+        </p>
+      )}
     </div>
   );
 }

From 8b9f43f29b899aa656c531112fd54095bd0acb5f Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Wed, 29 Jan 2025 23:35:22 +0100
Subject: [PATCH 29/40] Fixed audit errors and typescript errors

---
 package-lock.json                         | 267 +++++++++++++---------
 src/components/field/RatingScaleField.tsx |  14 +-
 2 files changed, 171 insertions(+), 110 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b940515..757b383 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -109,12 +109,13 @@
       }
     },
     "node_modules/@clerk/backend": {
-      "version": "0.38.3",
-      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-0.38.3.tgz",
-      "integrity": "sha512-k14WRljVNETpIYrt99MBP/Zd7KEwkudQKSCEMatQbiRkWgrpwDWE8Czv+JzF1J7sdMiicBI+p2ph9biX1EOFzw==",
+      "version": "0.38.14",
+      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-0.38.14.tgz",
+      "integrity": "sha512-hejdtVIy5z5TABDASEJnigrbGnN15JYzJbTjnbpCO8n6Bw2B1DVfR1fsQZw1TaE9HSWh15UCZMjuvtYH0IHciQ==",
+      "license": "MIT",
       "dependencies": {
-        "@clerk/shared": "1.3.3",
-        "@clerk/types": "3.62.1",
+        "@clerk/shared": "1.4.2",
+        "@clerk/types": "3.65.4",
         "@peculiar/webcrypto": "1.4.1",
         "@types/node": "16.18.6",
         "cookie": "0.5.0",
@@ -130,20 +131,23 @@
     "node_modules/@clerk/backend/node_modules/@types/node": {
       "version": "16.18.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.6.tgz",
-      "integrity": "sha512-vmYJF0REqDyyU0gviezF/KHq/fYaUbFhkcNbQCuPGFQj6VTbXuHZoxs/Y7mutWe73C8AC6l9fFu8mSYiBAqkGA=="
+      "integrity": "sha512-vmYJF0REqDyyU0gviezF/KHq/fYaUbFhkcNbQCuPGFQj6VTbXuHZoxs/Y7mutWe73C8AC6l9fFu8mSYiBAqkGA==",
+      "license": "MIT"
     },
     "node_modules/@clerk/backend/node_modules/tslib": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "license": "0BSD"
     },
     "node_modules/@clerk/clerk-react": {
-      "version": "4.30.7",
-      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-4.30.7.tgz",
-      "integrity": "sha512-+6Q1hVteqn66gFLiCKSqqSdz2MBjsEjs1fkGLAEKZC1GdfOKrH6oWcLuSwUdyqRvJWuyjeIgwq15zoHtXKyztA==",
+      "version": "4.32.4",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-4.32.4.tgz",
+      "integrity": "sha512-QJP4oThzyTpMnZR27r5iwH1Bqh+oBJp5S1D0lRDPB+kmObfSWdzVAePXhD0PCZn/3lkb6UXeoH+T0oSM2ySPSQ==",
+      "license": "MIT",
       "dependencies": {
-        "@clerk/shared": "1.3.3",
-        "@clerk/types": "3.62.1",
+        "@clerk/shared": "1.4.2",
+        "@clerk/types": "3.65.4",
         "tslib": "2.4.1"
       },
       "engines": {
@@ -156,16 +160,19 @@
     "node_modules/@clerk/clerk-react/node_modules/tslib": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "license": "0BSD"
     },
     "node_modules/@clerk/clerk-sdk-node": {
-      "version": "4.13.11",
-      "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-4.13.11.tgz",
-      "integrity": "sha512-6CiRx61SW0B7i+4STlID537LvwFJvNGWxxQZY96OPHQnvYGYsp+9PdEyY4zaQiyLQBLYJt1+uc7VsdSYY5Omww==",
+      "version": "4.13.22",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-4.13.22.tgz",
+      "integrity": "sha512-2XwlQ01nK/4cqJsiKFWw5GPZ7l7BChyCobZ6Jd4GZDr65pGhljO3BdKEHA4Dqs/d9H3QJkaZqUAcmpahBaRzug==",
+      "deprecated": "January 10 2025 marks the end of support for @clerk/clerk-sdk-node as previously announced in our October 2024 deprecation notice. Express users can migrate to the @clerk/express package. For more information, you can find our changelog here: https://clerk.com/changelog/2025-01-10-node-sdk-eol",
+      "license": "MIT",
       "dependencies": {
-        "@clerk/backend": "0.38.3",
-        "@clerk/shared": "1.3.3",
-        "@clerk/types": "3.62.1",
+        "@clerk/backend": "0.38.14",
+        "@clerk/shared": "1.4.2",
+        "@clerk/types": "3.65.4",
         "@types/cookies": "0.7.7",
         "@types/express": "4.17.14",
         "@types/node-fetch": "2.6.2",
@@ -181,6 +188,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/snakecase-keys/-/snakecase-keys-3.2.1.tgz",
       "integrity": "sha512-CjU5pyRfwOtaOITYv5C8DzpZ8XA/ieRsDpr93HI2r6e3YInC6moZpSQbmUtg8cTk58tq2x3jcG2gv+p1IZGmMA==",
+      "license": "MIT",
       "dependencies": {
         "map-obj": "^4.1.0",
         "to-snake-case": "^1.0.0"
@@ -192,19 +200,20 @@
     "node_modules/@clerk/clerk-sdk-node/node_modules/tslib": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "license": "0BSD"
     },
     "node_modules/@clerk/nextjs": {
-      "version": "4.29.9",
-      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.29.9.tgz",
-      "integrity": "sha512-RsOz+lxlPYJi9cBvhBRqAUVUOMBT20R3ppt3eof97DkqCT6YaHJx/S13XcYUuo6ojYRDDJ/nI6XiLcfpqIJO6g==",
-      "dependencies": {
-        "@clerk/backend": "0.38.3",
-        "@clerk/clerk-react": "4.30.7",
-        "@clerk/clerk-sdk-node": "4.13.11",
-        "@clerk/shared": "1.3.3",
-        "@clerk/types": "3.62.1",
-        "path-to-regexp": "6.2.1",
+      "version": "4.31.6",
+      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.31.6.tgz",
+      "integrity": "sha512-rGZ687oHrMzWu2zA5HXHVdCp31C7Ltb+pM0Sc6CgJ7KfURbK8GsG2w/Yw2PhntuKoya4y8h03uaXdgfCxGOzMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@clerk/backend": "0.38.14",
+        "@clerk/clerk-react": "4.32.4",
+        "@clerk/clerk-sdk-node": "4.13.22",
+        "@clerk/shared": "1.4.2",
+        "@clerk/types": "3.65.4",
         "tslib": "2.4.1"
       },
       "engines": {
@@ -222,9 +231,10 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/@clerk/shared": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-1.3.3.tgz",
-      "integrity": "sha512-Eein8cK72dlvY6Q1uFuw9K9MJH1OPjU8FzWloMTKklBo+iPiM6+uENGeGwlY5KId3q/kgPwRc2hBQnUoaijxCQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-1.4.2.tgz",
+      "integrity": "sha512-R+OkzCtnNU7sn/F6dBfdY5lKs84TN785VZdBBefmyr7zsXcFEqbCcfQzyvgtIS28Ln5SifFEBoAyYR334IXO8w==",
+      "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "0.4.1",
         "js-cookie": "3.0.1",
@@ -240,9 +250,10 @@
       }
     },
     "node_modules/@clerk/types": {
-      "version": "3.62.1",
-      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-3.62.1.tgz",
-      "integrity": "sha512-RmQhWB7EMZw2nE24viQG79VyEUULZYWndYew5oXiZx06DyvysMNCorDyEGRmgBbprv7bnbYhHdOtKmx8Wj0jug==",
+      "version": "3.65.4",
+      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-3.65.4.tgz",
+      "integrity": "sha512-sDNt7kp/rYVUF+wJvLPlH+YMm/iKgtARVmTZBU0rgXKPrEKJA1vdmT2UCe4geO1lgqHCi1lXTzm2O90NCWC9yA==",
+      "license": "MIT",
       "dependencies": {
         "csstype": "3.1.1"
       },
@@ -253,7 +264,8 @@
     "node_modules/@clerk/types/node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "license": "MIT"
     },
     "node_modules/@dnd-kit/accessibility": {
       "version": "3.1.0",
@@ -688,19 +700,21 @@
       }
     },
     "node_modules/@peculiar/asn1-schema": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.8.tgz",
-      "integrity": "sha512-ULB1XqHKx1WBU/tTFIA+uARuRoBVZ4pNdOA878RDrRbBfBGcSzi5HBkdScC6ZbHn8z7L8gmKCgPC1LHRrP46tA==",
+      "version": "2.3.15",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.15.tgz",
+      "integrity": "sha512-QPeD8UA8axQREpgR5UTAfu2mqQmm97oUqahDtNdBcfj3qAnoXzFdQW+aNf/tD2WVXF8Fhmftxoj0eMIT++gX2w==",
+      "license": "MIT",
       "dependencies": {
         "asn1js": "^3.0.5",
-        "pvtsutils": "^1.3.5",
-        "tslib": "^2.6.2"
+        "pvtsutils": "^1.3.6",
+        "tslib": "^2.8.1"
       }
     },
     "node_modules/@peculiar/json-schema": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@peculiar/json-schema/-/json-schema-1.1.12.tgz",
       "integrity": "sha512-coUfuoMeIB7B8/NMekxaDzLhaYmp0HZNPEjYRm9goRou8UZIC3z21s0sL9AWoCw4EG876QyO3kYrc61WNF9B/w==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -712,6 +726,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@peculiar/webcrypto/-/webcrypto-1.4.1.tgz",
       "integrity": "sha512-eK4C6WTNYxoI7JOabMoZICiyqRRtJB220bh0Mbj5RwRycleZf9BPyZoxsTvpP0FpmVS2aS13NKOuh5/tN3sIRw==",
+      "license": "MIT",
       "dependencies": {
         "@peculiar/asn1-schema": "^2.3.0",
         "@peculiar/json-schema": "^1.1.12",
@@ -2152,6 +2167,7 @@
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
       "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
+      "license": "MIT",
       "dependencies": {
         "@types/connect": "*",
         "@types/node": "*"
@@ -2161,6 +2177,7 @@
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
       "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -2169,6 +2186,7 @@
       "version": "0.7.7",
       "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.7.tgz",
       "integrity": "sha512-h7BcvPUogWbKCzBR2lY4oqaZbO3jXZksexYJVFvkrFeLgbZjQkU4x8pRq6eg2MHXQhY0McQdqmmsxRWlVAHooA==",
+      "license": "MIT",
       "dependencies": {
         "@types/connect": "*",
         "@types/express": "*",
@@ -2180,6 +2198,7 @@
       "version": "4.17.14",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.14.tgz",
       "integrity": "sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==",
+      "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.18",
@@ -2188,9 +2207,10 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.43",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.43.tgz",
-      "integrity": "sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==",
+      "version": "4.19.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
+      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -2201,7 +2221,8 @@
     "node_modules/@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
-      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA=="
+      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
+      "license": "MIT"
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -2212,12 +2233,14 @@
     "node_modules/@types/keygrip": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.6.tgz",
-      "integrity": "sha512-lZuNAY9xeJt7Bx4t4dx0rYCDqGPW8RXhQZK1td7d4H6E9zYbLoOtjBvfwdTKpsyxQI/2jv+armjX/RW+ZNpXOQ=="
+      "integrity": "sha512-lZuNAY9xeJt7Bx4t4dx0rYCDqGPW8RXhQZK1td7d4H6E9zYbLoOtjBvfwdTKpsyxQI/2jv+armjX/RW+ZNpXOQ==",
+      "license": "MIT"
     },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "20.11.26",
@@ -2231,6 +2254,7 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.2.tgz",
       "integrity": "sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==",
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*",
         "form-data": "^3.0.0"
@@ -2248,14 +2272,16 @@
       "devOptional": true
     },
     "node_modules/@types/qs": {
-      "version": "6.9.12",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.12.tgz",
-      "integrity": "sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg=="
+      "version": "6.9.18",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
+      "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==",
+      "license": "MIT"
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.2.65",
@@ -2287,19 +2313,21 @@
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
       "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+      "license": "MIT",
       "dependencies": {
         "@types/mime": "^1",
         "@types/node": "*"
       }
     },
     "node_modules/@types/serve-static": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.5.tgz",
-      "integrity": "sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==",
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
+      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
+      "license": "MIT",
       "dependencies": {
         "@types/http-errors": "*",
-        "@types/mime": "*",
-        "@types/node": "*"
+        "@types/node": "*",
+        "@types/send": "*"
       }
     },
     "node_modules/@typescript-eslint/parser": {
@@ -2730,6 +2758,7 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.5.tgz",
       "integrity": "sha512-FVnvrKJwpt9LP2lAMl8qZswRNm3T4q9CON+bxldk2iwk3FFpuwhx2FfinyitizWHsVYyaY+y5JzDR0rCMV5yTQ==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "pvtsutils": "^1.3.2",
         "pvutils": "^1.1.3",
@@ -2757,7 +2786,8 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
     },
     "node_modules/autoprefixer": {
       "version": "10.4.18",
@@ -2884,11 +2914,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2993,6 +3024,7 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -3009,6 +3041,7 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
       "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+      "license": "MIT",
       "dependencies": {
         "camelcase": "^5.3.1",
         "map-obj": "^4.0.0",
@@ -3176,6 +3209,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -3201,14 +3235,16 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
       "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3301,6 +3337,7 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
       "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3343,6 +3380,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
       }
@@ -3408,6 +3446,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
       "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "license": "MIT",
       "dependencies": {
         "no-case": "^3.0.4",
         "tslib": "^2.0.3"
@@ -4131,9 +4170,10 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -4202,9 +4242,10 @@
       }
     },
     "node_modules/form-data": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.2.tgz",
+      "integrity": "sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==",
+      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -4408,7 +4449,8 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "license": "BSD-2-Clause"
     },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.1",
@@ -4881,6 +4923,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -5090,6 +5133,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
       "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       }
@@ -5245,6 +5289,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
       "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.3"
       }
@@ -5269,6 +5314,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       },
@@ -5285,11 +5331,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -5300,6 +5347,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -5308,6 +5356,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -5378,15 +5427,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -5507,6 +5557,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
       "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "license": "MIT",
       "dependencies": {
         "lower-case": "^2.0.2",
         "tslib": "^2.0.3"
@@ -5533,7 +5584,8 @@
     "node_modules/node-fetch-native": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.0.1.tgz",
-      "integrity": "sha512-VzW+TAk2wE4X9maiKMlT+GsPU4OMmR1U9CrHSmd3DFLn2IcZ9VJ6M6BBugGfYUnPCLSYxXdZy17M0BEJyhUTwg=="
+      "integrity": "sha512-VzW+TAk2wE4X9maiKMlT+GsPU4OMmR1U9CrHSmd3DFLn2IcZ9VJ6M6BBugGfYUnPCLSYxXdZy17M0BEJyhUTwg==",
+      "license": "MIT"
     },
     "node_modules/node-releases": {
       "version": "2.0.14",
@@ -5802,11 +5854,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/path-to-regexp": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -6080,17 +6127,19 @@
       }
     },
     "node_modules/pvtsutils": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.5.tgz",
-      "integrity": "sha512-ARvb14YB9Nm2Xi6nBq1ZX6dAM0FsJnuk+31aUp4TrcZEdKUlSqOqsxJHUPJDNE3qiIp+iUPEIeR6Je/tgV7zsA==",
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.6.1"
+        "tslib": "^2.8.1"
       }
     },
     "node_modules/pvutils": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.3.tgz",
       "integrity": "sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -6118,6 +6167,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -6703,6 +6753,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
       "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "license": "MIT",
       "dependencies": {
         "dot-case": "^3.0.4",
         "tslib": "^2.0.3"
@@ -6712,6 +6763,7 @@
       "version": "5.4.4",
       "resolved": "https://registry.npmjs.org/snakecase-keys/-/snakecase-keys-5.4.4.tgz",
       "integrity": "sha512-YTywJG93yxwHLgrYLZjlC75moVEX04LZM4FHfihjHe1FCXm+QaLOFfSf535aXOAd0ArVQMWUAe8ZPm4VtWyXaA==",
+      "license": "MIT",
       "dependencies": {
         "map-obj": "^4.1.0",
         "snake-case": "^3.0.4",
@@ -6725,6 +6777,7 @@
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
       "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=12.20"
       },
@@ -7005,6 +7058,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.0.tgz",
       "integrity": "sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==",
+      "license": "MIT",
       "dependencies": {
         "use-sync-external-store": "^1.2.0"
       },
@@ -7133,12 +7187,14 @@
     "node_modules/to-no-case": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz",
-      "integrity": "sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg=="
+      "integrity": "sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==",
+      "license": "MIT"
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -7150,6 +7206,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/to-snake-case/-/to-snake-case-1.0.0.tgz",
       "integrity": "sha512-joRpzBAk1Bhi2eGEYBjukEWHOe/IvclOkiJl3DtA91jV6NwQ3MwXA4FHYeqk8BNp/D8bmi9tcNbRu/SozP0jbQ==",
+      "license": "MIT",
       "dependencies": {
         "to-space-case": "^1.0.0"
       }
@@ -7158,6 +7215,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz",
       "integrity": "sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==",
+      "license": "MIT",
       "dependencies": {
         "to-no-case": "^1.0.0"
       }
@@ -7192,9 +7250,10 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
@@ -7424,11 +7483,12 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/util-deprecate": {
@@ -7449,15 +7509,16 @@
       }
     },
     "node_modules/webcrypto-core": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.8.tgz",
-      "integrity": "sha512-eBR98r9nQXTqXt/yDRtInszPMjTaSAMJAFDg2AHsgrnczawT1asx9YNBX6k5p+MekbPF4+s/UJJrr88zsTqkSg==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.8.1.tgz",
+      "integrity": "sha512-P+x1MvlNCXlKbLSOY4cYrdreqPG5hbzkmawbcXLKN/mf6DZW0SdNNkZ+sjwsqVkI4A4Ko2sPZmkZtCKY58w83A==",
+      "license": "MIT",
       "dependencies": {
-        "@peculiar/asn1-schema": "^2.3.8",
+        "@peculiar/asn1-schema": "^2.3.13",
         "@peculiar/json-schema": "^1.1.12",
-        "asn1js": "^3.0.1",
+        "asn1js": "^3.0.5",
         "pvtsutils": "^1.3.5",
-        "tslib": "^2.6.2"
+        "tslib": "^2.7.0"
       }
     },
     "node_modules/which": {
diff --git a/src/components/field/RatingScaleField.tsx b/src/components/field/RatingScaleField.tsx
index c63f3e7..cca4148 100644
--- a/src/components/field/RatingScaleField.tsx
+++ b/src/components/field/RatingScaleField.tsx
@@ -309,20 +309,20 @@ function FormComponent({
   return (
     <div className="flex flex-col gap-2 w-full">
       <Label>
-        {elementInstance.extraAttributes.label}
-        {elementInstance.extraAttributes.required && <span className="text-red-500 ml-1">*</span>}
+        {elementInstance.extraAttributes?.label}
+        {elementInstance.extraAttributes?.required && <span className="text-red-500 ml-1">*</span>}
       </Label>
       <div className="flex flex-col sm:flex-row items-center gap-2 w-full">
         <div className="flex items-center justify-between w-full max-w-3xl mx-auto">
-          <span className={cn("text-sm whitespace-nowrap", labelColor(0))}>{elementInstance.extraAttributes.minLabel}</span>
+          <span className={cn("text-sm whitespace-nowrap", labelColor(0))}>{elementInstance.extraAttributes?.minLabel}</span>
           <div className="flex-1 flex justify-center">
-            <span className={cn("text-sm whitespace-nowrap", labelColor(Math.floor(elementInstance.extraAttributes.maxValue / 2)))}>{elementInstance.extraAttributes.midLabel}</span>
+            <span className={cn("text-sm whitespace-nowrap", labelColor(Math.floor((elementInstance.extraAttributes?.maxValue ?? 0) / 2)))}>{elementInstance.extraAttributes?.midLabel}</span>
           </div>
-          <span className={cn("text-sm whitespace-nowrap", labelColor(elementInstance.extraAttributes.maxValue - 1))}>{elementInstance.extraAttributes.maxLabel}</span>
+          <span className={cn("text-sm whitespace-nowrap", labelColor((elementInstance.extraAttributes?.maxValue ?? 0) - 1))}>{elementInstance.extraAttributes?.maxLabel}</span>
         </div>
       </div>
       <div className="flex flex-wrap justify-center gap-2 w-full max-w-3xl mx-auto">
-        {Array.from({ length: elementInstance.extraAttributes.maxValue }, (_, i) => (
+        {Array.from({ length: elementInstance.extraAttributes?.maxValue ?? 0 }, (_, i) => (
           <button
             key={i}
             type="button"
@@ -341,7 +341,7 @@ function FormComponent({
           </button>
         ))}
       </div>
-      {elementInstance.extraAttributes.helperText && (
+      {elementInstance.extraAttributes?.helperText && (
         <p className={cn("text-muted-foreground text-sm", { "text-red-500": isInvalid })}>
           {elementInstance.extraAttributes.helperText}
         </p>

From d06bb62ada2bed940825bd596d836c943dc276d6 Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Thu, 30 Jan 2025 00:21:07 +0100
Subject: [PATCH 30/40] Fixed editability of the 2 column elements

---
 .env                                          |  6 +-
 src/components/Designer.tsx                   |  2 +-
 src/components/field/SubTitleField.tsx        |  2 +-
 src/components/field/TwoColumnLayoutField.tsx | 61 +++++++++++++++----
 4 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/.env b/.env
index 59d8b97..41a3980 100644
--- a/.env
+++ b/.env
@@ -6,6 +6,6 @@ NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
 
-POSTGRES_PRISMA_URL="postgresql://admin:password@localhost:5432/quickform?schema=public"
-POSTGRES_URL_NON_POOLING="postgresql://admin:password@localhost:5432/quickform?schema=public"
-DATABASE_URL="postgresql://admin:password@localhost:5432/quickform?schema=public"
\ No newline at end of file
+POSTGRES_PRISMA_URL="postgresql://postgres:Monteria80@localhost:5432/quickform?schema=public"
+POSTGRES_URL_NON_POOLING="postgresql://postgres:Monteria80@localhost:5432/quickform?schema=public"
+DATABASE_URL="postgresql://postgres:Monteria80@localhost:5432/quickform?schema=public"
\ No newline at end of file
diff --git a/src/components/Designer.tsx b/src/components/Designer.tsx
index 89002b7..55455b8 100644
--- a/src/components/Designer.tsx
+++ b/src/components/Designer.tsx
@@ -191,7 +191,7 @@ function Designer() {
     );
 }
 
-function DesignerElementWrapper({ element }: { element: FormElementInstance }) {
+export function DesignerElementWrapper({ element }: { element: FormElementInstance }) {
     const { removeElement, selectedElement, setSelectedElement, updateElement } = useDesigner();
 
     const [mouseIsOver, setMouseIsOver] = useState<boolean>(false);
diff --git a/src/components/field/SubTitleField.tsx b/src/components/field/SubTitleField.tsx
index 3523d56..2211f97 100644
--- a/src/components/field/SubTitleField.tsx
+++ b/src/components/field/SubTitleField.tsx
@@ -24,7 +24,7 @@ const extraAttributes = {
 };
 
 const propertiesSchema = z.object({
-  subTitle: z.string().min(2).max(50),
+  subTitle: z.string().min(2).max(150),
   fontSize: z.enum(fontSizeSchema),
   alignment: z.enum(alignmentSchema),
 });
diff --git a/src/components/field/TwoColumnLayoutField.tsx b/src/components/field/TwoColumnLayoutField.tsx
index 8a3db85..4a32b84 100644
--- a/src/components/field/TwoColumnLayoutField.tsx
+++ b/src/components/field/TwoColumnLayoutField.tsx
@@ -5,7 +5,7 @@ import { Label } from "../ui/label";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, memo } from "react";
+import { useEffect, memo, useState } from "react";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { LuColumns } from "react-icons/lu";
 import useDesigner from "@/hooks/useDesigner";
@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import { formThemes } from "@/schemas/form";
 import { useDroppable } from "@dnd-kit/core";
 import { idGenerator } from "@/lib/idGenerator";
+import { DesignerElementWrapper } from "../Designer";
 
 const type: ElementsType = "TwoColumnLayoutField";
 
@@ -30,13 +31,25 @@ const propertiesSchema = z.object({
 
 // Create a memoized wrapper for form components
 const MemoizedFormComponent = memo(
-  ({ element }: { element: FormElementInstance }) => {
-    return FormElements[element.type].formComponent({
-      elementInstance: element,
-    });
+  ({ element, inDesigner = false }: { element: FormElementInstance; inDesigner?: boolean }) => {
+    const { setSelectedElement } = useDesigner();
+    
+    return (
+      <div 
+        onClick={(e) => {
+          if (inDesigner) {
+            e.stopPropagation();
+            setSelectedElement(element);
+          }
+        }}
+      >
+        {FormElements[element.type].formComponent({
+          elementInstance: element,
+        })}
+      </div>
+    );
   },
   (prevProps, nextProps) => {
-    // Custom comparison function to ensure proper updates
     return prevProps.element.id === nextProps.element.id &&
            JSON.stringify(prevProps.element.extraAttributes) === JSON.stringify(nextProps.element.extraAttributes);
   }
@@ -72,8 +85,9 @@ type CustomInstance = FormElementInstance & {
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { gap, leftColumn, rightColumn } = element.extraAttributes;
-  const { theme, addElement } = useDesigner();
+  const { theme, addElement, selectedElement } = useDesigner();
   const { styles } = formThemes[theme];
+  const [mouseIsOver, setMouseIsOver] = useState<boolean>(false);
 
   const droppableLeft = useDroppable({
     id: `${element.id}-left`,
@@ -94,9 +108,17 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
   });
   
   return (
-    <div className="flex flex-col gap-2 w-full">
+    <div 
+      className="flex flex-col gap-2 w-full relative" 
+      onMouseEnter={() => setMouseIsOver(true)}
+      onMouseLeave={() => setMouseIsOver(false)}
+    >
       <Label className="text-muted-foreground">Two Column Layout</Label>
-      <div className={cn("grid grid-cols-2 w-full", `gap-${gap}`)}>
+      <div className={cn(
+        "grid grid-cols-2 w-full",
+        `gap-${gap}`,
+        mouseIsOver && selectedElement?.id !== element.id && "opacity-30",
+      )}>
         <div
           ref={droppableLeft.setNodeRef}
           className={cn(
@@ -105,8 +127,12 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
           )}
         >
           {leftColumn.map((element) => (
-            <div key={element.id} className="mb-4 w-full">
-              <MemoizedFormComponent element={element} />
+            <div 
+              key={element.id} 
+              className="mb-4 w-full relative z-10"
+              style={{ pointerEvents: 'auto' }}
+            >
+              <DesignerElementWrapper element={element} />
             </div>
           ))}
           {!leftColumn.length && (
@@ -123,8 +149,12 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
           )}
         >
           {rightColumn.map((element) => (
-            <div key={element.id} className="mb-4 w-full">
-              <MemoizedFormComponent element={element} />
+            <div 
+              key={element.id} 
+              className="mb-4 w-full relative z-10"
+              style={{ pointerEvents: 'auto' }}
+            >
+              <DesignerElementWrapper element={element} />
             </div>
           ))}
           {!rightColumn.length && (
@@ -134,6 +164,11 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
           )}
         </div>
       </div>
+      {mouseIsOver && selectedElement?.id !== element.id && (
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse pointer-events-none">
+          <p className="text-muted-foreground text-sm">Click for properties or drag to move</p>
+        </div>
+      )}
     </div>
   );
 }

From 4b7f6804e02b892bc26cbed1f45b76d88b18a370 Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Thu, 30 Jan 2025 00:57:37 +0100
Subject: [PATCH 31/40] Fixed restoring of 2 column

---
 src/components/FormBuilder.tsx                | 47 +++++++++++++++-
 src/components/field/TwoColumnLayoutField.tsx | 56 ++++++++++++++-----
 2 files changed, 88 insertions(+), 15 deletions(-)

diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index 294dbc3..7994a7b 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -20,6 +20,7 @@ import Confetti from "react-confetti";
 import useDesigner from "@/hooks/useDesigner";
 import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
 import { formThemes } from "@/schemas/form";
+import { ElementsType, FormElement, FormElementInstance, FormElements } from "./FormElements";
 
 function FormBuilder({ form }: { form: Form }) {
   const { setElements, setSelectedElement, setTheme } = useDesigner();
@@ -63,8 +64,50 @@ function FormBuilder({ form }: { form: Form }) {
 
   useEffect(() => {
     if (isReady) return;
-    const elements = JSON.parse(form.content);
-    setElements(elements);
+    const elements = JSON.parse(form.content) as FormElementInstance[];
+    
+    // Reconstruct form elements properly
+    const reconstructedElements = elements.map((element: FormElementInstance) => {
+      const elementType = element.type as ElementsType;
+      // For TwoColumnLayoutField, we need to reconstruct the column elements
+      if (elementType === 'TwoColumnLayoutField') {
+        const reconstructedElement = FormElements[elementType].construct(element.id);
+        const typedElement = element as FormElementInstance & {
+          extraAttributes: {
+            leftColumn: FormElementInstance[];
+            rightColumn: FormElementInstance[];
+            gap: string;
+          }
+        };
+        
+        reconstructedElement.extraAttributes = {
+          ...element.extraAttributes,
+          gap: typedElement.extraAttributes.gap || "4",
+          leftColumn: typedElement.extraAttributes.leftColumn.map((colElement: FormElementInstance) => {
+            const colType = colElement.type as ElementsType;
+            return {
+              ...FormElements[colType].construct(colElement.id),
+              extraAttributes: colElement.extraAttributes
+            };
+          }),
+          rightColumn: typedElement.extraAttributes.rightColumn.map((colElement: FormElementInstance) => {
+            const colType = colElement.type as ElementsType;
+            return {
+              ...FormElements[colType].construct(colElement.id),
+              extraAttributes: colElement.extraAttributes
+            };
+          })
+        };
+        return reconstructedElement;
+      }
+      // For other elements, just reconstruct normally
+      return {
+        ...FormElements[elementType].construct(element.id),
+        extraAttributes: element.extraAttributes
+      };
+    });
+
+    setElements(reconstructedElements);
     setSelectedElement(null);
     const theme = form.theme as keyof typeof formThemes || "default";
     setTheme(theme);
diff --git a/src/components/field/TwoColumnLayoutField.tsx b/src/components/field/TwoColumnLayoutField.tsx
index 4a32b84..d92b828 100644
--- a/src/components/field/TwoColumnLayoutField.tsx
+++ b/src/components/field/TwoColumnLayoutField.tsx
@@ -5,7 +5,7 @@ import { Label } from "../ui/label";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, memo, useState } from "react";
+import { useEffect, memo, useState, useCallback } from "react";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { LuColumns } from "react-icons/lu";
 import useDesigner from "@/hooks/useDesigner";
@@ -14,6 +14,7 @@ import { formThemes } from "@/schemas/form";
 import { useDroppable } from "@dnd-kit/core";
 import { idGenerator } from "@/lib/idGenerator";
 import { DesignerElementWrapper } from "../Designer";
+import { Suspense } from "react";
 
 const type: ElementsType = "TwoColumnLayoutField";
 
@@ -178,29 +179,56 @@ function FormComponent({ elementInstance }: { elementInstance: FormElementInstan
   const { gap, leftColumn, rightColumn } = element.extraAttributes;
   const { theme } = useDesigner();
   const { styles } = formThemes[theme];
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Quick check to ensure form elements exist
+    const validateElements = () => {
+      try {
+        [...leftColumn, ...rightColumn].forEach((element) => {
+          if (!FormElements[element.type]) {
+            throw new Error(`Form element type ${element.type} not found`);
+          }
+        });
+        return true;
+      } catch (error) {
+        console.error('Error validating form elements:', error);
+        return false;
+      }
+    };
+
+    validateElements();
+    setIsLoading(false);
+  }, [leftColumn, rightColumn]);
+
+  const renderColumn = useCallback((elements: FormElementInstance[]) => {
+    return elements.map((element) => (
+      <div key={element.id} className="mb-4 w-full">
+        <div role="alert">
+          <Suspense fallback={<div>Loading...</div>}>
+            <MemoizedFormComponent element={element} />
+          </Suspense>
+        </div>
+      </div>
+    ));
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading form elements...</div>;
+  }
 
   return (
     <div className={cn("grid grid-cols-2 w-full", `gap-${gap}`)}>
       <div className="w-full">
-        {leftColumn.map((element) => (
-          <div key={element.id} className="mb-4 w-full">
-            <MemoizedFormComponent element={element} />
-          </div>
-        ))}
+        {renderColumn(leftColumn)}
       </div>
       <div className="w-full">
-        {rightColumn.map((element) => (
-          <div key={element.id} className="mb-4 w-full">
-            <MemoizedFormComponent element={element} />
-          </div>
-        ))}
+        {renderColumn(rightColumn)}
       </div>
     </div>
   );
 }
 
-type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
-
 function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { updateElement } = useDesigner();
@@ -262,3 +290,5 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
     </Form>
   );
 }
+
+type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;

From 8c3e2abb2181e954aa062a61b2725a2e5c6256fa Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Thu, 30 Jan 2025 01:42:00 +0100
Subject: [PATCH 32/40] Fixed loading theme in designer as well as helper text
 background

---
 src/app/(routes)/dashboard/page.tsx       | 36 +++++++--
 src/components/FormBuilder.tsx            |  5 +-
 src/components/SaveFormBtn.tsx            |  4 +
 src/components/field/ImageUploadField.tsx | 89 +++++++++--------------
 src/components/field/NumberField.tsx      |  4 +-
 src/components/field/TextField.tsx        | 35 +++++----
 6 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/src/app/(routes)/dashboard/page.tsx b/src/app/(routes)/dashboard/page.tsx
index c82b493..1982808 100644
--- a/src/app/(routes)/dashboard/page.tsx
+++ b/src/app/(routes)/dashboard/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { StatsCard } from "@/components/ui/stats-card";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ReactNode, Suspense, useEffect, useState } from "react";
 import { LuView } from "react-icons/lu";
@@ -12,15 +11,17 @@ import CreateFormBtn from "@/components/CreateFormBtn";
 import { GetFormStats, GetForms } from "@/action/form";
 import FormCard from "@/components/FormCard";
 import { Form } from "@prisma/client";
+import { toast } from "@/components/ui/use-toast";
 
 export default function Home() {
   const [stats, setStats] = useState<Awaited<ReturnType<typeof GetFormStats>> | null>(null);
-  const [forms, setForms] = useState<Form[]>([]);
+  const [forms, setForms] = useState<Form[] | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const loadData = async () => {
       try {
+        setLoading(true);
         const [statsData, formsData] = await Promise.all([
           GetFormStats(),
           GetForms(),
@@ -29,6 +30,12 @@ export default function Home() {
         setForms(formsData);
       } catch (error) {
         console.error("Error loading dashboard data:", error);
+        toast({
+          title: "Error",
+          description: "Failed to load dashboard data. Please try again.",
+          variant: "destructive",
+        });
+        setForms([]);
       } finally {
         setLoading(false);
       }
@@ -38,14 +45,23 @@ export default function Home() {
   }, []);
 
   const handleFormDeleted = (formId: number) => {
-    setForms((prevForms) => prevForms.filter((form) => form.id !== formId));
+    if (!forms) return;
+    
+    setForms((prevForms) => {
+      if (!prevForms) return [];
+      return prevForms.filter((form) => form.id !== formId);
+    });
+    
     // Update stats
     setStats((prevStats) => {
-      if (!prevStats) return null;
+      if (!prevStats || !forms) return null;
+      const deletedForm = forms.find(f => f.id === formId);
+      if (!deletedForm) return prevStats;
+      
       return {
         ...prevStats,
-        visits: prevStats.visits - (forms.find(f => f.id === formId)?.visits || 0),
-        submissions: prevStats.submissions - (forms.find(f => f.id === formId)?.submissions || 0),
+        visits: prevStats.visits - (deletedForm.visits || 0),
+        submissions: prevStats.submissions - (deletedForm.submissions || 0),
       };
     });
   };
@@ -100,6 +116,14 @@ export default function Home() {
           [1, 2, 3, 4].map((el) => (
             <FormCardSkeleton key={el} />
           ))
+        ) : forms === null ? (
+          <div className="col-span-3 text-center">
+            <p>Error loading forms. Please try refreshing the page.</p>
+          </div>
+        ) : forms.length === 0 ? (
+          <div className="col-span-3 text-center">
+            <p>No forms created yet. Create your first form to get started!</p>
+          </div>
         ) : (
           forms.map((form) => (
             <FormCard key={form.id} form={form} onDelete={handleFormDeleted} />
diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index 7994a7b..6e0705c 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -66,6 +66,9 @@ function FormBuilder({ form }: { form: Form }) {
     if (isReady) return;
     const elements = JSON.parse(form.content) as FormElementInstance[];
     
+    // Initialize theme from form
+    setTheme((form.theme || "default") as keyof typeof formThemes);
+    
     // Reconstruct form elements properly
     const reconstructedElements = elements.map((element: FormElementInstance) => {
       const elementType = element.type as ElementsType;
@@ -109,8 +112,6 @@ function FormBuilder({ form }: { form: Form }) {
 
     setElements(reconstructedElements);
     setSelectedElement(null);
-    const theme = form.theme as keyof typeof formThemes || "default";
-    setTheme(theme);
     const readyTimeout = setTimeout(() => setIsReady(true), 500);
     return () => clearTimeout(readyTimeout);
   }, [form, setElements, isReady, setSelectedElement, setTheme]);
diff --git a/src/components/SaveFormBtn.tsx b/src/components/SaveFormBtn.tsx
index 23d8951..73ab05e 100644
--- a/src/components/SaveFormBtn.tsx
+++ b/src/components/SaveFormBtn.tsx
@@ -5,15 +5,19 @@ import useDesigner from "@/hooks/useDesigner";
 import { toast } from "./ui/use-toast";
 import { FaSpinner } from "react-icons/fa";
 import { UpdateFormContent } from "@/action/form";
+import { useRouter } from "next/navigation";
 
 function SaveFormBtn({ id }: { id: number }) {
   const { elements, theme } = useDesigner();
   const [loading, startTransition] = useTransition();
+  const router = useRouter();
 
   const updateFormContent = async () => {
     try {
       const jsonElements = JSON.stringify(elements);
       await UpdateFormContent(id, jsonElements, theme);
+      // Force a revalidation of the data
+      router.refresh();
       toast({
         title: "Success",
         description: "Your form has been saved",
diff --git a/src/components/field/ImageUploadField.tsx b/src/components/field/ImageUploadField.tsx
index 6482c5a..2806c72 100644
--- a/src/components/field/ImageUploadField.tsx
+++ b/src/components/field/ImageUploadField.tsx
@@ -101,96 +101,75 @@ function FormComponent({
     reader.readAsDataURL(file);
   };
 
-  const handleDragEnter = (e: React.DragEvent) => {
+  const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(true);
   };
 
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
+  const handleDragLeave = () => {
     setIsDragging(false);
   };
 
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(false);
-
     const file = e.dataTransfer.files[0];
-    if (file && file.type.startsWith("image/")) {
+    if (file && file.type.startsWith('image/')) {
       handleFileSelect(file);
     }
   };
 
-  const handleButtonClick = () => {
-    fileInputRef.current?.click();
-  };
-
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className={clsx(isInvalid && "text-red-500")}>
+      <Label>
         {label}
         {required && "*"}
       </Label>
-      <div
+      <div 
         className={clsx(
-          "relative flex flex-col items-center justify-center p-4 border-2 border-dashed rounded-lg transition-colors",
-          width,
-          height,
-          isDragging ? "border-primary bg-primary/10" : "border-gray-300",
+          `${width} ${height} border-2 border-dashed border-gray-300 rounded-lg relative mx-auto overflow-hidden`,
+          isDragging && "border-primary",
           isInvalid && "border-red-500"
         )}
-        onDragEnter={handleDragEnter}
-        onDragOver={(e) => e.preventDefault()}
+        onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
+        onClick={() => fileInputRef.current?.click()}
       >
         {previewImage ? (
-          <div className="relative w-full h-full">
-            <img
+          <div className="relative w-full h-full group">
+            <NextImage
               src={previewImage}
               alt="Preview"
-              className="w-full h-full object-contain"
+              fill
+              className="object-contain"
             />
-            <Button
-              variant="outline"
-              className="absolute top-2 right-2"
-              onClick={() => setPreviewImage(null)}
-            >
-              Change
-            </Button>
+            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/20">
+              <div className="p-2 rounded-full bg-black/30 hover:bg-black/50 cursor-pointer">
+                <BsCardImage className="w-6 h-6 text-white" />
+              </div>
+            </div>
           </div>
         ) : (
-          <>
-            <input
-              type="file"
-              ref={fileInputRef}
-              accept="image/*"
-              className="hidden"
-              onChange={(e) => {
-                const file = e.target.files?.[0];
-                if (file) handleFileSelect(file);
-              }}
-            />
-            <div className="text-center">
-              <BsCardImage className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-              <p className="mb-2 text-sm text-gray-500">{prompt}</p>
-              <Button
-                type="button"
-                variant="outline"
-                className="mx-auto"
-                onClick={handleButtonClick}
-              >
-                {buttonText}
-              </Button>
+          <div className="h-full w-full flex items-center justify-center">
+            <div className="text-gray-400 text-center">
+              <BsCardImage className="w-12 h-12 mx-auto mb-2" />
+              <p>{prompt}</p>
             </div>
-          </>
+          </div>
         )}
       </div>
-      {helperText && (
-        <p className={clsx("text-muted-foreground text-[0.8rem]", isInvalid && "text-red-500")}>
-          {helperText}
-        </p>
-      )}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
+        }}
+      />
+      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
     </div>
   );
 }
diff --git a/src/components/field/NumberField.tsx b/src/components/field/NumberField.tsx
index 199b503..504f397 100644
--- a/src/components/field/NumberField.tsx
+++ b/src/components/field/NumberField.tsx
@@ -79,7 +79,7 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
         placeholder={placeHolder}
         className={cn(styles.text, styles.input, styles.border)}
       />
-      {helperText && <p className={cn("text-[0.8rem]", styles.muted)}>{helperText}</p>}
+      {helperText && <p className={cn("text-[0.8rem]", styles.muted.split(" ").find(c => c.startsWith("text-")))}>{helperText}</p>}
     </div>
   );
 }
@@ -134,7 +134,7 @@ function FormComponent({
       {helperText && (
         <p className={cn(
           "text-[0.8rem]",
-          error ? "text-red-500" : styles.muted
+          error ? "text-red-500" : styles.muted.split(" ").find(c => c.startsWith("text-"))
         )}>
           {helperText}
         </p>
diff --git a/src/components/field/TextField.tsx b/src/components/field/TextField.tsx
index 44f0816..ca410c1 100644
--- a/src/components/field/TextField.tsx
+++ b/src/components/field/TextField.tsx
@@ -63,10 +63,11 @@ type CustomInstance = FormElementInstance & {
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
   const { label, required, placeHolder, helperText } = element.extraAttributes;
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label>
+      <Label className={styles.text}>
         {label}
         {required && "*"}
       </Label>
@@ -74,9 +75,9 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
         readOnly 
         disabled 
         placeholder={placeHolder}
-        className={formThemes[theme].styles.input}
+        className={cn(styles.text, styles.input, styles.border)}
       />
-      {helperText && <p className="text-muted-foreground text-[0.8rem]">{helperText}</p>}
+      {helperText && <p className={cn("text-[0.8rem]", styles.muted.split(" ").find(c => c.startsWith("text-")))}>{helperText}</p>}
     </div>
   );
 }
@@ -94,6 +95,7 @@ function FormComponent({
 }) {
   const element = elementInstance as CustomInstance;
   const { theme } = useDesigner();
+  const { styles } = formThemes[theme];
   const [value, setValue] = useState(defaultValue || "");
   const [error, setError] = useState(false);
 
@@ -102,29 +104,30 @@ function FormComponent({
   }, [isInvalid]);
 
   const { label, required, placeHolder, helperText } = element.extraAttributes;
+
   return (
     <div className="flex flex-col gap-2 w-full">
-      <Label className={cn(error && "text-red-500")}>
+      <Label className={cn(styles.text, error && "text-red-500")}>
         {label}
         {required && "*"}
       </Label>
       <Input
-        className={cn(
-          error && "border-red-500",
-          formThemes[theme].styles.input
-        )}
         placeholder={placeHolder}
-        onChange={(e) => setValue(e.target.value)}
-        onBlur={(e) => {
-          if (!submitValue) return;
-          const valid = TextFieldFormElement.validate(element, e.target.value);
-          setError(!valid);
-          if (!valid) return;
-          submitValue(element.id, e.target.value);
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (submitValue) submitValue(element.id, e.target.value);
         }}
         value={value}
+        className={cn(styles.text, styles.input, styles.border, error && "border-red-500")}
       />
-      {helperText && <p className={cn("text-muted-foreground text-[0.8rem]", error && "text-red-500")}>{helperText}</p>}
+      {helperText && (
+        <p className={cn(
+          "text-[0.8rem]",
+          error ? "text-red-500" : styles.muted.split(" ").find(c => c.startsWith("text-"))
+        )}>
+          {helperText}
+        </p>
+      )}
     </div>
   );
 }

From 4cd5e39d3c26a36f45049fd57ebf9597cdf90446 Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Thu, 30 Jan 2025 02:04:37 +0100
Subject: [PATCH 33/40] Fixed embedded preview

---
 src/app/api/embed/[formId]/js/route.ts | 257 ++++++++++++++++++++-----
 1 file changed, 212 insertions(+), 45 deletions(-)

diff --git a/src/app/api/embed/[formId]/js/route.ts b/src/app/api/embed/[formId]/js/route.ts
index 17055b8..bee8fe2 100644
--- a/src/app/api/embed/[formId]/js/route.ts
+++ b/src/app/api/embed/[formId]/js/route.ts
@@ -51,6 +51,7 @@ export async function GET(
       (() => {
         // Find or create container
         const containerId = 'quick-form-${formId}';
+        const formId = ${formId}; // Make formId available in the closure
         let container = document.getElementById(containerId);
         if (!container) {
           console.error('Quick Form container not found:', containerId);
@@ -163,38 +164,37 @@ export async function GET(
             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
           }
           
-          .quick-form-picture-select { 
-            display: grid; 
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
-            gap: 12px; 
+          .quick-form-picture-select {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
             margin-top: 8px;
           }
-          .quick-form-picture-option { 
-            cursor: pointer; 
-            border: 2px solid transparent; 
-            padding: 4px; 
+          .quick-form-picture-option {
+            border: 2px solid #D1D5DB;
             border-radius: 8px;
+            overflow: hidden;
+            cursor: pointer;
             transition: all 0.2s ease;
-            background: white;
+            position: relative;
           }
           .quick-form-picture-option:hover {
+            border-color: #6366F1;
             transform: translateY(-2px);
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
           }
-          .quick-form-picture-option.selected { 
+          .quick-form-picture-option.selected {
             border-color: #6366F1;
             background: #F3F4F6;
           }
-          .quick-form-picture-option img { 
-            width: 100%; 
-            height: 150px; 
-            object-fit: cover; 
-            border-radius: 6px;
+          .quick-form-picture-option img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
           }
           .quick-form-picture-option .label {
-            margin-top: 4px;
+            padding: 8px;
             text-align: center;
-            font-size: 14px;
+            font-weight: 500;
             color: #4B5563;
           }
           
@@ -279,6 +279,18 @@ export async function GET(
             color: #4B5563;
             font-size: 14px;
           }
+          
+          .quick-form-two-column {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            margin-top: 16px;
+          }
+          .quick-form-column {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+          }
         \`;
         document.head.appendChild(style);
 
@@ -328,6 +340,27 @@ export async function GET(
               wrapper.appendChild(textHelperText);
               break;
 
+            case 'NumberField':
+              const numberLabel = document.createElement('label');
+              numberLabel.className = 'quick-form-label';
+              numberLabel.textContent = element.extraAttributes?.label || '';
+              
+              const numberHelperText = document.createElement('div');
+              numberHelperText.className = 'quick-form-helper-text';
+              numberHelperText.textContent = element.extraAttributes?.helperText || '';
+              
+              const numberInput = document.createElement('input');
+              numberInput.type = 'number';
+              numberInput.name = element.id;
+              numberInput.className = 'quick-form-input';
+              numberInput.placeholder = element.extraAttributes?.placeHolder || '0';
+              numberInput.required = element.extraAttributes?.required || false;
+              
+              wrapper.appendChild(numberLabel);
+              wrapper.appendChild(numberInput);
+              wrapper.appendChild(numberHelperText);
+              break;
+
             case 'CheckboxField':
               const checkboxLabel = document.createElement('label');
               checkboxLabel.className = 'quick-form-label';
@@ -427,23 +460,22 @@ export async function GET(
                 option.className = 'quick-form-picture-option';
                 
                 const imgEl = document.createElement('img');
-                imgEl.src = img.url;
+                // Convert relative URLs to absolute URLs
+                imgEl.src = img.src.startsWith('/') ? window.location.origin + img.src : img.src;
                 imgEl.alt = img.label || '';
                 
-                option.appendChild(imgEl);
+                const label = document.createElement('div');
+                label.className = 'label';
+                label.textContent = img.label || '';
                 
-                if (img.label) {
-                  const label = document.createElement('div');
-                  label.className = 'label';
-                  label.textContent = img.label;
-                  option.appendChild(label);
-                }
+                option.appendChild(imgEl);
+                option.appendChild(label);
                 
                 option.addEventListener('click', () => {
                   document.querySelectorAll('.quick-form-picture-option').forEach(el => 
                     el.classList.remove('selected'));
                   option.classList.add('selected');
-                  hiddenInput.value = img.url;
+                  hiddenInput.value = img.src;
                 });
                 
                 pictureGrid.appendChild(option);
@@ -524,6 +556,155 @@ export async function GET(
               wrapper.appendChild(ratingInput);
               break;
 
+            case 'ImageElement':
+              const imageContainer = document.createElement('div');
+              imageContainer.className = 'quick-form-field';
+              imageContainer.style.textAlign = element.extraAttributes?.alignment || 'center';
+              imageContainer.style.marginTop = \`\${element.extraAttributes?.marginTop || 0}px\`;
+              imageContainer.style.marginBottom = \`\${element.extraAttributes?.marginBottom || 0}px\`;
+              imageContainer.style.marginLeft = \`\${element.extraAttributes?.marginLeft || 0}px\`;
+              imageContainer.style.marginRight = \`\${element.extraAttributes?.marginRight || 0}px\`;
+
+              const image = document.createElement('img');
+              image.src = element.extraAttributes?.base64Image || '';
+              image.style.height = \`\${element.extraAttributes?.height || 200}px\`;
+              image.style.width = \`\${element.extraAttributes?.width || 200}px\`;
+              image.style.objectFit = element.extraAttributes?.maintainAspectRatio ? 'contain' : 'fill';
+              image.style.display = 'inline-block';
+
+              imageContainer.appendChild(image);
+              wrapper.appendChild(imageContainer);
+              break;
+
+            case 'TwoColumnLayoutField':
+              const columnContainer = document.createElement('div');
+              columnContainer.className = 'quick-form-two-column';
+              columnContainer.style.display = 'grid';
+              columnContainer.style.gridTemplateColumns = '1fr 1fr';
+              columnContainer.style.gap = \`\${element.extraAttributes?.gap || 4}px\`;
+              columnContainer.style.width = '100%';
+
+              // Create left column
+              const leftColumn = document.createElement('div');
+              leftColumn.className = 'quick-form-column';
+              element.extraAttributes?.leftColumn?.forEach(columnElement => {
+                const columnWrapper = document.createElement('div');
+                columnWrapper.className = 'quick-form-field';
+                
+                switch (columnElement.type) {
+                  case 'TextField':
+                    const textLabel = document.createElement('label');
+                    textLabel.className = 'quick-form-label';
+                    textLabel.textContent = columnElement.extraAttributes?.label || '';
+                    
+                    const textHelperText = document.createElement('div');
+                    textHelperText.className = 'quick-form-helper-text';
+                    textHelperText.textContent = columnElement.extraAttributes?.helperText || '';
+                    
+                    const textInput = document.createElement('input');
+                    textInput.type = 'text';
+                    textInput.name = columnElement.id;
+                    textInput.className = 'quick-form-input';
+                    textInput.placeholder = columnElement.extraAttributes?.placeHolder || '';
+                    textInput.required = columnElement.extraAttributes?.required || false;
+                    
+                    columnWrapper.appendChild(textLabel);
+                    columnWrapper.appendChild(textInput);
+                    columnWrapper.appendChild(textHelperText);
+                    break;
+
+                  case 'NumberField':
+                    const numberLabel = document.createElement('label');
+                    numberLabel.className = 'quick-form-label';
+                    numberLabel.textContent = columnElement.extraAttributes?.label || '';
+                    
+                    const numberHelperText = document.createElement('div');
+                    numberHelperText.className = 'quick-form-helper-text';
+                    numberHelperText.textContent = columnElement.extraAttributes?.helperText || '';
+                    
+                    const numberInput = document.createElement('input');
+                    numberInput.type = 'number';
+                    numberInput.name = columnElement.id;
+                    numberInput.className = 'quick-form-input';
+                    numberInput.placeholder = columnElement.extraAttributes?.placeHolder || '0';
+                    numberInput.required = columnElement.extraAttributes?.required || false;
+                    
+                    columnWrapper.appendChild(numberLabel);
+                    columnWrapper.appendChild(numberInput);
+                    columnWrapper.appendChild(numberHelperText);
+                    break;
+
+                  // Add other field type cases as needed for column elements
+                  default:
+                    console.error('Unsupported column field type:', columnElement.type);
+                }
+                
+                leftColumn.appendChild(columnWrapper);
+              });
+
+              // Create right column
+              const rightColumn = document.createElement('div');
+              rightColumn.className = 'quick-form-column';
+              element.extraAttributes?.rightColumn?.forEach(columnElement => {
+                const columnWrapper = document.createElement('div');
+                columnWrapper.className = 'quick-form-field';
+                
+                switch (columnElement.type) {
+                  case 'TextField':
+                    const textLabel = document.createElement('label');
+                    textLabel.className = 'quick-form-label';
+                    textLabel.textContent = columnElement.extraAttributes?.label || '';
+                    
+                    const textHelperText = document.createElement('div');
+                    textHelperText.className = 'quick-form-helper-text';
+                    textHelperText.textContent = columnElement.extraAttributes?.helperText || '';
+                    
+                    const textInput = document.createElement('input');
+                    textInput.type = 'text';
+                    textInput.name = columnElement.id;
+                    textInput.className = 'quick-form-input';
+                    textInput.placeholder = columnElement.extraAttributes?.placeHolder || '';
+                    textInput.required = columnElement.extraAttributes?.required || false;
+                    
+                    columnWrapper.appendChild(textLabel);
+                    columnWrapper.appendChild(textInput);
+                    columnWrapper.appendChild(textHelperText);
+                    break;
+
+                  case 'NumberField':
+                    const numberLabel = document.createElement('label');
+                    numberLabel.className = 'quick-form-label';
+                    numberLabel.textContent = columnElement.extraAttributes?.label || '';
+                    
+                    const numberHelperText = document.createElement('div');
+                    numberHelperText.className = 'quick-form-helper-text';
+                    numberHelperText.textContent = columnElement.extraAttributes?.helperText || '';
+                    
+                    const numberInput = document.createElement('input');
+                    numberInput.type = 'number';
+                    numberInput.name = columnElement.id;
+                    numberInput.className = 'quick-form-input';
+                    numberInput.placeholder = columnElement.extraAttributes?.placeHolder || '0';
+                    numberInput.required = columnElement.extraAttributes?.required || false;
+                    
+                    columnWrapper.appendChild(numberLabel);
+                    columnWrapper.appendChild(numberInput);
+                    columnWrapper.appendChild(numberHelperText);
+                    break;
+
+                  // Add other field type cases as needed for column elements
+                  default:
+                    console.error('Unsupported column field type:', columnElement.type);
+                }
+                
+                rightColumn.appendChild(columnWrapper);
+              });
+
+              columnContainer.appendChild(leftColumn);
+              columnContainer.appendChild(rightColumn);
+              wrapper.appendChild(columnContainer);
+              break;
+
             case 'DualImageUpload':
               const dualImageLabel = document.createElement('label');
               dualImageLabel.className = 'quick-form-label';
@@ -634,19 +815,7 @@ export async function GET(
               break;
 
             default:
-              if (element.type === 'DualImageUploadField') {
-                console.error('Unsupported field type:', element.type);
-                return;
-              }
-
-              if (element.type === 'DualImageUpload') {
-                console.error('Unsupported field type:', element.type);
-                return;
-              }
-
-              if (value) {
-                data[fieldName] = value;
-              }
+              console.error('Unsupported field type:', element.type);
           }
 
           form.appendChild(wrapper);
@@ -701,7 +870,7 @@ export async function GET(
                   if (value) {
                     data[fieldName] = {
                       url: value,
-                      label: element.extraAttributes?.images?.find(img => img.url === value)?.label
+                      label: element.extraAttributes?.images?.find(img => img.src === value)?.label
                     };
                   }
                   break;
@@ -754,9 +923,7 @@ export async function GET(
                   break;
 
                 default:
-                  if (value) {
-                    data[fieldName] = value;
-                  }
+                  console.error('Unsupported field type:', element.type);
               }
             });
 
@@ -765,7 +932,7 @@ export async function GET(
 
             console.log('Submitting form data:', data);
 
-            const response = await fetch('/api/submit-form/${formId}', {
+            const response = await fetch(\`/api/submit-form/\${formId}\`, {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json'

From 0c8c0791ea8ec8950293bd8d043dad5e785e52a6 Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Thu, 30 Jan 2025 02:12:13 +0100
Subject: [PATCH 34/40] Fixing rendering preview of embedded

---
 .../api/placeholder/[width]/[height]/route.ts | 29 +++++++++++++++++++
 src/components/EmbedFormPreview.tsx           | 22 ++++++++++----
 2 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/app/api/placeholder/[width]/[height]/route.ts

diff --git a/src/app/api/placeholder/[width]/[height]/route.ts b/src/app/api/placeholder/[width]/[height]/route.ts
new file mode 100644
index 0000000..5a2cc28
--- /dev/null
+++ b/src/app/api/placeholder/[width]/[height]/route.ts
@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  request: Request,
+  { params }: { params: { width: string; height: string } }
+) {
+  const width = parseInt(params.width);
+  const height = parseInt(params.height);
+
+  // Use a placeholder image service
+  const imageUrl = `https://via.placeholder.com/${width}x${height}`;
+
+  try {
+    const response = await fetch(imageUrl);
+    const buffer = await response.arrayBuffer();
+
+    return new NextResponse(buffer, {
+      headers: {
+        'Content-Type': 'image/png',
+        'Cache-Control': 'public, max-age=31536000',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching placeholder image:', error);
+    return new NextResponse('Error generating placeholder image', { status: 500 });
+  }
+}
diff --git a/src/components/EmbedFormPreview.tsx b/src/components/EmbedFormPreview.tsx
index 4a4c00a..7c677ca 100644
--- a/src/components/EmbedFormPreview.tsx
+++ b/src/components/EmbedFormPreview.tsx
@@ -8,6 +8,7 @@ interface EmbedFormPreviewProps {
 export default function EmbedFormPreview({ formId, previewMode = false }: EmbedFormPreviewProps) {
   const [isLoading, setIsLoading] = useState(true);
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const messageHandlerRef = useRef<((event: MessageEvent) => void) | null>(null);
 
   useEffect(() => {
     const iframe = iframeRef.current;
@@ -18,21 +19,32 @@ export default function EmbedFormPreview({ formId, previewMode = false }: EmbedF
       <html>
         <body>
           <div id="quick-form-${formId}"></div>
-          <script src="/api/embed/${formId}/js" async defer onload="window.parent.postMessage('loaded', '*')"></script>
+          <script>
+            window.addEventListener('load', function() {
+              window.parent.postMessage('loaded', '*');
+            });
+          </script>
+          <script src="/api/embed/${formId}/js" async defer></script>
         </body>
       </html>
     `;
 
-    // Listen for load message from iframe
-    const handleMessage = (event: MessageEvent) => {
+    // Create and store message handler
+    messageHandlerRef.current = (event: MessageEvent) => {
       if (event.data === 'loaded') {
         setIsLoading(false);
       }
     };
 
-    window.addEventListener('message', handleMessage);
+    // Add message listener
+    window.addEventListener('message', messageHandlerRef.current);
+
+    // Cleanup function
     return () => {
-      window.removeEventListener('message', handleMessage);
+      if (messageHandlerRef.current) {
+        window.removeEventListener('message', messageHandlerRef.current);
+        messageHandlerRef.current = null;
+      }
     };
   }, [formId]);
 

From ceee062afa44f54049282bbd05d17bb9feeff828 Mon Sep 17 00:00:00 2001
From: bwedding <therealbruce@gmail.com>
Date: Thu, 30 Jan 2025 17:03:24 +0100
Subject: [PATCH 35/40] Lot of refactoring

---
 src/app/api/embed/[formId]/js/route.ts        | 1127 ++++-------------
 src/components/FormElements.tsx               |    2 +-
 .../field/RatingScale/DesignerComponent.tsx   |   42 +
 .../field/RatingScale/FormComponent.tsx       |  106 ++
 .../field/RatingScale/PropertiesComponent.tsx |  240 ++++
 .../field/RatingScale/RatingButton.tsx        |   36 +
 src/components/field/RatingScale/index.tsx    |   44 +
 src/components/field/RatingScale/types.ts     |   18 +
 .../field/RatingScale/useRatingColors.ts      |   69 +
 src/components/field/RatingScaleField.tsx     |  602 ---------
 src/lib/colorSchemes.ts                       |   88 ++
 src/lib/embed/elements.ts                     |  154 +++
 src/lib/embed/utils/dom.ts                    |   36 +
 src/lib/styles/embed/base.ts                  |   38 +
 src/lib/styles/embed/images.ts                |  101 ++
 src/lib/styles/embed/index.ts                 |   24 +
 src/lib/styles/embed/inputs.ts                |   43 +
 src/lib/styles/embed/layout.ts                |   16 +
 src/lib/styles/embed/rating.ts                |   44 +
 19 files changed, 1324 insertions(+), 1506 deletions(-)
 create mode 100644 src/components/field/RatingScale/DesignerComponent.tsx
 create mode 100644 src/components/field/RatingScale/FormComponent.tsx
 create mode 100644 src/components/field/RatingScale/PropertiesComponent.tsx
 create mode 100644 src/components/field/RatingScale/RatingButton.tsx
 create mode 100644 src/components/field/RatingScale/index.tsx
 create mode 100644 src/components/field/RatingScale/types.ts
 create mode 100644 src/components/field/RatingScale/useRatingColors.ts
 delete mode 100644 src/components/field/RatingScaleField.tsx
 create mode 100644 src/lib/colorSchemes.ts
 create mode 100644 src/lib/embed/elements.ts
 create mode 100644 src/lib/embed/utils/dom.ts
 create mode 100644 src/lib/styles/embed/base.ts
 create mode 100644 src/lib/styles/embed/images.ts
 create mode 100644 src/lib/styles/embed/index.ts
 create mode 100644 src/lib/styles/embed/inputs.ts
 create mode 100644 src/lib/styles/embed/layout.ts
 create mode 100644 src/lib/styles/embed/rating.ts

diff --git a/src/app/api/embed/[formId]/js/route.ts b/src/app/api/embed/[formId]/js/route.ts
index bee8fe2..a25cccc 100644
--- a/src/app/api/embed/[formId]/js/route.ts
+++ b/src/app/api/embed/[formId]/js/route.ts
@@ -1,5 +1,6 @@
 import prisma from "@/lib/prisma";
 import { NextResponse } from "next/server";
+import { getAllStyles } from '@/lib/styles/embed';
 
 export const dynamic = 'force-dynamic';
 
@@ -46,932 +47,252 @@ export async function GET(
       return new NextResponse("Invalid form content", { status: 500 });
     }
 
-    // Generate the form bundle
-    const bundle = `
-      (() => {
-        // Find or create container
-        const containerId = 'quick-form-${formId}';
-        const formId = ${formId}; // Make formId available in the closure
-        let container = document.getElementById(containerId);
-        if (!container) {
-          console.error('Quick Form container not found:', containerId);
-          return;
-        }
-
-        // Clear existing content
-        container.innerHTML = '';
+    // Get all styles as a single string and escape it for JavaScript
+    const styles = getAllStyles()
+      .replace(/\\/g, '\\\\')
+      .replace(/'/g, "\\'")
+      .replace(/\n/g, ' ')
+      .trim();
+
+    // Create utility functions for the bundle
+    const utilityFunctions = `
+      function createElement(tag, className, textContent) {
+        const element = document.createElement(tag);
+        if (className) element.className = className;
+        if (textContent) element.textContent = textContent;
+        return element;
+      }
+
+      function createLabel(text) {
+        return createElement('label', 'quick-form-label', text);
+      }
+
+      function createHelperText(text) {
+        return createElement('div', 'quick-form-helper-text', text);
+      }
+
+      function createInput(type, name, required, placeholder) {
+        const input = createElement('input', 'quick-form-input');
+        input.type = type;
+        input.name = name;
+        input.required = required;
+        if (placeholder) input.placeholder = placeholder;
+        return input;
+      }
+
+      function createWrapper() {
+        return createElement('div', 'quick-form-field');
+      }
+
+      function createFormElement(element) {
+        const wrapper = createWrapper();
         
-        // Add styles
-        const style = document.createElement('style');
-        style.textContent = \`
-          /* Base form styles */
-          .quick-form-container { width: 100%; }
-          .quick-form { max-width: 600px; margin: 0 auto; padding: 20px; font-family: system-ui, -apple-system, sans-serif; }
-          .quick-form-field { margin-bottom: 20px; }
-          
-          /* Typography */
-          .quick-form-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #111827; }
-          .quick-form-subtitle { font-size: 18px; color: #4B5563; margin-bottom: 15px; }
-          .quick-form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }
-          .quick-form-helper-text { font-size: 14px; color: #6B7280; margin-top: 4px; }
-          
-          /* Form elements */
-          .quick-form-input {
-            width: 100%;
-            padding: 8px 12px;
-            border: 1px solid #D1D5DB;
-            border-radius: 6px;
-            font-size: 14px;
-            line-height: 1.5;
-            transition: border-color 0.15s ease-in-out;
-          }
-          .quick-form-input:focus {
-            outline: none;
-            border-color: #6366f1;
-            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-          }
-          .quick-form-input::placeholder {
-            color: #9CA3AF;
+        switch (element.type) {
+          case 'TextField': {
+            const { label, helperText, required, placeHolder } = element.extraAttributes;
+            if (label) wrapper.appendChild(createLabel(label));
+            wrapper.appendChild(createInput('text', element.id, required, placeHolder));
+            if (helperText) wrapper.appendChild(createHelperText(helperText));
+            return wrapper;
           }
           
-          .quick-form-checkbox-wrapper { display: flex; align-items: center; gap: 8px; }
-          .quick-form-checkbox { 
-            width: 16px; 
-            height: 16px; 
-            border: 2px solid #D1D5DB;
-            border-radius: 4px;
-            cursor: pointer;
-            appearance: none;
-            background-color: white;
-          }
-          .quick-form-checkbox:checked {
-            background-color: #6366f1;
-            border-color: #6366f1;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
-          }
-          .quick-form-checkbox:hover { border-color: #6366f1; }
-          .quick-form-checkbox:focus { 
-            outline: 2px solid transparent;
-            outline-offset: 2px;
-            box-shadow: 0 0 0 2px #E0E7FF;
-          }
-          
-          /* Submit button */
-          .quick-form-submit {
-            background: #6366f1;
-            color: white;
-            padding: 8px 16px;
-            border: none;
-            border-radius: 6px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.15s ease-in-out;
-          }
-          .quick-form-submit:hover {
-            background: #4f46e5;
-          }
-          .quick-form-submit:focus {
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
-          }
-          .quick-form-error {
-            color: #ef4444;
-            font-size: 14px;
-            margin-top: 4px;
+          case 'NumberField': {
+            const { label, helperText, required, placeHolder } = element.extraAttributes;
+            if (label) wrapper.appendChild(createLabel(label));
+            wrapper.appendChild(createInput('number', element.id, required, placeHolder));
+            if (helperText) wrapper.appendChild(createHelperText(helperText));
+            return wrapper;
           }
           
-          /* Custom Controls */
-          .quick-form-image-upload { 
-            border: 2px dashed #D1D5DB; 
-            padding: 20px; 
-            text-align: center; 
-            border-radius: 8px; 
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #F9FAFB;
-            transition: all 0.2s ease;
-          }
-          .quick-form-image-upload:hover { 
-            border-color: #6366F1;
-            background: #F3F4F6;
-          }
-          .quick-form-image-preview { 
-            max-width: 100%;
-            margin-top: 10px;
-            border-radius: 8px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          case 'TitleField': {
+            const { title, fontSize, alignment } = element.extraAttributes;
+            const titleEl = createElement('h1', 'quick-form-title', title);
+            titleEl.style.textAlign = alignment;
+            if (fontSize === 'h2') titleEl.style.fontSize = '1.5em';
+            else if (fontSize === 'h3') titleEl.style.fontSize = '1.17em';
+            return titleEl;
           }
           
-          .quick-form-picture-select {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 16px;
-            margin-top: 8px;
-          }
-          .quick-form-picture-option {
-            border: 2px solid #D1D5DB;
-            border-radius: 8px;
-            overflow: hidden;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            position: relative;
-          }
-          .quick-form-picture-option:hover {
-            border-color: #6366F1;
-            transform: translateY(-2px);
-          }
-          .quick-form-picture-option.selected {
-            border-color: #6366F1;
-            background: #F3F4F6;
-          }
-          .quick-form-picture-option img {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-          }
-          .quick-form-picture-option .label {
-            padding: 8px;
-            text-align: center;
-            font-weight: 500;
-            color: #4B5563;
+          case 'SubTitleField': {
+            const { subTitle, fontSize, alignment } = element.extraAttributes;
+            const subtitleEl = createElement('h2', 'quick-form-subtitle', subTitle);
+            subtitleEl.style.textAlign = alignment;
+            if (fontSize === 'h3') subtitleEl.style.fontSize = '1.17em';
+            else if (fontSize === 'h4') subtitleEl.style.fontSize = '1em';
+            return subtitleEl;
           }
           
-          .quick-form-rating-scale { 
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            margin-top: 8px;
-          }
-          .quick-form-rating-buttons {
-            display: flex;
-            gap: 8px;
-            justify-content: space-between;
-            align-items: center;
-          }
-          .quick-form-rating-button {
-            width: 40px;
-            height: 40px;
-            border: 2px solid #D1D5DB;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            background: white;
-            transition: all 0.2s ease;
-            font-weight: 500;
-          }
-          .quick-form-rating-button:hover {
-            transform: translateY(-2px);
-            border-color: #6366F1;
-          }
-          .quick-form-rating-button.selected {
-            background: #6366F1;
-            border-color: #6366F1;
-            color: white;
-          }
-          .quick-form-rating-labels {
-            display: flex;
-            justify-content: space-between;
-            color: #6B7280;
-            font-size: 14px;
+          case 'RatingScaleField': {
+            const { 
+              label, helperText, required, question,
+              minLabel, midLabel, maxLabel,
+              minValue, maxValue
+            } = element.extraAttributes;
+            
+            const fieldWrapper = createWrapper();
+            if (label) fieldWrapper.appendChild(createLabel(label));
+            if (question) {
+              const questionEl = createElement('div', 'quick-form-rating-question', question);
+              fieldWrapper.appendChild(questionEl);
+            }
+            
+            const scale = createElement('div', 'quick-form-rating-scale');
+            
+            // Create buttons
+            const buttons = createElement('div', 'quick-form-rating-buttons');
+            for (let i = minValue; i <= maxValue; i++) {
+              const button = createElement('button', 'quick-form-rating-button', i.toString());
+              button.type = 'button';
+              button.onclick = function() {
+                // Remove selected class from all buttons
+                const allButtons = buttons.getElementsByClassName('quick-form-rating-button');
+                Array.from(allButtons).forEach(btn => btn.classList.remove('selected'));
+                // Add selected class to clicked button
+                button.classList.add('selected');
+                // Update hidden input
+                hiddenInput.value = i.toString();
+              };
+              buttons.appendChild(button);
+            }
+            scale.appendChild(buttons);
+            
+            // Create labels
+            const labels = createElement('div', 'quick-form-rating-labels');
+            labels.appendChild(createElement('span', '', minLabel));
+            if (midLabel) labels.appendChild(createElement('span', '', midLabel));
+            labels.appendChild(createElement('span', '', maxLabel));
+            scale.appendChild(labels);
+            
+            // Hidden input for form submission
+            const hiddenInput = createInput('hidden', element.id, required);
+            scale.appendChild(hiddenInput);
+            
+            fieldWrapper.appendChild(scale);
+            if (helperText) fieldWrapper.appendChild(createHelperText(helperText));
+            
+            return fieldWrapper;
           }
           
-          /* Dual Image Upload */
-          .quick-form-dual-image {
-            display: flex;
-            gap: 16px;
-            margin-top: 8px;
-          }
-          .quick-form-dual-image-side {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-          }
-          .quick-form-dual-image-upload { 
-            border: 2px dashed #D1D5DB; 
-            padding: 20px; 
-            text-align: center; 
-            border-radius: 8px; 
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #F9FAFB;
-            transition: all 0.2s ease;
-            min-height: 200px;
-          }
-          .quick-form-dual-image-upload:hover { 
-            border-color: #6366F1;
-            background: #F3F4F6;
-          }
-          .quick-form-dual-image-preview { 
-            max-width: 100%;
-            border-radius: 8px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-            display: none;
-          }
-          .quick-form-dual-image-label {
-            font-weight: 500;
-            color: #4B5563;
-            font-size: 14px;
+          case 'TwoColumnLayoutField': {
+            const { gap, leftColumn, rightColumn } = element.extraAttributes;
+            
+            const columnWrapper = createElement('div', 'quick-form-two-column');
+            columnWrapper.style.gap = gap + 'px';
+            
+            const leftCol = createElement('div', 'quick-form-column');
+            leftColumn.forEach(el => {
+              const columnElement = createFormElement(el);
+              if (columnElement) leftCol.appendChild(columnElement);
+            });
+            
+            const rightCol = createElement('div', 'quick-form-column');
+            rightColumn.forEach(el => {
+              const columnElement = createFormElement(el);
+              if (columnElement) rightCol.appendChild(columnElement);
+            });
+            
+            columnWrapper.appendChild(leftCol);
+            columnWrapper.appendChild(rightCol);
+            
+            return columnWrapper;
           }
           
-          .quick-form-two-column {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 16px;
-            margin-top: 16px;
-          }
-          .quick-form-column {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-          }
-        \`;
-        document.head.appendChild(style);
-
-        // Create form
-        const form = document.createElement('form');
-        form.className = 'quick-form';
-        
-        // Create form fields
-        const formContent = ${JSON.stringify(formContent)};
-        formContent.forEach(element => {
-          const wrapper = document.createElement('div');
-          wrapper.className = 'quick-form-field';
-
-          switch (element.type) {
-            case 'TitleField':
-              const title = document.createElement('h1');
-              title.className = 'quick-form-title';
-              title.textContent = element.extraAttributes?.title || '';
-              wrapper.appendChild(title);
-              break;
-
-            case 'SubTitleField':
-              const subtitle = document.createElement('h2');
-              subtitle.className = 'quick-form-subtitle';
-              subtitle.textContent = element.extraAttributes?.title || '';
-              wrapper.appendChild(subtitle);
-              break;
-
-            case 'TextField':
-              const textLabel = document.createElement('label');
-              textLabel.className = 'quick-form-label';
-              textLabel.textContent = element.extraAttributes?.label || '';
-              
-              const textHelperText = document.createElement('div');
-              textHelperText.className = 'quick-form-helper-text';
-              textHelperText.textContent = element.extraAttributes?.helperText || '';
-              
-              const textInput = document.createElement('input');
-              textInput.type = 'text';
-              textInput.name = element.id;
-              textInput.className = 'quick-form-input';
-              textInput.placeholder = element.extraAttributes?.placeHolder || '';
-              textInput.required = element.extraAttributes?.required || false;
-              
-              wrapper.appendChild(textLabel);
-              wrapper.appendChild(textInput);
-              wrapper.appendChild(textHelperText);
-              break;
-
-            case 'NumberField':
-              const numberLabel = document.createElement('label');
-              numberLabel.className = 'quick-form-label';
-              numberLabel.textContent = element.extraAttributes?.label || '';
-              
-              const numberHelperText = document.createElement('div');
-              numberHelperText.className = 'quick-form-helper-text';
-              numberHelperText.textContent = element.extraAttributes?.helperText || '';
-              
-              const numberInput = document.createElement('input');
-              numberInput.type = 'number';
-              numberInput.name = element.id;
-              numberInput.className = 'quick-form-input';
-              numberInput.placeholder = element.extraAttributes?.placeHolder || '0';
-              numberInput.required = element.extraAttributes?.required || false;
-              
-              wrapper.appendChild(numberLabel);
-              wrapper.appendChild(numberInput);
-              wrapper.appendChild(numberHelperText);
-              break;
-
-            case 'CheckboxField':
-              const checkboxLabel = document.createElement('label');
-              checkboxLabel.className = 'quick-form-label';
-              checkboxLabel.textContent = element.extraAttributes?.label || '';
-              
-              const helperText = document.createElement('div');
-              helperText.className = 'quick-form-helper-text';
-              helperText.textContent = element.extraAttributes?.helperText || '';
-              
-              const checkboxWrapper = document.createElement('div');
-              checkboxWrapper.className = 'quick-form-checkbox-wrapper';
-              
-              const checkbox = document.createElement('input');
-              checkbox.type = 'checkbox';
-              checkbox.name = element.id;
-              checkbox.className = 'quick-form-checkbox';
-              checkbox.required = element.extraAttributes?.required || false;
-              
-              const checkboxText = document.createElement('span');
-              checkboxText.textContent = element.extraAttributes?.label || '';
-              
-              checkboxWrapper.appendChild(checkbox);
-              checkboxWrapper.appendChild(checkboxText);
-              
-              wrapper.appendChild(checkboxLabel);
-              wrapper.appendChild(helperText);
-              wrapper.appendChild(checkboxWrapper);
-              break;
-
-            case 'ImageUploadField':
-              const imageLabel = document.createElement('label');
-              imageLabel.className = 'quick-form-label';
-              imageLabel.textContent = element.extraAttributes?.label || '';
-              
-              const imageHelperText = document.createElement('div');
-              imageHelperText.className = 'quick-form-helper-text';
-              imageHelperText.textContent = element.extraAttributes?.helperText || '';
-              
-              const imageUpload = document.createElement('div');
-              imageUpload.className = \`quick-form-image-upload \${element.extraAttributes?.width || 'w-full'} \${element.extraAttributes?.height || 'h-48'}\`;
-              imageUpload.textContent = element.extraAttributes?.prompt || 'Click or drag to upload image';
-              
-              const imageInput = document.createElement('input');
-              imageInput.type = 'file';
-              imageInput.accept = 'image/*';
-              imageInput.style.display = 'none';
-              imageInput.name = element.id;
-              imageInput.required = element.extraAttributes?.required || false;
-              
-              const imagePreview = document.createElement('img');
-              imagePreview.className = 'quick-form-image-preview';
-              imagePreview.style.display = 'none';
-              
-              imageUpload.addEventListener('click', () => imageInput.click());
-              imageInput.addEventListener('change', (e) => {
-                const file = e.target.files && e.target.files[0];
-                if (file) {
-                  const reader = new FileReader();
-                  reader.onload = (e) => {
-                    if (e.target && e.target.result) {
-                      imagePreview.src = e.target.result.toString();
-                      imagePreview.style.display = 'block';
-                      imageUpload.style.display = 'none';
-                    }
-                  };
-                  reader.readAsDataURL(file);
-                }
-              });
-              
-              wrapper.appendChild(imageLabel);
-              wrapper.appendChild(imageHelperText);
-              wrapper.appendChild(imageUpload);
-              wrapper.appendChild(imageInput);
-              wrapper.appendChild(imagePreview);
-              break;
-
-            case 'PictureSelectField':
-              const pictureSelectLabel = document.createElement('label');
-              pictureSelectLabel.className = 'quick-form-label';
-              pictureSelectLabel.textContent = element.extraAttributes?.label || '';
-              
-              const pictureHelperText = document.createElement('div');
-              pictureHelperText.className = 'quick-form-helper-text';
-              pictureHelperText.textContent = element.extraAttributes?.helperText || '';
-              
-              const pictureGrid = document.createElement('div');
-              pictureGrid.className = 'quick-form-picture-select';
-              
-              const hiddenInput = document.createElement('input');
-              hiddenInput.type = 'hidden';
-              hiddenInput.name = element.id;
-              hiddenInput.required = element.extraAttributes?.required || false;
-              
-              const images = element.extraAttributes?.images || [];
-              images.forEach(img => {
-                const option = document.createElement('div');
-                option.className = 'quick-form-picture-option';
-                
-                const imgEl = document.createElement('img');
-                // Convert relative URLs to absolute URLs
-                imgEl.src = img.src.startsWith('/') ? window.location.origin + img.src : img.src;
-                imgEl.alt = img.label || '';
-                
-                const label = document.createElement('div');
-                label.className = 'label';
-                label.textContent = img.label || '';
-                
-                option.appendChild(imgEl);
-                option.appendChild(label);
-                
-                option.addEventListener('click', () => {
-                  document.querySelectorAll('.quick-form-picture-option').forEach(el => 
-                    el.classList.remove('selected'));
-                  option.classList.add('selected');
-                  hiddenInput.value = img.src;
-                });
-                
-                pictureGrid.appendChild(option);
-              });
-              
-              wrapper.appendChild(pictureSelectLabel);
-              wrapper.appendChild(pictureHelperText);
-              wrapper.appendChild(pictureGrid);
-              wrapper.appendChild(hiddenInput);
-              break;
-
-            case 'RatingScaleField':
-              const ratingLabel = document.createElement('label');
-              ratingLabel.className = 'quick-form-label';
-              ratingLabel.textContent = element.extraAttributes?.label || '';
-              
-              const ratingHelperText = document.createElement('div');
-              ratingHelperText.className = 'quick-form-helper-text';
-              ratingHelperText.textContent = element.extraAttributes?.helperText || '';
-              
-              const ratingQuestion = document.createElement('div');
-              ratingQuestion.className = 'text-base font-medium text-gray-900 mt-2';
-              ratingQuestion.textContent = element.extraAttributes?.question || '';
-              
-              const ratingScale = document.createElement('div');
-              ratingScale.className = 'quick-form-rating-scale';
-              
-              const ratingButtons = document.createElement('div');
-              ratingButtons.className = 'quick-form-rating-buttons';
-              
-              const ratingInput = document.createElement('input');
-              ratingInput.type = 'hidden';
-              ratingInput.name = element.id;
-              ratingInput.required = element.extraAttributes?.required || false;
-              
-              const minValue = element.extraAttributes?.minValue || 1;
-              const maxValue = element.extraAttributes?.maxValue || 10;
-              
-              for (let i = minValue; i <= maxValue; i++) {
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'quick-form-rating-button';
-                button.textContent = i.toString();
-                
-                button.addEventListener('click', () => {
-                  ratingButtons.querySelectorAll('button').forEach(btn => 
-                    btn.classList.remove('selected'));
-                  button.classList.add('selected');
-                  ratingInput.value = i.toString();
-                });
-                
-                ratingButtons.appendChild(button);
-              }
-              
-              const ratingLabels = document.createElement('div');
-              ratingLabels.className = 'quick-form-rating-labels';
-              
-              const minLabel = document.createElement('span');
-              minLabel.textContent = element.extraAttributes?.minLabel || '';
-              
-              const midLabel = document.createElement('span');
-              midLabel.textContent = element.extraAttributes?.midLabel || '';
-              
-              const maxLabel = document.createElement('span');
-              maxLabel.textContent = element.extraAttributes?.maxLabel || '';
-              
-              ratingLabels.appendChild(minLabel);
-              ratingLabels.appendChild(midLabel);
-              ratingLabels.appendChild(maxLabel);
-              
-              ratingScale.appendChild(ratingButtons);
-              ratingScale.appendChild(ratingLabels);
-              
-              wrapper.appendChild(ratingLabel);
-              wrapper.appendChild(ratingHelperText);
-              wrapper.appendChild(ratingQuestion);
-              wrapper.appendChild(ratingScale);
-              wrapper.appendChild(ratingInput);
-              break;
-
-            case 'ImageElement':
-              const imageContainer = document.createElement('div');
-              imageContainer.className = 'quick-form-field';
-              imageContainer.style.textAlign = element.extraAttributes?.alignment || 'center';
-              imageContainer.style.marginTop = \`\${element.extraAttributes?.marginTop || 0}px\`;
-              imageContainer.style.marginBottom = \`\${element.extraAttributes?.marginBottom || 0}px\`;
-              imageContainer.style.marginLeft = \`\${element.extraAttributes?.marginLeft || 0}px\`;
-              imageContainer.style.marginRight = \`\${element.extraAttributes?.marginRight || 0}px\`;
-
-              const image = document.createElement('img');
-              image.src = element.extraAttributes?.base64Image || '';
-              image.style.height = \`\${element.extraAttributes?.height || 200}px\`;
-              image.style.width = \`\${element.extraAttributes?.width || 200}px\`;
-              image.style.objectFit = element.extraAttributes?.maintainAspectRatio ? 'contain' : 'fill';
-              image.style.display = 'inline-block';
-
-              imageContainer.appendChild(image);
-              wrapper.appendChild(imageContainer);
-              break;
-
-            case 'TwoColumnLayoutField':
-              const columnContainer = document.createElement('div');
-              columnContainer.className = 'quick-form-two-column';
-              columnContainer.style.display = 'grid';
-              columnContainer.style.gridTemplateColumns = '1fr 1fr';
-              columnContainer.style.gap = \`\${element.extraAttributes?.gap || 4}px\`;
-              columnContainer.style.width = '100%';
-
-              // Create left column
-              const leftColumn = document.createElement('div');
-              leftColumn.className = 'quick-form-column';
-              element.extraAttributes?.leftColumn?.forEach(columnElement => {
-                const columnWrapper = document.createElement('div');
-                columnWrapper.className = 'quick-form-field';
-                
-                switch (columnElement.type) {
-                  case 'TextField':
-                    const textLabel = document.createElement('label');
-                    textLabel.className = 'quick-form-label';
-                    textLabel.textContent = columnElement.extraAttributes?.label || '';
-                    
-                    const textHelperText = document.createElement('div');
-                    textHelperText.className = 'quick-form-helper-text';
-                    textHelperText.textContent = columnElement.extraAttributes?.helperText || '';
-                    
-                    const textInput = document.createElement('input');
-                    textInput.type = 'text';
-                    textInput.name = columnElement.id;
-                    textInput.className = 'quick-form-input';
-                    textInput.placeholder = columnElement.extraAttributes?.placeHolder || '';
-                    textInput.required = columnElement.extraAttributes?.required || false;
-                    
-                    columnWrapper.appendChild(textLabel);
-                    columnWrapper.appendChild(textInput);
-                    columnWrapper.appendChild(textHelperText);
-                    break;
-
-                  case 'NumberField':
-                    const numberLabel = document.createElement('label');
-                    numberLabel.className = 'quick-form-label';
-                    numberLabel.textContent = columnElement.extraAttributes?.label || '';
-                    
-                    const numberHelperText = document.createElement('div');
-                    numberHelperText.className = 'quick-form-helper-text';
-                    numberHelperText.textContent = columnElement.extraAttributes?.helperText || '';
-                    
-                    const numberInput = document.createElement('input');
-                    numberInput.type = 'number';
-                    numberInput.name = columnElement.id;
-                    numberInput.className = 'quick-form-input';
-                    numberInput.placeholder = columnElement.extraAttributes?.placeHolder || '0';
-                    numberInput.required = columnElement.extraAttributes?.required || false;
-                    
-                    columnWrapper.appendChild(numberLabel);
-                    columnWrapper.appendChild(numberInput);
-                    columnWrapper.appendChild(numberHelperText);
-                    break;
-
-                  // Add other field type cases as needed for column elements
-                  default:
-                    console.error('Unsupported column field type:', columnElement.type);
-                }
-                
-                leftColumn.appendChild(columnWrapper);
-              });
-
-              // Create right column
-              const rightColumn = document.createElement('div');
-              rightColumn.className = 'quick-form-column';
-              element.extraAttributes?.rightColumn?.forEach(columnElement => {
-                const columnWrapper = document.createElement('div');
-                columnWrapper.className = 'quick-form-field';
-                
-                switch (columnElement.type) {
-                  case 'TextField':
-                    const textLabel = document.createElement('label');
-                    textLabel.className = 'quick-form-label';
-                    textLabel.textContent = columnElement.extraAttributes?.label || '';
-                    
-                    const textHelperText = document.createElement('div');
-                    textHelperText.className = 'quick-form-helper-text';
-                    textHelperText.textContent = columnElement.extraAttributes?.helperText || '';
-                    
-                    const textInput = document.createElement('input');
-                    textInput.type = 'text';
-                    textInput.name = columnElement.id;
-                    textInput.className = 'quick-form-input';
-                    textInput.placeholder = columnElement.extraAttributes?.placeHolder || '';
-                    textInput.required = columnElement.extraAttributes?.required || false;
-                    
-                    columnWrapper.appendChild(textLabel);
-                    columnWrapper.appendChild(textInput);
-                    columnWrapper.appendChild(textHelperText);
-                    break;
-
-                  case 'NumberField':
-                    const numberLabel = document.createElement('label');
-                    numberLabel.className = 'quick-form-label';
-                    numberLabel.textContent = columnElement.extraAttributes?.label || '';
-                    
-                    const numberHelperText = document.createElement('div');
-                    numberHelperText.className = 'quick-form-helper-text';
-                    numberHelperText.textContent = columnElement.extraAttributes?.helperText || '';
-                    
-                    const numberInput = document.createElement('input');
-                    numberInput.type = 'number';
-                    numberInput.name = columnElement.id;
-                    numberInput.className = 'quick-form-input';
-                    numberInput.placeholder = columnElement.extraAttributes?.placeHolder || '0';
-                    numberInput.required = columnElement.extraAttributes?.required || false;
-                    
-                    columnWrapper.appendChild(numberLabel);
-                    columnWrapper.appendChild(numberInput);
-                    columnWrapper.appendChild(numberHelperText);
-                    break;
-
-                  // Add other field type cases as needed for column elements
-                  default:
-                    console.error('Unsupported column field type:', columnElement.type);
-                }
-                
-                rightColumn.appendChild(columnWrapper);
-              });
-
-              columnContainer.appendChild(leftColumn);
-              columnContainer.appendChild(rightColumn);
-              wrapper.appendChild(columnContainer);
-              break;
-
-            case 'DualImageUpload':
-              const dualImageLabel = document.createElement('label');
-              dualImageLabel.className = 'quick-form-label';
-              dualImageLabel.textContent = element.extraAttributes?.label || '';
-              
-              const dualImageHelperText = document.createElement('div');
-              dualImageHelperText.className = 'quick-form-helper-text';
-              dualImageHelperText.textContent = element.extraAttributes?.helperText || '';
-              
-              const dualImageContainer = document.createElement('div');
-              dualImageContainer.className = 'quick-form-dual-image';
-              
-              // Create left side
-              const leftSide = document.createElement('div');
-              leftSide.className = 'quick-form-dual-image-side';
-              
-              const leftLabel = document.createElement('div');
-              leftLabel.className = 'quick-form-dual-image-label';
-              leftLabel.textContent = element.extraAttributes?.leftLabel || 'Left Image';
-              
-              const leftUpload = document.createElement('div');
-              leftUpload.className = 'quick-form-dual-image-upload';
-              leftUpload.textContent = element.extraAttributes?.leftPrompt || 'Upload left image';
-              
-              const leftInput = document.createElement('input');
-              leftInput.type = 'file';
-              leftInput.accept = 'image/*';
-              leftInput.style.display = 'none';
-              leftInput.name = \`\${element.id}_left\`;
-              leftInput.required = element.extraAttributes?.required || false;
-              
-              const leftPreview = document.createElement('img');
-              leftPreview.className = 'quick-form-dual-image-preview';
-              
-              leftSide.appendChild(leftLabel);
-              leftSide.appendChild(leftUpload);
-              leftSide.appendChild(leftInput);
-              leftSide.appendChild(leftPreview);
-              
-              // Create right side
-              const rightSide = document.createElement('div');
-              rightSide.className = 'quick-form-dual-image-side';
-              
-              const rightLabel = document.createElement('div');
-              rightLabel.className = 'quick-form-dual-image-label';
-              rightLabel.textContent = element.extraAttributes?.rightLabel || 'Right Image';
-              
-              const rightUpload = document.createElement('div');
-              rightUpload.className = 'quick-form-dual-image-upload';
-              rightUpload.textContent = element.extraAttributes?.rightPrompt || 'Upload right image';
-              
-              const rightInput = document.createElement('input');
-              rightInput.type = 'file';
-              rightInput.accept = 'image/*';
-              rightInput.style.display = 'none';
-              rightInput.name = \`\${element.id}_right\`;
-              rightInput.required = element.extraAttributes?.required || false;
-              
-              const rightPreview = document.createElement('img');
-              rightPreview.className = 'quick-form-dual-image-preview';
-              
-              rightSide.appendChild(rightLabel);
-              rightSide.appendChild(rightUpload);
-              rightSide.appendChild(rightInput);
-              rightSide.appendChild(rightPreview);
-              
-              // Add click handlers
-              leftUpload.addEventListener('click', () => leftInput.click());
-              rightUpload.addEventListener('click', () => rightInput.click());
-              
-              // Add change handlers
-              leftInput.addEventListener('change', (e) => {
-                const file = e.target.files && e.target.files[0];
-                if (file) {
-                  const reader = new FileReader();
-                  reader.onload = (e) => {
-                    if (e.target && e.target.result) {
-                      leftPreview.src = e.target.result.toString();
-                      leftPreview.style.display = 'block';
-                      leftUpload.style.display = 'none';
-                    }
-                  };
-                  reader.readAsDataURL(file);
-                }
-              });
-              
-              rightInput.addEventListener('change', (e) => {
-                const file = e.target.files && e.target.files[0];
-                if (file) {
-                  const reader = new FileReader();
-                  reader.onload = (e) => {
-                    if (e.target && e.target.result) {
-                      rightPreview.src = e.target.result.toString();
-                      rightPreview.style.display = 'block';
-                      rightUpload.style.display = 'none';
-                    }
-                  };
-                  reader.readAsDataURL(file);
-                }
-              });
-              
-              dualImageContainer.appendChild(leftSide);
-              dualImageContainer.appendChild(rightSide);
-              
-              wrapper.appendChild(dualImageLabel);
-              wrapper.appendChild(dualImageHelperText);
-              wrapper.appendChild(dualImageContainer);
-              break;
-
-            default:
-              console.error('Unsupported field type:', element.type);
-          }
-
-          form.appendChild(wrapper);
-        });
-
-        // Add submit button wrapper
-        const submitWrapper = document.createElement('div');
-        submitWrapper.className = 'quick-form-field';
-        const submitBtn = document.createElement('button');
-        submitBtn.type = 'submit';
-        submitBtn.className = 'quick-form-submit';
-        submitBtn.textContent = 'Submit';
-        submitWrapper.appendChild(submitBtn);
-        form.appendChild(submitWrapper);
-
-        // Add form submit handler
-        form.addEventListener('submit', async (e) => {
-          e.preventDefault();
-          submitBtn.disabled = true;
-          submitBtn.textContent = 'Submitting...';
-
-          try {
-            const formData = new FormData(form);
-            const data = {};
+          case 'ImageElement': {
+            const { 
+              base64Image, height, width, maintainAspectRatio,
+              alignment, marginTop, marginBottom, marginLeft, marginRight
+            } = element.extraAttributes;
             
-            // Process all form fields
-            const processPromises = formContent.map(async element => {
-              const fieldName = element.id;
-              const value = formData.get(fieldName);
-              
-              if (!value && !element.extraAttributes?.required) {
-                return;
-              }
-
-              switch (element.type) {
-                case 'ImageUploadField':
-                  if (value && value instanceof File) {
-                    const base64 = await new Promise((resolve) => {
-                      const reader = new FileReader();
-                      reader.onload = (e) => {
-                        if (e.target && e.target.result) {
-                          resolve(e.target.result.toString());
-                        }
-                      };
-                      reader.readAsDataURL(value);
-                    });
-                    data[fieldName] = base64;
-                  }
-                  break;
-
-                case 'PictureSelectField':
-                  if (value) {
-                    data[fieldName] = {
-                      url: value,
-                      label: element.extraAttributes?.images?.find(img => img.src === value)?.label
-                    };
-                  }
-                  break;
-
-                case 'RatingScaleField':
-                  if (value) {
-                    data[fieldName] = {
-                      value: parseInt(value),
-                      maxValue: element.extraAttributes?.maxValue || 10,
-                      minValue: element.extraAttributes?.minValue || 1
-                    };
-                  }
-                  break;
-
-                case 'CheckboxField':
-                  data[fieldName] = !!value;
-                  break;
-
-                case 'DualImageUpload':
-                  if (value) {
-                    const leftFile = formData.get(\`\${fieldName}_left\`);
-                    const rightFile = formData.get(\`\${fieldName}_right\`);
-                    
-                    const [leftBase64, rightBase64] = await Promise.all([
-                      leftFile instanceof File ? new Promise((resolve) => {
-                        const reader = new FileReader();
-                        reader.onload = (e) => {
-                          if (e.target && e.target.result) {
-                            resolve(e.target.result.toString());
-                          }
-                        };
-                        reader.readAsDataURL(leftFile);
-                      }) : null,
-                      rightFile instanceof File ? new Promise((resolve) => {
-                        const reader = new FileReader();
-                        reader.onload = (e) => {
-                          if (e.target && e.target.result) {
-                            resolve(e.target.result.toString());
-                          }
-                        };
-                        reader.readAsDataURL(rightFile);
-                      }) : null
-                    ]);
-                    
-                    data[fieldName] = {
-                      left: leftBase64,
-                      right: rightBase64
-                    };
-                  }
-                  break;
-
-                default:
-                  console.error('Unsupported field type:', element.type);
+            const imageWrapper = createElement('div');
+            imageWrapper.style.textAlign = alignment;
+            imageWrapper.style.marginTop = marginTop + 'px';
+            imageWrapper.style.marginBottom = marginBottom + 'px';
+            imageWrapper.style.marginLeft = marginLeft + 'px';
+            imageWrapper.style.marginRight = marginRight + 'px';
+            
+            if (base64Image) {
+              const img = createElement('img');
+              img.src = base64Image;
+              img.style.width = width + 'px';
+              if (maintainAspectRatio) {
+                img.style.height = 'auto';
+              } else {
+                img.style.height = height + 'px';
               }
-            });
-
-            // Wait for all field processing to complete
-            await Promise.all(processPromises);
-
-            console.log('Submitting form data:', data);
-
-            const response = await fetch(\`/api/submit-form/\${formId}\`, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json'
-              },
-              body: JSON.stringify(data)
-            });
-
-            if (!response.ok) {
-              throw new Error(\`Submission failed: \${response.status} \${response.statusText}\`);
+              imageWrapper.appendChild(img);
             }
-
-            // Show success message
-            form.innerHTML = '<div class="quick-form-field"><h2 class="quick-form-subtitle">Thank you for your submission!</h2></div>';
-          } catch (error) {
-            console.error('Form submission error:', error);
-            submitBtn.disabled = false;
-            submitBtn.textContent = 'Submit';
             
-            const errorDiv = document.createElement('div');
-            errorDiv.className = 'quick-form-error';
-            errorDiv.textContent = 'Failed to submit form. Please try again.';
-            form.insertBefore(errorDiv, form.firstChild);
+            return imageWrapper;
           }
-        });
-
-        // Add form to container
-        container.appendChild(form);
-      })();
+          
+          default:
+            console.warn('Unknown element type:', element.type);
+            return null;
+        }
+      }
     `;
 
-    // Return the bundle with proper JavaScript content type
-    return new NextResponse(bundle, {
+    // Generate the form bundle - using an array of strings to avoid template literal formatting issues
+    const bundleScript = [
+      '(() => {',
+      utilityFunctions,
+      `const containerId = 'quick-form-${formId}';`,
+      `const formId = ${formId};`,
+      'let container = document.getElementById(containerId);',
+      'if (!container) {',
+      '  console.error("Quick Form container not found:", containerId);',
+      '  return;',
+      '}',
+      'container.innerHTML = "";',
+      'const style = document.createElement("style");',
+      `style.textContent = '${styles}';`,
+      'document.head.appendChild(style);',
+      'const form = document.createElement("form");',
+      'form.className = "quick-form";',
+      `const formContent = ${JSON.stringify(formContent)};`,
+      'formContent.forEach(element => {',
+      '  const node = createFormElement(element);',
+      '  if (node) form.appendChild(node);',
+      '});',
+      'form.onsubmit = async (e) => {',
+      '  e.preventDefault();',
+      '  const formData = new FormData(form);',
+      '  const data = Object.fromEntries(formData.entries());',
+      '  try {',
+      '    const response = await fetch("/api/submit/" + formId, {',
+      '      method: "POST",',
+      '      headers: {',
+      '        "Content-Type": "application/json",',
+      '      },',
+      '      body: JSON.stringify(data),',
+      '    });',
+      '    if (response.ok) {',
+      '      alert("Form submitted successfully!");',
+      '      form.reset();',
+      '    } else {',
+      '      alert("Error submitting form. Please try again.");',
+      '    }',
+      '  } catch (error) {',
+      '    console.error("Error submitting form:", error);',
+      '    alert("Error submitting form. Please try again.");',
+      '  }',
+      '};',
+      'const submitBtn = document.createElement("button");',
+      'submitBtn.type = "submit";',
+      'submitBtn.className = "quick-form-submit";',
+      'submitBtn.textContent = "Submit";',
+      'form.appendChild(submitBtn);',
+      'container.appendChild(form);',
+      '})();'
+    ].join('\n');
+
+    return new NextResponse(bundleScript, {
       headers: {
-        "Content-Type": "application/javascript",
-        "Cache-Control": "no-cache, no-store, must-revalidate",
+        'Content-Type': 'application/javascript',
       },
     });
   } catch (error) {
-    console.error('Error generating form bundle:', error);
+    console.error("Error generating form bundle:", error);
     return new NextResponse("Error generating form bundle", { status: 500 });
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/FormElements.tsx b/src/components/FormElements.tsx
index 9733130..dbb02c0 100644
--- a/src/components/FormElements.tsx
+++ b/src/components/FormElements.tsx
@@ -12,7 +12,7 @@ import { TextFieldFormElement } from "./field/TextField";
 import { TitleFieldFormElement } from "./field/TitleField";
 import { DualImageUploadFormElement } from "./field/DualImageUpload";
 import { ImageUploadFieldFormElement } from "./field/ImageUploadField";
-import { RatingScaleFormElement } from "./field/RatingScaleField";
+import { RatingScaleFormElement } from "./field/RatingScale";
 import { ImageFormElement } from "./field/ImageElement";
 import { BulletedListFieldFormElement } from "./field/BulletedListField";
 import { TwoColumnLayoutFieldFormElement } from "./field/TwoColumnLayoutField";
diff --git a/src/components/field/RatingScale/DesignerComponent.tsx b/src/components/field/RatingScale/DesignerComponent.tsx
new file mode 100644
index 0000000..d8247d0
--- /dev/null
+++ b/src/components/field/RatingScale/DesignerComponent.tsx
@@ -0,0 +1,42 @@
+import { FormElementInstance } from "../../FormElements";
+import { Label } from "../../ui/label";
+import { CustomInstance } from "./types";
+import { useRatingColors } from "./useRatingColors";
+
+type DesignerComponentProps = {
+  elementInstance: FormElementInstance;
+};
+
+export const DesignerComponent = ({ elementInstance }: DesignerComponentProps) => {
+  const element = elementInstance as CustomInstance;
+  const { question, minLabel, midLabel, maxLabel, minValue, maxValue, colorScheme, gradientScheme } = element.extraAttributes;
+  
+  const { labelColor } = useRatingColors({
+    minValue,
+    maxValue,
+    colorScheme,
+    gradientScheme
+  });
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-lg font-medium text-center">{question}</Label>
+      <div className="flex justify-between items-center mb-4">
+        {Array.from({ length: maxValue - minValue + 1 }, (_, i) => i + minValue).map((value) => (
+          <div key={value} className="flex flex-col items-center">
+            <button
+              className="w-8 h-8 rounded-full border-2 flex items-center justify-center bg-white hover:border-blue-400"
+            >
+              <span className="text-sm font-medium">{value}</span>
+            </button>
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-between px-4">
+        <span className={labelColor(0)}>{minLabel}</span>
+        <span className={labelColor(Math.floor(maxValue / 2))}>{midLabel}</span>
+        <span className={labelColor(maxValue - 1)}>{maxLabel}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/field/RatingScale/FormComponent.tsx b/src/components/field/RatingScale/FormComponent.tsx
new file mode 100644
index 0000000..33e5301
--- /dev/null
+++ b/src/components/field/RatingScale/FormComponent.tsx
@@ -0,0 +1,106 @@
+import { cn } from "@/lib/utils";
+import { FormElementInstance } from "../../FormElements";
+import { Label } from "../../ui/label";
+import { useState } from "react";
+import { useRatingColors } from "./useRatingColors";
+import { RatingButton } from "./RatingButton";
+import { CustomInstance } from "./types";
+
+type FormComponentProps = {
+  elementInstance: FormElementInstance;
+  submitValue?: (key: string, value: string) => void;
+  isInvalid?: boolean;
+  defaultValue?: string;
+};
+
+export const FormComponent = ({
+  elementInstance,
+  submitValue,
+  isInvalid,
+  defaultValue,
+}: FormComponentProps) => {
+  const element = elementInstance as CustomInstance;
+  const [selectedValue, setSelectedValue] = useState<number | null>(
+    defaultValue ? parseInt(defaultValue) : null
+  );
+
+  const {
+    question,
+    minLabel,
+    midLabel,
+    maxLabel,
+    minValue,
+    maxValue,
+    colorScheme,
+    gradientScheme,
+    helperText,
+    required,
+    label
+  } = element.extraAttributes;
+
+  const { getButtonColors, labelColor } = useRatingColors({
+    minValue,
+    maxValue,
+    colorScheme,
+    gradientScheme
+  });
+
+  const handleSelection = (value: number) => {
+    setSelectedValue(value);
+    submitValue?.(elementInstance.id, value.toString());
+  };
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label>
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </Label>
+      <div className="flex flex-col sm:flex-row items-center gap-2 w-full">
+        <div className="flex items-center justify-between w-full max-w-3xl mx-auto">
+          <span className={cn("text-sm whitespace-nowrap", labelColor(0))}>
+            {minLabel}
+          </span>
+          <div className="flex-1 flex justify-center">
+            <span
+              className={cn(
+                "text-sm whitespace-nowrap",
+                labelColor(Math.floor(maxValue / 2))
+              )}
+            >
+              {midLabel}
+            </span>
+          </div>
+          <span
+            className={cn("text-sm whitespace-nowrap", labelColor(maxValue - 1))}
+          >
+            {maxLabel}
+          </span>
+        </div>
+      </div>
+      <div className="flex flex-wrap justify-center gap-2 w-full max-w-3xl mx-auto">
+        {Array.from({ length: maxValue }, (_, i) => {
+          const value = i + 1;
+          return (
+            <RatingButton
+              key={value}
+              value={value}
+              isSelected={selectedValue === value}
+              onClick={handleSelection}
+              buttonColors={getButtonColors(value)}
+            />
+          );
+        })}
+      </div>
+      {helperText && (
+        <p
+          className={cn("text-muted-foreground text-sm", {
+            "text-red-500": isInvalid,
+          })}
+        >
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/field/RatingScale/PropertiesComponent.tsx b/src/components/field/RatingScale/PropertiesComponent.tsx
new file mode 100644
index 0000000..53db1e7
--- /dev/null
+++ b/src/components/field/RatingScale/PropertiesComponent.tsx
@@ -0,0 +1,240 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import useDesigner from "@/hooks/useDesigner";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../ui/form";
+import { Input } from "../../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select";
+import { FormElementInstance } from "../../FormElements";
+import { CustomInstance } from "./types";
+import { GRADIENT_SCHEMES, SOLID_COLOR_SCHEMES } from "@/lib/colorSchemes";
+
+const propertiesSchema = z.object({
+  label: z.string().min(2).max(50),
+  helperText: z.string().max(200),
+  required: z.boolean().default(false),
+  question: z.string().min(2).max(200),
+  minLabel: z.string().min(1).max(50),
+  midLabel: z.string().min(1).max(50),
+  maxLabel: z.string().min(1).max(50),
+  minValue: z.number().min(0).max(100),
+  maxValue: z.number().min(0).max(100),
+  colorScheme: z.enum(SOLID_COLOR_SCHEMES),
+  gradientScheme: z.enum(['none', ...GRADIENT_SCHEMES]).transform((value: string) => value === 'none' ? null : value),
+});
+
+type PropertiesFormSchema = z.infer<typeof propertiesSchema>;
+
+type PropertiesComponentProps = {
+  elementInstance: FormElementInstance;
+};
+
+export const PropertiesComponent = ({ elementInstance }: PropertiesComponentProps) => {
+  const element = elementInstance as CustomInstance;
+  const { updateElement } = useDesigner();
+  
+  const form = useForm<PropertiesFormSchema>({
+    resolver: zodResolver(propertiesSchema),
+    mode: "onBlur",
+    defaultValues: {
+      label: element.extraAttributes.label,
+      helperText: element.extraAttributes.helperText,
+      required: element.extraAttributes.required,
+      question: element.extraAttributes.question,
+      minLabel: element.extraAttributes.minLabel,
+      midLabel: element.extraAttributes.midLabel,
+      maxLabel: element.extraAttributes.maxLabel,
+      minValue: element.extraAttributes.minValue,
+      maxValue: element.extraAttributes.maxValue,
+      colorScheme: element.extraAttributes.colorScheme,
+      gradientScheme: element.extraAttributes.gradientScheme ?? 'none',
+    },
+  });
+
+  useEffect(() => {
+    form.reset(element.extraAttributes);
+  }, [element, form]);
+
+  function applyChanges(values: PropertiesFormSchema) {
+    const { colorScheme, gradientScheme, ...rest } = values;
+    updateElement(element.id, {
+      ...element,
+      extraAttributes: {
+        ...rest,
+        colorScheme,
+        gradientScheme: gradientScheme === 'none' ? null : gradientScheme,
+      },
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onBlur={form.handleSubmit(applyChanges)}
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className="space-y-3"
+      >
+        <FormField
+          control={form.control}
+          name="label"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="helperText"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Helper Text</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="question"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Question</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex gap-3">
+          <FormField
+            control={form.control}
+            name="minLabel"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>Min Label</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="midLabel"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>Mid Label</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="maxLabel"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>Max Label</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="flex gap-3">
+          <FormField
+            control={form.control}
+            name="minValue"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>Min Value</FormLabel>
+                <FormControl>
+                  <Input type="number" {...field} onChange={e => field.onChange(parseInt(e.target.value))} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="maxValue"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>Max Value</FormLabel>
+                <FormControl>
+                  <Input type="number" {...field} onChange={e => field.onChange(parseInt(e.target.value))} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <FormField
+          control={form.control}
+          name="colorScheme"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Color Scheme</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a color scheme" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {SOLID_COLOR_SCHEMES.map((scheme) => (
+                    <SelectItem key={scheme} value={scheme}>
+                      {scheme.charAt(0).toUpperCase() + scheme.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="gradientScheme"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Gradient Scheme</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value ?? 'none'}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a gradient scheme" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="none">None</SelectItem>
+                  {GRADIENT_SCHEMES.map((scheme) => (
+                    <SelectItem key={scheme} value={scheme}>
+                      {scheme.charAt(0).toUpperCase() + scheme.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+};
diff --git a/src/components/field/RatingScale/RatingButton.tsx b/src/components/field/RatingScale/RatingButton.tsx
new file mode 100644
index 0000000..b40a381
--- /dev/null
+++ b/src/components/field/RatingScale/RatingButton.tsx
@@ -0,0 +1,36 @@
+import { cn } from "@/lib/utils";
+
+type RatingButtonProps = {
+  value: number;
+  isSelected: boolean;
+  onClick: (value: number) => void;
+  buttonColors: {
+    selected: string;
+    hover: string;
+  };
+};
+
+export const RatingButton = ({
+  value,
+  isSelected,
+  onClick,
+  buttonColors,
+}: RatingButtonProps) => {
+  return (
+    <button
+      type="button"
+      onClick={() => onClick(value)}
+      className={cn(
+        "w-10 h-10 rounded-full border-2 transition-all",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2",
+        buttonColors.hover,
+        {
+          [buttonColors.selected]: isSelected,
+          "opacity-50": !isSelected,
+        }
+      )}
+    >
+      {value}
+    </button>
+  );
+};
diff --git a/src/components/field/RatingScale/index.tsx b/src/components/field/RatingScale/index.tsx
new file mode 100644
index 0000000..5c77bf7
--- /dev/null
+++ b/src/components/field/RatingScale/index.tsx
@@ -0,0 +1,44 @@
+import { BsStarFill } from "react-icons/bs";
+import { ElementsType, FormElement, FormElementInstance } from "../../FormElements";
+import { DesignerComponent } from "./DesignerComponent";
+import { FormComponent } from "./FormComponent";
+import { PropertiesComponent } from "./PropertiesComponent";
+import { CustomInstance } from "./types";
+
+export const RatingScaleFormElement: FormElement = {
+  type: "RatingScaleField",
+  construct: (id: string) => ({
+    id,
+    type: "RatingScaleField",
+    extraAttributes: {
+      label: "Rating Scale",
+      helperText: "Select a value",
+      required: false,
+      question: "Rate your experience",
+      minLabel: "Poor",
+      midLabel: "Average",
+      maxLabel: "Excellent",
+      minValue: 1,
+      maxValue: 10,
+      colorScheme: "blue",
+      gradientScheme: null,
+    },
+  }),
+
+  designerBtnElement: {
+    icon: BsStarFill,
+    label: "Rating Scale",
+  },
+
+  designerComponent: DesignerComponent,
+  formComponent: FormComponent,
+  propertiesComponent: PropertiesComponent,
+
+  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
+    const element = formElement as CustomInstance;
+    if (element.extraAttributes.required) {
+      return currentValue.length > 0;
+    }
+    return true;
+  },
+};
diff --git a/src/components/field/RatingScale/types.ts b/src/components/field/RatingScale/types.ts
new file mode 100644
index 0000000..db11945
--- /dev/null
+++ b/src/components/field/RatingScale/types.ts
@@ -0,0 +1,18 @@
+import { FormElementInstance } from "../../FormElements";
+import { ColorSchemeType, GradientSchemeType } from "@/lib/colorSchemes";
+
+export type CustomInstance = FormElementInstance & {
+  extraAttributes: {
+    label: string;
+    helperText: string;
+    required: boolean;
+    question: string;
+    minLabel: string;
+    midLabel: string;
+    maxLabel: string;
+    minValue: number;
+    maxValue: number;
+    colorScheme: ColorSchemeType;
+    gradientScheme: GradientSchemeType;
+  };
+};
diff --git a/src/components/field/RatingScale/useRatingColors.ts b/src/components/field/RatingScale/useRatingColors.ts
new file mode 100644
index 0000000..91f6bee
--- /dev/null
+++ b/src/components/field/RatingScale/useRatingColors.ts
@@ -0,0 +1,69 @@
+import { solidColorSchemes, gradientColorSchemes, ColorSchemeType, GradientSchemeType } from "@/lib/colorSchemes";
+
+type UseRatingColorsProps = {
+  minValue: number;
+  maxValue: number;
+  colorScheme: ColorSchemeType;
+  gradientScheme: GradientSchemeType;
+};
+
+export const useRatingColors = ({
+  minValue,
+  maxValue,
+  colorScheme,
+  gradientScheme
+}: UseRatingColorsProps) => {
+  const useGradient = gradientScheme && gradientColorSchemes[gradientScheme];
+  const gradientLabels = useGradient ? gradientColorSchemes[gradientScheme].labels : null;
+  const solidColors = solidColorSchemes[colorScheme];
+
+  const getButtonColors = (value: number) => {
+    if (useGradient) {
+      const position = (value - minValue) / (maxValue - minValue);
+      if (position <= 0.33) {
+        return {
+          selected: `bg-${gradientColorSchemes[gradientScheme].colors[0]}-500 border-${gradientColorSchemes[gradientScheme].colors[0]}-600`,
+          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[0]}-400`
+        };
+      } else if (position <= 0.66) {
+        return {
+          selected: `bg-${gradientColorSchemes[gradientScheme].colors[1]}-500 border-${gradientColorSchemes[gradientScheme].colors[1]}-600`,
+          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[1]}-400`
+        };
+      } else {
+        return {
+          selected: `bg-${gradientColorSchemes[gradientScheme].colors[2]}-500 border-${gradientColorSchemes[gradientScheme].colors[2]}-600`,
+          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[2]}-400`
+        };
+      }
+    }
+    return {
+      selected: solidColors.selected,
+      hover: solidColors.hover
+    };
+  };
+
+  const getLabelColor = (position: 'start' | 'middle' | 'end'): string => {
+    if (!useGradient || !gradientLabels) return solidColors.text;
+    return gradientLabels[position].color;
+  };
+
+  const labelColor = (index: number) => {
+    if (!useGradient || !gradientLabels) return solidColors.text;
+    const position = (index - minValue) / (maxValue - minValue);
+    if (position <= 0.33) {
+      return gradientLabels.start.color;
+    } else if (position <= 0.66) {
+      return gradientLabels.middle.color;
+    } else {
+      return gradientLabels.end.color;
+    }
+  };
+
+  return {
+    getButtonColors,
+    getLabelColor,
+    labelColor,
+    useGradient,
+  };
+};
diff --git a/src/components/field/RatingScaleField.tsx b/src/components/field/RatingScaleField.tsx
deleted file mode 100644
index cca4148..0000000
--- a/src/components/field/RatingScaleField.tsx
+++ /dev/null
@@ -1,602 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { ElementsType, FormElement, FormElementInstance } from "../FormElements";
-import { Label } from "../ui/label";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, useState } from "react";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
-import { BsStarFill } from "react-icons/bs";
-import useDesigner from "@/hooks/useDesigner";
-import { Input } from "../ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
-
-const SOLID_COLOR_SCHEMES = ["blue", "green", "purple", "red", "amber"] as const;
-const GRADIENT_SCHEMES = ["severity", "satisfaction", "temperature"] as const;
-
-type ColorScheme = {
-  selected: string;
-  hover: string;
-  text: string;
-};
-
-type SolidColorSchemes = {
-  [key in typeof SOLID_COLOR_SCHEMES[number]]: ColorScheme;
-};
-
-const solidColorSchemes: SolidColorSchemes = {
-  blue: {
-    selected: 'bg-blue-500 border-blue-600',
-    hover: 'hover:border-blue-400',
-    text: 'text-blue-600'
-  },
-  green: {
-    selected: 'bg-green-500 border-green-600',
-    hover: 'hover:border-green-400',
-    text: 'text-green-600'
-  },
-  purple: {
-    selected: 'bg-purple-500 border-purple-600',
-    hover: 'hover:border-purple-400',
-    text: 'text-purple-600'
-  },
-  red: {
-    selected: 'bg-red-500 border-red-600',
-    hover: 'hover:border-red-400',
-    text: 'text-red-600'
-  },
-  amber: {
-    selected: 'bg-amber-500 border-amber-600',
-    hover: 'hover:border-amber-400',
-    text: 'text-amber-600'
-  }
-};
-
-type GradientLabel = {
-  color: string;
-  hover: string;
-};
-
-type GradientScheme = {
-  colors: string[];
-  labels: {
-    start: GradientLabel;
-    middle: GradientLabel;
-    end: GradientLabel;
-  };
-};
-
-type GradientColorSchemes = {
-  [key in typeof GRADIENT_SCHEMES[number]]: GradientScheme;
-};
-
-const gradientColorSchemes: GradientColorSchemes = {
-  severity: {
-    colors: ['green', 'yellow', 'red'],
-    labels: {
-      start: { color: 'text-green-600', hover: 'hover:border-green-400' },
-      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
-      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
-    }
-  },
-  satisfaction: {
-    colors: ['red', 'yellow', 'green'],
-    labels: {
-      start: { color: 'text-red-600', hover: 'hover:border-red-400' },
-      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
-      end: { color: 'text-green-600', hover: 'hover:border-green-400' }
-    }
-  },
-  temperature: {
-    colors: ['blue', 'green', 'red'],
-    labels: {
-      start: { color: 'text-blue-600', hover: 'hover:border-blue-400' },
-      middle: { color: 'text-green-600', hover: 'hover:border-green-400' },
-      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
-    }
-  }
-};
-
-type ColorSchemeType = typeof SOLID_COLOR_SCHEMES[number];
-type GradientSchemeType = typeof GRADIENT_SCHEMES[number] | null;
-
-type CustomInstance = FormElementInstance & {
-  extraAttributes: {
-    label: string;
-    helperText: string;
-    required: boolean;
-    question: string;
-    minLabel: string;
-    midLabel: string;
-    maxLabel: string;
-    minValue: number;
-    maxValue: number;
-    colorScheme: ColorSchemeType;
-    gradientScheme: GradientSchemeType;
-  };
-};
-
-const propertiesSchema = z.object({
-  label: z.string().min(2).max(50),
-  helperText: z.string().max(200),
-  required: z.boolean().default(false),
-  question: z.string().min(2).max(200),
-  minLabel: z.string().min(1).max(50),
-  midLabel: z.string().min(1).max(50),
-  maxLabel: z.string().min(1).max(50),
-  minValue: z.number().min(0).max(100),
-  maxValue: z.number().min(0).max(100),
-  colorScheme: z.enum(SOLID_COLOR_SCHEMES),
-  gradientScheme: z.enum(['none', ...GRADIENT_SCHEMES]).transform((value: string) => value === 'none' ? null : value),
-});
-
-export const RatingScaleFormElement: FormElement = {
-  type: "RatingScaleField",
-  construct: (id: string) => ({
-    id,
-    type: "RatingScaleField",
-    extraAttributes: {
-      label: "Rating Scale",
-      helperText: "Select a value",
-      required: false,
-      question: "Rate your experience",
-      minLabel: "Poor",
-      midLabel: "Average",
-      maxLabel: "Excellent",
-      minValue: 1,
-      maxValue: 10,
-      colorScheme: "blue",
-      gradientScheme: null,
-    },
-  }),
-
-  designerBtnElement: {
-    icon: BsStarFill,
-    label: "Rating Scale",
-  },
-
-  designerComponent: DesignerComponent,
-  formComponent: FormComponent,
-  propertiesComponent: PropertiesComponent,
-
-  validate: (formElement: FormElementInstance, currentValue: string): boolean => {
-    const element = formElement as CustomInstance;
-    if (element.extraAttributes.required) {
-      return currentValue.length > 0;
-    }
-    return true;
-  },
-};
-
-function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
-  const element = elementInstance as CustomInstance;
-  const { question, minLabel, midLabel, maxLabel, minValue, maxValue, colorScheme } = element.extraAttributes;
-  const solidColors = solidColorSchemes[colorScheme];
-
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <Label className="text-lg font-medium text-center">{question}</Label>
-      <div className="flex justify-between items-center mb-4">
-        {Array.from({ length: maxValue - minValue + 1 }, (_, i) => i + minValue).map((value) => (
-          <div key={value} className="flex flex-col items-center">
-            <button
-              className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
-                bg-white ${solidColors.hover}`}
-            >
-              <span className="text-sm font-medium">{value}</span>
-            </button>
-          </div>
-        ))}
-      </div>
-      <div className="flex justify-between px-4">
-        <span className={`text-sm ${solidColors.text}`}>{minLabel}</span>
-        <span className={`text-sm ${solidColors.text}`}>{midLabel}</span>
-        <span className={`text-sm ${solidColors.text}`}>{maxLabel}</span>
-      </div>
-    </div>
-  );
-}
-
-function FormComponent({
-  elementInstance,
-  submitValue,
-  isInvalid,
-  defaultValue,
-}: {
-  elementInstance: FormElementInstance;
-  submitValue?: (key: string, value: string) => void;
-  isInvalid?: boolean;
-  defaultValue?: string;
-}) {
-  const element = elementInstance as CustomInstance;
-  const [selectedValue, setSelectedValue] = useState<number | null>(defaultValue ? parseInt(defaultValue) : null);
-  const [hoveredValue, setHoveredValue] = useState<number | null>(null);
-
-  const {
-    question,
-    minLabel,
-    midLabel,
-    maxLabel,
-    minValue,
-    maxValue,
-    colorScheme,
-    gradientScheme
-  } = element.extraAttributes;
-
-  const useGradient = gradientScheme && gradientColorSchemes[gradientScheme];
-  const gradientLabels = useGradient ? gradientColorSchemes[gradientScheme].labels : null;
-  const solidColors = solidColorSchemes[colorScheme];
-
-  const values = Array.from(
-    { length: maxValue - minValue + 1 },
-    (_, i) => i + minValue
-  );
-
-  const handleSelection = (value: number) => {
-    setSelectedValue(value);
-    submitValue?.(elementInstance.id, value.toString());
-  };
-
-  const getButtonColors = (value: number) => {
-    if (useGradient) {
-      const position = (value - minValue) / (maxValue - minValue);
-      if (position <= 0.33) {
-        return {
-          selected: `bg-${gradientColorSchemes[gradientScheme].colors[0]}-500 border-${gradientColorSchemes[gradientScheme].colors[0]}-600`,
-          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[0]}-400`
-        };
-      } else if (position <= 0.66) {
-        return {
-          selected: `bg-${gradientColorSchemes[gradientScheme].colors[1]}-500 border-${gradientColorSchemes[gradientScheme].colors[1]}-600`,
-          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[1]}-400`
-        };
-      } else {
-        return {
-          selected: `bg-${gradientColorSchemes[gradientScheme].colors[2]}-500 border-${gradientColorSchemes[gradientScheme].colors[2]}-600`,
-          hover: `hover:border-${gradientColorSchemes[gradientScheme].colors[2]}-400`
-        };
-      }
-    }
-    return {
-      selected: solidColors.selected,
-      hover: solidColors.hover
-    };
-  };
-
-  const getLabelColor = (position: 'start' | 'middle' | 'end'): string => {
-    if (!useGradient || !gradientLabels) return solidColors.text;
-    return gradientLabels[position].color;
-  };
-
-  const labelColor = (index: number) => {
-    if (!useGradient || !gradientLabels) return solidColors.text;
-    const position = (index - minValue) / (maxValue - minValue);
-    if (position <= 0.33) {
-      return gradientLabels.start.color;
-    } else if (position <= 0.66) {
-      return gradientLabels.middle.color;
-    } else {
-      return gradientLabels.end.color;
-    }
-  };
-
-  const buttonClasses = (index: number) => {
-    if (!useGradient) return solidColors.hover;
-    const position = (index - minValue) / (maxValue - minValue);
-    if (position <= 0.33) {
-      return `hover:border-${gradientColorSchemes[gradientScheme].colors[0]}-400`;
-    } else if (position <= 0.66) {
-      return `hover:border-${gradientColorSchemes[gradientScheme].colors[1]}-400`;
-    } else {
-      return `hover:border-${gradientColorSchemes[gradientScheme].colors[2]}-400`;
-    }
-  };
-
-  const selectedClass = (index: number) => {
-    if (!useGradient) return solidColors.selected;
-    const position = (index - minValue) / (maxValue - minValue);
-    if (position <= 0.33) {
-      return `bg-${gradientColorSchemes[gradientScheme].colors[0]}-500 border-${gradientColorSchemes[gradientScheme].colors[0]}-600`;
-    } else if (position <= 0.66) {
-      return `bg-${gradientColorSchemes[gradientScheme].colors[1]}-500 border-${gradientColorSchemes[gradientScheme].colors[1]}-600`;
-    } else {
-      return `bg-${gradientColorSchemes[gradientScheme].colors[2]}-500 border-${gradientColorSchemes[gradientScheme].colors[2]}-600`;
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <Label>
-        {elementInstance.extraAttributes?.label}
-        {elementInstance.extraAttributes?.required && <span className="text-red-500 ml-1">*</span>}
-      </Label>
-      <div className="flex flex-col sm:flex-row items-center gap-2 w-full">
-        <div className="flex items-center justify-between w-full max-w-3xl mx-auto">
-          <span className={cn("text-sm whitespace-nowrap", labelColor(0))}>{elementInstance.extraAttributes?.minLabel}</span>
-          <div className="flex-1 flex justify-center">
-            <span className={cn("text-sm whitespace-nowrap", labelColor(Math.floor((elementInstance.extraAttributes?.maxValue ?? 0) / 2)))}>{elementInstance.extraAttributes?.midLabel}</span>
-          </div>
-          <span className={cn("text-sm whitespace-nowrap", labelColor((elementInstance.extraAttributes?.maxValue ?? 0) - 1))}>{elementInstance.extraAttributes?.maxLabel}</span>
-        </div>
-      </div>
-      <div className="flex flex-wrap justify-center gap-2 w-full max-w-3xl mx-auto">
-        {Array.from({ length: elementInstance.extraAttributes?.maxValue ?? 0 }, (_, i) => (
-          <button
-            key={i}
-            type="button"
-            onClick={() => handleSelection(i + 1)}
-            className={cn(
-              "w-10 h-10 rounded-full border-2 transition-all",
-              "focus:outline-none focus:ring-2 focus:ring-offset-2",
-              buttonClasses(i),
-              {
-                [selectedClass(i)]: selectedValue === i + 1,
-                "opacity-50": selectedValue && selectedValue !== i + 1,
-              }
-            )}
-          >
-            {i + 1}
-          </button>
-        ))}
-      </div>
-      {elementInstance.extraAttributes?.helperText && (
-        <p className={cn("text-muted-foreground text-sm", { "text-red-500": isInvalid })}>
-          {elementInstance.extraAttributes.helperText}
-        </p>
-      )}
-    </div>
-  );
-}
-
-function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
-  const element = elementInstance as CustomInstance;
-  const { updateElement } = useDesigner();
-  const form = useForm<propertiesFormSchemaType>({
-    resolver: zodResolver(propertiesSchema),
-    mode: "onBlur",
-    defaultValues: {
-      label: element.extraAttributes.label,
-      helperText: element.extraAttributes.helperText,
-      required: element.extraAttributes.required,
-      question: element.extraAttributes.question,
-      minLabel: element.extraAttributes.minLabel,
-      midLabel: element.extraAttributes.midLabel,
-      maxLabel: element.extraAttributes.maxLabel,
-      minValue: element.extraAttributes.minValue,
-      maxValue: element.extraAttributes.maxValue,
-      colorScheme: element.extraAttributes.colorScheme,
-      gradientScheme: element.extraAttributes.gradientScheme ?? 'none',
-    },
-  });
-
-  useEffect(() => {
-    form.reset(element.extraAttributes);
-  }, [element, form]);
-
-  function applyChanges(values: propertiesFormSchemaType) {
-    const { colorScheme, gradientScheme, ...rest } = values;
-    updateElement(element.id, {
-      ...element,
-      extraAttributes: {
-        ...rest,
-        colorScheme: colorScheme as ColorSchemeType,
-        gradientScheme: gradientScheme === 'none' ? null : gradientScheme as GradientSchemeType,
-      },
-    });
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onBlur={form.handleSubmit(applyChanges)}
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-        className="space-y-3"
-      >
-        <FormField
-          control={form.control}
-          name="question"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Question</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="minLabel"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Minimum Label</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="midLabel"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Middle Label</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="maxLabel"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Maximum Label</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="minValue"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Minimum Value</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  type="number"
-                  min={0}
-                  max={100}
-                  onChange={(e) => field.onChange(parseInt(e.target.value))}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="maxValue"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Maximum Value</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  type="number"
-                  min={0}
-                  max={100}
-                  onChange={(e) => field.onChange(parseInt(e.target.value))}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="colorScheme"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Color Scheme</FormLabel>
-              <Select
-                onValueChange={field.onChange}
-                defaultValue={field.value}
-              >
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a color scheme" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {SOLID_COLOR_SCHEMES.map((scheme) => (
-                    <SelectItem key={scheme} value={scheme}>
-                      {scheme.charAt(0).toUpperCase() + scheme.slice(1)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="gradientScheme"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Gradient Scheme (Optional)</FormLabel>
-              <Select
-                onValueChange={field.onChange}
-                defaultValue={field.value ?? 'none'}
-              >
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a gradient scheme" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="none">None</SelectItem>
-                  {GRADIENT_SCHEMES.map((scheme) => (
-                    <SelectItem key={scheme} value={scheme}>
-                      {scheme.charAt(0).toUpperCase() + scheme.slice(1)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="required"
-          render={({ field }) => (
-            <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
-              <div className="space-y-0.5">
-                <FormLabel>Required</FormLabel>
-              </div>
-              <FormControl>
-                <input
-                  type="checkbox"
-                  checked={field.value}
-                  onChange={field.onChange}
-                  className="accent-primary"
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
-      </form>
-    </Form>
-  );
-}
-
-type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
diff --git a/src/lib/colorSchemes.ts b/src/lib/colorSchemes.ts
new file mode 100644
index 0000000..7790f25
--- /dev/null
+++ b/src/lib/colorSchemes.ts
@@ -0,0 +1,88 @@
+export const SOLID_COLOR_SCHEMES = ["blue", "green", "purple", "red", "amber"] as const;
+export const GRADIENT_SCHEMES = ["severity", "satisfaction", "temperature"] as const;
+
+export type ColorScheme = {
+  selected: string;
+  hover: string;
+  text: string;
+};
+
+export type SolidColorSchemes = {
+  [key in typeof SOLID_COLOR_SCHEMES[number]]: ColorScheme;
+};
+
+export const solidColorSchemes: SolidColorSchemes = {
+  blue: {
+    selected: 'bg-blue-500 border-blue-600',
+    hover: 'hover:border-blue-400',
+    text: 'text-blue-600'
+  },
+  green: {
+    selected: 'bg-green-500 border-green-600',
+    hover: 'hover:border-green-400',
+    text: 'text-green-600'
+  },
+  purple: {
+    selected: 'bg-purple-500 border-purple-600',
+    hover: 'hover:border-purple-400',
+    text: 'text-purple-600'
+  },
+  red: {
+    selected: 'bg-red-500 border-red-600',
+    hover: 'hover:border-red-400',
+    text: 'text-red-600'
+  },
+  amber: {
+    selected: 'bg-amber-500 border-amber-600',
+    hover: 'hover:border-amber-400',
+    text: 'text-amber-600'
+  }
+};
+
+export type GradientLabel = {
+  color: string;
+  hover: string;
+};
+
+export type GradientScheme = {
+  colors: string[];
+  labels: {
+    start: GradientLabel;
+    middle: GradientLabel;
+    end: GradientLabel;
+  };
+};
+
+export type GradientColorSchemes = {
+  [key in typeof GRADIENT_SCHEMES[number]]: GradientScheme;
+};
+
+export const gradientColorSchemes: GradientColorSchemes = {
+  severity: {
+    colors: ['green', 'yellow', 'red'],
+    labels: {
+      start: { color: 'text-green-600', hover: 'hover:border-green-400' },
+      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
+      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
+    }
+  },
+  satisfaction: {
+    colors: ['red', 'yellow', 'green'],
+    labels: {
+      start: { color: 'text-red-600', hover: 'hover:border-red-400' },
+      middle: { color: 'text-yellow-600', hover: 'hover:border-yellow-400' },
+      end: { color: 'text-green-600', hover: 'hover:border-green-400' }
+    }
+  },
+  temperature: {
+    colors: ['blue', 'green', 'red'],
+    labels: {
+      start: { color: 'text-blue-600', hover: 'hover:border-blue-400' },
+      middle: { color: 'text-green-600', hover: 'hover:border-green-400' },
+      end: { color: 'text-red-600', hover: 'hover:border-red-400' }
+    }
+  }
+};
+
+export type ColorSchemeType = typeof SOLID_COLOR_SCHEMES[number];
+export type GradientSchemeType = typeof GRADIENT_SCHEMES[number] | null;
diff --git a/src/lib/embed/elements.ts b/src/lib/embed/elements.ts
new file mode 100644
index 0000000..4e1f264
--- /dev/null
+++ b/src/lib/embed/elements.ts
@@ -0,0 +1,154 @@
+import { createElement, createHelperText, createInput, createLabel, createWrapper } from './utils/dom';
+
+interface FormElement {
+  id: string;
+  type: string;
+  extraAttributes: Record<string, any>;
+}
+
+export function createFormElement(element: FormElement): HTMLElement | null {
+  const wrapper = createWrapper();
+  
+  switch (element.type) {
+    case 'TextField': {
+      const { label, helperText, required, placeHolder } = element.extraAttributes;
+      if (label) wrapper.appendChild(createLabel(label));
+      wrapper.appendChild(createInput('text', element.id, required, placeHolder));
+      if (helperText) wrapper.appendChild(createHelperText(helperText));
+      return wrapper;
+    }
+    
+    case 'NumberField': {
+      const { label, helperText, required, placeHolder } = element.extraAttributes;
+      if (label) wrapper.appendChild(createLabel(label));
+      wrapper.appendChild(createInput('number', element.id, required, placeHolder));
+      if (helperText) wrapper.appendChild(createHelperText(helperText));
+      return wrapper;
+    }
+    
+    case 'TitleField': {
+      const { title, fontSize, alignment } = element.extraAttributes;
+      const titleEl = createElement('h1', 'quick-form-title', title);
+      titleEl.style.textAlign = alignment;
+      if (fontSize === 'h2') titleEl.style.fontSize = '1.5em';
+      else if (fontSize === 'h3') titleEl.style.fontSize = '1.17em';
+      return titleEl;
+    }
+    
+    case 'SubTitleField': {
+      const { subTitle, fontSize, alignment } = element.extraAttributes;
+      const subtitleEl = createElement('h2', 'quick-form-subtitle', subTitle);
+      subtitleEl.style.textAlign = alignment;
+      if (fontSize === 'h3') subtitleEl.style.fontSize = '1.17em';
+      else if (fontSize === 'h4') subtitleEl.style.fontSize = '1em';
+      return subtitleEl;
+    }
+    
+    case 'RatingScaleField': {
+      const { 
+        label, helperText, required, question,
+        minLabel, midLabel, maxLabel,
+        minValue, maxValue
+      } = element.extraAttributes;
+      
+      const container = createWrapper();
+      if (label) container.appendChild(createLabel(label));
+      if (question) {
+        const questionEl = createElement('div', 'quick-form-rating-question', question);
+        container.appendChild(questionEl);
+      }
+      
+      const scale = createElement('div', 'quick-form-rating-scale');
+      
+      // Create buttons
+      const buttons = createElement('div', 'quick-form-rating-buttons');
+      for (let i = minValue; i <= maxValue; i++) {
+        const button = createElement('button', 'quick-form-rating-button', i.toString());
+        button.type = 'button';
+        button.onclick = function() {
+          // Remove selected class from all buttons
+          const allButtons = buttons.getElementsByClassName('quick-form-rating-button');
+          Array.from(allButtons).forEach(btn => btn.classList.remove('selected'));
+          // Add selected class to clicked button
+          button.classList.add('selected');
+          // Update hidden input
+          hiddenInput.value = i.toString();
+        };
+        buttons.appendChild(button);
+      }
+      scale.appendChild(buttons);
+      
+      // Create labels
+      const labels = createElement('div', 'quick-form-rating-labels');
+      labels.appendChild(createElement('span', '', minLabel));
+      if (midLabel) labels.appendChild(createElement('span', '', midLabel));
+      labels.appendChild(createElement('span', '', maxLabel));
+      scale.appendChild(labels);
+      
+      // Hidden input for form submission
+      const hiddenInput = createInput('hidden', element.id, required);
+      scale.appendChild(hiddenInput);
+      
+      container.appendChild(scale);
+      if (helperText) container.appendChild(createHelperText(helperText));
+      
+      return container;
+    }
+    
+    case 'TwoColumnLayoutField': {
+      const { gap, leftColumn, rightColumn } = element.extraAttributes;
+      
+      const container = createElement('div', 'quick-form-two-column');
+      container.style.gap = `${gap}px`;
+      
+      const leftCol = createElement('div', 'quick-form-column');
+      leftColumn.forEach((el: FormElement) => {
+        const element = createFormElement(el);
+        if (element) leftCol.appendChild(element);
+      });
+      
+      const rightCol = createElement('div', 'quick-form-column');
+      rightColumn.forEach((el: FormElement) => {
+        const element = createFormElement(el);
+        if (element) rightCol.appendChild(element);
+      });
+      
+      container.appendChild(leftCol);
+      container.appendChild(rightCol);
+      
+      return container;
+    }
+    
+    case 'ImageElement': {
+      const { 
+        base64Image, height, width, maintainAspectRatio,
+        alignment, marginTop, marginBottom, marginLeft, marginRight
+      } = element.extraAttributes;
+      
+      const container = createElement('div');
+      container.style.textAlign = alignment;
+      container.style.marginTop = `${marginTop}px`;
+      container.style.marginBottom = `${marginBottom}px`;
+      container.style.marginLeft = `${marginLeft}px`;
+      container.style.marginRight = `${marginRight}px`;
+      
+      if (base64Image) {
+        const img = createElement('img');
+        img.src = base64Image;
+        img.style.width = `${width}px`;
+        if (maintainAspectRatio) {
+          img.style.height = 'auto';
+        } else {
+          img.style.height = `${height}px`;
+        }
+        container.appendChild(img);
+      }
+      
+      return container;
+    }
+    
+    default:
+      console.warn('Unknown element type:', element.type);
+      return null;
+  }
+}
diff --git a/src/lib/embed/utils/dom.ts b/src/lib/embed/utils/dom.ts
new file mode 100644
index 0000000..35d831d
--- /dev/null
+++ b/src/lib/embed/utils/dom.ts
@@ -0,0 +1,36 @@
+export const createElement = <K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  className?: string,
+  textContent?: string
+): HTMLElementTagNameMap[K] => {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (textContent) element.textContent = textContent;
+  return element;
+};
+
+export const createLabel = (text: string): HTMLLabelElement => {
+  return createElement('label', 'quick-form-label', text);
+};
+
+export const createHelperText = (text: string): HTMLDivElement => {
+  return createElement('div', 'quick-form-helper-text', text);
+};
+
+export const createInput = (
+  type: string,
+  name: string,
+  required: boolean,
+  placeholder?: string
+): HTMLInputElement => {
+  const input = createElement('input', 'quick-form-input');
+  input.type = type;
+  input.name = name;
+  input.required = required;
+  if (placeholder) input.placeholder = placeholder;
+  return input;
+};
+
+export const createWrapper = (): HTMLDivElement => {
+  return createElement('div', 'quick-form-field');
+};
diff --git a/src/lib/styles/embed/base.ts b/src/lib/styles/embed/base.ts
new file mode 100644
index 0000000..5f07186
--- /dev/null
+++ b/src/lib/styles/embed/base.ts
@@ -0,0 +1,38 @@
+export function getBaseStyles(): string {
+  return `
+    /* Base form styles */
+    .quick-form-container { width: 100%; }
+    .quick-form { max-width: 600px; margin: 0 auto; padding: 20px; font-family: system-ui, -apple-system, sans-serif; }
+    .quick-form-field { margin-bottom: 20px; }
+    
+    /* Typography */
+    .quick-form-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #111827; }
+    .quick-form-subtitle { font-size: 18px; color: #4B5563; margin-bottom: 15px; }
+    .quick-form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }
+    .quick-form-helper-text { font-size: 14px; color: #6B7280; margin-top: 4px; }
+    
+    /* Submit button */
+    .quick-form-submit {
+      background: #6366f1;
+      color: white;
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.15s ease-in-out;
+    }
+    .quick-form-submit:hover {
+      background: #4f46e5;
+    }
+    .quick-form-submit:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
+    }
+    .quick-form-error {
+      color: #ef4444;
+      font-size: 14px;
+      margin-top: 4px;
+    }
+  `;
+}
diff --git a/src/lib/styles/embed/images.ts b/src/lib/styles/embed/images.ts
new file mode 100644
index 0000000..9abdfb4
--- /dev/null
+++ b/src/lib/styles/embed/images.ts
@@ -0,0 +1,101 @@
+export function getImageStyles(): string {
+  return `
+    .quick-form-image-upload { 
+      border: 2px dashed #D1D5DB; 
+      padding: 20px; 
+      text-align: center; 
+      border-radius: 8px; 
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #F9FAFB;
+      transition: all 0.2s ease;
+    }
+    .quick-form-image-upload:hover { 
+      border-color: #6366F1;
+      background: #F3F4F6;
+    }
+    .quick-form-image-preview { 
+      max-width: 100%;
+      margin-top: 10px;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    
+    .quick-form-picture-select {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      margin-top: 8px;
+    }
+    .quick-form-picture-option {
+      border: 2px solid #D1D5DB;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      position: relative;
+    }
+    .quick-form-picture-option:hover {
+      border-color: #6366F1;
+      transform: translateY(-2px);
+    }
+    .quick-form-picture-option.selected {
+      border-color: #6366F1;
+      background: #F3F4F6;
+    }
+    .quick-form-picture-option img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+    }
+    .quick-form-picture-option .label {
+      padding: 8px;
+      text-align: center;
+      font-weight: 500;
+      color: #4B5563;
+    }
+    
+    /* Dual Image Upload */
+    .quick-form-dual-image {
+      display: flex;
+      gap: 16px;
+      margin-top: 8px;
+    }
+    .quick-form-dual-image-side {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .quick-form-dual-image-upload { 
+      border: 2px dashed #D1D5DB; 
+      padding: 20px; 
+      text-align: center; 
+      border-radius: 8px; 
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #F9FAFB;
+      transition: all 0.2s ease;
+      min-height: 200px;
+    }
+    .quick-form-dual-image-upload:hover { 
+      border-color: #6366F1;
+      background: #F3F4F6;
+    }
+    .quick-form-dual-image-preview { 
+      max-width: 100%;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      display: none;
+    }
+    .quick-form-dual-image-label {
+      font-weight: 500;
+      color: #4B5563;
+      font-size: 14px;
+    }
+  `;
+}
diff --git a/src/lib/styles/embed/index.ts b/src/lib/styles/embed/index.ts
new file mode 100644
index 0000000..3ea1c37
--- /dev/null
+++ b/src/lib/styles/embed/index.ts
@@ -0,0 +1,24 @@
+import { getBaseStyles } from './base';
+import { getInputStyles } from './inputs';
+import { getRatingStyles } from './rating';
+import { getImageStyles } from './images';
+import { getLayoutStyles } from './layout';
+
+export function getAllStyles(): string {
+  const styles = [
+    getBaseStyles(),
+    getInputStyles(),
+    getRatingStyles(),
+    getImageStyles(),
+    getLayoutStyles()
+  ];
+  
+  // Join styles and escape any problematic characters
+  return styles
+    .join('\n')
+    .replace(/\\/g, '\\\\')
+    .replace(/`/g, '\\`')
+    .replace(/\$/g, '\\$');
+}
+
+export { getBaseStyles, getInputStyles, getRatingStyles, getImageStyles, getLayoutStyles };
diff --git a/src/lib/styles/embed/inputs.ts b/src/lib/styles/embed/inputs.ts
new file mode 100644
index 0000000..61cbe8a
--- /dev/null
+++ b/src/lib/styles/embed/inputs.ts
@@ -0,0 +1,43 @@
+export function getInputStyles(): string {
+  return `
+    .quick-form-input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid #D1D5DB;
+      border-radius: 6px;
+      font-size: 14px;
+      line-height: 1.5;
+      transition: border-color 0.15s ease-in-out;
+    }
+    .quick-form-input:focus {
+      outline: none;
+      border-color: #6366f1;
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+    .quick-form-input::placeholder {
+      color: #9CA3AF;
+    }
+    
+    .quick-form-checkbox-wrapper { display: flex; align-items: center; gap: 8px; }
+    .quick-form-checkbox { 
+      width: 16px; 
+      height: 16px; 
+      border: 2px solid #D1D5DB;
+      border-radius: 4px;
+      cursor: pointer;
+      appearance: none;
+      background-color: white;
+    }
+    .quick-form-checkbox:checked {
+      background-color: #6366f1;
+      border-color: #6366f1;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+    .quick-form-checkbox:hover { border-color: #6366f1; }
+    .quick-form-checkbox:focus { 
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px #E0E7FF;
+    }
+  `;
+}
diff --git a/src/lib/styles/embed/layout.ts b/src/lib/styles/embed/layout.ts
new file mode 100644
index 0000000..f39f3bd
--- /dev/null
+++ b/src/lib/styles/embed/layout.ts
@@ -0,0 +1,16 @@
+export function getLayoutStyles(): string {
+  return `
+    .quick-form-two-column {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      margin-top: 16px;
+    }
+    
+    .quick-form-column {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  `;
+}
diff --git a/src/lib/styles/embed/rating.ts b/src/lib/styles/embed/rating.ts
new file mode 100644
index 0000000..4480796
--- /dev/null
+++ b/src/lib/styles/embed/rating.ts
@@ -0,0 +1,44 @@
+export function getRatingStyles(): string {
+  return `
+    .quick-form-rating-scale { 
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    .quick-form-rating-buttons {
+      display: flex;
+      gap: 8px;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .quick-form-rating-button {
+      width: 40px;
+      height: 40px;
+      border: 2px solid #D1D5DB;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      background: white;
+      transition: all 0.2s ease;
+      font-weight: 500;
+    }
+    .quick-form-rating-button:hover {
+      transform: translateY(-2px);
+      border-color: #6366F1;
+    }
+    .quick-form-rating-button.selected {
+      background: #6366F1;
+      border-color: #6366F1;
+      color: white;
+    }
+    .quick-form-rating-labels {
+      display: flex;
+      justify-content: space-between;
+      color: #6B7280;
+      font-size: 14px;
+    }
+  `;
+}

From 694a547f12c156458ead3627ef408701494f4523 Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Fri, 31 Jan 2025 16:02:44 +0100
Subject: [PATCH 36/40] Added all fields to the embedded form and preview

---
 src/app/api/embed/[formId]/js/route.ts | 156 ++++++++++++++++++++++++-
 src/lib/styles/embed/images.ts         |  63 ++++++++++
 src/lib/styles/embed/inputs.ts         |  28 +++--
 3 files changed, 233 insertions(+), 14 deletions(-)

diff --git a/src/app/api/embed/[formId]/js/route.ts b/src/app/api/embed/[formId]/js/route.ts
index a25cccc..a982118 100644
--- a/src/app/api/embed/[formId]/js/route.ts
+++ b/src/app/api/embed/[formId]/js/route.ts
@@ -225,6 +225,154 @@ export async function GET(
             return imageWrapper;
           }
           
+          case 'ImageUploadField': {
+            const { label, helperText, required } = element.extraAttributes;
+            const wrapper = createWrapper();
+            if (label) wrapper.appendChild(createLabel(label));
+            
+            const uploadWrapper = createElement('div', 'quick-form-upload');
+            const input = createInput('file', element.id, required);
+            input.accept = 'image/*';
+            
+            const preview = createElement('div', 'quick-form-image-preview');
+            input.onchange = function(e) {
+              const target = e.target;
+              const file = target && target.files ? target.files[0] : null;
+              if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                  const target = e.target;
+                  preview.innerHTML = '';
+                  const img = createElement('img');
+                  img.src = target ? target.result : '';
+                  preview.appendChild(img);
+                };
+                reader.readAsDataURL(file);
+              }
+            };
+            
+            uploadWrapper.appendChild(input);
+            uploadWrapper.appendChild(preview);
+            wrapper.appendChild(uploadWrapper);
+            if (helperText) wrapper.appendChild(createHelperText(helperText));
+            return wrapper;
+          }
+
+          case 'DualImageUpload': {
+            const { label, helperText, required } = element.extraAttributes;
+            const wrapper = createWrapper();
+            if (label) wrapper.appendChild(createLabel(label));
+            
+            const uploadsWrapper = createElement('div', 'quick-form-dual-upload');
+            
+            // First upload
+            const upload1 = createElement('div', 'quick-form-upload');
+            const input1 = createInput('file', element.id + '_1', required);
+            input1.accept = 'image/*';
+            const preview1 = createElement('div', 'quick-form-image-preview');
+            input1.onchange = function(e) {
+              const target = e.target;
+              const file = target && target.files ? target.files[0] : null;
+              if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                  const target = e.target;
+                  preview1.innerHTML = '';
+                  const img = createElement('img');
+                  img.src = target ? target.result : '';
+                  preview1.appendChild(img);
+                };
+                reader.readAsDataURL(file);
+              }
+            };
+            upload1.appendChild(input1);
+            upload1.appendChild(preview1);
+            
+            // Second upload
+            const upload2 = createElement('div', 'quick-form-upload');
+            const input2 = createInput('file', element.id + '_2', required);
+            input2.accept = 'image/*';
+            const preview2 = createElement('div', 'quick-form-image-preview');
+            input2.onchange = function(e) {
+              const target = e.target;
+              const file = target && target.files ? target.files[0] : null;
+              if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                  const target = e.target;
+                  preview2.innerHTML = '';
+                  const img = createElement('img');
+                  img.src = target ? target.result : '';
+                  preview2.appendChild(img);
+                };
+                reader.readAsDataURL(file);
+              }
+            };
+            upload2.appendChild(input2);
+            upload2.appendChild(preview2);
+            
+            uploadsWrapper.appendChild(upload1);
+            uploadsWrapper.appendChild(upload2);
+            wrapper.appendChild(uploadsWrapper);
+            if (helperText) wrapper.appendChild(createHelperText(helperText));
+            return wrapper;
+          }
+
+          case 'PictureSelect': {
+            const { label, helperText, required, options } = element.extraAttributes;
+            const wrapper = createWrapper();
+            if (label) wrapper.appendChild(createLabel(label));
+            
+            const optionsWrapper = createElement('div', 'quick-form-picture-select');
+            const hiddenInput = createInput('hidden', element.id, required);
+            
+            options.forEach((option, index) => {
+              const optionWrapper = createElement('div', 'quick-form-picture-option');
+              const img = createElement('img');
+              img.src = option.base64Image;
+              img.alt = option.label || 'Option ' + (index + 1);
+              
+              optionWrapper.onclick = function() {
+                // Remove selected class from all options
+                const allOptions = optionsWrapper.getElementsByClassName('quick-form-picture-option');
+                Array.from(allOptions).forEach(opt => opt.classList.remove('selected'));
+                // Add selected class to clicked option
+                optionWrapper.classList.add('selected');
+                // Update hidden input
+                hiddenInput.value = option.value || index.toString();
+              };
+              
+              if (option.label) {
+                const label = createElement('div', 'quick-form-picture-label', option.label);
+                optionWrapper.appendChild(label);
+              }
+              
+              optionWrapper.appendChild(img);
+              optionsWrapper.appendChild(optionWrapper);
+            });
+            
+            optionsWrapper.appendChild(hiddenInput);
+            wrapper.appendChild(optionsWrapper);
+            if (helperText) wrapper.appendChild(createHelperText(helperText));
+            return wrapper;
+          }
+
+          case 'CheckboxField': {
+            const { label, helperText, required } = element.extraAttributes;
+            const wrapper = createWrapper();
+            
+            const checkboxWrapper = createElement('div', 'quick-form-checkbox');
+            const input = createInput('checkbox', element.id, required);
+            const labelEl = createLabel(label);
+            
+            checkboxWrapper.appendChild(input);
+            checkboxWrapper.appendChild(labelEl);
+            wrapper.appendChild(checkboxWrapper);
+            
+            if (helperText) wrapper.appendChild(createHelperText(helperText));
+            return wrapper;
+          }
+          
           default:
             console.warn('Unknown element type:', element.type);
             return null;
@@ -288,11 +436,11 @@ export async function GET(
 
     return new NextResponse(bundleScript, {
       headers: {
-        'Content-Type': 'application/javascript',
-      },
+        'Content-Type': 'application/javascript'
+      }
     });
   } catch (error) {
-    console.error("Error generating form bundle:", error);
-    return new NextResponse("Error generating form bundle", { status: 500 });
+    console.error('Error generating form bundle:', error);
+    return new NextResponse('Error generating form bundle', { status: 500 });
   }
 }
\ No newline at end of file
diff --git a/src/lib/styles/embed/images.ts b/src/lib/styles/embed/images.ts
index 9abdfb4..26e2f8a 100644
--- a/src/lib/styles/embed/images.ts
+++ b/src/lib/styles/embed/images.ts
@@ -97,5 +97,68 @@ export function getImageStyles(): string {
       color: #4B5563;
       font-size: 14px;
     }
+
+    .quick-form-upload {
+      border: 2px dashed #ccc;
+      border-radius: 4px;
+      padding: 20px;
+      text-align: center;
+      margin-bottom: 10px;
+    }
+
+    .quick-form-image-preview {
+      margin-top: 10px;
+      max-width: 100%;
+      overflow: hidden;
+    }
+
+    .quick-form-image-preview img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+
+    .quick-form-dual-upload {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    .quick-form-picture-select {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 15px;
+      margin-top: 10px;
+    }
+
+    .quick-form-picture-option {
+      border: 2px solid #e5e7eb;
+      border-radius: 8px;
+      padding: 10px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .quick-form-picture-option:hover {
+      border-color: #6b7280;
+    }
+
+    .quick-form-picture-option.selected {
+      border-color: #2563eb;
+      background-color: #eff6ff;
+    }
+
+    .quick-form-picture-option img {
+      width: 100%;
+      height: auto;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+
+    .quick-form-picture-label {
+      text-align: center;
+      font-size: 0.875rem;
+      color: #4b5563;
+    }
   `;
 }
diff --git a/src/lib/styles/embed/inputs.ts b/src/lib/styles/embed/inputs.ts
index 61cbe8a..46f4f76 100644
--- a/src/lib/styles/embed/inputs.ts
+++ b/src/lib/styles/embed/inputs.ts
@@ -19,22 +19,30 @@ export function getInputStyles(): string {
     }
     
     .quick-form-checkbox-wrapper { display: flex; align-items: center; gap: 8px; }
-    .quick-form-checkbox { 
-      width: 16px; 
-      height: 16px; 
-      border: 2px solid #D1D5DB;
-      border-radius: 4px;
+    .quick-form-checkbox {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+    .quick-form-checkbox input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      margin: 0;
+      cursor: pointer;
+    }
+    .quick-form-checkbox label {
+      margin: 0;
       cursor: pointer;
-      appearance: none;
-      background-color: white;
+      user-select: none;
     }
-    .quick-form-checkbox:checked {
+    .quick-form-checkbox input[type="checkbox"]:checked {
       background-color: #6366f1;
       border-color: #6366f1;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
     }
-    .quick-form-checkbox:hover { border-color: #6366f1; }
-    .quick-form-checkbox:focus { 
+    .quick-form-checkbox input[type="checkbox"]:hover { border-color: #6366f1; }
+    .quick-form-checkbox input[type="checkbox"]:focus { 
       outline: 2px solid transparent;
       outline-offset: 2px;
       box-shadow: 0 0 0 2px #E0E7FF;

From 96b86162886be2d27b4f26251c544c13a720dea9 Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Fri, 31 Jan 2025 17:41:18 +0100
Subject: [PATCH 37/40] Starting on multi-page. Designer and preview work great

---
 .../migration.sql                             |  17 ++
 prisma/schema.prisma                          |  34 ++-
 src/action/form.ts                            |  89 +++++--
 src/app/layout.tsx                            |  31 +--
 src/components/Designer.tsx                   | 225 +++++++++++-------
 src/components/FormBuilder.tsx                | 127 ++++++----
 src/components/FormSettings.tsx               | 175 ++++++++++++--
 src/components/PageNavigation.tsx             |  83 +++++++
 src/components/PreviewDialogBtn.tsx           | 114 ++++++++-
 src/components/PropertiesFormSidebar.tsx      |  68 +++---
 src/components/SaveFormBtn.tsx                |  43 +++-
 src/context/DesignerContext.tsx               | 201 ++++++++++++----
 12 files changed, 912 insertions(+), 295 deletions(-)
 create mode 100644 prisma/migrations/20250131151448_add_multi_page_support/migration.sql
 create mode 100644 src/components/PageNavigation.tsx

diff --git a/prisma/migrations/20250131151448_add_multi_page_support/migration.sql b/prisma/migrations/20250131151448_add_multi_page_support/migration.sql
new file mode 100644
index 0000000..93b60f5
--- /dev/null
+++ b/prisma/migrations/20250131151448_add_multi_page_support/migration.sql
@@ -0,0 +1,17 @@
+-- AlterTable
+ALTER TABLE "Form" ADD COLUMN     "isMultiPage" BOOLEAN NOT NULL DEFAULT false,
+ALTER COLUMN "description" DROP NOT NULL;
+
+-- CreateTable
+CREATE TABLE "Page" (
+    "id" SERIAL NOT NULL,
+    "formId" INTEGER NOT NULL,
+    "order" INTEGER NOT NULL,
+    "elements" TEXT NOT NULL DEFAULT '[]',
+    "config" TEXT NOT NULL DEFAULT '{}',
+
+    CONSTRAINT "Page_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Page" ADD CONSTRAINT "Page_formId_fkey" FOREIGN KEY ("formId") REFERENCES "Form"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index f3f3a43..6b69e63 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -9,19 +9,20 @@ datasource db {
 }
 
 model Form {
-  id              Int               @id @default(autoincrement())
-  userId          String
-  createdAt       DateTime          @default(now())
-  published       Boolean           @default(false)
-  name            String
-  description     String            @default("")
-  content         String            @default("[]")
-  visits          Int               @default(0)
-  submissions     Int               @default(0)
-  shareURL        String            @unique @default(uuid())
-  theme           String            @default("default")
+  id            Int       @id @default(autoincrement())
+  userId        String
+  createdAt     DateTime  @default(now())
+  published     Boolean   @default(false)
+  name          String
+  description   String?   @default("")
+  content       String    @default("[]")
+  visits        Int       @default(0)
+  submissions   Int       @default(0)
+  shareURL      String    @unique @default(uuid())
+  theme         String    @default("default")
+  isMultiPage   Boolean   @default(false)
+  pages         Page[]    @relation("FormToPages")
   FormSubmissions FormSubmissions[]
-
   @@unique([name, userId])
   @@index([userId, id])
 }
@@ -33,3 +34,12 @@ model FormSubmissions {
   content   String
   form      Form     @relation(fields: [formId], references: [id])
 }
+
+model Page {
+  id          Int     @id @default(autoincrement())
+  form        Form    @relation("FormToPages", fields: [formId], references: [id])
+  formId      Int
+  order       Int
+  elements    String  @default("[]")
+  config      String  @default("{}")
+}
diff --git a/src/action/form.ts b/src/action/form.ts
index 96bd93f..94c3e5c 100644
--- a/src/action/form.ts
+++ b/src/action/form.ts
@@ -3,6 +3,34 @@
 import prisma from "@/lib/prisma";
 import { formSchema, formSchemaType } from "@/schemas/form";
 import { currentUser } from "@clerk/nextjs";
+import { PageConfig } from "@/context/DesignerContext";
+import { z } from "zod";
+import { Form } from "@prisma/client";
+
+export type FullForm = Form & {
+  pages: Page[];
+};
+
+export type Page = {
+  elements: string;
+  config: string;
+  order: number;
+};
+
+const pageSchema = z.object({
+  elements: z.string(),
+  config: z.string(),
+  order: z.number(),
+});
+
+const updateFormSchema = z.object({
+  id: z.number(),
+  content: z.string(),
+  isMultiPage: z.boolean(),
+  pages: z.array(pageSchema),
+});
+
+export type UpdateFormInput = z.infer<typeof updateFormSchema>;
 
 class UserNotFoundErr extends Error {}
 
@@ -145,39 +173,62 @@ export async function GetForms() {
   });
 }
 
-export async function GetFormById(id: number) {
+export async function GetFormById(id: number): Promise<FullForm | null> {
+  const form = await prisma.form.findUnique({
+    where: { id },
+    include: {
+      pages: {
+        orderBy: {
+          order: 'asc'
+        }
+      }
+    }
+  });
+
+  if (!form) return null;
+
+  return form;
+}
+
+export async function UpdateFormContent(input: UpdateFormInput) {
+  console.log('Received form data:', input); // Debug log
+  
+  const validation = updateFormSchema.safeParse(input);
+  if (!validation.success) {
+    console.error('Validation error:', validation.error); // Debug log
+    throw new Error('Invalid form data');
+  }
+
   const user = await currentUser();
   if (!user) {
     throw new UserNotFoundErr();
   }
 
-  return await prisma.form.findFirst({
-    where: {
-      id,
-      userId: user.id,
-    },
-  });
-}
+  const { id, content, isMultiPage, pages } = input;
 
-export async function UpdateFormContent(id: number, jsonContent: string, theme?: string) {
   try {
-    const user = await currentUser();
-    if (!user) {
-      throw new UserNotFoundErr();
-    }
-
-    return await prisma.form.update({
+    const form = await prisma.form.update({
       where: {
-        userId: user.id,
         id,
+        userId: user.id,
       },
       data: {
-        content: jsonContent,
-        ...(theme && { theme }),
+        content,
+        isMultiPage,
+        pages: {
+          deleteMany: {},
+          create: pages,
+        },
       },
+      include: {
+        pages: true
+      }
     });
+
+    console.log('Updated form:', form); // Debug log
+    return form;
   } catch (error) {
-    console.error('Error in UpdateFormContent:', error);
+    console.error('Database error:', error); // Debug log
     throw error;
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7da9e29..0ad68ce 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,36 +5,37 @@ import { ThemeProvider } from "@/providers/ThemeProvider";
 const poppins = Poppins({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700", "800",] });
 import NextTopLoader from 'nextjs-toploader'
 import { ClerkProvider } from "@clerk/nextjs";
-import DesignerContextProvider from "@/context/DesignerContext";
+import { DesignerContextProvider } from "@/context/DesignerContext";
 import { Toaster } from "@/components/ui/toaster";
 
 export const metadata: Metadata = {
-  title: "QuickForm - Build Custom Forms with Drag and Drop",
-  description: "Create your custom forms effortlessly with QuickForm. Simply drag and drop elements to generate tailored forms for your needs.",
+  title: "Quick Form Builder",
+  description: "Create forms quickly and easily",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <ClerkProvider>
-      <html lang="en">
-        <head>
-          <link rel="shortcut icon" href="/logo.svg" type="image/x-icon" />
-        </head>
-        <body className={poppins.className}>
-          <NextTopLoader color="#884DEE" crawlSpeed={200}
+      <html lang="en" className={poppins.className}>
+        <body>
+          <NextTopLoader
+            color="#2299DD"
+            initialPosition={0.08}
+            crawlSpeed={200}
+            showSpinner={true}
             height={4}
             crawl={true}
             easing="ease" />
-          <DesignerContextProvider>
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+            <DesignerContextProvider>
               {children}
               <Toaster />
-            </ThemeProvider>
-          </DesignerContextProvider>
+            </DesignerContextProvider>
+          </ThemeProvider>
         </body>
       </html>
     </ClerkProvider>
diff --git a/src/components/Designer.tsx b/src/components/Designer.tsx
index 55455b8..188b037 100644
--- a/src/components/Designer.tsx
+++ b/src/components/Designer.tsx
@@ -10,9 +10,22 @@ import { Button } from "./ui/button";
 import { BiSolidTrash } from "react-icons/bi";
 import useDesigner from "@/hooks/useDesigner";
 import { formThemes } from "@/schemas/form";
+import PageNavigation from "./PageNavigation";
 
 function Designer() {
-    const { elements, addElement, selectedElement, setSelectedElement, removeElement, theme, updateElement } = useDesigner();
+    const { 
+        elements, 
+        addElement, 
+        selectedElement, 
+        setSelectedElement, 
+        removeElement, 
+        theme, 
+        updateElement,
+        isMultiPage,
+        pages,
+        currentPage,
+        setPages
+    } = useDesigner();
 
     const droppable = useDroppable({
         id: "designer-drop-area",
@@ -37,7 +50,22 @@ function Designer() {
                 const type = active.data?.current?.type;
                 const newElement = FormElements[type as ElementsType].construct(idGenerator());
 
-                addElement(elements.length, newElement);
+                if (isMultiPage) {
+                    const updatedPages = [...pages];
+                    if (!updatedPages[currentPage]) {
+                        updatedPages[currentPage] = {
+                            elements: [],
+                            config: {
+                                navigationType: 'tabs',
+                                showPageNumbers: true
+                            }
+                        };
+                    }
+                    updatedPages[currentPage].elements.push(newElement);
+                    setPages(updatedPages);
+                } else {
+                    addElement(elements.length, newElement);
+                }
                 return;
             }
 
@@ -50,42 +78,28 @@ function Designer() {
                 // Find the parent TwoColumnLayout element
                 const parentIndex = elements.findIndex((el) => el.id === parentId);
                 if (parentIndex === -1) return;
-                
-                const parent = { ...elements[parentIndex] };
-                const isDesignerElement = active.data?.current?.isDesignerElement;
-                
-                let elementToAdd;
-                if (isDesignerElement) {
-                    // Moving an existing element
-                    const activeId = active.data?.current?.elementId;
-                    const activeElementIndex = elements.findIndex((el) => el.id === activeId);
-                    if (activeElementIndex === -1) return;
-                    
-                    elementToAdd = { ...elements[activeElementIndex] };
-                    // Remove from main elements array if it's there
-                    removeElement(activeId);
-                    
-                    // Also remove from other columns if it exists there
-                    const otherColumn = columnId === 'left' ? 'rightColumn' : 'leftColumn';
-                    if (parent.type === 'TwoColumnLayoutField' && parent.extraAttributes?.[otherColumn]) {
-                        parent.extraAttributes[otherColumn] = (parent.extraAttributes[otherColumn] as FormElementInstance[]).filter(
-                            (el: FormElementInstance) => el.id !== activeId
-                        );
-                    }
-                } else {
-                    // Creating a new element from sidebar
-                    elementToAdd = FormElements[type as ElementsType].construct(idGenerator());
-                }
-                
-                // Add to the appropriate column
-                const column = columnId === 'left' ? 'leftColumn' : 'rightColumn';
-                if (parent.type === 'TwoColumnLayoutField' && parent.extraAttributes) {
-                    parent.extraAttributes[column] = [...(parent.extraAttributes[column] as FormElementInstance[] || []), elementToAdd];
-                    
-                    // Update the parent element
-                    elements[parentIndex] = parent;
-                    updateElement(parent.id, parent);
-                }
+
+                const parent = elements[parentIndex];
+                if (parent.type !== "TwoColumnLayout") return;
+
+                // Create new element
+                const newElement = FormElements[type as ElementsType].construct(idGenerator());
+
+                // Update the appropriate column
+                const updatedColumns = { ...parent.extraAttributes.columns };
+                updatedColumns[columnId] = [...updatedColumns[columnId], newElement];
+
+                // Update the parent element
+                const updatedParent = {
+                    ...parent,
+                    extraAttributes: {
+                        ...parent.extraAttributes,
+                        columns: updatedColumns,
+                    },
+                };
+
+                // Update elements array
+                updateElement(parentId, updatedParent);
                 return;
             }
 
@@ -115,7 +129,22 @@ function Designer() {
                     indexForNewElement = overElementIndex + 1;
                 }
 
-                addElement(indexForNewElement, newElement);
+                if (isMultiPage) {
+                    const updatedPages = [...pages];
+                    if (!updatedPages[currentPage]) {
+                        updatedPages[currentPage] = {
+                            elements: [],
+                            config: {
+                                navigationType: 'tabs',
+                                showPageNumbers: true
+                            }
+                        };
+                    }
+                    updatedPages[currentPage].elements.splice(indexForNewElement, 0, newElement);
+                    setPages(updatedPages);
+                } else {
+                    addElement(indexForNewElement, newElement);
+                }
                 return;
             }
 
@@ -145,42 +174,80 @@ function Designer() {
                     indexForNewElement = overElementIndex + 1;
                 }
 
-                addElement(indexForNewElement, activeElement);
+                if (isMultiPage) {
+                    const updatedPages = [...pages];
+                    if (!updatedPages[currentPage]) {
+                        updatedPages[currentPage] = {
+                            elements: [],
+                            config: {
+                                navigationType: 'tabs',
+                                showPageNumbers: true
+                            }
+                        };
+                    }
+                    updatedPages[currentPage].elements.splice(indexForNewElement, 0, activeElement);
+                    setPages(updatedPages);
+                } else {
+                    addElement(indexForNewElement, activeElement);
+                }
             }
         },
     });
 
+    const handleRemoveElement = (id: string) => {
+        if (isMultiPage) {
+            const updatedPages = [...pages];
+            updatedPages[currentPage].elements = updatedPages[currentPage].elements.filter(
+                element => element.id !== id
+            );
+            setPages(updatedPages);
+        } else {
+            removeElement(id);
+        }
+    };
+
     return (
         <div className="flex w-full h-full">
-            <div
-                className="p-4 w-full"
-                onClick={() => {
-                    if (selectedElement) setSelectedElement(null);
-                }}
-            >
+            <div className="p-4 w-full">
+                <PageNavigation />
                 <div
                     ref={droppable.setNodeRef}
                     className={cn(
-                        formThemes[theme].styles.background,
-                        formThemes[theme].styles.text,
-                        formThemes[theme].styles.border,
-                        "max-w-[920px] h-full m-auto rounded-xl flex flex-col flex-grow items-center justify-start flex-1 overflow-y-auto border",
-                        droppable.isOver && "ring-4 ring-primary ring-inset",
+                        "bg-background h-full m-auto rounded-xl flex flex-col flex-grow items-center justify-start flex-1 overflow-y-auto max-w-[620px]",
+                        droppable.isOver && "ring-2 ring-primary/20",
+                        theme && formThemes[theme]
                     )}
                 >
-                    {!droppable.isOver && elements.length === 0 && (
-                        <p className={cn("text-3xl font-bold flex flex-grow items-center", formThemes[theme].styles.muted)}>Drop here</p>
+                    {!droppable.isOver && (isMultiPage ? pages[currentPage]?.elements.length === 0 : elements.length === 0) && (
+                        <p className="text-3xl text-muted-foreground flex flex-grow items-center font-bold">
+                            Drop elements here
+                        </p>
                     )}
 
-                    {droppable.isOver && elements.length === 0 && (
+                    {droppable.isOver && (
                         <div className="p-4 w-full">
                             <div className="h-[120px] rounded-md bg-primary/20"></div>
                         </div>
                     )}
-                    {elements.length > 0 && (
-                        <div className="flex flex-col w-full gap-2 p-4">
+
+                    {isMultiPage ? (
+                        <div className="flex flex-col items-center w-full max-w-[500px] mx-auto p-8">
+                            {pages[currentPage]?.elements.map((element) => (
+                                <DesignerElementWrapper
+                                    key={element.id}
+                                    element={element}
+                                    onRemove={() => handleRemoveElement(element.id)}
+                                />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="flex flex-col items-center w-full max-w-[500px] mx-auto p-8">
                             {elements.map((element) => (
-                                <DesignerElementWrapper key={element.id} element={element} />
+                                <DesignerElementWrapper
+                                    key={element.id}
+                                    element={element}
+                                    onRemove={() => handleRemoveElement(element.id)}
+                                />
                             ))}
                         </div>
                     )}
@@ -191,16 +258,17 @@ function Designer() {
     );
 }
 
-export function DesignerElementWrapper({ element }: { element: FormElementInstance }) {
-    const { removeElement, selectedElement, setSelectedElement, updateElement } = useDesigner();
+function DesignerElementWrapper({ element, onRemove }: { element: FormElementInstance; onRemove: () => void }) {
+    const { setSelectedElement, selectedElement } = useDesigner();
 
     const [mouseIsOver, setMouseIsOver] = useState<boolean>(false);
+
     const topHalf = useDroppable({
         id: element.id + "-top",
         data: {
             type: element.type,
             elementId: element.id,
-            isTopHalfDesignerElement: true,
+            isTopHalfDroppable: true,
         },
     });
 
@@ -209,7 +277,7 @@ export function DesignerElementWrapper({ element }: { element: FormElementInstan
         data: {
             type: element.type,
             elementId: element.id,
-            isBottomHalfDesignerElement: true,
+            isBottomHalfDroppable: true,
         },
     });
 
@@ -222,28 +290,25 @@ export function DesignerElementWrapper({ element }: { element: FormElementInstan
         },
     });
 
-    if (draggable.isDragging) return null; // temporary remove the element from designer
+    if (draggable.isDragging) return null;
 
     const DesignerElement = FormElements[element.type].designerComponent;
+
     return (
         <div
             ref={draggable.setNodeRef}
             {...draggable.listeners}
             {...draggable.attributes}
-            className="relative min-h-[100px] flex flex-col text-foreground hover:cursor-pointer rounded-md ring-1 ring-accent ring-inset"
-            onMouseEnter={() => {
-                setMouseIsOver(true);
-            }}
-            onMouseLeave={() => {
-                setMouseIsOver(false);
-            }}
+            className="relative h-[120px] w-full hover:cursor-pointer rounded-md ring-1 ring-accent ring-inset mb-4"
+            onMouseEnter={() => setMouseIsOver(true)}
+            onMouseLeave={() => setMouseIsOver(false)}
             onClick={(e) => {
                 e.stopPropagation();
                 setSelectedElement(element);
             }}
         >
             <div ref={topHalf.setNodeRef} className="absolute w-full h-1/2 rounded-t-md" />
-            <div ref={bottomHalf.setNodeRef} className="absolute  w-full bottom-0 h-1/2 rounded-b-md" />
+            <div ref={bottomHalf.setNodeRef} className="absolute w-full bottom-0 h-1/2 rounded-b-md" />
             {mouseIsOver && (
                 <>
                     <div className="absolute right-0 h-full">
@@ -251,30 +316,30 @@ export function DesignerElementWrapper({ element }: { element: FormElementInstan
                             className="flex justify-center h-full border rounded-md rounded-l-none bg-red-500"
                             variant={"outline"}
                             onClick={(e) => {
-                                e.stopPropagation(); // avoid selection of element while deleting
-                                removeElement(element.id);
+                                e.stopPropagation();
+                                onRemove();
                             }}
                         >
                             <BiSolidTrash className="h-6 w-6" />
                         </Button>
                     </div>
                     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse">
-                        <p className="text-muted-foreground text-sm">Click for properties or drag to move</p>
+                        <p className="text-muted-foreground text-sm">Click to edit properties or drag to move</p>
                     </div>
                 </>
             )}
-            {topHalf.isOver && <div className="absolute top-0 w-full rounded-md h-[7px] bg-primary rounded-b-none" />}
+            {topHalf.isOver && <div className="absolute top-0 w-full h-[7px] rounded-md bg-primary" />}
             <div
                 className={cn(
-                    "flex w-full min-h-[40px] items-center rounded-md px-4 py-2 pointer-events-none",
-                    mouseIsOver && "opacity-30",
-                    selectedElement?.id === element.id && "ring-2 ring-primary ring-inset",
-                    !mouseIsOver && !selectedElement?.id && "hover:ring-2 hover:ring-accent ring-inset"
+                    "flex w-full h-[120px] items-center rounded-md bg-accent/40 px-4 py-2 pointer-events-none",
+                    mouseIsOver && "opacity-30"
                 )}
             >
-                <DesignerElement elementInstance={element} />
+                <div className="flex flex-col w-full items-center">
+                    <DesignerElement elementInstance={element} />
+                </div>
             </div>
-            {bottomHalf.isOver && <div className="absolute bottom-0 w-full rounded-md h-[7px] bg-primary rounded-t-none" />}
+            {bottomHalf.isOver && <div className="absolute bottom-0 w-full h-[7px] rounded-md bg-primary" />}
         </div>
     );
 }
diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index 6e0705c..e61eea8 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -21,9 +21,23 @@ import useDesigner from "@/hooks/useDesigner";
 import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
 import { formThemes } from "@/schemas/form";
 import { ElementsType, FormElement, FormElementInstance, FormElements } from "./FormElements";
+import { GetFormById } from "@/action/form";
+import { PageConfig } from "@/context/DesignerContext";
 
 function FormBuilder({ form }: { form: Form }) {
-  const { setElements, setSelectedElement, setTheme } = useDesigner();
+  const { 
+    setElements, 
+    setSelectedElement, 
+    setTheme,
+    setIsMultiPage,
+    setPages,
+    setCurrentPage,
+    isMultiPage,
+    pages,
+    currentPage,
+    elements 
+  } = useDesigner();
+
   const [isReady, setIsReady] = useState(false);
 
   const [isSmallScreen, setIsSmallScreen] = useState(false);
@@ -63,58 +77,69 @@ function FormBuilder({ form }: { form: Form }) {
   const sensors = useSensors(mouseSensor, touchSensor);
 
   useEffect(() => {
-    if (isReady) return;
-    const elements = JSON.parse(form.content) as FormElementInstance[];
-    
-    // Initialize theme from form
-    setTheme((form.theme || "default") as keyof typeof formThemes);
-    
-    // Reconstruct form elements properly
-    const reconstructedElements = elements.map((element: FormElementInstance) => {
-      const elementType = element.type as ElementsType;
-      // For TwoColumnLayoutField, we need to reconstruct the column elements
-      if (elementType === 'TwoColumnLayoutField') {
-        const reconstructedElement = FormElements[elementType].construct(element.id);
-        const typedElement = element as FormElementInstance & {
-          extraAttributes: {
-            leftColumn: FormElementInstance[];
-            rightColumn: FormElementInstance[];
-            gap: string;
-          }
-        };
+    const fetchFormData = async () => {
+      const loadedForm = await GetFormById(form.id);
+      if (!loadedForm) return;
+
+      setIsMultiPage(loadedForm.isMultiPage);
+      
+      if (loadedForm.isMultiPage && loadedForm.pages?.length > 0) {
+        const sortedPages = loadedForm.pages
+          .sort((a, b) => a.order - b.order)
+          .map(page => ({
+            elements: JSON.parse(page.elements) as FormElementInstance[],
+            config: JSON.parse(page.config) as PageConfig['config']
+          }));
         
-        reconstructedElement.extraAttributes = {
-          ...element.extraAttributes,
-          gap: typedElement.extraAttributes.gap || "4",
-          leftColumn: typedElement.extraAttributes.leftColumn.map((colElement: FormElementInstance) => {
-            const colType = colElement.type as ElementsType;
-            return {
-              ...FormElements[colType].construct(colElement.id),
-              extraAttributes: colElement.extraAttributes
+        setPages(sortedPages);
+        setCurrentPage(0);
+      } else {
+        const elements = JSON.parse(loadedForm.content) as FormElementInstance[];
+        setTheme((loadedForm.theme || "default") as keyof typeof formThemes);
+        
+        const reconstructedElements = elements.map(element => {
+          const elementType = element.type as ElementsType;
+          
+          if (elementType === 'TwoColumnLayoutField') {
+            const typedElement = element as FormElementInstance & {
+              extraAttributes: {
+                leftColumn: FormElementInstance[];
+                rightColumn: FormElementInstance[];
+                gap: string;
+              }
             };
-          }),
-          rightColumn: typedElement.extraAttributes.rightColumn.map((colElement: FormElementInstance) => {
-            const colType = colElement.type as ElementsType;
+            
             return {
-              ...FormElements[colType].construct(colElement.id),
-              extraAttributes: colElement.extraAttributes
+              ...FormElements[elementType].construct(element.id),
+              extraAttributes: {
+                ...typedElement.extraAttributes,
+                leftColumn: typedElement.extraAttributes.leftColumn.map(colElement => 
+                  reconstructElement(colElement)
+                ),
+                rightColumn: typedElement.extraAttributes.rightColumn.map(colElement => 
+                  reconstructElement(colElement)
+                )
+              }
             };
-          })
-        };
-        return reconstructedElement;
+          }
+          return reconstructElement(element);
+        });
+
+        setElements(reconstructedElements);
       }
-      // For other elements, just reconstruct normally
-      return {
-        ...FormElements[elementType].construct(element.id),
-        extraAttributes: element.extraAttributes
-      };
-    });
-
-    setElements(reconstructedElements);
-    setSelectedElement(null);
-    const readyTimeout = setTimeout(() => setIsReady(true), 500);
-    return () => clearTimeout(readyTimeout);
-  }, [form, setElements, isReady, setSelectedElement, setTheme]);
+      setIsReady(true);
+    };
+
+    fetchFormData();
+  }, [form?.id, setElements, setSelectedElement, setTheme, setIsMultiPage, setPages, setCurrentPage]);
+
+  const reconstructElement = (element: FormElementInstance) => {
+    const elementType = element.type as ElementsType;
+    return {
+      ...FormElements[elementType].construct(element.id),
+      extraAttributes: element.extraAttributes
+    };
+  };
 
   if (!isReady) {
     return (
@@ -215,7 +240,11 @@ function FormBuilder({ form }: { form: Form }) {
           </div>
         </nav>
         <div className="flex w-full flex-grow items-center justify-center relative overflow-y-auto h-[200px] bg-accent bg-[url(/paper.svg)] dark:bg-[url(/paper-dark.svg)]">
-          <Designer />
+          {isMultiPage ? (
+            <Designer elements={pages[currentPage]?.elements || []} />
+          ) : (
+            <Designer elements={elements} />
+          )}
         </div>
       </main>
       <DragOverlayWrapper />
diff --git a/src/components/FormSettings.tsx b/src/components/FormSettings.tsx
index 246a9a2..8489d91 100644
--- a/src/components/FormSettings.tsx
+++ b/src/components/FormSettings.tsx
@@ -1,37 +1,172 @@
 "use client";
 
-import { formThemes } from "@/schemas/form";
+import { useEffect } from "react";
 import { Label } from "./ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { Switch } from "./ui/switch";
+import { useDesigner } from "@/context/DesignerContext";
+import { formThemes } from "@/schemas/form";
+import { toast } from "./ui/use-toast";
+import { Button } from "./ui/button";
+import { BiPlus } from "react-icons/bi";
+import { Separator } from "./ui/separator";
 
-interface FormSettingsProps {
-  theme: keyof typeof formThemes;
-  onThemeChange: (theme: keyof typeof formThemes) => void;
-}
+function FormSettings() {
+  const { 
+    isMultiPage, 
+    setIsMultiPage, 
+    theme, 
+    setTheme, 
+    setPages,
+    pages,
+    currentPage,
+    setCurrentPage 
+  } = useDesigner();
+
+  const handleMultiPageChange = async (checked: boolean) => {
+    try {
+      console.log('Toggle clicked, changing to:', checked);
+      
+      if (checked) {
+        console.log('Initializing first page');
+        await setPages([{
+          elements: [],
+          config: {
+            navigationType: 'tabs',
+            showPageNumbers: true
+          }
+        }]);
+        await setCurrentPage(0);
+      }
+
+      setIsMultiPage(checked);
+      toast({
+        title: checked ? "Multi-page mode enabled" : "Single-page mode enabled",
+        description: checked ? "Your form now supports multiple pages" : "Your form is now single-page",
+      });
+    } catch (error) {
+      console.error('Error changing multi-page mode:', error);
+      toast({
+        title: "Error",
+        description: "Failed to change form mode",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleAddPage = () => {
+    setPages([...pages, {
+      elements: [],
+      config: {
+        navigationType: pages[0]?.config.navigationType || 'tabs',
+        showPageNumbers: pages[0]?.config.showPageNumbers || true
+      }
+    }]);
+    toast({
+      title: "New page added",
+      description: `Page ${pages.length + 1} has been added to your form`,
+    });
+  };
+
+  const handleNavigationTypeChange = (type: 'tabs' | 'progress-bar') => {
+    setPages(pages.map(page => ({
+      ...page,
+      config: {
+        ...page.config,
+        navigationType: type
+      }
+    })));
+    toast({
+      title: "Navigation style updated",
+      description: `Form navigation changed to ${type}`,
+    });
+  };
+
+  const handleShowPageNumbersChange = (checked: boolean) => {
+    setPages(pages.map(page => ({
+      ...page,
+      config: {
+        ...page.config,
+        showPageNumbers: checked
+      }
+    })));
+    toast({
+      title: checked ? "Page numbers enabled" : "Page numbers disabled",
+      description: checked ? "Page numbers will be shown in the form" : "Page numbers will be hidden",
+    });
+  };
 
-function FormSettings({ theme, onThemeChange }: FormSettingsProps) {
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Label>Form Theme</Label>
-        <Select
-          value={theme}
-          onValueChange={(value) => onThemeChange(value as keyof typeof formThemes)}
-        >
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <Label htmlFor="multi-page" className="text-sm">Multi-page form</Label>
+        <Switch
+          id="multi-page"
+          checked={isMultiPage}
+          onCheckedChange={handleMultiPageChange}
+        />
+      </div>
+
+      {isMultiPage && (
+        <>
+          <Separator />
+          <div className="space-y-4">
+            <div className="flex items-center justify-between gap-4">
+              <Label className="text-sm">Navigation style</Label>
+              <Select 
+                value={pages[0]?.config.navigationType} 
+                onValueChange={(value: 'tabs' | 'progress-bar') => handleNavigationTypeChange(value)}
+              >
+                <SelectTrigger className="w-[130px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="tabs">Tabs</SelectItem>
+                  <SelectItem value="progress-bar">Progress Bar</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between gap-4">
+              <Label htmlFor="show-numbers" className="text-sm">Show page numbers</Label>
+              <Switch
+                id="show-numbers"
+                checked={pages[0]?.config.showPageNumbers}
+                onCheckedChange={handleShowPageNumbersChange}
+              />
+            </div>
+
+            <div className="flex items-center justify-between gap-4">
+              <Label className="text-sm">Pages ({pages.length})</Label>
+              <Button
+                size="sm"
+                variant="outline"
+                className="gap-2"
+                onClick={handleAddPage}
+              >
+                <BiPlus className="h-4 w-4" />
+                Add Page
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+
+      <Separator />
+      <div className="space-y-2">
+        <Label className="text-sm">Theme</Label>
+        <Select value={theme} onValueChange={setTheme}>
           <SelectTrigger>
-            <SelectValue placeholder="Select a theme" />
+            <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            {Object.entries(formThemes).map(([key, theme]) => (
-              <SelectItem key={key} value={key}>
-                {theme.name}
+            {Object.keys(formThemes).map((themeKey) => (
+              <SelectItem key={themeKey} value={themeKey}>
+                {themeKey.charAt(0).toUpperCase() + themeKey.slice(1)}
               </SelectItem>
             ))}
           </SelectContent>
         </Select>
-        <p className="text-muted-foreground text-sm">
-          Choose a theme for your form. This will affect how your form looks when shared.
-        </p>
       </div>
     </div>
   );
diff --git a/src/components/PageNavigation.tsx b/src/components/PageNavigation.tsx
new file mode 100644
index 0000000..c00dde9
--- /dev/null
+++ b/src/components/PageNavigation.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useDesigner } from "@/context/DesignerContext";
+import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
+import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
+
+export default function PageNavigation() {
+  const { pages, currentPage, setCurrentPage, isMultiPage } = useDesigner();
+
+  if (!isMultiPage) return null;
+
+  const handlePageChange = (pageIndex: number) => {
+    setCurrentPage(pageIndex);
+  };
+
+  const navigationType = pages[0]?.config.navigationType || 'tabs';
+  const showPageNumbers = pages[0]?.config.showPageNumbers || true;
+
+  if (navigationType === 'tabs') {
+    return (
+      <div className="flex items-center gap-2 justify-center mb-4 bg-muted/50 p-2 rounded-md">
+        {pages.map((_, index) => (
+          <Button
+            key={index}
+            variant={currentPage === index ? "default" : "ghost"}
+            size="sm"
+            onClick={() => handlePageChange(index)}
+            className={cn(
+              "min-w-[60px]",
+              currentPage === index && "pointer-events-none"
+            )}
+          >
+            {showPageNumbers ? `Page ${index + 1}` : `•`}
+          </Button>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 items-center justify-center mb-4">
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => handlePageChange(currentPage - 1)}
+          disabled={currentPage === 0}
+        >
+          <BiChevronLeft className="h-4 w-4" />
+        </Button>
+        <div className="flex items-center gap-1">
+          {pages.map((_, index) => (
+            <div
+              key={index}
+              className={cn(
+                "w-2 h-2 rounded-full transition-all",
+                currentPage === index
+                  ? "bg-primary w-4"
+                  : "bg-muted-foreground/30"
+              )}
+              onClick={() => handlePageChange(index)}
+              style={{ cursor: "pointer" }}
+            />
+          ))}
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => handlePageChange(currentPage + 1)}
+          disabled={currentPage === pages.length - 1}
+        >
+          <BiChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+      {showPageNumbers && (
+        <p className="text-sm text-muted-foreground">
+          Page {currentPage + 1} of {pages.length}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/PreviewDialogBtn.tsx b/src/components/PreviewDialogBtn.tsx
index 7ea9712..67e0a6f 100644
--- a/src/components/PreviewDialogBtn.tsx
+++ b/src/components/PreviewDialogBtn.tsx
@@ -1,14 +1,106 @@
-import React from "react";
+"use client";
+
+import React, { useState } from "react";
 import { Button } from "./ui/button";
 import { MdPreview } from "react-icons/md";
 import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
-import { FormElements, ElementsType } from "./FormElements";
+import { FormElements } from "./FormElements";
 import useDesigner from "@/hooks/useDesigner";
 import { formThemes } from "@/schemas/form";
 import { cn } from "@/lib/utils";
+import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
 
 function PreviewDialogBtn() {
-  const { elements, theme } = useDesigner();
+  const { elements, theme, isMultiPage, pages } = useDesigner();
+  const [currentPreviewPage, setCurrentPreviewPage] = useState(0);
+
+  const navigationType = pages[0]?.config.navigationType || 'tabs';
+  const showPageNumbers = pages[0]?.config.showPageNumbers || true;
+
+  const handleNextPage = () => {
+    if (isMultiPage && currentPreviewPage < pages.length - 1) {
+      setCurrentPreviewPage(prev => prev + 1);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (isMultiPage && currentPreviewPage > 0) {
+      setCurrentPreviewPage(prev => prev - 1);
+    }
+  };
+
+  const handlePageClick = (pageIndex: number) => {
+    if (isMultiPage && pageIndex >= 0 && pageIndex < pages.length) {
+      setCurrentPreviewPage(pageIndex);
+    }
+  };
+
+  const renderPageNavigation = () => {
+    if (!isMultiPage) return null;
+
+    if (navigationType === 'tabs') {
+      return (
+        <div className="flex items-center gap-2 justify-center mb-4">
+          {pages.map((_, index) => (
+            <Button
+              key={index}
+              variant={currentPreviewPage === index ? "default" : "outline"}
+              size="sm"
+              onClick={() => handlePageClick(index)}
+              className={cn(
+                "min-w-[60px]",
+                currentPreviewPage === index && "pointer-events-none"
+              )}
+            >
+              {showPageNumbers ? `Page ${index + 1}` : `•`}
+            </Button>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex flex-col gap-2 items-center justify-center mb-4">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handlePrevPage}
+            disabled={currentPreviewPage === 0}
+          >
+            <BiChevronLeft className="h-4 w-4" />
+          </Button>
+          <div className="flex items-center gap-1">
+            {pages.map((_, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "w-2 h-2 rounded-full transition-all cursor-pointer",
+                  currentPreviewPage === index
+                    ? "bg-primary w-4"
+                    : "bg-muted-foreground/30"
+                )}
+                onClick={() => handlePageClick(index)}
+              />
+            ))}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleNextPage}
+            disabled={currentPreviewPage === pages.length - 1}
+          >
+            <BiChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        {showPageNumbers && (
+          <p className="text-sm text-muted-foreground">
+            Page {currentPreviewPage + 1} of {pages.length}
+          </p>
+        )}
+      </div>
+    );
+  };
 
   return (
     <Dialog>
@@ -30,10 +122,18 @@ function PreviewDialogBtn() {
             formThemes[theme].styles.border,
             "w-full max-w-[620px] flex flex-col flex-grow rounded-2xl p-8 overflow-y-auto border"
           )}>
-            {elements.map((element) => {
-              const FormComponent = FormElements[element.type].formComponent;
-              return <FormComponent key={element.id} elementInstance={element} />;
-            })}
+            {renderPageNavigation()}
+            {isMultiPage ? (
+              pages[currentPreviewPage]?.elements.map((element) => {
+                const FormComponent = FormElements[element.type].formComponent;
+                return <FormComponent key={element.id} elementInstance={element} />;
+              })
+            ) : (
+              elements.map((element) => {
+                const FormComponent = FormElements[element.type].formComponent;
+                return <FormComponent key={element.id} elementInstance={element} />;
+              })
+            )}
           </div>
         </div>
       </DialogContent>
diff --git a/src/components/PropertiesFormSidebar.tsx b/src/components/PropertiesFormSidebar.tsx
index 78dd001..b2b3884 100644
--- a/src/components/PropertiesFormSidebar.tsx
+++ b/src/components/PropertiesFormSidebar.tsx
@@ -1,49 +1,53 @@
+"use client";
+
 import React from "react";
-import { FormElements, ElementsType } from "./FormElements";
-import { AiOutlineClose } from "react-icons/ai";
-import { Button } from "./ui/button";
-import { Separator } from "./ui/separator";
-import useDesigner from "@/hooks/useDesigner";
+import { FormElements } from "./FormElements";
 import FormSettings from "./FormSettings";
+import { useDesigner } from "@/context/DesignerContext";
+import { Separator } from "./ui/separator";
+import { Button } from "./ui/button";
+import { AiOutlineClose } from "react-icons/ai";
 import { MdSettings } from "react-icons/md";
 
 function PropertiesFormSidebar() {
-  const { selectedElement, setSelectedElement, theme, setTheme } = useDesigner();
-  
-  if (!selectedElement) {
+  const { selectedElement, setSelectedElement } = useDesigner();
+
+  if (selectedElement) {
+    const PropertiesComponent = FormElements[selectedElement.type].propertiesComponent;
+
     return (
-      <div className="flex flex-col p-2">
-        <div className="flex justify-between items-center">
-          <div className="flex items-center gap-2">
-            <MdSettings className="h-5 w-5" />
-            <p className="text-sm text-foreground/70">Form settings</p>
+      <div className="w-[300px] max-w-[300px] flex flex-col flex-grow gap-2 border-l-2 border-muted p-4 bg-background overflow-y-auto h-full">
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <p className="text-sm text-foreground/70">Element properties</p>
+            <div className="flex items-center gap-2">
+              <p className="text-sm text-foreground/70">{selectedElement.type}</p>
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => setSelectedElement(null)}
+              >
+                <AiOutlineClose className="h-4 w-4" />
+              </Button>
+            </div>
           </div>
+          <Separator />
+          <PropertiesComponent elementInstance={selectedElement} />
         </div>
-        <Separator className="mb-4" />
-        <FormSettings theme={theme} onThemeChange={setTheme} />
       </div>
     );
   }
 
-  const elementType = selectedElement?.type as ElementsType; // Assert type as ElementsType
-  const PropertiesForm = FormElements[elementType].propertiesComponent;
-
   return (
-    <div className="flex flex-col p-2">
-      <div className="flex justify-between items-center">
-        <p className="text-sm text-foreground/70">Element properties</p>
-        <Button
-          size={"icon"}
-          variant={"ghost"}
-          onClick={() => {
-            setSelectedElement(null);
-          }}
-        >
-          <AiOutlineClose />
-        </Button>
+    <div className="w-[300px] max-w-[300px] flex flex-col flex-grow gap-2 border-l-2 border-muted p-4 bg-background overflow-y-auto h-full">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <MdSettings className="h-5 w-5" />
+          <p className="text-sm text-foreground/70">Form settings</p>
+        </div>
+        <Separator />
+        <FormSettings />
       </div>
-      <Separator className="mb-4" />
-      <PropertiesForm elementInstance={selectedElement} />
     </div>
   );
 }
diff --git a/src/components/SaveFormBtn.tsx b/src/components/SaveFormBtn.tsx
index 73ab05e..ad211d0 100644
--- a/src/components/SaveFormBtn.tsx
+++ b/src/components/SaveFormBtn.tsx
@@ -1,28 +1,50 @@
-import React, { useTransition } from "react";
+import { UpdateFormContent, UpdateFormInput } from "@/action/form";
 import { Button } from "./ui/button";
 import { HiSaveAs } from "react-icons/hi";
-import useDesigner from "@/hooks/useDesigner";
+import { useTransition } from "react";
 import { toast } from "./ui/use-toast";
-import { FaSpinner } from "react-icons/fa";
-import { UpdateFormContent } from "@/action/form";
 import { useRouter } from "next/navigation";
+import { useDesigner, PageConfig } from "@/context/DesignerContext";
+import { FaSpinner } from "react-icons/fa";
 
 function SaveFormBtn({ id }: { id: number }) {
-  const { elements, theme } = useDesigner();
+  const { elements, isMultiPage, pages } = useDesigner();
   const [loading, startTransition] = useTransition();
   const router = useRouter();
 
   const updateFormContent = async () => {
     try {
-      const jsonElements = JSON.stringify(elements);
-      await UpdateFormContent(id, jsonElements, theme);
-      // Force a revalidation of the data
-      router.refresh();
+      console.log('Form state before save:', {
+        isMultiPage,
+        pagesLength: pages?.length || 0,
+        elementsLength: elements?.length || 0
+      });
+
+      const formData: UpdateFormInput = {
+        id,
+        content: isMultiPage ? "[]" : JSON.stringify(elements),
+        isMultiPage,
+        pages: isMultiPage
+          ? (pages || []).map((page: PageConfig, index: number) => ({
+              elements: JSON.stringify(page.elements),
+              config: JSON.stringify(page.config),
+              order: index,
+            }))
+          : [],
+      };
+
+      console.log('Sending form data:', formData);
+
+      const result = await UpdateFormContent(formData);
+      console.log('Save result:', result);
+
       toast({
         title: "Success",
         description: "Your form has been saved",
       });
+      router.refresh();
     } catch (error) {
+      console.error('Error saving form:', error);
       toast({
         title: "Error",
         description: "Something went wrong",
@@ -30,9 +52,10 @@ function SaveFormBtn({ id }: { id: number }) {
       });
     }
   };
+
   return (
     <Button
-      variant={"outline"}
+      variant="outline"
       className="gap-2"
       disabled={loading}
       onClick={() => {
diff --git a/src/context/DesignerContext.tsx b/src/context/DesignerContext.tsx
index 51c1842..b1a5462 100644
--- a/src/context/DesignerContext.tsx
+++ b/src/context/DesignerContext.tsx
@@ -2,66 +2,165 @@
 
 import { FormElementInstance } from "@/components/FormElements";
 import { formThemes } from "@/schemas/form";
-import { Dispatch, ReactNode, SetStateAction, createContext, useState } from "react";
+import { Dispatch, ReactNode, SetStateAction, createContext, useContext, useState, useCallback } from "react";
+
+export interface PageConfig {
+  elements: FormElementInstance[];
+  config: {
+    navigationType: 'tabs' | 'progress-bar';
+    showPageNumbers: boolean;
+  };
+}
 
 type DesignerContextType = {
-    elements: FormElementInstance[];
-    setElements: Dispatch<SetStateAction<FormElementInstance[]>>;
-    addElement: (index: number, element: FormElementInstance) => void;
-    removeElement: (id: string) => void;
+  elements: FormElementInstance[];
+  setElements: Dispatch<SetStateAction<FormElementInstance[]>>;
+  addElement: (index: number, element: FormElementInstance) => void;
+  removeElement: (id: string) => void;
+  selectedElement: FormElementInstance | null;
+  setSelectedElement: Dispatch<SetStateAction<FormElementInstance | null>>;
+  updateElement: (id: string, element: FormElementInstance) => void;
+  theme: keyof typeof formThemes;
+  setTheme: Dispatch<SetStateAction<keyof typeof formThemes>>;
+  isMultiPage: boolean;
+  setIsMultiPage: (value: boolean) => void;
+  pages: PageConfig[];
+  setPages: (pages: PageConfig[]) => void;
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+};
 
-    selectedElement: FormElementInstance | null;
-    setSelectedElement: Dispatch<SetStateAction<FormElementInstance | null>>;
+export const DesignerContext = createContext<DesignerContextType | null>(null);
 
-    updateElement: (id: string, element: FormElementInstance) => void;
+export function useDesigner() {
+  const context = useContext(DesignerContext);
+  
+  if (!context) {
+    throw new Error("useDesigner must be used within a DesignerContextProvider");
+  }
 
-    theme: keyof typeof formThemes;
-    setTheme: Dispatch<SetStateAction<keyof typeof formThemes>>;
-};
+  return context;
+}
 
-export const DesignerContext = createContext<DesignerContextType | null>(null);
+export function DesignerContextProvider({ children }: { children: ReactNode }) {
+  const [elements, setElements] = useState<FormElementInstance[]>([]);
+  const [selectedElement, setSelectedElement] = useState<FormElementInstance | null>(null);
+  const [theme, setTheme] = useState<keyof typeof formThemes>("default");
+  const [isMultiPage, setIsMultiPage] = useState(false);
+  const [pages, setPages] = useState<PageConfig[]>([]);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  // Debug logs for state changes
+  const handleSetIsMultiPage = useCallback((value: boolean) => {
+    console.log('Setting isMultiPage in context to:', value);
+    setIsMultiPage(value);
+  }, []);
+
+  const handleSetPages = useCallback((newPages: PageConfig[]) => {
+    console.log('Setting pages in context to:', newPages);
+    setPages(newPages);
+  }, []);
 
-export default function DesignerContextProvider({ children }: { children: ReactNode }) {
-    const [elements, setElements] = useState<FormElementInstance[]>([]);
-    const [selectedElement, setSelectedElement] = useState<FormElementInstance | null>(null);
-    const [theme, setTheme] = useState<keyof typeof formThemes>("default");
+  const handleSetCurrentPage = useCallback((page: number) => {
+    console.log('Setting current page in context to:', page);
+    setCurrentPage(page);
+  }, []);
 
-    const addElement = (index: number, element: FormElementInstance) => {
-        setElements((prev) => {
-            const newElements = [...prev];
-            newElements.splice(index, 0, element);
-            return newElements;
-        });
-    };
+  const addElement = (index: number, element: FormElementInstance) => {
+    if (isMultiPage) {
+      setPages(prev => {
+        const newPages = [...prev];
+        if (!newPages[currentPage]) {
+          newPages[currentPage] = {
+            elements: [],
+            config: {
+              navigationType: 'tabs',
+              showPageNumbers: true
+            }
+          };
+        }
+        const elements = [...newPages[currentPage].elements];
+        elements.splice(index, 0, element);
+        newPages[currentPage] = {
+          ...newPages[currentPage],
+          elements
+        };
+        return newPages;
+      });
+    } else {
+      setElements(prev => {
+        const newElements = [...prev];
+        newElements.splice(index, 0, element);
+        return newElements;
+      });
+    }
+  };
 
-    const removeElement = (id: string) => {
-        setElements((prev) => prev.filter((element) => element.id !== id));
-    };
+  const removeElement = (id: string) => {
+    if (isMultiPage) {
+      setPages(prev => {
+        const newPages = [...prev];
+        if (newPages[currentPage]) {
+          newPages[currentPage] = {
+            ...newPages[currentPage],
+            elements: newPages[currentPage].elements.filter(element => element.id !== id)
+          };
+        }
+        return newPages;
+      });
+    } else {
+      setElements(prev => prev.filter(element => element.id !== id));
+    }
+  };
 
-    const updateElement = (id: string, element: FormElementInstance) => {
-        setElements((prev) => {
-            const newElements = [...prev];
-            const index = newElements.findIndex((el) => el.id === id);
-            newElements[index] = element;
-            return newElements;
-        });
-    };
+  const updateElement = (id: string, element: FormElementInstance) => {
+    if (isMultiPage) {
+      setPages(prev => {
+        const newPages = [...prev];
+        if (newPages[currentPage]) {
+          const elements = [...newPages[currentPage].elements];
+          const index = elements.findIndex(el => el.id === id);
+          if (index !== -1) {
+            elements[index] = element;
+            newPages[currentPage] = {
+              ...newPages[currentPage],
+              elements
+            };
+          }
+        }
+        return newPages;
+      });
+    } else {
+      setElements(prev => {
+        const newElements = [...prev];
+        const index = newElements.findIndex(el => el.id === id);
+        newElements[index] = element;
+        return newElements;
+      });
+    }
+  };
 
-    return (
-        <DesignerContext.Provider
-            value={{
-                elements,
-                setElements,
-                addElement,
-                removeElement,
-                selectedElement,
-                setSelectedElement,
-                updateElement,
-                theme,
-                setTheme,
-            }}
-        >
-            {children}
-        </DesignerContext.Provider>
-    );
+  return (
+    <DesignerContext.Provider
+      value={{
+        elements,
+        setElements,
+        addElement,
+        removeElement,
+        selectedElement,
+        setSelectedElement,
+        updateElement,
+        theme,
+        setTheme,
+        isMultiPage,
+        setIsMultiPage: handleSetIsMultiPage,
+        pages,
+        setPages: handleSetPages,
+        currentPage,
+        setCurrentPage: handleSetCurrentPage,
+      }}
+    >
+      {children}
+    </DesignerContext.Provider>
+  );
 }

From 7fe5c971e3b55877897f929bdc261ae95ff02e5f Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Fri, 31 Jan 2025 18:19:56 +0100
Subject: [PATCH 38/40] Embedded seems to be working

---
 src/action/form.ts                            |  60 +++++-
 src/app/api/embed/[formId]/js/route.ts        | 194 +++++++++++++++---
 src/app/builder/[id]/page.tsx                 |   5 +-
 src/components/Designer.tsx                   |  63 ++++--
 src/components/DesignerElementWrapper.tsx     | 109 ++++++++++
 src/components/FormBuilder.tsx                |  56 ++---
 src/components/FormSettings.tsx               |  14 +-
 src/components/field/TwoColumnLayoutField.tsx | 136 ++++++------
 8 files changed, 479 insertions(+), 158 deletions(-)
 create mode 100644 src/components/DesignerElementWrapper.tsx

diff --git a/src/action/form.ts b/src/action/form.ts
index 94c3e5c..9aa23cf 100644
--- a/src/action/form.ts
+++ b/src/action/form.ts
@@ -5,9 +5,21 @@ import { formSchema, formSchemaType } from "@/schemas/form";
 import { currentUser } from "@clerk/nextjs";
 import { PageConfig } from "@/context/DesignerContext";
 import { z } from "zod";
-import { Form } from "@prisma/client";
-
-export type FullForm = Form & {
+import { Form, Prisma } from "@prisma/client";
+
+export type FullForm = {
+  id: number;
+  userId: string;
+  createdAt: Date;
+  published: boolean;
+  name: string;
+  description: string | null;
+  content: string;
+  visits: number;
+  submissions: number;
+  shareURL: string;
+  theme: string;
+  isMultiPage: boolean;
   pages: Page[];
 };
 
@@ -262,20 +274,52 @@ export async function PublishForm(id: number) {
 }
 
 export async function GetFormContentByUrl(formUrl: string) {
-  return await prisma.form.update({
+  const form = await prisma.form.findUnique({
     select: {
       content: true,
       theme: true,
-    },
-    data: {
-      visits: {
-        increment: 1,
+      isMultiPage: true,
+      pages: {
+        select: {
+          elements: true,
+          config: true,
+          order: true,
+        },
+        orderBy: {
+          order: 'asc',
+        },
       },
     },
     where: {
       shareURL: formUrl,
     },
   });
+
+  if (!form) return null;
+
+  // For multi-page forms, combine all elements from pages
+  if (form.isMultiPage && form.pages) {
+    const allElements = form.pages.reduce((acc, page) => {
+      const pageElements = JSON.parse(page.elements);
+      return [...acc, ...pageElements];
+    }, [] as any[]);
+
+    return {
+      theme: form.theme,
+      content: JSON.stringify(allElements),
+    };
+  }
+
+  // Update visit count
+  await prisma.form.update({
+    where: { shareURL: formUrl },
+    data: { visits: { increment: 1 } },
+  });
+
+  return {
+    theme: form.theme,
+    content: form.content,
+  };
 }
 
 export async function SubmitForm(formUrl: string, content: string) {
diff --git a/src/app/api/embed/[formId]/js/route.ts b/src/app/api/embed/[formId]/js/route.ts
index a982118..eddd8dd 100644
--- a/src/app/api/embed/[formId]/js/route.ts
+++ b/src/app/api/embed/[formId]/js/route.ts
@@ -1,6 +1,7 @@
 import prisma from "@/lib/prisma";
 import { NextResponse } from "next/server";
 import { getAllStyles } from '@/lib/styles/embed';
+import type { Form, Page } from '@prisma/client';
 
 export const dynamic = 'force-dynamic';
 
@@ -17,13 +18,13 @@ export async function GET(
     const formId = parseInt(params.formId);
     console.log("Looking for form:", formId);
     
-    // Get the form data - only published forms are accessible
+    // First get the form
     const form = await prisma.form.findFirst({
       where: {
         id: formId,
         published: true,
-      },
-    });
+      }
+    }) as Form | null;
 
     console.log("Form found:", form);
 
@@ -32,10 +33,22 @@ export async function GET(
       return new NextResponse("Form not found or not published", { status: 404 });
     }
 
-    // Parse the form content
+    // Get pages if it's a multi-page form
     let formContent;
     try {
-      formContent = JSON.parse(form.content);
+      if (form.isMultiPage) {
+        const pages = await prisma.page.findMany({
+          where: { formId: form.id },
+          orderBy: { order: 'asc' }
+        });
+        
+        formContent = pages.reduce((acc: any[], page) => {
+          const pageElements = JSON.parse(page.elements);
+          return [...acc, ...pageElements];
+        }, []);
+      } else {
+        formContent = JSON.parse(form.content);
+      }
       console.log("Form content parsed:", formContent);
     } catch (error) {
       console.error("Error parsing form content:", error);
@@ -48,8 +61,121 @@ export async function GET(
     }
 
     // Get all styles as a single string and escape it for JavaScript
-    const styles = getAllStyles()
-      .replace(/\\/g, '\\\\')
+    const styles = `
+      ${getAllStyles(form.theme)}
+
+      .quick-form-two-column {
+        width: 100%;
+        margin: 1rem 0;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .quick-form-column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 0 0.5rem;
+      }
+
+      .quick-form-column > * {
+        width: 100%;
+      }
+
+      @media (max-width: 640px) {
+        .quick-form-two-column {
+          grid-template-columns: 1fr;
+        }
+        
+        .quick-form-column {
+          padding: 0;
+        }
+      }
+
+      /* Base styles */
+      .quick-form-wrapper {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 1rem;
+      }
+
+      .quick-form-title {
+        font-size: 2em;
+        margin-bottom: 1rem;
+        font-weight: 600;
+      }
+
+      .quick-form-subtitle {
+        font-size: 1.5em;
+        margin-bottom: 1rem;
+        font-weight: 500;
+        color: #666;
+      }
+
+      .quick-form-label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+      }
+
+      .quick-form-input {
+        width: 100%;
+        padding: 0.5rem;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .quick-form-helper-text {
+        font-size: 0.875rem;
+        color: #666;
+        margin-top: 0.25rem;
+      }
+
+      .quick-form-error {
+        color: #dc2626;
+        font-size: 0.875rem;
+        margin-top: 0.25rem;
+      }
+
+      /* Rating scale styles */
+      .quick-form-rating-wrapper {
+        margin: 1rem 0;
+      }
+
+      .quick-form-rating-question {
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+      }
+
+      .quick-form-rating-scale {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .quick-form-rating-label {
+        font-size: 0.875rem;
+        color: #666;
+        text-align: center;
+      }
+
+      .quick-form-rating-radio {
+        margin: 0 0.25rem;
+      }
+
+      /* Image styles */
+      .quick-form-image {
+        max-width: 100%;
+        height: auto;
+        margin: 1rem auto;
+        display: block;
+      }
+    `.replace(/\\/g, '\\\\')
       .replace(/'/g, "\\'")
       .replace(/\n/g, ' ')
       .trim();
@@ -122,6 +248,36 @@ export async function GET(
             return subtitleEl;
           }
           
+          case 'TwoColumnLayoutField': {
+            const { gap, columns } = element.extraAttributes;
+            const layoutWrapper = createElement('div', 'quick-form-two-column');
+            layoutWrapper.style.display = 'grid';
+            layoutWrapper.style.gridTemplateColumns = 'repeat(2, 1fr)';
+            layoutWrapper.style.gap = (parseFloat(gap) * 0.25) + 'rem';
+
+            // Create left column
+            const leftColumn = createElement('div', 'quick-form-column');
+            if (columns.left && Array.isArray(columns.left)) {
+              columns.left.forEach(childElement => {
+                const childNode = createFormElement(childElement);
+                if (childNode) leftColumn.appendChild(childNode);
+              });
+            }
+            layoutWrapper.appendChild(leftColumn);
+
+            // Create right column
+            const rightColumn = createElement('div', 'quick-form-column');
+            if (columns.right && Array.isArray(columns.right)) {
+              columns.right.forEach(childElement => {
+                const childNode = createFormElement(childElement);
+                if (childNode) rightColumn.appendChild(childNode);
+              });
+            }
+            layoutWrapper.appendChild(rightColumn);
+
+            return layoutWrapper;
+          }
+          
           case 'RatingScaleField': {
             const { 
               label, helperText, required, question,
@@ -173,30 +329,6 @@ export async function GET(
             return fieldWrapper;
           }
           
-          case 'TwoColumnLayoutField': {
-            const { gap, leftColumn, rightColumn } = element.extraAttributes;
-            
-            const columnWrapper = createElement('div', 'quick-form-two-column');
-            columnWrapper.style.gap = gap + 'px';
-            
-            const leftCol = createElement('div', 'quick-form-column');
-            leftColumn.forEach(el => {
-              const columnElement = createFormElement(el);
-              if (columnElement) leftCol.appendChild(columnElement);
-            });
-            
-            const rightCol = createElement('div', 'quick-form-column');
-            rightColumn.forEach(el => {
-              const columnElement = createFormElement(el);
-              if (columnElement) rightCol.appendChild(columnElement);
-            });
-            
-            columnWrapper.appendChild(leftCol);
-            columnWrapper.appendChild(rightCol);
-            
-            return columnWrapper;
-          }
-          
           case 'ImageElement': {
             const { 
               base64Image, height, width, maintainAspectRatio,
diff --git a/src/app/builder/[id]/page.tsx b/src/app/builder/[id]/page.tsx
index 940c655..4e4c564 100644
--- a/src/app/builder/[id]/page.tsx
+++ b/src/app/builder/[id]/page.tsx
@@ -10,13 +10,14 @@ async function BuilderPage({
   };
 }) {
   const { id } = params;
-  const form = await GetFormById(Number(id));
+  const formId = Number(id);
+  const form = await GetFormById(formId);
   if (!form) {
     throw new Error("form not found");
   }
   return (
     <>
-      <FormBuilder form={form} />
+      <FormBuilder id={formId} />
     </>
   );
 }
diff --git a/src/components/Designer.tsx b/src/components/Designer.tsx
index 188b037..5946914 100644
--- a/src/components/Designer.tsx
+++ b/src/components/Designer.tsx
@@ -12,9 +12,26 @@ import useDesigner from "@/hooks/useDesigner";
 import { formThemes } from "@/schemas/form";
 import PageNavigation from "./PageNavigation";
 
-function Designer() {
+type ColumnType = 'left' | 'right';
+
+interface TwoColumnLayoutAttributes {
+  columns: {
+    [key in ColumnType]: FormElementInstance[];
+  };
+}
+
+interface TwoColumnLayoutInstance extends FormElementInstance {
+  type: 'TwoColumnLayoutField';
+  extraAttributes: TwoColumnLayoutAttributes;
+}
+
+interface DesignerProps {
+  elements?: FormElementInstance[];
+}
+
+function Designer({ elements: propElements }: DesignerProps) {
     const { 
-        elements, 
+        elements: contextElements, 
         addElement, 
         selectedElement, 
         setSelectedElement, 
@@ -24,9 +41,12 @@ function Designer() {
         isMultiPage,
         pages,
         currentPage,
-        setPages
+        setPages,
+        setElements
     } = useDesigner();
 
+    const elements = propElements || contextElements;
+
     const droppable = useDroppable({
         id: "designer-drop-area",
         data: {
@@ -72,7 +92,7 @@ function Designer() {
             // Handle dropping into columns
             if (isDroppingOverColumn) {
                 const type = active.data?.current?.type;
-                const columnId = over.data?.current?.columnId;
+                const columnId = over.data?.current?.columnId as ColumnType;
                 const parentId = over.data?.current?.elementId;
                 
                 // Find the parent TwoColumnLayout element
@@ -80,26 +100,38 @@ function Designer() {
                 if (parentIndex === -1) return;
 
                 const parent = elements[parentIndex];
-                if (parent.type !== "TwoColumnLayout") return;
+                const isTwoColumnLayout = (el: FormElementInstance): el is TwoColumnLayoutInstance => 
+                    el.type === 'TwoColumnLayoutField';
+                
+                if (!isTwoColumnLayout(parent)) return;
 
                 // Create new element
                 const newElement = FormElements[type as ElementsType].construct(idGenerator());
 
                 // Update the appropriate column
                 const updatedColumns = { ...parent.extraAttributes.columns };
-                updatedColumns[columnId] = [...updatedColumns[columnId], newElement];
+                updatedColumns[columnId] = [...(updatedColumns[columnId] || []), newElement];
 
                 // Update the parent element
-                const updatedParent = {
+                const updatedParent: TwoColumnLayoutInstance = {
                     ...parent,
+                    type: 'TwoColumnLayoutField',
                     extraAttributes: {
-                        ...parent.extraAttributes,
-                        columns: updatedColumns,
-                    },
+                        columns: updatedColumns
+                    }
                 };
 
-                // Update elements array
-                updateElement(parentId, updatedParent);
+                // Update elements list
+                const updatedElements = [...elements];
+                updatedElements[parentIndex] = updatedParent;
+                
+                if (isMultiPage) {
+                    const updatedPages = [...pages];
+                    updatedPages[currentPage].elements = updatedElements;
+                    setPages(updatedPages);
+                } else {
+                    setElements(updatedElements);
+                }
                 return;
             }
 
@@ -258,7 +290,12 @@ function Designer() {
     );
 }
 
-function DesignerElementWrapper({ element, onRemove }: { element: FormElementInstance; onRemove: () => void }) {
+export interface DesignerElementWrapperProps {
+  element: FormElementInstance;
+  onRemove: () => void;
+}
+
+export function DesignerElementWrapper({ element, onRemove }: DesignerElementWrapperProps) {
     const { setSelectedElement, selectedElement } = useDesigner();
 
     const [mouseIsOver, setMouseIsOver] = useState<boolean>(false);
diff --git a/src/components/DesignerElementWrapper.tsx b/src/components/DesignerElementWrapper.tsx
new file mode 100644
index 0000000..a39cbe6
--- /dev/null
+++ b/src/components/DesignerElementWrapper.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useState } from "react";
+import { FormElementInstance } from "./FormElements";
+import { useDesigner } from "@/context/DesignerContext";
+import { useDraggable } from "@dnd-kit/core";
+import { Button } from "./ui/button";
+import { BiSolidTrash } from "react-icons/bi";
+import { cn } from "@/lib/utils";
+
+export interface DesignerElementWrapperProps {
+  element: FormElementInstance;
+  onRemove: () => void;
+}
+
+export function DesignerElementWrapper({ element, onRemove }: DesignerElementWrapperProps) {
+  const { setSelectedElement, selectedElement } = useDesigner();
+
+  const [mouseIsOver, setMouseIsOver] = useState<boolean>(false);
+
+  const topHalf = useDraggable({
+    id: element.id + "-top",
+    data: {
+      type: element.type,
+      elementId: element.id,
+      isTopHalfDesignerElement: true,
+      isDesignerElement: true,
+    },
+  });
+
+  const bottomHalf = useDraggable({
+    id: element.id + "-bottom",
+    data: {
+      type: element.type,
+      elementId: element.id,
+      isBottomHalfDesignerElement: true,
+      isDesignerElement: true,
+    },
+  });
+
+  const handleMouseEnter = () => {
+    setMouseIsOver(true);
+  };
+
+  const handleMouseLeave = () => {
+    setMouseIsOver(false);
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedElement(element);
+  };
+
+  return (
+    <div
+      className="relative h-full"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+    >
+      <div
+        ref={topHalf.setNodeRef}
+        {...topHalf.listeners}
+        {...topHalf.attributes}
+        className="absolute w-full h-1/2"
+      />
+      <div
+        ref={bottomHalf.setNodeRef}
+        {...bottomHalf.listeners}
+        {...bottomHalf.attributes}
+        className="absolute w-full bottom-0 h-1/2"
+      />
+      {mouseIsOver && (
+        <>
+          <div className="absolute right-0 h-full">
+            <Button
+              className="flex justify-center h-full border rounded-none bg-red-500"
+              variant={"outline"}
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove();
+              }}
+            >
+              <BiSolidTrash className="h-6 w-6" />
+            </Button>
+          </div>
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse">
+            <p className="text-muted-foreground text-sm">Click for properties or drag to move</p>
+          </div>
+        </>
+      )}
+      <div
+        className={cn(
+          "flex w-full h-full rounded-md",
+          mouseIsOver && "border-2 border-primary",
+          selectedElement?.id === element.id && "border-2 border-primary ring-2 ring-primary ring-offset-2"
+        )}
+      >
+        <div className="flex w-full h-full items-center rounded-md px-4 py-2 pointer-events-none">
+          {mouseIsOver ? (
+            <p className="text-muted-foreground text-sm">Click for properties or drag to move</p>
+          ) : (
+            <div className="w-full">{element.type}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/FormBuilder.tsx b/src/components/FormBuilder.tsx
index e61eea8..b492361 100644
--- a/src/components/FormBuilder.tsx
+++ b/src/components/FormBuilder.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Form } from "@prisma/client";
-import React, { useEffect, useState } from "react";
+import { type Form } from '@prisma/client';
+import React, { useEffect, useCallback, useState } from "react";
 import PreviewDialogBtn from "./PreviewDialogBtn";
 import PublishFormBtn from "./PublishFormBtn";
 import GenerateCodeBtn from "./GenerateCodeBtn";
@@ -21,10 +21,14 @@ import useDesigner from "@/hooks/useDesigner";
 import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
 import { formThemes } from "@/schemas/form";
 import { ElementsType, FormElement, FormElementInstance, FormElements } from "./FormElements";
-import { GetFormById } from "@/action/form";
+import { GetFormById, type FullForm } from "@/action/form";
 import { PageConfig } from "@/context/DesignerContext";
 
-function FormBuilder({ form }: { form: Form }) {
+function FormBuilder({ id }: { id: number }) {
+  const [loadedForm, setLoadedForm] = useState<FullForm | null>(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isOpen, setIsOpen] = useState(false)
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
   const { 
     setElements, 
     setSelectedElement, 
@@ -38,11 +42,6 @@ function FormBuilder({ form }: { form: Form }) {
     elements 
   } = useDesigner();
 
-  const [isReady, setIsReady] = useState(false);
-
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-  const [isOpen, setIsOpen] = useState(false)
-
   useEffect(() => {
     setIsSmallScreen(window.innerWidth <= 768);
     const handleResize = () => {
@@ -78,13 +77,14 @@ function FormBuilder({ form }: { form: Form }) {
 
   useEffect(() => {
     const fetchFormData = async () => {
-      const loadedForm = await GetFormById(form.id);
-      if (!loadedForm) return;
+      const form = await GetFormById(id);
+      if (!form) return;
 
-      setIsMultiPage(loadedForm.isMultiPage);
+      setLoadedForm(form);
+      setIsMultiPage(form.isMultiPage);
       
-      if (loadedForm.isMultiPage && loadedForm.pages?.length > 0) {
-        const sortedPages = loadedForm.pages
+      if (form.isMultiPage && form.pages?.length > 0) {
+        const sortedPages = form.pages
           .sort((a, b) => a.order - b.order)
           .map(page => ({
             elements: JSON.parse(page.elements) as FormElementInstance[],
@@ -94,8 +94,8 @@ function FormBuilder({ form }: { form: Form }) {
         setPages(sortedPages);
         setCurrentPage(0);
       } else {
-        const elements = JSON.parse(loadedForm.content) as FormElementInstance[];
-        setTheme((loadedForm.theme || "default") as keyof typeof formThemes);
+        const elements = JSON.parse(form.content) as FormElementInstance[];
+        setTheme((form.theme || "default") as keyof typeof formThemes);
         
         const reconstructedElements = elements.map(element => {
           const elementType = element.type as ElementsType;
@@ -131,7 +131,7 @@ function FormBuilder({ form }: { form: Form }) {
     };
 
     fetchFormData();
-  }, [form?.id, setElements, setSelectedElement, setTheme, setIsMultiPage, setPages, setCurrentPage]);
+  }, [id, setElements, setSelectedElement, setTheme, setIsMultiPage, setPages, setCurrentPage]);
 
   const reconstructElement = (element: FormElementInstance) => {
     const elementType = element.type as ElementsType;
@@ -149,9 +149,9 @@ function FormBuilder({ form }: { form: Form }) {
     );
   }
 
-  const shareUrl = `${window.location.origin}/submit/${form.shareURL}`;
+  const shareUrl = `${window.location.origin}/submit/${loadedForm?.shareURL}`;
 
-  if (form.published) {
+  if (loadedForm?.published) {
     return (
       <>
         <Confetti width={window.innerWidth} height={window.innerHeight} recycle={false} numberOfPieces={1000} />
@@ -179,7 +179,7 @@ function FormBuilder({ form }: { form: Form }) {
                 >
                   Copy link
                 </Button>
-                <GenerateCodeBtn id={form.id} />
+                <GenerateCodeBtn id={id} />
               </div>
             </div>
             <div className="flex justify-between items-center w-full mt-4">
@@ -206,12 +206,12 @@ function FormBuilder({ form }: { form: Form }) {
         <nav className="flex justify-between border-b-2 lg:py-4 lg:px-9 py-2 px-4 gap-3 items-center">
           <h2 className="truncate font-medium">
             <span className="text-muted-foreground mr-2">Form:</span>
-            {form.name}
+            {loadedForm?.name}
           </h2>
           <div className="flex items-center gap-2">
             <ThemeSelector />
             <PreviewDialogBtn />
-            {!form.published && (
+            {!loadedForm?.published && (
               <>
                 {isSmallScreen ?
                   (
@@ -222,17 +222,17 @@ function FormBuilder({ form }: { form: Form }) {
                       </Button>
                       {isOpen && <div className="absolute z-[1] bg-[#fff] rounded-md border p-4 min-h-30 top-[2.9rem] shadow-md right-0">
                         <div className="flex flex-col gap-3">
-                          <SaveFormBtn id={form.id} />
-                          <PublishFormBtn id={form.id} />
-                          <GenerateCodeBtn id={form.id} />
+                          <SaveFormBtn id={id} />
+                          <PublishFormBtn id={id} />
+                          <GenerateCodeBtn id={id} />
                         </div>
                       </div>}
                     </div>
                   ) : (
                     <>
-                      <SaveFormBtn id={form.id} />
-                      <PublishFormBtn id={form.id} />
-                      <GenerateCodeBtn id={form.id} />
+                      <SaveFormBtn id={id} />
+                      <PublishFormBtn id={id} />
+                      <GenerateCodeBtn id={id} />
                     </>
                   )}
               </>
diff --git a/src/components/FormSettings.tsx b/src/components/FormSettings.tsx
index 8489d91..03542e5 100644
--- a/src/components/FormSettings.tsx
+++ b/src/components/FormSettings.tsx
@@ -11,6 +11,8 @@ import { Button } from "./ui/button";
 import { BiPlus } from "react-icons/bi";
 import { Separator } from "./ui/separator";
 
+type ThemeType = keyof typeof formThemes;
+
 function FormSettings() {
   const { 
     isMultiPage, 
@@ -96,6 +98,16 @@ function FormSettings() {
     });
   };
 
+  const handleThemeChange = (value: string) => {
+    if (isValidTheme(value)) {
+      setTheme(value);
+    }
+  };
+
+  const isValidTheme = (value: string): value is ThemeType => {
+    return Object.keys(formThemes).includes(value);
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between gap-4">
@@ -155,7 +167,7 @@ function FormSettings() {
       <Separator />
       <div className="space-y-2">
         <Label className="text-sm">Theme</Label>
-        <Select value={theme} onValueChange={setTheme}>
+        <Select value={theme} onValueChange={handleThemeChange}>
           <SelectTrigger>
             <SelectValue />
           </SelectTrigger>
diff --git a/src/components/field/TwoColumnLayoutField.tsx b/src/components/field/TwoColumnLayoutField.tsx
index d92b828..1d81cdc 100644
--- a/src/components/field/TwoColumnLayoutField.tsx
+++ b/src/components/field/TwoColumnLayoutField.tsx
@@ -13,21 +13,34 @@ import { cn } from "@/lib/utils";
 import { formThemes } from "@/schemas/form";
 import { useDroppable } from "@dnd-kit/core";
 import { idGenerator } from "@/lib/idGenerator";
-import { DesignerElementWrapper } from "../Designer";
+import { DesignerElementWrapper } from "../DesignerElementWrapper";
 import { Suspense } from "react";
 
 const type: ElementsType = "TwoColumnLayoutField";
 
-const extraAttributes = {
-  gap: "4", // Tailwind gap spacing
-  leftColumn: [] as FormElementInstance[],
-  rightColumn: [] as FormElementInstance[],
+type ColumnType = 'left' | 'right';
+
+interface TwoColumnLayoutAttributes {
+  gap: string;
+  columns: {
+    [key in ColumnType]: FormElementInstance[];
+  };
+}
+
+const extraAttributes: TwoColumnLayoutAttributes = {
+  gap: "4",
+  columns: {
+    left: [],
+    right: []
+  }
 };
 
 const propertiesSchema = z.object({
   gap: z.string(),
-  leftColumn: z.array(z.any()).default([]),
-  rightColumn: z.array(z.any()).default([]),
+  columns: z.object({
+    left: z.array(z.any()).default([]),
+    right: z.array(z.any()).default([])
+  })
 });
 
 // Create a memoized wrapper for form components
@@ -65,8 +78,10 @@ export const TwoColumnLayoutFieldFormElement: FormElement = {
     type,
     extraAttributes: {
       ...extraAttributes,
-      leftColumn: [], // Create new arrays for each instance
-      rightColumn: [], // Create new arrays for each instance
+      columns: {
+        left: [],
+        right: []
+      }
     },
   }),
   designerBtnElement: {
@@ -80,12 +95,14 @@ export const TwoColumnLayoutFieldFormElement: FormElement = {
 };
 
 type CustomInstance = FormElementInstance & {
-  extraAttributes: typeof extraAttributes;
+  extraAttributes: TwoColumnLayoutAttributes;
 };
 
 function DesignerComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
-  const { gap, leftColumn, rightColumn } = element.extraAttributes;
+  const { gap, columns } = element.extraAttributes;
+  const leftColumn = columns.left;
+  const rightColumn = columns.right;
   const { theme, addElement, selectedElement } = useDesigner();
   const { styles } = formThemes[theme];
   const [mouseIsOver, setMouseIsOver] = useState<boolean>(false);
@@ -133,7 +150,7 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
               className="mb-4 w-full relative z-10"
               style={{ pointerEvents: 'auto' }}
             >
-              <DesignerElementWrapper element={element} />
+              <DesignerElementWrapper element={element} onRemove={() => {}} />
             </div>
           ))}
           {!leftColumn.length && (
@@ -155,7 +172,7 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
               className="mb-4 w-full relative z-10"
               style={{ pointerEvents: 'auto' }}
             >
-              <DesignerElementWrapper element={element} />
+              <DesignerElementWrapper element={element} onRemove={() => {}} />
             </div>
           ))}
           {!rightColumn.length && (
@@ -176,54 +193,21 @@ function DesignerComponent({ elementInstance }: { elementInstance: FormElementIn
 
 function FormComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
-  const { gap, leftColumn, rightColumn } = element.extraAttributes;
-  const { theme } = useDesigner();
-  const { styles } = formThemes[theme];
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // Quick check to ensure form elements exist
-    const validateElements = () => {
-      try {
-        [...leftColumn, ...rightColumn].forEach((element) => {
-          if (!FormElements[element.type]) {
-            throw new Error(`Form element type ${element.type} not found`);
-          }
-        });
-        return true;
-      } catch (error) {
-        console.error('Error validating form elements:', error);
-        return false;
-      }
-    };
-
-    validateElements();
-    setIsLoading(false);
-  }, [leftColumn, rightColumn]);
-
-  const renderColumn = useCallback((elements: FormElementInstance[]) => {
-    return elements.map((element) => (
-      <div key={element.id} className="mb-4 w-full">
-        <div role="alert">
-          <Suspense fallback={<div>Loading...</div>}>
-            <MemoizedFormComponent element={element} />
-          </Suspense>
-        </div>
-      </div>
-    ));
-  }, []);
-
-  if (isLoading) {
-    return <div>Loading form elements...</div>;
-  }
+  const { gap, columns } = element.extraAttributes;
+  const leftColumn = columns.left;
+  const rightColumn = columns.right;
 
   return (
     <div className={cn("grid grid-cols-2 w-full", `gap-${gap}`)}>
-      <div className="w-full">
-        {renderColumn(leftColumn)}
+      <div className="flex flex-col gap-4">
+        {leftColumn.map((element) => (
+          <MemoizedFormComponent key={element.id} element={element} />
+        ))}
       </div>
-      <div className="w-full">
-        {renderColumn(rightColumn)}
+      <div className="flex flex-col gap-4">
+        {rightColumn.map((element) => (
+          <MemoizedFormComponent key={element.id} element={element} />
+        ))}
       </div>
     </div>
   );
@@ -232,13 +216,12 @@ function FormComponent({ elementInstance }: { elementInstance: FormElementInstan
 function PropertiesComponent({ elementInstance }: { elementInstance: FormElementInstance }) {
   const element = elementInstance as CustomInstance;
   const { updateElement } = useDesigner();
-  const form = useForm<propertiesFormSchemaType>({
+  const form = useForm<z.infer<typeof propertiesSchema>>({
     resolver: zodResolver(propertiesSchema),
     mode: "onBlur",
     defaultValues: {
       gap: element.extraAttributes.gap,
-      leftColumn: element.extraAttributes.leftColumn,
-      rightColumn: element.extraAttributes.rightColumn,
+      columns: element.extraAttributes.columns
     },
   });
 
@@ -246,23 +229,27 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
     form.reset(element.extraAttributes);
   }, [element, form]);
 
-  function applyChanges(values: propertiesFormSchemaType) {
+  function applyChanges(values: z.infer<typeof propertiesSchema>) {
+    const { gap, columns } = values;
     updateElement(element.id, {
       ...element,
-      extraAttributes: values,
+      extraAttributes: {
+        gap,
+        columns
+      },
     });
   }
 
   return (
     <Form {...form}>
       <form
-        onBlur={() => {
-          form.handleSubmit(applyChanges)();
-        }}
         onSubmit={(e) => {
           e.preventDefault();
           form.handleSubmit(applyChanges)();
         }}
+        onBlur={() => {
+          form.handleSubmit(applyChanges)();
+        }}
         className="space-y-3"
       >
         <FormField
@@ -270,17 +257,16 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
           name="gap"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Gap Between Columns</FormLabel>
+              <FormLabel>Gap</FormLabel>
               <FormControl>
-                <select
+                <input
+                  type="number"
+                  min="0"
+                  max="16"
                   {...field}
-                  className="w-full border border-gray-300 rounded-md p-2"
-                >
-                  <option value="2">Small</option>
-                  <option value="4">Medium</option>
-                  <option value="6">Large</option>
-                  <option value="8">Extra Large</option>
-                </select>
+                  onChange={(e) => field.onChange(e.target.value)}
+                  className="w-full border rounded-md h-10 px-3"
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -291,4 +277,4 @@ function PropertiesComponent({ elementInstance }: { elementInstance: FormElement
   );
 }
 
-type propertiesFormSchemaType = z.infer<typeof propertiesSchema>;
+export type { propertiesSchema as propertiesFormSchemaType };

From 79a9256c1eef4858e21121c3eef5c48ab38e7ae3 Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Sat, 1 Feb 2025 17:57:30 +0100
Subject: [PATCH 39/40] Upgraded a few older packages

---
 package-lock.json                             |   498 +-
 package.json                                  |    10 +-
 src/app/api/embed/[formId]/js/route.ts        |     2 +-
 .../api/placeholder/[width]/[height]/route.ts |    29 -
 src/providers/ThemeProvider.tsx               |     2 +-
 xz.json                                       | 25989 ++++++++++++++++
 6 files changed, 26383 insertions(+), 147 deletions(-)
 delete mode 100644 src/app/api/placeholder/[width]/[height]/route.ts
 create mode 100644 xz.json

diff --git a/package-lock.json b/package-lock.json
index 757b383..56e362c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@clerk/nextjs": "^4.29.9",
         "@dnd-kit/core": "^6.1.0",
         "@hookform/resolvers": "^3.3.4",
-        "@prisma/client": "^5.10.2",
+        "@prisma/client": "^6.3.0",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -45,13 +45,14 @@
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",
         "date-fns": "^3.4.0",
+        "directory-tree": "^3.5.2",
         "embla-carousel-react": "^8.0.0",
         "framer-motion": "^11.0.12",
         "input-otp": "^1.1.0",
         "lucide-react": "^0.356.0",
-        "next": "14.1.3",
-        "next-themes": "^0.2.1",
-        "nextjs-toploader": "^1.6.6",
+        "next": "14.2.23",
+        "next-themes": "^0.4.4",
+        "nextjs-toploader": "^3.7.15",
         "react": "^18",
         "react-confetti": "^6.1.0",
         "react-day-picker": "^8.10.0",
@@ -73,6 +74,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.1.3",
         "postcss": "^8",
+        "prisma": "^6.3.0",
         "tailwindcss": "^3.3.0",
         "typescript": "^5"
       }
@@ -519,9 +521,10 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.3.tgz",
-      "integrity": "sha512-VhgXTvrgeBRxNPjyfBsDIMvgsKDxjlpw4IAUsHCX8Gjl1vtHUYRT3+xfQ/wwvLPDd/6kqfLqk9Pt4+7gysuCKQ=="
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.23.tgz",
+      "integrity": "sha512-CysUC9IO+2Bh0omJ3qrb47S8DtsTKbFidGm6ow4gXIG6reZybqxbkH2nhdEm1tC8SmgzDdpq3BIML0PWsmyUYA==",
+      "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.1.3",
@@ -533,12 +536,13 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.3.tgz",
-      "integrity": "sha512-LALu0yIBPRiG9ANrD5ncB3pjpO0Gli9ZLhxdOu6ZUNf3x1r3ea1rd9Q+4xxUkGrUXLqKVK9/lDkpYIJaCJ6AHQ==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.23.tgz",
+      "integrity": "sha512-WhtEntt6NcbABA8ypEoFd3uzq5iAnrl9AnZt9dXdO+PZLACE32z3a3qA5OoV20JrbJfSJ6Sd6EqGZTrlRnGxQQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -548,12 +552,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.3.tgz",
-      "integrity": "sha512-E/9WQeXxkqw2dfcn5UcjApFgUq73jqNKaE5bysDm58hEUdUGedVrnRhblhJM7HbCZNhtVl0j+6TXsK0PuzXTCg==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.23.tgz",
+      "integrity": "sha512-vwLw0HN2gVclT/ikO6EcE+LcIN+0mddJ53yG4eZd0rXkuEr/RnOaMH8wg/sYl5iz5AYYRo/l6XX7FIo6kwbw1Q==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -563,12 +568,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.3.tgz",
-      "integrity": "sha512-USArX9B+3rZSXYLFvgy0NVWQgqh6LHWDmMt38O4lmiJNQcwazeI6xRvSsliDLKt+78KChVacNiwvOMbl6g6BBw==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.23.tgz",
+      "integrity": "sha512-uuAYwD3At2fu5CH1wD7FpP87mnjAv4+DNvLaR9kiIi8DLStWSW304kF09p1EQfhcbUI1Py2vZlBO2VaVqMRtpg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -578,12 +584,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.3.tgz",
-      "integrity": "sha512-esk1RkRBLSIEp1qaQXv1+s6ZdYzuVCnDAZySpa62iFTMGTisCyNQmqyCTL9P+cLJ4N9FKCI3ojtSfsyPHJDQNw==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.23.tgz",
+      "integrity": "sha512-Mm5KHd7nGgeJ4EETvVgFuqKOyDh+UMXHXxye6wRRFDr4FdVRI6YTxajoV2aHE8jqC14xeAMVZvLqYqS7isHL+g==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -593,12 +600,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.3.tgz",
-      "integrity": "sha512-8uOgRlYEYiKo0L8YGeS+3TudHVDWDjPVDUcST+z+dUzgBbTEwSSIaSgF/vkcC1T/iwl4QX9iuUyUdQEl0Kxalg==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.23.tgz",
+      "integrity": "sha512-Ybfqlyzm4sMSEQO6lDksggAIxnvWSG2cDWnG2jgd+MLbHYn2pvFA8DQ4pT2Vjk3Cwrv+HIg7vXJ8lCiLz79qoQ==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -608,12 +616,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.3.tgz",
-      "integrity": "sha512-DX2zqz05ziElLoxskgHasaJBREC5Y9TJcbR2LYqu4r7naff25B4iXkfXWfcp69uD75/0URmmoSgT8JclJtrBoQ==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.23.tgz",
+      "integrity": "sha512-OSQX94sxd1gOUz3jhhdocnKsy4/peG8zV1HVaW6DLEbEmRRtUCUQZcKxUD9atLYa3RZA+YJx+WZdOnTkDuNDNA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -623,12 +632,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.3.tgz",
-      "integrity": "sha512-HjssFsCdsD4GHstXSQxsi2l70F/5FsRTRQp8xNgmQs15SxUfUJRvSI9qKny/jLkY3gLgiCR3+6A7wzzK0DBlfA==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.23.tgz",
+      "integrity": "sha512-ezmbgZy++XpIMTcTNd0L4k7+cNI4ET5vMv/oqNfTuSXkZtSA9BURElPFyarjjGtRgZ9/zuKDHoMdZwDZIY3ehQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -638,12 +648,13 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.3.tgz",
-      "integrity": "sha512-DRuxD5axfDM1/Ue4VahwSxl1O5rn61hX8/sF0HY8y0iCbpqdxw3rB3QasdHn/LJ6Wb2y5DoWzXcz3L1Cr+Thrw==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.23.tgz",
+      "integrity": "sha512-zfHZOGguFCqAJ7zldTKg4tJHPJyJCOFhpoJcVxKL9BSUHScVDnMdDuOU1zPPGdOzr/GWxbhYTjyiEgLEpAoFPA==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -653,12 +664,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.3.tgz",
-      "integrity": "sha512-uC2DaDoWH7h1P/aJ4Fok3Xiw6P0Lo4ez7NbowW2VGNXw/Xv6tOuLUcxhBYZxsSUJtpeknCi8/fvnSpyCFp4Rcg==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.23.tgz",
+      "integrity": "sha512-xCtq5BD553SzOgSZ7UH5LH+OATQihydObTrCTvVzOro8QiWYKdBVwcB2Mn2MLMo6DGW9yH1LSPw7jS7HhgJgjw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -748,70 +760,75 @@
       }
     },
     "node_modules/@prisma/client": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.10.2.tgz",
-      "integrity": "sha512-ef49hzB2yJZCvM5gFHMxSFL9KYrIP9udpT5rYo0CsHD4P9IKj473MbhU1gjKKftiwWBTIyrt9jukprzZXazyag==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.3.0.tgz",
+      "integrity": "sha512-BY3Fi28PUSk447Bpv22LhZp4HgNPo7NsEN+EteM1CLDnLjig5863jpW+3c3HHLFmml+nB/eJv1CjSriFZ8z7Cg==",
       "hasInstallScript": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=16.13"
+        "node": ">=18.18"
       },
       "peerDependencies": {
-        "prisma": "*"
+        "prisma": "*",
+        "typescript": ">=5.1.0"
       },
       "peerDependenciesMeta": {
         "prisma": {
           "optional": true
+        },
+        "typescript": {
+          "optional": true
         }
       }
     },
     "node_modules/@prisma/debug": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.10.2.tgz",
-      "integrity": "sha512-bkBOmH9dpEBbMKFJj8V+Zp8IZHIBjy3fSyhLhxj4FmKGb/UBSt9doyfA6k1UeUREsMJft7xgPYBbHSOYBr8XCA==",
-      "optional": true,
-      "peer": true
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.3.0.tgz",
+      "integrity": "sha512-m1lQv//0Rc5RG8TBpNUuLCxC35Ghi5XfpPmL83Gh04/GICHD2J5H2ndMlaljrUNaQDF9dOxIuFAYP1rE9wkXkg==",
+      "devOptional": true,
+      "license": "Apache-2.0"
     },
     "node_modules/@prisma/engines": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.10.2.tgz",
-      "integrity": "sha512-HkSJvix6PW8YqEEt3zHfCYYJY69CXsNdhU+wna+4Y7EZ+AwzeupMnUThmvaDA7uqswiHkgm5/SZ6/4CStjaGmw==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.3.0.tgz",
+      "integrity": "sha512-RXqYhlZb9sx/xkUfYIZuEPn7sT0WgTxNOuEYQ7AGw3IMpP9QGVEDVsluc/GcNkM8NTJszeqk8AplJzI9lm7Jxw==",
+      "devOptional": true,
       "hasInstallScript": true,
-      "optional": true,
-      "peer": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@prisma/debug": "5.10.2",
-        "@prisma/engines-version": "5.10.0-34.5a9203d0590c951969e85a7d07215503f4672eb9",
-        "@prisma/fetch-engine": "5.10.2",
-        "@prisma/get-platform": "5.10.2"
+        "@prisma/debug": "6.3.0",
+        "@prisma/engines-version": "6.3.0-17.acc0b9dd43eb689cbd20c9470515d719db10d0b0",
+        "@prisma/fetch-engine": "6.3.0",
+        "@prisma/get-platform": "6.3.0"
       }
     },
     "node_modules/@prisma/engines-version": {
-      "version": "5.10.0-34.5a9203d0590c951969e85a7d07215503f4672eb9",
-      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.10.0-34.5a9203d0590c951969e85a7d07215503f4672eb9.tgz",
-      "integrity": "sha512-uCy/++3Jx/O3ufM+qv2H1L4tOemTNqcP/gyEVOlZqTpBvYJUe0tWtW0y3o2Ueq04mll4aM5X3f6ugQftOSLdFQ==",
-      "optional": true,
-      "peer": true
+      "version": "6.3.0-17.acc0b9dd43eb689cbd20c9470515d719db10d0b0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-6.3.0-17.acc0b9dd43eb689cbd20c9470515d719db10d0b0.tgz",
+      "integrity": "sha512-R/ZcMuaWZT2UBmgX3Ko6PAV3f8//ZzsjRIG1eKqp3f2rqEqVtCv+mtzuH2rBPUC9ujJ5kCb9wwpxeyCkLcHVyA==",
+      "devOptional": true,
+      "license": "Apache-2.0"
     },
     "node_modules/@prisma/fetch-engine": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.10.2.tgz",
-      "integrity": "sha512-dSmXcqSt6DpTmMaLQ9K8ZKzVAMH3qwGCmYEZr/uVnzVhxRJ1EbT/w2MMwIdBNq1zT69Rvh0h75WMIi0mrIw7Hg==",
-      "optional": true,
-      "peer": true,
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.3.0.tgz",
+      "integrity": "sha512-GBy0iT4f1mH31ePzfcpVSUa7JLRTeq4914FG2vR3LqDwRweSm4ja1o5flGDz+eVIa/BNYfkBvRRxv4D6ve6Eew==",
+      "devOptional": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@prisma/debug": "5.10.2",
-        "@prisma/engines-version": "5.10.0-34.5a9203d0590c951969e85a7d07215503f4672eb9",
-        "@prisma/get-platform": "5.10.2"
+        "@prisma/debug": "6.3.0",
+        "@prisma/engines-version": "6.3.0-17.acc0b9dd43eb689cbd20c9470515d719db10d0b0",
+        "@prisma/get-platform": "6.3.0"
       }
     },
     "node_modules/@prisma/get-platform": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.10.2.tgz",
-      "integrity": "sha512-nqXP6vHiY2PIsebBAuDeWiUYg8h8mfjBckHh6Jezuwej0QJNnjDiOq30uesmg+JXxGk99nqyG3B7wpcOODzXvg==",
-      "optional": true,
-      "peer": true,
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.3.0.tgz",
+      "integrity": "sha512-V8zZ1d0xfyi6FjpNP4AcYuwSpGcdmu35OXWnTPm8IW594PYALzKXHwIa9+o0f+Lo9AecFWrwrwaoYe56UNfTtQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@prisma/debug": "5.10.2"
+        "@prisma/debug": "6.3.0"
       }
     },
     "node_modules/@radix-ui/number": {
@@ -2155,11 +2172,19 @@
       "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
       "dev": true
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
       "dependencies": {
+        "@swc/counter": "^0.1.3",
         "tslib": "^2.4.0"
       }
     },
@@ -2260,11 +2285,6 @@
         "form-data": "^3.0.0"
       }
     },
-    "node_modules/@types/nprogress": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz",
-      "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA=="
-    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
@@ -2570,6 +2590,15 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/array-back": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
+      "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -3217,6 +3246,125 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/command-line-args": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
+      "integrity": "sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^3.1.0",
+        "find-replace": "^3.0.0",
+        "lodash.camelcase": "^4.3.0",
+        "typical": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/command-line-usage": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-6.1.3.tgz",
+      "integrity": "sha512-sH5ZSPr+7UStsloltmDh7Ce5fb8XPlHyoPzTpyyMuYCtervL65+ubVZ6Q61cFtFl62UyJlc8/JwERRbAFPUqgw==",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^4.0.2",
+        "chalk": "^2.4.2",
+        "table-layout": "^1.0.2",
+        "typical": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/array-back": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz",
+      "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
+    "node_modules/command-line-usage/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/typical": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-5.2.0.tgz",
+      "integrity": "sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -3425,6 +3573,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/directory-tree": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/directory-tree/-/directory-tree-3.5.2.tgz",
+      "integrity": "sha512-DsOqeZEHkZnZrVOJG3mE/J9M6J8PulImiC6I1ZpoprVlfno8GvLOPDMkxiJihklLK7B9aVudG463L1+S/kzjiw==",
+      "license": "MIT",
+      "dependencies": {
+        "command-line-args": "^5.2.0",
+        "command-line-usage": "^6.1.1"
+      },
+      "bin": {
+        "directory-tree": "bin/index.js"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -4181,6 +4345,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-replace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-replace/-/find-replace-3.0.0.tgz",
+      "integrity": "sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -5268,6 +5444,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5457,12 +5639,13 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.1.3.tgz",
-      "integrity": "sha512-oexgMV2MapI0UIWiXKkixF8J8ORxpy64OuJ/J9oVUmIthXOUCcuVEZX+dtpgq7wIfIqtBwQsKEDXejcjTsan9g==",
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.23.tgz",
+      "integrity": "sha512-mjN3fE6u/tynneLiEg56XnthzuYw+kD7mCujgVqioxyPqbmiotUCGJpIZGS/VaPg3ZDT1tvWxiVyRzeqJFm/kw==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "14.1.3",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "14.2.23",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
         "graceful-fs": "^4.2.11",
@@ -5476,18 +5659,19 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.1.3",
-        "@next/swc-darwin-x64": "14.1.3",
-        "@next/swc-linux-arm64-gnu": "14.1.3",
-        "@next/swc-linux-arm64-musl": "14.1.3",
-        "@next/swc-linux-x64-gnu": "14.1.3",
-        "@next/swc-linux-x64-musl": "14.1.3",
-        "@next/swc-win32-arm64-msvc": "14.1.3",
-        "@next/swc-win32-ia32-msvc": "14.1.3",
-        "@next/swc-win32-x64-msvc": "14.1.3"
+        "@next/swc-darwin-arm64": "14.2.23",
+        "@next/swc-darwin-x64": "14.2.23",
+        "@next/swc-linux-arm64-gnu": "14.2.23",
+        "@next/swc-linux-arm64-musl": "14.2.23",
+        "@next/swc-linux-x64-gnu": "14.2.23",
+        "@next/swc-linux-x64-musl": "14.2.23",
+        "@next/swc-win32-arm64-msvc": "14.2.23",
+        "@next/swc-win32-ia32-msvc": "14.2.23",
+        "@next/swc-win32-x64-msvc": "14.2.23"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -5496,19 +5680,22 @@
         "@opentelemetry/api": {
           "optional": true
         },
+        "@playwright/test": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         }
       }
     },
     "node_modules/next-themes": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
-      "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz",
+      "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==",
+      "license": "MIT",
       "peerDependencies": {
-        "next": "*",
-        "react": "*",
-        "react-dom": "*"
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
     "node_modules/next/node_modules/postcss": {
@@ -5539,14 +5726,17 @@
       }
     },
     "node_modules/nextjs-toploader": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-1.6.6.tgz",
-      "integrity": "sha512-LKow/aV28/DLhj4yH1E8ydF/I5QDNsb5NqlbsXBaIVFrmZ9/OGHyxPLdumvPE2IOYoQdvJ4XWoaCA1v7aivYBg==",
+      "version": "3.7.15",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-3.7.15.tgz",
+      "integrity": "sha512-DvvXEJVRPfE2j1HVXgFhmPl8pRcLb/4mvyVBDuYdMdkbEY7KJghp0fG5iOZ002cV6awbBw9j/Di7vQL8LRazxQ==",
+      "license": "MIT",
       "dependencies": {
-        "@types/nprogress": "^0.2.2",
         "nprogress": "^0.2.0",
         "prop-types": "^15.8.1"
       },
+      "funding": {
+        "url": "https://buymeacoffee.com/thesgj"
+      },
       "peerDependencies": {
         "next": ">= 6.0.0",
         "react": ">= 16.0.0",
@@ -6081,20 +6271,31 @@
       }
     },
     "node_modules/prisma": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.10.2.tgz",
-      "integrity": "sha512-hqb/JMz9/kymRE25pMWCxkdyhbnIWrq+h7S6WysJpdnCvhstbJSNP/S6mScEcqiB8Qv2F+0R3yG+osRaWqZacQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.3.0.tgz",
+      "integrity": "sha512-y+Zh3Qg+xGCWyyrNUUNaFW/OltaV/yXYuTa0WRgYkz5LGyifmAsgpv94I47+qGRocZrMGcbF2A/78/oO2zgifA==",
+      "devOptional": true,
       "hasInstallScript": true,
-      "optional": true,
-      "peer": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@prisma/engines": "5.10.2"
+        "@prisma/engines": "6.3.0"
       },
       "bin": {
         "prisma": "build/index.js"
       },
       "engines": {
-        "node": ">=16.13"
+        "node": ">=18.18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.3"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/prop-types": {
@@ -6383,6 +6584,15 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reduce-flatten": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/reduce-flatten/-/reduce-flatten-2.0.0.tgz",
+      "integrity": "sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz",
@@ -7066,6 +7276,39 @@
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/table-layout": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz",
+      "integrity": "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^4.0.1",
+        "deep-extend": "~0.6.0",
+        "typical": "^5.2.0",
+        "wordwrapjs": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/table-layout/node_modules/array-back": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz",
+      "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table-layout/node_modules/typical": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-5.2.0.tgz",
+      "integrity": "sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.1.tgz",
@@ -7373,7 +7616,7 @@
       "version": "5.4.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
       "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7382,6 +7625,15 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typical": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
+      "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -7614,6 +7866,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wordwrapjs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-4.0.1.tgz",
+      "integrity": "sha512-kKlNACbvHrkpIw6oPeYDSmdCTu2hdMHoyXLTcUKala++lx5Y+wjJ/e474Jqv5abnVmwxw08DiTuHmw69lJGksA==",
+      "license": "MIT",
+      "dependencies": {
+        "reduce-flatten": "^2.0.0",
+        "typical": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/wordwrapjs/node_modules/typical": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-5.2.0.tgz",
+      "integrity": "sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
diff --git a/package.json b/package.json
index 6d1d093..a52dd05 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@clerk/nextjs": "^4.29.9",
     "@dnd-kit/core": "^6.1.0",
     "@hookform/resolvers": "^3.3.4",
-    "@prisma/client": "^5.10.2",
+    "@prisma/client": "^6.3.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -46,13 +46,14 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
     "date-fns": "^3.4.0",
+    "directory-tree": "^3.5.2",
     "embla-carousel-react": "^8.0.0",
     "framer-motion": "^11.0.12",
     "input-otp": "^1.1.0",
     "lucide-react": "^0.356.0",
-    "next": "14.1.3",
-    "next-themes": "^0.2.1",
-    "nextjs-toploader": "^1.6.6",
+    "next": "14.2.23",
+    "next-themes": "^0.4.4",
+    "nextjs-toploader": "^3.7.15",
     "react": "^18",
     "react-confetti": "^6.1.0",
     "react-day-picker": "^8.10.0",
@@ -74,6 +75,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
     "postcss": "^8",
+    "prisma": "^6.3.0",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
diff --git a/src/app/api/embed/[formId]/js/route.ts b/src/app/api/embed/[formId]/js/route.ts
index eddd8dd..57dac2a 100644
--- a/src/app/api/embed/[formId]/js/route.ts
+++ b/src/app/api/embed/[formId]/js/route.ts
@@ -62,7 +62,7 @@ export async function GET(
 
     // Get all styles as a single string and escape it for JavaScript
     const styles = `
-      ${getAllStyles(form.theme)}
+      ${getAllStyles()}
 
       .quick-form-two-column {
         width: 100%;
diff --git a/src/app/api/placeholder/[width]/[height]/route.ts b/src/app/api/placeholder/[width]/[height]/route.ts
deleted file mode 100644
index 5a2cc28..0000000
--- a/src/app/api/placeholder/[width]/[height]/route.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NextResponse } from "next/server";
-
-export const dynamic = 'force-dynamic';
-
-export async function GET(
-  request: Request,
-  { params }: { params: { width: string; height: string } }
-) {
-  const width = parseInt(params.width);
-  const height = parseInt(params.height);
-
-  // Use a placeholder image service
-  const imageUrl = `https://via.placeholder.com/${width}x${height}`;
-
-  try {
-    const response = await fetch(imageUrl);
-    const buffer = await response.arrayBuffer();
-
-    return new NextResponse(buffer, {
-      headers: {
-        'Content-Type': 'image/png',
-        'Cache-Control': 'public, max-age=31536000',
-      },
-    });
-  } catch (error) {
-    console.error('Error fetching placeholder image:', error);
-    return new NextResponse('Error generating placeholder image', { status: 500 });
-  }
-}
diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx
index 914e761..7cf09e0 100644
--- a/src/providers/ThemeProvider.tsx
+++ b/src/providers/ThemeProvider.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
+import { type ThemeProviderProps } from 'next-themes'
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     return <NextThemesProvider {...props}>{children}</NextThemesProvider>
diff --git a/xz.json b/xz.json
new file mode 100644
index 0000000..386f8dd
--- /dev/null
+++ b/xz.json
@@ -0,0 +1,25989 @@
+{
+  "path": "./",
+  "name": ".",
+  "children": [
+    {
+      "path": ".env",
+      "name": ".env",
+      "type": "file"
+    },
+    {
+      "path": ".env.local",
+      "name": ".env.local",
+      "type": "file"
+    },
+    {
+      "path": ".eslintrc.json",
+      "name": ".eslintrc.json",
+      "type": "file"
+    },
+    {
+      "path": ".git",
+      "name": ".git",
+      "children": [
+        {
+          "path": ".git\\COMMIT_EDITMSG",
+          "name": "COMMIT_EDITMSG",
+          "type": "file"
+        },
+        {
+          "path": ".git\\config",
+          "name": "config",
+          "type": "file"
+        },
+        {
+          "path": ".git\\description",
+          "name": "description",
+          "type": "file"
+        },
+        {
+          "path": ".git\\FETCH_HEAD",
+          "name": "FETCH_HEAD",
+          "type": "file"
+        },
+        {
+          "path": ".git\\HEAD",
+          "name": "HEAD",
+          "type": "file"
+        },
+        {
+          "path": ".git\\hooks",
+          "name": "hooks",
+          "children": [
+            {
+              "path": ".git\\hooks\\applypatch-msg.sample",
+              "name": "applypatch-msg.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\commit-msg.sample",
+              "name": "commit-msg.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\fsmonitor-watchman.sample",
+              "name": "fsmonitor-watchman.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\post-update.sample",
+              "name": "post-update.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\pre-applypatch.sample",
+              "name": "pre-applypatch.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\pre-commit.sample",
+              "name": "pre-commit.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\pre-merge-commit.sample",
+              "name": "pre-merge-commit.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\pre-push.sample",
+              "name": "pre-push.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\pre-rebase.sample",
+              "name": "pre-rebase.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\pre-receive.sample",
+              "name": "pre-receive.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\prepare-commit-msg.sample",
+              "name": "prepare-commit-msg.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\push-to-checkout.sample",
+              "name": "push-to-checkout.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\sendemail-validate.sample",
+              "name": "sendemail-validate.sample",
+              "type": "file"
+            },
+            {
+              "path": ".git\\hooks\\update.sample",
+              "name": "update.sample",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": ".git\\index",
+          "name": "index",
+          "type": "file"
+        },
+        {
+          "path": ".git\\info",
+          "name": "info",
+          "children": [
+            {
+              "path": ".git\\info\\exclude",
+              "name": "exclude",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": ".git\\logs",
+          "name": "logs",
+          "children": [
+            {
+              "path": ".git\\logs\\HEAD",
+              "name": "HEAD",
+              "type": "file"
+            },
+            {
+              "path": ".git\\logs\\refs",
+              "name": "refs",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": ".git\\objects",
+          "name": "objects",
+          "children": [
+            {
+              "path": ".git\\objects\\02",
+              "name": "02",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\03",
+              "name": "03",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\04",
+              "name": "04",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\09",
+              "name": "09",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\0a",
+              "name": "0a",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\0c",
+              "name": "0c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\0e",
+              "name": "0e",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\11",
+              "name": "11",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\13",
+              "name": "13",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\14",
+              "name": "14",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\18",
+              "name": "18",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\19",
+              "name": "19",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\1c",
+              "name": "1c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\1d",
+              "name": "1d",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\22",
+              "name": "22",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\26",
+              "name": "26",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\27",
+              "name": "27",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\28",
+              "name": "28",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\29",
+              "name": "29",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\2c",
+              "name": "2c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\33",
+              "name": "33",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\35",
+              "name": "35",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\3b",
+              "name": "3b",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\3c",
+              "name": "3c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\3d",
+              "name": "3d",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\3e",
+              "name": "3e",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\41",
+              "name": "41",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\44",
+              "name": "44",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\45",
+              "name": "45",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\46",
+              "name": "46",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\47",
+              "name": "47",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\4a",
+              "name": "4a",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\4b",
+              "name": "4b",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\4c",
+              "name": "4c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\4e",
+              "name": "4e",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\50",
+              "name": "50",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\53",
+              "name": "53",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\55",
+              "name": "55",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\56",
+              "name": "56",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\59",
+              "name": "59",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\5a",
+              "name": "5a",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\5c",
+              "name": "5c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\5e",
+              "name": "5e",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\5f",
+              "name": "5f",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\61",
+              "name": "61",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\63",
+              "name": "63",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\67",
+              "name": "67",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\69",
+              "name": "69",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\6a",
+              "name": "6a",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\6b",
+              "name": "6b",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\6e",
+              "name": "6e",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\73",
+              "name": "73",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\75",
+              "name": "75",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\77",
+              "name": "77",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\78",
+              "name": "78",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\79",
+              "name": "79",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\7b",
+              "name": "7b",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\7c",
+              "name": "7c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\7f",
+              "name": "7f",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\80",
+              "name": "80",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\84",
+              "name": "84",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\86",
+              "name": "86",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\87",
+              "name": "87",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\8b",
+              "name": "8b",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\8c",
+              "name": "8c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\91",
+              "name": "91",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\93",
+              "name": "93",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\94",
+              "name": "94",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\95",
+              "name": "95",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\96",
+              "name": "96",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\9a",
+              "name": "9a",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\9c",
+              "name": "9c",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\9f",
+              "name": "9f",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\a2",
+              "name": "a2",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\a3",
+              "name": "a3",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\a9",
+              "name": "a9",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\ad",
+              "name": "ad",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\ae",
+              "name": "ae",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\b1",
+              "name": "b1",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\b2",
+              "name": "b2",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\b4",
+              "name": "b4",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\b5",
+              "name": "b5",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\b7",
+              "name": "b7",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\b9",
+              "name": "b9",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\ba",
+              "name": "ba",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\bc",
+              "name": "bc",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\be",
+              "name": "be",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\c0",
+              "name": "c0",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\c4",
+              "name": "c4",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\ca",
+              "name": "ca",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\cb",
+              "name": "cb",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\cc",
+              "name": "cc",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\cd",
+              "name": "cd",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\ce",
+              "name": "ce",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\d0",
+              "name": "d0",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\d7",
+              "name": "d7",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\d8",
+              "name": "d8",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\d9",
+              "name": "d9",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\da",
+              "name": "da",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\db",
+              "name": "db",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\dd",
+              "name": "dd",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\e1",
+              "name": "e1",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\e3",
+              "name": "e3",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\e5",
+              "name": "e5",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\e6",
+              "name": "e6",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\e9",
+              "name": "e9",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\ea",
+              "name": "ea",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\ed",
+              "name": "ed",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\f2",
+              "name": "f2",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\f3",
+              "name": "f3",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\fc",
+              "name": "fc",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\info",
+              "name": "info",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\objects\\pack",
+              "name": "pack",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": ".git\\ORIG_HEAD",
+          "name": "ORIG_HEAD",
+          "type": "file"
+        },
+        {
+          "path": ".git\\packed-refs",
+          "name": "packed-refs",
+          "type": "file"
+        },
+        {
+          "path": ".git\\refs",
+          "name": "refs",
+          "children": [
+            {
+              "path": ".git\\refs\\heads",
+              "name": "heads",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\refs\\remotes",
+              "name": "remotes",
+              "type": "directory"
+            },
+            {
+              "path": ".git\\refs\\tags",
+              "name": "tags",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": ".gitignore",
+      "name": ".gitignore",
+      "type": "file"
+    },
+    {
+      "path": ".next",
+      "name": ".next",
+      "children": [
+        {
+          "path": ".next\\app-build-manifest.json",
+          "name": "app-build-manifest.json",
+          "type": "file"
+        },
+        {
+          "path": ".next\\build-manifest.json",
+          "name": "build-manifest.json",
+          "type": "file"
+        },
+        {
+          "path": ".next\\cache",
+          "name": "cache",
+          "children": [
+            {
+              "path": ".next\\cache\\swc",
+              "name": "swc",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\cache\\webpack",
+              "name": "webpack",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": ".next\\package.json",
+          "name": "package.json",
+          "type": "file"
+        },
+        {
+          "path": ".next\\react-loadable-manifest.json",
+          "name": "react-loadable-manifest.json",
+          "type": "file"
+        },
+        {
+          "path": ".next\\server",
+          "name": "server",
+          "children": [
+            {
+              "path": ".next\\server\\app",
+              "name": "app",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\server\\app-paths-manifest.json",
+              "name": "app-paths-manifest.json",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\edge-runtime-webpack.js",
+              "name": "edge-runtime-webpack.js",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\interception-route-rewrite-manifest.js",
+              "name": "interception-route-rewrite-manifest.js",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\middleware-build-manifest.js",
+              "name": "middleware-build-manifest.js",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\middleware-manifest.json",
+              "name": "middleware-manifest.json",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\middleware-react-loadable-manifest.js",
+              "name": "middleware-react-loadable-manifest.js",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\next-font-manifest.js",
+              "name": "next-font-manifest.js",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\next-font-manifest.json",
+              "name": "next-font-manifest.json",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\pages-manifest.json",
+              "name": "pages-manifest.json",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\server-reference-manifest.js",
+              "name": "server-reference-manifest.js",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\server-reference-manifest.json",
+              "name": "server-reference-manifest.json",
+              "type": "file"
+            },
+            {
+              "path": ".next\\server\\src",
+              "name": "src",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\server\\static",
+              "name": "static",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\server\\vendor-chunks",
+              "name": "vendor-chunks",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\server\\webpack-runtime.js",
+              "name": "webpack-runtime.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": ".next\\static",
+          "name": "static",
+          "children": [
+            {
+              "path": ".next\\static\\chunks",
+              "name": "chunks",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\static\\css",
+              "name": "css",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\static\\development",
+              "name": "development",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\static\\media",
+              "name": "media",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\static\\webpack",
+              "name": "webpack",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": ".next\\trace",
+          "name": "trace",
+          "type": "file"
+        },
+        {
+          "path": ".next\\types",
+          "name": "types",
+          "children": [
+            {
+              "path": ".next\\types\\app",
+              "name": "app",
+              "type": "directory"
+            },
+            {
+              "path": ".next\\types\\package.json",
+              "name": "package.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": ".vscode",
+      "name": ".vscode",
+      "children": [
+        {
+          "path": ".vscode\\settings.json",
+          "name": "settings.json",
+          "type": "file"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": "audit.js",
+      "name": "audit.js",
+      "type": "file"
+    },
+    {
+      "path": "components.json",
+      "name": "components.json",
+      "type": "file"
+    },
+    {
+      "path": "Docs",
+      "name": "Docs",
+      "children": [
+        {
+          "path": "Docs\\AddElement.md",
+          "name": "AddElement.md",
+          "type": "file"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": "next-env.d.ts",
+      "name": "next-env.d.ts",
+      "type": "file"
+    },
+    {
+      "path": "next.config.mjs",
+      "name": "next.config.mjs",
+      "type": "file"
+    },
+    {
+      "path": "node_modules",
+      "name": "node_modules",
+      "children": [
+        {
+          "path": "node_modules\\.bin",
+          "name": ".bin",
+          "children": [
+            {
+              "path": "node_modules\\.bin\\acorn",
+              "name": "acorn",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\acorn.cmd",
+              "name": "acorn.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\acorn.ps1",
+              "name": "acorn.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\autoprefixer",
+              "name": "autoprefixer",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\autoprefixer.cmd",
+              "name": "autoprefixer.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\autoprefixer.ps1",
+              "name": "autoprefixer.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\browserslist",
+              "name": "browserslist",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\browserslist.cmd",
+              "name": "browserslist.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\browserslist.ps1",
+              "name": "browserslist.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\cssesc",
+              "name": "cssesc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\cssesc.cmd",
+              "name": "cssesc.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\cssesc.ps1",
+              "name": "cssesc.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\directory-tree",
+              "name": "directory-tree",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\directory-tree.cmd",
+              "name": "directory-tree.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\directory-tree.ps1",
+              "name": "directory-tree.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\eslint",
+              "name": "eslint",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\eslint.cmd",
+              "name": "eslint.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\eslint.ps1",
+              "name": "eslint.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\glob",
+              "name": "glob",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\glob.cmd",
+              "name": "glob.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\glob.ps1",
+              "name": "glob.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\jiti",
+              "name": "jiti",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\jiti.cmd",
+              "name": "jiti.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\jiti.ps1",
+              "name": "jiti.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\js-yaml",
+              "name": "js-yaml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\js-yaml.cmd",
+              "name": "js-yaml.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\js-yaml.ps1",
+              "name": "js-yaml.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\json5",
+              "name": "json5",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\json5.cmd",
+              "name": "json5.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\json5.ps1",
+              "name": "json5.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\loose-envify",
+              "name": "loose-envify",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\loose-envify.cmd",
+              "name": "loose-envify.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\loose-envify.ps1",
+              "name": "loose-envify.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\nanoid",
+              "name": "nanoid",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\nanoid.cmd",
+              "name": "nanoid.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\nanoid.ps1",
+              "name": "nanoid.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\next",
+              "name": "next",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\next.cmd",
+              "name": "next.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\next.ps1",
+              "name": "next.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\node-which",
+              "name": "node-which",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\node-which.cmd",
+              "name": "node-which.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\node-which.ps1",
+              "name": "node-which.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\prebuild-install",
+              "name": "prebuild-install",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\prebuild-install.cmd",
+              "name": "prebuild-install.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\prebuild-install.ps1",
+              "name": "prebuild-install.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\prisma",
+              "name": "prisma",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\prisma.cmd",
+              "name": "prisma.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\prisma.ps1",
+              "name": "prisma.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\rc",
+              "name": "rc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\rc.cmd",
+              "name": "rc.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\rc.ps1",
+              "name": "rc.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\resolve",
+              "name": "resolve",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\resolve.cmd",
+              "name": "resolve.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\resolve.ps1",
+              "name": "resolve.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\rimraf",
+              "name": "rimraf",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\rimraf.cmd",
+              "name": "rimraf.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\rimraf.ps1",
+              "name": "rimraf.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\semver",
+              "name": "semver",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\semver.cmd",
+              "name": "semver.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\semver.ps1",
+              "name": "semver.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\sucrase",
+              "name": "sucrase",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\sucrase-node",
+              "name": "sucrase-node",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\sucrase-node.cmd",
+              "name": "sucrase-node.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\sucrase-node.ps1",
+              "name": "sucrase-node.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\sucrase.cmd",
+              "name": "sucrase.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\sucrase.ps1",
+              "name": "sucrase.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tailwind",
+              "name": "tailwind",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tailwind.cmd",
+              "name": "tailwind.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tailwind.ps1",
+              "name": "tailwind.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tailwindcss",
+              "name": "tailwindcss",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tailwindcss.cmd",
+              "name": "tailwindcss.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tailwindcss.ps1",
+              "name": "tailwindcss.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tsc",
+              "name": "tsc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tsc.cmd",
+              "name": "tsc.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tsc.ps1",
+              "name": "tsc.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tsserver",
+              "name": "tsserver",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tsserver.cmd",
+              "name": "tsserver.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\tsserver.ps1",
+              "name": "tsserver.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\update-browserslist-db",
+              "name": "update-browserslist-db",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\update-browserslist-db.cmd",
+              "name": "update-browserslist-db.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\update-browserslist-db.ps1",
+              "name": "update-browserslist-db.ps1",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\yaml",
+              "name": "yaml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\yaml.cmd",
+              "name": "yaml.cmd",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\.bin\\yaml.ps1",
+              "name": "yaml.ps1",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\.cache",
+          "name": ".cache",
+          "children": [
+            {
+              "path": "node_modules\\.cache\\prisma",
+              "name": "prisma",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\.package-lock.json",
+          "name": ".package-lock.json",
+          "type": "file"
+        },
+        {
+          "path": "node_modules\\.prisma",
+          "name": ".prisma",
+          "children": [
+            {
+              "path": "node_modules\\.prisma\\client",
+              "name": "client",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@aashutoshrathi",
+          "name": "@aashutoshrathi",
+          "children": [
+            {
+              "path": "node_modules\\@aashutoshrathi\\word-wrap",
+              "name": "word-wrap",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@alloc",
+          "name": "@alloc",
+          "children": [
+            {
+              "path": "node_modules\\@alloc\\quick-lru",
+              "name": "quick-lru",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@babel",
+          "name": "@babel",
+          "children": [
+            {
+              "path": "node_modules\\@babel\\runtime",
+              "name": "runtime",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@clerk",
+          "name": "@clerk",
+          "children": [
+            {
+              "path": "node_modules\\@clerk\\backend",
+              "name": "backend",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@clerk\\clerk-react",
+              "name": "clerk-react",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@clerk\\clerk-sdk-node",
+              "name": "clerk-sdk-node",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@clerk\\nextjs",
+              "name": "nextjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@clerk\\shared",
+              "name": "shared",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@clerk\\types",
+              "name": "types",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@dnd-kit",
+          "name": "@dnd-kit",
+          "children": [
+            {
+              "path": "node_modules\\@dnd-kit\\accessibility",
+              "name": "accessibility",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@dnd-kit\\core",
+              "name": "core",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@dnd-kit\\utilities",
+              "name": "utilities",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@eslint",
+          "name": "@eslint",
+          "children": [
+            {
+              "path": "node_modules\\@eslint\\eslintrc",
+              "name": "eslintrc",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@eslint\\js",
+              "name": "js",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@eslint-community",
+          "name": "@eslint-community",
+          "children": [
+            {
+              "path": "node_modules\\@eslint-community\\eslint-utils",
+              "name": "eslint-utils",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@eslint-community\\regexpp",
+              "name": "regexpp",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@floating-ui",
+          "name": "@floating-ui",
+          "children": [
+            {
+              "path": "node_modules\\@floating-ui\\core",
+              "name": "core",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@floating-ui\\dom",
+              "name": "dom",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@floating-ui\\react-dom",
+              "name": "react-dom",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@floating-ui\\utils",
+              "name": "utils",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@hookform",
+          "name": "@hookform",
+          "children": [
+            {
+              "path": "node_modules\\@hookform\\resolvers",
+              "name": "resolvers",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@humanwhocodes",
+          "name": "@humanwhocodes",
+          "children": [
+            {
+              "path": "node_modules\\@humanwhocodes\\config-array",
+              "name": "config-array",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@humanwhocodes\\module-importer",
+              "name": "module-importer",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@humanwhocodes\\object-schema",
+              "name": "object-schema",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@isaacs",
+          "name": "@isaacs",
+          "children": [
+            {
+              "path": "node_modules\\@isaacs\\cliui",
+              "name": "cliui",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@jridgewell",
+          "name": "@jridgewell",
+          "children": [
+            {
+              "path": "node_modules\\@jridgewell\\gen-mapping",
+              "name": "gen-mapping",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@jridgewell\\resolve-uri",
+              "name": "resolve-uri",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@jridgewell\\set-array",
+              "name": "set-array",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@jridgewell\\sourcemap-codec",
+              "name": "sourcemap-codec",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@jridgewell\\trace-mapping",
+              "name": "trace-mapping",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@next",
+          "name": "@next",
+          "children": [
+            {
+              "path": "node_modules\\@next\\env",
+              "name": "env",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@next\\eslint-plugin-next",
+              "name": "eslint-plugin-next",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@next\\swc-win32-x64-msvc",
+              "name": "swc-win32-x64-msvc",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@nodelib",
+          "name": "@nodelib",
+          "children": [
+            {
+              "path": "node_modules\\@nodelib\\fs.scandir",
+              "name": "fs.scandir",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@nodelib\\fs.stat",
+              "name": "fs.stat",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@nodelib\\fs.walk",
+              "name": "fs.walk",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@peculiar",
+          "name": "@peculiar",
+          "children": [
+            {
+              "path": "node_modules\\@peculiar\\asn1-schema",
+              "name": "asn1-schema",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@peculiar\\json-schema",
+              "name": "json-schema",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@peculiar\\webcrypto",
+              "name": "webcrypto",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@pkgjs",
+          "name": "@pkgjs",
+          "children": [
+            {
+              "path": "node_modules\\@pkgjs\\parseargs",
+              "name": "parseargs",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@prisma",
+          "name": "@prisma",
+          "children": [
+            {
+              "path": "node_modules\\@prisma\\client",
+              "name": "client",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@prisma\\debug",
+              "name": "debug",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@prisma\\engines",
+              "name": "engines",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@prisma\\engines-version",
+              "name": "engines-version",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@prisma\\fetch-engine",
+              "name": "fetch-engine",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@prisma\\get-platform",
+              "name": "get-platform",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@radix-ui",
+          "name": "@radix-ui",
+          "children": [
+            {
+              "path": "node_modules\\@radix-ui\\number",
+              "name": "number",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\primitive",
+              "name": "primitive",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-accordion",
+              "name": "react-accordion",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-alert-dialog",
+              "name": "react-alert-dialog",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-arrow",
+              "name": "react-arrow",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-aspect-ratio",
+              "name": "react-aspect-ratio",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-avatar",
+              "name": "react-avatar",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-checkbox",
+              "name": "react-checkbox",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-collapsible",
+              "name": "react-collapsible",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-collection",
+              "name": "react-collection",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-compose-refs",
+              "name": "react-compose-refs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-context",
+              "name": "react-context",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-context-menu",
+              "name": "react-context-menu",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-dialog",
+              "name": "react-dialog",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-direction",
+              "name": "react-direction",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-dismissable-layer",
+              "name": "react-dismissable-layer",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-dropdown-menu",
+              "name": "react-dropdown-menu",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-focus-guards",
+              "name": "react-focus-guards",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-focus-scope",
+              "name": "react-focus-scope",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-hover-card",
+              "name": "react-hover-card",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-id",
+              "name": "react-id",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-label",
+              "name": "react-label",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-menu",
+              "name": "react-menu",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-menubar",
+              "name": "react-menubar",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-navigation-menu",
+              "name": "react-navigation-menu",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-popover",
+              "name": "react-popover",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-popper",
+              "name": "react-popper",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-portal",
+              "name": "react-portal",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-presence",
+              "name": "react-presence",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-primitive",
+              "name": "react-primitive",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-progress",
+              "name": "react-progress",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-radio-group",
+              "name": "react-radio-group",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-roving-focus",
+              "name": "react-roving-focus",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-scroll-area",
+              "name": "react-scroll-area",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-select",
+              "name": "react-select",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-separator",
+              "name": "react-separator",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-slider",
+              "name": "react-slider",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-slot",
+              "name": "react-slot",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-switch",
+              "name": "react-switch",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-tabs",
+              "name": "react-tabs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-toast",
+              "name": "react-toast",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-toggle",
+              "name": "react-toggle",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-toggle-group",
+              "name": "react-toggle-group",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-tooltip",
+              "name": "react-tooltip",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-use-callback-ref",
+              "name": "react-use-callback-ref",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-use-controllable-state",
+              "name": "react-use-controllable-state",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-use-escape-keydown",
+              "name": "react-use-escape-keydown",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-use-layout-effect",
+              "name": "react-use-layout-effect",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-use-previous",
+              "name": "react-use-previous",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-use-rect",
+              "name": "react-use-rect",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-use-size",
+              "name": "react-use-size",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\react-visually-hidden",
+              "name": "react-visually-hidden",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@radix-ui\\rect",
+              "name": "rect",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@rushstack",
+          "name": "@rushstack",
+          "children": [
+            {
+              "path": "node_modules\\@rushstack\\eslint-patch",
+              "name": "eslint-patch",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@swc",
+          "name": "@swc",
+          "children": [
+            {
+              "path": "node_modules\\@swc\\counter",
+              "name": "counter",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@swc\\helpers",
+              "name": "helpers",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@types",
+          "name": "@types",
+          "children": [
+            {
+              "path": "node_modules\\@types\\body-parser",
+              "name": "body-parser",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\connect",
+              "name": "connect",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\cookies",
+              "name": "cookies",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\express",
+              "name": "express",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\express-serve-static-core",
+              "name": "express-serve-static-core",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\http-errors",
+              "name": "http-errors",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\json5",
+              "name": "json5",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\keygrip",
+              "name": "keygrip",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\mime",
+              "name": "mime",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\node",
+              "name": "node",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\node-fetch",
+              "name": "node-fetch",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\prop-types",
+              "name": "prop-types",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\qs",
+              "name": "qs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\range-parser",
+              "name": "range-parser",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\react",
+              "name": "react",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\react-dom",
+              "name": "react-dom",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\scheduler",
+              "name": "scheduler",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\send",
+              "name": "send",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@types\\serve-static",
+              "name": "serve-static",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@typescript-eslint",
+          "name": "@typescript-eslint",
+          "children": [
+            {
+              "path": "node_modules\\@typescript-eslint\\parser",
+              "name": "parser",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@typescript-eslint\\scope-manager",
+              "name": "scope-manager",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@typescript-eslint\\types",
+              "name": "types",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@typescript-eslint\\typescript-estree",
+              "name": "typescript-estree",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\@typescript-eslint\\visitor-keys",
+              "name": "visitor-keys",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\@ungap",
+          "name": "@ungap",
+          "children": [
+            {
+              "path": "node_modules\\@ungap\\structured-clone",
+              "name": "structured-clone",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\acorn",
+          "name": "acorn",
+          "children": [
+            {
+              "path": "node_modules\\acorn\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\acorn\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\acorn\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\acorn-jsx",
+          "name": "acorn-jsx",
+          "children": [
+            {
+              "path": "node_modules\\acorn-jsx\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn-jsx\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn-jsx\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn-jsx\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn-jsx\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\acorn-jsx\\xhtml.js",
+              "name": "xhtml.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ajv",
+          "name": "ajv",
+          "children": [
+            {
+              "path": "node_modules\\ajv\\.tonic_example.js",
+              "name": ".tonic_example.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ajv\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\ajv\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\ajv\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ajv\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ajv\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ajv\\scripts",
+              "name": "scripts",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ansi-regex",
+          "name": "ansi-regex",
+          "children": [
+            {
+              "path": "node_modules\\ansi-regex\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-regex\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-regex\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-regex\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-regex\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ansi-styles",
+          "name": "ansi-styles",
+          "children": [
+            {
+              "path": "node_modules\\ansi-styles\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-styles\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-styles\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-styles\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ansi-styles\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\any-promise",
+          "name": "any-promise",
+          "children": [
+            {
+              "path": "node_modules\\any-promise\\.jshintrc",
+              "name": ".jshintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\implementation.d.ts",
+              "name": "implementation.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\loader.js",
+              "name": "loader.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\optional.js",
+              "name": "optional.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\register",
+              "name": "register",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\any-promise\\register-shim.js",
+              "name": "register-shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\register.d.ts",
+              "name": "register.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\any-promise\\register.js",
+              "name": "register.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\anymatch",
+          "name": "anymatch",
+          "children": [
+            {
+              "path": "node_modules\\anymatch\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\anymatch\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\anymatch\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\anymatch\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\anymatch\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\arg",
+          "name": "arg",
+          "children": [
+            {
+              "path": "node_modules\\arg\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arg\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arg\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arg\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arg\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\argparse",
+          "name": "argparse",
+          "children": [
+            {
+              "path": "node_modules\\argparse\\argparse.js",
+              "name": "argparse.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\argparse\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\argparse\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\argparse\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\argparse\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\argparse\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\aria-hidden",
+          "name": "aria-hidden",
+          "children": [
+            {
+              "path": "node_modules\\aria-hidden\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\aria-hidden\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\aria-hidden\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\aria-hidden\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\aria-query",
+          "name": "aria-query",
+          "children": [
+            {
+              "path": "node_modules\\aria-query\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\aria-query\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\aria-query\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\aria-query\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\aria-query\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array-back",
+          "name": "array-back",
+          "children": [
+            {
+              "path": "node_modules\\array-back\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array-back\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-back\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-back\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-back\\README.hbs",
+              "name": "README.hbs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-back\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array-buffer-byte-length",
+          "name": "array-buffer-byte-length",
+          "children": [
+            {
+              "path": "node_modules\\array-buffer-byte-length\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array-buffer-byte-length\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array-includes",
+          "name": "array-includes",
+          "children": [
+            {
+              "path": "node_modules\\array-includes\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array-includes\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-includes\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array-union",
+          "name": "array-union",
+          "children": [
+            {
+              "path": "node_modules\\array-union\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-union\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-union\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-union\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array-union\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array.prototype.filter",
+          "name": "array.prototype.filter",
+          "children": [
+            {
+              "path": "node_modules\\array.prototype.filter\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.filter\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array.prototype.findlast",
+          "name": "array.prototype.findlast",
+          "children": [
+            {
+              "path": "node_modules\\array.prototype.findlast\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlast\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array.prototype.findlastindex",
+          "name": "array.prototype.findlastindex",
+          "children": [
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.findlastindex\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array.prototype.flat",
+          "name": "array.prototype.flat",
+          "children": [
+            {
+              "path": "node_modules\\array.prototype.flat\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flat\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array.prototype.flatmap",
+          "name": "array.prototype.flatmap",
+          "children": [
+            {
+              "path": "node_modules\\array.prototype.flatmap\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.flatmap\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array.prototype.toreversed",
+          "name": "array.prototype.toreversed",
+          "children": [
+            {
+              "path": "node_modules\\array.prototype.toreversed\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.toreversed\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\array.prototype.tosorted",
+          "name": "array.prototype.tosorted",
+          "children": [
+            {
+              "path": "node_modules\\array.prototype.tosorted\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\array.prototype.tosorted\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\arraybuffer.prototype.slice",
+          "name": "arraybuffer.prototype.slice",
+          "children": [
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\arraybuffer.prototype.slice\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\asn1js",
+          "name": "asn1js",
+          "children": [
+            {
+              "path": "node_modules\\asn1js\\build",
+              "name": "build",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\asn1js\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asn1js\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asn1js\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ast-types-flow",
+          "name": "ast-types-flow",
+          "children": [
+            {
+              "path": "node_modules\\ast-types-flow\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\ast-types-flow\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ast-types-flow\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ast-types-flow\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\asynciterator.prototype",
+          "name": "asynciterator.prototype",
+          "children": [
+            {
+              "path": "node_modules\\asynciterator.prototype\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynciterator.prototype\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\asynciterator.prototype\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynciterator.prototype\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynciterator.prototype\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynciterator.prototype\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynciterator.prototype\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynciterator.prototype\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\asynckit",
+          "name": "asynckit",
+          "children": [
+            {
+              "path": "node_modules\\asynckit\\bench.js",
+              "name": "bench.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\asynckit\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\parallel.js",
+              "name": "parallel.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\serial.js",
+              "name": "serial.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\serialOrdered.js",
+              "name": "serialOrdered.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\asynckit\\stream.js",
+              "name": "stream.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\autoprefixer",
+          "name": "autoprefixer",
+          "children": [
+            {
+              "path": "node_modules\\autoprefixer\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\autoprefixer\\data",
+              "name": "data",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\autoprefixer\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\autoprefixer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\autoprefixer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\autoprefixer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\available-typed-arrays",
+          "name": "available-typed-arrays",
+          "children": [
+            {
+              "path": "node_modules\\available-typed-arrays\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\available-typed-arrays\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\axe-core",
+          "name": "axe-core",
+          "children": [
+            {
+              "path": "node_modules\\axe-core\\axe.d.ts",
+              "name": "axe.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axe-core\\axe.js",
+              "name": "axe.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axe-core\\axe.min.js",
+              "name": "axe.min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axe-core\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axe-core\\locales",
+              "name": "locales",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\axe-core\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axe-core\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axe-core\\sri-history.json",
+              "name": "sri-history.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\axobject-query",
+          "name": "axobject-query",
+          "children": [
+            {
+              "path": "node_modules\\axobject-query\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axobject-query\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\axobject-query\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axobject-query\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\axobject-query\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\balanced-match",
+          "name": "balanced-match",
+          "children": [
+            {
+              "path": "node_modules\\balanced-match\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\balanced-match\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\balanced-match\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\balanced-match\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\balanced-match\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\base64-js",
+          "name": "base64-js",
+          "children": [
+            {
+              "path": "node_modules\\base64-js\\base64js.min.js",
+              "name": "base64js.min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\base64-js\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\base64-js\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\base64-js\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\base64-js\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\base64-js\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\binary-extensions",
+          "name": "binary-extensions",
+          "children": [
+            {
+              "path": "node_modules\\binary-extensions\\binary-extensions.json",
+              "name": "binary-extensions.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\binary-extensions\\binary-extensions.json.d.ts",
+              "name": "binary-extensions.json.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\binary-extensions\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\binary-extensions\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\binary-extensions\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\binary-extensions\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\binary-extensions\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\bl",
+          "name": "bl",
+          "children": [
+            {
+              "path": "node_modules\\bl\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\bl\\bl.js",
+              "name": "bl.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\bl\\BufferList.js",
+              "name": "BufferList.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\bl\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\bl\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\bl\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\bl\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\brace-expansion",
+          "name": "brace-expansion",
+          "children": [
+            {
+              "path": "node_modules\\brace-expansion\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\brace-expansion\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\brace-expansion\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\brace-expansion\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\braces",
+          "name": "braces",
+          "children": [
+            {
+              "path": "node_modules\\braces\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\braces\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\braces\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\braces\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\braces\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\browserslist",
+          "name": "browserslist",
+          "children": [
+            {
+              "path": "node_modules\\browserslist\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\cli.js",
+              "name": "cli.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\error.d.ts",
+              "name": "error.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\error.js",
+              "name": "error.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\node.js",
+              "name": "node.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\parse.js",
+              "name": "parse.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\browserslist\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\buffer",
+          "name": "buffer",
+          "children": [
+            {
+              "path": "node_modules\\buffer\\AUTHORS.md",
+              "name": "AUTHORS.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\buffer\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\buffer\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\buffer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\buffer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\buffer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\busboy",
+          "name": "busboy",
+          "children": [
+            {
+              "path": "node_modules\\busboy\\.eslintrc.js",
+              "name": ".eslintrc.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\busboy\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\busboy\\bench",
+              "name": "bench",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\busboy\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\busboy\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\busboy\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\busboy\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\busboy\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\call-bind",
+          "name": "call-bind",
+          "children": [
+            {
+              "path": "node_modules\\call-bind\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\call-bind\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\callBound.js",
+              "name": "callBound.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\call-bind\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\callsites",
+          "name": "callsites",
+          "children": [
+            {
+              "path": "node_modules\\callsites\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\callsites\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\callsites\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\callsites\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\callsites\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\camelcase",
+          "name": "camelcase",
+          "children": [
+            {
+              "path": "node_modules\\camelcase\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\camelcase-css",
+          "name": "camelcase-css",
+          "children": [
+            {
+              "path": "node_modules\\camelcase-css\\index-es5.js",
+              "name": "index-es5.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-css\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-css\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-css\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-css\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\camelcase-keys",
+          "name": "camelcase-keys",
+          "children": [
+            {
+              "path": "node_modules\\camelcase-keys\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-keys\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-keys\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-keys\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\camelcase-keys\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\caniuse-lite",
+          "name": "caniuse-lite",
+          "children": [
+            {
+              "path": "node_modules\\caniuse-lite\\data",
+              "name": "data",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\caniuse-lite\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\caniuse-lite\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\caniuse-lite\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\caniuse-lite\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\canvas",
+          "name": "canvas",
+          "children": [
+            {
+              "path": "node_modules\\canvas\\binding.gyp",
+              "name": "binding.gyp",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\canvas\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\canvas\\build",
+              "name": "build",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\canvas\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\canvas\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\canvas\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\canvas\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\canvas\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\canvas\\src",
+              "name": "src",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\canvas\\util",
+              "name": "util",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\chalk",
+          "name": "chalk",
+          "children": [
+            {
+              "path": "node_modules\\chalk\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chalk\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chalk\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chalk\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chalk\\source",
+              "name": "source",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\chokidar",
+          "name": "chokidar",
+          "children": [
+            {
+              "path": "node_modules\\chokidar\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chokidar\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\chokidar\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chokidar\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\chokidar\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chokidar\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chokidar\\types",
+              "name": "types",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\chownr",
+          "name": "chownr",
+          "children": [
+            {
+              "path": "node_modules\\chownr\\chownr.js",
+              "name": "chownr.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chownr\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chownr\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\chownr\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\class-variance-authority",
+          "name": "class-variance-authority",
+          "children": [
+            {
+              "path": "node_modules\\class-variance-authority\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\class-variance-authority\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\class-variance-authority\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\class-variance-authority\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\client-only",
+          "name": "client-only",
+          "children": [
+            {
+              "path": "node_modules\\client-only\\error.js",
+              "name": "error.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\client-only\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\client-only\\package.json",
+              "name": "package.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\clsx",
+          "name": "clsx",
+          "children": [
+            {
+              "path": "node_modules\\clsx\\clsx.d.mts",
+              "name": "clsx.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\clsx\\clsx.d.ts",
+              "name": "clsx.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\clsx\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\clsx\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\clsx\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\clsx\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\cmdk",
+          "name": "cmdk",
+          "children": [
+            {
+              "path": "node_modules\\cmdk\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\cmdk\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cmdk\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cmdk\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\color-convert",
+          "name": "color-convert",
+          "children": [
+            {
+              "path": "node_modules\\color-convert\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-convert\\conversions.js",
+              "name": "conversions.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-convert\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-convert\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-convert\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-convert\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-convert\\route.js",
+              "name": "route.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\color-name",
+          "name": "color-name",
+          "children": [
+            {
+              "path": "node_modules\\color-name\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-name\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-name\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\color-name\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\combined-stream",
+          "name": "combined-stream",
+          "children": [
+            {
+              "path": "node_modules\\combined-stream\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\combined-stream\\License",
+              "name": "License",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\combined-stream\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\combined-stream\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\combined-stream\\yarn.lock",
+              "name": "yarn.lock",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\command-line-args",
+          "name": "command-line-args",
+          "children": [
+            {
+              "path": "node_modules\\command-line-args\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\command-line-args\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\command-line-args\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\command-line-args\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\command-line-args\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\command-line-args\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\command-line-usage",
+          "name": "command-line-usage",
+          "children": [
+            {
+              "path": "node_modules\\command-line-usage\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\command-line-usage\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\command-line-usage\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\command-line-usage\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\command-line-usage\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\command-line-usage\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\commander",
+          "name": "commander",
+          "children": [
+            {
+              "path": "node_modules\\commander\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\commander\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\commander\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\commander\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\commander\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\commander\\typings",
+              "name": "typings",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\concat-map",
+          "name": "concat-map",
+          "children": [
+            {
+              "path": "node_modules\\concat-map\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\concat-map\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\concat-map\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\concat-map\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\concat-map\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\concat-map\\README.markdown",
+              "name": "README.markdown",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\concat-map\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\cookie",
+          "name": "cookie",
+          "children": [
+            {
+              "path": "node_modules\\cookie\\HISTORY.md",
+              "name": "HISTORY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cookie\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cookie\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cookie\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cookie\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cookie\\SECURITY.md",
+              "name": "SECURITY.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\cross-spawn",
+          "name": "cross-spawn",
+          "children": [
+            {
+              "path": "node_modules\\cross-spawn\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cross-spawn\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\cross-spawn\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cross-spawn\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cross-spawn\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\cssesc",
+          "name": "cssesc",
+          "children": [
+            {
+              "path": "node_modules\\cssesc\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\cssesc\\cssesc.js",
+              "name": "cssesc.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cssesc\\LICENSE-MIT.txt",
+              "name": "LICENSE-MIT.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cssesc\\man",
+              "name": "man",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\cssesc\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\cssesc\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\csstype",
+          "name": "csstype",
+          "children": [
+            {
+              "path": "node_modules\\csstype\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\csstype\\index.js.flow",
+              "name": "index.js.flow",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\csstype\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\csstype\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\csstype\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\damerau-levenshtein",
+          "name": "damerau-levenshtein",
+          "children": [
+            {
+              "path": "node_modules\\damerau-levenshtein\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\damerau-levenshtein\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\damerau-levenshtein\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\damerau-levenshtein\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\damerau-levenshtein\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\damerau-levenshtein\\scripts",
+              "name": "scripts",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\damerau-levenshtein\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\date-fns",
+          "name": "date-fns",
+          "children": [
+            {
+              "path": "node_modules\\date-fns\\add.d.mts",
+              "name": "add.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\add.d.ts",
+              "name": "add.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\add.js",
+              "name": "add.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\add.mjs",
+              "name": "add.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addBusinessDays.d.mts",
+              "name": "addBusinessDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addBusinessDays.d.ts",
+              "name": "addBusinessDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addBusinessDays.js",
+              "name": "addBusinessDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addBusinessDays.mjs",
+              "name": "addBusinessDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addDays.d.mts",
+              "name": "addDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addDays.d.ts",
+              "name": "addDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addDays.js",
+              "name": "addDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addDays.mjs",
+              "name": "addDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addHours.d.mts",
+              "name": "addHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addHours.d.ts",
+              "name": "addHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addHours.js",
+              "name": "addHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addHours.mjs",
+              "name": "addHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addISOWeekYears.d.mts",
+              "name": "addISOWeekYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addISOWeekYears.d.ts",
+              "name": "addISOWeekYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addISOWeekYears.js",
+              "name": "addISOWeekYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addISOWeekYears.mjs",
+              "name": "addISOWeekYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMilliseconds.d.mts",
+              "name": "addMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMilliseconds.d.ts",
+              "name": "addMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMilliseconds.js",
+              "name": "addMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMilliseconds.mjs",
+              "name": "addMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMinutes.d.mts",
+              "name": "addMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMinutes.d.ts",
+              "name": "addMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMinutes.js",
+              "name": "addMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMinutes.mjs",
+              "name": "addMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMonths.d.mts",
+              "name": "addMonths.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMonths.d.ts",
+              "name": "addMonths.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMonths.js",
+              "name": "addMonths.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addMonths.mjs",
+              "name": "addMonths.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addQuarters.d.mts",
+              "name": "addQuarters.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addQuarters.d.ts",
+              "name": "addQuarters.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addQuarters.js",
+              "name": "addQuarters.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addQuarters.mjs",
+              "name": "addQuarters.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addSeconds.d.mts",
+              "name": "addSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addSeconds.d.ts",
+              "name": "addSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addSeconds.js",
+              "name": "addSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addSeconds.mjs",
+              "name": "addSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addWeeks.d.mts",
+              "name": "addWeeks.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addWeeks.d.ts",
+              "name": "addWeeks.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addWeeks.js",
+              "name": "addWeeks.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addWeeks.mjs",
+              "name": "addWeeks.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addYears.d.mts",
+              "name": "addYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addYears.d.ts",
+              "name": "addYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addYears.js",
+              "name": "addYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\addYears.mjs",
+              "name": "addYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\areIntervalsOverlapping.d.mts",
+              "name": "areIntervalsOverlapping.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\areIntervalsOverlapping.d.ts",
+              "name": "areIntervalsOverlapping.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\areIntervalsOverlapping.js",
+              "name": "areIntervalsOverlapping.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\areIntervalsOverlapping.mjs",
+              "name": "areIntervalsOverlapping.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\clamp.d.mts",
+              "name": "clamp.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\clamp.d.ts",
+              "name": "clamp.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\clamp.js",
+              "name": "clamp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\clamp.mjs",
+              "name": "clamp.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestIndexTo.d.mts",
+              "name": "closestIndexTo.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestIndexTo.d.ts",
+              "name": "closestIndexTo.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestIndexTo.js",
+              "name": "closestIndexTo.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestIndexTo.mjs",
+              "name": "closestIndexTo.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestTo.d.mts",
+              "name": "closestTo.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestTo.d.ts",
+              "name": "closestTo.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestTo.js",
+              "name": "closestTo.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\closestTo.mjs",
+              "name": "closestTo.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareAsc.d.mts",
+              "name": "compareAsc.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareAsc.d.ts",
+              "name": "compareAsc.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareAsc.js",
+              "name": "compareAsc.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareAsc.mjs",
+              "name": "compareAsc.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareDesc.d.mts",
+              "name": "compareDesc.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareDesc.d.ts",
+              "name": "compareDesc.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareDesc.js",
+              "name": "compareDesc.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\compareDesc.mjs",
+              "name": "compareDesc.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constants.d.mts",
+              "name": "constants.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constants.d.ts",
+              "name": "constants.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constants.js",
+              "name": "constants.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constants.mjs",
+              "name": "constants.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constructFrom.d.mts",
+              "name": "constructFrom.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constructFrom.d.ts",
+              "name": "constructFrom.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constructFrom.js",
+              "name": "constructFrom.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\constructFrom.mjs",
+              "name": "constructFrom.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\daysToWeeks.d.mts",
+              "name": "daysToWeeks.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\daysToWeeks.d.ts",
+              "name": "daysToWeeks.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\daysToWeeks.js",
+              "name": "daysToWeeks.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\daysToWeeks.mjs",
+              "name": "daysToWeeks.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInBusinessDays.d.mts",
+              "name": "differenceInBusinessDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInBusinessDays.d.ts",
+              "name": "differenceInBusinessDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInBusinessDays.js",
+              "name": "differenceInBusinessDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInBusinessDays.mjs",
+              "name": "differenceInBusinessDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarDays.d.mts",
+              "name": "differenceInCalendarDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarDays.d.ts",
+              "name": "differenceInCalendarDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarDays.js",
+              "name": "differenceInCalendarDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarDays.mjs",
+              "name": "differenceInCalendarDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeeks.d.mts",
+              "name": "differenceInCalendarISOWeeks.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeeks.d.ts",
+              "name": "differenceInCalendarISOWeeks.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeeks.js",
+              "name": "differenceInCalendarISOWeeks.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeeks.mjs",
+              "name": "differenceInCalendarISOWeeks.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeekYears.d.mts",
+              "name": "differenceInCalendarISOWeekYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeekYears.d.ts",
+              "name": "differenceInCalendarISOWeekYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeekYears.js",
+              "name": "differenceInCalendarISOWeekYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarISOWeekYears.mjs",
+              "name": "differenceInCalendarISOWeekYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarMonths.d.mts",
+              "name": "differenceInCalendarMonths.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarMonths.d.ts",
+              "name": "differenceInCalendarMonths.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarMonths.js",
+              "name": "differenceInCalendarMonths.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarMonths.mjs",
+              "name": "differenceInCalendarMonths.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarQuarters.d.mts",
+              "name": "differenceInCalendarQuarters.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarQuarters.d.ts",
+              "name": "differenceInCalendarQuarters.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarQuarters.js",
+              "name": "differenceInCalendarQuarters.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarQuarters.mjs",
+              "name": "differenceInCalendarQuarters.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarWeeks.d.mts",
+              "name": "differenceInCalendarWeeks.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarWeeks.d.ts",
+              "name": "differenceInCalendarWeeks.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarWeeks.js",
+              "name": "differenceInCalendarWeeks.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarWeeks.mjs",
+              "name": "differenceInCalendarWeeks.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarYears.d.mts",
+              "name": "differenceInCalendarYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarYears.d.ts",
+              "name": "differenceInCalendarYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarYears.js",
+              "name": "differenceInCalendarYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInCalendarYears.mjs",
+              "name": "differenceInCalendarYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInDays.d.mts",
+              "name": "differenceInDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInDays.d.ts",
+              "name": "differenceInDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInDays.js",
+              "name": "differenceInDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInDays.mjs",
+              "name": "differenceInDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInHours.d.mts",
+              "name": "differenceInHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInHours.d.ts",
+              "name": "differenceInHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInHours.js",
+              "name": "differenceInHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInHours.mjs",
+              "name": "differenceInHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInISOWeekYears.d.mts",
+              "name": "differenceInISOWeekYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInISOWeekYears.d.ts",
+              "name": "differenceInISOWeekYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInISOWeekYears.js",
+              "name": "differenceInISOWeekYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInISOWeekYears.mjs",
+              "name": "differenceInISOWeekYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMilliseconds.d.mts",
+              "name": "differenceInMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMilliseconds.d.ts",
+              "name": "differenceInMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMilliseconds.js",
+              "name": "differenceInMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMilliseconds.mjs",
+              "name": "differenceInMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMinutes.d.mts",
+              "name": "differenceInMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMinutes.d.ts",
+              "name": "differenceInMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMinutes.js",
+              "name": "differenceInMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMinutes.mjs",
+              "name": "differenceInMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMonths.d.mts",
+              "name": "differenceInMonths.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMonths.d.ts",
+              "name": "differenceInMonths.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMonths.js",
+              "name": "differenceInMonths.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInMonths.mjs",
+              "name": "differenceInMonths.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInQuarters.d.mts",
+              "name": "differenceInQuarters.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInQuarters.d.ts",
+              "name": "differenceInQuarters.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInQuarters.js",
+              "name": "differenceInQuarters.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInQuarters.mjs",
+              "name": "differenceInQuarters.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInSeconds.d.mts",
+              "name": "differenceInSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInSeconds.d.ts",
+              "name": "differenceInSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInSeconds.js",
+              "name": "differenceInSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInSeconds.mjs",
+              "name": "differenceInSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInWeeks.d.mts",
+              "name": "differenceInWeeks.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInWeeks.d.ts",
+              "name": "differenceInWeeks.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInWeeks.js",
+              "name": "differenceInWeeks.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInWeeks.mjs",
+              "name": "differenceInWeeks.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInYears.d.mts",
+              "name": "differenceInYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInYears.d.ts",
+              "name": "differenceInYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInYears.js",
+              "name": "differenceInYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\differenceInYears.mjs",
+              "name": "differenceInYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\docs",
+              "name": "docs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachDayOfInterval.d.mts",
+              "name": "eachDayOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachDayOfInterval.d.ts",
+              "name": "eachDayOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachDayOfInterval.js",
+              "name": "eachDayOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachDayOfInterval.mjs",
+              "name": "eachDayOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachHourOfInterval.d.mts",
+              "name": "eachHourOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachHourOfInterval.d.ts",
+              "name": "eachHourOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachHourOfInterval.js",
+              "name": "eachHourOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachHourOfInterval.mjs",
+              "name": "eachHourOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMinuteOfInterval.d.mts",
+              "name": "eachMinuteOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMinuteOfInterval.d.ts",
+              "name": "eachMinuteOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMinuteOfInterval.js",
+              "name": "eachMinuteOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMinuteOfInterval.mjs",
+              "name": "eachMinuteOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMonthOfInterval.d.mts",
+              "name": "eachMonthOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMonthOfInterval.d.ts",
+              "name": "eachMonthOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMonthOfInterval.js",
+              "name": "eachMonthOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachMonthOfInterval.mjs",
+              "name": "eachMonthOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachQuarterOfInterval.d.mts",
+              "name": "eachQuarterOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachQuarterOfInterval.d.ts",
+              "name": "eachQuarterOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachQuarterOfInterval.js",
+              "name": "eachQuarterOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachQuarterOfInterval.mjs",
+              "name": "eachQuarterOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfInterval.d.mts",
+              "name": "eachWeekendOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfInterval.d.ts",
+              "name": "eachWeekendOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfInterval.js",
+              "name": "eachWeekendOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfInterval.mjs",
+              "name": "eachWeekendOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfMonth.d.mts",
+              "name": "eachWeekendOfMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfMonth.d.ts",
+              "name": "eachWeekendOfMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfMonth.js",
+              "name": "eachWeekendOfMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfMonth.mjs",
+              "name": "eachWeekendOfMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfYear.d.mts",
+              "name": "eachWeekendOfYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfYear.d.ts",
+              "name": "eachWeekendOfYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfYear.js",
+              "name": "eachWeekendOfYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekendOfYear.mjs",
+              "name": "eachWeekendOfYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekOfInterval.d.mts",
+              "name": "eachWeekOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekOfInterval.d.ts",
+              "name": "eachWeekOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekOfInterval.js",
+              "name": "eachWeekOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachWeekOfInterval.mjs",
+              "name": "eachWeekOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachYearOfInterval.d.mts",
+              "name": "eachYearOfInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachYearOfInterval.d.ts",
+              "name": "eachYearOfInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachYearOfInterval.js",
+              "name": "eachYearOfInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\eachYearOfInterval.mjs",
+              "name": "eachYearOfInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDay.d.mts",
+              "name": "endOfDay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDay.d.ts",
+              "name": "endOfDay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDay.js",
+              "name": "endOfDay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDay.mjs",
+              "name": "endOfDay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDecade.d.mts",
+              "name": "endOfDecade.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDecade.d.ts",
+              "name": "endOfDecade.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDecade.js",
+              "name": "endOfDecade.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfDecade.mjs",
+              "name": "endOfDecade.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfHour.d.mts",
+              "name": "endOfHour.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfHour.d.ts",
+              "name": "endOfHour.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfHour.js",
+              "name": "endOfHour.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfHour.mjs",
+              "name": "endOfHour.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeek.d.mts",
+              "name": "endOfISOWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeek.d.ts",
+              "name": "endOfISOWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeek.js",
+              "name": "endOfISOWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeek.mjs",
+              "name": "endOfISOWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeekYear.d.mts",
+              "name": "endOfISOWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeekYear.d.ts",
+              "name": "endOfISOWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeekYear.js",
+              "name": "endOfISOWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfISOWeekYear.mjs",
+              "name": "endOfISOWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMinute.d.mts",
+              "name": "endOfMinute.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMinute.d.ts",
+              "name": "endOfMinute.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMinute.js",
+              "name": "endOfMinute.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMinute.mjs",
+              "name": "endOfMinute.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMonth.d.mts",
+              "name": "endOfMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMonth.d.ts",
+              "name": "endOfMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMonth.js",
+              "name": "endOfMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfMonth.mjs",
+              "name": "endOfMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfQuarter.d.mts",
+              "name": "endOfQuarter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfQuarter.d.ts",
+              "name": "endOfQuarter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfQuarter.js",
+              "name": "endOfQuarter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfQuarter.mjs",
+              "name": "endOfQuarter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfSecond.d.mts",
+              "name": "endOfSecond.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfSecond.d.ts",
+              "name": "endOfSecond.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfSecond.js",
+              "name": "endOfSecond.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfSecond.mjs",
+              "name": "endOfSecond.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfToday.d.mts",
+              "name": "endOfToday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfToday.d.ts",
+              "name": "endOfToday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfToday.js",
+              "name": "endOfToday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfToday.mjs",
+              "name": "endOfToday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfTomorrow.d.mts",
+              "name": "endOfTomorrow.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfTomorrow.d.ts",
+              "name": "endOfTomorrow.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfTomorrow.js",
+              "name": "endOfTomorrow.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfTomorrow.mjs",
+              "name": "endOfTomorrow.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfWeek.d.mts",
+              "name": "endOfWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfWeek.d.ts",
+              "name": "endOfWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfWeek.js",
+              "name": "endOfWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfWeek.mjs",
+              "name": "endOfWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYear.d.mts",
+              "name": "endOfYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYear.d.ts",
+              "name": "endOfYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYear.js",
+              "name": "endOfYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYear.mjs",
+              "name": "endOfYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYesterday.d.mts",
+              "name": "endOfYesterday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYesterday.d.ts",
+              "name": "endOfYesterday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYesterday.js",
+              "name": "endOfYesterday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\endOfYesterday.mjs",
+              "name": "endOfYesterday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\format.d.mts",
+              "name": "format.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\format.d.ts",
+              "name": "format.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\format.js",
+              "name": "format.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\format.mjs",
+              "name": "format.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistance.d.mts",
+              "name": "formatDistance.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistance.d.ts",
+              "name": "formatDistance.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistance.js",
+              "name": "formatDistance.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistance.mjs",
+              "name": "formatDistance.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceStrict.d.mts",
+              "name": "formatDistanceStrict.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceStrict.d.ts",
+              "name": "formatDistanceStrict.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceStrict.js",
+              "name": "formatDistanceStrict.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceStrict.mjs",
+              "name": "formatDistanceStrict.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNow.d.mts",
+              "name": "formatDistanceToNow.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNow.d.ts",
+              "name": "formatDistanceToNow.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNow.js",
+              "name": "formatDistanceToNow.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNow.mjs",
+              "name": "formatDistanceToNow.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNowStrict.d.mts",
+              "name": "formatDistanceToNowStrict.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNowStrict.d.ts",
+              "name": "formatDistanceToNowStrict.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNowStrict.js",
+              "name": "formatDistanceToNowStrict.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDistanceToNowStrict.mjs",
+              "name": "formatDistanceToNowStrict.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDuration.d.mts",
+              "name": "formatDuration.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDuration.d.ts",
+              "name": "formatDuration.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDuration.js",
+              "name": "formatDuration.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatDuration.mjs",
+              "name": "formatDuration.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO.d.mts",
+              "name": "formatISO.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO.d.ts",
+              "name": "formatISO.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO.js",
+              "name": "formatISO.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO.mjs",
+              "name": "formatISO.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO9075.d.mts",
+              "name": "formatISO9075.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO9075.d.ts",
+              "name": "formatISO9075.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO9075.js",
+              "name": "formatISO9075.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISO9075.mjs",
+              "name": "formatISO9075.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISODuration.d.mts",
+              "name": "formatISODuration.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISODuration.d.ts",
+              "name": "formatISODuration.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISODuration.js",
+              "name": "formatISODuration.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatISODuration.mjs",
+              "name": "formatISODuration.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRelative.d.mts",
+              "name": "formatRelative.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRelative.d.ts",
+              "name": "formatRelative.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRelative.js",
+              "name": "formatRelative.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRelative.mjs",
+              "name": "formatRelative.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC3339.d.mts",
+              "name": "formatRFC3339.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC3339.d.ts",
+              "name": "formatRFC3339.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC3339.js",
+              "name": "formatRFC3339.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC3339.mjs",
+              "name": "formatRFC3339.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC7231.d.mts",
+              "name": "formatRFC7231.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC7231.d.ts",
+              "name": "formatRFC7231.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC7231.js",
+              "name": "formatRFC7231.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\formatRFC7231.mjs",
+              "name": "formatRFC7231.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fp",
+              "name": "fp",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\date-fns\\fp.d.mts",
+              "name": "fp.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fp.d.ts",
+              "name": "fp.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fp.js",
+              "name": "fp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fp.mjs",
+              "name": "fp.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fromUnixTime.d.mts",
+              "name": "fromUnixTime.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fromUnixTime.d.ts",
+              "name": "fromUnixTime.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fromUnixTime.js",
+              "name": "fromUnixTime.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\fromUnixTime.mjs",
+              "name": "fromUnixTime.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDate.d.mts",
+              "name": "getDate.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDate.d.ts",
+              "name": "getDate.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDate.js",
+              "name": "getDate.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDate.mjs",
+              "name": "getDate.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDay.d.mts",
+              "name": "getDay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDay.d.ts",
+              "name": "getDay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDay.js",
+              "name": "getDay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDay.mjs",
+              "name": "getDay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDayOfYear.d.mts",
+              "name": "getDayOfYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDayOfYear.d.ts",
+              "name": "getDayOfYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDayOfYear.js",
+              "name": "getDayOfYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDayOfYear.mjs",
+              "name": "getDayOfYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInMonth.d.mts",
+              "name": "getDaysInMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInMonth.d.ts",
+              "name": "getDaysInMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInMonth.js",
+              "name": "getDaysInMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInMonth.mjs",
+              "name": "getDaysInMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInYear.d.mts",
+              "name": "getDaysInYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInYear.d.ts",
+              "name": "getDaysInYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInYear.js",
+              "name": "getDaysInYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDaysInYear.mjs",
+              "name": "getDaysInYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDecade.d.mts",
+              "name": "getDecade.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDecade.d.ts",
+              "name": "getDecade.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDecade.js",
+              "name": "getDecade.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDecade.mjs",
+              "name": "getDecade.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDefaultOptions.d.mts",
+              "name": "getDefaultOptions.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDefaultOptions.d.ts",
+              "name": "getDefaultOptions.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDefaultOptions.js",
+              "name": "getDefaultOptions.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getDefaultOptions.mjs",
+              "name": "getDefaultOptions.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getHours.d.mts",
+              "name": "getHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getHours.d.ts",
+              "name": "getHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getHours.js",
+              "name": "getHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getHours.mjs",
+              "name": "getHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISODay.d.mts",
+              "name": "getISODay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISODay.d.ts",
+              "name": "getISODay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISODay.js",
+              "name": "getISODay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISODay.mjs",
+              "name": "getISODay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeek.d.mts",
+              "name": "getISOWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeek.d.ts",
+              "name": "getISOWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeek.js",
+              "name": "getISOWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeek.mjs",
+              "name": "getISOWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeeksInYear.d.mts",
+              "name": "getISOWeeksInYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeeksInYear.d.ts",
+              "name": "getISOWeeksInYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeeksInYear.js",
+              "name": "getISOWeeksInYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeeksInYear.mjs",
+              "name": "getISOWeeksInYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeekYear.d.mts",
+              "name": "getISOWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeekYear.d.ts",
+              "name": "getISOWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeekYear.js",
+              "name": "getISOWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getISOWeekYear.mjs",
+              "name": "getISOWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMilliseconds.d.mts",
+              "name": "getMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMilliseconds.d.ts",
+              "name": "getMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMilliseconds.js",
+              "name": "getMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMilliseconds.mjs",
+              "name": "getMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMinutes.d.mts",
+              "name": "getMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMinutes.d.ts",
+              "name": "getMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMinutes.js",
+              "name": "getMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMinutes.mjs",
+              "name": "getMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMonth.d.mts",
+              "name": "getMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMonth.d.ts",
+              "name": "getMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMonth.js",
+              "name": "getMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getMonth.mjs",
+              "name": "getMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getOverlappingDaysInIntervals.d.mts",
+              "name": "getOverlappingDaysInIntervals.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getOverlappingDaysInIntervals.d.ts",
+              "name": "getOverlappingDaysInIntervals.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getOverlappingDaysInIntervals.js",
+              "name": "getOverlappingDaysInIntervals.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getOverlappingDaysInIntervals.mjs",
+              "name": "getOverlappingDaysInIntervals.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getQuarter.d.mts",
+              "name": "getQuarter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getQuarter.d.ts",
+              "name": "getQuarter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getQuarter.js",
+              "name": "getQuarter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getQuarter.mjs",
+              "name": "getQuarter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getSeconds.d.mts",
+              "name": "getSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getSeconds.d.ts",
+              "name": "getSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getSeconds.js",
+              "name": "getSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getSeconds.mjs",
+              "name": "getSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getTime.d.mts",
+              "name": "getTime.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getTime.d.ts",
+              "name": "getTime.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getTime.js",
+              "name": "getTime.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getTime.mjs",
+              "name": "getTime.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getUnixTime.d.mts",
+              "name": "getUnixTime.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getUnixTime.d.ts",
+              "name": "getUnixTime.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getUnixTime.js",
+              "name": "getUnixTime.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getUnixTime.mjs",
+              "name": "getUnixTime.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeek.d.mts",
+              "name": "getWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeek.d.ts",
+              "name": "getWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeek.js",
+              "name": "getWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeek.mjs",
+              "name": "getWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekOfMonth.d.mts",
+              "name": "getWeekOfMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekOfMonth.d.ts",
+              "name": "getWeekOfMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekOfMonth.js",
+              "name": "getWeekOfMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekOfMonth.mjs",
+              "name": "getWeekOfMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeeksInMonth.d.mts",
+              "name": "getWeeksInMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeeksInMonth.d.ts",
+              "name": "getWeeksInMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeeksInMonth.js",
+              "name": "getWeeksInMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeeksInMonth.mjs",
+              "name": "getWeeksInMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekYear.d.mts",
+              "name": "getWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekYear.d.ts",
+              "name": "getWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekYear.js",
+              "name": "getWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getWeekYear.mjs",
+              "name": "getWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getYear.d.mts",
+              "name": "getYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getYear.d.ts",
+              "name": "getYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getYear.js",
+              "name": "getYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\getYear.mjs",
+              "name": "getYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMilliseconds.d.mts",
+              "name": "hoursToMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMilliseconds.d.ts",
+              "name": "hoursToMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMilliseconds.js",
+              "name": "hoursToMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMilliseconds.mjs",
+              "name": "hoursToMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMinutes.d.mts",
+              "name": "hoursToMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMinutes.d.ts",
+              "name": "hoursToMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMinutes.js",
+              "name": "hoursToMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToMinutes.mjs",
+              "name": "hoursToMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToSeconds.d.mts",
+              "name": "hoursToSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToSeconds.d.ts",
+              "name": "hoursToSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToSeconds.js",
+              "name": "hoursToSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\hoursToSeconds.mjs",
+              "name": "hoursToSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\index.d.mts",
+              "name": "index.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\interval.d.mts",
+              "name": "interval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\interval.d.ts",
+              "name": "interval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\interval.js",
+              "name": "interval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\interval.mjs",
+              "name": "interval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intervalToDuration.d.mts",
+              "name": "intervalToDuration.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intervalToDuration.d.ts",
+              "name": "intervalToDuration.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intervalToDuration.js",
+              "name": "intervalToDuration.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intervalToDuration.mjs",
+              "name": "intervalToDuration.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormat.d.mts",
+              "name": "intlFormat.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormat.d.ts",
+              "name": "intlFormat.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormat.js",
+              "name": "intlFormat.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormat.mjs",
+              "name": "intlFormat.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormatDistance.d.mts",
+              "name": "intlFormatDistance.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormatDistance.d.ts",
+              "name": "intlFormatDistance.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormatDistance.js",
+              "name": "intlFormatDistance.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\intlFormatDistance.mjs",
+              "name": "intlFormatDistance.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isAfter.d.mts",
+              "name": "isAfter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isAfter.d.ts",
+              "name": "isAfter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isAfter.js",
+              "name": "isAfter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isAfter.mjs",
+              "name": "isAfter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isBefore.d.mts",
+              "name": "isBefore.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isBefore.d.ts",
+              "name": "isBefore.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isBefore.js",
+              "name": "isBefore.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isBefore.mjs",
+              "name": "isBefore.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isDate.d.mts",
+              "name": "isDate.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isDate.d.ts",
+              "name": "isDate.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isDate.js",
+              "name": "isDate.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isDate.mjs",
+              "name": "isDate.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isEqual.d.mts",
+              "name": "isEqual.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isEqual.d.ts",
+              "name": "isEqual.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isEqual.js",
+              "name": "isEqual.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isEqual.mjs",
+              "name": "isEqual.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isExists.d.mts",
+              "name": "isExists.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isExists.d.ts",
+              "name": "isExists.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isExists.js",
+              "name": "isExists.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isExists.mjs",
+              "name": "isExists.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFirstDayOfMonth.d.mts",
+              "name": "isFirstDayOfMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFirstDayOfMonth.d.ts",
+              "name": "isFirstDayOfMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFirstDayOfMonth.js",
+              "name": "isFirstDayOfMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFirstDayOfMonth.mjs",
+              "name": "isFirstDayOfMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFriday.d.mts",
+              "name": "isFriday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFriday.d.ts",
+              "name": "isFriday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFriday.js",
+              "name": "isFriday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFriday.mjs",
+              "name": "isFriday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFuture.d.mts",
+              "name": "isFuture.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFuture.d.ts",
+              "name": "isFuture.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFuture.js",
+              "name": "isFuture.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isFuture.mjs",
+              "name": "isFuture.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLastDayOfMonth.d.mts",
+              "name": "isLastDayOfMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLastDayOfMonth.d.ts",
+              "name": "isLastDayOfMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLastDayOfMonth.js",
+              "name": "isLastDayOfMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLastDayOfMonth.mjs",
+              "name": "isLastDayOfMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLeapYear.d.mts",
+              "name": "isLeapYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLeapYear.d.ts",
+              "name": "isLeapYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLeapYear.js",
+              "name": "isLeapYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isLeapYear.mjs",
+              "name": "isLeapYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMatch.d.mts",
+              "name": "isMatch.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMatch.d.ts",
+              "name": "isMatch.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMatch.js",
+              "name": "isMatch.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMatch.mjs",
+              "name": "isMatch.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMonday.d.mts",
+              "name": "isMonday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMonday.d.ts",
+              "name": "isMonday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMonday.js",
+              "name": "isMonday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isMonday.mjs",
+              "name": "isMonday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isPast.d.mts",
+              "name": "isPast.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isPast.d.ts",
+              "name": "isPast.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isPast.js",
+              "name": "isPast.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isPast.mjs",
+              "name": "isPast.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameDay.d.mts",
+              "name": "isSameDay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameDay.d.ts",
+              "name": "isSameDay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameDay.js",
+              "name": "isSameDay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameDay.mjs",
+              "name": "isSameDay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameHour.d.mts",
+              "name": "isSameHour.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameHour.d.ts",
+              "name": "isSameHour.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameHour.js",
+              "name": "isSameHour.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameHour.mjs",
+              "name": "isSameHour.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeek.d.mts",
+              "name": "isSameISOWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeek.d.ts",
+              "name": "isSameISOWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeek.js",
+              "name": "isSameISOWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeek.mjs",
+              "name": "isSameISOWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeekYear.d.mts",
+              "name": "isSameISOWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeekYear.d.ts",
+              "name": "isSameISOWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeekYear.js",
+              "name": "isSameISOWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameISOWeekYear.mjs",
+              "name": "isSameISOWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMinute.d.mts",
+              "name": "isSameMinute.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMinute.d.ts",
+              "name": "isSameMinute.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMinute.js",
+              "name": "isSameMinute.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMinute.mjs",
+              "name": "isSameMinute.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMonth.d.mts",
+              "name": "isSameMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMonth.d.ts",
+              "name": "isSameMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMonth.js",
+              "name": "isSameMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameMonth.mjs",
+              "name": "isSameMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameQuarter.d.mts",
+              "name": "isSameQuarter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameQuarter.d.ts",
+              "name": "isSameQuarter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameQuarter.js",
+              "name": "isSameQuarter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameQuarter.mjs",
+              "name": "isSameQuarter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameSecond.d.mts",
+              "name": "isSameSecond.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameSecond.d.ts",
+              "name": "isSameSecond.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameSecond.js",
+              "name": "isSameSecond.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameSecond.mjs",
+              "name": "isSameSecond.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameWeek.d.mts",
+              "name": "isSameWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameWeek.d.ts",
+              "name": "isSameWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameWeek.js",
+              "name": "isSameWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameWeek.mjs",
+              "name": "isSameWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameYear.d.mts",
+              "name": "isSameYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameYear.d.ts",
+              "name": "isSameYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameYear.js",
+              "name": "isSameYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSameYear.mjs",
+              "name": "isSameYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSaturday.d.mts",
+              "name": "isSaturday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSaturday.d.ts",
+              "name": "isSaturday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSaturday.js",
+              "name": "isSaturday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSaturday.mjs",
+              "name": "isSaturday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSunday.d.mts",
+              "name": "isSunday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSunday.d.ts",
+              "name": "isSunday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSunday.js",
+              "name": "isSunday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isSunday.mjs",
+              "name": "isSunday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisHour.d.mts",
+              "name": "isThisHour.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisHour.d.ts",
+              "name": "isThisHour.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisHour.js",
+              "name": "isThisHour.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisHour.mjs",
+              "name": "isThisHour.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisISOWeek.d.mts",
+              "name": "isThisISOWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisISOWeek.d.ts",
+              "name": "isThisISOWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisISOWeek.js",
+              "name": "isThisISOWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisISOWeek.mjs",
+              "name": "isThisISOWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMinute.d.mts",
+              "name": "isThisMinute.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMinute.d.ts",
+              "name": "isThisMinute.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMinute.js",
+              "name": "isThisMinute.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMinute.mjs",
+              "name": "isThisMinute.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMonth.d.mts",
+              "name": "isThisMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMonth.d.ts",
+              "name": "isThisMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMonth.js",
+              "name": "isThisMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisMonth.mjs",
+              "name": "isThisMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisQuarter.d.mts",
+              "name": "isThisQuarter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisQuarter.d.ts",
+              "name": "isThisQuarter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisQuarter.js",
+              "name": "isThisQuarter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisQuarter.mjs",
+              "name": "isThisQuarter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisSecond.d.mts",
+              "name": "isThisSecond.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisSecond.d.ts",
+              "name": "isThisSecond.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisSecond.js",
+              "name": "isThisSecond.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisSecond.mjs",
+              "name": "isThisSecond.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisWeek.d.mts",
+              "name": "isThisWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisWeek.d.ts",
+              "name": "isThisWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisWeek.js",
+              "name": "isThisWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisWeek.mjs",
+              "name": "isThisWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisYear.d.mts",
+              "name": "isThisYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisYear.d.ts",
+              "name": "isThisYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisYear.js",
+              "name": "isThisYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThisYear.mjs",
+              "name": "isThisYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThursday.d.mts",
+              "name": "isThursday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThursday.d.ts",
+              "name": "isThursday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThursday.js",
+              "name": "isThursday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isThursday.mjs",
+              "name": "isThursday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isToday.d.mts",
+              "name": "isToday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isToday.d.ts",
+              "name": "isToday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isToday.js",
+              "name": "isToday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isToday.mjs",
+              "name": "isToday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTomorrow.d.mts",
+              "name": "isTomorrow.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTomorrow.d.ts",
+              "name": "isTomorrow.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTomorrow.js",
+              "name": "isTomorrow.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTomorrow.mjs",
+              "name": "isTomorrow.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTuesday.d.mts",
+              "name": "isTuesday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTuesday.d.ts",
+              "name": "isTuesday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTuesday.js",
+              "name": "isTuesday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isTuesday.mjs",
+              "name": "isTuesday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isValid.d.mts",
+              "name": "isValid.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isValid.d.ts",
+              "name": "isValid.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isValid.js",
+              "name": "isValid.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isValid.mjs",
+              "name": "isValid.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWednesday.d.mts",
+              "name": "isWednesday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWednesday.d.ts",
+              "name": "isWednesday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWednesday.js",
+              "name": "isWednesday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWednesday.mjs",
+              "name": "isWednesday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWeekend.d.mts",
+              "name": "isWeekend.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWeekend.d.ts",
+              "name": "isWeekend.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWeekend.js",
+              "name": "isWeekend.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWeekend.mjs",
+              "name": "isWeekend.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWithinInterval.d.mts",
+              "name": "isWithinInterval.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWithinInterval.d.ts",
+              "name": "isWithinInterval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWithinInterval.js",
+              "name": "isWithinInterval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isWithinInterval.mjs",
+              "name": "isWithinInterval.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isYesterday.d.mts",
+              "name": "isYesterday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isYesterday.d.ts",
+              "name": "isYesterday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isYesterday.js",
+              "name": "isYesterday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\isYesterday.mjs",
+              "name": "isYesterday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfDecade.d.mts",
+              "name": "lastDayOfDecade.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfDecade.d.ts",
+              "name": "lastDayOfDecade.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfDecade.js",
+              "name": "lastDayOfDecade.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfDecade.mjs",
+              "name": "lastDayOfDecade.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeek.d.mts",
+              "name": "lastDayOfISOWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeek.d.ts",
+              "name": "lastDayOfISOWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeek.js",
+              "name": "lastDayOfISOWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeek.mjs",
+              "name": "lastDayOfISOWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeekYear.d.mts",
+              "name": "lastDayOfISOWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeekYear.d.ts",
+              "name": "lastDayOfISOWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeekYear.js",
+              "name": "lastDayOfISOWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfISOWeekYear.mjs",
+              "name": "lastDayOfISOWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfMonth.d.mts",
+              "name": "lastDayOfMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfMonth.d.ts",
+              "name": "lastDayOfMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfMonth.js",
+              "name": "lastDayOfMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfMonth.mjs",
+              "name": "lastDayOfMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfQuarter.d.mts",
+              "name": "lastDayOfQuarter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfQuarter.d.ts",
+              "name": "lastDayOfQuarter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfQuarter.js",
+              "name": "lastDayOfQuarter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfQuarter.mjs",
+              "name": "lastDayOfQuarter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfWeek.d.mts",
+              "name": "lastDayOfWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfWeek.d.ts",
+              "name": "lastDayOfWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfWeek.js",
+              "name": "lastDayOfWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfWeek.mjs",
+              "name": "lastDayOfWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfYear.d.mts",
+              "name": "lastDayOfYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfYear.d.ts",
+              "name": "lastDayOfYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfYear.js",
+              "name": "lastDayOfYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lastDayOfYear.mjs",
+              "name": "lastDayOfYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lightFormat.d.mts",
+              "name": "lightFormat.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lightFormat.d.ts",
+              "name": "lightFormat.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lightFormat.js",
+              "name": "lightFormat.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\lightFormat.mjs",
+              "name": "lightFormat.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\locale",
+              "name": "locale",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\date-fns\\locale.d.mts",
+              "name": "locale.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\locale.d.ts",
+              "name": "locale.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\locale.js",
+              "name": "locale.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\locale.mjs",
+              "name": "locale.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\max.d.mts",
+              "name": "max.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\max.d.ts",
+              "name": "max.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\max.js",
+              "name": "max.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\max.mjs",
+              "name": "max.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\milliseconds.d.mts",
+              "name": "milliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\milliseconds.d.ts",
+              "name": "milliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\milliseconds.js",
+              "name": "milliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\milliseconds.mjs",
+              "name": "milliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToHours.d.mts",
+              "name": "millisecondsToHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToHours.d.ts",
+              "name": "millisecondsToHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToHours.js",
+              "name": "millisecondsToHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToHours.mjs",
+              "name": "millisecondsToHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToMinutes.d.mts",
+              "name": "millisecondsToMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToMinutes.d.ts",
+              "name": "millisecondsToMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToMinutes.js",
+              "name": "millisecondsToMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToMinutes.mjs",
+              "name": "millisecondsToMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToSeconds.d.mts",
+              "name": "millisecondsToSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToSeconds.d.ts",
+              "name": "millisecondsToSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToSeconds.js",
+              "name": "millisecondsToSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\millisecondsToSeconds.mjs",
+              "name": "millisecondsToSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\min.d.mts",
+              "name": "min.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\min.d.ts",
+              "name": "min.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\min.js",
+              "name": "min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\min.mjs",
+              "name": "min.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToHours.d.mts",
+              "name": "minutesToHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToHours.d.ts",
+              "name": "minutesToHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToHours.js",
+              "name": "minutesToHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToHours.mjs",
+              "name": "minutesToHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToMilliseconds.d.mts",
+              "name": "minutesToMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToMilliseconds.d.ts",
+              "name": "minutesToMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToMilliseconds.js",
+              "name": "minutesToMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToMilliseconds.mjs",
+              "name": "minutesToMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToSeconds.d.mts",
+              "name": "minutesToSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToSeconds.d.ts",
+              "name": "minutesToSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToSeconds.js",
+              "name": "minutesToSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\minutesToSeconds.mjs",
+              "name": "minutesToSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToQuarters.d.mts",
+              "name": "monthsToQuarters.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToQuarters.d.ts",
+              "name": "monthsToQuarters.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToQuarters.js",
+              "name": "monthsToQuarters.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToQuarters.mjs",
+              "name": "monthsToQuarters.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToYears.d.mts",
+              "name": "monthsToYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToYears.d.ts",
+              "name": "monthsToYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToYears.js",
+              "name": "monthsToYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\monthsToYears.mjs",
+              "name": "monthsToYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextDay.d.mts",
+              "name": "nextDay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextDay.d.ts",
+              "name": "nextDay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextDay.js",
+              "name": "nextDay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextDay.mjs",
+              "name": "nextDay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextFriday.d.mts",
+              "name": "nextFriday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextFriday.d.ts",
+              "name": "nextFriday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextFriday.js",
+              "name": "nextFriday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextFriday.mjs",
+              "name": "nextFriday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextMonday.d.mts",
+              "name": "nextMonday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextMonday.d.ts",
+              "name": "nextMonday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextMonday.js",
+              "name": "nextMonday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextMonday.mjs",
+              "name": "nextMonday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSaturday.d.mts",
+              "name": "nextSaturday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSaturday.d.ts",
+              "name": "nextSaturday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSaturday.js",
+              "name": "nextSaturday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSaturday.mjs",
+              "name": "nextSaturday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSunday.d.mts",
+              "name": "nextSunday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSunday.d.ts",
+              "name": "nextSunday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSunday.js",
+              "name": "nextSunday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextSunday.mjs",
+              "name": "nextSunday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextThursday.d.mts",
+              "name": "nextThursday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextThursday.d.ts",
+              "name": "nextThursday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextThursday.js",
+              "name": "nextThursday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextThursday.mjs",
+              "name": "nextThursday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextTuesday.d.mts",
+              "name": "nextTuesday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextTuesday.d.ts",
+              "name": "nextTuesday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextTuesday.js",
+              "name": "nextTuesday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextTuesday.mjs",
+              "name": "nextTuesday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextWednesday.d.mts",
+              "name": "nextWednesday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextWednesday.d.ts",
+              "name": "nextWednesday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextWednesday.js",
+              "name": "nextWednesday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\nextWednesday.mjs",
+              "name": "nextWednesday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parse",
+              "name": "parse",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\date-fns\\parse.d.mts",
+              "name": "parse.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parse.d.ts",
+              "name": "parse.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parse.js",
+              "name": "parse.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parse.mjs",
+              "name": "parse.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseISO.d.mts",
+              "name": "parseISO.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseISO.d.ts",
+              "name": "parseISO.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseISO.js",
+              "name": "parseISO.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseISO.mjs",
+              "name": "parseISO.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseJSON.d.mts",
+              "name": "parseJSON.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseJSON.d.ts",
+              "name": "parseJSON.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseJSON.js",
+              "name": "parseJSON.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\parseJSON.mjs",
+              "name": "parseJSON.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousDay.d.mts",
+              "name": "previousDay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousDay.d.ts",
+              "name": "previousDay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousDay.js",
+              "name": "previousDay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousDay.mjs",
+              "name": "previousDay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousFriday.d.mts",
+              "name": "previousFriday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousFriday.d.ts",
+              "name": "previousFriday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousFriday.js",
+              "name": "previousFriday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousFriday.mjs",
+              "name": "previousFriday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousMonday.d.mts",
+              "name": "previousMonday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousMonday.d.ts",
+              "name": "previousMonday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousMonday.js",
+              "name": "previousMonday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousMonday.mjs",
+              "name": "previousMonday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSaturday.d.mts",
+              "name": "previousSaturday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSaturday.d.ts",
+              "name": "previousSaturday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSaturday.js",
+              "name": "previousSaturday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSaturday.mjs",
+              "name": "previousSaturday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSunday.d.mts",
+              "name": "previousSunday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSunday.d.ts",
+              "name": "previousSunday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSunday.js",
+              "name": "previousSunday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousSunday.mjs",
+              "name": "previousSunday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousThursday.d.mts",
+              "name": "previousThursday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousThursday.d.ts",
+              "name": "previousThursday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousThursday.js",
+              "name": "previousThursday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousThursday.mjs",
+              "name": "previousThursday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousTuesday.d.mts",
+              "name": "previousTuesday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousTuesday.d.ts",
+              "name": "previousTuesday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousTuesday.js",
+              "name": "previousTuesday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousTuesday.mjs",
+              "name": "previousTuesday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousWednesday.d.mts",
+              "name": "previousWednesday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousWednesday.d.ts",
+              "name": "previousWednesday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousWednesday.js",
+              "name": "previousWednesday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\previousWednesday.mjs",
+              "name": "previousWednesday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToMonths.d.mts",
+              "name": "quartersToMonths.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToMonths.d.ts",
+              "name": "quartersToMonths.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToMonths.js",
+              "name": "quartersToMonths.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToMonths.mjs",
+              "name": "quartersToMonths.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToYears.d.mts",
+              "name": "quartersToYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToYears.d.ts",
+              "name": "quartersToYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToYears.js",
+              "name": "quartersToYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\quartersToYears.mjs",
+              "name": "quartersToYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestHours.d.mts",
+              "name": "roundToNearestHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestHours.d.ts",
+              "name": "roundToNearestHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestHours.js",
+              "name": "roundToNearestHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestHours.mjs",
+              "name": "roundToNearestHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestMinutes.d.mts",
+              "name": "roundToNearestMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestMinutes.d.ts",
+              "name": "roundToNearestMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestMinutes.js",
+              "name": "roundToNearestMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\roundToNearestMinutes.mjs",
+              "name": "roundToNearestMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToHours.d.mts",
+              "name": "secondsToHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToHours.d.ts",
+              "name": "secondsToHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToHours.js",
+              "name": "secondsToHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToHours.mjs",
+              "name": "secondsToHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMilliseconds.d.mts",
+              "name": "secondsToMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMilliseconds.d.ts",
+              "name": "secondsToMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMilliseconds.js",
+              "name": "secondsToMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMilliseconds.mjs",
+              "name": "secondsToMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMinutes.d.mts",
+              "name": "secondsToMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMinutes.d.ts",
+              "name": "secondsToMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMinutes.js",
+              "name": "secondsToMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\secondsToMinutes.mjs",
+              "name": "secondsToMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\SECURITY.md",
+              "name": "SECURITY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\set.d.mts",
+              "name": "set.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\set.d.ts",
+              "name": "set.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\set.js",
+              "name": "set.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\set.mjs",
+              "name": "set.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDate.d.mts",
+              "name": "setDate.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDate.d.ts",
+              "name": "setDate.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDate.js",
+              "name": "setDate.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDate.mjs",
+              "name": "setDate.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDay.d.mts",
+              "name": "setDay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDay.d.ts",
+              "name": "setDay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDay.js",
+              "name": "setDay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDay.mjs",
+              "name": "setDay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDayOfYear.d.mts",
+              "name": "setDayOfYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDayOfYear.d.ts",
+              "name": "setDayOfYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDayOfYear.js",
+              "name": "setDayOfYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDayOfYear.mjs",
+              "name": "setDayOfYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDefaultOptions.d.mts",
+              "name": "setDefaultOptions.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDefaultOptions.d.ts",
+              "name": "setDefaultOptions.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDefaultOptions.js",
+              "name": "setDefaultOptions.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setDefaultOptions.mjs",
+              "name": "setDefaultOptions.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setHours.d.mts",
+              "name": "setHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setHours.d.ts",
+              "name": "setHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setHours.js",
+              "name": "setHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setHours.mjs",
+              "name": "setHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISODay.d.mts",
+              "name": "setISODay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISODay.d.ts",
+              "name": "setISODay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISODay.js",
+              "name": "setISODay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISODay.mjs",
+              "name": "setISODay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeek.d.mts",
+              "name": "setISOWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeek.d.ts",
+              "name": "setISOWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeek.js",
+              "name": "setISOWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeek.mjs",
+              "name": "setISOWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeekYear.d.mts",
+              "name": "setISOWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeekYear.d.ts",
+              "name": "setISOWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeekYear.js",
+              "name": "setISOWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setISOWeekYear.mjs",
+              "name": "setISOWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMilliseconds.d.mts",
+              "name": "setMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMilliseconds.d.ts",
+              "name": "setMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMilliseconds.js",
+              "name": "setMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMilliseconds.mjs",
+              "name": "setMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMinutes.d.mts",
+              "name": "setMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMinutes.d.ts",
+              "name": "setMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMinutes.js",
+              "name": "setMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMinutes.mjs",
+              "name": "setMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMonth.d.mts",
+              "name": "setMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMonth.d.ts",
+              "name": "setMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMonth.js",
+              "name": "setMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setMonth.mjs",
+              "name": "setMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setQuarter.d.mts",
+              "name": "setQuarter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setQuarter.d.ts",
+              "name": "setQuarter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setQuarter.js",
+              "name": "setQuarter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setQuarter.mjs",
+              "name": "setQuarter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setSeconds.d.mts",
+              "name": "setSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setSeconds.d.ts",
+              "name": "setSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setSeconds.js",
+              "name": "setSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setSeconds.mjs",
+              "name": "setSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeek.d.mts",
+              "name": "setWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeek.d.ts",
+              "name": "setWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeek.js",
+              "name": "setWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeek.mjs",
+              "name": "setWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeekYear.d.mts",
+              "name": "setWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeekYear.d.ts",
+              "name": "setWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeekYear.js",
+              "name": "setWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setWeekYear.mjs",
+              "name": "setWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setYear.d.mts",
+              "name": "setYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setYear.d.ts",
+              "name": "setYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setYear.js",
+              "name": "setYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\setYear.mjs",
+              "name": "setYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDay.d.mts",
+              "name": "startOfDay.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDay.d.ts",
+              "name": "startOfDay.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDay.js",
+              "name": "startOfDay.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDay.mjs",
+              "name": "startOfDay.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDecade.d.mts",
+              "name": "startOfDecade.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDecade.d.ts",
+              "name": "startOfDecade.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDecade.js",
+              "name": "startOfDecade.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfDecade.mjs",
+              "name": "startOfDecade.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfHour.d.mts",
+              "name": "startOfHour.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfHour.d.ts",
+              "name": "startOfHour.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfHour.js",
+              "name": "startOfHour.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfHour.mjs",
+              "name": "startOfHour.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeek.d.mts",
+              "name": "startOfISOWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeek.d.ts",
+              "name": "startOfISOWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeek.js",
+              "name": "startOfISOWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeek.mjs",
+              "name": "startOfISOWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeekYear.d.mts",
+              "name": "startOfISOWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeekYear.d.ts",
+              "name": "startOfISOWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeekYear.js",
+              "name": "startOfISOWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfISOWeekYear.mjs",
+              "name": "startOfISOWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMinute.d.mts",
+              "name": "startOfMinute.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMinute.d.ts",
+              "name": "startOfMinute.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMinute.js",
+              "name": "startOfMinute.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMinute.mjs",
+              "name": "startOfMinute.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMonth.d.mts",
+              "name": "startOfMonth.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMonth.d.ts",
+              "name": "startOfMonth.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMonth.js",
+              "name": "startOfMonth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfMonth.mjs",
+              "name": "startOfMonth.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfQuarter.d.mts",
+              "name": "startOfQuarter.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfQuarter.d.ts",
+              "name": "startOfQuarter.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfQuarter.js",
+              "name": "startOfQuarter.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfQuarter.mjs",
+              "name": "startOfQuarter.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfSecond.d.mts",
+              "name": "startOfSecond.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfSecond.d.ts",
+              "name": "startOfSecond.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfSecond.js",
+              "name": "startOfSecond.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfSecond.mjs",
+              "name": "startOfSecond.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfToday.d.mts",
+              "name": "startOfToday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfToday.d.ts",
+              "name": "startOfToday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfToday.js",
+              "name": "startOfToday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfToday.mjs",
+              "name": "startOfToday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfTomorrow.d.mts",
+              "name": "startOfTomorrow.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfTomorrow.d.ts",
+              "name": "startOfTomorrow.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfTomorrow.js",
+              "name": "startOfTomorrow.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfTomorrow.mjs",
+              "name": "startOfTomorrow.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeek.d.mts",
+              "name": "startOfWeek.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeek.d.ts",
+              "name": "startOfWeek.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeek.js",
+              "name": "startOfWeek.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeek.mjs",
+              "name": "startOfWeek.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeekYear.d.mts",
+              "name": "startOfWeekYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeekYear.d.ts",
+              "name": "startOfWeekYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeekYear.js",
+              "name": "startOfWeekYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfWeekYear.mjs",
+              "name": "startOfWeekYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYear.d.mts",
+              "name": "startOfYear.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYear.d.ts",
+              "name": "startOfYear.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYear.js",
+              "name": "startOfYear.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYear.mjs",
+              "name": "startOfYear.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYesterday.d.mts",
+              "name": "startOfYesterday.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYesterday.d.ts",
+              "name": "startOfYesterday.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYesterday.js",
+              "name": "startOfYesterday.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\startOfYesterday.mjs",
+              "name": "startOfYesterday.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\sub.d.mts",
+              "name": "sub.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\sub.d.ts",
+              "name": "sub.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\sub.js",
+              "name": "sub.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\sub.mjs",
+              "name": "sub.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subBusinessDays.d.mts",
+              "name": "subBusinessDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subBusinessDays.d.ts",
+              "name": "subBusinessDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subBusinessDays.js",
+              "name": "subBusinessDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subBusinessDays.mjs",
+              "name": "subBusinessDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subDays.d.mts",
+              "name": "subDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subDays.d.ts",
+              "name": "subDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subDays.js",
+              "name": "subDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subDays.mjs",
+              "name": "subDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subHours.d.mts",
+              "name": "subHours.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subHours.d.ts",
+              "name": "subHours.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subHours.js",
+              "name": "subHours.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subHours.mjs",
+              "name": "subHours.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subISOWeekYears.d.mts",
+              "name": "subISOWeekYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subISOWeekYears.d.ts",
+              "name": "subISOWeekYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subISOWeekYears.js",
+              "name": "subISOWeekYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subISOWeekYears.mjs",
+              "name": "subISOWeekYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMilliseconds.d.mts",
+              "name": "subMilliseconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMilliseconds.d.ts",
+              "name": "subMilliseconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMilliseconds.js",
+              "name": "subMilliseconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMilliseconds.mjs",
+              "name": "subMilliseconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMinutes.d.mts",
+              "name": "subMinutes.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMinutes.d.ts",
+              "name": "subMinutes.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMinutes.js",
+              "name": "subMinutes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMinutes.mjs",
+              "name": "subMinutes.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMonths.d.mts",
+              "name": "subMonths.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMonths.d.ts",
+              "name": "subMonths.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMonths.js",
+              "name": "subMonths.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subMonths.mjs",
+              "name": "subMonths.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subQuarters.d.mts",
+              "name": "subQuarters.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subQuarters.d.ts",
+              "name": "subQuarters.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subQuarters.js",
+              "name": "subQuarters.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subQuarters.mjs",
+              "name": "subQuarters.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subSeconds.d.mts",
+              "name": "subSeconds.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subSeconds.d.ts",
+              "name": "subSeconds.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subSeconds.js",
+              "name": "subSeconds.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subSeconds.mjs",
+              "name": "subSeconds.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subWeeks.d.mts",
+              "name": "subWeeks.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subWeeks.d.ts",
+              "name": "subWeeks.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subWeeks.js",
+              "name": "subWeeks.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subWeeks.mjs",
+              "name": "subWeeks.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subYears.d.mts",
+              "name": "subYears.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subYears.d.ts",
+              "name": "subYears.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subYears.js",
+              "name": "subYears.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\subYears.mjs",
+              "name": "subYears.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\toDate.d.mts",
+              "name": "toDate.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\toDate.d.ts",
+              "name": "toDate.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\toDate.js",
+              "name": "toDate.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\toDate.mjs",
+              "name": "toDate.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\transpose.d.mts",
+              "name": "transpose.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\transpose.d.ts",
+              "name": "transpose.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\transpose.js",
+              "name": "transpose.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\transpose.mjs",
+              "name": "transpose.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\types.d.mts",
+              "name": "types.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\types.d.ts",
+              "name": "types.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\types.js",
+              "name": "types.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\types.mjs",
+              "name": "types.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\weeksToDays.d.mts",
+              "name": "weeksToDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\weeksToDays.d.ts",
+              "name": "weeksToDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\weeksToDays.js",
+              "name": "weeksToDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\weeksToDays.mjs",
+              "name": "weeksToDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToDays.d.mts",
+              "name": "yearsToDays.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToDays.d.ts",
+              "name": "yearsToDays.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToDays.js",
+              "name": "yearsToDays.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToDays.mjs",
+              "name": "yearsToDays.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToMonths.d.mts",
+              "name": "yearsToMonths.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToMonths.d.ts",
+              "name": "yearsToMonths.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToMonths.js",
+              "name": "yearsToMonths.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToMonths.mjs",
+              "name": "yearsToMonths.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToQuarters.d.mts",
+              "name": "yearsToQuarters.d.mts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToQuarters.d.ts",
+              "name": "yearsToQuarters.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToQuarters.js",
+              "name": "yearsToQuarters.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\yearsToQuarters.mjs",
+              "name": "yearsToQuarters.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\date-fns\\_lib",
+              "name": "_lib",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\debug",
+          "name": "debug",
+          "children": [
+            {
+              "path": "node_modules\\debug\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\debug\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\debug\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\debug\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\decompress-response",
+          "name": "decompress-response",
+          "children": [
+            {
+              "path": "node_modules\\decompress-response\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\decompress-response\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\decompress-response\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\decompress-response\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\decompress-response\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\deep-extend",
+          "name": "deep-extend",
+          "children": [
+            {
+              "path": "node_modules\\deep-extend\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-extend\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-extend\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\deep-extend\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-extend\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-extend\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\deep-is",
+          "name": "deep-is",
+          "children": [
+            {
+              "path": "node_modules\\deep-is\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-is\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\deep-is\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-is\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-is\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-is\\README.markdown",
+              "name": "README.markdown",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deep-is\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\deepmerge",
+          "name": "deepmerge",
+          "children": [
+            {
+              "path": "node_modules\\deepmerge\\changelog.md",
+              "name": "changelog.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deepmerge\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\deepmerge\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deepmerge\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deepmerge\\license.txt",
+              "name": "license.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deepmerge\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deepmerge\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\deepmerge\\rollup.config.js",
+              "name": "rollup.config.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\define-data-property",
+          "name": "define-data-property",
+          "children": [
+            {
+              "path": "node_modules\\define-data-property\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\define-data-property\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-data-property\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\define-data-property\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\define-properties",
+          "name": "define-properties",
+          "children": [
+            {
+              "path": "node_modules\\define-properties\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-properties\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-properties\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\define-properties\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-properties\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-properties\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-properties\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-properties\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\define-properties\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\delayed-stream",
+          "name": "delayed-stream",
+          "children": [
+            {
+              "path": "node_modules\\delayed-stream\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\delayed-stream\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\delayed-stream\\License",
+              "name": "License",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\delayed-stream\\Makefile",
+              "name": "Makefile",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\delayed-stream\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\delayed-stream\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\dequal",
+          "name": "dequal",
+          "children": [
+            {
+              "path": "node_modules\\dequal\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\dequal\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dequal\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dequal\\lite",
+              "name": "lite",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\dequal\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dequal\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\detect-libc",
+          "name": "detect-libc",
+          "children": [
+            {
+              "path": "node_modules\\detect-libc\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\detect-libc\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\detect-libc\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\detect-libc\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\detect-libc\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\detect-node-es",
+          "name": "detect-node-es",
+          "children": [
+            {
+              "path": "node_modules\\detect-node-es\\es5",
+              "name": "es5",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\detect-node-es\\esm",
+              "name": "esm",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\detect-node-es\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\detect-node-es\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\detect-node-es\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\didyoumean",
+          "name": "didyoumean",
+          "children": [
+            {
+              "path": "node_modules\\didyoumean\\didYouMean-1.2.1.js",
+              "name": "didYouMean-1.2.1.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\didyoumean\\didYouMean-1.2.1.min.js",
+              "name": "didYouMean-1.2.1.min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\didyoumean\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\didyoumean\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\didyoumean\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\dir-glob",
+          "name": "dir-glob",
+          "children": [
+            {
+              "path": "node_modules\\dir-glob\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dir-glob\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dir-glob\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dir-glob\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\directory-tree",
+          "name": "directory-tree",
+          "children": [
+            {
+              "path": "node_modules\\directory-tree\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\directory-tree\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\directory-tree\\dark.svg",
+              "name": "dark.svg",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\directory-tree\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\directory-tree\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\directory-tree\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\directory-tree\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\directory-tree\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\dlv",
+          "name": "dlv",
+          "children": [
+            {
+              "path": "node_modules\\dlv\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\dlv\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dlv\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dlv\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\doctrine",
+          "name": "doctrine",
+          "children": [
+            {
+              "path": "node_modules\\doctrine\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\doctrine\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\doctrine\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\doctrine\\LICENSE.closure-compiler",
+              "name": "LICENSE.closure-compiler",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\doctrine\\LICENSE.esprima",
+              "name": "LICENSE.esprima",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\doctrine\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\doctrine\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\dot-case",
+          "name": "dot-case",
+          "children": [
+            {
+              "path": "node_modules\\dot-case\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\dot-case\\dist.es2015",
+              "name": "dist.es2015",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\dot-case\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dot-case\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\dot-case\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eastasianwidth",
+          "name": "eastasianwidth",
+          "children": [
+            {
+              "path": "node_modules\\eastasianwidth\\eastasianwidth.js",
+              "name": "eastasianwidth.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eastasianwidth\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eastasianwidth\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\electron-to-chromium",
+          "name": "electron-to-chromium",
+          "children": [
+            {
+              "path": "node_modules\\electron-to-chromium\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\chromium-versions.js",
+              "name": "chromium-versions.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\chromium-versions.json",
+              "name": "chromium-versions.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\full-chromium-versions.js",
+              "name": "full-chromium-versions.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\full-chromium-versions.json",
+              "name": "full-chromium-versions.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\full-versions.js",
+              "name": "full-versions.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\full-versions.json",
+              "name": "full-versions.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\versions.js",
+              "name": "versions.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\electron-to-chromium\\versions.json",
+              "name": "versions.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\embla-carousel",
+          "name": "embla-carousel",
+          "children": [
+            {
+              "path": "node_modules\\embla-carousel\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel\\components",
+              "name": "components",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel\\embla-carousel.umd.js",
+              "name": "embla-carousel.umd.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel\\esm",
+              "name": "esm",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\embla-carousel-react",
+          "name": "embla-carousel-react",
+          "children": [
+            {
+              "path": "node_modules\\embla-carousel-react\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel-react\\components",
+              "name": "components",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel-react\\embla-carousel-react.umd.js",
+              "name": "embla-carousel-react.umd.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel-react\\esm",
+              "name": "esm",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel-react\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel-react\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel-react\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\embla-carousel-reactive-utils",
+          "name": "embla-carousel-reactive-utils",
+          "children": [
+            {
+              "path": "node_modules\\embla-carousel-reactive-utils\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel-reactive-utils\\components",
+              "name": "components",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel-reactive-utils\\embla-carousel-reactive-utils.umd.js",
+              "name": "embla-carousel-reactive-utils.umd.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel-reactive-utils\\esm",
+              "name": "esm",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\embla-carousel-reactive-utils\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel-reactive-utils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\embla-carousel-reactive-utils\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\emoji-regex",
+          "name": "emoji-regex",
+          "children": [
+            {
+              "path": "node_modules\\emoji-regex\\es2015",
+              "name": "es2015",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\LICENSE-MIT.txt",
+              "name": "LICENSE-MIT.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\RGI_Emoji.d.ts",
+              "name": "RGI_Emoji.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\RGI_Emoji.js",
+              "name": "RGI_Emoji.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\text.d.ts",
+              "name": "text.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\emoji-regex\\text.js",
+              "name": "text.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\end-of-stream",
+          "name": "end-of-stream",
+          "children": [
+            {
+              "path": "node_modules\\end-of-stream\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\end-of-stream\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\end-of-stream\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\end-of-stream\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\enhanced-resolve",
+          "name": "enhanced-resolve",
+          "children": [
+            {
+              "path": "node_modules\\enhanced-resolve\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\enhanced-resolve\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\enhanced-resolve\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\enhanced-resolve\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\enhanced-resolve\\types.d.ts",
+              "name": "types.d.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-abstract",
+          "name": "es-abstract",
+          "children": [
+            {
+              "path": "node_modules\\es-abstract\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2015",
+              "name": "2015",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2016",
+              "name": "2016",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2017",
+              "name": "2017",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2018",
+              "name": "2018",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2019",
+              "name": "2019",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2020",
+              "name": "2020",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2021",
+              "name": "2021",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2022",
+              "name": "2022",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\2023",
+              "name": "2023",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\5",
+              "name": "5",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2015.js",
+              "name": "es2015.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2016.js",
+              "name": "es2016.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2017.js",
+              "name": "es2017.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2018.js",
+              "name": "es2018.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2019.js",
+              "name": "es2019.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2020.js",
+              "name": "es2020.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2021.js",
+              "name": "es2021.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2022.js",
+              "name": "es2022.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es2023.js",
+              "name": "es2023.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es5.js",
+              "name": "es5.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es6.js",
+              "name": "es6.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\es7.js",
+              "name": "es7.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\GetIntrinsic.js",
+              "name": "GetIntrinsic.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\helpers",
+              "name": "helpers",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\operations",
+              "name": "operations",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-abstract\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-abstract\\tsconfig.tmp.json",
+              "name": "tsconfig.tmp.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-array-method-boxes-properly",
+          "name": "es-array-method-boxes-properly",
+          "children": [
+            {
+              "path": "node_modules\\es-array-method-boxes-properly\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-array-method-boxes-properly\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-array-method-boxes-properly\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-array-method-boxes-properly\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-array-method-boxes-properly\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-array-method-boxes-properly\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-array-method-boxes-properly\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-define-property",
+          "name": "es-define-property",
+          "children": [
+            {
+              "path": "node_modules\\es-define-property\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-define-property\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-define-property\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-define-property\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-errors",
+          "name": "es-errors",
+          "children": [
+            {
+              "path": "node_modules\\es-errors\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-errors\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\eval.d.ts",
+              "name": "eval.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\eval.js",
+              "name": "eval.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\range.d.ts",
+              "name": "range.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\range.js",
+              "name": "range.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\ref.d.ts",
+              "name": "ref.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\ref.js",
+              "name": "ref.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\syntax.d.ts",
+              "name": "syntax.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\syntax.js",
+              "name": "syntax.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-errors\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\type.d.ts",
+              "name": "type.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\type.js",
+              "name": "type.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\uri.d.ts",
+              "name": "uri.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-errors\\uri.js",
+              "name": "uri.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-iterator-helpers",
+          "name": "es-iterator-helpers",
+          "children": [
+            {
+              "path": "node_modules\\es-iterator-helpers\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\aos",
+              "name": "aos",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\index.json",
+              "name": "index.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator",
+              "name": "Iterator",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.from",
+              "name": "Iterator.from",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype",
+              "name": "Iterator.prototype",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.constructor",
+              "name": "Iterator.prototype.constructor",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.drop",
+              "name": "Iterator.prototype.drop",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.every",
+              "name": "Iterator.prototype.every",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.filter",
+              "name": "Iterator.prototype.filter",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.find",
+              "name": "Iterator.prototype.find",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.flatMap",
+              "name": "Iterator.prototype.flatMap",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.forEach",
+              "name": "Iterator.prototype.forEach",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.map",
+              "name": "Iterator.prototype.map",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.reduce",
+              "name": "Iterator.prototype.reduce",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.some",
+              "name": "Iterator.prototype.some",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.take",
+              "name": "Iterator.prototype.take",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\Iterator.prototype.toArray",
+              "name": "Iterator.prototype.toArray",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\IteratorHelperPrototype",
+              "name": "IteratorHelperPrototype",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-iterator-helpers\\WrapForValidIteratorPrototype",
+              "name": "WrapForValidIteratorPrototype",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-set-tostringtag",
+          "name": "es-set-tostringtag",
+          "children": [
+            {
+              "path": "node_modules\\es-set-tostringtag\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-set-tostringtag\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-shim-unscopables",
+          "name": "es-shim-unscopables",
+          "children": [
+            {
+              "path": "node_modules\\es-shim-unscopables\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-shim-unscopables\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\es-to-primitive",
+          "name": "es-to-primitive",
+          "children": [
+            {
+              "path": "node_modules\\es-to-primitive\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\es2015.js",
+              "name": "es2015.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\es5.js",
+              "name": "es5.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\es6.js",
+              "name": "es6.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\helpers",
+              "name": "helpers",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\Makefile",
+              "name": "Makefile",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\es-to-primitive\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\escalade",
+          "name": "escalade",
+          "children": [
+            {
+              "path": "node_modules\\escalade\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\escalade\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escalade\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escalade\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escalade\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escalade\\sync",
+              "name": "sync",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\escape-string-regexp",
+          "name": "escape-string-regexp",
+          "children": [
+            {
+              "path": "node_modules\\escape-string-regexp\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escape-string-regexp\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escape-string-regexp\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escape-string-regexp\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\escape-string-regexp\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint",
+          "name": "eslint",
+          "children": [
+            {
+              "path": "node_modules\\eslint\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint\\conf",
+              "name": "conf",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint\\messages",
+              "name": "messages",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-config-next",
+          "name": "eslint-config-next",
+          "children": [
+            {
+              "path": "node_modules\\eslint-config-next\\core-web-vitals.js",
+              "name": "core-web-vitals.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-config-next\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-config-next\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-config-next\\parser.js",
+              "name": "parser.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-import-resolver-node",
+          "name": "eslint-import-resolver-node",
+          "children": [
+            {
+              "path": "node_modules\\eslint-import-resolver-node\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-node\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-node\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-node\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-node\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-import-resolver-typescript",
+          "name": "eslint-import-resolver-typescript",
+          "children": [
+            {
+              "path": "node_modules\\eslint-import-resolver-typescript\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-typescript\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-typescript\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-typescript\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-import-resolver-typescript\\shim.d.ts",
+              "name": "shim.d.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-module-utils",
+          "name": "eslint-module-utils",
+          "children": [
+            {
+              "path": "node_modules\\eslint-module-utils\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\declaredScope.d.ts",
+              "name": "declaredScope.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\declaredScope.js",
+              "name": "declaredScope.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\hash.d.ts",
+              "name": "hash.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\hash.js",
+              "name": "hash.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\ignore.d.ts",
+              "name": "ignore.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\ignore.js",
+              "name": "ignore.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\module-require.d.ts",
+              "name": "module-require.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\module-require.js",
+              "name": "module-require.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\ModuleCache.d.ts",
+              "name": "ModuleCache.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\ModuleCache.js",
+              "name": "ModuleCache.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\moduleVisitor.d.ts",
+              "name": "moduleVisitor.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\moduleVisitor.js",
+              "name": "moduleVisitor.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\parse.d.ts",
+              "name": "parse.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\parse.js",
+              "name": "parse.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\pkgDir.d.ts",
+              "name": "pkgDir.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\pkgDir.js",
+              "name": "pkgDir.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\pkgUp.d.ts",
+              "name": "pkgUp.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\pkgUp.js",
+              "name": "pkgUp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\readPkgUp.d.ts",
+              "name": "readPkgUp.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\readPkgUp.js",
+              "name": "readPkgUp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\resolve.d.ts",
+              "name": "resolve.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\resolve.js",
+              "name": "resolve.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\types.d.ts",
+              "name": "types.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\unambiguous.d.ts",
+              "name": "unambiguous.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\unambiguous.js",
+              "name": "unambiguous.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\visit.d.ts",
+              "name": "visit.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-module-utils\\visit.js",
+              "name": "visit.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-plugin-import",
+          "name": "eslint-plugin-import",
+          "children": [
+            {
+              "path": "node_modules\\eslint-plugin-import\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\config",
+              "name": "config",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\CONTRIBUTING.md",
+              "name": "CONTRIBUTING.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\docs",
+              "name": "docs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\memo-parser",
+              "name": "memo-parser",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\RELEASE.md",
+              "name": "RELEASE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-import\\SECURITY.md",
+              "name": "SECURITY.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-plugin-jsx-a11y",
+          "name": "eslint-plugin-jsx-a11y",
+          "children": [
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\.babelrc",
+              "name": ".babelrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\docs",
+              "name": "docs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\__mocks__",
+              "name": "__mocks__",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-jsx-a11y\\__tests__",
+              "name": "__tests__",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-plugin-react",
+          "name": "eslint-plugin-react",
+          "children": [
+            {
+              "path": "node_modules\\eslint-plugin-react\\configs",
+              "name": "configs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-plugin-react-hooks",
+          "name": "eslint-plugin-react-hooks",
+          "children": [
+            {
+              "path": "node_modules\\eslint-plugin-react-hooks\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react-hooks\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react-hooks\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react-hooks\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-plugin-react-hooks\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-scope",
+          "name": "eslint-scope",
+          "children": [
+            {
+              "path": "node_modules\\eslint-scope\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-scope\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-scope\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-scope\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-scope\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\eslint-visitor-keys",
+          "name": "eslint-visitor-keys",
+          "children": [
+            {
+              "path": "node_modules\\eslint-visitor-keys\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-visitor-keys\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\eslint-visitor-keys\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-visitor-keys\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\eslint-visitor-keys\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\espree",
+          "name": "espree",
+          "children": [
+            {
+              "path": "node_modules\\espree\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\espree\\espree.js",
+              "name": "espree.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\espree\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\espree\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\espree\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\espree\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\esquery",
+          "name": "esquery",
+          "children": [
+            {
+              "path": "node_modules\\esquery\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\esquery\\license.txt",
+              "name": "license.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esquery\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esquery\\parser.js",
+              "name": "parser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esquery\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\esrecurse",
+          "name": "esrecurse",
+          "children": [
+            {
+              "path": "node_modules\\esrecurse\\.babelrc",
+              "name": ".babelrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esrecurse\\esrecurse.js",
+              "name": "esrecurse.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esrecurse\\gulpfile.babel.js",
+              "name": "gulpfile.babel.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esrecurse\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esrecurse\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\estraverse",
+          "name": "estraverse",
+          "children": [
+            {
+              "path": "node_modules\\estraverse\\.jshintrc",
+              "name": ".jshintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\estraverse\\estraverse.js",
+              "name": "estraverse.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\estraverse\\gulpfile.js",
+              "name": "gulpfile.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\estraverse\\LICENSE.BSD",
+              "name": "LICENSE.BSD",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\estraverse\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\estraverse\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\esutils",
+          "name": "esutils",
+          "children": [
+            {
+              "path": "node_modules\\esutils\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\esutils\\LICENSE.BSD",
+              "name": "LICENSE.BSD",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esutils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\esutils\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\expand-template",
+          "name": "expand-template",
+          "children": [
+            {
+              "path": "node_modules\\expand-template\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\expand-template\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\expand-template\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\expand-template\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\expand-template\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\expand-template\\test.js",
+              "name": "test.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fast-deep-equal",
+          "name": "fast-deep-equal",
+          "children": [
+            {
+              "path": "node_modules\\fast-deep-equal\\es6",
+              "name": "es6",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\fast-deep-equal\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-deep-equal\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-deep-equal\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-deep-equal\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-deep-equal\\react.d.ts",
+              "name": "react.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-deep-equal\\react.js",
+              "name": "react.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-deep-equal\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fast-glob",
+          "name": "fast-glob",
+          "children": [
+            {
+              "path": "node_modules\\fast-glob\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-glob\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\fast-glob\\out",
+              "name": "out",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\fast-glob\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-glob\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fast-json-stable-stringify",
+          "name": "fast-json-stable-stringify",
+          "children": [
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\.eslintrc.yml",
+              "name": ".eslintrc.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\benchmark",
+              "name": "benchmark",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-json-stable-stringify\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fast-levenshtein",
+          "name": "fast-levenshtein",
+          "children": [
+            {
+              "path": "node_modules\\fast-levenshtein\\levenshtein.js",
+              "name": "levenshtein.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-levenshtein\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-levenshtein\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fast-levenshtein\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fastq",
+          "name": "fastq",
+          "children": [
+            {
+              "path": "node_modules\\fastq\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\fastq\\bench.js",
+              "name": "bench.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\example.js",
+              "name": "example.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\example.mjs",
+              "name": "example.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\queue.js",
+              "name": "queue.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fastq\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\file-entry-cache",
+          "name": "file-entry-cache",
+          "children": [
+            {
+              "path": "node_modules\\file-entry-cache\\cache.js",
+              "name": "cache.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\file-entry-cache\\changelog.md",
+              "name": "changelog.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\file-entry-cache\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\file-entry-cache\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\file-entry-cache\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fill-range",
+          "name": "fill-range",
+          "children": [
+            {
+              "path": "node_modules\\fill-range\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fill-range\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fill-range\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fill-range\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\find-replace",
+          "name": "find-replace",
+          "children": [
+            {
+              "path": "node_modules\\find-replace\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\find-replace\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-replace\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-replace\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-replace\\README.hbs",
+              "name": "README.hbs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-replace\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\find-up",
+          "name": "find-up",
+          "children": [
+            {
+              "path": "node_modules\\find-up\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-up\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-up\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-up\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\find-up\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\flat-cache",
+          "name": "flat-cache",
+          "children": [
+            {
+              "path": "node_modules\\flat-cache\\changelog.md",
+              "name": "changelog.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flat-cache\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flat-cache\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flat-cache\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flat-cache\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\flatted",
+          "name": "flatted",
+          "children": [
+            {
+              "path": "node_modules\\flatted\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\flatted\\es.js",
+              "name": "es.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flatted\\esm",
+              "name": "esm",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\flatted\\esm.js",
+              "name": "esm.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flatted\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flatted\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flatted\\min.js",
+              "name": "min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flatted\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flatted\\php",
+              "name": "php",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\flatted\\python",
+              "name": "python",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\flatted\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\flatted\\types",
+              "name": "types",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\for-each",
+          "name": "for-each",
+          "children": [
+            {
+              "path": "node_modules\\for-each\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\for-each\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\for-each\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\for-each\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\for-each\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\for-each\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\for-each\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\for-each\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\foreground-child",
+          "name": "foreground-child",
+          "children": [
+            {
+              "path": "node_modules\\foreground-child\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\foreground-child\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\foreground-child\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\foreground-child\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\form-data",
+          "name": "form-data",
+          "children": [
+            {
+              "path": "node_modules\\form-data\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\form-data\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\form-data\\License",
+              "name": "License",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\form-data\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\form-data\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fraction.js",
+          "name": "fraction.js",
+          "children": [
+            {
+              "path": "node_modules\\fraction.js\\bigfraction.js",
+              "name": "bigfraction.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fraction.js\\fraction.cjs",
+              "name": "fraction.cjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fraction.js\\fraction.d.ts",
+              "name": "fraction.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fraction.js\\fraction.js",
+              "name": "fraction.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fraction.js\\fraction.min.js",
+              "name": "fraction.min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fraction.js\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fraction.js\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fraction.js\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\framer-motion",
+          "name": "framer-motion",
+          "children": [
+            {
+              "path": "node_modules\\framer-motion\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\framer-motion\\dom",
+              "name": "dom",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\framer-motion\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\framer-motion\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\framer-motion\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fs-constants",
+          "name": "fs-constants",
+          "children": [
+            {
+              "path": "node_modules\\fs-constants\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs-constants\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs-constants\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs-constants\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs-constants\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\fs.realpath",
+          "name": "fs.realpath",
+          "children": [
+            {
+              "path": "node_modules\\fs.realpath\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs.realpath\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs.realpath\\old.js",
+              "name": "old.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs.realpath\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\fs.realpath\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\function-bind",
+          "name": "function-bind",
+          "children": [
+            {
+              "path": "node_modules\\function-bind\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\function-bind\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function-bind\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\function.prototype.name",
+          "name": "function.prototype.name",
+          "children": [
+            {
+              "path": "node_modules\\function.prototype.name\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\helpers",
+              "name": "helpers",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\function.prototype.name\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\functions-have-names",
+          "name": "functions-have-names",
+          "children": [
+            {
+              "path": "node_modules\\functions-have-names\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\functions-have-names\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\get-intrinsic",
+          "name": "get-intrinsic",
+          "children": [
+            {
+              "path": "node_modules\\get-intrinsic\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-intrinsic\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\get-nonce",
+          "name": "get-nonce",
+          "children": [
+            {
+              "path": "node_modules\\get-nonce\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-nonce\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\get-nonce\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-nonce\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-nonce\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\get-symbol-description",
+          "name": "get-symbol-description",
+          "children": [
+            {
+              "path": "node_modules\\get-symbol-description\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\getInferredName.js",
+              "name": "getInferredName.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-symbol-description\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\get-tsconfig",
+          "name": "get-tsconfig",
+          "children": [
+            {
+              "path": "node_modules\\get-tsconfig\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\get-tsconfig\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-tsconfig\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\get-tsconfig\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\github-from-package",
+          "name": "github-from-package",
+          "children": [
+            {
+              "path": "node_modules\\github-from-package\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\github-from-package\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\github-from-package\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\github-from-package\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\github-from-package\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\github-from-package\\readme.markdown",
+              "name": "readme.markdown",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\github-from-package\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\glob",
+          "name": "glob",
+          "children": [
+            {
+              "path": "node_modules\\glob\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\glob\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\glob\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\glob-parent",
+          "name": "glob-parent",
+          "children": [
+            {
+              "path": "node_modules\\glob-parent\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob-parent\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob-parent\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob-parent\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\glob-to-regexp",
+          "name": "glob-to-regexp",
+          "children": [
+            {
+              "path": "node_modules\\glob-to-regexp\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob-to-regexp\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob-to-regexp\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob-to-regexp\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\glob-to-regexp\\test.js",
+              "name": "test.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\globals",
+          "name": "globals",
+          "children": [
+            {
+              "path": "node_modules\\globals\\globals.json",
+              "name": "globals.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globals\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globals\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globals\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globals\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globals\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\globalthis",
+          "name": "globalthis",
+          "children": [
+            {
+              "path": "node_modules\\globalthis\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\implementation.browser.js",
+              "name": "implementation.browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globalthis\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\globby",
+          "name": "globby",
+          "children": [
+            {
+              "path": "node_modules\\globby\\gitignore.js",
+              "name": "gitignore.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globby\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globby\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globby\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globby\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globby\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\globby\\stream-utils.js",
+              "name": "stream-utils.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\gopd",
+          "name": "gopd",
+          "children": [
+            {
+              "path": "node_modules\\gopd\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\gopd\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\gopd\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\gopd\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\gopd\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\gopd\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\gopd\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\gopd\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\graceful-fs",
+          "name": "graceful-fs",
+          "children": [
+            {
+              "path": "node_modules\\graceful-fs\\clone.js",
+              "name": "clone.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graceful-fs\\graceful-fs.js",
+              "name": "graceful-fs.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graceful-fs\\legacy-streams.js",
+              "name": "legacy-streams.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graceful-fs\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graceful-fs\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graceful-fs\\polyfills.js",
+              "name": "polyfills.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graceful-fs\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\graphemer",
+          "name": "graphemer",
+          "children": [
+            {
+              "path": "node_modules\\graphemer\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graphemer\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\graphemer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graphemer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\graphemer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\has-bigints",
+          "name": "has-bigints",
+          "children": [
+            {
+              "path": "node_modules\\has-bigints\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-bigints\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\has-bigints\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-bigints\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-bigints\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-bigints\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-bigints\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-bigints\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-bigints\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\has-flag",
+          "name": "has-flag",
+          "children": [
+            {
+              "path": "node_modules\\has-flag\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-flag\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-flag\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-flag\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-flag\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\has-property-descriptors",
+          "name": "has-property-descriptors",
+          "children": [
+            {
+              "path": "node_modules\\has-property-descriptors\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-property-descriptors\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\has-proto",
+          "name": "has-proto",
+          "children": [
+            {
+              "path": "node_modules\\has-proto\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-proto\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\has-proto\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-proto\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-proto\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-proto\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-proto\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-proto\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-proto\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\has-proto\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\has-symbols",
+          "name": "has-symbols",
+          "children": [
+            {
+              "path": "node_modules\\has-symbols\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\has-symbols\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\shams.js",
+              "name": "shams.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-symbols\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\has-tostringtag",
+          "name": "has-tostringtag",
+          "children": [
+            {
+              "path": "node_modules\\has-tostringtag\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\shams.d.ts",
+              "name": "shams.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\shams.js",
+              "name": "shams.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\has-tostringtag\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\hasown",
+          "name": "hasown",
+          "children": [
+            {
+              "path": "node_modules\\hasown\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\hasown\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\hasown\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ieee754",
+          "name": "ieee754",
+          "children": [
+            {
+              "path": "node_modules\\ieee754\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ieee754\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ieee754\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ieee754\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ieee754\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ignore",
+          "name": "ignore",
+          "children": [
+            {
+              "path": "node_modules\\ignore\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ignore\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ignore\\legacy.js",
+              "name": "legacy.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ignore\\LICENSE-MIT",
+              "name": "LICENSE-MIT",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ignore\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ignore\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\import-fresh",
+          "name": "import-fresh",
+          "children": [
+            {
+              "path": "node_modules\\import-fresh\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\import-fresh\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\import-fresh\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\import-fresh\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\import-fresh\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\imurmurhash",
+          "name": "imurmurhash",
+          "children": [
+            {
+              "path": "node_modules\\imurmurhash\\imurmurhash.js",
+              "name": "imurmurhash.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\imurmurhash\\imurmurhash.min.js",
+              "name": "imurmurhash.min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\imurmurhash\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\imurmurhash\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\inflight",
+          "name": "inflight",
+          "children": [
+            {
+              "path": "node_modules\\inflight\\inflight.js",
+              "name": "inflight.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\inflight\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\inflight\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\inflight\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\inherits",
+          "name": "inherits",
+          "children": [
+            {
+              "path": "node_modules\\inherits\\inherits.js",
+              "name": "inherits.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\inherits\\inherits_browser.js",
+              "name": "inherits_browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\inherits\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\inherits\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\inherits\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ini",
+          "name": "ini",
+          "children": [
+            {
+              "path": "node_modules\\ini\\ini.js",
+              "name": "ini.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ini\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ini\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ini\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\input-otp",
+          "name": "input-otp",
+          "children": [
+            {
+              "path": "node_modules\\input-otp\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\input-otp\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\input-otp\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\internal-slot",
+          "name": "internal-slot",
+          "children": [
+            {
+              "path": "node_modules\\internal-slot\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\internal-slot\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\internal-slot\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\invariant",
+          "name": "invariant",
+          "children": [
+            {
+              "path": "node_modules\\invariant\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\invariant\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\invariant\\invariant.js",
+              "name": "invariant.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\invariant\\invariant.js.flow",
+              "name": "invariant.js.flow",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\invariant\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\invariant\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\invariant\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-array-buffer",
+          "name": "is-array-buffer",
+          "children": [
+            {
+              "path": "node_modules\\is-array-buffer\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-array-buffer\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-async-function",
+          "name": "is-async-function",
+          "children": [
+            {
+              "path": "node_modules\\is-async-function\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-async-function\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-async-function\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-async-function\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-async-function\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-async-function\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-async-function\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-async-function\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-bigint",
+          "name": "is-bigint",
+          "children": [
+            {
+              "path": "node_modules\\is-bigint\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-bigint\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-bigint\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-binary-path",
+          "name": "is-binary-path",
+          "children": [
+            {
+              "path": "node_modules\\is-binary-path\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-binary-path\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-binary-path\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-binary-path\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-binary-path\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-boolean-object",
+          "name": "is-boolean-object",
+          "children": [
+            {
+              "path": "node_modules\\is-boolean-object\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-boolean-object\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-callable",
+          "name": "is-callable",
+          "children": [
+            {
+              "path": "node_modules\\is-callable\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-callable\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-callable\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-core-module",
+          "name": "is-core-module",
+          "children": [
+            {
+              "path": "node_modules\\is-core-module\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\core.json",
+              "name": "core.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-core-module\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-date-object",
+          "name": "is-date-object",
+          "children": [
+            {
+              "path": "node_modules\\is-date-object\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-date-object\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-date-object\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-extglob",
+          "name": "is-extglob",
+          "children": [
+            {
+              "path": "node_modules\\is-extglob\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-extglob\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-extglob\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-extglob\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-finalizationregistry",
+          "name": "is-finalizationregistry",
+          "children": [
+            {
+              "path": "node_modules\\is-finalizationregistry\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-finalizationregistry\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-fullwidth-code-point",
+          "name": "is-fullwidth-code-point",
+          "children": [
+            {
+              "path": "node_modules\\is-fullwidth-code-point\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-fullwidth-code-point\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-fullwidth-code-point\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-fullwidth-code-point\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-fullwidth-code-point\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-generator-function",
+          "name": "is-generator-function",
+          "children": [
+            {
+              "path": "node_modules\\is-generator-function\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\.nvmrc",
+              "name": ".nvmrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-generator-function\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-glob",
+          "name": "is-glob",
+          "children": [
+            {
+              "path": "node_modules\\is-glob\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-glob\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-glob\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-glob\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-map",
+          "name": "is-map",
+          "children": [
+            {
+              "path": "node_modules\\is-map\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\.gitattributes",
+              "name": ".gitattributes",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-map\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-map\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-map\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-negative-zero",
+          "name": "is-negative-zero",
+          "children": [
+            {
+              "path": "node_modules\\is-negative-zero\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-negative-zero\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-number",
+          "name": "is-number",
+          "children": [
+            {
+              "path": "node_modules\\is-number\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-number-object",
+          "name": "is-number-object",
+          "children": [
+            {
+              "path": "node_modules\\is-number-object\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-number-object\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-number-object\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-path-inside",
+          "name": "is-path-inside",
+          "children": [
+            {
+              "path": "node_modules\\is-path-inside\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-path-inside\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-path-inside\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-path-inside\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-path-inside\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-regex",
+          "name": "is-regex",
+          "children": [
+            {
+              "path": "node_modules\\is-regex\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-regex\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-set",
+          "name": "is-set",
+          "children": [
+            {
+              "path": "node_modules\\is-set\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\.gitattributes",
+              "name": ".gitattributes",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-set\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-set\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-set\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-shared-array-buffer",
+          "name": "is-shared-array-buffer",
+          "children": [
+            {
+              "path": "node_modules\\is-shared-array-buffer\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-shared-array-buffer\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-string",
+          "name": "is-string",
+          "children": [
+            {
+              "path": "node_modules\\is-string\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-string\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-string\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-symbol",
+          "name": "is-symbol",
+          "children": [
+            {
+              "path": "node_modules\\is-symbol\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-symbol\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-symbol\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-typed-array",
+          "name": "is-typed-array",
+          "children": [
+            {
+              "path": "node_modules\\is-typed-array\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-typed-array\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-weakmap",
+          "name": "is-weakmap",
+          "children": [
+            {
+              "path": "node_modules\\is-weakmap\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-weakmap\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-weakref",
+          "name": "is-weakref",
+          "children": [
+            {
+              "path": "node_modules\\is-weakref\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-weakref\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakref\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\is-weakset",
+          "name": "is-weakset",
+          "children": [
+            {
+              "path": "node_modules\\is-weakset\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\.gitattributes",
+              "name": ".gitattributes",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-weakset\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\is-weakset\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\is-weakset\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\isarray",
+          "name": "isarray",
+          "children": [
+            {
+              "path": "node_modules\\isarray\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isarray\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isarray\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isarray\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\isexe",
+          "name": "isexe",
+          "children": [
+            {
+              "path": "node_modules\\isexe\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isexe\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isexe\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isexe\\mode.js",
+              "name": "mode.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isexe\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isexe\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\isexe\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\isexe\\windows.js",
+              "name": "windows.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\iterator.prototype",
+          "name": "iterator.prototype",
+          "children": [
+            {
+              "path": "node_modules\\iterator.prototype\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\iterator.prototype\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\iterator.prototype\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\iterator.prototype\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\iterator.prototype\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\iterator.prototype\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\iterator.prototype\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\iterator.prototype\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\jackspeak",
+          "name": "jackspeak",
+          "children": [
+            {
+              "path": "node_modules\\jackspeak\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\jackspeak\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jackspeak\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jackspeak\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\jiti",
+          "name": "jiti",
+          "children": [
+            {
+              "path": "node_modules\\jiti\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\jiti\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\jiti\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\jiti\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jiti\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jiti\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jiti\\register.js",
+              "name": "register.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\js-cookie",
+          "name": "js-cookie",
+          "children": [
+            {
+              "path": "node_modules\\js-cookie\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\js-cookie\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-cookie\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-cookie\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-cookie\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\js-tokens",
+          "name": "js-tokens",
+          "children": [
+            {
+              "path": "node_modules\\js-tokens\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-tokens\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-tokens\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-tokens\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-tokens\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\js-yaml",
+          "name": "js-yaml",
+          "children": [
+            {
+              "path": "node_modules\\js-yaml\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\js-yaml\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-yaml\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\js-yaml\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-yaml\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\js-yaml\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-yaml\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\js-yaml\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\json-buffer",
+          "name": "json-buffer",
+          "children": [
+            {
+              "path": "node_modules\\json-buffer\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-buffer\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-buffer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-buffer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-buffer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-buffer\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\json-schema-traverse",
+          "name": "json-schema-traverse",
+          "children": [
+            {
+              "path": "node_modules\\json-schema-traverse\\.eslintrc.yml",
+              "name": ".eslintrc.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-schema-traverse\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-schema-traverse\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-schema-traverse\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-schema-traverse\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-schema-traverse\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-schema-traverse\\spec",
+              "name": "spec",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\json-stable-stringify-without-jsonify",
+          "name": "json-stable-stringify-without-jsonify",
+          "children": [
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\readme.markdown",
+              "name": "readme.markdown",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json-stable-stringify-without-jsonify\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\json5",
+          "name": "json5",
+          "children": [
+            {
+              "path": "node_modules\\json5\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\json5\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\json5\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json5\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\json5\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\jsx-ast-utils",
+          "name": "jsx-ast-utils",
+          "children": [
+            {
+              "path": "node_modules\\jsx-ast-utils\\.babelrc",
+              "name": ".babelrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\elementType.js",
+              "name": "elementType.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\eventHandlers.js",
+              "name": "eventHandlers.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\eventHandlersByType.js",
+              "name": "eventHandlersByType.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\getLiteralPropValue.js",
+              "name": "getLiteralPropValue.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\getProp.js",
+              "name": "getProp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\getPropValue.js",
+              "name": "getPropValue.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\hasAnyProp.js",
+              "name": "hasAnyProp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\hasEveryProp.js",
+              "name": "hasEveryProp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\hasProp.js",
+              "name": "hasProp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\propName.js",
+              "name": "propName.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\src",
+              "name": "src",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\jsx-ast-utils\\__tests__",
+              "name": "__tests__",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\keyv",
+          "name": "keyv",
+          "children": [
+            {
+              "path": "node_modules\\keyv\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\keyv\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\keyv\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\language-subtag-registry",
+          "name": "language-subtag-registry",
+          "children": [
+            {
+              "path": "node_modules\\language-subtag-registry\\data",
+              "name": "data",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\language-subtag-registry\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\language-subtag-registry\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\language-tags",
+          "name": "language-tags",
+          "children": [
+            {
+              "path": "node_modules\\language-tags\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\language-tags\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\language-tags\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\levn",
+          "name": "levn",
+          "children": [
+            {
+              "path": "node_modules\\levn\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\levn\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\levn\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\levn\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\lilconfig",
+          "name": "lilconfig",
+          "children": [
+            {
+              "path": "node_modules\\lilconfig\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\lilconfig\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lilconfig\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lilconfig\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\lines-and-columns",
+          "name": "lines-and-columns",
+          "children": [
+            {
+              "path": "node_modules\\lines-and-columns\\build",
+              "name": "build",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\lines-and-columns\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lines-and-columns\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lines-and-columns\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\locate-path",
+          "name": "locate-path",
+          "children": [
+            {
+              "path": "node_modules\\locate-path\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\locate-path\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\locate-path\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\locate-path\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\locate-path\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\lodash.camelcase",
+          "name": "lodash.camelcase",
+          "children": [
+            {
+              "path": "node_modules\\lodash.camelcase\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lodash.camelcase\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lodash.camelcase\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lodash.camelcase\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\lodash.merge",
+          "name": "lodash.merge",
+          "children": [
+            {
+              "path": "node_modules\\lodash.merge\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lodash.merge\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lodash.merge\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lodash.merge\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\loose-envify",
+          "name": "loose-envify",
+          "children": [
+            {
+              "path": "node_modules\\loose-envify\\cli.js",
+              "name": "cli.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\loose-envify\\custom.js",
+              "name": "custom.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\loose-envify\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\loose-envify\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\loose-envify\\loose-envify.js",
+              "name": "loose-envify.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\loose-envify\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\loose-envify\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\loose-envify\\replace.js",
+              "name": "replace.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\lower-case",
+          "name": "lower-case",
+          "children": [
+            {
+              "path": "node_modules\\lower-case\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\lower-case\\dist.es2015",
+              "name": "dist.es2015",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\lower-case\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lower-case\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lower-case\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\lru-cache",
+          "name": "lru-cache",
+          "children": [
+            {
+              "path": "node_modules\\lru-cache\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\lru-cache\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lru-cache\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lru-cache\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\lucide-react",
+          "name": "lucide-react",
+          "children": [
+            {
+              "path": "node_modules\\lucide-react\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\lucide-react\\dynamicIconImports.d.ts",
+              "name": "dynamicIconImports.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lucide-react\\dynamicIconImports.js",
+              "name": "dynamicIconImports.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lucide-react\\dynamicIconImports.js.map",
+              "name": "dynamicIconImports.js.map",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lucide-react\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lucide-react\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\lucide-react\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\map-obj",
+          "name": "map-obj",
+          "children": [
+            {
+              "path": "node_modules\\map-obj\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\map-obj\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\map-obj\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\map-obj\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\map-obj\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\merge2",
+          "name": "merge2",
+          "children": [
+            {
+              "path": "node_modules\\merge2\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\merge2\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\merge2\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\merge2\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\micromatch",
+          "name": "micromatch",
+          "children": [
+            {
+              "path": "node_modules\\micromatch\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\micromatch\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\micromatch\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\micromatch\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\mime-db",
+          "name": "mime-db",
+          "children": [
+            {
+              "path": "node_modules\\mime-db\\db.json",
+              "name": "db.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-db\\HISTORY.md",
+              "name": "HISTORY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-db\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-db\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-db\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-db\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\mime-types",
+          "name": "mime-types",
+          "children": [
+            {
+              "path": "node_modules\\mime-types\\HISTORY.md",
+              "name": "HISTORY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-types\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-types\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-types\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mime-types\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\mimic-response",
+          "name": "mimic-response",
+          "children": [
+            {
+              "path": "node_modules\\mimic-response\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mimic-response\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mimic-response\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mimic-response\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mimic-response\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\minimatch",
+          "name": "minimatch",
+          "children": [
+            {
+              "path": "node_modules\\minimatch\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimatch\\minimatch.js",
+              "name": "minimatch.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimatch\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimatch\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\minimist",
+          "name": "minimist",
+          "children": [
+            {
+              "path": "node_modules\\minimist\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimist\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\minimist\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimist\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimist\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\minimist\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimist\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimist\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimist\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minimist\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\minipass",
+          "name": "minipass",
+          "children": [
+            {
+              "path": "node_modules\\minipass\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\minipass\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minipass\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\minipass\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\mkdirp-classic",
+          "name": "mkdirp-classic",
+          "children": [
+            {
+              "path": "node_modules\\mkdirp-classic\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mkdirp-classic\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mkdirp-classic\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mkdirp-classic\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ms",
+          "name": "ms",
+          "children": [
+            {
+              "path": "node_modules\\ms\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ms\\license.md",
+              "name": "license.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ms\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ms\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\mz",
+          "name": "mz",
+          "children": [
+            {
+              "path": "node_modules\\mz\\child_process.js",
+              "name": "child_process.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\crypto.js",
+              "name": "crypto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\dns.js",
+              "name": "dns.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\fs.js",
+              "name": "fs.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\HISTORY.md",
+              "name": "HISTORY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\readline.js",
+              "name": "readline.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\mz\\zlib.js",
+              "name": "zlib.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\nanoid",
+          "name": "nanoid",
+          "children": [
+            {
+              "path": "node_modules\\nanoid\\.devcontainer.json",
+              "name": ".devcontainer.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\async",
+              "name": "async",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\nanoid\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\nanoid\\index.browser.cjs",
+              "name": "index.browser.cjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\index.browser.js",
+              "name": "index.browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\index.cjs",
+              "name": "index.cjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\index.d.cts",
+              "name": "index.d.cts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\nanoid.js",
+              "name": "nanoid.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\non-secure",
+              "name": "non-secure",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\nanoid\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nanoid\\url-alphabet",
+              "name": "url-alphabet",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\napi-build-utils",
+          "name": "napi-build-utils",
+          "children": [
+            {
+              "path": "node_modules\\napi-build-utils\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\napi-build-utils\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\napi-build-utils\\index.md",
+              "name": "index.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\napi-build-utils\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\napi-build-utils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\napi-build-utils\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\natural-compare",
+          "name": "natural-compare",
+          "children": [
+            {
+              "path": "node_modules\\natural-compare\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\natural-compare\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\natural-compare\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\next",
+          "name": "next",
+          "children": [
+            {
+              "path": "node_modules\\next\\amp.d.ts",
+              "name": "amp.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\amp.js",
+              "name": "amp.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\app.d.ts",
+              "name": "app.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\app.js",
+              "name": "app.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\babel.d.ts",
+              "name": "babel.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\babel.js",
+              "name": "babel.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\cache.d.ts",
+              "name": "cache.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\cache.js",
+              "name": "cache.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\client.d.ts",
+              "name": "client.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\client.js",
+              "name": "client.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\compat",
+              "name": "compat",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\config.d.ts",
+              "name": "config.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\config.js",
+              "name": "config.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\constants.d.ts",
+              "name": "constants.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\constants.js",
+              "name": "constants.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\document.d.ts",
+              "name": "document.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\document.js",
+              "name": "document.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\dynamic.d.ts",
+              "name": "dynamic.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\dynamic.js",
+              "name": "dynamic.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\error.d.ts",
+              "name": "error.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\error.js",
+              "name": "error.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\experimental",
+              "name": "experimental",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\font",
+              "name": "font",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\head.d.ts",
+              "name": "head.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\head.js",
+              "name": "head.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\headers.d.ts",
+              "name": "headers.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\headers.js",
+              "name": "headers.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\image-types",
+              "name": "image-types",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\image.d.ts",
+              "name": "image.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\image.js",
+              "name": "image.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\jest.d.ts",
+              "name": "jest.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\jest.js",
+              "name": "jest.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\legacy",
+              "name": "legacy",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\license.md",
+              "name": "license.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\link.d.ts",
+              "name": "link.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\link.js",
+              "name": "link.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\navigation-types",
+              "name": "navigation-types",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\navigation.d.ts",
+              "name": "navigation.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\navigation.js",
+              "name": "navigation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\og.d.ts",
+              "name": "og.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\og.js",
+              "name": "og.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\router.d.ts",
+              "name": "router.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\router.js",
+              "name": "router.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\script.d.ts",
+              "name": "script.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\script.js",
+              "name": "script.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\server.d.ts",
+              "name": "server.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\server.js",
+              "name": "server.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\types",
+              "name": "types",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next\\web-vitals.d.ts",
+              "name": "web-vitals.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next\\web-vitals.js",
+              "name": "web-vitals.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\next-themes",
+          "name": "next-themes",
+          "children": [
+            {
+              "path": "node_modules\\next-themes\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\next-themes\\license.md",
+              "name": "license.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next-themes\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\next-themes\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\nextjs-toploader",
+          "name": "nextjs-toploader",
+          "children": [
+            {
+              "path": "node_modules\\nextjs-toploader\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\nextjs-toploader\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nextjs-toploader\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nextjs-toploader\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\no-case",
+          "name": "no-case",
+          "children": [
+            {
+              "path": "node_modules\\no-case\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\no-case\\dist.es2015",
+              "name": "dist.es2015",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\no-case\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\no-case\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\no-case\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\node-abi",
+          "name": "node-abi",
+          "children": [
+            {
+              "path": "node_modules\\node-abi\\abi_registry.json",
+              "name": "abi_registry.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-abi\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-abi\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-abi\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-abi\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\node-addon-api",
+          "name": "node-addon-api",
+          "children": [
+            {
+              "path": "node_modules\\node-addon-api\\common.gypi",
+              "name": "common.gypi",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\except.gypi",
+              "name": "except.gypi",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\napi-inl.deprecated.h",
+              "name": "napi-inl.deprecated.h",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\napi-inl.h",
+              "name": "napi-inl.h",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\napi.h",
+              "name": "napi.h",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\node_addon_api.gyp",
+              "name": "node_addon_api.gyp",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\node_api.gyp",
+              "name": "node_api.gyp",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\noexcept.gypi",
+              "name": "noexcept.gypi",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\nothing.c",
+              "name": "nothing.c",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\package-support.json",
+              "name": "package-support.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-addon-api\\tools",
+              "name": "tools",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\node-fetch-native",
+          "name": "node-fetch-native",
+          "children": [
+            {
+              "path": "node_modules\\node-fetch-native\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\node-fetch-native\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\node-fetch-native\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-fetch-native\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-fetch-native\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\node-releases",
+          "name": "node-releases",
+          "children": [
+            {
+              "path": "node_modules\\node-releases\\data",
+              "name": "data",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\node-releases\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-releases\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\node-releases\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\normalize-path",
+          "name": "normalize-path",
+          "children": [
+            {
+              "path": "node_modules\\normalize-path\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\normalize-path\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\normalize-path\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\normalize-path\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\normalize-range",
+          "name": "normalize-range",
+          "children": [
+            {
+              "path": "node_modules\\normalize-range\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\normalize-range\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\normalize-range\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\normalize-range\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\nprogress",
+          "name": "nprogress",
+          "children": [
+            {
+              "path": "node_modules\\nprogress\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\bower.json",
+              "name": "bower.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\component.json",
+              "name": "component.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\History.md",
+              "name": "History.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\License.md",
+              "name": "License.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\Notes.md",
+              "name": "Notes.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\nprogress.css",
+              "name": "nprogress.css",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\nprogress.js",
+              "name": "nprogress.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\nprogress\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object-assign",
+          "name": "object-assign",
+          "children": [
+            {
+              "path": "node_modules\\object-assign\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-assign\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-assign\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-assign\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object-hash",
+          "name": "object-hash",
+          "children": [
+            {
+              "path": "node_modules\\object-hash\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object-hash\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-hash\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-hash\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-hash\\readme.markdown",
+              "name": "readme.markdown",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object-inspect",
+          "name": "object-inspect",
+          "children": [
+            {
+              "path": "node_modules\\object-inspect\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object-inspect\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object-inspect\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\package-support.json",
+              "name": "package-support.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\readme.markdown",
+              "name": "readme.markdown",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object-inspect\\test-core-js.js",
+              "name": "test-core-js.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-inspect\\util.inspect.js",
+              "name": "util.inspect.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object-keys",
+          "name": "object-keys",
+          "children": [
+            {
+              "path": "node_modules\\object-keys\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\isArguments.js",
+              "name": "isArguments.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object-keys\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object.assign",
+          "name": "object.assign",
+          "children": [
+            {
+              "path": "node_modules\\object.assign\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object.assign\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object.assign\\hasSymbols.js",
+              "name": "hasSymbols.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.assign\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object.entries",
+          "name": "object.entries",
+          "children": [
+            {
+              "path": "node_modules\\object.entries\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.entries\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object.fromentries",
+          "name": "object.fromentries",
+          "children": [
+            {
+              "path": "node_modules\\object.fromentries\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.fromentries\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object.groupby",
+          "name": "object.groupby",
+          "children": [
+            {
+              "path": "node_modules\\object.groupby\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object.groupby\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\aos",
+              "name": "aos",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object.groupby\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.groupby\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object.hasown",
+          "name": "object.hasown",
+          "children": [
+            {
+              "path": "node_modules\\object.hasown\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\object.hasown\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.hasown\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\object.values",
+          "name": "object.values",
+          "children": [
+            {
+              "path": "node_modules\\object.values\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\object.values\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\once",
+          "name": "once",
+          "children": [
+            {
+              "path": "node_modules\\once\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\once\\once.js",
+              "name": "once.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\once\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\once\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\optionator",
+          "name": "optionator",
+          "children": [
+            {
+              "path": "node_modules\\optionator\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\optionator\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\optionator\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\optionator\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\optionator\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\p-limit",
+          "name": "p-limit",
+          "children": [
+            {
+              "path": "node_modules\\p-limit\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-limit\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-limit\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-limit\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-limit\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\p-locate",
+          "name": "p-locate",
+          "children": [
+            {
+              "path": "node_modules\\p-locate\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-locate\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-locate\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-locate\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\p-locate\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\parent-module",
+          "name": "parent-module",
+          "children": [
+            {
+              "path": "node_modules\\parent-module\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\parent-module\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\parent-module\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\parent-module\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\path-exists",
+          "name": "path-exists",
+          "children": [
+            {
+              "path": "node_modules\\path-exists\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-exists\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-exists\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-exists\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-exists\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\path-is-absolute",
+          "name": "path-is-absolute",
+          "children": [
+            {
+              "path": "node_modules\\path-is-absolute\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-is-absolute\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-is-absolute\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-is-absolute\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\path-key",
+          "name": "path-key",
+          "children": [
+            {
+              "path": "node_modules\\path-key\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-key\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-key\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-key\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-key\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\path-parse",
+          "name": "path-parse",
+          "children": [
+            {
+              "path": "node_modules\\path-parse\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-parse\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-parse\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-parse\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\path-scurry",
+          "name": "path-scurry",
+          "children": [
+            {
+              "path": "node_modules\\path-scurry\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\path-scurry\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-scurry\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-scurry\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\path-type",
+          "name": "path-type",
+          "children": [
+            {
+              "path": "node_modules\\path-type\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-type\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-type\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-type\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\path-type\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\picocolors",
+          "name": "picocolors",
+          "children": [
+            {
+              "path": "node_modules\\picocolors\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picocolors\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picocolors\\picocolors.browser.js",
+              "name": "picocolors.browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picocolors\\picocolors.d.ts",
+              "name": "picocolors.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picocolors\\picocolors.js",
+              "name": "picocolors.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picocolors\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picocolors\\types.ts",
+              "name": "types.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\picomatch",
+          "name": "picomatch",
+          "children": [
+            {
+              "path": "node_modules\\picomatch\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picomatch\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picomatch\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\picomatch\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picomatch\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\picomatch\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\pify",
+          "name": "pify",
+          "children": [
+            {
+              "path": "node_modules\\pify\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pify\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pify\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pify\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\pirates",
+          "name": "pirates",
+          "children": [
+            {
+              "path": "node_modules\\pirates\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pirates\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\pirates\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pirates\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pirates\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\possible-typed-array-names",
+          "name": "possible-typed-array-names",
+          "children": [
+            {
+              "path": "node_modules\\possible-typed-array-names\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\possible-typed-array-names\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\postcss",
+          "name": "postcss",
+          "children": [
+            {
+              "path": "node_modules\\postcss\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\postcss\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\postcss-import",
+          "name": "postcss-import",
+          "children": [
+            {
+              "path": "node_modules\\postcss-import\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-import\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\postcss-import\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-import\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-import\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\postcss-js",
+          "name": "postcss-js",
+          "children": [
+            {
+              "path": "node_modules\\postcss-js\\async.js",
+              "name": "async.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\objectifier.js",
+              "name": "objectifier.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\parser.js",
+              "name": "parser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\process-result.js",
+              "name": "process-result.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-js\\sync.js",
+              "name": "sync.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\postcss-load-config",
+          "name": "postcss-load-config",
+          "children": [
+            {
+              "path": "node_modules\\postcss-load-config\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-load-config\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\postcss-load-config\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-load-config\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-load-config\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\postcss-nested",
+          "name": "postcss-nested",
+          "children": [
+            {
+              "path": "node_modules\\postcss-nested\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-nested\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-nested\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-nested\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-nested\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\postcss-selector-parser",
+          "name": "postcss-selector-parser",
+          "children": [
+            {
+              "path": "node_modules\\postcss-selector-parser\\API.md",
+              "name": "API.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-selector-parser\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-selector-parser\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\postcss-selector-parser\\LICENSE-MIT",
+              "name": "LICENSE-MIT",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-selector-parser\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-selector-parser\\postcss-selector-parser.d.ts",
+              "name": "postcss-selector-parser.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-selector-parser\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\postcss-value-parser",
+          "name": "postcss-value-parser",
+          "children": [
+            {
+              "path": "node_modules\\postcss-value-parser\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\postcss-value-parser\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-value-parser\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\postcss-value-parser\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\prebuild-install",
+          "name": "prebuild-install",
+          "children": [
+            {
+              "path": "node_modules\\prebuild-install\\asset.js",
+              "name": "asset.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\bin.js",
+              "name": "bin.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\CONTRIBUTING.md",
+              "name": "CONTRIBUTING.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\download.js",
+              "name": "download.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\error.js",
+              "name": "error.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\help.txt",
+              "name": "help.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\log.js",
+              "name": "log.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\proxy.js",
+              "name": "proxy.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\rc.js",
+              "name": "rc.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prebuild-install\\util.js",
+              "name": "util.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\prelude-ls",
+          "name": "prelude-ls",
+          "children": [
+            {
+              "path": "node_modules\\prelude-ls\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prelude-ls\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\prelude-ls\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prelude-ls\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prelude-ls\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\prisma",
+          "name": "prisma",
+          "children": [
+            {
+              "path": "node_modules\\prisma\\build",
+              "name": "build",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\prisma\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prisma\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prisma\\preinstall",
+              "name": "preinstall",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\prisma\\prisma-client",
+              "name": "prisma-client",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\prisma\\query_engine-windows.dll.node",
+              "name": "query_engine-windows.dll.node",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prisma\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prisma\\scripts",
+              "name": "scripts",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\prop-types",
+          "name": "prop-types",
+          "children": [
+            {
+              "path": "node_modules\\prop-types\\checkPropTypes.js",
+              "name": "checkPropTypes.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\factory.js",
+              "name": "factory.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\factoryWithThrowingShims.js",
+              "name": "factoryWithThrowingShims.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\factoryWithTypeCheckers.js",
+              "name": "factoryWithTypeCheckers.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\prop-types\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\prop-types.js",
+              "name": "prop-types.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\prop-types.min.js",
+              "name": "prop-types.min.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\prop-types\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\pump",
+          "name": "pump",
+          "children": [
+            {
+              "path": "node_modules\\pump\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\pump\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pump\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pump\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pump\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pump\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pump\\SECURITY.md",
+              "name": "SECURITY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pump\\test-browser.js",
+              "name": "test-browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pump\\test-node.js",
+              "name": "test-node.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\punycode",
+          "name": "punycode",
+          "children": [
+            {
+              "path": "node_modules\\punycode\\LICENSE-MIT.txt",
+              "name": "LICENSE-MIT.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\punycode\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\punycode\\punycode.es6.js",
+              "name": "punycode.es6.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\punycode\\punycode.js",
+              "name": "punycode.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\punycode\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\pvtsutils",
+          "name": "pvtsutils",
+          "children": [
+            {
+              "path": "node_modules\\pvtsutils\\build",
+              "name": "build",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\pvtsutils\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pvtsutils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pvtsutils\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\pvutils",
+          "name": "pvutils",
+          "children": [
+            {
+              "path": "node_modules\\pvutils\\build",
+              "name": "build",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\pvutils\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pvutils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\pvutils\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\queue-microtask",
+          "name": "queue-microtask",
+          "children": [
+            {
+              "path": "node_modules\\queue-microtask\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\queue-microtask\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\queue-microtask\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\queue-microtask\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\queue-microtask\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\quick-lru",
+          "name": "quick-lru",
+          "children": [
+            {
+              "path": "node_modules\\quick-lru\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\quick-lru\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\quick-lru\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\quick-lru\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\quick-lru\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\rc",
+          "name": "rc",
+          "children": [
+            {
+              "path": "node_modules\\rc\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\cli.js",
+              "name": "cli.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\rc\\LICENSE.APACHE2",
+              "name": "LICENSE.APACHE2",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\LICENSE.BSD",
+              "name": "LICENSE.BSD",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\LICENSE.MIT",
+              "name": "LICENSE.MIT",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\rc\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rc\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react",
+          "name": "react",
+          "children": [
+            {
+              "path": "node_modules\\react\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react\\jsx-dev-runtime.js",
+              "name": "jsx-dev-runtime.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react\\jsx-runtime.js",
+              "name": "jsx-runtime.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react\\react.shared-subset.js",
+              "name": "react.shared-subset.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react\\umd",
+              "name": "umd",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-confetti",
+          "name": "react-confetti",
+          "children": [
+            {
+              "path": "node_modules\\react-confetti\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-confetti\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-confetti\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-confetti\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-confetti\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-confetti\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-confetti\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-day-picker",
+          "name": "react-day-picker",
+          "children": [
+            {
+              "path": "node_modules\\react-day-picker\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-day-picker\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-day-picker\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-day-picker\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-day-picker\\src",
+              "name": "src",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-day-picker\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-dom",
+          "name": "react-dom",
+          "children": [
+            {
+              "path": "node_modules\\react-dom\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-dom\\client.js",
+              "name": "client.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\profiling.js",
+              "name": "profiling.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\server.browser.js",
+              "name": "server.browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\server.js",
+              "name": "server.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\server.node.js",
+              "name": "server.node.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\test-utils.js",
+              "name": "test-utils.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-dom\\umd",
+              "name": "umd",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-hook-form",
+          "name": "react-hook-form",
+          "children": [
+            {
+              "path": "node_modules\\react-hook-form\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-hook-form\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-hook-form\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-hook-form\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-icons",
+          "name": "react-icons",
+          "children": [
+            {
+              "path": "node_modules\\react-icons\\ai",
+              "name": "ai",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\bi",
+              "name": "bi",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\bs",
+              "name": "bs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\cg",
+              "name": "cg",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\ci",
+              "name": "ci",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\di",
+              "name": "di",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\fa",
+              "name": "fa",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\fa6",
+              "name": "fa6",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\fc",
+              "name": "fc",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\fi",
+              "name": "fi",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\gi",
+              "name": "gi",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\go",
+              "name": "go",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\gr",
+              "name": "gr",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\hi",
+              "name": "hi",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\hi2",
+              "name": "hi2",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\im",
+              "name": "im",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-icons\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-icons\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-icons\\io",
+              "name": "io",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\io5",
+              "name": "io5",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\lia",
+              "name": "lia",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-icons\\lu",
+              "name": "lu",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\md",
+              "name": "md",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-icons\\pi",
+              "name": "pi",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-icons\\ri",
+              "name": "ri",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\rx",
+              "name": "rx",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\si",
+              "name": "si",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\sl",
+              "name": "sl",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\tb",
+              "name": "tb",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\tfi",
+              "name": "tfi",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\ti",
+              "name": "ti",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\vsc",
+              "name": "vsc",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-icons\\wi",
+              "name": "wi",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-is",
+          "name": "react-is",
+          "children": [
+            {
+              "path": "node_modules\\react-is\\build-info.json",
+              "name": "build-info.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-is\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-is\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-is\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-is\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-is\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-is\\umd",
+              "name": "umd",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-remove-scroll",
+          "name": "react-remove-scroll",
+          "children": [
+            {
+              "path": "node_modules\\react-remove-scroll\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll\\sidecar",
+              "name": "sidecar",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll\\UI",
+              "name": "UI",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-remove-scroll-bar",
+          "name": "react-remove-scroll-bar",
+          "children": [
+            {
+              "path": "node_modules\\react-remove-scroll-bar\\constants",
+              "name": "constants",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll-bar\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll-bar\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-remove-scroll-bar\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-resizable-panels",
+          "name": "react-resizable-panels",
+          "children": [
+            {
+              "path": "node_modules\\react-resizable-panels\\.eslintrc.cjs",
+              "name": ".eslintrc.cjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-resizable-panels\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-resizable-panels\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-resizable-panels\\jest.config.js",
+              "name": "jest.config.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-resizable-panels\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-resizable-panels\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-resizable-panels\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\react-style-singleton",
+          "name": "react-style-singleton",
+          "children": [
+            {
+              "path": "node_modules\\react-style-singleton\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\react-style-singleton\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\react-style-singleton\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\read-cache",
+          "name": "read-cache",
+          "children": [
+            {
+              "path": "node_modules\\read-cache\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\read-cache\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\read-cache\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\read-cache\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\readable-stream",
+          "name": "readable-stream",
+          "children": [
+            {
+              "path": "node_modules\\readable-stream\\CONTRIBUTING.md",
+              "name": "CONTRIBUTING.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\errors-browser.js",
+              "name": "errors-browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\errors.js",
+              "name": "errors.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\experimentalWarning.js",
+              "name": "experimentalWarning.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\GOVERNANCE.md",
+              "name": "GOVERNANCE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\readable-stream\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\readable-browser.js",
+              "name": "readable-browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\readable.js",
+              "name": "readable.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readable-stream\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\readdirp",
+          "name": "readdirp",
+          "children": [
+            {
+              "path": "node_modules\\readdirp\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readdirp\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readdirp\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readdirp\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\readdirp\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\reduce-flatten",
+          "name": "reduce-flatten",
+          "children": [
+            {
+              "path": "node_modules\\reduce-flatten\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reduce-flatten\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reduce-flatten\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reduce-flatten\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reduce-flatten\\README.hbs",
+              "name": "README.hbs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reduce-flatten\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reduce-flatten\\test.js",
+              "name": "test.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\reflect.getprototypeof",
+          "name": "reflect.getprototypeof",
+          "children": [
+            {
+              "path": "node_modules\\reflect.getprototypeof\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reflect.getprototypeof\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\regenerator-runtime",
+          "name": "regenerator-runtime",
+          "children": [
+            {
+              "path": "node_modules\\regenerator-runtime\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regenerator-runtime\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regenerator-runtime\\path.js",
+              "name": "path.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regenerator-runtime\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regenerator-runtime\\runtime.js",
+              "name": "runtime.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\regexp.prototype.flags",
+          "name": "regexp.prototype.flags",
+          "children": [
+            {
+              "path": "node_modules\\regexp.prototype.flags\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\regexp.prototype.flags\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\resolve",
+          "name": "resolve",
+          "children": [
+            {
+              "path": "node_modules\\resolve\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\resolve\\async.js",
+              "name": "async.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\resolve\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\resolve\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\resolve\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\readme.markdown",
+              "name": "readme.markdown",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\SECURITY.md",
+              "name": "SECURITY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\sync.js",
+              "name": "sync.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\resolve-from",
+          "name": "resolve-from",
+          "children": [
+            {
+              "path": "node_modules\\resolve-from\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve-from\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve-from\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve-from\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\resolve-pkg-maps",
+          "name": "resolve-pkg-maps",
+          "children": [
+            {
+              "path": "node_modules\\resolve-pkg-maps\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\resolve-pkg-maps\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve-pkg-maps\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\resolve-pkg-maps\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\reusify",
+          "name": "reusify",
+          "children": [
+            {
+              "path": "node_modules\\reusify\\.coveralls.yml",
+              "name": ".coveralls.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reusify\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reusify\\benchmarks",
+              "name": "benchmarks",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\reusify\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reusify\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reusify\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reusify\\reusify.js",
+              "name": "reusify.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\reusify\\test.js",
+              "name": "test.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\rimraf",
+          "name": "rimraf",
+          "children": [
+            {
+              "path": "node_modules\\rimraf\\bin.js",
+              "name": "bin.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rimraf\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rimraf\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rimraf\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\rimraf\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rimraf\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\rimraf\\rimraf.js",
+              "name": "rimraf.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\run-parallel",
+          "name": "run-parallel",
+          "children": [
+            {
+              "path": "node_modules\\run-parallel\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\run-parallel\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\run-parallel\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\run-parallel\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\safe-array-concat",
+          "name": "safe-array-concat",
+          "children": [
+            {
+              "path": "node_modules\\safe-array-concat\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\safe-array-concat\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\safe-buffer",
+          "name": "safe-buffer",
+          "children": [
+            {
+              "path": "node_modules\\safe-buffer\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-buffer\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-buffer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-buffer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-buffer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\safe-regex-test",
+          "name": "safe-regex-test",
+          "children": [
+            {
+              "path": "node_modules\\safe-regex-test\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\safe-regex-test\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\scheduler",
+          "name": "scheduler",
+          "children": [
+            {
+              "path": "node_modules\\scheduler\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\scheduler\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\scheduler\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\scheduler\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\scheduler\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\scheduler\\umd",
+              "name": "umd",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\scheduler\\unstable_mock.js",
+              "name": "unstable_mock.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\scheduler\\unstable_post_task.js",
+              "name": "unstable_post_task.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\semver",
+          "name": "semver",
+          "children": [
+            {
+              "path": "node_modules\\semver\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\semver\\classes",
+              "name": "classes",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\semver\\functions",
+              "name": "functions",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\semver\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\semver\\internal",
+              "name": "internal",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\semver\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\semver\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\semver\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\semver\\preload.js",
+              "name": "preload.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\semver\\range.bnf",
+              "name": "range.bnf",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\semver\\ranges",
+              "name": "ranges",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\semver\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\set-function-length",
+          "name": "set-function-length",
+          "children": [
+            {
+              "path": "node_modules\\set-function-length\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\set-function-length\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\env.d.ts",
+              "name": "env.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\env.js",
+              "name": "env.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-length\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\set-function-name",
+          "name": "set-function-name",
+          "children": [
+            {
+              "path": "node_modules\\set-function-name\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-name\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\set-function-name\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-name\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-name\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-name\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-name\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-name\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\set-function-name\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\shebang-command",
+          "name": "shebang-command",
+          "children": [
+            {
+              "path": "node_modules\\shebang-command\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\shebang-command\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\shebang-command\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\shebang-command\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\shebang-regex",
+          "name": "shebang-regex",
+          "children": [
+            {
+              "path": "node_modules\\shebang-regex\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\shebang-regex\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\shebang-regex\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\shebang-regex\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\shebang-regex\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\side-channel",
+          "name": "side-channel",
+          "children": [
+            {
+              "path": "node_modules\\side-channel\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\side-channel\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\side-channel\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\side-channel\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\signal-exit",
+          "name": "signal-exit",
+          "children": [
+            {
+              "path": "node_modules\\signal-exit\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\signal-exit\\LICENSE.txt",
+              "name": "LICENSE.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\signal-exit\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\signal-exit\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\simple-concat",
+          "name": "simple-concat",
+          "children": [
+            {
+              "path": "node_modules\\simple-concat\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-concat\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-concat\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-concat\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-concat\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-concat\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\simple-get",
+          "name": "simple-get",
+          "children": [
+            {
+              "path": "node_modules\\simple-get\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\simple-get\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-get\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-get\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\simple-get\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\slash",
+          "name": "slash",
+          "children": [
+            {
+              "path": "node_modules\\slash\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\slash\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\slash\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\slash\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\slash\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\snake-case",
+          "name": "snake-case",
+          "children": [
+            {
+              "path": "node_modules\\snake-case\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\snake-case\\dist.es2015",
+              "name": "dist.es2015",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\snake-case\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\snake-case\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\snake-case\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\snakecase-keys",
+          "name": "snakecase-keys",
+          "children": [
+            {
+              "path": "node_modules\\snakecase-keys\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\snakecase-keys\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\snakecase-keys\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\snakecase-keys\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\snakecase-keys\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\snakecase-keys\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\sonner",
+          "name": "sonner",
+          "children": [
+            {
+              "path": "node_modules\\sonner\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\sonner\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\sonner\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\sonner\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\source-map-js",
+          "name": "source-map-js",
+          "children": [
+            {
+              "path": "node_modules\\source-map-js\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\source-map-js\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\source-map-js\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\source-map-js\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\source-map-js\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\source-map-js\\source-map.d.ts",
+              "name": "source-map.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\source-map-js\\source-map.js",
+              "name": "source-map.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\streamsearch",
+          "name": "streamsearch",
+          "children": [
+            {
+              "path": "node_modules\\streamsearch\\.eslintrc.js",
+              "name": ".eslintrc.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\streamsearch\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\streamsearch\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\streamsearch\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\streamsearch\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\streamsearch\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\streamsearch\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\string-width",
+          "name": "string-width",
+          "children": [
+            {
+              "path": "node_modules\\string-width\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\string-width\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\string-width-cjs",
+          "name": "string-width-cjs",
+          "children": [
+            {
+              "path": "node_modules\\string-width-cjs\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width-cjs\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width-cjs\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width-cjs\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\string-width-cjs\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string-width-cjs\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\string.prototype.matchall",
+          "name": "string.prototype.matchall",
+          "children": [
+            {
+              "path": "node_modules\\string.prototype.matchall\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\polyfill-regexp-matchall.js",
+              "name": "polyfill-regexp-matchall.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\regexp-matchall.js",
+              "name": "regexp-matchall.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.matchall\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\string.prototype.trim",
+          "name": "string.prototype.trim",
+          "children": [
+            {
+              "path": "node_modules\\string.prototype.trim\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trim\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\string.prototype.trimend",
+          "name": "string.prototype.trimend",
+          "children": [
+            {
+              "path": "node_modules\\string.prototype.trimend\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimend\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\string.prototype.trimstart",
+          "name": "string.prototype.trimstart",
+          "children": [
+            {
+              "path": "node_modules\\string.prototype.trimstart\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\auto.js",
+              "name": "auto.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\implementation.js",
+              "name": "implementation.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\polyfill.js",
+              "name": "polyfill.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\shim.js",
+              "name": "shim.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string.prototype.trimstart\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\string_decoder",
+          "name": "string_decoder",
+          "children": [
+            {
+              "path": "node_modules\\string_decoder\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\string_decoder\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string_decoder\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\string_decoder\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\strip-ansi",
+          "name": "strip-ansi",
+          "children": [
+            {
+              "path": "node_modules\\strip-ansi\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\strip-ansi-cjs",
+          "name": "strip-ansi-cjs",
+          "children": [
+            {
+              "path": "node_modules\\strip-ansi-cjs\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi-cjs\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi-cjs\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi-cjs\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-ansi-cjs\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\strip-bom",
+          "name": "strip-bom",
+          "children": [
+            {
+              "path": "node_modules\\strip-bom\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-bom\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-bom\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-bom\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\strip-json-comments",
+          "name": "strip-json-comments",
+          "children": [
+            {
+              "path": "node_modules\\strip-json-comments\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-json-comments\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-json-comments\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-json-comments\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\strip-json-comments\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\styled-jsx",
+          "name": "styled-jsx",
+          "children": [
+            {
+              "path": "node_modules\\styled-jsx\\babel-test.js",
+              "name": "babel-test.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\babel.js",
+              "name": "babel.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\css.d.ts",
+              "name": "css.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\css.js",
+              "name": "css.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\global.d.ts",
+              "name": "global.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\license.md",
+              "name": "license.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\macro.d.ts",
+              "name": "macro.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\macro.js",
+              "name": "macro.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\style.d.ts",
+              "name": "style.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\style.js",
+              "name": "style.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\styled-jsx\\webpack.js",
+              "name": "webpack.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\sucrase",
+          "name": "sucrase",
+          "children": [
+            {
+              "path": "node_modules\\sucrase\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\sucrase\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\sucrase\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\sucrase\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\sucrase\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\sucrase\\register",
+              "name": "register",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\sucrase\\ts-node-plugin",
+              "name": "ts-node-plugin",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\supports-color",
+          "name": "supports-color",
+          "children": [
+            {
+              "path": "node_modules\\supports-color\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-color\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-color\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-color\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-color\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\supports-preserve-symlinks-flag",
+          "name": "supports-preserve-symlinks-flag",
+          "children": [
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\supports-preserve-symlinks-flag\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\swr",
+          "name": "swr",
+          "children": [
+            {
+              "path": "node_modules\\swr\\core",
+              "name": "core",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\swr\\immutable",
+              "name": "immutable",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\swr\\infinite",
+              "name": "infinite",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\swr\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\swr\\mutation",
+              "name": "mutation",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\swr\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\swr\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\swr\\subscription",
+              "name": "subscription",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\swr\\_internal",
+              "name": "_internal",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\table-layout",
+          "name": "table-layout",
+          "children": [
+            {
+              "path": "node_modules\\table-layout\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\table-layout\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\table-layout\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\table-layout\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\table-layout\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\table-layout\\README.hbs",
+              "name": "README.hbs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\table-layout\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tailwind-merge",
+          "name": "tailwind-merge",
+          "children": [
+            {
+              "path": "node_modules\\tailwind-merge\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwind-merge\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwind-merge\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwind-merge\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwind-merge\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tailwindcss",
+          "name": "tailwindcss",
+          "children": [
+            {
+              "path": "node_modules\\tailwindcss\\base.css",
+              "name": "base.css",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\colors.d.ts",
+              "name": "colors.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\colors.js",
+              "name": "colors.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\components.css",
+              "name": "components.css",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\defaultConfig.d.ts",
+              "name": "defaultConfig.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\defaultConfig.js",
+              "name": "defaultConfig.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\defaultTheme.d.ts",
+              "name": "defaultTheme.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\defaultTheme.js",
+              "name": "defaultTheme.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\loadConfig.d.ts",
+              "name": "loadConfig.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\loadConfig.js",
+              "name": "loadConfig.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\nesting",
+              "name": "nesting",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\peers",
+              "name": "peers",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\plugin.d.ts",
+              "name": "plugin.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\plugin.js",
+              "name": "plugin.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\prettier.config.js",
+              "name": "prettier.config.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\resolveConfig.d.ts",
+              "name": "resolveConfig.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\resolveConfig.js",
+              "name": "resolveConfig.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\screens.css",
+              "name": "screens.css",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\scripts",
+              "name": "scripts",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\src",
+              "name": "src",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\stubs",
+              "name": "stubs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\tailwind.css",
+              "name": "tailwind.css",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\types",
+              "name": "types",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\utilities.css",
+              "name": "utilities.css",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss\\variants.css",
+              "name": "variants.css",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tailwindcss-animate",
+          "name": "tailwindcss-animate",
+          "children": [
+            {
+              "path": "node_modules\\tailwindcss-animate\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss-animate\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss-animate\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss-animate\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tailwindcss-animate\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tapable",
+          "name": "tapable",
+          "children": [
+            {
+              "path": "node_modules\\tapable\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tapable\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tapable\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tapable\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tapable\\tapable.d.ts",
+              "name": "tapable.d.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tar-fs",
+          "name": "tar-fs",
+          "children": [
+            {
+              "path": "node_modules\\tar-fs\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-fs\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-fs\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-fs\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-fs\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-fs\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tar-stream",
+          "name": "tar-stream",
+          "children": [
+            {
+              "path": "node_modules\\tar-stream\\extract.js",
+              "name": "extract.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-stream\\headers.js",
+              "name": "headers.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-stream\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-stream\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-stream\\pack.js",
+              "name": "pack.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-stream\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-stream\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tar-stream\\sandbox.js",
+              "name": "sandbox.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\text-table",
+          "name": "text-table",
+          "children": [
+            {
+              "path": "node_modules\\text-table\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\text-table\\example",
+              "name": "example",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\text-table\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\text-table\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\text-table\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\text-table\\readme.markdown",
+              "name": "readme.markdown",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\text-table\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\thenify",
+          "name": "thenify",
+          "children": [
+            {
+              "path": "node_modules\\thenify\\History.md",
+              "name": "History.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\thenify-all",
+          "name": "thenify-all",
+          "children": [
+            {
+              "path": "node_modules\\thenify-all\\History.md",
+              "name": "History.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify-all\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify-all\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify-all\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\thenify-all\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\to-no-case",
+          "name": "to-no-case",
+          "children": [
+            {
+              "path": "node_modules\\to-no-case\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-no-case\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-no-case\\History.md",
+              "name": "History.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-no-case\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-no-case\\Makefile",
+              "name": "Makefile",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-no-case\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-no-case\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-no-case\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\to-regex-range",
+          "name": "to-regex-range",
+          "children": [
+            {
+              "path": "node_modules\\to-regex-range\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-regex-range\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-regex-range\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-regex-range\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\to-snake-case",
+          "name": "to-snake-case",
+          "children": [
+            {
+              "path": "node_modules\\to-snake-case\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-snake-case\\History.md",
+              "name": "History.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-snake-case\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-snake-case\\Makefile",
+              "name": "Makefile",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-snake-case\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-snake-case\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-snake-case\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\to-space-case",
+          "name": "to-space-case",
+          "children": [
+            {
+              "path": "node_modules\\to-space-case\\.npmignore",
+              "name": ".npmignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-space-case\\.travis.yml",
+              "name": ".travis.yml",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-space-case\\History.md",
+              "name": "History.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-space-case\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-space-case\\Makefile",
+              "name": "Makefile",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-space-case\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-space-case\\Readme.md",
+              "name": "Readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\to-space-case\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ts-api-utils",
+          "name": "ts-api-utils",
+          "children": [
+            {
+              "path": "node_modules\\ts-api-utils\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\ts-api-utils\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ts-api-utils\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ts-api-utils\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\ts-interface-checker",
+          "name": "ts-interface-checker",
+          "children": [
+            {
+              "path": "node_modules\\ts-interface-checker\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\ts-interface-checker\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ts-interface-checker\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\ts-interface-checker\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tsconfig-paths",
+          "name": "tsconfig-paths",
+          "children": [
+            {
+              "path": "node_modules\\tsconfig-paths\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tsconfig-paths\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tsconfig-paths\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tsconfig-paths\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tsconfig-paths\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tsconfig-paths\\register.js",
+              "name": "register.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tsconfig-paths\\src",
+              "name": "src",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tslib",
+          "name": "tslib",
+          "children": [
+            {
+              "path": "node_modules\\tslib\\CopyrightNotice.txt",
+              "name": "CopyrightNotice.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\LICENSE.txt",
+              "name": "LICENSE.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\modules",
+              "name": "modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\tslib\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\SECURITY.md",
+              "name": "SECURITY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\tslib.d.ts",
+              "name": "tslib.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\tslib.es6.html",
+              "name": "tslib.es6.html",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\tslib.es6.js",
+              "name": "tslib.es6.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\tslib.es6.mjs",
+              "name": "tslib.es6.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\tslib.html",
+              "name": "tslib.html",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tslib\\tslib.js",
+              "name": "tslib.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tunnel-agent",
+          "name": "tunnel-agent",
+          "children": [
+            {
+              "path": "node_modules\\tunnel-agent\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tunnel-agent\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tunnel-agent\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tunnel-agent\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\tween-functions",
+          "name": "tween-functions",
+          "children": [
+            {
+              "path": "node_modules\\tween-functions\\HISTORY.md",
+              "name": "HISTORY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tween-functions\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tween-functions\\LICENSE.txt",
+              "name": "LICENSE.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tween-functions\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\tween-functions\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\type-check",
+          "name": "type-check",
+          "children": [
+            {
+              "path": "node_modules\\type-check\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\type-check\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\type-check\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\type-check\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\type-fest",
+          "name": "type-fest",
+          "children": [
+            {
+              "path": "node_modules\\type-fest\\base.d.ts",
+              "name": "base.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\type-fest\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\type-fest\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\type-fest\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\type-fest\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\type-fest\\source",
+              "name": "source",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\type-fest\\ts41",
+              "name": "ts41",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\typed-array-buffer",
+          "name": "typed-array-buffer",
+          "children": [
+            {
+              "path": "node_modules\\typed-array-buffer\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-buffer\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\typed-array-byte-length",
+          "name": "typed-array-byte-length",
+          "children": [
+            {
+              "path": "node_modules\\typed-array-byte-length\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-length\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\typed-array-byte-offset",
+          "name": "typed-array-byte-offset",
+          "children": [
+            {
+              "path": "node_modules\\typed-array-byte-offset\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-byte-offset\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\typed-array-length",
+          "name": "typed-array-length",
+          "children": [
+            {
+              "path": "node_modules\\typed-array-length\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typed-array-length\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\typescript",
+          "name": "typescript",
+          "children": [
+            {
+              "path": "node_modules\\typescript\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typescript\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typescript\\LICENSE.txt",
+              "name": "LICENSE.txt",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typescript\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typescript\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typescript\\SECURITY.md",
+              "name": "SECURITY.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typescript\\ThirdPartyNoticeText.txt",
+              "name": "ThirdPartyNoticeText.txt",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\typical",
+          "name": "typical",
+          "children": [
+            {
+              "path": "node_modules\\typical\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\typical\\index.mjs",
+              "name": "index.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typical\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typical\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typical\\README.hbs",
+              "name": "README.hbs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\typical\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\unbox-primitive",
+          "name": "unbox-primitive",
+          "children": [
+            {
+              "path": "node_modules\\unbox-primitive\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\unbox-primitive\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\undici-types",
+          "name": "undici-types",
+          "children": [
+            {
+              "path": "node_modules\\undici-types\\agent.d.ts",
+              "name": "agent.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\api.d.ts",
+              "name": "api.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\balanced-pool.d.ts",
+              "name": "balanced-pool.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\cache.d.ts",
+              "name": "cache.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\client.d.ts",
+              "name": "client.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\connector.d.ts",
+              "name": "connector.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\content-type.d.ts",
+              "name": "content-type.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\cookies.d.ts",
+              "name": "cookies.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\diagnostics-channel.d.ts",
+              "name": "diagnostics-channel.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\dispatcher.d.ts",
+              "name": "dispatcher.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\errors.d.ts",
+              "name": "errors.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\fetch.d.ts",
+              "name": "fetch.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\file.d.ts",
+              "name": "file.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\filereader.d.ts",
+              "name": "filereader.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\formdata.d.ts",
+              "name": "formdata.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\global-dispatcher.d.ts",
+              "name": "global-dispatcher.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\global-origin.d.ts",
+              "name": "global-origin.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\handlers.d.ts",
+              "name": "handlers.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\header.d.ts",
+              "name": "header.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\interceptors.d.ts",
+              "name": "interceptors.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\mock-agent.d.ts",
+              "name": "mock-agent.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\mock-client.d.ts",
+              "name": "mock-client.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\mock-errors.d.ts",
+              "name": "mock-errors.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\mock-interceptor.d.ts",
+              "name": "mock-interceptor.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\mock-pool.d.ts",
+              "name": "mock-pool.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\patch.d.ts",
+              "name": "patch.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\pool-stats.d.ts",
+              "name": "pool-stats.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\pool.d.ts",
+              "name": "pool.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\proxy-agent.d.ts",
+              "name": "proxy-agent.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\readable.d.ts",
+              "name": "readable.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\webidl.d.ts",
+              "name": "webidl.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\undici-types\\websocket.d.ts",
+              "name": "websocket.d.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\update-browserslist-db",
+          "name": "update-browserslist-db",
+          "children": [
+            {
+              "path": "node_modules\\update-browserslist-db\\check-npm-version.js",
+              "name": "check-npm-version.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\update-browserslist-db\\cli.js",
+              "name": "cli.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\update-browserslist-db\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\update-browserslist-db\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\update-browserslist-db\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\update-browserslist-db\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\update-browserslist-db\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\update-browserslist-db\\utils.js",
+              "name": "utils.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\uri-js",
+          "name": "uri-js",
+          "children": [
+            {
+              "path": "node_modules\\uri-js\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\uri-js\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\uri-js\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\uri-js\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\uri-js\\yarn.lock",
+              "name": "yarn.lock",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\use-callback-ref",
+          "name": "use-callback-ref",
+          "children": [
+            {
+              "path": "node_modules\\use-callback-ref\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\use-callback-ref\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-callback-ref\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-callback-ref\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\use-sidecar",
+          "name": "use-sidecar",
+          "children": [
+            {
+              "path": "node_modules\\use-sidecar\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\use-sidecar\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-sidecar\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-sidecar\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\use-sync-external-store",
+          "name": "use-sync-external-store",
+          "children": [
+            {
+              "path": "node_modules\\use-sync-external-store\\cjs",
+              "name": "cjs",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\use-sync-external-store\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-sync-external-store\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-sync-external-store\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-sync-external-store\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\use-sync-external-store\\shim",
+              "name": "shim",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\use-sync-external-store\\with-selector.js",
+              "name": "with-selector.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\util-deprecate",
+          "name": "util-deprecate",
+          "children": [
+            {
+              "path": "node_modules\\util-deprecate\\browser.js",
+              "name": "browser.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\util-deprecate\\History.md",
+              "name": "History.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\util-deprecate\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\util-deprecate\\node.js",
+              "name": "node.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\util-deprecate\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\util-deprecate\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\vaul",
+          "name": "vaul",
+          "children": [
+            {
+              "path": "node_modules\\vaul\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\vaul\\LICENSE.md",
+              "name": "LICENSE.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\vaul\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\vaul\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\webcrypto-core",
+          "name": "webcrypto-core",
+          "children": [
+            {
+              "path": "node_modules\\webcrypto-core\\build",
+              "name": "build",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\webcrypto-core\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\webcrypto-core\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\webcrypto-core\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\which",
+          "name": "which",
+          "children": [
+            {
+              "path": "node_modules\\which\\bin",
+              "name": "bin",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\which\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which\\which.js",
+              "name": "which.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\which-boxed-primitive",
+          "name": "which-boxed-primitive",
+          "children": [
+            {
+              "path": "node_modules\\which-boxed-primitive\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\.eslintignore",
+              "name": ".eslintignore",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-boxed-primitive\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\which-builtin-type",
+          "name": "which-builtin-type",
+          "children": [
+            {
+              "path": "node_modules\\which-builtin-type\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-builtin-type\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-builtin-type\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-builtin-type\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-builtin-type\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-builtin-type\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-builtin-type\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-builtin-type\\test",
+              "name": "test",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\which-collection",
+          "name": "which-collection",
+          "children": [
+            {
+              "path": "node_modules\\which-collection\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\which-collection\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-collection\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\which-collection\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\which-typed-array",
+          "name": "which-typed-array",
+          "children": [
+            {
+              "path": "node_modules\\which-typed-array\\.editorconfig",
+              "name": ".editorconfig",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\.eslintrc",
+              "name": ".eslintrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\.github",
+              "name": ".github",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\.nycrc",
+              "name": ".nycrc",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\CHANGELOG.md",
+              "name": "CHANGELOG.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\test",
+              "name": "test",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\which-typed-array\\tsconfig.json",
+              "name": "tsconfig.json",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\wordwrapjs",
+          "name": "wordwrapjs",
+          "children": [
+            {
+              "path": "node_modules\\wordwrapjs\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wordwrapjs\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wordwrapjs\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\wordwrapjs\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wordwrapjs\\README.hbs",
+              "name": "README.hbs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wordwrapjs\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\wrap-ansi",
+          "name": "wrap-ansi",
+          "children": [
+            {
+              "path": "node_modules\\wrap-ansi\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrap-ansi\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrap-ansi\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrap-ansi\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\wrap-ansi\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrap-ansi\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\wrap-ansi-cjs",
+          "name": "wrap-ansi-cjs",
+          "children": [
+            {
+              "path": "node_modules\\wrap-ansi-cjs\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrap-ansi-cjs\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrap-ansi-cjs\\node_modules",
+              "name": "node_modules",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\wrap-ansi-cjs\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrap-ansi-cjs\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\wrappy",
+          "name": "wrappy",
+          "children": [
+            {
+              "path": "node_modules\\wrappy\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrappy\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrappy\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\wrappy\\wrappy.js",
+              "name": "wrappy.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\yallist",
+          "name": "yallist",
+          "children": [
+            {
+              "path": "node_modules\\yallist\\iterator.js",
+              "name": "iterator.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yallist\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yallist\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yallist\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yallist\\yallist.js",
+              "name": "yallist.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\yaml",
+          "name": "yaml",
+          "children": [
+            {
+              "path": "node_modules\\yaml\\bin.mjs",
+              "name": "bin.mjs",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yaml\\browser",
+              "name": "browser",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\yaml\\dist",
+              "name": "dist",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\yaml\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yaml\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yaml\\README.md",
+              "name": "README.md",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yaml\\util.js",
+              "name": "util.js",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\yocto-queue",
+          "name": "yocto-queue",
+          "children": [
+            {
+              "path": "node_modules\\yocto-queue\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yocto-queue\\index.js",
+              "name": "index.js",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yocto-queue\\license",
+              "name": "license",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yocto-queue\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\yocto-queue\\readme.md",
+              "name": "readme.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "node_modules\\zod",
+          "name": "zod",
+          "children": [
+            {
+              "path": "node_modules\\zod\\index.d.ts",
+              "name": "index.d.ts",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\zod\\lib",
+              "name": "lib",
+              "type": "directory"
+            },
+            {
+              "path": "node_modules\\zod\\LICENSE",
+              "name": "LICENSE",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\zod\\package.json",
+              "name": "package.json",
+              "type": "file"
+            },
+            {
+              "path": "node_modules\\zod\\README.md",
+              "name": "README.md",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": "package-lock.json",
+      "name": "package-lock.json",
+      "type": "file"
+    },
+    {
+      "path": "package.json",
+      "name": "package.json",
+      "type": "file"
+    },
+    {
+      "path": "postcss.config.js",
+      "name": "postcss.config.js",
+      "type": "file"
+    },
+    {
+      "path": "preview_create_form.png",
+      "name": "preview_create_form.png",
+      "type": "file"
+    },
+    {
+      "path": "preview_dashboard.png",
+      "name": "preview_dashboard.png",
+      "type": "file"
+    },
+    {
+      "path": "preview_submission_cards.png",
+      "name": "preview_submission_cards.png",
+      "type": "file"
+    },
+    {
+      "path": "preview_submit_form.png",
+      "name": "preview_submit_form.png",
+      "type": "file"
+    },
+    {
+      "path": "prisma",
+      "name": "prisma",
+      "children": [
+        {
+          "path": "prisma\\migrations",
+          "name": "migrations",
+          "children": [
+            {
+              "path": "prisma\\migrations\\20240312081920_init_db",
+              "name": "20240312081920_init_db",
+              "type": "directory"
+            },
+            {
+              "path": "prisma\\migrations\\20250123154420_add_theme_field",
+              "name": "20250123154420_add_theme_field",
+              "type": "directory"
+            },
+            {
+              "path": "prisma\\migrations\\20250127214005_upgrade_to_v6",
+              "name": "20250127214005_upgrade_to_v6",
+              "type": "directory"
+            },
+            {
+              "path": "prisma\\migrations\\20250131151448_add_multi_page_support",
+              "name": "20250131151448_add_multi_page_support",
+              "type": "directory"
+            },
+            {
+              "path": "prisma\\migrations\\migration_lock.toml",
+              "name": "migration_lock.toml",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "prisma\\schema.prisma",
+          "name": "schema.prisma",
+          "type": "file"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": "public",
+      "name": "public",
+      "children": [
+        {
+          "path": "public\\component-1.png",
+          "name": "component-1.png",
+          "type": "file"
+        },
+        {
+          "path": "public\\component-2.png",
+          "name": "component-2.png",
+          "type": "file"
+        },
+        {
+          "path": "public\\grid.svg",
+          "name": "grid.svg",
+          "type": "file"
+        },
+        {
+          "path": "public\\logo.svg",
+          "name": "logo.svg",
+          "type": "file"
+        },
+        {
+          "path": "public\\paper-dark.svg",
+          "name": "paper-dark.svg",
+          "type": "file"
+        },
+        {
+          "path": "public\\paper.svg",
+          "name": "paper.svg",
+          "type": "file"
+        },
+        {
+          "path": "public\\showcase-1.png",
+          "name": "showcase-1.png",
+          "type": "file"
+        },
+        {
+          "path": "public\\showcase.png",
+          "name": "showcase.png",
+          "type": "file"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": "README.md",
+      "name": "README.md",
+      "type": "file"
+    },
+    {
+      "path": "src",
+      "name": "src",
+      "children": [
+        {
+          "path": "src\\action",
+          "name": "action",
+          "children": [
+            {
+              "path": "src\\action\\form-embed.ts",
+              "name": "form-embed.ts",
+              "type": "file"
+            },
+            {
+              "path": "src\\action\\form.ts",
+              "name": "form.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "src\\app",
+          "name": "app",
+          "children": [
+            {
+              "path": "src\\app\\(routes)",
+              "name": "(routes)",
+              "type": "directory"
+            },
+            {
+              "path": "src\\app\\api",
+              "name": "api",
+              "type": "directory"
+            },
+            {
+              "path": "src\\app\\builder",
+              "name": "builder",
+              "type": "directory"
+            },
+            {
+              "path": "src\\app\\favicon.ico",
+              "name": "favicon.ico",
+              "type": "file"
+            },
+            {
+              "path": "src\\app\\forms",
+              "name": "forms",
+              "type": "directory"
+            },
+            {
+              "path": "src\\app\\globals.css",
+              "name": "globals.css",
+              "type": "file"
+            },
+            {
+              "path": "src\\app\\layout.tsx",
+              "name": "layout.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\app\\not-found.tsx",
+              "name": "not-found.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\app\\page.tsx",
+              "name": "page.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\app\\sign-in",
+              "name": "sign-in",
+              "type": "directory"
+            },
+            {
+              "path": "src\\app\\sign-up",
+              "name": "sign-up",
+              "type": "directory"
+            },
+            {
+              "path": "src\\app\\submit",
+              "name": "submit",
+              "type": "directory"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "src\\components",
+          "name": "components",
+          "children": [
+            {
+              "path": "src\\components\\CreateFormBtn.tsx",
+              "name": "CreateFormBtn.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\Designer.tsx",
+              "name": "Designer.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\DesignerElementWrapper.tsx",
+              "name": "DesignerElementWrapper.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\DesignerSidebar.tsx",
+              "name": "DesignerSidebar.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\DragOverlayWrapper.tsx",
+              "name": "DragOverlayWrapper.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\EmbedFormPreview.tsx",
+              "name": "EmbedFormPreview.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\field",
+              "name": "field",
+              "type": "directory"
+            },
+            {
+              "path": "src\\components\\FormBuilder.tsx",
+              "name": "FormBuilder.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\FormCard.tsx",
+              "name": "FormCard.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\FormElements.tsx",
+              "name": "FormElements.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\FormElementsSidebar.tsx",
+              "name": "FormElementsSidebar.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\FormLinkShare.tsx",
+              "name": "FormLinkShare.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\FormSettings.tsx",
+              "name": "FormSettings.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\FormSubmitComponent.tsx",
+              "name": "FormSubmitComponent.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\GenerateCodeBtn.tsx",
+              "name": "GenerateCodeBtn.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\PageNavigation.tsx",
+              "name": "PageNavigation.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\PreviewDialogBtn.tsx",
+              "name": "PreviewDialogBtn.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\PropertiesFormSidebar.tsx",
+              "name": "PropertiesFormSidebar.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\PublishFormBtn.tsx",
+              "name": "PublishFormBtn.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\SaveFormBtn.tsx",
+              "name": "SaveFormBtn.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\ShareForm.tsx",
+              "name": "ShareForm.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\SidebarBtnElement.tsx",
+              "name": "SidebarBtnElement.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\ThemeSelector.tsx",
+              "name": "ThemeSelector.tsx",
+              "type": "file"
+            },
+            {
+              "path": "src\\components\\ui",
+              "name": "ui",
+              "type": "directory"
+            },
+            {
+              "path": "src\\components\\VisitBtn.tsx",
+              "name": "VisitBtn.tsx",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "src\\context",
+          "name": "context",
+          "children": [
+            {
+              "path": "src\\context\\DesignerContext.tsx",
+              "name": "DesignerContext.tsx",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "src\\hooks",
+          "name": "hooks",
+          "children": [
+            {
+              "path": "src\\hooks\\useDesigner.tsx",
+              "name": "useDesigner.tsx",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "src\\lib",
+          "name": "lib",
+          "children": [
+            {
+              "path": "src\\lib\\colorSchemes.ts",
+              "name": "colorSchemes.ts",
+              "type": "file"
+            },
+            {
+              "path": "src\\lib\\embed",
+              "name": "embed",
+              "type": "directory"
+            },
+            {
+              "path": "src\\lib\\idGenerator.ts",
+              "name": "idGenerator.ts",
+              "type": "file"
+            },
+            {
+              "path": "src\\lib\\prisma.ts",
+              "name": "prisma.ts",
+              "type": "file"
+            },
+            {
+              "path": "src\\lib\\styles",
+              "name": "styles",
+              "type": "directory"
+            },
+            {
+              "path": "src\\lib\\utils.ts",
+              "name": "utils.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "src\\middleware.ts",
+          "name": "middleware.ts",
+          "type": "file"
+        },
+        {
+          "path": "src\\providers",
+          "name": "providers",
+          "children": [
+            {
+              "path": "src\\providers\\ThemeProvider.tsx",
+              "name": "ThemeProvider.tsx",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        },
+        {
+          "path": "src\\schemas",
+          "name": "schemas",
+          "children": [
+            {
+              "path": "src\\schemas\\form.ts",
+              "name": "form.ts",
+              "type": "file"
+            }
+          ],
+          "type": "directory"
+        }
+      ],
+      "type": "directory"
+    },
+    {
+      "path": "tailwind.config.ts",
+      "name": "tailwind.config.ts",
+      "type": "file"
+    },
+    {
+      "path": "tsconfig.json",
+      "name": "tsconfig.json",
+      "type": "file"
+    },
+    {
+      "path": "xz.json",
+      "name": "xz.json",
+      "type": "file"
+    }
+  ],
+  "type": "directory"
+}
\ No newline at end of file

From b7cb0d58d30f21cdb5f7a14d255d2e39cd5e29be Mon Sep 17 00:00:00 2001
From: brucewedding <bruce.wedding@realheart.se>
Date: Sat, 1 Feb 2025 23:39:18 +0100
Subject: [PATCH 40/40] Added moon

---
 moon.yml | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 moon.yml

diff --git a/moon.yml b/moon.yml
new file mode 100644
index 0000000..d47cb15
--- /dev/null
+++ b/moon.yml
@@ -0,0 +1,20 @@
+type: application
+
+# Project configuration
+project:
+  name: Quick-Form-Builder
+  description: Form builder application
+
+# Tasks configuration
+tasks:
+  dev:
+    command: npm run dev
+    local: true
+  build:
+    command: npm run build
+    deps:
+      - ^:build
+  test:
+    command: npm run test
+  lint:
+    command: npm run lint