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

package/dist/examples/settings-example.cjs

@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     SettingsExample: ()=>SettingsExample
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const compiler_runtime_namespaceObject = require("react/compiler-runtime");
 const external_react_namespaceObject = require("react");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const avatar_cjs_namespaceObject = require("../components/ui/avatar.cjs");
@@ -85,775 +86,862 @@ const navItems = [
     }
 ];
 function SettingsExample() {
-    const [activeSection, setActiveSection] = external_react_namespaceObject.useState('profile');
-    const [formData, setFormData] = external_react_namespaceObject.useState({
-        firstName: 'John',
-        lastName: 'Doe',
-        email: 'john.doe@example.com',
-        username: 'johndoe',
-        bio: 'Software developer passionate about building great products.',
-        theme: 'system',
-        language: 'en',
-        emailNotifications: true,
-        pushNotifications: false,
-        marketingEmails: false,
-        twoFactor: false
-    });
-    const updateField = (field, value)=>{
-        setFormData((prev)=>({
-                ...prev,
-                [field]: value
-            }));
-    };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-        minH: "screen",
-        className: "bg-background",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("header", {
-                className: "border-b",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Row, {
-                    h: 14,
-                    align: "center",
-                    className: "container mx-auto px-4",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h1", {
-                        className: "text-lg font-semibold",
-                        children: "Settings"
-                    })
+    const $ = (0, compiler_runtime_namespaceObject.c)(34);
+    const [activeSection, setActiveSection] = external_react_namespaceObject.useState("profile");
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            firstName: "John",
+            lastName: "Doe",
+            email: "john.doe@example.com",
+            username: "johndoe",
+            bio: "Software developer passionate about building great products.",
+            theme: "system",
+            language: "en",
+            emailNotifications: true,
+            pushNotifications: false,
+            marketingEmails: false,
+            twoFactor: false
+        };
+        $[0] = t0;
+    } else t0 = $[0];
+    const [formData, setFormData] = external_react_namespaceObject.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 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("header", {
+            className: "border-b",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Row, {
+                h: 14,
+                align: "center",
+                className: "container mx-auto px-4",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h1", {
+                    className: "text-lg font-semibold",
+                    children: "Settings"
                 })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                gap: 8,
-                flex: 1,
-                className: "container mx-auto p-6",
+            })
+        });
+        $[2] = t2;
+    } else t2 = $[2];
+    let t3;
+    if ($[3] !== activeSection) {
+        t3 = navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                onClick: ()=>setActiveSection(item.id),
+                className: (0, index_cjs_namespaceObject.cn)("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors", activeSection === item.id ? "bg-muted font-medium" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"),
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("aside", {
-                        className: "w-56 shrink-0",
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", {
-                            className: "space-y-1",
-                            children: navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
-                                    onClick: ()=>setActiveSection(item.id),
-                                    className: (0, index_cjs_namespaceObject.cn)('flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors', activeSection === item.id ? 'bg-muted font-medium' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'),
-                                    children: [
-                                        item.icon,
-                                        item.label
-                                    ]
-                                }, item.id))
+                    item.icon,
+                    item.label
+                ]
+            }, item.id));
+        $[3] = activeSection;
+        $[4] = t3;
+    } else t3 = $[4];
+    let t4;
+    if ($[5] !== t3) {
+        t4 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("aside", {
+            className: "w-56 shrink-0",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", {
+                className: "space-y-1",
+                children: t3
+            })
+        });
+        $[5] = t3;
+        $[6] = t4;
+    } else t4 = $[6];
+    let t5;
+    if ($[7] !== activeSection || $[8] !== formData) {
+        t5 = "profile" === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                            className: "text-2xl font-bold",
+                            children: "Profile"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                            className: "text-muted-foreground",
+                            children: "Manage your public profile information."
                         })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("main", {
-                        className: "flex-1 space-y-6",
-                        children: [
-                            'profile' === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Avatar"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Click on the avatar to upload a custom one from your files."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                gap: 4,
+                                align: "center",
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(avatar_cjs_namespaceObject.Avatar, {
+                                        className: "h-20 w-20",
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Profile"
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(avatar_cjs_namespaceObject.AvatarImage, {
+                                                src: ""
                                             }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your public profile information."
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(avatar_cjs_namespaceObject.AvatarFallback, {
+                                                className: "text-lg",
+                                                children: "JD"
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                        gap: 2,
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Avatar"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Click on the avatar to upload a custom one from your files."
-                                                    })
-                                                ]
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                                variant: "outline",
+                                                size: "sm",
+                                                children: "Upload"
                                             }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                    gap: 4,
-                                                    align: "center",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(avatar_cjs_namespaceObject.Avatar, {
-                                                            className: "h-20 w-20",
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(avatar_cjs_namespaceObject.AvatarImage, {
-                                                                    src: ""
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(avatar_cjs_namespaceObject.AvatarFallback, {
-                                                                    className: "text-lg",
-                                                                    children: "JD"
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                            gap: 2,
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                                    variant: "outline",
-                                                                    size: "sm",
-                                                                    children: "Upload"
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                                    variant: "ghost",
-                                                                    size: "sm",
-                                                                    children: "Remove"
-                                                                })
-                                                            ]
-                                                        })
-                                                    ]
-                                                })
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                                variant: "ghost",
+                                                size: "sm",
+                                                children: "Remove"
                                             })
                                         ]
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Personal Information"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Update your personal details here."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
-                                                className: "space-y-4",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Grid, {
-                                                        gap: 4,
-                                                        cols: 2,
-                                                        className: "md:grid-cols-2",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                                gap: 2,
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                        htmlFor: "firstName",
-                                                                        children: "First name"
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                                                                        id: "firstName",
-                                                                        value: formData.firstName,
-                                                                        onChange: (e)=>updateField('firstName', e.target.value)
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                                gap: 2,
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                        htmlFor: "lastName",
-                                                                        children: "Last name"
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                                                                        id: "lastName",
-                                                                        value: formData.lastName,
-                                                                        onChange: (e)=>updateField('lastName', e.target.value)
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                        gap: 2,
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                htmlFor: "username",
-                                                                children: "Username"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                                                                id: "username",
-                                                                value: formData.username,
-                                                                onChange: (e)=>updateField('username', e.target.value)
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                        gap: 2,
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                htmlFor: "bio",
-                                                                children: "Bio"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(textarea_cjs_namespaceObject.Textarea, {
-                                                                id: "bio",
-                                                                value: formData.bio,
-                                                                onChange: (e)=>updateField('bio', e.target.value),
-                                                                rows: 3
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                className: "text-xs text-muted-foreground",
-                                                                children: "Brief description for your profile. URLs are hyperlinked."
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                    children: "Save changes"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Personal Information"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Update your personal details here."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Grid, {
+                                    gap: 4,
+                                    cols: 2,
+                                    className: "md:grid-cols-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                            gap: 2,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                                    htmlFor: "firstName",
+                                                    children: "First name"
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                                    id: "firstName",
+                                                    value: formData.firstName,
+                                                    onChange: (e)=>updateField("firstName", e.target.value)
                                                 })
-                                            })
-                                        ]
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                            gap: 2,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                                    htmlFor: "lastName",
+                                                    children: "Last name"
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                                    id: "lastName",
+                                                    value: formData.lastName,
+                                                    onChange: (e_0)=>updateField("lastName", e_0.target.value)
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                    gap: 2,
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                            htmlFor: "username",
+                                            children: "Username"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                            id: "username",
+                                            value: formData.username,
+                                            onChange: (e_1)=>updateField("username", e_1.target.value)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                    gap: 2,
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                            htmlFor: "bio",
+                                            children: "Bio"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(textarea_cjs_namespaceObject.Textarea, {
+                                            id: "bio",
+                                            value: formData.bio,
+                                            onChange: (e_2)=>updateField("bio", e_2.target.value),
+                                            rows: 3
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                            className: "text-xs text-muted-foreground",
+                                            children: "Brief description for your profile. URLs are hyperlinked."
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
+                            className: "border-t px-6 py-4",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                children: "Save changes"
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+        $[7] = activeSection;
+        $[8] = formData;
+        $[9] = t5;
+    } else t5 = $[9];
+    let t6;
+    if ($[10] !== activeSection || $[11] !== formData) {
+        t6 = "account" === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                            className: "text-2xl font-bold",
+                            children: "Account"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                            className: "text-muted-foreground",
+                            children: "Manage your account settings and email preferences."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Email"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Your email address is used for login and notifications."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
+                            className: "space-y-4",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "space-y-2",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                        htmlFor: "email",
+                                        children: "Email address"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                        id: "email",
+                                        type: "email",
+                                        value: formData.email,
+                                        onChange: (e_3)=>updateField("email", e_3.target.value)
                                     })
                                 ]
