@uipath/apollo-wind 0.10.0 → 0.11.0-pr295.af4e744

package/dist/examples/settings-example.js

@@ -1,830 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Bell, CreditCard, Key, Palette, Shield, User } from "lucide-react";
-import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar.js";
-import { Button } from "../components/ui/button.js";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card.js";
-import { Input } from "../components/ui/input.js";
-import { Label } from "../components/ui/label.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
-import { Separator } from "../components/ui/separator.js";
-import { Switch } from "../components/ui/switch.js";
-import { Textarea } from "../components/ui/textarea.js";
-import { cn } from "../lib/index.js";
-import { Column, Grid, Row } from "../components/ui/layout/index.js";
-const navItems = [
-    {
-        id: 'profile',
-        label: 'Profile',
-        icon: /*#__PURE__*/ jsx(User, {
-            className: "h-4 w-4"
-        })
-    },
-    {
-        id: 'account',
-        label: 'Account',
-        icon: /*#__PURE__*/ jsx(Key, {
-            className: "h-4 w-4"
-        })
-    },
-    {
-        id: 'appearance',
-        label: 'Appearance',
-        icon: /*#__PURE__*/ jsx(Palette, {
-            className: "h-4 w-4"
-        })
-    },
-    {
-        id: 'notifications',
-        label: 'Notifications',
-        icon: /*#__PURE__*/ jsx(Bell, {
-            className: "h-4 w-4"
-        })
-    },
-    {
-        id: 'security',
-        label: 'Security',
-        icon: /*#__PURE__*/ jsx(Shield, {
-            className: "h-4 w-4"
-        })
-    },
-    {
-        id: 'billing',
-        label: 'Billing',
-        icon: /*#__PURE__*/ jsx(CreditCard, {
-            className: "h-4 w-4"
-        })
-    }
-];
-function SettingsExample() {
-    const [activeSection, setActiveSection] = useState('profile');
-    const [formData, setFormData] = 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__*/ jsxs(Column, {
-        minH: "screen",
-        className: "bg-background",
-        children: [
-            /*#__PURE__*/ jsx("header", {
-                className: "border-b",
-                children: /*#__PURE__*/ jsx(Row, {
-                    h: 14,
-                    align: "center",
-                    className: "container mx-auto px-4",
-                    children: /*#__PURE__*/ jsx("h1", {
-                        className: "text-lg font-semibold",
-                        children: "Settings"
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsxs(Row, {
-                gap: 8,
-                flex: 1,
-                className: "container mx-auto p-6",
-                children: [
-                    /*#__PURE__*/ jsx("aside", {
-                        className: "w-56 shrink-0",
-                        children: /*#__PURE__*/ jsx("nav", {
-                            className: "space-y-1",
-                            children: navItems.map((item)=>/*#__PURE__*/ jsxs("button", {
-                                    onClick: ()=>setActiveSection(item.id),
-                                    className: 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))
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs("main", {
-                        className: "flex-1 space-y-6",
-                        children: [
-                            'profile' === activeSection && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Profile"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your public profile information."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Avatar"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Click on the avatar to upload a custom one from your files."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardContent, {
-                                                children: /*#__PURE__*/ jsxs(Row, {
-                                                    gap: 4,
-                                                    align: "center",
-                                                    children: [
-                                                        /*#__PURE__*/ jsxs(Avatar, {
-                                                            className: "h-20 w-20",
-                                                            children: [
-                                                                /*#__PURE__*/ jsx(AvatarImage, {
-                                                                    src: ""
-                                                                }),
-                                                                /*#__PURE__*/ jsx(AvatarFallback, {
-                                                                    className: "text-lg",
-                                                                    children: "JD"
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ jsxs(Row, {
-                                                            gap: 2,
-                                                            children: [
-                                                                /*#__PURE__*/ jsx(Button, {
-                                                                    variant: "outline",
-                                                                    size: "sm",
-                                                                    children: "Upload"
-                                                                }),
-                                                                /*#__PURE__*/ jsx(Button, {
-                                                                    variant: "ghost",
-                                                                    size: "sm",
-                                                                    children: "Remove"
-                                                                })
-                                                            ]
-                                                        })
-                                                    ]
-                                                })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Personal Information"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Update your personal details here."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                className: "space-y-4",
-                                                children: [
-                                                    /*#__PURE__*/ jsxs(Grid, {
-                                                        gap: 4,
-                                                        cols: 2,
-                                                        className: "md:grid-cols-2",
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                gap: 2,
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                        htmlFor: "firstName",
-                                                                        children: "First name"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(Input, {
-                                                                        id: "firstName",
-                                                                        value: formData.firstName,
-                                                                        onChange: (e)=>updateField('firstName', e.target.value)
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                gap: 2,
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                        htmlFor: "lastName",
-                                                                        children: "Last name"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(Input, {
-                                                                        id: "lastName",
-                                                                        value: formData.lastName,
-                                                                        onChange: (e)=>updateField('lastName', e.target.value)
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsxs(Column, {
-                                                        gap: 2,
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Label, {
-                                                                htmlFor: "username",
-                                                                children: "Username"
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Input, {
-                                                                id: "username",
-                                                                value: formData.username,
-                                                                onChange: (e)=>updateField('username', e.target.value)
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsxs(Column, {
-                                                        gap: 2,
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Label, {
-                                                                htmlFor: "bio",
-                                                                children: "Bio"
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Textarea, {
-                                                                id: "bio",
-                                                                value: formData.bio,
-                                                                onChange: (e)=>updateField('bio', e.target.value),
-                                                                rows: 3
-                                                            }),
-                                                            /*#__PURE__*/ jsx("p", {
-                                                                className: "text-xs text-muted-foreground",
-                                                                children: "Brief description for your profile. URLs are hyperlinked."
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ jsx(Button, {
-                                                    children: "Save changes"
-                                                })
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            'account' === activeSection && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Account"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your account settings and email preferences."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Email"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Your email address is used for login and notifications."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardContent, {
-                                                className: "space-y-4",
-                                                children: /*#__PURE__*/ jsxs("div", {
-                                                    className: "space-y-2",
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(Label, {
-                                                            htmlFor: "email",
-                                                            children: "Email address"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(Input, {
-                                                            id: "email",
-                                                            type: "email",
-                                                            value: formData.email,
-                                                            onChange: (e)=>updateField('email', e.target.value)
-                                                        })
-                                                    ]
-                                                })
-                                            }),
-                                            /*#__PURE__*/ jsx(CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ jsx(Button, {
-                                                    children: "Update email"
-                                                })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        className: "border-destructive",
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        className: "text-destructive",
-                                                        children: "Danger Zone"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Irreversible and destructive actions."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardContent, {
-                                                className: "space-y-4",
-                                                children: /*#__PURE__*/ jsxs(Row, {
-                                                    justify: "between",
-                                                    align: "center",
-                                                    children: [
-                                                        /*#__PURE__*/ jsxs(Column, {
-                                                            gap: 0,
-                                                            children: [
-                                                                /*#__PURE__*/ jsx("p", {
-                                                                    className: "font-medium",
-                                                                    children: "Delete account"
-                                                                }),
-                                                                /*#__PURE__*/ jsx("p", {
-                                                                    className: "text-sm text-muted-foreground",
-                                                                    children: "Permanently delete your account and all associated data."
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ jsx(Button, {
-                                                            variant: "destructive",
-                                                            children: "Delete account"
-                                                        })
-                                                    ]
-                                                })
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            'appearance' === activeSection && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Appearance"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Customize the appearance of the application."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Theme"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Select your preferred theme for the dashboard."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                className: "space-y-4",
-                                                children: [
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Label, {
-                                                                htmlFor: "theme",
-                                                                children: "Theme"
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(Select, {
-                                                                value: formData.theme,
-                                                                onValueChange: (value)=>updateField('theme', value),
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(SelectTrigger, {
-                                                                        id: "theme",
-                                                                        className: "w-[200px]",
-                                                                        children: /*#__PURE__*/ jsx(SelectValue, {})
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(SelectContent, {
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                value: "light",
-                                                                                children: "Light"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                value: "dark",
-                                                                                children: "Dark"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                value: "system",
-                                                                                children: "System"
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Label, {
-                                                                htmlFor: "language",
-                                                                children: "Language"
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(Select, {
-                                                                value: formData.language,
-                                                                onValueChange: (value)=>updateField('language', value),
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(SelectTrigger, {
-                                                                        id: "language",
-                                                                        className: "w-[200px]",
-                                                                        children: /*#__PURE__*/ jsx(SelectValue, {})
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(SelectContent, {
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                value: "en",
-                                                                                children: "English"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                value: "es",
-                                                                                children: "Spanish"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                value: "fr",
-                                                                                children: "French"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                value: "de",
-                                                                                children: "German"
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            'notifications' === activeSection && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Notifications"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Configure how you receive notifications."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Notification Preferences"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Choose what notifications you want to receive."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                className: "space-y-6",
-                                                children: [
-                                                    /*#__PURE__*/ jsxs(Row, {
-                                                        justify: "between",
-                                                        align: "center",
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                gap: 0.5,
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                        children: "Email notifications"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx("p", {
-                                                                        className: "text-sm text-muted-foreground",
-                                                                        children: "Receive notifications via email."
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Switch, {
-                                                                checked: formData.emailNotifications,
-                                                                onCheckedChange: (checked)=>updateField('emailNotifications', checked)
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Separator, {}),
-                                                    /*#__PURE__*/ jsxs(Row, {
-                                                        justify: "between",
-                                                        align: "center",
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                gap: 0.5,
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                        children: "Push notifications"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx("p", {
-                                                                        className: "text-sm text-muted-foreground",
-                                                                        children: "Receive push notifications on your device."
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Switch, {
-                                                                checked: formData.pushNotifications,
-                                                                onCheckedChange: (checked)=>updateField('pushNotifications', checked)
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Separator, {}),
-                                                    /*#__PURE__*/ jsxs(Row, {
-                                                        justify: "between",
-                                                        align: "center",
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                gap: 0.5,
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                        children: "Marketing emails"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx("p", {
-                                                                        className: "text-sm text-muted-foreground",
-                                                                        children: "Receive emails about new features and updates."
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Switch, {
-                                                                checked: formData.marketingEmails,
-                                                                onCheckedChange: (checked)=>updateField('marketingEmails', checked)
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            'security' === activeSection && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Security"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your security preferences."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Password"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Change your password here."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                className: "space-y-4",
-                                                children: [
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Label, {
-                                                                htmlFor: "currentPassword",
-                                                                children: "Current password"
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Input, {
-                                                                id: "currentPassword",
-                                                                type: "password"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Label, {
-                                                                htmlFor: "newPassword",
-                                                                children: "New password"
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Input, {
-                                                                id: "newPassword",
-                                                                type: "password"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: "space-y-2",
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Label, {
-                                                                htmlFor: "confirmPassword",
-                                                                children: "Confirm password"
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Input, {
-                                                                id: "confirmPassword",
-                                                                type: "password"
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ jsx(Button, {
-                                                    children: "Update password"
-                                                })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Two-Factor Authentication"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Add an extra layer of security to your account."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardContent, {
-                                                children: /*#__PURE__*/ jsxs(Row, {
-                                                    justify: "between",
-                                                    align: "center",
-                                                    children: [
-                                                        /*#__PURE__*/ jsxs(Column, {
-                                                            gap: 0.5,
-                                                            children: [
-                                                                /*#__PURE__*/ jsx("p", {
-                                                                    className: "font-medium",
-                                                                    children: "Enable 2FA"
-                                                                }),
-                                                                /*#__PURE__*/ jsx("p", {
-                                                                    className: "text-sm text-muted-foreground",
-                                                                    children: "Secure your account with two-factor authentication."
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ jsx(Switch, {
-                                                            checked: formData.twoFactor,
-                                                            onCheckedChange: (checked)=>updateField('twoFactor', checked)
-                                                        })
-                                                    ]
-                                                })
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            'billing' === activeSection && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold",
-                                                children: "Billing"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Manage your billing information and subscription."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Current Plan"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "You are currently on the Pro plan."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardContent, {
-                                                children: /*#__PURE__*/ jsxs(Row, {
-                                                    justify: "between",
-                                                    align: "center",
-                                                    className: "rounded-lg border p-4",
-                                                    children: [
-                                                        /*#__PURE__*/ jsxs(Column, {
-                                                            gap: 0,
-                                                            children: [
-                                                                /*#__PURE__*/ jsx("p", {
-                                                                    className: "font-semibold",
-                                                                    children: "Pro Plan"
-                                                                }),
-                                                                /*#__PURE__*/ jsx("p", {
-                                                                    className: "text-sm text-muted-foreground",
-                                                                    children: "$29/month • Renews on Jan 1, 2025"
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ jsx(Button, {
-                                                            variant: "outline",
-                                                            children: "Manage subscription"
-                                                        })
-                                                    ]
-                                                })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Card, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                        children: "Payment Method"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                        children: "Update your payment information."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(CardContent, {
-                                                children: /*#__PURE__*/ jsxs(Row, {
-                                                    justify: "between",
-                                                    align: "center",
-                                                    className: "rounded-lg border p-4",
-                                                    children: [
-                                                        /*#__PURE__*/ jsxs(Row, {
-                                                            gap: 3,
-                                                            align: "center",
-                                                            children: [
-                                                                /*#__PURE__*/ jsx(Row, {
-                                                                    justify: "center",
-                                                                    align: "center",
-                                                                    className: "h-10 w-14 rounded bg-muted",
-                                                                    children: /*#__PURE__*/ jsx(CreditCard, {
-                                                                        className: "h-5 w-5"
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ jsxs(Column, {
-                                                                    gap: 0,
-                                                                    children: [
-                                                                        /*#__PURE__*/ jsx("p", {
-                                                                            className: "font-medium",
-                                                                            children: "•••• •••• •••• 4242"
-                                                                        }),
-                                                                        /*#__PURE__*/ jsx("p", {
-                                                                            className: "text-sm text-muted-foreground",
-                                                                            children: "Expires 12/25"
-                                                                        })
-                                                                    ]
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ jsx(Button, {
-                                                            variant: "ghost",
-                                                            size: "sm",
-                                                            children: "Edit"
-                                                        })
-                                                    ]
-                                                })
-                                            }),
-                                            /*#__PURE__*/ jsx(CardFooter, {
-                                                className: "border-t px-6 py-4",
-                                                children: /*#__PURE__*/ jsx(Button, {
-                                                    variant: "outline",
-                                                    children: "Add payment method"
-                                                })
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
-export { SettingsExample };