@uipath/apollo-wind 0.9.0 → 0.10.0-pr257.2a4b17b

package/dist/examples/form-builder-example.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { useState } from "react";
 import { Button } from "../components/ui/button.js";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card.js";
@@ -15,626 +16,1029 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs.
 import { Textarea } from "../components/ui/textarea.js";
 import { Column, Grid, Row } from "../components/ui/layout/index.js";
 function FormBuilderExample() {
-    const [formData, setFormData] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-        phone: '',
-        bio: '',
-        theme: 'system',
-        language: 'en',
-        notifications: true,
-        newsletter: false,
-        visibility: 'public',
-        experience: 5,
-        interests: [],
-        customJson: '{}'
-    });
-    const updateField = (field, value)=>{
-        setFormData((prev)=>({
-                ...prev,
-                [field]: value
-            }));
-    };
-    const handleReset = ()=>{
-        setFormData({
-            firstName: '',
-            lastName: '',
-            email: '',
-            phone: '',
-            bio: '',
-            theme: 'system',
-            language: 'en',
+    const $ = c(113);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            firstName: "",
+            lastName: "",
+            email: "",
+            phone: "",
+            bio: "",
+            theme: "system",
+            language: "en",
             notifications: true,
             newsletter: false,
-            visibility: 'public',
+            visibility: "public",
             experience: 5,
             interests: [],
-            customJson: '{}'
-        });
-    };
-    const handleSubmit = (e)=>{
-        e.preventDefault();
-        alert('Form submitted! Check the JSON preview.');
-    };
-    return /*#__PURE__*/ jsx(Column, {
-        h: "screen",
-        w: "full",
-        className: "bg-background",
-        children: /*#__PURE__*/ jsxs(ResizablePanelGroup, {
-            direction: "horizontal",
+            customJson: "{}"
+        };
+        $[0] = t0;
+    } else t0 = $[0];
+    const [formData, setFormData] = useState(t0);
+    let t1;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = (field, value)=>{
+            setFormData((prev)=>({
+                    ...prev,
+                    [field]: value
+                }));
+        };
+        $[1] = t1;
+    } else t1 = $[1];
+    const updateField = t1;
+    let t2;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = ()=>{
+            setFormData({
+                firstName: "",
+                lastName: "",
+                email: "",
+                phone: "",
+                bio: "",
+                theme: "system",
+                language: "en",
+                notifications: true,
+                newsletter: false,
+                visibility: "public",
+                experience: 5,
+                interests: [],
+                customJson: "{}"
+            });
+        };
+        $[2] = t2;
+    } else t2 = $[2];
+    const handleReset = t2;
+    const handleSubmit = _temp;
+    let t3;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = /*#__PURE__*/ jsxs("div", {
+            className: "mb-6",
             children: [
-                /*#__PURE__*/ jsx(ResizablePanel, {
-                    defaultSize: 50,
-                    minSize: 30,
-                    children: /*#__PURE__*/ jsx(ScrollArea, {
-                        className: "h-screen",
-                        children: /*#__PURE__*/ jsxs("div", {
-                            className: "p-6",
+                /*#__PURE__*/ jsx("h1", {
+                    className: "text-3xl font-bold tracking-tight",
+                    children: "Form Builder"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-muted-foreground",
+                    children: "A powerful example showcasing forms, tabs, and live JSON preview"
+                })
+            ]
+        });
+        $[3] = t3;
+    } else t3 = $[3];
+    let t4;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = /*#__PURE__*/ jsxs(TabsList, {
+            className: "grid w-full grid-cols-4",
+            children: [
+                /*#__PURE__*/ jsx(TabsTrigger, {
+                    value: "personal",
+                    children: "Personal"
+                }),
+                /*#__PURE__*/ jsx(TabsTrigger, {
+                    value: "preferences",
+                    children: "Preferences"
+                }),
+                /*#__PURE__*/ jsx(TabsTrigger, {
+                    value: "settings",
+                    children: "Settings"
+                }),
+                /*#__PURE__*/ jsx(TabsTrigger, {
+                    value: "advanced",
+                    children: "Advanced"
+                })
+            ]
+        });
+        $[4] = t4;
+    } else t4 = $[4];
+    let t5;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = /*#__PURE__*/ jsxs(CardHeader, {
+            children: [
+                /*#__PURE__*/ jsx(CardTitle, {
+                    children: "Personal Information"
+                }),
+                /*#__PURE__*/ jsx(CardDescription, {
+                    children: "Enter your personal details below"
+                })
+            ]
+        });
+        $[5] = t5;
+    } else t5 = $[5];
+    let t6;
+    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "firstName",
+            children: "First Name"
+        });
+        $[6] = t6;
+    } else t6 = $[6];
+    let t7;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = (e_0)=>updateField("firstName", e_0.target.value);
+        $[7] = t7;
+    } else t7 = $[7];
+    let t8;
+    if ($[8] !== formData.firstName) {
+        t8 = /*#__PURE__*/ jsxs(Column, {
+            gap: 2,
+            children: [
+                t6,
+                /*#__PURE__*/ jsx(Input, {
+                    id: "firstName",
+                    placeholder: "John",
+                    value: formData.firstName,
+                    onChange: t7
+                })
+            ]
+        });
+        $[8] = formData.firstName;
+        $[9] = t8;
+    } else t8 = $[9];
+    let t9;
+    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+        t9 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "lastName",
+            children: "Last Name"
+        });
+        $[10] = t9;
+    } else t9 = $[10];
+    let t10;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+        t10 = (e_1)=>updateField("lastName", e_1.target.value);
+        $[11] = t10;
+    } else t10 = $[11];
+    let t11;
+    if ($[12] !== formData.lastName) {
+        t11 = /*#__PURE__*/ jsxs(Column, {
+            gap: 2,
+            children: [
+                t9,
+                /*#__PURE__*/ jsx(Input, {
+                    id: "lastName",
+                    placeholder: "Doe",
+                    value: formData.lastName,
+                    onChange: t10
+                })
+            ]
+        });
+        $[12] = formData.lastName;
+        $[13] = t11;
+    } else t11 = $[13];
+    let t12;
+    if ($[14] !== t11 || $[15] !== t8) {
+        t12 = /*#__PURE__*/ jsxs(Grid, {
+            gap: 4,
+            cols: 2,
+            className: "md:grid-cols-2",
+            children: [
+                t8,
+                t11
+            ]
+        });
+        $[14] = t11;
+        $[15] = t8;
+        $[16] = t12;
+    } else t12 = $[16];
+    let t13;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+        t13 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "email",
+            children: "Email"
+        });
+        $[17] = t13;
+    } else t13 = $[17];
+    let t14;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = (e_2)=>updateField("email", e_2.target.value);
+        $[18] = t14;
+    } else t14 = $[18];
+    let t15;
+    if ($[19] !== formData.email) {
+        t15 = /*#__PURE__*/ jsxs(Column, {
+            gap: 2,
+            children: [
+                t13,
+                /*#__PURE__*/ jsx(Input, {
+                    id: "email",
+                    type: "email",
+                    placeholder: "john.doe@example.com",
+                    value: formData.email,
+                    onChange: t14
+                })
+            ]
+        });
+        $[19] = formData.email;
+        $[20] = t15;
+    } else t15 = $[20];
+    let t16;
+    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+        t16 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "phone",
+            children: "Phone Number"
+        });
+        $[21] = t16;
+    } else t16 = $[21];
+    let t17;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+        t17 = (e_3)=>updateField("phone", e_3.target.value);
+        $[22] = t17;
+    } else t17 = $[22];
+    let t18;
+    if ($[23] !== formData.phone) {
+        t18 = /*#__PURE__*/ jsxs(Column, {
+            gap: 2,
+            children: [
+                t16,
+                /*#__PURE__*/ jsx(Input, {
+                    id: "phone",
+                    type: "tel",
+                    placeholder: "+1 (555) 000-0000",
+                    value: formData.phone,
+                    onChange: t17
+                })
+            ]
+        });
+        $[23] = formData.phone;
+        $[24] = t18;
+    } else t18 = $[24];
+    let t19;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+        t19 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "bio",
+            children: "Bio"
+        });
+        $[25] = t19;
+    } else t19 = $[25];
+    let t20;
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+        t20 = (e_4)=>updateField("bio", e_4.target.value);
+        $[26] = t20;
+    } else t20 = $[26];
+    let t21;
+    if ($[27] !== formData.bio) {
+        t21 = /*#__PURE__*/ jsxs(Column, {
+            gap: 2,
+            children: [
+                t19,
+                /*#__PURE__*/ jsx(Textarea, {
+                    id: "bio",
+                    placeholder: "Tell us about yourself...",
+                    rows: 4,
+                    value: formData.bio,
+                    onChange: t20
+                })
+            ]
+        });
+        $[27] = formData.bio;
+        $[28] = t21;
+    } else t21 = $[28];
+    let t22;
+    if ($[29] !== t12 || $[30] !== t15 || $[31] !== t18 || $[32] !== t21) {
+        t22 = /*#__PURE__*/ jsx(TabsContent, {
+            value: "personal",
+            className: "space-y-4",
+            children: /*#__PURE__*/ jsxs(Card, {
+                children: [
+                    t5,
+                    /*#__PURE__*/ jsxs(CardContent, {
+                        className: "space-y-4",
+                        children: [
+                            t12,
+                            t15,
+                            t18,
+                            t21
+                        ]
+                    })
+                ]
+            })
+        });
+        $[29] = t12;
+        $[30] = t15;
+        $[31] = t18;
+        $[32] = t21;
+        $[33] = t22;
+    } else t22 = $[33];
+    let t23;
+    if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+        t23 = /*#__PURE__*/ jsxs(CardHeader, {
+            children: [
+                /*#__PURE__*/ jsx(CardTitle, {
+                    children: "Preferences"
+                }),
+                /*#__PURE__*/ jsx(CardDescription, {
+                    children: "Customize your experience"
+                })
+            ]
+        });
+        $[34] = t23;
+    } else t23 = $[34];
+    let t24;
+    if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+        t24 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "theme",
+            children: "Theme"
+        });
+        $[35] = t24;
+    } else t24 = $[35];
+    let t25;
+    if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+        t25 = (value_0)=>updateField("theme", value_0);
+        $[36] = t25;
+    } else t25 = $[36];
+    let t26;
+    if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+        t26 = /*#__PURE__*/ jsx(SelectTrigger, {
+            id: "theme",
+            children: /*#__PURE__*/ jsx(SelectValue, {
+                placeholder: "Select a theme"
+            })
+        });
+        $[37] = t26;
+    } else t26 = $[37];
+    let t27;
+    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+        t27 = /*#__PURE__*/ jsxs(SelectContent, {
+            children: [
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "light",
+                    children: "Light"
+                }),
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "dark",
+                    children: "Dark"
+                }),
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "system",
+                    children: "System"
+                })
+            ]
+        });
+        $[38] = t27;
+    } else t27 = $[38];
+    let t28;
+    if ($[39] !== formData.theme) {
+        t28 = /*#__PURE__*/ jsxs(Column, {
+            gap: 2,
+            children: [
+                t24,
+                /*#__PURE__*/ jsxs(Select, {
+                    value: formData.theme,
+                    onValueChange: t25,
+                    children: [
+                        t26,
+                        t27
+                    ]
+                })
+            ]
+        });
+        $[39] = formData.theme;
+        $[40] = t28;
+    } else t28 = $[40];
+    let t29;
+    if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+        t29 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "language",
+            children: "Language"
+        });
+        $[41] = t29;
+    } else t29 = $[41];
+    let t30;
+    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+        t30 = (value_1)=>updateField("language", value_1);
+        $[42] = t30;
+    } else t30 = $[42];
+    let t31;
+    if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+        t31 = /*#__PURE__*/ jsx(SelectTrigger, {
+            id: "language",
+            children: /*#__PURE__*/ jsx(SelectValue, {
+                placeholder: "Select a language"
+            })
+        });
+        $[43] = t31;
+    } else t31 = $[43];
+    let t32;
+    if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+        t32 = /*#__PURE__*/ jsxs(SelectContent, {
+            children: [
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "en",
+                    children: "English"
+                }),
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "es",
+                    children: "Spanish"
+                }),
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "fr",
+                    children: "French"
+                }),
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "de",
+                    children: "German"
+                }),
+                /*#__PURE__*/ jsx(SelectItem, {
+                    value: "ja",
+                    children: "Japanese"
+                })
+            ]
+        });
+        $[44] = t32;
+    } else t32 = $[44];
+    let t33;
+    if ($[45] !== formData.language) {
+        t33 = /*#__PURE__*/ jsxs(Column, {
+            gap: 2,
+            children: [
+                t29,
+                /*#__PURE__*/ jsxs(Select, {
+                    value: formData.language,
+                    onValueChange: t30,
+                    children: [
+                        t31,
+                        t32
+                    ]
+                })
+            ]
+        });
+        $[45] = formData.language;
+        $[46] = t33;
+    } else t33 = $[46];
+    let t34;
+    if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+        t34 = /*#__PURE__*/ jsxs(Column, {
+            gap: 0.5,
+            children: [
+                /*#__PURE__*/ jsx(Label, {
+                    htmlFor: "notifications",
+                    children: "Notifications"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-sm text-muted-foreground",
+                    children: "Receive notifications about your account"
+                })
+            ]
+        });
+        $[47] = t34;
+    } else t34 = $[47];
+    let t35;
+    if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+        t35 = (checked)=>updateField("notifications", checked);
+        $[48] = t35;
+    } else t35 = $[48];
+    let t36;
+    if ($[49] !== formData.notifications) {
+        t36 = /*#__PURE__*/ jsxs(Row, {
+            justify: "between",
+            align: "center",
+            children: [
+                t34,
+                /*#__PURE__*/ jsx(Switch, {
+                    id: "notifications",
+                    checked: formData.notifications,
+                    onCheckedChange: t35
+                })
+            ]
+        });
+        $[49] = formData.notifications;
+        $[50] = t36;
+    } else t36 = $[50];
+    let t37;
+    if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+        t37 = (checked_0)=>updateField("newsletter", !!checked_0);
+        $[51] = t37;
+    } else t37 = $[51];
+    let t38;
+    if ($[52] !== formData.newsletter) {
+        t38 = /*#__PURE__*/ jsx(Checkbox, {
+            id: "newsletter",
+            checked: formData.newsletter,
+            onCheckedChange: t37
+        });
+        $[52] = formData.newsletter;
+        $[53] = t38;
+    } else t38 = $[53];
+    let t39;
+    if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+        t39 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "newsletter",
+            className: "text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            children: "Subscribe to newsletter"
+        });
+        $[54] = t39;
+    } else t39 = $[54];
+    let t40;
+    if ($[55] !== t38) {
+        t40 = /*#__PURE__*/ jsxs(Row, {
+            gap: 2,
+            align: "center",
+            children: [
+                t38,
+                t39
+            ]
+        });
+        $[55] = t38;
+        $[56] = t40;
+    } else t40 = $[56];
+    let t41;
+    if ($[57] !== t28 || $[58] !== t33 || $[59] !== t36 || $[60] !== t40) {
+        t41 = /*#__PURE__*/ jsx(TabsContent, {
+            value: "preferences",
+            className: "space-y-4",
+            children: /*#__PURE__*/ jsxs(Card, {
+                children: [
+                    t23,
+                    /*#__PURE__*/ jsxs(CardContent, {
+                        className: "space-y-6",
+                        children: [
+                            t28,
+                            t33,
+                            t36,
+                            t40
+                        ]
+                    })
+                ]
+            })
+        });
+        $[57] = t28;
+        $[58] = t33;
+        $[59] = t36;
+        $[60] = t40;
+        $[61] = t41;
+    } else t41 = $[61];
+    let t42;
+    if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+        t42 = /*#__PURE__*/ jsxs(CardHeader, {
+            children: [
+                /*#__PURE__*/ jsx(CardTitle, {
+                    children: "Settings"
+                }),
+                /*#__PURE__*/ jsx(CardDescription, {
+                    children: "Configure your account settings"
+                })
+            ]
+        });
+        $[62] = t42;
+    } else t42 = $[62];
+    let t43;
+    if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+        t43 = /*#__PURE__*/ jsx(Label, {
+            children: "Profile Visibility"
+        });
+        $[63] = t43;
+    } else t43 = $[63];
+    let t44;
+    if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+        t44 = (value_2)=>updateField("visibility", value_2);
+        $[64] = t44;
+    } else t44 = $[64];
+    let t45;
+    if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+        t45 = /*#__PURE__*/ jsxs(Row, {
+            gap: 2,
+            align: "center",
+            children: [
+                /*#__PURE__*/ jsx(RadioGroupItem, {
+                    value: "public",
+                    id: "public"
+                }),
+                /*#__PURE__*/ jsx(Label, {
+                    htmlFor: "public",
+                    className: "font-normal",
+                    children: "Public - Anyone can see your profile"
+                })
+            ]
+        });
+        $[65] = t45;
+    } else t45 = $[65];
+    let t46;
+    if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+        t46 = /*#__PURE__*/ jsxs(Row, {
+            gap: 2,
+            align: "center",
+            children: [
+                /*#__PURE__*/ jsx(RadioGroupItem, {
+                    value: "private",
+                    id: "private"
+                }),
+                /*#__PURE__*/ jsx(Label, {
+                    htmlFor: "private",
+                    className: "font-normal",
+                    children: "Private - Only you can see your profile"
+                })
+            ]
+        });
+        $[66] = t46;
+    } else t46 = $[66];
+    let t47;
+    if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+        t47 = /*#__PURE__*/ jsxs(Row, {
+            gap: 2,
+            align: "center",
+            children: [
+                /*#__PURE__*/ jsx(RadioGroupItem, {
+                    value: "friends",
+                    id: "friends"
+                }),
+                /*#__PURE__*/ jsx(Label, {
+                    htmlFor: "friends",
+                    className: "font-normal",
+                    children: "Friends - Only friends can see your profile"
+                })
+            ]
+        });
+        $[67] = t47;
+    } else t47 = $[67];
+    let t48;
+    if ($[68] !== formData.visibility) {
+        t48 = /*#__PURE__*/ jsxs(Column, {
+            gap: 3,
+            children: [
+                t43,
+                /*#__PURE__*/ jsxs(RadioGroup, {
+                    value: formData.visibility,
+                    onValueChange: t44,
+                    children: [
+                        t45,
+                        t46,
+                        t47
+                    ]
+                })
+            ]
+        });
+        $[68] = formData.visibility;
+        $[69] = t48;
+    } else t48 = $[69];
+    let t49;
+    if ($[70] !== formData.experience) {
+        t49 = /*#__PURE__*/ jsx(Row, {
+            justify: "between",
+            align: "center",
+            children: /*#__PURE__*/ jsxs(Label, {
+                htmlFor: "experience",
+                children: [
+                    "Experience Level: ",
+                    formData.experience
+                ]
+            })
+        });
+        $[70] = formData.experience;
+        $[71] = t49;
+    } else t49 = $[71];
+    let t50;
+    if ($[72] !== formData.experience) {
+        t50 = [
+            formData.experience
+        ];
+        $[72] = formData.experience;
+        $[73] = t50;
+    } else t50 = $[73];
+    let t51;
+    if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
+        t51 = (value_3)=>updateField("experience", value_3[0]);
+        $[74] = t51;
+    } else t51 = $[74];
+    let t52;
+    if ($[75] !== t50) {
+        t52 = /*#__PURE__*/ jsx(Slider, {
+            id: "experience",
+            min: 0,
+            max: 10,
+            step: 1,
+            value: t50,
+            onValueChange: t51
+        });
+        $[75] = t50;
+        $[76] = t52;
+    } else t52 = $[76];
+    let t53;
+    if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+        t53 = /*#__PURE__*/ jsxs(Row, {
+            justify: "between",
+            className: "text-xs text-muted-foreground",
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    children: "Beginner"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    children: "Expert"
+                })
+            ]
+        });
+        $[77] = t53;
+    } else t53 = $[77];
+    let t54;
+    if ($[78] !== t49 || $[79] !== t52) {
+        t54 = /*#__PURE__*/ jsxs(Column, {
+            gap: 3,
+            children: [
+                t49,
+                t52,
+                t53
+            ]
+        });
+        $[78] = t49;
+        $[79] = t52;
+        $[80] = t54;
+    } else t54 = $[80];
+    let t55;
+    if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
+        t55 = /*#__PURE__*/ jsx(Label, {
+            children: "Interests"
+        });
+        $[81] = t55;
+    } else t55 = $[81];
+    let t56;
+    if ($[82] !== formData.interests) {
+        t56 = /*#__PURE__*/ jsxs(Column, {
+            gap: 3,
+            children: [
+                t55,
+                /*#__PURE__*/ jsx(Column, {
+                    gap: 2,
+                    children: [
+                        "Technology",
+                        "Design",
+                        "Business",
+                        "Science",
+                        "Arts"
+                    ].map((interest)=>/*#__PURE__*/ jsxs(Row, {
+                            gap: 2,
+                            align: "center",
                             children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    className: "mb-6",
-                                    children: [
-                                        /*#__PURE__*/ jsx("h1", {
-                                            className: "text-3xl font-bold tracking-tight",
-                                            children: "Form Builder"
-                                        }),
-                                        /*#__PURE__*/ jsx("p", {
-                                            className: "text-muted-foreground",
-                                            children: "A powerful example showcasing forms, tabs, and live JSON preview"
-                                        })
-                                    ]
+                                /*#__PURE__*/ jsx(Checkbox, {
+                                    id: interest,
+                                    checked: formData.interests.includes(interest),
+                                    onCheckedChange: (checked_1)=>{
+                                        checked_1 ? updateField("interests", [
+                                            ...formData.interests,
+                                            interest
+                                        ]) : updateField("interests", formData.interests.filter((i)=>i !== interest));
+                                    }
                                 }),
-                                /*#__PURE__*/ jsxs("form", {
-                                    onSubmit: handleSubmit,
-                                    className: "space-y-6",
-                                    children: [
-                                        /*#__PURE__*/ jsxs(Tabs, {
-                                            defaultValue: "personal",
-                                            className: "w-full",
-                                            children: [
-                                                /*#__PURE__*/ jsxs(TabsList, {
-                                                    className: "grid w-full grid-cols-4",
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "personal",
-                                                            children: "Personal"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "preferences",
-                                                            children: "Preferences"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "settings",
-                                                            children: "Settings"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "advanced",
-                                                            children: "Advanced"
-                                                        })
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "personal",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Personal Information"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Enter your personal details below"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                                className: "space-y-4",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxs(Grid, {
-                                                                        gap: 4,
-                                                                        cols: 2,
-                                                                        className: "md:grid-cols-2",
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                                gap: 2,
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                                        htmlFor: "firstName",
-                                                                                        children: "First Name"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx(Input, {
-                                                                                        id: "firstName",
-                                                                                        placeholder: "John",
-                                                                                        value: formData.firstName,
-                                                                                        onChange: (e)=>updateField('firstName', e.target.value)
-                                                                                    })
-                                                                                ]
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                                gap: 2,
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                                        htmlFor: "lastName",
-                                                                                        children: "Last Name"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx(Input, {
-                                                                                        id: "lastName",
-                                                                                        placeholder: "Doe",
-                                                                                        value: formData.lastName,
-                                                                                        onChange: (e)=>updateField('lastName', e.target.value)
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "email",
-                                                                                children: "Email"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Input, {
-                                                                                id: "email",
-                                                                                type: "email",
-                                                                                placeholder: "john.doe@example.com",
-                                                                                value: formData.email,
-                                                                                onChange: (e)=>updateField('email', e.target.value)
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "phone",
-                                                                                children: "Phone Number"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Input, {
-                                                                                id: "phone",
-                                                                                type: "tel",
-                                                                                placeholder: "+1 (555) 000-0000",
-                                                                                value: formData.phone,
-                                                                                onChange: (e)=>updateField('phone', e.target.value)
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "bio",
-                                                                                children: "Bio"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Textarea, {
-                                                                                id: "bio",
-                                                                                placeholder: "Tell us about yourself...",
-                                                                                rows: 4,
-                                                                                value: formData.bio,
-                                                                                onChange: (e)=>updateField('bio', e.target.value)
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "preferences",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Preferences"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Customize your experience"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                                className: "space-y-6",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "theme",
-                                                                                children: "Theme"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Select, {
-                                                                                value: formData.theme,
-                                                                                onValueChange: (value)=>updateField('theme', value),
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(SelectTrigger, {
-                                                                                        id: "theme",
-                                                                                        children: /*#__PURE__*/ jsx(SelectValue, {
-                                                                                            placeholder: "Select a theme"
-                                                                                        })
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(SelectContent, {
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "light",
-                                                                                                children: "Light"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "dark",
-                                                                                                children: "Dark"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "system",
-                                                                                                children: "System"
-                                                                                            })
-                                                                                        ]
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "language",
-                                                                                children: "Language"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Select, {
-                                                                                value: formData.language,
-                                                                                onValueChange: (value)=>updateField('language', value),
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(SelectTrigger, {
-                                                                                        id: "language",
-                                                                                        children: /*#__PURE__*/ jsx(SelectValue, {
-                                                                                            placeholder: "Select a language"
-                                                                                        })
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(SelectContent, {
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "en",
-                                                                                                children: "English"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "es",
-                                                                                                children: "Spanish"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "fr",
-                                                                                                children: "French"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "de",
-                                                                                                children: "German"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "ja",
-                                                                                                children: "Japanese"
-                                                                                            })
-                                                                                        ]
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                        justify: "between",
-                                                                        align: "center",
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                                gap: 0.5,
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                                        htmlFor: "notifications",
-                                                                                        children: "Notifications"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx("p", {
-                                                                                        className: "text-sm text-muted-foreground",
-                                                                                        children: "Receive notifications about your account"
-                                                                                    })
-                                                                                ]
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Switch, {
-                                                                                id: "notifications",
-                                                                                checked: formData.notifications,
-                                                                                onCheckedChange: (checked)=>updateField('notifications', checked)
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                        gap: 2,
-                                                                        align: "center",
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Checkbox, {
-                                                                                id: "newsletter",
-                                                                                checked: formData.newsletter,
-                                                                                onCheckedChange: (checked)=>updateField('newsletter', !!checked)
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "newsletter",
-                                                                                className: "text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-                                                                                children: "Subscribe to newsletter"
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "settings",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Settings"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Configure your account settings"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                                className: "space-y-6",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 3,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                children: "Profile Visibility"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(RadioGroup, {
-                                                                                value: formData.visibility,
-                                                                                onValueChange: (value)=>updateField('visibility', value),
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                                                                value: "public",
-                                                                                                id: "public"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: "public",
-                                                                                                className: "font-normal",
-                                                                                                children: "Public - Anyone can see your profile"
-                                                                                            })
-                                                                                        ]
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                                                                value: "private",
-                                                                                                id: "private"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: "private",
-                                                                                                className: "font-normal",
-                                                                                                children: "Private - Only you can see your profile"
-                                                                                            })
-                                                                                        ]
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                                                                value: "friends",
-                                                                                                id: "friends"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: "friends",
-                                                                                                className: "font-normal",
-                                                                                                children: "Friends - Only friends can see your profile"
-                                                                                            })
-                                                                                        ]
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 3,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Row, {
-                                                                                justify: "between",
-                                                                                align: "center",
-                                                                                children: /*#__PURE__*/ jsxs(Label, {
-                                                                                    htmlFor: "experience",
-                                                                                    children: [
-                                                                                        "Experience Level: ",
-                                                                                        formData.experience
-                                                                                    ]
-                                                                                })
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Slider, {
-                                                                                id: "experience",
-                                                                                min: 0,
-                                                                                max: 10,
-                                                                                step: 1,
-                                                                                value: [
-                                                                                    formData.experience
-                                                                                ],
-                                                                                onValueChange: (value)=>updateField('experience', value[0])
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Row, {
-                                                                                justify: "between",
-                                                                                className: "text-xs text-muted-foreground",
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx("span", {
-                                                                                        children: "Beginner"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx("span", {
-                                                                                        children: "Expert"
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 3,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                children: "Interests"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Column, {
-                                                                                gap: 2,
-                                                                                children: [
-                                                                                    'Technology',
-                                                                                    'Design',
-                                                                                    'Business',
-                                                                                    'Science',
-                                                                                    'Arts'
-                                                                                ].map((interest)=>/*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(Checkbox, {
-                                                                                                id: interest,
-                                                                                                checked: formData.interests.includes(interest),
-                                                                                                onCheckedChange: (checked)=>{
-                                                                                                    checked ? updateField('interests', [
-                                                                                                        ...formData.interests,
-                                                                                                        interest
-                                                                                                    ]) : updateField('interests', formData.interests.filter((i)=>i !== interest));
-                                                                                                }
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: interest,
-                                                                                                className: "text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-                                                                                                children: interest
-                                                                                            })
-                                                                                        ]
-                                                                                    }, interest))
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "advanced",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Advanced Settings"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Configure advanced options with custom JSON"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsx(CardContent, {
-                                                                className: "space-y-4",
-                                                                children: /*#__PURE__*/ jsxs(Column, {
-                                                                    gap: 2,
-                                                                    children: [
-                                                                        /*#__PURE__*/ jsx(Label, {
-                                                                            htmlFor: "customJson",
-                                                                            children: "Custom Configuration (JSON)"
-                                                                        }),
-                                                                        /*#__PURE__*/ jsx(Textarea, {
-                                                                            id: "customJson",
-                                                                            placeholder: '{"key": "value"}',
-                                                                            rows: 10,
-                                                                            className: "font-mono text-sm",
-                                                                            value: formData.customJson,
-                                                                            onChange: (e)=>updateField('customJson', e.target.value)
-                                                                        }),
-                                                                        /*#__PURE__*/ jsx("p", {
-                                                                            className: "text-xs text-muted-foreground",
-                                                                            children: "Enter valid JSON for custom configuration"
-                                                                        })
-                                                                    ]
-                                                                })
-                                                            })
-                                                        ]
-                                                    })
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            gap: 4,
-                                            children: [
-                                                /*#__PURE__*/ jsx(Button, {
-                                                    type: "submit",
-                                                    children: "Submit"
-                                                }),
-                                                /*#__PURE__*/ jsx(Button, {
-                                                    type: "button",
-                                                    variant: "outline",
-                                                    onClick: handleReset,
-                                                    children: "Reset"
-                                                })
-                                            ]
-                                        })
-                                    ]
+                                /*#__PURE__*/ jsx(Label, {
+                                    htmlFor: interest,
+                                    className: "text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                                    children: interest
                                 })
                             ]
+                        }, interest))
+                })
+            ]
+        });
+        $[82] = formData.interests;
+        $[83] = t56;
+    } else t56 = $[83];
+    let t57;
+    if ($[84] !== t48 || $[85] !== t54 || $[86] !== t56) {
+        t57 = /*#__PURE__*/ jsx(TabsContent, {
+            value: "settings",
+            className: "space-y-4",
+            children: /*#__PURE__*/ jsxs(Card, {
+                children: [
+                    t42,
+                    /*#__PURE__*/ jsxs(CardContent, {
+                        className: "space-y-6",
+                        children: [
+                            t48,
+                            t54,
+                            t56
+                        ]
+                    })
+                ]
+            })
+        });
+        $[84] = t48;
+        $[85] = t54;
+        $[86] = t56;
+        $[87] = t57;
+    } else t57 = $[87];
+    let t58;
+    if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
+        t58 = /*#__PURE__*/ jsxs(CardHeader, {
+            children: [
+                /*#__PURE__*/ jsx(CardTitle, {
+                    children: "Advanced Settings"
+                }),
+                /*#__PURE__*/ jsx(CardDescription, {
+                    children: "Configure advanced options with custom JSON"
+                })
+            ]
+        });
+        $[88] = t58;
+    } else t58 = $[88];
+    let t59;
+    if ($[89] === Symbol.for("react.memo_cache_sentinel")) {
+        t59 = /*#__PURE__*/ jsx(Label, {
+            htmlFor: "customJson",
+            children: "Custom Configuration (JSON)"
+        });
+        $[89] = t59;
+    } else t59 = $[89];
+    let t60;
+    if ($[90] === Symbol.for("react.memo_cache_sentinel")) {
+        t60 = (e_5)=>updateField("customJson", e_5.target.value);
+        $[90] = t60;
+    } else t60 = $[90];
+    let t61;
+    if ($[91] !== formData.customJson) {
+        t61 = /*#__PURE__*/ jsx(Textarea, {
+            id: "customJson",
+            placeholder: "{\"key\": \"value\"}",
+            rows: 10,
+            className: "font-mono text-sm",
+            value: formData.customJson,
+            onChange: t60
+        });
+        $[91] = formData.customJson;
+        $[92] = t61;
+    } else t61 = $[92];
+    let t62;
+    if ($[93] === Symbol.for("react.memo_cache_sentinel")) {
+        t62 = /*#__PURE__*/ jsx("p", {
+            className: "text-xs text-muted-foreground",
+            children: "Enter valid JSON for custom configuration"
+        });
+        $[93] = t62;
+    } else t62 = $[93];
+    let t63;
+    if ($[94] !== t61) {
+        t63 = /*#__PURE__*/ jsx(TabsContent, {
+            value: "advanced",
+            className: "space-y-4",
+            children: /*#__PURE__*/ jsxs(Card, {
+                children: [
+                    t58,
+                    /*#__PURE__*/ jsx(CardContent, {
+                        className: "space-y-4",
+                        children: /*#__PURE__*/ jsxs(Column, {
+                            gap: 2,
+                            children: [
+                                t59,
+                                t61,
+                                t62
+                            ]
                         })
                     })
+                ]
+            })
+        });
+        $[94] = t61;
+        $[95] = t63;
+    } else t63 = $[95];
+    let t64;
+    if ($[96] !== t22 || $[97] !== t41 || $[98] !== t57 || $[99] !== t63) {
+        t64 = /*#__PURE__*/ jsxs(Tabs, {
+            defaultValue: "personal",
+            className: "w-full",
+            children: [
+                t4,
+                t22,
+                t41,
+                t57,
+                t63
+            ]
+        });
+        $[96] = t22;
+        $[97] = t41;
+        $[98] = t57;
+        $[99] = t63;
+        $[100] = t64;
+    } else t64 = $[100];
+    let t65;
+    if ($[101] === Symbol.for("react.memo_cache_sentinel")) {
+        t65 = /*#__PURE__*/ jsxs(Row, {
+            gap: 4,
+            children: [
+                /*#__PURE__*/ jsx(Button, {
+                    type: "submit",
+                    children: "Submit"
                 }),
-                /*#__PURE__*/ jsx(ResizableHandle, {
-                    withHandle: true
+                /*#__PURE__*/ jsx(Button, {
+                    type: "button",
+                    variant: "outline",
+                    onClick: handleReset,
+                    children: "Reset"
+                })
+            ]
+        });
+        $[101] = t65;
+    } else t65 = $[101];
+    let t66;
+    if ($[102] !== t64) {
+        t66 = /*#__PURE__*/ jsx(ResizablePanel, {
+            defaultSize: 50,
+            minSize: 30,
+            children: /*#__PURE__*/ jsx(ScrollArea, {
+                className: "h-screen",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "p-6",
+                    children: [
+                        t3,
+                        /*#__PURE__*/ jsxs("form", {
+                            onSubmit: handleSubmit,
+                            className: "space-y-6",
+                            children: [
+                                t64,
+                                t65
+                            ]
+                        })
+                    ]
+                })
+            })
+        });
+        $[102] = t64;
+        $[103] = t66;
+    } else t66 = $[103];
+    let t67;
+    if ($[104] === Symbol.for("react.memo_cache_sentinel")) {
+        t67 = /*#__PURE__*/ jsx(ResizableHandle, {
+            withHandle: true
+        });
+        $[104] = t67;
+    } else t67 = $[104];
+    let t68;
+    if ($[105] === Symbol.for("react.memo_cache_sentinel")) {
+        t68 = /*#__PURE__*/ jsxs("div", {
+            className: "mb-4",
+            children: [
+                /*#__PURE__*/ jsx("h2", {
+                    className: "text-2xl font-bold tracking-tight",
+                    children: "JSON Preview"
                 }),
-                /*#__PURE__*/ jsx(ResizablePanel, {
-                    defaultSize: 50,
-                    minSize: 30,
-                    children: /*#__PURE__*/ jsx(Column, {
-                        h: "screen",
-                        className: "border-l",
-                        children: /*#__PURE__*/ jsx(ScrollArea, {
-                            className: "h-full",
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: "p-6",
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: "mb-4",
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold tracking-tight",
-                                                children: "JSON Preview"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Live preview of your form data"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsx(Card, {
-                                        children: /*#__PURE__*/ jsx(CardContent, {
-                                            className: "p-4",
-                                            children: /*#__PURE__*/ jsx("pre", {
-                                                className: "overflow-x-auto text-sm",
-                                                children: /*#__PURE__*/ jsx("code", {
-                                                    children: JSON.stringify(formData, null, 2)
-                                                })
-                                            })
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-muted-foreground",
+                    children: "Live preview of your form data"
+                })
+            ]
+        });
+        $[105] = t68;
+    } else t68 = $[105];
+    let t69;
+    if ($[106] !== formData) {
+        t69 = JSON.stringify(formData, null, 2);
+        $[106] = formData;
+        $[107] = t69;
+    } else t69 = $[107];
+    let t70;
+    if ($[108] !== t69) {
+        t70 = /*#__PURE__*/ jsx(ResizablePanel, {
+            defaultSize: 50,
+            minSize: 30,
+            children: /*#__PURE__*/ jsx(Column, {
+                h: "screen",
+                className: "border-l",
+                children: /*#__PURE__*/ jsx(ScrollArea, {
+                    className: "h-full",
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "p-6",
+                        children: [
+                            t68,
+                            /*#__PURE__*/ jsx(Card, {
+                                children: /*#__PURE__*/ jsx(CardContent, {
+                                    className: "p-4",
+                                    children: /*#__PURE__*/ jsx("pre", {
+                                        className: "overflow-x-auto text-sm",
+                                        children: /*#__PURE__*/ jsx("code", {
+                                            children: t69
                                         })
                                     })
-                                ]
+                                })
                             })
-                        })
+                        ]
                     })
                 })
-            ]
-        })
-    });
+            })
+        });
+        $[108] = t69;
+        $[109] = t70;
+    } else t70 = $[109];
+    let t71;
+    if ($[110] !== t66 || $[111] !== t70) {
+        t71 = /*#__PURE__*/ jsx(Column, {
+            h: "screen",
+            w: "full",
+            className: "bg-background",
+            children: /*#__PURE__*/ jsxs(ResizablePanelGroup, {
+                direction: "horizontal",
+                children: [
+                    t66,
+                    t67,
+                    t70
+                ]
+            })
+        });
+        $[110] = t66;
+        $[111] = t70;
+        $[112] = t71;
+    } else t71 = $[112];
+    return t71;
+}
+function _temp(e) {
+    e.preventDefault();
+    alert("Form submitted! Check the JSON preview.");
 }
 export { FormBuilderExample };