-                            }),
-                            'account' === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            })
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
+                            className: "border-t px-6 py-4",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                children: "Update email"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    className: "border-destructive",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    className: "text-destructive",
+                                    children: "Danger Zone"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Irreversible and destructive actions."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
+                            className: "space-y-4",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                justify: "between",
+                                align: "center",
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                        gap: 0,
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Account"
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                className: "font-medium",
+                                                children: "Delete account"
                                             }),
                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your account settings and email preferences."
+                                                className: "text-sm text-muted-foreground",
+                                                children: "Permanently delete your account and all associated data."
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Email"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Your email address is used for login and notifications."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
-                                                className: "space-y-4",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                    className: "space-y-2",
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                        variant: "destructive",
+                                        children: "Delete account"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+        $[10] = activeSection;
+        $[11] = formData;
+        $[12] = t6;
+    } else t6 = $[12];
+    let t7;
+    if ($[13] !== activeSection || $[14] !== formData) {
+        t7 = "appearance" === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                            className: "text-2xl font-bold",
+                            children: "Appearance"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                            className: "text-muted-foreground",
+                            children: "Customize the appearance of the application."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Theme"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Select your preferred theme for the dashboard."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                            htmlFor: "theme",
+                                            children: "Theme"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
+                                            value: formData.theme,
+                                            onValueChange: (value_0)=>updateField("theme", value_0),
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
+                                                    id: "theme",
+                                                    className: "w-[200px]",
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {})
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.SelectContent, {
                                                     children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                            htmlFor: "email",
-                                                            children: "Email address"
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                                            value: "light",
+                                                            children: "Light"
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                                            value: "dark",
+                                                            children: "Dark"
                                                         }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                                                            id: "email",
-                                                            type: "email",
-                                                            value: formData.email,
-                                                            onChange: (e)=>updateField('email', e.target.value)
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                                            value: "system",
+                                                            children: "System"
                                                         })
                                                     ]
                                                 })
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                    children: "Update email"
-                                                })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        className: "border-destructive",
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        className: "text-destructive",
-                                                        children: "Danger Zone"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Irreversible and destructive actions."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
-                                                className: "space-y-4",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                    justify: "between",
-                                                    align: "center",
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                            htmlFor: "language",
+                                            children: "Language"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
+                                            value: formData.language,
+                                            onValueChange: (value_1)=>updateField("language", value_1),
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
+                                                    id: "language",
+                                                    className: "w-[200px]",
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {})
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.SelectContent, {
                                                     children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                            gap: 0,
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                    className: "font-medium",
-                                                                    children: "Delete account"
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                    className: "text-sm text-muted-foreground",
-                                                                    children: "Permanently delete your account and all associated data."
-                                                                })
-                                                            ]
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                                            value: "en",
+                                                            children: "English"
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                                            value: "es",
+                                                            children: "Spanish"
                                                         }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                            variant: "destructive",
-                                                            children: "Delete account"
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                                            value: "fr",
+                                                            children: "French"
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                                            value: "de",
+                                                            children: "German"
                                                         })
                                                     ]
                                                 })
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            'appearance' === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+        $[13] = activeSection;
+        $[14] = formData;
+        $[15] = t7;
+    } else t7 = $[15];
+    let t8;
+    if ($[16] !== activeSection || $[17] !== formData) {
+        t8 = "notifications" === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                            className: "text-2xl font-bold",
+                            children: "Notifications"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                            className: "text-muted-foreground",
+                            children: "Configure how you receive notifications."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Notification Preferences"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Choose what notifications you want to receive."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
+                            className: "space-y-6",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                    justify: "between",
+                                    align: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                            gap: 0.5,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                                    children: "Email notifications"
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                    className: "text-sm text-muted-foreground",
+                                                    children: "Receive notifications via email."
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
+                                            checked: formData.emailNotifications,
+                                            onCheckedChange: (checked)=>updateField("emailNotifications", checked)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(separator_cjs_namespaceObject.Separator, {}),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                    justify: "between",
+                                    align: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                            gap: 0.5,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                                    children: "Push notifications"
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                    className: "text-sm text-muted-foreground",
+                                                    children: "Receive push notifications on your device."
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
+                                            checked: formData.pushNotifications,
+                                            onCheckedChange: (checked_0)=>updateField("pushNotifications", checked_0)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(separator_cjs_namespaceObject.Separator, {}),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                    justify: "between",
+                                    align: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                            gap: 0.5,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                                    children: "Marketing emails"
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                    className: "text-sm text-muted-foreground",
+                                                    children: "Receive emails about new features and updates."
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
+                                            checked: formData.marketingEmails,
+                                            onCheckedChange: (checked_1)=>updateField("marketingEmails", checked_1)
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+        $[16] = activeSection;
+        $[17] = formData;
+        $[18] = t8;
+    } else t8 = $[18];
+    let t9;
+    if ($[19] !== activeSection || $[20] !== formData) {
+        t9 = "security" === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                            className: "text-2xl font-bold",
+                            children: "Security"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                            className: "text-muted-foreground",
+                            children: "Manage your security preferences."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Password"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Change your password here."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                            htmlFor: "currentPassword",
+                                            children: "Current password"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                            id: "currentPassword",
+                                            type: "password"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                            htmlFor: "newPassword",
+                                            children: "New password"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                            id: "newPassword",
+                                            type: "password"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                            htmlFor: "confirmPassword",
+                                            children: "Confirm password"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                            id: "confirmPassword",
+                                            type: "password"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
+                            className: "border-t px-6 py-4",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                children: "Update password"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Two-Factor Authentication"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Add an extra layer of security to your account."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                justify: "between",
+                                align: "center",
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                        gap: 0.5,
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Appearance"
-                                            }),
                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Customize the appearance of the application."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Theme"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Select your preferred theme for the dashboard."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
-                                                className: "space-y-4",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                htmlFor: "theme",
-                                                                children: "Theme"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
-                                                                value: formData.theme,
-                                                                onValueChange: (value)=>updateField('theme', value),
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
-                                                                        id: "theme",
-                                                                        className: "w-[200px]",
-                                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {})
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.SelectContent, {
-                                                                        children: [
-                                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                                                                value: "light",
-                                                                                children: "Light"
-                                                                            }),
-                                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                                                                value: "dark",
-                                                                                children: "Dark"
-                                                                            }),
-                                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                                                                value: "system",
-                                                                                children: "System"
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                htmlFor: "language",
-                                                                children: "Language"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
-                                                                value: formData.language,
-                                                                onValueChange: (value)=>updateField('language', value),
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
-                                                                        id: "language",
-                                                                        className: "w-[200px]",
-                                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {})
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.SelectContent, {
-                                                                        children: [
-                                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                                                                value: "en",
-                                                                                children: "English"
-                                                                            }),
-                                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                                                                value: "es",
-                                                                                children: "Spanish"
-                                                                            }),
-                                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                                                                value: "fr",
-                                                                                children: "French"
-                                                                            }),
-                                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                                                                value: "de",
-                                                                                children: "German"
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            'notifications' === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Notifications"
+                                                className: "font-medium",
+                                                children: "Enable 2FA"
                                             }),
                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Configure how you receive notifications."
+                                                className: "text-sm text-muted-foreground",
+                                                children: "Secure your account with two-factor authentication."
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Notification Preferences"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Choose what notifications you want to receive."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
-                                                className: "space-y-6",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                        justify: "between",
-                                                        align: "center",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                                gap: 0.5,
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                        children: "Email notifications"
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                        className: "text-sm text-muted-foreground",
-                                                                        children: "Receive notifications via email."
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
-                                                                checked: formData.emailNotifications,
-                                                                onCheckedChange: (checked)=>updateField('emailNotifications', checked)
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(separator_cjs_namespaceObject.Separator, {}),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                        justify: "between",
-                                                        align: "center",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                                gap: 0.5,
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                        children: "Push notifications"
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                        className: "text-sm text-muted-foreground",
-                                                                        children: "Receive push notifications on your device."
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
-                                                                checked: formData.pushNotifications,
-                                                                onCheckedChange: (checked)=>updateField('pushNotifications', checked)
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(separator_cjs_namespaceObject.Separator, {}),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                        justify: "between",
-                                                        align: "center",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                                gap: 0.5,
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                        children: "Marketing emails"
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                        className: "text-sm text-muted-foreground",
-                                                                        children: "Receive emails about new features and updates."
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
-                                                                checked: formData.marketingEmails,
-                                                                onCheckedChange: (checked)=>updateField('marketingEmails', checked)
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            })
-                                        ]
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
+                                        checked: formData.twoFactor,
+                                        onCheckedChange: (checked_2)=>updateField("twoFactor", checked_2)
                                     })
                                 ]
-                            }),
-                            'security' === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+        $[19] = activeSection;
+        $[20] = formData;
+        $[21] = t9;
+    } else t9 = $[21];
+    let t10;
+    if ($[22] !== activeSection) {
+        t10 = "billing" === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                            className: "text-2xl font-bold",
+                            children: "Billing"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                            className: "text-muted-foreground",
+                            children: "Manage your billing information and subscription."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Current Plan"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "You are currently on the Pro plan."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                justify: "between",
+                                align: "center",
+                                className: "rounded-lg border p-4",
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                        gap: 0,
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Security"
-                                            }),
                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your security preferences."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Password"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Change your password here."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
-                                                className: "space-y-4",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                htmlFor: "currentPassword",
-                                                                children: "Current password"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                                                                id: "currentPassword",
-                                                                type: "password"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                htmlFor: "newPassword",
-                                                                children: "New password"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                                                                id: "newPassword",
-                                                                type: "password"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                                                htmlFor: "confirmPassword",
-                                                                children: "Confirm password"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                                                                id: "confirmPassword",
-                                                                type: "password"
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
+                                                className: "font-semibold",
+                                                children: "Pro Plan"
                                             }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                    children: "Update password"
-                                                })
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                className: "text-sm text-muted-foreground",
+                                                children: "$29/month • Renews on Jan 1, 2025"
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Two-Factor Authentication"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Add an extra layer of security to your account."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                    justify: "between",
-                                                    align: "center",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                            gap: 0.5,
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                    className: "font-medium",
-                                                                    children: "Enable 2FA"
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                    className: "text-sm text-muted-foreground",
-                                                                    children: "Secure your account with two-factor authentication."
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
-                                                            checked: formData.twoFactor,
-                                                            onCheckedChange: (checked)=>updateField('twoFactor', checked)
-                                                        })
-                                                    ]
-                                                })
-                                            })
-                                        ]
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                        variant: "outline",
+                                        children: "Manage subscription"
                                     })
                                 ]
-                            }),
-                            'billing' === activeSection && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                                    children: "Payment Method"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                                    children: "Update your payment information."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                justify: "between",
+                                align: "center",
+                                className: "rounded-lg border p-4",
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                        gap: 3,
+                                        align: "center",
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Billing"
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Row, {
+                                                justify: "center",
+                                                align: "center",
+                                                className: "h-10 w-14 rounded bg-muted",
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CreditCard, {
+                                                    className: "h-5 w-5"
+                                                })
                                             }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your billing information and subscription."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                                gap: 0,
                                                 children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Current Plan"
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                        className: "font-medium",
+                                                        children: "•••• •••• •••• 4242"
                                                     }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "You are currently on the Pro plan."
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                        className: "text-sm text-muted-foreground",
+                                                        children: "Expires 12/25"
                                                     })
                                                 ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                    justify: "between",
-                                                    align: "center",
-                                                    className: "rounded-lg border p-4",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                            gap: 0,
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                    className: "font-semibold",
-                                                                    children: "Pro Plan"
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                    className: "text-sm text-muted-foreground",
-                                                                    children: "$29/month • Renews on Jan 1, 2025"
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                            variant: "outline",
-                                                            children: "Manage subscription"
-                                                        })
-                                                    ]
-                                                })
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
-                                                        children: "Payment Method"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
-                                                        children: "Update your payment information."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                    justify: "between",
-                                                    align: "center",
-                                                    className: "rounded-lg border p-4",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
-                                                            gap: 3,
-                                                            align: "center",
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Row, {
-                                                                    justify: "center",
-                                                                    align: "center",
-                                                                    className: "h-10 w-14 rounded bg-muted",
-                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CreditCard, {
-                                                                        className: "h-5 w-5"
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
-                                                                    gap: 0,
-                                                                    children: [
-                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                            className: "font-medium",
-                                                                            children: "•••• •••• •••• 4242"
-                                                                        }),
-                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                                            className: "text-sm text-muted-foreground",
-                                                                            children: "Expires 12/25"
-                                                                        })
-                                                                    ]
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                            variant: "ghost",
-                                                            size: "sm",
-                                                            children: "Edit"
-                                                        })
-                                                    ]
-                                                })
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
-                                                    variant: "outline",
-                                                    children: "Add payment method"
-                                                })
-                                            })
-                                        ]
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                        variant: "ghost",
+                                        size: "sm",
+                                        children: "Edit"
                                     })
                                 ]
                             })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardFooter, {
+                            className: "border-t px-6 py-4",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                variant: "outline",
+                                children: "Add payment method"
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+        $[22] = activeSection;
+        $[23] = t10;
+    } else t10 = $[23];
+    let t11;
+    if ($[24] !== t10 || $[25] !== t5 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8 || $[29] !== t9) {
+        t11 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("main", {
+            className: "flex-1 space-y-6",
+            children: [
+                t5,
+                t6,
+                t7,
+                t8,
+                t9,
+                t10
+            ]
+        });
+        $[24] = t10;
+        $[25] = t5;
+        $[26] = t6;
+        $[27] = t7;
+        $[28] = t8;
+        $[29] = t9;
+        $[30] = t11;
+    } else t11 = $[30];
+    let t12;
+    if ($[31] !== t11 || $[32] !== t4) {
+        t12 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+            minH: "screen",
+            className: "bg-background",
+            children: [
+                t2,
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                    gap: 8,
+                    flex: 1,
+                    className: "container mx-auto p-6",
+                    children: [
+                        t4,
+                        t11
+                    ]
+                })
+            ]
+        });
+        $[31] = t11;
+        $[32] = t4;
+        $[33] = t12;
+    } else t12 = $[33];
+    return t12;
 }
 exports.SettingsExample = __webpack_exports__.SettingsExample;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [